/* =========================================================================
   COMPATIBILIDAD CON WORDPRESS (va al principio a proposito)
   Twenty Twenty-Five da estilo a los titulos con selectores ":root :where(h1)",
   que pesan mas que los "h1 { }" de brand.css. Se repiten aqui los valores de
   la marca con ese mismo peso: ganan al tema (porque este CSS carga despues)
   y siguen perdiendo frente a las reglas con clase de mas abajo.
   ========================================================================= */
:root :where(h1, h2, h3, h4, .titular) {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-transform: none;
  text-wrap: balance;
}
:root :where(h1) { font-size: clamp(2.5rem, 6vw, 4.5rem); }
:root :where(h2) { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
:root :where(h3) { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
:root :where(h4) { font-size: 1em; }

/* =========================================================================
   II FORO CHINA-ESPANA DE ENERGIA VERDE - SISTEMA DE DISENO
   Derivado de "Brandguidelines_II Foro_2026"
   Claim: Conexion para un futuro mejor
   ========================================================================= */

/* --- Tipografia ---------------------------------------------------------
   Manual: Futura Bold (titulos) - Museo Sans (cuerpo).
   Ambas son comerciales. Sustitutas libres equivalentes:
     Futura Bold  ->  Jost   (mismo esqueleto geometrico, Renner-style)
     Museo Sans   ->  Mulish (sans humanista de baja modulacion)

   Las fuentes se sirven desde ./fonts (SIN dependencia de Google Fonts):
   son las variable fonts oficiales, subsets latin y latin-ext, con los
   mismos unicode-range que publica Google. Los caracteres chinos del
   sitio no estan en estas familias y caen al tipo CJK del sistema, que
   es el comportamiento correcto.

   Para usar las originales con licencia, anade sus @font-face aqui y
   anteponlas en --font-titulo / --font-cuerpo.
   Licencia de Jost y Mulish: SIL Open Font License 1.1.
------------------------------------------------------------------------- */

/* Jost - variable 400..700 */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/wp-content/uploads/foro/fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/wp-content/uploads/foro/fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mulish - variable 300..700 */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/wp-content/uploads/foro/fonts/mulish-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/wp-content/uploads/foro/fonts/mulish-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Paleta oficial --- */
  --verde:   #C5E187;   /* Verde energia - naturaleza, sostenibilidad, renovacion */
  --grafito: #32292F;   /* Grafito - solidez, elegancia, caracter institucional   */
  --bruma:   #F5F5F5;   /* Bruma - claridad, equilibrio, neutralidad              */

  /* --- Derivados funcionales (no son marca: existen por accesibilidad) --- */
  --verde-profundo: #56761E;  /* unico verde con contraste AA sobre fondo claro
                                 (4,81:1 sobre bruma / 5,24:1 sobre blanco) */
  --grafito-70: rgba(50, 41, 47, .70);
  --grafito-45: rgba(50, 41, 47, .45);
  --grafito-12: rgba(50, 41, 47, .12);
  --blanco:     #FFFFFF;

  /* --- Tipografia --- */
  --font-titulo: "Jost", "Futura", "Century Gothic", sans-serif;
  --font-cuerpo: "Mulish", "Museo Sans", "Segoe UI", system-ui, sans-serif;

  /* --- Metrica --- */
  --medida: 68ch;          /* ancho comodo de lectura */
  --ancho: 1180px;
  --radio: 2px;            /* la marca es geometrica y sobria: esquinas casi vivas */
  --x: 1.5rem;             /* medida X del area de seguridad del simbolo */
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-cuerpo);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--grafito);
  background: var(--bruma);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

/* --- Titulos: Futura/Jost ---------------------------------------------- */
h1, h2, h3, h4, .titular {
  font-family: var(--font-titulo);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }

/* Rotulos de sistema: caja alta muy espaciada, como en el manual */
.kicker {
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grafito-70);
}
.kicker--verde { color: var(--verde); }

.claim {
  font-family: var(--font-titulo);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .8rem;
}

/* --- Estructura -------------------------------------------------------- */
.contenedor { width: min(100% - 3rem, var(--ancho)); margin-inline: auto; }
.seccion { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.seccion--oscura { background: var(--grafito); color: var(--bruma); }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--bruma); }
.seccion--verde { background: var(--verde); color: var(--grafito); }
.seccion--blanca { background: var(--blanco); }

.prosa > * + * { margin-top: 1.25rem; }
.prosa p { max-width: var(--medida); color: var(--grafito-70); }
.seccion--oscura .prosa p { color: rgba(245, 245, 245, .78); }

/* Filete verde: marca jerarquia sin introducir mas color */
.filete { display: block; width: 68px; height: 5px; background: var(--verde); margin-bottom: 1.75rem; }
.seccion--verde .filete { background: var(--grafito); }

.cabecera-seccion { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* --- Rejillas ---------------------------------------------------------- */
.rejilla { display: grid; gap: 1.5rem; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* --- Logotipo ----------------------------------------------------------
   Regla del manual: verde sobre oscuro - grafito sobre claro - bruma sobre verde.
   El simbolo hereda currentColor, asi que basta con fijar el color del bloque.
------------------------------------------------------------------------- */
.logo { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit; }
.logo__simbolo { width: 2.6rem; flex: none; }
.logo__texto { font-family: var(--font-titulo); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; font-size: 1rem; }
.logo__texto span { display: block; font-weight: 400; font-size: .72rem; letter-spacing: .08em; opacity: .7; }

/* Area de seguridad: 1X alrededor de todo el perimetro (manual, p. 4) */
.logo--aislado { padding: var(--x); }

/* --- Cabecera ---------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 245, 245, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--grafito-12);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .9rem 0; }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  font-size: .9rem; color: var(--grafito); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color .2s;
}
.nav a:hover, .nav a:focus-visible { border-bottom-color: var(--verde-profundo); }

/* --- Botones -----------------------------------------------------------
   El verde es muy claro: solo admite texto grafito encima, nunca blanco.
------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-titulo); font-weight: 600; font-size: .9rem;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: .85rem 1.6rem; border-radius: var(--radio);
  background: var(--verde); color: var(--grafito);
  border: 2px solid var(--verde); transition: background .2s, color .2s;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--verde); }
.btn--linea { background: transparent; border-color: currentColor; color: inherit; }
.btn--linea:hover, .btn--linea:focus-visible { background: var(--verde); color: var(--grafito); border-color: var(--verde); }

/* --- Tarjetas ---------------------------------------------------------- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--grafito-12);
  border-radius: var(--radio);
  padding: 2rem;
  height: 100%;
}
.seccion--oscura .tarjeta { background: rgba(245, 245, 245, .05); border-color: rgba(245, 245, 245, .14); }

/* --- Cifra destacada (Futura da voz a las cifras, manual p. 6) ---------- */
.cifra { font-family: var(--font-titulo); font-weight: 700; font-size: clamp(2.75rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -.03em; }
.cifra--verde { color: var(--verde); }

/* --- Etiqueta "por confirmar" ------------------------------------------ */
.pendiente {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: var(--radio);
  border: 1px dashed var(--grafito-45); color: var(--grafito-70);
}
.seccion--oscura .pendiente, .hero .pendiente { border-color: rgba(197, 225, 135, .55); color: var(--verde); }

/* --- Listas con bullet de marca ---------------------------------------- */
.lista { list-style: none; padding: 0; }
.lista li { position: relative; padding-left: 1.75rem; margin-bottom: .85rem; }
.lista li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--verde-profundo);
}
.seccion--oscura .lista li::before { background: var(--verde); }

/* --- Foco visible ------------------------------------------------------ */
:focus-visible { outline: 3px solid var(--verde-profundo); outline-offset: 3px; }
.seccion--oscura :focus-visible, .hero :focus-visible { outline-color: var(--verde); }

/* --- Pie --------------------------------------------------------------- */
.pie { background: var(--grafito); color: rgba(245, 245, 245, .72); padding: 4.5rem 0 2.5rem; }
.pie h4 { font-family: var(--font-titulo); font-weight: 600; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--verde); margin-bottom: 1.1rem; }
.pie a { color: rgba(245, 245, 245, .72); text-decoration: none; display: block; margin-bottom: .45rem; font-size: .92rem; }
.pie a:hover { color: var(--verde); }
.pie__base { border-top: 1px solid rgba(245, 245, 245, .14); margin-top: 3rem; padding-top: 1.75rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  .nav { display: none; }
  .seccion { padding: 4rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* =========================================================================
   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); }
/* 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 programa2026.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 (edicion2026.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 (elforo.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); }
}
.cinta--animacion .cinta__velo {
  background: linear-gradient(to top, rgba(50, 41, 47, .7) 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 elforo.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 (elforo.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 (elforo.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 elforo.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 edicion2025.html. */
.organiza__logo[src$="embajada-china-logo.png"] { height: 55.13px; }
.organiza__logo[src$="logo_2025.png"] { height: 42.99px; }
/* Varios logotipos de patrocinio: igualados por ALTURA, no por ancho (los
   PNG ya vienen recortados a su contenido con proporciones muy distintas). */
/* Misma rejilla de 4 columnas que la segunda fila de Patrocinadores en
   edicion2025.html: reparte los logos a todo el ancho en vez de agruparlos
   a la izquierda. */
.organiza__logos {
  display: grid; grid-template-columns: repeat(3, auto);
  align-items: center; justify-items: start;
  column-gap: 2.5rem;
  width: max-content; max-width: 100%;
}
@media (max-width: 760px) {
  .organiza__logos { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; width: 100%; }
}
.organiza__logos img { height: 50px; width: auto; max-width: 100%; object-fit: contain; }
/* Mismo tamano que sus equivalentes en edicion2025.html. */
.organiza__logos img[src$="sponsor-chint.png"] { height: 25.2px; }
.organiza__logos img[src$="sponsor-soluciones-financieras.png"] { height: 38.5px; }
.organiza__logos img[src$="sponsor-inversion.png"] { height: 26px; }

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

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

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

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

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

/* Ejes en tarjetas (edicion2026.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); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Sin sangria a la izquierda: estas tres areas ya no llevan numeral ni
   celda vacia de alineacion, asi que el rotulo y el texto pasan a una
   sola columna, igual que el resto de secciones "a todo lo ancho". */
#primera-edicion .rotulo,
#prensa .rotulo,
#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 { 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 (edicion2026.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); }

@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
   edicion2025.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("/wp-content/uploads/foro/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); }
.acto__preside {
  font-family: var(--font-titulo); font-weight: 500;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grafito-45); margin-bottom: .6rem;
}
.panel { list-style: none; padding: 0; margin-top: .9rem; border-left: 1px solid var(--hair); }
.panel li { padding: .28rem 0 .28rem 1.25rem; font-size: .875rem; line-height: 1.55; color: var(--grafito-70); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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; 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;
}
@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 edicion2026.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 edicion2026.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 edicion2025.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 edicion2025.html e index.html,
   al mismo cuerpo que los de edicion2026.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 elforo.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 (avisolegal.html y politicaprivacidad.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); }


/* =========================================================================
   ADAPTACION A WORDPRESS (Twenty Twenty-Five)
   Solo actua en las paginas del foro: el snippet PHP anade la clase
   .foro al <body> cuando el contenido de la pagina lleva <main class="foro-main">.
   ========================================================================= */

/* El tema pone su fuente, color y fondo en body: se recuperan los de la marca */
body.foro {
  font-family: var(--font-cuerpo);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--grafito);
  background: var(--bruma);
  margin: 0;
  padding: 0;
}

/* Si la pagina usa una plantilla con cabecera/pie del tema, se ocultan:
   la cabecera y el pie del foro los imprime el snippet PHP. Con la
   plantilla "Foro en blanco" estas reglas no tienen nada que ocultar. */
body.foro .wp-site-blocks > header.wp-block-template-part,
body.foro .wp-site-blocks > footer.wp-block-template-part,
body.foro .wp-site-blocks > .wp-block-template-part:has(> header),
body.foro .wp-site-blocks > .wp-block-template-part:has(> footer),
body.foro .wp-site-blocks .wp-block-post-title,
body.foro .wp-site-blocks .wp-block-post-featured-image,
body.foro .wp-site-blocks .wp-block-comments,
body.foro .wp-site-blocks .wp-block-post-comments-form {
  display: none !important;
}

/* El tema limita el ancho del contenido (layout "constrained") y anade
   rellenos y separaciones entre bloques: el diseno del foro es a sangre,
   asi que se anulan en los contenedores que envuelven el contenido. */
body.foro .wp-site-blocks {
  padding: 0 !important;
}
body.foro .wp-site-blocks > *,
body.foro .wp-site-blocks main.wp-block-group,
body.foro .wp-site-blocks .wp-block-group:has(.foro-main),
body.foro .wp-block-post-content,
body.foro .wp-block-post-content > *,
body.foro .entry-content,
body.foro .entry-content > * {
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.foro .wp-site-blocks main.wp-block-group,
body.foro .wp-block-post-content,
body.foro .wp-site-blocks .wp-block-group:has(.foro-main) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.foro .foro-main { display: block; }

/* Barra de administracion de WordPress (solo con sesion iniciada): la
   cabecera fija y la barra de progreso se colocan debajo. */
body.admin-bar.foro .tope,
body.admin-bar.foro .progreso { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar.foro .tope,
  body.admin-bar.foro .progreso { top: 46px; }
}
/* --- Contact Form 7 con el aspecto del formulario original ------------- */
.wpcf7 form.contacto .hidden-fields-container,
.wpcf7 form.contacto > div[style*="display: none"] { display: none !important; }
.wpcf7 form.contacto .wpcf7-form-control-wrap { display: block; }
.wpcf7 form.contacto .campo input,
.wpcf7 form.contacto .campo textarea,
.wpcf7 form.contacto .campo select { width: 100%; }
.wpcf7 form.contacto .consiento .wpcf7-form-control-wrap,
.wpcf7 form.contacto .consiento .wpcf7-list-item { display: block; margin: 0; }
.wpcf7 form.contacto .wpcf7-not-valid-tip {
  font-size: .85rem; margin-top: .35rem; color: #B3261E;
}
.wpcf7 form.contacto .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: .9rem 1.1rem !important;
  border: 1px solid var(--borde-campo) !important;
  border-radius: var(--radio);
  font-size: .95rem;
}
.wpcf7 form.contacto.sent .wpcf7-response-output { border-color: var(--verde-profundo) !important; }
.wpcf7 form.contacto.invalid .wpcf7-response-output,
.wpcf7 form.contacto.failed .wpcf7-response-output,
.wpcf7 form.contacto.spam .wpcf7-response-output { border-color: #B3261E !important; }
.wpcf7 form.contacto .wpcf7-spinner { margin: 0; }
.wpcf7 form.contacto.init .wpcf7-response-output,
.wpcf7 form.contacto .wpcf7-response-output:empty { display: none; }