/* Sitio público del congreso — réplica de los diseños de la diseñadora:
 * móvil (artboards de 480 pt, 2026-10-23, retrabajo 2026-10-27) y escritorio
 * (artboards de 1025 pt, 2026-10-27).
 *
 * ESCALA: cada medida del diseño (en puntos) se escribe como pt/10 rem.
 *  - Móvil (< 768 px): 1rem = 1/48 del ancho del viewport ⇒ 10 px a 480 px;
 *    en un teléfono de 390 px todo se reduce un 19 %, texto incluido, y en
 *    uno de 700 px crece un 46 %: siempre llena la pantalla.
 *  - Escritorio (≥ 768 px): 1rem = 1/102.5 del viewport ⇒ 10 px a 1025 px (el
 *    artboard); a 768 px el diseño se ve al 75 % y a 1920 px al 187 %: el
 *    contenido queda pegado a los bordes de la ventana como en el artboard
 *    (decisión del propietario 2026-10-27: nada de columna centrada con
 *    márgenes). Sólo a partir de 1920 px el rem se congela (18.73 px), la
 *    columna se centra y lo que en el artboard llega al borde (barra, murales,
 *    héroe, bandas, pie) se prolonga con `.st-sangre*` / `.st-mural-banda`.
 * Las reglas de escritorio van en los bloques `@media (min-width: 768px)`, al
 * final de esta hoja y de cada `sitio-<pagina>.css`.
 *
 * Tipografías (guía de estilos de la diseñadora, 2026-10-27): Encode Sans
 * Expanded 300/700 para todo, incluidos los botones (Bold 14 pt; sustituye a
 * Keep Calm, que era comercial), y Jost 400 sólo para los enlaces de la barra
 * de escritorio. Todas auto-alojadas (la red del INSP no sale a Google Fonts).
 */

@font-face {
  font-family: 'Encode Sans Expanded';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../assets/fonts/files/encode-sans-expanded-300-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Encode Sans Expanded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../assets/fonts/files/encode-sans-expanded-700-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../assets/fonts/files/jost-latin.woff2) format('woff2');
}

:root {
  --st-fuente: 'Encode Sans Expanded', 'Segoe UI', system-ui, sans-serif;
  --st-fuente-nav: 'Jost', var(--st-fuente);
  --st-tinta: #13333e;      /* texto corrido */
  --st-tinta-2: #1d1d1b;    /* texto de tarjetas */
  --st-azul: #1b5870;       /* encabezados */
  --st-teal: #27979b;       /* etiquetas de sección */
  --st-verde: #91c042;
  --st-gris-nav: #e0e4e6;
  --st-fondo-suave: #f6fafa;
  --st-pie: #0e252e;
  --st-pie-tinta: #32858b;
  --st-borde-boton: rgba(29, 29, 27, 0.5);
}

html {
  font-size: calc(100vw / 48);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Entre 480 y 767 px el diseño móvil sigue escalando con el ancho (antes se
   congelaba en una columna de 480 px centrada sobre gris: el propietario pidió
   que en teléfono también llene la pantalla, 2026-10-27). */
@media (min-width: 768px) {
  html { font-size: calc(100vw / 102.5); }
  /* Los patrones decorativos y las sangres (.st-sangre, 100vmax) salen del
     lienzo a propósito y no deben generar scroll lateral. `html` evita que el
     overflow de body se propague al viewport; `clip` en body recorta de verdad
     (con `hidden` el ancho de scroll seguía creciendo). */
  html { overflow-x: hidden; }
  body { overflow-x: clip; }
}
@media (min-width: 1920px) {
  html { font-size: 18.73px; } /* 102.5rem = 1920 px: de ahí en adelante la columna se centra y las bandas sangran */
}
html {
  scroll-padding-top: 6.5rem; /* barra fija móvil */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--st-fuente);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: var(--st-tinta);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg { display: block; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 700; }

.st-pagina {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  background: #fff;
  /* el patrón decorativo se sale del lienzo a propósito; `clip` (y no
     `hidden`) para que la barra `position: sticky` siga funcionando: un
     ancestro con overflow:hidden se vuelve el contenedor de scroll y la
     barra deja de pegarse arriba. */
  overflow: hidden;
  overflow: clip;
}

.st-oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Barra de navegación ---------- */

.st-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 6.5rem;
  background: var(--st-gris-nav);
}
.st-nav__logo {
  position: absolute;
  left: 2.5rem;
  top: 1.09rem;
  width: 12.1rem;
  height: 4rem;
}
.st-nav__logo img { width: 100%; height: 100%; }
.st-nav__menu {
  position: absolute;
  right: 2.5rem;
  top: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.st-nav__menu span {
  position: absolute;
  left: 0;
  width: 3.5rem;
  height: 0.66rem;
  background: var(--st-azul);
  transition: transform .2s, opacity .2s;
}
.st-nav__menu span:nth-child(1) { top: 0; }
.st-nav__menu span:nth-child(2) { top: 1.42rem; }
.st-nav__menu span:nth-child(3) { top: 2.84rem; }
.st-nav__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(1.42rem) rotate(45deg); }
.st-nav__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.st-nav__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-1.42rem) rotate(-45deg); }

.st-nav__enlaces,
.st-nav__sesion { display: none; } /* sólo escritorio, ver el bloque final */
.st-nav__flecha { display: none; } /* indicador de submenú: sólo ≥ 1200 px */

/* Menú móvil (no viene en el diseño). Hoja oscura a pantalla completa bajo la
   barra: dos destacados grandes (Inicio, Convocatoria), los grupos de la
   barra de escritorio como listas con chevrón, acciones y contacto al final.
   La página actual lleva una barra verde. Movimiento: sólo un fundido corto
   de la hoja (bloque "MOVIMIENTO LIGERO"). sitio.js bloquea el scroll de la
   página mientras está abierto (html.st-menu-abierto). */
.st-menu {
  position: fixed;
  z-index: 19;
  top: 6.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2.4rem 2.5rem calc(3.2rem + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(39, 151, 155, .28), transparent 60%),
    linear-gradient(180deg, #16404d 0%, var(--st-tinta) 45%, var(--st-pie) 100%);
  color: #fff;
}
.st-menu[hidden] { display: none; }
html.st-menu-abierto { overflow: hidden; }
span.st-menu__patron {
  right: -9rem;
  top: -4rem;
  width: 24rem;
  height: 26.3rem;
  opacity: .12;
}
.st-menu > :not(.st-menu__patron) { position: relative; }

/* Destacados */
.st-menu__destacados a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  font-weight: 700;
  font-size: 3rem;
  line-height: 4.2rem;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
}
.st-menu__destacados a::after {
  content: '';
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.4rem;
  border-top: 0.25rem solid var(--st-verde);
  border-right: 0.25rem solid var(--st-verde);
  rotate: 45deg;
}

/* Grupos */
.st-menu__grupo {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 3rem;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--st-verde);
}
.st-menu__grupo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(145, 192, 66, .35);
}
.st-menu__lista { margin-top: 0.6rem; }
.st-menu__lista a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: 5rem;
  padding: 0 0.2rem 0 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
}
.st-menu__lista li:last-child a { border-bottom: 0; }
.st-menu__lista a::after {
  content: '';
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-top: 0.2rem solid rgba(255, 255, 255, .45);
  border-right: 0.2rem solid rgba(255, 255, 255, .45);
  rotate: 45deg;
}
/* Página actual */
.st-menu a[aria-current="page"] { color: #fff; font-weight: 700; }
.st-menu__lista a[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 0.3rem;
  border-radius: 0.2rem;
  background: var(--st-verde);
}
.st-menu__destacados a[aria-current="page"] { color: var(--st-verde); }
/* Tacto: el renglón se ilumina */
.st-menu__lista a:active,
.st-menu__destacados a:active { background: rgba(255, 255, 255, .06); }

/* Acciones: dos botones de igual ancho, texto centrado (la regla genérica de
   enlaces del menú no les aplica) */
.st-menu__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 3.2rem;
}
.st-menu__acciones .st-boton {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 1rem;
  text-align: center;
}
.st-menu__acciones .st-boton--contorno {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}

/* Contacto */
.st-menu__contacto {
  margin-top: 2.8rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--st-pie-tinta);
  text-align: center;
}
.st-menu__contacto a {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  text-decoration: none;
}

/* ---------- Botones ---------- */

.st-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  padding: 0;
  border-radius: 2.5rem;
  font-family: var(--st-fuente);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}
.st-boton--primario {
  background: var(--st-tinta);
  color: #fff;
}
.st-boton--contorno {
  background: #fff;
  color: var(--st-tinta);
  border-color: var(--st-borde-boton);
}
.st-boton--verde {
  background: var(--st-verde);
  color: #fff;
}
/* Con flecha: la flecha va anclada a la derecha y el texto se centra en el
   espacio restante; --centrado centra el texto en todo el botón (así están
   "Ver más" / "Leer más" en el diseño). */
.st-boton--flecha { padding-left: 2rem; padding-right: 5.5rem; }
.st-boton--flecha.st-boton--centrado { padding-left: 0; padding-right: 0; }
.st-boton__flecha {
  position: absolute;
  right: 2.62rem;
  top: 50%;
  width: 1.88rem;
  height: 1.88rem;
  margin-top: -0.94rem;
}
.st-boton__flecha--abajo { transform: rotate(135deg); }
/* Botón de descarga (partes/boton-descarga): texto centrado en el espacio libre
   e icono de descarga en una pastilla circular a la derecha. */
.st-boton--descarga {
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0 0.6rem 0 2.6rem;
}
.st-boton--descarga .st-boton__texto { flex: 1 1 auto; text-align: center; }
.st-boton__descarga {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: inherit;
}
.st-boton--contorno .st-boton__descarga,
.st-boton--claro .st-boton__descarga { background: var(--st-tinta); color: #fff; }
.st-boton--verde .st-boton__descarga { background: rgba(255, 255, 255, .22); }
.st-boton__descarga svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.st-boton--sombra { box-shadow: -0.2rem 0.2rem 0 rgba(0, 0, 0, .2); }

/* ---------- Secciones ---------- */

.st-seccion {
  position: relative;
  padding: 3rem 3rem 3rem 2.5rem;
  overflow: hidden;
}
.st-seccion--suave { background: var(--st-fondo-suave); }
.st-seccion > * { position: relative; }

/* span.* para ganar a las reglas "contenedor > *" {position:relative} de las hojas por página */
span.st-patron {
  position: absolute;
  display: block;
  width: 30.14rem;
  height: 33rem;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  pointer-events: none;
}
.st-patron--azul { background-image: url(../svg/patron-azul.svg); }
.st-patron--naranja { background-image: url(../svg/patron-naranja.svg); }
.st-patron--teal { background-image: url(../svg/patron-teal.svg); }
.st-patron--rosa { background-image: url(../svg/patron-rosa.svg); }
.st-patron--verde { background-image: url(../svg/patron-verde.svg); }

.st-icono {
  width: 2.5rem;
  height: 2.5rem;
}

.st-etiqueta {
  margin-top: 0.6rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.2rem;
  letter-spacing: .115em;
  text-transform: uppercase;
  color: var(--st-teal);
}
.st-etiqueta--chica {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  line-height: 2rem;
}
.st-etiqueta--verde { color: var(--st-verde); }
.st-etiqueta--rosa { color: #d33689; }

.st-titulo {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.44rem;
  color: var(--st-azul);
}
.st-titulo--tinta { color: var(--st-tinta); }
.st-etiqueta + .st-titulo { margin-top: -0.4rem; }
.st-etiqueta--chica + .st-titulo { margin-top: 0; }
.st-titulo + .st-titulo { margin-top: 2.44rem; }

.st-texto {
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: var(--st-tinta);
}
.st-texto + .st-texto { margin-top: 2.5rem; }
.st-etiqueta + .st-texto,
.st-titulo + .st-texto { margin-top: 1.05rem; }
.st-texto--grande {
  font-size: 2rem;
  line-height: 2.5rem;
}
.st-texto--15 {
  font-size: 1.5rem;
  line-height: 2.5rem;
}

/* ---------- Portada: héroe ---------- */

.st-hero {
  position: relative;
  height: 58rem;
  background: #fff url(../img/sitio/hero-fondo-2026-11.webp) no-repeat 0 0 / 100% 100%;
}
.st-hero__logo {
  position: absolute;
  left: 2.5rem;
  top: 3.5rem;
  width: 42.5rem;
  height: 19.5rem;
}
.st-hero__emblema {
  position: absolute;
  left: 2.45rem;
  top: 26.5rem;
  width: 18.57rem;
  height: 18.56rem;
}
.st-hero__lema {
  position: absolute;
  left: 23.07rem;
  top: 28.15rem;
  white-space: nowrap;
  color: #26606f;
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 2.37rem;
}
.st-hero__lema span {
  display: block;
  margin-top: 0.35rem;
  font-weight: 300;
  font-size: 1.41rem;
  line-height: 2.06rem;
}
.st-hero__acciones {
  position: absolute;
  left: 2.5rem;
  right: 2.5rem;
  top: 49rem;
  display: flex;
  justify-content: space-between;
}
.st-hero__acciones .st-boton--primario { width: 20rem; }
.st-hero__acciones .st-boton--contorno { width: 21rem; }

.st-mural {
  display: block;
  width: 100%;
  height: 32rem;
  object-fit: cover;
}
.st-mural--pie { height: 31.5rem; }

/* ---------- Portada: Sobre el CONGISP ---------- */

.st-sobre { padding-bottom: 3.1rem; }
.st-sobre .st-boton { margin-top: 5.55rem; width: 21rem; }

/* ---------- Banda "Mensaje del director" ---------- */

.st-director {
  position: relative;
  display: block;
  height: 29.9rem;
  padding: 7.2rem 2.5rem 0;
  background: var(--st-tinta) url(../img/sitio/director-banda.webp) no-repeat 0 0 / 100% 100%;
  color: #fff;
  text-decoration: none;
}
.st-director__titulo {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.2rem;
  letter-spacing: .115em;
}
.st-director__cita {
  margin-top: 0.51rem;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.44rem;
}

/* ---------- Portada: Objetivo / Sede ---------- */

.st-objetivo { padding-top: 6rem; padding-bottom: 4.16rem; }

.st-sede { padding-bottom: 2.5rem; }
/* Illustrator partió "en Salud / Pública" con un marco de 423 pt; con 425 Chrome mete una palabra más. */
.st-sede .st-texto { padding-right: 0.15rem; }
.st-sede__foto {
  width: 43rem;
  height: 27rem;
  margin-top: 2.16rem;
  object-fit: cover;
}
.st-sede .st-boton { margin-top: 2.5rem; width: 21rem; }
.st-sede-espacio { height: 6rem; }

/* ---------- Portada: Cuotas ---------- */

.st-cuotas { padding-bottom: 4rem; }
.st-cuotas .st-texto--grande { margin-top: 2.44rem; }
.st-cuotas .st-boton {
  display: flex;
  width: 38rem;
  margin: 9.22rem auto 0;
}

/* ---------- Portada: Programa académico ---------- */

.st-programa { padding-bottom: 3.53rem; }
.st-programa__lista {
  margin: 3.17rem 0.5rem 0;
  border-bottom: 1px solid #d1dee2;
}
.st-programa__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 7.5rem;
  padding: 2rem 0;
  border-top: 1px solid #d1dee2;
  color: var(--st-azul);
  text-decoration: none;
}
.st-programa__item--grande { min-height: 8rem; }
.st-programa__texto { padding-left: 0.5rem; }
.st-programa__titulo {
  display: block;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 2.5rem;
  white-space: pre-line;
}
.st-programa__item--grande .st-programa__titulo,
.st-programa__item--destacado .st-programa__titulo {
  font-size: 2.4rem;
  line-height: 2.9rem;
}
.st-programa__item--destacado .st-programa__titulo { color: var(--st-verde); }
.st-programa__sub {
  display: block;
  font-size: 2.1rem;
  line-height: 2.5rem;
}
.st-programa__flecha {
  flex: none;
  width: 1.88rem;
  height: 1.88rem;
}

/* ---------- Tarjetas de actividades ---------- */

.st-expos { padding-bottom: 7.2rem; }
.st-tarjetas {
  position: relative;
  padding: 4.5rem 2.5rem 4rem 3rem;
  background: var(--st-fondo-suave);
  overflow: hidden;
}
.st-tarjetas > * { position: relative; }
.st-tarjeta {
  background: #fff;
  border-radius: 1.5rem 1.5rem 4rem 4rem;
  box-shadow: -0.2rem 0.2rem 0.5rem rgba(0, 0, 0, .35);
  overflow: hidden;
}
.st-tarjeta + .st-tarjeta { margin-top: 3rem; }
.st-tarjeta__foto {
  width: 100%;
  height: 15rem;
  object-fit: cover;
}
.st-tarjeta__cuerpo { padding: 0.94rem 2.3rem 1.5rem 2rem; }
.st-tarjeta__etiqueta {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: .115em;
  text-transform: uppercase;
  color: var(--st-verde);
}
.st-tarjeta__titulo {
  margin-top: -0.12rem;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.16rem;
  color: var(--st-tinta);
  white-space: pre-line;
}
.st-tarjeta__texto {
  margin-top: 0.4rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
  color: var(--st-tinta-2);
  white-space: pre-line;
}
.st-tarjeta .st-boton {
  margin: 3.12rem 0 0 -0.5rem;
  width: 25rem;
}
.st-tarjeta .st-boton--centrado { width: 21rem; }

/* ---------- Portada: Boletín / Colaboradores ---------- */

.st-boletin { padding-bottom: 2.5rem; }
.st-boletin__titulo {
  margin-top: 6.86rem;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 2.9rem;
  color: var(--st-azul);
}
.st-boletin .st-tarjeta { margin-top: 1.9rem; width: 42.5rem; }
.st-boletin__todos {
  display: flex;
  width: 43rem;
  margin-top: 6.5rem;
}

.st-colaboradores { padding-bottom: 28.5rem; }
.st-colaboradores__rejilla {
  display: grid;
  grid-template-columns: repeat(3, 13rem);
  gap: 2.5rem 2rem;
  margin-top: 5.2rem;
}
.st-colaboradores__rejilla li {
  height: 13rem;
  background: #acced0;
}
.st-colaboradores__rejilla a {
  display: block;
  height: 100%;
}
.st-colaboradores__rejilla img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* ---------- Pie ---------- */

.st-pie {
  position: relative;
  padding: 4.5rem 2.5rem 3.71rem;
  background: var(--st-pie);
  color: var(--st-pie-tinta);
  font-size: 1.2rem;
  line-height: 1.64rem;
}
.st-pie__logo { width: 18.62rem; height: 6rem; }
.st-pie__direccion { margin-top: 1.65rem; }
.st-pie__rubro {
  margin-top: 3.13rem;
  font-size: 1.6rem;
  line-height: 2.2rem;
  text-transform: uppercase;
}
.st-pie__contacto {
  margin-top: 0.86rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.5rem;
}
.st-pie__contacto a { text-decoration: none; }
.st-pie__rubro--acceso { margin-top: 2.94rem; }
.st-pie__enlaces { margin-top: 1.64rem; }
.st-pie__enlaces a {
  display: block;
  font-size: 1.4rem;
  line-height: 2.9rem;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
  text-decoration-thickness: 0.1rem;
}
.st-pie__linea {
  height: 0;
  margin: 2.77rem 0 0;
  border: 0;
  border-top: 1px solid var(--st-pie-tinta);
}
.st-pie__insp {
  display: block;
  width: 24.05rem;
  height: 8.32rem;
  margin: 7.44rem auto 0;
}
.st-pie__colaboracion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.82rem;
  margin-top: 1.28rem;
}
.st-pie__colaboracion img { width: 15.85rem; height: 5.2rem; }
.st-pie__siguenos {
  margin-top: 5.19rem;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2.1rem;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.st-pie__redes {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.67rem;
}
.st-pie__redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--st-pie-tinta);
  border-radius: 1rem;
}
.st-pie__redes img { height: 2rem; width: auto; }
.st-pie__linea--final { margin-top: 5rem; }
.st-pie__derechos {
  margin-top: 1.15rem;
  text-align: center;
}

/* ---------- Movimiento mínimo ---------- */
@media (prefers-reduced-motion: reduce) {
  .st-nav__menu span { transition: none; }
}

/* ---------- Páginas interiores: banda de portada + artículo ---------- */

.st-portada {
  position: relative;
  padding: 3.5rem 2.5rem 0;
  color: #fff;
}
.st-portada--director {
  height: 29.46rem;
  background: var(--st-tinta) url(../img/sitio/director-portada.webp) no-repeat 0 -0.5rem / 100% auto;
}
.st-portada .st-etiqueta { margin-top: 0.1rem; }
.st-portada__cita {
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.44rem;
}

.st-articulo {
  position: relative;
  padding: 0.34rem 0 14.27rem;
  overflow: hidden;
}
.st-articulo > * { position: relative; }
.st-articulo > p,
.st-articulo > h2,
.st-articulo > h3,
.st-articulo > ul,
.st-articulo > ol { margin-left: 2.5rem; margin-right: 3rem; }
.st-articulo p {
  font-size: 1.5rem;
  line-height: 2.5rem;
  color: var(--st-tinta);
}
.st-articulo p + p { margin-top: 2.5rem; }
.st-articulo .st-texto--seguido { margin-top: 0; }

/* Banda oscura a sangre dentro del artículo */
.st-banda {
  margin: 1.15rem 0 0;
  padding: 1.26rem 3rem 1.8rem 2.5rem;
  background: var(--st-tinta);
  color: #fff;
}
.st-banda p { color: #fff; font-weight: 700; }
.st-banda + p { margin-top: 0.78rem; }

/* =====================================================================
   ESCRITORIO (≥ 768 px) — artboards de 1025 pt (2026-10-27). 1rem = 10 pt.
   Lo compartido va aquí (barra, pie, mural, columna); lo de cada página en
   el bloque equivalente de su `sitio-<pagina>.css`.
   ===================================================================== */
@media (min-width: 768px) {
  .st-pagina {
    max-width: 102.5rem; /* 1025 pt: a partir de 1920 px la columna se centra */
    overflow: visible;   /* las sangres (.st-sangre) salen de la columna */
  }
  /* Banda a sangre: el color de fondo se prolonga hasta los bordes de la
     ventana cuando la columna está centrada (≥ 1920 px). Sólo colores; las
     fotos siguen dentro de la columna. */
  .st-sangre {
    box-shadow: 0 0 0 100vmax var(--st-sangre, transparent);
    clip-path: inset(0 -100vmax);
  }
  /* Bandas con dos lados distintos (foto de un lado, color del otro) o con
     degradado vertical: pseudo-elementos de 50vw a cada lado. El elemento debe
     ser position:relative y ningún ancestro puede recortar en horizontal (las
     secciones con overflow:hidden pasan a clip-path: inset(0 -100vmax)). */
  .st-sangre-lados::before, .st-sangre-izq::before,
  .st-sangre-lados::after, .st-sangre-der::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50vw;
    z-index: 0;
    pointer-events: none;
  }
  .st-sangre-lados::before, .st-sangre-izq::before { right: 100%; background: var(--st-sangre-izq, var(--st-sangre)); }
  .st-sangre-lados::after, .st-sangre-der::after { left: 100%; background: var(--st-sangre-der, var(--st-sangre)); }
  .st-recorte-vertical { overflow: visible !important; clip-path: inset(0 -100vmax); }

  /* Mural a lo ancho de la ventana: la banda pinta el mural COMPLETO (4000 px
     del .ai, 2070.6 pt a la escala del diseño) con los mismos desvanecidos
     del artboard, colocado de modo que la ventana de 1025 pt del diseño quede
     centrada (imagen a −77.19 rem del borde de la columna). La <img> móvil se
     oculta. Hasta 2200 px de ventana el mural cubre sin escalar; más allá se
     escala (cover) manteniendo el mismo centro. */
  .st-mural-banda {
    height: 31.8rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-repeat: no-repeat;
    background-size: 207.06rem 31.8rem;
    background-position: calc(50% - 24.91rem) 0;
  }
  .st-mural-banda > img { display: none; }
  .st-mural-banda--inicio { background-image: url(../img/sitio/mural-inicio-ancho.webp); }
  .st-mural-banda--pie { background-image: url(../img/sitio/mural-pie-ancho.webp); }
  @media (min-width: 2200px) {
    .st-mural-banda { background-size: cover; background-position: 62% 40%; }
  }

  html { scroll-padding-top: 9rem; }

  /* ---------- Barra ---------- */
  .st-nav {
    height: 9rem;
    background: #e3e7e8;
    isolation: isolate; /* el ::before con z-index:-1 queda detrás del contenido de la barra, pero encima de la página */
  }
  /* Fondo a sangre cuando la columna está centrada (≥ 1920 px): un
     pseudo-elemento de borde a borde de la ventana, independiente de la
     sombra al hacer scroll (antes la sombra pisaba el box-shadow que hacía de
     sangre y la barra "encogía" al desplazarse). */
  .st-nav::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: #e3e7e8;
    z-index: -1;
    transition: box-shadow .25s ease;
  }
  .st-nav__logo {
    left: 2.5rem;
    top: 2.5rem;
  }
  .st-nav__menu,
  .st-menu { display: none !important; }
  .st-nav__enlaces {
    display: block;
    position: absolute;
    top: 3.41rem;
    left: 0;
    right: 0;
    height: 1.93rem;
  }
  .st-nav__grupo { position: absolute; top: 0; }
  .st-nav__enlaces > a,
  .st-nav__grupo > a {
    position: absolute;
    top: 0;
    font-family: var(--st-fuente-nav);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.93rem;
    color: var(--st-azul);
    text-decoration: none;
    white-space: nowrap;
  }
  .st-nav__grupo > a { position: relative; display: block; }
  .st-nav__enlaces > :nth-child(1) { left: 44.5rem; }
  .st-nav__enlaces > :nth-child(2) { left: 53.5rem; }
  .st-nav__enlaces > :nth-child(3) { left: 61.5rem; }
  .st-nav__enlaces > :nth-child(4) { left: 71.5rem; }
  .st-nav__enlaces > a::after,
  .st-nav__grupo > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.3rem;
    height: 0.15rem;
    background: var(--st-verde);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1);
  }
  .st-nav__enlaces > a:hover::after,
  .st-nav__enlaces > a:focus-visible::after,
  .st-nav__enlaces > a[aria-current="page"]::after,
  .st-nav__grupo > a:hover::after,
  .st-nav__grupo > a:focus-visible::after,
  .st-nav__grupo > a[aria-current="page"]::after,
  .st-nav__grupo:hover > a::after,
  .st-nav__grupo:focus-within > a::after { transform: scaleX(1); }

  /* Submenús (no vienen del artboard): tarjeta blanca bajo el rótulo, visible
     al pasar el cursor o al entrar con el teclado. Un puente invisible de
     1.6rem evita que se cierre al bajar el cursor hacia la lista. */
  .st-nav__sub {
    position: absolute;
    top: calc(100% + 1.6rem);
    left: -1.5rem;
    min-width: 26rem;
    padding: 1rem 0;
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 1.2rem 3rem rgba(19, 51, 62, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.6rem);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .st-nav__sub::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1.6rem;
    height: 1.6rem;
  }
  .st-nav__grupo:hover .st-nav__sub,
  .st-nav__grupo:focus-within .st-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .st-nav__sub li { list-style: none; }
  .st-nav__sub a {
    display: block;
    padding: 0.9rem 2rem;
    font-family: var(--st-fuente);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 2rem;
    color: var(--st-tinta);
    text-decoration: none;
    white-space: nowrap;
  }
  .st-nav__sub a:hover,
  .st-nav__sub a:focus-visible { background: var(--st-fondo-suave); color: var(--st-azul); outline: none; }
  .st-nav__sub-grupo {
    margin-top: 0.6rem;
    padding: 0.8rem 2rem 0.2rem;
    border-top: 1px solid #e3e9ea;
    font-size: 1.1rem;
    line-height: 1.6rem;
    letter-spacing: .115em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    color: var(--st-verde);
  }
  .st-nav--flotante::before { box-shadow: 0 0.4rem 1.6rem rgba(19, 51, 62, .12); }
  .st-nav__sesion {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 80rem;
    top: 3rem;
    width: 20rem;
    height: 3rem;
    border: 1px solid #26606f;
    border-radius: 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    color: #26606f;
    background: transparent;
  }
  .st-nav__sesion:hover,
  .st-nav__sesion:focus-visible { background: #26606f; color: #fff; }

  /* ---------- Mural ---------- */
  .st-mural { height: 31.8rem; }
  .st-mural--pie { height: 31.8rem; }
  .st-pie__enlaces a:hover,
  .st-pie__contacto a:hover { color: #fff; }

  /* ---------- Pie (dos columnas) ---------- */
  .st-pie {
    display: grid;
    grid-template-columns: 60.3rem 1fr;
    align-items: start;
    padding: 4.5rem 3.62rem 3.21rem 2.63rem;
    --st-sangre: var(--st-pie);
  }
  .st-pie__marca { grid-column: 1; }
  .st-pie__salto { display: none; } /* la dirección va en dos renglones */
  .st-pie__contacto-bloque { grid-column: 2; }
  .st-pie__contacto-bloque .st-pie__rubro { margin-top: 0.7rem; }
  .st-pie__rubro--acceso {
    grid-column: 1 / -1;
    margin-top: 2.27rem;
    text-align: center;
  }
  .st-pie__enlaces {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-top: 2.09rem;
    line-height: 2rem;
  }
  .st-pie__enlaces a {
    display: inline;
    line-height: 2rem;
    text-decoration: none;
  }
  .st-pie__enlaces a:hover { text-decoration: underline; }
  .st-pie__enlaces a + a::before {
    content: '|';
    display: inline-block;
    margin: 0 1.4rem;
  }
  .st-pie__enlaces a:nth-child(2)::before { margin: 0 1.2rem 0 1.3rem; }
  .st-pie__enlaces a:nth-child(3)::before { margin: 0 1.2rem 0 0.7rem; }
  .st-pie__enlaces a:nth-child(4)::before { margin: 0 1.3rem 0 1.4rem; }
  .st-pie__linea {
    grid-column: 1 / -1;
    margin-top: 5rem;
  }
  .st-pie__instituciones { grid-column: 1; }
  .st-pie__insp { margin-top: 3.5rem; }
  .st-pie__colaboracion { margin-top: 1.3rem; }
  .st-pie__social {
    grid-column: 2;
    width: 21.5rem;
  }
  .st-pie__siguenos { margin-top: 5.68rem; }
  .st-pie__redes { margin-top: 1.88rem; justify-content: flex-start; }
  .st-pie__linea--final { margin-top: 4.3rem; }
  .st-pie__derechos { grid-column: 1 / -1; }

}

/* =====================================================================
   INTERACCIÓN Y MOVIMIENTO (no vienen del artboard; sutiles y rápidos).
   Todo lo que anima respeta prefers-reduced-motion; los estados hover son
   sólo color/sombra/desplazamiento de 2–4 px y el estado final de cada
   elemento es idéntico al diseño.
   ===================================================================== */

:focus-visible {
  outline: 0.3rem solid var(--st-teal);
  outline-offset: 0.2rem;
}

.st-boton,
.st-nav__sesion,
.st-nav__enlaces a,
.st-pie__redes a,
.st-pie__enlaces a,
.st-pie__contacto a,
.st-tarjeta,
.st-hotel,
.in-programa__celda,
.st-director,
.st-boton__flecha,
.st-tarjeta__foto {
  transition:
    transform .22s cubic-bezier(.2, .7, .2, 1),
    box-shadow .22s cubic-bezier(.2, .7, .2, 1),
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    opacity .18s ease;
}

/* Botones */
.st-boton:hover,
.st-boton:focus-visible { transform: translateY(-0.2rem); }
.st-boton:active { transform: translateY(0); transition-duration: .08s; }
.st-boton--primario:hover,
.st-boton--primario:focus-visible { background: #1b4a5c; box-shadow: 0 0.6rem 1.6rem rgba(19, 51, 62, .28); }
.st-boton--contorno:hover,
.st-boton--contorno:focus-visible { background: var(--st-fondo-suave); border-color: var(--st-tinta); box-shadow: 0 0.6rem 1.4rem rgba(19, 51, 62, .14); }
.st-boton--verde:hover,
.st-boton--verde:focus-visible { background: #82b037; box-shadow: 0 0.6rem 1.6rem rgba(145, 192, 66, .35); }
.st-boton--sombra:hover { box-shadow: -0.2rem 0.4rem 1.2rem rgba(0, 0, 0, .22); }
.st-boton:hover .st-boton__flecha { transform: translate(0.25rem, -0.25rem); }
.st-boton:hover .st-boton__flecha--abajo { transform: rotate(135deg) translate(0.25rem, -0.25rem); }
.st-boton__descarga svg { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.st-boton__descarga { transition: background-color .25s; }
.st-boton--descarga:hover .st-boton__descarga svg,
.st-boton--descarga:focus-visible .st-boton__descarga svg { transform: translateY(0.25rem); }
.st-boton--primario.st-boton--descarga:hover .st-boton__descarga { background: rgba(255, 255, 255, .28); }
.st-boton--verde.st-boton--descarga:hover .st-boton__descarga { background: rgba(255, 255, 255, .34); }
.st-boton--claro.st-boton--descarga:hover .st-boton__descarga,
.st-boton--contorno.st-boton--descarga:hover .st-boton__descarga { background: var(--st-teal); }
.st-boton[aria-disabled="true"] { cursor: default; opacity: .6; }
.st-boton[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* Tarjetas (actividades, cátedras, sede, hoteles, programa académico) */
.st-tarjeta:hover,
.st-hotel:hover { transform: translateY(-0.4rem); box-shadow: -0.2rem 1rem 2.4rem rgba(0, 0, 0, .18); }
.st-tarjeta:hover .st-tarjeta__foto { transform: scale(1.04); }
.in-programa__celda:hover,
.in-programa__celda:focus-visible { transform: translateY(-0.3rem); box-shadow: 0 1rem 2.2rem rgba(19, 51, 62, .16); }
.st-director:hover { filter: brightness(1.06); }

/* Pie */
.st-pie__redes a:hover,
.st-pie__redes a:focus-visible { transform: translateY(-0.2rem); background: rgba(50, 133, 139, .18); border-color: #5fb0b6; }
.st-pie__enlaces a:hover { color: #fff; }

/* Revelado al hacer scroll: sitio.js marca <html class="js"> y añade
   data-reveal a las secciones/tarjetas; sin JS no hay estado oculto. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.6rem);
    transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .22s cubic-bezier(.2, .7, .2, 1), filter .18s ease;
    transition-delay: calc(var(--st-i, 0) * 70ms);
  }
  .js [data-reveal].st-visible {
    transition-delay: 0s; /* tras aparecer, los hover responden al instante */
  }
  .js [data-reveal].st-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =====================================================================
   LAPTOP Y ESCRITORIO (≥ 1200 px) — composición propia (2026-10-29).
   La diseñadora entregó móvil (480 pt) y "escritorio" de 1025 pt, que en
   la práctica es el corte de tableta: escalado proporcional hasta 1920 px
   todo crecía 1.4–1.9× y la portada medía 10 500 px. Desde 1200 px:
     - el rem deja de seguir al viewport: crece suave de 10 px (1280) a
       12 px (≥ 2080), así el texto se lee como texto y no como cartel;
     - el contenido vive en un contenedor de 128 rem con márgenes laterales
       `--st-lado` (≥ 6 rem); las bandas de color/foto van de borde a borde
       de la ventana (el propietario rechazó la "columna con marco");
     - las secciones se recomponen con grid/flex en lugar de las
       coordenadas absolutas del artboard.
   Mismo contenido, colores, fotos, patrones e iconos que el diseño; sólo
   cambian tamaños y posiciones. 768–1199 px sigue siendo el artboard
   de 1025 pt intacto, y < 768 px el móvil.
   Lo de cada página va en el bloque `@media (min-width: 1200px)` final de
   su `sitio-<pagina>.css`.
   ===================================================================== */
@media (min-width: 1200px) {
  html {
    font-size: clamp(9.8px, calc(6.8px + 0.25vw), 12px);
    scroll-padding-top: 9.6rem;
  }
  .st-pagina {
    max-width: none;
    container-type: inline-size; /* 100cqw = ancho real de la página, sin la barra de scroll */
    --st-ancho: 128rem;
    --st-lado: max(6rem, calc(50cqw - var(--st-ancho) / 2));
  }
  /* Las sangres del corte 1025 ya no hacen falta: las bandas son de borde a borde. */
  .st-sangre { box-shadow: none; clip-path: none; }
  .st-sangre-lados::before, .st-sangre-izq::before,
  .st-sangre-lados::after, .st-sangre-der::after { content: none; }

  /* Contenedor reutilizable: márgenes laterales del sitio. */
  .st-contenedor {
    padding-left: var(--st-lado);
    padding-right: var(--st-lado);
  }

  /* ---------- Tipografía base ---------- */
  body { font-size: 1.7rem; line-height: 2.8rem; }
  .st-etiqueta { font-size: 1.5rem; line-height: 2.1rem; letter-spacing: .14em; }
  .st-etiqueta--chica { font-size: 1.5rem; line-height: 2.1rem; }
  .st-titulo { font-size: 2.6rem; line-height: 3.4rem; letter-spacing: -0.01em; text-wrap: balance; }
  .st-texto { font-size: 1.8rem; line-height: 3rem; }
  .st-texto--grande { font-size: 2.2rem; line-height: 3.2rem; }
  .st-icono { width: 2.8rem; height: 2.8rem; }

  /* ---------- Botones ---------- */
  .st-boton { height: 5.2rem; border-radius: 2.6rem; font-size: 1.4rem; letter-spacing: .02em; }

  /* ---------- Barra: flex dentro del contenedor ---------- */
  .st-nav {
    display: flex;
    align-items: center;
    gap: 4rem;
    height: 8rem;
    padding: 0 var(--st-lado);
  }
  .st-nav::before { left: 0; right: 0; }
  .st-nav__logo {
    position: static;
    flex: none;
    width: 13.3rem;
    height: 4.4rem;
  }
  .st-nav__enlaces {
    position: static;
    display: flex;
    align-items: center;
    gap: 4.2rem;
    height: auto;
    margin-left: auto;
  }
  .st-nav__grupo,
  .st-nav__enlaces > a,
  .st-nav__grupo > a { position: relative; top: auto; left: auto !important; }
  .st-nav__enlaces > a,
  .st-nav__grupo > a { display: block; font-size: 1.6rem; line-height: 8rem; }
  .st-nav__enlaces > a::after,
  .st-nav__grupo > a::after { bottom: 2.4rem; }
  .st-nav__sub { top: calc(100% - 1rem); }
  .st-nav__sub::before { top: -1rem; height: 1rem; }
  .st-nav__sesion {
    position: static;
    flex: none;
    width: auto;
    height: 4.2rem;
    padding: 0 2.6rem;
    border-radius: 2.1rem;
    font-size: 1.2rem;
    letter-spacing: .06em;
  }

  /* ---------- Mural: banda a lo ancho ---------- */
  .st-mural-banda {
    width: auto;
    height: clamp(26rem, 22vw, 36rem);
    margin-left: 0;
    background-size: cover;
    background-position: 58% 42%;
  }

  /* ---------- Pie: cuatro columnas + franja institucional ---------- */
  .st-pie {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, .8fr) auto;
    grid-template-areas:
      "marca   contacto acceso-r social"
      "marca   contacto acceso   social"
      "linea   linea    linea    linea"
      "inst    inst     derechos derechos";
    column-gap: 6rem;
    padding: 7rem var(--st-lado) 3.6rem;
    font-size: 1.4rem;
    line-height: 2.2rem;
  }
  .st-pie__marca { grid-area: marca; }
  .st-pie__logo { width: 22rem; height: 7.1rem; }
  .st-pie__direccion { margin-top: 2rem; }
  .st-pie__contacto-bloque { grid-area: contacto; }
  .st-pie__contacto-bloque .st-pie__rubro,
  .st-pie__rubro--acceso { margin-top: 0; }
  .st-pie__rubro {
    font-size: 1.3rem;
    line-height: 2rem;
    letter-spacing: .14em;
    font-weight: 700;
  }
  .st-pie__contacto { margin-top: 1.4rem; font-size: 1.7rem; line-height: 2.8rem; }
  .st-pie__rubro--acceso { grid-area: acceso-r; text-align: left; }
  .st-pie__enlaces {
    grid-area: acceso;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1.2rem;
  }
  .st-pie__enlaces a { display: block; font-size: 1.5rem; line-height: 3rem; }
  .st-pie__enlaces a + a::before { content: none; }
  .st-pie__social { grid-area: social; grid-row: 1 / span 2; width: auto; }
  .st-pie__siguenos {
    margin-top: 0;
    font-size: 1.3rem;
    line-height: 2rem;
    text-align: left;
  }
  .st-pie__redes { margin-top: 1.4rem; gap: 1rem; }
  .st-pie__redes a { width: 4.8rem; height: 4.8rem; border-radius: 1.2rem; }
  .st-pie__linea { grid-area: linea; margin-top: 6rem; }
  .st-pie__instituciones {
    grid-area: inst;
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-top: 3.4rem;
  }
  .st-pie__insp { width: 22rem; height: 7.6rem; margin: 0; }
  .st-pie__colaboracion { margin-top: 0; gap: 1.6rem; }
  .st-pie__colaboracion img { width: 16rem; height: 5.25rem; }
  .st-pie__linea--final { display: none; }
  .st-pie__derechos {
    grid-area: derechos;
    align-self: center;
    margin-top: 3.4rem;
    text-align: right;
  }
}

/* =====================================================================
   MOVIMIENTO ≥ 1200 px (2026-10-29) — sobre el revelado de arriba:
   entradas con desenfoque que se aclara, fotos que se descubren con una
   cortinilla, iconos de sección que giran al llegar, mural con paralaje
   ligado al scroll, barra de progreso de lectura y barra de navegación que
   se aparta al bajar y vuelve al subir (sitio.js). Curvas de desaceleración
   larga, nada rebota; con movimiento reducido no se aplica nada.
   ===================================================================== */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transform: translateY(3.2rem);
    filter: blur(.6rem);
    transition:
      opacity .8s cubic-bezier(.16, 1, .3, 1),
      transform 1s cubic-bezier(.16, 1, .3, 1),
      filter .8s cubic-bezier(.16, 1, .3, 1),
      box-shadow .22s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--st-i, 0) * 90ms);
  }
  .js [data-reveal].st-visible { transform: none; filter: none; }

  /* Fotos: cortinilla desde abajo + leve acercamiento que se asienta */
  .js [data-reveal] :is(.st-tarjeta__foto, .in-sede__foto, .sb-foto, .st-sede-foto, .st-sede-compuesto__foto) {
    clip-path: inset(18% 0 0 0);
    scale: 1.08;
    transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1) .1s, scale 1.4s cubic-bezier(.16, 1, .3, 1) .1s, transform .22s cubic-bezier(.2, .7, .2, 1);
  }
  .js [data-reveal].st-visible :is(.st-tarjeta__foto, .in-sede__foto, .sb-foto, .st-sede-foto, .st-sede-compuesto__foto) {
    clip-path: inset(0 0 0 0);
    scale: 1;
  }

  /* Iconos de sección (cruz, círculos, anillos): giran un cuarto al llegar */
  .js [data-reveal] > .st-icono {
    rotate: -90deg;
    scale: .6;
    opacity: 0;
    transition: rotate .9s cubic-bezier(.16, 1, .3, 1) .15s, scale .9s cubic-bezier(.16, 1, .3, 1) .15s, opacity .5s ease .15s;
  }
  .js [data-reveal].st-visible > .st-icono { rotate: 0deg; scale: 1; opacity: 1; }

  /* Barra: entra desde arriba al cargar y se aparta al bajar (sitio.js pone
     .st-nav--oculta); vuelve en cuanto se sube. */
  @keyframes st-nav-entrar { from { transform: translateY(-100%); } }
  .st-nav {
    animation: st-nav-entrar .7s cubic-bezier(.16, 1, .3, 1) backwards;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  }
  .st-nav.st-nav--oculta { transform: translateY(-100%); }
  .st-nav:focus-within { transform: none; }

  /* Progreso de lectura: hilo verde fijo en el borde superior de la ventana,
     ligado al scroll. Va en body: no en la barra (se esconde al bajar) ni en
     .st-pagina (su container-type atraparía el position:fixed). */
  @supports (animation-timeline: scroll()) {
    @keyframes st-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    body::after {
      content: '';
      position: fixed;
      z-index: 30;
      left: 0;
      right: 0;
      top: 0;
      height: .3rem;
      background: linear-gradient(90deg, var(--st-verde), var(--st-teal));
      transform-origin: left;
      animation: st-progreso linear both;
      animation-timeline: scroll(root);
      pointer-events: none;
    }

    /* Mural: deriva lateral lenta mientras cruza la pantalla (cover sólo deja holgura horizontal) */
    @keyframes st-mural-paralaje { from { background-position: 50% 42%; } to { background-position: 66% 42%; } }
    .st-mural-banda {
      animation: st-mural-paralaje linear both;
      animation-timeline: view();
    }
  }
}

/* =====================================================================
   MOVIMIENTO LIGERO EN MÓVIL Y TABLETA (< 1200 px, 2026-10-29).
   Sin desenfoques, sin JS nuevo y sin tocar el layout: sólo opacity y las
   propiedades individuales translate/rotate/scale (no pisan los `transform`
   de posición que ya llevan algunos elementos) y clip-path en fotos.
   Todo termina en el diseño estático; con movimiento reducido no hay nada.
   ===================================================================== */
@media (max-width: 1199.98px) and (prefers-reduced-motion: no-preference) {
  @keyframes st-m-subir { from { opacity: 0; translate: 0 1.4rem; } }

  /* Portadas de páginas interiores: lo de arriba entra escalonado */
  main > :first-child:not(.in-hero) > :not(.st-patron):not(.st-oculto-visual) {
    animation: st-m-subir .7s cubic-bezier(.16, 1, .3, 1) backwards;
  }
  main > :first-child > :nth-child(2) { animation-delay: .06s; }
  main > :first-child > :nth-child(3) { animation-delay: .12s; }
  main > :first-child > :nth-child(4) { animation-delay: .18s; }
  main > :first-child > :nth-child(5) { animation-delay: .24s; }
  main > :first-child > :nth-child(n+6) { animation-delay: .3s; }

  /* Fotos dentro de lo que se revela: cortinilla desde abajo */
  .js [data-reveal] :is(.st-tarjeta__foto, .in-sede__foto, .sb-foto, .st-sede-foto, .st-sede-compuesto__foto) {
    clip-path: inset(14% 0 0 0);
    transition: clip-path .9s cubic-bezier(.16, 1, .3, 1) .1s, transform .22s cubic-bezier(.2, .7, .2, 1);
  }
  .js [data-reveal].st-visible :is(.st-tarjeta__foto, .in-sede__foto, .sb-foto, .st-sede-foto, .st-sede-compuesto__foto) {
    clip-path: inset(0 0 0 0);
  }

  /* Iconos de sección: un cuarto de giro al llegar */
  .js [data-reveal] > .st-icono {
    rotate: -90deg;
    opacity: 0;
    transition: rotate .8s cubic-bezier(.16, 1, .3, 1) .12s, opacity .4s ease .12s;
  }
  .js [data-reveal].st-visible > .st-icono { rotate: 0deg; opacity: 1; }

  /* Respuesta al tocar (en pantallas táctiles no hay hover) */
  .st-boton:active,
  .st-tarjeta:active,
  .st-hotel:active,
  .in-programa__celda:active,
  .st-programa__item:active { scale: .97; transition: scale .1s ease; }
  .st-boton, .st-tarjeta, .st-hotel, .in-programa__celda, .st-programa__item { transition-property: transform, box-shadow, background-color, border-color, color, opacity, scale; }

  /* Menú móvil: un solo fundido corto de la hoja, sin cascada */
  @keyframes st-m-menu { from { opacity: 0; translate: 0 -0.8rem; } }
  .st-menu:not([hidden]) { animation: st-m-menu .24s cubic-bezier(.16, 1, .3, 1); }
}

/* =====================================================================
   BARRA ≥ 1200 px: los rótulos con submenú ("El congreso", "Programa")
   llevan una flecha hacia abajo que gira al abrirse, el rótulo abierto se
   marca con una pastilla suave y la tarjeta tiene una pestaña que apunta a
   él — la gente no intuía que el hover despliega opciones (2026-10-29).
   ===================================================================== */
@media (min-width: 1200px) {
  .st-nav__grupo > a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }
  .st-nav__flecha {
    display: block;
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: -0.4rem;
    border-right: 0.18rem solid currentColor;
    border-bottom: 0.18rem solid currentColor;
    rotate: 45deg;
    opacity: .7;
    transition: rotate .3s cubic-bezier(.16, 1, .3, 1), margin-top .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
  }
  .st-nav__grupo:hover .st-nav__flecha,
  .st-nav__grupo:focus-within .st-nav__flecha {
    rotate: 225deg;
    margin-top: 0.3rem;
    opacity: 1;
  }

  /* Pastilla detrás del rótulo abierto (el subrayado verde se queda) */
  .st-nav__grupo { padding: 0 1.2rem; margin: 0 -1.2rem; }
  .st-nav__grupo::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4rem;
    margin-top: -2rem;
    border-radius: 2rem;
    background: rgba(27, 88, 112, .08);
    opacity: 0;
    scale: .9;
    transition: opacity .2s ease, scale .3s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
  }
  .st-nav__grupo:hover::before,
  .st-nav__grupo:focus-within::before { opacity: 1; scale: 1; }
  .st-nav__grupo > a::after { left: 0; right: 1.45rem; } /* subrayado sólo bajo el texto */

  /* Tarjeta: alineada al rótulo y con pestaña que apunta a él */
  .st-nav__sub { left: 0; }
  .st-nav__sub::after {
    content: '';
    position: absolute;
    top: -0.6rem;
    left: 3.2rem;
    width: 1.2rem;
    height: 1.2rem;
    background: #fff;
    rotate: 45deg;
    border-radius: 0.2rem 0 0 0;
  }
}