/* Fuente de marca: Comic Boys (títulos) */
@font-face {
  font-family: "Comic Boys";
  src: url("../fonts/comic-boys.woff") format("woff"),
       url("../fonts/comic-boys.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   Mi Mundo Sin Cuadernos — estilos
   Paleta de marca: rosa f87bac · sol ffde44 · turquesa 15d9db · cielo 00ccff
   ========================================================== */

:root {
  --rosa: #f87bac;
  --sol: #ffde44;
  --turquesa: #15d9db;
  --cielo: #00ccff;

  --rosa-suave: #fde4ee;
  --sol-suave: #fff6c7;
  --turquesa-suave: #d4f7f7;
  --cielo-suave: #d2f4ff;

  --tinta: #1b3a6b;        /* azul marino de los textos del brochure */
  --tinta-suave: #4a5f82;
  --fondo: #fffdf8;
  --fondo-suave: #f3fbfd;
  --blanco: #ffffff;
  --linea: #e3edf3;

  --marca: "Comic Boys", "Fredoka", "Nunito", system-ui, sans-serif;
  --titulos: "Fredoka", "Nunito", system-ui, sans-serif;
  --texto: "Nunito", system-ui, sans-serif;

  --radio: 28px;
  --radio-chico: 16px;
  --sombra: 0 10px 30px rgba(27, 58, 107, .08);
  --ancho: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fondo);
  overflow-x: hidden;
}
html, body { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.15; margin: 0 0 .6em; font-weight: 600; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.contenedor--estrecho { width: min(100% - 32px, 820px); }

.saltar { position: absolute; left: -999px; }
.saltar:focus { left: 16px; top: 16px; z-index: 100; background: var(--sol); padding: 8px 14px; border-radius: 10px; }

:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; border-radius: 6px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--titulos); font-weight: 600; font-size: 1.05rem;
  padding: .85em 1.6em; border-radius: 999px; text-decoration: none;
  border: 2.5px solid transparent; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 58, 107, .15); }
.boton--rosa { background: var(--rosa); color: var(--tinta); }
.boton--sol { background: var(--sol); color: var(--tinta); }
.boton--blanco { background: var(--blanco); color: var(--tinta); }
.boton--borde { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.boton--chico { padding: .55em 1.2em; font-size: .98rem; }
.botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6em; }
.botones--centro { justify-content: center; }

/* ---------- Etiquetas y títulos ---------- */
.etiqueta {
  display: inline-block; font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta); background: var(--sol-suave); padding: .35em .9em; border-radius: 999px; margin-bottom: 1em;
}
.titulo-seccion { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.titulo-seccion p:last-child { color: var(--tinta-suave); }
.resalte { position: relative; white-space: nowrap; }
.resalte::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .08em; height: .32em;
  background: var(--sol); border-radius: 999px; z-index: -1;
}

/* ---------- Manchas decorativas (como el brochure) ---------- */
.mancha { position: absolute; z-index: -1; opacity: .9; }
.mancha--turquesa { background: var(--turquesa); border-radius: 62% 38% 46% 54% / 55% 44% 56% 45%; }
.mancha--sol      { background: var(--sol);      border-radius: 40% 60% 63% 37% / 46% 52% 48% 54%; }
.mancha--rosa     { background: var(--rosa);     border-radius: 58% 42% 35% 65% / 50% 60% 40% 50%; }
.mancha--cielo    { background: var(--cielo);    border-radius: 50% 50% 38% 62% / 58% 42% 58% 42%; }
.mancha { animation: morfar 14s ease-in-out infinite alternate; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 253, 248, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.cabecera__logo img { width: 210px; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.menu ul a { text-decoration: none; font-weight: 700; padding: .3em 0; border-bottom: 3px solid transparent; }
.menu ul a:hover, .menu ul a[aria-current="page"] { border-color: var(--rosa); }
.menu-boton { display: none; }

@media (max-width: 880px) {
  .cabecera__logo img { width: 170px; }
  .menu-boton {
    display: grid; gap: 5px; place-content: center; width: 46px; height: 46px;
    background: var(--sol-suave); border: 0; border-radius: 14px; cursor: pointer;
  }
  .menu-boton span { display: block; width: 22px; height: 2.5px; background: var(--tinta); border-radius: 2px; transition: .25s; }
  .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--fondo); padding: 18px 16px 24px; border-bottom: 1px solid var(--linea); box-shadow: var(--sombra);
    display: none;
  }
  .menu.abierto { display: flex; }
  .menu ul { flex-direction: column; gap: 4px; }
  .menu ul a { display: block; padding: .6em .4em; border-bottom: 1px solid var(--linea); }
}

/* ---------- Fotos y espacios para fotos ---------- */
.foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }
.foto--hero { aspect-ratio: 5 / 4; border-radius: 46% 54% 42% 58% / 40% 44% 56% 60%; }
.foto--pendiente {
  display: grid; place-items: center; padding: 24px; text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.35) 14px 28px),
    linear-gradient(135deg, var(--cielo-suave), var(--turquesa-suave));
  border: 3px dashed var(--cielo);
  color: var(--tinta-suave); font-weight: 700; font-size: .95rem;
}
.foto--pendiente span { max-width: 22em; background: rgba(255,255,255,.85); padding: 8px 14px; border-radius: 12px; }

/* ---------- Cifras ---------- */
.cifras { background: var(--tinta); color: var(--blanco); padding: 34px 0; }
.cifras__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.cifra strong { display: block; font-family: var(--titulos); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; }
.cifra:nth-child(1) strong { color: var(--sol); }
.cifra:nth-child(2) strong { color: var(--rosa); }
.cifra:nth-child(3) strong { color: var(--turquesa); }
.cifra:nth-child(4) strong { color: var(--cielo); }
.cifra span { font-size: .95rem; opacity: .9; }
@media (max-width: 700px) { .cifras__grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(60px, 9vw, 110px) 0; }
.seccion--suave { background: var(--fondo-suave); }
.seccion--pegada { padding-top: 0; }

.cabeza-pagina { position: relative; isolation: isolate; overflow: hidden; padding: clamp(50px, 8vw, 100px) 0 clamp(40px, 6vw, 70px); text-align: center; }
.cabeza-pagina h1 { max-width: 18em; margin-inline: auto; }
.cabeza-pagina__intro { max-width: 40em; margin-inline: auto; font-size: 1.15rem; color: var(--tinta-suave); }
.cabeza-pagina__mancha { width: 320px; height: 340px; right: -140px; top: -110px; }

/* ---------- Tarjetas ---------- */
.tarjetas { display: grid; gap: 22px; }
.tarjetas--2 { grid-template-columns: repeat(2, 1fr); }
.tarjetas--3 { grid-template-columns: repeat(3, 1fr); }
.tarjetas--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .tarjetas--4 { grid-template-columns: repeat(2, 1fr); } .tarjetas--3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .tarjetas--4, .tarjetas--2 { grid-template-columns: 1fr; } }

.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); }
.tarjeta p { color: var(--tinta-suave); margin: 0; }
.tarjeta--compacta { padding: 24px; }
.tarjeta--grande { padding: 34px; }
.tarjeta__icono { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 18px; }
.icono { width: 28px; height: 28px; }
.fondo-rosa { background: var(--rosa-suave); color: #c43b74; }
.fondo-sol { background: var(--sol-suave); color: #a07c00; }
.fondo-turquesa { background: var(--turquesa-suave); color: #0b8e90; }
.fondo-cielo { background: var(--cielo-suave); color: #0088b0; }

/* Tripulantes */
.tripulante { border-radius: var(--radio); padding: 30px 26px; position: relative; }
.tripulante h3 { font-size: 1.5rem; }
.tripulante p { margin: 0; }
.tripulante__edad { display: inline-block; background: var(--blanco); font-weight: 800; font-size: .85rem; padding: .3em .9em; border-radius: 999px; margin-bottom: 14px; }
.tripulante--cielo { background: var(--cielo); }
.tripulante--sol { background: var(--sol); }
.tripulante--turquesa { background: var(--turquesa); }
.tripulante--rosa { background: var(--rosa); }

/* Valores (Nosotros) */
.valor { background: var(--blanco); border-radius: var(--radio); padding: 26px; border-top: 8px solid; box-shadow: var(--sombra); }
.valor p { margin: 0; color: var(--tinta-suave); }
.valor--rosa { border-color: var(--rosa); }
.valor--sol { border-color: var(--sol); }
.valor--turquesa { border-color: var(--turquesa); }
.valor--cielo { border-color: var(--cielo); }

/* ---------- Dos columnas ---------- */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.dos-columnas--invertida > :first-child { order: 0; }
@media (max-width: 880px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .dos-columnas--invertida > :first-child { order: 2; }
}

/* Ruta del mes */
.ruta { list-style: none; counter-reset: paso; padding: 0; margin: 1.5em 0 0; }
.ruta li { counter-increment: paso; position: relative; padding: 0 0 22px 58px; }
.ruta li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--titulos); font-weight: 700; background: var(--sol);
}
.ruta li:nth-child(2)::before { background: var(--turquesa); }
.ruta li:nth-child(3)::before { background: var(--rosa); }
.ruta li:nth-child(4)::before { background: var(--cielo); }
.ruta li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: 2px; border-left: 2px dashed var(--linea); }

/* Lista con check */
.lista-check { list-style: none; padding: 0; margin: 1.2em 0 0; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check .icono { flex: none; width: 24px; height: 24px; color: var(--blanco); background: var(--turquesa); border-radius: 50%; padding: 4px; stroke-width: 3; margin-top: 2px; }

/* ---------- Comparación ---------- */
.comparacion { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; max-width: 900px; margin: 0 auto; }
.comparacion__fila { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; }
.comparacion__fila > span { padding: 16px 20px; border-top: 1px solid var(--linea); }
.comparacion__fila > span:first-child { font-weight: 800; }
.comparacion__cabeza > span { border-top: 0; font-family: var(--titulos); font-weight: 600; font-size: 1.05rem; }
.comparacion__cabeza > span:nth-child(2) { background: var(--rosa); }
.comparacion__fila .si { background: var(--rosa-suave); font-weight: 700; }
.comparacion__fila > span:last-child { color: var(--tinta-suave); }
@media (max-width: 640px) {
  .comparacion__fila { grid-template-columns: 1fr 1fr; }
  .comparacion__fila > span:first-child { grid-column: 1 / -1; background: var(--fondo-suave); padding-block: 10px; }
  .comparacion__cabeza > span:first-child { display: none; }
}

/* ---------- Testimonios ---------- */
.testimonio { margin: 0; background: var(--blanco); border-radius: var(--radio); padding: 30px; box-shadow: var(--sombra); }
.testimonio blockquote { margin: 0 0 1em; font-size: 1.1rem; }
.testimonio figcaption { font-weight: 800; }
.testimonio--pendiente { border: 3px dashed var(--rosa); box-shadow: none; color: var(--tinta-suave); }

/* ---------- Precios ---------- */
.precios { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; max-width: 920px; margin: 0 auto; align-items: stretch; }
@media (max-width: 760px) { .precios { grid-template-columns: 1fr; } }
.precio { position: relative; background: var(--blanco); border-radius: var(--radio); padding: 34px; box-shadow: var(--sombra); }
.precio--destacado { border: 4px solid var(--cielo); }
.precio__sello { position: absolute; top: -16px; left: 30px; background: var(--cielo); font-weight: 800; padding: .3em 1em; border-radius: 999px; font-size: .9rem; }
.precio__nombre { font-size: 1.35rem; margin-bottom: .3em; }
.precio__valor { font-family: var(--titulos); font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 700; margin: 0; color: #c43b74; }
.precio--destacado .precio__valor { color: #0088b0; }
.precio__nota { color: var(--tinta-suave); font-weight: 700; }
.total {
  max-width: 920px; margin: 26px auto 0; background: var(--sol); border-radius: var(--radio);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 34px;
  font-family: var(--titulos); font-size: 1.3rem; font-weight: 600;
}
.total strong { font-size: clamp(1.8rem, 4vw, 2.4rem); }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }
.pasos li { background: var(--blanco); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); }
.pasos p { margin: 0; color: var(--tinta-suave); }
.pasos__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rosa); font-family: var(--titulos); font-weight: 700; font-size: 1.3rem; margin-bottom: 14px; }
.pasos li:nth-child(2) .pasos__num { background: var(--sol); }
.pasos li:nth-child(3) .pasos__num { background: var(--turquesa); }
.pasos li:nth-child(4) .pasos__num { background: var(--cielo); }

/* FAQ */
.faq { display: grid; gap: 14px; }
.faq details { background: var(--blanco); border-radius: var(--radio-chico); box-shadow: var(--sombra); padding: 0 24px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 800; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--titulos); font-size: 1.6rem; color: var(--rosa); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--tinta-suave); padding-bottom: 20px; margin: 0; }

/* ---------- CTA ---------- */
.cta { padding: 0 0 clamp(60px, 9vw, 110px); }
.seccion--suave + .cta, .seccion + .cta { padding-top: clamp(60px, 9vw, 110px); }
.cta__caja {
  background: var(--cielo); border-radius: 40px; text-align: center; padding: clamp(40px, 7vw, 70px) clamp(22px, 5vw, 60px);
  position: relative; overflow: hidden; isolation: isolate;
}
.cta__caja::before, .cta__caja::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.cta__caja::before { width: 220px; height: 220px; background: var(--turquesa); left: -70px; bottom: -90px; }
.cta__caja::after { width: 160px; height: 160px; background: var(--rosa); right: -40px; top: -60px; }
.cta__caja p { max-width: 36em; margin: 0 auto 1.6em; font-size: 1.1rem; }

/* ---------- Pie ---------- */
.pie { background: var(--rosa-suave); padding: 0 0 26px; }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: 56px 0 30px; }
@media (max-width: 760px) { .pie__grid { grid-template-columns: 1fr; gap: 26px; } }
.pie__logo { width: 190px; margin-bottom: 14px; }
.pie__titulo { font-size: 1.15rem; }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie__lista a { text-decoration: none; font-weight: 700; }
.pie__lista a:hover { text-decoration: underline; }
.pie__legal { border-top: 1px solid rgba(27, 58, 107, .15); padding-top: 20px; margin-top: 0; font-size: .9rem; color: var(--tinta-suave); }

/* WhatsApp flotante */
.wa-flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 60px; height: 60px; border-radius: 50%;
  background: #25d366; color: var(--blanco); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.2);
  transition: transform .2s;
}
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante .icono { width: 32px; height: 32px; }


/* ==========================================================
   SLIDER PRINCIPAL
   ========================================================== */
.slider { position: relative; overflow: hidden; isolation: isolate; }
.slider__pista { display: grid; }
.slide {
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(40px, 6vw, 80px) 0 clamp(90px, 9vw, 120px);
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s ease;
}
.slide.activo { opacity: 1; visibility: visible; z-index: 1; }
.slide--cielo { background: linear-gradient(160deg, var(--cielo-suave) 0%, var(--fondo) 60%); }
.slide--rosa  { background: linear-gradient(160deg, var(--rosa-suave) 0%, var(--fondo) 60%); }
.slide--sol   { background: linear-gradient(160deg, var(--sol-suave) 0%, var(--fondo) 60%); }
.slide__mancha1 { width: 380px; height: 420px; left: -200px; top: -130px; }
.slide__mancha2 { width: 300px; height: 300px; right: -120px; bottom: -150px; }
.slide__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; position: relative; z-index: 2; }
.slide__titulo { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.slide__intro { font-size: 1.15rem; color: var(--tinta-suave); max-width: 32em; }
.slide__visual { position: relative; }
.foto--forma2 { border-radius: 58% 42% 50% 50% / 46% 58% 42% 54%; }
.foto--forma3 { border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; }

/* Entrada del contenido de cada slide */
.slide .slide__texto > * { opacity: 0; transform: translateY(26px); }
.slide .slide__visual { opacity: 0; transform: scale(.85) rotate(-4deg); }
.slide.activo .slide__texto > * { animation: subir .8s cubic-bezier(.2,.8,.2,1) forwards; }
.slide.activo .slide__texto > :nth-child(2) { animation-delay: .12s; }
.slide.activo .slide__texto > :nth-child(3) { animation-delay: .24s; }
.slide.activo .slide__texto > :nth-child(4) { animation-delay: .36s; }
.slide.activo .slide__visual { animation: aparecer 1s cubic-bezier(.34,1.56,.64,1) .2s forwards; }
.slide.activo .resalte::after { animation: subrayar .9s ease .6s both; }

.insignia {
  position: absolute; display: flex; align-items: center; gap: 8px; z-index: 3;
  background: var(--blanco); padding: 10px 16px; border-radius: 999px; box-shadow: var(--sombra);
  font-weight: 800; font-size: .95rem; animation: flotar 4s ease-in-out infinite;
}
.insignia .icono { width: 22px; height: 22px; color: var(--rosa); }
.insignia--1 { left: -18px; top: 12%; }
.insignia--2 { right: -12px; bottom: 10%; animation-delay: -2s; }
.insignia--2 .icono { color: var(--cielo); }

.slider__controles {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px); padding: 6px 10px; border-radius: 999px; box-shadow: var(--sombra);
}
.slider__flecha {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--sol); color: var(--tinta); font-size: 1.6rem; line-height: 1; padding-bottom: 4px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.slider__flecha:hover { transform: scale(1.15); background: var(--rosa); }
.slider__puntos { display: flex; gap: 8px; }
.slider__puntos button {
  width: 12px; height: 12px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--linea); transition: width .4s ease, background .4s ease;
}
.slider__puntos button.activo { width: 34px; background: var(--rosa); }

@media (max-width: 880px) {
  .slide__grid { grid-template-columns: 1fr; }
  .slide__visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .insignia--1 { left: 6px; top: -14px; }
  .insignia--2 { right: 6px; bottom: -16px; }
}

/* ==========================================================
   FIGURAS QUE FLOTAN
   ========================================================== */
.decoraciones { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cabeza-pagina .decoraciones { z-index: -1; }
.deco { position: absolute; display: block; }
.deco--estrella  { width: 34px; left: 48%; top: 9%; animation: girar-flotar 7s ease-in-out infinite; }
.deco--estrella2 { width: 26px; right: 4%; top: 12%; animation: girar-flotar 9s ease-in-out infinite reverse; }
.deco--avion     { width: 70px; left: 47%; bottom: 34%; animation: volar 9s ease-in-out infinite; }
.deco--lapiz     { width: 92px; right: 28%; bottom: 12%; animation: flotar 6s ease-in-out infinite; }
.deco--circulo   { width: 22px; height: 22px; border: 3px solid var(--rosa); border-radius: 50%; left: 30%; bottom: 9%; animation: flotar 5s ease-in-out infinite; }
.deco--circulo2  { width: 16px; height: 16px; border: 3px solid var(--turquesa); border-radius: 50%; right: 42%; top: 6%; animation: flotar 6.5s ease-in-out -1s infinite; }
.deco--punto     { width: 12px; height: 12px; background: var(--cielo); border-radius: 50%; left: 3%; top: 58%; animation: latir 3s ease-in-out infinite; }
.deco--punto2    { width: 10px; height: 10px; background: var(--rosa); border-radius: 50%; right: 14%; bottom: 10%; animation: latir 3.5s ease-in-out -1s infinite; }
@media (max-width: 880px) {
  .slider .deco--avion, .slider .deco--lapiz, .slider .deco--estrella2, .slider .deco--punto, .slider .deco--circulo2 { display: none; }
  .slider .deco--estrella { left: auto; right: 6%; top: auto; bottom: 7%; }
  .slider .deco--circulo { left: 6%; bottom: 6%; }
  .deco--lapiz, .deco--avion { width: 54px; }
  .cabeza-pagina .deco--lapiz { right: 2%; bottom: 6%; }
  .cabeza-pagina .deco--avion { left: 2%; bottom: 8%; }
}

/* ==========================================================
   CINTA EN MOVIMIENTO
   ========================================================== */
.cinta {
  background: var(--rosa); overflow: hidden; padding: 14px 0; transform: rotate(-1.2deg);
  margin: -14px -12px 0; position: relative; z-index: 6; box-shadow: 0 8px 22px rgba(248,123,172,.35);
}
.cinta__pista { display: flex; gap: 22px; width: max-content; animation: desplazar 32s linear infinite; }
.cinta span { font-family: var(--titulos); font-weight: 600; font-size: 1.3rem; white-space: nowrap; }
.cinta__estrella { color: var(--sol); }
.cinta:hover .cinta__pista { animation-play-state: paused; }

/* ==========================================================
   EFECTOS EN LOS RECUADROS
   ========================================================== */
.tarjeta--efecto {
  position: relative;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease;
}
.tarjeta--efecto::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 6px; border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, var(--rosa), var(--sol), var(--turquesa), var(--cielo));
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.tarjeta--efecto:hover { transform: translateY(-10px) rotate(-.8deg); box-shadow: 0 22px 44px rgba(27, 58, 107, .16); }
.tarjeta--efecto:nth-child(even):hover { transform: translateY(-10px) rotate(.8deg); }
.tarjeta--efecto:hover::after { transform: scaleX(1); }
.tarjeta--efecto .tarjeta__icono { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.tarjeta--efecto:hover .tarjeta__icono { animation: menear .7s ease; }
.pasos li.tarjeta--efecto:hover .pasos__num { animation: rebotar .7s ease; }
.precio--destacado { animation: resplandor 3s ease-in-out infinite; }

/* Tripulantes con inclinación 3D y brillo */
.tripulante { transition: transform .25s ease, box-shadow .3s ease; transform-style: preserve-3d; will-change: transform; overflow: hidden; }
.tripulante::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 55%);
}
.tripulante:hover { box-shadow: 0 24px 40px rgba(27, 58, 107, .2); }
.tripulante:hover::after { opacity: 1; }
.tripulante h3 { transition: transform .3s; }
.tripulante:hover h3 { transform: translateZ(30px) scale(1.04); }
.tripulante__edad { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.tripulante:hover .tripulante__edad { transform: rotate(-6deg) scale(1.1); }

/* Botón con destello */
.boton--brillo { position: relative; overflow: hidden; }
.boton--brillo::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-20deg); animation: destello 4s ease-in-out infinite;
}
.boton:active { transform: scale(.97); }

/* Ondas entre secciones */
.seccion--suave { position: relative; }
.seccion--suave::before, .seccion--suave::after {
  content: ""; position: absolute; left: 0; right: 0; height: 40px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V20c120-18 240-18 360 0s240 18 360 0 240-18 360 0 240 18 360 0v20z' fill='%23f3fbfd'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.seccion--suave::before { top: -39px; }
.seccion--suave::after { bottom: -39px; transform: rotate(180deg); }

/* Detalles que se mueven */
.etiqueta { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.titulo-seccion:hover .etiqueta { transform: rotate(-3deg) scale(1.06); }
.cta__caja::before { animation: flotar 7s ease-in-out infinite; }
.cta__caja::after { animation: flotar 6s ease-in-out -2s infinite; }
.wa-flotante::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1;
  animation: pulso 2.4s ease-out infinite;
}
.faq details { transition: transform .3s ease, box-shadow .3s ease; }
.faq details:hover { transform: translateX(6px); }
.ruta li::before { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.ruta li:hover::before { transform: scale(1.2) rotate(-10deg); }
.cifra strong { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.cifra:hover strong { transform: scale(1.15) rotate(-3deg); }

/* ==========================================================
   APARICIÓN AL HACER SCROLL
   ========================================================== */
.js .revelar {
  opacity: 0; transform: translateY(34px) scale(.97);
  transition: opacity .7s ease, transform .8s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .revelar--zoom { transform: scale(.88); }
.js .revelar.visible { opacity: 1; transform: none; }
.js .revelar.visible.tarjeta--efecto { transition: opacity .7s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease; transition-delay: 0s; }

/* ==========================================================
   ANIMACIONES
   ========================================================== */
@keyframes subir { to { opacity: 1; transform: none; } }
@keyframes aparecer { to { opacity: 1; transform: none; } }
@keyframes subrayar { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes girar-flotar { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(25deg); } }
@keyframes volar { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(24px, -20px) rotate(6deg); } }
@keyframes latir { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .6; } }
@keyframes morfar {
  0%   { border-radius: 62% 38% 46% 54% / 55% 44% 56% 45%; transform: rotate(0); }
  50%  { border-radius: 40% 60% 60% 40% / 45% 60% 40% 55%; }
  100% { border-radius: 55% 45% 35% 65% / 60% 40% 60% 40%; transform: rotate(12deg); }
}
@keyframes desplazar { to { transform: translateX(-50%); } }
@keyframes menear { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.1); } 50% { transform: rotate(10deg) scale(1.1); } 75% { transform: rotate(-6deg); } }
@keyframes rebotar { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 70% { transform: translateY(3px); } }
@keyframes destello { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@keyframes pulso { from { transform: scale(1); opacity: .6; } to { transform: scale(1.7); opacity: 0; } }
@keyframes resplandor { 0%, 100% { box-shadow: 0 10px 30px rgba(0, 204, 255, .15); } 50% { box-shadow: 0 10px 40px rgba(0, 204, 255, .4); } }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar, .slide .slide__texto > *, .slide .slide__visual { opacity: 1; transform: none; }
}
.js .revelar.visible.inclinar { transition: opacity .7s ease, transform .2s ease, box-shadow .3s ease; transition-delay: 0s; }

/* ==========================================================
   VENTANA DE SALIDA (exit intent)
   ========================================================== */
.salida { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.salida[hidden] { display: none; }
.salida__fondo { position: absolute; inset: 0; background: rgba(27, 58, 107, .55); backdrop-filter: blur(4px); animation: aparecer-fondo .35s ease forwards; }
.salida__caja {
  position: relative; width: min(100%, 760px); max-height: calc(100vh - 32px); overflow-y: auto;
  display: grid; grid-template-columns: .8fr 1.2fr; background: var(--fondo); border-radius: 34px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
  animation: entrar-caja .6s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.salida.cerrando .salida__caja { animation: salir-caja .3s ease forwards; }
.salida.cerrando .salida__fondo { animation: salir-fondo .3s ease forwards; }
.salida__visual {
  position: relative; overflow: hidden; display: grid; place-items: center; min-height: 220px;
  background: linear-gradient(160deg, var(--cielo), var(--turquesa)); border-radius: 34px 0 0 34px;
}
.salida__visual img { width: 62%; max-width: 190px; position: relative; z-index: 1; animation: flotar 4s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(27, 58, 107, .25)); }
.salida__burbuja { position: absolute; border-radius: 50%; }
.salida__burbuja--1 { width: 170px; height: 170px; background: var(--sol); left: -60px; bottom: -50px; animation: morfar 8s ease-in-out infinite alternate; }
.salida__burbuja--2 { width: 110px; height: 110px; background: var(--rosa); right: -30px; top: -30px; animation: morfar 7s ease-in-out infinite alternate-reverse; }
.salida__estrella { position: absolute; width: 34px; right: 18%; bottom: 16%; z-index: 2; animation: girar-flotar 5s ease-in-out infinite; }
.salida__contenido { padding: 38px 36px 30px; }
.salida__contenido h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.salida__contenido p { color: var(--tinta-suave); }
.salida__lista { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; font-weight: 700; }
.salida__lista li { display: flex; gap: 10px; align-items: center; }
.salida__lista .icono { flex: none; width: 22px; height: 22px; color: var(--blanco); background: var(--turquesa); border-radius: 50%; padding: 4px; stroke-width: 3; }
.salida__botones { display: grid; gap: 10px; }
.salida__botones .boton { width: 100%; }
.salida__secundario { text-align: center; font-weight: 700; padding: .7em; border-radius: 999px; background: var(--sol-suave); text-decoration: none; transition: background .2s; }
.salida__secundario:hover { background: var(--sol); }
.salida__no { display: block; margin: 16px auto 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .9rem; color: var(--tinta-suave); text-decoration: underline; }
.salida__x {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--blanco); color: var(--tinta); font-size: 1.6rem; line-height: 1; box-shadow: var(--sombra);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.salida__x:hover { transform: rotate(90deg) scale(1.1); }
body.sin-scroll { overflow: hidden; }
@media (max-width: 640px) {
  .salida__caja { grid-template-columns: 1fr; border-radius: 28px; }
  .salida__visual { min-height: 140px; border-radius: 28px 28px 0 0; }
  .salida__visual img { width: 110px; }
  .salida__contenido { padding: 26px 22px 22px; }
}
@keyframes aparecer-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes salir-fondo { to { opacity: 0; } }
@keyframes entrar-caja { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes salir-caja { to { opacity: 0; transform: translateY(20px) scale(.95); } }

/* Color del panel de la ventana de salida según la página */
.salida__visual--turquesa { background: linear-gradient(160deg, var(--turquesa), var(--cielo)); }
.salida__visual--sol      { background: linear-gradient(160deg, var(--sol), #ffc94d); }
.salida__visual--rosa     { background: linear-gradient(160deg, var(--rosa), #ff9fc4); }
.salida__visual--sol .salida__burbuja--1 { background: var(--turquesa); }
.salida__visual--rosa .salida__burbuja--2 { background: var(--sol); }

/* ==========================================================
   VENTANA "¿QUÉ EDAD TIENE TU PEQUE?"
   ========================================================== */
.edad__caja { grid-template-columns: 1fr; width: min(100%, 560px); }
.edad__contenido { padding: 36px 34px 30px; }
.edad__brujula { width: 58px; height: 58px; margin-bottom: 12px; animation: girar-brujula 6s ease-in-out infinite; }
.edad__contenido h2 { font-size: clamp(1.55rem, 4vw, 2.1rem); margin-bottom: .3em; padding-right: 34px; }
.edad__sub { color: var(--tinta-suave); margin-bottom: 20px; }

.edad__opciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.edad__opcion {
  display: grid; place-items: center; gap: 0; padding: 12px 6px; cursor: pointer;
  background: var(--blanco); border: 2.5px solid var(--linea); border-radius: 20px; color: var(--tinta); font: inherit;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .25s, border-color .25s, box-shadow .25s;
}
.edad__opcion strong { font-family: var(--titulos); font-size: 2rem; line-height: 1.1; }
.edad__opcion span { font-size: .8rem; font-weight: 800; color: var(--tinta-suave); }
@media (hover: hover) {
  .edad__opcion:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
  .edad__opcion--cielo:hover    { border-color: var(--cielo); }
  .edad__opcion--sol:hover      { border-color: var(--sol); }
  .edad__opcion--turquesa:hover { border-color: var(--turquesa); }
  .edad__opcion--rosa:hover     { border-color: var(--rosa); }
}
.edad__opcion.elegida { transform: translateY(-4px) scale(1.05); box-shadow: var(--sombra); animation: rebotar .5s ease; }
.edad__opcion--cielo.elegida    { background: var(--cielo); border-color: var(--cielo); }
.edad__opcion--sol.elegida      { background: var(--sol); border-color: var(--sol); }
.edad__opcion--turquesa.elegida { background: var(--turquesa); border-color: var(--turquesa); }
.edad__opcion--rosa.elegida     { background: var(--rosa); border-color: var(--rosa); }
.edad__opcion.elegida span { color: var(--tinta); }

.edad__pista { text-align: center; font-weight: 700; color: var(--tinta-suave); background: var(--fondo-suave); border-radius: 18px; padding: 18px; margin: 0; }
.edad__resultado { border-radius: 22px; padding: 20px 22px 22px; border-left: 7px solid; animation: entrar-caja .45s cubic-bezier(.34, 1.56, .64, 1); }
.edad__resultado p { margin-bottom: .6em; color: var(--tinta); }
.edad__resultado--cielo    { background: var(--cielo-suave);    border-color: var(--cielo); }
.edad__resultado--sol      { background: var(--sol-suave);      border-color: var(--sol); }
.edad__resultado--turquesa { background: var(--turquesa-suave); border-color: var(--turquesa); }
.edad__resultado--rosa     { background: var(--rosa-suave);     border-color: var(--rosa); }
.edad__nombre { font-size: 1.1rem; }
.edad__nombre strong { font-family: var(--titulos); font-size: 1.35rem; font-weight: 600; }
.edad__ejemplo { font-weight: 700; font-size: .95rem; }
.edad__cta { width: 100%; margin-top: 8px; }
.edad__cta .icono { width: 22px; height: 22px; }

@media (max-width: 480px) {
  .edad__contenido { padding: 28px 20px 22px; }
  .edad__opciones { gap: 8px; }
  .edad__opcion strong { font-size: 1.6rem; }
}
@keyframes girar-brujula { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }

/* ==========================================================
   VENTANA "¿CON CUÁL TE SIENTES IDENTIFICADA?"
   ========================================================== */
.identidad .edad__caja { width: min(100%, 620px); }
.identidad__ilustracion { width: 74px; height: auto; margin-bottom: 8px; animation: flotar 4s ease-in-out infinite; }
.identidad__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.identidad__opcion {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 12px 14px; background: var(--blanco); border: 2.5px solid var(--linea); border-radius: 18px;
  font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--tinta);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .25s, border-color .25s, box-shadow .25s;
}
.identidad__emoji { flex: none; font-size: 1.4rem; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) {
  .identidad__opcion:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
  .identidad__opcion:hover .identidad__emoji { transform: scale(1.25) rotate(-10deg); }
  .identidad__opcion--rosa:hover     { border-color: var(--rosa); }
  .identidad__opcion--sol:hover      { border-color: var(--sol); }
  .identidad__opcion--turquesa:hover { border-color: var(--turquesa); }
  .identidad__opcion--cielo:hover    { border-color: var(--cielo); }
}
.identidad__opcion.elegida { box-shadow: var(--sombra); animation: rebotar .5s ease; }
.identidad__opcion--rosa.elegida     { background: var(--rosa-suave);     border-color: var(--rosa); }
.identidad__opcion--sol.elegida      { background: var(--sol-suave);      border-color: var(--sol); }
.identidad__opcion--turquesa.elegida { background: var(--turquesa-suave); border-color: var(--turquesa); }
.identidad__opcion--cielo.elegida    { background: var(--cielo-suave);    border-color: var(--cielo); }
@media (max-width: 560px) {
  .identidad__opciones { grid-template-columns: 1fr; gap: 8px; }
  .identidad__opcion { padding: 10px 12px; }
  .identidad__ilustracion { width: 56px; }
}

/* ==========================================================
   LLAMADOS A LA ACCIÓN A LO LARGO DE LA PÁGINA
   ========================================================== */
.cta-linea { text-align: center; margin-top: 2.8rem; }
.cta-linea > p { font-family: var(--titulos); font-weight: 600; font-size: 1.25rem; margin-bottom: .2em; }
.cta-linea > .boton { margin-top: 1rem; }
.cta-linea .botones { margin-top: 1rem; }
.boton .icono { width: 22px; height: 22px; }

.tripulante { display: flex; flex-direction: column; }
.tripulante p { flex: 1; }
.tripulante__link {
  align-self: flex-start; margin-top: 18px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--blanco); color: var(--tinta); text-decoration: none; font-weight: 800; font-size: .95rem;
  padding: .5em 1.1em; border-radius: 999px; position: relative; z-index: 1;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.tripulante__link span { transition: transform .3s; }
.tripulante__link:hover { box-shadow: 0 6px 16px rgba(27, 58, 107, .18); transform: scale(1.05); }
.tripulante__link:hover span { transform: translateX(4px); }

.cta-banda {
  max-width: 900px; margin: 28px auto 0; padding: 22px 28px; border-radius: var(--radio);
  background: var(--tinta); color: var(--blanco);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  position: relative; overflow: hidden; isolation: isolate;
}
.cta-banda::after { content: ""; position: absolute; z-index: -1; width: 160px; height: 160px; border-radius: 50%; background: var(--rosa); opacity: .35; right: -50px; top: -70px; animation: flotar 6s ease-in-out infinite; }
.cta-banda strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: 1.35rem; color: var(--sol); }
.cta-banda span { opacity: .9; }
.cta-banda__botones { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .cta-banda { padding: 22px; }
  .cta-banda__botones, .cta-banda__botones .boton { width: 100%; }
}
.tripulante__edad { align-self: flex-start; }


/* ==========================================================
   TÍTULOS CON LA FUENTE DE MARCA
   ========================================================== */
h1, h2, h3,
.slide__titulo, .cifra strong, .cinta span:not(.cinta__estrella),
.precio__valor, .total strong, .cta-banda strong, .edad__opcion strong, .edad__nombre strong {
  font-family: var(--marca);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .01em;
}
h1, .slide__titulo { line-height: 1.12; }
.pie__titulo { font-family: var(--marca); font-weight: 400; }
/* Comic Boys es más angosta: tamaños ajustados para que los títulos tengan presencia */
h1, .slide__titulo { font-size: clamp(2.7rem, 6.6vw, 4.7rem); line-height: 1.04; }
h2 { font-size: clamp(2.2rem, 4.8vw, 3.3rem); line-height: 1.08; }
h3 { font-size: 1.75rem; line-height: 1.1; }
.tripulante h3 { font-size: 2.15rem; }
.tarjeta h3, .pasos h3, .valor h3 { font-size: 1.7rem; }
.precio__nombre { font-size: 1.9rem; }
.cinta span:not(.cinta__estrella) { font-size: 1.75rem; }
.cifra strong { font-size: clamp(2.7rem, 5.6vw, 3.9rem); }
.precio__valor { font-size: clamp(2.8rem, 6.4vw, 4rem); }
.total strong { font-size: clamp(2.3rem, 5vw, 3.1rem); }
.cta-banda strong { font-size: 1.85rem; }
.pie__titulo { font-size: 1.6rem; }
.salida__contenido h2 { font-size: clamp(2.1rem, 4.4vw, 2.8rem); }
.edad__contenido h2 { font-size: clamp(2rem, 5vw, 2.8rem); }
.edad__opcion strong { font-size: 2.6rem; }
.edad__nombre strong { font-size: 1.85rem; }
@media (max-width: 480px) { .edad__opcion strong { font-size: 2.2rem; } }
@media (max-width: 640px) {
  h1, .slide__titulo { font-size: 3.5rem; }
  h2 { font-size: 2.75rem; }
  h3, .tarjeta h3, .pasos h3, .valor h3 { font-size: 1.95rem; }
  .tripulante h3 { font-size: 2.3rem; }
  .salida__contenido h2, .edad__contenido h2 { font-size: 2.35rem; }
}

/* ==========================================================
   TEXTO BLANCO SOBRE FONDO FUCSIA
   ========================================================== */
.boton--rosa,
.tripulante--rosa, .tripulante--rosa h3, .tripulante--rosa p,
.cinta span:not(.cinta__estrella),
.comparacion__cabeza > span:nth-child(2),
.pasos__num,
.ruta li:nth-child(3)::before,
.slider__flecha:hover,
.edad__opcion--rosa.elegida, .edad__opcion--rosa.elegida span {
  color: var(--blanco);
}
/* Una sombra suave ayuda a que el blanco se lea mejor sobre el fucsia claro */
.boton--rosa, .tripulante--rosa h3, .tripulante--rosa p, .cinta span:not(.cinta__estrella),
.comparacion__cabeza > span:nth-child(2), .pasos__num, .edad__opcion--rosa.elegida {
  text-shadow: 0 1px 2px rgba(160, 40, 90, .35);
}
.tripulante--rosa .tripulante__edad, .tripulante--rosa .tripulante__link { color: var(--tinta); text-shadow: none; }
/* Los demás números de pasos y ruta tienen otros colores: vuelven al azul */
.pasos li:nth-child(n+2) .pasos__num { color: var(--tinta); text-shadow: none; }

/* ==========================================================
   AJUSTES DE UX PARA CELULARES Y TABLETS
   ========================================================== */

/* Cinta: el marco recorta lo que sobra por la inclinación */
.cinta-marco { overflow: hidden; padding: 14px 0; margin: -28px 0 -14px; position: relative; z-index: 6; }
.cinta-marco .cinta { margin: 0 -12px; }

/* Botones fáciles de tocar: puntos del slider y enlaces del pie */
.slider__puntos { gap: 0; }
.slider__puntos button { box-sizing: content-box; padding: 14px 5px; background-clip: content-box; }
.pie__lista { gap: 2px; }
.pie__lista a { display: inline-block; padding: 10px 0; }
.saltar:focus { padding: 12px 16px; }

/* Ventanas emergentes: el contenido es lo que se desplaza, la X siempre queda visible */
.salida__caja { overflow: hidden; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.salida__contenido, .edad__contenido { overflow-y: auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overscroll-behavior: contain; }
.edad__caja { display: block; }
@media (max-width: 640px), (max-height: 760px) {
  .salida__caja { grid-template-columns: 1fr; }
  .salida__visual { display: none; }
  .salida__contenido { padding: 30px 22px 22px; }
  .salida__contenido h2, .edad__contenido h2 { padding-right: 40px; }
}
@media (max-height: 520px) {
  .edad__contenido, .salida__contenido { padding-top: 20px; }
  .identidad__ilustracion, .edad__brujula { display: none; }
}

/* Inicio: dos columnas también en tablet y celular horizontal */
@media (min-width: 700px) and (max-width: 880px) {
  .slide__grid { grid-template-columns: 1.1fr .9fr; gap: 28px; }
  .slide__visual { max-width: none; }
  .slide__titulo, .slide h1 { font-size: 2.9rem; }
  .insignia { font-size: .85rem; padding: 8px 12px; }
}

/* Inicio en celular */
@media (max-width: 699px) {
  .slide { padding-bottom: 112px; }
  .slide__visual { max-width: 300px; margin: 34px auto 0; }
  .foto--hero { aspect-ratio: 1 / 1; }
  .insignia { font-size: .85rem; padding: 8px 12px; }
  .insignia--1 { left: -6px; top: -16px; }
  .insignia--2 { right: -6px; bottom: -14px; }
  .slider .deco { display: none; }
  .slider .deco--circulo, .slider .deco--punto2 { display: block; }
  .slide .botones .boton { width: 100%; }
}
@media (max-width: 880px) {
  /* La mancha turquesa ya no queda detrás del texto */
  .slide__mancha1 { width: 230px; height: 250px; left: -170px; top: -140px; opacity: .7; }
  .slide__mancha2 { width: 200px; height: 200px; right: -110px; bottom: -120px; }
  .slider__controles { bottom: 20px; }
}

/* Botón de WhatsApp: un poco más pequeño en celular y respetando la barra del iPhone */
@media (max-width: 640px) {
  .wa-flotante { width: 54px; height: 54px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .wa-flotante .icono { width: 28px; height: 28px; }
}

/* En pantallas táctiles, las tarjetas no se quedan "levantadas" después de tocarlas */
@media (hover: none) {
  .tarjeta--efecto:hover, .tarjeta--efecto:nth-child(even):hover { transform: none; box-shadow: var(--sombra); }
  .tarjeta--efecto:hover::after { transform: scaleX(0); }
  .faq details:hover { transform: none; }
}
/* Puntos del slider: área de toque grande, punto visible pequeño */
.slider__puntos button, .slider__puntos button.activo {
  width: 24px; height: 40px; padding: 0; background: none; border-radius: 0;
  display: grid; place-items: center; transition: width .4s ease;
}
.slider__puntos button::before {
  content: ""; display: block; width: 12px; height: 12px; border-radius: 999px;
  background: var(--linea); transition: width .4s ease, background .4s ease;
}
.slider__puntos button.activo { width: 44px; }
.slider__puntos button.activo::before { width: 34px; background: var(--rosa); }
@media (max-width: 699px) { .slider .deco--punto2 { display: none; } }

/* ==========================================================
   FUENTE DE LOS BOTONES: Patrick Hand
   ========================================================== */
:root { --botones: "Patrick Hand", "Nunito", system-ui, sans-serif; }
.boton, .salida__secundario, .tripulante__link, .slider__flecha {
  font-family: var(--botones);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .02em;
}
/* Patrick Hand es más pequeña: un poco más de tamaño para que se lea bien */
.boton { font-size: 1.3rem; line-height: 1.15; padding: .7em 1.5em; }
.boton--chico { font-size: 1.15rem; padding: .5em 1.15em; }
.salida__secundario { font-size: 1.2rem; }
.tripulante__link { font-size: 1.15rem; }
@media (max-width: 480px) { .boton { font-size: 1.25rem; } }

/* ==========================================================
   SUBTÍTULOS CON Patrick Hand (prueba)
   ========================================================== */
.slide__intro, .titulo-seccion p:not(.etiqueta), .cabeza-pagina__intro,
.cta-linea > p, .edad__sub, .cta__caja p {
  font-family: var(--botones);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.4;
  letter-spacing: .01em;
}
@media (max-width: 640px) {
  .slide__intro, .titulo-seccion p:not(.etiqueta), .cabeza-pagina__intro,
  .cta-linea > p, .edad__sub, .cta__caja p { font-size: 1.35rem; }
}

/* Menú principal con Patrick Hand */
.menu ul a { font-family: var(--botones); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; }
@media (max-width: 880px) { .menu ul a { font-size: 1.5rem; } }

/* Ruta del mes: frases destacadas con Patrick Hand */
.ruta li strong { font-family: var(--botones); font-weight: 400; font-size: 1.35em; letter-spacing: .01em; line-height: 1.2; }
/* Negritas dentro de los textos (inicio de cada punto) con Patrick Hand */
.lista-check li strong { font-family: var(--botones); font-weight: 400; font-size: 1.3em; letter-spacing: .01em; line-height: 1.2; }

/* Ventanas emergentes: todas las opciones y enlaces con Patrick Hand */
.identidad__opcion { font-family: var(--botones); font-weight: 400; font-size: 1.22rem; line-height: 1.2; letter-spacing: .01em; }
.edad__opcion { font-family: var(--botones); }
.edad__opcion span { font-weight: 400; font-size: 1.05rem; }
.salida__no { font-family: var(--botones); font-size: 1.15rem; }

/* ==========================================================
   AGENDA DE ASESORÍAS
   ========================================================== */
.cabeza-pagina--agenda { padding-bottom: 40px; }
.agenda { max-width: 1060px; }
.agenda__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.agenda__form { min-width: 0; }
@media (max-width: 860px) { .agenda__grid { grid-template-columns: minmax(0, 1fr); } }

.agenda__que { background: var(--cielo-suave); border-radius: var(--radio); padding: 26px; position: sticky; top: 96px; }
.agenda__que h2 { font-size: 2rem; }
.agenda__horario { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-weight: 700; font-size: .95rem; }
.agenda__horario .icono { flex: none; color: #0088b0; }
@media (max-width: 860px) { .agenda__que { position: static; } }

.agenda__form { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(20px, 4vw, 36px); }
.agenda__paso { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.agenda__paso legend { display: flex; align-items: center; gap: 12px; font-family: var(--marca); font-size: 1.85rem; line-height: 1.1; margin-bottom: 14px; padding: 0; }
.agenda__num { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sol); font-family: var(--botones); font-size: 1.3rem; }
.agenda__paso:nth-of-type(2) .agenda__num { background: var(--turquesa); }
.agenda__paso:nth-of-type(3) .agenda__num { background: var(--rosa); color: var(--blanco); }
.agenda__paso:nth-of-type(4) .agenda__num { background: var(--cielo); }
.agenda__zona { font-family: var(--botones); font-size: 1.05rem; color: var(--tinta-suave); background: var(--fondo-suave); padding: 2px 10px; border-radius: 999px; }

/* Edad */
.agenda__edades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.agenda__edad { position: relative; cursor: pointer; }
.agenda__edad input { position: absolute; opacity: 0; inset: 0; }
.agenda__edad span {
  display: grid; place-items: center; gap: 0; text-align: center; padding: 12px 6px; border-radius: 20px;
  border: 2.5px solid var(--linea); background: var(--blanco); font-family: var(--botones); font-size: 1.1rem;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s;
}
.agenda__edad strong { font-family: var(--marca); font-weight: 400; font-size: 2.3rem; line-height: 1; }
.agenda__edad small { font-size: .95rem; color: var(--tinta-suave); }
.agenda__edad input:checked + span { background: var(--sol-suave); border-color: var(--sol); transform: translateY(-3px); }
.agenda__edad input:focus-visible + span { outline: 3px solid var(--cielo); outline-offset: 3px; }
@media (max-width: 480px) { .agenda__edades { grid-template-columns: repeat(2, 1fr); } }

/* Días */
.agenda__dias { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.agenda__dia {
  flex: none; width: 82px; scroll-snap-align: start; cursor: pointer; display: grid; justify-items: center; gap: 0;
  padding: 10px 6px; border-radius: 20px; border: 2.5px solid var(--linea); background: var(--blanco); color: var(--tinta);
  font-family: var(--botones); font-size: 1.05rem; line-height: 1.2;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s;
}
.agenda__dia strong { font-family: var(--marca); font-weight: 400; font-size: 2.1rem; line-height: 1.05; }
.agenda__dia small { font-family: var(--texto); font-size: .72rem; font-weight: 700; color: var(--tinta-suave); margin-top: 2px; }
.agenda__dia.elegido { background: var(--turquesa); border-color: var(--turquesa); transform: translateY(-3px); }
.agenda__dia.elegido small { color: var(--tinta); }
@media (hover: hover) { .agenda__dia:hover { border-color: var(--turquesa); } }

/* Horas */
.agenda__pista { color: var(--tinta-suave); font-family: var(--botones); font-size: 1.2rem; margin: 0; }
.agenda__horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 480px) { .agenda__horas { grid-template-columns: repeat(2, 1fr); } }
.agenda__hora {
  cursor: pointer; padding: 12px 8px; border-radius: 16px; border: 2.5px solid var(--linea); background: var(--blanco);
  color: var(--tinta); font-family: var(--botones); font-size: 1.3rem; line-height: 1.1;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s;
}
.agenda__hora small { display: block; font-family: var(--texto); font-size: .72rem; font-weight: 700; }
.agenda__hora:disabled { cursor: not-allowed; opacity: .45; text-decoration: line-through; }
.agenda__hora.elegida { background: var(--rosa); border-color: var(--rosa); color: var(--blanco); transform: translateY(-3px); text-shadow: 0 1px 2px rgba(160, 40, 90, .35); }
@media (hover: hover) { .agenda__hora:not(:disabled):hover { border-color: var(--rosa); } }
.agenda__local { margin: 12px 0 0; font-weight: 700; color: #0088b0; }

/* Datos */
.agenda__campos { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo > span { font-weight: 800; font-size: .95rem; }
.campo small { font-weight: 600; color: var(--tinta-suave); }
.campo input, .campo textarea, .campo select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinta); background: var(--fondo);
  border: 2px solid var(--linea); border-radius: 14px; padding: 12px 14px; min-height: 48px;
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--cielo); box-shadow: 0 0 0 4px var(--cielo-suave); }
.campo__telefono { display: grid; grid-template-columns: 118px 1fr; gap: 8px; }
.campo-check { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--tinta-suave); cursor: pointer; }
.campo-check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--rosa); }

.agenda__resumen { background: var(--sol-suave); border-radius: 16px; padding: 14px 18px; margin-bottom: 16px; }
.agenda__resumen p { margin: 0; }
.agenda__enviar { width: 100%; font-size: 1.45rem; }
.agenda__enviar:disabled { opacity: .7; cursor: wait; }
.agenda__pie { text-align: center; margin: 16px 0 0; font-size: .95rem; color: var(--tinta-suave); }
.agenda__error { background: var(--rosa-suave); border-left: 6px solid var(--rosa); border-radius: 0; padding: 12px 16px; font-weight: 700; margin: 0 0 22px; }
.agenda__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.agenda__aviso { max-width: 560px; margin: 0 auto; text-align: center; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 34px 26px; }

/* Confirmación */
.confirmacion { max-width: 620px; margin: 0 auto; text-align: center; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(26px, 5vw, 44px); border-top: 10px solid var(--turquesa); }
.confirmacion__icono { width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; background: var(--turquesa); color: var(--blanco); display: grid; place-items: center; animation: rebotar .8s ease .2s; }
.confirmacion__icono .icono { width: 40px; height: 40px; stroke-width: 3; }
.confirmacion__saludo { font-family: var(--botones); font-size: 1.6rem; margin: 0; }
.confirmacion__fecha { font-family: var(--marca); font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1.1; margin: 4px 0 0; }
.confirmacion__hora { font-family: var(--marca); font-size: clamp(2rem, 5vw, 2.6rem); color: #c43b74; margin: 0; }
.confirmacion__hora span { font-family: var(--botones); font-size: 1.1rem; color: var(--tinta-suave); }
.confirmacion__local { font-weight: 700; color: #0088b0; }
.confirmacion__peque { margin-top: 10px; }
.confirmacion__zoom { background: var(--cielo-suave); border-radius: 18px; padding: 18px; margin: 18px 0; }
.confirmacion__zoom p { margin-bottom: 10px; font-weight: 700; }
.confirmacion__nota { background: var(--sol-suave); border-radius: 16px; padding: 14px; font-weight: 700; }
.confirmacion__acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0; }
.confirmacion__wa a { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; color: #128c4a; text-decoration: none; padding: 10px; }
.confirmacion__wa .icono { width: 24px; height: 24px; }
.confirmacion__cambio { font-size: .9rem; color: var(--tinta-suave); margin: 0; }
@media (max-width: 480px) { .confirmacion__acciones .boton { width: 100%; } }
[hidden] { display: none !important; }

/* Calendario mensual de la agenda */
.calendario { max-width: 460px; }
.calendario__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendario__titulo { font-family: var(--marca); font-size: 1.9rem; margin: 0; }
.calendario__flecha {
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; background: var(--sol);
  color: var(--tinta); font-size: 1.6rem; line-height: 1; padding-bottom: 4px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.calendario__flecha:disabled { background: var(--linea); opacity: .5; cursor: default; }
@media (hover: hover) { .calendario__flecha:not(:disabled):hover { transform: scale(1.12); } }
.calendario__grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendario__sem { text-align: center; font-family: var(--botones); font-size: 1.05rem; color: var(--tinta-suave); padding-bottom: 4px; }
.calendario__dia {
  aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 0; border-radius: 14px;
  font-family: var(--botones); font-size: 1.3rem; line-height: 1;
}
.calendario__dia--no { color: #b8c4d4; }
.calendario__dia--hoy { box-shadow: inset 0 0 0 2px var(--linea); }
button.calendario__dia {
  cursor: pointer; border: 2px solid var(--turquesa); background: var(--turquesa-suave); color: var(--tinta); padding: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s;
}
button.calendario__dia small { font-family: var(--texto); font-size: .62rem; font-weight: 800; color: #0b8e90; margin-top: 2px; }
button.calendario__dia.elegido { background: var(--turquesa); transform: scale(1.08); }
button.calendario__dia.elegido small { color: var(--tinta); }
@media (hover: hover) { button.calendario__dia:not(.elegido):hover { background: var(--blanco); transform: translateY(-2px); } }
.calendario__leyenda { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--tinta-suave); margin: 12px 0 0; }
.calendario__punto { width: 14px; height: 14px; border-radius: 5px; background: var(--turquesa-suave); border: 2px solid var(--turquesa); flex: none; }
@media (max-width: 400px) {
  .calendario__grilla { gap: 4px; }
  .calendario__dia { font-size: 1.15rem; border-radius: 11px; }
}
.calendario .agenda__dia { width: auto; flex: initial; scroll-snap-align: none; }

/* ==========================================================
   TEST DE INTELIGENCIAS
   ========================================================== */
.test { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 7vw, 80px) 0 clamp(60px, 9vw, 110px); }
.test__mancha1 { width: 300px; height: 320px; left: -170px; top: -90px; opacity: .55; }
.test__mancha2 { width: 260px; height: 260px; right: -120px; bottom: -110px; opacity: .7; }
.test__contenedor { max-width: 760px; position: relative; z-index: 2; }
.test__pantalla { text-align: center; }

/* Inicio */
.test__intro { font-family: var(--botones); font-size: 1.45rem; line-height: 1.4; color: var(--tinta-suave); max-width: 32em; margin: 0 auto 26px; }
.test__inteligencias { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.test__chip { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; animation: flotar 4s ease-in-out infinite; }
.test__chip:nth-child(2n) { animation-delay: -1s; } .test__chip:nth-child(3n) { animation-delay: -2s; }
.test__chip--rosa { background: var(--rosa-suave); } .test__chip--sol { background: var(--sol-suave); }
.test__chip--turquesa { background: var(--turquesa-suave); } .test__chip--cielo { background: var(--cielo-suave); }
.test__edad { margin-bottom: 26px; }
.test__edad p { font-weight: 800; margin-bottom: 10px; }
.test__edad small { font-weight: 600; color: var(--tinta-suave); }
.test__edades { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.test__edad-op {
  font-family: var(--botones); font-size: 1.25rem; padding: 8px 18px; border-radius: 999px; cursor: pointer;
  border: 2.5px solid var(--linea); background: var(--blanco); color: var(--tinta);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s;
}
.test__edad-op.elegida { background: var(--sol); border-color: var(--sol); transform: translateY(-2px); }
.test__empezar { font-size: 1.5rem; padding: .7em 2.2em; }

/* Preguntas */
.test__progreso { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.test__atras { font-family: var(--botones); font-size: 1.2rem; background: none; border: 0; cursor: pointer; color: var(--tinta-suave); padding: 8px 4px; }
.test__contador { font-family: var(--botones); font-size: 1.2rem; margin: 0; color: var(--tinta-suave); }
.test__barra { height: 12px; background: var(--blanco); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--linea); margin-bottom: 22px; }
.test__barra span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--rosa), var(--sol), var(--turquesa), var(--cielo)); transition: width .5s ease; }
.test__tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(22px, 5vw, 40px); }
.test__tarjeta.entra { animation: entrar-caja .5s cubic-bezier(.34,1.56,.64,1); }
.test__pregunta { font-size: clamp(2rem, 5vw, 2.6rem); margin-bottom: 22px; outline: none; }
.test__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .test__opciones { grid-template-columns: 1fr; } }
.test__opcion {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer; padding: 16px 18px; min-height: 76px;
  border: 2.5px solid var(--linea); border-radius: 20px; background: var(--fondo); color: var(--tinta);
  font-family: var(--botones); font-size: 1.3rem; line-height: 1.2;
  opacity: 0; animation: subir .45s ease forwards; animation-delay: calc(var(--i) * 70ms + 120ms);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s;
}
.test__opcion-emoji { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--blanco); display: grid; place-items: center; font-size: 1.6rem; box-shadow: var(--sombra); }
@media (hover: hover) { .test__opcion:hover { border-color: var(--cielo); transform: translateY(-3px); } }
.test__opcion.elegida { background: var(--sol-suave); border-color: var(--sol); transform: scale(1.03); }

/* Resultado */
.test__ganador { border-radius: var(--radio); padding: clamp(26px, 5vw, 42px); margin-bottom: 20px; animation: entrar-caja .7s cubic-bezier(.34,1.56,.64,1); }
.test__ganador--rosa { background: var(--rosa-suave); } .test__ganador--sol { background: var(--sol-suave); }
.test__ganador--turquesa { background: var(--turquesa-suave); } .test__ganador--cielo { background: var(--cielo-suave); }
.test__ganador .etiqueta { background: var(--blanco); }
.test__ganador-emoji { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 30px; background: var(--blanco); display: grid; place-items: center; font-size: 3.2rem; box-shadow: var(--sombra); animation: rebotar 1s ease .4s; }
.test__ganador h2 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
.test__ganador-texto { font-family: var(--botones); font-size: 1.4rem; line-height: 1.4; max-width: 30em; margin: 0 auto; }
.test__tambien { margin: 14px 0 0; font-weight: 800; }
.test__bloques { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; margin-bottom: 20px; }
@media (max-width: 640px) { .test__bloques { grid-template-columns: 1fr; } }
.test__bloque { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; }
.test__bloque h3 { font-size: 1.8rem; }
.test__bloque--mmsc { border-top: 8px solid var(--turquesa); }
.test__bloque--mmsc p { margin: 0; }
.test__mapa { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; text-align: left; margin-bottom: 26px; }
.test__mapa h3 { font-size: 1.8rem; text-align: center; }
.test__fila { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
@media (max-width: 480px) { .test__fila { grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; } }
.test__fila-nombre { font-family: var(--botones); font-size: 1.2rem; }
.test__fila-barra { height: 16px; border-radius: 999px; background: var(--fondo-suave); overflow: hidden; }
.test__fila-barra span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 90ms); }
.test__mapa .lleno .test__fila-barra span, [data-mapa].lleno .test__fila-barra span { width: var(--valor); }
.test__fila-barra--rosa span { background: var(--rosa); } .test__fila-barra--sol span { background: var(--sol); }
.test__fila-barra--turquesa span { background: var(--turquesa); } .test__fila-barra--cielo span { background: var(--cielo); }
.test__cta { background: var(--cielo); border-radius: 36px; padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 40px); }
.test__cta h2 { font-size: clamp(2.2rem, 5vw, 3rem); }
.test__cta > p { font-family: var(--botones); font-size: 1.35rem; line-height: 1.4; max-width: 30em; margin: 0 auto; }
.test__repetir { margin-top: 16px; background: none; border: 0; cursor: pointer; font-family: var(--botones); font-size: 1.2rem; color: var(--tinta); text-decoration: underline; }
.test__nota { font-size: .85rem; color: var(--tinta-suave); margin: 20px auto 0; max-width: 34em; }

/* Banner del test en otras páginas */
.banner-test {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  background: var(--sol-suave); border-radius: var(--radio); padding: 24px 28px; margin-top: 2.8rem;
  border: 3px dashed var(--sol); text-align: left;
}
.banner-test__emojis { font-size: 2rem; letter-spacing: 4px; }
.banner-test h3 { font-size: 2rem; margin: 0 0 .1em; }
.banner-test p { margin: 0; font-family: var(--botones); font-size: 1.25rem; color: var(--tinta-suave); }
@media (max-width: 720px) { .banner-test { grid-template-columns: 1fr; text-align: center; } .banner-test .boton { width: 100%; } }
/* En el test, las figuras decorativas van detrás del contenido */
.test .decoraciones { z-index: 0; }
@media (max-width: 760px) { .test .deco--avion, .test .deco--lapiz, .test .deco--estrella, .test .deco--circulo, .test .deco--punto2 { display: none; } }

/* Slide 1 con foto real: la insignia va sobre el borde superior, sin tapar caras */
@media (min-width: 700px) {
  .slide--cielo .insignia--1 { top: -18px; left: 10%; }
}
/* Slide 1 (collage): esquinas superior derecha e inferior izquierda más abiertas para que se vean las peques */
.slide--cielo img.foto--hero { border-radius: 46% 22% 42% 20% / 40% 20% 56% 22%; }

/* Slide 2 (collage de manualidades): forma suave para no cortar caras e insignia sobre el borde superior */
.slide--rosa img.foto--hero { border-radius: 30% 24% 28% 22% / 26% 22% 30% 24%; }
@media (min-width: 700px) {
  .slide--rosa .insignia--1 { top: -18px; left: 10%; }
}

/* Slide 3 (niño con lupa): forma suave para que no se corte la cara ni la pluma */
.slide--sol img.foto--hero { border-radius: 30% 24% 28% 22% / 26% 22% 30% 24%; }
@media (min-width: 700px) {
  .slide--sol .insignia--2 { bottom: -18px; right: 8%; }
}

/* Agenda paso a paso: un paso a la vez con barra de progreso */
.agenda__progreso { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 26px; padding: 0; counter-reset: none; }
.agenda__progreso li { position: relative; }
.agenda__progreso li::after { content: ""; position: absolute; left: calc(50% + 24px); right: calc(-50% + 24px); top: 18px; height: 3px; border-radius: 3px; background: var(--cielo-suave); }
.agenda__progreso li:last-child::after { display: none; }
.agenda__progreso li.hecho::after { background: var(--turquesa); }
.agenda__progreso button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font-family: var(--botones); font-size: 1.05rem; color: inherit; opacity: .55; cursor: pointer; }
.agenda__progreso button:disabled { cursor: default; }
.agenda__progreso button span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cielo-suave); font-size: 1.15rem; transition: background .25s, transform .25s; }
.agenda__progreso li.hecho button { opacity: .9; }
.agenda__progreso li.hecho button span { background: var(--turquesa-suave); }
.agenda__progreso li.activo button { opacity: 1; }
.agenda__progreso li.activo button span { background: var(--sol); transform: scale(1.12); }
.agenda__form--pasos .agenda__paso { margin-bottom: 22px; }
.agenda__form--pasos .agenda__paso legend { outline: none; }
.agenda__atras { background: none; border: 0; padding: 0; margin: 0 0 10px; font-family: var(--botones); font-size: 1.1rem; color: inherit; opacity: .7; cursor: pointer; }
.agenda__atras:hover { opacity: 1; text-decoration: underline; }
.agenda__paso--entra { animation: pasoEntra .38s ease both; }
@keyframes pasoEntra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .agenda__paso--entra { animation: none; } }

/* Testimonios reales */
.testimonio { display: flex; flex-direction: column; }
.testimonio__comillas { font-family: Georgia, serif; font-size: 4.2rem; line-height: .6; height: 34px; color: var(--rosa); opacity: .8; margin-bottom: 6px; }
.testimonio blockquote { flex: 1; line-height: 1.6; }
.testimonio figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 2px dashed var(--rosa-suave); padding-top: 14px; }
.testimonio figcaption strong { font-family: var(--botones); font-size: 1.25rem; font-weight: 400; color: var(--rosa); }
.testimonio figcaption span { font-weight: 600; font-size: .95rem; opacity: .75; }

/* En vivo (envivo.php) */
.envivo { padding: clamp(28px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); background: linear-gradient(170deg, var(--cielo-suave) 0%, var(--fondo) 55%); }
.envivo__cabeza { text-align: center; margin-bottom: 22px; }
.envivo__cabeza h1 { margin: 6px 0 0; font-size: clamp(2.3rem, 7vw, 3.4rem); line-height: 1.15; }
.envivo__estado { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 16px; border-radius: 999px; background: var(--blanco); box-shadow: var(--sombra); font-family: var(--botones); font-size: 1.15rem; }
.envivo__estado .icono { width: 20px; height: 20px; color: var(--cielo); }
.envivo__estado--vivo { background: #ff3b3b; color: #fff; }
.envivo__estado--vivo span, .aviso-vivo span { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .25; transform: scale(.7); } }
.envivo__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: stretch; }
.envivo__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 980px; margin: 0 auto; }
.envivo__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #111; box-shadow: var(--sombra); }
.envivo__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.envivo__chat { display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); min-height: 420px; }
.envivo__chat iframe { flex: 1; width: 100%; border: 0; min-height: 380px; }
.envivo__nota { margin: 0; padding: 8px 14px; font-size: .85rem; opacity: .7; text-align: center; }
.envivo__espera { max-width: 640px; margin: 0 auto; text-align: center; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(28px, 5vw, 48px); }
.envivo__espera h2 { margin: 10px 0; }
.envivo__espera-icono { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--rosa-suave); }
.envivo__espera-icono .icono { width: 34px; height: 34px; color: var(--rosa); }
.envivo__proximo { font-size: 1.15rem; }
.envivo__accion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 20px 24px; border-radius: var(--radio); background: var(--rosa); color: var(--blanco); }
.envivo__accion strong { display: block; font-family: var(--botones); font-weight: 400; font-size: 1.45rem; }
.envivo__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.envivo__accion .boton--rosa { background: var(--sol); color: var(--tinta, #1d2b4f); }
.envivo__accion .boton--borde { border-color: var(--blanco); color: var(--blanco); }
.envivo__accion .boton--borde .icono { width: 20px; height: 20px; }
.pie--mini { padding: 18px 0; }
.pie--mini .pie__legal { margin: 0; border: 0; padding: 0; text-align: center; }
.aviso-vivo { position: fixed; left: 16px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #ff3b3b; color: #fff; font-family: var(--botones); font-size: 1.15rem; text-decoration: none; box-shadow: 0 8px 24px rgba(255, 59, 59, .35); }
@media (max-width: 900px) {
  .envivo__grid { grid-template-columns: minmax(0, 1fr); }
  .envivo__chat { min-height: 0; }
  .envivo__chat iframe { min-height: 360px; }
  .envivo__accion { text-align: center; justify-content: center; }
  .envivo__botones { justify-content: center; width: 100%; }
  .envivo__botones .boton { flex: 1 1 220px; }
}

/* Cuenta regresiva del en vivo */
.cuenta { text-align: center; margin: 0 auto 18px; }
.envivo__grid ~ .cuenta, .envivo > .contenedor > .cuenta { max-width: 640px; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px; }
.cuenta__titulo { margin: 0 0 12px; font-family: var(--botones); font-size: 1.35rem; }
.cuenta__cajas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 460px; margin: 0 auto; }
.cuenta__cajas div { display: flex; flex-direction: column; align-items: center; padding: 14px 4px 10px; border-radius: 18px; background: var(--cielo-suave); }
.cuenta__cajas div:nth-child(2) { background: var(--sol-suave); }
.cuenta__cajas div:nth-child(3) { background: var(--rosa-suave); }
.cuenta__cajas div:nth-child(4) { background: var(--turquesa-suave); }
.cuenta__cajas strong { font-family: var(--marca); font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1; font-variant-numeric: tabular-nums; }
.cuenta__cajas span { margin-top: 4px; font-size: .85rem; font-weight: 700; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.cuenta__fecha { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 14px 0 0; font-weight: 700; }
.cuenta__fecha .icono { width: 20px; height: 20px; color: var(--rosa); }
.cuenta__fecha small { font-weight: 600; opacity: .65; }
.cuenta__ya { margin: 10px 0 0; font-family: var(--botones); font-size: 1.2rem; color: var(--rosa); }
.envivo__espera .cuenta { margin-bottom: 18px; }

/* Botón "Ingresar" a la plataforma (/aula) */
.cabecera__logo { order: 0; }
.menu { order: 1; }
.ingresar { order: 2; display: inline-flex; align-items: center; gap: 6px; padding: .45em 1em; border: 2px solid var(--tinta); border-radius: 999px; font-family: var(--botones); font-size: 1.2rem; line-height: 1.1; color: var(--tinta); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.ingresar:hover { background: var(--tinta); color: var(--blanco); }
.ingresar .icono { width: 18px; height: 18px; }
.menu-boton { order: 3; }
@media (max-width: 1120px) and (min-width: 881px) {
  .menu { gap: 18px; }
  .menu ul { gap: 16px; }
  .cabecera__fila { gap: 14px; }
  .cabecera__logo img { width: 180px; }
}
@media (max-width: 880px) {
  .ingresar { margin-left: auto; font-size: 1.1rem; padding: .4em .85em; }
}
@media (max-width: 360px) {
  .cabecera__logo img { width: 140px; }
}
@media (min-width: 881px) {
  .cabecera__fila { justify-content: flex-start; }
  .menu { margin-left: auto; }
  .menu .boton { white-space: nowrap; }
}
@media (max-width: 1120px) and (min-width: 881px) {
  .menu { gap: 14px; }
  .menu ul { gap: 12px; }
  .menu ul a { font-size: 1.15rem; }
  .menu .boton--chico, .ingresar { font-size: 1.05rem; padding: .4em .8em; }
  .cabecera__logo img { width: 150px; }
}