/* =========================================================================
   II Foro China-Espana de Energia Verde - VERSION IDEAL
   Aplicacion editorial de la marca. Depende de brand.css (tokens).
   brand.css no se toca: lo que hace falta de mas se extiende aqui.
   ========================================================================= */

:root {
  /* Retícula editorial */
  --sangria: 104px;         /* indentacion interna de los rotulos de seccion */
  --margen: clamp(1.5rem, 5vw, 5.5rem);
  --columna: 60ch;          /* columna de lectura, mas estrecha = mas elegante */

  /* Carril de indice: ancho propio + separacion del texto. El contenido
     reserva esta franja entera, para que el carril nunca pise la lectura. */
  --carril-ancho: 150px;
  --carril-zona: 194px;

  /* Filetes: la elegancia de este diseno esta en las lineas de 1px */
  --hair: rgba(50, 41, 47, .14);
  --hair-oscuro: rgba(245, 245, 245, .16);

  /* El filete de un campo de formulario no es decoracion: es la unica senal
     de que ahi se escribe, asi que necesita 3:1 como componente de interfaz.
     A .45 se quedaba en 2,57:1; a .55 da 3,33:1 sobre bruma. */
  --borde-campo: rgba(50, 41, 47, .55);

  /* Ancho del bloque de contacto. Lo comparten el formulario, su entradilla
     y la nota final: asi los tres empiezan y acaban en la misma linea. */
  --ancho-form: 46rem;

  /* Escala tipografica fluida */
  --display: clamp(2.9rem, 7.5vw, 6.6rem);
  --t1: clamp(2rem, 4.2vw, 3.4rem);

  --transicion: cubic-bezier(.22, 1, .36, 1);
}

body { background: var(--bruma); }

/* Garantiza que hidden gane a cualquier display declarado despues: asi
   ocultar un bloque es solo anadirle el atributo. */
[hidden] { display: none !important; }

/* Figuras tabulares: las cifras y las horas deben alinearse en vertical */
.hora, .rotulo__num, .eje__indice { font-variant-numeric: tabular-nums; }

/* --- Accesibilidad ----------------------------------------------------- */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--grafito); color: var(--verde);
  padding: 1rem 1.5rem; font-family: var(--font-titulo); font-weight: 600;
}
.saltar:focus { left: 0; }

/* --- Barra de progreso de lectura -------------------------------------- */
.progreso {
  position: fixed; top: 0; left: 0; z-index: 100;
  height: 2px; width: 100%;
  background: var(--verde);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* --- Cabecera ----------------------------------------------------------
   Transparente sobre la portada oscura; se vuelve solida al bajar.
------------------------------------------------------------------------- */
.tope {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding: 1.5rem var(--margen);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  color: var(--bruma);
  transition: background .4s var(--transicion), padding .4s var(--transicion), color .4s var(--transicion);
}
/* La cabecera fija es grafito, no bruma: el isotipo va siempre en verde y
   sobre fondo claro daria 1,41:1, practicamente invisible. Sobre grafito
   da 9,12:1 y ademas cumple la regla del manual (verde sobre oscuro).
   Sin JS nadie alterna el estado, asi que se sirve solida de salida. */
.tope--solido,
html:not(.js) .tope {
  background: rgba(50, 41, 47, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair-oscuro);
  color: var(--bruma);
  padding-top: .9rem; padding-bottom: .9rem;
}

.marca { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit; }
.marca__simbolo { width: 2.4rem; flex: none; display: block; transition: width .4s var(--transicion); }
.tope--solido .marca__simbolo,
html:not(.js) .marca__simbolo { width: 2rem; }

/* Isotipo oficial, el mismo en toda la web. El PNG esta recortado al
   contenido, sin margenes propios, para que encaje como encajaba el
   simbolo vectorial que habia antes. */
.marca__logo { width: 100%; height: auto; }
/* Texto de marca (nombre + caracteres chinos) en el verde del isotipo, no
   heredado del bruma de la cabecera: asi acompaña al logo con el mismo
   color en vez de ir en blanco al lado de un icono verde. */
.marca__texto { color: var(--verde); font-family: var(--font-titulo); font-weight: 600;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
}
.marca__texto em { display: block; font-style: normal; font-weight: 400; opacity: .7; letter-spacing: .2em; font-size: .72rem; }

.menu { display: flex; align-items: center; gap: 2.25rem; }
.menu a {
  font-family: var(--font-titulo); font-weight: 500;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: inherit; text-decoration: none; position: relative; padding: .25rem 0;
}
/* Subrayado que crece desde la izquierda */
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--transicion);
}
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }

/* Con seis opciones el menu se aprieta contra el logo en anchos medios:
   se estrecha el hueco y la letra antes de que llegue a tocarse. */
@media (max-width: 1180px) {
  .menu { gap: 1.35rem; }
  .menu a { font-size: .72rem; letter-spacing: .1em; }
}

/* --- Portada -----------------------------------------------------------
   Sin fotografia: solo tipografia y simbolo. Es lo que separa una web
   institucional solvente de una que parece una plantilla.
------------------------------------------------------------------------- */
.portada {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;   /* svh evita el salto de la barra del navegador movil */
  display: flex; align-items: center;
  background: var(--grafito); color: var(--bruma);
  padding: 9rem var(--margen) 4rem;
  overflow: hidden;
}

/* Video de fondo. Va bajo un velo grafito fuerte: el video ambienta, pero
   quien manda en la portada sigue siendo la tipografia. */
.portada__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .42;
  pointer-events: none;
}

/* Marca de agua con el isotipo oficial. Al ser un PNG no se puede animar el
   trazo como con el vectorial: entra con un fundido, que cumple la misma
   funcion de que no aparezca de golpe. */
.portada__marca {
  position: absolute; right: -14%; top: 50%;
  width: min(78vw, 860px); height: auto;
  opacity: .14;
  pointer-events: none;
  transform: translateY(-50%);
}
.js .portada__marca { animation: asomar 1.8s var(--transicion) .3s both; }
@keyframes asomar {
  from { opacity: 0; transform: translateY(-50%) scale(1.06); }
  to   { opacity: .14; transform: translateY(-50%) scale(1); }
}

.portada__contenido { position: relative; z-index: 2; width: 100%; max-width: 1000px; }

.antetitulo {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-titulo); font-weight: 500;
  font-size: .76rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--verde); margin-bottom: 2rem;
}
.antetitulo::before { content: ""; width: 48px; height: 1px; background: currentColor; flex: none; }

.portada h1 {
  font-size: var(--display);
  font-weight: 700; line-height: .96; letter-spacing: -.035em;
  margin-bottom: 1.5rem;
}
.portada__cn {
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(1rem, 1.8vw, 1.35rem); letter-spacing: .42em;
  color: var(--verde); margin-bottom: 3rem;
}

/* Ficha de datos separada por filetes verticales */
.ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--hair-oscuro);
  margin-bottom: 3rem;
}
.ficha__dato { padding: 1.5rem 1.75rem 1.5rem 0; border-right: 1px solid var(--hair-oscuro); }
.ficha__dato:last-child { border-right: 0; }
.ficha__dato:not(:first-child) { padding-left: 1.75rem; }
.ficha__et {
  font-family: var(--font-titulo); font-weight: 500;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(245, 245, 245, .5); display: block; margin-bottom: .75rem;
}
.ficha__valor { font-family: var(--font-titulo); font-weight: 600; font-size: 1.05rem; line-height: 1.3; }

.acciones { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Boton de la version ideal: mas fino, mas seco */
.accion {
  display: inline-flex; align-items: center; gap: .85rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; padding: 1.1rem 2rem;
  background: var(--verde); color: var(--grafito);
  border: 1px solid var(--verde);
  transition: background .35s var(--transicion), color .35s var(--transicion);
}
.accion svg { width: 14px; flex: none; transition: transform .35s var(--transicion); }
.accion:hover svg, .accion:focus-visible svg { transform: translateX(4px); }
.accion:hover, .accion:focus-visible { background: transparent; color: var(--verde); }
/* Variante para fondos verdes: el boton normal es verde sobre verde, o sea
   invisible. Aqui se invierte a grafito, que da 12,89:1 con texto bruma. */
.accion--grafito { background: var(--grafito); color: var(--bruma); border-color: var(--grafito); }
.accion--grafito:hover, .accion--grafito:focus-visible { background: transparent; color: var(--grafito); }

.accion--fantasma { background: transparent; color: inherit; border-color: var(--hair-oscuro); }
.accion--fantasma:hover, .accion--fantasma:focus-visible { background: var(--bruma); color: var(--grafito); border-color: var(--bruma); }

/* --- Carril de secciones ------------------------------------------------
   Indice fijo, numerado. Solo en pantallas anchas.
------------------------------------------------------------------------- */
.carril {
  position: fixed; left: var(--margen); top: 50%; transform: translateY(-50%);
  width: var(--carril-ancho);
  z-index: 60; display: none; flex-direction: column; gap: 1rem;
  /* Oculto sobre la portada: alli no hay seccion activa que marcar y el
     carril quedaria flotando sin referencia. Lo enciende app.js. */
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--transicion);
}
.carril--visible { opacity: 1; pointer-events: auto; }

.carril a {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-titulo); font-weight: 500;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grafito-45); text-decoration: none;
  transition: color .35s var(--transicion);
}
.carril a::before {
  content: ""; width: 14px; height: 1px; background: currentColor; flex: none;
  transition: width .35s var(--transicion);
}
.carril a:hover, .carril a:focus-visible { color: var(--grafito); }
.carril a[aria-current="true"] { color: var(--verde-profundo); }
.carril a[aria-current="true"]::before { width: 34px; }

/* Sobre banda oscura hay que invertir la paleta o el carril desaparece */
.carril--oscuro a { color: rgba(245, 245, 245, .45); }
.carril--oscuro a:hover, .carril--oscuro a:focus-visible { color: var(--bruma); }
.carril--oscuro a[aria-current="true"] { color: var(--verde); }

/* El carril solo aparece cuando cabe SU PROPIA franja fuera del texto.
   Por debajo de este ancho no hay sitio sin invadir la lectura.
   Se acota a .con-carril (body de las paginas que lo llevan) para que una
   pagina sin carril no reserve un hueco vacio y quede descentrada. */
@media (min-width: 1400px) {
  .con-carril .carril { display: flex; }
  .con-carril .portada,
  .con-carril .bloque,
  .con-carril .declaracion,
  .con-carril .cintillo,
  .con-carril .cierre {
    padding-left: calc(var(--margen) + var(--carril-zona));
  }
  /* La declaracion va centrada, asi que necesita el mismo hueco a los dos
     lados: solo a la izquierda quedaria descentrada respecto a la ventana. */
  .con-carril .declaracion {
    padding-right: calc(var(--margen) + var(--carril-zona));
  }
  /* La marquesina sale a sangre anulando el padding de su seccion, que aqui
     es mayor por la izquierda para dejar sitio al carril. */
  .con-carril .marquesina {
    margin-left: calc((var(--margen) + var(--carril-zona)) * -1);
  }
}

/* --- Secciones ---------------------------------------------------------- */
.bloque { padding: clamp(5rem, 11vw, 9.5rem) var(--margen); }

/* Menos alto en los apartados de index: el mismo padding lateral, pero un
   arriba/abajo mas contenido que el resto del sitio. */
#foro, #programa, #contacto { padding-block: clamp(3rem, 6vw, 5.5rem); }
.bloque--oscuro { background: var(--grafito); color: var(--bruma); }
.bloque--papel { background: var(--blanco); }
.envoltura { max-width: 1180px; margin-inline: auto; }

/* Cabecera de seccion: numero + titulo, en retícula */
.rotulo { display: grid; grid-template-columns: var(--sangria) 1fr; gap: 2rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.rotulo__num {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .78rem; letter-spacing: .18em;
  color: var(--verde-profundo); padding-top: .65rem;
  border-top: 2px solid var(--verde-profundo);
}
.bloque--oscuro .rotulo__num { color: var(--verde); border-top-color: var(--verde); }
.rotulo h2,
.rotulo h1 { font-size: var(--t1); letter-spacing: -.028em; max-width: 20ch; }
.rotulo__pie {
  margin-top: 1.25rem; color: var(--grafito-70); max-width: 44ch; font-size: 1.05rem;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.bloque--oscuro .rotulo__pie { color: rgba(245, 245, 245, .65); }

/* Texto corrido en columna estrecha, desplazada a la derecha */
.texto { display: grid; grid-template-columns: var(--sangria) 1fr; gap: 2rem; }
.texto__cuerpo { max-width: var(--columna); }
.texto__cuerpo > p + p { margin-top: 1.4rem; }
.texto__cuerpo p {
  color: var(--grafito-70);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.bloque--oscuro .texto__cuerpo p { color: rgba(245, 245, 245, .72); }

/* Primer parrafo destacado: entrada editorial */
.texto__cuerpo p.entradilla {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.5;
  color: var(--grafito); font-weight: 400;
}
.bloque--oscuro .texto__cuerpo p.entradilla { color: var(--bruma); }

/* Tres "botones" decorativos (no enlazan a nada): degradado de fondo donde
   predomina el verde del logo, con un acento de verde profundo/grafito que
   se desplaza al pasar el cursor y la etiqueta se eleva ligeramente. */
.valores { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; margin-top: 2.25rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.valores__item {
  display: inline-flex; align-items: center;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--verde) 0%, var(--verde) 65%, var(--verde-profundo) 100%);
  background-size: 220% 220%; background-position: 0% 50%;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grafito);
  cursor: default;
  transition: background-position .5s var(--transicion), transform .3s var(--transicion), box-shadow .3s var(--transicion);
}
.valores__item:hover {
  background-position: 100% 50%;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -8px rgba(50, 41, 47, .35);
}

@media (max-width: 900px) {
  .rotulo, .texto { grid-template-columns: 1fr; gap: 1rem; }
  .rotulo__num { display: inline-block; }
}


/* --- Cinta de video -----------------------------------------------------
   Banda a sangre con video de fondo. El archivo no se descarga hasta que la
   banda entra en pantalla (app.js lo carga desde data-src), asi quien no
   baja hasta aqui no se traga los megas.
------------------------------------------------------------------------- */
/* Fondo verde de marca: solo se ve en la franja de texto de abajo, porque
   el marco del video lleva el suyo propio. */
.cinta {
  background: var(--verde); color: var(--grafito);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* El video vive en su propio marco y el texto va DEBAJO, no encima: asi no
   depende del velo para leerse y la imagen se ve limpia.
   El fondo grafito es imprescindible: el video va con opacidad .62 y sin el
   se mezclaria con el verde de la seccion, tineendo la imagen. */
/* El marco adopta la proporcion del video (1920x1080) en vez de un alto
   fijo. Con alto fijo el recorte de object-fit se comia mas de un tercio
   de la imagen y cortaba las cabezas. */
/* Proporcion 2:1, algo mas apaisada que el 16:9 del video: la banda baja un
   11% de alto y a cambio se recorta ese 11%, repartido arriba y abajo.
   Se fija por proporcion y no con un tope en vh para que el resultado sea
   el mismo en todas las pantallas y no dependa del alto de la ventana. */
.cinta__marco {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--grafito);
}
.cinta__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* La proporcion del marco coincide con la del video, asi que cover no
     recorta nada y evita hilos de fondo por redondeo de subpixel. */
  object-fit: cover;
  opacity: .62;
  pointer-events: none;
}
/* Tinte de marca, ya no un degradado para hacer legible un texto encima */
.cinta__velo {
  position: absolute; inset: 0;
  background: rgba(50, 41, 47, .3);
}
/* El marco va a sangre, asi que el margen lateral lo pone aqui el texto */
.cinta__texto { padding: clamp(1.75rem, 3.5vw, 2.5rem) var(--margen) 0; }
/* Sobre verde el antetitulo iria verde sobre verde: pasa a grafito */
.cinta__texto .antetitulo { color: var(--grafito); }
.cinta__texto .antetitulo::before { background: var(--grafito); }
.cinta__accion { margin-top: clamp(1.5rem, 3vw, 2rem); }
/* Sin max-width: con 24ch la frase, que tiene 43 caracteres, se partia
   siempre en dos lineas. Suelta cabe entera en una. */
.cinta__titulo {
  font-family: var(--font-titulo); font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.15; letter-spacing: -.03em;
  margin-top: .6rem;
}

/* --- Declaracion --------------------------------------------------------
   Frase conceptual a todo lo ancho, entre la portada y el primer bloque.
   Va en grafito y NO en verde: el carril de secciones flota por encima y
   sobre verde se quedaria en 2,41:1, ilegible. Invertido —fondo grafito,
   frase en verde— da 9,70:1 y ademas destaca mas.
   Se distingue de la portada, que tambien es grafito, por ser color plano
   sin video y por el aire de alrededor.
------------------------------------------------------------------------- */
.declaracion {
  background: var(--grafito);
  padding: clamp(4rem, 9vw, 7rem) var(--margen);
}
/* Sin max-width y sin text-wrap: balance. Balance iguala el largo de las
   lineas ESTRECHANDO el bloque, que es justo lo contrario de ocupar todo
   el ancho: aqui el texto tiene que llegar de margen a margen. */
.declaracion__frase {
  font-family: var(--font-titulo); font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.9rem);
  line-height: 1.25; letter-spacing: -.025em;
  color: var(--verde);
  text-align: justify; hyphens: none; -webkit-hyphens: none;
}
.declaracion__nota { margin-top: 1.5rem; font-weight: 700; }

/* --- Prensa -------------------------------------------------------------
   Aqui la fila SI es un enlace, asi que lleva los efectos de hover que los
   ejes no deben tener: el titular se subraya y la flecha avanza.
------------------------------------------------------------------------- */
.prensa { border-top: 1px solid var(--hair); }
.prensa__item {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none; color: inherit;
}
.prensa__meta {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--grafito-45);
  margin-bottom: .6rem;
}
.prensa__titular {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.3; letter-spacing: -.015em;
  max-width: 62ch;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .3s var(--transicion);
}
.prensa__item:hover .prensa__titular,
.prensa__item:focus-visible .prensa__titular { text-decoration-color: currentColor; }

.prensa__flecha {
  width: 26px; flex: none;
  color: var(--verde-profundo);
  transition: transform .35s var(--transicion);
}
.prensa__item:hover .prensa__flecha { transform: translate(3px, -3px); }

@media (max-width: 600px) {
  .prensa__item { gap: 1rem; }
  .prensa__flecha { width: 22px; }
}

/* --- Galeria de fotos ----------------------------------------------------
   Carrusel horizontal con scroll-snap. El desplazamiento es nativo, asi que
   sin JavaScript se sigue pudiendo arrastrar y deslizar con el dedo: los
   botones solo anaden comodidad con raton y teclado.
------------------------------------------------------------------------- */
.galeria { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.galeria__pista {
  display: flex;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barra nativa ensucia la banda; el carrusel ya se explica con los
     botones, el contador y las fotos cortadas en el borde. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: .25rem;
}
.galeria__pista::-webkit-scrollbar { display: none; }

.galeria__foto {
  flex: 0 0 min(82%, 44rem);
  scroll-snap-align: center;
  margin: 0;
  background: var(--grafito);
}
.galeria__foto img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.galeria__mandos {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.25rem;
}
.galeria__boton {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  background: transparent;
  border: 1px solid var(--borde-campo);
  border-radius: 50%;
  color: var(--grafito);
  transition: background .3s var(--transicion), color .3s var(--transicion), border-color .3s var(--transicion);
}
.galeria__boton svg { width: 18px; }
.galeria__boton:hover:not(:disabled) { background: var(--grafito); border-color: var(--grafito); color: var(--bruma); }
.galeria__boton:disabled { opacity: .3; cursor: default; }

.galeria__contador {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .72rem; letter-spacing: .16em;
  color: var(--grafito-45);
  font-variant-numeric: tabular-nums;
}

/* Sin JS no hay botones que deshabilitar ni contador que actualizar */
html:not(.js) .galeria__mandos { display: none; }

@media (prefers-reduced-motion: reduce) {
  .galeria__pista { scroll-behavior: auto; }
}

@media (max-width: 760px) {
  .galeria__foto { flex-basis: 88%; }
}

/* --- Marquesina de conceptos --------------------------------------------
   Banda grafito dentro de una seccion bruma: es el contraste el que la hace
   destacar, no el tamano. Palabras en bruma y separadores en verde, asi
   aparecen los tres colores de marca a la vez.
   El bucle es continuo porque la pista lleva el contenido DUPLICADO y se
   desplaza justo un 50%: al terminar, la copia esta exactamente donde
   estaba el original y el salto no se ve.
------------------------------------------------------------------------- */
/* Va a sangre: anula con margen negativo el padding lateral de la seccion,
   que es lo unico que la separa del borde de la pagina.
   Abre la seccion, asi que arriba no lleva margen propio: ya lo pone el
   padding superior del bloque. */
.marquesina {
  margin-inline: calc(var(--margen) * -1);
  margin-block: clamp(2.5rem, 5vw, 3.5rem) 0;
  overflow: hidden;
  background: var(--grafito);
  color: var(--bruma);
  padding: 1.05rem 0;
}
.marquesina__pista {
  display: flex;
  width: max-content;
  animation: desfilar 45s linear infinite;
}
/* Al pasar el cursor se detiene, para poder leerla */
.marquesina:hover .marquesina__pista { animation-play-state: paused; }

.marquesina__grupo {
  display: flex; align-items: center;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
}
.marquesina__grupo span { display: inline-flex; align-items: center; }
.marquesina__grupo span::after {
  content: "·";
  color: var(--verde);
  margin: 0 1.5rem;
  font-size: 1.3em;
}

/* Credito del organizador, despues de la marquesina: mismo tamano de
   titulo que "Ejes tematicos 2026" (var(--t1)), sin ser un .rotulo mas. */
.organiza {
  max-width: 1180px; margin-inline: auto;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}
.organiza h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -.015em; margin-bottom: 1.75rem; }
/* Tamano original de las imagenes en images/logos/: todas se exportaron
   ya a 100px de alto, asi que se muestran tal cual, sin volver a escalar. */
.organiza__logo { display: block; height: 100px; width: auto; max-width: 100%; }
.organiza__logo[src$="logoccince.png"] { height: 70px; }
/* Mismo tamano que en edicion2025.html. */
.organiza__logo[src$="embajada-china-logo.png"] { height: 55.13px; }
.organiza__logo[src$="logo_2025.png"] { height: 42.99px; }
/* Varios logotipos de patrocinio: igualados por ALTURA, no por ancho (los
   PNG ya vienen recortados a su contenido con proporciones muy distintas). */
/* Misma rejilla de 4 columnas que la segunda fila de Patrocinadores en
   edicion2025.html: reparte los logos a todo el ancho en vez de agruparlos
   a la izquierda. */
.organiza__logos {
  display: grid; grid-template-columns: repeat(3, auto);
  align-items: center; justify-items: start;
  column-gap: 2.5rem;
  width: max-content; max-width: 100%;
}
@media (max-width: 760px) {
  .organiza__logos { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; width: 100%; }
}
.organiza__logos img { height: 50px; width: auto; max-width: 100%; object-fit: contain; }
/* Mismo tamano que sus equivalentes en edicion2025.html. */
.organiza__logos img[src$="sponsor-chint.png"] { height: 25.2px; }
.organiza__logos img[src$="sponsor-soluciones-financieras.png"] { height: 38.5px; }
.organiza__logos img[src$="sponsor-inversion.png"] { height: 26px; }

@keyframes desfilar { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquesina__pista { animation: none; }
}

/* --- Ejes tematicos -----------------------------------------------------
   Lista editorial de solo lectura: cada eje es titulo mas descripcion. No
   son enlaces, asi que no llevan ningun efecto de hover ni flecha, que
   prometerian un destino que no existe.
------------------------------------------------------------------------- */
.ejes { border-top: 1px solid var(--hair); }
/* Bloque apilado, NO rejilla de dos columnas: con el numero en una columna
   fija y filetes entre filas el conjunto se leia como una tabla, y ademas
   esa columna robaba ancho al texto. Ahora el numero va como rotulo encima
   y titulo y descripcion arrancan desde el margen. */
.eje {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--hair);
  /* isolation crea contexto de apilamiento propio: asi el ::before con
     z-index -1 queda detras del contenido de la fila y no del fondo. */
  position: relative; isolation: isolate;
}
/* Fondo verde que sube al pasar el cursor, igual que el resto de filas
   interactivas del sitio. */
.eje::before {
  content: ""; position: absolute; left: -1.5rem; right: -1.5rem; top: 0; bottom: 0;
  background: var(--verde); opacity: 0; z-index: -1;
  transform: scaleY(.6); transform-origin: 50% 100%;
  transition: opacity .4s var(--transicion), transform .4s var(--transicion);
}
.eje:hover::before, .eje:focus-visible::before { opacity: .16; transform: scaleY(1); }
.eje__indice {
  display: block;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .72rem; letter-spacing: .18em; color: var(--verde-profundo);
  margin-bottom: .6rem;
}
/* Sin max-width: titulo y descripcion ocupan todo el ancho disponible.
   Son frases cortas, asi que a pantalla completa caben en una o dos lineas
   y no aparece el problema de legibilidad de las lineas muy largas. */
.eje__titulo {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.2; letter-spacing: -.02em;
  transition: transform .45s var(--transicion);
}
.eje:hover .eje__titulo { transform: translateX(14px); }

@media (hover: none), (max-width: 900px) {
  .eje:hover .eje__titulo { transform: none; }
}
/* Titulo en chino. Jost y Mulish no traen caracteres CJK, asi que cae al
   tipo del sistema: por eso se declara la familia aparte y no se hereda
   una sustitucion rara. */
.eje__cn {
  margin-top: .45rem;
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(.92rem, 1.2vw, 1.05rem);
  letter-spacing: .1em;
  color: var(--verde-profundo);
}

.eje__texto {
  margin-top: .85rem;
  color: var(--grafito-70);
  font-size: 1rem;
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Apartados a todo lo ancho ---------------------------------------------
   Pierden la columna de 1180 px, la sangria de 104 px del rotulo y el tope
   de medida del texto, de modo que encabezado y contenido arrancan de la
   misma linea pegados al margen. #ejes ya no es una seccion propia: es un
   segundo rotulo dentro de #foro, asi que hereda todo esto de "#foro .rotulo". */
#foro .envoltura,
#programa .envoltura,
#contacto .envoltura { max-width: none; }

#foro .rotulo { grid-template-columns: 1fr; gap: 1rem; }

#foro .rotulo__num { display: inline-block; }

#foro .rotulo h2 { max-width: none; }

#foro .texto,
#programa .texto,
#contacto .texto { grid-template-columns: 1fr; gap: 0; }
/* El div vacio solo existia para ocupar la columna de sangria */
#foro .texto > div:empty,
#programa .texto > div:empty,
#contacto .texto > div:empty { display: none; }
#foro .texto__cuerpo,
#programa .texto__cuerpo,
#contacto .texto__cuerpo { max-width: none; }
#foro .texto__cuerpo p,
#programa .texto__cuerpo p,
#contacto .texto__cuerpo p { hyphens: none; -webkit-hyphens: none; }

/* Programa y Contacto no llevan numeral: el rotulo pasa a una sola columna
   para que el titulo no se quede en la sangria de 104px. */
#programa .rotulo,
#contacto .rotulo { grid-template-columns: 1fr; }

/* El numeral (01/02/03) ya no lleva texto, pero se conserva su filete
   superior como division visual de cada apartado. */
#foro .rotulo > div,
#programa .rotulo > div,
#contacto .rotulo > div,
#primera-edicion .rotulo > div,
#prensa .rotulo > div,
#agradecimientos .rotulo > div {
  padding-top: .65rem;
  border-top: 2px solid var(--verde-profundo);
}

/* --- Formulario de contacto ---------------------------------------------
   Campos sin caja: solo un filete inferior, como el resto del diseno. El
   foco engorda el filete y lo pone en verde profundo, que es el unico
   verde con contraste suficiente sobre fondo claro.
------------------------------------------------------------------------- */
/* La entradilla de esta seccion se ajusta al formulario, no a los 44ch del
   resto de secciones: los dos bloques van uno encima del otro y una medida
   distinta se notaria. Acotado a #contacto para no tocar las demas. */
#contacto .rotulo__pie { max-width: var(--ancho-form); }

.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; max-width: var(--ancho-form); }
.campo { display: flex; flex-direction: column; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--grafito-70); margin-bottom: .6rem;
}
/* El asterisco no debe leerse como parte del texto de la etiqueta */
.campo label span { color: var(--verde-profundo); margin-left: .2em; }

.campo input,
.campo textarea,
.campo select {
  font-family: var(--font-cuerpo); font-size: 1rem; color: var(--grafito);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--borde-campo);
  border-radius: 0;
  padding: .6rem 0;
  width: 100%;
  transition: border-color .3s var(--transicion), box-shadow .3s var(--transicion);
}
.campo textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-bottom-color: var(--verde-profundo);
  box-shadow: 0 1px 0 0 var(--verde-profundo);
}

/* Flecha propia: la nativa no se puede estilar y desentona */
.campo select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2332292F' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .2rem center;
  background-size: 12px 8px;
  padding-right: 2rem;
  cursor: pointer;
}

/* Consentimiento */
.consiento { grid-column: 1 / -1; display: flex; gap: .9rem; align-items: flex-start; }
.consiento input {
  appearance: none; -webkit-appearance: none;
  width: 1.15rem; height: 1.15rem; flex: none; margin-top: .2rem;
  border: 1px solid var(--borde-campo); border-radius: 2px;
  background: var(--blanco); cursor: pointer;
  transition: background .25s var(--transicion), border-color .25s var(--transicion);
}
.consiento input:checked {
  background: var(--verde-profundo); border-color: var(--verde-profundo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23F5F5F5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
.consiento__texto { margin: 0; font-size: .95rem; color: var(--grafito-70); line-height: 1.5; }
.consiento label { cursor: pointer; }
.consiento__enlace {
  color: var(--verde-profundo);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.consiento__enlace:hover { text-decoration-thickness: 2px; }

/* Texto solo para lectores de pantalla: avisa de que un enlace abre ventana
   nueva sin ensuciar la interfaz. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.contacto__enviar { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* Cierre del apartado, ya fuera del formulario */
.contacto__nota {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
  max-width: var(--ancho-form);
  font-size: .95rem; color: var(--grafito-70); line-height: 1.65;
}
.contacto__nota a {
  color: var(--verde-profundo);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.contacto__nota a:hover { text-decoration-thickness: 2px; }

/* En index.html el apartado de contacto ya no lleva formulario: es solo el
   texto de este parrafo y, debajo, los enlaces a los documentos legales.
   Acotado a #contacto para no afectar a otras prosas .texto__cuerpo. */
#contacto .texto__cuerpo a {
  color: var(--verde-profundo);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
#contacto .texto__cuerpo a:hover { text-decoration-thickness: 2px; }
/* Los correos van en su propia linea, no perdidos a mitad de un parrafo:
   se destacan con el tipo de titular para que se lean de un vistazo. */
.contacto__correo {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: 1.1rem; letter-spacing: -.005em;
}
.contacto__legal {
  margin-top: 1rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}

/* Trampa antispam: invisible y fuera del recorrido de teclado y lectores */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Aviso provisional mientras el formulario no tiene destino configurado.
   Lo pinta app.js; en cuanto el form tenga action, deja de aparecer. */
.sin-conectar {
  grid-column: 1 / -1;
  border-left: 3px solid var(--verde-profundo);
  background: var(--blanco);
  padding: 1rem 1.25rem;
  font-size: .92rem; color: var(--grafito-70);
}

@media (max-width: 720px) {
  .contacto { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --- Aviso: un solo elemento a todo lo ancho, igual que #ejes / #foro --- */
.nota__destacado { font-weight: 700; color: var(--grafito); }

/* --- Marca de estado pendiente ------------------------------------------ */
.porconfirmar {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-titulo); font-weight: 500;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245, 245, 245, .55);
}
.porconfirmar::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde); flex: none; }
.porconfirmar--claro { color: var(--grafito-45); }
.porconfirmar--claro::before { background: var(--verde-profundo); }

/* --- Agradecimientos: patrocinadores de la edicion 2025 -----------------
   Son bandas apaisadas (ratio ~4:1) con varios logotipos dentro y tinta
   oscura sobre transparencia, asi que exigen fondo claro y sitio de sobra.
   En fila de cuatro quedarian ilegibles: van a dos columnas.
   Tampoco se desaturan como los colaboradores: en un agradecimiento los
   logotipos se muestran tal cual son.
------------------------------------------------------------------------- */
/* El titulo de esta seccion tiene 34 caracteres y el tope general de los
   encabezados es de 20: sin soltarlo se partia siempre en dos lineas. */
#agradecimientos .rotulo h2 { max-width: none; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
#agradecimientos .rotulo { margin-bottom: 2rem; }
/* "Colaboradores" antes del segundo grupo de logos: mismo formato que el
   titulo "Patrocinadores" de arriba. */
.gracias__titulo {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.028em;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
}

/* Sin sangria a la izquierda: estas tres areas ya no llevan numeral ni
   celda vacia de alineacion, asi que el rotulo y el texto pasan a una
   sola columna, igual que el resto de secciones "a todo lo ancho". */
#primera-edicion .rotulo,
#prensa .rotulo,
#agradecimientos .rotulo,
#agradecimientos .texto { grid-template-columns: 1fr; }

/* El texto de presentacion de Participantes I Foro - 2025 a todo lo ancho,
   sin el tope de 1180px de .envoltura ni el de 44ch de .rotulo__pie. */
#primera-edicion .envoltura { max-width: none; }
#primera-edicion .rotulo__pie { max-width: none; }

/* Menos alto en estas tres areas: el mismo padding lateral, pero un
   arriba/abajo mas contenido que el resto del sitio. */
#primera-edicion, #prensa, #agradecimientos { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Muro de logos: fila que envuelve, igualados por altura. */
.gracias { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; row-gap: .85rem; }
.gracias + .gracias { margin-top: 2rem; }
/* Patrocinadores: 8 logos fijos en 4 + 4, no en cuantos quepan por ancho.
   Columnas "auto" (no 1fr): cada una mide lo que ocupa su logo, no un
   cuarto del ancho total, asi el bloque no se estira a toda la pantalla. */
.gracias--4x2 {
  display: grid; grid-template-columns: repeat(4, auto);
  align-items: center; justify-items: start;
  column-gap: .2rem; row-gap: .25rem;
  width: max-content; max-width: 100%;
}
/* Prueba: primera fila de Patrocinadores en 2 columnas x 2 logos cada una. */
.gracias--2x2 {
  display: grid; grid-template-columns: repeat(2, auto);
  align-items: center; justify-items: start;
  column-gap: 1.5rem; row-gap: .5rem;
  width: max-content; max-width: 100%;
}
/* Prueba: 2 columnas x 1 fila; dentro de cada columna, sus 2 logos en fila. */
.gracias--2col {
  display: grid; grid-template-columns: repeat(2, auto);
  align-items: center;
  column-gap: 2.5rem;
  width: max-content; max-width: 100%;
}
.gracias__par { display: flex; align-items: center; gap: 1.5rem; }
/* Primera fila de Patrocinadores: 5 columnas, un logo por columna. */
.gracias--fila1 {
  display: grid; grid-template-columns: repeat(5, auto);
  align-items: center; justify-items: start;
  column-gap: 1.5rem;
  width: max-content; max-width: 100%;
}
/* Segunda fila de Patrocinadores: 3 columnas, un logo por columna. */
.gracias--fila2 {
  display: grid; grid-template-columns: repeat(3, auto);
  align-items: center; justify-items: start;
  column-gap: 1.5rem;
  width: max-content; max-width: 100%;
}
.gracias__bloque { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
/* Linea vertical entre logos, como un separador de tabla: el primero de
   cada fila no la lleva, para no dejarla pegada al margen izquierdo. */
.gracias__bloque:not(:first-child) { padding-left: 1.25rem; border-left: 1px solid var(--grafito-45); }
.gracias__de {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grafito-45);
  width: 100%;
}
/* Tamano original de las imagenes en images/logos/: todas se exportaron
   ya a 100px de alto, asi que se muestran tal cual, sin volver a escalar. */
.gracias__bloque img {
  height: 70px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.gracias--fila1 .gracias__bloque img { height: 40px; }
.gracias--fila1 .gracias__bloque img[src$="sponsor-chint.png"] { height: 28px; }
.gracias--2x2 .gracias__bloque img[src$="unef-logo.png"] { height: 35px; }
.gracias--2x2 .gracias__bloque img[src$="embajada-china-logo.png"] { height: 52.5px; }
.gracias--fila2 .gracias__bloque img { height: 35px; }
.gracias--fila2 .gracias__bloque img[src$="sponsor-inversion.png"] { height: 26px; }
.gracias--fila2 .gracias__bloque img[src$="sponsor-soluciones-financieras.png"] { height: 38.5px; }


@media (max-width: 760px) {
  .gracias { flex-direction: column; align-items: flex-start; row-gap: 2.25rem; }
  .gracias--4x2 { grid-template-columns: 1fr 1fr; row-gap: .75rem; }
  /* Sin esto, un logo muy ancho como el de China Three Gorges desborda el
     ancho de la pantalla: en movil, cada columna pasa a su propia fila y
     los pares pueden partirse en dos lineas si no caben. */
  .gracias--2col { grid-template-columns: 1fr; row-gap: 1rem; width: 100%; }
  .gracias__par { flex-wrap: wrap; row-gap: .5rem; }
  .gracias--fila1 { grid-template-columns: 1fr 1fr; row-gap: 1rem; width: 100%; }
  .gracias--fila2 { grid-template-columns: 1fr 1fr; row-gap: 1rem; width: 100%; }
}

/* --- Pie ---------------------------------------------------------------- */
.cierre { background: var(--grafito); color: rgba(245, 245, 245, .65); padding: clamp(4rem, 8vw, 7rem) var(--margen) 2.5rem; }
.cierre__alto { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-bottom: 4rem; border-bottom: 1px solid var(--hair-oscuro); }
/* Logotipo completo (simbolo + texto), sustituye al icono suelto y al
   claim en texto: la marca ya lleva su propio mensaje. Ancho fijo en vez
   de proporcional a la columna, para que no crezca demasiado en pantallas
   anchas donde esa columna es holgada. */
.cierre__logotipo { width: min(100%, 12rem); height: auto; }
.cierre h4 {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--verde); margin-bottom: 1.25rem;
}
.cierre a { color: rgba(245, 245, 245, .65); text-decoration: none; display: block; margin-bottom: .6rem; font-size: .92rem; transition: color .3s var(--transicion); }
.cierre a:hover { color: var(--verde); }
.cierre__bajo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding-top: 2rem; font-size: .8rem; }
/* Los enlaces de aviso legal y politica de privacidad van en linea dentro
   de una frase, no en bloque como el resto de enlaces del pie. */
.cierre__alto .cierre__legal { margin-top: 1.1rem; font-size: .85rem; color: rgba(245, 245, 245, .65); }
.cierre__legal a {
  display: inline; margin: 0; color: inherit;
  text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.cierre__legal a:hover { color: var(--verde); }

@media (max-width: 900px) { .cierre__alto { grid-template-columns: 1fr; gap: 2.5rem; } }

/* --- Aparicion al hacer scroll ------------------------------------------
   Solo se activa si hay JS: sin el, todo es visible desde el principio.
------------------------------------------------------------------------- */
.js .aparece { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--transicion), transform .9s var(--transicion); }
.js .aparece.visible { opacity: 1; transform: none; }

/* --- Programa ------------------------------------------------------------ */
.cintillo { background: var(--grafito); color: var(--bruma); padding: 11rem var(--margen) clamp(3.5rem, 7vw, 6rem); position: relative; overflow: hidden; }
.cintillo__marca { position: absolute; right: -6%; top: -40%; width: min(46vw, 480px); height: auto; opacity: .12; pointer-events: none; }
/* Variante en verde de marca. Invierte todo lo que el cintillo grafito da
   por supuesto: el texto pasa a grafito y la marca de agua a la version en
   bruma, que es la que manda el manual sobre fondo verde (en verde sobre
   verde, simplemente no se veria). */
/* Banda sin contenido: el alto de 11rem estaba calculado para alojar un
   titular. Vacia solo tiene que despejar la cabecera fija y dar presencia
   al color, asi que baja bastante. */
.cintillo--franja { padding-top: clamp(5.5rem, 8vw, 6.5rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }

.cintillo--verde { background: var(--verde); color: var(--grafito); }
.cintillo--verde .antetitulo { color: var(--grafito); }
.cintillo--verde .antetitulo::before { background: var(--grafito); }
.cintillo--verde .cintillo__marca { opacity: .3; }

.cintillo h1 { font-size: var(--t1); letter-spacing: -.03em; }
.cintillo__cuando {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--hair-oscuro);
  font-family: var(--font-titulo); font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--verde);
  max-width: 40ch;
}
.cintillo .envoltura { position: relative; z-index: 1; }

/* Escala compacta: son mas de quince sesiones seguidas, asi que el titulo
   de cada acto NO usa la escala de titular (llegaba a 30 px y convertia el
   programa en un muro). Se queda en cuerpo grande, y el resto del bloque
   baja en la misma proporcion para no romper la jerarquia. */
.jornada { border-top: 1px solid var(--hair); }
.acto {
  display: grid; grid-template-columns: 5.25rem 1fr;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  padding: 1.35rem 0; border-bottom: 1px solid var(--hair);
  transition: background .35s var(--transicion);
}
.acto:hover { background: rgba(197, 225, 135, .09); }
.hora { font-family: var(--font-titulo); font-weight: 600; font-size: .875rem; letter-spacing: .02em; color: var(--verde-profundo); line-height: 1.55; }
.acto h3 { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.3; letter-spacing: -.015em; margin-bottom: .45rem; }
.acto__quien { color: var(--grafito-70); font-size: .91rem; line-height: 1.6; max-width: var(--columna); }
.acto__preside {
  font-family: var(--font-titulo); font-weight: 500;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grafito-45); margin-bottom: .6rem;
}
.panel { list-style: none; padding: 0; margin-top: .9rem; border-left: 1px solid var(--hair); }
.panel li { padding: .28rem 0 .28rem 1.25rem; font-size: .875rem; line-height: 1.55; color: var(--grafito-70); }

.separador {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--verde-profundo);
  padding: 2.25rem 0 1rem; border-bottom: 2px solid var(--verde-profundo);
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .acto { grid-template-columns: 1fr; gap: .5rem; }
}

/* --- Movil ---------------------------------------------------------------
   La cabecera es lo primero que se ve y tiene que ocupar poco, pero el menu
   no puede desaparecer: "Edicion 2025" y "Programa" son paginas propias y
   sin ellas media web queda inalcanzable desde el movil.
   Con JS el menu se pliega tras un boton. Sin JS no hay boton que valga, asi
   que los enlaces se muestran en fila envolvente: ocupa mas, pero se llega.
------------------------------------------------------------------------- */

/* Boton de menu: nunca en escritorio */
.hamburguesa {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 2.5rem; height: 2.5rem; flex: none;
  padding: 0; border: 0; background: transparent;
  color: inherit; cursor: pointer;
}
.hamburguesa span {
  display: block; width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--transicion), opacity .25s var(--transicion);
}
/* Abierto: las dos barras se cruzan en aspa */
.hamburguesa[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 900px) {
  .js .hamburguesa { display: flex; }

  /* El panel cuelga de la cabecera, que es fija: con position absolute
     queda justo debajo sin tener que medir su altura desde JS. */
  .js .menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(50, 41, 47, .98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hair-oscuro);
    padding: .5rem var(--margen) 1.5rem;
    max-height: calc(100svh - 100%);
    overflow-y: auto;
  }
  .js .menu.abierto { display: flex; }

  .js .menu a {
    color: var(--bruma);
    font-size: .95rem; letter-spacing: .1em;
    padding: 1rem 0;
    border-bottom: 1px solid var(--hair-oscuro);
  }
  .js .menu a:last-child { border-bottom: 0; }
  /* En el panel el subrayado animado sobra: cada enlace ya tiene su filete */
  .js .menu a::after { display: none; }
  .js .menu .menu__destacado { color: var(--verde); }

  /* Sin JS: todos los enlaces a la vista, en fila que envuelve */
  html:not(.js) .menu { flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.1rem; }
  html:not(.js) .menu a { font-size: .66rem; letter-spacing: .08em; }
}

@media (max-width: 720px) {
  .tope { padding: .75rem var(--margen); gap: 1rem; }
  .tope--solido { padding-top: .6rem; padding-bottom: .6rem; }

  .marca { gap: .6rem; }
  .marca__simbolo { width: 1.85rem; }
  .tope--solido .marca__simbolo { width: 1.7rem; }
  .marca__texto { font-size: .6rem; letter-spacing: .09em; line-height: 1.3; max-width: 11.5rem; }
  .marca__texto em { font-size: .56rem; letter-spacing: .12em; }

  /* Sin JS no hay panel: el enlace destacado se dibuja como pastilla */
  html:not(.js) .menu .menu__destacado { border: 1px solid currentColor; padding: .45rem .7rem; }
  html:not(.js) .menu .menu__destacado::after { display: none; }

  /* La portada deja de ocupar pantalla completa: en movil esa altura solo
     empuja el contenido hacia abajo sin aportar nada. */
  .portada { min-height: auto; padding: 5.5rem var(--margen) 3.25rem; }
  .antetitulo { font-size: .66rem; letter-spacing: .18em; margin-bottom: 1.25rem; }
  .antetitulo::before { width: 24px; }
  .portada h1 { line-height: 1.02; }
  .portada__cn { letter-spacing: .26em; margin-bottom: 2rem; }

  /* Ficha a dos columnas: cuatro filas apiladas eran demasiado alto */
  .ficha { grid-template-columns: 1fr 1fr; margin-bottom: 2.25rem; }
  .ficha__dato { padding: .95rem .9rem .95rem 0; }
  .ficha__dato:nth-child(odd) { padding-left: 0; }
  .ficha__dato:nth-child(2n) { padding-left: .9rem; border-right: 0; }
  /* El filete inferior separa filas, no cierra la ficha: se lo quedan todos
     los datos menos los dos ultimos, que son los de la fila final. Asi vale
     igual con dos datos que con cuatro. */
  .ficha__dato:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--hair-oscuro); }
  .ficha__et { margin-bottom: .45rem; }
  .ficha__valor { font-size: .92rem; }

  .acciones { gap: .65rem; }
  .accion { flex: 0 1 auto; justify-content: center; padding: .95rem 1.2rem; }

  .cintillo { padding-top: 7rem; }
}

/* --- Documento legal ------------------------------------------------------
   Layout compartido por avisolegal.html y politicaprivacidad.html: copia
   lineal del documento original, sin dividirlo en partes ni en la columna
   de numeral grande que usa el resto del sitio. Un unico bloque de lectura
   continua a todo lo ancho (se reutilizan .texto y .texto__cuerpo tal cual).
   ------------------------------------------------------------------------- */

/* Apartados del documento a todo lo ancho, igual que #ejes / #foro: sin la
   columna de 1180 px, sin la sangria del numeral y sin el tope de 60ch de
   .texto__cuerpo (si no, el contenedor va a todo lo ancho pero el texto
   se queda en una columna estrecha en medio de la pantalla). */
.envoltura.legal { max-width: none; }
.legal .texto { grid-template-columns: 1fr; gap: 0; }
.legal .texto__cuerpo { max-width: none; }

/* Listas del documento (derechos, finalidades): las unicas que el original
   trae como lista real de Word, el resto sigue siendo texto corrido. El
   bullet de marca (punto verde) ya lo pone .lista en brand.css. */
.legal .lista { margin: 1.4rem 0; }
.legal .lista li {
  color: var(--grafito-70);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}

/* --- Ponentes -------------------------------------------------------------
   Muro de fichas: foto en blanco y negro por defecto, a color al pasar el
   cursor o al enfocar con teclado. Cada ficha es un <button>, no un enlace
   (de momento no navega a ningun sitio), y abre el <dialog> con la bio.
   ------------------------------------------------------------------------- */
.ponentes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 2rem 1rem;
}
.ponente {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
}
.ponente__foto {
  width: 212px; height: 212px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%;
  filter: grayscale(1) contrast(1.02);
  transition: filter .5s var(--transicion), transform .5s var(--transicion);
}
.ponente:hover .ponente__foto,
.ponente:focus-visible .ponente__foto { filter: grayscale(0); transform: scale(1.05); }
.ponente__nombre {
  display: block; margin-top: .75rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .85rem; letter-spacing: -.005em;
  color: var(--grafito);
}

/* Popup de ponente: <dialog> nativo, con su propio backdrop. */
.ponente-dialog {
  border: 0; border-radius: 2px; padding: 0;
  width: min(90vw, 460px);
  background: var(--blanco); color: var(--grafito);
}
.ponente-dialog::backdrop { background: rgba(50, 41, 47, .72); }
.ponente-dialog__marco { position: relative; margin: 0; }
.ponente-dialog__cerrar {
  position: absolute; top: .85rem; right: .85rem; z-index: 2;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(50, 41, 47, .55); color: var(--bruma);
  border: 0; cursor: pointer;
  transition: background .3s var(--transicion);
}
.ponente-dialog__cerrar:hover, .ponente-dialog__cerrar:focus-visible { background: var(--grafito); }
.ponente-dialog__cerrar svg { width: 18px; height: 18px; }
.ponente-dialog__foto { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.ponente-dialog__cuerpo { padding: 1.75rem; }
.ponente-dialog__nombre {
  font-family: var(--font-titulo); font-weight: 700;
  font-size: 1.3rem; letter-spacing: -.015em; margin-bottom: .85rem;
}
.ponente-dialog__bio {
  color: var(--grafito-70); font-size: .95rem; line-height: 1.6;
  text-align: justify; hyphens: none; -webkit-hyphens: none;
}

@media (max-width: 640px) {
  .ponentes { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem .75rem; }
  .ponente__foto { width: 168px; height: 168px; }
}

/* --- Impresion: el programa debe imprimirse bien ------------------------- */
@media print {
  .tope, .carril, .progreso, .acciones, .accion, .cierre, .saltar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .cintillo { background: #fff; color: #000; padding: 0 0 1.5cm; }
  .cintillo__marca { display: none; }
  .bloque { padding: 0; }
  .acto { break-inside: avoid; page-break-inside: avoid; border-bottom: 1px solid #ccc; }
  .hora, .separador { color: #000; }
  .js .aparece { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; color: #000; }
}

/* --- Movimiento reducido ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .portada__marca { animation: none; opacity: .14; transform: translateY(-50%); }
  .js .aparece { opacity: 1; transform: none; transition: none; }
  .eje:hover .eje__titulo { transform: none; }
  .valores__item:hover { transform: none; }
  .ponente:hover .ponente__foto, .ponente:focus-visible .ponente__foto { transform: none; }
}