/* Side-event SW26 · «Océano Abierto 2026» · base común de las tres variantes
   Paleta de los anillos, sin ningún otro tono: Mar profundo #0B2330 · Loch #1E4A5C · Tidal #3B7389 · Shallow #8FB6BF · Papel #F4F1EA.
   Tipografía: CRU Beta Condensed (un solo peso, 400) en titulares; Onest (variable) en el resto.
   Solo se animan transform y opacity. Sin JavaScript todo el texto y el botón son visibles. */

@font-face { font-family: "CRU Beta Condensed"; src: url("fonts/CRU_Beta-Condensed.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("fonts/Onest-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --deep: #0B2330; --loch: #1E4A5C; --tidal: #3B7389; --shallow: #8FB6BF; --paper: #F4F1EA;
  --display: "CRU Beta Condensed", "Oswald", "Arial Narrow", sans-serif;
  --text: "Onest", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1224px;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--text); font-size: 18px; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; line-height: .92; letter-spacing: 0; padding-left: 3px; /* los glifos de CRU sobresalen 1–2 px por la izquierda */ }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Foco de teclado visible, con diseño propio (doble anillo: color del fondo + color del texto) */
:focus { outline: none; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.on-dark :focus-visible { outline-color: var(--paper); }
.on-light :focus-visible { outline-color: var(--deep); }

/* ───────── Marco compartido de la sección (reproducción esquemática del nav y el pie de /conference2026/) ─────────
   No es diseño de la página: imita las clases cf-nav / cf-foot del sitio para ver la variante en su contexto. */
/* Solo el logotipo de la conferencia (lockup) arriba a la izquierda, enlazado a /conference2026, en lugar de la barra de
   navegación del sitio (dirección, 2026-10-12). Letras negras y fondo transparente, con el círculo intacto; sobre las bandas
   oscuras comun.js cambia a la versión blanca (data-logo-claro / data-logo-oscuro), para que no desaparezca. */
.se-volver { position: fixed; top: 14px; left: var(--gutter); z-index: 50; display: block; line-height: 0; }   /* comun.js lo alinea con el borde izquierdo del texto de la cabecera (dirección, 2026-10-12) */
.se-volver img { height: 27px; width: auto; display: block; }
.se-volver:hover { opacity: .8; }
/* Móvil (dirección, 2026-10-12): el lockup a 33 px (se dobló a 44 y luego se redujo un 25 %) y el nombre del antetítulo en negrita */
.se-nombre { font-weight: inherit; }
@media (max-width: 720px) { .se-volver { top: 10px; left: var(--gutter); } .se-volver img { height: 33px; } .se-nombre { font-weight: 700; } }
.se-frame-foot { background: #08171f; color: #8fa1a4; padding: 56px 0 36px; font-family: "Archivo Narrow", "Arial Narrow", var(--text); }
.se-frame-foot .top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid rgba(143, 161, 164, .14); }
.se-frame-foot img { height: 48px; width: auto; margin-bottom: 16px; }
.se-frame-foot p { max-width: 42ch; font-size: 15px; line-height: 1.4; }
.se-frame-foot .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.se-frame-foot .cols a { display: block; color: #cad2d1; font-size: 15px; text-decoration: none; margin-bottom: 6px; }
.se-frame-foot .bot { display: flex; gap: 16px; padding-top: 24px; font: 11px/1 ui-monospace, "IBM Plex Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 720px) { .se-frame-foot .top { grid-template-columns: 1fr; gap: 28px; } .se-frame-foot .cols { grid-template-columns: 1fr 1fr; } }

/* ───────── Botón de inscripción: la acción principal. Rectángulo, no píldora; con icono de salida a formulario externo. ───────── */
.se-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 26px 18px 28px; font: 600 17px/1 var(--text); text-decoration: none; border-radius: 2px; position: relative; isolation: isolate; cursor: pointer; border: 0; }
.se-cta .ico { width: 18px; height: 18px; flex: none; }
.se-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .25s var(--ease-out); z-index: -1; }
.se-cta { transition: transform .25s var(--ease-out); }
.se-cta:hover { transform: translateY(-2px); }
.se-cta:hover::after { opacity: .12; }
.se-cta:active { transform: translateY(0); }
.se-cta-wrap { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 36ch; }
.se-aviso { font-size: 15px; line-height: 1.4; margin: 0; }
/* Estado de aforo completo: sustituye al botón (lo gobierna body[data-aforo="completo"]) */
.se-completo { display: none; padding: 16px 20px; border: 2px solid currentColor; border-radius: 2px; max-width: 34ch; }
.se-completo strong { display: block; font: 400 28px/1 var(--display); margin-bottom: 6px; }
.se-completo p { margin: 0; font-size: 15px; }
body[data-aforo="completo"] .se-cta, body[data-aforo="completo"] .se-aviso { display: none; }
body[data-aforo="completo"] .se-completo { display: block; }
.se-estado-demo { position: fixed; left: 12px; bottom: 12px; z-index: 60; font: 12px/1 var(--text); color: #cad2d1; background: rgba(8, 23, 31, .85); padding: 8px 10px; border-radius: 2px; text-decoration: none; }
.se-estado-demo:hover { color: #fff; }

/* ───────── Control de pausa de los anillos (WCAG 2.2.2). Por indicación de dirección (2026-10-12) no está a la vista:
   sigue en el DOM y aparece solo al recibir el foco del teclado, para conservar el mecanismo de pausa ───────── */
.se-pausa { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; background: transparent; color: inherit; font: 500 13px/1 var(--text); cursor: pointer; }
.se-pausa:focus-visible { position: relative; z-index: 2; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1.5px solid currentColor; border-radius: 2px; }
.on-light .se-pausa:focus-visible { background: rgba(244, 241, 234, .9); }
.on-dark .se-pausa:focus-visible { background: rgba(11, 35, 48, .85); }
.se-pausa .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.se-pausa[aria-pressed="true"] .dot { border-radius: 1px; }
.se-pausa:hover { opacity: .8; }

/* ───────── Anillos: contenedor a sangre; el módulo pinta dentro ───────── */
.se-anillos { position: absolute; inset: 0; pointer-events: none; }
.se-anillos > svg { width: 100%; height: 100%; }

/* ───────── Movimiento reducido: nada se mueve; todo visible ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Logotipos de entidad cuadrados o verticales (relación ancho/alto < 1,6): caja más alta que la de los apaisados,
   para que el emblema y su texto se lean. Lo asigna el generador (clase junto a .va-ent-logo / .vb-ent-logo / .vc-ent-logo). */
.va-ent-logo.se-logo-alto, .vb-ent-logo.se-logo-alto, .vc-ent-logo.se-logo-alto { height: 100px; }
.va-ent-logo img, .vb-ent-logo img, .vc-ent-logo img { display: block; }

/* Leyenda «(Programa preliminar)» bajo el título del programa (dirección, 2026-10-12), en lugar de marcar cada persona */
.se-leyenda { font: 500 15px/1.3 var(--text); opacity: .8; margin: -.4em 0 1.2em; }

/* Etiqueta del formato («Mesa redonda») junto a la hora, en Onest; el título de la mesa queda debajo en CRU Beta (dirección, 2026-10-12) */
.se-tipo { font: 600 14px/1.2 var(--text); letter-spacing: .02em; margin: 0 0 8px; opacity: .85; }