/* Tema «Institucional Azul». Los colores vienen de Personalizar como variables (functions.php → iaz_variables_css). */

/* ── Tipografías (dentro del tema, licencia OFL: assets/fonts/OFL-*.txt) ── */
@font-face { font-family: "Oswald"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/oswald-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/oswald-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }

:root {
  --iaz-titulos: "Oswald", "Arial Narrow", sans-serif;
  --iaz-cuerpo: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --iaz-ancho: 1200px;
  --iaz-gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--iaz-texto);
  font: 400 16px/1.65 var(--iaz-cuerpo);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--iaz-primario); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--iaz-acento); outline-offset: 2px; }

.iaz-saltar { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--iaz-primario); color: #fff; padding: 10px 16px; }
.iaz-saltar:focus { left: 8px; top: 8px; }

.iaz-ancho { width: min(100% - 2 * var(--iaz-gutter), var(--iaz-ancho)); margin-inline: auto; }

/* ── Cabecera ── */
.iaz-cabecera { background: #fff; border-bottom: 1px solid #E3E8EC; position: sticky; top: 0; z-index: 50; }
.admin-bar .iaz-cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .iaz-cabecera { top: 46px; } }
/* 🔄 15-oct (Ricardo, pantalla del menú): el logotipo grande a la izquierda y, arriba a la derecha, el nombre de la
   página y el menú en un mismo renglón. */
.iaz-cabecera-fila {
  display: flex; align-items: flex-start; gap: 16px clamp(32px, 5vw, 110px);
  width: calc(100% - 2 * clamp(16px, 1.3vw, 28px)); margin-inline: auto; min-height: 88px; padding-block: 4px;
}
.iaz-marca img, .iaz-marca .custom-logo { max-height: clamp(72px, 7vw, 132px); width: auto; }
.iaz-marca-texto { font: 600 22px/1.2 var(--iaz-titulos); color: var(--iaz-primario); text-decoration: none; }
.iaz-nombre { margin: 8px 0 0 auto; font: 500 clamp(20px, 1.9vw, 34px)/1.25 var(--iaz-titulos); letter-spacing: .01em; }
.iaz-menu { margin-top: clamp(8px, 1.4vw, 28px); }
.iaz-nombre a { color: var(--iaz-primario); text-decoration: none; }

.iaz-menu-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.iaz-menu-lista > li { position: relative; }
.iaz-menu-lista > li + li { border-left: 1px solid var(--iaz-acento); }
.iaz-menu-lista a {
  display: block; padding: 6px clamp(8px, .7vw, 14px); text-decoration: none; text-transform: uppercase;
  font: 500 clamp(12.5px, .8vw, 15px)/1.3 var(--iaz-titulos); letter-spacing: .03em; color: var(--iaz-acento);
}
.iaz-menu-lista a:hover, .iaz-menu-lista .current-menu-item > a, .iaz-menu-lista .current_page_item > a { color: var(--iaz-primario); }
/* Submenú («Más»): se abre al pasar el ratón o con el teclado (focus-within), sin JavaScript. */
.iaz-menu-lista .sub-menu, .iaz-menu-lista .children {
  list-style: none; margin: 0; padding: 6px 0; position: absolute; right: 0; top: 100%; min-width: 200px;
  background: #fff; border: 1px solid #E3E8EC; box-shadow: 0 8px 24px rgba(15, 76, 104, .12);
  visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.iaz-menu-lista li:hover > .sub-menu, .iaz-menu-lista li:focus-within > .sub-menu,
.iaz-menu-lista li:hover > .children, .iaz-menu-lista li:focus-within > .children { visibility: visible; opacity: 1; transform: none; }
.iaz-menu-lista .sub-menu a, .iaz-menu-lista .children a { padding: 8px 16px; }

.iaz-menu-boton {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  background: var(--iaz-primario); color: #fff; border: 0; border-radius: 4px; font: 500 14px var(--iaz-titulos); text-transform: uppercase; cursor: pointer;
}
.iaz-menu-icono, .iaz-menu-icono::before, .iaz-menu-icono::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.iaz-menu-icono::before, .iaz-menu-icono::after { content: ""; position: absolute; left: 0; }
.iaz-menu-icono::before { top: -6px; } .iaz-menu-icono::after { top: 6px; }

/* Celular: el nombre baja de renglón y el menú se pliega detrás del botón (menu.js quita `hidden`). */
@media (max-width: 900px) {
  /* 🔄 15-oct (Ricardo, pantalla del celular): logo al centro, el título debajo, también al centro, y las tres rayas
     solas a la derecha en su propio renglón. 🔄 16-oct: se queda fija al bajar (Ricardo), pero compacta —logo chico y
     las tres rayas en un renglón— para no tapar un tercio de la pantalla. menu.js pone la clase iaz-compacta al bajar. */
  /* En el celular la cabecera grande es normal; la compacta es fija y entra deslizándose (ver menu.js). */
  .iaz-cabecera { position: relative; top: auto; }
  .iaz-cabecera.iaz-compacta {
    position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 4px 16px rgba(15, 76, 104, .12);
    animation: iaz-entra .2s ease-out;
  }
  .admin-bar .iaz-cabecera.iaz-compacta { top: 46px; }
  @keyframes iaz-entra { from { transform: translateY(-100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .iaz-cabecera.iaz-compacta { animation: none; } }
  .iaz-compacta .iaz-cabecera-fila { flex-wrap: nowrap; justify-content: space-between; padding-block: 6px; }
  .iaz-compacta .iaz-marca { flex-basis: auto; }
  .iaz-compacta .iaz-marca img, .iaz-compacta .iaz-marca .custom-logo { max-height: 48px; }
  .iaz-compacta .iaz-nombre { flex-basis: auto; flex: 1; font-size: 16px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .iaz-cabecera-fila { flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; min-height: 0; padding-block: 12px 6px; }
  .iaz-menu { margin-top: 0; }
  .iaz-marca { flex-basis: 100%; display: flex; justify-content: center; }
  .iaz-marca img, .iaz-marca .custom-logo { max-height: 124px; }
  .iaz-nombre { flex-basis: 100%; margin: 0; text-align: center; font-size: clamp(19px, 5.4vw, 24px); }
  .iaz-menu-boton {
    order: 3; margin-left: auto; min-height: 44px; min-width: 44px; padding: 0; justify-content: center;
    background: transparent; color: var(--iaz-primario);
  }
  .iaz-menu-boton .iaz-menu-etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .iaz-menu-icono, .iaz-menu-icono::before, .iaz-menu-icono::after { width: 28px; height: 2.5px; border-radius: 2px; }
  .iaz-menu-icono::before { top: -9px; } .iaz-menu-icono::after { top: 9px; }
  .iaz-menu { order: 4; flex-basis: 100%; }
  /* Sin JavaScript, el menú se ve abierto debajo de la cabecera (lista simple). */
  .iaz-menu-lista { flex-direction: column; align-items: stretch; padding-bottom: 8px; }
  .iaz-menu-lista > li + li { border-left: 0; }
  .iaz-menu-lista a { padding: 14px 4px; font-size: 19px; color: var(--iaz-primario); }
  .iaz-menu-lista .current-menu-item > a, .iaz-menu-lista .current_page_item > a { color: var(--iaz-menu-actual); }
  .iaz-menu-lista .sub-menu, .iaz-menu-lista .children { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; border: 0; padding: 0 0 4px 18px; }
  .iaz-menu-lista .sub-menu a, .iaz-menu-lista .children a { padding: 10px 4px; font-size: 16px; }

  /* 🔄 16-oct (Ricardo): con JavaScript es un panel que entra desde la derecha. Detrás, blanco (no se ve la imagen
     principal) y una franja azul transparente pegada al panel. */
  .iaz-js .iaz-menu {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(70vw, 300px); margin: 0;
    background: #fff; padding: 120px 24px 40px 36px; overflow-y: auto; overscroll-behavior: contain;
    transform: none; transition: transform .25s ease, visibility .25s;
  }
  .iaz-js .iaz-menu[data-cerrado] { transform: translateX(calc(100% + 72px)); visibility: hidden; }
  .iaz-js .iaz-menu::before {
    content: ""; position: fixed; top: 0; bottom: 0; right: min(70vw, 300px); width: 72px;
    background: color-mix(in srgb, var(--iaz-primario) 55%, transparent);
  }
  .iaz-menu-fondo { position: fixed; inset: 0; z-index: 80; background: #fff; }
  .iaz-menu-fondo[hidden] { display: none; }
  .iaz-menu-cerrar {
    position: absolute; top: 24px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center;
    background: transparent; border: 0; color: var(--iaz-primario); cursor: pointer;
  }
  .iaz-menu-cerrar[hidden] { display: none; }
  /* La flechita que abre el submenú («Más», «Oferta educativa»…). */
  .iaz-js .iaz-menu-lista li { position: relative; }
  .iaz-sub-boton {
    position: absolute; top: 4px; right: -6px; width: 44px; height: 44px; display: grid; place-items: center;
    background: transparent; border: 0; color: var(--iaz-primario); cursor: pointer;
  }
  .iaz-sub-boton svg { transition: transform .2s; }
  .iaz-sub-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
  .iaz-js .iaz-menu-lista li > a { padding-right: 44px; }
  .iaz-js .iaz-menu-lista .sub-menu[data-cerrado], .iaz-js .iaz-menu-lista .children[data-cerrado] { display: none; }
  body.iaz-menu-abierto { overflow: hidden; }
}
@media (min-width: 901px) { .iaz-menu-boton, .iaz-menu-cerrar, .iaz-menu-fondo, .iaz-sub-boton { display: none !important; } }

/* ── Imagen principal ── */
.iaz-portada { height: var(--iaz-portada-alto, 320px); overflow: hidden; background: var(--iaz-suave); }
.iaz-portada-img { width: 100%; height: 100%; object-fit: cover; }
/* 🔄 15-oct (Ricardo): en el celular la imagen principal también va grande. */
@media (max-width: 600px) { .iaz-portada { height: clamp(520px, 160vw, 920px); } }

/* ── Historia ── */
/* 🔄 15-oct (Ricardo): más grande —casi el ancho de la página, como en su pantalla— con fondo #f4f6f8 y letras
   #295171 (los dos se cambian en Personalizar → Historia). */
/* 🔄 3ª vuelta: ya no es una tarjeta. Toda la franja es del gris, de orilla a orilla, y el texto va en una columna al
   centro (donde Ricardo pintó el recuadro negro). */
.iaz-historia { background: var(--iaz-historia-fondo); color: var(--iaz-historia-texto); padding: clamp(48px, 7vw, 120px) var(--iaz-gutter); }
.iaz-historia-tarjeta { width: min(100%, 620px); margin-inline: auto; }
.iaz-titulo, .iaz-historia-tarjeta h2 { margin: 0 0 20px; font: 500 clamp(30px, 4vw, 44px)/1.15 var(--iaz-titulos); color: var(--iaz-historia-texto); text-align: center; }
.iaz-historia-parrafo { margin: 0 auto 14px; max-width: 72ch; text-align: center; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.75; }
@media (min-width: 900px) { .iaz-historia { min-height: clamp(360px, 27vw, 520px); display: grid; align-items: center; } }

/* ── Foto y registro de aspirantes ── */
.iaz-registro {
  background: var(--iaz-suave) url("../img/patron.svg") repeat; padding: clamp(18px, 2vw, 36px) clamp(16px, 3.3vw, 64px) clamp(32px, 3.5vw, 64px);
}
/* 🔄 3ª vuelta («algo así quiero, te pasaste»): casi todo el ancho, con un margen a cada lado. */
.iaz-registro-fila { width: 100%; display: grid; grid-template-columns: 1fr; align-items: center; }
.iaz-registro-foto { aspect-ratio: 4 / 3; overflow: hidden; background: #C9D3DC; }
.iaz-registro-img { width: 100%; height: 100%; object-fit: cover; }
.iaz-registro-tarjeta { background: #fff; padding: 36px 28px; text-align: center; }
.iaz-registro-titulo { margin: 0 0 14px; font: 500 clamp(28px, 4vw, 40px)/1.2 var(--iaz-titulos); color: var(--iaz-primario); }
.iaz-registro-texto { margin: 0 0 22px; font: 400 15px/1.5 var(--iaz-cuerpo); color: var(--iaz-primario); }
@media (min-width: 900px) {
  /* La foto, un poco más baja que la tarjeta y pegada a su base, como en la pantalla. */
  .iaz-registro-fila { grid-template-columns: minmax(0, 35%) minmax(0, 65%); align-items: stretch; }
  .iaz-registro-foto { aspect-ratio: auto; margin-top: clamp(16px, 1.7vw, 32px); min-height: clamp(200px, 13vw, 260px); position: relative; }
  /* La foto llena su hueco sin imponer su proporción: la altura la manda la tarjeta. */
  .iaz-registro-img { position: absolute; inset: 0; }
  .iaz-registro-tarjeta { padding: clamp(40px, 3.5vw, 64px) clamp(48px, 18vw, 300px) clamp(40px, 3.5vw, 64px) 48px; text-align: right; min-height: clamp(230px, 15vw, 300px); display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
}
.iaz-boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 26px;
  background: var(--iaz-primario); color: #fff; text-decoration: none; border-radius: 4px;
  font: 500 15px/1 var(--iaz-titulos); letter-spacing: .04em; text-transform: uppercase;
}
.iaz-boton:hover { filter: brightness(1.15); }

/* ── Actividades ── */
.iaz-actividades { padding-bottom: 64px; }
/* 🔄 15-oct (Ricardo: «se ve muy pequeño»): banda, título, recuadro de la institución y tarjetas más grandes. */
.iaz-banda { position: relative; min-height: clamp(120px, 12vw, 170px); display: grid; place-items: center; overflow: hidden; }
.iaz-banda-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.iaz-banda-titulo {
  position: relative; margin: 0; padding: 14px 20px; text-align: center; display: grid; gap: 8px; justify-items: center;
  font: 500 clamp(28px, 4.2vw, 58px)/1.05 var(--iaz-titulos); color: var(--iaz-primario);
}
/* El título va directo sobre la banda, como en la pantalla; la sombra suave lo despega de las figuras. */
.iaz-banda-titulo > span:first-child { text-shadow: 0 1px 0 rgba(255,255,255,.6); }
/* 🔄 15-oct: el recuadro gris de la pantalla sólo marcaba el campo; el nombre va del mismo color que el título. */
.iaz-banda-institucion { color: var(--iaz-primario); font: inherit; }
.iaz-actividades-rejilla {
  /* 🔄 15-oct (Ricardo): en el celular, una por renglón y grande; de 600 px en adelante, dos; en escritorio, cuatro. */
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr);
}
.iaz-actividad { padding: 22px 14px 26px; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; }
.iaz-actividad:nth-child(even) { background: var(--iaz-suave); }
.iaz-actividad-titulo { margin: 0; font: 400 clamp(20px, 1.7vw, 26px)/1.25 var(--iaz-titulos); color: var(--iaz-primario); min-height: 2.5em; display: grid; place-items: center; }
.iaz-actividad-img { width: min(80%, 340px); aspect-ratio: 2 / 3; object-fit: cover; }
@media (min-width: 600px) and (max-width: 899px) { .iaz-actividades-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iaz-actividad-img { width: min(90%, 260px); } }
@media (min-width: 900px) {
  .iaz-actividades-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 🔄 3ª vuelta: la imagen ocupa más de la mitad de su columna. */
  .iaz-actividad { padding: 34px 24px 44px; gap: 16px; }
  .iaz-actividad-img { width: min(62%, 320px); }
  /* En 4 columnas se alternan como en la pantalla: 2ª y 4ª de cada fila con fondo. */
  .iaz-actividad:nth-child(even) { background: transparent; }
  .iaz-actividad:nth-child(4n+2), .iaz-actividad:nth-child(4n+4) { background: var(--iaz-suave); }
}

/* ── Pie ── */
/* 🔄 15-oct (Ricardo: «que no se vea tan compacto… da espacio»): más aire arriba y abajo, títulos y datos más
   grandes, y el logotipo con su propio peso. */
.iaz-pie { background: var(--iaz-primario); color: #fff; padding: clamp(56px, 7vw, 110px) var(--iaz-gutter); }
.iaz-pie-rejilla { width: min(100%, 1320px); margin-inline: auto; display: grid; gap: 40px 48px; grid-template-columns: 1fr; align-items: start; }
.iaz-pie-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 500 clamp(20px, 1.8vw, 26px)/1.2 var(--iaz-titulos); }
.iaz-pie-titulo svg { width: 22px; height: 22px; flex: none; }
.iaz-pie-dato { margin: 0 0 8px; font-size: 15.5px; line-height: 1.75; color: #E8F1F5; }
.iaz-pie-dato a { color: #fff; }
.iaz-pie-logo { display: flex; justify-content: flex-start; }
.iaz-pie-logo img, .iaz-pie-logo .custom-logo { max-height: 150px; width: auto; background: #fff; padding: 12px; }
.iaz-pie-logo .iaz-marca-texto { color: #fff; }
@media (min-width: 720px) { .iaz-pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .iaz-pie-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .iaz-pie-logo { justify-content: flex-end; }
}

.iaz-legal {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 36px; padding: 22px var(--iaz-gutter) 28px;
  font: 400 14px/1.4 var(--iaz-titulos); background: #fff; border-top: 1px solid #E3E8EC;
}
.iaz-legal-enlace, .iaz-legal-menu a { color: var(--iaz-primario); text-decoration: none; }
.iaz-legal-enlace:hover, .iaz-legal-menu a:hover { text-decoration: underline; }
.iaz-legal-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
/* 🔄 15-oct: sin recuadro (el gris de la pantalla era sólo referencia). */
.iaz-legal-copy { color: var(--iaz-primario); }

/* ── Páginas, entradas y la del validador ── */
.iaz-entrada { padding-block: 40px 56px; }
.iaz-titulo-pagina { margin: 0 0 24px; font: 500 clamp(28px, 4vw, 40px)/1.15 var(--iaz-titulos); color: var(--iaz-primario); }
.iaz-entrada-titulo { font: 500 24px/1.2 var(--iaz-titulos); }
.iaz-entrada-titulo a { color: var(--iaz-primario); text-decoration: none; }
.iaz-lista { padding-block: 40px; }
.iaz-lista .iaz-entrada { padding-block: 0 24px; border-bottom: 1px solid #E3E8EC; margin-bottom: 24px; }

/* Bloques a todo lo ancho (el validador de tarjetas trae su barra azul así): salen del contenedor de la página. */
.iaz-entrada .alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
body { overflow-x: clip; }
/* La página que empieza con el validador de tarjetas: su barra va pegada a la cabecera, sin el aire de arriba. */
.iaz-entrada:has(> .vct:first-child) { padding-block: 0; }

/* Lo de muestra se distingue: un recordatorio de que falta cargar lo del centro. */
.iaz-muestra { background: #C9D3DC; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }