/* =========================================================================
   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
   ========================================================================= */

/* --- 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; }