/* =============================================================================
   Inicio · «La cinta del corazón» (PROPUESTA). Se suma a base.css.
   Una cinta de tres colores con cortes netos: amarillo (inicial), rojo (primaria) y azul (HJ PRE).
   En el celular baja en vertical a 16 px del borde y cada puerta saca su rama de paradas; en la computadora es
   horizontal, con las 15 paradas redondas y la banderita al final. El corazón se posa en el grado elegido.
   Contrastes (WCAG 2.x): ver la spec; los textos chicos nunca van en amarillo, rojo #E7313A ni celeste.
   ============================================================================= */

body.t-inicio {
  --ini: #F2BC21; --ini-osc: #3B2412; --ini-enlace: #7A4B00; --ini-tinte: #FFF6D8; --ini-borde: #F1DFA8; --ini-suave: #6A4E33;
  --pri: #E7313A; --pri-boton: #C81F2A; --pri-osc: #55121B; --pri-tinta: #3D1413; --pri-tinte: #FFF0EB; --pri-borde: #F3D3CB; --pri-suave: #6B4740;
  --sec: #2458AC; --sec-osc: #14336B; --sec-titulo: #1B2F5E; --sec-tinte: #F1F5FC; --sec-acento: #F0D844; --sec-celeste: #70A4DC;
  --sec-claro: #DEE2EA; --sec-borde: #D8E2F1;
  --hilo: #D3C6BA;
  --riel: 14px;            /* de la cinta (16 px del borde) al borde de las tarjetas (30 px) */
}

/* ---------------------------------------------------------------- cabecera */
.cabecera--inicio { border-bottom: 0; }
.cabecera--inicio .tricolor { height: 3px; }
.cabecera--inicio .marca--texto .marca__texto { font-size: 14px; }
.cabecera__menu .punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.punto--ini { background: var(--ini); }
.punto--pri { background: var(--pri); }
.punto--pre { background: var(--sec); }
.cabecera__wa { flex: none; }
.cabecera--inicio .marca--texto, .cabecera__menu a { min-height: 44px; display: inline-flex; align-items: center; }
.cabecera--inicio .marca__texto, .cabecera__menu a { white-space: nowrap; }

/* ---------------------------------------------------------------- hero: texto */
.hero {
  position: relative; background-color: var(--fondo-2); padding: 10px 0 24px;
  transition: background-color .25s ease;
}
main[data-nivel="inicial"] .hero, body[data-grado-nivel="inicial"] .hero { background-color: var(--ini-tinte); }
main[data-nivel="primaria"] .hero, body[data-grado-nivel="primaria"] .hero { background-color: var(--pri-tinte); }
main[data-nivel="pre"] .hero, body[data-grado-nivel="pre"] .hero { background-color: var(--sec-tinte); }

/* tres bandas diagonales en la esquina, en eco de la gigantografía «50 aniversario» */
.hero__diagonales {
  position: absolute; top: 0; right: 0; width: 104px; height: 104px; overflow: hidden; pointer-events: none;
}
.hero__diagonales span {
  position: absolute; left: 0; top: 0; width: 190px; height: 6px; transform-origin: 0 50%;
}
.hero__diagonales span:nth-child(1) { background: var(--ini); transform: translate(46px, 0) rotate(45deg); }
.hero__diagonales span:nth-child(2) { background: var(--pri); transform: translate(63px, 0) rotate(45deg); }
.hero__diagonales span:nth-child(3) { background: var(--sec); transform: translate(80px, 0) rotate(45deg); }

.hero__texto { position: relative; padding-left: var(--riel); margin-bottom: 14px; }
/* el hilo que nace en el corazón de la etiqueta y baja hasta la cinta de las puertas */
.hero__texto::before {
  content: ""; position: absolute; left: 2px; top: 22px; bottom: -16px; width: 2px; border-radius: 2px;
  background: var(--hilo);
}
.hero__etiqueta {
  position: relative; display: flex; flex-direction: column;
  font: 700 12px/1.3 var(--fuente); letter-spacing: .07em; text-transform: uppercase; color: var(--suave);
}
.hero__corazon {
  position: absolute; left: -18px; top: 2px; width: 14px; height: 14px; color: var(--pri); stroke-width: 2.6;
}
.hero__sep { display: none; }
.hero h1 {
  margin: 8px 0 8px; font: 800 30px/1.1 var(--fuente); letter-spacing: -.022em; color: var(--tinta);
}
.hero__bajada { font-size: 16px; line-height: 1.45; color: var(--suave); max-width: 40ch; }

/* ---------------------------------------------------------------- hero: las tres puertas (celular) */
.cinta-pc { display: none; }
.puertas { position: relative; display: grid; gap: 10px; padding-left: var(--riel); }
.puerta {
  --pad: 16px;
  position: relative; border: 1px solid transparent; border-radius: 18px; padding: 10px var(--pad) 12px;
  color: var(--osc); transition: background-color .25s ease, box-shadow .25s ease;
}
.puerta--ini { --osc: var(--ini-osc); --tinte: var(--ini-tinte); --color: var(--ini); --rama: var(--ini);
  --flecha: var(--ini-enlace); background: var(--ini-tinte); border-color: var(--ini-borde); }
.puerta--pri { --osc: var(--pri-tinta); --tinte: var(--pri-tinte); --color: var(--pri); --rama: var(--pri);
  --flecha: var(--pri-boton); background: var(--pri-tinte); border-color: var(--pri-borde); }
.puerta--pre { --osc: var(--sec-osc); --tinte: var(--sec-tinte); --color: var(--sec); --flecha: var(--sec-acento);
  --rama: linear-gradient(90deg, var(--sec) 0 15px, var(--sec-celeste) 15px);
  background: var(--sec-osc); border-color: var(--sec-osc); color: #fff;
  /* la cinta azul baja hasta la rama de las paradas y ahí dobla hacia la banderita */
  clip-path: inset(-10px -40px -40px -40px);
}
/* con un grado elegido, el bloque toma el tinte del nivel: su puerta pasa a blanco con un borde de su color, para
   que no se pierda en el fondo justo cuando se posa el corazón (sin mover nada de lugar) */
main[data-nivel="inicial"] .puerta--ini, body[data-grado-nivel="inicial"] .puerta--ini { background-color: #fff; box-shadow: 0 0 0 2px var(--ini); }
main[data-nivel="primaria"] .puerta--pri, body[data-grado-nivel="primaria"] .puerta--pri { background-color: #fff; box-shadow: 0 0 0 2px var(--pri); }
main[data-nivel="inicial"] .puerta--ini .parada__nuevo, body[data-grado-nivel="inicial"] .puerta--ini .parada__nuevo { box-shadow: 0 0 0 2px #fff; }
/* la cinta vertical: amarilla junto a inicial, roja junto a primaria */
.puerta--ini::before, .puerta--pri::before {
  content: ""; position: absolute; left: calc(-1 * var(--riel) - 1px); width: 6px; top: -11px; bottom: -1px;
  background: var(--color);
}
.puerta--ini::before { top: -1px; }

/* solo en computadora */
.puerta__foto, .puerta__banda--texto, .puerta__banda--logo, .puerta__ver { display: none; }

.puerta__titulo { font: inherit; margin: 0; }
.puerta__titulo a {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 30px; color: inherit; text-decoration: none;
  font: 600 15px/1.2 var(--fuente);
}
/* el área de toque de la fila llega a 44 px sin agrandar la puerta */
.puerta__titulo a::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
.puerta__titulo a:hover .puerta__edades { text-decoration: underline; text-underline-offset: 3px; }
.puerta__flecha { margin-left: auto; color: var(--flecha); font: 700 26px/1 var(--fuente); padding: 0 2px 4px 8px; }
.pildora {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px;
  font: 700 14px/1 var(--fuente); white-space: nowrap;
}
.pildora--ini { background: var(--ini); color: var(--ini-osc); }
.pildora--pri { background: var(--pri-boton); color: #fff; }
.pildora--pre { background: var(--sec-osc); color: #fff; }
.puerta__edades { font-weight: 600; font-variant-numeric: tabular-nums; }
.puerta__nombre-pre { font-weight: 700; color: #fff; }
.puerta--pre .puerta__edades { color: var(--sec-claro); }

.puerta__linea { display: none; margin-top: 6px; font-size: 14px; line-height: 1.45; }
.puerta--ini .puerta__linea { color: var(--ini-suave); }
.puerta--pri .puerta__linea { color: var(--pri-suave); font-size: 13px; }
.puerta--pri .puerta__linea b { color: var(--pri-tinta); }

/* HJ PRE: sello «Preparación San Marcos + Colegio» con el símbolo claro, y «Abre en 2027» */
.puerta__banda--pre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 4px; }
.puerta__marca { gap: 0; }
.puerta__marca .marca__texto { color: #fff; font-size: 10.5px; line-height: 1; text-align: right; }
.puerta__marca .marca__texto span { color: var(--sec-acento); }
.puerta__marca .marca__pre { height: 31px; width: auto; margin-left: 4px; }
.puerta__abre {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px;
  background: var(--sec-acento); color: var(--sec-titulo); font: 700 12.5px/1 var(--fuente); white-space: nowrap;
}
.puerta__frase { margin-top: 12px; font: 600 15px/1.4 var(--fuente); color: #fff; }
.puerta__nota { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--sec-claro); }

/* ---------------------------------------------------------------- las paradas: un toque abre WhatsApp */
.paradas { position: relative; list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.paradas--ini { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.paradas--pri { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(4px, 2vw, 8px); }
.paradas--pre { grid-template-columns: repeat(5, minmax(0, 1fr)) 22px; }
.paradas li { position: relative; z-index: 1; min-width: 0; }
/* la rama: sale de la cinta y pasa por detrás de las paradas */
.paradas::before {
  content: ""; position: absolute; z-index: 0; top: 50%; height: 8px; margin-top: -4px;
  left: calc(-1 * var(--riel) - var(--pad) - 1px); right: 8px; background: var(--rama); border-radius: 0 4px 4px 0;
}
.paradas--pre::before { right: 16px; border-radius: 0; }
/* HJ PRE: la cinta azul que baja hasta la rama */
.paradas--pre::after {
  content: ""; position: absolute; z-index: 0; left: calc(-1 * var(--riel) - var(--pad) - 1px); width: 6px; top: -400px; bottom: 50%;
  background: var(--sec);
}
.paradas__bandera { display: flex; align-items: center; justify-content: flex-end; color: var(--sec-acento); }
.paradas__bandera .ic { width: 22px; height: 22px; fill: var(--sec-acento); stroke-width: 2; margin-right: -3px; }

.parada {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 2px;
  border-radius: 12px; border: 2px solid var(--osc); background: #fff; color: var(--osc);
  font: 700 15px/1.1 var(--fuente); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.puerta--pri .parada { border-color: var(--pri-osc); }
.puerta--pre .parada { border-color: #fff; color: var(--sec-osc); }
.parada:hover { background: var(--tinte); }
.puerta--pre .parada:hover { background: var(--sec-tinte); }
.parada:active { transform: translateY(1px); }
.puerta--ini :focus-visible { outline-color: var(--ini-osc); }
.puerta--pri :focus-visible { outline-color: var(--pri-osc); }
.puerta--pre :focus-visible { outline-color: var(--sec-acento); }

.parada__nuevo {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 3px 8px 2px; border-radius: 999px;
  background: var(--ini); color: var(--ini-osc); font: 800 11px/1 var(--fuente); letter-spacing: .06em;
  text-transform: uppercase; box-shadow: 0 0 0 2px var(--ini-tinte); transition: box-shadow .25s ease;
}
.parada__elegido { display: none; }
/* inicial: el aula y su edad en dos líneas, dentro de su cuadro (Lucero, 21 oct: «se sale de los cuadros» y «que edad es cada uno») */
.paradas--ini .parada { flex-direction: column; gap: 3px; min-height: 54px; padding: 6px 2px; font-size: 13px; text-align: center; }
/* en el celular no entran 4 por fila sin cortar «Pre-Kinder»: van de 2 en 2 */
@media (max-width: 599px) { .paradas--ini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; margin-top: 16px; } .paradas--ini .parada { font-size: 15px; } }
.parada__edad { font: 600 11.5px/1 var(--fuente); opacity: .8; }

/* el corazón se posa en la parada elegida */
.parada__corazon {
  display: none; position: absolute; z-index: 3; left: 50%; top: -16px; width: 26px; height: 26px; margin-left: -13px;
  fill: var(--osc); stroke: #fff; stroke-width: 3.6; stroke-linejoin: round; paint-order: stroke fill;
  pointer-events: none; transform-origin: 50% 70%;
}
.puerta--pri .parada__corazon { fill: var(--pri-osc); }
/* en la puerta azul, un corazón azul oscuro con borde blanco se leía hueco (y uno amarillo se fundía con la parada
   elegida): blanco con borde azul oscuro, que se lee entero sobre el azul y sobre el amarillo */
.puerta--pre .parada__corazon { fill: #fff; stroke: var(--sec-osc); }
.parada.es-elegido .parada__corazon, .parada.es-hermano .parada__corazon { display: block; animation: posa .18s ease-out both; }
.parada.es-elegido .parada__elegido, .parada.es-hermano .parada__elegido { display: block; }
.parada.es-elegido .parada__nuevo, .parada.es-hermano .parada__nuevo { display: none; }
@keyframes posa { from { transform: scale(.6); } to { transform: scale(1); } }

.puerta--ini .parada.es-elegido, .puerta--ini .parada.es-hermano { background: var(--ini-osc); color: var(--ini); }
.puerta--pri .parada.es-elegido, .puerta--pri .parada.es-hermano { background: var(--pri-boton); border-color: var(--pri-boton); color: #fff; }
.puerta--pre .parada.es-elegido, .puerta--pre .parada.es-hermano { background: var(--sec-acento); border-color: var(--sec-acento); color: var(--sec-osc); }

/* fila final: más de un hijo */
.hero__final { padding-left: var(--riel); margin-top: 10px; }
.hero__varios {
  width: 100%; min-height: 48px; padding: 7px 16px; gap: 10px; border-color: var(--tinta); color: var(--tinta);
  font-size: 14.5px; line-height: 1.3;
}
.hero__varios .ic { width: 20px; height: 20px; }
/* Lucero, 21 oct: «¡Haz clic aquí!» con borde verde y el ícono de WhatsApp */
.hero__varios { border-color: var(--wa); border-width: 2px; background: var(--wa-claro); }
.hero__varios .ic { color: #1FA855; fill: #1FA855; width: 22px; height: 22px; }
.hero__varios .lineas > span + span { color: #13853F; font-weight: 800; }
.hero__varios:hover { background: var(--wa-suave); }

/* botones de dos líneas con ícono («¿Tiene hijos…?», «Ya lo conversamos…», «Prefiero que me llamen…»): la caja del
   texto mide lo que su línea más larga, así el ícono queda junto al texto y no pegado al borde. Si una línea no entra
   (320 px), la caja se achica y esa línea se parte. */
.lineas {
  display: grid; grid-template-columns: minmax(0, max-content); justify-items: center; min-width: 0;
  text-align: center; text-wrap: balance;
}

@media (max-width: 380px) {
  /* a 360 px las 6 paradas de primaria siguen midiendo 44 px de ancho */
  .puerta { --pad: 14px; }
  .paradas--pri { gap: 4px; }
}
@media (max-width: 359px) {
  .puerta__banda--pre { justify-content: flex-start; }
  /* a 320 px, menos relleno a los lados: «Quiero agendar mi visita» y la pensión entran en una línea */
  .t-inicio main .btn { padding-inline: 14px; gap: 8px; }
  .t-inicio main .btn-grande { font-size: 16px; }
  .barra-fija .barra__grado { padding-inline: 8px; font-size: 14px; }
  /* a 320 px, el aula más chica para que «Pre-Kinder» entre en su cuadro */
  .paradas--ini .parada { font-size: 14px; }
  /* «Preguntar por primaria» y «Ya lo conversamos en casa: / queremos agendar la visita» en sus dos líneas, no en 3 o 4 */
  .t-inicio .etapa { padding-inline: 14px; }
  .t-inicio .etapa__wa { font-size: 15px; }
  .t-inicio .en-casa__botones .btn { font-size: 14.5px; }
}
/* desde 431 px la línea de cada nivel entra en su puerta */
@media (min-width: 431px) {
  .puerta__linea { display: block; }
  .hero__bajada { max-width: 46ch; }
}
/* tableta: el mismo orden del celular, con el título más grande y centrado en 640 px (si no, las puertas y las
   paradas se estiran como un celular agrandado) */
@media (min-width: 600px) and (max-width: 899px) {
  /* todas las secciones en la misma columna (si no, el hero y el camino iban centrados y lo demás pegado a la
     izquierda, con botones de 730 px) */
  .hero .envoltura, .camino .envoltura, .en-casa .envoltura, .visita .envoltura, .preguntas .envoltura,
  .cierre-banda .envoltura, .pie--inicio .envoltura { max-width: 640px; }
  .hero h1 { font-size: 38px; }
  .hero__bajada { max-width: 52ch; font-size: 17px; }
  /* los botones de dos líneas («¿Tiene hijos…?», «Ya lo conversamos…», «Prefiero que me llamen…») entran en una */
  .lineas { display: block; }
  .lineas > span { display: inline; }
}
/* un salto de línea que solo va en la computadora (la bajada del hero: una oración por línea) */
.solo-pc { display: none; }

/* ---------------------------------------------------------------- lo que le espera en cada etapa */
.camino { background: #fff; }
.camino__cabeza { padding-left: var(--riel); }
.etapas { position: relative; display: grid; gap: 12px; padding-left: var(--riel); }
.etapa {
  position: relative; border-radius: 20px; padding: 16px 16px 12px; color: var(--osc);
  display: flex; flex-direction: column; min-width: 0;
}
.etapa--ini { --osc: var(--ini-osc); --texto: var(--ini-osc); --color: var(--ini); --enlace: var(--ini-enlace); --borde-foto: var(--ini);
  background: var(--ini-tinte); }
.etapa--pri { --osc: var(--pri-osc); --texto: var(--pri-tinta); --color: var(--pri); --enlace: var(--pri-boton); --borde-foto: var(--pri);
  background-color: var(--pri-tinte);
  background-image: linear-gradient(rgba(231, 49, 58, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(231, 49, 58, .07) 1px, transparent 1px);
  background-size: 22px 22px; }
.etapa--pre { --osc: var(--sec-osc); --texto: var(--sec-titulo); --color: var(--sec); --enlace: var(--sec); --borde-foto: var(--sec);
  background-color: var(--sec-tinte);
  background-image: linear-gradient(rgba(36, 88, 172, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(36, 88, 172, .06) 1px, transparent 1px);
  background-size: 24px 24px; }
/* la cinta sigue bajando por la izquierda, con el color de cada etapa */
.etapa::before {
  content: ""; position: absolute; left: calc(-1 * var(--riel)); width: 6px; top: -12px; bottom: 0;
  background: var(--color); transform-origin: 50% 0;
}
.etapa--ini::before { top: 0; border-radius: 3px 3px 0 0; }
.etapa--pre::before { border-radius: 0 0 3px 3px; }
.anima-cinta .etapa::before { transform: scaleY(0); transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.anima-cinta .etapa.crece::before { transform: scaleY(1); }

.etapa__cabeza { display: flex; align-items: center; gap: 14px; }
.etapa__foto {
  position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--borde-foto);
  overflow: hidden; background: var(--tinte, #fff);
}
.etapa__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
/* recorte sobre las caras (pag_inicio.py, CARAS): la foto 4:3 más grande que el círculo de 88 px, corrida */
.etapa__foto--cara img {
  position: absolute; left: var(--x); top: var(--y); width: calc(var(--alto) * 4 / 3); height: var(--alto);
  max-width: none; aspect-ratio: auto; object-fit: fill;
}
.etapa__pregunta { font: 700 12.5px/1.3 var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--enlace); text-wrap: balance; }
.etapa--ini .etapa__pregunta { color: var(--ini-enlace); }
.etapa h3 { margin-top: 4px; font: 800 20px/1.2 var(--fuente); letter-spacing: -.01em; color: var(--osc); text-wrap: balance; }
/* el tramo va debajo del nombre: el título nunca se corta en un «·» colgando */
.etapa__rango { display: block; margin-top: 2px; font: 700 15px/1.3 var(--fuente); letter-spacing: 0; color: var(--enlace); }
.etapa__lista { list-style: none; display: grid; gap: 8px; margin-top: 14px; }
.etapa__lista li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: var(--texto); }
.etapa__vineta { width: 16px; height: 16px; margin-top: 4px; fill: var(--osc); stroke: none; }
.etapa__fuerte { font-weight: 600; }
.etapa__recuadro {
  display: block !important; padding: 10px 14px; border-left: 4px solid var(--sec-osc); border-radius: 0 12px 12px 0;
  background: #fff; font-weight: 600; color: var(--sec-osc) !important;
}
.etapa__despues {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed currentColor; font: 700 13px/1.45 var(--fuente);
  color: var(--enlace);
}
.etapa--ini .etapa__despues { color: var(--ini-enlace); }
.etapa__meta { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 600 14.5px/1.45 var(--fuente); color: var(--sec-titulo); }
.etapa__bandera { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sec-osc); display: grid; place-content: center; }
.etapa__bandera .ic { width: 18px; height: 18px; color: var(--sec-acento); fill: var(--sec-acento); }
.etapa__acciones { display: grid; gap: 2px; margin-top: 14px; justify-items: start; }
.etapa__acciones .etapa__wa { margin-bottom: 4px; }
.etapa__wa { width: 100%; min-height: 48px; font-size: 15.5px; }
/* el ícono va dentro del texto: si la etiqueta se parte en dos líneas (a 320 px, o en las columnas de 900 a 1099 px),
   queda junto a la primera palabra y no suelto en el borde del botón. Lo mismo en los botones chicos de la pensión y
   de la pregunta 8. */
.etapa__wa, .visita__pension-boton, .faq .btn-chico { display: block; line-height: 1.25; text-align: center; text-wrap: balance; }
.faq .btn-chico { display: inline-block; }
.etapa__wa { padding: 13px 16px; }
.visita__pension-boton, .faq .btn-chico { padding-block: 11px; }
.etapa__wa .ic, .visita__pension-boton .ic, .faq .btn-chico .ic { display: inline-block; vertical-align: -5px; margin-right: 8px; }
.etapa__wa > span, .visita__pension-boton > span, .faq .btn-chico > span { display: inline; }
.etapa .wa-texto { font-size: 15px; }
.etapa__ver {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 700 15px/1.2 var(--fuente);
  color: var(--enlace); text-underline-offset: 3px;
}
.etapa--ini .etapa__ver { color: var(--ini-enlace); }
.etapa :focus-visible { outline-color: var(--osc); }
.camino__cinta { display: none; }

/* ---------------------------------------------------------------- para conversarlo en casa */
.en-casa { background: var(--tinta); color: var(--sobre-osc-suave); }
.en-casa .envoltura { position: relative; }
.en-casa__grid { display: grid; gap: 18px; }
.en-casa__grid > * { padding-left: var(--riel); }
/* la cinta pasa por la banda en un hilo claro y toma el color de cada nivel justo al lado de su número (2, 3 y 4) */
.en-casa__grid::before {
  content: ""; position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); top: 4px; bottom: 4px; width: 6px;
  border-radius: 3px; background: rgba(255, 255, 255, .16);
}
.en-casa__cabeza h2 { margin-bottom: 0; }
.en-casa__texto { font-size: 16.5px; line-height: 1.55; max-width: 46ch; }
.en-casa__lista ol { list-style: none; display: grid; gap: 14px; }
.en-casa__lista li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: 15.5px; line-height: 1.5; }
.en-casa__lista li:nth-child(n+2):nth-child(-n+4)::before {
  content: ""; position: absolute; left: calc(-1 * var(--riel)); top: -7px; bottom: -7px; width: 6px; background: var(--seg);
}
.en-casa__lista li:nth-child(2) { --seg: var(--ini); }
.en-casa__lista li:nth-child(3) { --seg: var(--pri); }
.en-casa__lista li:nth-child(4) { --seg: var(--sec); }
.en-casa__num {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-content: center; margin-top: -1px;
  background: #fff; color: var(--tinta); font: 800 14px/1 var(--fuente); font-variant-numeric: tabular-nums;
}
.en-casa__lista li:nth-child(2) .en-casa__num { background: var(--ini); color: var(--ini-osc); }
.en-casa__lista li:nth-child(3) .en-casa__num { background: var(--pri-boton); color: #fff; }
.en-casa__lista li:nth-child(4) .en-casa__num { background: var(--sec); color: #fff; }
.en-casa__busca {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 14px; border-radius: 12px;
  background: var(--ini); color: var(--ini-osc); font: 700 15px/1.4 var(--fuente);
}
.en-casa__busca[hidden] { display: none; }
.en-casa__busca-ic { flex: none; width: 20px; height: 20px; fill: var(--ini-osc); stroke: none; }
.en-casa__botones { display: grid; gap: 12px; }
.en-casa__botones .btn { width: 100%; min-height: 48px; padding: 8px 18px; font-size: 15.5px; line-height: 1.25; }
.en-casa__reenviar { background: transparent; color: #fff; border-color: #fff; }
.en-casa__reenviar:hover { background: rgba(255, 255, 255, .1); }
.en-casa__reenviar .ic { color: var(--ini); }

/* ---------------------------------------------------------------- así es su cita */
.visita__pasos li::before { font-variant-numeric: tabular-nums; }
/* en el celular, los pasos son un camino de tres paradas (sin tarjetas); en la computadora, tres tarjetas */
@media (max-width: 899px) {
  .visita__pasos { gap: 20px; }
  .visita__pasos li { padding: 0 0 0 52px; background: none; border: 0; border-radius: 0; }
  .visita__pasos li::before { left: 0; top: -7px; }
  .visita__pasos li:not(:last-child)::after {
    content: ""; position: absolute; left: 18px; top: 35px; bottom: -9px; width: 2px; border-radius: 2px; background: var(--hilo);
  }
}
.visita__pasos li:nth-child(1)::before { background: var(--ini); color: var(--ini-osc); }
.visita__pasos li:nth-child(2)::before { background: var(--pri-boton); color: #fff; }
.visita__pasos li:nth-child(3)::before { background: var(--sec); color: #fff; }
.visita__cita { margin-top: 18px; }
.visita .lugar { margin-top: 0; }
/* «Cómo llegar» salta de línea: va alineado con el texto de la dirección (24 px del pin y 8 de separación) */
.visita .lugar a { margin-left: 32px; }
.visita__nota {
  padding: 12px 14px; border-left: 4px solid var(--sec); border-radius: 0 12px 12px 0; background: var(--sec-tinte);
  color: var(--sec-osc); font-size: 15px; line-height: 1.5;
}
.visita__pension {
  display: grid; gap: 10px; padding: 16px 16px 18px;
  background: #fff; border-left: 4px solid var(--tinta); border-radius: 0 16px 16px 0; box-shadow: var(--sombra-chica);
}
.visita__pension-cabeza { display: flex; align-items: center; gap: 12px; }
.visita__pension-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--fondo-2); display: grid; place-content: center; }
.visita__pension-ic .ic { width: 22px; height: 22px; }
.visita__pension h3 { font-size: 17.5px; line-height: 1.3; }
.visita__pension p { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: var(--suave); }
/* botón verde chico (spec): el único verde lleno y ancho de la sección es «Quiero agendar mi visita» */
.cita__lado .visita__pension-boton { justify-self: start; width: auto; min-height: 44px; padding-inline: 18px; font-size: 15px; }
.cita__lado .visita__boton { justify-self: stretch; width: 100%; }
.visita .plegable__boton { border-color: var(--tinta); color: var(--tinta); font-size: 15.5px; line-height: 1.3; padding-block: 6px; }
/* sin palabras sueltas en la última línea de los párrafos cortos (Chrome de Android lo aplica; los demás lo ignoran) */
.t-inicio .seccion p, .etapa__lista li, .visita__nota, .sin-js__nota { text-wrap: pretty; }

/* ---------------------------------------------------------------- preguntas frecuentes */
.preguntas { background: #fff; }
.preguntas__columna { max-width: calc(760px + 32px); }
.faq__enlace {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--tinta);
  text-decoration: underline; text-underline-offset: 3px;
}
.faq__enlace .ic { width: 18px; height: 18px; }
.preguntas .faq a:not(.btn) { color: var(--tinta); font-weight: 600; }
.preguntas .faq .btn { margin-top: 2px; }
.preguntas .faq summary { text-wrap: balance; }

/* ---------------------------------------------------------------- cierre: la cinta termina en el corazón */
.cierre-banda { background: var(--fondo-2); padding: 40px 0 56px; }
.t-inicio .cierre {
  position: relative; overflow: hidden; margin: 0; padding: 32px 20px 26px; border-radius: 20px;
  background: #fff; color: var(--tinta); border: 1px solid var(--borde); box-shadow: var(--sombra);
  text-align: center; justify-items: center;
}
.t-inicio .cierre::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); }
.t-inicio .cierre h2 { color: var(--tinta); }
.t-inicio .cierre p { color: var(--suave); margin-inline: auto; }
.t-inicio .cierre__acciones { justify-items: center; width: 100%; gap: 14px; }
.t-inicio .cierre :focus-visible { outline-color: var(--foco); }
.cierre__boton { display: grid; justify-items: center; gap: 12px; width: 100%; }
.cierre__cinta { display: flex; align-items: center; width: 132px; }
.cierre__cinta::before { content: ""; flex: 1; height: 6px; border-radius: 3px 0 0 3px; background: var(--cinta); }
.cierre__corazon { width: 20px; height: 20px; margin-left: 4px; color: var(--pri); stroke-width: 2.4; }
.cierre__cinta.late .cierre__corazon { animation: late .6s ease-in-out 1; transform-origin: 50% 60%; }
@keyframes late { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.cierre__wa { width: 100%; }
.t-inicio .cierre__compartir { color: var(--tinta); min-height: 44px; align-items: center; text-align: left; }
.t-inicio .cierre__compartir .ic { color: var(--pri-boton); margin-top: 0; }

/* #nivel y #varios: solo sin JavaScript (con JavaScript los reemplazan las hojas) */
.sin-js { grid-column: 1 / -1; width: 100%; text-align: left; padding-top: 20px; border-top: 1px solid var(--borde); }
body.con-js .sin-js { display: none; }
.sin-js h3 { font-size: 18px; margin-bottom: 12px; color: var(--tinta); }
.sin-js__nota { margin-top: 10px; font-size: 14px; }
.niveles-wa { display: grid; gap: 10px; }
.nivel-wa {
  position: relative; overflow: hidden; justify-content: flex-start; min-height: 48px; padding: 0 16px 0 24px;
  border-radius: 14px; font-size: 15.5px; text-align: left;
}
.nivel-wa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--franja); }
.nivel-wa--ini { --franja: var(--ini); }
.nivel-wa--pri { --franja: var(--pri); }
.nivel-wa--pre { --franja: var(--sec); }
.nivel-wa--bil { --franja: linear-gradient(180deg, var(--ini) 0 50%, var(--pri) 50% 100%); }

/* ---------------------------------------------------------------- pie */
.pie--inicio { position: relative; background: var(--tinta); }
.pie--inicio::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); }
.pie--inicio .marca--texto .marca__texto { font-size: 14px; }
.pie--inicio .marca__texto span { color: #fff; }
.pie__logos { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.pie--inicio ul { gap: 4px; }
.pie--inicio ul a, .pie--inicio .marca--texto, .pie__pre { min-height: 44px; }
.pie__logo-bil { height: 58px; width: auto; }
/* celular: los 80 px que deja libre la barra fija van dentro del pie (oscuros) y no en el <body> (una franja blanca
   bajo el pie). La barra se esconde sobre el pie, pero sin IntersectionObserver queda siempre a la vista. */
@media (max-width: 899px) {
  body.t-inicio.con-barra { padding-bottom: 0; }
  body.t-inicio.con-barra .pie--inicio { padding-bottom: calc(36px + 80px + env(safe-area-inset-bottom, 0px)); }
}
.pie__pre { gap: 0; }
.pie__pre .marca__texto { font-size: 10.5px; color: #fff; }
.pie__pre .marca__texto span { color: var(--sec-acento); }
.pie__pre .marca__pre { height: 38px; margin-left: 4px; }
.pie--inicio .pie__firma {
  position: relative; flex-direction: column; justify-content: center; text-align: center; gap: 6px;
  margin-top: 34px; padding: 26px 0 0; border-radius: 0; background: none;
}
.pie--inicio .pie__firma::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 132px; margin-left: -66px; height: 3px; border-radius: 2px;
  background: var(--cinta);
}

/* ---------------------------------------------------------------- barra fija del celular */
body:not(.con-js) .barra-fija { display: none; }
.barra__grado { gap: 8px; line-height: 1.1; }
/* sin grado dice «Elegir grado»; con un grado, el corazón en el color de su nivel y «3 años · Cambiar» */
.barra__corazon { display: none; flex: none; width: 22px; height: 22px; fill: var(--barra-corazon, var(--pri-boton)); stroke: none; }
body[data-grado-nivel] .barra__corazon { display: block; }
body[data-grado-nivel="inicial"] .barra__corazon { --barra-corazon: var(--ini); stroke: var(--ini-osc); stroke-width: 2.2; paint-order: stroke fill; }
body[data-grado-nivel="primaria"] .barra__corazon { --barra-corazon: var(--pri-boton); }
body[data-grado-nivel="pre"] .barra__corazon { --barra-corazon: var(--sec); }
.barra__grado-texto { display: grid; justify-items: start; text-align: left; }
.barra__g { font-weight: 800; font-size: 15px; }
.barra__c { font-weight: 600; font-size: 12.5px; color: var(--suave); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- hojas */
@media (max-width: 639px) {
  .t-inicio .hoja[open] .hoja__caja { animation: inicio-hoja .22s ease-out; }
}
@keyframes inicio-hoja { from { transform: translateY(100%); } to { transform: none; } }
.hoja-nivel__botones { display: grid; gap: 10px; }
.hoja-nivel__boton { min-height: 56px; font-size: 16.5px; }
.hoja__mas {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 13.5px/1.3 var(--fuente);
  color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; justify-self: start;
}
.hoja__mas .ic { width: 18px; height: 18px; }

/* hoja de varios hijos: su propio selector (la página de atrás queda inerte) */
.varios__instruccion { font-size: 15px; line-height: 1.5; color: var(--suave); text-wrap: pretty; }
.varios__selector { display: grid; gap: 12px; }
.varios__grupo { --osc: var(--ini-osc); --relleno: var(--ini-osc); --relleno-texto: var(--ini); }
.varios__grupo--pri { --osc: var(--pri-osc); --relleno: var(--pri-boton); --relleno-texto: #fff; }
.varios__grupo--pre { --osc: var(--sec-osc); --relleno: var(--sec-osc); --relleno-texto: #fff; }
.varios__nombre { margin-bottom: 6px; font: 700 12px/1.3 var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--osc); }
.varios__botones { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* inicial: el aula y su edad debajo; en el celular, de 2 en 2 para que «Pre-Kinder» no se salga (Lucero, 21 oct) */
.varios__grupo--ini .varios__grado { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 6px 2px; gap: 2px; white-space: nowrap; }
.varios__edad { font-size: 11.5px; font-weight: 600; opacity: .8; }
@media (max-width: 599px) { .varios__grupo--ini .varios__botones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.varios__grupo--pri .varios__botones { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.varios__grupo--pre .varios__botones { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.varios__grado {
  min-height: 44px; padding: 0 2px; border-radius: 12px; border: 2px solid var(--osc); background: #fff; color: var(--osc);
  font: 700 14.5px/1.1 var(--fuente); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.varios__grado[aria-pressed="true"] { background: var(--relleno); border-color: var(--relleno); color: var(--relleno-texto); }
.varios__grado:disabled { opacity: .4; cursor: not-allowed; }
.varios__grado:focus-visible { outline-color: var(--tinta); }
.varios__hijos { list-style: none; display: grid; gap: 8px; }
.varios__hijos:empty { display: none; }
.varios__hijos li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 4px 6px;
  border: 1px solid var(--borde); border-radius: 14px;
}
.varios__hijos .pildora { min-height: 30px; font-size: 14px; }
.varios__hijos .corazon-fila { width: 16px; height: 16px; margin-right: 6px; fill: currentColor; stroke: none; }
.varios__quitar {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta);
  font: 600 14px/1 var(--fuente); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.varios__quitar:hover { background: var(--fondo-2); }
.varios__vista { display: grid; gap: 8px; }
.varios__vista[hidden] { display: none; }
.varios__rotulo { font-size: 12px; color: var(--suave); }
.varios__globo {
  padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--wa-claro); border: 1px solid var(--wa-claro-borde);
  color: var(--tinta); font-size: 15px; line-height: 1.5;
}
/* «Enviar por WhatsApp» se queda abajo de la hoja mientras se baja por ella: con 3 o 4 hijos, o en un iPhone
   (664 px a la vista), no queda fuera de la pantalla */
.varios__pie {
  position: sticky; bottom: 0; z-index: 2; margin-top: -6px; padding-top: 12px; background: #fff;
  /* la segunda sombra, blanca y corrida hacia abajo, tapa el relleno inferior de la hoja: lo que se desliza
     por detrás no asoma debajo del botón */
  box-shadow: 0 -14px 12px -12px rgba(30, 24, 20, .35), 0 56px 0 0 #fff;
}
.varios__pie[hidden] { display: none; }

/* ================================================================ computadora */
@media (min-width: 900px) {
  /* hero */
  .hero { padding: 54px 0 60px; }
  .hero__diagonales { width: 210px; height: 170px; }
  .hero__diagonales span { width: 320px; height: 6px; }
  .hero__diagonales span:nth-child(1) { transform: translate(92px, 0) rotate(40deg); }
  .hero__diagonales span:nth-child(2) { transform: translate(112px, 0) rotate(40deg); }
  .hero__diagonales span:nth-child(3) { transform: translate(132px, 0) rotate(40deg); }
  .hero__texto { padding-left: 0; margin: 0 auto 46px; text-align: center; max-width: 980px; }
  .hero__texto::before { display: none; }
  .hero__etiqueta { flex-direction: row; justify-content: center; align-items: center; font-size: 12.5px; }
  .hero__corazon { position: static; margin-right: 9px; width: 15px; height: 15px; }
  .hero__sep { display: inline; white-space: pre; }
  .hero h1 { margin: 14px 0 14px; font-size: 48px; line-height: 1.08; letter-spacing: -.025em; }
  .hero__bajada { margin: 0 auto; max-width: 720px; font-size: 17.5px; }
  .solo-pc { display: inline; }

  /* la cinta horizontal con las 15 paradas */
  .cinta-pc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .cinta-pc__tramo--ini { --osc: var(--ini-osc); --color: var(--ini); --tinte: var(--ini-tinte); --relleno: var(--ini-osc); --relleno-texto: var(--ini); }
  .cinta-pc__tramo--pri { --osc: var(--pri-osc); --color: var(--pri); --tinte: var(--pri-tinte); --relleno: var(--pri-boton); --relleno-texto: #fff; }
  .cinta-pc__tramo--pre { --osc: var(--sec-osc); --color: var(--sec); --tinte: var(--sec-tinte); --relleno: var(--sec-acento); --relleno-texto: var(--sec-osc); }
  .cinta-pc__nombre {
    display: flex; align-items: center; gap: 9px; margin-bottom: 18px; font: 700 14.5px/1.3 var(--fuente); color: var(--osc);
  }
  .cinta-pc__nombre::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--color); flex: none; }
  .cinta-pc__paradas { position: relative; list-style: none; display: grid; align-items: start; }
  .cinta-pc__tramo--ini .cinta-pc__paradas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cinta-pc__tramo--pri .cinta-pc__paradas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cinta-pc__tramo--pre .cinta-pc__paradas { grid-template-columns: repeat(5, minmax(0, 1fr)) 92px; }
  .cinta-pc__paradas::before {
    content: ""; position: absolute; z-index: 0; top: 12px; height: 16px; left: -14px; right: -14px; background: var(--color);
  }
  .cinta-pc__tramo--ini .cinta-pc__paradas::before { left: 0; border-radius: 8px 0 0 8px; }
  .cinta-pc__tramo--pre .cinta-pc__paradas::before { right: 46px; }
  .cinta-pc__paradas li { position: relative; z-index: 1; display: flex; justify-content: center; min-width: 0; }

  .cinta-pc .parada {
    flex-direction: column; justify-content: flex-start; gap: 9px; min-height: 0; padding: 0 4px 4px; border: 0;
    border-radius: 12px; background: transparent; color: var(--osc); font-size: 14.5px;
  }
  /* cada parada es un botón redondo relleno con el tinte de su nivel (vacías parecían un indicador de avance) */
  .cinta-pc .parada::before {
    content: ""; display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--tinte);
    border: 3px solid var(--osc); box-sizing: border-box; transition: background-color .15s ease, transform .15s ease;
  }
  .cinta-pc .parada:hover { background: transparent; }
  .cinta-pc .parada:hover::before { background: #fff; transform: scale(1.1); }
  .cinta-pc .parada:hover .grado__nombre { text-decoration: underline; text-underline-offset: 3px; }
  .cinta-pc .parada .grado__nombre { padding: 3px 8px; border-radius: 999px; transition: background-color .15s ease, color .15s ease; }
  .cinta-pc .parada.es-elegido::before, .cinta-pc .parada.es-hermano::before { background: var(--relleno); }
  .cinta-pc__tramo--pre .parada.es-elegido::before, .cinta-pc__tramo--pre .parada.es-hermano::before { border-color: var(--sec-osc); }
  .cinta-pc .parada.es-elegido .grado__nombre, .cinta-pc .parada.es-hermano .grado__nombre { background: var(--relleno); color: var(--relleno-texto); }
  .cinta-pc .parada__corazon { top: -22px; fill: var(--osc); }
  .cinta-pc .parada__nuevo { top: -12px; box-shadow: 0 0 0 2px var(--fondo-2); }
  .cinta-pc :focus-visible { outline-color: var(--osc); }
  .cinta-pc__meta { flex-direction: column; align-items: center; gap: 8px; }
  .cinta-pc__bandera {
    width: 40px; height: 40px; border-radius: 50%; background: var(--sec-osc); display: grid; place-content: center;
  }
  .cinta-pc__bandera .ic { width: 20px; height: 20px; color: var(--sec-acento); fill: var(--sec-acento); }
  .cinta-pc__meta-texto { font: 700 13px/1.25 var(--fuente); color: var(--sec-osc); text-align: center; }

  /* las tres tarjetas */
  .puertas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-left: 0; margin-top: 44px; align-items: stretch; }
  .puerta {
    display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 22px; clip-path: none;
    box-shadow: 0 18px 36px -26px rgba(30, 24, 20, .5); transition: transform .2s ease, box-shadow .2s ease;
  }
  .puerta--ini::before, .puerta--pri::before { display: none; }
  main[data-nivel="inicial"] .puerta--ini, body[data-grado-nivel="inicial"] .puerta--ini { box-shadow: 0 0 0 2px var(--ini), 0 18px 36px -26px rgba(30, 24, 20, .5); }
  main[data-nivel="primaria"] .puerta--pri, body[data-grado-nivel="primaria"] .puerta--pri { box-shadow: 0 0 0 2px var(--pri), 0 18px 36px -26px rgba(30, 24, 20, .5); }
  .paradas { display: none; }
  .puerta__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tinte); }
  .puerta--pre .puerta__foto { background: #0F2752; }
  .puerta__foto img { width: 100%; height: 100%; object-fit: cover; }
  /* HJ PRE: más cerca de los tres alumnos y con menos carpetas vacías adelante */
  .puerta__banda {
    display: flex; align-items: center; min-height: 56px; margin: 0; padding: 0 22px;
    border-bottom: 1px solid var(--banda-linea, rgba(0, 0, 0, .08));
  }
  .puerta__banda--texto { font: 800 15px/1 var(--fuente); letter-spacing: .04em; text-transform: uppercase; color: var(--ini-osc); --banda-linea: var(--ini-borde); }
  .puerta__banda--logo { --banda-linea: var(--pri-borde); }
  /* el logo es casi cuadrado: a 50 px de alto pesa como las otras dos bandas (que siguen en 56 px, como pide la spec) */
  .puerta__banda--logo img { height: 50px; width: auto; }
  .puerta__banda--pre { justify-content: space-between; margin: 0; --banda-linea: rgba(255, 255, 255, .16); }
  .puerta__marca .marca__texto { font-size: 11px; }
  .puerta__marca .marca__pre { height: 38px; }
  .puerta__titulo { padding: 18px 22px 0; }
  .puerta__titulo a { min-height: 36px; font-size: 16px; }
  .puerta__flecha { display: none; }
  .puerta__linea { padding: 0 22px; margin-top: 10px; font-size: 15px; }
  .puerta--pri .puerta__linea { font-size: 15px; }
  .puerta__frase { padding: 0 22px; margin-top: 12px; font-size: 16px; }
  .puerta__nota { padding: 0 22px; font-size: 14px; }
  .puerta__ver {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: auto 22px 0; padding: 14px 0 20px;
    font: 700 15.5px/1.2 var(--fuente); color: var(--flecha); text-decoration: none;
  }
  .puerta--ini .puerta__ver { color: var(--ini-enlace); }
  .puerta__ver:hover { text-decoration: underline; text-underline-offset: 3px; }
  .puerta__ver span { font-size: 22px; line-height: 1; margin-top: -3px; }
  .puerta__linea + .puerta__ver, .puerta__nota + .puerta__ver { margin-top: auto; }
  /* toda la tarjeta lleva a su nivel, también la foto y la banda (Franz, 26 oct): el enlace del título se estira sobre
     la tarjeta, y «Ver …» queda encima con su propio enlace */
  .puerta__titulo a { position: static; }
  .puerta__titulo a::after { top: 0; bottom: 0; z-index: 1; }
  .puerta__ver { position: relative; z-index: 2; }

  .hero__final { padding-left: 0; margin-top: 26px; text-align: center; }
  .hero__varios { width: auto; padding: 8px 26px; font-size: 15.5px; }
  /* en la computadora entra en una sola línea */
  .hero__varios .lineas { display: block; }
  .hero__varios .lineas > span { display: inline; }

  /* camino: el texto de cada etapa va junto arriba y solo los botones se alinean al pie (sin huecos en medio) */
  .camino__cabeza { padding-left: 0; text-align: center; margin-inline: auto; }
  .camino__cabeza .seccion__intro { margin-inline: auto; }
  /* centrada, en dos líneas parejas y no con «cambiar de colegio.» sola abajo */
  .t-inicio .camino__cabeza .seccion__intro { text-wrap: balance; }
  .etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding-left: 0; align-items: stretch; }
  .etapa { border-top: 8px solid var(--color); border-radius: 6px 6px 22px 22px; padding: 26px 24px 22px; }
  .etapa::before { display: none; }
  /* sin foto en computadora (spec). No va con display: none: así la foto, que es «lazy», carga su respaldo de 1 px
     (la de 480 px es solo para menos de 900 px) y no queda en la página una imagen que nunca carga */
  .etapa__foto {
    position: absolute; width: 1px; height: 1px; border: 0; overflow: hidden; clip-path: inset(50%); visibility: hidden;
  }
  .etapa h3 { font-size: 21px; }
  .etapa__acciones { margin-top: auto; padding-top: 18px; }
  /* el «Después:» (o la bandera de HJ PRE) baja con los botones: el espacio que sobra en las tarjetas más cortas
     queda arriba de la línea punteada y no entre ella y su botón */
  .etapa__lista { margin-bottom: 16px; }
  .etapa__despues, .etapa__meta { margin-top: auto; }
  .etapa__despues + .etapa__acciones, .etapa__meta + .etapa__acciones { margin-top: 0; }
  /* la cinta delgada cambia de color justo al medio del espacio entre columnas (los dos gap de 26 px de .etapas) */
  .camino__cinta {
    display: block; position: relative; height: 6px; margin: 34px 0 0; border-radius: 3px 0 0 3px;
    background: linear-gradient(90deg, var(--ini) 0 calc((100% - 52px) / 3 + 13px),
      var(--pri) 0 calc((100% - 52px) * 2 / 3 + 39px), var(--sec) 0);
  }
  .camino__bandera {
    position: absolute; right: 0; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
    background: var(--sec-osc); display: grid; place-content: center;
  }
  .camino__bandera .ic { width: 18px; height: 18px; color: var(--sec-acento); fill: var(--sec-acento); }

  /* en casa */
  .en-casa__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: 72px; row-gap: 22px; align-items: start;
    grid-template-areas: "cabeza cabeza" "lista texto" "lista botones"; grid-template-rows: auto auto 1fr;
  }
  .en-casa__grid > * { padding-left: 34px; }
  .en-casa__texto, .en-casa__botones { padding-left: 0; }
  .en-casa__cabeza { grid-area: cabeza; }
  .en-casa__texto { grid-area: texto; font-size: 18px; margin-top: 4px; }
  .en-casa__lista { grid-area: lista; }
  .en-casa__lista li:nth-child(n+2):nth-child(-n+4)::before { left: -34px; }
  .en-casa__botones { grid-area: botones; justify-items: stretch; max-width: 460px; }
  .en-casa__botones .btn { min-height: 52px; }
  .en-casa__lista li { font-size: 16px; }

  /* visita: la columna de la izquierda acompaña al formulario mientras se baja (si no, queda media pantalla vacía) */
  .visita__cita { margin-top: 30px; }
  .visita .cita__lado { position: sticky; top: 96px; align-self: start; }
  .cita__lado .visita__pension-boton { padding-inline: 22px; }

  /* cierre */
  .t-inicio .cierre { grid-template-columns: minmax(0, 1fr) auto; text-align: left; justify-items: stretch; padding: 38px 40px 34px; gap: 22px 40px; }
  .t-inicio .cierre p { margin-inline: 0; }
  .t-inicio .cierre__acciones { justify-items: end; width: auto; }
  .cierre__boton { display: flex; align-items: center; gap: 0; width: auto; }
  .cierre__cinta { width: 150px; margin-right: 14px; }
  .cierre__wa { width: auto; }
  .niveles-wa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #varios .niveles-wa { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
}

/* 900 a 1199 px: el sello de HJ PRE y «Abre en 2027» siguen en una sola fila */
@media (min-width: 900px) and (max-width: 1199px) {
  .puerta__banda { padding: 0 18px; }
  .puerta__marca .marca__texto { font-size: 9.5px; }
  .puerta__marca .marca__pre { height: 30px; }
  .puerta__abre { padding: 0 9px; font-size: 11.5px; }
  .puerta__titulo { padding: 16px 18px 0; }
  .puerta__linea, .puerta__frase, .puerta__nota { padding: 0 18px; }
  .puerta__ver { margin: auto 18px 0; }
}
/* 900 a 1023 px: la cabecera entra en una fila (la marca y cada enlace sin partirse) y la banda de HJ PRE también */
/* 900 a 1099 px: cada tramo de la cinta mide menos de 340 px y los 5 grados de HJ PRE quedaban pegados. Paradas de
   34 px, bandera más angosta y 20 px entre columnas (en la cinta y en las tarjetas, para que sigan alineadas). */
@media (min-width: 900px) and (max-width: 1099px) {
  .cinta-pc, .puertas { column-gap: 20px; }
  .cinta-pc__paradas::before { top: 9px; left: -10px; right: -10px; }
  .cinta-pc__tramo--pre .cinta-pc__paradas { grid-template-columns: repeat(5, minmax(0, 1fr)) 78px; }
  .cinta-pc__tramo--pre .cinta-pc__paradas::before { right: 39px; }
  .cinta-pc .parada::before, .cinta-pc__bandera { width: 34px; height: 34px; }
  .cinta-pc .parada { font-size: 14px; }
  .cinta-pc__meta-texto { font-size: 12px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .cabecera__menu { gap: 16px; }
  .cabecera__menu a { font-size: 14.5px; }
  .cabecera__menu .punto { margin-right: 6px; }
  .puerta__banda--pre { flex-wrap: nowrap; gap: 8px; padding-inline: 14px; }
  .puerta__abre { padding: 0 8px; font-size: 11px; }
}

/* ratón: la tarjeta sube 2 px y el bloque toma el tinte de su nivel; la tarjeta pasa a blanco con un borde de su
   color, para no perderse en ese tinte */
@media (min-width: 900px) and (pointer: fine) {
  .puerta:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -26px rgba(30, 24, 20, .55); }
  .puerta:hover .puerta__ver { text-decoration: underline; text-underline-offset: 3px; }
  .hero:has(.puerta--ini:hover), .hero:has(.cinta-pc__tramo--ini:hover) { background-color: var(--ini-tinte); }
  .hero:has(.puerta--pri:hover), .hero:has(.cinta-pc__tramo--pri:hover) { background-color: var(--pri-tinte); }
  .hero:has(.puerta--pre:hover), .hero:has(.cinta-pc__tramo--pre:hover) { background-color: var(--sec-tinte); }
  .puerta--ini:hover, .hero:has(.cinta-pc__tramo--ini:hover) .puerta--ini {
    background-color: #fff; box-shadow: 0 0 0 2px var(--ini), 0 24px 40px -26px rgba(30, 24, 20, .55);
  }
  .puerta--pri:hover, .hero:has(.cinta-pc__tramo--pri:hover) .puerta--pri {
    background-color: #fff; box-shadow: 0 0 0 2px var(--pri), 0 24px 40px -26px rgba(30, 24, 20, .55);
  }
  /* pie: los enlaces de «Nuestros niveles» con el mismo ritmo que los de «Contacto» */
  .pie--inicio ul a { min-height: 32px; }
}