/* Portada — medidas de los artboards 0-HOME (móvil, 480 pt, retrabajo del
 * 2026-10-27) y 0-HOME-Desktop (1025 pt). 1rem = 10 pt en los dos cortes.
 * Se apoya en sitio.css (héroe, secciones, tarjetas, programa, boletín,
 * colaboradores); aquí van los ajustes del retrabajo móvil y TODO el
 * escritorio, con prefijo in-. Las reglas móviles van primero y el bloque
 * `@media (min-width: 768px)` del final las sobrescribe.
 */

/* Qué se ve en cada corte */
.in-solo-escritorio { display: none !important; }
.in-hero__emblema-vivo { display: none; } /* emblema animable: sólo ≥ 1200 px */

/* ---------- Héroe + mural ---------- */
.in-mural { height: 31.5rem; }

/* ---------- Banda "Mensaje del director" (rediseñada: icono, etiqueta verde
   y botón "Leer más"; el fondo es sólo degradado + foto, el patrón va aparte) */
.in-director {
  height: 34.6rem;
  padding: 3.8rem 2.5rem 0;
  background: var(--st-tinta) url(../img/sitio/inicio-director-banda.webp) no-repeat 0 0 / 100% 100%;
  overflow: hidden;
}
.in-director > * { position: relative; }
.in-director__patron { left: -5.14rem; top: -6.5rem; }
.in-director__titulo { margin-top: 1rem; }
.in-director__cita { margin-top: 0.51rem; }
.in-director__boton {
  display: flex;
  width: 17.5rem;
  margin-top: 2.85rem;
  border-color: #fff;
  color: #fff;
  background: transparent;
}

/* ---------- Objetivo ---------- */
.in-objetivo { padding-top: 1.4rem; }

/* ---------- Sede: foto a sangre bajo el texto ---------- */
.in-sede .in-sede__foto {
  width: 48rem;
  max-width: none;
  height: 27rem;
  margin: 4.66rem -3rem 0 -2.5rem;
}
.in-sede .in-boton-ver-mas { margin-top: 6rem; }

/* ---------- Cuotas ---------- */
.in-cuotas .in-cuotas__texto { margin-top: 2.19rem; }
.in-cuotas .in-cuotas__boton { margin-top: 9.47rem; }

/* Botón "Descargar programa completo (PDF)": no viene en el artboard (2026-10-29). */
.in-programa__pdf { display: flex; width: calc(100% - 1rem); height: 5.6rem; margin: 3rem 0.5rem 0; padding-left: 2rem; padding-right: 0.8rem; font-size: 1.5rem; }

/* ---------- Programa académico (lista): texto arriba, no centrado ---------- */
.in-programa .st-programa__item {
  position: relative;
  align-items: flex-start;
  padding-top: 2.3rem;
  padding-right: 3rem;
  padding-bottom: 0; /* el alto lo fija min-height, como las filas del diseño */
}
.in-programa .st-programa__item--destacado { min-height: 8rem; padding-top: 2.19rem; }
.in-programa .st-programa__item--grande,
.in-programa .in-programa__item--dos { min-height: 9.5rem; padding-top: 1.29rem; }
.in-programa .in-programa__item--dos { padding-top: 1.4rem; }
.in-programa .st-programa__item--destacado.st-programa__item--grande { padding-top: 2.19rem; }
.in-programa .st-programa__flecha {
  position: absolute;
  right: 0;
  top: 3.11rem;
}
.in-programa .st-programa__item--destacado .st-programa__flecha { top: 3rem; }
.in-programa .st-programa__item--grande .st-programa__flecha,
.in-programa .in-programa__item--dos .st-programa__flecha { top: 4rem; }

/* ---------- Tarjetas de actividades: cuerpo de alto fijo, botón anclado ---------- */
.in-tarjetas .st-tarjeta { position: relative; }
.in-tarjetas .st-tarjeta__cuerpo { height: 25rem; }
.in-tarjetas .st-tarjeta:nth-of-type(2) .st-tarjeta__cuerpo { height: 24rem; }
.in-tarjetas .st-tarjeta:nth-of-type(3) .st-tarjeta__cuerpo { height: 28rem; }
.in-tarjetas .st-tarjeta:nth-of-type(4) .st-tarjeta__cuerpo { height: 27.5rem; }
.in-tarjetas .st-tarjeta + .st-tarjeta { margin-top: 3rem; }
.in-tarjetas .st-tarjeta:nth-of-type(4) { margin-top: 2rem; }
.in-tarjetas .st-tarjeta__texto { margin-top: 0.22rem; }
.in-tarjetas .st-tarjeta .st-boton {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  margin: 0;
}

/* ---------- Boletín: banda oscura con tarjeta clara ---------- */
.in-boletin {
  padding: 3rem 2.5rem 7rem;
  background: var(--st-tinta);
  color: #fff;
}
.in-boletin__patron { left: -5.14rem; top: -3.66rem; }
.in-boletin .in-boletin__titulo {
  margin-top: 2.6rem;
  color: #fff;
}
.in-boletin__tarjeta {
  position: relative;
  height: 22rem;
  margin-top: 2.16rem;
  padding: 2.7rem 3rem 0;
  border-radius: 4rem;
  background: var(--st-fondo-suave);
  box-shadow: -0.2rem 0.2rem 0.5rem rgba(0, 0, 0, .35);
  color: var(--st-tinta);
}
.in-boletin__foto {
  width: calc(100% + 6rem);
  height: 15rem;
  margin: -2.7rem -3rem 0.94rem;
  object-fit: cover;
  border-radius: 4rem 4rem 0 0;
}
.in-boletin__nombre {
  margin-top: -0.65rem;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.9rem;
  color: var(--st-azul);
}
.in-boletin__texto { margin-top: 0.4rem; }
.in-boletin .in-boletin__descargar {
  position: absolute;
  left: 2.5rem;
  bottom: 1.5rem;
  width: 24rem;
  border-color: var(--st-borde-boton);
  color: var(--st-tinta);
  background: transparent;
}
.in-boletin .in-boletin__todos {
  display: flex;
  width: 43rem;
  margin-top: 11.5rem;
}
/* Boletín sin archivo (o sin boletín): el botón se vuelve pastilla informativa */
.in-boletin .in-boletin__proximamente {
  border-style: dashed;
  color: var(--st-azul);
  background: rgba(40, 152, 156, 0.08);
  cursor: default;
}

/* ---------- Colaboradores ---------- */
.in-colaboradores {
  padding-top: 10.5rem;
  padding-bottom: 9rem;
}
.in-colaboradores .in-colaboradores__rejilla { margin-top: 3.7rem; }
.in-colaboradores .in-colaboradores__rejilla li:nth-child(n+16) { margin-top: -0.5rem; } /* la última fila va 20 pt bajo la anterior, no 25 */
/* Con logotipos reales (panel Contenido) el recuadro pasa de bloque de color a
   tarjeta blanca con borde suave, y el logotipo se centra con aire; sirve igual
   para PNG sin fondo que para JPG con fondo. */
.in-colaboradores .in-colaboradores__rejilla--logos li {
  background: #fff;
  border: 1px solid #d9e7e8;
  border-radius: 0.6rem;
  overflow: hidden;
}
.in-colaboradores .in-colaboradores__rejilla--logos img {
  box-sizing: border-box;
  padding: 1.3rem;
}
/* Logotipo CON enlace (Colaboradores y Patrocinadores): que se note que es un
   enlace. Al pasar el cursor (o enfocar con teclado) el <a> gana un anillo
   teal por dentro, el logotipo se acerca un poco y aparece una flecha ↗ en la
   esquina; en pantallas táctiles (sin hover) la flecha se queda visible,
   tenue, para no perder la pista. Las tarjetas SIN enlace no cambian. Todo el
   efecto vive en el <a>, nunca en el <li>: el <li> ya lo anima el revelado al
   hacer scroll (.js [data-reveal] en sitio.css) y pisar su transform/transition
   rompería ese revelado. Transiciones sólo con prefers-reduced-motion:
   no-preference; el anillo y la flecha en hover/focus se aplican siempre. */
.in-colaboradores .in-colaboradores__rejilla--logos li > a {
  position: relative;
  outline: none;
}
/* Anillo teal por dentro, pintado ENCIMA del logotipo (el <img> cubre el <a>). */
.in-colaboradores .in-colaboradores__rejilla--logos li > a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 var(--st-teal);
  pointer-events: none;
}
.in-colaboradores .in-colaboradores__rejilla--logos li > a::after {
  content: "";
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--st-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
  box-shadow: 0 0.2rem 0.6rem rgba(27, 88, 112, .25);
  opacity: 0;
  transform: translate(0.4rem, -0.4rem) scale(.8);
  pointer-events: none;
}
.in-colaboradores .in-colaboradores__rejilla--logos li > a:hover::before,
.in-colaboradores .in-colaboradores__rejilla--logos li > a:focus-visible::before {
  box-shadow: inset 0 0 0 2px var(--st-teal);
}
.in-colaboradores .in-colaboradores__rejilla--logos li > a:hover::after,
.in-colaboradores .in-colaboradores__rejilla--logos li > a:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.in-colaboradores .in-colaboradores__rejilla--logos li > a:hover img,
.in-colaboradores .in-colaboradores__rejilla--logos li > a:focus-visible img { transform: scale(1.06); }
@media (hover: none) {
  /* Sin cursor no hay hover: la flecha queda siempre, discreta. */
  .in-colaboradores .in-colaboradores__rejilla--logos li > a::after {
    opacity: .75;
    transform: none;
    width: 1.6rem;
    height: 1.6rem;
    background-size: 0.9rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .in-colaboradores .in-colaboradores__rejilla--logos li > a::before { transition: box-shadow .25s ease; }
  .in-colaboradores .in-colaboradores__rejilla--logos li > a::after {
    transition: opacity .22s ease, transform .25s cubic-bezier(.2, .7, .2, 1);
  }
  .in-colaboradores .in-colaboradores__rejilla--logos li > a img {
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  }
}

/* Patrocinadores (panel Contenido): la misma sección repetida justo debajo de
   Colaboradores; sólo se pinta con logotipos publicados. Dos clases para ganar
   a los paddings de .in-colaboradores en cada corte: Colaboradores ya deja su
   aire inferior, así que arriba sólo va un respiro corto, y la sección cede a
   Colaboradores el hueco grande que precede al pie. */
.in-colaboradores.in-patrocinadores { padding-top: 0; }
.in-colaboradores.in-patrocinadores .in-colaboradores__rejilla { margin-top: 3.7rem; }
.in-colaboradores.in-patrocinadores .in-colaboradores__rejilla li:nth-child(n+16) { margin-top: 0; }

/* =====================================================================
   ESCRITORIO (≥ 768 px) — artboard 0-HOME-Desktop (1025 pt)
   ===================================================================== */
@media (min-width: 768px) {
  .in-solo-movil { display: none !important; }
  .in-solo-escritorio { display: inline !important; }
  span.st-patron.in-solo-escritorio { display: block !important; }

  /* Héroe: logo a la izquierda, emblema + lema a la derecha, botones al centro */
  .in-hero {
    height: 43.7rem;
    background: none;
  }
  /* El fondo del héroe llena la ventana; a 1025 px (columna = ventana) el
     recorte es exactamente el del artboard. */
  .in-hero::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: #fff url(../img/sitio/inicio-hero-fondo-escritorio-2026-11.webp) no-repeat center top / cover;
    pointer-events: none;
  }
  .in-hero .st-hero__logo { top: 4.5rem; }
  .in-hero .st-hero__emblema { left: 53.5rem; top: 4.5rem; }
  .in-hero .st-hero__lema { left: 74.12rem; top: 6.155rem; }
  .in-hero .st-hero__acciones { left: 28.5rem; right: 28rem; top: 33.5rem; }
  .in-mural { height: 31.8rem; }

  /* Sobre el CONGISP */
  .in-sobre { padding: 5.9rem 2.5rem 14.1rem; }
  .in-sobre__patron { left: 65.67rem; top: 4.19rem; width: 42.7rem; height: 46rem; }
  .in-sobre .in-sobre__etiqueta {
    margin-top: 0;
    font-size: 2.1rem;
    line-height: 2.9rem;
  }
  .in-sobre .in-sobre__titulo {
    max-width: 62rem;
    margin-top: 2.88rem;
    font-size: 2.4rem;
    line-height: 2.95rem;
  }
  .in-sobre .in-sobre__titulo + .in-sobre__titulo { margin-top: 2.67rem; }
  .in-sobre .in-boton-ver-mas { margin-top: 10.35rem; }

  /* Mensaje del director */
  .in-director {
    height: 49.7rem;
    padding: 5.15rem 2.5rem 0;
    background-image: url(../img/sitio/inicio-director-banda-escritorio.webp);
    /* bordes del compuesto (muestreados): degradado verde a la izquierda, fondo del retrato a la derecha */
    --st-sangre-izq: linear-gradient(#4f7640 0%, #3b613e 25%, #2c4f3c 50%, #214440 75%, #1a3c3e 100%);
    /* lado del retrato: arranca con los colores del borde de la foto y se funde en la tinta oscura (sin costura) */
    --st-sangre-der: linear-gradient(to right, rgba(19, 51, 62, 0), var(--st-tinta) 16rem), linear-gradient(#dadfe0 0%, #b5a49d 25%, #b2a19c 50%, #98a4b1 75%, #a6b4c6 100%);
    overflow: visible;             /* que los ::before/::after de la sangre no se recorten… */
    clip-path: inset(0 -100vmax);  /* …pero el patrón siga recortado arriba/abajo */
  }
  .in-director__patron { left: -8.93rem; top: -11.25rem; width: 52.37rem; height: 57.32rem; }
  .in-director__titulo { margin: 2.63rem 0 0 -0.15rem; }
  .in-director__cita {
    margin: 0.75rem 0 0 -0.15rem;
    font-size: 2.4rem;
    line-height: 4rem;
  }
  .in-director__boton { margin-top: 8.57rem; }

  /* Objetivo */
  .in-objetivo { padding: 8.2rem 2.5rem 8.12rem; }
  .in-objetivo .in-objetivo__texto {
    max-width: 94rem;
    margin-top: 0.58rem;
    font-size: 2.4rem;
    line-height: 4rem;
  }

  /* Sede: texto a la izquierda, foto a la derecha */
  .in-sede {
    padding: 5.5rem 2.5rem 4rem;
    --st-sangre: var(--st-fondo-suave);
  }
  .in-sede .in-sede__texto { max-width: 45.6rem; padding-right: 0; }
  .in-sede .in-sede__foto {
    position: absolute;
    left: 54.5rem;
    top: 11.5rem;
    width: 48rem;
    height: 27rem;
    margin: 0;
  }
  .in-sede .in-boton-ver-mas { margin: 4.59rem 0 0 0.1rem; }

  /* Cuotas: botón a la derecha */
  .in-cuotas { padding: 7.07rem 2.5rem 13.01rem; }
  .in-cuotas .in-cuotas__boton {
    position: absolute;
    left: 55.5rem;
    top: 13.57rem;
    width: 38rem;
    margin: 0;
  }

  /* Programa académico: rejilla de tarjetas a 3 columnas; la última (Clausura,
     config 'completa') cierra a todo lo ancho */
  .in-programa__pdf { display: inline-flex; width: auto; height: 5rem; margin: 3.4rem 0 0; padding-left: 2.6rem; padding-right: 0.6rem; font-size: 1.4rem; }
  .in-programa { padding: 6rem 2.5rem 8.5rem; }
  .in-programa .in-programa__lista {
    display: grid;
    grid-template-columns: repeat(3, 30rem);
    gap: 1.5rem 2.5rem;
    margin: 2.7rem 0 0;
    border: 0;
  }
  .in-programa__celda {
    position: relative;
    height: 19rem;
    border-radius: 4rem;
    background: var(--st-fondo-suave);
    box-shadow: -0.2rem 0.2rem 0.5rem rgba(0, 0, 0, .35);
  }
  .in-programa__celda--destacada { background: var(--st-verde); }
  .in-programa__celda--completa { grid-column: 1 / -1; height: 14rem; }
  .in-programa .st-programa__item,
  .in-programa .st-programa__item--destacado,
  .in-programa .st-programa__item--grande,
  .in-programa .in-programa__item--dos {
    display: block;
    position: static;
    height: 100%;
    min-height: 0;
    padding: 4.14rem 2.5rem 0 2.75rem;
    border: 0;
  }
  .in-programa .st-programa__item--destacado,
  .in-programa .st-programa__item--grande { padding-top: 4.05rem; }
  .in-programa .st-programa__texto { padding-left: 0; }
  .in-programa .st-programa__titulo {
    font-size: 2.1rem;
    line-height: 2.52rem;
  }
  .in-programa .st-programa__item--grande .st-programa__titulo,
  .in-programa .st-programa__item--destacado .st-programa__titulo {
    font-size: 2.4rem;
    line-height: 2.9rem;
  }
  .in-programa .st-programa__sub {
    margin-top: 0.07rem;
    font-size: 2.1rem;
    line-height: 2.52rem;
  }
  .in-programa__celda--destacada .st-programa__item,
  .in-programa__celda--destacada .st-programa__titulo { color: #fff; }
  .in-programa .st-programa__flecha,
  .in-programa .st-programa__item--destacado .st-programa__flecha,
  .in-programa .st-programa__item--grande .st-programa__flecha,
  .in-programa .in-programa__item--dos .st-programa__flecha {
    top: auto;
    right: 4rem;
    bottom: 3.5rem;
  }
  .in-programa__celda:nth-child(3n+2) .st-programa__flecha { right: 4.12rem; }
  .in-programa__celda:nth-child(3n) .st-programa__flecha { right: 4.73rem; }
  .in-programa__celda:nth-child(n+4) .st-programa__flecha { bottom: 3.12rem; }
  .in-programa__celda:nth-child(n+7) .st-programa__flecha { bottom: 2.73rem; }
  .in-programa__celda:nth-child(n+10) .st-programa__flecha { bottom: 2.35rem; }
  .in-programa__celda.in-programa__celda--completa .st-programa__flecha { right: 4rem; }

  /* Expos: etiqueta y tarjetas comparten la banda suave; tarjetas 2 × 2 */
  .in-expos {
    padding: 7rem 2.5rem 0;
    background: var(--st-fondo-suave);
    --st-sangre: var(--st-fondo-suave);
  }
  .in-tarjetas {
    display: grid;
    grid-template-columns: repeat(2, 42.5rem);
    gap: 5rem 5rem;
    padding: 5.7rem 2.5rem 5.5rem;
    --st-sangre: var(--st-fondo-suave);
  }
  .in-tarjetas__patron {
    left: -1.54rem;
    top: 4.73rem;
    width: 3.1rem;
    height: 8rem;
    background-image: url(../svg/inicio-patron-sobrante.svg);
    opacity: .089;
  }
  .in-tarjetas .st-tarjeta + .st-tarjeta,
  .in-tarjetas .st-tarjeta:nth-of-type(4) { margin-top: 0; }
  .in-tarjetas .st-tarjeta:nth-of-type(2) .st-tarjeta__cuerpo { height: 25rem; }
  .in-tarjetas .st-tarjeta:nth-of-type(4) .st-tarjeta__cuerpo { height: 28rem; }

  /* Boletín */
  .in-boletin {
    padding: 2.85rem 2.5rem 4rem;
    --st-sangre: var(--st-tinta);
  }
  .in-boletin__patron { left: -6.17rem; top: -7.95rem; width: 36.17rem; height: 39.59rem; }
  .in-boletin .in-boletin__titulo { margin: 3.61rem 0 0 1rem; }
  .in-boletin__tarjeta {
    width: 43rem;
    margin: 2.19rem 0 0 1rem;
  }
  .in-boletin .in-boletin__todos {
    position: absolute;
    left: 56.5rem;
    top: 25.35rem;
    width: 37rem;
    margin: 0;
  }

  /* Colaboradores: 6 × 4 */
  .in-colaboradores { padding: 4.5rem 2.5rem 11rem; }
  .in-colaboradores .in-colaboradores__etiqueta { margin-left: 0.5rem; }
  .in-colaboradores .in-colaboradores__rejilla {
    grid-template-columns: repeat(6, 13rem);
    gap: 2rem 3.4rem;
    margin-top: 5.2rem;
  }
  .in-colaboradores .in-colaboradores__rejilla li:nth-child(n+16) { margin-top: 0; }
  .in-colaboradores.in-patrocinadores { padding: 0 2.5rem 11rem; }
  .in-colaboradores.in-patrocinadores .in-colaboradores__rejilla { margin-top: 5.2rem; }
}

/* =====================================================================
   LAPTOP Y ESCRITORIO (≥ 1200 px) — composición propia sobre el contenedor
   de sitio.css (`--st-lado`). Mismo contenido y orden que el artboard,
   salvo "Objetivo", que sube junto a "Sobre el CONGISP" (dos columnas)
   para que la presentación se lea de un vistazo.
   ===================================================================== */
@media (min-width: 1200px) {
  .in-pagina main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .in-pagina main > * { grid-column: 1 / -1; }

  /* ---------- Héroe: logo + lema + acciones | emblema ---------- */
  .in-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-content: center;
    column-gap: 8rem;
    height: auto;
    min-height: min(62rem, calc(100vh - 8rem - 12rem)); /* deja asomar el mural */
    padding: 7rem var(--st-lado) 7.5rem;
  }
  .in-hero::before { left: 0; right: 0; }
  .in-hero > * { position: relative; }
  .in-hero .st-hero__logo {
    position: relative;
    left: auto; top: auto;
    grid-column: 1;
    width: 60rem;
    height: auto;
    aspect-ratio: 425 / 195;
  }
  .in-hero .st-hero__lema {
    position: relative;
    left: auto; top: auto;
    grid-column: 1;
    margin-top: 4.4rem;
    white-space: normal;
    max-width: 52rem;
    font-size: 2.4rem;
    line-height: 3.3rem;
    letter-spacing: -0.005em;
  }
  .in-hero .st-hero__lema br { display: none; }
  .in-hero .st-hero__lema span {
    margin-top: 0.8rem;
    font-size: 2rem;
    line-height: 2.9rem;
  }
  .in-hero .st-hero__acciones {
    position: relative;
    left: auto; right: auto; top: auto;
    grid-column: 1;
    justify-content: flex-start;
    gap: 1.6rem;
    margin-top: 4.4rem;
  }
  .in-hero .st-hero__acciones .st-boton { width: 23rem; }
  .in-hero .st-hero__emblema {
    position: relative;
    left: auto; top: auto;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    width: clamp(30rem, 26vw, 40rem);
    height: auto;
    aspect-ratio: 1;
    margin-right: 2rem;
  }

  /* ---------- Sobre el CONGISP | Objetivo ---------- */
  .in-sobre,
  .in-objetivo {
    grid-row: 3;
    padding-top: 11rem;
    padding-bottom: 11rem;
  }
  .in-pagina .in-sobre {
    grid-column: 1;
    z-index: 0;
    padding-left: var(--st-lado);
    padding-right: 5rem;
    overflow: visible;
  }
  .in-pagina .in-objetivo {
    grid-column: 2;
    z-index: 1;
    padding-left: 5rem;
    padding-right: var(--st-lado);
    overflow: visible;
  }
  /* el patrón cruza al costado derecho de "Objetivo", detrás del texto */
  .in-sobre__patron {
    left: calc(200% - 22rem);
    top: 4rem;
    width: 42.7rem;
    height: 46rem;
    opacity: .55;
  }
  /* sin icono en este bloque: el hueco alinea la etiqueta con la de "Objetivo" */
  .in-sobre .in-sobre__etiqueta { margin-top: 3.4rem; font-size: 1.5rem; line-height: 2.1rem; }
  .in-sobre .in-sobre__titulo {
    max-width: 56rem;
    margin-top: 2.4rem;
    font-size: 3.4rem;
    line-height: 4.2rem;
  }
  .in-sobre .in-sobre__titulo + .in-sobre__titulo {
    margin-top: 2.4rem;
    font-size: 2.4rem;
    line-height: 3.2rem;
    color: var(--st-teal);
  }
  .in-sobre .in-boton-ver-mas { margin-top: 4.8rem; width: 21rem; }
  .in-objetivo .st-etiqueta { margin-top: 0.6rem; }
  .in-objetivo .in-objetivo__texto {
    max-width: 60rem;
    margin-top: 2.4rem;
    font-size: 1.9rem;
    line-height: 3.2rem;
  }

  /* ---------- Mensaje del director: foto a la derecha, degradado a la izquierda ---------- */
  .in-director {
    height: auto;
    min-height: 46rem;
    padding: 8.5rem var(--st-lado);
    background:
      url(../img/sitio/inicio-director-banda-escritorio.webp) no-repeat right center / auto 100%,
      linear-gradient(#4f7640 0%, #3b613e 25%, #2c4f3c 50%, #214440 75%, #1a3c3e 100%);
    clip-path: none;
    overflow: hidden;
  }
  .in-director__patron { left: -8rem; top: -12rem; width: 52.37rem; height: 57.32rem; }
  .in-director__icono { width: 2.8rem; height: 2.8rem; }
  .in-director__titulo { margin: 1.6rem 0 0; font-size: 1.5rem; letter-spacing: .14em; }
  .in-director__cita {
    max-width: 62rem;
    margin: 1.6rem 0 0;
    font-size: 2.8rem;
    line-height: 4.2rem;
    letter-spacing: -0.005em;
  }
  .in-director__cita br { display: none; }
  .in-director__boton { width: 19rem; margin-top: 4.4rem; }

  /* ---------- Sede: texto | foto ---------- */
  .in-sede {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 8rem;
    padding: 11rem var(--st-lado);
    background: var(--st-fondo-suave);
    overflow: visible;
  }
  .in-sede > * { grid-column: 1; }
  .in-sede .st-titulo { margin-top: 1.6rem; font-size: 3rem; line-height: 3.8rem; }
  .in-sede .st-titulo br { display: none; }
  .in-sede .in-sede__texto { max-width: none; margin-top: 2.4rem; }
  .in-sede .in-sede__foto {
    position: relative;
    left: auto; top: auto;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: 1.6rem;
    box-shadow: 0 2.4rem 5rem rgba(19, 51, 62, .16);
  }
  .in-sede .in-boton-ver-mas { margin: 4rem 0 0; width: 21rem; }

  /* ---------- Cuotas: franja de llamado ---------- */
  .in-cuotas {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 1.6rem;
    align-items: center;
    padding: 9rem var(--st-lado);
  }
  .in-cuotas .st-icono { grid-column: 1; grid-row: 1; }
  .in-cuotas .st-etiqueta { grid-column: 2; grid-row: 1; margin: 0; }
  .in-cuotas .in-cuotas__texto {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-top: 1.4rem;
    font-size: 2.8rem;
    line-height: 3.8rem;
    color: var(--st-azul);
  }
  .in-cuotas .in-cuotas__texto br { display: none; }
  .in-cuotas .in-cuotas__boton {
    position: relative;
    left: auto; top: auto;
    grid-column: 3;
    grid-row: 1 / -1;
    width: 34rem;
    margin: 0;
  }

  /* ---------- Programa académico: rejilla a 4 columnas; Clausura (config
     'completa') ocupa la fila entera, así la rejilla cierra igual con 11, 13 o
     las categorías que el Administrador tenga dadas de alta ---------- */
  .in-programa { padding: 4rem var(--st-lado) 11rem; }
  .in-programa .in-programa__lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 3.6rem;
  }
  .in-programa__celda {
    height: auto;
    min-height: 17rem;
    border-radius: 2.4rem;
    box-shadow: 0 0.2rem 0.4rem rgba(19, 51, 62, .08), 0 0.8rem 2rem rgba(19, 51, 62, .08);
  }
  .in-programa__celda--completa { grid-column: 1 / -1; min-height: 13rem; }
  .in-programa .st-programa__item,
  .in-programa .st-programa__item--destacado,
  .in-programa .st-programa__item--grande,
  .in-programa .in-programa__item--dos {
    position: relative;
    padding: 3rem 3rem 6.4rem;
  }
  .in-programa .st-programa__titulo,
  .in-programa .st-programa__item--grande .st-programa__titulo,
  .in-programa .st-programa__item--destacado .st-programa__titulo {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
  .in-programa .st-programa__sub { font-size: 1.8rem; line-height: 2.6rem; }
  .in-programa .st-programa__flecha,
  .in-programa .st-programa__item--destacado .st-programa__flecha,
  .in-programa .st-programa__item--grande .st-programa__flecha,
  .in-programa .in-programa__item--dos .st-programa__flecha,
  .in-programa__celda:nth-child(n) .st-programa__flecha {
    right: 3rem;
    bottom: 3rem;
    top: auto;
    width: 2rem;
    height: 2rem;
  }
  .in-programa__celda:hover .st-programa__flecha { transform: translate(0.3rem, -0.3rem); }
  .in-programa .st-programa__flecha { transition: transform .22s cubic-bezier(.2, .7, .2, 1); }

  /* ---------- Expos: etiqueta + cuatro tarjetas en una fila ---------- */
  .in-expos { padding: 10rem var(--st-lado) 0; }
  .in-tarjetas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.4rem;
    padding: 3.6rem var(--st-lado) 11rem;
    background: var(--st-fondo-suave);
  }
  .in-tarjetas__patron { left: 2rem; }
  .in-tarjetas .st-tarjeta {
    display: flex;
    flex-direction: column;
    border-radius: 1.6rem 1.6rem 3.2rem 3.2rem;
    box-shadow: 0 0.2rem 0.4rem rgba(19, 51, 62, .08), 0 1rem 2.4rem rgba(19, 51, 62, .1);
  }
  .in-tarjetas .st-tarjeta__foto { height: auto; aspect-ratio: 425 / 190; }
  .in-tarjetas .st-tarjeta__cuerpo,
  .in-tarjetas .st-tarjeta:nth-of-type(n) .st-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: auto;
    padding: 2rem 2.4rem 2.4rem;
  }
  .in-tarjetas .st-tarjeta__etiqueta { font-size: 1.2rem; line-height: 1.8rem; letter-spacing: .14em; }
  .in-tarjetas .st-tarjeta__titulo { margin-top: 0.4rem; font-size: 1.9rem; line-height: 2.5rem; }
  .in-tarjetas .st-tarjeta__texto {
    margin: 1.2rem 0 2.8rem;
    font-size: 1.5rem;
    line-height: 2.4rem;
    white-space: normal;
  }
  .in-tarjetas .st-tarjeta .st-boton {
    position: relative;
    left: auto; bottom: auto;
    width: 100%;
    margin: auto 0 0;
  }

  /* ---------- Boletín: encabezado + botón | tarjeta ---------- */
  .in-boletin {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 1.6rem;
    padding: 10rem var(--st-lado);
    overflow: hidden;
  }
  .in-boletin__patron { left: -6rem; top: -8rem; }
  .in-boletin > .st-icono { grid-column: 1; grid-row: 1; align-self: center; }
  .in-boletin > .st-etiqueta { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .in-boletin .in-boletin__titulo {
    grid-column: 1 / 3;
    grid-row: 2;
    margin: 2.4rem 0 0;
    font-size: 4rem;
    line-height: 4.8rem;
    letter-spacing: -0.01em;
  }
  .in-boletin .in-boletin__todos {
    position: relative;
    left: auto; top: auto;
    grid-column: 1 / 3;
    grid-row: 3;
    align-self: end;
    width: 34rem;
    margin: 4rem 0 0;
  }
  .in-boletin__tarjeta {
    grid-column: 3;
    grid-row: 1 / -1;
    width: auto;
    height: auto;
    min-height: 26rem;
    margin: 0 0 0 6rem;
    padding: 4rem 4rem 10rem;
    border-radius: 3.2rem;
    box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, .28);
  }
  .in-boletin__foto { margin: -4rem -4rem 2rem; width: calc(100% + 8rem); border-radius: 3.2rem 3.2rem 0 0; }
  .in-boletin__nombre { margin-top: 0.4rem; font-size: 3rem; line-height: 3.6rem; }
  .in-boletin .in-boletin__descargar { left: 4rem; bottom: 3.2rem; }

  /* ---------- Colaboradores: 8 × 3 ---------- */
  .in-colaboradores { padding: 11rem var(--st-lado) 12rem; }
  .in-colaboradores .in-colaboradores__etiqueta { margin-left: 0; }
  .in-colaboradores .in-colaboradores__rejilla {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 3.6rem;
  }
  .in-colaboradores .in-colaboradores__rejilla li {
    height: auto;
    aspect-ratio: 1;
    border-radius: 1.2rem;
    overflow: hidden;
  }
  .in-colaboradores.in-patrocinadores { padding: 0 var(--st-lado) 12rem; }
  .in-colaboradores.in-patrocinadores .in-colaboradores__rejilla { margin-top: 3.6rem; }
}

/* =====================================================================
   MOVIMIENTO ≥ 1200 px — momento principal de la portada: el emblema se
   arma con sus cuatro piezas (cuatro sistemas que se integran) mientras el
   logo se descubre de izquierda a derecha y el lema y los botones suben.
   Luego el emblema flota y se inclina levemente hacia el cursor (sitio.js
   escribe --in-rx/--in-ry). Todo el estado final es el diseño estático; con
   movimiento reducido no hay nada de esto.
   ===================================================================== */
@media (min-width: 1200px) {
  .in-hero .st-hero__emblema { display: none; }
  .in-hero__emblema-vivo {
    display: block;
    position: relative;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    width: clamp(30rem, 26vw, 40rem);
    aspect-ratio: 1;
    margin-right: 2rem;
    perspective: 120rem;
  }
  .in-emblema {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotateX(var(--in-rx, 0deg)) rotateY(var(--in-ry, 0deg));
    transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  }
  .in-emblema__pieza {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  }
  /* al pasar el cursor las piezas se separan apenas: se ve que son cuatro */
  .in-hero__emblema-vivo:hover .in-emblema__pieza--norte { transform: translateY(-4%); }
  .in-hero__emblema-vivo:hover .in-emblema__pieza--este { transform: translateX(4%); }
  .in-hero__emblema-vivo:hover .in-emblema__pieza--sur { transform: translateY(4%); }
  .in-hero__emblema-vivo:hover .in-emblema__pieza--oeste { transform: translateX(-4%); }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  @keyframes in-pieza-norte { from { opacity: 0; transform: translateY(-55%) rotate(-25deg) scale(.7); } }
  @keyframes in-pieza-este  { from { opacity: 0; transform: translateX(55%) rotate(25deg) scale(.7); } }
  @keyframes in-pieza-sur   { from { opacity: 0; transform: translateY(55%) rotate(-25deg) scale(.7); } }
  @keyframes in-pieza-oeste { from { opacity: 0; transform: translateX(-55%) rotate(25deg) scale(.7); } }
  @keyframes in-flotar { 50% { translate: 0 -1.2rem; } }
  @keyframes in-destello {
    from { opacity: 0; transform: scale(.4); }
    40% { opacity: .55; }
    to { opacity: 0; transform: scale(1.35); }
  }
  @keyframes in-descubrir { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes in-subir { from { opacity: 0; transform: translateY(2.4rem); filter: blur(.6rem); } }
  @keyframes in-fondo { from { transform: scale(1.08); opacity: .4; } }

  .in-hero::before { animation: in-fondo 1.8s cubic-bezier(.16, 1, .3, 1) both; }
  .in-hero .st-hero__logo { animation: in-descubrir 1.1s cubic-bezier(.65, 0, .35, 1) .15s both; }
  .in-hero .st-hero__lema { animation: in-subir .9s cubic-bezier(.16, 1, .3, 1) .75s both; }
  .in-hero .st-hero__acciones { animation: in-subir .9s cubic-bezier(.16, 1, .3, 1) .95s both; }

  .in-emblema__pieza { animation: 1.1s cubic-bezier(.16, 1, .3, 1) backwards; }
  .in-emblema__pieza--norte { animation-name: in-pieza-norte; animation-delay: .35s; }
  .in-emblema__pieza--este  { animation-name: in-pieza-este;  animation-delay: .5s; }
  .in-emblema__pieza--sur   { animation-name: in-pieza-sur;   animation-delay: .65s; }
  .in-emblema__pieza--oeste { animation-name: in-pieza-oeste; animation-delay: .8s; }
  /* el armado termina en un halo suave, y luego flota sin prisa */
  .in-hero__emblema-vivo::before {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(145, 192, 66, .35), rgba(39, 151, 155, .12) 60%, transparent);
    pointer-events: none;
    opacity: 0;
    animation: in-destello 1.4s cubic-bezier(.16, 1, .3, 1) 1.55s both;
  }
  .in-emblema { animation: in-flotar 7s ease-in-out 2.2s infinite; }

  /* Mensaje del director: la cita se ilumina de izquierda a derecha al entrar */
  .js .in-director[data-reveal] .in-director__cita {
    -webkit-mask-image: linear-gradient(90deg, #000 45%, rgba(0, 0, 0, .12) 55%);
    mask-image: linear-gradient(90deg, #000 45%, rgba(0, 0, 0, .12) 55%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transition: -webkit-mask-position 1.6s cubic-bezier(.65, 0, .35, 1) .35s, mask-position 1.6s cubic-bezier(.65, 0, .35, 1) .35s;
  }
  .js .in-director.st-visible .in-director__cita { -webkit-mask-position: 0 0; mask-position: 0 0; }

  /* Programa: al pasar el cursor, un tinte crece desde la esquina de la flecha */
  .in-programa__celda { isolation: isolate; overflow: hidden; }
  .in-programa__celda::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #e5f1f1;
    clip-path: circle(0 at calc(100% - 4rem) calc(100% - 4rem));
    transition: clip-path .55s cubic-bezier(.16, 1, .3, 1);
  }
  .in-programa__celda--destacada::before { background: #86b33a; }
  .in-programa__celda:hover::before,
  .in-programa__celda:focus-within::before { clip-path: circle(150% at calc(100% - 4rem) calc(100% - 4rem)); }
}

/* Movimiento ligero < 1200 px: entrada del héroe con los elementos del
   diseño (logo que se descubre, emblema que gira hasta su sitio, lema y
   botones que suben). Sólo opacity/clip-path/rotate/scale/translate. */
@media (max-width: 1199.98px) and (prefers-reduced-motion: no-preference) {
  @keyframes in-m-descubrir { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes in-m-emblema { from { opacity: 0; rotate: -60deg; scale: .6; } }
  @keyframes in-m-subir { from { opacity: 0; translate: 0 1.4rem; } }
  .in-hero .st-hero__logo { animation: in-m-descubrir .9s cubic-bezier(.65, 0, .35, 1) .1s backwards; }
  .in-hero .st-hero__emblema { animation: in-m-emblema 1s cubic-bezier(.16, 1, .3, 1) .35s backwards; }
  .in-hero .st-hero__lema { animation: in-m-subir .7s cubic-bezier(.16, 1, .3, 1) .55s backwards; }
  .in-hero .st-hero__acciones { animation: in-m-subir .7s cubic-bezier(.16, 1, .3, 1) .7s backwards; }
}