/**
 * Bachillerato Section Styles
 *
 * Inverted header layout: logo centered on white background at top,
 * red navigation bar below with white text menu items.
 *
 * Loaded after index.css — overrides FP header styles for bachillerato pages.
 */

/* ==========================================================================
   Hide FP-specific header elements
   ========================================================================== */

.bachillerato-header .header-top,
.bachillerato-header .menu,
.bachillerato-header .menu_mobile {
  display: none;
}

/* ==========================================================================
   Bachillerato Logo (top section, white background)
   ========================================================================== */

.bachillerato-logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 20px;
  background-color: var(--color-white);
}

.bachillerato-logo img {
  max-width: 345px;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Bachillerato Nav (red bar with white nav items)
   ========================================================================== */

.bachillerato-nav {
  width: 100%;
  background-color: var(--color-red-100);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
}

.bachillerato-nav .header-cta {
  justify-self: start;
  margin-right: auto;
  color: #ffffff;
  font-size: 12px;
  border-radius: 2px;
}

.bachillerato-nav .header-cta .te-llamamos{
  border-radius: 10px;
  padding: 0px 11px;
}


.bachillerato-nav nav ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  column-gap: 3rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

.bachillerato-nav nav ul li {
  font-family: var(--font-poppins);
  font-size: 15px;
  text-align: center;
}

.bachillerato-nav nav ul li a {
  color: var(--color-white);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
}

.bachillerato-nav nav ul li a:hover {
  opacity: 0.8;
}

.bachillerato-nav nav ul li.contacto a {
  border: 2px solid var(--color-white);
  border-radius: 10px;
  padding: 5px 15px;
}

/* Hamburger hidden on desktop */
.bachillerato-nav .menu-burguer {
  display: none;
}

/* ==========================================================================
   Toda la FP — bachillerato overrides
   ========================================================================== */

/* index.css pinta esta banda en #bdbdbd para la portada de FP. En las secciones
   va el gris claro del resto de bandas del sitio. */
.bachillerato .toda-la-fp {
  padding-bottom: 60px;
  background-color: #e4e7e9;
}

.bachillerato .toda-la-fp .grados {
  margin-bottom: 40px;
  column-gap: 10rem;
}

.bachillerato .toda-la-fp .grados .grado .grado-title {
  margin-bottom: 30px;
}

.bachillerato .toda-la-fp .grados .grado .ciclos-list {
  background-color: #bdbdbd;
}




.bachillerato .toda-la-fp .cta {
    width: 100%;
    max-width: 628px;
}

/* ==========================================================================
   Cabecera — bachillerato overrides
   ========================================================================== */
.bachillerato .cabecera {
  width:100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 856px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bachillerato .cabecera .header-bottom{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  max-width: 1558px;  
  width: 100%;
  column-gap: 20px;
  margin-bottom: 40px;
  margin: 0 auto;
}


.bachillerato .header-bottom-left {
  flex: 0 0 70%;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 30px 50px;
}

.bachillerato .header-bottom-left p{
  font-family: var(--font-raleway);
  font-size: 30px;
  font-weight: 300;
  margin: 0 0 40px;
}

.bachillerato .header-bottom-left .transporte-subtitle {
  font-size: 20px;
  margin: 0;
}

.bachillerato .header-bottom-left .transporte-subtitle.red {
  color: #DC0001;
  margin: 0 0 20px;
}

/* ==========================================================================
   Slider — bachillerato overrides
   ========================================================================== */

.bachillerato .slide-full span {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

.bachillerato .slide-full.infantil span {
  text-shadow: none
}

/* ==========================================================================
   Empresas — bachillerato overrides
   ========================================================================== */

.bachillerato .empresas {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* ==========================================================================
   Opiniones Slider — override for Swiper compatibility
   ========================================================================== */

.bachillerato .opiniones-block .opiniones-fondo {
  height: 600px;
}

.bachillerato .opiniones-block .opiniones {
  display: block;
  overflow: hidden;
  column-gap: 0;
  flex-wrap: nowrap;
  padding-left: 20px;
  padding-right: 20px;
  width: 100% !important;
  max-width: 1338px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.bachillerato .opiniones-block .opiniones .swiper-slide {
  height: auto !important;
}

.bachillerato .opiniones-block .opiniones .opinion {
  width: auto;
  box-sizing: border-box;
  height: 100%;
  justify-content: flex-start;
}

.bachillerato .swiper-pagination-opiniones {
  text-align: center;
  margin-top: 30px;
  padding-bottom: 10px;
}

.bachillerato .swiper-pagination-opiniones .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #dadcde;
  opacity: 1;
  margin: 0 5px;
  transition: background 0.3s ease;
}

.bachillerato .swiper-pagination-opiniones .swiper-pagination-bullet-active {
  background: #516270;
}


/* El resto de reglas de este bloque cuelgan de .bachillerato, así que el
   respiro superior también. Antes se enumeraban primaria e infantil una a
   una y cada sección nueva con opiniones nacía descuadrada. */
.bachillerato .opiniones-block {
  padding-top: 100px;
}

/* Cuando el bloque de opiniones va justo detrás del de empresas —en bachillerato
   ese es el texto de "Becas y ayudas", y la imagen de fondo del de opiniones va
   pegada arriba del todo— los 100px de arriba se suman a los 60 de abajo del
   anterior y al margen del <p>: casi 190px de blanco entre el párrafo y la foto.
   Solo en ese encadenado se recorta; donde opiniones va detrás de otra cosa
   (primaria, infantil, secundaria) sigue mandando la regla de arriba. */
.bachillerato .empresas + .opiniones-block {
  padding-top: 20px;
}



/* ==========================================================================
   Footer
   ========================================================================== */

.logos-footer.logos-footer-bachillerato .logo4{
    width: unset;
}

/* Aquí logo5 es el bachillerato dual americano, no la insignia del SEPIE: va a
   tamaño natural, así que también se libra del alto que index.css le fija. */
.logos-footer.logos-footer-bachillerato .logo5{
    width: unset;
    height: unset;
}


/* ==========================================================================
   Grado Popup (fullscreen modal)
   ========================================================================== */

body.grado-popup-open {
  overflow: hidden;
}

.grado-popup {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  width: 100%;
  height: calc(100% - var(--wp-admin--admin-bar--height, 0px));
  z-index: 9999;
  background-color: var(--color-white);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
  display: flex;
  flex-direction: column;
}

.grado-popup.is-open {
  visibility: visible;
  opacity: 1;
}

.grado-popup__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #a1adb5;
  flex-shrink: 0;
}

.grado-popup--medio .grado-popup__header {
  background-color: #DC0001;
}

.grado-popup__title {
  font-family: var(--font-poppins);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
}

.grado-popup__close {
  font-family: var(--font-poppins);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  letter-spacing: 1px;
}

.grado-popup__close:hover {
  opacity: 0.8;
}

.grado-popup__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}

.grado-popup__image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Responsive (mobile ≤ 768px)
   ========================================================================== */

@media screen and (max-width: 768px) {

  .bachillerato-logo {
    padding: 17px 20px;
  }

  .bachillerato-logo img {
    max-width: 200px;
  }

  /* Hide desktop nav links, keep the red bar */
  .bachillerato-nav nav {
    display: none;
  }

  /* Show hamburger icon inside the red bar */
  .bachillerato-nav .menu-burguer {
    display: block;
    cursor: pointer;
  }

  .bachillerato-nav {
    justify-content: flex-end;
    padding: 10px 20px;
  }

  /* --- Cabecera --- */

  .bachillerato .cabecera {
    height: auto;
    min-height: 500px;
    align-items: flex-start;
    background: none!important;
  }

  .bachillerato .cabecera .header-bottom {
    flex-direction: column;
    padding: 0;
    width: 100%;
  }

  .bachillerato .header-bottom-left {
    flex: unset;
    width: 100%;
    padding: 20px 0px;
    background-color:#F9F9FA;
    text-align: center;
    align-items: center;
  }  

  .bachillerato .header-bottom-left h1 {
    font-size: 36px;
    line-height: 38px;
  }

  .bachillerato .header-bottom-left h2 {
    font-size: 16px;
    line-height: 20px;
  }

  .bachillerato .header-bottom-left p {
    font-size: 16px;
    line-height: 22px;
    margin: 0 30px 20px;
  }

  .bachillerato .header-bottom-left img {
    margin: 0;
    width: 100%;
  }  

  /* El respiro sobre la franja se da aquí como valor por defecto. En la
     práctica solo lo estrena bachillerato: las demás secciones fijan el suyo
     más abajo —30 en primaria, infantil y secundaria; 14,5 en colegio y en las
     páginas nuevas— y todas ganan por orden o por especificidad. */
  .bachillerato .header-bottom-left .transporte {
    padding: 30px 10px 0;
  }

  /* Franja de transportes en infantil y primaria: el aire va como padding y no
     como margen porque las dos tienen la imagen móvil justo encima y el fondo
     debe llegar a ras de ella. El de abajo evita que los logos queden cortados.
     El gris va un punto por encima del #F9F9FA del panel que las rodea, lo
     justo para que la franja se recorte como banda propia.
     Bachillerato se queda fuera. */
  .bachillerato.infantil .header-bottom-left .transporte,
  .bachillerato.primaria .header-bottom-left .transporte {
    padding-top: 30px;
    padding-bottom: 15px;
    background-color: #e4e7e9;
  }

  /* En secundaria el fondo cubre el bloque de título y la franja a la vez, y
     entre los dos va la imagen móvil, así que se tiñe el panel entero en vez de
     pintar dos bandas: sustituye al #F9F9FA de la regla común. La imagen va a
     todo el ancho, así que el gris no asoma entre una parte y otra. */
  .bachillerato.secundaria .header-bottom-left {
    background-color: #e4e7e9;
  }

  /* El aire sobre la franja, igual que en infantil y primaria. No lleva el de
     abajo: aquí el panel cierra con sus propios 20px. */
  .bachillerato.secundaria .header-bottom-left .transporte {
    padding-top: 30px;
  }

  .bachillerato .header-bottom-left .transporte-subtitle {
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    width: 100%;
  }

  /* --- Razones --- */
  .bachillerato .razones {
    background-color:#F9F9FA;
    padding-top: 0;
    padding: 0 40px;
  }

  .bachillerato .razones h3 {
    font-size: 22px;
    line-height: 26px;
    margin-top: 0;
    margin-bottom: 40px;
  }

  .bachillerato .razones-list {
    flex-direction: column;
    align-items: center;
    row-gap: 30px;
  }

  .bachillerato .razon {
    max-width: 400px;
    align-items: center;
    text-align: center;
  }

  /* --- Slider --- */

  .bachillerato .slider {
    height: 250px;
  }

  .bachillerato .mySwiper {
    height: 250px;
  }

  .bachillerato .slide-full {
    width: 100%;
  }

  .bachillerato .slide-full span {
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    padding: 0 20px;
  }

.slide-full .slider-content{
  padding-top: 10px;
  padding-bottom: 10px;
}

.slide-full .slider-content span{ 
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    padding: 0 10px;
    display: block;
}

.slide-full .slider-content  p{
  font-size: 12px;
  line-height: 13px;
  padding: 0 10px;
  display: block;  
}  

  /* --- Grados (toda-la-fp) --- */

  .bachillerato .toda-la-fp {
    padding: 30px 0px;
  }

  .bachillerato .toda-la-fp h3 {
    font-size: 22px;
    line-height: 26px;
    text-align: center;
    margin: 10px 20px 30px;
  }

  .bachillerato .toda-la-fp .grados {
    flex-direction: column;
    align-items: center;
    row-gap: 30px;
    column-gap: 0;
  }

  .bachillerato .toda-la-fp .grados .grado {
    width: 100%;
    max-width: 400px;
  }

  .bachillerato .toda-la-fp .grados .grado .grado-title {
    font-size: 22px;
    line-height: 24px;
    text-align: center;
  }

  .bachillerato .toda-la-fp .cta {
    width: auto;
    font-size: 29px;
    padding: 1rem 1.5rem;
  }

  /* --- Empresas --- */

  .bachillerato .empresas {
    padding: 30px 20px;
  }

  .bachillerato .empresas h3 {
    font-size: 22px;
    line-height: 26px;
  }

  /* --- Opiniones --- */

  .bachillerato .opiniones-block .opiniones-fondo {
    height: 250px;
    margin-bottom: 35px;
  }

  .bachillerato .opiniones-block h3 {
    font-size: 22px;
    line-height: 26px;
  }

  /* Va en el contenedor y no solo en el <p>: el texto llega de un WYSIWYG y en
     unas secciones viene envuelto en <p> y en otras suelto —secundaria es de
     estas—, y ahí la regla no enganchaba nada y se quedaba en los 20px del
     shorthand de index.css. El line-height sigue viniendo de aquel, igual que
     en bachillerato. */
  .bachillerato .opiniones-content,
  .bachillerato .opiniones-content p{
    font-size: 14px;
  }  

  .bachillerato .opiniones-block .opiniones{
    margin-top: 10px;
  }

  /* --- Grado Popup --- */

  .grado-popup__header {
    padding: 12px 15px;
  }

  .grado-popup__title {
    font-size: 14px;
  }

  .grado-popup__close {
    font-size: 12px;
  }

  .grado-popup__body {
    padding: 10px;
  }
}


@media screen and (max-width: 1600px) {


  .bachillerato .toda-la-fp .grados{
    flex-wrap: wrap;
    align-items: start;
    row-gap: 30px;
    column-gap: 3rem;
  }

  .bachillerato .toda-la-fp .grados .grado{
    max-width: unset;
  }  

}
/* ==========================================================================
   Héroe de captación — colegio, el-colegio, ambiente-seguro,
   informacion-a-familias y admisiones
   ==========================================================================
   Las tres comparten el mismo patrón: media a sangre de fondo, rótulo
   centrado sobre todo el ancho y el formulario pegado a la esquina superior
   derecha. Se agrupan aquí en vez de repetirse por sección: un retoque en el
   héroe vale para las tres.
   ========================================================================== */

.colegio .cabecera,
.el-colegio .cabecera,
.ambiente-seguro .cabecera,
.informacion-a-familias .cabecera,
.admisiones .cabecera {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
}

.colegio .cabecera-video,
.el-colegio .cabecera-video,
.ambiente-seguro .cabecera-video,
.informacion-a-familias .cabecera-video,
.admisiones .cabecera-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* El rótulo va centrado sobre todo el ancho del héroe, por detrás del
   formulario, no dentro de la columna que este deja libre. */
.el-colegio .cabecera-titulo,
.ambiente-seguro .cabecera-titulo,
.informacion-a-familias .cabecera-titulo,
.admisiones .cabecera-titulo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 20px;
  color: var(--color-white);
  font-family: var(--font-poppins);
  font-size: 45px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Sin margen y soltado del contenedor de 1558px centrado que usan las demás
   secciones, para que el formulario llegue al borde del viewport. */
.colegio .cabecera .header-bottom,
.el-colegio .cabecera .header-bottom,
.ambiente-seguro .cabecera .header-bottom,
.informacion-a-familias .cabecera .header-bottom,
.admisiones .cabecera .header-bottom {
  position: relative;
  z-index: 2;
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* El lado izquierdo del héroe va limpio, sin el panel blanco translúcido que
   usan bachillerato/primaria/infantil. */
.colegio .header-bottom-left,
.el-colegio .header-bottom-left,
.ambiente-seguro .header-bottom-left,
.informacion-a-familias .header-bottom-left,
.admisiones .header-bottom-left {
  flex: 1 1 auto;
  background-color: transparent;
  padding: 0;
}

@media (max-width: 768px) {
  .colegio .cabecera .header-bottom,
  .el-colegio .cabecera .header-bottom,
  .ambiente-seguro .cabecera .header-bottom,
  .informacion-a-familias .cabecera .header-bottom,
  .admisiones .cabecera .header-bottom {
    flex-direction: column;
  }

  /* El rótulo se queda superpuesto, como en la maqueta, pero acotado a la
     banda de imagen en vez de a toda la sección: debajo va la franja de
     transportes, sobre blanco, y ahí el texto blanco no se leería.
     El z-index sube por encima del 2 de .header-bottom, que si no tapa el
     rótulo con la propia imagen. */
  .el-colegio .cabecera-titulo,
  .ambiente-seguro .cabecera-titulo,
  .informacion-a-familias .cabecera-titulo,
  .admisiones .cabecera-titulo {
    bottom: auto;
    height: 250px;
    z-index: 3;
  }

  /* En móvil manda la imagen de .header-bottom-left, igual que en el resto de
     secciones, donde .bachillerato .cabecera anula el fondo de escritorio. Sin
     esto el vídeo se sigue pintando detrás y la imagen le queda encima. */
  .el-colegio .cabecera-video,
  .ambiente-seguro .cabecera-video,
  .informacion-a-familias .cabecera-video,
  .admisiones .cabecera-video {
    display: none;
  }
}

@media (max-width: 992px) {
  .el-colegio .cabecera-titulo,
  .ambiente-seguro .cabecera-titulo,
  .informacion-a-familias .cabecera-titulo,
  .admisiones .cabecera-titulo {
    font-size: 32px;
  }
}

/* En escritorio la franja no existe: el héroe es imagen/vídeo + formulario.
   Solo aparece en móvil, donde el formulario se retira. */
.el-colegio .transporte,
.ambiente-seguro .transporte,
.informacion-a-familias .transporte,
.admisiones .transporte {
  display: none;
}

/* --------------------------------------------------------------------------
   Héroe en móvil — las cuatro secciones nuevas
   --------------------------------------------------------------------------
   Ninguna de las cuatro trae vídeo: el medio es la imagen móvil. Va como
   banda de 250px —la misma altura que el vídeo en la portada— con el rótulo
   superpuesto y la franja de claim, dirección y transportes justo debajo.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  /* El héroe deja de ser una fila: imagen arriba y franja debajo, cada una a
     todo el ancho. Sin min-height, para que la sección se ajuste al contenido
     en vez de dejar hueco.
     El respiro hasta la siguiente sección NO se fija aquí, sino sección por
     sección más abajo: depende de con qué arranque cada una. el-colegio y
     admisiones lo llevan como margen del héroe; ambiente-seguro e
     informacion-a-familias se apoyan en el padding superior que ya tiene su
     primera sección. */
  .el-colegio .cabecera,
  .ambiente-seguro .cabecera,
  .informacion-a-familias .cabecera,
  .admisiones .cabecera {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  /* Cuerpo del rótulo en móvil. Va aquí y no junto al resto de sus reglas de
     768px porque el escalón de tablet (@media max-width: 992px, font-size 32)
     es posterior a aquel bloque y tiene la misma especificidad: puesto allí,
     lo pisaría. Queda 45 en escritorio, 32 en tablet y 24 en móvil. */
  .el-colegio .cabecera-titulo,
  .ambiente-seguro .cabecera-titulo,
  .informacion-a-familias .cabecera-titulo,
  .admisiones .cabecera-titulo {
    font-size: 24px;
    font-weight: 700;
  }

  /* La imagen móvil pasa a ser el medio del héroe: banda fija de 250px, para
     que el rótulo superpuesto tenga una altura conocida sobre la que centrarse. */
  .el-colegio .header-bottom-left img.mobile,
  .ambiente-seguro .header-bottom-left img.mobile,
  .informacion-a-familias .header-bottom-left img.mobile,
  .admisiones .header-bottom-left img.mobile {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  /* Se oculta la columna entera y no solo el formulario: como ítem flex vacío
     seguiría reservando el row-gap del héroe. */
  .el-colegio .cabecera .header-bottom-right,
  .ambiente-seguro .cabecera .header-bottom-right,
  .informacion-a-familias .cabecera .header-bottom-right,
  .admisiones .cabecera .header-bottom-right {
    display: none;
  }

  /* En columna, el align-items: start del héroe encoge los hijos al ancho de
     su contenido. */
  .el-colegio .header-bottom-left,
  .ambiente-seguro .header-bottom-left,
  .informacion-a-familias .header-bottom-left,
  .admisiones .header-bottom-left {
    width: 100%;
  }

  .el-colegio .transporte,
  .ambiente-seguro .transporte,
  .informacion-a-familias .transporte,
  .admisiones .transporte {
    display: flex;
    width: 100%;
  }

  /* Separación entre la imagen y el claim. El selector lleva header-bottom-left
     para ganar a .bachillerato .header-bottom-left .transporte, que resetea el
     padding y es más específico. */
  .el-colegio .header-bottom-left .transporte,
  .ambiente-seguro .header-bottom-left .transporte,
  .informacion-a-familias .header-bottom-left .transporte,
  .admisiones .header-bottom-left .transporte {
    padding-top: 14.5px;
  }
}

/* ==========================================================================
   Colegio — portada
   ========================================================================== */

/* La maqueta deja 103px entre el vídeo de cabecera y la primera fila de
   tarjetas; index.css solo pone 40. Acotado a escritorio: por debajo de 768px
   sigue mandando el padding de .bachillerato .razones, común a las secciones. */
@media (min-width: 769px) {
  .colegio .razones {
    padding-top: 103px;
  }
}

/* Tarjetas: 3 arriba y 2 abajo más anchas. Calibrado para 5 razones.
   La maqueta pide 500px arriba y 760px abajo dentro del mismo contenedor de
   1558, lo que implica canales distintos por fila (29 y 38). Una rejilla de
   6 columnas no puede dar las dos medidas a la vez, así que va en flex con
   space-between: cada fila reparte su propio sobrante. */
.colegio .razones-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 0;
  row-gap: 60px;
}

/* Por debajo de 1240px index.css clava .razon a 300px, pensado para la
   maquetación de la FP. Aquí el ancho lo fija el flex-basis. */
.colegio .razon {
  flex: 0 0 calc((100% - 58px) / 3);
  min-width: 0;
  max-width: none;
}

.colegio .razon:nth-child(n + 4) {
  flex: 0 0 calc((100% - 38px) / 2);
}

/* Aquí las razones son fotos apaisadas, no iconos: se anulan los min-height
   que index.css reserva para la maquetación de iconos. */
.colegio .razon .razon-image {
  min-height: 0;
  margin-bottom: 20px;
}

/* La maqueta fija las fotos en una banda de 400px de alto: 500×400 arriba y
   765×400 abajo. Con aspect-ratio y object-fit las de cada fila quedan
   igualadas y los títulos alineados, suba quien suba la foto y con la
   proporción que sea. */
.colegio .razon .razon-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.colegio .razon:nth-child(n + 4) .razon-image img {
  aspect-ratio: 19 / 10;
}

/* Estilo de la maqueta: Poppins Bold 25/35, centrado y sin tracking.
   index.css lo trae a 24px, peso 600 y con min-height de 140 para la
   maquetación de iconos de la FP. */
.colegio .razon .razon-title {
  min-height: 0;
  margin-bottom: 12px;
  font-family: var(--font-poppins);
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0;
  text-align: center;
}

/* Estilo de la maqueta: Raleway 20/28, centrado y sin tracking. El peso va
   sin fijar porque el texto mezcla redonda y negrita dentro del párrafo.
   El ancho de línea se acota a 400px arriba y 600px abajo, centrado dentro de
   tarjetas de 500 y 760. */
.colegio .razon .razon-desc {
  max-width: 400px;
  margin: 0 auto;
  font-family: var(--font-raleway);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
}

.colegio .razon:nth-child(n + 4) .razon-desc {
  max-width: 600px;
}

/* El texto de cada tarjeta viene de un campo WYSIWYG y trae negritas. */
.colegio .razon .razon-desc p {
  margin: 0 0 1em;
}

.colegio .razon .razon-desc p:last-child {
  margin-bottom: 0;
}

/* El 3 + 2 se mantiene mientras las tarjetas respiran; por debajo pasa a dos
   columnas y, ya en móvil, a una sola con la tarjeta acotada para que las
   fotos apaisadas no se coman la pantalla. */
@media (max-width: 1200px) {
  .colegio .razones-list {
    row-gap: 40px;
  }

  .colegio .razon:nth-child(n + 4) .razon-image img {
    aspect-ratio: 5 / 4;
  }

  .colegio .razon,
  .colegio .razon:nth-child(n + 4) {
    flex: 0 0 calc((100% - 32px) / 2);
  }
}

@media (max-width: 768px) {
  /* En móvil la tarjeta ocupa todo el ancho disponible, sin tope. El width
     explícito además del flex-basis evita que el tamaño intrínseco de la foto
     (500px en la fila de arriba) acabe mandando sobre el de la tarjeta. */
  .colegio .razon,
  .colegio .razon:nth-child(n + 4) {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

/* ==========================================================================
   El Colegio — página interior
   ========================================================================== */

/* --- Propósito / Proyecto educativo --- */

/* Anchos siempre con max-width, nunca con width fija: estas secciones son
   ítems flex y un hijo de ancho fijo arrastraría al padre (min-width: auto)
   impidiéndole encoger por debajo de 1558px. */
/* max-width = 1558 de contenido + los 20px de respiro a cada lado, que con
   box-sizing: border-box se comerían el contenedor y dejarían las columnas en
   730 en vez de los 750 de la maqueta. */
.el-colegio .bloques {
  width: 100%;
  max-width: 1598px;
  min-width: 0;
  margin: 0 auto;
  padding: 60px 20px 80px;
  box-sizing: border-box;
}

.el-colegio .bloques-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 58px;
  row-gap: 60px;
  align-items: start;
}

.el-colegio .bloque {
  text-align: center;
}

.el-colegio .bloque-image img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  aspect-ratio: 15 / 8;
  object-fit: cover;
}

.el-colegio .bloque-title {
  margin-bottom: 12px;
  color: var(--color-red-100);
  font-family: var(--font-poppins);
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0;
}

.el-colegio .bloque-desc {
  color: var(--color-dimgray-200);
  font-family: var(--font-raleway);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.el-colegio .bloque-desc p {
  margin: 0 0 1em;
}

.el-colegio .bloque-desc p:last-child {
  margin-bottom: 0;
}

.el-colegio .bloque-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--color-link);
  font-family: var(--font-raleway);
  font-size: 18px;
  text-decoration: underline;
}

/* --- Instalaciones --- */

.el-colegio .instalaciones {
  width: 100%;
  min-width: 0;
  background-color: var(--color-gainsboro);
  padding: 60px 20px 80px;
  text-align: center;
  box-sizing: border-box;
}

/* Mismo estilo de título que la sección de arriba: Poppins Bold 25/35. */
.el-colegio .instalaciones h3 {
  margin: 0 0 30px;
  color: var(--color-red-100);
  font-family: var(--font-poppins);
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0;
}

/* Mismo estilo de párrafo que la sección de arriba: Raleway 20/28. */
.el-colegio .instalaciones-desc {
  width: 100%;
  max-width: 1558px;
  margin: 0 auto 50px;
  color: var(--color-dimgray-200);
  font-family: var(--font-raleway);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.el-colegio .instalaciones-desc p {
  margin: 0 0 0.8em;
}

.el-colegio .instalaciones-desc p:last-child {
  margin-bottom: 0;
}

.el-colegio .instalaciones-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 29px;
  row-gap: 30px;
  width: 100%;
  max-width: 1558px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Banda de 500×400, igual que la fila superior de la portada. */
.el-colegio .instalacion img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

@media (max-width: 992px) {
  .el-colegio .bloques-list,
  .el-colegio .instalaciones-list {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .el-colegio .bloque,
  .el-colegio .instalacion {
    max-width: 520px;
    margin: 0 auto;
  }
}

/* --- Móvil: mismas directrices que la portada del colegio --- */

@media screen and (max-width: 768px) {
  /* El respiro hasta la primera sección se da como margen del héroe y no como
     padding de .bloques, igual que en la portada. */
  .el-colegio .cabecera {
    margin-bottom: 18.35px;
  }

  /* Las fotos van a sangre, igual que en la portada: el padding lateral se
     quita de las secciones y se pasa a los textos, que sí van metidos. El
     superior también, para que el hueco lo fije el margen del héroe.
     Los 80px inferiores de escritorio dejaban demasiado blanco entre el enlace
     y la primera foto de instalaciones, que arranca a hueso; se quedan en los
     mismos 30px con los que respira el texto de esa sección. */
  .el-colegio .bloques {
    padding-top: 0;
    padding-bottom: 30px;
  }

  .el-colegio .bloques,
  .el-colegio .instalaciones {
    padding-left: 0;
    padding-right: 0;
  }

  .el-colegio .bloque .bloque-title,
  .el-colegio .bloque .bloque-desc,
  .el-colegio .bloque .bloque-link,
  .el-colegio .instalaciones h3,
  .el-colegio .instalaciones-desc p {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* Mismo peso que en la portada: en móvil baja de los 700 de la maqueta. */
  .el-colegio .bloque .bloque-title {
    font-weight: 600;
  }

  /* --- Instalaciones: fotos y texto intercalados ---
     La maqueta alterna imagen → título + primer párrafo → imagen → segundo
     párrafo → imagen, pero el marcado los tiene separados en dos contenedores
     (.instalaciones-desc con los párrafos y .instalaciones-list con las fotos)
     porque en escritorio son un bloque de texto y una rejilla de tres.
     Con display: contents esos dos contenedores dejan de generar caja y sus
     hijos pasan a ser ítems del mismo flex, que ya se pueden ordenar. Los
     contenedores siguen en el árbol, así que la herencia de tipografía no se
     pierde; lo que sí se pierde es su padding y su fondo, por eso el padding
     lateral está puesto en los párrafos y no en .instalaciones-desc.

     El orden está calibrado para el contenido actual: 2 párrafos y 3 fotos.
     Cualquier ítem de más cae al final por el order: 9 de base, que es un
     degradado razonable —se ve, y no se cuela en medio de la secuencia. */
  .el-colegio .instalaciones {
    display: flex;
    flex-direction: column;
    /* Primera y última foto a hueso con los bordes de la sección: el respiro
       lo dan los textos, no la sección. */
    padding-top: 0;
    padding-bottom: 0;
  }

  .el-colegio .instalaciones-desc,
  .el-colegio .instalaciones-list {
    display: contents;
  }

  .el-colegio .instalaciones > *,
  .el-colegio .instalaciones-desc > *,
  .el-colegio .instalaciones-list > * {
    order: 9;
  }

  .el-colegio .instalaciones-list > .instalacion:nth-child(1) {
    order: 1;
  }

  .el-colegio .instalaciones h3 {
    order: 2;
  }

  .el-colegio .instalaciones-desc > p:nth-child(1) {
    order: 3;
  }

  .el-colegio .instalaciones-list > .instalacion:nth-child(2) {
    order: 4;
  }

  .el-colegio .instalaciones-desc > p:nth-child(2) {
    order: 5;
  }

  .el-colegio .instalaciones-list > .instalacion:nth-child(3) {
    order: 6;
  }

  /* Fotos a sangre: el max-width de 520px con el que la rejilla se centraba
     por debajo de 992px aquí las dejaría con banda gris a los lados. */
  .el-colegio .instalacion {
    max-width: none;
    margin: 0;
  }

  /* Respiro del texto contra las fotos que lo enmarcan. */
  .el-colegio .instalaciones h3 {
    margin: 30px 0 12px;
  }

  .el-colegio .instalaciones-desc > p {
    margin: 0 0 30px;
  }

  /* El primer párrafo ya viene separado por el margen inferior del título; los
     siguientes caen directamente bajo una foto y necesitan el mismo aire por
     arriba que el que dejan por abajo. Va con p + p y no con :nth-child para
     que un tercer párrafo lo herede solo. */
  .el-colegio .instalaciones-desc > p + p {
    margin-top: 30px;
  }

  /* En escritorio el último párrafo cierra el bloque de texto y no debe
     arrastrar margen, de ahí .instalaciones-desc p:last-child. Aquí lleva una
     foto debajo y sí lo necesita, y hay que recuperarlo con al menos su misma
     especificidad (0,3,1): por orden no bastaba. */
  .el-colegio .instalaciones-desc > p:last-child {
    margin-bottom: 30px;
  }
}

/* ==========================================================================
   Ambiente Seguro — página interior
   ========================================================================== */

/* --- Texto de compromiso --- */

.ambiente-seguro .compromiso {
  width: 100%;
  min-width: 0;
  padding: 50px 20px 20px;
  box-sizing: border-box;
  background-color: var(--color-gainsboro);
  text-align: center;
}

.ambiente-seguro .compromiso-desc {
  width: 100%;
  max-width: 1558px;
  margin: 0 auto;
  color: var(--color-dimgray-200);
  font-family: var(--font-raleway);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.ambiente-seguro .compromiso-desc p {
  margin: 0 0 1.4em;
}

.ambiente-seguro .compromiso-desc p:last-child {
  margin-bottom: 0;
}

/* --- Documentos descargables --- */

.ambiente-seguro .documentos {
  width: 100%;
  min-width: 0;
  padding: 40px 20px 80px;
  box-sizing: border-box;
  background-color: var(--color-gainsboro);
}

.ambiente-seguro .documentos-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3rem;
  row-gap: 50px;
  align-items: start;
  width: 100%;
  max-width: 1558px;
  margin: 0 auto;
}

.ambiente-seguro .documento {
  text-align: center;
}

.ambiente-seguro .documento-icon {
  margin-bottom: 20px;
}

.ambiente-seguro .documento-icon img {
  width: 100px;
  height: auto;
}

/* Poppins Bold 25, como el resto de títulos del sitio. El interlineado de 35
   viene del mismo patrón: "Protocolo acoso escolar" cae a dos líneas. */
.ambiente-seguro .documento-title {
  margin-bottom: 8px;
  color: var(--color-red-100);
  font-family: var(--font-poppins);
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0;
}

.ambiente-seguro .documento-link {
  color: var(--color-link);
  font-family: var(--font-raleway);
  font-size: 16px;
  text-decoration: underline;
}

/* --- Buzón digital de denuncias --- */

.ambiente-seguro .buzon {
  width: 100%;
  min-width: 0;
  padding: 56px 20px 60px;
  box-sizing: border-box;
}

/* Bloque estrecho y centrado: el cartel manda el ancho, no la rejilla. */
/* El bloque de texto se centra verticalmente respecto al cartel, que es más
   alto y manda la altura de la fila. */
.ambiente-seguro .buzon-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: 2rem;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.ambiente-seguro .buzon-image {
  flex: 0 0 45%;
}

.ambiente-seguro .buzon-image img {
  display: block;
  width: 100%;
  height: auto;
}

.ambiente-seguro .buzon-content {
  flex: 1 1 auto;
}

/* Mismo estilo que los títulos anteriores: Poppins Bold 25/35 en rojo. */
.ambiente-seguro .buzon-content h3 {
  margin: 0 0 12px;
  color: var(--color-red-100);
  font-family: var(--font-poppins);
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0;
}

.ambiente-seguro .buzon-desc {
  max-width: 326px;
  color: var(--color-dimgray-200);
  font-family: var(--font-raleway);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.ambiente-seguro .buzon-desc p {
  margin: 0 0 1em;
}

.ambiente-seguro .buzon-desc p:last-child {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .ambiente-seguro .documentos-list {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
}

@media (max-width: 768px) {
  .ambiente-seguro .buzon-inner {
    flex-direction: column;
    align-items: center;
    row-gap: 25px;
    max-width: 420px;
    text-align: center;
  }

  /* Apilado, el texto va primero y la imagen debajo. Con order y no con
     column-reverse para no invertir también el eje: row-gap y align-items
     siguen leyéndose igual, y en el marcado la imagen sigue delante porque en
     escritorio es la columna izquierda. */
  .ambiente-seguro .buzon-image {
    flex: 0 0 auto;
    max-width: 260px;
    order: 1;
  }
}

/* ==========================================================================
   Información a familias — página interior
   ========================================================================== */

/* --- Quiénes somos / Oferta educativa --- */

/* Casi blanco, muestreado de la maqueta: las barras de "Oferta educativa" son
   las que van en gainsboro, así que la banda tiene que ser más clara o se las
   traga. */
.informacion-a-familias .familias-intro {
  width: 100%;
  min-width: 0;
  background-color: #f8f8f8;
  padding: 70px 20px 90px;
  box-sizing: border-box;
}

/* Medidas de la maqueta: la columna de texto va a 748 y el canal a 142; la de
   la oferta se queda con el resto de los 1558. El minmax evita que la pista
   fija desborde cuando el contenedor se estrecha. */
.informacion-a-familias .familias-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 748px) 1fr;
  column-gap: 142px;
  align-items: start;
  width: 100%;
  max-width: 1558px;
  margin: 0 auto;
}

/* Mismo estilo de título que el resto del sitio: Poppins Bold 25/35 en rojo. */
.informacion-a-familias .familias-intro h2,
.informacion-a-familias .familias-actividades h2,
.informacion-a-familias .familias-bloques h2,
.informacion-a-familias .familias-admision h2 {
  margin: 0 0 30px;
  color: var(--color-red-100);
  font-family: var(--font-poppins);
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0;
}

/* Mismo párrafo que el resto del sitio: Raleway 20/28. */
.informacion-a-familias .familias-quienes-desc,
.informacion-a-familias .familias-bloque-desc,
.informacion-a-familias .familias-admision-desc {
  color: var(--color-dimgray-200);
  font-family: var(--font-raleway);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.informacion-a-familias .familias-quienes-desc p {
  margin: 0 0 1.4em;
}

.informacion-a-familias .familias-quienes-desc p:last-child {
  margin-bottom: 0;
}

.informacion-a-familias .familias-cta {
  display: inline-flex;
  align-items: center;
  column-gap: 14px;
  margin-top: 40px;
  padding: 18px 32px;
  background-color: var(--color-dimgray-200);
  color: var(--color-white);
  font-family: var(--font-poppins);
  font-size: 20px;
  font-weight: 600;
}

.informacion-a-familias .familias-cta:hover {
  opacity: 0.9;
}

/* --- Listado de etapas --- */

/* Las barras van a 390 dentro de su columna, que es más ancha. */
.informacion-a-familias .familias-oferta .oferta-list {
  max-width: 390px;
}

.informacion-a-familias .oferta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 18px;
}

/* Medidas tomadas de la maqueta: barra de 68 de alto, etiqueta a 22px
   alineada a la izquierda con 55 de sangrado y el chevron pegado al lado
   derecho. */
.informacion-a-familias .oferta-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  min-height: 68px;
  /* 390 - 55 de sangrado - 78 de reserva = 257 para el texto; la etiqueta más
     larga ("Educación Secundaria") mide 252, así que ninguna se parte. */
  padding: 12px 78px 12px 55px;
  background-color: var(--color-gainsboro);
  color: var(--color-dimgray-200);
  font-family: var(--font-poppins);
  font-size: 22px;
  font-weight: 600;
  text-align: left;
}

.informacion-a-familias .oferta-item:hover {
  background-color: #cfd2d5;
}

/* Chevron dibujado en CSS: hereda el color del texto, así vale igual sobre la
   barra gris que sobre el botón oscuro. */
.informacion-a-familias .familias-cta::after,
.informacion-a-familias .oferta-item::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}

.informacion-a-familias .oferta-item::after {
  position: absolute;
  right: 37px;
}

@media (max-width: 992px) {
  .informacion-a-familias .familias-intro-inner {
    grid-template-columns: 1fr;
    row-gap: 50px;
  }
}

/* --- Normativa / Información económica --- */

/* Misma banda gris que .familias-intro, sin separación: en la maqueta las dos
   filas comparten fondo y forman un único bloque. */
.informacion-a-familias .familias-bloques {
  width: 100%;
  min-width: 0;
  background-color: var(--color-gainsboro);
  padding: 70px 20px 90px;
  box-sizing: border-box;
}

.informacion-a-familias .familias-actividades-inner,
.informacion-a-familias .familias-bloques-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 6rem;
  row-gap: 60px;
  align-items: start;
  width: 100%;
  max-width: 1558px;
  margin: 0 auto;
}



.informacion-a-familias .familias-bloque-desc p {
  margin: 0 0 1.4em;
}

.informacion-a-familias .familias-bloque-desc p:last-child {
  margin-bottom: 0;
}

/* Variante de botón en tono claro; en la maqueta la usa el bloque de
   información económica. */
.informacion-a-familias .familias-cta--claro {
  background-color: var(--color-darkgray);
}

/* --- Procesos de admisión --- */

.informacion-a-familias .familias-admision {
  width: 100%;
  min-width: 0;
  padding: 80px 20px 90px;
  box-sizing: border-box;
  text-align: center;
}

/* En admisión el encabezado va algo más pegado a su texto. */
.informacion-a-familias .familias-admision h2 {
  margin-bottom: 25px;
}

/* En admisión el texto va acotado y centrado bajo su encabezado. */
.informacion-a-familias .familias-admision-desc {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
}

.informacion-a-familias .familias-admision-desc p {
  margin: 0;
}

@media (max-width: 992px) {
  .informacion-a-familias .familias-actividades-inner,
  .informacion-a-familias .familias-bloques-inner {
    grid-template-columns: 1fr;
  }
}

/* --- Actividades complementarias / Proyecto educativo --- */

/* Banda blanca entre las dos grises. */
.informacion-a-familias .familias-actividades {
  width: 100%;
  min-width: 0;
  padding: 80px 20px 90px;
  box-sizing: border-box;
}

/* Variante perfilada del listado de etapas: aquí las barras van huecas, con
   filete y texto en gris claro, no macizas como en la oferta educativa. */
.informacion-a-familias .oferta-list--outline {
  max-width: 390px;
  margin-top: 40px;
  row-gap: 18px;
}

.informacion-a-familias .oferta-list--outline .oferta-item {
  background-color: transparent;
  border: 1px solid var(--color-gainsboro);
  color: var(--color-darkgray);
}

.informacion-a-familias .oferta-list--outline .oferta-item:hover {
  background-color: var(--color-gainsboro);
}

/* En Normas / Información económica los dos textos tienen largos muy
   distintos. Las columnas se igualan en altura y el botón se empuja al fondo
   para que ambos queden en la misma línea. */
.informacion-a-familias .familias-bloques-inner {
  align-items: stretch;
}

.informacion-a-familias .familias-bloques .familias-bloque {
  display: flex;
  flex-direction: column;
}

.informacion-a-familias .familias-bloques .familias-bloque-desc {
  margin-bottom: 40px;
}

.informacion-a-familias .familias-bloques .familias-cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   Admisiones — página interior
   ========================================================================== */

.admisiones .admisiones-intro {
  width: 100%;
  min-width: 0;
  background-color: var(--color-gainsboro);
  padding: 73px 20px;
  box-sizing: border-box;
  text-align: center;
}

.admisiones .admisiones-intro-desc {
  width: 100%;
  max-width: 1558px;
  margin: 0 auto;
  color: var(--color-dimgray-200);
  font-family: var(--font-raleway);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.admisiones .admisiones-intro-desc p {
  margin: 0;
}

/* --- Rejilla de etapas --- */

.admisiones .admisiones-etapas {
  width: 100%;
  min-width: 0;
  padding: 70px 20px 90px;
  box-sizing: border-box;
}

.admisiones .admisiones-etapas-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 29px;
  row-gap: 55px;
  align-items: start;
  width: 100%;
  max-width: 1558px;
  margin: 0 auto;
}

.admisiones .admisiones-etapa {
  text-align: center;
}

/* Banda de 500×345: la proporción la fija el CSS, no el recorte del archivo,
   así las seis tarjetas quedan alineadas suba quien suba la foto. */
.admisiones .admisiones-etapa-image img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 18px;
  aspect-ratio: 500 / 345;
  object-fit: cover;
}

/* Poppins Bold 25/35 en rojo, como el resto de títulos del sitio. */
.admisiones .admisiones-etapa-title {
  margin-bottom: 10px;
  color: var(--color-red-100);
  font-family: var(--font-poppins);
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0;
}

.admisiones .admisiones-etapa-link {
  color: var(--color-link);
  font-family: var(--font-raleway);
  font-size: 15px;
  text-decoration: underline;
}

@media (max-width: 992px) {
  .admisiones .admisiones-etapas-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* La franja de transportes cierra el héroe pegada a la banda gris de intro.
     El margen abre ese blanco entre las dos. */
  .admisiones .cabecera {
    margin-bottom: 30px;
  }

  /* Con el texto a 14px, los 73px de arriba y abajo dejaban la banda muy
     holgada para lo que sujeta. */
  .admisiones .admisiones-intro {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .admisiones .admisiones-etapas-list {
    grid-template-columns: 1fr;
    /* En una sola columna el canal de 55px, pensado para separar filas de tres
       tarjetas, deja las etapas demasiado sueltas. */
    row-gap: 17px;
  }

  /* Las tarjetas ocupan todo el ancho: fuera el tope de 480px con el que se
     centraban. Y, como en colegio y el-colegio, el padding lateral se quita de
     la sección para que las fotos vayan a sangre y se pasa a los textos. */
  .admisiones .admisiones-etapa {
    max-width: none;
    margin: 0;
  }

  /* Sin padding, salvo abajo: la última tarjeta cerraba a ras del pie y su
     "¡Bienvenidos!" quedaba pegado. El hueco es mayor que el row-gap de 17px
     a propósito, para que se lea como final de sección y no como otra fila. */
  .admisiones .admisiones-etapas {
    padding: 0 0 40px;
  }

  .admisiones .admisiones-etapa .admisiones-etapa-title,
  .admisiones .admisiones-etapa .admisiones-etapa-link {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ==========================================================================
   Menú del pie — submenú de oferta educativa
   ==========================================================================
   Las etapas cuelgan del epígrafe "Oferta educativa" en vez de ir sueltas en la
   lista. index.css da a .footer-right ul un flex en columna con row-gap 13 y sin
   sangrado, y esa regla alcanza también al .sub-menu por ser descendiente: sin
   esto los hijos salían alineados con los padres y del mismo cuerpo, o sea sin
   leerse como subordinados.
   Va en esta hoja y no en index.css porque el pie con este menú es el de las
   secciones, y son justo las páginas donde carga bachillerato.css.
   ========================================================================== */

/* "Oferta educativa" ya no es un enlace sino un <span> (ver
   salesianos_atocha_epigrafe_menu_pie en functions.php), así que el
   .footer-right a de index.css deja de alcanzarlo y hay que repetir su cuerpo
   aquí. Se deja idéntico a los demás ítems: lo que marca que encabeza el grupo
   es el sangrado de sus hijos, no un color distinto. */
.footer-content > .footer-right .menu-epigrafe {
  display: inline-block;
  color: #fff;
  font-family: var(--font-raleway);
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
}

.footer-content > .footer-right .sub-menu {
  row-gap: 9px;
  margin-top: 9px;
  padding-left: 18px;
}

/* Un punto menos de cuerpo y algo menos de blanco: la jerarquía la marca el
   sangrado, y el contraste se mantiene alto sobre el fondo del pie. */
.footer-content > .footer-right .sub-menu a {
  font-size: 17px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.82);
}

@media screen and (max-width: 768px) {
  .footer-content > .footer-right .sub-menu {
    row-gap: 7px;
    margin-top: 7px;
    padding-left: 14px;
  }
}

/* ==========================================================================
   Submenú de la navegación de sección
   ==========================================================================
   "Oferta educativa" cuelga las cinco etapas. La barra es un flex en fila, así
   que el <ul> anidado hay que sacarlo del flujo o se pinta en línea y parte el
   menú.
   ========================================================================== */

.bachillerato-nav nav ul li {
  position: relative;
}

.bachillerato-nav nav ul li ul {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: stretch;
  column-gap: 0;
  min-width: 250px;
  /* El padding superior hace de separación visual sin dejar hueco muerto
     entre la barra y el desplegable, que cortaría el hover. */
  padding: 22px 0 8px;
  background-color: var(--color-red-100);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bachillerato-nav nav ul li:hover > ul,
.bachillerato-nav nav ul li:focus-within > ul {
  visibility: visible;
  opacity: 1;
}

.bachillerato-nav nav ul li ul li {
  width: 100%;
  text-align: left;
}

.bachillerato-nav nav ul li ul li a {
  display: block;
  padding: 10px 22px;
  text-transform: none;
}

.bachillerato-nav nav ul li ul li a:hover {
  background-color: rgba(0, 0, 0, 0.15);
  opacity: 1;
}

/* En el menú desplegado a pantalla completa no hay hover: las etapas van
   siempre visibles, indentadas bajo su epígrafe. */
@media screen and (max-width: 768px) {
  .navigation-mobile nav ul li ul {
    position: static;
    transform: none;
    visibility: visible;
    opacity: 1;
    min-width: 0;
    padding: 10px 0 0 18px;
    background-color: transparent;
  }

  .navigation-mobile nav ul li ul li {
    border-bottom: none;
    padding: 6px 0;
  }
}

/* ==========================================================================
   Secundaria — sección "¿Qué caracteriza a nuestra ESO?"
   ==========================================================================
   Es la única pieza propia de esta plantilla: el resto (cabecera, razones,
   slider y opiniones) reutiliza tal cual lo de bachillerato.
   ========================================================================== */

.secundaria .caracteristicas {
  width: 100%;
  min-width: 0;
  padding: 70px 20px 90px;
  box-sizing: border-box;
  background-color: #e4e7e9;
  text-align: center;
}

/* Mismo tratamiento que el encabezado de .toda-la-fp en bachillerato: negro,
   peso 600 e interlineado 45. El cuerpo sale de la maqueta de secundaria
   (~40px), igual que el de "5 razones", no los 45 de bachillerato. */
.secundaria .caracteristicas h3 {
  margin: 0 0 60px;
  color: var(--color-black);
  font-family: var(--font-poppins);
  font-size: 40px;
  font-weight: 600;
  line-height: 45px;
}

/* Las tarjetas se topan en 606px, así que las pistas son fijas y el par se
   centra en el contenedor en lugar de estirarse hasta los bordes. */
.secundaria .caracteristicas-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 606px));
  justify-content: center;
  column-gap: 186px;
  row-gap: 70px;
  align-items: start;
  width: 100%;
  max-width: 1558px;
  margin: 0 auto;
}

/* La cabecera de la tarjeta va sobre blanco, separada de la foto. */
.secundaria .caracteristica-head {
  padding: 22px 20px 26px;
  background-color: var(--color-white);
}

.secundaria .caracteristica-epigrafe {
  margin-bottom: 10px;
  color: var(--color-dimgray-100);
  font-family: var(--font-poppins);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.secundaria .caracteristica-title {
  color: var(--color-red-100);
  font-family: var(--font-poppins);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
}

.secundaria .caracteristica-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 625 / 340;
  object-fit: cover;
}

.secundaria .caracteristica-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  margin-top: 24px;
  padding: 20px;
  color: var(--color-white);
  font-family: var(--font-poppins);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.secundaria .caracteristica-cta:hover {
  opacity: 0.9;
}

/* Los cuatro tonos de la maqueta; todos son tokens que ya existen. */
.secundaria .caracteristica-cta--gris {
  background-color: var(--color-darkgray);
}

.secundaria .caracteristica-cta--pizarra {
  background-color: var(--color-dimgray-200);
}

.secundaria .caracteristica-cta--negro {
  background-color: var(--color-black);
}

.secundaria .caracteristica-cta--rojo {
  background-color: var(--color-red-100);
}

/* Mismo botón que el "Reserva de plaza" de .toda-la-fp en bachillerato: la
   clase .cta ya trae el grueso del estilo, así que aquí solo queda el tope de
   ancho y la separación con las tarjetas. */
.secundaria .caracteristicas-reserva {
  width: 100%;
  max-width: 628px;
  /* .cta es un flex de nivel bloque: el text-align de la sección no lo centra,
     hacen falta los márgenes automáticos. En bachillerato lo centra el
     align-items de .toda-la-fp, que aquí no aplica. */
  margin: 80px auto 40px;
  /* En bachillerato los 29px los hereda de .toda-la-fp; aquí se fijan en el
     botón para no cascadearlos a las tarjetas. */
  font-size: 29px;
}

@media (max-width: 992px) {
  .secundaria .caracteristicas-list {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 50px;
    max-width: 620px;
  }

  .secundaria .caracteristicas-reserva {
    margin-top: 50px;
  }
}

/* main es un flex en columna que no estira sus hijos, así que una sección se
   queda al ancho de su contenido. Con cinco slides eso no se nota, pero con
   uno solo el slider colapsaba a ~200px. Esta banda va a sangre siempre. */
.secundaria .slider,
.secundaria .slider .mySwiper {
  width: 100%;
  min-width: 0;
}

.secundaria .slider .swiper-slide {
  flex-shrink: 0;
}

/* Entre el nombre y la cita va el campo "cargo", que en estas secciones está
   vacío y colapsa a altura cero, dejando los dos textos pegados. El aire se
   pone en la cita, no en el nombre, para que cuando sí haya cargo siga
   quedando junto al nombre y la separación caiga antes del testimonio. */
.bachillerato .opiniones-block .opiniones .opinion .opinion-content {
  margin-top: 16px;
}

/* --- Tarjetas desplegables de Secundaria --- */

/* Al abrir, la cabecera se tiñe de gris y la foto deja paso al texto. */
/* La cabecera desplegada toma el tono de su propia tarjeta, el mismo que pinta
   su botón: el tono es una propiedad de la tarjeta, no del botón, así que el
   modificador va en el article y desde ahí alcanza a las dos piezas.
   Gris es el tono por defecto y se queda en la regla base. */
.secundaria .caracteristica.is-open .caracteristica-head {
  background-color: var(--color-darkgray);
}

.secundaria .caracteristica--pizarra.is-open .caracteristica-head {
  background-color: var(--color-dimgray-200);
}

.secundaria .caracteristica--negro.is-open .caracteristica-head {
  background-color: var(--color-black);
}

.secundaria .caracteristica--rojo.is-open .caracteristica-head {
  background-color: var(--color-red-100);
}

/* Sobre el gris, los dos rótulos van en blanco: cerrada la tarjeta son gris
   oscuro y rojo sobre fondo blanco. Va fuera del bloque de móvil porque el
   estado abierto y su fondo gris son comunes a todos los anchos. */
.secundaria .caracteristica.is-open .caracteristica-epigrafe,
.secundaria .caracteristica.is-open .caracteristica-title {
  color: var(--color-white);
}

.secundaria .caracteristica.is-open .caracteristica-image {
  display: none;
}

.secundaria .caracteristica-texto {
  padding: 34px 26px 30px;
  background-color: var(--color-white);
  color: var(--color-dimgray-200);
  font-family: var(--font-raleway);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
}

.secundaria .caracteristica-texto p {
  margin: 0 0 1.4em;
}

.secundaria .caracteristica-texto p:last-child {
  margin-bottom: 0;
}

/* El botón es un <button>: hay que quitarle los estilos de formulario para
   que se vea igual que el <a> de las tarjetas sin desplegable. */
.secundaria button.caracteristica-cta {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-poppins);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
}

/* Botón de cierre: 45×45 a 16/17 del borde, filete oscuro y fondo
   transparente, medido sobre la maqueta. Solo existe con la tarjeta abierta;
   cerrada, el disparador es el botón inferior.
   En el marcado cuelga del final del article, no de la cabecera, porque en
   móvil cierra la tarjeta por abajo. Aquí se ancla al article, cuyo borde
   superior es el mismo que el de la cabecera, así que el resultado es idéntico
   al de antes. */
.secundaria .caracteristica {
  position: relative;
}

.secundaria .caracteristica-cerrar {
  position: absolute;
  top: 16px;
  right: 17px;
  display: none;
  width: 45px;
  height: 45px;
  padding: 0;
  /* Filete y aspa en blanco: el botón se dibuja sobre la cabecera abierta, que
     toma el tono de la tarjeta —gris, pizarra, negro o rojo—, y en negro
     desaparecía sobre pastoral y perdía contraste sobre las otras. El blanco
     es además el color que ya llevan los dos rótulos de al lado.
     En móvil no aplica: allí el botón baja al pie sobre fondo blanco y su
     regla propia lo devuelve a gris oscuro y sin filete. */
  border: 2px solid var(--color-white);
  background-color: transparent;
  color: var(--color-white);
  font-family: var(--font-poppins);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.secundaria .caracteristica.is-open .caracteristica-cerrar {
  display: block;
}

/* La etiqueta "Cerrar" es solo para móvil; aquí manda la X. */
.secundaria .caracteristica-cerrar-label {
  display: none;
}

.secundaria .caracteristica-cerrar:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

/* Con la tarjeta abierta manda la X: el botón inferior desaparece, como en
   la maqueta actualizada. */
.secundaria .caracteristica.is-open .caracteristica-cta {
  display: none;
}

/* El encabezado de razones va algo menor que en el resto de secciones, que
   heredan los 45px de index.css. Además se suelta del contenedor de 1558:
   en una línea necesita 1638, así que se le deja usar el ancho de la ventana
   y se centra sobre ella. Si no cabe, vuelve a partir con normalidad. */
.secundaria .razones h3 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 60px);
  font-size: 40px;
  line-height: 45px;
}

/* Los 100px que index.css reserva bajo la rejilla dejan demasiado aire antes
   del slider, pero cero deja el texto pegado a la foto: aquí abajo no hay
   padding de sección que amortigüe.
   Estuvo en cero y no se notaba porque las descripciones de secundaria vienen
   envueltas en <p> y su margen inferior hacía de separación por accidente; al
   anularlo para igualar el espacio bajo el título, el bloque quedó a hueso.
   Los 40 son los mismos que .razones deja por arriba, así que la sección
   respira igual por los dos lados. */
.secundaria .razones-list {
  margin-bottom: 40px;
}

/* El h3 de opiniones lleva line-height 32 con cuerpo 35, así que el subtítulo
   queda pegado. En la referencia de bachillerato hay unos 31px de aire entre
   ambos; con margen 0 aquí salían 13. Va en el nivel compartido para que
   primaria y secundaria queden igual. */
.bachillerato .opiniones-block h3 {
  margin-bottom: 18px;
}

/* Página actual en el menú. WordPress ya marca los <li> con current-menu-item;
   el ancestro se marca también para que "Oferta educativa" quede resaltado
   cuando estás en una de sus etapas. */
.bachillerato-nav nav ul li.current-menu-item > a,
.bachillerato-nav nav ul li.current-menu-ancestor > a,
.navigation-mobile nav ul li.current-menu-item > a,
.navigation-mobile nav ul li.current-menu-ancestor > a {
  font-weight: 700;
}

/* El menú a pantalla completa comparte z-index 2 con .header-bottom del héroe,
   y al ir después en el DOM el contenido le ganaba. Un overlay tiene que estar
   por encima de la página, así que se le sube el índice en lugar de bajárselo
   al héroe: así no vuelve a romperse si mañana otro bloque usa z-index 2. */
.navigation-mobile {
  z-index: 100;
}

/* ==========================================================================
   Colegio — móvil
   ==========================================================================
   La maqueta móvil sigue a bachillerato: vídeo, franja de transportes y
   razones. El formulario no aparece; se llega a él por el CTA rojo de la
   barra superior.
   ========================================================================== */

/* En escritorio la franja no existe: el héroe es vídeo + formulario. */
.colegio .transporte {
  display: none;
}

@media screen and (max-width: 768px) {
  /* Con el vídeo en el flujo, el héroe deja de ser una fila: vídeo arriba y
     franja debajo, cada uno a todo el ancho. Y sin min-height, para que la
     sección se ajuste al contenido en vez de dejar hueco. */
  .colegio .cabecera {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    /* El respiro hasta las tarjetas se da aquí y no como padding-top de
       .razones: en móvil esa sección lleva fondo gris, y metido dentro el
       hueco salía gris en vez de continuar el blanco del héroe. */
    margin-bottom: 18.35px;
  }

  /* El vídeo deja de ser fondo absoluto y pasa al flujo, como hace la imagen
     móvil en el resto de secciones, para que la franja caiga debajo. */
  .colegio .cabecera-video {
    position: static;
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  /* Separación entre la imagen y el claim. El selector lleva header-bottom-left
     para ganar a .bachillerato .header-bottom-left .transporte, que resetea el
     padding y es más específico. */
  .colegio .header-bottom-left .transporte {
    padding-top: 14.5px;
  }

  /* Con el vídeo en su sitio, la imagen móvil sobra. */
  .colegio .header-bottom-left img.mobile {
    display: none;
  }

  /* Se oculta la columna entera, no solo el formulario: si queda como ítem
     flex vacío, el row-gap de 30px del héroe sigue reservando su hueco. */
  .colegio .cabecera .header-bottom-right {
    display: none;
  }

  /* En columna, el align-items: start del héroe encoge los hijos al ancho de
     su contenido; bachillerato lo resuelve igual. */
  .colegio .header-bottom-left {
    width: 100%;
  }

  .colegio .transporte {
    display: flex;
    width: 100%;
  }

  /* Las fotos van a sangre, como en la maqueta: el padding de 40px que
     .bachillerato .razones aplica en móvil se quita de la sección y se pasa a
     los textos, que sí van metidos. */
  .colegio .razones {
    padding-left: 0;
    padding-right: 0;
  }

  .colegio .razon .razon-title,
  .colegio .razon .razon-desc {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* El cuerpo lo fija la regla común de tarjetas del final del fichero; aquí
     solo queda el peso, que en móvil baja de los 700 de la maqueta. */
  .colegio .razon .razon-title {
    font-weight: 600;
  }
}

/* ==========================================================================
   Tarjetas de las secciones nuevas — cuerpo en móvil
   ==========================================================================
   Cada sección nombra sus tarjetas a su manera (razon, bloque, documento,
   caracteristica, familias-bloque, admisiones-etapa) porque cada maqueta
   llegó por separado, pero en móvil todas comparten cuerpo: 20/24 el título
   y 14/22 el texto. Se agrupan aquí en vez de repetirlo sección por sección.

   Va al final del fichero y con los selectores completos (tres clases) a
   propósito: las reglas de escritorio a las que gana llegan hasta esa misma
   especificidad —.colegio .razon .razon-title,
   .informacion-a-familias .familias-bloques .familias-bloque-desc—, así que
   el desempate lo tiene que poner el orden.
   ========================================================================== */

@media screen and (max-width: 768px) {
  .colegio .razon .razon-title,
  .secundaria .razon .razon-title,
  .el-colegio .bloque .bloque-title,
  .ambiente-seguro .documento .documento-title,
  .admisiones .admisiones-etapa .admisiones-etapa-title,
  .el-colegio .instalaciones h3,
  .informacion-a-familias .familias-intro h2,
  .informacion-a-familias .familias-actividades h2,
  .informacion-a-familias .familias-bloques h2,
  .informacion-a-familias .familias-admision h2,
  .ambiente-seguro .buzon-content h3,
  .secundaria .razones h3,
  .secundaria .caracteristicas h3 {
    font-size: 20px;
    line-height: 24px;
  }

  .colegio .razon .razon-desc,
  .secundaria .razon .razon-desc,
  .el-colegio .bloque .bloque-desc,
  .secundaria .caracteristica .caracteristica-texto,
  .informacion-a-familias .familias-quienes-desc,
  .informacion-a-familias .familias-bloque-desc,
  .informacion-a-familias .familias-admision-desc,
  .el-colegio .instalaciones-desc > p,
  .admisiones .admisiones-intro-desc,
  .ambiente-seguro .compromiso-desc,
  .ambiente-seguro .buzon-desc {
    font-size: 14px;
    line-height: 22px;
  }

  /* En móvil todo el texto va centrado. La mayoría de secciones ya lo estaban
     (razones, bloques, instalaciones, documentos, compromiso, etapas,
     características, admisión); estas cuatro se habían quedado alineadas a la
     izquierda, que es como van en escritorio. */
  .informacion-a-familias .familias-intro,
  .informacion-a-familias .familias-actividades,
  .informacion-a-familias .familias-bloques,
  .ambiente-seguro .buzon {
    text-align: center;
  }

  /* El contenido entra 36px por los lados desde el final de la banda de
     transportes, en vez de los 20 de escritorio. Va como padding y no como
     margen porque compromiso y documentos llevan fondo gainsboro: con margen
     las bandas se encogerían y dejarían dos franjas blancas a los lados. */
  .ambiente-seguro .compromiso,
  .ambiente-seguro .documentos,
  .ambiente-seguro .buzon {
    padding-left: 36px;
    padding-right: 36px;
  }

  /* Las dos comparten fondo gainsboro y van seguidas, así que su padding se lee
     como un único bloque: 50/20 + 40/80. Se recortan a la mitad manteniendo esa
     proporción en vez de igualarlas, para no perder el reparto de la maqueta.
     Entre las dos quedan 30px, el mismo aire que en el resto del pase. */
  .ambiente-seguro .compromiso {
    padding-top: 30px;
    padding-bottom: 10px;
  }

  .ambiente-seguro .documentos {
    padding-top: 20px;
    padding-bottom: 40px;
  }

  /* Es la última sección: debajo ya entra el aire del pie. */
  .ambiente-seguro .buzon {
    padding-bottom: 30px;
  }

  /* Los "Saber más" van a un ancho fijo. Con box-sizing content-box —el reset
     universal de global.css está comentado— los 200px serían de contenido y el
     botón acabaría en 264; de ahí el border-box. Y el padding lateral baja de
     32 a 16 porque ahora el ancho lo fija la caja, no el texto: con 32 a cada
     lado el "Saber más" y su flecha se quedaban sin sitio dentro de los 200. */
  .informacion-a-familias .familias-cta {
    width: 200px;
    box-sizing: border-box;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* En esta sección el bloque es un flex en columna y el botón iba clavado a la
     izquierda con align-self, que el text-align de la sección no alcanza. */
  .informacion-a-familias .familias-bloques .familias-cta {
    align-self: center;
  }

  /* El contenido entra 36px por los lados desde Quiénes somos hasta el final
     de la página, en vez de los 20 que traía de escritorio. */
  .informacion-a-familias .familias-intro,
  .informacion-a-familias .familias-actividades,
  .informacion-a-familias .familias-bloques,
  .informacion-a-familias .familias-admision {
    padding-left: 36px;
    padding-right: 36px;
  }

  /* Oferta educativa sale como banda blanca. En escritorio comparte la banda
     #f8f8f8 con "Quiénes somos" porque van en dos columnas; apilados en móvil,
     el cambio de fondo es lo que los separa.
     El margen negativo cancela los 36px laterales de .familias-intro para que
     el blanco llegue a los bordes, y la sección pierde su padding inferior: si
     no, quedaría un filo del gris de .familias-intro entre esta banda y
     familias-actividades. El aire de abajo lo pone la propia banda, para que
     sea blanco y no del gris de la sección siguiente. */
  .informacion-a-familias .familias-intro {
    padding-bottom: 0;
  }

  .informacion-a-familias .familias-oferta {
    background-color: var(--color-white);
    margin: 0 -36px;
    padding: 40px 36px;
  }

  /* .oferta-list va a 390px con margin: 0, así que en una banda a todo el ancho
     se quedaba pegada a la izquierda pese al centrado de la sección. El tope
     baja a 299: se pone en la lista y no en cada barra para que sigan
     estirándose hasta el ancho común en vez de encogerse cada una a su texto. */
  .informacion-a-familias .familias-oferta .oferta-list {
    max-width: 299px;
    margin-left: auto;
    margin-right: auto;
  }

  /* El cuerpo baja al mismo 14px que el resto de la página en móvil, y aquí no
     es solo estética: el padding de la barra reserva 55px de sangrado y 78 para
     la flecha, así que dentro de 299 quedan 166 para el texto. "Educación
     Secundaria", la etiqueta más larga, mide 252 a 22px — a 14 se queda en 160
     y entra justa. Si el cuerpo sube, hay que bajar antes ese padding. */
  .informacion-a-familias .familias-oferta .oferta-item {
    font-size: 14px;
  }

  /* Actividades complementarias pasa a banda gris: apiladas en móvil, las
     secciones se distinguen por el fondo. Queda blanco (Oferta educativa) →
     gris → gainsboro (Normas). Se usa el mismo #f8f8f8 de .familias-intro y no
     gainsboro a propósito: .familias-bloques va justo debajo con gainsboro y
     las dos se leerían como un único bloque. */
  .informacion-a-familias .familias-actividades {
    background-color: #f8f8f8;
    /* Los 80px de escritorio separaban esta sección de la anterior sobre fondo
       continuo; aquí el cambio de color ya la separa. */
    padding-top: 40px;
  }

  /* Proyecto educativo, el segundo bloque de la sección, sale como banda blanca
     dentro del gris —mismo recurso que Oferta educativa dentro de la intro—.
     El margen negativo iguala los 36px laterales para llegar a los bordes, y la
     sección pierde su padding inferior para que la banda cierre a ras contra
     familias-bloques y no quede un filo gris entre las dos.
     El :nth-child(2) está calibrado para los dos bloques de hoy; si el
     repetidor crece, el bloque nuevo se quedará en gris, no descolocado. */
  .informacion-a-familias .familias-actividades {
    padding-bottom: 0;
  }

  .informacion-a-familias .familias-actividades-inner .familias-bloque:nth-child(2) {
    background-color: var(--color-white);
    margin: 0 -36px;
    padding: 40px 36px;
  }

  /* Normas de organización pasa del gainsboro al mismo gris claro que intro y
     actividades, para que todas las bandas de la página usen un único gris.
     Información económica, el segundo bloque, sale en blanco con el mismo
     recurso que Oferta educativa y Proyecto educativo: margen negativo de 36
     para llegar a los bordes, y la sección sin padding inferior para que la
     banda cierre a ras en vez de dejar un filo gris.
     El :nth-child(2) está calibrado para los dos bloques de hoy. */
  .informacion-a-familias .familias-bloques {
    background-color: #f8f8f8;
    padding-bottom: 0;
  }

  .informacion-a-familias .familias-bloques-inner .familias-bloque:nth-child(2) {
    background-color: var(--color-white);
    margin: 0 -36px;
    padding: 40px 36px;
  }

  /* index.css deja .cta-pie en 20px por los cuatro lados en móvil, y arriba se
     queda corto: el "¡Bienvenidos!" nace pegado a la sección anterior. Va aquí
     y no en index.css a propósito — ese fichero carga en todo el sitio, y este
     solo en las páginas de sección, que son las que comparten este pie. */
  .cta-pie {
    padding-top: 50px;
  }

  /* Procesos de admisión cierra la alternancia en gris. Sin esto se fundía con
     la banda blanca de Información económica, que va justo encima. Y con el
     color separando ya la sección, los 80px de arriba sobran, igual que en
     actividades. */
  .informacion-a-familias .familias-admision {
    background-color: #f8f8f8;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Las barras de esta sección van huecas con filete, así que sobre el gris de
     la banda se quedaban sin dibujar. En blanco recortan igual que las macizas
     de Oferta educativa, y con el mismo cuerpo de 14px que aquellas: aquí la
     lista va a 390 y no a 299, así que sobra sitio para las etiquetas. */
  .informacion-a-familias .oferta-list--outline .oferta-item {
    background-color: var(--color-white);
    font-size: 14px;
  }

  /* "5 razones" nace pegado al héroe: .bachillerato .razones aplica
     padding: 0 40px en móvil, que deja el superior a cero. Va al final del
     fichero porque esa regla común está por encima y tiene la misma
     especificidad. */
  .secundaria .razones {
    padding-top: 30px;
  }

  /* --- "¿Qué caracteriza a nuestra ESO?" --- */

  /* Las tarjetas van a sangre, así que el padding lateral sale de la sección y
     se lo quedan el encabezado y el CTA del pie, que sí van metidos. Los 40px
     son los mismos con los que entra el texto de "5 razones". */
  .secundaria .caracteristicas {
    padding-top: 30px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .secundaria .caracteristicas h3 {
    margin-bottom: 24px;
    padding-left: 40px;
    padding-right: 40px;
  }

  /* El botón se acota a 299 y se centra con márgenes automáticos, porque .cta
     es un flex de nivel bloque al 100% y el text-align de la sección no lo
     mueve. Conserva sus 29px: el rótulo entra en los 299 justo porque aquí no
     lleva flecha —la flecha y sus márgenes se comían los 38px que faltaban. */
  .secundaria .caracteristicas-reserva {
    max-width: 299px;
    margin-left: auto;
    margin-right: auto;
  }

  .secundaria .caracteristicas-reserva img {
    display: none;
  }

  /* Los 100px del bloque de opiniones cuentan con la banda de imagen que abre
     la sección en el resto de páginas; secundaria no la trae, así que ahí son
     hueco vacío. */
  .secundaria .opiniones-block {
    padding-top: 30px;
  }

  /* El tope de 620px con el que la rejilla se centraba dejaría banda gris a los
     lados en cuanto la pantalla lo supere. */
  .secundaria .caracteristicas-list {
    max-width: none;
  }

  /* El botón se pega a la tarjeta: sin los 24px que lo separaban. Y el cuerpo
     baja a los 14px del resto del pase; el selector lleva .caracteristica para
     ganar a .secundaria button.caracteristica-cta, que fija los 22 y es más
     específico que la regla común de la que cuelga. */
  .secundaria .caracteristica .caracteristica-cta {
    margin-top: 0;
    font-size: 14px;
  }

  /* El rótulo grande de la tarjeta es .caracteristica-epigrafe y el pequeño
     .caracteristica-title — el nombre va al revés de lo que se ve. */
  .secundaria .caracteristica-epigrafe {
    font-size: 22px;
  }

  .secundaria .caracteristica-title {
    font-size: 13px;
    line-height: 18px;
  }

  /* Cerrar pasa a ser un pie de tarjeta: chevron sobre la palabra, centrado y a
     todo el ancho, en vez del recuadro con la X de escritorio. Sale del flujo
     absoluto y se coloca donde lo dejó el marcado, detrás del texto. */
  .secundaria .caracteristica-cerrar {
    position: static;
    width: 100%;
    height: auto;
    padding: 26px 20px 30px;
    border: 0;
    color: var(--color-dimgray-100);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .secundaria .caracteristica.is-open .caracteristica-cerrar {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 8px;
  }

  /* El chevron se dibuja con dos filetes girados, como el de .oferta-item: a
     -45 grados apunta hacia arriba. */
  .secundaria .caracteristica-cerrar::before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(-45deg);
  }

  .secundaria .caracteristica-cerrar:hover {
    background-color: transparent;
  }

  .secundaria .caracteristica-cerrar-x {
    display: none;
  }

  /* Cabecera de tarjeta, abierta o cerrada: se recorta a la mitad por arriba y
     por abajo. */
  .secundaria .caracteristica-head {
    padding-top: 11px;
    padding-bottom: 13px;
  }

  /* El blanco lo pone .caracteristica-texto, no el article, así que sin esto
     "Cerrar" caía sobre el #e4e7e9 de la sección en vez de cerrar el panel. */
  .secundaria .caracteristica-cerrar {
    background-color: var(--color-white);
  }

  .secundaria .caracteristica-cerrar-label {
    display: block;
  }

  /* El enlace de cada tarjeta venía a un cuerpo distinto por sección (18, 16 y
     15) porque cada maqueta llegó por separado; en móvil van los tres igual.
     Solo los enlaces de texto: familias-cta, oferta-item y caracteristica-cta
     son botones con fondo y padding propios, y se quedan como están. */
  .el-colegio .bloque .bloque-link,
  .ambiente-seguro .documento .documento-link,
  .admisiones .admisiones-etapa .admisiones-etapa-link {
    font-size: 14px;
  }
}