/* ══════════════════════════════════════════════════════════════
   YENI INSPIRA — Página de Inicio
   100% MOBILE. El desktop no es objetivo: el contenido se centra
   en una columna de ancho mobile para que no se vea roto.
   ══════════════════════════════════════════════════════════════ */

/* ─────────── 1. SISTEMA DE DISEÑO ─────────── */
:root {
  /* Color */
  --bg:            #FFFFFF;
  --bg-tenue:      #FAF8FC;   /* blanco con un velo lavanda, para alternar secciones */
  --ink:           #17141B;   /* negro tipográfico */
  --ink-soft:      #57505F;   /* gris para párrafos — 7.4:1 sobre blanco */
  --violet:        #6C4AB6;   /* identidad — 6.9:1 sobre blanco */
  --violet-deep:   #513690;
  --violet-soft:   #B79CE0;
  --lavender:      #EDE6F7;
  --lavender-mist: #F5F0FB;
  --gold:          #A8801F;   /* SOLO detalles puntuales, nunca fondos ni bloques */
  --gold-light:    #E4C87E;   /* dorado claro — glifos sobre violeta, nunca sobre blanco */
  --line:          #E9E3F0;
  /* Verde: descartado por identidad de marca — no usar. */

  /* Tipografía */
  --serif:  "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:   "Karla", "Segoe UI", system-ui, sans-serif;
  --script: "Caveat", "Segoe Script", cursive;

  /* Espaciado — escala generosa: ante la duda, más aire */
  --s1: .5rem;  --s2: .875rem; --s3: 1.25rem; --s4: 1.75rem;
  --s5: 2.5rem; --s6: 3.5rem;  --s7: 4.5rem;  --s8: 6rem;

  /* Forma */
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px;
  --sombra:      0 2px 10px rgba(30, 18, 55, .05), 0 12px 32px rgba(30, 18, 55, .06);
  --sombra-alta: 0 8px 24px rgba(30, 18, 55, .10), 0 24px 60px rgba(30, 18, 55, .12);

  --col: 480px; /* ancho máximo de la columna mobile */
}

*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: clip (y no hidden) porque `hidden` convierte al html en
   contenedor de scroll y rompe el position:sticky del header. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* El header va fijo: este relleno ocupa el lugar que deja libre.
     Nada de overflow-x acá: crea un contenedor de scroll y el header
     dejaba de quedar pegado arriba en algunos celulares. */
  padding-top: var(--header-h);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
img, video { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--s3);
}

/* Íconos ------------------------------------------------------- */
.icon {
  display: inline-block; width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.icon--sm { width: 17px; height: 17px; }

/* Ícono circular de marca — componente global de todo el sitio.
   Círculo violeta sólido + anillo dorado separado (halo) + glifo dorado
   de línea fina. El primer box-shadow pinta el hueco entre círculo y
   anillo, así que tiene que llevar el color del fondo donde se apoya:
   sobre fondos que no sean blanco, redefinir --halo en el contenedor. */
.icono-marca {
  --halo: var(--bg);
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--violet);
  color: var(--gold-light);
  box-shadow: 0 0 0 3px var(--halo), 0 0 0 4px var(--gold),
              0 6px 18px rgba(108, 74, 182, .22);
}
.icono-marca .icon { width: 25px; height: 25px; stroke-width: 1.4; }
.icono-marca--sm { width: 40px; height: 40px; }
.icono-marca--sm .icon { width: 19px; height: 19px; }

/* Foco visible y accesible en todo el sitio -------------------- */
:where(button, a, [tabindex]):focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Kicker + títulos de sección --------------------------------- */
.kicker {
  font-size: .74rem; letter-spacing: .19em; text-transform: uppercase;
  font-weight: 600; color: var(--violet);
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: var(--s2);
}
.kicker::before {
  content: ""; width: 26px; height: 1px;
  background: var(--gold); flex-shrink: 0;   /* dorado: detalle puntual */
}
.seccion__titulo { font-size: 1.7rem; letter-spacing: -.02em; }

/* ─────────── 2. HEADER / NAVBAR / FOOTER (globales) ─────────── */
:root { --header-h: 58px; }

/* fixed y no sticky: en mobile, con un contenedor de scroll de por medio,
   el sticky se despegaba al bajar. Fijo no depende de eso. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 60;                              /* por encima del panel de menú */
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__int {
  max-width: var(--col); margin-inline: auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s3);
  padding: .35rem var(--s3);
}
/* El logo del nav es un PNG sin fondo: ya no necesita mix-blend-mode
   para disimular el rectángulo blanco que traía el JPEG anterior. */
.marca { display: block; line-height: 0; flex-shrink: 0; }
.marca img { height: 38px; width: auto; }

/* Botón hamburguesa — se transforma en X al abrir. Es el único control:
   abre y cierra, así que el panel no necesita su propia cruz. */
.hamburguesa {
  position: relative;
  width: 46px; height: 46px;
  margin-right: -10px;               /* alineación óptica con el borde */
  display: grid; place-items: center;
  background: none; border: none; padding: 0;
  cursor: pointer;
}
.hamburguesa__caja { position: relative; width: 24px; height: 13px; }
.hamburguesa__linea {
  position: absolute; left: 0;
  width: 100%; height: 1.8px;
  border-radius: 2px;
  background: var(--violet);
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              opacity .2s ease, width .4s ease;
}
.hamburguesa__linea:nth-child(1) { top: 0; }
.hamburguesa__linea:nth-child(2) { top: 5.6px; width: 68%; }
.hamburguesa__linea:nth-child(3) { top: 11.2px; }
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(2) { opacity: 0; width: 100%; }
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* Panel de navegación — cubre la pantalla bajo el header.
   display:flex le gana a [hidden], así que hay que apagarlo a mano. */
.menu[hidden] { display: none; }
.menu {
  position: fixed; inset: var(--header-h) 0 0 0;
  z-index: 50;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s6) var(--s3) var(--s5);
  background: linear-gradient(168deg, #FFFFFF 0%, #FBF8FE 42%, #F0E8FA 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .32s ease, transform .42s cubic-bezier(.22,1,.36,1);
}
.menu.is-abierto { opacity: 1; transform: none; }

/* Halo violeta al fondo del panel — decoración propia, sin depender
   de assets de otras secciones. */
.menu::before {
  content: ""; position: absolute;
  bottom: -120px; right: -110px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(151,110,220,.26), rgba(151,110,220,0) 70%);
  filter: blur(60px);
  z-index: -1; pointer-events: none;
}

.menu__lista {
  list-style: none; margin: 0; padding: 0;
  max-width: var(--col); width: 100%; margin-inline: auto;
}
.menu__item {
  border-bottom: 1px solid rgba(183,156,224,.3);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.menu.is-abierto .menu__item { opacity: 1; transform: none; }
.menu.is-abierto .menu__item:nth-child(1) { transition-delay: .06s; }
.menu.is-abierto .menu__item:nth-child(2) { transition-delay: .12s; }
.menu.is-abierto .menu__item:nth-child(3) { transition-delay: .18s; }
.menu.is-abierto .menu__item:nth-child(4) { transition-delay: .24s; }
.menu.is-abierto .menu__item:nth-child(5) { transition-delay: .30s; }

.menu__link {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) 0;
  min-height: 60px;
  font-family: var(--serif);
  font-size: 1.62rem; font-weight: 500;
  letter-spacing: -.022em;
  color: var(--ink); text-decoration: none;
  transition: color .22s ease, padding-left .3s cubic-bezier(.22,1,.36,1);
}
.menu__link:hover { color: var(--violet-deep); padding-left: 6px; }
.menu__num {
  font-family: var(--sans);
  font-size: .68rem; font-weight: 600; letter-spacing: .2em;
  color: var(--violet-soft);
  flex-shrink: 0;
}
.menu__link[aria-current="page"] { color: var(--violet); }
.menu__link[aria-current="page"] .menu__num { color: var(--gold); }

.menu__pie {
  max-width: var(--col); width: 100%; margin-inline: auto;
  padding-top: var(--s5);
  font-family: var(--script);
  font-size: 1.24rem; line-height: 1.35;
  color: var(--violet-deep);
  text-align: center;
  opacity: 0;
  transition: opacity .5s ease .36s;
}
.menu.is-abierto .menu__pie { opacity: 1; }

.site-footer {
  text-align: center;
  padding: var(--s6) var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  background: var(--bg-tenue);
}
.site-footer__logo { height: 62px; width: auto; margin-inline: auto; mix-blend-mode: multiply; }
.site-footer__nota { font-size: .84rem; color: var(--ink-soft); margin-top: var(--s3); }

/* ─────────── 3. ① HERO ─────────── */
.hero {
  position: relative;
  padding: var(--s4) 0 var(--s6);
  overflow: hidden;
  isolation: isolate;
}
/* Degradados desenfocados en CSS — en esquinas, nunca bajo el texto */
.hero__glow { position: absolute; border-radius: 50%; filter: blur(75px); z-index: -2; pointer-events: none; }
.hero__glow--tr {
  width: 320px; height: 320px; top: -160px; right: -140px;
  background: radial-gradient(circle, rgba(151,110,220,.3), rgba(151,110,220,0) 70%);
}
.hero__glow--bl {
  width: 280px; height: 280px; bottom: 2%; left: -160px;
  background: radial-gradient(circle, rgba(183,156,224,.22), rgba(183,156,224,0) 70%);
}

/* Sombra de hojas arriba a la derecha. Es una imagen de sombra gris sobre
   blanco: multiply borra el blanco y deja sólo la sombra, así se apoya
   sobre el fondo sin recortar un rectángulo. */
.hero__hojas {
  position: absolute; top: -14px; right: -52px;
  width: 226px; height: auto;
  opacity: .38;
  mix-blend-mode: multiply;
  z-index: -1;
  pointer-events: none;
  transform: rotate(4deg);
}

.hero__titulo {
  font-size: clamp(1.95rem, 8.8vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.hero__texto {
  margin-top: var(--s3);
  color: var(--ink-soft);
  font-size: .99rem;
  line-height: 1.7;
}

/* Frase destacada — manuscrita + acento violeta.
   Joel pidió 2 renglones: por encima de ~1.45rem se va a 3. */
.hero__frase {
  font-family: var(--script);
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--violet-deep);
  text-align: center;
  text-wrap: balance;
  margin: var(--s3) auto var(--s3);
  position: relative;
}
.hero__frase::before,
.hero__frase::after {
  content: ""; display: block; width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet-soft), transparent);
  margin: 0 auto;
}
.hero__frase::before { margin-bottom: var(--s2); }
.hero__frase::after  { margin-top: var(--s2); }

/* Video del Hero (hoy: portada sola) */
.hero__video {
  position: relative; margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  background: var(--lavender-mist);
}
.hero__video img, .hero__video video { width: 100%; height: auto; }
.hero__play {
  position: absolute; inset: 0; margin: auto;
  width: 66px; height: 66px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  color: var(--violet);
  box-shadow: 0 6px 22px rgba(40,20,80,.22);
}
.hero__play .icon { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }

.hero__acciones {
  margin-top: var(--s4);
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
}

/* Botones ------------------------------------------------------ */
.btn {
  font-family: var(--sans);
  font-size: 1rem;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn--primario {
  background: var(--violet);
  color: #fff;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 1.05rem 1.9rem;
  min-height: 56px;
  width: 100%; max-width: 330px;
  border-radius: 100px;
  box-shadow: 0 8px 22px rgba(108,74,182,.28);
}
.btn--primario:hover { background: var(--violet-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(108,74,182,.34); }
.btn--primario:active { transform: translateY(0); }

.btn--secundario {
  background: none;
  color: var(--ink);
  font-weight: 500;
  font-size: .95rem;
  padding: .8rem 1rem;
  min-height: 48px;
  border-bottom: 1px solid var(--violet-soft);
  border-radius: 0;
}
.btn--secundario .icon { color: var(--violet); transition: transform .25s ease; }
.btn--secundario:hover { color: var(--violet); }
.btn--secundario:hover .icon { transform: translateX(4px); }

/* ─────────── 4. ② TESTIMONIOS ─────────── */
.testimonios {
  padding: var(--s7) 0 var(--s7);
  background: var(--bg-tenue);
  border-block: 1px solid var(--line);
}
.testimonios .seccion__titulo { margin-bottom: var(--s5); }

/* Carrusel coverflow ------------------------------------------
   Scroll horizontal nativo (swipe) + transforms 3D aplicados por JS
   según qué slide está centrado. El padding lateral vale
   (contenedor − slide) / 2: sin eso, el snap "center" del último
   slide queda fuera de rango y el carrusel rebota siempre al primero.
   El gap es negativo para que los laterales se solapen bajo el
   central, que es lo que da la sensación de profundidad. */
.carrusel { margin-bottom: var(--s4); --slide-w: min(62vw, 258px); }
/* Las flechas se centran contra el marco (solo la pista), no contra el
   conjunto: si no, los puntos de paginación las empujan hacia abajo. */
.carrusel__marco { position: relative; }
.carrusel__pista {
  display: flex;
  gap: calc(var(--slide-w) * -.16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  perspective: 1100px;
  padding-inline: calc((100% - var(--slide-w)) / 2);
  padding-block: var(--s3) var(--s4);
}
.carrusel__pista::-webkit-scrollbar { display: none; }

.slide-video {
  position: relative;
  flex: 0 0 auto;
  width: var(--slide-w);
  margin: 0;
  scroll-snap-align: center;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0f0d14;
  /* Estado por defecto = lateral. JS marca el central con .es-centro. */
  transform: scale(.84) rotateY(22deg);
  transform-origin: center center;
  opacity: .66;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(30, 18, 55, .18);
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              opacity .45s ease, box-shadow .45s ease;
}
/* Los de la izquierda rotan hacia el otro lado que los de la derecha */
.slide-video.es-izquierda { transform: scale(.84) rotateY(-22deg); }
.slide-video.es-centro {
  transform: none;
  opacity: 1;
  z-index: 3;
  box-shadow: 0 10px 26px rgba(30, 18, 55, .16), 0 26px 60px rgba(30, 18, 55, .2);
}
.slide-video video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  display: block;
}
/* Los laterales no reciben toques sobre el video: el tap los trae al centro */
.slide-video:not(.es-centro) video { pointer-events: none; }

.slide-video__nombre {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s5) var(--s2) var(--s2);
  background: linear-gradient(to top, rgba(12,8,22,.82), rgba(12,8,22,.45) 45%, transparent);
  color: #fff;
  font-size: .84rem; font-weight: 600; letter-spacing: .01em;
  text-align: left;
  pointer-events: none;
}
.slide-video__nombre em {
  display: block;
  font-style: normal; font-weight: 400; font-size: .74rem;
  color: rgba(255,255,255,.78);
  margin-top: .1rem;
}

/* Puntos de paginación ---------------------------------------- */
.puntos {
  display: flex; justify-content: center; align-items: center; gap: .45rem;
  margin-top: calc(var(--s3) * -1);
  margin-bottom: var(--s3);
}
.punto {
  width: 7px; height: 7px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--violet-soft); opacity: .45;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}
.punto.es-activo { opacity: 1; background: var(--violet); transform: scale(1.45); }

.carrusel__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  color: var(--violet);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(40,20,80,.14);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
  z-index: 3;
}
.carrusel__flecha:hover { background: #fff; }
.carrusel__flecha:active { transform: translateY(-50%) scale(.94); }
.carrusel__flecha--prev { left: max(6px, calc((100% - var(--col)) / 2 - 4px)); }
.carrusel__flecha--next { right: max(6px, calc((100% - var(--col)) / 2 - 4px)); }
.carrusel__flecha[disabled] { opacity: .32; cursor: default; }

/* ── CARRUSEL CIRCULAR DE VIDEO (Home) ────────────────────────
   Cuatro tarjetas rotando entre cuatro posiciones fijas: frente,
   derecha, atrás e izquierda. La de atrás asoma por encima de la
   del frente para que se note que el conjunto gira, y no que se
   cambia de a una. Las tarjetas van en absoluto sobre un escenario
   de alto fijo, calculado a partir del ancho: cabecera + video 9:16. */
.cc {
  --cc-w: min(58vw, 234px);
  position: relative;
  margin-bottom: var(--s3);
}
/* Las tarjetas laterales se salen a propósito hacia los costados; sin
   este recorte agrandaban el ancho del documento y toda la página
   quedaba corrida hacia la derecha. */
.cc__escenario {
  position: relative;
  height: calc(92px + (var(--cc-w) - 20px) * 16 / 9);
  margin-inline: auto;
  max-width: var(--col);
  perspective: 1000px;
  overflow-x: clip;      /* clip y no hidden: no fuerza scroll en el otro eje */
  overflow-y: visible;   /* así las sombras arriba y abajo no se cortan */
}

.cc__tarjeta {
  position: absolute; top: 0; left: 50%;
  width: var(--cc-w);
  margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  transform: translateX(-50%) scale(.72);
  opacity: 0;
  z-index: 1;
  transition: transform .58s cubic-bezier(.4,0,.2,1),
              opacity .58s ease, box-shadow .58s ease;
}
/* Posiciones. El desfase lateral es 62% del ancho de la tarjeta:
   -50% centra, ±62% la corre a su lado. */
.cc__tarjeta.pos-frente {
  transform: translateX(-50%) scale(1);
  opacity: 1; z-index: 4;
  box-shadow: var(--sombra-alta);
}
.cc__tarjeta.pos-derecha   { transform: translateX(12%)   scale(.79); opacity: .68; z-index: 2; }
.cc__tarjeta.pos-izquierda { transform: translateX(-112%) scale(.79); opacity: .68; z-index: 2; }
.cc__tarjeta.pos-atras     { transform: translateX(-50%) translateY(-22px) scale(.7); opacity: .4; z-index: 1; }

/* Sólo la del frente recibe toques; las otras se traen al frente */
.cc__tarjeta:not(.pos-frente) { cursor: pointer; }
.cc__tarjeta:not(.pos-frente) .cc__frame,
.cc__tarjeta:not(.pos-frente) .cc__play { pointer-events: none; }

.cc__cabeza { display: flex; align-items: center; gap: .6rem; padding: .3rem .2rem 0; }
.cc__avatar {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: var(--lavender);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--violet-soft);
}
.cc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc__quien { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cc__nombre { font-size: .93rem; font-weight: 600; color: var(--ink); }
.cc__rol { font-size: .74rem; color: var(--violet); }
.cc__comilla {
  margin-left: auto; align-self: flex-start;
  font-family: var(--serif); font-size: 2.6rem; line-height: .72;
  color: var(--violet-soft); opacity: .34;
  pointer-events: none; user-select: none;
}

.cc__frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0f0d14;
}
.cc__frame video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.cc__play {
  position: absolute; inset: 0; margin: auto;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  color: var(--violet);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(30,18,55,.3);
  transition: transform .25s ease, opacity .25s ease, background .2s ease;
}
.cc__play .icon { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.cc__play:hover { background: #fff; transform: scale(1.06); }
.cc__play[hidden] { display: none; }

.cc__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  color: var(--violet);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(40,20,80,.14);
  transition: background .2s ease, transform .2s ease;
  z-index: 6;
}
.cc__flecha:hover { background: #fff; }
.cc__flecha:active { transform: translateY(-50%) scale(.94); }
.cc__flecha--prev { left: max(4px, calc((100% - var(--col)) / 2 - 6px)); }
.cc__flecha--next { right: max(4px, calc((100% - var(--col)) / 2 - 6px)); }

/* El margen negativo de .puntos está calibrado para el coverflow;
   acá los puntos van justo debajo del escenario. */
.cc .puntos { margin-top: var(--s3); margin-bottom: 0; }

/* Banda de invitación — se usa en Home y en Mi Historia */
.invitacion {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s3);
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: var(--r-xl);
}
.invitacion p {
  flex: 1;
  font-size: .96rem; line-height: 1.45; font-weight: 500;
  color: var(--ink);
}
.invitacion .icono-marca { --halo: var(--lavender-mist); }

/* Tarjetas de testimonio escrito ------------------------------
   Fondo claro con velo lavanda, deliberadamente distinto del violeta
   sólido de las tarjetas de Comunidad (Mi Historia): son dos tipos de
   testimonio y tienen que leerse como tales de un vistazo. */
.tarjetas {
  --card-w: min(74vw, 292px);
  display: flex; gap: var(--s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-inline: calc((100% - var(--card-w)) / 2);
  padding-block: 6px var(--s2);
}
.tarjetas::-webkit-scrollbar { display: none; }

.tarjeta {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s2);
  text-align: left;
  padding: var(--s4) var(--s3) var(--s3);
  background: linear-gradient(158deg, #FFFFFF 0%, #FBF8FE 52%, #F3ECFB 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra);
  font-family: var(--sans);
  cursor: pointer;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease;
}
/* Filete dorado superior — el único uso de dorado en la tarjeta */
.tarjeta::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
  transition: opacity .28s ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: var(--violet-soft); }
.tarjeta:hover::after { opacity: 1; }
.tarjeta:active { transform: translateY(-1px) scale(.99); }

/* Comilla decorativa grande, arriba a la derecha, detrás del texto */
.tarjeta__comilla {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--serif); font-size: 4.6rem; line-height: 1;
  color: var(--violet-soft); opacity: .2;
  pointer-events: none; user-select: none;
}

.tarjeta__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--lavender);
  color: var(--violet-deep);
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--violet-soft);
}
.tarjeta__avatar img { width: 100%; height: 100%; object-fit: cover; }

.tarjeta__cita {
  font-family: var(--serif);
  font-size: 1.04rem; line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  font-weight: 400;
  flex-grow: 1;
  position: relative;
}
.tarjeta__autora {
  font-size: .84rem; font-weight: 600; color: var(--ink);
  display: flex; flex-direction: column; line-height: 1.4;
}
.tarjeta__autora em { font-style: normal; font-weight: 400; color: var(--ink-soft); font-size: .78rem; }
.tarjeta__pista {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
  color: var(--violet);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  width: 100%;
}

.microcopy {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  font-size: .88rem; color: var(--ink-soft);
  text-align: center;
  margin-top: var(--s2);
}
.microcopy .icon { color: var(--violet); }

/* ─────────── 5. ③ DIFERENCIALES ─────────── */
.diferenciales { padding: var(--s7) 0; }
.diferenciales .seccion__titulo { margin-bottom: var(--s5); }

.features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }

.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s4) var(--s4) var(--s4);
  box-shadow: var(--sombra);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
/* El fade-in es una mejora, no un requisito: las cards sólo arrancan
   ocultas si el JS está vivo y va a revelarlas. Sin JS se ven siempre. */
.js-reveal .feature:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px);
}

.feature__icono { margin-bottom: var(--s3); }
.feature__titulo { font-size: 1.22rem; margin-bottom: .6rem; letter-spacing: -.015em; }
.feature__texto { color: var(--ink-soft); font-size: .98rem; line-height: 1.72; }

/* ─────────── 6. ④ FAQ ─────────── */
.faq {
  position: relative;
  padding: var(--s7) 0 var(--s8);
  background: var(--bg-tenue);
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
/* Ramo de lavanda en acuarela: cierre visual de la página */
.faq__lavanda {
  position: absolute; bottom: -20px; right: -46px;
  width: 190px; opacity: .22; z-index: -1;
  transform: rotate(-6deg);
  pointer-events: none;
}
.faq .seccion__titulo { margin-bottom: var(--s4); }

.acordeon { border-top: 1px solid var(--line); }
.acordeon__item { border-bottom: 1px solid var(--line); }
.acordeon__item h3 { margin: 0; font-size: inherit; font-weight: inherit; }

.acordeon__pregunta {
  width: 100%;
  min-height: 66px;                 /* área de toque cómoda en mobile */
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) 0;
  background: none; border: none;
  text-align: left; cursor: pointer;
  font-family: var(--serif);
  font-size: 1.06rem; font-weight: 600; line-height: 1.35;
  color: var(--ink);
  letter-spacing: -.01em;
  transition: color .2s ease;
}
.acordeon__pregunta:hover { color: var(--violet-deep); }
.acordeon__pregunta[aria-expanded="true"] { color: var(--violet-deep); }

.acordeon__signo {
  width: 22px; height: 22px; flex-shrink: 0;
  stroke: var(--violet); stroke-width: 1.6; stroke-linecap: round;
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.acordeon__signo line { transition: opacity .3s ease; }
/* + → − : la barra vertical se desvanece mientras el ícono rota */
.acordeon__pregunta[aria-expanded="true"] .acordeon__signo { transform: rotate(180deg); }
.acordeon__pregunta[aria-expanded="true"] .acordeon__v { opacity: 0; }

.acordeon__panel { overflow: hidden; }
.acordeon__panel p {
  color: var(--ink-soft);
  font-size: .97rem; line-height: 1.75;
  padding-bottom: var(--s4);
  padding-right: var(--s3);
}
/* Animación de despliegue suave (JS fija la altura) */
.acordeon__panel.is-animando { transition: height .4s cubic-bezier(.22,1,.36,1); }

/* ─────────── 7. OVERLAY DE EVIDENCIA (captura de WhatsApp) ─────────── */
/* El display:grid de .overlay le gana al atributo [hidden] del navegador:
   sin esta regla el overlay queda invisible pero tapando toda la página
   y se come todos los toques. */
.overlay[hidden] { display: none; }

.overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: var(--s2);
  background: rgba(23,16,38,.72);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .3s ease;
}
.overlay.is-abierto { opacity: 1; }

.overlay__caja {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--r-lg);
  padding: var(--s2);
  box-shadow: var(--sombra-alta);
  transform: scale(.94) translateY(12px);
  transition: transform .36s cubic-bezier(.22,1,.36,1);
}
.overlay.is-abierto .overlay__caja { transform: none; }

.overlay__img {
  width: 100%;
  max-height: calc(88vh - 120px);
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--lavender-mist);
}
.overlay__pie {
  margin-top: var(--s2);
  font-size: .82rem; color: var(--ink-soft); text-align: center;
}
.overlay__cerrar {
  position: absolute; top: -13px; right: -6px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(30,18,55,.18);
  transition: transform .2s ease, color .2s ease;
}
.overlay__cerrar:hover { color: var(--violet); transform: rotate(90deg); }

body.no-scroll { overflow: hidden; }

/* ─────────── 8. ACCESIBILIDAD: menos movimiento ─────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .feature { opacity: 1; transform: none; }
  .carrusel__pista { scroll-behavior: auto; }
}

/* ─────────── 9. CIERRE CON CTA (Inicio) ───────────
   Único bloque violeta sólido de la Home. Después de las preguntas la
   página cerraba en seco; esto le da un final y un último paso claro. */
.cierre-cta {
  position: relative;
  padding: var(--s7) 0 var(--s8);
  background: linear-gradient(158deg, #5A3B9E 0%, #4A2E86 52%, #37206A 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
/* Halos suaves para que el violeta no se lea plano */
.cierre-cta::before,
.cierre-cta::after {
  content: ""; position: absolute; border-radius: 50%;
  z-index: -1; pointer-events: none; filter: blur(70px);
}
.cierre-cta::before {
  width: 300px; height: 300px; top: -140px; right: -120px;
  background: radial-gradient(circle, rgba(183,156,224,.5), rgba(183,156,224,0) 70%);
}
.cierre-cta::after {
  width: 260px; height: 260px; bottom: -130px; left: -110px;
  background: radial-gradient(circle, rgba(228,200,126,.22), rgba(228,200,126,0) 70%);
}

.cierre-cta .icono-marca {
  --halo: #4A2E86;                 /* el hueco del anillo toma el fondo */
  margin: 0 auto var(--s4);
}

.cierre-cta__titulo {
  font-size: clamp(1.9rem, 8.8vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -.028em;
  text-wrap: balance;
  max-width: 16ch;
  margin-inline: auto;
}
/* Filete dorado con destello, igual que en las páginas de servicio */
.cierre-cta__destello {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s4) auto;
  max-width: 220px;
}
.cierre-cta__destello::before,
.cierre-cta__destello::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  opacity: .7;
}
.cierre-cta__destello span { color: var(--gold-light); font-size: .95rem; line-height: 1; }

.cierre-cta__texto {
  font-size: 1rem; line-height: 1.72;
  color: rgba(255,255,255,.86);
  max-width: 34ch; margin-inline: auto;
}
.cierre-cta__texto strong { color: #fff; font-weight: 600; }

/* Datos rápidos de la sesión, en una línea */
.cierre-cta__datos {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: .5rem var(--s3);
  margin-top: var(--s4);
  font-size: .85rem; color: rgba(255,255,255,.82);
}
.cierre-cta__datos span { display: inline-flex; align-items: center; gap: .4rem; }
.cierre-cta__datos .icon { width: 16px; height: 16px; color: var(--gold-light); }

/* Botón claro sobre el violeta: acá el primario violeta desaparecería */
.btn--claro {
  background: #fff;
  color: var(--violet-deep);
  font-weight: 600;
  padding: 1.05rem 1.9rem;
  min-height: 56px;
  width: 100%; max-width: 330px;
  border-radius: 100px;
  box-shadow: 0 10px 26px rgba(15, 8, 34, .32);
}
.btn--claro:hover { background: var(--lavender-mist); transform: translateY(-2px); }
.btn--claro:active { transform: translateY(0); }
.cierre-cta .btn--claro { margin-top: var(--s5); }

.cierre-cta__nota {
  margin-top: var(--s3);
  font-family: var(--script);
  font-size: 1.16rem; line-height: 1.35;
  color: var(--gold-light);
}

/* Contacto del pie: Instagram y correo */
.site-footer__contacto {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .5rem var(--s3);
  margin-top: var(--s3);
}
.site-footer__contacto a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .86rem; font-weight: 500;
  color: var(--violet-deep); text-decoration: none;
  transition: color .2s ease;
}
.site-footer__contacto a:hover { color: var(--violet); }
.site-footer__contacto .icon { width: 17px; height: 17px; color: var(--violet); }

/* Desktop: sólo agrandamos el logo. El resto del sitio mantiene su
   caja mobile centrada a propósito. */
@media (min-width: 768px) {
  .marca img { height: 46px; }
  .site-footer__logo { height: 78px; }
  .site-footer__contacto a { font-size: .95rem; }
}

/* Desktop: agrandamos rótulos y textos que quedaban chicos, sin tocar
   la caja centrada ni el orden de los bloques. */
@media (min-width: 768px) {
  .kicker { font-size: .88rem; letter-spacing: .2em; }
  .seccion__titulo { font-size: 2rem; }
  .feature__titulo { font-size: 1.36rem; }
  .feature__texto { font-size: 1.06rem; }
  .acordeon__pregunta { font-size: 1.14rem; }
  .acordeon__panel p { font-size: 1.04rem; }
  .cierre-cta__nota { font-size: 1.4rem; }
  .cierre-cta__texto { font-size: 1.08rem; }
  .hero__texto { font-size: 1.06rem; }
}

/* Botón que no puede partirse en dos renglones: achicamos la letra
   antes que dejar una palabra sola abajo. */
.btn--ancho {
  white-space: nowrap;
  font-size: clamp(.78rem, 4.2vw, 1rem);
  padding-inline: .9rem;
}

/* El sexto ítem del menú no tenía retraso y entraba de golpe */
.menu.is-abierto .menu__item:nth-child(6) { transition-delay: .36s; }
.menu.is-abierto .menu__item:nth-child(7) { transition-delay: .42s; }

/* ─────────── FORMULARIOS CORTOS (mini) ───────────
   Los de "avisame del lanzamiento" y "entrar a la comunidad". Piden lo
   mínimo y viven dentro de la sección, no en una página aparte. */
.mini {
  margin-top: var(--s4);
  padding: var(--s4) var(--s3);
  background: #fff;
  border: 1px solid var(--lavender);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  text-align: left;
}
.mini .icono-marca { --halo: #fff; }
.mini__form { display: flex; flex-direction: column; gap: var(--s3); }
.mini__form[hidden] { display: none; }
.mini__form.fue-validado .campo__input:invalid { border-color: #B4304B; }
.mini__form.fue-validado .campo__input:invalid + .campo__error { display: block; }
.mini__form .btn { width: 100%; max-width: none; padding-inline: 1rem; }
.mini__legal {
  font-size: .78rem; line-height: 1.5; color: var(--ink-soft);
  text-align: center; margin-top: calc(var(--s1) * -1);
}
.mini__aviso {
  display: none; align-items: flex-start; gap: .5rem;
  font-size: .8rem; line-height: 1.5; color: var(--violet-deep);
  padding: .7rem .85rem;
  background: var(--lavender-mist);
  border-radius: var(--r-sm);
}
.mini__aviso.is-visible { display: flex; }

.mini__listo { display: none; text-align: center; }
.mini__listo.is-visible {
  display: grid; place-items: center; gap: var(--s2);
  animation: mini-entra .5s cubic-bezier(.22,1,.36,1) both;
}
.mini__listo__txt { font-size: .96rem; line-height: 1.65; color: var(--ink); }
@keyframes mini-entra { from { opacity: 0; transform: translateY(8px); } }

/* La invitación de Mi historia ahora contiene el formulario */
.invitacion.mini { display: block; }
.invitacion.mini > .icono-marca { margin: 0 auto var(--s2); }
.invitacion.mini [data-mini-intro] { text-align: center; margin-bottom: var(--s4); }
.invitacion.mini [data-mini-intro][hidden] { display: none; }
.invitacion__bajada {
  margin-top: var(--s2);
  font-size: .92rem; line-height: 1.65; color: var(--ink-soft);
}

/* Fila final del footer: lo legal a la izquierda, los accesos de Yeni
   a la derecha. Es el único renglón del footer que no va centrado. */
.site-footer__pie {
  width: 100%;
  max-width: var(--col);
  margin: var(--s4) auto 0;
  padding: var(--s2) var(--s3) 0;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
}
.site-footer__legal {
  font-size: .78rem; letter-spacing: .02em;
  color: var(--ink-soft); opacity: .9;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.site-footer__legal:hover { opacity: 1; }
.site-footer__pie .site-footer__accesos { margin: 0; }