/* ===========================================================================
   SOPHIA STEM · responsive.css
   Se carga la última en todas las páginas. Reúne lo que cambia según el
   tamaño de pantalla y que no es de un solo componente, medido con una
   auditoría automática en ocho anchos (320, 375, 414, 768, 1024, 1366, 1440
   y 1920 px):

     · teléfono pequeño   ≤ 359 px
     · teléfono           360–479 px
     · teléfono grande    480–767 px
     · tablet vertical    768–1023 px
     · tablet horizontal  1024–1279 px
     · laptop             1280–1599 px
     · monitor grande     ≥ 1600 px

   Reglas que se respetan en todos:
     · ningún elemento más ancho que la pantalla, aunque el desborde no se vea;
     · nada de texto por debajo de 11 px;
     · en pantallas táctiles, todo lo que se pulsa mide al menos 44 px de alto;
     · líneas de lectura de 45–75 caracteres.
   =========================================================================== */

/* ---- Base ------------------------------------------------------------------ */
/* Correos y enlaces largos se parten en lugar de empujar la caja. */
p, li, dd, figcaption, .dudas__carol p { overflow-wrap: break-word; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Etiquetas pequeñas: suelo de 11 px. */
.thumb__tag { font-size: 0.68rem; }
.nav__new { font-size: 0.66rem; }
.plan__group { font-size: 0.7rem; }
.chip { font-size: 0.72rem; }
.pase__datos dt { font-size: 0.7rem; }
.cuelga__lugar, .ficha__quien { font-size: 0.7rem; }
.modelo__c { font-size: 0.72rem; }

/* ---- Pie de página -----------------------------------------------------------
   Con una columna mínima de 240 px más las de enlaces, el pie medía 448 px y
   en cualquier teléfono se cortaba por la derecha (oculto, no se veía el
   scroll, pero los enlaces quedaban fuera). Ahora: la marca arriba a todo lo
   ancho y las columnas de enlaces en 2, 3 o junto a la marca según el ancho. */
.footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
.footer__marca { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .footer__grid { grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-10); }
  .footer__marca { grid-column: auto; }
}
@media (max-width: 759px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .footer__bottom p { margin: 0; }
}

/* ---- Cabeceras de página --------------------------------------------------- */
/* minmax(0, 1fr): la rejilla no puede crecer por un lienzo 3D de ancho fijo
   (pasaba en la 404). */
@media (max-width: 860px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
}
.scene canvas { max-width: 100%; }

/* ---- Pantallas táctiles: áreas de toque ------------------------------------- */
@media (pointer: coarse), (max-width: 1023px) {
  .logo { min-height: 44px; align-items: center; }
  .breadcrumb a { display: inline-block; padding-block: 0.7rem; margin-block: -0.5rem; }
  .resultados__mas a, .recorte__link, .enlace-txt { display: inline-flex; min-height: 44px; align-items: center; }
  .footer__list a { display: inline-block; padding-block: 0.45rem; }
  .footer__list li { margin-bottom: 0; }
  .social a { width: 44px; height: 44px; }
  .cinta a { display: inline-block; padding-block: 0.4rem; }
  .alumno__ver, .filtros button { min-height: 44px; }
  .accordion summary { min-height: 56px; }
  .plan__pick { min-height: 44px; }
  .medios__lista a { display: inline-block; padding-block: 0.5rem; }
}

/* ---- Teléfono pequeño (≤ 359 px) -----------------------------------------
   A 320 px cada píxel cuenta: menos margen lateral, titulares algo menores y
   los botones de acción a todo el ancho. */
@media (max-width: 359px) {
  :root { --gutter: 1rem; }
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.65rem; }
  .hero__claim { font-size: 1.7rem; }
  .vhero .claim { font-size: 1.95rem; }
  .cluster > .btn { width: 100%; justify-content: center; }
  .btn--lg { padding: 0.95em 1.2em; }
}

/* ===========================================================================
   INICIO
   =========================================================================== */

/* ---- Cabecera ----------------------------------------------------------------
   Tablet vertical: el texto puede usar 2/3 del ancho y letras mayores, en vez
   de quedarse en la mitad izquierda. Monitor grande: el titular crece con la
   pantalla en lugar de quedarse en 3,2 rem perdido en 1920 px. */
@media (min-width: 600px) and (max-width: 860px) {
  .hero__copy { max-width: 34rem; }
  .hero__claim { font-size: 2.6rem; }
  .hero__lead { font-size: 1.15rem; }
}
@media (min-width: 1600px) {
  .hero__claim { font-size: 3.9rem; }
  .hero__lead { font-size: 1.35rem; max-width: 36ch; }
  .hero .btn--lg { font-size: 1.125rem; }
}

/* ---- Las cinco preguntas con foto -------------------------------------------
   Cinco en una rejilla automática dejaba 3 + 2 con hueco en tablet y cinco
   fotos altísimas en columna en móvil. Ahora:
     móvil      → 2 columnas, la quinta a lo ancho
     tablet     → 2 arriba y 3 abajo (rejilla de 6)
     escritorio → las cinco en fila */
@media (max-width: 599px) {
  .questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .questions .qcard { aspect-ratio: 3 / 4; }
  .questions .qcard:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .qcard__q { inset: auto var(--sp-3) var(--sp-3) var(--sp-3); font-size: 0.95rem; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .questions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .questions .qcard { grid-column: span 2; aspect-ratio: 4 / 5; }
  .questions .qcard:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) {
  .questions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---- Cómo es una clase ------------------------------------------------------
   Tablet vertical: la primera a lo ancho y las otras dos lado a lado, en vez
   de tres fotos de 360 px apiladas. */
@media (min-width: 600px) and (max-width: 860px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles > .tile:first-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) { .tile { min-height: 240px; } }

/* ---- Carol --------------------------------------------------------------------
   En tablet vertical seguía en una columna: una foto de pantalla completa y el
   texto debajo. A dos columnas desde 600 px. */
@media (min-width: 600px) and (max-width: 780px) {
  .teacher { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}
@media (max-width: 599px) {
  .teacher__photo { aspect-ratio: 4 / 4.2; }
}

/* ---- Planes en móvil ------------------------------------------------------------
   Las cuatro tarjetas completas medían casi tres pantallas y el botón quedaba
   lejísimos del plan elegido. En móvil cada plan sin elegir se queda en su
   resumen (precio y clases) y solo el elegido despliega lo que incluye. */
@media (max-width: 767px) {
  .route .plan:not(.is-elegido) .plan__body,
  .route .plan:not(.is-elegido) .plan__delta { display: none; }
  .route .plan:not(.is-elegido) .plan__head { margin-bottom: 0; }
  .route .plan:not(.is-elegido) .plan__cadence { margin-bottom: 0; }
  .route .plan:not(.is-elegido)::after {
    content: "Toca para ver qué incluye";
    display: block;
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--link);
  }
  .route__plans { gap: var(--sp-3); }
  .route__head p { max-width: none; }
  .route__mark { width: 52px; }
  .eleccion { flex-direction: column; align-items: stretch; text-align: center; }
  .eleccion__btn { width: 100%; }
}

/* ---- Monitor grande: textos de lectura algo mayores ------------------------------ */
@media (min-width: 1600px) {
  :root { --fs-base: 1.125rem; --fs-sm: 1rem; }
  .section-head h2, .cabeza h2 { font-size: clamp(2.6rem, 2.6vw, 3.4rem); }
}
/* Botones del hero a todo el ancho en teléfonos: dos píldoras de anchos
   distintos una sobre otra se ven descuadradas. */
@media (max-width: 479px) {
  .hero .cluster > .btn, .vhero .cluster > .btn, .cta-band .cluster > .btn { width: 100%; justify-content: center; }
}

/* ===========================================================================
   CARRUSELES EN MÓVIL
   Listas de tarjetas del mismo peso (programación del mes, tipos de clase,
   módulos abiertos, historias de prensa) en una fila que se desliza con el
   dedo. La siguiente tarjeta asoma para que se entienda que hay más. En
   tablet y escritorio siguen siendo rejillas.
   =========================================================================== */
@media (max-width: 599px) {
  .mes-mods, .tiles--4, .alumnos, .etapas, .anims {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--sp-2) var(--gutter) var(--sp-5);
    scrollbar-width: none;
  }
  .mes-mods::-webkit-scrollbar, .tiles--4::-webkit-scrollbar, .alumnos::-webkit-scrollbar, .etapas::-webkit-scrollbar, .anims::-webkit-scrollbar { display: none; }
  .mes-mods > *, .tiles--4 > *, .alumnos > *, .etapas > *, .anims > * { flex: 0 0 84%; scroll-snap-align: start; }
  .etapa:hover { transform: none; }
  .tiles--4 .tile { min-height: 320px; }
  .mes-mod:hover, .alumno:hover { transform: none; }
}
/* Pista de que se desliza, solo en móvil. */
.desliza { display: none; }
@media (max-width: 599px) {
  .desliza {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-muted);
  }
}

/* ===========================================================================
   PASES DE ABORDAR (Recreacional y Académico)
   =========================================================================== */
@media (max-width: 479px) {
  .pase__cab { flex-wrap: wrap; row-gap: var(--sp-1); }
  .pase__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .pase__datos dd { font-size: var(--fs-xs); }
}
/* Tablet vertical: los dos pases lado a lado caben y se comparan mejor que
   uno debajo del otro (antes pasaban a una columna desde 900 px). */
@media (min-width: 700px) and (max-width: 900px) {
  .pases { grid-template-columns: 1fr 1fr; max-width: none; }
  .pase__talon { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (max-width: 599px) {
  .mes-mods { align-items: flex-start; }
  .finde__nota { flex-direction: column; align-items: flex-start; text-align: left; }
}
/* Los cuatro tipos de clase: en tablet, 2 × 2 sin tarjeta a lo ancho. */
@media (min-width: 600px) and (max-width: 1100px) {
  .tiles--4 > .tile:first-child { grid-column: auto; }
  .tiles--4 .tile { min-height: 300px; }
}
/* Revista del mes: a dos columnas ya desde tablet vertical. */
@media (min-width: 700px) and (max-width: 820px) {
  .revista--dos { grid-template-columns: 1.1fr 0.9fr; }
  .revista--dos .revista__foto { order: 0; aspect-ratio: auto; min-height: 100%; }
  .revista__temas { grid-template-columns: 1fr; }
}

/* ===========================================================================
   MENÚ
   El menú completo aparecía solo desde 1340 px: en laptops de 1280 y tablets
   horizontales grandes salía la hamburguesa con espacio de sobra. Ahora se ve
   desde 1180 px, más compacto entre 1180 y 1439 px. Por debajo, la
   hamburguesa abre una lista a pantalla completa con filas de 52 px.
   =========================================================================== */
@media (min-width: 1180px) and (max-width: 1439px) {
  .nav { gap: var(--sp-4); }
  .nav__links { gap: 0; }
  .nav__link { padding: 0.5rem 0.55rem; font-size: 0.86rem; }
  .nav__cta { padding: 0.65rem 0.9rem; }
  .nav__cta .sm { display: none; }
}
@media (max-width: 1179px) {
  .nav__link { min-height: 52px; display: flex; align-items: center; }
}
/* Tablet: el menú desplegado en dos columnas, no una lista de un metro. */
@media (min-width: 640px) and (max-width: 1179px) {
  .nav__links { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
  .nav__links .nav__cta--mobile { grid-column: 1 / -1; justify-self: start; }
  .nav__links:not(.is-open) { display: grid; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .nav__links li:has(> .nav__cta--mobile) { grid-column: 1 / -1; }
}

/* ===========================================================================
   ACADÉMICO
   =========================================================================== */
/* Tres módulos abiertos: en tablet, dos arriba y el tercero a lo ancho en
   horizontal (foto a un lado, texto al otro), sin hueco. En escritorio, tres. */
@media (min-width: 600px) and (max-width: 1023px) {
  .open-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .open-grid > .open-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .open-grid > .open-card:last-child:nth-child(odd) .thumb { flex: 0 0 42%; aspect-ratio: auto; }
  .open-grid > .open-card:last-child:nth-child(odd) .seats { left: var(--sp-4); right: auto; }
}
@media (min-width: 1024px) {
  .open-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Tres edades en una fila desde tablet. */
@media (min-width: 600px) {
  .etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 860px) {
  .etapa h3 { font-size: 1.2rem; }
  .etapa p { font-size: var(--fs-xs); }
}

/* ===========================================================================
   SOPHIA MATH
   =========================================================================== */
@media (max-width: 599px) {
  .soroban { max-width: 320px; margin-inline: auto; }
  .soroban__varilla { height: 200px; }
}
/* Tablet: el club a dos columnas ya desde 700 px, con el ábaco a la derecha. */
@media (min-width: 700px) and (max-width: 900px) {
  .club__grid { grid-template-columns: 1.2fr 0.8fr; }
  .soroban { order: 0; }
  .club__campos { grid-template-columns: 1fr; }
}

/* ===========================================================================
   PRENSA
   =========================================================================== */
@media (max-width: 599px) {
  /* Filtros en una fila que se desliza, no tres renglones de píldoras. */
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--sp-2); scrollbar-width: none; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros button { flex-shrink: 0; }
  /* Fichas de prensa: en dos columnas el titular queda en 4 líneas de 2
     palabras; en móvil, fichas horizontales a lo ancho con el titular entero. */
  .fichas { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ficha a { aspect-ratio: auto; min-height: 0; }
  .ficha__titular { -webkit-line-clamp: 3; }
  .ficha__ir { padding-top: var(--sp-2); }
  .diario { padding: var(--sp-4); }
  .diario__fecha { flex-direction: column; align-items: center; gap: 0.15rem; }
  .prensa-top .diario { rotate: 0deg; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ficha a { aspect-ratio: auto; min-height: 240px; }
}
@media (min-width: 1600px) {
  .fichas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ===========================================================================
   PREGUNTAS FRECUENTES
   =========================================================================== */
@media (max-width: 599px) {
  /* Temas: una fila que se desliza. Lo esencial: en 2 columnas compactas. */
  .temas { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--sp-2); scrollbar-width: none; }
  .temas::-webkit-scrollbar { display: none; }
  .temas li { flex-shrink: 0; }
  .temas a { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
  .rapidas { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .rapidas li { padding: var(--sp-3); }
  .rapidas b { font-size: 1.05rem; }
  .rapidas span { font-size: 0.75rem; }
  .dudas__carol { align-items: flex-start; }
  .dudas__carol img { width: 52px; height: 52px; }
}
@media (max-width: 359px) {
  .rapidas { grid-template-columns: 1fr; }
}

/* ===========================================================================
   PÁGINAS SECUNDARIAS
   La escena 3D de cabecera iba encima del título con 320 px de alto mínimo:
   en un teléfono el título empezaba en la segunda pantalla. En móvil es una
   franja baja; en tablet vertical, mediana.
   =========================================================================== */
@media (max-width: 599px) {
  .page-hero .scene { aspect-ratio: 16 / 7; min-height: 150px; }
  .page-hero { padding-top: var(--sp-6); }
}
@media (min-width: 600px) and (max-width: 860px) {
  .page-hero .scene { aspect-ratio: 16 / 7; min-height: 220px; }
}
/* Formularios de página: campos a una columna en móvil. */
@media (max-width: 599px) {
  form .grid-2 { grid-template-columns: 1fr; }
}

/* ---- Monitor grande: cabeceras de programa con más presencia -------------- */
@media (min-width: 1600px) {
  .vhero .claim { font-size: 4.2rem; }
  .vhero .lead { font-size: 1.3rem; }
  .vhero { min-height: 680px; }
  .prensa-hero h1 { font-size: 4.2rem; }
}

/* ---- Suelo de 11,5 px para etiquetas en mayúsculas ------------------------ */
.badge, .seats, .recorrido small, .revista__temas small, .revista__foto figcaption,
.charla li small, .rapidas small, .nav__new, .plan__group, .pase__datos dt,
.etapa__edad, .age, .cuelga__lugar, .ficha__quien, .thumb__tag { font-size: max(0.72rem, 11.5px); }
.alumno__edad small { font-size: 0.62rem; }
@media (pointer: coarse), (max-width: 1023px) {
  #biblioteca .chip { min-height: 44px; padding-inline: 0.9rem; }
  .field label { padding-block: 0.15rem; }
  main p a { padding-block: 0.35rem; }
}
.plan-note span { max-width: 75ch; }
.age { font-size: max(0.72rem, 11.5px); }

/* ---- Adornos que no deben tragarse los toques -------------------------------
   El círculo discontinuo de .cta-band (::after) se pinta por encima de los
   botones en móvil y la mitad inferior de «Apartar cupo» no respondía. Los
   adornos y velos no reciben eventos; el contenido de la banda va encima. */
.cta-band::after, .tile::after, .qcard::after, .revista::after, .recorte::before,
.cuelga::before, .site-footer::before, .vhero__hem, .bgvideo__scrim, .bgvideo__fade { pointer-events: none; }
.cta-band > * { position: relative; z-index: 1; }