/* =============================================================================
   Inicial de Heart of Jesus 2027 · «La mañana de su hijo» (body.t-ini)
   Va después de base.css. Es la única página redonda y cálida: sol, onda, crayón, globos y corazones,
   con Fredoka 600 en los títulos y los globos (Poppins en el texto, los botones y el formulario).
   Contrastes (WCAG): cacao #3B2412 sobre blanco 14,51:1, sobre #FFD95A 10,59:1, sobre #F2BC21 8,29:1,
   sobre crema #FFF6D8 13,42:1 y sobre #FFE9A8 12,07:1; ámbar #7A4B00 sobre blanco 7,41:1, sobre crema 6,85:1 y
   sobre #FFD95A 5,41:1 (sobre #F2BC21 da 4,23:1: ahí nunca va texto ámbar); #6A4E33 sobre blanco 7,64:1.
   El rojo #E7313A y el mandarina #F28C28 son solo formas. El verde de WhatsApp nunca va directo sobre amarillo.
   Celular primero (360–430 px); desde 900 px, computadora.
   ============================================================================= */

body.t-ini {
  --fondo: #FFFFFF;
  --fondo-2: #FFF6D8;
  --fondo-hero: #FFD95A;
  --marca-claro: #FFD95A;
  --marca: #F2BC21;
  --marca-boton: #7A4B00;
  --marca-osc: #3B2412;
  --tinta: #3B2412;
  --titulo: #3B2412;
  --suave: #6A4E33;
  --borde: #F1DFA8;
  --acento: #E7313A;
  --acento-2: #F28C28;
  --palido: #FFE9A8;
  --foco: #3B2412;
  --foco-osc: #F2BC21;
  --sobre-osc: #FFFFFF;
  --sobre-osc-suave: #E4E0DE;
  --cabecera-fondo: #FFFFFF;
  --wa-borde: #1FA855;        /* borde de los botones de WhatsApp con borde (3,09:1 sobre blanco) */
  --wa-texto: #0B6B34;        /* texto verde sobre blanco (6,63:1) */
  --sombra-ini: 0 18px 40px -24px rgba(59, 36, 18, .45);
  --sombra-suave: 0 10px 26px -18px rgba(59, 36, 18, .38);
  font-synthesis: none;
}

/* ---------------------------------------------------------------- tipografía redonda */
.t-ini p, .t-ini li { text-wrap: pretty; }
.t-ini h2, .t-ini h3, .t-ini .seccion__cabeza--centro p, .dia__fin p, .camino__linea, .faq--ini summary { text-wrap: balance; }
.t-ini h1, .t-ini h2, .t-ini .globo, .t-ini .redonda { font-family: var(--redonda); font-weight: 600; }
.t-ini .seccion h2 { font-family: var(--redonda); font-weight: 600; font-size: clamp(28px, 7.4vw, 40px); line-height: 1.12; letter-spacing: -.005em; margin: 10px 0 12px; }
.t-ini .seccion__intro { font-size: 16px; }
.t-ini .seccion__cabeza { margin-bottom: 24px; }
/* en el celular, las secciones un poco más juntas (la página es larga: 13 pantallas a 390 px) */
.t-ini .seccion { padding-block: 48px; }
/* salto de línea solo en computadora (títulos que no deben dejar «de» al final de la línea) */
.br-pc { display: none; }
@media (min-width: 900px) {
  .t-ini .seccion { padding-block: 88px; }
  .t-ini .seccion__intro { font-size: 17px; }
  .t-ini .seccion__cabeza { margin-bottom: 32px; }
  .br-pc { display: inline; }
}

/* botones: se hunden un poco al tocarlos; si el texto va en dos líneas, las líneas quedan parejas */
.t-ini .btn:active, .t-ini .pastilla:active { transform: scale(.98); }
.t-ini .btn { padding-block: 8px; line-height: 1.2; }
.t-ini .btn .btn__texto { text-wrap: balance; }
.nw { white-space: nowrap; }
/* El ícono de WhatsApp de los botones va dentro del texto: si el texto pasa a dos líneas, el ícono queda pegado a la
   primera y todo sigue centrado (con el ícono aparte, quedaba lejos del texto). Sin máscaras CSS, el ícono de siempre. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .t-ini .btn:not(.barra__wa):not(.cabecera__wa) > .ic-lleno { display: none; }
  .t-ini .btn:not(.barra__wa):not(.cabecera__wa) > .ic-lleno + .btn__texto::before {
    content: ""; display: inline-block; width: var(--ic-wa, 22px); height: var(--ic-wa, 22px); margin-right: 10px;
    vertical-align: -.3em; background-color: var(--ic-wa-color, currentColor);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .t-ini .btn-wa-borde, .t-ini .chip-wa { --ic-wa: 20px; --ic-wa-color: var(--wa-borde); }
  .t-ini .btn-chico { --ic-wa: 20px; }
}
.t-ini .btn-principal { background: var(--marca); color: var(--marca-osc); box-shadow: 0 8px 20px -12px rgba(122, 75, 0, .9); }
.t-ini .btn-principal:hover { background: #E8B11A; }
.t-ini .btn-borde { color: var(--marca-osc); }
/* botón-enlace de WhatsApp con borde verde (dudas, camino, preguntas) */
.btn-wa-borde { background: var(--blanco); color: var(--wa-texto); border-color: var(--wa-borde); min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-wa-borde .ic { color: var(--wa-borde); width: 20px; height: 20px; }
.btn-wa-borde:hover { background: var(--wa-claro); }
/* enlace de texto que abre WhatsApp: ámbar, subrayado y con el ícono */
.enlace-wa {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--marca-boton);
  font-weight: 600; font-size: 15px; line-height: 1.3; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.enlace-wa .ic { width: 20px; height: 20px; color: var(--wa-borde); flex: none; }
.enlace-wa:hover { color: var(--marca-osc); }

/* íconos cacao sobre círculo amarillo (trazo de 2,5 px) */
.circulo-ic {
  width: 48px; height: 48px; border-radius: 50%; background: var(--marca); color: var(--marca-osc);
  display: grid; place-content: center; flex: none;
}
.circulo-ic .ic, .parada__ic .ic, .dia__fin-ic .ic, .pension__ic .ic { stroke-width: 2.5; }
.circulo-ic .ic { width: 24px; height: 24px; }
.corazon { width: 14px; height: 14px; color: var(--acento); flex: none; }

/* ---------------------------------------------------------------- globos en inglés (adorno, aria-hidden) */
.globo {
  position: relative; display: inline-block; background: var(--blanco); color: var(--tinta);
  border: 2px solid var(--marca-osc); border-radius: 16px; padding: 5px 12px 6px;
  font-size: 15px; line-height: 1.1; white-space: nowrap; letter-spacing: .01em;
  box-shadow: 0 8px 16px -10px rgba(59, 36, 18, .55);
}
.globo::after {
  content: ""; position: absolute; left: 15px; bottom: -7px; width: 11px; height: 11px; background: var(--blanco);
  border: 2px solid var(--marca-osc); border-top: 0; border-left: 0; transform: rotate(45deg);
  border-bottom-right-radius: 3px;
}
.globo--ic { padding: 5px 9px; line-height: 0; }
.globo--ic .ic { width: 18px; height: 18px; }
@keyframes ini-flotar { 0%, 100% { translate: 0 -4px; } 50% { translate: 0 4px; } }

/* ---------------------------------------------------------------- cabecera blanca y la línea del sol */
.t-ini .cabecera { background: var(--blanco); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* fila de 64 px: con 60, el sol de la línea de abajo (al cargar, a la izquierda) se montaba sobre el «BILINGÜE» */
.t-ini .cabecera__fila { min-height: 64px; }
/* el logo original, con su «EDUCACIÓN BILINGÜE» legible: 50 px en una fila de 64 */
.t-ini .marca__bil { height: 50px; width: auto; }
.t-ini .cabecera__menu a { color: var(--tinta); display: inline-flex; align-items: center; min-height: 44px; }
.t-ini .cabecera__menu a:hover { color: var(--marca-boton); }
.t-ini .cabecera__wa { white-space: nowrap; gap: 8px; }
/* la línea del sol: una barra de avance. La pista es #F1DFA8 (la crema #FFF6D8 no se veía sobre el blanco: 1,08:1);
   el amarillo la llena hasta el sol a medida que la familia baja. Sin animation-timeline, la pista y el sol quietos. */
.linea-sol { position: relative; height: 4px; background: var(--borde); overflow-x: clip; overflow-y: visible; }
.linea-sol::before {
  content: ""; position: absolute; inset: 0; background: var(--marca); transform-origin: 0 50%; transform: scaleX(0);
}
.linea-sol__pista { position: absolute; left: 12px; top: 0; bottom: 0; width: calc(100% - 42px); }
.linea-sol__sol {
  position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23F28C28' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 1.6v2.6M12 19.8v2.6M1.6 12h2.6M19.8 12h2.6M4.6 4.6l1.8 1.8M17.6 17.6l1.8 1.8M4.6 19.4l1.8-1.8M17.6 6.4l1.8-1.8'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='5.6' fill='%23F2BC21'/%3E%3C/svg%3E") center / contain no-repeat;
}
@supports (animation-timeline: scroll()) {
  .linea-sol__pista { animation: ini-sol-avanza linear both; animation-timeline: scroll(root block); }
  .linea-sol::before { animation: ini-sol-llena linear both; animation-timeline: scroll(root block); }
}
@keyframes ini-sol-avanza { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes ini-sol-llena { to { transform: scaleX(1); } }
@media (min-width: 900px) {
  .t-ini .cabecera__fila { min-height: 72px; }
  .t-ini .marca__bil { height: 58px; }
  .t-ini .cabecera__menu { gap: 28px; }
}

/* ---------------------------------------------------------------- hero: amarillo sol */
.hero { position: relative; background: var(--marca-claro); color: var(--tinta); padding: 18px 0 0; overflow: clip; }
.hero__sol { position: absolute; z-index: 0; width: 96px; height: 96px; right: -26px; top: -30px; animation: ini-sol-sube .8s ease-out both; }
.sol__rayos { transform-origin: 100px 100px; animation: ini-girar 60s linear infinite; }
@keyframes ini-sol-sube { from { translate: 0 24px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes ini-girar { to { transform: rotate(360deg); } }
.hero__nube { position: absolute; z-index: 0; color: var(--blanco); }
.hero__nube--1 { width: 46px; right: 52px; top: 8px; opacity: .9; }
.hero__nube--2 { width: 34px; right: 8px; top: 62px; opacity: .85; }
.hero__grid { position: relative; z-index: 1; display: grid; gap: 26px; }
.hero__texto { min-width: 0; }
.hero__etiqueta { color: var(--tinta); padding-right: 64px; }
/* por debajo de 350 px la etiqueta no cabe en una línea junto al sol y «· Comas» quedaba sola, con el punto delante
   (Comas sigue en los sellos de abajo) */
@media (max-width: 349px) { .etiqueta__lugar { display: none; } }
/* el H1 va en línea dentro de .hero__titulo y el globo, fuera del H1: así el H1 es solo su frase (texto plano) y el
   globo queda pegado al final de la última línea */
.hero__titulo {
  margin: 10px 0 12px; font: 600 32px/1.12 var(--redonda); letter-spacing: -.012em; color: var(--titulo);
  text-wrap: balance;
}
.hero h1 { display: inline; font: inherit; letter-spacing: inherit; }
.crayon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15.5c38-5.5 84-8.5 132-8 50 .5 102 3.2 160-1' fill='none' stroke='%23E7313A' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M22 20c62-3.6 150-5 270-4' fill='none' stroke='%23E7313A' stroke-width='3' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") left 100% / 100% .34em no-repeat;
  padding-bottom: .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.globo--h1 { margin-left: 2px; vertical-align: 6px; font-size: 15px; rotate: -6deg; animation: ini-flotar 6s ease-in-out infinite; }
.hero__bajada { font-size: 16.5px; line-height: 1.55; }

/* tarjeta de edad: el blanco separa el verde de WhatsApp del amarillo */
.tarjeta-edad {
  margin-top: 18px; background: var(--blanco); border-radius: 20px; padding: 16px;
  box-shadow: 0 14px 30px -18px rgba(59, 36, 18, .5), 0 1px 3px rgba(59, 36, 18, .08);
}
.tarjeta-edad__titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 17px/1.3 var(--fuente); letter-spacing: 0; color: var(--tinta); }
.tarjeta-edad__titulo .ic { width: 22px; height: 22px; color: var(--wa-borde); }
.edad__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.edad__botones--3 { grid-template-columns: repeat(3, 1fr); }
.t-ini .edad__boton { min-height: 64px; border-radius: 16px; padding: 6px 8px; font: 800 18px/1.15 var(--fuente); color: var(--tinta); }
.t-ini .edad__boton .grado__sub { font: 600 12px/1.25 var(--fuente); color: var(--marca-boton); }
.edad__boton--2 { container-type: inline-size; }
.sub__punto { display: none; }
.sub__nuevo { display: block; }
@container (min-width: 154px) {
  .sub__punto, .sub__nuevo { display: inline; }
}
.t-ini .edad__boton.es-elegido { border-color: var(--marca-osc); box-shadow: inset 0 0 0 1px var(--marca-osc); background: var(--wa-claro); }
.anuncio-toddlers .edad__boton--2 { border-color: var(--marca-osc); box-shadow: inset 0 0 0 1px var(--marca-osc); }
.tarjeta-edad__nota { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--suave); }
.tarjeta-edad__enlaces { display: grid; margin-top: 2px; }
.tarjeta-edad__enlaces .enlace-wa { min-height: 44px; }
.hero__primaria {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: var(--marca-boton);
  font-weight: 700; font-size: 15px; line-height: 1.35; text-decoration: underline; text-underline-offset: 3px;
}
.hero__primaria .ic { width: 18px; height: 18px; margin-left: 6px; vertical-align: -4px; }

/* foto en forma de blob, con borde blanco */
.hero__foto { position: relative; margin: 8px 6px 0; }
.blob {
  position: relative; overflow: hidden; aspect-ratio: 5 / 4; background: var(--marca);
  border: 6px solid var(--blanco); border-radius: 46% 54% 43% 57% / 57% 45% 55% 43%;
  box-shadow: 0 26px 46px -28px rgba(59, 36, 18, .75);
}
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__foto .globo { position: absolute; z-index: 2; }
.globo--hola { left: 6%; top: -12px; rotate: -7deg; font-size: 17px; animation: ini-flotar 6s ease-in-out infinite; }
.globo--dias { right: 3%; bottom: 9%; rotate: 5deg; font-size: 16px; animation: ini-flotar 6s ease-in-out -3s infinite; }
.globo--dias::after { left: auto; right: 18px; }
/* en el celular, «Good morning!» va junto al título y en la llegada: el de la foto sobraba (tres en tres pantallas) */
@media (max-width: 899px) { .globo--dias { display: none; } }
.sello50 {
  position: absolute; z-index: 2; right: 2%; top: -14px; width: 84px; height: 84px; border-radius: 50%;
  background: var(--marca-osc); color: var(--blanco); border: 3px solid var(--blanco); rotate: 9deg;
  display: grid; place-content: center; text-align: center; box-shadow: 0 12px 22px -12px rgba(59, 36, 18, .8);
}
.sello50 b { font: 600 27px/1 var(--redonda); color: var(--marca); }
.sello50 span { font: 700 10.5px/1.2 var(--fuente); letter-spacing: .01em; margin-top: 2px; }
.hero__onda { position: relative; z-index: 1; display: block; width: 100%; height: 30px; margin-top: 30px; }

/* sellos, sobre la crema, debajo de la onda */
.sellos-banda { background: var(--fondo-2); padding: 2px 0 22px; }
.sellos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font: 600 14px/1.35 var(--fuente); color: var(--tinta); }
.sellos li { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 899px) {
  /* uno por línea, como bloque centrado y con los corazones en una sola columna */
  .sellos { display: grid; grid-template-columns: max-content; justify-content: center; justify-items: start; gap: 6px; }
}

@media (min-width: 900px) {
  /* Dos columnas (7/5 de la spec): a la izquierda la etiqueta, el H1 en 2 líneas, la bajada, la tarjeta y el atajo; a
     la derecha, la foto desde arriba, con el sol asomando detrás de su esquina superior derecha. El globo del H1 sale
     (la spec lo prevé: queda solo sobre la foto, con un «Good morning!» por pantalla). */
  .hero { padding-top: 40px; }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(340px, 38vw, 480px)); gap: 0 52px;
    grid-template-areas: "etiqueta foto" "titulo foto" "bajada foto" "tarjeta foto" "atajo foto";
    grid-template-rows: auto auto auto auto 1fr; align-items: start;
  }
  .hero__texto { display: contents; }
  .hero__etiqueta { grid-area: etiqueta; padding-right: 0; }
  .hero__titulo { grid-area: titulo; font-size: clamp(38px, 2.4vw + 17px, 48px); line-height: 1.08; margin: 14px 0 16px; }
  .globo--h1 { display: none; }
  .hero__bajada { grid-area: bajada; font-size: 18px; }
  .tarjeta-edad { grid-area: tarjeta; margin-top: 22px; padding: 18px 20px 12px; }
  .tarjeta-edad__enlaces { grid-template-columns: auto; justify-items: start; }
  .hero__primaria { grid-area: atajo; justify-self: start; }
  .hero__foto { grid-area: foto; align-self: center; margin: 0; }
  .hero__sol { width: 180px; height: 180px; top: 36px; right: max(-30px, calc(50% - 650px)); }
  .hero__nube--1 { width: 74px; right: max(110px, calc(50% - 510px)); top: 38px; }
  .hero__nube--2 { width: 54px; right: max(16px, calc(50% - 616px)); top: 236px; }
  .globo--hola { font-size: 20px; top: 1%; left: 1%; }
  .globo--dias { font-size: 18px; }
  .sello50 { width: 100px; height: 100px; right: auto; left: -26px; top: auto; bottom: 4%; rotate: -8deg; }
  .sello50 b { font-size: 34px; }
  .sello50 span { font-size: 12px; }
  .hero__onda { height: 56px; margin-top: 40px; }
  .sellos-banda { padding: 0 0 28px; }
  .sellos { font-size: 15.5px; gap: 8px 40px; }
  .sellos .corazon { width: 16px; height: 16px; }
}
@media (min-width: 1100px) {
  .edad__botones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* del mismo ancho: «Pre-Kinder» cabe entero (MKT-298) */
}

/* ---------------------------------------------------------------- un día en inicial */
.manana { position: relative; overflow: clip; background: var(--blanco); }
.manana__nube { position: absolute; color: var(--fondo-2); pointer-events: none; }
.manana__nube--1 { width: 120px; left: -34px; top: 26px; }
.manana__nube--2 { width: 92px; right: -26px; top: 210px; }
.manana .envoltura { position: relative; }

/* selector «Ver la mañana de:» (radios nativos; el contenido lo cambia el CSS con :has()) */
.selector { max-width: 640px; margin: 0 auto; }
.ver-edad { border: 0; padding: 0; margin: 0; min-width: 0; }
.ver-edad legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; text-align: center; font: 700 15px/1.3 var(--fuente); color: var(--tinta); }
.ver-edad__pastillas { clear: both; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ver-edad__pastillas:has(> input:nth-of-type(3):last-of-type) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ver-edad input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.pastilla {
  display: grid; place-content: center; min-height: 48px; padding: 0 6px; border-radius: 999px; cursor: pointer;
  background: var(--fondo-2); border: 2px solid var(--borde); color: var(--tinta); font: 700 16px/1 var(--fuente);
  white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.pastilla:hover { border-color: var(--marca); }
/* Lucero, 21 oct: el aula con su edad debajo, sin salirse; en el celular, de 2 en 2 */
.pastilla { justify-items: center; text-align: center; gap: 2px; white-space: nowrap; height: auto; min-height: 54px; padding-block: 6px; }
.pastilla__edad { font-size: 12px; font-weight: 600; opacity: .8; }
@media (max-width: 599px) { .ver-edad__pastillas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ver-edad input:checked + .pastilla { background: var(--marca); border-color: var(--marca-osc); box-shadow: 0 6px 14px -10px rgba(59, 36, 18, .9); }
.ver-edad input:focus-visible + .pastilla { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ficha de la edad */
.fichas { display: grid; gap: 10px; margin-top: 16px; }
.ficha { background: var(--fondo-2); border: 2px solid var(--marca-boton); border-radius: 20px; padding: 16px 18px 18px; }
/* «.t-ini» delante: si no, «.seccion h3» de base.css (18,5 px, 700) les gana a estos títulos de una sola clase */
.t-ini .ficha__titulo { font: 600 20px/1.2 var(--redonda); color: var(--tinta); }
/* «Nuevo en 2027» junto al título de Toddlers (como la etiqueta de su sección); si no cabe, baja entera y alineada a
   la izquierda (el espacio de antes se pierde al empezar la línea: por eso sin margen) */
.ficha__nuevo {
  display: inline-block; vertical-align: 3px; padding: 4px 9px 3px; border-radius: 999px;
  background: var(--marca-osc); color: var(--marca); font: 700 12px/1.2 var(--fuente); letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}
.ficha__lista { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.ficha__lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.ficha__lista .ic { width: 20px; height: 20px; color: var(--marca-boton); margin-top: 2px; }
@media (max-width: 379px) {
  /* el horario en dos líneas limpias: «Llegada 8:00 a. m.» / «Salida 1:00 p. m.*» */
  .hora__sep { display: none; }
  .ficha__lista .nw { display: block; }
}
.fichas__nota { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--suave); text-align: center; text-wrap: balance; }
@supports selector(:has(*)) {
  .ficha, .fichas__nota { display: none; }
  body:has(#ver-2:checked) .ficha--2, body:has(#ver-3:checked) .ficha--3,
  body:has(#ver-4:checked) .ficha--4, body:has(#ver-5:checked) .ficha--5 { display: block; animation: ini-aparece .25s ease-out; }
  body:has(#ver-3:checked) .fichas__nota, body:has(#ver-4:checked) .fichas__nota, body:has(#ver-5:checked) .fichas__nota { display: block; }
}
@keyframes ini-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* el camino de la mañana: una línea punteada y un sol que baja con el dedo (sticky) */
.dia { position: relative; max-width: 560px; margin: 36px auto 0; }
.dia__camino { position: relative; }
.dia__camino::before {
  content: ""; position: absolute; left: 18px; top: 20px; bottom: 0; width: 4px;
  background: radial-gradient(circle, var(--marca-boton) 1.6px, transparent 2.1px) center top / 4px 10px repeat-y;
}
.dia__sol { position: sticky; top: calc(50vh - 20px); z-index: 3; width: 40px; height: 40px; margin-bottom: -40px; pointer-events: none; }
/* la S de computadora (la dibuja inicial.js); en el celular no se usa */
.dia__s { display: none; position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.dia__s path { fill: none; stroke: var(--marca-boton); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0 10; }
.dia__sol-svg { display: block; width: 40px; height: 40px; filter: drop-shadow(0 4px 6px rgba(122, 75, 0, .35)); }
.dia__paradas { list-style: none; display: grid; gap: 22px; padding: 56px 0 26px; }
.parada { display: grid; grid-template-columns: 40px 96px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.parada__marca {
  grid-column: 1; grid-row: 1; justify-self: center; position: relative; z-index: 1; border-radius: 50%;
  background: var(--palido); border: 2px solid var(--marca); transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.parada__marca--num { width: 36px; height: 36px; display: grid; place-content: center; font: 600 18px/1 var(--redonda); color: var(--tinta); }
.parada__marca--punto { width: 22px; height: 22px; }
.parada__marca--punto::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--marca); }
.dia--vivo .parada__marca { background: var(--fondo-2); border-color: var(--borde); }
.dia--vivo .parada__marca--punto::after { background: var(--borde); transition: background-color .3s ease; }
.dia--vivo .parada__marca.encendida { background: var(--palido); border-color: var(--marca); box-shadow: 0 0 0 6px rgba(242, 188, 33, .28); }
.dia--vivo .parada__marca--punto.encendida::after { background: var(--marca); }
.parada__foto { grid-column: 2; grid-row: 1; position: relative; width: 96px; height: 96px; }
/* la foto va en un marco redondo con borde blanco; la de la despedida ya viene recortada más cerca (fotos.py, «zoom») */
.parada__marco {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: var(--fondo-2); border: 4px solid var(--blanco); box-shadow: 0 12px 22px -12px rgba(59, 36, 18, .6);
}
.parada__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.parada__img.por-cargar { opacity: 0; }
.parada__ic {
  position: absolute; right: -6px; bottom: -2px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--marca); color: var(--marca-osc); border: 3px solid var(--blanco); display: grid; place-content: center;
}
.parada__ic .ic { width: 18px; height: 18px; }
.parada__texto { grid-column: 3; grid-row: 1; display: grid; gap: 6px; justify-items: start; min-width: 0; }
.t-ini .parada__titulo { font: 600 20px/1.15 var(--redonda); color: var(--tinta); }
.parada__texto p { font-size: 15px; line-height: 1.45; color: var(--suave); }
@media (max-width: 349px) {
  /* a 320 px el texto de cada parada medía 128 px (frases de cuatro líneas): la foto baja a 80 px y el título a 19 */
  .parada { grid-template-columns: 40px 80px minmax(0, 1fr); column-gap: 10px; }
  .parada__foto { width: 80px; height: 80px; }
  .parada__ic { width: 32px; height: 32px; right: -7px; }
  .parada__ic .ic { width: 16px; height: 16px; }
  .t-ini .parada__titulo { font-size: 19px; }
}
.globo--parada { font-size: 14px; padding: 4px 10px 5px; margin: 1px 0 4px; }
.globo--parada.globo--ic { padding: 5px 10px; }
.globo--parada::after { width: 9px; height: 9px; bottom: -6px; left: 12px; }

.dia__tramo p {
  display: grid; grid-template-columns: 40px auto; column-gap: 12px; align-items: center; justify-content: start;
  font: 600 18px/1.2 var(--redonda); color: var(--marca-boton);
}
.dia__tramo .ic {
  justify-self: center; position: relative; z-index: 1; width: 34px; height: 34px; padding: 7px; border-radius: 50%;
  background: var(--blanco); color: var(--marca-boton); border: 2px solid var(--marca-boton); stroke-width: 2.5;
}

/* cierre del camino: donde el sol se detiene */
.dia__fin { position: relative; margin: 2px 0 0; padding: 16px 18px 16px 62px; background: var(--fondo-2); border: 2px solid var(--borde); border-radius: 22px; }
.dia__fin-ic {
  position: absolute; left: -4px; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--marca); color: var(--marca-osc); border: 3px solid var(--blanco); display: grid; place-content: center;
  box-shadow: 0 8px 16px -10px rgba(59, 36, 18, .7);
}
.dia__fin-ic .ic { width: 22px; height: 22px; }
.t-ini .dia__fin-titulo { font: 600 20px/1.2 var(--redonda); color: var(--tinta); }
.dia__fin p { margin-top: 4px; font-size: 15.5px; line-height: 1.45; color: var(--tinta); }

/* durante el año */
.celebramos { max-width: 760px; margin: 40px auto 0; text-align: center; }
/* la estrella va dentro de la línea: con inline-flex, al partirse el título en dos (320–360 px) quedaba sola a la izquierda */
.t-ini .celebramos__titulo { display: block; font: 600 20px/1.25 var(--redonda); color: var(--tinta); }
.celebramos__titulo .ic { display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -3px; color: var(--marca-boton); }
.celebramos__chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.celebramos__chips li {
  padding: 6px 14px 7px; border-radius: 999px; background: var(--fondo-2); border: 1.5px solid var(--marca-boton);
  font: 600 14px/1.3 var(--fuente); color: var(--tinta);
}

/* botón final con la edad elegida (sin :has() se ven los cuatro en 2 × 2) */
.final { margin: 34px auto 0; max-width: 560px; display: grid; justify-items: center; gap: 8px; }
.final__botones { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.final__boton { width: 100%; padding-inline: 14px; font-size: 16px; }
.final__datos {
  display: block; padding: 11px 4px; text-align: center; color: var(--marca-boton); font-weight: 700;
  font-size: 15px; line-height: 1.45; text-decoration: underline; text-underline-offset: 3px;
}
.final__datos .ic { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -5px; }
@supports selector(:has(*)) {
  .final__botones { grid-template-columns: 1fr; }
  .final__boton { display: none; }
  body:has(#ver-2:checked) .final__boton--2, body:has(#ver-3:checked) .final__boton--3,
  body:has(#ver-4:checked) .final__boton--4, body:has(#ver-5:checked) .final__boton--5 { display: inline-flex; }
}

@media (min-width: 640px) {
  .fichas { grid-template-columns: 1fr 1fr; }
  @supports selector(:has(*)) { .fichas { grid-template-columns: 1fr; } }
}
@media (min-width: 900px) {
  .manana__nube--1 { width: 190px; left: 4%; top: 60px; }
  .manana__nube--2 { width: 150px; right: 5%; top: 120px; }
  .t-ini .manana h2 { font-size: 40px; }
  .ver-edad__pastillas { max-width: 520px; margin-inline: auto; }
  .ficha { padding: 20px 24px 22px; }
  .t-ini .ficha__titulo { font-size: 22px; }

  .dia { max-width: 1000px; margin-top: 52px; }
  /* El camino va por el centro. Sin JS, una línea recta punteada; con JS (inicial.js), la S: una curva entre parada y
     parada que pasa por cada círculo, y el sol la sigue. Las paradas se encajan en zigzag (cada una sube 64 px junto
     a la anterior), así cada fila no deja la otra mitad vacía. */
  .dia__camino::before { left: 50%; margin-left: -2px; }
  .dia__camino--s::before { display: none; }
  .dia__camino--s .dia__s { display: block; }
  .dia__sol { margin-left: calc(50% - 22px); will-change: transform; }
  .dia__sol, .dia__sol-svg { width: 44px; height: 44px; }
  .dia__sol { top: calc(50vh - 22px); margin-bottom: -44px; }
  .dia__paradas { gap: 0; padding: 64px 0 40px; }
  .dia__paradas > .parada--medio, .dia__paradas > .parada--medio + .parada--fija { margin-top: -64px; }
  .parada { grid-template-columns: minmax(0, 1fr) 180px 112px 180px minmax(0, 1fr); column-gap: 0; }
  .parada__marca { grid-column: 3; }
  .parada__marca--num { width: 44px; height: 44px; font-size: 21px; }
  .parada__marca--punto { width: 26px; height: 26px; }
  .parada__marca--punto::after { inset: 5px; }
  .parada__foto { width: 180px; height: 180px; }
  .parada__marco { border-width: 6px; }
  .parada__ic { width: 48px; height: 48px; right: 4px; bottom: 4px; }
  .parada__ic .ic { width: 22px; height: 22px; }
  .parada--izq .parada__foto { grid-column: 2; }
  .parada--izq .parada__texto { grid-column: 1; justify-items: end; text-align: right; padding-right: 28px; }
  .parada--der .parada__foto { grid-column: 4; }
  .parada--der .parada__texto { grid-column: 5; padding-left: 28px; }
  .parada--izq .globo--parada::after { left: auto; right: 14px; }
  .t-ini .parada__titulo { font-size: 24px; }
  .parada__texto p { font-size: 16px; max-width: 26ch; }
  /* «Durante la mañana»: el reloj va sobre el camino, como una parada más, y el texto a su izquierda, bajo la foto de
     la llegada (a la derecha sube «Juego simbólico», que así no lo tapa) */
  .dia__tramo { display: flex; justify-content: flex-end; width: calc(50% + 24px); margin: 26px 0 0; }
  .dia__tramo p {
    grid-template-columns: auto auto; column-gap: 10px; padding: 5px 5px 5px 18px; border-radius: 999px;
    background: var(--blanco); border: 2px solid var(--borde); position: relative; z-index: 1; font-size: 19px;
  }
  .dia__tramo span { order: -1; }
  .dia__fin { max-width: 520px; margin: 0 auto; padding: 46px 28px 22px; text-align: center; }
  .dia__fin-ic { left: 50%; top: -28px; margin: 0 0 0 -28px; width: 56px; height: 56px; }
  .dia__fin-ic .ic { width: 26px; height: 26px; }
  .t-ini .dia__fin-titulo { font-size: 22px; }
  .dia__fin p { font-size: 16.5px; }
  .celebramos { margin-top: 56px; }
  .celebramos__chips li { font-size: 15px; padding: 7px 16px 8px; }
  .final { margin-top: 40px; }
  .final__boton { width: auto; min-width: 380px; }
  @supports selector(:has(*)) { .final__botones { justify-items: center; } }
}

/* ---------------------------------------------------------------- lo que usted quiere saber primero */
.t-ini .lo-primero h2 { font-size: clamp(26px, 6.8vw, 36px); }
.dudas { display: grid; gap: 14px; }
.duda {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: center;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 20px; padding: 18px 16px 18px;
  box-shadow: var(--sombra-suave);
}
.duda h3 { font: 600 20px/1.2 var(--redonda); color: var(--tinta); }
.duda p { grid-column: 1 / -1; font-size: 15.5px; line-height: 1.55; color: var(--suave); }
.duda__accion { grid-column: 1 / -1; margin-top: 2px; }
.duda__accion .btn { width: 100%; min-height: 48px; padding-inline: 12px; font-size: 14.5px; }
.t-ini .duda__accion .btn { --ic-wa: 20px; }
.maqueta {
  grid-column: 1 / -1; display: grid; gap: 2px; max-width: 300px; padding: 10px 12px 12px; border-radius: 4px 16px 16px 16px;
  background: #E7F8EE; color: var(--tinta); font-size: 14px; line-height: 1.45; box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .5);
}
.maqueta__ejemplo { font-size: 12px; color: var(--suave); }
.maqueta b { font-size: 13.5px; }
.preocupa {
  position: relative; margin-top: 16px; display: grid; gap: 14px; padding: 22px 20px;
  background: var(--blanco); border: 2px dotted var(--marca-osc); border-radius: 22px;
}
.preocupa__cor { position: absolute; width: 16px; height: 16px; color: var(--acento); }
.preocupa__cor--1 { left: 16px; top: -9px; rotate: -12deg; }
.preocupa__cor--2 { right: 16px; top: -9px; rotate: 12deg; }
.preocupa__cor--3 { left: 16px; bottom: -9px; rotate: 10deg; }
.preocupa__cor--4 { right: 16px; bottom: -9px; rotate: -10deg; }
.preocupa h3 { font: 600 20px/1.25 var(--redonda); color: var(--tinta); }
.preocupa p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--suave); }
.preocupa__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chip-wa { min-height: 48px; padding: 0 12px; font-size: 15px; }
.chip-wa .ic { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .t-ini .lo-primero h2 { font-size: 36px; }
  .dudas { grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  .duda { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 22px 22px; }
  .duda__accion .btn { min-height: 52px; font-size: 14px; }
  .duda p { flex: 1; }
  .duda__accion { align-self: stretch; margin-top: 4px; }
  .preocupa { margin-top: 22px; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 26px 30px; }
  .preocupa__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .chip-wa { padding: 0 20px; }
}

/* ---------------------------------------------------------------- Toddlers: banda en amarillo HJ */
.toddlers { position: relative; overflow: clip; background: var(--marca); color: var(--tinta); padding: 58px 0 70px; }
.toddlers__onda { position: absolute; left: 0; z-index: 1; display: block; width: 100%; height: 30px; }
.toddlers__onda--arriba { top: -1px; }
.toddlers__onda--abajo { bottom: -1px; }
/* nubes blancas enteras (con opacidad se veían beige sobre el amarillo); en el celular, una sola, sobre la onda */
.toddlers__nube { position: absolute; color: var(--blanco); pointer-events: none; }
.toddlers__nube--1 { width: 70px; right: 4%; top: 14px; }
.toddlers__nube--2 { display: none; width: 52px; left: 3%; top: 40px; }
.toddlers__grid { position: relative; z-index: 2; display: grid; gap: 30px; }
.toddlers__foto { position: relative; margin: 8px 4px 0; }
.toddlers__marco { overflow: hidden; border: 6px solid var(--blanco); border-radius: 28px; rotate: -1.5deg; box-shadow: 0 24px 40px -26px rgba(59, 36, 18, .8); }
.toddlers__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.globo--toddlers { position: absolute; z-index: 2; left: 16px; top: -14px; font-size: 17px; rotate: -6deg; animation: ini-flotar 6s ease-in-out -1.5s infinite; }
.pegatina {
  position: absolute; z-index: 2; right: -2px; bottom: -20px; width: 92px; height: 92px; border-radius: 50%; rotate: 10deg;
  background: var(--marca-osc); color: var(--marca); border: 3px solid var(--blanco); display: grid; place-content: center;
  text-align: center; padding: 12px; font: 600 17px/1.05 var(--redonda); box-shadow: 0 12px 22px -12px rgba(59, 36, 18, .9);
}
.toddlers__texto { min-width: 0; }
.toddlers__etiqueta {
  display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--marca-osc); color: var(--marca);
  font: 700 12.5px/1.3 var(--fuente); letter-spacing: .09em; text-transform: uppercase;
}
.toddlers h2 { font-size: clamp(28px, 7.6vw, 42px); line-height: 1.1; margin: 12px 0 10px; color: var(--tinta); }
/* sin «balance»: así corta «En 2027 abrimos Toddlers, / el aula de 2 años» (con balance, «Toddlers,» bajaba de línea);
   a menos de 380 px «el aula de 2 años» sí se puede partir */
.t-ini .toddlers h2 { text-wrap: pretty; }
@media (max-width: 379px) { .toddlers h2 .nw { white-space: normal; } }
.toddlers__lead { font-size: 17px; line-height: 1.55; }
.vinetas { list-style: none; display: grid; gap: 10px; margin: 16px 0 14px; }
.vinetas li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; font-weight: 500; }
.vinetas .corazon { width: 18px; height: 18px; margin-top: 3px; }
.toddlers__nota { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; }
.toddlers__nota .ic { width: 18px; height: 18px; flex: none; }
.capsula {
  margin-top: 18px; padding: 8px; border-radius: 28px; background: var(--blanco); display: grid; gap: 2px;
  box-shadow: 0 16px 30px -20px rgba(59, 36, 18, .75);
}
.t-ini .capsula .btn-grande { font-size: 16px; }
.enlace-wa--centro { display: block; text-align: center; padding: 10px 10px 8px; font-size: 14.5px; }
.enlace-wa--centro .ic { display: inline-block; vertical-align: -4px; margin-right: 6px; }
@media (min-width: 900px) {
  .toddlers { padding: 96px 0 104px; }
  .toddlers__onda { height: 52px; }
  .toddlers__nube--1 { width: 110px; right: 6%; top: 70px; }
  .toddlers__nube--2 { display: block; width: 80px; left: 3%; top: 40px; }
  .toddlers__grid { grid-template-columns: 460px minmax(0, 1fr); gap: 64px; align-items: center; }
  .toddlers__foto { margin: 0; }
  .pegatina { width: 110px; height: 110px; font-size: 20px; right: -18px; bottom: -24px; }
  .globo--toddlers { font-size: 20px; }
  .toddlers__lead { font-size: 18px; }
  .vinetas li { font-size: 17px; }
  .capsula { max-width: 520px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* columna de texto angosta: a 42 px el H2 quedaba en tres líneas, con «Toddlers,» sola en la del medio */
  .toddlers__grid { grid-template-columns: 400px minmax(0, 1fr); gap: 48px; }
  .toddlers h2 { font-size: 36px; }
}

/* ---------------------------------------------------------------- y después: la cinta del camino */
.camino__linea { margin: 0 auto; max-width: 40ch; font-size: 17px; line-height: 1.5; color: var(--suave); }
.camino__linea--2, .camino__linea--3, .camino__linea--4, .camino__linea--5 { display: none; }
body[data-grado="inicial-2"] .camino__linea--0, body[data-grado="inicial-3"] .camino__linea--0,
body[data-grado="inicial-4"] .camino__linea--0, body[data-grado="inicial-5"] .camino__linea--0 { display: none; }
body[data-grado="inicial-2"] .camino__linea--2, body[data-grado="inicial-3"] .camino__linea--3,
body[data-grado="inicial-4"] .camino__linea--4, body[data-grado="inicial-5"] .camino__linea--5 { display: block; }
.cinta { list-style: none; display: grid; gap: 14px; max-width: 560px; margin: 4px auto 0; padding-left: 30px; }
.cinta__tramo { position: relative; }
.cinta__tramo::before { content: ""; position: absolute; left: -30px; top: -7px; bottom: -7px; width: 12px; background: var(--marca); }
.cinta__tramo--ini::before { top: 0; border-radius: 6px 6px 0 0; }
.cinta__tramo--pri::before { background: var(--rojo); }
.cinta__tramo--sec::before { bottom: 0; background: var(--azul); border-radius: 0 0 6px 6px; }
.cinta__tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px; padding: 16px 18px; box-shadow: var(--sombra-suave); }
.cinta__tarjeta h3 { font: 600 19px/1.25 var(--redonda); }
.cinta__tramo--ini h3 { color: var(--marca-boton); padding-right: 60px; }
.cinta__tramo--pri h3, .cinta__tramo--pri .cinta__enlace { color: #C81F2A; }
.cinta__tramo--sec h3, .cinta__tramo--sec .cinta__enlace { color: #2458AC; }
.cinta__tarjeta p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--suave); }
.cinta__enlace { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: -8px; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.cinta__enlace .ic { width: 18px; height: 18px; }
.cinta__aqui {
  position: absolute; z-index: 1; right: -6px; top: -16px; width: 66px; height: 66px; border-radius: 50%; rotate: 8deg;
  background: var(--marca-osc); color: var(--blanco); border: 3px solid var(--blanco); display: grid; place-content: center; text-align: center;
  font: 600 13px/1.05 var(--redonda); box-shadow: 0 10px 18px -10px rgba(59, 36, 18, .9);
}
.camino__cierre { display: grid; justify-items: center; gap: 12px; margin-top: 28px; text-align: center; }
.camino__anios { display: inline-flex; align-items: center; gap: 8px; font: 600 18px/1.3 var(--redonda); color: var(--tinta); }
.camino__anios .corazon { width: 16px; height: 16px; }
.camino .btn-wa-borde { white-space: normal; text-align: center; line-height: 1.25; padding: 8px 18px; }
@media (min-width: 900px) {
  .camino__linea { font-size: 18px; }
  .cinta { max-width: none; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; margin-top: 18px; }
  .cinta__tramo { padding-top: 36px; }
  .cinta__tramo::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 14px; border-radius: 0; }
  .cinta__tramo--ini::before { border-radius: 7px 0 0 7px; }
  .cinta__tramo--sec::before { border-radius: 0 7px 7px 0; }
  .cinta__tarjeta { margin: 0 10px; height: 100%; padding: 22px 22px 18px; }
  .cinta__tramo--ini h3 { padding-right: 0; }
  .cinta__aqui { right: auto; left: 22px; top: -28px; width: 72px; height: 72px; font-size: 14px; rotate: -6deg; }
  .cinta__tramo--ini .cinta__tarjeta { padding-left: 22px; }
  .cinta__tramo--ini { padding-top: 56px; }
  .cinta__tramo--pri, .cinta__tramo--sec { padding-top: 56px; }
  .camino__cierre { margin-top: 40px; }
}

/* ---------------------------------------------------------------- para conversarlo en casa (banda cacao) */
.en-casa { position: relative; overflow: clip; }
.en-casa__sol { position: absolute; width: 130px; height: 130px; right: -46px; top: -46px; opacity: .95; }
.en-casa .etiqueta { color: var(--marca); }
.t-ini .en-casa h2 { color: var(--blanco); padding-right: 40px; }
.cinco { list-style: none; counter-reset: punto; display: grid; gap: 16px; margin-top: 22px; }
.cinco li { counter-increment: punto; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16.5px; line-height: 1.5; color: var(--blanco); }
.cinco li::before { content: counter(punto); font: 600 38px/.9 var(--redonda); color: var(--marca); text-align: center; }
.en-casa__acciones { display: grid; gap: 12px; margin-top: 28px; }
.en-casa__acciones p { color: var(--sobre-osc-suave); font-size: 16px; line-height: 1.5; }
.btn-claro-borde { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.btn-claro-borde:hover { background: rgba(255, 255, 255, .08); }
.btn-claro-borde .ic { width: 22px; height: 22px; color: var(--marca); }
/* sobre el cacao el verde ya contrasta (7,3:1): la cápsula blanca queda como un aro fino */
.capsula--osc { margin-top: 4px; padding: 4px; border-radius: 999px; box-shadow: none; }
@media (min-width: 900px) {
  .en-casa__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 64px; align-items: center; }
  .en-casa__sol { width: 190px; height: 190px; right: -60px; top: -60px; }
  .cinco li { font-size: 17.5px; grid-template-columns: 48px minmax(0, 1fr); }
  .cinco li::before { font-size: 44px; }
  .en-casa__acciones { margin-top: 0; padding: 30px; border-radius: 26px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
}

/* ---------------------------------------------------------------- la cita */
.cita-ini .pasos--hilo { gap: 0; max-width: 640px; }
.t-ini .pasos--hilo li { background: transparent; border: 0; border-radius: 0; padding: 0 0 24px 62px; min-height: 48px; }
.t-ini .pasos--hilo li:last-child { padding-bottom: 6px; }
.t-ini .pasos--hilo li::before {
  left: 0; top: -2px; width: 46px; height: 46px; background: var(--marca); color: var(--marca-osc);
  font: 600 22px/1 var(--redonda); border: 3px solid var(--blanco); box-shadow: 0 6px 14px -10px rgba(59, 36, 18, .8);
}
.t-ini .pasos--hilo li:not(:last-child)::after {
  content: ""; position: absolute; left: 21px; top: 50px; bottom: 2px; width: 4px;
  background: radial-gradient(circle, var(--marca-boton) 1.6px, transparent 2.1px) center top / 4px 10px repeat-y;
}
.t-ini .pasos--hilo h3 { font: 600 20px/1.25 var(--redonda); padding-top: 9px; }
.t-ini .pasos--hilo p { color: var(--suave); font-size: 15.5px; }
.cita-ini .cita { margin-top: 28px; }
.pension {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px 14px; align-items: start;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 20px; padding: 18px;
}
.pension__ic { width: 48px; height: 48px; border-radius: 50%; background: var(--fondo-2); color: var(--marca-osc); border: 2px solid var(--borde); display: grid; place-content: center; }
.pension__ic .ic { width: 24px; height: 24px; }
.pension h3 { font: 600 19px/1.25 var(--redonda); align-self: center; }
.pension p { margin: 6px 0 12px; font-size: 15px; line-height: 1.55; color: var(--suave); }
.pension > div { display: contents; }
.pension h3 { grid-column: 2; }
.pension p, .pension .btn { grid-column: 1 / -1; }
.pension p { margin: 0; }
.pension .btn { justify-self: start; }
.t-ini .cita__lado .lugar { margin-top: 2px; }
/* «Cómo llegar» alineado con el texto de la dirección (24 px del pin + 8 px) */
.t-ini .lugar > a { margin-left: 32px; }
.t-ini .cita__lado .cita__wa { justify-self: stretch; }
/* el formulario plegado: «O déjenos sus datos ▾» */
.plegable--ini { gap: 12px; }
.plegable--ini > .plegable__barra {
  list-style: none; display: grid; gap: 2px; min-height: 56px; padding: 12px 16px; cursor: pointer;
  background: var(--blanco); border: 2px solid var(--marca-osc); border-radius: 18px;
}
.plegable--ini > .plegable__barra::-webkit-details-marker { display: none; }
.plegable__titulo { display: flex; align-items: center; gap: 10px; font: 700 17px/1.3 var(--fuente); color: var(--tinta); }
.plegable__titulo .ic { width: 22px; height: 22px; color: var(--marca-boton); }
.plegable__flecha { margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2.5; transition: transform .2s ease; }
.plegable--ini[open] .plegable__flecha { transform: rotate(180deg); }
.plegable__sub { padding-left: 32px; font-size: 14px; line-height: 1.4; color: var(--suave); }
.plegable--ini:not(.plegable--fijo) .tarjeta-form__cabeza { display: none; }
.plegable--fijo > .plegable__barra { display: none; }
.t-ini .tarjeta-form { border-color: var(--borde); box-shadow: var(--sombra-ini); }
.mas-datos { border-top: 1px dashed var(--borde); }
.mas-datos > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer;
  font-weight: 700; font-size: 15.5px; color: var(--marca-boton);
}
.mas-datos > summary::-webkit-details-marker { display: none; }
.mas-datos > summary .ic { width: 20px; height: 20px; transition: transform .2s ease; }
.mas-datos[open] > summary .ic { transform: rotate(45deg); }
.mas-datos__campos { display: grid; gap: 18px; padding: 6px 0 4px; }
@media (min-width: 900px) {
  .cita-ini .pasos--hilo { max-width: none; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .t-ini .pasos--hilo li { padding: 64px 0 0; }
  .t-ini .pasos--hilo li:last-child { padding-bottom: 0; }
  .t-ini .pasos--hilo li::before { top: 0; width: 52px; height: 52px; font-size: 24px; }
  .t-ini .pasos--hilo li:not(:last-child)::after {
    left: 66px; right: -14px; top: 24px; bottom: auto; width: auto; height: 4px;
    background: radial-gradient(circle, var(--marca-boton) 1.6px, transparent 2.1px) left center / 10px 4px repeat-x;
  }
  .t-ini .pasos--hilo h3 { padding-top: 0; }
  .cita-ini .cita { margin-top: 44px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; }
  .t-ini .cita__lado .cita__wa { justify-self: start; }
}

/* ---------------------------------------------------------------- preguntas y cierre */
.faq--ini { margin-inline: auto; }
.faq--ini details { border-radius: 16px; }
.faq--ini summary {
  padding: 14px 52px 14px 46px; font-size: 16px;
  /* el corazón genérico i-corazon (el mismo path de comun.py), relleno en rojo */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E7313A' d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") 17px center / 16px 16px no-repeat;
}
.faq--ini details[open] { border-color: var(--marca); box-shadow: var(--sombra-suave); }
.faq--ini details > div { color: var(--suave); }
.faq--ini details > div a:not(.btn) { font-weight: 700; color: var(--marca-boton); }
.faq--ini .enlace-wa { min-height: 44px; }
.faq__enlaces { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.faq__enlaces a, .faq--ini details > div p > a:only-child:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }
.cierre--ini {
  max-width: 760px; margin: 36px auto 0; background: var(--fondo-2); color: var(--tinta);
  border: 2px solid var(--borde); position: relative;
}
.t-ini .cierre--ini h2 { color: var(--tinta); font-family: var(--redonda); font-weight: 600; font-size: clamp(26px, 6.6vw, 32px); }
.cierre--ini p { color: var(--suave); }
.cierre--ini :focus-visible { outline-color: var(--foco); }
.cierre--ini .cierre__acciones { justify-items: stretch; }
/* aquí termina el hilo punteado: entra por el borde de la tarjeta y acaba en un corazón junto al botón */
.cierre__boton { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cierre__boton .btn { flex: none; min-width: 0; padding-inline: 16px; }
.hilo-fin { position: relative; flex: 1 1 auto; min-width: 40px; height: 24px; margin-left: -24px; }
.hilo-fin::before {
  content: ""; position: absolute; left: 0; right: 16px; top: 50%; height: 4px; margin-top: -2px;
  background: radial-gradient(circle, var(--marca-boton) 1.7px, transparent 2.2px) right center / 10px 4px repeat-x;
}
.hilo-fin__cor { position: absolute; right: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--acento); }
@media (max-width: 359px) {
  /* a 320 px el botón «Escribir al 997 980 099» necesita toda la fila */
  .hilo-fin { display: none; }
}
.cierre--ini .cierre__compartir { color: var(--marca-boton); }
.cierre--ini .cierre__compartir .ic { color: var(--marca-boton); }
.cierre--ini .cierre__compartir { min-height: 44px; align-items: center; }
@media (min-width: 900px) {
  .cierre--ini { grid-template-columns: minmax(0, 1fr) auto; column-gap: 36px; padding: 34px 36px; }
  .t-ini .cierre--ini h2 { font-size: 28px; }
  .cierre--ini .cierre__acciones { justify-items: end; }
  .cierre--ini .cierre__compartir { display: block; max-width: 300px; padding-block: 2px; text-align: right; }
  .cierre--ini .cierre__compartir .ic { display: inline-block; margin-right: 6px; vertical-align: -4px; }
  .hilo-fin { flex: none; width: 54px; margin-left: 0; }
}

/* ---------------------------------------------------------------- tableta (600–899 px): el diseño del celular, centrado
   (sin esto, la tarjeta de edad medía 736 px y las líneas de las tarjetas pasaban los 100 caracteres) */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__texto, .hero__foto, .dudas, .preocupa, .toddlers__grid, .cinta, .en-casa__grid { max-width: 600px; margin-inline: auto; }
  .edad__botones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* del mismo ancho: «Pre-Kinder» cabe entero (MKT-298) */
  .ver-edad__pastillas, .fichas { max-width: 560px; margin-inline: auto; }   /* al ancho del camino y del botón final */
  .toddlers__nube--1 { top: 30px; right: 2%; }   /* a la derecha la onda baja más: la nube va entera, debajo de ella */
  .cita-ini .envoltura, .preguntas-ini .envoltura { max-width: 632px; }   /* la cita y las preguntas, también a 600 px */
}

/* ---------------------------------------------------------------- pie cacao */
.t-ini .pie { --pie-fondo: var(--marca-osc); }
.t-ini .pie a { color: var(--marca); }
.t-ini .pie ul { gap: 2px; }
.t-ini .pie ul li { min-height: 34px; display: flex; align-items: center; }
.t-ini .pie ul a { min-height: 44px; }
.t-ini .pie .pie__firma-wa { color: var(--wa) !important; }
.pie--ini .pie__firma { margin-top: 40px; position: relative; padding: 20px 22px; }
.pie--ini .pie__firma::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; border-top: 1px solid rgba(255, 255, 255, .2); }
.pie--ini .pie__firma-marca { font-size: 17px; }
.pie--ini .pie__firma-wa { font-size: 18px; }
@media (min-width: 900px) {
  .pie--ini .pie__firma-marca, .pie--ini .pie__firma-wa { font-size: 19px; }
}
/* El espacio para la barra fija (88 px) va dentro del pie cacao y no debajo del body: al final de la página la barra
   se esconde y, con el espacio en el body, quedaba una franja blanca bajo el pie. Si la barra se ve, no tapa la firma. */
@media (max-width: 899px) {
  .t-ini.con-barra { padding-bottom: 0; }
  .t-ini.con-barra .pie { padding-bottom: calc(36px + 88px + env(safe-area-inset-bottom, 0px)); }
  /* los tres enlaces de «Heart of Jesus», en dos columnas (el pie medía más de una pantalla) */
  .pie--ini .pie__niveles { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
}

/* ---------------------------------------------------------------- barra fija del celular y botón flotante */
.t-ini .barra-fija { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; align-items: center; min-height: 64px; }
.t-ini .barra-fija .btn { min-height: 48px; padding: 0 10px; font-size: 15px; gap: 8px; }
.barra__wa .btn__texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-ini .barra__llamen { border: 2px solid var(--marca-osc); color: var(--marca-osc); line-height: 1.1; font-size: 14.5px; }
.barra-fija.barra-fija--sobre-form { transform: translateY(110%); }
@media (max-width: 374px) {
  /* «¿Vacante en Toddlers?» entra entero a 360 px */
  .t-ini .barra-fija .barra__wa { padding-inline: 8px; font-size: 14px; }
}
@media (min-width: 385px) {
  /* «Que me llamen» en una línea: el botón toma su ancho y WhatsApp el resto (por debajo de 385 px, 2/3 y 1/3) */
  .t-ini .barra-fija { grid-template-columns: minmax(0, 1fr) auto; }
  .t-ini .barra-fija .barra__llamen { white-space: nowrap; padding-inline: 10px; font-size: 13.5px; }
  .t-ini .barra-fija .barra__wa { padding-inline: 10px; gap: 6px; }
}
.wa-flotante { display: none; }
@media (min-width: 900px) {
  .wa-flotante {
    position: fixed; right: 24px; bottom: 24px; z-index: 35; width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-content: center; background: var(--wa); color: var(--sobre-wa);
    box-shadow: 0 14px 28px -10px rgba(10, 120, 60, .75);
    transition: transform .2s ease, background-color .15s ease, opacity .2s ease, visibility 0s linear 0s;
  }
  /* mientras se ve la tarjeta de edad, la cabecera y la tarjeta ya llevan a WhatsApp: el flotante espera (inicial.js) */
  .edad-a-la-vista .wa-flotante {
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
  }
  .wa-flotante:hover { background: var(--wa-hover); transform: translateY(-2px); }
  .wa-flotante .ic { width: 30px; height: 30px; }
  .wa-flotante .btn__texto { display: none; }
}