/* Estilos header*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
}

/* Encabezado */
.header {
  background: #102a43;
  border-bottom: 3px solid #d5dce2;
}

.header-contenido {
  max-width: 1400px;
  min-height: 100px;
  margin: auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Escudo y nombre */
.marca {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  flex-shrink: 0;
}

.marca img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.marca span {
  font-size: 27px;
  font-weight: 700;
  white-space: nowrap;

  color: #d4af37;
  background: linear-gradient(
    180deg,
    #fff2b0 0%,
    #e8c45a 40%,
    #c49424 70%,
    #f6dc83 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Zona del botón y navegación */
.header-derecha {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.menu .boton-ingresar {
  padding: 15px 32px;
  min-width: 135px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;

  background: #3b5f88;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);

  transition:
    background-color 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}

.menu .boton-ingresar:hover {
  background: #4a719d;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Evita la línea verde bajo el botón */
.menu .boton-ingresar::after {
  display: none;
}

/* Menú */
.menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.menu a {
  position: relative;
  display: block;
  padding: 12px 0;
  color: #e7edf3;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Línea verde bajo los enlaces */
.menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: #38bfa7;
  transform: scaleX(0);
  transition: transform 0.2s;
}

.menu a:hover::after,
.menu a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Navegación con teclado */
a:focus-visible {
  outline: 2px solid #f2c45d;
  outline-offset: 5px;
}

/* Tabletas y celulares */
@media (max-width: 850px) {
  .header-contenido {
    flex-direction: column;
    gap: 16px;
  }

  .header-derecha {
    width: 100%;
    align-items: center;
  }

  .menu {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 20px;
  }
}

@media (max-width: 420px) {
  .header-contenido {
    padding: 14px;
  }

  .marca img {
    width: 50px;
    height: 50px;
  }

  .marca span {
    font-size: 22px;
  }

  .menu a {
    font-size: 13px;
  }
}
html {
  scroll-behavior: smooth;
}

/*
  El header y la portada completan la primera pantalla.
  La altura del header se calcula automáticamente.
*/
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.header {
  flex-shrink: 0;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.portada {
  position: relative;
  flex: 1;
  min-height: 360px;
  /*filter: brightness(70%); /* Entre 0% y 100% (más cercano a 0 es más oscuro) */
  background-image: url("imagenes/fondo-colegio.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

/*
  Las secciones inferiores quedan fuera del cálculo
  de altura de la primera pantalla.
*/
body:has(.portada) {
  height: 100vh;
  height: 100svh;
}

body:has(.portada) main {
  min-height: 0;
}

.seccion {
  flex-shrink: 0;
}

/* Reservar en main solo el espacio de la portada */
.portada {
  flex-shrink: 0;
}

body:has(.portada) main {
  display: block;
}

body:has(.portada) .portada {
  height: 100%;
}

/* Logo en la esquina inferior izquierda */
.logo-aniversario {
  position: absolute;
  left: clamp(20px, 4vw, 64px);
  bottom: clamp(20px, 4vh, 48px);
  width: clamp(100px, 12vw, 180px);
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Video en la esquina inferior derecha */
.video-portada {
  position: absolute;
  right: clamp(20px, 4vw, 24px);
  bottom: clamp(20px, 4vh, 8px);

  width: clamp(280px, 32vw, 480px);
  aspect-ratio: 16 / 9;

  overflow: hidden;
  /*color del borde del video*/
  border: 1px solid #000000;
  border-radius: 5px;
  background: #000;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.video-portada video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Contenido del onepage */
.seccion {
  padding: 80px max(24px, calc((100% - 1200px) / 2));
  background: #ffffff;
  color: #102a43;
}

.seccion:nth-of-type(odd) {
  background: #f1f5f9;
}

.seccion h1,
.seccion h2 {
  margin-bottom: 20px;
  font-size: 32px;
}

.seccion p {
  line-height: 1.7;
}

/* En celulares, el logo y el video se apilan */
@media (max-width: 600px) {
  body:has(.portada) {
    height: auto;
  }

  body:has(.portada) .portada {
    height: auto;
    min-height: 560px;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
  }

  .logo-aniversario {
    position: static;
    width: 110px;
  }

  .video-portada {
    position: static;
    width: 100%;
    max-width: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* Botón hamburguesa oculto en computadoras */
.boton-menu {
  display: none;
  width: 48px;
  height: 44px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  background: #304e73;
  cursor: pointer;
}

.boton-menu span {
  display: block;
  width: 100%;
  height: 3px;
  margin: 4px 0;
  border-radius: 3px;
  background: #ffffff;
  transition:
    transform 0.25s,
    opacity 0.25s;
}

/* Menú para teléfonos y tabletas pequeñas */
@media (max-width: 850px) {
  .header-contenido {
    position: relative;
    min-height: 90px;
    padding: 10px 20px;
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
  }

  .header-derecha {
    width: auto;
    margin-left: auto;
  }

  .boton-menu {
    display: block;
  }

  .navegacion {
    position: absolute;
    top: 100%;
    right: 16px;
    left: 16px;
    z-index: 1000;

    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;

    border-radius: 0 0 10px 10px;
    background: #102a43;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);

    transition:
      max-height 0.3s ease,
      opacity 0.25s ease,
      visibility 0.25s;
  }

  .navegacion.abierta {
    max-height: 500px;
    visibility: visible;
    opacity: 1;
  }

  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 18px 20px;
  }

  .menu li {
    width: 100%;
  }

  .menu a {
    width: 100%;
    padding: 14px 8px;
    font-size: 16px;
    text-align: center;
  }

  .menu a::after {
    bottom: 5px;
  }

  .menu .boton-ingresar {
    width: 100%;
    min-width: 0;
    margin-top: 10px;
    padding: 15px 24px;
  }

  /* Animación para convertirlo en una X */
  .boton-menu.activo span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .boton-menu.activo span:nth-child(2) {
    opacity: 0;
  }

  .boton-menu.activo span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (max-width: 480px) {
  .marca {
    gap: 10px;
  }

  .marca img {
    width: 62px;
    height: 62px;
  }

  .marca span {
    font-size: 20px;
  }
}

.accesos-noticias {
  padding: 48px 24px;
  background: #ffffff;
}

.accesos-noticias-contenido {
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.65fr);
  align-items: start;
  gap: 36px;
}

/* Cuatro accesos */
.accesos {
  display: grid;
  gap: 14px;
}

.acceso {
  display: flex;
  align-items: center;
  gap: 16px;

  min-height: 82px;
  padding: 18px 20px;
  border: 1px solid #e5ecef;
  border-radius: 10px;

  background: #f6f8fa;
  color: #17354b;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;

  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

.acceso:hover {
  background: #edf7f3;
  border-color: #8bbdaa;
  box-shadow: 0 5px 14px rgba(16, 42, 67, 0.08);
}

.acceso-icono {
  flex: 0 0 38px;
  color: #558f7c;
  font-size: 34px;
  text-align: center;
  line-height: 1;
}

.acceso-flecha {
  margin-left: auto;
  color: #558f7c;
  font-size: 26px;
}

/* Espacio de noticias */
.noticias-inicio {
  min-width: 0;
}

.noticias-inicio h2 {
  margin-bottom: 16px;
  color: #102a43;
  font-size: 26px;
}

.noticias-espacio {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 24px;

  border: 1px solid #cfdfd9;
  border-radius: 12px;
  background: #e8f3ee;
  color: #34584c;
  text-align: center;
}

.noticias-pie {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.noticias-ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 12px 22px;
  border-radius: 7px;
  background: #304e73;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.noticias-ver-mas:hover {
  background: #42658e;
}

/* En teléfonos, las noticias quedan debajo de los accesos */
@media (max-width: 700px) {
  .accesos-noticias {
    padding: 32px 20px;
  }

  .accesos-noticias-contenido {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .acceso {
    min-height: 74px;
  }
}

/* Contenedor del carrusel: mantiene el tamaño de las imágenes */
.carrusel-noticias {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 2px solid #315f88;
  border-radius: 12px;
  background: #102a43;
}

/* Cada noticia ocupa toda la superficie del carrusel */
.carrusel-contenido,
.noticia-slide,
.noticia-enlace {
  width: 100%;
  height: 100%;
}

.noticia-slide {
  position: relative;
  margin: 0;
}

/* Las noticias inactivas quedan fuera de la vista y del teclado */
.noticia-slide[hidden] {
  display: none;
}

/* Toda la noticia funciona como enlace a la página de noticias */
.noticia-enlace {
  position: relative;
  display: block;
  color: #ffffff;
  text-decoration: none;
}

/* Las imágenes llenan el espacio sin deformarse */
.noticia-imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El degradado permite leer el encabezado sobre la fotografía */
.noticia-titulo {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 48px 24px 22px;

  background: linear-gradient(
    transparent,
    rgba(6, 22, 38, 0.95)
  );

  color: #ffffff;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.3;
}

/* Flechas ubicadas en los extremos del carrusel */
.carrusel-flecha {
  position: absolute;
  top: 40%;
  z-index: 1;
  transform: translateY(-50%);

  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;

  background: rgba(16, 42, 67, 0.8);
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
}

.carrusel-anterior {
  left: 12px;
}

.carrusel-siguiente {
  right: 12px;
}

.carrusel-flecha:hover {
  background: #315f88;
}

/* Distribución del control de pausa y el enlace Ver más */
.noticias-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.carrusel-pausa {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #ccd7e2;
  border-radius: 7px;

  background: #ffffff;
  color: #304e73;
  font: inherit;
  cursor: pointer;
}

/* Indicadores de foco para la navegación con teclado */
.carrusel-flecha:focus-visible,
.carrusel-pausa:focus-visible {
  outline: 3px solid #38bfa7;
  outline-offset: 3px;
}

.noticia-enlace:focus-visible {
  outline: 3px solid #38bfa7;
  outline-offset: -5px;
}

/* Ajuste del encabezado para pantallas pequeñas */
@media (max-width: 600px) {
  .noticia-titulo {
    padding: 40px 16px 16px;
    font-size: 18px;
  }
}

/* Mensajes de carga, ausencia de noticias y errores */
.carrusel-mensaje {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 24px;
  color: #ffffff;
  text-align: center;
  line-height: 1.6;
}

/* Respeta los elementos ocultos aunque otras reglas cambien su display */
.carrusel-noticias [hidden],
.noticias-pie [hidden] {
  display: none;
}

/* Fondo y espacio general de la sección institucional */
.nosotros {
  padding: 56px 24px 64px;
  background: #19253a;
  color: #ffffff;
  scroll-margin-top: 24px;
}

.nosotros-contenido {
  max-width: 1200px;
  margin: 0 auto;
}

/* Distribuye Valores, Misión y Visión en tres columnas iguales */
.nosotros-opciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}

/* Botones con texto e indicador; toda el área permite seleccionar */
.nosotros-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  padding: 16px 8px;
  border: 0;
  background: transparent;
  color: #ffffff;

  font: inherit;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;

  transition: color 0.2s;
}

/* Cuadrado que identifica cada opción */
.nosotros-indicador {
  display: block;
  width: 14px;
  height: 14px;
  background: currentColor;
}

/* Resalta en dorado la opción seleccionada */
.nosotros-opcion[aria-selected="true"] {
  color: #f5b335;
}

.nosotros-opcion[aria-selected="true"] .nosotros-indicador {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

.nosotros-opcion:hover {
  color: #f5b335;
}

/* Mantiene visible el foco al navegar con el teclado */
.nosotros-opcion:focus-visible,
.nosotros-panel:focus-visible {
  outline: 2px solid #f5b335;
  outline-offset: 6px;
  border-radius: 4px;
}

/* Coloca la fotografía y el texto uno al lado del otro */
.nosotros-distribucion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

/* Presenta una fotografía sin deformarla */
.nosotros-imagen img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* Reserva espacio para reducir saltos al cambiar de apartado */
.nosotros-textos {
  min-width: 0;
  min-height: 340px;
  display: grid;
  align-items: center;
}

/* Garantiza que solo se muestre el panel seleccionado */
.nosotros-panel[hidden] {
  display: none;
}

/* Jerarquía y legibilidad de los textos institucionales */
.nosotros-panel h3 {
  margin: 0 0 24px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.2;
}

.nosotros-panel p {
  margin: 0 0 22px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.nosotros-panel p:last-child {
  margin-bottom: 0;
}

/* Destaca los pilares y separa el lema en una línea propia */
.nosotros-pilares {
  color: #f5d48a;
  font-weight: 700;
}

.nosotros-lema {
  display: block;
  margin-top: 8px;
  font-weight: 700;
}

/* En teléfonos, coloca la fotografía encima del texto */
@media (max-width: 750px) {
  .nosotros {
    padding: 36px 20px 44px;
  }

  .nosotros-opciones {
    gap: 8px;
    margin-bottom: 36px;
  }

  .nosotros-opcion {
    letter-spacing: 0;
    gap: 18px;
  }

  .nosotros-distribucion {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .nosotros-imagen {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .nosotros-textos {
    min-height: 0;
  }
}

/* Respeta la preferencia de reducir efectos de movimiento */
@media (prefers-reduced-motion: reduce) {
  .nosotros-opcion {
    transition: none;
  }
}

/* Título principal situado antes de las opciones institucionales */
.nosotros-titulo {
  margin: 0 0 36px;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
  text-align: center;
}

/* Acceso a la historia: permanece en la esquina inferior de la pantalla */
.acceso-historia {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;

  width: 280px;
  max-width: calc(100% - 32px);
  padding: 16px;
  border: 1px solid #46617e;
  border-radius: 12px;

  background: #102a43;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Subtítulo del acceso a la reseña histórica */
.acceso-historia p {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* Botón destacado con los colores institucionales */
.boton-historia {
  display: block;
  padding: 12px 16px;
  border-radius: 7px;

  background: #f5b335;
  color: #102a43;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.boton-historia:hover {
  background: #ffd075;
}

/* Foco visible para navegar con teclado */
.boton-historia:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

/* Reduce el tamaño del acceso flotante en teléfonos */
@media (max-width: 600px) {
  .acceso-historia {
    right: 16px;
    bottom: 16px;
    width: 235px;
    padding: 12px;
  }

  .acceso-historia p {
    font-size: 14px;
    margin-bottom: 8px;
  }
}

/* Permite anclar el acceso dentro de esta sección y reserva su espacio */
.nosotros {
  position: relative;
  padding-bottom: 170px;
}

/* Título principal en dorado institucional */
.nosotros-titulo {
  color: #f5b335;
}

/* Sitúa el acceso en la esquina inferior derecha de la sección */
.nosotros .acceso-historia {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 1;
}

/* Conserva espacio suficiente y márgenes en teléfonos */
@media (max-width: 600px) {
  .nosotros {
    padding-bottom: 160px;
  }

  .nosotros .acceso-historia {
    right: 16px;
    bottom: 20px;
  }
}

/* Fondo y espacio general de la oferta académica */
.oferta-academica {
  padding: 64px 24px;
  background: #f3f6f9;
  color: #17354b;
  scroll-margin-top: 24px;
}

.oferta-contenido {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

/* Título y subtítulo de la sección */
.oferta-encabezado {
  text-align: center;
  margin-bottom: 28px;
}

.oferta-encabezado h2 {
  margin: 0 0 12px;
  color: #102a43;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.2;
}

.oferta-encabezado p {
  margin: 0;
  color: #526577;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
}

/* Indicaciones y flechas de navegación */
.oferta-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.oferta-controles p {
  margin: 0;
  color: #526577;
  font-size: 14px;
  line-height: 1.5;
}

.oferta-flechas {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

.oferta-flecha {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #304e73;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
}

.oferta-flecha:hover:not(:disabled) {
  background: #42658e;
}

.oferta-flecha:disabled {
  opacity: 0.35;
  cursor: default;
}

/*
 * Carrusel horizontal nativo.
 * El relleno deja espacio para ampliar las tarjetas sin recortarlas.
 */
.carrusel-especialidades {
  display: flex;
  align-items: stretch;
  gap: 24px;

  width: 100%;
  margin: 0;
  padding: 32px 18px 38px;
  list-style: none;

  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 18px;

  scrollbar-width: thin;
  scrollbar-color: #7891a9 #e0e7ee;
}

/* Cada tarjeta ocupa aproximadamente un tercio del carrusel en escritorio */
.especialidad-item {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

/* Estructura de tarjeta con fotografía, descripción y docente */
.especialidad-tarjeta {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;

  border: 1px solid #dbe3eb;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(16, 42, 67, 0.08);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Amplía la tarjeta seleccionada con mouse sin mover las demás */
@media (hover: hover) and (pointer: fine) {
  .especialidad-item:hover {
    z-index: 2;
  }

  .especialidad-item:hover .especialidad-tarjeta {
    transform: translateY(-4px) scale(1.04);
    border-color: #b28a32;
    box-shadow: 0 14px 30px rgba(16, 42, 67, 0.18);
  }
}

/* Fotografía representativa y espacio provisional */
.especialidad-foto {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #e4edf3;
}

.especialidad-foto img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.especialidad-foto::before {
  content: "Imagen de la especialidad";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #526577;
  font-size: 14px;
  text-align: center;
}

/* Contenido textual de cada especialidad */
.especialidad-cuerpo {
  flex: 1;
  padding: 24px;
}

.especialidad-cuerpo h3 {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.especialidad-cuerpo p {
  margin: 0 0 14px;
  color: #526577;
  font-size: 15px;
  line-height: 1.7;
}

.especialidad-cuerpo p:last-child {
  margin-bottom: 0;
}

/* Mantiene la información del docente en la parte inferior */
.especialidad-docente {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 24px;
  padding: 20px 0;
  border-top: 1px solid #e5ebf0;
}

/* Fotografía circular del docente y sus iniciales provisionales */
.docente-avatar {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: #e4edf3;
}

.docente-avatar::before {
  content: "NA";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #304e73;
  font-size: 14px;
  font-weight: 700;
}

.docente-avatar img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.docente-datos {
  min-width: 0;
}

.docente-etiqueta {
  display: block;
  margin-bottom: 4px;
  color: #526577;
  font-size: 12px;
}

.docente-nombre {
  display: block;
  color: #17354b;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Oculta las imágenes ausentes para mostrar sus espacios provisionales */
.oferta-academica img[hidden] {
  display: none;
}

/* Foco visible para navegar con teclado */
.oferta-flecha:focus-visible,
.carrusel-especialidades:focus-visible {
  outline: 3px solid #b28a32;
  outline-offset: 4px;
}

/* Muestra dos tarjetas por vez en pantallas intermedias */
@media (max-width: 1000px) {
  .especialidad-item {
    flex-basis: calc((100% - 24px) / 2);
  }
}

/* En teléfonos deja visible parte de la siguiente tarjeta */
@media (max-width: 600px) {
  .oferta-academica {
    padding: 40px 16px;
  }

  .oferta-controles {
    gap: 12px;
  }

  /* Muestra una tarjeta completa por vez en teléfonos */
  .especialidad-item {
    flex-basis: 100%;
  }

  /* Ajusta el carrusel al ancho disponible y alinea cada tarjeta al deslizar */
  .carrusel-especialidades {
    padding-inline: 0;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
  }
  .especialidad-cuerpo {
    padding: 20px;
  }

  .especialidad-docente {
    margin-inline: 20px;
  }
}

/* Evita animaciones para visitantes que prefieren movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .especialidad-tarjeta {
    transition: none;
  }

  .especialidad-item:hover .especialidad-tarjeta {
    transform: none;
  }
}

/* =========================================================
   FONDOS DE LAS SECCIONES DE INICIO
   Colores compartidos para mantener la identidad institucional.
   ========================================================= */
:root {
  --fondo-azul-profundo: #102a43;
  --fondo-azul-medio: #193c5a;
  --fondo-claro: #f1f5f9;
  --detalle-dorado: #f5b335;
  --borde-suave: #d8e2eb;
}

/* Accesos y noticias: fondo luminoso que separa la portada
   fotográfica del contenido informativo. */
main > .accesos-noticias {
  padding-block: clamp(40px, 5vw, 72px);
  background-color: #ffffff;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #f4f7fa 100%
  );
  border-bottom: 1px solid var(--borde-suave);
}

/* Los accesos blancos destacan sobre el fondo ligeramente azulado. */
.accesos-noticias .acceso {
  background-color: #ffffff;
  border-color: var(--borde-suave);
  box-shadow: 0 4px 14px rgba(16, 42, 67, 0.05);
}

/* Refuerza la interacción con los accesos mediante un tono azul suave. */
.accesos-noticias .acceso:hover {
  background-color: #edf3f8;
  border-color: #8ba3ba;
  box-shadow: 0 6px 18px rgba(16, 42, 67, 0.1);
}

/* Integra los iconos y flechas con la paleta institucional. */
.accesos-noticias .acceso-icono,
.accesos-noticias .acceso-flecha {
  color: #365d7e;
}

/* Sobre nosotros: azul profundo con luces simétricas discretas.
   Conserva el espacio inferior reservado para la reseña histórica. */
main > .nosotros {
  padding-top: clamp(48px, 6vw, 80px);
  background-color: var(--fondo-azul-profundo);
  background-image:
    radial-gradient(
      ellipse at 0% 50%,
      rgba(94, 139, 177, 0.16),
      transparent 60%
    ),
    radial-gradient(
      ellipse at 100% 50%,
      rgba(94, 139, 177, 0.16),
      transparent 60%
    ),
    linear-gradient(180deg, #142f49, #0d2338);
  color: #ffffff;
  border-top: 3px solid var(--detalle-dorado);
  border-bottom: 1px solid #284863;
}

/* El acceso a la historia se distingue del fondo de su sección. */
.nosotros .acceso-historia {
  background-color: #193c5a;
  border-color: #47637c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Oferta educativa: fondo claro con cuadrícula de bajo contraste.
   La textura conecta visualmente con la formación técnica. */
main > .oferta-academica {
  padding-block: clamp(48px, 6vw, 80px);
  background-color: var(--fondo-claro);
  background-image:
    linear-gradient(
      rgba(16, 42, 67, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(16, 42, 67, 0.025) 1px,
      transparent 1px
    );
  background-size: 40px 40px;
  background-position: center top;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid var(--borde-suave);
}

/* Las tarjetas conservan un fondo sólido para facilitar la lectura. */
.oferta-academica .especialidad-tarjeta {
  background-color: #ffffff;
}

/* Detalle dorado bajo el título que relaciona la sección clara
   con los encabezados dorados de las secciones oscuras. */
.oferta-encabezado h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 3px;
  background-color: var(--detalle-dorado);
}

/* Fondo más oscuro que contacto para marcar el cierre de la página. */
.pie-pagina {
  padding: 36px 24px 20px;
  background: #091d30;
  color: #e4ecf4;
  border-top: 1px solid rgba(245, 179, 53, 0.3);
}

/* Distribuye la identidad y los enlaces dentro del ancho del sitio. */
.pie-contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Nombre institucional destacado en dorado. */
.pie-nombre {
  margin: 0 0 8px;
  color: #f5b335;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Lema con un tamaño secundario y contraste suficiente. */
.pie-lema {
  margin: 0;
  color: #c4d2df;
  font-size: 15px;
  line-height: 1.6;
}

/* Enlaces separados y adaptables al espacio disponible. */
.pie-enlaces {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}

/* Área cómoda para seleccionar los enlaces con el dedo. */
.pie-enlaces a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #e4ecf4;
  font-size: 15px;
  text-decoration: none;
}

/* Identifica el enlace señalado mediante color y subrayado. */
.pie-enlaces a:hover {
  color: #f5b335;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Mantiene visible la selección al navegar con teclado. */
.pie-enlaces a:focus-visible {
  outline: 3px solid #f5b335;
  outline-offset: 4px;
  border-radius: 3px;
}

/* Separa los créditos mediante una línea discreta. */
.pie-creditos {
  max-width: 1200px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #b6c6d5;
  text-align: center;
  line-height: 1.7;
}

/* Tamaño legible del texto de créditos. */
.pie-creditos small {
  font-size: 13px;
}

/* Centra el contenido y los enlaces en teléfonos. */
@media (max-width: 600px) {
  .pie-contenido {
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }

  .pie-enlaces {
    justify-content: center;
  }
}

/* Reserva el mismo espacio para todas las imágenes de especialidades. */
.especialidad-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  overflow: hidden;
  background: #e4edf3;
}

/* La fotografía llena el espacio sin alterar el tamaño de la tarjeta.
   Puede recortar los bordes, pero nunca deforma la imagen. */
.especialidad-foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Mantiene las fotografías de docentes dentro de un círculo uniforme. */
.docente-avatar {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
}

/* Ajusta el retrato al círculo sin estirarlo. */
.docente-avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Conserva los espacios provisionales cuando una imagen no carga. */
.oferta-academica img[hidden] {
  display: none;
}

/* Oculta el botón de pausa del carrusel de noticias. */
.noticias-pie .carrusel-pausa {
  display: none;
}

/* Mantiene el enlace Ver más alineado a la derecha. */
.noticias-pie {
  justify-content: flex-end;
}

/* Iguala la altura de las columnas de accesos y noticias en escritorio. */
@media (min-width: 701px) {
  .accesos-noticias-contenido {
    align-items: stretch;
  }

  /* Distribuye los seis accesos en filas de igual altura. */
  .accesos-noticias .accesos {
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }

  /* Reduce el espacio interior para equilibrar los accesos con las noticias. */
  .accesos-noticias .acceso {
    min-height: 64px;
    padding: 12px 16px;
    gap: 12px;
    font-size: 15px;
  }

  /* Mantiene Ver más al final de la columna cuando sobra espacio. */
  .accesos-noticias .noticias-inicio {
    display: flex;
    flex-direction: column;
  }

  /* Conserva la proporción de las imágenes sin comprimir el carrusel. */
  .accesos-noticias .carrusel-noticias {
    flex-shrink: 0;
  }

  /* Ocupa el espacio restante y alinea el botón con el último acceso. */
  .accesos-noticias .noticias-pie {
    margin-top: auto;
    padding-top: 14px;
  }
}

/*efecto de letrero en el video*/
/* Tarjeta flotante del video con un marco discreto y sombra suave. */
.portada .video-portada {
  right: 24px;
  bottom: 24px;
  width: clamp(280px, 32vw, 460px);
  padding: 0;
  aspect-ratio: auto;
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  background: #102a43;

  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Presenta el video completo dentro de un espacio de proporción uniforme. */
.portada .video-portada video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: #000000;
}

/* Franja institucional que integra el video con el diseño del sitio. */
.video-presentacion {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 18px;
  border-top: 2px solid #f5b335;
  background: #102a43;
}

/* Título breve de la tarjeta. */
.video-presentacion-titulo {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

/* Lema con menor jerarquía visual. */
.video-presentacion-lema {
  color: #c8d7e5;
  font-size: 13px;
  line-height: 1.4;
}

/* Conserva la distribución apilada de la portada en teléfonos. */
@media (max-width: 600px) {
  .portada .video-portada {
    position: static;
    width: 100%;
    max-width: 400px;
  }
}

/* Unifica el espacio y el fondo de los seis iconos. */
.accesos-noticias .acceso-icono {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #edf3f8;
  color: #365d7e;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}

/* Aplica el mismo tamaño y grosor de trazo a todos los dibujos. */
.accesos-noticias .acceso-icono svg {
  display: block;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Prepara transiciones suaves sin alterar la distribución de los accesos. */
.accesos-noticias .acceso {
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

/* Mantiene la flecha a la derecha y evita que se comprima. */
.accesos-noticias .acceso-flecha {
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.2s;
}

/* Respuesta visual al señalar un acceso con el mouse. */
@media (hover: hover) and (pointer: fine) {
  .accesos-noticias .acceso:hover {
    transform: translateY(-2px);
    background: #f2f6fa;
    border-color: #b28a32;
    box-shadow: 0 7px 18px rgba(16, 42, 67, 0.1);
  }

  /* Acento cálido en el icono del acceso señalado. */
  .accesos-noticias .acceso:hover .acceso-icono {
    background: #fff1d5;
    color: #805a16;
  }

  /* Pequeño movimiento que refuerza la dirección del enlace. */
  .accesos-noticias .acceso:hover .acceso-flecha {
    transform: translateX(2px);
  }
}

/* Respuesta al presionar con mouse o pantalla táctil. */
.accesos-noticias .acceso:active {
  transform: translateY(0);
  background: #e8eff6;
}

/* Selección visible al recorrer los accesos con el teclado. */
.accesos-noticias .acceso:focus-visible {
  outline: 3px solid #b28a32;
  outline-offset: 3px;
  border-color: #b28a32;
}

/* Permite que el nuevo texto del enlace se adapte a pantallas pequeñas. */
.accesos-noticias .noticias-ver-mas {
  min-height: 44px;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
}

/* Respeta la preferencia de reducir las animaciones. */
@media (prefers-reduced-motion: reduce) {
  .accesos-noticias .acceso,
  .accesos-noticias .acceso-icono,
  .accesos-noticias .acceso-flecha {
    transition: none;
  }

  .accesos-noticias .acceso:hover,
  .accesos-noticias .acceso:hover .acceso-flecha {
    transform: none;
  }
}
/* Crédito discreto y legible dentro del pie de página */
footer p.credito-desarrollador {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #aab9c7;
  text-align: center;
}
/* Reserva tres líneas para los nombres largos y alinea las descripciones */
.especialidad-cuerpo h3 {
  min-height: 2.6em;
  margin: 0 0 16px;
  line-height: 1.3;
}

/* Mantiene una presentación uniforme y legible de las descripciones */
.especialidad-cuerpo p {
  margin: 0 0 14px;
  line-height: 1.7;
  text-align: left;
  overflow-wrap: anywhere;
}

/* Evita espacio adicional después del último párrafo */
.especialidad-cuerpo p:last-child {
  margin-bottom: 0;
}

/* Ubica las fotografías de docentes al final de cada tarjeta */
.especialidad-docentes {
  margin: auto 24px 0;
  padding: 18px 0 24px;
  border-top: 1px solid #dbe3eb;
}

/* Oculta la sección cuando no hay fotografías disponibles */
.especialidad-docentes[hidden] {
  display: none;
}

/* Etiqueta discreta para identificar al equipo docente */
.especialidad-docentes-etiqueta {
  display: block;
  margin-bottom: 12px;
  color: #526577;
  font-size: 14px;
  line-height: 1.4;
}

/* Distribuye de una a tres fotografías sin crear espacios vacíos */
.especialidad-docentes-fotos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Marco circular de tamaño uniforme para cada fotografía */
.especialidad-docente-foto {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 2px solid #d8e3ed;
  border-radius: 50%;
  background: #e8eff5;
}

/* Ajusta el retrato al marco sin deformarlo */
.especialidad-docente-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Coloca el contacto por WhatsApp en una fila propia debajo de Waze */
.contacto-whatsapp {
  display: flex;
  justify-content: center;
  width: 100%;
  grid-column: 1 / -1;
  flex-basis: 100%;
  margin-top: 18px;
}

/* Botón verde con texto legible y dimensiones adaptables */
.boton-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  min-height: 52px;
  padding: 16px 26px;
  border: 1px solid #15803d;
  border-radius: 12px;
  background: #15803d;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}

/* Conserva el tamaño del icono cuando el texto ocupa dos líneas */
.boton-whatsapp svg {
  flex-shrink: 0;
}

/* Respuesta visual para dispositivos con mouse */
@media (hover: hover) {
  .boton-whatsapp:hover {
    background: #166534;
    transform: translateY(-2px);
  }
}

/* Identifica el enlace al navegar con el teclado */
.boton-whatsapp:focus-visible {
  outline: 3px solid #e8c45a;
  outline-offset: 4px;
}

/* Respeta la preferencia de reducir el movimiento */
@media (prefers-reduced-motion: reduce) {
  .boton-whatsapp {
    transition: none;
    transform: none;
  }
}

/* Centra las flechas y oculta únicamente su carácter visual original. */
#oferta-anterior,
#oferta-siguiente,
.evento-controles .evento-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 0;
}

/* Dibuja flechas uniformes sin depender de la fuente del dispositivo. */
#oferta-anterior::before,
#oferta-siguiente::before,
.evento-controles .evento-flecha::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

/* Orienta hacia atrás los controles de retroceso. */
#oferta-anterior::before,
.evento-controles .evento-flecha:first-child::before {
  transform: translateX(2px) rotate(-135deg);
}

/* Orienta hacia adelante los controles de avance. */
#oferta-siguiente::before,
.evento-controles .evento-flecha:last-child::before {
  transform: translateX(-2px) rotate(45deg);
}