/* VARIABLES */
:root {
  /* Colors */
  --color-primary: #139182;
  --color-secondary: #A44A3F;
  --color-coral: #F19C79;
  --color-aqua: #79E5D8;
  --color-lime: #D4E09B;
  --color-olive: #B0C55E;
  --color-dark: #1E3D3A;
  --color-green: #315450;
  --color-defoult: #939393;
  --color-gray: #A5A5A5;
  --color-white: #FFFFFF;
  --color-light: #F4F4F4;
  --color-black: #152D2A;
  /* Fonts Size */
  --font-sm: clamp(0.5rem, 3vw, 0.75rem);
  --font-md: clamp(0.8rem, 3vw, 1.125rem);
  --font-lg: clamp(1rem, 3vw, 2rem);
  --font-xl: clamp(1.6rem, 3vw, 3.125rem);
  --font-2xl: clamp(3.75rem, 3vw, 5.5rem);
  --font-3xl: clamp(4.75rem, 3vw, 6.125rem);
  --font-hero: clamp(
    .8rem,
    calc(20px + (12 * ((100vw - 745px) / 655))),
    2rem
  );
  /* Paddings & Margins */
  --space-xxs: clamp(4px, 3vw, 5px);
  --space-xs: clamp(8px, 3vw, 10px);
  --space-sm: clamp(11px, 3vw, 15px);
  --space-md: clamp(14px, 3vw, 20px);
  --space-lg: clamp(18px, 3vw, 25px);
  --space-xl: clamp(21px, 3vw, 30px);
  --space-1xl: clamp(28px, 3vw, 40px);
  --space-2xl: clamp(35px, 3vw, 50px);
  --space-3xl: clamp(49px, 3vw, 70px);
  --space-4xl: clamp(56px, 3vw, 80px);
  --space-5xl: clamp(70px, 3vw, 100px);
  --space-6xl: clamp(126px, 3vw, 180px);
  --space-cont: 1400px;
  /* Borde Radius */
  --radius-pill: 100vmax; /* ya lo tienes */
  --radius-xl: 20px;     /* cards / contenedores */
  --radius-lg: 14px;      /* chat */
  --radius-md: 11px;      /* bubble grande, .chat .msn */
  --radius-sm: 6px;       /* bubble chica */
  /* Utilities */
  --max-bg-deco: 500px;
  --chat-w: 300px;
  --parr-max: 620px;
  --card-mh: 592px;
}

@media (color-gamut: p3) {
  :root {
	--color-primary: color(display-p3 0.0745 0.5686 0.5098);       /* #139182 */
	--color-secondary: color(display-p3 0.6431 0.2902 0.2471);     /* #A44A3F */
	--color-coral: color(display-p3 0.9451 0.6118 0.4745);          /* #F19C79 */
	--color-aqua: color(display-p3 0.4745 0.8980 0.8471);        /* #79E5D8 */
    --color-lime: color(display-p3 0.831373 0.878431 0.607843);        /* #D4E09B */
    --color-olive: color(display-p3 0.690196 0.772549 0.368627);       /* #B0C55E */
	--color-dark: color(display-p3 0.1176 0.2392 0.2275);     /* #1E3D3A */
    --color-green: color(display-p3 0.192157 0.329412 0.313725) ; /* #315450 */
	--color-defoult: color(display-p3 0.5765 0.5765 0.5765);  /* #939393 */
	--color-gray: color(display-p3 0.647059 0.647059 0.647059);
	--color-white: color(display-p3 1 1 1);                   /* #FFFFFF */
	--color-light: color(display-p3 0.9569 0.9569 0.9569);      /* #F4F4F4 */
	--color-black: color(display-p3 0.0824 0.1765 0.1647);       /* #152D2A */
  }
}


/* modal contact form */
[modal]{
	opacity:0;width:450px;max-width:90%;min-height:1px;font-size:1rem;overflow:hidden;
	position:fixed;top:0;right:0;background:rgba(0,0,0,0.65);backdrop-filter: blur(20px) saturate(2);
	background:linear-gradient(180deg,rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%);
	transition:all 0.5s ease;z-index:101;border-radius: 0px 0px 0px 30px;
	transform:translate(100%,-100%);padding:50px;box-shadow:0px 10px 50px rgba(0,0,0,0.4);
	
	/* elements */
	& [close]{color:var(--color-aqua);font-size:3rem;position:fixed;top:0px;right:0px;text-decoration:none;padding:10px;z-index:101;}
	& [wrap]{display:flex;align-items:center;flex-direction:column;justify-content:start;height:100%;overflow:hidden;}
	& video{object-fit:cover;width:100%;height:100%;display:none;}
	& form{padding:1px;margin:auto;width:800px;max-width:100%;display:flex;flex-direction:column;gap:1rem;position:relative;
		opacity:0;transition:all 0.5s ease-in-out;transition-delay:0.5s;}
	& h3{margin:0;font-size:1.2rem;line-height:1.2;color:var(--color-aqua);}
	& label{display:flex;gap:0;background:rgba(0,0,0,0.8);outline: 1px solid black;transition:all 0.3s ease;}
	& label:focus-within{outline: 1px solid var(--color-aqua);}
	& label>span{padding:12px 20px;min-width:50px;color:var(--color-aqua);opacity:0.9;}
	& input,textarea{border:0;background:none;color:var(--color-aqua);font-size:1.1rem;padding:10px 20px;
		line-height:1.2;flex-grow:1;flex-shrink:1;outline:none;}
	& textarea{height:200px;}
	& button{margin:auto;}
	& ::placeholder{color:rgba(255,255,255,0.3);font-style:italic;}
	& [notice]{display:none;}
	& [thankyou]{opacity:0;height:0;transition:all 0.5s ease;margin:auto;z-index:101;text-align:center;}
	/* open */
	&[open]{
		opacity:1;transform:translate(0, 0);
		& form{opacity:1;}
	}
	/* success */
	&[success]{
		[thankyou]{opacity:1;height:auto;}
		form{opacity:0;display:none;}
	}
	&[error]{
		[notice]{display:block;}
		[notice] h3{color:var(--color-coral);font-size:1.6rem;}
	}
	/* breakpoint */
	@media (max-width: 743px){
		padding:50px 30px;
	}
}

/* BASE */
body {
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-lg);
  background-color: var(--color-light);
  color: var(--color-defoult);
  margin: 0;
  padding: 0;
}
.container {
  max-width: var(--space-cont);
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
}
* { box-sizing: border-box; }
section { margin-top: var(--space-6xl); position: relative; }
h1,h2,h3,h4,h5,h6{ font-weight: 400; text-wrap: balance; }
.bg-primary { background-color: var(--color-primary); }
.bg-coral { background-color: var(--color-coral); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-dark { background-color: var(--color-dark); }
.bg-white { background-color: var(--color-white); }
.bg-lime { background-color: var(--color-lime); }
.color-coral { color: var(--color-coral) !important; }

/* HEADER */
#main-header {
  padding: var(--space-xl) 0;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* active */
  &.active:before{
  	content:"";
	position:absolute;
	inset:0; 
	/*background: linear-gradient(180deg,rgba(244, 244, 244, 0.7) 1%, rgba(244, 244, 244, 0) 100%); */
	backdrop-filter: blur(20px);
	-webkit-mask: linear-gradient(to bottom, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
	mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  }
}

#main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 16%;
}

#logo .text {
  fill: var(--color-white);
  transition: fill 0.6s ease;
}

#main-header.active #logo .text{
  fill: var(--color-black);
}
.logo svg {
	with:100%;
	height: auto;
}

.nav-list {
  display: flex;
  list-style: none;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-3xl);
  margin: 0;
  background-color: rgba(0, 0, 0, 0.7); /* fondo oscuro translúcido */
  backdrop-filter: blur(10px); /* desenfoque del fondo */
  -webkit-backdrop-filter: blur(10px); /* compatibilidad con Safari */
  border-radius: var(--radius-pill); /* estilo cápsula */
  color: var(--color-primary); 
  font-weight: 400;
}

.nav-list li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  transform:scale(1);
  transition:all 0.3s ease;
  &:hover{transform:scale(1.1);}
}

.nav-list a {
  color: var(--color-aqua);
  font-size: var(--font-md);
  text-decoration: none;
  font-weight: 400;
}

.btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-lg);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--font-md);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  transform:scale(1);
  &:hover{transform:scale(1.1);}
}

.btn span {
	position: absolute;
	bottom: calc(100% + var(--space-xxs));
	font-size: var(--font-sm);
	font-weight: 400;
	left: 0;
	width: 100%;
	text-align: center;
	opacity: .52;
  transition: fill 0.6s ease;
}

#main-header.active .btn span {
  color: var(--color-black);
}

/* HERO */
#hero {
  background-color: var(--color-black);
  padding: var(--space-6xl) 0 0;
  position: relative;
  margin: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#hero .container {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-5xl);
  align-items: center;
}

#hero h1 {
  font-size: var(--font-3xl);
  color: var(--color-aqua);
  font-weight: 500;
  line-height: 1;
  width: 50%;
  margin: 0;
  text-shadow: 0px 0px 34px rgba(0,0,0,0.4);
}

#hero h1 svg {
  width: var(--space-2xl);
  filter: drop-shadow(0px 0px 34px rgba(0,0,0,0.4));
}

.hero-widget {
  width: 41%;
  position: relative;
  margin-right: 7%;
  font-size: var(--font-hero);
  opacity: 0;
  transform: translateY(100px);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  transition-delay: .1s;
}

.hero-widget.active {
  opacity: 1;
  transform: translateY(0px);
}

.hero-chat {
  background-color: var(--color-white);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  margin: 0 0 calc(-1 * var(--space-5xl));
  position: relative;
}

.hero-widget > span {
  content: "";
	width: 100%;
	height: calc(100% + var(--space-5xl));
	position: absolute;
	border-radius: var(--radius-xl);
	left: 0;
	top: 0;
  transform: rotate(0deg);
  transition: transform .6s ease-in-out;
  transition-delay: .6s;
}

.hero-widget.active > span.bg-primary {
  transform: rotate(6deg);
}

.hero-widget.active > span.bg-coral {
  transform: rotate(11deg);
}

.hero-widget.active > span.bg-secondary {
  transform: rotate(16deg);
}

.hero-chat > * { will-change: transform, opacity; }


.hero-widget svg {
  width: var(--space-xl);
  display: block;
  margin: -3% 0 15% -3%;
  color: var(--color-primary);
}

.hero-widget .send {
  position: relative;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  transition-delay: 1.1s;
}

.hero-widget.active  .send {
  opacity: 1;
}

.send {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-lg) var(--space-2xl);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0;
  margin: 0;
}

.send::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: var(--space-md) solid var(--color-primary);
  border-right: var(--space-md) solid transparent;
}

.hero-widget p {
  margin: var(--space-xl) 0;
}

.hero-widget .hero-chat > p {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.hero-widget .hero-chat > p:first-of-type {
  transition-delay: 1.6s;
}

.hero-widget .hero-chat > p:last-of-type {
  transition-delay: 2.1s;
}

.hero-widget.active .hero-chat > p {
  opacity: 1;
}


.hero-widget .dots {
	color: var(--color-primary);
	margin: 5% 0;
}

.hero-chat .dots { display: inline-flex; gap: 4px; }
.hero-chat .dots .dot { display: inline-block; transform: translateY(0); }

.hero-widget.active .hero-chat .dots .dot {
  animation: dot-bob 900ms ease-in-out 4;
}
.hero-widget.active .hero-chat .dots .dot:nth-child(2) { animation-delay: 120ms; }
.hero-widget.active .hero-chat .dots .dot:nth-child(3) { animation-delay: 240ms; }

@keyframes dot-bob {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-6px); } /* súbelo/bájalo a tu gusto */
}

.hero-widget .msn {
	background-color: var(--color-light);
	border-radius: var(--radius-xl);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md) var(--space-xl);
}

.hero-widget .msn p {
	color: var(--color-gray);
	margin: 0;
	font-size: clamp(
    .5rem,
    calc(20px + (12 * ((100vw - 745px) / 655))),
    .75rem
  );;
}

.hero-widget .msn span {
	background-color: var(--color-primary);
	width: var(--space-xl);
	height: var(--space-xl);
	border-radius: 50%; 
	position: relative;
}

.hero-widget .msn span div {
	background-color: var(--color-white);
	width: 1px;
	height: var(--space-xs);
	position: absolute;
	left: 50%;
	top: var(--space-xs);
}

.hero-widget .msn span div::before {
	content: "";
	background-color: var(--color-white);
	width: var(--space-xxs);
	height: 1px;
	position: absolute;
	left: 0;
	top: -1px;
	transform: rotate(40deg);
	transform-origin: left;
}
.hero-widget .msn span div::after {
	content: "";
	background-color: var(--color-white);
  width: var(--space-xxs);
	height: 1px;
	position: absolute;
	right: 0;
	top: -1px;
	transform: rotate(-40deg);
	transform-origin: right;
}
/* INTRO */
.bg-img{
  position: absolute;
  top: 0;
  right: 0;
  width: 30.5vw;
  max-width: var(--max-bg-deco);
  pointer-events: none;
}

.parraf {
  width: 50%;
  max-width: var(--parr-max);
  padding-left: var(--space-6xl);
}

.parraf h2 {
  font-size: var(--font-lg);
  color: var(--color-dark)
}

.cards-dig {
  display: flex;
  justify-content: space-between;
  padding: var(--space-6xl) 0;
}

.feature-card {
  width: 31.5%;
  height: 42.3vw;
  max-height: var(--card-mh);
  border-radius: var(--radius-xl);
  color: var(--color-aqua);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-blend-mode: overlay;
  padding: 8% 4% 5%;
  transform: translateY(0);
  transition: transform 0.3s ease-out;
} 

.feature-card.bg-primary {
  transform: translateY(var(--space-6xl)); 
}

.feature-card.bg-secondary {
  color: var(--color-coral);
  padding-top: 12.5%;
  transform: translateY(calc(-1 * var(--space-6xl)));
}

.feature-card span {
  font-size: 62px;
  line-height: 1;
  margin: 0 auto auto;
}

.feature-card h3 {
  color: var(--color-white);
  margin: 0 0 var(--space-xxs);
  font-size: var(--font-lg);
}

.feature-card p {
  margin: 0;
}


/* IMAGE SECTION */
.image-intro img {
  width: 100%;
  border-radius:30px;
  overflow:hidden;
}

.image-intro svg {
  color: var(--color-primary);
  position: absolute;
  width: var(--space-5xl);
  left: calc(50% - var(--space-2xl));
  bottom: calc(-1 * var(--space-xl));
}

.image-intro .send {
  position: absolute;
  left: calc(50% + var(--space-xl));
  bottom: var(--space-4xl);
}

/* CHATS SECTION */

.chats .bg-img {
  top: calc(-1 * var(--space-6xl));
}

.chats .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chats-container {
  width: 50%;
  position: relative;
  padding-right: var(--space-6xl);
}

.chat {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  max-width: var(--chat-w);
  width: 22vw;
}

.chat svg {
  width: var(--space-md);
  display: block;
  margin: calc(-1 * var(--space-sm)) 0 var(--space-2xl) calc(-1 * var(--space-sm));
}

.chat .send {
  position: relative;
  font-size: var(--font-md);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0;
}

.chat .send::after {
  bottom: calc(-1 * var(--space-xs));
  border-right: var(--space-xs) solid transparent;
}

.chat p {
  margin: var(--space-sm) 0;
  font-size: var(--font-md);
  color: var(--color-white);
}

.chat .dots {
  margin: var(--space-2xl) 0 var(--space-xs);
  font-size: var(--font-md);
}

.chat .msn {
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
}

.chat .msn p {
  color: var(--color-gray);
  margin: 0;
  font-size: var(--font-sm);
}

.chat .msn span {
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: 50%; 
  position: relative;
}

.chat .msn span div {
  background-color: var(--color-white);
  width: 1px;
  height: var(--space-xxs);
  position: absolute;
  left: 50%;
  top: var(--space-xxs);
}

.chat .msn span div::before {
  content: "";
  background-color: var(--color-white);
  width: var(--space-xxs);
  height: 1px;
  position: absolute;
  left: 0;
  top: -1px;
  transform: rotate(40deg);
  transform-origin: left;
}

.chat .msn span div::after {
  content: "";
  background-color: var(--color-white);
  width: var(--space-xxs);
  height: 1px;
  position: absolute;
  right: 0;
  top: -1px;
  transform: rotate(-40deg);
  transform-origin: right;
}

.chat.bg-dark svg { color: var(--color-aqua); }
.chat.bg-lime svg { color: var(--color-olive); }
.chat.bg-white svg { color: var(--color-secondary); }

.chat.bg-dark .send{ background-color: var(--color-aqua); }
.chat.bg-lime .send{ background-color: var(--color-olive); }
.chat.bg-white .send{ background-color: var(--color-secondary); }

.chat.bg-dark .send::after{ border-top: var(--space-xs) solid var(--color-aqua); }
.chat.bg-lime .send::after{ border-top: var(--space-xs) solid var(--color-olive); }
.chat.bg-white .send::after{ border-top: var(--space-xs) solid var(--color-secondary); }

.chat.bg-dark .msn{ background-color: var(--color-green); }
.chat.bg-lime .msn{ background-color: var(--color-olive);  }
.chat.bg-white .msn{ background-color: var(--color-light); }

.chat.bg-lime .msn p { color: var(--color-white); }

.chat.bg-dark .msn span { background-color: var(--color-aqua); }
.chat.bg-lime .msn span { background-color: var(--color-olive); mix-blend-mode: multiply;}
.chat.bg-white .msn span { background-color: var(--color-secondary); }

.chat.bg-white p { color: inherit; }

.chat.bg-dark .dots { color: var(--color-aqua); }
.chat.bg-lime .dots{ color: var(--color-olive); }
.chat.bg-white .dots{ color: var(--color-secondary); }

.chat.bg-dark .msn span div { background-color: var(--color-green); }
.chat.bg-dark .msn span div::before { background-color: var(--color-green); }
.chat.bg-dark .msn span div::after { background-color: var(--color-green); }

.chat.bg-dark { position: relative; margin-left: auto; }
.chat.bg-lime, .chat.bg-white { position: absolute; top: 50%; right: var(--space-6xl); }
.chat.bg-lime { transform: translate(-40%, -50%) scale(.9); }
.chat.bg-white { transform: translate(-80%, -50%) scale(.8); }

/* ADMIN PANEL SECTION */
.admin-panel .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.admin-panel .box {
  width: calc(50% - var(--space-md));
  background-color: var(--color-white);
  margin-bottom: calc(2 * var(--space-md));
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-4xl);
}

.admin-panel .box span {
  color: var(--color-primary);
  font-size: var(--font-xl);
  margin-bottom: var(--space-4xl);
}

.admin-panel .box h3 {
  color: var(--color-primary);
  font-size: var(--font-lg);
  margin: 0;
}

.admin-panel .box p {
  margin: 0;
}

.admin-panel .box svg {
  color: var(--color-primary);
  width: var(--space-1xl);
  margin-bottom: var(--space-4xl);
}

.admin-panel .box.secondary h3, .admin-panel .box.secondary span { color: var(--color-secondary); }

.admin-panel .bg-img {
  top: calc(100% - var(--space-5xl));
  right: calc(50% - var(--space-4xl));
}

/* PRICING SECTION */


.pricing .container {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-6xl);
}

.pricing .container ul {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.pricing .price {
  width: 30%;
}
.pricing .logo_p {
  width: 30%;
  text-align: center;
}

.pricing .logo_p svg {
  width: 65%;
  display: block;
  margin: 0 auto var(--space-2xl);
}


.pricing .logo_p .btn span {
  bottom: calc(-1 * var(--space-lg));
  opacity: .6;
  color: var(--color-defoult);
}

.pricing .price h2 {
  font-size: var(--font-lg);
  margin: 0;
  color: var(--color-dark);
}

.pricing .price p {
  margin: var(--space-xxs) 0 var(--space-xs);
}

.pricing .price h3 {
  font-size: var(--font-3xl);
  margin: 0;
  color: var(--color-dark);
  line-height: 1;
}

/* QUOTES SECTION */


.quotes blockquote {
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: calc(10% + var(--space-lg));
  opacity: 0;
  width: 80%;
}

.quotes .container blockquote:first-of-type {
  position: relative;
  left: 0;
  opacity: 1;
}

.quotes blockquote p {
  color: var(--color-dark);
  margin: 0;
  display: inline-block;
}

.quotes blockquote p::after {
  content: "”";
  display: inline;
}

.quotes blockquote p::before {
  content: "“";
  position: absolute;
  left: -16px;
  top: 0;
}


.quotes blockquote cite {
  font-style: normal;
  display: inline-block;
}

/* TRUST SECTION */

.trusted .container {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5xl) 0 var(--space-5xl) var(--space-6xl);
  width: 90%;
  max-width: 1215px;
}

.trusted .bg-img {
  right: var(--space-6xl);
}

.trusted p {
  margin: 0 0 var(--space-5xl);
  color: var(--color-dark);
  width: 40%;
}

.trusted .logos {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-xl);
  overflow-x: auto;
  overflow-y: hidden;

  /* HIDE SCROLLBAR (Firefox / IE-Edge Legacy / WebKit) */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE 10+ / Edge Legacy */
  -webkit-overflow-scrolling: touch; /* inercia en iOS */
}

.trusted .logos::-webkit-scrollbar { /* Chrome, Safari, iOS */
  width: 0;
  height: 0;
  display: none;
}

/* FAQs SECTION */

.faqs .container { display: flex; justify-content: space-around; }
.faqs header { width: 20%; }
.faqs h2, .faqs h3, .faqs p { font-size: var(--font-lg); margin: 0; }
.faqs h2, .faqs h3, .faqs .btn span { color: var(--color-dark); }
.faqs .faqs-list { width: 60%; }
.faqs .btn span { opacity: 1; }
.faqs header p { margin-bottom: var(--space-4xl); }
.faqs .faqs-item { margin-bottom: var(--space-2xl); }

/* CTA SECTION */
.cta .bg-img{
  top: auto;
  right: auto;
  left: 0;
  bottom: calc(-1 * var(--space-6xl));
  transform: scaleX(-1);
}
.cta .container { 
  display: flex; 
  justify-content: space-between; 
  color: var(--color-aqua);
  padding: 5%;
  align-items: end;
  border-radius: var(--radius-xl);
  overflow: hidden;
  width: 90%;
  max-width: 1215px;
}
.cta .container div { position: relative; width: 80%; }
.cta p { margin: 0; }
.cta h3 { margin: 0; font-size: var(--font-3xl); line-height: 1; }

/* FOOTER */
footer {
  text-align: center;
}
footer .nav-list {
  display: inline-flex;
  background-color: rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  margin: var(--space-2xl) 0 var(--space-md)
}
footer .nav-list a { color: var(--color-black); }

.nav-extra {
  display: flex;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0 0 var(--space-3xl);
  gap: var(--space-xs); /* espacio alrededor del separador */
}

.nav-extra li {
  position: relative;
  font-size: var(--font-sm);
  color: var(--color-gray);
}

.nav-extra li:not(:last-child)::after {
  content: "·";         /* el separador */
  margin-left: var(--space-xs);  /* espacio a la izquierda */
  color: currentColor;  /* mismo color que el texto */
  opacity: 0.6;         /* opcional: un poco más tenue */
}

footer .nav-extra a { color: var(--color-gray); text-decoration: none; }

footer .powered {
  background-color: rgba(0, 0, 0, 0.03); 
  display: inline-block;
  font-size: var(--font-sm);
  border-radius: var(--radius-pill);
  vertical-align: middle;
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-6xl);
  color: inherit;
  text-decoration: none;
}

footer .powered span {
  color: var(--color-dark);
}

footer .powered svg {
  vertical-align: middle;
  width: var(--space-md);
  color: var(--color-primary);
}

.menu-btn {
  display: none;
}

@media (max-width: 743px) {
  :root {
    -font-sm:  0.75rem;
    --font-md:  1rem;
    --font-lg:  1.25rem;
    --font-xl:  3.125rem;
    --font-2xl: 2.5rem;    
    --font-3xl: 3.125rem; 
    --space-6xl: 30vw;
  }
  
  html, body { overflow-x: clip;  }
  //#main-header nav {display: none;}
  .logo { width: 35%; }
  .container { flex-wrap: wrap; }
  #hero h1, .hero-widget, .parraf, .chats-container, .admin-panel .box, .pricing .logo_p, .pricing .container ul, .pricing .price, .trusted p, .faqs header, .faqs .faqs-list, .cta .container div { width: 100%; }
  #hero h1 { margin-bottom: var(--space-5xl); } 
  .hero-widget { margin: 0 var(--space-xl); }
  .parraf { padding-left: var(--space-2xl); }
  .intro .container { padding-right: 0; }
  .intro .container { padding-left: 0; }
  #hero .container { margin-top: 0; }
  .feature-card.bg-secondary { padding-top: 24%; }
  .feature-card.bg-secondary, .feature-card.bg-primary { transform: translateY(0); }
  .chats-container { padding: 0; }
  .chats-container, .pricing .container ul, .pricing .price, .faqs .faqs-list, .cta .btn { margin-top: var(--space-2xl); }
  .chat { width: 55vw; }
  .chat.bg-lime, .chat.bg-white { right: 0; }
  .pricing .container ul, .pricing .price, .trusted p { text-align: center; }
  .trusted .container {padding: var(--space-6xl) 0 var(--space-2xl) var(--space-3xl); }
  .trusted p, .cta h3 { margin-bottom: var(--space-2xl); }
  .trusted p { padding-right: var(--space-3xl); }
  .cta .container { padding: var(--space-xl)}
  .cta .container { display: block; }
  .cta .btn { display: inline-block; }
  .feature-card { 
    width: 60vw;
    flex: 0 0 auto;                
    height: 90vw;       
    max-height: none;
  }
  .cards-dig { 
    padding: var(--space-2xl); 
    flex-wrap: nowrap;
    gap: var(--space-xl);
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-start;
  
    /* ocultar scrollbar (multi-navegador) */
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* IE/Edge Legacy */
    -webkit-overflow-scrolling: touch;  /* inercia iOS */
  }
  
  .cards-dig::-webkit-scrollbar {       /* Chrome/Safari/iOS */
    width: 0;
    height: 0;
    display: none;
  }
  
  .menu-btn {
    width: 48px;
    height: 48px;
    //display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
  }
  
  .menu-btn span,
  .menu-btn::before,
  .menu-btn::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 3px;
    background: var(--color-white);
    border-radius: 3px;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, width 0.5s ease-in-out;
  }
  
  
  /* línea central */
  .menu-btn span {
    position: relative;
  }
  
  /* superior */
  .menu-btn::before {
    transform: translateY(-8px);
  }
  
  /* inferior */
  .menu-btn::after {
    transform: translateY(8px);
  }
  
  .menu-btn.active span {
    opacity: 0;
    width: 0;
  }
  
  .menu-btn.active::before {
    transform: translate(-6px, -2px) rotate(-40deg);
    width: 16px;
  }
  
  .menu-btn.active::after {
    transform: translate(6px, -2px) rotate(40deg);
    width: 16px;
  }
  
  .active .menu-btn span,
  .active .menu-btn::before,
  .active .menu-btn::after {
    background: var(--color-dark);
  }
  
  
  #main-header nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    padding: 0 var(--space-lg);
    text-align: center;
  
    /* estado cerrado (JS lo cambiará) */
    display: none;
    overflow: hidden;
    will-change: height, opacity, transform;
  }
  
  #main-header nav .nav-list {
    display: inline-flex;
  }
    
}