/* LabAncestral · seminario-iii-2026.css
   ---------------------------------------------------------------------------
   III SEMINARIO INTERNACIONAL · Rescate de Prácticas Ancestrales
   Encuentro binacional Chile – Colombia · 3 y 4 de noviembre de 2026 · UNAP.

   Hoja propia de esta edición: lo que se toque aquí no afecta a las demás
   páginas del ciclo (I y II tienen su propia hoja, y el índice /seminarios/
   vive en seminarios.css).

   Paleta del diseño nuevo: azul profundo sobre crema, oro para antetítulos y
   titulares en Instrument Serif. Todo el prefijo es .s3- para no chocar con
   los .sem- de las otras ediciones.
   --------------------------------------------------------------------------- */

/* Paleta de la edición. Va en un bloque compartido porque la cabecera
   (.s3-nav) y el pie (.s3-pie) propios de esta página se insertan fuera de
   .s3-page -los pone base.html- y necesitan los mismos colores. */
.s3-page,
.s3-nav,
.s3-pie {
  --s3-crema:        #F7F2E7;  /* fondo general */
  --s3-crema-alt:    #FBF7EE;  /* tarjetas impares */
  --s3-crema-fuerte: #EFE8DA;  /* franja del programa */
  --s3-crema-clara:  #E8DCC4;  /* botón principal */
  --s3-papel:        #F4EFE4;  /* texto sobre azul */
  --s3-azul:         #0E2A4E;  /* texto principal */
  --s3-azul-hondo:   #0A1F3C;
  --s3-azul-medio:   #123A69;
  --s3-azul-claro:   #1E5A96;
  --s3-enlace:       #16457C;
  --s3-oro:          #A9762C;  /* antetítulos sobre crema */
  --s3-oro-claro:    #E3BC83;  /* antetítulos sobre azul */
  --s3-gris:         #37485C;  /* párrafos */
  --s3-gris-suave:   #78889A;  /* metadatos */
  --s3-bruma:        #E6EEF6;  /* fondo de imágenes mientras cargan */
  --s3-linea:        rgba(14, 42, 78, .13);
  --s3-linea-tenue:  rgba(14, 42, 78, .12);
}

.s3-page {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  background: var(--s3-crema);
  color: var(--s3-azul);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.s3-page *,
.s3-page *::before,
.s3-page *::after,
.s3-nav *,
.s3-nav *::before,
.s3-nav *::after,
.s3-pie *,
.s3-pie *::before,
.s3-pie *::after { box-sizing: border-box; min-width: 0; }

.s3-page a { color: var(--s3-enlace); text-decoration: none; }
.s3-page a:hover { color: var(--s3-oro); }

.s3-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* Antetítulo monoespaciado; el modificador --sobre-azul lo aclara. */
.s3-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s3-oro);
}

.s3-kicker__raya {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.s3-kicker--sobre-azul { color: var(--s3-oro-claro); }

/* Titulares del diseño: Instrument Serif con fallback a las serif que la
   base ya carga, para que no baile la caja si la fuente tarda. */
.s3-serif {
  font-family: 'Instrument Serif', 'Spectral', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.015em;
}

/* Aparición al hacer scroll. Sin JS o con reduced-motion queda visible. */
.s3-reveal { opacity: 0; transform: translateY(20px); }
.s3-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .s3-reveal { opacity: 1; transform: none; }
  .s3-page * { transition: none !important; animation: none !important; }
}

/* ── Portada ───────────────────────────────────────────────────────────── */
.s3-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg,
              var(--s3-azul-hondo) 0%,
              var(--s3-azul-medio) 52%,
              var(--s3-azul-claro) 100%);
  color: var(--s3-papel);
}

.s3-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  min-height: 560px;
}

.s3-hero__texto {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 72px 0;
}

.s3-hero__marcas {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 34px;
}

.s3-hero__marcas span { display: block; width: 7px; }
.s3-hero__marcas span:nth-child(1) { height: 20px; background: var(--s3-oro-claro); }
.s3-hero__marcas span:nth-child(2) { height: 28px; background: var(--s3-crema-clara); }
.s3-hero__marcas span:nth-child(3) { height: 34px; background: var(--s3-papel); }

.s3-hero__titulo {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: .96;
}

.s3-hero__bajada {
  margin: 0;
  max-width: 44ch;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(244, 239, 228, .74);
  text-wrap: pretty;
}

/* Quién organiza, en la portada: una línea sobria bajo la bajada, con la
   institución principal en negrita para que se lea primero. */
.s3-hero__organiza {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
  border-left: 2px solid var(--s3-oro-claro);
}

.s3-hero__organiza-k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s3-oro-claro);
}

.s3-hero__organiza-v {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 239, 228, .82);
  text-wrap: pretty;
}

.s3-hero__organiza-v strong { font-weight: 600; color: var(--s3-papel); }

.s3-hero__organiza-v em {
  font-style: normal;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s3-oro-claro);
}

.s3-hero__organiza-y { color: rgba(244, 239, 228, .55); }

.s3-hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.s3-hero__afiche {
  align-self: center;
  display: flex;
  justify-content: center;
  padding: 56px 0;
}

.s3-hero__afiche img {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .65);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.s3-hero__afiche img:hover { transform: translateY(-6px); }

/* Degradado que funde la portada con la franja de datos. */
.s3-hero__fundido {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(to top, rgba(232, 220, 196, .55), rgba(232, 220, 196, 0));
  pointer-events: none;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
/* Van prefijados con .s3-page a propósito: los botones son enlaces, y la regla
   general `.s3-page a` pinta de azul cualquier <a>. Sin el prefijo esa regla
   gana por especificidad y el botón de contorno queda azul sobre azul. */
.s3-page .s3-btn {
  display: inline-block;
  padding: 16px 26px;
  /* Hasta ahora .s3-btn sólo vestía <a>, que no traen fondo ni tipografía
     propios; el botón del popup es el primer <button>, y sin este reset el
     navegador le mete su gris de "buttonface" y su fuente de sistema encima
     de lo que fijamos abajo. */
  background: none;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

.s3-page .s3-btn--solido {
  background: var(--s3-crema-clara);
  color: var(--s3-azul);
}

.s3-page .s3-btn--solido:hover {
  background: var(--s3-papel);
  color: var(--s3-azul-hondo);
  transform: translateY(-2px);
}

.s3-page .s3-btn--linea {
  font-weight: 500;
  color: var(--s3-papel);
  border-color: rgba(244, 239, 228, .65);
}

.s3-page .s3-btn--linea:hover {
  background: rgba(244, 239, 228, .14);
  border-color: var(--s3-papel);
  color: #FFFFFF;
}

/* Foco visible para quien navega con teclado, sobre fondo azul o crema. */
.s3-page .s3-btn:focus-visible {
  outline: 2px solid var(--s3-oro-claro);
  outline-offset: 3px;
}

/* ── Franja de datos ───────────────────────────────────────────────────── */
.s3-datos {
  background: var(--s3-crema);
  border-bottom: 1px solid var(--s3-linea-tenue);
}

.s3-datos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.s3-dato {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 26px 24px 26px 0;
}

.s3-dato__k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s3-gris-suave);
}

.s3-dato__v { font-size: 16.5px; font-weight: 500; }

/* ── Encabezado de sección a dos columnas ──────────────────────────────── */
.s3-seccion { padding: 80px 0 88px; }

.s3-seccion__head {
  display: grid;
  grid-template-columns: .45fr .55fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 44px;
}

.s3-seccion__head > div { display: flex; flex-direction: column; gap: 16px; }

.s3-seccion__titulo {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1;
}

.s3-seccion__intro {
  margin: 0;
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--s3-gris);
  text-wrap: pretty;
}

/* ── Aviso destacado (participación sin costo) ─────────────────────────── */
.s3-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0 0 34px;
  padding: 18px 22px;
  background: var(--s3-crema-alt);
  border: 1px solid var(--s3-linea);
  border-left: 3px solid var(--s3-oro);
}

.s3-aviso__marca {
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s3-oro);
}

.s3-aviso__texto {
  flex: 1 1 320px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--s3-gris);
  text-wrap: pretty;
}

/* ── Ejes temáticos ────────────────────────────────────────────────────── */
.s3-ejes { display: flex; flex-direction: column; gap: 26px; }

.s3-eje {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: stretch;
  background: var(--s3-crema-alt);
  border: 1px solid var(--s3-linea);
  transition: box-shadow .5s ease, border-color .5s ease;
}

/* Los pares invierten el orden: imagen a la derecha y fondo blanco. */
.s3-eje--par { background: #fff; }

.s3-eje:hover {
  box-shadow: 0 30px 60px -40px rgba(14, 42, 78, .55);
  border-color: rgba(14, 42, 78, .28);
}

.s3-eje__figura {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  background: var(--s3-bruma);
  order: 1;
}

.s3-eje--par .s3-eje__figura { order: 2; }

.s3-eje__figura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

.s3-eje:hover .s3-eje__figura img { transform: scale(1.06); }

.s3-eje__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 31, 60, 0) 55%, rgba(10, 31, 60, .35) 100%);
}

.s3-eje--par .s3-eje__velo {
  background: linear-gradient(270deg, rgba(10, 31, 60, 0) 55%, rgba(10, 31, 60, .35) 100%);
}

.s3-eje__numero {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 26px 18px;
  font-family: 'Instrument Serif', 'Spectral', Georgia, serif;
  font-size: 96px;
  line-height: .8;
  color: var(--s3-papel);
  text-shadow: 0 8px 30px rgba(10, 31, 60, .6);
}

.s3-eje--par .s3-eje__numero { left: auto; right: 0; }

.s3-eje__cuerpo {
  order: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 52px clamp(28px, 4vw, 56px);
}

.s3-eje--par .s3-eje__cuerpo { order: 1; }

.s3-eje__titulo {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.s3-eje__texto {
  margin: 0;
  max-width: 50ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--s3-gris);
  text-wrap: pretty;
}

.s3-eje__temas {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
}

.s3-eje__temas span {
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--s3-enlace);
  border-top: 1px solid var(--s3-linea-tenue);
  transition: color .3s ease, padding-left .3s ease;
}

.s3-eje__temas span:hover { color: var(--s3-oro); padding-left: 6px; }

/* ── Divisor de territorio ─────────────────────────────────────────────── */
/* Banda a todo el ancho, sin contenedor: separa los ejes del programa y le da
   aire a la página. La altura crece con la pantalla pero nunca pasa de 420px,
   para que no se coma el scroll en monitores grandes. */
.s3-divisor {
  position: relative;
  height: clamp(200px, 30vw, 420px);
  overflow: hidden;
  background: var(--s3-azul-hondo);
}

.s3-divisor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Un poco por debajo del centro: deja ver el valle y no tanto cielo. */
  object-position: center 60%;
}

/* Fundidos que empalman con el crema de arriba y el del programa abajo, para
   que la banda no quede como un recorte pegado. */
.s3-divisor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
              var(--s3-crema) 0%,
              rgba(247, 242, 231, 0) 20%,
              rgba(239, 232, 218, 0) 78%,
              var(--s3-crema-fuerte) 100%);
}

/* ── Programa ──────────────────────────────────────────────────────────── */
/* Banda oscura sobre la panorámica del valle. La foto y su velo van inline en
   la plantilla, como en el resto del sitio, porque la ruta necesita {% static %};
   aquí queda el encuadre y la versión clara de todo lo que va encima. */
.s3-programa {
  background-color: var(--s3-azul-hondo);   /* color mientras carga la foto */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--s3-papel);
  border-top: 1px solid rgba(244, 239, 228, .16);
  border-bottom: 1px solid rgba(244, 239, 228, .16);
}

.s3-programa__inner {
  display: grid;
  grid-template-columns: .4fr 1fr;
  gap: 48px;
  padding: 88px 0;
}

.s3-programa__intro { display: flex; flex-direction: column; gap: 14px; }

.s3-programa__titulo { margin: 0; font-size: clamp(32px, 3.6vw, 42px); line-height: 1.05; }

.s3-programa__nota {
  margin: 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244, 239, 228, .82);
}

.s3-programa__cronograma-btn {
  align-self: flex-start;
  margin-top: 6px;
}

.s3-jornadas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  align-content: start;
}

/* Tarjetas de vidrio: dejan ver el paisaje detrás y siguen legibles aunque el
   navegador no soporte backdrop-filter, porque el relleno ya es opaco de suyo. */
.s3-jornada {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 32px;
  background: rgba(10, 31, 60, .52);
  border: 1px solid rgba(244, 239, 228, .26);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1),
              box-shadow .45s ease, border-color .45s ease, background .45s ease;
}

.s3-jornada:hover {
  transform: translateY(-5px);
  background: rgba(10, 31, 60, .66);
  border-color: rgba(244, 239, 228, .5);
  box-shadow: 0 24px 48px -26px rgba(0, 0, 0, .7);
}

.s3-jornada__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.s3-jornada__n { color: var(--s3-oro-claro); }
.s3-jornada__fecha { color: rgba(244, 239, 228, .66); }

.s3-jornada__titulo { margin: 0; font-size: 26px; line-height: 1.16; }

.s3-jornada__texto {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(244, 239, 228, .8);
}

.s3-jornada__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(244, 239, 228, .2);
  font-size: 13px;
  color: rgba(244, 239, 228, .66);
}

.s3-jornada__personas { display: inline-flex; align-items: center; gap: 6px; }

/* ── Sede ──────────────────────────────────────────────────────────────── */
.s3-sede {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  align-items: center;
  padding: 72px 0;
}

.s3-sede__texto { display: flex; flex-direction: column; gap: 14px; }

.s3-sede__titulo { margin: 0; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.08; }

.s3-sede__nota {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--s3-gris);
  text-wrap: pretty;
}

.s3-sede__nota strong { font-weight: 600; color: var(--s3-azul); }

.s3-sede__coords {
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--s3-gris-suave);
}

.s3-sede__mapa {
  display: grid;
  align-items: center;
  min-height: 340px;
  height: 100%;
  background: var(--s3-bruma);
  border: 1px solid var(--s3-linea);
}

/* Ficha de la sede: ocupa el recuadro que el diseño reserva para el plano del
   campus, hasta que exista esa imagen. */
.s3-sede__ficha {
  margin: 0;
  padding: 36px clamp(24px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.s3-sede__ficha dt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s3-gris-suave);
  margin-bottom: 6px;
}

.s3-sede__ficha dd {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.35;
}

/* Segunda línea de cada sede: la ciudad, en tono menor. */
.s3-sede__ciudad {
  display: inline-block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 400;
  color: var(--s3-gris);
}

/* ── Organización ──────────────────────────────────────────────────────── */
/* Banda propia, a todo el ancho. Antes esta sección compartía el crema de las
   Sedes y las dos se leían como un solo bloque: la página alterna claro/oscuro
   en todo lo demás y aquí el ritmo se cortaba.

   El fondo es la foto del tejido artesanal bajo un velo crema espeso: la
   textura se lee sin competir con el texto, que sigue siendo azul sobre claro.
   El velo se abre al centro (.76) y se cierra arriba (.92) para empalmar con el
   crema de las Sedes, y abajo (.84) antes del azul de la inscripción. El
   encuadre deja la parte desenfocada de la foto a la izquierda, que es donde
   cae el texto. Filetes arriba y abajo para marcar dónde empieza y termina.

   La imagen es una copia optimizada de 'Textura artesanal.png' (2,4 MB): el
   original queda en la carpeta y aquí se carga el JPG de ~176 KB. Si se
   reemplaza la foto, hay que regenerar ese JPG. */
.s3-organiza-banda {
  position: relative;
  isolation: isolate;
  background-color: var(--s3-crema-fuerte);   /* color mientras carga la foto */
  border-top: 1px solid var(--s3-linea-tenue);
  border-bottom: 1px solid var(--s3-linea-tenue);
}

/* Foto y velo van juntos en un ::before para que el encuadre 'cover' sea solo
   de la foto, y para quedar por debajo del contenido de la sección. */
.s3-organiza-banda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom,
                    rgba(247, 242, 231, .92) 0%,
                    rgba(244, 239, 228, .76) 42%,
                    rgba(239, 232, 218, .84) 100%),
    url('../../assets/background/textura-artesanal.jpg');
  background-size: auto, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat, no-repeat;
}

/* Dos fichas: la principal (CITS · U. del Magdalena) va primera, más ancha y
   sobre azul; la coorganizadora queda en la tarjeta clara de al lado. */
.s3-organiza__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 20px;
  margin-top: 28px;
  align-items: stretch;
}

.s3-organiza__ficha {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px clamp(24px, 3vw, 38px);
  background: #fff;
  border: 1px solid var(--s3-linea);
  /* Sobre el crema cargado de la banda, una sombra corta despega la tarjeta. */
  box-shadow: 0 10px 24px rgba(14, 42, 78, .06);
}

.s3-organiza__ficha--principal {
  background: linear-gradient(150deg, var(--s3-azul-hondo) 0%, var(--s3-azul-medio) 100%);
  border-color: transparent;
  color: var(--s3-papel);
}

.s3-organiza__rol {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s3-oro);
}

.s3-organiza__ficha--principal .s3-organiza__rol { color: var(--s3-oro-claro); }

.s3-organiza__nombre {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
}

.s3-organiza__inst {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--s3-gris);
}

.s3-organiza__ficha--principal .s3-organiza__inst { color: rgba(244, 239, 228, .86); }

.s3-organiza__pais {
  margin-top: auto;
  padding-top: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--s3-gris-suave);
}

.s3-organiza__ficha--principal .s3-organiza__pais { color: rgba(244, 239, 228, .62); }

/* ── Contacto ──────────────────────────────────────────────────────────── */
/* Banda con foto, como .s3-programa: entre el crema de Sedes y el de
   Organización, esta sección necesita su propio fondo para leerse como
   bloque. La foto es una copia optimizada de 'Cultura.png' (2,3 MB): el
   original queda en la carpeta y aquí se carga el JPG de ~240 KB. */
.s3-contacto-banda {
  position: relative;
  isolation: isolate;
  background-color: var(--s3-azul-hondo);
  overflow: hidden;
}

.s3-contacto-banda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(100deg,
                    rgba(10, 31, 60, .93) 0%,
                    rgba(10, 31, 60, .85) 46%,
                    rgba(18, 58, 105, .74) 100%),
    url('../../assets/background/cultura.jpg');
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
}

/* El título y la bajada del encabezado de sección heredan colores pensados
   para el crema (azul oscuro / gris); sobre la banda azul hay que aclararlos. */
.s3-contacto .s3-seccion__titulo { color: var(--s3-papel); }
.s3-contacto .s3-seccion__intro { color: rgba(244, 239, 228, .78); }

.s3-contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

/* Tarjetas de vidrio, igual que .s3-jornada: sobre una foto hace falta relleno
   opaco de por sí (por si el navegador no trae backdrop-filter) más el
   desenfoque encima. Un solo rgba() semitransparente se leía mal aquí porque
   dejaba pasar demasiado la foto. */
.s3-contacto__ficha {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px clamp(22px, 3vw, 34px);
  background: rgba(10, 31, 60, .52);
  border: 1px solid rgba(244, 239, 228, .26);
  border-left: 3px solid var(--s3-oro-claro);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: background-color .4s ease, border-color .4s ease;
}

.s3-contacto__ficha:hover {
  background: rgba(10, 31, 60, .66);
  border-color: rgba(244, 239, 228, .42);
}

.s3-contacto__rol {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s3-oro-claro);
}

.s3-contacto__nombre {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.15;
  color: var(--s3-papel);
}

/* .s3-page a (línea 60) ya fija un azul de enlace para todo el texto corrido
   de la página, y con el mismo peso de selector (una clase) gana por ir
   declarado después en la hoja si sólo usamos .s3-contacto__correo -por eso
   el correo salía en azul y casi no se leía sobre el fondo azul. Calificar
   con .s3-contacto sube la especificidad y asegura que gane este color claro. */
.s3-contacto a.s3-contacto__correo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14.5px;
  letter-spacing: .01em;
  color: var(--s3-crema-clara);
}

.s3-contacto a.s3-contacto__correo:hover { color: var(--s3-oro-claro); }

/* ── Galería ───────────────────────────────────────────────────────────── */
.s3-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.s3-foto {
  margin: 0;
  background: #fff;
  border: 1px solid var(--s3-linea);
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease;
}

.s3-foto:hover {
  border-color: rgba(14, 42, 78, .3);
  box-shadow: 0 24px 48px -32px rgba(14, 42, 78, .5);
}

.s3-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--s3-bruma);
}

.s3-foto figcaption {
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--s3-gris);
}

/* ── Inscripción ───────────────────────────────────────────────────────── */
.s3-cta {
  background: linear-gradient(200deg, var(--s3-azul-medio) 0%, var(--s3-azul-hondo) 100%);
  color: var(--s3-papel);
  /* Filete sutil: cuando no hay Galería (sin fotos todavía) esta banda queda
     pegada a la de Contacto, y las dos son azules; el filete marca dónde
     termina una y empieza la otra. */
  border-top: 1px solid rgba(244, 239, 228, .14);
}

.s3-cta__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  padding: 76px 0;
}

.s3-cta__texto { display: flex; flex-direction: column; gap: 18px; }

.s3-cta__titulo {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.04;
}

.s3-cta__nota {
  margin: 0;
  max-width: 48ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(244, 239, 228, .72);
}

.s3-cta__acciones { display: flex; flex-direction: column; gap: 12px; }

/* ── Otras ediciones ───────────────────────────────────────────────────── */
.s3-otras { padding: 72px 0 88px; }

.s3-otras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.s3-page .s3-otra {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--s3-linea);
  color: var(--s3-azul);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1),
              box-shadow .4s ease, border-color .4s ease;
}

.s3-page .s3-otra:hover {
  transform: translateY(-4px);
  color: var(--s3-azul);
  border-color: rgba(14, 42, 78, .3);
  box-shadow: 0 24px 48px -30px rgba(14, 42, 78, .5);
}

.s3-otra__meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s3-gris-suave);
}

.s3-otra__title {
  font-family: 'Instrument Serif', 'Spectral', Georgia, serif;
  font-size: 22px;
  line-height: 1.15;
}

.s3-otra__ir { margin-top: auto; font-size: 13.5px; font-weight: 500; color: var(--s3-enlace); }
.s3-otra:hover .s3-otra__ir { color: var(--s3-oro); }

/* ── Popup (cronograma de la convocatoria) ─────────────────────────────── */
/* El popup vive fuera de cualquier .s3-container -es un overlay de pantalla
   completa-, así que fija sus propios colores en vez de heredar los de la
   sección donde quedó escrito en el HTML. Arranca con [hidden] puesto por el
   navegador; el JS de extra_js sólo cambia esa propiedad. */
.s3-popup {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.s3-popup[hidden] { display: none; }

body.s3-popup-abierto { overflow: hidden; }

.s3-popup__velo {
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 60, .72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.s3-popup__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: min(600px, 85vh);
  overflow-y: auto;
  background: var(--s3-crema);
  color: var(--s3-azul);
  padding: clamp(30px, 4vw, 46px);
  box-shadow: 0 40px 90px -24px rgba(10, 31, 60, .6);
}

.s3-popup__cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--s3-linea);
  color: var(--s3-azul);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.s3-popup__cerrar:hover { background: var(--s3-crema-alt); border-color: var(--s3-oro); }

.s3-popup__cerrar:focus-visible {
  outline: 2px solid var(--s3-oro);
  outline-offset: 2px;
}

.s3-popup__titulo {
  margin: 10px 40px 12px 0;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
}

.s3-popup__intro {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--s3-gris);
}

.s3-cronograma {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--s3-linea-tenue);
}

.s3-cronograma__item {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--s3-linea-tenue);
}

.s3-cronograma__fecha {
  grid-row: 1 / 3;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--s3-oro);
}

.s3-cronograma__etapa {
  grid-column: 2;
  font-size: 15px;
  font-weight: 600;
}

.s3-cronograma__actividad {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--s3-gris);
}

/* ── Adaptación a pantallas menores ────────────────────────────────────── */
@media (max-width: 1040px) {
  .s3-hero__inner { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .s3-hero__texto { padding: 56px 0 8px; }
  .s3-hero__afiche { padding: 24px 0 64px; }
  .s3-hero__afiche img { max-width: 340px; }

  .s3-seccion__head { grid-template-columns: 1fr; gap: 20px; align-items: start; }

  .s3-eje { grid-template-columns: 1fr; }
  .s3-eje__figura,
  .s3-eje--par .s3-eje__figura { order: 1; min-height: 260px; }
  .s3-eje__cuerpo,
  .s3-eje--par .s3-eje__cuerpo { order: 2; padding: 36px 28px 40px; }
  .s3-eje__numero { font-size: 72px; }

  .s3-programa__inner,
  .s3-sede,
  .s3-cta__inner { grid-template-columns: 1fr; gap: 36px; }

  .s3-sede__mapa { min-height: 300px; }

  .s3-organiza__grid,
  .s3-contacto__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .s3-divisor { height: clamp(150px, 38vw, 200px); }
  .s3-seccion { padding: 56px 0 60px; }
  .s3-hero__bajada { font-size: 16.5px; }
  .s3-hero__acciones .s3-btn { flex: 1 1 100%; }
  .s3-dato { padding: 20px 16px 20px 0; }
  .s3-eje__temas { grid-template-columns: 1fr; }
  .s3-jornada { padding: 24px 22px; }
  .s3-organiza__ficha { padding: 26px 22px; }
  .s3-otras { padding: 56px 0 64px; }

  .s3-cronograma__item { grid-template-columns: 1fr; row-gap: 4px; }
  .s3-cronograma__fecha,
  .s3-cronograma__etapa,
  .s3-cronograma__actividad { grid-column: 1; }
  .s3-cronograma__fecha { grid-row: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CABECERA Y PIE PROPIOS DE ESTA EDICIÓN
   ---------------------------------------------------------------------------
   El III Seminario no es sólo de LabAncestral: lo organiza el CITS de la
   Universidad del Magdalena (Colombia), sede anfitriona, con LabAncestral -
   Universidad Arturo Prat (Chile). Por eso esta página cambia la barra verde y
   el pie del sitio por los de aquí, en la misma paleta de la página: azul
   profundo, crema y oro, con Instrument Serif en los titulares.

   Marcado en templates/partials/_nav_seminario_iii.html y
   templates/partials/_footer_seminario_iii.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Con la cabecera pegada arriba, los saltos con # quedaban tapados. */
.s3-page section[id] { scroll-margin-top: 104px; }

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.s3-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--s3-azul-hondo);
  color: var(--s3-papel);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  border-bottom: 1px solid rgba(227, 188, 131, .22);
  -webkit-font-smoothing: antialiased;
}

.s3-nav.is-compacta {
  box-shadow: 0 18px 40px -28px rgba(5, 16, 32, .9);
}

/* Franja institucional: quiénes convocan. Se pliega al bajar la página. */
.s3-nav__franja {
  overflow: hidden;
  max-height: 46px;
  background: rgba(255, 255, 255, .045);
  border-bottom: 1px solid rgba(227, 188, 131, .16);
  transition: max-height .35s ease, opacity .25s ease;
}

.s3-nav.is-compacta .s3-nav__franja { max-height: 0; opacity: 0; }

.s3-nav__franja-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 7px clamp(20px, 4vw, 48px);
}

.s3-nav__insts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0;
  min-width: 0;
}

.s3-nav__inst {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  color: rgba(244, 239, 228, .9);
}

.s3-nav__inst strong { font-weight: 500; }

.s3-nav__inst em {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--s3-oro-claro);
}

.s3-nav__inst-sep {
  width: 1px;
  height: 12px;
  background: rgba(227, 188, 131, .35);
}

.s3-nav__fecha {
  margin: 0;
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--s3-oro-claro);
}

/* Barra principal. */
.s3-nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px clamp(20px, 4vw, 48px);
  transition: padding .3s ease;
}

.s3-nav.is-compacta .s3-nav__in { padding-top: 10px; padding-bottom: 10px; }

.s3-nav__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.s3-nav__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 8px;
  background: rgba(244, 239, 228, .93);
  transition: width .3s ease, height .3s ease;
}

.s3-nav.is-compacta .s3-nav__logo { width: 34px; height: 34px; }

.s3-nav__marca-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.s3-nav__marca-t {
  font-family: 'Instrument Serif', 'Spectral', Georgia, serif;
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--s3-papel);
}

.s3-nav__marca-s {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(227, 188, 131, .85);
}

/* Menú de secciones. */
.s3-nav__menu {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13.5px;
  white-space: nowrap;
}

.s3-nav__link,
.s3-nav__salida {
  position: relative;
  padding: 4px 0;
  text-decoration: none;
  color: rgba(244, 239, 228, .82);
  transition: color .2s ease;
}

.s3-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: var(--s3-oro-claro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}

.s3-nav__link:hover,
.s3-nav__link.is-activo,
.s3-nav__salida:hover { color: var(--s3-papel); }

.s3-nav__link:hover::after,
.s3-nav__link.is-activo::after { transform: scaleX(1); }

.s3-nav__salida {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(227, 188, 131, .78);
}

.s3-nav__divisor {
  width: 1px;
  height: 18px;
  background: rgba(227, 188, 131, .3);
}

.s3-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--s3-crema-clara);
  color: var(--s3-azul-hondo);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.s3-nav__cta:hover {
  background: var(--s3-papel);
  color: var(--s3-azul-hondo);
  transform: translateY(-1px);
}

/* Botón de menú: sólo aparece cuando el menú se pliega. */
.s3-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 1px solid rgba(227, 188, 131, .35);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.s3-nav__burger span {
  display: block;
  height: 1.5px;
  background: var(--s3-papel);
  transition: transform .28s ease, opacity .2s ease;
}

.s3-nav.is-abierto .s3-nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.s3-nav.is-abierto .s3-nav__burger span:nth-child(2) { opacity: 0; }
.s3-nav.is-abierto .s3-nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Pie ───────────────────────────────────────────────────────────────── */
.s3-pie {
  background: linear-gradient(168deg,
              var(--s3-azul-hondo) 0%,
              var(--s3-azul-medio) 100%);
  color: var(--s3-papel);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.s3-pie__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(36px, 6vw, 72px);
  padding-top: clamp(56px, 7vw, 84px);
  padding-bottom: clamp(44px, 6vw, 64px);
}

.s3-pie__marca { display: flex; flex-direction: column; gap: 18px; }

.s3-pie__titulo {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.08;
  color: var(--s3-papel);
}

.s3-pie__bajada {
  margin: 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: rgba(244, 239, 228, .74);
}

.s3-pie__cta {
  align-self: flex-start;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--s3-crema-clara);
  color: var(--s3-azul-hondo);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.s3-pie__cta:hover {
  background: var(--s3-papel);
  color: var(--s3-azul-hondo);
  transform: translateY(-2px);
}

.s3-pie__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.5vw, 44px);
}

.s3-pie__h {
  margin: 0 0 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s3-oro-claro);
}

.s3-pie__lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s3-pie__lista li { display: flex; flex-direction: column; gap: 3px; }

.s3-pie__lista strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--s3-papel);
}

.s3-pie__lista span { font-size: 13.5px; color: rgba(244, 239, 228, .74); }

.s3-pie__lista em {
  margin-top: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(227, 188, 131, .8);
}

.s3-pie__links { display: flex; flex-direction: column; gap: 11px; }

.s3-pie__links a {
  font-size: 13.5px;
  color: rgba(244, 239, 228, .78);
  text-decoration: none;
  transition: color .2s ease;
}

.s3-pie__links a:hover { color: var(--s3-oro-claro); }

.s3-pie__nota {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(244, 239, 228, .55);
}

.s3-pie__barra {
  border-top: 1px solid rgba(227, 188, 131, .2);
  background: rgba(5, 16, 32, .38);
}

.s3-pie__barra-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, .6);
}

.s3-pie__coords { color: rgba(227, 188, 131, .75); }

/* ── Cabecera y pie en pantallas menores ───────────────────────────────── */
@media (max-width: 1100px) {
  .s3-nav__menu { gap: 16px; font-size: 13px; }
  .s3-nav__salida { display: none; }
}

@media (max-width: 980px) {
  .s3-nav__burger { display: flex; }

  /* El menú se despliega bajo la barra. Cerrado no ocupa lugar. */
  .s3-nav__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 clamp(20px, 4vw, 48px);
    max-height: 0;
    overflow: hidden;
    background: var(--s3-azul-hondo);
    border-bottom: 1px solid rgba(227, 188, 131, 0);
    white-space: normal;
    transition: max-height .35s ease, padding .35s ease;
  }

  .s3-nav.is-abierto .s3-nav__menu {
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px clamp(20px, 4vw, 48px) 22px;
    border-bottom-color: rgba(227, 188, 131, .22);
  }

  .s3-nav__barra { position: relative; }

  .s3-nav__link,
  .s3-nav__salida {
    display: block;
    padding: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(227, 188, 131, .12);
  }

  .s3-nav__salida {
    display: block;
    font-size: 11px;
  }

  .s3-nav__link::after { display: none; }
  .s3-nav__link.is-activo { color: var(--s3-oro-claro); }
  .s3-nav__divisor { display: none; }

  .s3-nav__cta {
    justify-content: center;
    margin-top: 16px;
    padding: 13px 20px;
  }

  .s3-nav__fecha { display: none; }
  .s3-nav__inst-sep { display: none; }
  .s3-nav__insts { gap: 4px 12px; }

  .s3-pie__in { grid-template-columns: 1fr; }
  .s3-pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .s3-nav__marca-t { font-size: 18px; }
  .s3-nav__marca-s { font-size: 8.5px; letter-spacing: .12em; }
  .s3-nav__logo { width: 34px; height: 34px; }

  /* En móvil la franja deja sólo a la anfitriona: el resto ya está en el pie. */
  .s3-nav__inst-sep ~ .s3-nav__inst { display: none; }
  .s3-nav__inst { font-size: 11px; }

  .s3-pie__cols { grid-template-columns: 1fr; gap: 30px; }
  .s3-pie__cta { align-self: stretch; text-align: center; }
  .s3-pie__barra-in { flex-direction: column; align-items: flex-start; gap: 8px; }
}