/* ==========================================================================
   Tec InnovAction Lab — hoja de estilos única para todo el sitio
   Sin frameworks: CSS puro organizado por secciones.
   Índice:
     1. Variables y reset
     2. Utilidades y layout base
     3. Navbar + menú móvil + sub-navegación
     4. Botones y chips
     5. Hero (portada)
     6. Secciones de la portada (banner, qué es, cómo funciona, numeralia,
        proyectos, créditos, contacto)
     7. Página Convocatoria 2026
     8. Página Registro 2026 (wizard y formularios)
     9. Página Edición 2025
    10. Footer
    11. Animaciones y responsive
    12. Asistente (chat)
    13. Página Agenda 2026 (programa y talleristas)
   ========================================================================== */

/* ---------- 1. Variables y reset ---------- */
:root {
  /* Marca */
  --rojo: #d7453e;          /* rojo de marca (igual que el sitio original) */
  --rojo-oscuro: #b8332d;   /* hover de botones rojos */
  --rojo-tenue: #2a100e;    /* fondo rojo muy oscuro para etiquetas/tarjetas activas */
  --rojo-texto: #e05a53;    /* rojo para TEXTO PEQUEÑO: mismo tono, apenas más claro para
                               cumplir contraste AA (4.5:1) sobre gris; cámbialo a #d7453e
                               si prefieres el hex exacto en todo */
  /* ámbar SOLO para campos por corregir (el rojo de marca ya significa foco/selección) */
  --ambar: #f0a830;
  --ambar-tenue: #2a1f0a;
  --borde-fuerte: #666666;  /* contorno de controles (botón fantasma, hamburguesa) */

  /* Fondo y superficies: negro plano, sin degradados ni resplandores */
  --fondo: #000000;
  --superficie: #111111;
  --superficie-2: #1a1a1a;
  --borde: #333333;
  --borde-suave: #262626;

  /* Texto */
  --texto: #ffffff;
  --texto-suave: #cccccc;
  --texto-tenue: #999999;

  /* Tipografía */
  --fuente-titulos: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Métricas */
  --ancho-max: 1180px;
  --radio: 18px;
  --radio-chico: 12px;
  --navbar-h: 76px;

  /* Fondo de los campos de formulario: separado de --fondo para que en tema
     claro los inputs sean blancos sobre una página gris. */
  --campo-fondo: #000000;
  /* Esquema de los controles nativos del formulario (calendario, select, autofill). */
  --esquema: dark;
}

/* Tema claro OPCIONAL, solo para las zonas de trabajo: registro.html y el panel
   del comité ponen data-tema="claro" en <html> (localStorage 'til-tema') antes
   de cargar el CSS. El resto del sitio sigue oscuro por identidad de marca.
   Contrastes AA sobre #fff / #f6f6f6 / #fdf0ef. */
html[data-tema="claro"] {
  color-scheme: light;
  --rojo-tenue: #fdf0ef;
  --rojo-texto: #c73a33;
  --ambar: #8a5a00;         /* ámbar SOLO para campos por corregir (el rojo de marca ya significa foco/selección) */
  --ambar-tenue: #fff7e6;
  --borde-fuerte: #8a8a8a;
  --fondo: #f6f6f6;
  --superficie: #ffffff;
  --superficie-2: #ffffff;
  --borde: #c4c4c4;
  --borde-suave: #dcdcdc;
  --texto: #111111;
  --texto-suave: #555555;
  --texto-tenue: #6b6b6b;
  --campo-fondo: #ffffff;
  --esquema: light;
}
/* Navbar y footer conservan la marca en oscuro (el logo til.png tiene letras
   blancas y no existe variante oscura): se re-declaran los tokens oscuros en su
   ámbito. La navbar, transparente hasta hacer scroll, lleva fondo fijo en claro. */
html[data-tema="claro"] .navbar,
html[data-tema="claro"] .footer {
  --rojo-tenue: #2a100e;
  --rojo-texto: #e05a53;
  --borde-fuerte: #666666;
  --fondo: #000000;
  --superficie: #111111;
  --superficie-2: #1a1a1a;
  --borde: #333333;
  --borde-suave: #262626;
  --texto: #ffffff;
  --texto-suave: #cccccc;
  --texto-tenue: #999999;
}
html[data-tema="claro"] .navbar {
  background: var(--fondo);
  border-bottom-color: var(--borde-suave);
}
html[data-tema="claro"] .patrocinadores-tarjeta { background: var(--superficie); border: 1px solid var(--borde-suave); }
html[data-tema="claro"] .wizard-progreso li:not(.activo) .wizard-paso-btn::before { background: var(--superficie-2); }
html[data-tema="claro"] .wizard-progreso li.incompleto .wizard-paso-btn::before { background: var(--ambar-tenue); }
html[data-tema="claro"] .boton-fantasma:hover { color: var(--rojo-texto); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente-texto);
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
iframe { border: 0; }

::selection { background: var(--rojo); color: #fff; }

/* Scrollbar sutil */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 8px; border: 3px solid var(--fondo); }
::-webkit-scrollbar-thumb:hover { background: var(--rojo); }

/* ---------- 2. Utilidades y layout base ---------- */
.contenedor {
  width: min(var(--ancho-max), 100% - 2.5rem);
  margin-inline: auto;
}

.seccion {
  padding-block: clamp(4rem, 9vw, 6.5rem);
  scroll-margin-top: calc(var(--navbar-h) + 1rem);
  position: relative;
}

.seccion-alterna { background: var(--superficie); }

.encabezado-seccion { max-width: 720px; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.encabezado-seccion.centrado { margin-inline: auto; text-align: center; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fuente-titulos);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rojo-texto);
  margin-bottom: 0.9rem;
}
.etiqueta::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--rojo);
  border-radius: 2px;
}
.encabezado-seccion.centrado .etiqueta::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--rojo);
  border-radius: 2px;
}

.titulo-seccion {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.subtitulo-seccion { color: var(--texto-suave); margin-top: 1rem; font-size: 1.06rem; }

.texto-rojo {
  color: var(--rojo);
}

.resaltado {
  color: var(--rojo-texto);
  font-weight: 600;
}

.subrayado-rojo {
  font-weight: 600;
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--rojo);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- 3. Navbar ---------- */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  transition: border-color 0.35s ease;
  border-bottom: 1px solid var(--fondo);
}
.navbar.con-fondo {
  background: var(--fondo);
  border-bottom-color: var(--borde-suave);
}

.nav-contenido {
  width: min(var(--ancho-max), 100% - 2.5rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-logo img { height: 46px; width: auto; }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-menu a:not(.boton) {
  display: block;
  white-space: nowrap;
  padding: 0.5rem 0.85rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--texto-suave);
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-menu a:not(.boton):hover { color: #fff; background: var(--superficie-2); }
.nav-menu a.activo { color: #fff; }
.nav-menu a.activo:not(.boton) { background: var(--rojo-tenue); color: var(--rojo-texto); }
.nav-menu .boton { margin-left: 0.6rem; white-space: nowrap; }

/* Redes sociales: iconos compactos entre los enlaces y el botón de convocatoria.
   En móvil se convierten en una fila de chips al final del panel desplegable. */
.nav-redes {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.35rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--borde);
}
.nav-menu .nav-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--texto-suave);
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-menu .nav-redes a:hover { color: #fff; background: var(--superficie-2); }
.nav-redes svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-redes span { display: none; }

/* Hamburguesa */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 12px 11px;
  background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--texto);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Sub-navegación de página (chips fijos bajo el navbar) */
.subnav {
  position: sticky;
  top: var(--navbar-h);
  z-index: 90;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde-suave);
}
.subnav-pista {
  width: min(var(--ancho-max), 100% - 2.5rem);
  margin-inline: auto;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-block: 0.65rem;
  scrollbar-width: none;
}
.subnav-pista::-webkit-scrollbar { display: none; }
.subnav-pista a {
  flex-shrink: 0;
  padding: 0.42rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--texto-suave);
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.subnav-pista a:hover,
.subnav-pista a.activo {
  color: #fff;
  border-color: var(--rojo);
  background: var(--rojo-tenue);
}

/* ---------- 4. Botones y chips ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.7rem;
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.boton-primario {
  background: var(--rojo);
  color: #fff;
}
.boton-primario:hover { transform: translateY(-2px); background: var(--rojo-oscuro); }
.boton-fantasma {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde-fuerte);
}
.boton-fantasma:hover { border-color: var(--rojo); color: var(--rojo); transform: translateY(-2px); }

.chip {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-suave);
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
}

/* ---------- 5. Hero (portada) ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: var(--navbar-h);
  overflow: hidden;
}

.hero-contenido {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 3rem;
  padding-block: 3.5rem;
}

.hero-aviso {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.1rem 0.45rem 0.6rem;
  background: var(--rojo-tenue);
  border: 1px solid var(--rojo);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--texto);
  margin-bottom: 1.6rem;
}
.hero-aviso .punto {
  width: 9px;
  height: 9px;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--rojo);
}

.hero-titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.7rem, 6.5vw, 4.6rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hero-texto {
  margin-top: 1.4rem;
  max-width: 540px;
  font-size: 1.12rem;
  color: var(--texto-suave);
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

/* Avioncito flotante */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}
.hero-visual .anillo {
  position: absolute;
  border: 1px dashed var(--rojo);
  border-radius: 50%;
  animation: girar 40s linear infinite;
}
.hero-visual .anillo-1 { width: 320px; height: 320px; }
.hero-visual .anillo-2 { width: 460px; height: 460px; animation-duration: 65s; animation-direction: reverse; border-color: var(--borde); }
.hero-avion {
  width: min(300px, 60%);
  animation: flotar 5.5s ease-in-out infinite;
}
.hero-estela {
  position: absolute;
  bottom: 18%;
  left: 6%;
  width: 55%;
  height: 2px;
  background: var(--rojo);
  border-radius: 2px;
}

/* Marquesina */
.marquesina {
  border-block: 1px solid var(--borde-suave);
  background: var(--superficie);
  overflow: hidden;
  padding-block: 0.9rem;
  position: relative;
  z-index: 2;
}
.marquesina-pista {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: marquesina 30s linear infinite;
}
.marquesina span {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-family: var(--fuente-titulos);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}
.marquesina span::after { content: "✦"; color: var(--rojo); font-size: 0.8rem; }

/* ---------- 6. Secciones de la portada ---------- */

/* Banner convocatoria */
.banner-conv { padding-block: clamp(3rem, 7vw, 4.5rem); }
.banner-conv-tarjeta {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radio) + 6px);
  background: var(--superficie);
  border: 2px solid var(--rojo);
  padding: clamp(2rem, 5vw, 3.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.banner-conv-info { max-width: 560px; }
.banner-conv-tag {
  display: inline-block;
  padding: 0.32rem 0.95rem;
  background: var(--rojo-tenue);
  border: 1px solid var(--rojo);
  color: var(--rojo-texto);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.banner-conv-titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
}
.banner-conv-texto { margin-top: 0.7rem; color: var(--texto-suave); }
.banner-conv-acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.banner-conv .boton-fantasma { border-color: var(--rojo); color: #fff; }
.banner-conv .boton-fantasma:hover { border-color: var(--rojo); background: var(--rojo); color: #fff; }

/* ¿Qué es TIL? */
.que-es-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
.que-es-texto p + p { margin-top: 1.2rem; }
.que-es-texto p { color: var(--texto-suave); font-size: 1.05rem; }
.que-es-figura { position: relative; }
.que-es-figura::before {
  content: "";
  position: absolute;
  inset: 1.2rem -1.2rem -1.2rem 1.2rem;
  border: 1px solid var(--rojo);
  border-radius: var(--radio);
  pointer-events: none;
}
.que-es-figura img {
  border-radius: var(--radio);
  position: relative;
}
.que-es-figura figcaption {
  position: relative;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--texto-tenue);
}

/* ¿Cómo funciona? — tarjetas numeradas */
.pasos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.paso {
  position: relative;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.7rem 1.5rem 1.5rem;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease;
}
.paso:hover {
  transform: translateY(-5px);
  border-color: var(--rojo);
}
.paso-numero {
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--rojo-texto);
}
.paso-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.22rem;
  font-weight: 700;
  margin-top: 0.55rem;
}
.paso-texto { margin-top: 0.5rem; color: var(--texto-suave); font-size: 1rem; }

/* Numeralia */
.numeralia { position: relative; overflow: hidden; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.stat {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.8rem 1.4rem;
  text-align: center;
  transition: transform 0.28s ease, border-color 0.28s ease;
}
.stat:hover { transform: translateY(-4px); border-color: var(--rojo); }
.stat-numero {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rojo);
}
.stat-etiqueta { margin-top: 0.6rem; font-size: 1rem; color: var(--texto-suave); }

/* Proyectos */
.linea-proyectos { margin-top: clamp(2.8rem, 6vw, 4rem); }
.linea-encabezado {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.linea-numero {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1rem;
  color: var(--rojo-texto);
  border: 1px solid var(--rojo);
  border-radius: 10px;
  padding: 0.2rem 0.6rem;
}
.linea-titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
}

.spotify-tarjeta {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.4rem;
}
.spotify-tarjeta p { color: var(--texto-suave); margin-bottom: 1.1rem; font-size: 1rem; }
.spotify-tarjeta iframe { width: 100%; height: 352px; border-radius: 12px; }

.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.video-tarjeta {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease;
}
.video-tarjeta:hover {
  transform: translateY(-5px);
  border-color: var(--rojo);
}
.video-marco {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-marco iframe,
.video-marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-miniatura { display: block; position: absolute; inset: 0; }
.video-miniatura .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-miniatura .play span {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rojo);
  color: #fff;
  font-size: 1.3rem;
  padding-left: 4px;
  transition: transform 0.25s ease;
}
.video-miniatura:hover .play span { transform: scale(1.12); }
.video-info { padding: 1rem 1.2rem 1.15rem; }
.video-equipo {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rojo-texto);
}
.video-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.08rem;
  font-weight: 700;
  margin-top: 0.2rem;
}

/* Créditos */
.credito-lider {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--rojo-tenue);
  border: 1px solid var(--rojo);
  border-radius: var(--radio);
  padding: 1.8rem;
  margin-bottom: 2rem;
}
.credito-lider h3 { font-family: var(--fuente-titulos); font-size: 1.4rem; }
.credito-lider p { color: var(--texto-suave); }

.creditos-grupo { margin-top: 1.2rem; }
.creditos-grupo summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.2rem 1.5rem;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.08rem;
  transition: border-color 0.25s ease;
}
.creditos-grupo summary::-webkit-details-marker { display: none; }
.creditos-grupo summary:hover { border-color: var(--rojo); }
.creditos-grupo summary .indicador {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--borde);
  color: var(--rojo-texto);
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}
.creditos-grupo[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.creditos-grupo[open] summary .indicador { transform: rotate(45deg); }
.creditos-grupo summary .conteo {
  margin-left: auto;
  font-family: var(--fuente-texto);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--texto-tenue);
}
.creditos-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  border: 1px solid var(--borde-suave);
  border-top: 0;
  border-radius: 0 0 var(--radio) var(--radio);
  padding: 1.2rem;
  background: var(--superficie);
}
.credito {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico);
  padding: 0.95rem 1.1rem;
}
.credito h4 { font-size: 1rem; font-weight: 600; }
.credito p { font-size: 1rem; color: var(--texto-tenue); margin-top: 0.15rem; }

/* Contacto */
.contacto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.contacto-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.6rem 1.5rem;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
a.contacto-tarjeta:hover { transform: translateY(-4px); border-color: var(--rojo); }
.contacto-icono {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--rojo-tenue);
  border: 1px solid var(--rojo);
  color: var(--rojo);
  margin-bottom: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease;
}
.contacto-icono svg { width: 22px; height: 22px; }
a.contacto-tarjeta:hover .contacto-icono { background: var(--rojo); color: #fff; transform: scale(1.06); }
.contacto-tipo {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rojo-texto);
}
.contacto-valor { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.1rem; }
.contacto-nota { font-size: 1rem; color: var(--texto-tenue); }

/* ---------- 7. Página Convocatoria 2026 ---------- */
.conv-hero {
  position: relative;
  padding-top: calc(var(--navbar-h) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.conv-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}
.conv-hero-titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.conv-hero-texto { margin-top: 1.3rem; color: var(--texto-suave); font-size: 1.08rem; max-width: 520px; }
.conv-hero-acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

/* Cuenta regresiva */
.cuenta-regresiva {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: calc(var(--radio) + 4px);
  padding: 1.9rem 1.7rem;
  text-align: center;
}
.cuenta-etiqueta {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.cuenta-unidades {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-block: 1.2rem;
}
.cuenta-unidad {
  min-width: 76px;
  background: var(--fondo);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico);
  padding: 0.85rem 0.5rem 0.7rem;
}
.cuenta-numero {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}
.cuenta-palabra { display: block; margin-top: 0.35rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-tenue); }
.cuenta-fecha { font-size: 1rem; color: var(--texto-suave); }
.cuenta-fecha strong { color: var(--texto); }

/* Premios */
.premios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.premio {
  position: relative;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 2.2rem 1.6rem;
  text-align: center;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease;
}
.premio:hover { transform: translateY(-5px); border-color: var(--rojo); }
.premio-destacado {
  background: var(--rojo-tenue);
  border-color: var(--rojo);
}
.premio-lugar {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.premio-destacado .premio-lugar { color: var(--rojo-texto); }
.premio-monto {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  font-weight: 700;
  margin-block: 0.5rem 0.3rem;
}
.premio-detalle { font-size: 1rem; color: var(--texto-tenue); }
.nota {
  margin-top: 1.4rem;
  font-size: 1rem;
  color: var(--texto-tenue);
}
.nota a { color: var(--rojo-texto); font-weight: 500; }
.nota a:hover { text-decoration: underline; }

/* Líneas de innovación */
.lineas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.linea-tarjeta {
  position: relative;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.9rem 1.6rem;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease;
}
.linea-tarjeta:hover {
  transform: translateY(-5px);
  border-color: var(--rojo);
}
.linea-tarjeta .numero {
  font-family: var(--fuente-titulos);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rojo);
}
.linea-tarjeta h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 0.9rem;
  line-height: 1.3;
}
.linea-tarjeta p { margin-top: 0.6rem; color: var(--texto-suave); font-size: 1rem; }

/* Requisitos / lo esencial */
.requisitos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}
.requisito {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.8rem 1.6rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.requisito:hover { border-color: var(--rojo); transform: translateY(-4px); }
.requisito h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.requisito h3::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--rojo);
  flex-shrink: 0;
}
.requisito p, .requisito li { color: var(--texto-suave); font-size: 1rem; }
.requisito p { margin-top: 0.6rem; }
.requisito ul { margin-top: 0.6rem; display: grid; gap: 0.4rem; }
.requisito li { padding-left: 1.1rem; position: relative; }
.requisito li::before { content: "—"; position: absolute; left: 0; color: var(--rojo); }

.region-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }

/* Estructura de la propuesta */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde-suave); border-radius: var(--radio); }
table.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--superficie-2);
  font-size: 1rem;
  min-width: 560px;
}
.tabla th, .tabla td { padding: 0.9rem 1.2rem; text-align: left; border-bottom: 1px solid var(--borde-suave); }
.tabla th {
  font-family: var(--fuente-titulos);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rojo-texto);
  background: var(--rojo-tenue);
}
.tabla tr:last-child td { border-bottom: 0; }
.tabla td { color: var(--texto-suave); }
.tabla td:first-child { color: var(--texto); font-weight: 500; }

.acordeon { margin-top: 0.9rem; }
.acordeon summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.15rem 1.4rem;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.02rem;
  transition: border-color 0.25s ease;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { border-color: var(--rojo); }
.acordeon summary .romano {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--rojo-texto);
  border: 1px solid var(--rojo);
  border-radius: 8px;
  padding: 0.15rem 0.55rem;
}
.acordeon summary .indicador { margin-left: auto; color: var(--rojo-texto); font-size: 1.2rem; transition: transform 0.3s ease; }
.acordeon[open] summary { border-radius: var(--radio) var(--radio) 0 0; }
.acordeon[open] summary .indicador { transform: rotate(45deg); }
.acordeon-cuerpo {
  border: 1px solid var(--borde-suave);
  border-top: 0;
  border-radius: 0 0 var(--radio) var(--radio);
  padding: 1.3rem 1.5rem;
  background: var(--superficie);
}
.acordeon-cuerpo p { color: var(--texto-suave); font-size: 1rem; }
.acordeon-cuerpo ul { display: grid; gap: 0.55rem; margin-top: 0.4rem; }
.acordeon-cuerpo li { color: var(--texto-suave); font-size: 1rem; padding-left: 1.2rem; position: relative; }
.acordeon-cuerpo li::before { content: "▸"; position: absolute; left: 0; color: var(--rojo); }
.acordeon-cuerpo li strong, .acordeon-cuerpo p strong { color: var(--texto); }
.acordeon-cuerpo * + p { margin-top: 0.8rem; }

/* Rúbricas con barras */
.rubricas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.rubrica {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.8rem 1.6rem;
}
.rubrica h3 { font-family: var(--fuente-titulos); font-size: 1.15rem; font-weight: 700; margin-bottom: 1.3rem; }
.rubrica-fila { margin-bottom: 1rem; }
.rubrica-fila:last-child { margin-bottom: 0; }
.rubrica-encabezado {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.rubrica-encabezado .pct { font-weight: 700; color: var(--rojo-texto); font-variant-numeric: tabular-nums; }
.rubrica-barra {
  height: 7px;
  background: var(--fondo);
  border-radius: 6px;
  overflow: hidden;
}
.rubrica-barra i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rojo);
  border-radius: 6px;
  transition: width 1.1s cubic-bezier(0.25, 0.8, 0.35, 1);
}
.visible .rubrica-barra i { width: var(--pct); }

/* Calendario / línea de tiempo */
.calendario {
  position: relative;
  display: grid;
  gap: 1.4rem;
  padding-left: 2rem;
}
.calendario::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--rojo);
}
.fase {
  position: relative;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.4rem 1.6rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.fase:hover { border-color: var(--rojo); transform: translateX(4px); }
.fase::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 1.75rem;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  margin-left: 9px;
  border-radius: 50%;
  background: var(--fondo);
  border: 3px solid var(--rojo);
}
.fase-fecha {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rojo-texto);
  margin-bottom: 0.3rem;
}
.fase h3 { font-family: var(--fuente-titulos); font-size: 1.18rem; font-weight: 700; }
.fase p { color: var(--texto-suave); font-size: 1rem; margin-top: 0.25rem; }

/* Registro */
.registro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.registro-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 2rem 1.8rem;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease;
}
.registro-tarjeta:hover {
  transform: translateY(-5px);
  border-color: var(--rojo);
}
.registro-nivel { font-family: var(--fuente-titulos); font-size: 1.45rem; font-weight: 700; }
.registro-detalle { color: var(--texto-suave); font-size: 1rem; margin-bottom: 0.6rem; }
/* CTA con el mismo aspecto que .boton-primario (la tarjeta entera es el enlace,
   por eso es un span y no un segundo <a>). */
.registro-cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.7rem;
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--rojo);
  border-radius: 999px;
  transition: gap 0.25s ease, background 0.22s ease;
}
.registro-tarjeta:hover .registro-cta { gap: 0.9rem; background: var(--rojo-oscuro); }

/* Principios */
.principios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

/* Visor PDF */
.pdf-acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.5rem; }
.pdf-visor {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie-2);
}
.pdf-visor iframe { width: 100%; height: min(78vh, 900px); display: block; }

/* ---------- 8. Página Registro 2026 (wizard y formularios) ---------- */

/* El atributo hidden siempre gana, aunque la clase defina display propio. */
[hidden] { display: none !important; }

/* Utilidades propias de la página */
.contenedor-angosto { max-width: 820px; margin-inline: auto; }
.sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hero compacto */
.reg-hero {
  padding-top: calc(var(--navbar-h) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.reg-hero-titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.reg-hero-texto { margin-top: 0.9rem; color: var(--texto-suave); max-width: 640px; }
.reg-hero-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.reg-hero-cabecera .etiqueta { margin-bottom: 0; }

/* Interruptor de tema (solo registro.html): el rótulo anuncia el tema al que se
   cambiará y el círculo se rellena con el tema claro activo. */
.tema-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.42rem 0.9rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto);
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  cursor: pointer;
}
.tema-toggle::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.tema-toggle:hover { border-color: var(--rojo); }
html[data-tema="claro"] .tema-toggle { border-color: var(--rojo); background: var(--rojo-tenue); }
html[data-tema="claro"] .tema-toggle::before { background: currentColor; }
/* Se resuelve en CSS (no en JS) para que el rótulo ya sea el correcto en el
   primer pintado y al seguir el cambio hecho desde otra pestaña. */
.tema-txt-oscuro { display: none; }
html[data-tema="claro"] .tema-txt-claro { display: none; }
html[data-tema="claro"] .tema-txt-oscuro { display: inline; }
.tema-toggle:focus-visible,
#formulario .boton:focus-visible,
.archivo-accion:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* Chip de categoría (fluye con el contenido, no se fija al hacer scroll) */
.wizard-categoria {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
  background: var(--rojo-tenue);
  border: 1px solid var(--rojo);
  border-radius: 999px;
}
.wizard-categoria strong { font-family: var(--fuente-titulos); }
.wizard-categoria a { color: var(--rojo-texto); font-weight: 600; }
.wizard-categoria a:hover { text-decoration: underline; }

/* Barra de progreso: cada paso es un botón (se puede ir a cualquiera aunque
   falten campos). El número del círculo lo pinta el contador en el ::before
   del botón. Estados en el li: activo (paso actual), hecho (visitado y
   completo) e incompleto (visitado con datos por corregir, en ámbar). */
.wizard-progreso {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  counter-reset: paso;
}
.wizard-progreso li {
  flex: 1;
  min-width: 0;
  counter-increment: paso;
}
.wizard-paso-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.2rem 0.3rem;
  background: none;
  border: 0;
  border-radius: var(--radio-chico);
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.wizard-paso-btn::before {
  content: counter(paso);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-suave);
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
}
.wizard-paso-nombre {
  font-size: 0.8rem;
  color: var(--texto-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizard-progreso li.activo .wizard-paso-btn::before {
  color: #fff;
  background: var(--rojo);
  border-color: var(--rojo);
}
.wizard-progreso li.activo .wizard-paso-nombre { color: var(--texto); }
.wizard-progreso li.hecho .wizard-paso-btn::before {
  content: "✓";
  color: var(--rojo-texto);
  border-color: var(--rojo);
}
.wizard-progreso li.incompleto .wizard-paso-btn::before {
  content: "!";
  color: var(--ambar);
  border-color: var(--ambar);
  background: var(--ambar-tenue);
}
.wizard-progreso li.incompleto .wizard-paso-nombre { color: var(--ambar); }
.wizard-paso-btn:hover .wizard-paso-nombre { color: var(--rojo-texto); }
.wizard-paso-btn:hover::before { border-color: var(--rojo); }
.wizard-paso-btn:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.wizard-progreso-texto { color: var(--texto-suave); font-size: 0.9rem; margin-bottom: 1.4rem; }
.wizard-progreso-ayuda { font-size: 0.85rem; color: var(--texto-tenue); margin: -0.9rem 0 1.4rem; }

/* Pasos */
.wizard-paso { border: 0; }
.wizard-legend {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.wizard-legend:focus { outline: none; }
.wizard-paso-descripcion { color: var(--texto-suave); margin-bottom: 1.6rem; max-width: 640px; }

/* Campos */
.campo { margin-bottom: 1.15rem; }
.campo > label {
  display: block;
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 0.35rem;
}
.campo-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="date"],
.campo input[type="url"],
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  color: var(--texto);
  background: var(--campo-fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color-scheme: var(--esquema);
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-tenue); }
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--rojo);
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}
/* Campo por corregir: ámbar, distinto del rojo del foco/selección. */
.campo.invalido input, .campo.invalido textarea, .campo.invalido select,
.campo [aria-invalid="true"] {
  border-color: var(--ambar);
  box-shadow: 0 0 0 1px var(--ambar);
}
.campo.invalido > label { color: var(--ambar); }
.campo-ayuda { font-size: 0.85rem; color: var(--texto-tenue); margin-top: 0.3rem; }
.campo-error { font-size: 0.88rem; color: var(--ambar); margin-top: 0.3rem; display: flex; gap: 0.4rem; align-items: flex-start; }
.campo-error::before {
  content: "!"; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: 0.05rem;
  border-radius: 50%; border: 1.5px solid var(--ambar); font-size: 0.75rem; font-weight: 700;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.archivo-campo.invalido .archivo-zona { border-color: var(--ambar); border-style: solid; box-shadow: 0 0 0 1px var(--ambar); }
.grupo-opciones.invalido { border-left: 3px solid var(--ambar); padding-left: 0.9rem; }
.campo-contador { float: right; font-size: 0.82rem; color: var(--texto-tenue); }
.campo-contador.contador-tope { color: var(--rojo-texto); }

/* Radios y checkboxes simples */
input[type="radio"],
input[type="checkbox"] { accent-color: var(--rojo); width: 1.15rem; height: 1.15rem; }
/* label.check-linea (0,1,1) para ganarle a .campo > label (0,1,1) por orden de
   aparición: las casillas viven dentro de fieldsets con clase .campo y heredaban
   su display:block y sus negritas, lo que pegaba la casilla al texto. */
label.check-linea {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.4rem 0;
  margin: 0;
  font-weight: 400;
  font-size: 1rem;
  cursor: pointer;
}
.check-linea input { flex-shrink: 0; margin-top: 0.22rem; }
.check-linea span { color: var(--texto-suave); }
.grupo-opciones { border: 0; }
.grupo-opciones legend {
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 0.45rem;
}
.estados-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1rem;
}

/* Radio-tarjetas (categoría, líneas, tipo de institución, año) */
.opciones-grid { display: grid; gap: 0.7rem; }
.opciones-grid.dos { grid-template-columns: 1fr 1fr; }
.opcion-tarjeta {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 1.15rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.opcion-tarjeta:hover { border-color: var(--rojo); transform: translateY(-2px); }
.opcion-tarjeta.seleccionada { border-color: var(--rojo); background: var(--rojo-tenue); }
.opcion-tarjeta input { flex-shrink: 0; margin-top: 0.25rem; }
.opcion-titulo { display: block; font-weight: 600; }
.opcion-descripcion { display: block; font-size: 0.88rem; color: var(--texto-suave); margin-top: 0.15rem; }

/* Bloques de integrantes */
.integrante-bloque {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.5rem 1.6rem 0.9rem;
  margin-bottom: 1.2rem;
}
.integrante-bloque legend {
  font-family: var(--fuente-titulos);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0 0.4rem;
}
.nota-menor { font-size: 0.88rem; color: var(--rojo-texto); margin-top: -0.6rem; margin-bottom: 0.9rem; }

/* Carga de archivos */
.archivo-campo { margin-bottom: 1.15rem; }
.archivo-zona {
  display: block;
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color: var(--texto-suave);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease;
}
.archivo-zona:hover,
.archivo-zona.arrastrando { border-color: var(--rojo); }
.archivo-zona.arrastrando { background: var(--rojo-tenue); }
.archivo-campo input[type="file"]:focus-visible + .archivo-zona {
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}
.archivo-nombre { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.archivo-progreso {
  height: 7px;
  margin-top: 0.6rem;
  background: var(--campo-fondo);
  border: 1px solid var(--borde-suave);
  border-radius: 99px;
  overflow: hidden;
}
.archivo-progreso span { display: block; height: 100%; width: 0; background: var(--rojo); }
.archivo-acciones { display: flex; gap: 0.8rem; margin-top: 0.5rem; flex-wrap: wrap; }
.archivo-accion {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--rojo-texto);
  cursor: pointer;
}
.archivo-accion:hover { text-decoration: underline; }
.archivo-listo .archivo-zona { border-style: solid; border-color: var(--borde); cursor: default; }
.archivo-ok { color: var(--rojo-texto); font-weight: 700; margin-right: 0.35rem; }

/* Avisos */
.aviso {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-bottom: 1.15rem;
}
.aviso strong { color: var(--texto); }
.aviso-advertencia { border-color: var(--rojo); background: var(--rojo-tenue); }
.aviso-error { border-color: var(--rojo); color: var(--rojo-texto); }
.aviso-acciones { display: flex; gap: 0.8rem; margin-top: 0.7rem; flex-wrap: wrap; }
/* Recibe el foco por código si la recepción cierra con la página abierta (como
   los títulos de los pasos): el aviso ya va enmarcado. */
#ventana-cerrada:focus { outline: none; }

/* Navegación del wizard */
.wizard-acciones {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.wizard-acciones .boton[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Paso 0: checklist de bienvenida */
.checklist-previa { display: grid; gap: 0.7rem; margin-block: 1.4rem; }
.checklist-previa li {
  position: relative;
  padding: 0.9rem 1.1rem 0.9rem 3rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico);
  color: var(--texto-suave);
}
.checklist-previa li::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 1.05rem;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 5px;
}
.checklist-previa li strong { color: var(--texto); }
.checklist-previa .li-alerta { border-left: 3px solid var(--rojo); }
.privacidad-previa {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.6rem;
  margin-block: 1.4rem;
}
.privacidad-previa h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.privacidad-previa ul { margin-top: 0.6rem; display: grid; gap: 0.35rem; }
.privacidad-previa a { color: var(--rojo-texto); font-weight: 500; }
.privacidad-previa a:hover { text-decoration: underline; }

/* Confirmación */
.confirmacion-titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.folio-caja {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.4rem 1.6rem;
  background: var(--rojo-tenue);
  border: 2px solid var(--rojo);
  border-radius: var(--radio);
  margin-bottom: 1.2rem;
}
.folio {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.confirmacion-resumen {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0.3rem 1rem;
  margin-block: 1.4rem;
}
.confirmacion-resumen dt { color: var(--texto-tenue); }
.confirmacion-resumen dd { overflow-wrap: anywhere; }
.fechas-clave { display: grid; gap: 0.5rem; margin-block: 1.2rem; }
.fechas-clave li {
  padding-left: 1.1rem;
  position: relative;
  color: var(--texto-suave);
}
.fechas-clave li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--rojo);
  border-radius: 50%;
}

/* ---------- 9. Página Edición 2025 ---------- */
.ed-hero {
  position: relative;
  padding-top: calc(var(--navbar-h) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
}
.ed-hero-contenido { position: relative; z-index: 2; max-width: 760px; }
.ed-hero-titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.4rem, 5.6vw, 3.8rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.ed-hero-texto { margin-top: 1.2rem; color: var(--texto-suave); font-size: 1.1rem; }

/* Galería de 3 (inauguración) */
.galeria-tres {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, 240px);
  gap: 1rem;
}
.galeria-tres figure { overflow: hidden; border-radius: var(--radio); position: relative; }
.galeria-tres figure:first-child { grid-row: span 2; }
.galeria-tres img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.galeria-tres figure:hover img { transform: scale(1.05); }

.prosa { max-width: 820px; }
.prosa p { color: var(--texto-suave); font-size: 1.03rem; }
.prosa p + p, .prosa ul + p, .prosa p + ul { margin-top: 1rem; }
.prosa ul { display: grid; gap: 0.5rem; }
.prosa li { color: var(--texto-suave); position: relative; padding-left: 1.4rem; }
.prosa li::before { content: "✈"; position: absolute; left: 0; color: var(--rojo); font-size: 0.85rem; top: 0.2rem; }
.prosa strong { color: var(--texto); }

/* Bloque texto + imagen */
.bloque-mixto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.bloque-mixto img { border-radius: var(--radio); width: 100%; max-height: 520px; object-fit: cover; }
.bloque-mixto .prosa p { font-size: 1rem; }

/* Cita destacada */
.cita {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.cita .resaltado { position: relative; white-space: nowrap; }

/* Contenedor de taller */
.taller {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: calc(var(--radio) + 4px);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 2rem;
}
.taller-cabecera {
  display: inline-block;
  background: var(--rojo);
  color: #fff;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  border-radius: 12px;
  padding: 0.55rem 1.4rem;
  margin-bottom: 1.6rem;
}
.taller-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  margin-bottom: 1.6rem;
}
.taller-intro img { border-radius: var(--radio); width: 100%; }
.taller-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.taller-columnas p { color: var(--texto-suave); font-size: 1rem; }
.taller-columnas p + p { margin-top: 0.9rem; }
.taller-columnas ul { display: grid; gap: 0.45rem; margin-block: 0.9rem; }
.taller-columnas li { color: var(--texto-suave); position: relative; padding-left: 1.2rem; font-size: 1rem; }
.taller-columnas li::before { content: "▸"; position: absolute; left: 0; color: var(--rojo); }
.taller-galeria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.6rem;
}
.taller-galeria figure { border-radius: var(--radio); overflow: hidden; }
.taller-galeria img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; transition: transform 0.5s ease; }
.taller-galeria figure:hover img { transform: scale(1.04); }

/* Videos de panelistas / talleristas */
.personas-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-top: 1.6rem;
}
.persona-video figcaption {
  margin-top: 0.8rem;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.persona-video figcaption::before { content: ""; width: 18px; height: 2px; background: var(--rojo); border-radius: 2px; }
.persona-video .video-marco { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde-suave); }

/* Galería masonry (break) */
.masonry { columns: 4 240px; column-gap: 1rem; }
.masonry figure {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radio-chico);
  overflow: hidden;
}
.masonry img { width: 100%; transition: transform 0.5s ease; }
.masonry figure:hover img { transform: scale(1.04); }

/* Imagen ancha */
.imagen-ancha { border-radius: var(--radio); overflow: hidden; margin-top: 1.6rem; }
.imagen-ancha img { width: 100%; }

/* ---------- 10. Footer ---------- */
.pre-footer { padding-block: clamp(3rem, 7vw, 4.5rem) 0; }
.patrocinadores-tarjeta {
  background: #f5f5f4;
  border-radius: var(--radio);
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
.patrocinadores-tarjeta p {
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6f76;
  text-align: center;
  margin-bottom: 1.4rem;
}
/* Logos sueltos, en renglones de --por-fila celdas iguales; el último renglón
   queda centrado. Cada <img> trae en --ancho su ancho en px a tamaño completo,
   calculado para que todos pesen parecido a la vista (alargados y compactos, de
   trazo fino y muy llenos). El más ancho (--logos-ancho-max, en la lista) llena
   su celda y los demás guardan la proporción, así que escalan juntos; max-width
   los detiene en su tamaño completo, que es al que están hechos los archivos.
   width/height del <img> reservan su proporción antes de cargar.
   Los renglones dependen de cuántos logos hay, para que el último no quede casi
   vacío. Con 13 van 5 por renglón desde 830 px (5 + 5 + 3; ahí las celdas
   miden al menos 128 px), 3 de 560 a 829 y 2 abajo; en esos dos, el último
   logo queda solo y centrado, lo que menos se nota en pantallas angostas.
   Con 12 iban 6 desde 1100, 4 de 700 a 1099 y 3 de 560 a 699. Con 14, 5 desde
   960 y 4 de 700 a 959. Con 5 por renglón y el hueco tope (1.7rem), la celda
   de escritorio mide ~198 px aun con el borde del tema claro, y los logos se
   pintan 1:1. */
.patrocinadores-logos {
  --por-fila: 5;
  --hueco: clamp(1rem, 2.4vw, 1.7rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.2rem) var(--hueco);
}
.patrocinadores-logos li {
  flex: 0 0 calc((100% - (var(--por-fila) - 1) * var(--hueco)) / var(--por-fila));
  display: flex;
  justify-content: center;
  align-items: center;
}
.patrocinadores-logos img {
  width: calc(var(--ancho) * 100% / var(--logos-ancho-max));
  max-width: calc(var(--ancho) * 1px);
  height: auto;
}
@media (max-width: 829px) { .patrocinadores-logos { --por-fila: 3; } }
/* Dos columnas en el teléfono. El tope de ancho evita que de 450 a 559 px
   los logos lleguen a tamaño completo y la tarjeta sea la más alta de todas. */
@media (max-width: 559px) { .patrocinadores-logos { --por-fila: 2; max-width: 22rem; margin-inline: auto; } }
/* Con los temas de contraste de Windows la tarjeta se volvería negra, y los
   logos (PNG transparentes, muchos con letras oscuras) desaparecerían. */
@media (forced-colors: active) { .patrocinadores-tarjeta { forced-color-adjust: none; } }

.footer {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  border-top: 1px solid var(--borde-suave);
  background: var(--superficie);
  padding-block: 2.8rem;
}
.footer-contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.8rem;
}
.footer-marca { display: flex; align-items: center; gap: 1rem; }
.footer-marca img { height: 52px; width: auto; }
.footer-marca p { font-size: 1rem; color: var(--texto-tenue); max-width: 320px; }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; }
.footer-nav a { font-size: 1rem; color: var(--texto-suave); transition: color 0.2s ease; }
.footer-nav a:hover { color: var(--rojo-texto); }
.footer-redes { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-nav .footer-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-nav .footer-redes a:hover { color: var(--rojo-texto); border-color: var(--rojo-texto); }
.footer-redes svg { width: 18px; height: 18px; }
.footer-legal {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--borde-suave);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--texto-tenue);
}
.footer-legal a { color: var(--texto-suave); }
.footer-legal a:hover { color: var(--rojo-texto); }

/* ---------- 11. Animaciones y responsive ---------- */
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-22px) rotate(3deg); }
}
@keyframes girar {
  to { transform: rotate(360deg); }
}
@keyframes marquesina {
  to { transform: translateX(-50%); }
}

/* Aparición al hacer scroll (controlada por js/main.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.9, 0.35, 1);
  transition-delay: var(--retraso, 0s);
}
[data-reveal].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Escritorio estrecho: la fila completa del menú cabe compactando espaciados */
@media (min-width: 981px) and (max-width: 1140px) {
  .nav-contenido { gap: 1rem; }
  .nav-menu { gap: 0.15rem; }
  .nav-menu a:not(.boton) { padding: 0.5rem 0.6rem; font-size: 0.93rem; }
  .nav-menu .boton { padding: 0.7rem 1.15rem; font-size: 0.93rem; margin-left: 0.3rem; }
  .nav-redes { margin-left: 0.15rem; padding-left: 0.35rem; }
}

/* Tablet */
@media (max-width: 980px) {
  .hero-contenido { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-visual { min-height: 300px; order: 2; }
  .conv-hero-grid { grid-template-columns: 1fr; }
  .pasos-grid, .lineas-grid, .principios-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .videos-grid { grid-template-columns: repeat(2, 1fr); }
  .creditos-lista, .contacto-grid { grid-template-columns: repeat(2, 1fr); }
  .rubricas-grid { grid-template-columns: 1fr; }
  .que-es-grid, .bloque-mixto, .taller-intro, .taller-columnas { grid-template-columns: 1fr; }
  .galeria-tres { grid-template-rows: repeat(2, 200px); }
  .estados-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Navegación compacta (tablet y móvil): hamburguesa desde 980px, porque entre
   720 y 980px la fila con los iconos de redes ya no cabe en una sola línea. */
@media (max-width: 980px) {
  .nav-burger { display: flex; }
  .nav-menu {
    position: fixed;
    inset: var(--navbar-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    padding: 1.2rem 1.4rem 1.6rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-menu.abierto { transform: none; opacity: 1; pointer-events: auto; }
  .nav-menu a:not(.boton) { padding: 0.8rem 1rem; border-radius: 12px; font-size: 1.05rem; }
  .nav-menu .boton { margin: 0.6rem 0 0; width: 100%; }
  .nav-redes {
    order: 10;
    margin: 0.9rem 0 0;
    padding: 1rem 0 0;
    gap: 0.6rem;
    border-left: 0;
    border-top: 1px solid var(--borde-suave);
  }
  .nav-menu .nav-redes a {
    flex: 1;
    width: auto;
    height: auto;
    gap: 0.55rem;
    padding: 0.75rem 0.9rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 12px;
    background: var(--superficie-2);
    border: 1px solid var(--borde-suave);
  }
  .nav-redes span { display: inline; }
}

/* Móvil */
@media (max-width: 720px) {
  .hero { min-height: auto; }
  .hero-visual { min-height: 260px; }
  .hero-visual .anillo-1 { width: 230px; height: 230px; }
  .hero-visual .anillo-2 { width: 330px; height: 330px; }

  .pasos-grid, .videos-grid, .lineas-grid, .requisitos-grid,
  .registro-grid, .principios-grid, .creditos-lista, .contacto-grid,
  .personas-videos, .premios-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .galeria-tres { grid-template-columns: 1fr; grid-template-rows: none; }
  .galeria-tres figure { height: 220px; }
  .galeria-tres figure:first-child { grid-row: auto; height: 280px; }
  .taller-galeria { grid-template-columns: 1fr; }
  .cuenta-unidad { min-width: 64px; }
  .banner-conv-tarjeta { flex-direction: column; align-items: flex-start; }
  .footer-contenido { flex-direction: column; align-items: flex-start; }

  /* Registro 2026 en móvil */
  .campo-fila, .estados-grid, .opciones-grid.dos { grid-template-columns: 1fr; }
  .wizard-paso-nombre { display: none; }
  .wizard-progreso li { flex: 0 0 auto; }
  .wizard-paso-btn { min-width: 44px; justify-content: center; padding: 0.4rem; }
  .wizard-acciones { flex-direction: column-reverse; }
  .wizard-acciones .boton { width: 100%; }
  .confirmacion-resumen { grid-template-columns: 1fr; gap: 0 1rem; }
  .confirmacion-resumen dt { margin-top: 0.5rem; }
}

/* ---------- 12. Asistente (chat) ---------- */
/* Widget de js/chat.js (portada, convocatoria y edición 2025; no en registro).
   Solo tema oscuro. Reutiliza .boton-primario, .chip y los tokens de :root.
   --chat-desplazamiento lo fija el script mientras existe #banner-cookies
   (alto del banner + 1rem) para que el widget quede encima de la barra. */
.chat {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + var(--chat-desplazamiento, 0px));
  z-index: 96; /* encima del banner de cookies (95), debajo del navbar (100) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: bottom 0.25s ease;
}
/* Lanzador: al cargar aparece desde abajo con la pregunta; a los 4 s
   js/chat.js añade .plegado y se encoge a un círculo de 56 px con solo el
   icono para no estorbar. Al pasar el cursor o enfocarlo con el teclado
   vuelve a desplegar el texto. */
.chat-lanzador {
  height: 56px;
  min-width: 56px;
  padding: 0 1.35rem 0 1.05rem;
  gap: 0;
  /* Sin sombra difusa (diseño plano): un filete del color del fondo lo separa
     del contenido que pasa por debajo. */
  border: 2px solid var(--fondo);
  animation: chat-aparece 0.55s ease-out 0.2s 1 backwards;
  transition: padding 0.35s ease, transform 0.22s ease, background 0.22s ease;
}
.chat-lanzador-texto {
  display: inline-block;
  max-width: 260px;
  margin-left: 0.55rem;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: max-width 0.35s ease, margin-left 0.35s ease, opacity 0.25s ease;
}
.chat.plegado .chat-lanzador { padding: 0; }
.chat.plegado .chat-lanzador-texto { max-width: 0; margin-left: 0; opacity: 0; }
.chat.plegado .chat-lanzador:hover,
.chat.plegado .chat-lanzador:focus-visible { padding: 0 1.35rem 0 1.05rem; }
.chat.plegado .chat-lanzador:hover .chat-lanzador-texto,
.chat.plegado .chat-lanzador:focus-visible .chat-lanzador-texto { max-width: 260px; margin-left: 0.55rem; opacity: 1; }
@keyframes chat-aparece {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-lanzador svg { width: 22px; height: 22px; flex-shrink: 0; }
.chat-lanzador:focus-visible,
.chat-enviar:focus-visible,
.chat-cerrar:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* Panel: encima del lanzador y sin invadir el navbar (560 px o lo que quepa
   entre el navbar y el lanzador, descontando el banner de cookies). */
.chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: 380px;
  max-width: calc(100vw - 2.5rem);
  height: min(560px, calc(100vh - var(--navbar-h) - 2rem - 5.5rem - var(--chat-desplazamiento, 0px)));
  height: min(560px, calc(100dvh - var(--navbar-h) - 2rem - 5.5rem - var(--chat-desplazamiento, 0px)));
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte); /* plano: el borde marcado sustituye a la sombra */
  border-radius: var(--radio);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  container-type: size; /* para @container: modo compacto si el panel queda bajo (final de la sección) */
}
.chat-panel.abierto { opacity: 1; transform: none; }
/* Al abrirlo con un toque el foco va al panel (no al campo, para no sacar el
   teclado del celular); en un contenedor el contorno de foco no aporta. */
.chat-panel:focus { outline: none; }

.chat-cabecera {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem 0.6rem;
}
.chat-cabecera img { width: 24px; height: 24px; flex-shrink: 0; }
.chat-titulo { flex: 1; font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.05rem; }
.chat-cerrar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--texto-suave);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.chat-cerrar:hover { color: #fff; border-color: var(--rojo); }
.chat-aviso {
  padding: 0 1rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--texto-tenue);
  border-bottom: 1px solid var(--borde-suave);
}
.chat-aviso a { color: var(--rojo-texto); font-weight: 600; text-decoration: underline; }
.chat-aviso-corto { display: none; }

/* Área con scroll: las burbujas (.chat-hilo, el role="log") y, debajo del
   último mensaje, las sugerencias (.chat-chips). */
.chat-mensajes {
  flex: 1;
  min-height: 3.5rem; /* al menos una línea de conversación aunque falte alto (celular apaisado) */
  overflow-y: auto;
  /* Sin anclaje de scroll: "Ver más" despliega hacia abajo desde donde estaba
     el botón aunque la conversación esté desplazada, y el scroll tras cada
     respuesta lo decide solo js/chat.js. */
  overflow-anchor: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
}
.chat-hilo { display: flex; flex-direction: column; gap: 0.6rem; }
.chat-burbuja {
  max-width: 88%;
  padding: 0.65rem 0.9rem;
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--texto);
  border-radius: var(--radio-chico);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-burbuja-usuario { align-self: flex-end; background: var(--rojo-tenue); border: 1px solid var(--rojo); }
.chat-burbuja-asistente { align-self: flex-start; background: var(--superficie-2); }
.chat-burbuja a { color: var(--rojo-texto); font-weight: 600; text-decoration: underline; }

/* Respuestas frecuentes del modo de respaldo (429, 503, sin red) */
.chat-frecuentes { margin-top: 0.6rem; white-space: normal; }
.chat-frecuentes p { font-size: 0.85rem; color: var(--texto-tenue); }
.chat-frecuentes ul { display: grid; gap: 0.3rem; margin-top: 0.35rem; }
.chat-frecuentes li { padding-left: 1rem; position: relative; }
.chat-frecuentes li::before { content: "—"; position: absolute; left: 0; color: var(--rojo); }

/* Indicador "escribiendo…": tres puntos */
.chat-escribiendo {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 0.85rem 0.9rem;
  background: var(--superficie-2);
  border-radius: var(--radio-chico);
}
.chat-escribiendo span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texto-tenue);
  animation: chat-punto 1.2s ease-in-out infinite;
}
.chat-escribiendo span:nth-child(2) { animation-delay: 0.2s; }
.chat-escribiendo span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-punto {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* Preguntas sugeridas, dentro de la conversación debajo del saludo o de la
   última respuesta: las que aún no se eligen (js/chat.js quita cada una al
   contestarla; al cerrar el panel vuelven todas). Se ven 4 y el resto, con
   hidden, tras "Ver más preguntas" (.chat-mas), que se distingue por ir sin
   relleno y con el texto en rojo; si quedan 5 o menos, se ven todas. */
.chat-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chat-chips .chip { font-family: inherit; text-align: left; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; }
.chat-chips .chip:hover { color: #fff; border-color: var(--rojo); }
.chat-chips .chip:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.chat-chips .chat-mas { font-weight: 600; color: var(--rojo-texto); background: transparent; border-color: var(--borde); }

.chat-formulario {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem 1rem;
  border-top: 1px solid var(--borde-suave);
}
/* Borde --borde y no --borde-fuerte (el de los campos del formulario): así lo fija el brief. */
.chat-entrada {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.95rem;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  color: var(--texto);
  background: var(--campo-fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}
.chat-entrada::placeholder { color: var(--texto-tenue); }
.chat-entrada:focus { border-color: var(--rojo); outline: 2px solid var(--rojo); outline-offset: 2px; }
.chat-enviar { flex-shrink: 0; width: 44px; height: 44px; padding: 0; }
.chat-enviar svg { width: 18px; height: 18px; margin-left: -2px; }
.chat-entrada[disabled], .chat-enviar[disabled] { opacity: 0.55; cursor: not-allowed; }
.chat-enviar[disabled]:hover { transform: none; background: var(--rojo); }

@media (prefers-reduced-motion: reduce) {
  .chat, .chat-panel { transition: none; }
  .chat-panel { transform: none; }
  .chat-escribiendo span { animation: none; opacity: 0.6; }
  .chat-lanzador { animation: none; }
  .chat-lanzador, .chat-lanzador-texto { transition: none; }
}

/* Móvil (y teléfonos apaisados, de poca altura): panel como hoja pegada abajo,
   acotada por el navbar. Abierta tapa el banner de cookies (z-index 96 > 95)
   en lugar de quedarse encima de él: en un teléfono el banner ocupa un tercio
   de la pantalla y la conversación casi no se veía. Al cerrarla, el banner
   sigue ahí. */
@media (max-width: 640px), (max-width: 980px) and (max-height: 600px) {
  .chat-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    height: min(80vh, calc(100vh - var(--navbar-h) - 1rem));
    height: min(80dvh, calc(100dvh - var(--navbar-h) - 1rem));
    border-radius: var(--radio) var(--radio) 0 0;
    border-bottom: 0;
  }
}

/* Panel bajo (celular apaisado, laptop pequeña con el banner de cookies):
   cabecera, aviso y formulario compactos y aviso en una línea, para que
   quepan la conversación y el campo de texto. */
@container (max-height: 420px) {
  .chat-cabecera { padding: 0.5rem 1rem 0.35rem; }
  .chat-cerrar { width: 32px; height: 32px; }
  .chat-aviso { padding-bottom: 0.45rem; }
  .chat-aviso-largo { display: none; }
  .chat-aviso-corto { display: inline; }
  .chat-mensajes { min-height: 2.75rem; padding: 0.6rem 1rem; }
  .chat-formulario { padding: 0.5rem 1rem 0.6rem; }
}

/* ---------- 13. Página Agenda 2026 (programa y talleristas) ---------- */
/* Hero compacto: la página se abre sobre todo desde el QR impreso, en el
   teléfono, y el programa tiene que verse pronto. En escritorio el avioncito
   va más chico; en tableta y teléfono se oculta (con el hero de la portada, el
   primer renglón del programa quedaba a 1.4 pantallas). */
.hero-agenda { min-height: 0; }
.hero-agenda .hero-visual { min-height: 260px; }
.hero-agenda .hero-visual .anillo-1 { width: 230px; height: 230px; }
.hero-agenda .hero-visual .anillo-2 { width: 330px; height: 330px; }
.hero-agenda + #programa { padding-top: clamp(2.5rem, 6vw, 5rem); }

/* Programa: dos bloques (matutina y vespertina) con el estilo de los carteles
   del evento: marco blanco por dentro, la hora en una pastilla roja y, bajo cada
   actividad, el lugar tras una raya roja. La hora va a 1.2rem en negritas porque
   el blanco sobre --rojo da 4.4:1: así cuenta como texto grande (AA pide 3:1) y
   no hay que oscurecer el rojo. Lado a lado desde 1100 px y del mismo alto, como
   dos carteles; abajo, uno sobre otro (en dos columnas la de texto quedaría muy
   angosta). */
.agenda-bloques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}
.agenda-bloque {
  position: relative;
  background: var(--superficie);
  border-radius: var(--radio);
  padding: clamp(1.9rem, 4vw, 2.8rem) clamp(1.5rem, 3.6vw, 2.6rem);
}
.agenda-bloque::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid var(--texto);
  border-radius: calc(var(--radio) - 7px);
  pointer-events: none;
}
.agenda-bloque-titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: clamp(1.4rem, 3vw, 1.9rem);
}
.agenda-lista { display: grid; gap: 1.2rem; }
.agenda-item {
  display: grid;
  grid-template-columns: 10.6rem minmax(0, 1fr);
  gap: 0.5rem 1.1rem;
  align-items: start;
  scroll-margin-top: calc(var(--navbar-h) + 1rem);
}
.agenda-hora {
  background: var(--rojo);
  color: #fff;
  border-radius: 999px;
  padding: 0.42rem 0.7rem;
  text-align: center;
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Al llegar desde la tarjeta de un tallerista (#taller-N) */
.agenda-item:target .agenda-hora { outline: 2px solid var(--texto); outline-offset: 3px; }
.agenda-actividad {
  padding-top: 0.32rem;
  font-family: var(--fuente-titulos);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
}
.agenda-tipo { color: var(--rojo-texto); }
.agenda-persona {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  margin-top: 0.5rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.2s ease;
}
.agenda-persona img {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--rojo);
}
.agenda-persona:hover { color: var(--rojo-texto); }
.agenda-lugar {
  margin-top: 0.45rem;
  padding-left: 0.65rem;
  border-left: 2px solid var(--rojo);
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1.35;
}

/* Talleristas: tarjetas centradas como en los carteles, con la foto en un
   círculo con aro rojo. Tres por renglón (el último queda centrado), dos en
   tableta y una en el teléfono. La semblanza completa va plegada en <details>.
   Con todas cerradas, las tarjetas de un renglón miden lo mismo y "Semblanza"
   queda al pie (como .registro-cta); si se abre una, cada tarjeta vuelve a su
   alto natural. Sin :has() se queda cada una con su alto. */
.talleristas-grid {
  --hueco: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--hueco);
}
.talleristas-grid:not(:has(details[open])) { align-items: stretch; }
.talleristas-grid > li { display: flex; flex: 0 0 calc((100% - 2 * var(--hueco)) / 3); }
.tallerista {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 2rem 1.5rem 1.5rem;
  scroll-margin-top: calc(var(--navbar-h) + 1rem);
}
/* data-reveal (sección 11) trae su propia transición; esta regla va después en
   la hoja y la pisaría, así que la repite. Sin desplazamiento: el ancla (#slug)
   es la propia tarjeta y, si sube 28 px al aparecer, queda bajo la barra fija. */
.tallerista[data-reveal] { transform: none; transition: opacity 0.7s ease var(--retraso, 0s), border-color 0.25s ease; }
/* Al llegar desde el programa (#slug) */
.tallerista:target { border-color: var(--rojo); }
.tallerista-foto {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  border: 4px solid var(--rojo);
  object-fit: cover;
  background: var(--superficie);
}
.tallerista-nombre {
  margin-top: 1.1rem;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}
/* Sobrenombre que usa la persona en su semblanza (p. ej. "El Profe Coach") */
.tallerista-alias {
  margin-top: 0.2rem;
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rojo-texto);
}
.tallerista-cargo { margin-top: 0.45rem; color: var(--texto-suave); font-size: 0.98rem; line-height: 1.5; }
.tallerista-taller {
  display: block;
  align-self: stretch;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  background: var(--rojo-tenue);
  border: 1px solid var(--rojo);
  border-radius: var(--radio-chico);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  transition: background 0.25s ease;
}
.tallerista-taller span {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--fuente-titulos);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rojo-texto);
}
/* --rojo-oscuro, como el hover de los botones: el blanco chico sobre --rojo no
   llega a 4.5:1 */
.tallerista-taller:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); }
.tallerista-taller:hover span { color: #fff; }
.tallerista-semblanza { width: 100%; margin-top: auto; padding-top: 1.1rem; }
.tallerista-semblanza summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  margin-inline: auto;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color 0.25s ease;
}
.tallerista-semblanza summary::-webkit-details-marker { display: none; }
.tallerista-semblanza summary:hover { border-color: var(--rojo); }
.tallerista-semblanza .indicador { color: var(--rojo-texto); font-size: 1.15rem; line-height: 1; transition: transform 0.3s ease; }
.tallerista-semblanza[open] .indicador { transform: rotate(45deg); }
.tallerista-texto { margin-top: 1.1rem; text-align: left; }
.tallerista-texto p { color: var(--texto-suave); font-size: 0.98rem; line-height: 1.6; }
.tallerista-texto p + p { margin-top: 0.75rem; }

.agenda-persona:focus-visible,
.tallerista-taller:focus-visible,
.tallerista-semblanza summary:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

/* Cortes de renglón: equilibrados en títulos y textos centrados, y sin una
   palabra sola al final (el navegador que no los soporta los ignora). Los
   nombres con paréntesis, como "(Pop Strategy)", llevan &nbsp; en el HTML.
   overflow-wrap evita desbordes con la letra del navegador muy grande. */
.hero-agenda .hero-texto, #programa .subtitulo-seccion,
.agenda-actividad, .tallerista-nombre, .tallerista-cargo, .tallerista-taller { text-wrap: balance; }
.agenda-lugar, .agenda-persona { text-wrap: pretty; }
.agenda-actividad, .agenda-lugar, .agenda-persona { overflow-wrap: break-word; }

/* Los cortes del programa van en em para que sigan el tamaño de letra del
   navegador; a 16 px equivalen a 1099 y 560 px. */
@media (max-width: 68.6875em) {
  .agenda-bloques { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .hero-agenda .hero-contenido { padding-bottom: 1rem; }
  .hero-agenda .hero-visual { display: none; }
  .talleristas-grid > li { flex-basis: calc((100% - var(--hueco)) / 2); }
}
/* Teléfono: la pastilla sobre la actividad, y una tarjeta por renglón. */
@media (max-width: 35em) {
  .agenda-item { grid-template-columns: 1fr; }
  .agenda-hora { justify-self: start; }
  .agenda-actividad { padding-top: 0; }
  .talleristas-grid > li { flex-basis: 100%; max-width: 26rem; }
}