/* =========================================================================
   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; }
/* En la portada el antetitulo es el lema del foro: en negrita para que destaque */
.portada .antetitulo { font-weight: 700; }

.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; }
/* Dato que debe ir en una sola linea (la fecha de la portada). Solo en
   pantallas anchas: en movil la ficha va a dos columnas estrechas y forzar
   una linea desbordaria. */
@media (min-width: 761px) {
  .ficha__valor--linea { white-space: nowrap; }
}
.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); }
/* Boton de enviar mientras se envia el formulario (app.js): sin hover. */
.accion:disabled { cursor: progress; opacity: .7; background: var(--verde); color: var(--grafito); }
/* 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 esta retirado de index (ya no se muestra en ninguna pagina):
   se quito tambien la franja que reservaba a la izquierda en pantallas de
   1400px o mas. Los estilos de .carril se conservan por si vuelve; la
   clase .con-carril del body de index se mantiene porque acota otras
   reglas propias de index (espaciado de secciones, titulos). */

/* --- 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, #edicion-2026, #edicion-anterior, #contacto { padding-block: clamp(3rem, 6vw, 5.5rem); }
.bloque--oscuro { background: var(--grafito); color: var(--bruma); }
.bloque--papel { background: var(--blanco); }
/* Menos alto arriba y abajo que el .bloque general (hasta 9.5rem por lado).
   Clase y no #id porque #jornada existe tambien en programa-2026.html. */
.bloque--compacto { padding-block: clamp(2.5rem, 5vw, 4rem); }
.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); }
/* Version en chino de un titulo de seccion, justo debajo: mas pequena,
   espaciada y en gris, con fuente del sistema (Jost no tiene CJK). */
.rotulo__cn {
  margin-top: .45rem;
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(.95rem, 1.4vw, 1.15rem); letter-spacing: .1em; line-height: 1.4;
  color: var(--grafito-70);
}

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

/* Variante con el texto encima del video (edicion-2026.html): abajo a la
   izquierda, en blanco y verde sobre un velo que se oscurece hacia abajo
   para que se lea. Sin franja verde debajo; boton en verde de marca. En
   movil la banda es demasiado baja y el texto pasa debajo, sobre grafito. */
.cinta--sobre { position: relative; padding-bottom: 0; background: var(--grafito); color: var(--bruma); }
.cinta--sobre .cinta__velo {
  background: linear-gradient(to top, rgba(50, 41, 47, .88) 0%, rgba(50, 41, 47, .4) 50%, rgba(50, 41, 47, .2) 100%);
}
.cinta--sobre .cinta__texto {
  position: absolute; left: 0; right: 0; bottom: clamp(1.75rem, 4.5vw, 4rem);
  padding-top: 0; z-index: 1;
}
/* Variante para una animacion grafica ya oscura (el-foro.html: anillos
   verde apagado sobre grafito). Con la opacidad .62 y el velo de los
   videos de fotos los anillos casi desaparecian: va a opacidad plena y
   el velo solo oscurece la franja baja, donde esta el texto. */
.cinta--animacion .cinta__video { opacity: 1; }
/* Menos alta que la de las ediciones (3:1 en vez de 2:1): es una animacion
   de fondo casi lisa y a 2:1 se leia como un bloque vacio. El recorte de
   arriba y abajo no pierde nada importante. */
.cinta--animacion .cinta__marco { aspect-ratio: 3 / 1; }
/* Texto de la cabecera de elforo: algo mas arriba que en las ediciones,
   la pregunta (antetitulo) con su version en chino debajo y el titulo
   "El Foro" al cuerpo de los titulos de pagina (como "Programa 2025"). */
.cinta--animacion .cinta__texto { bottom: clamp(2.5rem, 6.5vw, 5.5rem); }
.cinta--animacion .antetitulo { margin-bottom: .55rem; }
/* Sangria igual al filete del antetitulo (48px + 1rem de hueco; 24px en
   movil) para que el chino arranque justo bajo la pregunta. */
.cinta__cn {
  padding-left: calc(48px + 1rem);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(.85rem, 1.2vw, 1rem); letter-spacing: .14em;
  color: rgba(245, 245, 245, .7);
}
.cinta--animacion .cinta__titulo { font-size: var(--t1); letter-spacing: -.03em; margin-top: 0; }
@media (max-width: 720px) {
  .cinta__cn { padding-left: calc(24px + 1rem); }
}
/* Dos velos: uno desde abajo y otro desde la izquierda, la zona del
   texto. Asi el anillo, que se mueve, se apaga al pasar por detras del
   titulo y no compite con el (en ponentes y programa-2026 el anillo es
   verde intenso). */
.cinta--animacion .cinta__velo {
  background:
    linear-gradient(to right, rgba(50, 41, 47, .78) 0%, rgba(50, 41, 47, .45) 32%, rgba(50, 41, 47, 0) 58%),
    linear-gradient(to top, rgba(50, 41, 47, .7) 0%, rgba(50, 41, 47, 0) 45%);
}
@media (max-width: 760px) {
  /* En movil el texto va debajo del video: no hace falta el velo lateral */
  .cinta--animacion .cinta__velo { background: linear-gradient(to top, rgba(50, 41, 47, .5) 0%, rgba(50, 41, 47, 0) 45%); }
}
.cinta--sobre .cinta__texto .antetitulo { color: var(--verde); }
.cinta--sobre .cinta__texto .antetitulo::before { background: var(--verde); }
.cinta--sobre .cinta__titulo { color: var(--bruma); }
@media (max-width: 760px) {
  .cinta--sobre .cinta__texto { position: static; padding: 1.75rem var(--margen) 2.25rem; }
}
/* 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%; }
}

/* Subtitulo de seccion (p. ej. "Nuestras ediciones" en el-foro.html) */
.rotulo__sub {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; line-height: 1.2;
}
/* Subtitulo dentro de un bloque de texto corrido, con aire por encima para
   separar el apartado del parrafo anterior. */
.texto__cuerpo .texto__sub { margin: clamp(2.25rem, 4vw, 3rem) 0 1rem; color: var(--grafito); }

/* --- Mision y Vision (el-foro.html) -------------------------------------
   Dos paneles en paralelo, los dos en verde de marca: titulo y texto
   justificado (sin partir palabras con guion). El isotipo de marca de agua
   sale por una esquina distinta en cada panel, en diagonal: Mision abajo
   a la izquierda, Vision arriba a la derecha. */
.mv {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.mv__panel {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(2rem, 4vw, 3.25rem);
  border-radius: var(--radio);
  background: var(--verde); color: var(--grafito);
}
.mv__marca {
  position: absolute; z-index: -1; pointer-events: none;
  top: -18%; width: 62%; max-width: 400px; height: auto; opacity: .45;
}
.mv__panel--mision .mv__marca { left: -14%; top: auto; bottom: -18%; }
.mv__panel--vision .mv__marca { right: -14%; }
.mv__et {
  font-family: var(--font-titulo); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.025em;
}
.mv__texto { margin-top: clamp(1rem, 2vw, 1.5rem); }
.mv__texto p { font-size: .95rem; line-height: 1.7; text-align: justify; hyphens: none; -webkit-hyphens: none; color: rgba(50, 41, 47, .85); }
.mv__texto p + p { margin-top: .9rem; }
@media (max-width: 900px) {
  .mv { grid-template-columns: 1fr; }
}

/* Nuestras ediciones, en su propia seccion tras Mision y Vision: sin el
   aire superior del subtitulo, que ya da el padding de la seccion. */
#nuestras-ediciones .texto__sub { margin-top: 0; }
/* Cabecera de la edicion 2025 bajo "Nuestras ediciones": sin titulo
   propio, la frase arranca pegada al subtitulo de la seccion. */
/* Frase sobre cada tarjeta de edicion ("2026 – II Foro…"): destacada en
   verde profundo (el verde claro no contrasta sobre blanco) y en Jost. */
#nuestras-ediciones .ed26__frase {
  margin-top: 0;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.15rem); letter-spacing: -.005em;
  color: var(--verde-profundo);
}
/* Segunda edicion de la lista (y siguientes): aire entre la tarjeta de una
   edicion y la cabecera de la otra. */
#nuestras-ediciones .recuerdo + .ed26__cabecera { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Nuestras ediciones (el-foro.html): misma lista que Actualidad en index
   (filetes de 1px, filas compactas, fila entera pulsable) pero en tres
   columnas: año, edicion y "Ver". */
.ediciones { border-top: 1px solid var(--hair); }
.ediciones__item {
  display: grid; grid-template-columns: 5rem 1fr auto;
  align-items: center; gap: 1.5rem;
  padding: clamp(.9rem, 1.6vw, 1.2rem) 0;
  border-bottom: 1px solid var(--hair);
  color: var(--grafito); text-decoration: none;
}
.ediciones__ano {
  font-family: var(--font-titulo); font-weight: 700;
  font-size: 1.05rem; color: var(--verde-profundo);
  font-variant-numeric: tabular-nums;
}
.ediciones__texto {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.35;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: .2em; transition: text-decoration-color .3s var(--transicion);
}
.ediciones__ver {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--verde-profundo);
}
.ediciones__ver svg { width: 16px; transition: transform .35s var(--transicion); }
.ediciones__item:hover .ediciones__texto,
.ediciones__item:focus-visible .ediciones__texto { text-decoration-color: currentColor; }
.ediciones__item:hover .ediciones__ver svg { transform: translateX(3px); }
@media (max-width: 600px) {
  .ediciones__item { grid-template-columns: 3.5rem 1fr auto; gap: 1rem; }
}

/* --- 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.1em;
}
/* Variante con punto medio en vez de flecha (lista de conceptos o frases,
   no una secuencia que lleva de uno a otro). Sobre grafito el punto es
   verde, como la flecha. */
.marquesina--puntos .marquesina__grupo span::after { content: "·"; font-size: 2em; line-height: 0; }
/* En el-foro.html abre la banda de Mision y Vision: va pegada al borde
   superior de la seccion, sin el padding de arriba, y deja aire hasta los
   paneles. */
#mision-vision { padding-top: 0; }
#mision-vision .marquesina { margin: 0 calc(var(--margen) * -1) clamp(2rem, 4vw, 3rem); }
/* Boton bajo el texto de Edicion anterior */
#edicion-2026 .edicion__accion,
#edicion-anterior .edicion__accion { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* --- La pregunta (index, #foro) ------------------------------------------
   Dos columnas: la pregunta en grande con su boton, y las seis palabras de
   la antigua marquesina apiladas en letra hueca. Una a una se encienden en
   verde profundo, en bucle de 12s (2s por palabra), como respuesta a la
   pregunta. Detras, el isotipo muy tenue. */
.con-carril #foro.pregunta { padding-block: clamp(3.5rem, 7vw, 6rem); }
.pregunta__rejilla {
  display: grid; grid-template-columns: 1.1fr 1fr;
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
}
.pregunta__titulo {
  font-family: var(--font-titulo); font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.035em;
  color: var(--grafito);
}
.pregunta__titulo span { display: block; color: var(--verde-profundo); }
/* En index la pregunta lleva debajo su version en chino: algo mas pequena
   que en edicion2026 (hasta 3.3rem en vez de 4rem) para que el bloque de
   texto no crezca demasiado frente a las palabras de la derecha. */
#foro .pregunta__titulo { font-size: clamp(2rem, 3.9vw, 3.3rem); }
/* En edicion2026 la pregunta es mas larga ("España tiene energia verde.
   ¿Quien la consumira?") y la version china tambien: cuerpos algo menores
   y menos espaciado en el chino para que quepa en una linea. */
.pregunta--en-presentacion .pregunta__titulo { font-size: clamp(2rem, 3.9vw, 3.3rem); }
.pregunta--en-presentacion .pregunta__cn { font-size: clamp(1.1rem, 2vw, 1.55rem); letter-spacing: .06em; }
/* La pregunta en chino, bajo la espanola: mas pequena y espaciada, como
   el nombre en chino de la portada. Jost no tiene caracteres CJK, asi que
   se declara la familia del sistema. */
.pregunta__cn {
  margin-top: clamp(.9rem, 1.8vw, 1.25rem);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.4; letter-spacing: .12em;
  color: var(--grafito-70);
}
.pregunta__accion { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.pregunta__respuesta { position: relative; isolation: isolate; }
.pregunta__marca {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: min(100%, 420px); height: auto;
  transform: translate(-50%, -50%); opacity: .35;
}
.pregunta__palabras {
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-titulo); font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.08;
  letter-spacing: .01em; text-transform: uppercase;
}
/* Palabras en grafito muy claro y macizo, no huecas: Jost es variable y
   con -webkit-text-stroke dibuja los contornos solapados por dentro de las
   letras. */
.pregunta__palabras li {
  color: rgba(50, 41, 47, .13);
  animation: encender 12s infinite both;
  animation-delay: calc(var(--i) * 2s);
}
@keyframes encender {
  0%, 2%    { color: rgba(50, 41, 47, .13); }
  4%, 15%   { color: var(--verde-profundo); }
  18%, 100% { color: rgba(50, 41, 47, .13); }
}
@media (prefers-reduced-motion: reduce) {
  .pregunta__palabras li { animation: none; }
  .pregunta__palabras li:last-child { color: var(--verde-profundo); }
}
@media (max-width: 900px) {
  .pregunta__rejilla { grid-template-columns: 1fr; }
  /* En una columna el orden del HTML dejaba el boton entre la pregunta y
     las palabras. display: contents saca titulo y boton de su caja para
     ordenarlos en la rejilla: pregunta, palabras y, al final, el boton. */
  .pregunta__texto { display: contents; }
  /* Sin hueco de rejilla entre filas (separaba la pregunta de su version
     china como si fueran bloques distintos): cada pieza pone su margen. */
  .pregunta__rejilla { row-gap: 0; }
  .pregunta__titulo, .pregunta__cn { order: 1; }
  .pregunta__respuesta { order: 2; margin-top: clamp(1.75rem, 6vw, 2.5rem); }
  .pregunta__accion { order: 3; margin-top: clamp(1.75rem, 6vw, 2.5rem); }
  .pregunta__palabras { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  /* El anillo, mas pequeno y a la derecha: centrado pisaba el boton */
  .pregunta__marca { left: auto; right: -12%; width: 240px; transform: translateY(-50%); }
}

/* --- Edicion 2026 (index, #edicion-2026) --------------------------------
   Cabecera en dos columnas y dos "puertas" (tarjetas enteras pulsables) en
   la linea de Mision/Vision: Programa en grafito con la jornada como linea
   de tiempo, Ponentes en verde con retratos superpuestos. */
.ed26__cabecera {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.ed26__titulo { font-size: var(--t1); letter-spacing: -.028em; line-height: 1.05; }
.ed26__frase { margin-top: .75rem; color: var(--grafito-70); font-size: 1.05rem; max-width: 44ch; }
.ed26__cuando {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .95rem; line-height: 1.5; text-align: right; color: var(--verde-profundo);
}

.ed26__puertas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.puerta {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--radio);
  text-decoration: none;
  transition: transform .35s var(--transicion), box-shadow .35s var(--transicion);
}
.puerta:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(50, 41, 47, .35); }
.puerta--programa { background: var(--grafito); color: var(--bruma); }
.puerta--ponentes { background: var(--verde); color: var(--grafito); }
.puerta__marca {
  position: absolute; z-index: -1; pointer-events: none;
  right: -16%; top: -22%; width: 58%; max-width: 360px; height: auto;
}
.puerta--programa .puerta__marca { opacity: .08; }
.puerta--ponentes .puerta__marca { opacity: .45; }
.puerta__et {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
}
.puerta--programa .puerta__et { color: var(--verde); }
.puerta__num { font-variant-numeric: tabular-nums; padding-right: .75rem; border-right: 1px solid currentColor; }
.puerta__titulo {
  margin-top: 1rem;
  font-family: var(--font-titulo); font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -.025em;
}
.puerta__ir {
  margin-top: auto; padding-top: clamp(1.5rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
}
.puerta--programa .puerta__ir { color: var(--verde); }
.puerta__ir svg { width: 16px; transition: transform .35s var(--transicion); }
.puerta:hover .puerta__ir svg { transform: translateX(4px); }

/* Linea de tiempo de la jornada: 9:00 a 17:30 = 510 min; --t es la
   posicion de cada acto. Paneles: punto con su numero romano; conferencias:
   marca vertical fina. Los paneles se encienden en verde de uno en uno. */
.cronograma { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.cronograma__linea { position: relative; height: 2.6rem; }
.cronograma__linea::before {
  content: ""; position: absolute; left: 0; right: 0; top: .55rem;
  height: 1px; background: rgba(245, 245, 245, .3);
}
.cronograma__conf {
  position: absolute; left: var(--t); top: .15rem;
  width: 1px; height: .8rem; background: rgba(245, 245, 245, .55);
}
.cronograma__panel {
  position: absolute; left: var(--t); top: .55rem;
  width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem;
  border-radius: 50%;
  background: var(--grafito); border: 1.5px solid rgba(245, 245, 245, .6);
  animation: panel-encendido 10s infinite both;
  animation-delay: calc(var(--i) * 2s);
}
.cronograma__panel b {
  position: absolute; top: 1.15rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-titulo); font-weight: 600; font-size: .68rem; letter-spacing: .06em;
  color: rgba(245, 245, 245, .6);
}
@keyframes panel-encendido {
  0%, 2%    { background: var(--grafito); border-color: rgba(245, 245, 245, .6); transform: scale(1); }
  5%, 17%   { background: var(--verde); border-color: var(--verde); transform: scale(1.35); }
  20%, 100% { background: var(--grafito); border-color: rgba(245, 245, 245, .6); transform: scale(1); }
}
.cronograma__extremos {
  display: flex; justify-content: space-between; margin-top: .35rem;
  font-family: var(--font-titulo); font-weight: 600; font-size: .7rem; letter-spacing: .08em;
  color: rgba(245, 245, 245, .55); font-variant-numeric: tabular-nums;
}
.puerta__cifras { display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.puerta__cifras p {
  font-family: var(--font-titulo); font-weight: 500; font-size: .85rem;
  color: rgba(245, 245, 245, .75);
}
.puerta__cifras b {
  display: block; font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1;
  color: var(--verde); letter-spacing: -.03em;
}

/* Retratos superpuestos: blanco y negro, a color al pasar por la tarjeta.
   El aro verde va en el envoltorio y el filtro solo en la foto: aplicado al
   mismo elemento, el grayscale volvia gris tambien el borde. */
.retratos { display: flex; align-items: center; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-left: .9rem; }
.retratos__foto,
.retratos__mas {
  flex: none; width: clamp(3.6rem, 6vw, 5rem); aspect-ratio: 1;
  margin-left: -.9rem; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--verde);
  transition: transform .35s var(--transicion);
}
.retratos__foto img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter .4s var(--transicion);
}
.retratos__mas {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grafito); color: var(--verde);
  font-family: var(--font-titulo); font-weight: 600; font-size: 1.6rem;
}
.puerta--ponentes:hover .retratos__foto img { filter: grayscale(0); }
.puerta--ponentes:hover .retratos__foto:nth-child(odd) { transform: translateY(-4px); }

/* "Asi fue" (index, #edicion-anterior): una sola tarjeta grafito entera
   pulsable. Mosaico de tres fotos reales de 2025 (una grande y dos
   apiladas), en blanco y negro y a color con un leve zoom al pasar el
   cursor; al lado, cita de prensa con la cifra destacada. Reutiliza
   etiqueta, titulo y enlace de las puertas de Edicion 2026. */
.recuerdo {
  display: grid; grid-template-columns: 1.25fr 1fr;
  background: var(--grafito); color: var(--bruma);
  border-radius: var(--radio); overflow: hidden;
  text-decoration: none;
  transition: transform .35s var(--transicion), box-shadow .35s var(--transicion);
}
.recuerdo:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(50, 41, 47, .35); }
/* Alto fijo y filas minmax(0, 1fr): con fotos verticales (fachada,
   escalera) una altura solo minima dejaba que la foto estirase la fila. */
.recuerdo__fotos {
  display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 3px; height: clamp(18rem, 30vw, 24rem);
}
.recuerdo__fotos > img { min-height: 0; }
.recuerdo__foto--grande { grid-row: 1 / span 2; }
.recuerdo__foto {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1);
  transition: filter .5s var(--transicion), transform .6s var(--transicion);
}
.recuerdo:hover .recuerdo__foto { filter: grayscale(0); transform: scale(1.03); }
/* Fachada (vertical): encuadre alto para que no se corte la torre */
.recuerdo__foto--fachada { object-position: center 20%; }
/* Hueco con el logotipo en vez de foto: entero (contain), con aire, sobre
   grafito y siempre en color (el blanco y negro es solo para fotos). */
.recuerdo__foto--logo,
.recuerdo:hover .recuerdo__foto--logo {
  object-fit: contain; padding: 14%; box-sizing: border-box;
  background: var(--grafito); filter: none; transform: none;
}
.recuerdo__fotos { overflow: hidden; }
.recuerdo__texto {
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.recuerdo .puerta__et,
.recuerdo .puerta__ir { color: var(--verde); }
.recuerdo:hover .puerta__ir svg { transform: translateX(4px); }
.recuerdo__cita {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  padding-left: 1rem; border-left: 2px solid var(--verde);
}
.recuerdo__cita p {
  font-family: var(--font-titulo); font-weight: 500;
  font-size: clamp(.98rem, 1.3vw, 1.1rem); line-height: 1.45;
  color: rgba(245, 245, 245, .85);
}
.recuerdo__cita b {
  font-weight: 700; font-size: 1.6em; line-height: 1; color: var(--verde);
}
/* Texto propio de la tarjeta (en vez de cita de prensa, p. ej. la de
   2026): mismo cuerpo y tono que la cita, sin el filete de cita. */
.recuerdo__parrafo {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.6;
  color: rgba(245, 245, 245, .8);
}
/* Texto de las tarjetas de ediciones justificado, como el resto del sitio
   y sin partir palabras con guion. */
.recuerdo__parrafo,
.recuerdo__cita p { text-align: justify; hyphens: none; -webkit-hyphens: none; }
/* Fuente de la cita: la frase es un titular de prensa, no del Foro */
.recuerdo__cita footer {
  margin-top: .7rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245, 245, 245, .5);
}
@media (max-width: 900px) {
  .recuerdo { grid-template-columns: 1fr; }
  .recuerdo__fotos { height: 16rem; }
}

@media (prefers-reduced-motion: reduce) {
  .recuerdo, .recuerdo:hover, .recuerdo:hover .recuerdo__foto { transform: none; }
  .puerta, .puerta:hover { transform: none; }
  .cronograma__panel { animation: none; background: var(--verde); border-color: var(--verde); }
}
@media (max-width: 900px) {
  .ed26__puertas { grid-template-columns: 1fr; }
  .ed26__cuando { text-align: left; }
}

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

/* Entidades participantes de edicion-2026.html: titulo + rejilla de 3
   columnas pegada a la izquierda. Cada columna mide lo que su logo (no se
   reparten el ancho de la pagina), separadas solo por el column-gap; en
   pantallas estrechas pueden encogerse. Un cuarto logo baja a la fila
   siguiente. */
.entidades {
  max-width: 1180px; margin-inline: auto;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}
/* Titulos de grupo con la fuente y el tamano del texto normal (como el
   body de brand.css) y peso medio, para que no compitan con los logos ni
   con el titulo "Entidades participantes". */
.entidades h3 {
  font-family: var(--font-cuerpo); font-weight: 500;
  font-size: 1.0625rem; line-height: 1.5; letter-spacing: 0; margin-bottom: 1rem;
}
/* Dos grupos en la misma fila (Apoyo institucional + Organiza, y
   Colaboradores + Produccion). La primera columna tiene ancho fijo, asi el
   segundo grupo empieza en la misma vertical en todas las filas
   (Produccion justo debajo de Organiza). En movil, uno debajo del otro. */
.entidades-fila {
  max-width: 1180px; margin-inline: auto;
  display: grid; grid-template-columns: 27rem 1fr; align-items: start;
  column-gap: clamp(2rem, 5vw, 4rem);
}
.entidades-fila > .entidades { margin-inline: 0; min-width: 0; }
/* Apoyo institucional + Organiza: el DIBUJO de CCINCE (el lazo, no el
   texto de debajo) centrado en vertical con el emblema de la embajada.
   Embajada a 92px: centro del emblema a 46px del borde superior.
   CCINCE (logo-camara_comercio.png, 368x159) a 85px: el lazo ocupa
   y:3-93 de 159 en la imagen, centro a ~26px.
   46 - 26 = 20px: CCINCE empieza 20px por debajo de la embajada.
   Si cambia el alto de alguno de los dos logos, hay que recalcularlo.
   En movil van uno debajo del otro y no hace falta. */
@media (min-width: 761px) {
  .entidades-fila--centrada .entidades__logos { align-items: start; }
  .entidades-fila--centrada .entidades__logos img[src$="logo-camara_comercio.png"] { margin-top: 20px; }
}
@media (max-width: 760px) {
  .entidades-fila { grid-template-columns: 1fr; }
  /* Solo la primera fila: ahi #organizacion .rotulo + .entidades-fila >
     .entidades quita el padding-top a los dos grupos, y este hueco lo
     repone en el segundo cuando baja. */
  #organizacion .rotulo + .entidades-fila { row-gap: clamp(2.5rem, 5vw, 3.5rem); }
}
.entidades__logos {
  display: grid; grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: start; align-items: center; justify-items: start;
  column-gap: clamp(1.25rem, 3vw, 2.5rem); row-gap: 2rem;
}
/* Igualados por ALTURA; max-width + height:auto los reduce en proporcion
   cuando la columna es mas estrecha que el logo (moviles). */
.entidades__logos img { display: block; height: 60px; width: auto; max-width: 100%; object-fit: contain; }
.entidades__logos img[src$="logo-camara_comercio.png"] { height: 85px; }
/* Embajada como en chinaspaingreenenergyforum.com (Agradecimientos): alli
   embajada-china-logo.png (798x236 con margen) va a 120px de alto, asi que
   el logo visible mide ~74px. Aqui la misma imagen sin margen
   (logo-embajada-china.png, 490x146) a esos 74px, +25% = 92px de
   alto (~310px de ancho). */
.entidades__logos img[src$="logo-embajada-china.png"] { height: 92px; }
/* Diplocorp: 43px -25% = 32px de alto, unos 125px de ancho. */
.entidades__logos img[src$="logo_2025.png"] { height: 32px; }
/* Coorganizan en una sola imagen (1652x150): a 60px de alto cada logo
   mide lo mismo que cuando iban por separado (unos 660px en total). */
.entidades__logos img[src$="logos-coorganizan.png"] { height: 60px; }
/* Colaboradores en una sola imagen (427x48): a 36px de alto, Deloitte se ve
   a 21px y Russell a ~37px, un 25% menos que cuando iban sueltos (28 y 50). */
.entidades__logos img[src$="logos-colaboradores.png"] { height: 36px; }
@media (max-width: 760px) {
  /* En movil las columnas "max-content" no encogian y el tercer logo se
     salia de la pantalla: aqui los logos van seguidos y, si no caben, el
     siguiente baja de linea. Los grupos de un solo logo no cambian. */
  .entidades__logos { display: flex; flex-wrap: wrap; align-items: center; }
  .entidades__logos img[src] { height: auto; max-height: 60px; }
  .entidades__logos img[src$="logo-camara_comercio.png"] { max-height: 64px; } /* -25 % que en escritorio */
  .entidades__logos img[src$="logo-embajada-china.png"] { max-height: 92px; }
  .entidades__logos img[src$="logo_2025.png"] { max-height: 24px; } /* -25 % que en escritorio */
  .entidades__logos img[src$="logos-colaboradores.png"] { max-height: 36px; }
}

@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;
}

/* Ejes en tarjetas (edicion-2026.html), como las tematicas del I Foro:
   imagen de 276x192 arriba (images/ejes/tema-*.svg) y numero, titulo y
   frase debajo. Tarjetas de ancho fijo centradas: en 1180px caben tres por
   fila, asi que quedan 3 + 2 centradas en vez de 4 + 1 suelta. */
.tarjetas-ejes {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2rem;
}
.tarjeta-eje {
  flex: 0 1 276px;
  background: var(--blanco);
  border: 1px solid var(--hair); border-radius: var(--radio);
  overflow: hidden;
  transition: box-shadow .3s var(--transicion), transform .3s var(--transicion);
}
.tarjeta-eje:hover { box-shadow: 0 10px 24px -8px rgba(50, 41, 47, .22); transform: translateY(-3px); }
.tarjeta-eje__imagen { display: block; width: 100%; height: 192px; object-fit: cover; }
.tarjeta-eje__cuerpo { padding: 1.25rem 1.35rem 1.5rem; }
.tarjeta-eje__titulo {
  font-family: var(--font-titulo); font-weight: 700;
  font-size: 1rem; line-height: 1.35; letter-spacing: .01em;
  color: var(--grafito);
}
.tarjeta-eje__texto { margin-top: .5rem; font-size: .92rem; line-height: 1.5; color: var(--grafito-70); }

/* Variante enlace (index, seccion Edicion 2026): la misma tarjeta, entera
   pulsable hacia El Foro, Edicion 2026 y Edicion 2025, con un "Ir ->" al
   pie. Cuerpo en columna para que el enlace quede abajo en las tres aunque
   el texto ocupe distinto. */
a.tarjeta-eje { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
a.tarjeta-eje .tarjeta-eje__cuerpo { flex: 1; display: flex; flex-direction: column; }
.tarjeta-eje__ir {
  margin-top: auto; padding-top: 1rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--verde-profundo);
}
.tarjeta-eje__ir svg { width: 15px; transition: transform .35s var(--transicion); }
a.tarjeta-eje:hover .tarjeta-eje__ir svg { transform: translateX(4px); }
/* Imagen que no debe recortarse (el banner de El Foro, 1920x600, con
   texto): entera, sobre grafito, que es su propio fondo. */
.tarjeta-eje__imagen--entera { object-fit: contain; background: var(--grafito); }
/* Fotograma de la animacion de elforo (1920x640): el anillo queda a la
   derecha, asi que el recorte se desplaza hacia ese lado. */
.tarjeta-eje__imagen--anillo { object-position: 78% center; }
@media (prefers-reduced-motion: reduce) {
  .tarjeta-eje:hover { transform: 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,
#sobre-el-foro .envoltura,
#mision-vision .envoltura,
#nuestras-ediciones .envoltura,
#edicion-2026 .envoltura, #edicion-anterior .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,
#sobre-el-foro .texto,
#nuestras-ediciones .texto,
#edicion-2026 .texto, #edicion-anterior .texto,
#presentacion .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,
#sobre-el-foro .texto > div:empty,
#contacto .texto > div:empty { display: none; }
#foro .texto__cuerpo,
#programa .texto__cuerpo,
#sobre-el-foro .texto__cuerpo,
#nuestras-ediciones .texto__cuerpo,
#edicion-2026 .texto__cuerpo, #edicion-anterior .texto__cuerpo,
#presentacion .texto__cuerpo,
#contacto .texto__cuerpo { max-width: none; }
#foro .texto__cuerpo p,
#programa .texto__cuerpo p,
#sobre-el-foro .texto__cuerpo p,
#edicion-2026 .texto__cuerpo p, #edicion-anterior .texto__cuerpo p,
#presentacion .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,
#edicion-2026 .rotulo, #edicion-anterior .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,
#edicion-2026 .rotulo > div, #edicion-anterior .rotulo > div,
#contacto .rotulo > div,
#primera-edicion .rotulo > div,
#prensa .rotulo > div,
#actualidad .rotulo > div,
#presentacion .rotulo > div,
#ejes .rotulo > div,
#organizacion .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); }
/* Registro oficial: sin titulo de seccion; la introduccion ocupa todo el
   ancho y arranca arriba, con el mismo hueco hasta el formulario que en
   el resto de paginas (bloque--compacto en el HTML). */
#registro .rotulo { grid-template-columns: 1fr; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
#registro .rotulo__pie { max-width: none; margin-top: 0; }

.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 desvelado por una casilla (registro/): display:flex taparia hidden */
.campo[hidden] { display: none; }

.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; }
/* La casilla opcional va pegada a la obligatoria: son un mismo bloque. */
.consiento + .consiento--opcional { margin-top: -.9rem; }
.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,
#actualidad .rotulo,
#presentacion .rotulo,
#ejes .rotulo,
#organizacion .rotulo,
#agradecimientos .rotulo,
#agradecimientos .texto { grid-template-columns: 1fr; }
/* "Entidades participantes" tiene 23 caracteres y el tope general es de 20:
   sin soltarlo se partiria en dos lineas. El primer grupo de logos pierde
   su aire superior, que ya pone el margen del rotulo. */
#organizacion .rotulo h2,
#presentacion .rotulo h2,
#ejes .rotulo h2 { max-width: none; }
#organizacion .rotulo + .organiza,
#organizacion .rotulo + .entidades,
#organizacion .rotulo + .entidades-fila > .entidades { padding-top: 0; }
/* La pregunta de index (.pregunta__rejilla) dentro de la presentacion de
   edicion2026: el mismo bloque, con aire arriba para separarlo del texto. */
.pregunta--en-presentacion {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--hair);
}

/* --- Agenda resumida (edicion-2026.html) --------------------------------
   Lista vertical de la jornada: hora a la izquierda, acto a la derecha.
   Version discreta: columna centrada de 54rem (no a todo lo ancho como el
   resto de #programa), cuerpos pequenos, filas compactas y filetes de 1px.
   Horas y etiquetas en verde profundo (el unico verde con contraste AA
   sobre claro); las pausas, con un velo muy suave del verde energia. */
.agenda,
.agenda__mas { max-width: 54rem; margin-inline: auto; }
/* Titulo de la Mesa IV (103 caracteres) en una sola linea: a 54rem la
   columna del acto mide unos 760px y el titulo ocupa unos 730px. Solo en
   pantallas anchas; por debajo vuelve a partirse para no desbordar. */
@media (min-width: 64rem) {
  .agenda__titulo--una-linea { white-space: nowrap; }
}
.agenda { list-style: none; padding: 0; border-top: 1px solid var(--hair); }
.agenda__item {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem;
  padding: .7rem .75rem; border-bottom: 1px solid var(--hair);
  position: relative;
}
/* Filete vertical entre hora y acto, centrado en el hueco de la reticula
   (padding .75rem + columna 3.5rem + medio gap). Arriba y abajo se queda a
   .4rem de los filetes de fila, para que no se toquen. */
.agenda__item::before {
  content: ""; position: absolute;
  top: .4rem; bottom: .4rem; left: calc(.75rem + 3.5rem + .625rem);
  width: 1px; background: var(--hair);
}
.agenda__item--pausa { background: rgba(197, 225, 135, .18); }
/* Sobre el velo verde el verde profundo baja de 4,5:1: la hora va en grafito */
.agenda__item--pausa .agenda__hora { color: var(--grafito); }
.agenda__hora {
  font-family: var(--font-titulo); font-weight: 500;
  font-size: .8rem; letter-spacing: .02em; line-height: 1.45;
  color: var(--verde-profundo); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agenda__tipo {
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--verde-profundo); margin-bottom: .15rem;
}
.agenda__titulo {
  font-family: var(--font-titulo); font-weight: 500;
  font-size: .92rem; line-height: 1.4; letter-spacing: 0;
  color: var(--grafito); margin: 0;
}
.agenda__mas { margin-top: clamp(1.5rem, 3vw, 2rem); text-align: center; }

@media (max-width: 760px) {
  /* En movil la hora pasa encima del acto: dos columnas no caben */
  .agenda__item { grid-template-columns: 1fr; gap: .15rem; padding: .65rem .5rem; }
  .agenda__item::before { display: none; }
}

/* 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, #actualidad, #presentacion, #ejes, #organizacion, #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 a la izquierda de cada logo, como un separador de tabla.
   Tambien el primero de cada fila: asi todos los logos quedan enmarcados
   igual y la fila arranca con su propio filete. */
.gracias__bloque { 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); }
/* Redes sociales: solo icono (el nombre va en aria-label y title), en fila
   y con el mismo color y hover que el resto de enlaces del pie. */
.cierre__redes { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.1rem; }
.cierre__redes a { display: inline-flex; margin: 0; }
.cierre__redes svg { display: block; }

@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; }
/* Fecha y lugar sobre verde: en verde no se veria, pasa a grafito con el
   filete superior en grafito suave (el claro esta pensado para fondo oscuro) */
.cintillo--verde .cintillo__cuando { color: var(--grafito); border-top-color: rgba(50, 41, 47, .22); }

/* Fondo de la portada de la web del I Foro (2025): la imagen bg.jpg de
   aquella web (degradado verde-turquesa con formas geometricas) y el mismo
   velo verde-azul que llevaba encima. Solo en la franja bajo la cabecera de
   edicion-2025.html (la banda del video lleva ahora el texto encima, sobre
   grafito). Va despues de .cintillo--verde para ganarle el fondo. */
.fondo-foro2025 {
  background:
    linear-gradient(to right, rgba(16, 185, 129, .7), rgba(13, 148, 136, .6), rgba(37, 99, 235, .5)),
    url("images/fondo-foro2025.jpg") center / cover no-repeat;
}

.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); }
/* Programa 2026: los cargos ocupan todo el ancho en lugar de partirse en dos lineas. */
.jornada--ancha .acto__quien { max-width: none; }
/* Programa 2026 (es y zh): lo pendiente (por anunciar, por confirmar) en
   cursiva y con mayusculas y minusculas normales, no en versalitas. */
.jornada--ancha .porconfirmar { font-style: italic; text-transform: none; letter-spacing: .02em; font-size: .85rem; }
/* Selector de idioma del programa 2026: dos paginas hermanas
   (programa-2026 y programa-2026-zh). Solo cambia el programa; menu y
   pie siguen en espanol. */
.idiomas { display: flex; justify-content: flex-end; gap: .4rem; margin-bottom: 1.5rem; }
.idiomas a {
  font-family: var(--font-titulo); font-weight: 500; font-size: .8rem; letter-spacing: .08em;
  padding: .45rem 1rem; border: 1px solid var(--hair); border-radius: var(--radio);
  color: var(--grafito-70); text-decoration: none;
  transition: border-color .25s var(--transicion), color .25s var(--transicion);
}
.idiomas a:hover { border-color: var(--grafito); color: var(--grafito); }
.idiomas a[aria-current="page"] { background: var(--grafito); border-color: var(--grafito); color: var(--bruma); }
/* Boton "Ver ponentes" al pie del programa 2026, alineado a la izquierda */
.programa__pie { margin-top: clamp(2rem, 4vw, 3rem); }
.programa__pie [lang|="zh"] { font-family: "Jost", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; }
.idiomas a:lang(zh) { font-family: "Jost", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; }
/* Version china: Jost y Mulish no tienen CJK; los nombres latinos siguen
   en la fuente de marca y los ideogramas caen en la fuente china. */
.cinta__texto:lang(zh), .cinta__texto:lang(zh) *, .jornada:lang(zh) {
  font-family: "Mulish", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}
.cinta__texto:lang(zh) .cinta__titulo, .cinta__texto:lang(zh) .antetitulo,
.jornada:lang(zh) h3, .jornada:lang(zh) .acto__preside, .jornada:lang(zh) .porconfirmar {
  font-family: "Jost", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}
.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 aviso-legal.html y politica-privacidad.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;
  /* Las fotos reales no son cuadradas: en las verticales el recorte parte
     de algo por encima del centro para no cortar la cabeza. */
  object-position: 50% 20%;
  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);
}
/* Cargo y empresa bajo el nombre: cargo en gris, empresa en verde
   profundo y versalitas, para que se distingan de un vistazo. */
.ponente__cargo {
  display: block; margin-top: .2rem;
  font-size: .8rem; line-height: 1.35; color: var(--grafito-70);
}
.ponente__empresa {
  display: block; margin-top: .15rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--verde-profundo);
}

/* Presentadora del evento, al final del muro: alineada a la izquierda,
   con rotulo al estilo del antetitulo (filete corto delante). Como las
   demas fichas, al pulsarla abre el popup de biografia. */
.presenta {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  display: flex; flex-direction: column; align-items: flex-start;
}
.presenta__rotulo {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-titulo); font-weight: 500;
  font-size: .76rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--verde-profundo);
}
.presenta__rotulo::before { content: ""; width: 48px; height: 1px; background: currentColor; flex: none; }
/* Ficha de la presentadora: como las del muro (foto y, debajo, nombre y
   cargo centrados con la misma fuente y tamano), dentro de una tarjeta
   blanca con filete verde y anillo verde en la foto para destacarla. */
.ponente--presenta {
  width: auto; max-width: 300px;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2.25rem);
  background: var(--blanco); border-top: 3px solid var(--verde); border-radius: var(--radio);
  box-shadow: 0 18px 40px -24px rgba(50, 41, 47, .35);
}
.ponente--presenta .ponente__foto { box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--verde); }
.ponente--presenta .ponente__texto { display: block; }
/* Ficha + boton "Ver programa completo" en la misma fila, centrados en
   vertical; si no caben (movil), el boton baja debajo de la ficha. */
.presenta__fila { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem clamp(2rem, 5vw, 4rem); }
/* Popup de ponente: <dialog> nativo convertido en ficha compacta que
   app.js coloca encima de la foto pulsada (top/left en linea, por eso
   aqui se anulan el inset y el margen auto que lo centrarian). Tarjeta
   blanca con filete verde arriba y sombra suave; cabecera con retrato
   redondo en color, nombre, cargo y empresa; bio debajo de un filete. */
.ponente-dialog {
  position: fixed; inset: auto; margin: 0;
  width: min(380px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  border: 0; border-top: 3px solid var(--verde); border-radius: var(--radio); padding: 0;
  background: var(--blanco); color: var(--grafito);
  box-shadow: 0 28px 56px -20px rgba(50, 41, 47, .5), 0 2px 8px rgba(50, 41, 47, .08);
}
.ponente-dialog[open] { animation: ficha-abre .35s var(--transicion); }
@keyframes ficha-abre {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}
.ponente-dialog::backdrop { background: rgba(50, 41, 47, .3); }
.ponente-dialog__marco { position: relative; margin: 0; padding: 1.5rem 1.5rem 1.6rem; }
.ponente-dialog__cerrar {
  position: absolute; top: .6rem; right: .6rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--grafito-45);
  border: 0; cursor: pointer;
  transition: background .3s var(--transicion), color .3s var(--transicion);
}
.ponente-dialog__cerrar:hover, .ponente-dialog__cerrar:focus-visible { background: var(--grafito); color: var(--bruma); }
.ponente-dialog__cerrar svg { width: 16px; height: 16px; }
.ponente-dialog__cabecera {
  display: grid; grid-template-columns: 4.5rem 1fr; align-items: center;
  gap: 1rem; padding-right: 1.5rem;
}
.ponente-dialog__foto {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  object-fit: cover; object-position: 50% 20%; display: block;
  box-shadow: 0 0 0 3px var(--verde);
}
.ponente-dialog__nombre {
  font-family: var(--font-titulo); font-weight: 700;
  font-size: 1.15rem; line-height: 1.2; letter-spacing: -.015em;
}
.ponente-dialog__cargo { margin-top: .2rem; font-size: .85rem; line-height: 1.35; color: var(--grafito-70); }
.ponente-dialog__empresa {
  margin-top: .15rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--verde-profundo);
}
.ponente-dialog__bio {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--hair);
  color: var(--grafito-70); font-size: .9rem; line-height: 1.6;
  text-align: justify; hyphens: none; -webkit-hyphens: none;
}
.ponente-dialog__bio p + p { margin-top: .75rem; }
@media (prefers-reduced-motion: reduce) {
  .ponente-dialog[open] { animation: 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; }
}

/* --- Secciones de index mas juntas -----------------------------------------
   De "El Foro" a Contacto: menos alto arriba y abajo que el resto del sitio
   (antes hasta 5.5rem por lado, ahora hasta 3.5rem). Va al final del archivo
   para ganar a las reglas de padding-block de cada seccion. Acotado con
   .con-carril (el body de index) porque contacto.html tambien tiene una
   seccion #contacto y no debe cambiar. */
.con-carril #foro, .con-carril #edicion-2026, .con-carril #edicion-anterior,
.con-carril #actualidad, .con-carril #contacto {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
/* Y menos hueco entre el titulo de cada seccion y su contenido (antes
   hasta 5rem, el margen general de .rotulo). En El Foro esto tambien acerca
   la marquesina, que no lleva margen propio. */
.con-carril #foro .rotulo, .con-carril #edicion-2026 .rotulo,
.con-carril #edicion-anterior .rotulo, .con-carril #actualidad .rotulo,
.con-carril #contacto .rotulo {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* --- Titulos de area en edicion-2026.html -----------------------------------
   Mismo cuerpo que los subtitulos de Entidades participantes ("Organizan",
   ".organiza h2") en vez de var(--t1).
   El bloque de la pregunta (.pregunta__titulo) no es un titulo de area y
   conserva su tamano. */
#presentacion .rotulo h2,
#ejes .rotulo h2,
#programa .rotulo h2,
#organizacion .rotulo h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -.015em;
}

/* Secciones de edicion-2026.html mas juntas: menos alto arriba y abajo que
   antes (hasta 5.5rem por lado, ahora hasta 3.5rem), como en index. Va al
   final para ganar a las reglas de padding-block de cada seccion. */
#presentacion, #ejes, #programa, #organizacion {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
/* Y menos hueco entre el titulo de cada seccion y su contenido (antes
   hasta 5rem, el margen general de .rotulo). */
#presentacion .rotulo, #ejes .rotulo, #programa .rotulo, #organizacion .rotulo {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* Lo mismo en edicion-2025.html (Galeria, Prensa y Patrocinadores): menos
   alto entre secciones y entre cada titulo y su contenido. La galeria
   pierde su margen propio, que se sumaba al del rotulo. */
#primera-edicion, #prensa, #agradecimientos {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
#primera-edicion .rotulo, #prensa .rotulo, #agradecimientos .rotulo {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
#primera-edicion .galeria { margin-top: 0; }

/* Titulos de seccion mas pequenos tambien en edicion-2025.html e index.html,
   al mismo cuerpo que los de edicion-2026.html ("Organizan"). En index se
   acota con .con-carril porque contacto.html tambien tiene #contacto. La
   pregunta de index (.pregunta__titulo) es un bloque de diseno, no un
   titulo de seccion, y conserva su tamano. */
#primera-edicion .rotulo h2,
#prensa .rotulo h2,
#agradecimientos .rotulo h2,
.gracias__titulo,
.con-carril .ed26__titulo,
.con-carril #actualidad .rotulo h2,
.con-carril #contacto .rotulo h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -.015em;
}

/* Secciones de el-foro.html mas juntas, como en index, edicion2026 y
   edicion2025: hasta 3.5rem arriba y abajo (la presentacion llevaba el
   .bloque general, hasta 9.5rem). Mision y Vision conserva el padding
   superior a 0: la marquesina va pegada a su borde de arriba. */
#sobre-el-foro, #nuestras-ediciones { padding-block: clamp(2rem, 4vw, 3.5rem); }
#mision-vision { padding-bottom: clamp(2rem, 4vw, 3.5rem); }

/* Paginas legales (aviso-legal.html y politica-privacidad.html): el texto
   del documento con el mismo aire arriba y abajo que el resto de secciones
   del sitio (hasta 3.5rem), no el del .bloque general (hasta 9.5rem). */
#documento { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* Pagina de ponentes: la rejilla con el mismo aire arriba y abajo que el
   resto de secciones (hasta 3.5rem), no el del .bloque general. */
#ponentes { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* --- Banner de cookies (cookies.js) -------------------------------------
   Formato de tarjeta flotante abajo a la izquierda (referencia: proppilot.ai)
   con los colores y tipografias de la marca. Analitica desactivada por
   defecto; "Rechazar" y "Aceptar todas" con el mismo peso visual, como pide
   la AEPD; "Guardar seleccion" en linea. En movil ocupa todo el ancho.
   ------------------------------------------------------------------------- */
.cookies {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 1000;
  width: calc(100% - 2rem); max-width: 390px;
  animation: cookies-entra .4s var(--transicion);
}
@keyframes cookies-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cookies__caja {
  background: var(--blanco); color: var(--grafito);
  border: 1px solid var(--hair); border-radius: 12px;
  padding: 1.1rem 1.25rem 1rem;
  box-shadow: 0 10px 34px rgba(50, 41, 47, .22);
}
.cookies__titulo {
  font-family: var(--font-titulo); font-weight: 600; font-size: 1rem;
  letter-spacing: -.005em; line-height: 1.3; margin: 0 0 .4rem; outline: none;
}
.cookies__texto { font-size: .8rem; line-height: 1.5; color: var(--grafito-70); margin: 0 0 .7rem; }
.cookies__categorias { border-top: 1px solid var(--hair); margin-bottom: .8rem; }
.cookies__categoria { padding: .55rem 0; border-bottom: 1px solid var(--hair); }
.cookies__categoria:last-child { border-bottom: 0; }
.cookies__fila { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cookies__nombre { font-family: var(--font-titulo); font-weight: 600; font-size: .85rem; cursor: default; }
label.cookies__nombre { cursor: pointer; }
.cookies__siempre {
  font-size: .68rem; font-weight: 600; white-space: nowrap;
  color: var(--verde-profundo); background: rgba(197, 225, 135, .35);
  padding: .15rem .55rem; border-radius: 999px;
}
.cookies__desc { font-size: .74rem; line-height: 1.4; color: var(--grafito-70); margin: .2rem 0 0; }

/* Interruptor: el input real queda encima (invisible), asi funciona con
   raton, tactil y teclado, y el lector de pantalla lo anuncia como switch. */
.cookies__interruptor { position: relative; flex: none; width: 40px; height: 22px; }
.cookies__interruptor input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.cookies__interruptor span {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--grafito-45); transition: background .25s;
}
.cookies__interruptor span::before {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--blanco);
  transition: transform .25s var(--transicion);
}
.cookies__interruptor input:checked + span { background: var(--verde-profundo); }
.cookies__interruptor input:checked + span::before { transform: translateX(18px); }
.cookies__interruptor input:focus-visible + span { outline: 2px solid var(--grafito); outline-offset: 2px; }

.cookies__botones { display: flex; gap: .45rem; }
.cookies__boton {
  flex: 1; min-height: 44px; padding: .55rem .6rem;
  font-family: var(--font-titulo); font-weight: 600; font-size: .8rem;
  border: 1px solid var(--grafito); border-radius: 6px;
  background: var(--grafito); color: var(--bruma);
  cursor: pointer; transition: background .2s, color .2s;
}
.cookies__boton:hover { background: var(--verde-profundo); border-color: var(--verde-profundo); }
.cookies__boton--linea { background: transparent; color: var(--grafito); border-color: var(--grafito-45); }
.cookies__boton--linea:hover { background: rgba(50, 41, 47, .06); color: var(--grafito); border-color: var(--grafito); }
/* "Rechazar" en blanco y "Aceptar todas" en negro, pero con el mismo
   tamano, la misma posicion y un borde grafito pleno (no el gris claro de
   "Guardar seleccion"): rechazar sigue siendo igual de visible y facil
   que aceptar, como pide la guia de cookies de la AEPD. */
.cookies__boton--blanco { background: var(--blanco); color: var(--grafito); border-color: var(--grafito); }
.cookies__boton--blanco:hover { background: var(--grafito); color: var(--bruma); border-color: var(--grafito); }
.cookies__boton:focus-visible { outline: 2px solid var(--verde-profundo); outline-offset: 2px; }
.cookies__enlace { font-size: .7rem; color: var(--grafito-70); margin: .6rem 0 0; }
.cookies__enlace a { color: var(--verde-profundo); text-decoration: underline; }

@media (max-width: 560px) {
  .cookies { left: 0; bottom: 0; width: 100%; max-width: none; }
  .cookies__caja { border-radius: 12px 12px 0 0; padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom)); }
  .cookies__botones { flex-wrap: wrap; }
  .cookies__boton { flex: 1 1 45%; }
  .cookies__boton--linea { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }
@media print { .cookies { display: none !important; } }

/* "Configurar cookies" del pie: un boton con aspecto de enlace. */
.cierre__cookies {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px;
  transition: color .3s var(--transicion);
}
.cierre__cookies:hover, .cierre__cookies:focus-visible { color: var(--verde); }