/* ==========================================================================
   CumpleClick — Sitio de clientes (landing)
   Tokens copiados verbatim de design/tokens.css (fuente de verdad de marca,
   "El globo dulce" v1.0). No reinventar colores a mano.
   ========================================================================== */

:root {
  /* Paleta principal */
  --cc-violeta: #8B5CF6;        /* Violeta Globo — primario */
  --cc-tinta: #4C2882;          /* Tinta Violeta — wordmark "Cumple", titulares */
  --cc-fucsia: #D6307F;         /* Fucsia Click — CTAs, precio, "Click" */
  --cc-amarillo: #FBBF24;       /* Amarillo Lente — highlights */
  --cc-crema: #FFF8EC;          /* Fondo por defecto */

  /* Soporte */
  --cc-lila: #A78BFA;           /* Confeti, hovers, fondos suaves */
  --cc-fucsia-oscuro: #C2186B;  /* Sombras de fucsia, boquilla */
  --cc-oro: #E8A317;            /* Oro Hilo — solo detalles finos */
  --cc-oro-claro: #F5C542;
  --cc-oro-oscuro: #D99A14;

  /* Degradés de marca */
  --cc-grad-globo: radial-gradient(circle at 34% 26%, #B9A0F7 0%, #8B5CF6 34%, #C0409E 72%, #D6307F 100%);
  --cc-grad-oro: linear-gradient(180deg, #F5C542 0%, #D99A14 100%);
  --cc-grad-lente: radial-gradient(circle at 38% 32%, #D8CCFB 0%, #A88BE8 60%, #8256C9 100%);

  /* Tipografía */
  --cc-font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif; /* 800 titulares/wordmark */
  --cc-font-body: 'Baloo 2', system-ui, sans-serif;                /* 600 UI, system-ui textos largos */

  /* Layout */
  --cc-radius: 16px;
  --cc-maxw: 1200px;
}

/* ---------- Baloo 2 self-hosted (@fontsource, nunca CDN) ---------- */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/baloo-2-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/baloo-2-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/baloo-2-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/baloo-2-latin-800-normal.woff2') format('woff2');
}

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

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  font-family: var(--cc-font-body);
  font-weight: 600;
  color: var(--cc-tinta);
  background: var(--cc-crema);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: var(--cc-fucsia); }
h1, h2, h3 {
  font-family: var(--cc-font-display);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--cc-tinta);
}
h2 { font-size: clamp(1.9rem, 5.5vw, 2.9rem); }
p { margin: 0 0 1rem; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Botones (una sola forma: pill) ---------- */
.btn {
  display: inline-block;
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, background-color 0.18s ease;
  white-space: nowrap;
}
.btn--cta {
  background: var(--cc-fucsia);
  color: #fff;
  box-shadow: 0 6px 0 var(--cc-fucsia-oscuro), 0 14px 28px rgba(214, 48, 127, 0.28);
}
.btn--cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--cc-fucsia-oscuro), 0 18px 32px rgba(214, 48, 127, 0.34); }
.btn--cta:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--cc-fucsia-oscuro); }
.btn--cta:focus-visible { outline: 3px solid var(--cc-amarillo); outline-offset: 3px; }
.btn--ghost {
  background: transparent;
  color: var(--cc-tinta);
  border-color: var(--cc-lila);
}
.btn--ghost:hover { background: rgba(167, 139, 250, 0.16); transform: translateY(-2px); }
.btn--ghost:focus-visible { outline: 3px solid var(--cc-violeta); outline-offset: 3px; }
.btn--sm { font-size: 0.92rem; padding: 0.6em 1.2em; }
.btn--xl { font-size: 1.2rem; padding: 1em 2em; }
.btn--block { display: block; width: 100%; }

/* En móvil el CTA grande no puede desbordar su contenedor */
@media (max-width: 719px) {
  .btn { max-width: 100%; }
  .btn--xl { font-size: 1.05rem; padding: 0.9em 1.3em; white-space: normal; }
}

/* ---------- Lockup de CumpleClick ----------
   Espejo de src/brand/lockup.css (album y cartel QR) y de cb_lockup_html() en
   public/lib.php (invitacion). Mismas clases, mismo markup, mismas
   proporciones; no se comparte archivo porque este sitio es HTML plano sin
   build y aquellos viven dentro del bundle de Vite o los sirve PHP.

   El nombre va en HTML y no dentro del SVG. `cumpleclick-lockup.svg` lo dibuja
   con un <text> en Baloo 2, y un SVG cargado en un <img> se renderiza aislado:
   no ve las @font-face de la pagina, solo las fuentes del sistema. Baloo 2 no
   viene con Windows ni con iOS, asi que el nombre de la marca salia en Segoe
   UI o en Helvetica segun el visitante — 403 px, 437 px o 496 px de ancho para
   la misma palabra.

   Proporciones del archivo oficial (viewBox 640x160): globo 1.93em, aire
   0.37em, palabra 5.59em. Todo cuelga del font-size. */

.cc-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.37em;
  line-height: 1;
  white-space: nowrap;
}

.cc-lockup__mark {
  width: 1.93em;
  height: 1.93em;
  display: block;
  flex: none;
}

.cc-lockup__nombre {
  font-family: var(--cc-font-display);
  font-weight: 800;
  font-size: 1em;
  letter-spacing: 0;
  text-transform: none;
  transform: translateY(0.04em);
}

/* Cabecera y pie van sobre crema, que es donde el manual quiere el logo a
   color. Si alguna vez alguno pasa a fondo oscuro, cambiar la clase a
   `cc-lockup--claro` (el manual prohibe recuadrarlo en una caja blanca). */
.cc-lockup--marca .cc-lockup__nombre { color: var(--cc-tinta, #4C2882); }
.cc-lockup--marca .cc-lockup__click { color: var(--cc-fucsia, #D6307F); }
.cc-lockup--claro .cc-lockup__nombre,
.cc-lockup--claro .cc-lockup__click { color: #fff; }

/* ---------- Header ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  background: rgba(255, 248, 236, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(76, 40, 130, 0.08);
}
/* 36 px de alto los da el globo: 36 / 1.93 = 18.65px de font-size. */
.topbar__logo { font-size: 18.65px; }

/* ---------- Menú de secciones ---------- */

/* El header fija 64px arriba y tapaba el título de la sección a la que se
   saltaba. Había un `offset: -72` al hacer scroll, pero vive DENTRO de
   `initLenis()`, que se sale antes si el visitante pide menos animación o si
   Lenis no cargó: en esos dos casos el ancla caía debajo del header y no se
   veía a dónde había llegado. `scroll-margin-top` lo arregla en el CSS, o sea
   en todos los caminos —enlace del menú, del pie, teclado o URL pegada con
   `#precios`— sin depender de que corra un solo script. */
:where(section[id], main[id]) { scroll-margin-top: 76px; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__enlace {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--cc-tinta);
  font-family: var(--cc-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.nav__enlace:hover { background: rgba(139, 92, 246, 0.12); }
.nav__enlace:focus-visible { outline: 3px solid var(--cc-violeta); outline-offset: 2px; }

/* La sección que se está mirando. El subrayado va con `box-shadow` y no con
   `border-bottom` para que marcar el activo no cambie la altura del enlace y
   empuje la fila entera un pixel. */
.nav__enlace[aria-current="true"] {
  color: var(--cc-fucsia);
  box-shadow: inset 0 -2px 0 0 var(--cc-fucsia);
  border-radius: 6px;
}

/* En escritorio el CTA que se ve es el del header, no el del panel. */
.nav__item--cta { display: none; }
.nav__boton { display: none; }

/* ---------- Botón hamburguesa y panel (teléfono y tablet) ---------- */
/* 1120px, y el número sale de medir, no de elegir uno redondo.

   La fila de escritorio es marca + siete enlaces + botón de WhatsApp:
   147 + 640 + 210 = 997px, más 24 de separaciones y 56 de relleno = 1077, más
   la barra de desplazamiento. O sea que por debajo de ~1092px no entra.

   Estuvo en 1024 y se rompió al traer el lockup nuevo: el logo pasó de 81px
   —un SVG compacto— a 147px, porque ahora el wordmark se compone en HTML para
   no depender de que el visitante tenga Baloo 2 instalada. Ese cambio es
   correcto y no se toca; lo que había que mover era el corte. Sin esto, entre
   1025 y 1092px el header desbordaba y la página entera se iba en horizontal.

   La lección: este número depende del ancho REAL del logo. Si el lockup vuelve
   a cambiar de tamaño, hay que volver a medir. */
@media (max-width: 1120px) {
  /* El panel cuelga del header y ocupa el ancho completo. `position: fixed` y
     no `absolute` porque el header es `sticky`: con `absolute` el panel se iría
     con el documento al hacer scroll y quedaría flotando a mitad de página. */
  .nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 39;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: 8px 16px 18px;
    /* Fondo SÓLIDO, no translúcido.

       Estaba en `rgba(...,0.98)` con desenfoque detrás y en la captura se leía
       el titular del hero a través del panel: el menú parecía a medio hacer. El
       desenfoque tampoco es de fiar acá —el header que lo contiene ya tiene el
       suyo, y donde `backdrop-filter` no está soportado el respaldo era un
       fondo casi transparente, o sea el peor caso justo en el navegador más
       viejo. Un color plano se ve igual en todos y no deja nada legible atrás. */
    background: var(--cc-crema);
    border-bottom: 1px solid rgba(76, 40, 130, 0.12);
    box-shadow: 0 16px 32px rgba(76, 40, 130, 0.14);

    /* Cerrado. `visibility` además de `opacity` para que el panel oculto no sea
       enfocable con Tab: con sólo `opacity: 0` los siete enlaces siguen en el
       orden de tabulación y quien navega con teclado recorre un menú invisible. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    /* `visibility` no se interpola: se cambia de golpe, y CUÁNDO importa.
       Al cerrar se retrasa 0,2s (`linear 0.2s`) para que el panel alcance a
       desvanecerse antes de desaparecer; al abrir el retraso es 0, así el panel
       es enfocable en el mismo instante en que se lo marca como abierto. Con el
       retraso en los dos sentidos, mover el foco al primer enlace fallaba en
       silencio: el elemento todavía estaba `hidden` y `focus()` no hace nada. */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .topbar[data-menu="abierto"] .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }

  .nav__lista { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__enlace {
    padding: 13px 14px;          /* alto de toque cómodo, no un enlace de 20px */
    font-size: 1.05rem;
    border-radius: 12px;
  }
  .nav__enlace[aria-current="true"] {
    background: rgba(214, 48, 127, 0.10);
    box-shadow: none;
    border-radius: 12px;
  }
  .nav__item--cta { display: block; margin-top: 10px; }
  .nav__cta { display: flex; justify-content: center; width: 100%; }

  .nav__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;                 /* 44x44 es el mínimo cómodo para el pulgar */
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(76, 40, 130, 0.18);
    border-radius: 12px;
    background: transparent;
    color: var(--cc-tinta);
    cursor: pointer;
  }
  .nav__boton:focus-visible { outline: 3px solid var(--cc-violeta); outline-offset: 2px; }

  /* Tres barras con un solo elemento: la del medio es el `span` y las otras dos
     son sus pseudoelementos. Al abrir, la del medio se desvanece y las otras
     dos rotan hasta formar la cruz. */
  .nav__barras,
  .nav__barras::before,
  .nav__barras::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.16s ease;
  }
  .nav__barras { position: relative; }
  .nav__barras::before,
  .nav__barras::after { content: ""; position: absolute; left: 0; }
  .nav__barras::before { top: -6px; }
  .nav__barras::after  { top: 6px; }

  .topbar[data-menu="abierto"] .nav__barras { background: transparent; }
  .topbar[data-menu="abierto"] .nav__barras::before { transform: translateY(6px) rotate(45deg); }
  .topbar[data-menu="abierto"] .nav__barras::after  { transform: translateY(-6px) rotate(-45deg); }
}

/* Debajo de 720px el CTA del header se acorta a "Agenda 📲": el botón es el
   único camino a WhatsApp siempre visible, así que se achica pero no se
   esconde; el texto completo sigue en el panel. */
@media (max-width: 720px) {
  .topbar__cta-largo { display: none; }
}


/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 32px 20px 56px;
}
.hero__inner {
  max-width: var(--cc-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.hero__title {
  font-size: clamp(2.1rem, 8vw, 4rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.35em;
}
.hero__title em {
  font-style: italic;
  color: var(--cc-fucsia);
}
.hero__sub {
  font-size: 1.12rem;
  max-width: 34ch;
  color: var(--cc-tinta);
  opacity: 0.88;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.hero__globo { width: 100%; height: 100%; object-fit: contain; }
.hero__visual canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.hero__visual--3d .hero__globo { visibility: hidden; }

/* Confeti suave de fondo (decoración de marca, lila) */
.hero__confeti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 7px at 12% 22%, rgba(167, 139, 250, 0.35) 99%, transparent),
    radial-gradient(circle 5px at 88% 14%, rgba(251, 191, 36, 0.4) 99%, transparent),
    radial-gradient(circle 6px at 78% 78%, rgba(214, 48, 127, 0.16) 99%, transparent),
    radial-gradient(circle 4px at 25% 85%, rgba(139, 92, 246, 0.28) 99%, transparent),
    radial-gradient(circle 5px at 55% 8%, rgba(167, 139, 250, 0.25) 99%, transparent);
}

/* ---------- Secciones ---------- */
.section { padding: 64px 20px; overflow-x: clip; }
.section__head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.section__head p { font-size: 1.08rem; opacity: 0.85; }

/* ---------- Cómo funciona ---------- */
.pasos__grid {
  max-width: var(--cc-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
.pasos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.paso {
  position: relative;
  background: #fff;
  border-radius: var(--cc-radius);
  padding: 22px 22px 22px 84px;
  box-shadow: 0 10px 30px rgba(76, 40, 130, 0.08);
}
/* Cuando pasa cada etapa. Va ARRIBA del titulo y no dentro del parrafo porque
   lo que ordena el recorrido es el tiempo —dias antes, en la fiesta, despues—,
   no el numero: el numero solo dice que hay una secuencia, esta etiqueta dice
   de que secuencia se trata. Sin ella, las cuatro tarjetas se leen como cuatro
   funciones sueltas y se pierde justo lo que hay que contar. */
.paso__cuando {
  display: block;
  margin-bottom: 2px;
  font-family: var(--cc-font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-fucsia);
}
.paso h3 { font-size: 1.3rem; margin-bottom: 0.25em; }
.paso p { margin: 0; opacity: 0.85; }
.paso__num {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-family: var(--cc-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
  background: var(--cc-grad-globo);
  border-radius: 50%;
  border: 3px solid var(--cc-amarillo);
}
/* ---------- Carrusel de etapas ---------- */

.etapas { margin: 0; }

/* Las cuatro diapositivas se apilan y se cruzan por opacidad. El marco reserva
   la altura con `aspect-ratio` para que al cambiar de una a otra la pagina no
   pegue un salto: sin eso, la seccion crece y encoge en cada rotacion y el
   texto de al lado se mueve solo. */
.etapas__marco {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 640 / 1148;
}
.etapa {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.etapa.is-activa {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}
.etapa img,
.etapa video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--cc-radius);
  border: 4px solid #fff;
  box-shadow: 0 16px 40px rgba(76, 40, 130, 0.16);
  background: var(--cc-tinta);
}
/* El pie va SOBRE la imagen y no debajo: puesto debajo, la altura del bloque
   cambiaba segun el largo del texto de cada etapa y el carrusel temblaba. */
.etapa figcaption {
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  padding: 26px 14px 12px;
  border-radius: 0 0 calc(var(--cc-radius) - 4px) calc(var(--cc-radius) - 4px);
  background: linear-gradient(180deg, rgba(44, 33, 64, 0) 0%, rgba(44, 33, 64, 0.82) 55%);
  color: #fff;
  font-family: var(--cc-font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
  text-align: left;
}
.etapa__cuando {
  display: block;
  font-family: var(--cc-font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cc-amarillo);
}

.etapas__puntos {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}
.etapas__punto {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(76, 40, 130, 0.22);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.etapas__punto.is-activo { background: var(--cc-fucsia); transform: scale(1.25); }
.etapas__punto:focus-visible { outline: 3px solid var(--cc-violeta); outline-offset: 3px; }

/* Los puntos son de 11px pero el area que se puede tocar tiene que ser comoda
   para un pulgar; se agranda sin cambiar lo que se ve. */
.etapas__punto::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -11px 0 0 -11px;
}
.etapas__puntos { position: relative; }
.etapas__punto { position: relative; }

/* ---------- Mundos (vitrina) ---------- */
.mundos { background: linear-gradient(180deg, var(--cc-crema) 0%, #fdf0e0 100%); }
.mundos__grid {
  list-style: none;
  margin: 0;
  padding: 4px 20px 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--cc-lila) transparent;
  /* Cada tarjeta mide lo que mide su contenido. Sin esto se estiran todas a
     la altura de la más alta y las destacadas (4:3, más bajas) quedan con un
     bloque blanco vacío debajo del título. */
  align-items: start;
}
.mundo {
  scroll-snap-align: center;
  margin: 0;
  background: #fff;
  border-radius: var(--cc-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(76, 40, 130, 0.1);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.mundo:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(76, 40, 130, 0.18); }
.mundo img { width: 100%; aspect-ratio: 9 / 11; object-fit: cover; }
/* Antes existía una variante `.mundo--hero` (Bluey y Carreras a 4:3, ocupando
   dos columnas). Se eliminó: en móvil quedaban de otra altura que el resto y
   la vitrina se veía desprolija. Ahora las seis tarjetas son idénticas, con
   sus imágenes en 9:16 tomadas del `fondo-banner.jpg` de cada temática. */
.mundo h3 {
  font-size: 1.15rem;
  margin: 0;
  padding: 14px 16px 16px;
  color: var(--cc-tinta);
}
.mundos__mas {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.98rem;
  opacity: 0.85;
}

/* Fusion OpenCode+Claude 2026-07-27: experiencia/modal/porque/invitaciones/faq
   quedan solo en la version Claude (mas abajo). Duplicados OpenCode eliminados. */

/* ---------- Precios ---------- */
.precios__grid {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.plan {
  position: relative;
  background: #fff;
  border-radius: var(--cc-radius);
  padding: 32px 28px;
  box-shadow: 0 12px 36px rgba(76, 40, 130, 0.1);
}
.plan h3 { font-size: 1.4rem; }
.plan__precio {
  font-family: var(--cc-font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--cc-fucsia);
  margin: 0 0 18px;
}
.plan__precio::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--cc-lila);
  opacity: 0.5;
}
/* Precio anterior tachado: se muestra en tinta y chico para que el que manda
   siga siendo el nuevo, en fucsia. */
.plan__antes {
  display: inline-block;
  font-size: 1.15rem;
  color: var(--cc-tinta);
  opacity: 0.45;
  margin-right: 8px;
  text-decoration-thickness: 2px;
  vertical-align: middle;
}
.precios__promo {
  display: inline-block;
  margin: 14px auto 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--cc-amarillo);
  color: var(--cc-tinta);
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(251, 191, 36, 0.4);
}
.plan ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.plan li { padding-left: 30px; position: relative; }
.plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 800;
  color: var(--cc-fucsia);
}
.plan--destacado {
  border: 3px solid var(--cc-fucsia);
  box-shadow: 0 18px 48px rgba(214, 48, 127, 0.2);
}
/* La tarjeta de baby shower es OTRO producto, no un tercer nivel del mismo.
   Por eso lleva su propia etiqueta y un borde suave en vez del fucsia de
   "Más elegido": quien compara planes de cumpleaños tiene que ver de un vistazo
   que esta columna no compite con las otras dos. */
.plan--baby { border: 2px solid rgba(139, 92, 246, 0.4); }
.plan__badge--baby { background: var(--cc-violeta); }
.plan__badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cc-fucsia);
  color: #fff;
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45em 1.2em;
  border-radius: 999px;
  white-space: nowrap;
}
.precios__medida {
  max-width: 560px;
  margin: 32px auto 0;
  text-align: center;
  background: rgba(251, 191, 36, 0.22);
  border: 2px dashed var(--cc-oro);
  border-radius: 999px;
  padding: 14px 24px;
  font-size: 1.05rem;
}
.precios__medida strong { color: var(--cc-fucsia); }

/* ---------- CTA final ---------- */
.agenda { padding-bottom: 88px; }
.agenda__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: var(--cc-grad-globo);
  border-radius: 28px;
  padding: 48px 28px 52px;
  color: #fff;
  box-shadow: 0 24px 60px rgba(76, 40, 130, 0.3);
}
.agenda__inner h2 { color: #fff; }
.agenda__inner p { opacity: 0.92; max-width: 42ch; margin: 0 auto 24px; }
.agenda__mark { margin: 0 auto 16px; }
.agenda .btn--cta {
  background: #fff;
  color: var(--cc-fucsia);
  box-shadow: 0 6px 0 rgba(76, 40, 130, 0.55), 0 14px 28px rgba(0, 0, 0, 0.18);
}
.agenda .btn--cta:hover { box-shadow: 0 8px 0 rgba(76, 40, 130, 0.55), 0 18px 32px rgba(0, 0, 0, 0.22); }
.agenda .btn--cta:active { box-shadow: 0 3px 0 rgba(76, 40, 130, 0.55); }

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding: 40px 20px 48px;
  border-top: 1px solid rgba(76, 40, 130, 0.1);
  font-size: 0.95rem;
}
/* 30 px de alto: 30 / 1.93 = 15.54px. */
.footer__logo { font-size: 15.54px; margin: 0 auto 12px; }
.footer p { margin: 0 0 6px; opacity: 0.8; }
.footer__cfg { font-size: 0.85rem; opacity: 0.6; }
/* Los enlaces del pie no pueden heredar esa transparencia: quedaban en 3,35:1. El texto se aclara con color y
   los enlaces van en fucsia oscuro (#C2186B, 5,47:1 sobre el crema). */
.footer .footer__cfg { opacity: 1; color: rgba(76, 40, 130, 0.72); }
.footer__cfg a { color: var(--cc-fucsia-oscuro); font-weight: 700; text-underline-offset: 2px; }
.footer__cfg a:focus-visible { outline: 3px solid var(--cc-amarillo); outline-offset: 3px; }
.footer__cfg code {
  background: rgba(76, 40, 130, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.85em;
}
.footer__legal { font-size: 0.85rem; opacity: 0.6; }
/* El crédito a AutomatizaTech es un enlace. Hereda el color del pie en vez de
   quedar azul de navegador —que ahí canta—, y el subrayado es lo que avisa que
   se puede tocar: sin él, con el color heredado, no se distingue del texto. */
.footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__legal a:hover { color: var(--cc-fucsia); }
.footer__legal a:focus-visible { outline: 3px solid var(--cc-amarillo); outline-offset: 3px; }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 14px 0;
}
.footer__links a { color: var(--cc-tinta); font-weight: 700; }
.footer__links a:focus-visible { outline: 3px solid var(--cc-amarillo); outline-offset: 3px; }

/* ---------- Ejemplo de temática (video opt-in) ----------
   El video NO se autoreproduce ni se precarga: se ve el póster y recién al
   tocar se descarga el MP4. Son 3,6 MB con narración y música — imponerlo a
   todo el que entra costaría conversión y datos móviles. */
.experiencia { background: linear-gradient(180deg, #fdf0e0 0%, var(--cc-crema) 100%); }
.experiencia__frame {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  perspective: 1000px;
}
.experiencia__play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--cc-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 16px 44px rgba(76, 40, 130, 0.22);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.experiencia__play:hover,
.experiencia__play:focus-visible { transform: translateY(-5px); box-shadow: 0 24px 56px rgba(76, 40, 130, 0.28); }
.experiencia__play img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.experiencia__etiqueta {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 10px 16px;
  background: #174d70;
  border-bottom: 2px solid rgba(255, 255, 255, 0.52);
  color: #fff;
  font-size: clamp(0.95rem, 3.4vw, 1.08rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
}
.experiencia__boton {
  position: absolute;
  top: 50%; left: 50%;
  width: 72px; height: 72px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cc-fucsia);
  color: #fff;
  box-shadow: 0 8px 24px rgba(194, 24, 107, 0.45);
  padding-left: 4px; /* centra ópticamente el triángulo */
}
.experiencia__dur {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(76, 40, 130, 0.82);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- Modal del video ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(28, 12, 48, 0.82); }
.modal__box { position: relative; z-index: 1; padding: 16px; max-height: 100dvh; }
.modal__box video {
  display: block;
  width: auto;
  max-width: min(92vw, 420px);
  max-height: 86dvh;
  aspect-ratio: 9 / 16;
  border-radius: var(--cc-radius);
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.modal__cerrar {
  position: absolute;
  top: -6px; right: 4px;
  width: 44px; height: 44px;   /* área táctil mínima */
  border: 0; border-radius: 50%;
  background: #fff;
  color: var(--cc-tinta);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.modal__cerrar:focus-visible { outline: 4px solid var(--cc-amarillo); outline-offset: 3px; }
/* Con el modal abierto el fondo no scrollea detrás */
body.modal-abierto { overflow: hidden; }

/* ---------- Por qué CumpleClick ---------- */
.porque__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--cc-maxw);
  display: grid;
  gap: 18px;
}
.porque__item {
  background: #fff;
  border-radius: var(--cc-radius);
  padding: 24px 22px;
  box-shadow: 0 10px 28px rgba(76, 40, 130, 0.09);
}
.porque__item h3 { margin: 0 0 8px; color: var(--cc-tinta); font-size: 1.18rem; }
.porque__item p { margin: 0; opacity: 0.88; }

/* Invitaciones digitales: servicio real y actual, no promesa a futuro */
.invitaciones {
  max-width: var(--cc-maxw);
  margin: 26px auto 0;
  padding: 26px 24px;
  border-radius: var(--cc-radius);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(214, 48, 127, 0.1) 100%);
  border: 2px dashed rgba(139, 92, 246, 0.35);
  display: grid;
  gap: 16px;
  align-items: center;
  text-align: center;
}
.invitaciones h3 { margin: 0 0 6px; color: var(--cc-tinta); font-size: 1.2rem; }
.invitaciones p { margin: 0; opacity: 0.9; }

/* ---------- Eventos y formulario de cotización ---------- */
.eventos { background: linear-gradient(180deg, #fff 0%, #f8f0ff 100%); }
.eventos__grid {
  list-style: none;
  max-width: var(--cc-maxw);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.eventos__item {
  min-height: 152px;
  padding: 20px 16px;
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--cc-radius);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(76, 40, 130, 0.07);
}
.eventos__item > span { display: block; margin-bottom: 8px; font-size: 1.55rem; }
.eventos__item h3 { margin-bottom: 6px; font-size: 1.05rem; }
.eventos__item p { margin: 0; font-size: 0.9rem; line-height: 1.35; opacity: 0.84; }
.contacto {
  width: 100%;
  max-width: 960px;
  margin: 32px auto 0;
  padding: 28px 22px;
  border-radius: calc(var(--cc-radius) + 8px);
  background: linear-gradient(135deg, #4c2882 0%, #8b5cf6 56%, #d6307f 120%);
  color: #fff;
  box-shadow: 0 22px 48px rgba(76, 40, 130, 0.26);
}
.contacto h3, .contacto p { color: #fff; }
.contacto h3 { font-size: clamp(1.65rem, 5vw, 2.25rem); }
.contacto__intro p:last-child { max-width: 45ch; opacity: 0.94; }
.contacto__eyebrow {
  margin-bottom: 8px;
  color: var(--cc-amarillo) !important;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contacto__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}
.contacto__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contacto__form label { display: grid; gap: 6px; font-size: 0.92rem; font-weight: 700; }
.contacto__form input,
.contacto__form select,
.contacto__form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid rgba(255, 255, 255, 0.48);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--cc-tinta);
  font: inherit;
  font-weight: 600;
}
.contacto__form textarea { resize: vertical; min-height: 112px; }
.contacto__form input:focus-visible,
.contacto__form select:focus-visible,
.contacto__form textarea:focus-visible { outline: 3px solid var(--cc-amarillo); outline-offset: 2px; }
.contacto .btn--cta { background: var(--cc-amarillo); color: var(--cc-tinta); box-shadow: 0 6px 0 var(--cc-oro-oscuro), 0 14px 28px rgba(0, 0, 0, 0.18); }
.contacto .btn--cta:hover { box-shadow: 0 8px 0 var(--cc-oro-oscuro), 0 18px 32px rgba(0, 0, 0, 0.22); }
.contacto__estado { min-height: 1.5em; margin: -2px 0 0; font-size: 0.9rem; font-weight: 700; }
.contacto__estado--error { color: #fff4a8; }
.contacto__estado--ok { color: #fff; }
.contacto__form button[disabled] { cursor: wait; opacity: 0.72; transform: none; }
.contacto__consentimiento {
  grid-template-columns: 22px 1fr !important;
  align-items: start;
  gap: 10px !important;
  line-height: 1.35;
}
.contacto__consentimiento input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  accent-color: var(--cc-amarillo);
}

/* ---------- FAQ (details nativo: accesible y sin JS) ---------- */
.faq__lista { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq__item {
  background: #fff;
  border-radius: var(--cc-radius);
  box-shadow: 0 8px 22px rgba(76, 40, 130, 0.08);
  overflow: hidden;
}
.faq__item summary {
  cursor: pointer;
  padding: 18px 52px 18px 20px;
  font-family: var(--cc-font-display);
  font-weight: 700;
  color: var(--cc-tinta);
  position: relative;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 3px solid var(--cc-amarillo); outline-offset: -3px; }
.faq__item summary::after {
  content: '+';
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--cc-fucsia);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { margin: 0; padding: 0 20px 20px; opacity: 0.88; }

/* ---------- Confianza y condiciones ---------- */
.confianza { background: #fff; }
.confianza__grid {
  max-width: var(--cc-maxw);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.confianza__item {
  padding: 24px 22px;
  border-radius: var(--cc-radius);
  background: var(--cc-crema);
  border: 1px solid rgba(139, 92, 246, 0.18);
  box-shadow: 0 10px 28px rgba(76, 40, 130, 0.07);
}
.confianza__item h3 { font-size: 1.15rem; margin-bottom: 8px; }
.confianza__item p { margin: 0; opacity: 0.88; }

/* ---------- Reveal base (GSAP pone los estados; sin JS todo visible) ---------- */
/* `will-change` NO va acá. Estaba puesto sobre `[data-reveal]`, que en esta
   página son 53 elementos: el navegador le daba a cada uno su propia capa de
   composición y las sostenía TODA la sesión, aunque la animación de entrada
   dura 0,7s y corre una sola vez (`once: true`). En un teléfono eso es
   memoria de video y trabajo de compositor permanentes a cambio de nada.
   GSAP ya promueve el elemento solo mientras lo está animando (force3D),
   que es exactamente el rato en que sirve. */
/* Los bloques con profundidad necesitan contexto 3D en el padre para que
   rotationX se vea como perspectiva y no como un aplastado vertical. */
[data-depth] { will-change: transform, opacity; transform-style: preserve-3d; }

/* ---------- Desktop ---------- */
@media (min-width: 720px) {
  .topbar { padding: 0 28px; }
  .hero { padding: 48px 32px 72px; }
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: 40px; }
  .hero__ctas { margin-top: 26px; }
  .pasos__grid { grid-template-columns: 1fr 0.8fr; gap: 48px; }
  .mundos__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: unset;
    overflow: visible;
    padding: 0;
    max-width: var(--cc-maxw);
    margin: 0 auto;
    gap: 20px;
  }
  /* Seis tarjetas iguales: 3 columnas × 2 filas en desktop, sin destacadas. */
  .mundos__grid { grid-template-columns: repeat(3, 1fr); }
  .precios__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1120px; }
  .precios { padding-top: 72px; }
  .porque__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .confianza__grid { grid-template-columns: repeat(3, 1fr); }
  .invitaciones { grid-template-columns: 1fr auto; padding: 32px 36px; }
  .invitaciones .btn { justify-self: end; }
  .eventos__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .contacto { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 36px; padding: 38px; align-items: start; }
  .contacto__form { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .contacto__campo--completo { grid-column: 1 / -1; }
  .experiencia__frame { max-width: 380px; }
  .porque__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .invitaciones { grid-template-columns: 1fr auto; text-align: left; padding: 30px 32px; }
  .experiencia__frame { max-width: 380px; }
}
@media (min-width: 1024px) {
  .section { padding: 88px 32px; }
}

/* ---------- Reduced motion: todo quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mundo:hover { transform: none; }
  .experiencia__play:hover, .experiencia__play:focus-visible { transform: none; }
}

/* ---------- Demos: enlaces como botones (antes 22 px de alto, difíciles de tocar) ---------- */
.eventos__item .demos__enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; opacity: 1; }
.demos__enlaces a {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px;
  border: 2px solid var(--cc-lila); border-radius: 999px; background: #fff;
  color: var(--cc-tinta); font-weight: 700; font-size: 0.9rem; text-decoration: none;
}
.demos__enlaces a:hover { border-color: var(--cc-fucsia); color: var(--cc-fucsia-oscuro); }
.demos__enlaces a:focus-visible { outline: 3px solid var(--cc-amarillo); outline-offset: 2px; }

/* ---------- Aviso de la feria (hasta el 28-09-2026; lo decide index.php) ---------- */
.feria-aviso {
  display: inline-block;
  margin: 0 0 16px; padding: 10px 16px;
  border-radius: 16px; background: #fff; border: 2px solid var(--cc-amarillo);
  box-shadow: 0 6px 18px rgba(76, 40, 130, 0.08);
  color: var(--cc-tinta); font-weight: 600; font-size: 0.95rem; line-height: 1.3; text-decoration: none;
}
.feria-aviso strong { color: var(--cc-fucsia-oscuro); font-weight: 800; }
.feria-aviso:hover strong { text-decoration: underline; }
.feria-aviso:focus-visible { outline: 3px solid var(--cc-violeta); outline-offset: 3px; }

/* ---------- Chat de la portada (js/chat.js) ----------
   Encima del header (40) y debajo del modal del video (90). En el celular el panel ocupa la pantalla. */
.ccchat { position: fixed; right: 16px; bottom: 16px; z-index: 80; font-family: var(--cc-font-body); }
.ccchat__abrir {
  position: relative; display: grid; place-items: center;
  width: 66px; height: 66px; padding: 0; border-radius: 50%; cursor: pointer;
  background: #fff; border: 3px solid var(--cc-fucsia);
  box-shadow: 0 10px 26px rgba(214, 48, 127, 0.35);
}
.ccchat__abrir:hover { border-color: var(--cc-fucsia-oscuro); }
/* Movimiento: el botón flota, el globo se balancea y el distintivo late. Con "reducir movimiento" se queda quieto. */
.ccchat__abrir { animation: ccchat-flota 3.2s ease-in-out infinite; }
.ccchat__abrir:hover { animation-play-state: paused; }
.ccchat__avatar { transform-origin: 50% 85%; animation: ccchat-balanceo 4s ease-in-out infinite; }
.ccchat__insignia { animation: ccchat-pulso 2.2s ease-out infinite; }
.ccchat--saluda .ccchat__abrir { animation: ccchat-salto 0.7s ease-out 2, ccchat-flota 3.2s ease-in-out 1.4s infinite; }
@keyframes ccchat-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ccchat-balanceo { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes ccchat-pulso { 0% { box-shadow: 0 0 0 0 rgba(214, 48, 127, 0.6); } 70%, 100% { box-shadow: 0 0 0 11px rgba(214, 48, 127, 0); } }
@keyframes ccchat-salto { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-14px) scale(1.06); } 55% { transform: translateY(0) scale(0.97); } 75% { transform: translateY(-5px) scale(1.02); } }
.ccchat__abrir:focus-visible { outline: 3px solid var(--cc-amarillo); outline-offset: 3px; }
.ccchat__avatar { width: 58px; height: 58px; display: block; }
.ccchat__insignia {
  position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cc-fucsia); color: #fff; border: 2px solid #fff;
}
.ccchat__aviso {
  position: absolute; right: 0; bottom: 78px; display: flex; align-items: center;
  width: max-content; max-width: min(260px, calc(100vw - 32px));
  background: #fff; border-radius: 18px 18px 6px 18px; border: 2px solid var(--cc-amarillo);
  box-shadow: 0 10px 24px rgba(76, 40, 130, 0.18); animation: ccchat-aparece 0.35s ease-out;
}
.ccchat__aviso[hidden] { display: none; }
.ccchat__aviso-texto {
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: 11px 6px 11px 16px; min-height: 44px; color: var(--cc-tinta); font: 800 0.95rem/1.25 var(--cc-font-body);
}
.ccchat__aviso-cerrar {
  flex: none; width: 36px; height: 44px; border: 0; background: none; cursor: pointer;
  color: rgba(76, 40, 130, 0.55); font-size: 1.3rem; line-height: 1;
}
.ccchat__aviso-texto:focus-visible, .ccchat__aviso-cerrar:focus-visible { outline: 3px solid var(--cc-violeta); outline-offset: -3px; border-radius: 14px; }
/* Solo movimiento, sin partir de opacity 0: si la animación no corre (pestaña oculta), el aviso igual se ve. */
@keyframes ccchat-aparece { from { transform: translateY(10px) scale(0.96); } to { transform: none; } }
.ccchat-abierto .ccchat__abrir { display: none; }
.ccchat__panel {
  position: fixed; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 32px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cc-crema); border-radius: 22px; border: 1px solid rgba(76, 40, 130, 0.12);
  box-shadow: 0 24px 60px rgba(76, 40, 130, 0.28); color: var(--cc-tinta);
}
.ccchat__panel[hidden] { display: none; }
.ccchat__cabecera { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; background: var(--cc-tinta); color: #fff; }
.ccchat__titulo { margin: 0; font: 800 1rem/1.1 var(--cc-font-display); }
.ccchat__sub { margin: 2px 0 0; font-size: 0.8rem; opacity: 0.85; }
.ccchat__cerrar {
  margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.6rem; line-height: 1;
}
.ccchat__cerrar:focus-visible { outline: 3px solid var(--cc-amarillo); outline-offset: 2px; }
.ccchat__mensajes { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ccchat__globo { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 0.95rem; line-height: 1.4; white-space: pre-line; word-wrap: break-word; }
.ccchat__globo--bot { align-self: flex-start; background: #fff; border: 1px solid rgba(76, 40, 130, 0.1); border-bottom-left-radius: 6px; }
.ccchat__globo--yo { align-self: flex-end; background: var(--cc-violeta); color: #fff; border-bottom-right-radius: 6px; }
.ccchat__globo a { color: var(--cc-fucsia-oscuro); font-weight: 700; }
.ccchat__wa {
  display: flex !important; align-items: center; justify-content: center; margin-top: 10px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: #1FA855; color: #fff !important; font-weight: 800; text-decoration: none;
}
.ccchat__globo--escribiendo { display: inline-flex; gap: 5px; padding: 14px 16px; }
.ccchat__globo--escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-lila); animation: ccchat-punto 1s infinite ease-in-out; }
.ccchat__globo--escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.ccchat__globo--escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ccchat-punto { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-4px); opacity: 1; } }
.ccchat__sugerencias { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; }
.ccchat__sugerencias[hidden] { display: none; }
.ccchat__chip {
  min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--cc-lila); background: #fff; color: var(--cc-tinta); font: 700 0.88rem/1 var(--cc-font-body);
}
.ccchat__chip:hover { border-color: var(--cc-fucsia); }
.ccchat__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(76, 40, 130, 0.1); background: #fff; }
.ccchat__texto {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 2px solid rgba(76, 40, 130, 0.18); font: 600 16px/1 var(--cc-font-body); color: var(--cc-tinta); background: #fff;
}
.ccchat__texto:focus { outline: none; border-color: var(--cc-violeta); }
.ccchat__enviar { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; cursor: pointer; background: var(--cc-fucsia); color: #fff; }
.ccchat__enviar:focus-visible { outline: 3px solid var(--cc-amarillo); outline-offset: 2px; }
.ccchat__pie { margin: 0; padding: 0 16px 10px; background: #fff; font-size: 0.78rem; text-align: center; color: rgba(76, 40, 130, 0.72); }
.ccchat__pie a { color: var(--cc-fucsia-oscuro); font-weight: 700; }
@media (max-width: 600px) {
  .ccchat__abrir { width: 60px; height: 60px; }
  .ccchat__avatar { width: 54px; height: 54px; }
  .ccchat__aviso { bottom: 72px; }
  .ccchat__panel { inset: 0; right: 0; bottom: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; }
  .ccchat-abierto, .ccchat-abierto body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .ccchat__globo--escribiendo span, .ccchat__aviso, .ccchat__abrir, .ccchat__avatar, .ccchat__insignia, .ccchat--saluda .ccchat__abrir { animation: none; } }