/* =========================================================================
   Ajustes de la revisión del 26 de septiembre de 2026.
   Este archivo se carga DESPUÉS de style.css (lo enlaza header.php).
   1) Encabezado: texto legal junto al logo
   2) Inicio: bloque de becas arriba, junto a la tarjeta principal
   3) Inicio: "Aplican condiciones. Cupos limitados" en los dos bloques de becas
   4) Inicio: duración y homologación junto al título "Nuestros programas"
   5) Becas: los bloques de arriba eligen la beca en el formulario
   6) Inicio: duración y homologación también dentro del bloque de becas de arriba
   7) Franjas diagonales: la inclinación ya no tapa los títulos en celular
   8) Pie de página: ya no se corta en celulares de menos de 387 px
   9) Color del noveno programa (Gestión de Recursos Energéticos): naranja
   10) Páginas de programa: márgenes laterales en celular y tableta
   11) Tarjeta de persona (director/a): nombre grande, cargo y WhatsApp bien visibles
   12) Inicio: acceso a Q10 sobre la foto de la portada
   13) Revistas digitales: tarjetas con portada
   ========================================================================= */

/* --- 1) Encabezado: texto legal junto al logo --- */
.brand-text { max-width: clamp(16rem, 24vw, 21rem); }
.brand-text .brand-legal { display: block; font-size: 0.64rem; line-height: 1.15; color: var(--ink-soft); }
@media (max-width: 1100px) {
  .brand-text { max-width: none; }
  .brand-text .brand-legal { white-space: nowrap; }
}
@media (max-width: 700px) {
  .brand-text .brand-legal { display: none; }
}

/* --- 2) Bloque de becas arriba (junto a la tarjeta principal) --- */
.hero-row { margin-top: -4.5rem; }
.hero-row .hero-overlay { margin-top: 0; }
@media (max-width: 780px) { .hero-row { margin-top: -3rem; } }

.hero-beca {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 1rem;
  box-sizing: border-box; max-width: 640px; margin-top: 1.4rem;
  background: var(--surface); color: var(--ink); text-decoration: none;
  border-radius: 20px; border-top: 6px solid var(--gold);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), 0 36px 70px rgba(0, 0, 0, 0.35);
  padding: 1.3rem 1.6rem 1.4rem;
}
.hero-beca-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; background: var(--gold-soft); border-radius: 14px; padding: 0.8rem 1rem; }
.hero-beca-num { flex: 1 1 auto; min-width: 0; text-align: center; }
.hero-beca .beca-rows { margin-top: 0.5rem; justify-content: center; }
.hero-beca .beca-rows .beca-porcentaje { font-size: 2.6rem; }
.hero-beca .beca-qr { flex: 0 0 auto; }
.hero-beca .beca-qr-code svg { display: block; width: 100px; height: 100px; max-width: none; background: var(--surface); }
.hero-beca .beca-qr span { max-width: 100px; margin-left: auto; margin-right: auto; }
.hero-beca-info b { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; color: var(--primary-dark); text-transform: uppercase; margin-bottom: 0.35rem; }
.hero-beca-info p { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.45; }
.hero-beca-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: auto; }

@media (min-width: 1101px) {
  .hero-row { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 1.6rem; align-items: stretch; }
  .hero-beca { margin-top: 0; max-width: none; }
}
@media (min-width: 1101px) and (max-width: 1167px) {
  .hero-beca .beca-rows .beca-porcentaje { font-size: 2.3rem; }
}
@media (max-width: 1100px) {
  .hero-beca .beca-qr { display: none; }
}
@media (max-width: 780px) {
  .hero-beca { max-width: 100%; padding: 1.2rem 1.3rem 1.3rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-beca { animation: heroCardIn 0.7s ease-out 0.12s backwards; transition: transform 0.15s ease; }
  .hero-beca:hover { transform: translateY(-3px); }
}

/* --- 3) "Aplican condiciones. Cupos limitados" (bloque de arriba y de abajo) --- */
.beca-nota { display: block; font-size: 0.75rem; line-height: 1.3; color: var(--ink-soft); }
.beca-banner-info .beca-nota { display: inline-block; vertical-align: middle; margin: 0.9rem 0 0 0.9rem; max-width: 21ch; }

/* --- 4) Duración y homologación junto al título "Nuestros programas" --- */
/* Se conserva la disposición de siempre (título, etiqueta, descripción) y la info va a la derecha del título. */
.section-head-wide { display: grid; grid-template-columns: auto auto 1fr; column-gap: 0.9rem; row-gap: 0.9rem; align-items: baseline; max-width: none; }
.section-head-wide .num { grid-area: 1 / 1; }
.section-head-wide h2 { grid-area: 1 / 2; }
.section-head-wide .prog-info { grid-area: 1 / 3; justify-self: end; }
.section-head-wide .count-badge { grid-area: 2 / 1 / 3 / -1; justify-self: start; }
.section-head-wide p.desc { grid-area: 3 / 1 / 4 / -1; }
.prog-info { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.info-chip { white-space: nowrap; font-size: 0.78rem; line-height: 1.2; color: var(--ink); background: var(--gold-soft); border: 1px solid rgba(224, 166, 42, 0.5); padding: 0.32rem 0.8rem; border-radius: 999px; }
.info-chip b { color: var(--primary-dark); font-weight: 800; }
@media (max-width: 1100px) {
  /* en pantallas más pequeñas la info pasa debajo del título */
  .section-head-wide { grid-template-columns: auto 1fr; }
  .section-head-wide .prog-info { grid-area: 2 / 1 / 3 / -1; justify-self: start; justify-content: flex-start; }
  .section-head-wide .count-badge { grid-area: 3 / 1 / 4 / -1; }
  .section-head-wide p.desc { grid-area: 4 / 1 / 5 / -1; }
}

/* --- 5) Becas: los bloques de arriba eligen la beca en el formulario --- */
a.beca-highlight { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.beca-highlight:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
a.beca-highlight.selected { box-shadow: 0 0 0 3px var(--primary), var(--shadow); }
.beca-cta { display: block; margin-top: 1.3rem; font-size: 0.85rem; font-weight: 700; color: var(--primary-dark); }
.beca-cta .cta-elegida { display: none; color: var(--primary); }
a.beca-highlight.selected .beca-cta .cta-normal { display: none; }
a.beca-highlight.selected .beca-cta .cta-elegida { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  a.beca-highlight { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  a.beca-highlight:hover { transform: translateY(-3px); }
}

/* --- 6) Duración y homologación dentro del bloque de becas de arriba --- */
/* Son las mismas etiquetas de la sección 4; aquí van entre el texto y el botón y, si no caben, el texto baja de renglón. */
.hero-beca-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.hero-beca-facts .info-chip { white-space: normal; }

/* --- 7) Franjas diagonales: la inclinación ya no tapa los títulos en celular --- */
/* En style.css la inclinación de estas franjas (.section.alt, .admisiones y .cta-band) es un porcentaje del ALTO de la sección.
   En celular una sección como "Nuestros programas" mide más de 4.000 px de alto, el porcentaje se dispara (160 px)
   y el corte diagonal tapa el número y el título. Aquí se pone un tope: hasta ese tope la forma es la misma de siempre.
   En computador (más de 900 px de ancho) no cambia nada. */
@supports (clip-path: polygon(0 min(4%, 4rem), 100% 0, 100% 100%, 0 100%)) {
  @media (max-width: 900px) {
    .section.alt { clip-path: polygon(0 min(4%, 4rem), 100% 0, 100% 100%, 0 max(96%, calc(100% - 4rem))); }
    .admisiones  { clip-path: polygon(0 min(3%, 3rem), 100% 0, 100% max(97%, calc(100% - 3rem)), 0 100%); }
    .cta-band    { clip-path: polygon(0 min(6%, 3rem), 100% 0, 100% 100%, 0 100%); }
  }
}

/* --- 8) Pie de página: ya no se corta en celulares de menos de 387 px --- */
/* En style.css el pie va en dos columnas desde los 780 px hacia abajo, pero esas dos columnas necesitan 387 px de ancho como
   mínimo (los cuatro íconos de redes y el correo no se pueden partir). En celulares de 320 a 386 px (iPhone SE y mini, la
   mayoría de Android) el borde derecho quedaba fuera de la pantalla y se cortaban el correo y los teléfonos.
   Solo en esos anchos: la marca arriba a todo el ancho, las dos listas de enlaces lado a lado y el contacto abajo a todo el ancho.
   De 387 px en adelante no cambia nada. */
@media (max-width: 386px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid > :first-child,
  .footer-grid > :last-child { grid-column: 1 / -1; }
}

/* --- 9) Color del noveno programa (Gestión de Recursos Energéticos): naranja --- */
/* style.css trae un color por programa (primary, blue, gold, magenta, coral, teal, green y navy) y los 8 ya están usados.
   Este es el noveno: la tarjeta de Inicio y Programas (.card) y el encabezado de su página (.phead). */
:root { --orange: #F2851C; }
.card.prog-orange .band { background-color: var(--orange); color: #3A1C00; }
.phead.prog-orange { background-image: radial-gradient(rgba(255,255,255,0.14) 1.4px, transparent 1.4px), linear-gradient(120deg, var(--orange) 0%, #C4620E 55%, #8F4308 100%); color: #3A1C00; }

/* --- 10) Páginas de programa: márgenes laterales en celular y tableta --- */
/* En style.css la regla .pbody (padding: 3.2rem 0 1rem) le quita al contenedor .wrap su margen lateral de 1.5rem. En pantallas
   anchas no se nota (el contenedor queda centrado), pero en celular y tableta el texto de las páginas de programa quedaba
   pegado a los bordes de la pantalla. */
.wrap.pbody { padding-left: 1.5rem; padding-right: 1.5rem; }

/* --- 11) Tarjeta de persona (director/a): nombre grande, cargo y WhatsApp bien visibles --- */
/* Se usa en Investigación y en Prácticas. Reemplaza a la tarjeta angosta (.info-card dentro de .measure-sm), donde el nombre
   salía pequeño y la página se veía vacía. El número es un botón verde que abre directamente el chat de WhatsApp. */
.persona { display: flex; align-items: center; gap: 1.8rem; max-width: 780px; box-sizing: border-box; background: var(--surface); border-radius: 20px; border-left: 6px solid var(--primary); box-shadow: var(--shadow); padding: 2rem 2.2rem; }
.persona-avatar { flex: 0 0 auto; width: 6rem; height: 6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-bright), var(--primary-dark)); color: var(--on-dark); font-family: var(--font-display); font-size: 2.1rem; letter-spacing: 0.02em; }
.persona-datos { min-width: 0; }
.persona-cargo { display: inline-block; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary-dark); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.34rem 0.9rem; }
.persona h3 { margin: 0.85rem 0 1.2rem; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); line-height: 1.08; color: var(--ink); text-transform: none; }
.persona-wa { display: inline-flex; align-items: center; gap: 0.75rem; background: #25D366; color: #06331A; border-radius: 999px; padding: 0.7rem 1.5rem 0.7rem 1.1rem; font-weight: 800; font-size: 1.15rem; line-height: 1.1; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35); }
.persona-wa svg { width: 1.7rem; height: 1.7rem; flex-shrink: 0; }
.persona-wa small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; opacity: 0.85; }
.persona-wa:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .persona-wa { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .persona-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45); }
}
@media (max-width: 600px) {
  .persona { flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.6rem 1.4rem; }
  .persona-datos { width: 100%; }
  .persona-wa { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* --- 12) Inicio: acceso a Q10 sobre la foto de la portada --- */
/* Botón blanco en la esquina superior derecha de la foto, alineado con el contenido de la página. Lleva a la plataforma Q10
   (el mismo enlace de la sección Estudiantes) y se abre en una pestaña nueva. */
.hero-q10 { position: absolute; top: 1.3rem; left: 50%; transform: translateX(-50%); z-index: 6; width: min(1120px, 100%); box-sizing: border-box; padding: 0 1.5rem; display: flex; justify-content: flex-end; pointer-events: none; }
.hero-q10-btn { pointer-events: auto; display: flex; align-items: center; gap: 0.7rem; background: #fff; color: var(--primary-dark); text-decoration: none; border-radius: 999px; padding: 0.55rem 1.3rem 0.55rem 0.8rem; line-height: 1.15; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.hero-q10-ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--surface-2); color: var(--primary); }
.hero-q10-ico svg { width: 1.5rem; height: 1.5rem; }
.hero-q10-btn small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); }
.hero-q10-btn b { font-size: 0.95rem; font-weight: 800; }
.hero-q10-btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-q10-btn { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .hero-q10-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }
}
@media (max-width: 780px) {
  .hero-q10 { top: 0.9rem; padding: 0 1rem; }
}

/* --- 13) Revistas digitales: tarjetas con portada --- */
/* Se usa en la página de la Revista Labor Et Sapientia. Cada tarjeta es un enlace al PDF de la edición. */
.revistas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1.6rem; }
.revista { display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; color: var(--ink); text-decoration: none; }
.revista-portada { aspect-ratio: 7 / 9; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.revista-portada img { display: block; width: 100%; height: 100%; object-fit: cover; }
.revista-info { display: flex; flex-direction: column; flex: 1; gap: 0.3rem; padding: 1.1rem 1.2rem 1.3rem; }
.revista-info h3 { font-size: 1.15rem; color: var(--ink); }
.revista-fecha { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }
.revista-leer { margin-top: auto; padding-top: 0.9rem; font-size: 0.85rem; font-weight: 800; color: var(--primary-dark); }
.revista-leer small { display: block; margin-top: 0.15rem; font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); }
.revista:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .revista { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .revista:hover { transform: translateY(-3px); }
}