/* ============================================================
   profes.tv — Estilos
   Colores oficiales del logotipo vectorial:
   rojo #C23339 (acento único) y tinta #0F1C22.
   Tipografías de marca: Montserrat (títulos) + Roboto (texto).
   ============================================================ */

:root {
  --white: #ffffff;
  --gray-bg: #f5f5f7;
  --gray-card: #f2f2f4;
  --ink: #0f1c22;
  --ink-soft: #6e6e73;
  --red: #c23339;
  --radius: 32px;
  --radius-lg: 40px;
  --maxw: 1280px;
  --gutter: 48px; /* margen lateral de la página (gutter) */
  --shadow: 0 12px 40px rgba(15, 28, 34, .08);
  --shadow-hover: 0 20px 60px rgba(15, 28, 34, .12);
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  /* las variantes de aparición usan translateX; evita una barra de scroll
     horizontal momentánea mientras los elementos entran. clip (no hidden)
     para no romper el position: sticky del rail de la línea de vida. */
  overflow-x: clip;
}

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

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* Selección de texto con el rojo de marca */
::selection { background: rgba(194, 51, 57, .18); color: var(--ink); }

/* Foco visible solo al navegar con teclado: anillo del color de marca
   (el outline sigue el border-radius propio de cada elemento) */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* Enlace "saltar al contenido": fuera de pantalla hasta recibir el foco */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-hover);
  transform: translateY(-200%);
  transition: transform .3s var(--ease);
}

.skip-link:focus-visible { transform: none; }

#site-main:focus { outline: none; }

/* Cada página lleva dentro una copia estática del contenido (la generan los
   marcadores seo:* al publicar; la leen buscadores y asistentes de IA). Se
   mantiene invisible hasta que app.js pinta la versión interactiva encima:
   así no se ve el "destello" de contenido crudo al cambiar de página. Si
   JavaScript fallara o tardara, la animación de reserva la muestra sola a los
   2 segundos, de modo que nadie puede quedarse ante una página en blanco. */
#site-main { visibility: hidden; animation: seo-reserva 0s 2s forwards; }
html.app-lista #site-main { visibility: visible; animation: none; }
@keyframes seo-reserva { to { visibility: visible; } }

/* ---------- Botones y enlaces ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .35s var(--ease), color .35s var(--ease);
}

.btn--pill {
  background: var(--ink);
  color: var(--white);
  padding: 14px 32px;
  border-radius: 999px;
}

.btn--pill:hover {
  background: var(--red);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px rgba(194, 51, 57, .35);
}

.btn--small { padding: 9px 22px; font-size: .88rem; }

.btn--light { background: var(--white); color: var(--ink); }

.btn--light:hover { background: var(--red); color: var(--white); }

.link-arrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s var(--ease);
}

.link-arrow::after {
  content: "›";
  margin-left: 6px;
  display: inline-block;
  transition: transform .3s var(--ease);
}

.link-arrow:hover { color: var(--red); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Redes sociales ---------- */

.socials { display: flex; align-items: center; gap: 6px; }

.socials a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink);
  border-radius: 10px;
  transition: color .25s var(--ease), transform .25s var(--ease);
}

.socials a svg { width: 18px; height: 18px; }

.socials a:hover { color: var(--red); transform: translateY(-2px); }

.socials--footer { margin-top: 18px; }
.socials--footer a { width: 38px; height: 38px; }
.socials--footer a svg { width: 20px; height: 20px; }

.socials--mobile { margin-top: 8px; }

/* ---------- Navegación ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(15, 28, 34, .06);
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}

/* En cuanto la página hace scroll, la barra gana presencia */
.nav--scrolled {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 6px 24px rgba(15, 28, 34, .07);
}

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 60px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Tres zonas (logo | enlaces | acciones): el logo y las acciones ocupan lo
   que miden, y todo el espacio sobrante se lo queda la zona de enlaces, que
   los centra dentro de sí misma. Así el aire que queda a la izquierda del
   primer enlace y a la derecha del último es exactamente el mismo, aunque la
   columna derecha tenga más elementos que el logo. */
.nav__logo { flex: 0 0 auto; pointer-events: none; }
.nav__logo img { height: 28px; width: auto; pointer-events: auto; }

.nav__links {
  display: flex;
  gap: 26px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

.nav__links a {
  font-size: .82rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  opacity: .8;
  transition: opacity .25s, color .25s;
}

.nav__links a:hover { opacity: 1; color: var(--red); }

.nav__links a.active { opacity: 1; color: var(--red); font-weight: 500; }

/* Submenú desplegable (p. ej. Recursos IA → Prompts, Asistentes, MAPA) */
.nav__group { position: relative; display: flex; align-items: center; }

.nav__group > a { display: inline-flex; align-items: center; gap: 6px; }

.nav__caret {
  width: 6px;
  height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s var(--ease);
}

.nav__group:hover .nav__caret,
.nav__group:focus-within .nav__caret { transform: rotate(225deg) translate(-2px, -2px); }

/* Puente invisible entre el enlace y el panel para no perder el hover */
.nav__group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 22px;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 10px 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(15, 28, 34, .06);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 28, 34, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}

.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown a {
  padding: 8px 20px;
  white-space: nowrap;
}

.nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: 0 0 auto; }

.nav__burger {
  display: none;
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  align-items: center;
}

.nav__burger span {
  width: 20px;
  height: 1.6px;
  background: var(--ink);
  transition: transform .3s var(--ease);
}

.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Panel del móvil. Cuelga de la barra, pero se despega de ella (fixed) para
   poder desplazarse por dentro: si la lista es más alta que la pantalla, el
   propio panel hace scroll y se llega hasta el último enlace. El hueco de
   abajo deja sitio a los botones flotantes y a la barra del iPhone. */
.nav__mobile {
  display: none;
  position: fixed;
  top: 60px;                     /* justo debajo de la barra (altura de .nav__inner) */
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px calc(56px + env(safe-area-inset-bottom));
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;  /* el impulso del dedo no se contagia a la página */
  background: var(--white);      /* opaco: la página no se transparenta detrás */
  border-top: 1px solid rgba(15, 28, 34, .06);
  box-shadow: 0 24px 48px rgba(15, 28, 34, .14);
}

.nav__mobile a {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

/* Enlaces hijos en el menú móvil, sangrados bajo su sección padre */
.nav__mobile a.nav__mobile-sub {
  padding-left: 18px;
  font-size: .95rem;
  font-weight: 500;
  opacity: .85;
}

.nav__mobile.open { display: flex; }

/* Con el menú móvil desplegado la página de detrás se queda quieta: así el
   dedo mueve el menú y no el contenido que hay debajo.
   El freno va SOLO en <html>. Si también se le pone overflow: hidden al
   <body>, este pasa a ser su propio contenedor de scroll y, con la página
   ya desplazada, el navegador recoloca la barra (sticky) y el panel (fixed)
   en el origen del documento: el menú se abre fuera de la pantalla. */
html.menu-abierto { overflow: hidden; }

/* Y lo que flota por encima se aparta para no taparlo */
body.menu-abierto .llamada,
body.menu-abierto .lang-fab,
body.menu-abierto .a11y-fab,
body.menu-abierto .cuaderno-fab,
body.menu-abierto .cookies { display: none; }

/* ---------- Hero ---------- */

.hero {
  text-align: center;
  padding: 96px var(--gutter) 0;
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-bg) 100%);
  overflow: hidden;
}

.hero--compact {
  padding: 88px var(--gutter) 96px;
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-bg) 130%);
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}

/* Las portadas de las herramientas (Ecualizador, Diferenciador, Gramola,
   Historias y Expendedora) usan el antetítulo base; aquí se les añade el
   estilo unificado del resto de portadas: rótulo flanqueado por dos puntos. */
.hero--ecualizador .hero__eyebrow,
.hero--diferenciador .hero__eyebrow,
.hero--pensamiento .hero__eyebrow,
.hero--historias .hero__eyebrow,
.hero--creatividad .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--ecualizador .hero__eyebrow::before,
.hero--ecualizador .hero__eyebrow::after,
.hero--diferenciador .hero__eyebrow::before,
.hero--diferenciador .hero__eyebrow::after,
.hero--pensamiento .hero__eyebrow::before,
.hero--pensamiento .hero__eyebrow::after,
.hero--historias .hero__eyebrow::before,
.hero--historias .hero__eyebrow::after,
.hero--creatividad .hero__eyebrow::before,
.hero--creatividad .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.hero__title {
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
}

.hero--compact .hero__title { font-size: clamp(2.6rem, 7vw, 4.6rem); }

.hero__title .dot-tv { color: var(--red); font-weight: 400; }

.hero__claim {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--ink-soft);
  margin: 22px auto 0;
  max-width: 760px;
  white-space: pre-line;
  line-height: 1.35;
}

.hero--compact .hero__claim { font-size: clamp(1.1rem, 2.4vw, 1.5rem); }

.hero__ctas {
  margin-top: 36px;
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hero__visual {
  max-width: 980px;
  margin: 72px auto 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero--compact .hero__visual {
  margin-top: 56px;
  border-radius: var(--radius-lg);
}

/* La foto reserva su hueco antes de cargar (como en la portada): así el
   texto no salta cuando llega la imagen. El recorte panorámico imita al
   de inicio; en móvil se abre a 3:2 para no quedar como una rendija. */
.hero__visual img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

@media (max-width: 640px) {
  .hero__visual img { aspect-ratio: 3 / 2; }
}

/* ---------- Portada de Conferencias: "El escenario" ----------
   Un foco cenital baja desde el techo y forma un charco de luz en el suelo
   del escenario. El título queda iluminado y el CTA invita a bajar al
   backstage (la sección de acreditaciones). */
.hero--escenario {
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(40px, 7vh, 80px);
  background:
    radial-gradient(150% 95% at 50% -18%, #ffffff 0%, #fbfbfd 46%, var(--gray-bg) 100%);
}

/* Haz de luz: cono que cae desde el centro superior y se mece despacio */
.hero--escenario::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6%;
  left: 50%;
  width: min(78vw, 720px);
  height: 116%;
  transform-origin: 50% 0;
  transform: translateX(-50%) rotate(0deg);
  background: linear-gradient(180deg,
              rgba(194, 51, 57, .16) 0%,
              rgba(194, 51, 57, .06) 34%,
              rgba(194, 51, 57, 0) 70%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  filter: blur(7px);
  pointer-events: none;
  animation: escena-haz 9s ease-in-out infinite alternate;
}

/* Charco de luz: elipse donde aterriza el foco, bajo el botón */
.hero--escenario::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: clamp(60px, 11vh, 132px);
  width: min(70vw, 600px);
  height: 130px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(194, 51, 57, .12), rgba(194, 51, 57, 0) 72%);
  pointer-events: none;
}

@keyframes escena-haz {
  from { transform: translateX(-50%) rotate(-2deg);  opacity: .8; }
  to   { transform: translateX(-50%) rotate(2deg);   opacity: 1; }
}

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas) */
.hero--escenario .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--escenario .hero__eyebrow::before,
.hero--escenario .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Título grande e iluminado: degradado de tinta sobre fondo claro */
.hero--escenario .hero__title {
  font-size: clamp(3.6rem, 12vw, 8rem);
  line-height: .9;
  letter-spacing: -.035em;
  background: linear-gradient(178deg, var(--ink) 18%, #36474f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 50px rgba(15, 28, 34, .12);
}

.hero--escenario .hero__claim {
  font-size: clamp(1.15rem, 2.6vw, 1.65rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 660px;
}

.hero--escenario .hero__ctas { margin-top: 40px; }

/* El botón principal lleva al backstage: una flecha hacia abajo lo sugiere */
.hero--escenario .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--escenario .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--escenario .hero__ctas .btn--pill:hover::after {
  transform: translateY(3px);
}

/* La cinta de eventos hace de marquesina al pie del escenario */
.hero--escenario .hero__ticker {
  margin-top: clamp(48px, 8vh, 84px);
  border-top: none;
  position: relative;
}

.hero--escenario .hero__ticker::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(70vw, 600px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15, 28, 34, .16), transparent);
}

/* ---------- el adorno: la acreditación de ponente ----------
   El lanyard cae bajo el foco y se balancea UNA vez, cada vez más
   suave, hasta quedarse colgado: la cinta roja de la marca, su pinza
   y la tarjeta con el retrato. Sin bucles; con «reducir movimiento»
   aparece ya en reposo. */
.hero-lan__colgante {
  position: relative;
  width: 100px;
  height: 146px;
  margin: 22px auto 4px;
  transform-origin: 50% 0;
  animation: heroLanCuelga 1.6s ease .25s both;
}

/* Las dos cintas bajan en V hasta la pinza (su ángulo viene en --la) */
.hero-lan__cinta {
  position: absolute;
  top: 2px;
  width: 7px;
  height: 62px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .25), transparent 55%),
    linear-gradient(180deg, #d9545a, #a3242a);
  transform-origin: 50% 0;
  transform: rotate(var(--la, 0deg));
}
.hero-lan__cinta--izq { left: calc(50% - 26px); --la: -21deg; }
.hero-lan__cinta--der { left: calc(50% + 19px); --la: 21deg; }

.hero-lan__pinza {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 56px;
  width: 14px;
  height: 15px;
  margin-left: -7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #c3d2d9, #8fa2ac 55%, #55646d);
  box-shadow: 0 2px 4px rgba(15, 28, 34, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* La tarjeta: banda roja, retrato y dos renglones */
.hero-lan__tarjeta {
  position: absolute;
  left: 50%;
  top: 68px;
  width: 62px;
  height: 76px;
  margin-left: -31px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f2f4f6);
  box-shadow: 0 12px 24px rgba(15, 28, 34, .22), inset 0 0 0 1.5px rgba(15, 28, 34, .18);
}

.hero-lan__tarjeta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 13px;
  background: linear-gradient(90deg, #d9545a, #a3242a);
}

.hero-lan__retrato {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  overflow: hidden;
  background: #e4e9ec;
  box-shadow: inset 0 0 0 1.5px rgba(15, 28, 34, .22);
}

.hero-lan__retrato::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #33424b;
}

.hero-lan__retrato::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 16px;
  height: 10px;
  margin-left: -8px;
  border-radius: 8px 8px 0 0;
  background: #33424b;
}

.hero-lan__tarjeta i {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 4px;
  border-radius: 2px;
  background: rgba(15, 28, 34, .22);
}
.hero-lan__tarjeta i:nth-of-type(1) { top: 52px; }
.hero-lan__tarjeta i:nth-of-type(2) { top: 60px; right: 22px; }

@keyframes heroLanCuelga {
  0%   { opacity: 0; transform: translateY(-26px) rotate(0deg); }
  16%  { opacity: 1; transform: translateY(0) rotate(7deg); }
  42%  { transform: rotate(-5deg); }
  66%  { transform: rotate(2.5deg); }
  86%  { transform: rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lan__colgante { animation: none; }
}
html.a11y-reduce-motion .hero-lan__colgante { animation: none; }

/* ---------- Portada de Proyectos: "La lámina" ----------
   Una lámina técnica de taller: papel milimetrado tenue, un arco de compás
   que enmarca el título y una cota roja que lo "mide". Conecta con el
   lenguaje blueprint del sitio (El Taller del Inventor), pero en claro para
   no chocar con la barra de navegación. */
.hero--plano {
  --plano-line: rgba(15, 28, 34, .055);
  --plano-line-strong: rgba(15, 28, 34, .13);
  --plano-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(48px, 8vh, 92px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

/* Papel milimetrado: cuadrícula fina + gruesa, desvanecida hacia los bordes */
.hero--plano::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--plano-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--plano-line) 1px, transparent 1px),
    linear-gradient(var(--plano-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--plano-line-strong) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  -webkit-mask-image: radial-gradient(115% 92% at 50% 28%, #000 42%, transparent 100%);
  mask-image: radial-gradient(115% 92% at 50% 28%, #000 42%, transparent 100%);
  pointer-events: none;
}

/* Arco de compás: trazo rojo a puntos que enmarca el título como un croquis */
.hero--plano::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(36px, 8vh, 104px);
  left: 50%;
  width: min(82vw, 540px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px dashed rgba(194, 51, 57, .24);
  border-radius: 50%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  pointer-events: none;
}

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas).
   Mantiene un mínimo de fuente algo menor porque su etiqueta es la más larga. */
.hero--plano .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 20px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.56rem, 1.5vw, .85rem);
  letter-spacing: .18em;
  color: var(--red);
  white-space: nowrap;
}

.hero--plano .hero__eyebrow::before,
.hero--plano .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Título grande con cota: una línea roja con topes lo "mide" por debajo */
.hero--plano .hero__title {
  position: relative;
  display: inline-block;
  font-size: clamp(3.6rem, 12vw, 8rem);
  line-height: .9;
  letter-spacing: -.035em;
  padding-bottom: 24px;
  color: var(--ink);
}

.hero--plano .hero__title::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6px;
  height: 9px;
  border: 1.5px solid rgba(194, 51, 57, .55);
  border-top: none;
}

.hero--plano .hero__claim {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 600px;
}

.hero--plano .hero__ctas { margin-top: 40px; }

/* El botón baja a los proyectos: una flecha lo sugiere */
.hero--plano .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--plano .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--plano .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* La cinta hace de cajetín al pie de la lámina, con tipografía técnica */
.hero--plano .hero__ticker {
  margin-top: clamp(52px, 9vh, 88px);
  border-top: 1px dashed var(--plano-line-strong);
}

.hero--plano .hero__ticker-item {
  font-family: var(--plano-mono);
  letter-spacing: .16em;
  opacity: .55;
}

/* ---------- el adorno: el mando de La Consola ----------
   El mando cae sobre la lámina y saluda: la cruceta se ladea y los
   botones B y A se pulsan UNA vez cada uno, como quien mete el código
   de un truco. Sin bucles; con «reducir movimiento» aparece quieto. */
/* Las medidas salen de las proporciones reales del mando (133 × 57 mm):
   cruceta a un cuarto de la izquierda, botones a un cuarto de la derecha y
   SELECT/START separados y centrados en el eje de la carcasa. Con esos
   números los tres grupos quedan a la misma distancia entre sí. */
.hero-nes__mando {
  position: relative;
  display: block;
  width: 168px;
  height: 74px;
  margin: 24px auto 4px;
  border: 2px solid #22333c;
  border-radius: 8px;
  background: linear-gradient(180deg, #f6f7f8, #e3e6e9);
  box-shadow: 0 14px 34px rgba(15, 28, 34, .14), inset 0 -8px 0 rgba(15, 28, 34, .06);
  animation: heroNesCae .6s var(--ease) .25s both;
}

.hero-nes__cruceta {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  animation: heroNesCruceta .45s ease .95s both;
}

.hero-nes__cruceta::before,
.hero-nes__cruceta::after {
  content: "";
  position: absolute;
  border-radius: 3px;
  background: linear-gradient(180deg, #33424b, #16232a);
}
.hero-nes__cruceta::before { left: 0; top: 10px; width: 32px; height: 12px; }
.hero-nes__cruceta::after { left: 10px; top: 0; width: 12px; height: 32px; }

.hero-nes__pildoras {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: 4px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.hero-nes__pildoras b {
  width: 15px;
  height: 5px;
  border-radius: 5px;
  background: #33424b;
}

.hero-nes__botones {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px;
  display: flex;
  gap: 10px;
}

.hero-nes__btn {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8f, #c23339 55%, #8f1f24);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .3), 0 3px 6px rgba(15, 28, 34, .25);
}
.hero-nes__btn--b { animation: heroNesPulsa .4s ease 1.25s both; }
.hero-nes__btn--a { animation: heroNesPulsa .4s ease 1.5s both; }

@keyframes heroNesCae {
  from { opacity: 0; transform: translateY(-16px) rotate(-3deg); }
  60%  { opacity: 1; transform: translateY(2px) rotate(1deg); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroNesCruceta {
  0%, 100% { transform: none; }
  50% { transform: translateX(-3px); }
}

@keyframes heroNesPulsa {
  0%, 100% { transform: none; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .3), 0 3px 6px rgba(15, 28, 34, .25); }
  50% { transform: scale(.86); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-nes__mando, .hero-nes__cruceta, .hero-nes__btn { animation: none; }
}
html.a11y-reduce-motion .hero-nes__mando,
html.a11y-reduce-motion .hero-nes__cruceta,
html.a11y-reduce-motion .hero-nes__btn { animation: none; }

/* ---------- Portada de Publicaciones: "La página" ----------
   En la gama de la casa (blanco, tinta y rojo): una pauta de líneas muy
   tenue evoca la página impresa y una regla roja subraya el título, como
   un encabezado editorial. */
.hero--biblioteca {
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(56px, 9vh, 104px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

/* Pauta de página: líneas horizontales muy tenues, desvanecidas hacia los bordes */
/* Marcapáginas: una cinta roja cuelga desde lo alto de la página y se
   mece muy despacio, como si el libro estuviera recién abierto */
.hero--biblioteca::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(50% + clamp(200px, 26vw, 360px));
  width: clamp(22px, 2.4vw, 28px);
  height: clamp(100px, 16vh, 176px);
  background: linear-gradient(180deg, #9e2227 0%, var(--red) 70%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 13px), 0 100%);
  box-shadow: 0 12px 26px rgba(194, 51, 57, .28);
  transform-origin: 50% 0;
  animation: biblio-cinta 7s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes biblio-cinta {
  from { transform: rotate(-2.4deg); }
  to   { transform: rotate(2.4deg); }
}

.hero--biblioteca::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(180deg,
                    transparent 0 33px,
                    rgba(15, 28, 34, .045) 33px 34px);
  -webkit-mask-image: radial-gradient(118% 92% at 50% 32%, #000 40%, transparent 100%);
  mask-image: radial-gradient(118% 92% at 50% 32%, #000 40%, transparent 100%);
  pointer-events: none;
}

/* Antetítulo con dos puntos a modo de cierre, como un sello de catálogo.
   En una sola línea y centrado (margin auto, sin depender del text-align). */
.hero--biblioteca .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--biblioteca .hero__eyebrow::before,
.hero--biblioteca .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Título editorial con una regla roja que lo subraya */
.hero--biblioteca .hero__title {
  position: relative;
  display: inline-block;
  font-size: clamp(3.6rem, 12vw, 8rem);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--ink);
  padding-bottom: 28px;
}

.hero--biblioteca .hero__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 92px;
  height: 4px;
  border-radius: 999px;
  background: var(--red);
}

.hero--biblioteca .hero__claim {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 600px;
}

.hero--biblioteca .hero__ctas { margin-top: 38px; }

/* El botón baja a la estantería: una flecha lo sugiere */
.hero--biblioteca .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--biblioteca .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--biblioteca .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* ---------- el adorno: la pila de libros ----------
   Los tomos del autor se apilan UNO a uno bajo el título y encima se
   posan las gafas de leer, como al final de una tarde de escritura.
   Sin bucles; con «reducir movimiento» la pila aparece ya hecha.

   Cada tomo es un libro de canto, como en la balda: la encuadernación
   se ve entera y las hojas asoman SOLO por el corte de la derecha.
   No hay papel por debajo: entre tomo y tomo no debe quedar ninguna
   rendija clara, solo la sombra de uno apoyado en otro.
     · el elemento  → la encuadernación (lomo redondo, bisagra, nervios)
     · ::before     → el corte de las hojas, encajado a la derecha, con
                      las tapas sobresaliendo por arriba y por abajo. */
.hero-pila__monton {
  position: relative;
  width: 136px;
  height: 96px;
  margin: 22px auto 4px;
  filter: drop-shadow(0 14px 20px rgba(15, 28, 34, .16));
}

/* La encuadernación. Cada tomo trae su turno en --i, su giro en --r,
   su grosor en --h y sus dos tonos de tapa en --tomo / --tomo-b. */
.hero-pila__libro {
  position: absolute;
  left: 50%;
  height: var(--h, 20px);
  border-radius: 3px;
  background:
    /* nervios: dos filetes dorados junto a la bisagra */
    linear-gradient(90deg, transparent 14px, rgba(240, 226, 190, .5) 14px 15px,
                    transparent 15px 17px, rgba(240, 226, 190, .28) 17px 18px, transparent 18px),
    /* la bisagra, el surco donde la tapa se dobla sobre el lomo */
    linear-gradient(90deg, transparent 9px, rgba(0, 0, 0, .34) 9px 10px,
                    rgba(255, 255, 255, .12) 10px 11px, transparent 11px),
    /* el lomo, redondeado: filo, brillo y caída hacia la bisagra */
    linear-gradient(90deg, rgba(0, 0, 0, .28) 0 1px, rgba(255, 255, 255, .16) 1px 3px,
                    transparent 3px 6px, rgba(0, 0, 0, .1) 6px 9px, transparent 9px),
    /* un filo de luz en el canto de arriba, nada más: las tapas son mates */
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px),
    /* la tapa */
    linear-gradient(180deg, var(--tomo, #22333c), var(--tomo-b, #16242b));
  /* sombra de contacto: cada tomo se apoya sobre el de abajo */
  box-shadow: 0 3px 5px -2px rgba(15, 28, 34, .38);
  transform: rotate(var(--r, 0deg));
  animation: heroPilaCae .55s var(--ease) both;
  animation-delay: calc(.25s + var(--i, 0) * .18s);
}

/* El corte de las hojas: encajado en la derecha y con 2px de tapa por
   arriba y por abajo, que es justo lo que sobresalen las cubiertas */
.hero-pila__libro::before {
  content: "";
  position: absolute;
  right: 1px;
  top: 2px;
  bottom: 2px;
  width: 9px;
  border-radius: 1px 2px 2px 1px;
  background:
    repeating-linear-gradient(180deg, rgba(15, 28, 34, .12) 0 1px, transparent 1px 2px),
    linear-gradient(90deg, #cfc4a8, #f1e9d7 55%);
  box-shadow: inset 1px 0 2px rgba(15, 28, 34, .22);
}

.hero-pila__libro:nth-child(1) {
  bottom: 0; width: 118px; margin-left: -59px; --h: 21px;
  --tomo: #2c3e49; --tomo-b: #1d2b33;
}
.hero-pila__libro:nth-child(2) {
  bottom: 22px; width: 104px; margin-left: -56px; --h: 19px; --r: -2deg;
}
.hero-pila__libro:nth-child(3) {
  bottom: 42px; width: 110px; margin-left: -50px; --h: 17px; --r: 1.6deg;
  --tomo: #5f6e78; --tomo-b: #4a585f;
}

.hero-pila__libro--rojo { --tomo: #c8434a; --tomo-b: #a72930; }

/* Las gafas de pasta: dos lentes rectangulares de montura gruesa (la ceja
   más gruesa que el resto, como en las de pasta de verdad), el puente
   macizo y las patillas plegadas */
.hero-pila__gafas {
  position: absolute;
  left: 50%;
  bottom: 58px;
  width: 62px;
  height: 21px;
  margin-left: -31px;
  transform: rotate(-4deg);
  animation: heroPilaGafas .55s cubic-bezier(.2, .7, .3, 1.2) 1.15s both;
}

.hero-pila__gafas u {
  position: absolute;
  top: 0;
  width: 24px;
  height: 21px;
  border: 3px solid #16232a;
  border-top-width: 5px;
  border-radius: 5px 6px 7px 5px;
  background: linear-gradient(148deg, rgba(255, 255, 255, .6) 0 40%, rgba(214, 228, 235, .3) 40%);
}
.hero-pila__gafas u:first-child { left: 0; }
.hero-pila__gafas u:last-child { right: 0; }

/* El puente, una barra maciza entre las dos lentes */
.hero-pila__gafas::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 3px;
  height: 5px;
  border-radius: 2px;
  background: #16232a;
}

/* Las patillas, plegadas hacia fuera */
.hero-pila__gafas::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 5px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #16232a 0 10px, transparent 10px calc(100% - 10px), #16232a calc(100% - 10px));
}

@keyframes heroPilaCae {
  from { opacity: 0; transform: translateY(-22px) rotate(var(--r, 0deg)); }
  60%  { opacity: 1; transform: translateY(2px) rotate(var(--r, 0deg)); }
  to   { opacity: 1; transform: rotate(var(--r, 0deg)); }
}

@keyframes heroPilaGafas {
  from { opacity: 0; transform: translateY(-18px) rotate(7deg); }
  to   { opacity: 1; transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pila__libro, .hero-pila__gafas { animation: none; }
}
html.a11y-reduce-motion .hero-pila__libro,
html.a11y-reduce-motion .hero-pila__gafas { animation: none; }

/* ---------- Portada de Prensa: "El diario" ----------
   Estética de periódico dentro de la gama de la casa: columnas tenues de
   fondo, un titular con doble filete de cabecera y una cinta inferior a modo
   de teletipo de noticias. */
.hero--prensa {
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(44px, 7vh, 80px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

/* Columnas de periódico: filetes verticales muy tenues, desvanecidos al borde */
.hero--prensa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(90deg,
                    transparent 0 159px,
                    rgba(15, 28, 34, .05) 159px 160px);
  -webkit-mask-image: radial-gradient(120% 94% at 50% 30%, #000 42%, transparent 100%);
  mask-image: radial-gradient(120% 94% at 50% 30%, #000 42%, transparent 100%);
  pointer-events: none;
}

/* El resto de la primera plana: dos columnas de texto de periódico simulado
   (líneas grises a modo de galimatías de imprenta) flanqueando el titular */
.hero--prensa::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 44%;
  bottom: 10%;
  left: clamp(24px, 6vw, 96px);
  right: clamp(24px, 6vw, 96px);
  background:
    repeating-linear-gradient(180deg, rgba(15, 28, 34, .08) 0 3px, transparent 3px 11px) left top / clamp(120px, 14vw, 190px) 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(15, 28, 34, .08) 0 3px, transparent 3px 11px) right top / clamp(120px, 14vw, 190px) 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  pointer-events: none;
}

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas). */
.hero--prensa .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--prensa .hero__eyebrow::before,
.hero--prensa .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* El titular hace de cabecera del diario; los filetes los pone la pleca */
.hero--prensa .hero__title {
  position: relative;
  display: inline-block;
  font-size: clamp(3.6rem, 12vw, 8rem);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--ink);
}

/* La pleca de primera plana: fecha real, edición y precio entre filetes,
   como la línea de datos bajo la cabecera de un periódico */
.hero--prensa .hero-prensa__pleca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(720px, 92vw);
  margin: 26px auto 0;
  padding: 9px 4px;
  border-top: 2px solid rgba(15, 28, 34, .75);
  border-bottom: 1px solid rgba(15, 28, 34, .35);
  font-size: clamp(.6rem, 1.5vw, .78rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.hero--prensa .hero-prensa__pleca-num { color: var(--red); font-weight: 800; }

.hero--prensa .hero__claim {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 620px;
}

.hero--prensa .hero__ctas { margin-top: 38px; }

/* El botón baja al muro de recortes: una flecha lo sugiere */
.hero--prensa .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--prensa .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--prensa .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* Teletipo: banda con filetes arriba y abajo y titulares en negrita */
.hero--prensa .hero__ticker {
  margin-top: clamp(48px, 8vh, 84px);
  padding: 14px 0;
  border-top: 1px solid rgba(15, 28, 34, .14);
  border-bottom: 1px solid rgba(15, 28, 34, .14);
}

.hero--prensa .hero__ticker-item { font-weight: 700; }

/* El micrófono de rueda de prensa (SVG): cabeza de rejilla metálica, collarín
   rojo, mango y el cubo en perspectiva con el isotipo de la marca. Sube como si
   alguien lo acercara, el cubo cae y encaja, un destello recorre la rejilla y
   las ondas suenan una sola vez a cada lado; después se queda quieto. */
.hero-mic {
  /* Toda la paleta del micro vive aquí: los degradados del SVG la leen, así el
     modo noche solo tiene que cambiar estos valores. */
  --mic-metal-1: #85939b;
  --mic-metal-2: #34454e;
  --mic-metal-3: #16242b;
  --mic-mango-1: #55656e;
  --mic-mango-2: #22323a;
  --mic-mango-3: #0f1c22;
  --mic-mango-4: #46565f;
  --mic-cubo-1: #ffffff;
  --mic-cubo-2: #edf0f1;
  --mic-lado-1: #d7dde0;
  --mic-lado-2: #b6c0c5;
  --mic-linea: rgba(15, 28, 34, .45);
  --mic-rojo-1: #d2444a;
  --mic-rojo-2: #a2262c;
  --mic-suelo: rgba(15, 28, 34, .22);
  display: flex;
  justify-content: center;
  margin: 20px auto 0;
  pointer-events: none;
}

/* El micro se mide por su altura: así el dibujo manda y no la caja */
.hero-mic__svg {
  display: block;
  height: clamp(140px, 16vh, 172px);
  width: auto;
  overflow: visible;
}

/* Los degradados se pintan con las variables de arriba */
.hero-mic .mic-s-metal-1 { stop-color: var(--mic-metal-1); }
.hero-mic .mic-s-metal-2 { stop-color: var(--mic-metal-2); }
.hero-mic .mic-s-metal-3 { stop-color: var(--mic-metal-3); }
.hero-mic .mic-s-mango-1 { stop-color: var(--mic-mango-1); }
.hero-mic .mic-s-mango-2 { stop-color: var(--mic-mango-2); }
.hero-mic .mic-s-mango-3 { stop-color: var(--mic-mango-3); }
.hero-mic .mic-s-mango-4 { stop-color: var(--mic-mango-4); }
.hero-mic .mic-s-cubo-1 { stop-color: var(--mic-cubo-1); }
.hero-mic .mic-s-cubo-2 { stop-color: var(--mic-cubo-2); }
.hero-mic .mic-s-lado-1 { stop-color: var(--mic-lado-1); }
.hero-mic .mic-s-lado-2 { stop-color: var(--mic-lado-2); }
.hero-mic .mic-s-rojo-1 { stop-color: var(--mic-rojo-1); }
.hero-mic .mic-s-rojo-2 { stop-color: var(--mic-rojo-2); }

/* La sombra que apoya el micro en la página */
.hero-mic__suelo { fill: var(--mic-suelo); }

/* La cabeza: metal con la trama de puntos de la rejilla, un brillo redondeando
   el volumen y un filo claro arriba */
.hero-mic__cabeza { fill: url(#micCabezaGrad); }
.hero-mic__malla { fill: url(#micRejillaPat); }
.hero-mic__luz { fill: url(#micLuzGrad); }
.hero-mic__hondo { fill: url(#micHondoGrad); }
.hero-mic__cabeza-borde {
  fill: none;
  stroke: rgba(255, 255, 255, .22);
  stroke-width: 1.2;
}

/* El collarín rojo de la marca entre la cabeza y el mango, y el aro cromado */
.hero-mic__anilla { fill: url(#micRojoGrad); }
.hero-mic__anilla-luz { fill: rgba(255, 255, 255, .32); }
.hero-mic__cromo { fill: url(#micCromoGrad); }

/* El mango: cilindro de metal con su reflejo */
.hero-mic__mango { fill: url(#micMangoGrad); }
.hero-mic__mango-luz { fill: rgba(255, 255, 255, .13); }

/* El cubo del micro, el que sale en las fotos de las entrevistas: cara blanca
   con la banda roja y el isotipo, más tapa y costado en perspectiva. El mango
   lo atraviesa: por eso la tapa tiene su agujero, el metal asoma por él y el
   labio del agujero vuelve a pasar por delante. */
.hero-mic__hueco { fill: rgba(15, 28, 34, .82); }
.hero-mic__mango-cubo { fill: url(#micMangoGrad); }
.hero-mic__hueco-labio { fill: var(--mic-rojo-2); }
.hero-mic__cubo-cara { fill: url(#micCuboGrad); }
.hero-mic__cubo-banda { fill: url(#micRojoGrad); }
.hero-mic__cubo-tapa { fill: var(--mic-rojo-1); }
.hero-mic__cubo-lado-banda { fill: var(--mic-rojo-2); }
.hero-mic__cubo-lado { fill: url(#micLadoGrad); }
.hero-mic__cubo-borde {
  fill: none;
  stroke: var(--mic-linea);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

/* La coreografía: alguien te acerca el micro. Entra pequeño y desenfocado,
   crece hacia ti, se pasa un pelín y se planta; ya plantado, un destello
   recorre la rejilla y suenan las ondas. Todo una sola vez.
   El acercamiento y el enfoque van en dos animaciones a la vez a propósito:
   así el rebote del final (la curva que se pasa de 1) solo afecta al tamaño y
   no parte en dos el desenfoque. */
.hero-mic__svg { transform-origin: 50% 62%; }

.hero-mic.visible .hero-mic__svg {
  animation:
    heroMicAcerca .85s cubic-bezier(.2, 1.36, .36, 1) .05s both,
    heroMicEnfoca .5s ease-out .05s both;
}

.hero-mic__destello { fill: url(#micBrilloGrad); opacity: 0; }

.hero-mic.visible .hero-mic__destello {
  animation: heroMicDestello 1s cubic-bezier(.4, 0, .2, 1) .9s both;
}

.hero-mic__onda {
  --o: calc(.62 - var(--i) * .2);
  fill: none;
  stroke: var(--red);
  stroke-width: calc(3.4 - var(--i) * .6);
  stroke-linecap: round;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 120px 46px;
}

.hero-mic.visible .hero-mic__onda {
  animation: heroMicOnda .75s var(--ease) calc(.95s + var(--i) * .16s) both;
}

/* Se acerca a ti: entra pequeño, crece, se pasa un pelín y se asienta */
@keyframes heroMicAcerca {
  from { transform: scale(.42) translateY(22px); }
  to { transform: scale(1) translateY(0); }
}

/* …y de paso entra en foco, como una cámara que ajusta */
@keyframes heroMicEnfoca {
  from { opacity: 0; filter: blur(7px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes heroMicDestello {
  from { opacity: 0; transform: translateX(-10px) skewX(-14deg); }
  35% { opacity: 1; }
  to { opacity: 0; transform: translateX(84px) skewX(-14deg); }
}

@keyframes heroMicOnda {
  from { opacity: 0; transform: scale(.62); }
  60% { opacity: 1; }
  to { opacity: var(--o); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mic__svg, .hero-mic__destello, .hero-mic__onda { animation: none; }
  .hero-mic__onda { opacity: var(--o); transform: scale(1); }
}
html.a11y-reduce-motion .hero-mic__svg,
html.a11y-reduce-motion .hero-mic__destello,
html.a11y-reduce-motion .hero-mic__onda { animation: none; }
html.a11y-reduce-motion .hero-mic__onda { opacity: var(--o); transform: scale(1); }

/* ---------- Cabecera de Blog: "El cuaderno" ----------
   Fondo de cuaderno de puntos (bullet journal), en la gama de la casa, y un
   cursor de escritura que parpadea tras el título: ideas en proceso. */
.hero--cuaderno {
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(48px, 8vh, 92px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

/* Cuaderno de puntos: rejilla de puntos tenue, desvanecida hacia los bordes */
.hero--cuaderno::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(15, 28, 34, .12) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(115% 92% at 50% 30%, #000 42%, transparent 100%);
  mask-image: radial-gradient(115% 92% at 50% 30%, #000 42%, transparent 100%);
  pointer-events: none;
}

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas) */
.hero--cuaderno .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--cuaderno .hero__eyebrow::before,
.hero--cuaderno .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Título con un cursor de escritura que parpadea, como un editor de texto */
.hero--cuaderno .hero__title {
  display: inline-block;
  font-size: clamp(3.2rem, 10vw, 7rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ink);
}

.hero--cuaderno .hero__title::after {
  content: "";
  display: inline-block;
  width: .07em;
  height: .82em;
  margin-left: .1em;
  background: var(--red);
  vertical-align: -.02em;
  animation: caret-blink 1.1s steps(1) infinite;
}

@keyframes caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* El garabato: dos pasadas de subrayado a mano que se dibujan solas bajo
   el título, a juego con el nombre del blog (pathLength=1 normaliza el
   trazo para animarlo con dasharray/dashoffset). */
.hero--cuaderno .hero-cuaderno__garabato {
  width: clamp(210px, 34vw, 360px);
  margin: 0 auto;
}

.hero--cuaderno .hero-cuaderno__garabato svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero--cuaderno .hero-cuaderno__garabato path {
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: garabato-trazo 1.1s cubic-bezier(.55, 0, .35, 1) .5s forwards;
}

@keyframes garabato-trazo {
  to { stroke-dashoffset: 0; }
}

.hero--cuaderno .hero__claim {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 640px;
}

.hero--cuaderno .hero__ctas { margin-top: 38px; }

/* El botón baja a los artículos: una flecha lo sugiere */
.hero--cuaderno .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--cuaderno .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--cuaderno .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* ---------- Cabecera de "Sobre mí": "La firma" ----------
   Carácter personal en la gama de la casa: un halo cálido tras el nombre y
   una rúbrica roja dibujada que lo firma por debajo. */
.hero--firma {
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(48px, 8vh, 92px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

/* Halo suave tras el nombre (foco de retrato) sobre un papel de carta:
   una pauta de renglones muy tenue que se desvanece hacia los bordes */
.hero--firma::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 48% at 50% 36%, rgba(194, 51, 57, .07), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 46px, rgba(15, 28, 34, .045) 46px 47px);
  -webkit-mask-image: radial-gradient(110% 92% at 50% 32%, #000 34%, transparent 100%);
  mask-image: radial-gradient(110% 92% at 50% 32%, #000 34%, transparent 100%);
  pointer-events: none;
}

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas) */
.hero--firma .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--firma .hero__eyebrow::before,
.hero--firma .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* El nombre, sin subrayado bajo él */
.hero--firma .hero__title {
  position: relative;
  display: inline-block;
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--ink);
}

.hero--firma .hero__claim {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 620px;
}

.hero--firma .hero__ctas { margin-top: 38px; }

/* El botón baja al chat de IA: una flecha lo sugiere */
.hero--firma .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--firma .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--firma .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* ---------- el adorno: la mochila del profe ----------
   Dibujada en vectorial (SVG) con los colores de la casa: lona roja con
   costuras y refuerzo en la base, tirantes de tinta con hebilla de
   metal, asa, cremallera curva con dientes y tirador, bolsillo con el
   parche del play y, asomando por arriba, la libreta y el lapicero.
   La secuencia: cae con su rebote, asoman libreta y lapicero, el
   tirador recorre la cremallera, el parche aparece con un pop y un
   brillo cruza la lona. Cada cosa UNA vez, sin bucles; con «reducir
   movimiento» se ve ya colocada. */
.hero-moch {
  display: block;
  width: 132px;
  height: auto;
  margin: 20px auto 2px;
  overflow: visible;
  animation: heroMochCae .72s cubic-bezier(.3, .8, .3, 1.12) .25s both;
}

.hero-moch__sombra { fill: rgba(15, 28, 34, .2); }

/* Tela y herrajes: la tinta de la casa para tirantes, asa y bolsillo */
.hero-moch__tinta { fill: url(#mochTinta); }

.hero-moch__correas path {
  fill: none;
  stroke: url(#mochTinta);
  stroke-width: 8.5;
  stroke-linecap: round;
}

.hero-moch__asa {
  fill: none;
  stroke: url(#mochTinta);
  stroke-width: 5.4;
  stroke-linecap: round;
}

/* Un filo de luz sobre el asa, para que no sea un bulto plano */
.hero-moch__asa--luz {
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 1.4;
  transform: translateY(-1.4px);
}

/* Las costuras: hilo claro de puntada corrida sobre la lona */
.hero-moch__costura {
  fill: none;
  stroke: rgba(255, 255, 255, .42);
  stroke-width: 1.1;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
}

.hero-moch__costura--fina {
  stroke: rgba(255, 255, 255, .22);
  stroke-width: .9;
  stroke-dasharray: 2.2 2.6;
}

/* La cremallera: cinta de tinta y, encima, los dientes */
.hero-moch__cinta {
  fill: none;
  stroke: #22333c;
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: .72;
}

.hero-moch__dientes {
  fill: none;
  stroke: #eff4f6;
  stroke-width: 2.8;
  stroke-dasharray: .9 2;
  opacity: .9;
}

.hero-moch__dientes--pequeno {
  stroke-width: 2.4;
  stroke-dasharray: 1 1.9;
  opacity: .75;
}

/* El tirador viaja por la cremallera (offset-path) UNA vez y se queda */
.hero-moch__tirador {
  offset-path: path("M31.5 64Q64 75 96.5 64");
  offset-rotate: 0deg;
  offset-distance: 100%;
  transform-box: fill-box;
  animation: heroMochZip .62s cubic-bezier(.45, .05, .3, 1) 1.18s both;
}

/* Refuerzo de la base: una franja más oscura recortada al cuerpo */
.hero-moch__brillo {
  opacity: 0;
  animation: heroMochBrillo .9s ease-out 1.95s both;
}

/* Libreta y lapicero asoman por detrás del cuerpo */
.hero-moch__libreta,
.hero-moch__lapiz { transform-box: fill-box; }

.hero-moch__libreta { transform: rotate(-9deg); transform-origin: 50% 100%; }
.hero-moch__lapiz   { transform: rotate(10deg); transform-origin: 50% 100%; }

.hero-moch__libreta > g {
  transform-box: fill-box;
  animation: heroMochAsoma .55s cubic-bezier(.2, .8, .3, 1.05) .95s both;
}

.hero-moch__lapiz > g {
  transform-box: fill-box;
  animation: heroMochAsoma .55s cubic-bezier(.2, .8, .3, 1.05) 1.06s both;
}

/* El parche del play aparece con un pop, como cosido de golpe */
.hero-moch__parche {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 3px rgba(10, 18, 22, .45));
  animation: heroMochPlay .42s cubic-bezier(.2, .7, .3, 1.55) 1.72s both;
}

/* Cae de lado, aterriza y se asienta con un punto de peso */
@keyframes heroMochCae {
  from { opacity: 0; transform: translateY(-26px) rotate(-4deg); }
  55%  { opacity: 1; transform: translateY(3px) rotate(1deg) scaleY(.97); }
  78%  { transform: translateY(-2px) rotate(-.5deg) scaleY(1.01); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroMochZip {
  from { offset-distance: 2%; }
  to   { offset-distance: 100%; }
}

@keyframes heroMochAsoma {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes heroMochPlay {
  from { opacity: 0; transform: scale(0) rotate(-12deg); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroMochBrillo {
  from { opacity: 0; transform: translateX(0); }
  25%  { opacity: 1; }
  to   { opacity: 0; transform: translateX(160px); }
}

@media (max-width: 640px) {
  .hero-moch { width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-moch, .hero-moch__tirador, .hero-moch__libreta > g,
  .hero-moch__lapiz > g, .hero-moch__parche, .hero-moch__brillo { animation: none; }
}
html.a11y-reduce-motion .hero-moch,
html.a11y-reduce-motion .hero-moch__tirador,
html.a11y-reduce-motion .hero-moch__libreta > g,
html.a11y-reduce-motion .hero-moch__lapiz > g,
html.a11y-reduce-motion .hero-moch__parche,
html.a11y-reduce-motion .hero-moch__brillo { animation: none; }

/* ---------- Cabecera de Asistentes: "El taller" ----------
   Conecta con El Taller del Inventor (blueprint) que viene debajo, pero en
   claro: esquinas de encuadre técnico y una retícula muy tenue, como la ficha
   de montaje de un asistente. */
.hero--taller {
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(48px, 8vh, 92px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

/* Retícula muy tenue de fondo */
.hero--taller::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(15, 28, 34, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 28, 34, .04) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(112% 92% at 50% 30%, #000 38%, transparent 100%);
  mask-image: radial-gradient(112% 92% at 50% 30%, #000 38%, transparent 100%);
  pointer-events: none;
}

/* Esquinas de encuadre, como una ficha técnica de montaje */
.hero--taller::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 4vw, 46px);
  z-index: -1;
  --bk: 2px;
  --ln: 26px;
  --kc: rgba(15, 28, 34, .28);
  background:
    linear-gradient(var(--kc), var(--kc)) left  top    / var(--ln) var(--bk) no-repeat,
    linear-gradient(var(--kc), var(--kc)) left  top    / var(--bk) var(--ln) no-repeat,
    linear-gradient(var(--kc), var(--kc)) right top    / var(--ln) var(--bk) no-repeat,
    linear-gradient(var(--kc), var(--kc)) right top    / var(--bk) var(--ln) no-repeat,
    linear-gradient(var(--kc), var(--kc)) left  bottom / var(--ln) var(--bk) no-repeat,
    linear-gradient(var(--kc), var(--kc)) left  bottom / var(--bk) var(--ln) no-repeat,
    linear-gradient(var(--kc), var(--kc)) right bottom / var(--ln) var(--bk) no-repeat,
    linear-gradient(var(--kc), var(--kc)) right bottom / var(--bk) var(--ln) no-repeat;
  pointer-events: none;
}

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas) */
.hero--taller .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--taller .hero__eyebrow::before,
.hero--taller .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.hero--taller .hero__title {
  font-size: clamp(3.6rem, 12vw, 8rem);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--ink);
}

.hero--taller .hero__claim {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 620px;
}

.hero--taller .hero__ctas { margin-top: 38px; }

/* El botón baja a la guía de montaje: una flecha lo sugiere */
.hero--taller .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--taller .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--taller .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* ---------- el adorno: el autómata del plano ----------
   El mismo robot que la sección de abajo abre en despiece, aquí entero y
   dibujado a línea sobre el papel del plano: sin marco, sin tarjeta. Se
   monta solo por orden —tronco, núcleo, cabeza, brazos, rueda y antena—,
   se le enciende la luz y abre los ojos con un parpadeo. Una sola pasada;
   con «reducir movimiento» aparece ya montado y encendido. */
.hero-tal__plano {
  --tal-linea: rgba(15, 28, 34, .8);
  --tal-suave: rgba(15, 28, 34, .22);
  --tal-luz: var(--red);
  display: block;
  width: clamp(160px, 18vw, 205px);
  margin: 26px auto 6px;
}

.hero-tal__plano svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* los ejes del plano: eje de simetría y línea de suelo. El eje se corta
   por encima de la rueda para no atravesarla ni cruzarse con sus radios */
.hero-tal__cota {
  fill: none;
  stroke: var(--tal-suave);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  opacity: 0;
  animation: heroTalCota .7s var(--ease) .1s forwards;
}

/* cada pieza se dibuja sola, por orden (--d es su turno) */
.hero-tal__trazo {
  fill: none;
  stroke: var(--tal-linea);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: heroTalTrazo .8s var(--ease) calc(.2s + var(--d, 0) * .13s) forwards;
}

.hero-tal__fina { stroke-width: 1.4; }

/* la rueda, ya dibujada, da un cuarto de vuelta y se para: como los radios
   están en aspa, acaba igual que empezó. Una sola pasada */
.hero-tal__rueda {
  transform-box: view-box;
  transform-origin: 110px 222px;
  animation: heroTalRueda 1.1s var(--ease) 1.95s forwards;
}

@keyframes heroTalRueda {
  from { transform: rotate(0deg); }
  to   { transform: rotate(90deg); }
}

/* manos y buje: encajan con un golpe seco */
.hero-tal__pieza {
  fill: var(--tal-linea);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: heroTalPieza .45s var(--ease) calc(.55s + var(--d, 0) * .13s) forwards;
}

/* los ojos se encienden y saludan con un parpadeo */
.hero-tal__ojo {
  fill: var(--tal-linea);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: heroTalOjo 1.5s var(--ease) 1.45s forwards;
}

/* el piloto del pecho y la bombilla de la antena: rojo de marca */
.hero-tal__nucleo {
  fill: var(--tal-luz);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: heroTalPieza .45s var(--ease) 1.1s forwards;
}

.hero-tal__luz {
  fill: var(--tal-luz);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: heroTalLuz 1s var(--ease) 1.85s forwards;
}

@keyframes heroTalCota {
  to { opacity: 1; }
}

@keyframes heroTalTrazo {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes heroTalPieza {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes heroTalOjo {
  0%   { opacity: 0; transform: scale(0); }
  14%  { opacity: 1; transform: scale(1.3); }
  22%  { transform: scale(1); }
  60%  { transform: scaleY(1); }
  68%  { transform: scaleY(.1); }
  76%  { transform: scaleY(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes heroTalLuz {
  0%   { opacity: 0; transform: scale(.2); filter: none; }
  40%  { opacity: 1; transform: scale(1.5); filter: drop-shadow(0 0 14px rgba(212, 73, 79, .9)); }
  70%  { transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 8px rgba(212, 73, 79, .55)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tal__trazo { stroke-dashoffset: 0; }
  .hero-tal__cota,
  .hero-tal__pieza,
  .hero-tal__ojo,
  .hero-tal__nucleo,
  .hero-tal__luz { opacity: 1; }
  .hero-tal__trazo, .hero-tal__cota, .hero-tal__pieza, .hero-tal__rueda,
  .hero-tal__ojo, .hero-tal__nucleo, .hero-tal__luz { animation: none; }
}
html.a11y-reduce-motion .hero-tal__trazo { stroke-dashoffset: 0; }
html.a11y-reduce-motion .hero-tal__cota,
html.a11y-reduce-motion .hero-tal__pieza,
html.a11y-reduce-motion .hero-tal__ojo,
html.a11y-reduce-motion .hero-tal__nucleo,
html.a11y-reduce-motion .hero-tal__luz { opacity: 1; }
html.a11y-reduce-motion .hero-tal__trazo,
html.a11y-reduce-motion .hero-tal__cota,
html.a11y-reduce-motion .hero-tal__pieza,
html.a11y-reduce-motion .hero-tal__rueda,
html.a11y-reduce-motion .hero-tal__ojo,
html.a11y-reduce-motion .hero-tal__nucleo,
html.a11y-reduce-motion .hero-tal__luz { animation: none; }

/* ---------- Cabecera de El MAPA: el roundel de la línea ----------
   La cabecera muestra el roundel MAPA como una placa de estación, con un halo
   suave detrás y la descripción de la línea del aprendizaje. */
.hero--mapa {
  position: relative;
  isolation: isolate;
  padding: clamp(92px, 13vh, 152px) var(--gutter) clamp(48px, 8vh, 92px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

/* Halo suave tras la portada y, muy al fondo, otras "líneas" del plano de
   metro cruzando en diagonal, como en un plano de transporte de verdad */
.hero--mapa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(42% 34% at 50% 22%, rgba(194, 51, 57, .08), transparent 70%),
    linear-gradient(32deg, transparent 49.8%, rgba(15, 28, 34, .06) 49.8% 50.2%, transparent 50.2%),
    linear-gradient(-21deg, transparent 49.75%, rgba(194, 51, 57, .07) 49.75% 50.25%, transparent 50.25%),
    linear-gradient(76deg, transparent 49.85%, rgba(15, 28, 34, .045) 49.85% 50.15%, transparent 50.15%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 30%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 30%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* La carta plegada bajo el título: se dibuja sola y por su senda van cayendo
   las cuatro paradas M·A·P·A. Una sola pasada al entrar en pantalla y se
   queda terminada (sin bucles). */
.hero--mapa .hero-mapa__ico {
  width: min(230px, 58vw);
  margin: 28px auto 6px;
}

.hero--mapa .hero-mapa__ico svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 26px rgba(194, 51, 57, .18));
}

.hero--mapa .hero-mapa__carta,
.hero--mapa .hero-mapa__pliegue,
.hero--mapa .hero-mapa__senda {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero--mapa .hero-mapa__carta {
  stroke: var(--ink);
  stroke-width: 2.6;
  opacity: .55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hero--mapa .hero-mapa__pliegue {
  stroke: var(--ink);
  stroke-width: 1.6;
  opacity: .25;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hero--mapa .hero-mapa__senda {
  stroke: var(--red);
  stroke-width: 2.8;
  stroke-dasharray: 1.6 5;
  stroke-dashoffset: 120;
}

.hero--mapa .hero-mapa__parada {
  opacity: 0;
  transform: scale(.2);
  transform-box: fill-box;
  transform-origin: center;
}

.hero--mapa .hero-mapa__parada circle { fill: var(--red); }
.hero--mapa .hero-mapa__parada text {
  fill: #fff;
  font: 800 8.4px/1 var(--font-display);
}

.hero--mapa .hero-mapa__ico.visible .hero-mapa__carta { animation: hero-mapa-trazo 1.5s var(--ease) .2s forwards; }
.hero--mapa .hero-mapa__ico.visible .hero-mapa__pliegue { animation: hero-mapa-trazo .9s var(--ease) .7s forwards; }
.hero--mapa .hero-mapa__ico.visible .hero-mapa__senda { animation: hero-mapa-senda 1.5s linear 1.1s forwards; }
.hero--mapa .hero-mapa__ico.visible .hero-mapa__parada { animation: hero-mapa-parada .6s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.hero--mapa .hero-mapa__ico.visible .hero-mapa__parada--1 { animation-delay: 1.35s; }
.hero--mapa .hero-mapa__ico.visible .hero-mapa__parada--2 { animation-delay: 1.65s; }
.hero--mapa .hero-mapa__ico.visible .hero-mapa__parada--3 { animation-delay: 1.95s; }
.hero--mapa .hero-mapa__ico.visible .hero-mapa__parada--4 { animation-delay: 2.25s; }

@keyframes hero-mapa-trazo { to { stroke-dashoffset: 0; } }
@keyframes hero-mapa-senda { to { stroke-dashoffset: 0; } }
@keyframes hero-mapa-parada { to { opacity: 1; transform: none; } }

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas) */
.hero--mapa .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--mapa .hero__eyebrow::before,
.hero--mapa .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.hero--mapa .hero__title {
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.03em;
  padding-bottom: .08em;
  background: linear-gradient(178deg, var(--ink) 18%, #36474f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* La descripción de la línea: párrafo legible, no un claim corto */
.hero--mapa .hero__claim {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 720px;
}

.hero--mapa .hero__ctas { margin-top: 34px; }

/* El botón sube a la línea: una flecha lo sugiere */
.hero--mapa .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--mapa .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--mapa .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* ---------- Cabecera de la Biblioteca de prompts: "[ corchetes ]" ----------
   Los prompts están llenos de [marcadores] entre corchetes; la cabecera
   enmarca el título entre dos corchetes rojos, como un placeholder. */
.hero--prompts {
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(48px, 8vh, 92px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas) */
.hero--prompts .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--prompts .hero__eyebrow::before,
.hero--prompts .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Título enmarcado entre dos corchetes rojos, como un [marcador] de prompt */
.hero--prompts .hero__title {
  position: relative;
  display: inline-block;
  font-size: clamp(3.6rem, 12vw, 8rem);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--ink);
  padding: 0 clamp(26px, 5vw, 58px);
}

.hero--prompts .hero__title::before,
.hero--prompts .hero__title::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(13px, 1.8vw, 22px);
  height: 84%;
  border: clamp(3px, .5vw, 5px) solid var(--red);
}

.hero--prompts .hero__title::before {
  left: 0;
  border-right: none;
}

.hero--prompts .hero__title::after {
  right: 0;
  border-left: none;
}

.hero--prompts .hero__claim {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 620px;
}

.hero--prompts .hero__ctas { margin-top: 38px; }

/* El botón baja a la biblioteca: una flecha lo sugiere */
.hero--prompts .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--prompts .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--prompts .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* ---------- el adorno: la balda en miniatura ----------
   Una balda del mueble de la Estantería bajo el título: los seis lomos
   —los tonos de encuadernación de los módulos— se colocan UNO a uno
   sobre la tabla de tinta y el granate de marca queda ladeado, como un
   libro recién consultado. Sin bucles; con «reducir movimiento» la
   balda aparece ya ordenada. */
.hero-bib__balda {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: flex-end;
  gap: 6px;
  margin: 22px auto 4px;
  padding: 18px 22px 16px;
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f1f2f4);
  box-shadow: 0 14px 34px rgba(15, 28, 34, .1), inset 0 1px 0 #fff;
}

/* La tabla de la balda, en tinta como el mueble del videoclub */
.hero-bib__balda::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #223038, #0f1c22);
}

/* Cada lomo trae su tono en --c, su altura en --a y su turno en --i
   (los pone app.js); el tejuelo es la vitola clara de la base. */
.hero-bib__lomo {
  width: 15px;
  height: var(--a, 48px);
  margin-bottom: 5px;
  border-radius: 3px 3px 1px 1px;
  background:
    linear-gradient(180deg, transparent calc(100% - 14px), rgba(255, 255, 255, .45) calc(100% - 14px) calc(100% - 10px), transparent calc(100% - 10px)),
    linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .28)),
    var(--c, #55606a);
  box-shadow: 0 4px 8px rgba(15, 28, 34, .2);
  transform-origin: 50% 100%;
  animation: heroBibColoca .55s cubic-bezier(.2, .7, .3, 1.2) both;
  animation-delay: calc(.25s + var(--i, 0) * .11s);
}

/* El granate de marca queda asomado, apoyado en su vecino */
.hero-bib__lomo--fuera {
  transform: rotate(-9deg) translateY(-2px);
  animation-name: heroBibSaca;
}

@keyframes heroBibColoca {
  from { opacity: 0; transform: translateY(-18px); }
  60%  { opacity: 1; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroBibSaca {
  from { opacity: 0; transform: translateY(-18px); }
  45%  { opacity: 1; transform: translateY(2px); }
  70%  { transform: none; }
  to   { opacity: 1; transform: rotate(-9deg) translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bib__lomo { animation: none; }
}
html.a11y-reduce-motion .hero-bib__lomo { animation: none; }

/* ---------- Cabecera de Recursos: "El índice" ----------
   Portada clara y luminosa que reúne las tres vías (prompts, MAPA y
   asistentes). Antetítulo flanqueado por dos puntos como el resto de
   portadas, y un sutil acento rojo bajo el título. */
.hero--recursos {
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(48px, 8vh, 92px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

.hero--recursos .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--recursos .hero__eyebrow::before,
.hero--recursos .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.hero--glosario .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  white-space: nowrap;
}

.hero--glosario .hero__eyebrow::before,
.hero--glosario .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.hero--recursos .hero__title {
  position: relative;
  display: inline-block;
  font-size: clamp(3rem, 8.5vw, 6rem);
  line-height: .95;
  letter-spacing: -.03em;
  padding-bottom: .08em;
  background: linear-gradient(178deg, var(--ink) 18%, #36474f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Los cuatro recursos de la página, anticipados en la cabecera: sus mismos
   iconos (prompts, MAPA, asistentes y glosario) flotan tenues alrededor del
   título, cada uno con su ligera inclinación; el MAPA, en rojo */
.hero-rec__utiles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-rec__util {
  position: absolute;
  color: rgba(15, 28, 34, .26);
}

.hero-rec__util svg { display: block; width: 100%; height: 100%; }

.hero-rec__util--prompts {
  top: 24%;
  left: clamp(6%, 14vw, 18%);
  width: clamp(30px, 3.4vw, 44px);
  height: clamp(30px, 3.4vw, 44px);
  transform: rotate(-12deg);
}

.hero-rec__util--mapa {
  top: 22%;
  right: clamp(6%, 14vw, 18%);
  width: clamp(32px, 3.6vw, 48px);
  height: clamp(32px, 3.6vw, 48px);
  transform: rotate(10deg);
  color: rgba(194, 51, 57, .5);
}

.hero-rec__util--asistentes {
  bottom: 20%;
  left: clamp(8%, 15vw, 20%);
  width: clamp(34px, 3.8vw, 50px);
  height: clamp(34px, 3.8vw, 50px);
  transform: rotate(8deg);
}

.hero-rec__util--glosario {
  bottom: 24%;
  right: clamp(8%, 15vw, 20%);
  width: clamp(32px, 3.6vw, 46px);
  height: clamp(32px, 3.6vw, 46px);
  transform: rotate(-9deg);
}

/* …y los nueve que faltaban: la constelación completa de los 13 recursos,
   repartida por las bandas laterales sin pisar el título ni el texto */
.hero-rec__util--pensamiento {
  top: 9%;
  left: clamp(4%, 8vw, 10%);
  width: clamp(28px, 3.2vw, 42px);
  height: clamp(28px, 3.2vw, 42px);
  transform: rotate(-8deg);
}

.hero-rec__util--historias {
  top: 8%;
  right: clamp(4%, 8vw, 10%);
  width: clamp(28px, 3.2vw, 42px);
  height: clamp(28px, 3.2vw, 42px);
  transform: rotate(11deg);
}

.hero-rec__util--dua {
  top: 38%;
  left: clamp(2%, 5vw, 7%);
  width: clamp(30px, 3.4vw, 44px);
  height: clamp(30px, 3.4vw, 44px);
  transform: rotate(6deg);
}

.hero-rec__util--ecualizador {
  top: 56%;
  left: clamp(5%, 11vw, 14%);
  width: clamp(28px, 3.2vw, 42px);
  height: clamp(28px, 3.2vw, 42px);
  transform: rotate(-7deg);
}

.hero-rec__util--evidencias {
  top: 38%;
  right: clamp(2%, 5vw, 7%);
  width: clamp(30px, 3.4vw, 44px);
  height: clamp(30px, 3.4vw, 44px);
  transform: rotate(-6deg);
}

.hero-rec__util--diferenciador {
  top: 56%;
  right: clamp(5%, 11vw, 14%);
  width: clamp(28px, 3.2vw, 42px);
  height: clamp(28px, 3.2vw, 42px);
  transform: rotate(8deg);
}

.hero-rec__util--panel {
  bottom: 8%;
  left: clamp(1.5%, 4vw, 6%);
  width: clamp(30px, 3.4vw, 44px);
  height: clamp(30px, 3.4vw, 44px);
  transform: rotate(7deg);
}

.hero-rec__util--creatividad {
  bottom: 7%;
  left: clamp(9%, 16vw, 21%);
  width: clamp(28px, 3.2vw, 42px);
  height: clamp(28px, 3.2vw, 42px);
  transform: rotate(-11deg);
  color: rgba(194, 51, 57, .45);
}

.hero-rec__util--diseno {
  bottom: 7%;
  right: clamp(6%, 12vw, 16%);
  width: clamp(28px, 3.2vw, 42px);
  height: clamp(28px, 3.2vw, 42px);
  transform: rotate(9deg);
}

.hero--recursos .hero__claim {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 620px;
}

.hero--recursos .hero__ctas { margin-top: 38px; }

/* El botón baja a los materiales: una flecha lo sugiere */
.hero--recursos .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--recursos .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--recursos .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* ---------- el adorno: el cajón del índice ----------
   Un cajón de archivador bajo el título: llega, y de su ranura asoman
   tres fichas UNA a una, la del medio con la pestaña roja del índice.
   Sin bucles; con «reducir movimiento» las fichas ya están fuera. */
.hero-fich__archivo {
  position: relative;
  display: block;
  width: 118px;
  margin: 22px auto 4px;
  animation: heroFichCae .6s var(--ease) .25s both;
}

/* La ranura: las fichas suben desde detrás del cajón */
.hero-fich__fichas {
  position: relative;
  display: block;
  height: 46px;
  margin: 0 12px;
  overflow: hidden;
}

.hero-fich__ficha {
  position: absolute;
  bottom: -5px;
  width: 30px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #ffffff, #eef0f2);
  box-shadow: inset 0 0 0 1.5px rgba(15, 28, 34, .32);
  animation: heroFichSube .55s var(--ease) both;
  animation-delay: calc(.75s + var(--i, 0) * .16s);
}
.hero-fich__ficha:nth-child(1) { left: 3px; height: 36px; }
.hero-fich__ficha:nth-child(2) { left: 32px; height: 47px; z-index: 1; }
.hero-fich__ficha:nth-child(3) { left: 61px; height: 31px; }

/* La pestaña de cada ficha, y sus renglones */
.hero-fich__ficha::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 5px;
  width: 12px;
  height: 4px;
  border-radius: 3px;
  background: rgba(15, 28, 34, .35);
}
.hero-fich__ficha:nth-child(3)::before { left: auto; right: 5px; }

.hero-fich__ficha::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 13px;
  height: 15px;
  background: repeating-linear-gradient(180deg, rgba(15, 28, 34, .2) 0 2px, transparent 2px 6px);
}

.hero-fich__ficha--roja::before { background: var(--red); }

/* El frente del cajón, con su marbete y su tirador */
.hero-fich__cajon {
  position: relative;
  z-index: 2;
  display: block;
  height: 54px;
  border-radius: 10px;
  background: linear-gradient(180deg, #33424b, #16232a);
  box-shadow: 0 14px 30px rgba(15, 28, 34, .25), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.hero-fich__cajon b {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 30px;
  height: 6px;
  margin-left: -15px;
  border-radius: 6px;
  background: linear-gradient(180deg, #9aa8b0, #55646d);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}

.hero-fich__cajon u {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 34px;
  height: 14px;
  margin-left: -17px;
  border-radius: 3px;
  background: #f6f7f8;
  box-shadow: inset 0 0 0 1.5px rgba(15, 28, 34, .4);
}

.hero-fich__cajon u::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 5px;
  height: 3.5px;
  border-radius: 2px;
  background: var(--red);
}

@keyframes heroFichCae {
  from { opacity: 0; transform: translateY(-14px); }
  60%  { opacity: 1; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroFichSube {
  from { transform: translateY(110%); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fich__archivo, .hero-fich__ficha { animation: none; }
}
html.a11y-reduce-motion .hero-fich__archivo,
html.a11y-reduce-motion .hero-fich__ficha { animation: none; }

/* ---------- Cabecera de Bio y recursos: "El dossier" ----------
   Kit de prensa: la cabecera se enmarca con un filete fino, como la cubierta
   de un dossier de medios. */
/* ---------- Portada del kit de prensa: "Dossier / carnet" ----------
   Cabecera clara y sobria: papel con una trama de puntos tenue y un marco
   de esquinas (a modo de carnet o visor) que enmarca el contenido. El color
   se reserva para el antetítulo; el contraste fuerte llega en la banda
   oscura de biografía que viene justo después. */
.hero--kit {
  position: relative;
  isolation: isolate;
  padding: clamp(116px, 16vh, 192px) var(--gutter) clamp(60px, 9vh, 108px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 54%, var(--gray-bg) 100%);
}

/* Trama de puntos sutil, desvanecida hacia los bordes */
.hero--kit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(15, 28, 34, .05) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(78% 68% at 50% 34%, #000 0%, transparent 74%);
  mask-image: radial-gradient(78% 68% at 50% 34%, #000 0%, transparent 74%);
  pointer-events: none;
}

/* Marco de esquinas: cuatro escuadras dibujadas con degradados */
.hero-kit__frame {
  position: absolute;
  z-index: -1;
  inset: clamp(30px, 5vh, 60px) clamp(26px, 6vw, 96px);
  border-radius: 30px;
  pointer-events: none;
  --bw: 1.5px;
  --bl: 36px;
  --bc: rgba(15, 28, 34, .22);
  background:
    linear-gradient(var(--bc), var(--bc)) 0 0 / var(--bl) var(--bw),
    linear-gradient(var(--bc), var(--bc)) 0 0 / var(--bw) var(--bl),
    linear-gradient(var(--bc), var(--bc)) 100% 0 / var(--bl) var(--bw),
    linear-gradient(var(--bc), var(--bc)) 100% 0 / var(--bw) var(--bl),
    linear-gradient(var(--bc), var(--bc)) 0 100% / var(--bl) var(--bw),
    linear-gradient(var(--bc), var(--bc)) 0 100% / var(--bw) var(--bl),
    linear-gradient(var(--bc), var(--bc)) 100% 100% / var(--bl) var(--bw),
    linear-gradient(var(--bc), var(--bc)) 100% 100% / var(--bw) var(--bl);
  background-repeat: no-repeat;
}

/* Sello de tampón del dossier: dos aros con el texto girando y un asterisco,
   ligeramente rotado y desgastado, en la esquina superior derecha del marco */
.hero-kit__sello {
  position: absolute;
  z-index: -1;
  top: clamp(48px, 8vh, 92px);
  right: clamp(48px, 10vw, 170px);
  width: clamp(88px, 11vw, 132px);
  aspect-ratio: 1;
  color: rgba(194, 51, 57, .55);
  transform: rotate(12deg);
  -webkit-mask-image: radial-gradient(120% 120% at 32% 30%, #000 55%, rgba(0, 0, 0, .35) 100%);
  mask-image: radial-gradient(120% 120% at 32% 30%, #000 55%, rgba(0, 0, 0, .35) 100%);
  pointer-events: none;
}

.hero-kit__sello svg { display: block; width: 100%; height: 100%; }

/* Tira de código de barras, como la referencia impresa del dossier */
.hero-kit__barras {
  position: absolute;
  z-index: -1;
  left: clamp(48px, 10vw, 170px);
  bottom: clamp(52px, 9vh, 96px);
  width: 88px;
  height: 30px;
  background: repeating-linear-gradient(90deg,
    rgba(15, 28, 34, .8) 0 2px, transparent 2px 5px,
    rgba(15, 28, 34, .8) 5px 8px, transparent 8px 10px,
    rgba(15, 28, 34, .8) 10px 11px, transparent 11px 16px);
  opacity: .22;
  pointer-events: none;
}

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas) */
.hero--kit .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--kit .hero__eyebrow::before,
.hero--kit .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Título grande con degradado de tinta, igual que las demás portadas.
   El padding inferior evita que el recorte del degradado (background-clip:
   text) corte los rasgos descendentes de "g", "y", "p". */
.hero--kit .hero__title {
  font-size: clamp(2.7rem, 8.5vw, 6.2rem);
  line-height: 1;
  letter-spacing: -.035em;
  padding-bottom: .14em;
  background: linear-gradient(178deg, var(--ink) 16%, #36474f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* La descripción del kit: párrafo legible */
.hero--kit .hero__claim {
  font-size: clamp(1.05rem, 2.3vw, 1.35rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 680px;
}

.hero--kit .hero__ctas { margin-top: 38px; }

/* El botón baja a los recursos: una flecha lo sugiere */
.hero--kit .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--kit .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--kit .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* ---------- el adorno: la cámara del kit de prensa ----------
   La cámara del fotógrafo bajo el título: dispara el flash UNA vez y
   la foto sale revelándose por debajo, lista para el dossier. Sin
   bucles; con «reducir movimiento» la foto ya está revelada. */
.hero-cam__equipo {
  position: relative;
  width: 108px;
  height: 124px;
  margin: 22px auto 4px;
}

.hero-cam__cuerpo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  width: 98px;
  height: 62px;
  margin-left: -49px;
  border-radius: 10px;
  background: linear-gradient(180deg, #55646d 0 16px, #22333c 16px);
  box-shadow: 0 12px 26px rgba(15, 28, 34, .28), inset 0 1px 0 rgba(255, 255, 255, .15);
  animation: heroCamCae .6s var(--ease) .25s both;
}

.hero-cam__objetivo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  margin: -15px 0 0 -19px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fa2ac, #33424b 45%, #101d24 75%);
  box-shadow: 0 0 0 4px #55646d, 0 0 0 5px rgba(0, 0, 0, .35), inset -3px -4px 6px rgba(0, 0, 0, .5);
}

.hero-cam__objetivo u {
  position: absolute;
  left: 9px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
}

.hero-cam__flash {
  position: absolute;
  left: 10px;
  top: 5px;
  width: 20px;
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f4f8fa, #c3d2d9);
  box-shadow: inset 0 0 0 1px rgba(15, 28, 34, .35);
}

.hero-cam__visor {
  position: absolute;
  right: 30px;
  top: 5px;
  width: 14px;
  height: 9px;
  border-radius: 3px;
  background: #101d24;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.hero-cam__boton {
  position: absolute;
  right: 8px;
  top: -4px;
  width: 16px;
  height: 7px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #d9545a, #a3242a);
}

/* El chispazo del flash: se dispara y se apaga (queda invisible) */
.hero-cam__destello {
  position: absolute;
  z-index: 3;
  left: 2px;
  top: -12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 244, 214, .55) 45%, transparent 70%);
  opacity: 0;
  animation: heroCamFlash .5s ease-out 1.05s both;
}

/* La foto asoma por debajo del cuerpo, con su sol y su horizonte */
.hero-cam__foto {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 34px;
  width: 54px;
  height: 58px;
  margin-left: -27px;
  padding: 5px 5px 12px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(15, 28, 34, .2), inset 0 0 0 1px rgba(15, 28, 34, .08);
  transform: translateY(28px) rotate(3deg);
  animation: heroCamFoto .8s var(--ease) 1.35s both;
}

.hero-cam__foto i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background:
    radial-gradient(circle at 32% 34%, #f4d76e 7px, transparent 8px),
    linear-gradient(180deg, #cfe4ec 0 64%, #9fb9a8 64%);
}

@keyframes heroCamCae {
  from { opacity: 0; transform: translateY(-16px); }
  60%  { opacity: 1; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroCamFlash {
  0% { opacity: 0; transform: scale(.3); }
  35% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes heroCamFoto {
  from { opacity: 0; transform: translateY(2px) rotate(0deg); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(28px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cam__cuerpo, .hero-cam__destello, .hero-cam__foto { animation: none; }
}
html.a11y-reduce-motion .hero-cam__cuerpo,
html.a11y-reduce-motion .hero-cam__destello,
html.a11y-reduce-motion .hero-cam__foto { animation: none; }

/* ---------- Cabecera del Glosario: "La entrada de diccionario" ----------
   La página de un diccionario de verdad: papel pautado, el término como
   lema con su número de acepción en rojo, la definición precedida de "def."
   y el uñero alfabético en el canto derecho con la G marcada. */
.hero--diccionario {
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 15vh, 176px) var(--gutter) clamp(48px, 8vh, 92px);
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

/* Papel pautado: renglones finos que se desvanecen hacia los bordes */
.hero--diccionario::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: repeating-linear-gradient(180deg, transparent 0 42px, rgba(15, 28, 34, .055) 42px 43px);
  -webkit-mask-image: radial-gradient(112% 92% at 50% 30%, #000 38%, transparent 100%);
  mask-image: radial-gradient(112% 92% at 50% 30%, #000 38%, transparent 100%);
  pointer-events: none;
}

/* Uñero alfabético en el canto derecho; la letra del término va en rojo */
.hero-dicc__unero {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(10px, 2.6vw, 30px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.hero-dicc__unero i {
  font-style: normal;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: rgba(15, 28, 34, .32);
  width: 22px;
  height: 15px;
  display: grid;
  place-items: center;
}

.hero-dicc__unero i.on {
  width: 30px;
  height: 20px;
  margin-left: -8px;
  font-size: .7rem;
  color: var(--white);
  background: var(--red);
  border-radius: 5px 0 0 5px;
  box-shadow: 0 6px 16px rgba(194, 51, 57, .35);
}

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas) */
.hero--diccionario .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--diccionario .hero__eyebrow::before,
.hero--diccionario .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* El lema: título grande con su número de acepción en superíndice rojo */
.hero--diccionario .hero__title {
  font-size: clamp(3.2rem, 10.5vw, 7.2rem);
  line-height: .94;
  letter-spacing: -.035em;
  padding-bottom: .08em;
  background: linear-gradient(178deg, var(--ink) 18%, #36474f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero--diccionario .hero__title::after {
  content: "1";
  font-size: .28em;
  font-weight: 700;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: .14em;
  background: none;
  -webkit-text-fill-color: var(--red);
}

/* La definición, precedida de la abreviatura de diccionario */
.hero--diccionario .hero__claim {
  font-size: clamp(1.05rem, 2.3vw, 1.35rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 700px;
}

.hero--diccionario .hero__claim::before {
  content: "def.";
  font-style: italic;
  font-weight: 600;
  font-size: .85em;
  color: var(--red);
  margin-right: .55em;
}

.hero--diccionario .hero__ctas { margin-top: 38px; }

/* El botón baja al glosario: una flecha lo sugiere */
.hero--diccionario .hero__ctas .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 14px 34px rgba(15, 28, 34, .16);
}

.hero--diccionario .hero__ctas .btn--pill::after {
  content: "↓";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.hero--diccionario .hero__ctas .btn--pill:hover::after { transform: translateY(3px); }

/* ---------- el adorno: el diccionario abierto ----------
   Un diccionario en miniatura bajo el título: los renglones se escriben
   solos, el término buscado aparece en rojo, cae la cinta de registro y
   la lupa se posa encima UNA vez, como quien acaba de encontrar la
   palabra. Sin bucles; con «reducir movimiento» se ve ya encontrada. */
.hero-dicc__libro {
  position: relative;
  display: inline-flex;
  margin: 24px auto 6px;
  filter: drop-shadow(0 16px 26px rgba(15, 28, 34, .18));
}

/* Las tapas asoman por detrás de las páginas */
.hero-dicc__libro::before {
  content: "";
  position: absolute;
  inset: -4px -7px -8px;
  z-index: -1;
  border-radius: 10px;
  background: linear-gradient(180deg, #24343d, #101d24);
}

.hero-dicc__pagina {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 92px;
  height: 68px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff, #f6f3ea);
}

.hero-dicc__pagina--izq {
  border-radius: 8px 2px 2px 8px;
  box-shadow: inset -10px 0 12px -9px rgba(15, 28, 34, .35);
  transform: perspective(420px) rotateY(9deg);
  transform-origin: 100% 50%;
}

.hero-dicc__pagina--der {
  border-radius: 2px 8px 8px 2px;
  box-shadow: inset 10px 0 12px -9px rgba(15, 28, 34, .35);
  transform: perspective(420px) rotateY(-9deg);
  transform-origin: 0% 50%;
}

/* Los renglones se escriben uno a uno (su turno viene en --i) */
.hero-dicc__pagina i {
  height: 4px;
  border-radius: 2px;
  background: rgba(15, 28, 34, .22);
  transform-origin: left center;
  animation: heroDiccEscribe .45s var(--ease) both;
  animation-delay: calc(.3s + var(--i, 0) * .09s);
}

.hero-dicc__pagina--izq i:nth-child(1) { width: 88%; }
.hero-dicc__pagina--izq i:nth-child(2) { width: 70%; }
.hero-dicc__pagina--izq i:nth-child(4) { width: 80%; }
.hero-dicc__pagina--izq i:nth-child(5) { width: 62%; }
.hero-dicc__pagina--der i:nth-child(1) { width: 78%; }
.hero-dicc__pagina--der i:nth-child(2) { width: 88%; }
.hero-dicc__pagina--der i:nth-child(3) { width: 64%; }
.hero-dicc__pagina--der i:nth-child(4) { width: 82%; }
.hero-dicc__pagina--der i:nth-child(5) { width: 46%; }

/* El término encontrado, en rojo y algo más grueso */
.hero-dicc__termino {
  width: 52%;
  height: 5px !important;
  background: var(--red) !important;
}

/* La cinta de registro cae sobre el canal del lomo */
.hero-dicc__cinta {
  position: absolute;
  z-index: 2;
  left: calc(50% - 5px);
  top: -6px;
  width: 10px;
  height: 34px;
  background: linear-gradient(180deg, #d9545a, #a3242a);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
  animation: heroDiccCinta .5s var(--ease) 1.15s both;
}

/* La lupa llega desde fuera y se posa sobre el término */
.hero-dicc__lupa {
  position: absolute;
  z-index: 3;
  left: 14px;
  top: 16px;
  width: 30px;
  height: 30px;
  border: 3px solid #22333c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9), rgba(214, 228, 235, .45));
  box-shadow: 0 8px 14px rgba(15, 28, 34, .25);
  animation: heroDiccLupa .8s cubic-bezier(.2, .7, .3, 1.1) 1.4s both;
}

.hero-dicc__lupa::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -9px;
  width: 16px;
  height: 5px;
  border-radius: 3px;
  background: #22333c;
  transform: rotate(38deg);
}

@keyframes heroDiccEscribe {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes heroDiccCinta {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroDiccLupa {
  from { opacity: 0; transform: translate(52px, -38px) rotate(10deg); }
  65%  { opacity: 1; transform: translate(-3px, 3px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dicc__pagina i, .hero-dicc__cinta, .hero-dicc__lupa { animation: none; }
}
html.a11y-reduce-motion .hero-dicc__pagina i,
html.a11y-reduce-motion .hero-dicc__cinta,
html.a11y-reduce-motion .hero-dicc__lupa { animation: none; }

/* ---------- Cabecera de las páginas legales: "El documento" ----------
   Sobria y compartida por aviso legal, privacidad y cookies: el símbolo de
   sección (§) en filigrana tras el título y un doble filete de documento
   oficial debajo. */
.hero--legal {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #fbfbfc 52%, var(--gray-bg) 100%);
}

.hero--legal::before {
  content: "§";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  font-size: clamp(180px, 30vh, 300px);
  font-weight: 800;
  line-height: 1;
  color: rgba(15, 28, 34, .035);
  pointer-events: none;
}

/* Antetítulo flanqueado por dos puntos (estilo unificado en todas las portadas) */
.hero--legal .hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 20px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(.62rem, 1.6vw, .85rem);
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero--legal .hero__eyebrow::before,
.hero--legal .hero__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Título con doble filete de documento oficial */
.hero--legal .hero__title {
  position: relative;
  display: inline-block;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: -.025em;
  color: var(--ink);
  padding-bottom: 24px;
}

.hero--legal .hero__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: clamp(90px, 12vw, 130px);
  height: 7px;
  border-top: 2px solid rgba(15, 28, 34, .6);
  border-bottom: 1px solid rgba(15, 28, 34, .3);
}

/* En pantallas estrechas los adornos laterales estorban al texto: fuera */
@media (max-width: 980px) {
  .hero--prensa::after { display: none; }
  .hero--biblioteca::after { display: none; }
}

@media (max-width: 860px) {
  .hero-dicc__unero { display: none; }
  /* Sin sitio para los útiles: se ocultan y el título recupera su acento rojo */
  .hero-rec__utiles { display: none; }
  .hero--recursos .hero__title { padding-bottom: 22px; }
  .hero--recursos .hero__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: clamp(54px, 8vw, 86px);
    height: 4px;
    border-radius: 999px;
    background: var(--red);
  }
}

@media (max-width: 760px) {
  .hero-kit__sello,
  .hero-kit__barras { display: none; }
  .hero--mapa .hero-mapa__ico { width: min(62vw, 190px); margin-top: 22px; }
  .hero--prensa .hero-prensa__pleca-precio { display: none; }
  /* El micrófono cabe, pero más pequeño y más pegado al antetítulo */
  .hero-mic { margin-top: 14px; }
  .hero-mic__svg { height: 132px; }
}

@media (max-width: 480px) {
  .hero--prensa .hero-prensa__pleca { justify-content: center; }
  .hero--prensa .hero-prensa__pleca-fecha { display: none; }
}

/* ---------- Portada de inicio (hero--home) ---------- */

.hero--home {
  position: relative;
  padding-bottom: 0;
}

.hero--home > * { position: relative; z-index: 1; }

/* Aurora de marca: dos brillos suaves que derivan despacio tras el contenido */
.hero--home::before,
.hero--home::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(340px, 46vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  animation: hero-drift 16s ease-in-out infinite alternate;
}

.hero--home::before {
  top: -16%;
  left: -8%;
  background: radial-gradient(circle, rgba(194, 51, 57, .15), transparent 62%);
}

.hero--home::after {
  top: 2%;
  right: -12%;
  background: radial-gradient(circle, rgba(15, 28, 34, .10), transparent 62%);
  animation-delay: -8s;
  animation-direction: alternate-reverse;
}

@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}

/* Lema personal: texto menor y más ligero bajo el claim */
.hero__lema {
  margin: 20px auto 0;
  font-weight: 300;
  font-size: clamp(.94rem, 1.6vw, 1.08rem);
  letter-spacing: .05em;
  color: var(--ink-soft);
}

.hero__lema::before,
.hero__lema::after {
  content: "—";
  margin: 0 12px;
  color: var(--red);
  opacity: .55;
}

/* La foto de inicio, en panorámico: presencia sin comerse la pantalla */
.hero--home .hero__visual {
  max-width: 920px;
  margin: 56px auto 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(15, 28, 34, .18);
}

.hero--home .hero__visual img,
.hero--home .hero__visual .ph {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 28%;
}

@media (max-width: 640px) {
  .hero--home .hero__visual img,
  .hero--home .hero__visual .ph { aspect-ratio: 3 / 2; }
}

/* Cinta de temas: marquesina continua que cierra la portada */
.hero__ticker {
  margin-top: 64px;
  padding: 20px 0;
  border-top: 1px solid rgba(15, 28, 34, .08);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hero__ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-run 32s linear infinite;
}

.hero__ticker:hover .hero__ticker-track { animation-play-state: paused; }

.hero__ticker-group {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-right: 36px;
}

.hero__ticker-item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .62;
  white-space: nowrap;
}

.hero__ticker-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Buscador de portada: un gran campo bajo el claim que abre el buscador
   global (⌘K). Es un botón disfrazado de buscador: al pulsarlo se abre la
   ventana omni con el índice completo de la web (initBuscador). */
.hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(600px, 100%);
  margin: 36px auto 0;
  padding: 15px 16px 15px 22px;
  border: 1px solid rgba(15, 28, 34, .12);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 18px 50px rgba(15, 28, 34, .10);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}

.hero-search:hover,
.hero-search:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(194, 51, 57, .45);
  box-shadow: 0 26px 64px rgba(15, 28, 34, .16);
}

.hero-search__lupa {
  flex: none;
  color: var(--red);
  transition: transform .5s var(--ease);
}

.hero-search:hover .hero-search__lupa { transform: rotate(-8deg) scale(1.12); }

.hero-search__ph {
  flex: 1;
  min-width: 0;
  font-size: .98rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-search__ph--corta { display: none; }

.hero-search__kbd {
  flex: none;
  padding: 5px 10px;
  border: 1px solid rgba(15, 28, 34, .14);
  border-radius: 9px;
  background: var(--gray-bg);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .hero-search { margin-top: 28px; padding: 13px 20px; }
  .hero-search__ph--larga,
  .hero-search__kbd { display: none; }
  .hero-search__ph--corta { display: block; }
}

/* Placeholder de imagen */

.ph {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 140% at 80% 0%, rgba(194, 51, 57, .16), transparent 55%),
    linear-gradient(135deg, #1a2a33 0%, var(--ink) 60%, #0a1318 100%);
}

.ph--light {
  background:
    radial-gradient(120% 140% at 80% 0%, rgba(194, 51, 57, .10), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #ededf0 100%);
}

.ph svg { width: clamp(64px, 14%, 120px); height: auto; opacity: .92; }

/* ---------- Secciones genéricas ---------- */

.section { padding: 110px var(--gutter); }

/* Al saltar a una sección con ancla, deja sitio para la barra fija superior */
.section[id] { scroll-margin-top: 80px; }

.section--gray { background: var(--gray-bg); }

.section__inner { max-width: var(--maxw); margin: 0 auto; }

.section__inner--narrow { max-width: 880px; margin: 0 auto; }

.section__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  margin-bottom: 56px;
}

/* ---------- Tarjetas (bento) ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

.card {
  grid-column: span 2;
  background: var(--gray-card);
  border-radius: var(--radius);
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  overflow: hidden;
}

.card--big { grid-column: span 4; }

.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.card__eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}

.card__title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
}

.card__text { color: var(--ink-soft); font-size: 1rem; max-width: 52ch; }

.card__ctas { margin-top: 6px; display: flex; align-items: center; }

.card__visual {
  margin: 18px -40px -40px;
  margin-top: auto;
  padding-top: 18px;
  flex: 1;
  display: flex;
  align-items: stretch;
  width: calc(100% + 80px);
}

.card__visual .ph { aspect-ratio: auto; min-height: 230px; height: 100%; }

.card__visual img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.card:hover .card__visual img { transform: scale(1.045); }

/* ---------- Hub de recursos IA ---------- */

.recursos-hub { background: var(--white); }

.recursos-hub__head {
  max-width: 820px;
  margin: 0 auto 54px;
  text-align: center;
}

.recursos-hub__head .section__title { margin-bottom: 18px; }

.recursos-hub__intro {
  color: var(--ink-soft);
  font-size: clamp(1.04rem, 2vw, 1.18rem);
  max-width: 62ch;
  margin: 0 auto;
}

.recursos-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  align-items: stretch;
}

.recurso-card {
  min-height: 340px;
  background: var(--gray-bg);
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: var(--radius);
  padding: 34px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              border-color .45s var(--ease), background .45s var(--ease);
}

.recurso-card:hover {
  transform: translateY(-6px);
  background: var(--white);
  border-color: rgba(194, 51, 57, .22);
  box-shadow: var(--shadow-hover);
}

.recurso-card__icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--white);
  margin-bottom: 8px;
}

.recurso-card__icon svg { width: 28px; height: 28px; }

.recurso-card__eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}

.recurso-card__title {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.16;
}

.recurso-card__text {
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 48ch;
}

.recurso-card__cta {
  margin-top: auto;
  padding-top: 14px;
}

/* ---------- Trío de recursos IA (portada) ---------- */

.trio-section { background: var(--white); }

.trio__head {
  max-width: 860px;
  margin: 0 auto 56px;
  text-align: center;
}

.trio__head .section__title { margin-bottom: 18px; }

.trio__intro {
  color: var(--ink-soft);
  font-size: clamp(1.04rem, 2vw, 1.18rem);
  max-width: 62ch;
  margin: 0 auto;
}

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.trio[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.trio[data-count="4"] .trio-card { padding: 36px 28px 30px; min-height: 430px; }
@media (max-width: 1180px) {
  .trio[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
}

.trio-card {
  position: relative;
  overflow: hidden;
  min-height: 470px;
  border-radius: var(--radius-lg);
  padding: 42px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease),
              background .55s var(--ease), border-color .55s var(--ease);
}

.trio-card:hover {
  transform: translateY(-12px) rotate(-.4deg);
  box-shadow: 0 30px 70px rgba(15, 28, 34, .20);
}

/* Tres tonos construidos solo con los colores de la marca */
.trio-card--claro {
  background: var(--gray-bg);
  border: 1px solid rgba(15, 28, 34, .08);
  color: var(--ink);
}

.trio-card--claro:hover { background: var(--white); border-color: rgba(194, 51, 57, .25); }

.trio-card--oscuro {
  background:
    radial-gradient(130% 120% at 85% -10%, rgba(194, 51, 57, .32), transparent 55%),
    linear-gradient(160deg, #1a2a33 0%, var(--ink) 55%, #0a1318 100%);
  color: var(--white);
}

.trio-card--oscuro:hover { box-shadow: 0 30px 80px rgba(10, 19, 24, .45); }

.trio-card--rojo {
  background:
    radial-gradient(120% 130% at 15% -10%, rgba(255, 255, 255, .20), transparent 50%),
    linear-gradient(160deg, #d2434a 0%, var(--red) 45%, #8e2227 100%);
  color: var(--white);
}

.trio-card--rojo:hover { box-shadow: 0 30px 80px rgba(194, 51, 57, .40); }

/* ============================================================
   BOTONERA DE RECURSOS — el índice compacto: cada recurso es un
   canal de la tele (CH 01, CH 02…) con su icono, su título y una
   flecha. Al pasar el ratón el canal «se sintoniza»: el chip del
   icono se enciende en rojo, un brillo barre el botón una sola
   vez y la flecha entra en pantalla.
   ============================================================ */
/* La banda va en gris para que los canales —blancos y con sombra—
   se recorten sobre ella y no se pierdan en blanco sobre blanco. */
.botonera-section { background: var(--gray-bg); }

.botonera {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.botonera__btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(15, 28, 34, .14);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(15, 28, 34, .09);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              border-color .45s var(--ease);
}

/* el brillo que barre el canal al sintonizarlo (una sola pasada) */
.botonera__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .65) 50%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
}
.botonera__btn:hover::after { transform: translateX(130%); transition: transform .9s var(--ease); }

.botonera__btn:hover {
  transform: translateY(-5px);
  border-color: rgba(194, 51, 57, .40);
  box-shadow: 0 20px 44px rgba(15, 28, 34, .20), 0 6px 18px rgba(194, 51, 57, .12);
}

.botonera__btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.botonera__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(194, 51, 57, .22), rgba(194, 51, 57, .09));
  box-shadow: inset 0 0 0 1px rgba(194, 51, 57, .28);
  color: var(--red);
  transition: background .45s var(--ease), color .45s var(--ease),
              transform .45s var(--ease), box-shadow .45s var(--ease);
}

.botonera__icon svg { width: 26px; height: 26px; }

.botonera__btn:hover .botonera__icon {
  background: linear-gradient(160deg, #d2434a 0%, var(--red) 55%, #8e2227 100%);
  box-shadow: 0 10px 22px rgba(194, 51, 57, .35);
  color: var(--white);
  transform: scale(1.08) rotate(-4deg);
}

.botonera__txt {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* el dial del canal: pequeño, en mayúsculas y en rojo de marca */
.botonera__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--red);
  opacity: .9;
  transition: opacity .45s var(--ease), letter-spacing .45s var(--ease);
}

.botonera__btn:hover .botonera__num { opacity: 1; letter-spacing: .24em; }

.botonera__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.22;
}

.botonera__flecha {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 7px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              background .45s var(--ease), color .45s var(--ease);
}

.botonera__btn:hover .botonera__flecha {
  opacity: 1;
  transform: none;
  background: rgba(194, 51, 57, .10);
  color: var(--red);
}

@media (max-width: 640px) {
  .botonera { grid-template-columns: 1fr 1fr; gap: 10px; }
  .botonera__btn { flex-direction: column; text-align: center; gap: 10px; padding: 18px 12px 16px; }
  .botonera__txt { align-items: center; }
  .botonera__title { font-size: .88rem; }
  .botonera__flecha { display: none; }
}

/* Texto decorativo gigante del fondo (“”, MAPA, 24/7...) */
.trio-card__mark {
  position: absolute;
  right: -10px;
  bottom: -26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5.5rem, 10vw, 8.5rem);
  line-height: .9;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: var(--ink);
  opacity: .06;
  pointer-events: none;
  user-select: none;
  transition: transform .7s var(--ease), opacity .7s var(--ease);
}

.trio-card--oscuro .trio-card__mark,
.trio-card--rojo .trio-card__mark { color: var(--white); opacity: .08; }

.trio-card:hover .trio-card__mark { transform: translate(-12px, -12px) scale(1.05); opacity: .14; }

.trio-card__icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  background: var(--ink);
  color: var(--white);
  transition: transform .5s var(--ease);
}

.trio-card--oscuro .trio-card__icon { background: var(--red); }
.trio-card--rojo .trio-card__icon { background: var(--white); color: var(--red); }

.trio-card:hover .trio-card__icon { transform: rotate(-8deg) scale(1.08); }

.trio-card__icon svg { width: 28px; height: 28px; }

.trio-card__eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}

.trio-card--oscuro .trio-card__eyebrow,
.trio-card--rojo .trio-card__eyebrow { color: var(--white); opacity: .72; }

.trio-card__title {
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  font-weight: 800;
  line-height: 1.14;
}

.trio-card__text {
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 44ch;
}

.trio-card--oscuro .trio-card__text,
.trio-card--rojo .trio-card__text { color: rgba(255, 255, 255, .80); }

.trio-card__cta { margin-top: auto; padding-top: 16px; }

/* Los enlaces de las tarjetas no van en una sola línea: si el rótulo es
   largo ("Programar estrategias de pensamiento") se cortaba contra el
   borde de la tarjeta. La flecha ›, al no llevar espacio delante, sigue
   pegada a la última palabra aunque el texto pase a dos líneas. */
.trio-card .link-arrow { white-space: normal; }

.trio-card--oscuro .link-arrow,
.trio-card--rojo .link-arrow { color: var(--white); }

.trio-card--oscuro .link-arrow:hover { color: var(--red); }
.trio-card--rojo .link-arrow:hover { color: var(--ink); }

.trio-card--rojo .btn--light:hover { background: var(--ink); color: var(--white); }

/* ---------- Micro-animaciones del trío (initTrioAnimaciones) ----------
   Dibujos de trazo, hermanos de la línea de metro del MAPA, en la
   esquina superior derecha de cada tarjeta: un bocadillo de chat con los
   puntos de «escribiendo…» (prompts), la línea de metro con sus cuatro
   estaciones (MAPA), un robot que parpadea (asistentes), un diccionario
   abierto en el que aparecen renglones (glosario), tres faders que se
   deslizan a su posición (ecualizador) y un dado al que le brotan los
   puntos (diferenciador). En reposo quedan dibujados y tenues; con la
   clase is-anim (la tarjeta entra en pantalla) se dibujan solos UNA vez
   y se quedan terminados: nada de bucles. Con «reducir movimiento»
   activado nunca se mueven: se ven ya terminados. */

.trio-card__dibujo {
  position: absolute;
  top: 34px;
  right: 24px;
  width: 56%;
  height: auto;
  pointer-events: none;
  opacity: .35;
  transition: opacity .6s var(--ease);
}

.trio-card.is-anim .trio-card__dibujo { opacity: .95; }

/* el autómata de asistentes es de cuerpo entero: necesita un marco más
   estrecho y más alto que las demás viñetas (que son apaisadas) */
.trio-card[data-anim="robot"] .trio-card__dibujo { width: 44%; top: 28px; }

/* trazos y rellenos: rojo de marca, y en blanco sobre la tarjeta roja */
.trio-card__dibujo path,
.trio-card__dibujo line {
  fill: none;
  stroke: var(--red);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trio-card__dibujo .trio-anim__fina { stroke-width: 4; }

.trio-card__dibujo circle { fill: var(--red); stroke: none; }

.trio-card__dibujo .trio-anim__estacion {
  fill: var(--white);
  stroke: var(--red);
  stroke-width: 4;
}

.trio-card--rojo .trio-card__dibujo path,
.trio-card--rojo .trio-card__dibujo line { stroke: var(--white); }
.trio-card--rojo .trio-card__dibujo circle { fill: var(--white); stroke: none; }

/* los adornos que hacen «pop» escalan desde su propio centro */
.trio-card__dibujo circle,
.trio-card__dibujo .trio-anim__tarde {
  transform-box: fill-box;
  transform-origin: center;
}

/* el trazo principal se dibuja (los path llevan pathLength="100");
   una sola pasada y el dibujo se queda terminado */
.trio-card.is-anim .trio-anim__linea {
  stroke-dasharray: 100;
  animation: trio-linea 7s var(--ease) 1 forwards;
}

.trio-card.is-anim .trio-anim__pop,
.trio-card.is-anim .trio-anim__tarde,
.trio-card.is-anim .trio-anim__punto,
.trio-card.is-anim .trio-anim__fader,
.trio-card.is-anim .trio-anim__ojo {
  animation-duration: 7s;
  animation-timing-function: var(--ease);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* pop mientras el trazo pasa (las estaciones del metro) */
.trio-card.is-anim .trio-anim__pop--1 { animation-name: trio-pop1; }
.trio-card.is-anim .trio-anim__pop--2 { animation-name: trio-pop2; }
.trio-card.is-anim .trio-anim__pop--3 { animation-name: trio-pop3; }
.trio-card.is-anim .trio-anim__pop--4 { animation-name: trio-pop4; }

/* pop cuando el dibujo ya está terminado (renglones, antena, puntos del dado) */
.trio-card.is-anim .trio-anim__tarde--1 { animation-name: trio-tarde1; }
.trio-card.is-anim .trio-anim__tarde--2 { animation-name: trio-tarde2; }
.trio-card.is-anim .trio-anim__tarde--3 { animation-name: trio-tarde3; }
.trio-card.is-anim .trio-anim__tarde--4 { animation-name: trio-tarde4; }
.trio-card.is-anim .trio-anim__tarde--5 { animation-name: trio-tarde5; }

/* los botones del ecualizador aparecen sobre su carril y se deslizan
   hasta su posición, cada uno a su ritmo, y ahí se quedan */
.trio-card.is-anim .trio-anim__fader--1 { animation-name: trio-fader1; }
.trio-card.is-anim .trio-anim__fader--2 { animation-name: trio-fader2; }
.trio-card.is-anim .trio-anim__fader--3 { animation-name: trio-fader3; }

/* los puntos de «escribiendo…» del bocadillo laten como en un chat */
.trio-card.is-anim .trio-anim__punto--1 { animation-name: trio-punto1; }
.trio-card.is-anim .trio-anim__punto--2 { animation-name: trio-punto2; }
.trio-card.is-anim .trio-anim__punto--3 { animation-name: trio-punto3; }

/* los ojos del robot aparecen, parpadean, miran a un lado y a otro
   y vuelven al frente con un último parpadeo */
.trio-card.is-anim .trio-anim__ojo { animation-name: trio-ojo; }

/* los destellos de la antena del robot: brotan de golpe, como un chispazo,
   justo después de que se encienda la bombilla */
.trio-card__dibujo .trio-anim__chispa {
  transform-box: fill-box;
  transform-origin: center;
}

.trio-card.is-anim .trio-anim__chispa {
  animation: trio-chispa 7s var(--ease) 1 forwards;
}

@keyframes trio-linea {
  0%        { stroke-dashoffset: 100; opacity: 0; }
  6%        { opacity: 1; }
  40%       { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes trio-pop1 {
  0%, 6%    { transform: scale(0); opacity: 0; }
  10%       { transform: scale(1.5); opacity: 1; }
  14%       { transform: scale(1); }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-pop2 {
  0%, 16%   { transform: scale(0); opacity: 0; }
  20%       { transform: scale(1.5); opacity: 1; }
  24%       { transform: scale(1); }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-pop3 {
  0%, 26%   { transform: scale(0); opacity: 0; }
  30%       { transform: scale(1.5); opacity: 1; }
  34%       { transform: scale(1); }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-pop4 {
  0%, 36%   { transform: scale(0); opacity: 0; }
  40%       { transform: scale(1.5); opacity: 1; }
  44%       { transform: scale(1); }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-tarde1 {
  0%, 42%   { transform: scale(0); opacity: 0; }
  46%       { transform: scale(1.4); opacity: 1; }
  50%       { transform: scale(1); }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-tarde2 {
  0%, 48%   { transform: scale(0); opacity: 0; }
  52%       { transform: scale(1.4); opacity: 1; }
  56%       { transform: scale(1); }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-tarde3 {
  0%, 54%   { transform: scale(0); opacity: 0; }
  58%       { transform: scale(1.4); opacity: 1; }
  62%       { transform: scale(1); }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-punto1 {
  0%, 34%   { transform: scale(0); opacity: 0; }
  38%       { transform: scale(1.4); opacity: 1; }
  42%       { transform: scale(1); }
  50%       { opacity: 1; }
  56%       { opacity: .3; }
  62%       { opacity: 1; }
  68%       { opacity: .3; }
  74%       { opacity: 1; }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-punto2 {
  0%, 37%   { transform: scale(0); opacity: 0; }
  41%       { transform: scale(1.4); opacity: 1; }
  45%       { transform: scale(1); }
  53%       { opacity: 1; }
  59%       { opacity: .3; }
  65%       { opacity: 1; }
  71%       { opacity: .3; }
  77%       { opacity: 1; }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-punto3 {
  0%, 40%   { transform: scale(0); opacity: 0; }
  44%       { transform: scale(1.4); opacity: 1; }
  48%       { transform: scale(1); }
  56%       { opacity: 1; }
  62%       { opacity: .3; }
  68%       { opacity: 1; }
  74%       { opacity: .3; }
  80%       { opacity: 1; }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-ojo {
  0%, 40%   { transform: translateX(0) scale(0); opacity: 0; }
  44%       { transform: translateX(0) scale(1.4); opacity: 1; }
  48%       { transform: translateX(0) scale(1); }
  56%       { transform: translateX(0) scaleY(1); }
  58%       { transform: translateX(0) scaleY(.1); }
  60%       { transform: translateX(0) scaleY(1); }
  68%       { transform: translateX(5px) scaleY(1); }
  76%       { transform: translateX(5px) scaleY(1); }
  84%       { transform: translateX(-5px) scaleY(1); }
  90%       { transform: translateX(0) scaleY(1); }
  94%       { transform: translateX(0) scaleY(.1); }
  97%       { transform: translateX(0) scaleY(1); }
  100%      { transform: translateX(0) scale(1); opacity: 1; }
}

/* el chispazo de la antena, ya con la bombilla encendida */
@keyframes trio-chispa {
  0%, 48%   { transform: scale(.2); opacity: 0; }
  54%       { transform: scale(1.2); opacity: 1; }
  58%       { transform: scale(1); }
  100%      { transform: scale(1); opacity: 1; }
}

/* puntos 4 y 5 del dado del diferenciador */
@keyframes trio-tarde4 {
  0%, 60%   { transform: scale(0); opacity: 0; }
  64%       { transform: scale(1.4); opacity: 1; }
  68%       { transform: scale(1); }
  100%      { transform: scale(1); opacity: 1; }
}

@keyframes trio-tarde5 {
  0%, 66%   { transform: scale(0); opacity: 0; }
  70%       { transform: scale(1.4); opacity: 1; }
  74%       { transform: scale(1); }
  100%      { transform: scale(1); opacity: 1; }
}

/* faders del ecualizador: aparecen desplazados sobre el carril y se
   deslizan hasta su sitio con un pequeño rebote; ahí se quedan */
@keyframes trio-fader1 {
  0%, 30%   { opacity: 0; transform: translateY(-26px); }
  36%       { opacity: 1; transform: translateY(-26px); }
  54%       { transform: translateY(3px); }
  60%       { transform: translateY(0); }
  100%      { opacity: 1; transform: translateY(0); }
}

@keyframes trio-fader2 {
  0%, 36%   { opacity: 0; transform: translateY(34px); }
  42%       { opacity: 1; transform: translateY(34px); }
  62%       { transform: translateY(-3px); }
  68%       { transform: translateY(0); }
  100%      { opacity: 1; transform: translateY(0); }
}

@keyframes trio-fader3 {
  0%, 42%   { opacity: 0; transform: translateY(-20px); }
  48%       { opacity: 1; transform: translateY(-20px); }
  68%       { transform: translateY(2px); }
  74%       { transform: translateY(0); }
  100%      { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .trio { grid-template-columns: 1fr; }
  .trio-card { min-height: 0; }
}

/* ---------- Portafolio de la web ---------- */

.portafolio__head {
  max-width: 860px;
  margin: 0 auto 56px;
  text-align: center;
}

.portafolio__head .section__title { margin-bottom: 18px; }

.portafolio__intro {
  color: var(--ink-soft);
  font-size: clamp(1.04rem, 2vw, 1.18rem);
  max-width: 62ch;
  margin: 0 auto;
}

.portafolio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.portafolio-card {
  --pc: var(--red);
  --pc-soft: rgba(194, 51, 57, .10);
  --pc-glow: rgba(217, 84, 90, .30);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 216px;
  padding: 28px 28px 24px;
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: 26px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 4px 18px rgba(15, 28, 34, .04);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              background .45s var(--ease), border-color .45s var(--ease);
}

/* Los pseudoelementos (halo y número gigante) quedan bajo el contenido */
.portafolio-card > span { position: relative; z-index: 1; }

/* Al pasar, la tarjeta se enciende en tinta con un halo de su acento
   y su número asoma gigante */
.portafolio-card:hover {
  transform: translateY(-8px);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 24px 60px rgba(15, 28, 34, .28);
}

.portafolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 110% at 100% 0%, var(--pc-glow), transparent 58%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}

.portafolio-card:hover::before { opacity: 1; }

.portafolio-card::after {
  content: attr(data-num);
  position: absolute;
  right: 10px;
  bottom: -22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 7rem;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--ink);
  opacity: .05;
  pointer-events: none;
  transition: color .5s var(--ease), opacity .5s var(--ease), transform .5s var(--ease);
}

.portafolio-card:hover::after {
  color: var(--pc-glow);
  opacity: 1;
  transform: translateY(-6px);
}

.portafolio-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.portafolio-card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--pc);
  transition: color .45s var(--ease);
}

.portafolio-card:hover .portafolio-card__num { color: rgba(255, 255, 255, .55); }

.portafolio-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--pc-soft);
  color: var(--pc);
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}

.portafolio-card__icon svg { width: 22px; height: 22px; }

.portafolio-card:hover .portafolio-card__icon {
  background: var(--pc);
  color: var(--white);
  transform: rotate(-8deg) scale(1.06);
}

.portafolio-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  line-height: 1.15;
  transition: color .45s var(--ease);
}

.portafolio-card__text {
  font-size: .95rem;
  color: var(--ink-soft);
  transition: color .45s var(--ease);
}

.portafolio-card:hover .portafolio-card__title { color: var(--white); }
.portafolio-card:hover .portafolio-card__text { color: rgba(255, 255, 255, .72); }

.portafolio-card__more {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  transition: color .45s var(--ease);
}

.portafolio-card__arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-bottom: 2px;
  border: 1.5px solid rgba(15, 28, 34, .18);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform .45s var(--ease), background .45s var(--ease),
              border-color .45s var(--ease), color .45s var(--ease);
}

.portafolio-card:hover .portafolio-card__more { color: var(--white); }

.portafolio-card:hover .portafolio-card__arrow {
  background: var(--pc);
  border-color: var(--pc);
  color: var(--white);
  transform: translateX(6px);
}

@media (max-width: 980px) {
  .portafolio { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .portafolio { grid-template-columns: 1fr; }
}

/* ---------- Narrativa ---------- */

.narrativa { padding: 110px 0; }

.narrativa__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  text-align: center;
  margin: 0 24px 64px;
}

.narrativa__visual { max-width: 1440px; margin: 0 auto; overflow: hidden; }

.narrativa__visual .ph { aspect-ratio: 21 / 9; }

.narrativa__visual img { width: 100%; }

.narrativa__text { padding: 72px 24px 0; display: grid; gap: 28px; }

.narrativa__text p {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 300;
  color: var(--ink-soft);
}

.narrativa__text p strong { color: var(--ink); font-weight: 500; }

.narrativa__stats {
  margin-top: 64px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px 24px;
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  color: var(--red);
  line-height: 1;
}

.stat__label { margin-top: 10px; font-size: .92rem; color: var(--ink-soft); }

/* ---------- Prestaciones (bloques alternos) ---------- */

.feature { padding: 110px var(--gutter); }

.feature:nth-child(even) { background: var(--gray-bg); }

.feature__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: center;
}

.feature:nth-child(even) .feature__inner { direction: rtl; }
.feature:nth-child(even) .feature__inner > * { direction: ltr; }

.feature__eyebrow {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.feature__title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 20px;
}

.feature__text { font-size: 1.1rem; color: var(--ink-soft); max-width: 48ch; }

.feature__cta { margin-top: 26px; }

.feature__visual {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.feature__visual .ph { aspect-ratio: 4 / 3; }

.feature__visual img { width: 100%; }

/* ---------- Métricas ---------- */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.metric {
  background: var(--white);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.metric:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.metric__value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
}

.metric__label { margin-top: 14px; color: var(--ink-soft); font-size: .95rem; }

/* ---------- Texto ---------- */

.texto { display: grid; gap: 24px; }

.texto p {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-soft);
}

.texto p strong { color: var(--ink); font-weight: 500; }

/* ---------- Texto destacado (panel oscuro con iniciales y botones) ----------
   Tarjeta inmersiva que sirve de pórtico al recorrido MAPA: fondo profundo,
   destello rojo de marca, iniciales en mosaico de cristal y botones cápsula.
   Comparte la paleta del scroll narrativo para encadenar ambas secciones. */

.texto-feature__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(36px, 5.5vw, 80px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(115% 90% at 92% -12%, rgba(194, 51, 57, .26), transparent 56%),
    radial-gradient(95% 85% at -8% 112%, rgba(194, 51, 57, .12), transparent 60%),
    linear-gradient(162deg, #17272f 0%, var(--ink) 54%, #081115 100%);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 34px 90px rgba(8, 17, 21, .4);
}

/* Filo luminoso superior que da relieve a la tarjeta */
.texto-feature__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), transparent 38%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.texto-feature__glow {
  position: absolute;
  top: -40%;
  right: -14%;
  width: 60%;
  height: 110%;
  background: radial-gradient(circle, rgba(194, 51, 57, .3), transparent 66%);
  filter: blur(26px);
  pointer-events: none;
  z-index: -1;
}

.texto-feature__eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #ff7176;
  margin-bottom: 18px;
}

.texto-feature__eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red), transparent);
}

.texto-feature__title {
  position: relative;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.04;
  color: var(--white);
  margin-bottom: 30px;
}

.texto-feature__keys {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 38px;
}

.texto-feature__key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 22px;
  background: linear-gradient(158deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}

.texto-feature__key:hover {
  transform: translateY(-6px);
  border-color: rgba(194, 51, 57, .55);
  background: linear-gradient(158deg, rgba(194, 51, 57, .16), rgba(255, 255, 255, .03));
  box-shadow: 0 20px 44px rgba(8, 17, 21, .45);
}

.texto-feature__key-letter {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(150deg, #e85056, var(--red) 70%);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: 0 10px 24px rgba(194, 51, 57, .45);
}

.texto-feature__key-word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .9);
}

.texto-feature__body { position: relative; }

.texto-feature__body p {
  color: rgba(255, 255, 255, .68);
}

.texto-feature__body p strong {
  color: var(--white);
  font-weight: 600;
}

.texto-feature__lead {
  font-size: clamp(1.28rem, 2.6vw, 1.62rem) !important;
  line-height: 1.42;
  color: rgba(255, 255, 255, .96) !important;
  font-weight: 400;
}

.texto-feature__ctas {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* Botón principal: cápsula roja con destello de marca */
.texto-feature__ctas .btn--pill:not(.btn--light) {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 12px 30px rgba(194, 51, 57, .42);
}

.texto-feature__ctas .btn--pill:not(.btn--light):hover {
  background: #d8444a;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 42px rgba(194, 51, 57, .55);
}

/* Botón secundario: cápsula de contorno sobre el fondo oscuro */
.texto-feature__ctas .btn--light {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .34);
}

.texto-feature__ctas .btn--light:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
  transform: translateY(-2px) scale(1.02);
}

@media (max-width: 620px) {
  .texto-feature__keys { grid-template-columns: repeat(2, 1fr); }
  .texto-feature__ctas .btn { width: 100%; }
}

/* ---------- Galería ---------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.galeria__item {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.galeria__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.galeria__item .ph { aspect-ratio: 4 / 3; }

.galeria__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.galeria__item figcaption {
  padding: 16px 22px;
  font-size: .88rem;
  color: var(--ink-soft);
}

/* ---------- Vídeo ---------- */

.video {
  max-width: 980px;
  margin: 48px auto 0;
  padding: 0 24px;
}

.video iframe, .video video, .video .ph {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: block;
}

.video__text {
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: 56ch;
  margin: 0 auto;
}

/* ---------- Banner de cierre ----------
   Franja final de página. Sobre la tinta flotan dos brillos rojos de marca,
   el símbolo gigante como marca de agua y el símbolo pequeño con un halo
   cálido sobre el titular. El botón crece y lleva flecha que se desliza. */

.cierre {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding: clamp(110px, 14vw, 160px) var(--gutter);
}

.cierre__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.cierre__glow--a { width: 520px; height: 520px; left: -170px; top: -220px; background: rgba(194, 51, 57, .22); }
.cierre__glow--b { width: 640px; height: 640px; right: -240px; bottom: -300px; background: rgba(194, 51, 57, .13); }

.cierre__watermark {
  position: absolute;
  width: clamp(340px, 42vw, 640px);
  right: -7%;
  top: 50%;
  transform: translateY(-50%) rotate(-10deg);
  opacity: .05;
  pointer-events: none;
}

.cierre__inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.cierre__halo {
  position: relative;
  display: inline-block;
  margin-bottom: 34px;
}

/* Resplandor cálido detrás del símbolo */
.cierre__halo::before {
  content: "";
  position: absolute;
  inset: -48px;
  background: radial-gradient(circle, rgba(194, 51, 57, .32), transparent 68%);
  pointer-events: none;
}

.cierre__symbol {
  position: relative;
  width: 88px;
  height: auto;
  display: block;
  animation: cierre-float 5.5s ease-in-out infinite;
}

@keyframes cierre-float {
  50% { transform: translateY(-8px); }
}

.cierre__title {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.cierre__text {
  margin: 20px auto 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  opacity: .75;
  max-width: 46ch;
}

.cierre__cta { margin-top: 44px; }

.cierre__cta .btn--pill {
  padding: 17px 42px;
  font-size: 1.05rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}

.cierre__cta .btn--pill::after {
  content: "→";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.cierre__cta .btn--pill:hover::after { transform: translateX(5px); }

.cierre .link-arrow { color: var(--white); }
.cierre .link-arrow:hover { color: var(--red); }

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

/* Variante clara del banner de cierre — mismo símbolo rojo, fondo claro */
.cierre--claro {
  background:
    radial-gradient(90% 130% at 50% -25%, rgba(194, 51, 57, .07), transparent 60%),
    var(--gray-bg);
  color: var(--ink);
}

.cierre--claro .cierre__glow--a { background: rgba(194, 51, 57, .10); }
.cierre--claro .cierre__glow--b { background: rgba(194, 51, 57, .07); }
.cierre--claro .cierre__watermark { opacity: .045; }
.cierre--claro .cierre__halo::before { background: radial-gradient(circle, rgba(194, 51, 57, .16), transparent 68%); }
.cierre--claro .cierre__text { color: var(--ink-soft); opacity: 1; }
.cierre--claro .cierre__cta .btn--pill { box-shadow: 0 16px 38px rgba(15, 28, 34, .18); }
.cierre--claro .link-arrow { color: var(--ink); }
.cierre--claro .link-arrow:hover { color: var(--red); }

/* ---------- CTA promocional (fondo oscuro) ---------- */

.cta-promo {
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(194, 51, 57, .18), transparent 55%),
    var(--ink);
  color: var(--white);
  padding: clamp(72px, 9vw, 110px) var(--gutter);
}

.cta-promo__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.cta-promo--center .cta-promo__inner {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 880px;
}

.cta-promo__visual img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  transform: rotate(-2deg);
  transition: transform .4s var(--ease);
}

.cta-promo__visual img:hover { transform: rotate(0deg) scale(1.02); }

.cta-promo__eyebrow {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 14px;
}

/* Punto rojo "en emisión" delante del eyebrow */
.cta-promo__eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(194, 51, 57, .22);
  vertical-align: middle;
}

.cta-promo__title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
}

.cta-promo__meta {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 500;
  opacity: .85;
}

.cta-promo__text {
  margin-top: 16px;
  font-size: 1.12rem;
  opacity: .75;
  max-width: 56ch;
}

.cta-promo--center .cta-promo__text { margin-inline: auto; }

.cta-promo__cta { margin-top: 32px; }

.cta-promo__cta .btn--pill {
  padding: 16px 38px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

.cta-promo__cta .btn--pill::after {
  content: "→";
  margin-left: 12px;
  display: inline-block;
  font-weight: 400;
  transition: transform .35s var(--ease);
}

.cta-promo__cta .btn--pill:hover::after { transform: translateX(5px); }

.cta-promo .link-arrow { color: var(--white); }
.cta-promo .link-arrow:hover { color: var(--red); }

@media (max-width: 720px) {
  .cta-promo__inner { grid-template-columns: 1fr; text-align: center; }
  .cta-promo__visual { max-width: 220px; margin: 0 auto; }
  .cta-promo__text { margin-inline: auto; }
}

/* ---------- Pila de imágenes promocional (oscura y clara) ---------- */

.pila { padding: clamp(72px, 9vw, 110px) 24px; }

.pila--dark {
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(194, 51, 57, .18), transparent 55%),
    var(--ink);
  color: var(--white);
}

.pila--light { background: var(--white); }

.pila__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.pila--center .pila__inner {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 880px;
}

.pila__stack {
  position: relative;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pila__stack:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 8px;
  border-radius: 16px;
}

.pila__card {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .45s var(--ease);
  will-change: transform;
}

/* Cada imagen se muestra completa y conserva su orientación (vertical u
   horizontal); el marco de la pila lo marca la primera imagen (initPilas). */
.pila__card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 28, 34, .28);
}

.pila--dark .pila__card img { box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }

.pila__card .ph {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

/* La carta de arriba sale hacia un lado antes de colocarse al fondo.
   !important: debe ganar al transform que initPilas pone en línea. */
.pila__card--out {
  transform: translate(-58%, 4%) rotate(-12deg) scale(.94) !important;
}

.pila__hint {
  margin-top: 20px;
  font-size: .85rem;
  text-align: center;
  opacity: .55;
}

.pila__eyebrow {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pila--dark .pila__eyebrow { opacity: .65; }
.pila--light .pila__eyebrow { color: var(--red); }

.pila__title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
}

.pila__meta {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 500;
}

.pila--dark .pila__meta { opacity: .85; }

.pila__text {
  margin-top: 16px;
  font-size: 1.12rem;
  max-width: 56ch;
}

.pila--dark .pila__text { opacity: .75; }
.pila--light .pila__text { color: var(--ink-soft); }

.pila--center .pila__text { margin-inline: auto; }

.pila__cta { margin-top: 32px; }

.pila--dark .link-arrow { color: var(--white); }
.pila--dark .link-arrow:hover { color: var(--red); }

@media (max-width: 720px) {
  .pila__inner { grid-template-columns: 1fr; text-align: center; }
  .pila__visual { max-width: 250px; margin: 0 auto; width: 100%; }
  .pila__text { margin-inline: auto; }
}

/* ---------- Pila en prensa (pila de fotos dentro de una tarjeta de prensa) ---------- */

/* Sustituye la caja recortada del carrusel: la pila necesita aire para
   girar sus cartas y no lleva fondo gris ni recorte propio. */
.proyecto--prensa .proyecto__media--pila {
  overflow: visible;
  background: transparent;
  border-radius: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: clamp(28px, 5vw, 54px) clamp(24px, 4vw, 48px);
}

.proyecto__media--pila .pila__stack { width: min(100%, 320px); }

.proyecto__media--pila .pila__hint { color: var(--ink-soft); }

.pila__caption {
  margin-top: 18px;
  font-size: .9rem;
  color: var(--ink-soft);
  text-align: center;
  max-width: 42ch;
}

.pila__caption + .pila__hint { margin-top: 8px; }

/* ---------- Pie de página ---------- */

.footer { background: var(--gray-bg); padding: 72px var(--gutter) 36px; }

.footer__inner {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.footer__brand img { height: 30px; width: auto; margin-bottom: 18px; }

.footer__brand p { color: var(--ink-soft); font-size: .95rem; max-width: 36ch; }

.footer__brand .footer__portfolio {
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  margin: 2px 0 12px;
  max-width: 38ch;
}

.footer__igs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-bottom: 14px;
}

.footer__ig {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
}

.footer__ig:hover { text-decoration: underline; }

.footer__brand .footer__tagline {
  color: var(--ink-soft);
  font-size: .92rem;
  font-style: italic;
  max-width: 42ch;
  margin: 0 0 6px;
}

.footer__links { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }

.footer__links a { font-size: .85rem; color: var(--ink-soft); text-decoration: none; }

.footer__links a:hover { color: var(--red); }

.footer__copy {
  max-width: var(--maxw);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(15, 28, 34, .08);
  font-size: .8rem;
  color: var(--ink-soft);
}
/* ---------- Carrusel ---------- */

.carrusel { position: relative; }

.carrusel__viewport { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }

.carrusel__track { display: flex; transition: transform .6s var(--ease); }

.carrusel__slide { flex: 0 0 100%; margin: 0; position: relative; }

.carrusel__slide .ph, .carrusel__slide img {
  width: 100%; aspect-ratio: 16 / 8; object-fit: cover;
}

.carrusel__slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 28px 20px;
  color: #fff; font-size: .9rem;
  background: linear-gradient(transparent, rgba(15, 28, 34, .65));
}

.carrusel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .25s var(--ease), color .25s var(--ease);
  display: grid; place-items: center; padding-bottom: 4px;
}

.carrusel__btn:hover { background: var(--red); color: #fff; }

.carrusel__btn--prev { left: 16px; }
.carrusel__btn--next { right: 16px; }

.carrusel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }

.carrusel__dot {
  width: 8px; height: 8px; border: none; border-radius: 50%;
  background: rgba(15, 28, 34, .2); cursor: pointer; padding: 0;
  transition: background .25s, transform .25s;
}

.carrusel__dot.active { background: var(--red); transform: scale(1.3); }

/* ---------- Proyectos / portafolio ---------- */

.proyectos-section .section__title { margin-bottom: 18px; }

.proyectos-head {
  max-width: 860px;
  margin-bottom: 56px;
}

.proyectos-head__text {
  color: var(--ink-soft);
  font-size: 1.12rem;
  max-width: 62ch;
}

.proyectos {
  display: grid;
  gap: 42px;
}

.proyecto {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 34px;
  align-items: stretch;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 10px 34px rgba(15, 28, 34, .06);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.proyecto::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--red);
  opacity: .9;
}

.proyecto:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.proyecto:nth-child(even) {
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
}

.proyecto:nth-child(even)::before {
  left: auto;
  right: 0;
}

.proyecto:nth-child(even) .proyecto__media { order: 2; }

.proyecto__media {
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--gray-card);
}

.proyecto__carrusel,
.proyecto__carrusel .carrusel__viewport,
.proyecto__carrusel .carrusel__track,
.proyecto__carrusel .carrusel__slide {
  height: 100%;
}

.proyecto__carrusel .carrusel__viewport {
  border-radius: 24px;
  box-shadow: none;
}

.proyecto__carrusel .carrusel__slide .ph,
.proyecto__carrusel .carrusel__slide img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.proyecto:hover .proyecto__carrusel .carrusel__slide img { transform: scale(1.035); }

.proyecto__carrusel .carrusel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  margin-top: 0;
}

.proyecto__carrusel .carrusel__dot {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 8px rgba(15, 28, 34, .28);
}

.proyecto__carrusel .carrusel__dot.active { background: var(--red); }

.proyecto__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 24px 30px 4px;
}

.proyecto:nth-child(even) .proyecto__copy { padding: 30px 4px 30px 24px; }

.proyecto__eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.proyecto__copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
}

.proyecto__copy > p {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 48ch;
}

.proyecto__cta { margin-top: 28px; }

/* Rediseño de los proyectos "en marcha" (solo la página de proyectos;
   prensa conserva el diseño clásico): tarjeta limpia sin barra lateral,
   número gigante perfilado al fondo y un aro degradado de marca que se
   enciende al pasar el ratón. */
.proyecto--obra {
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
}

.proyecto--obra::before,
.proyecto--obra:nth-child(even)::before {
  inset: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(194, 51, 57, .65), transparent 38%, transparent 62%, rgba(15, 28, 34, .35));
  padding: 1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}

.proyecto--obra:hover::before { opacity: 1; }

.proyecto--obra .proyecto__num {
  position: absolute;
  right: 26px;
  bottom: 2px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(15, 28, 34, .12);
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke-color .45s var(--ease), transform .45s var(--ease);
}

.proyecto--obra:nth-child(even) .proyecto__num {
  right: auto;
  left: 26px;
}

.proyecto--obra:hover .proyecto__num {
  -webkit-text-stroke-color: rgba(194, 51, 57, .35);
  transform: translateY(-6px);
}

.proyecto--obra .proyecto__media,
.proyecto--obra .proyecto__carrusel .carrusel__viewport { border-radius: 28px; }

.proyecto--obra .proyecto__copy { position: relative; z-index: 1; }

/* ---------- Prensa ---------- */

.proyecto--prensa {
  grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr);
  align-items: center;
}

.proyecto--prensa:nth-child(even) {
  grid-template-columns: minmax(300px, 1.05fr) minmax(0, .95fr);
}

.proyecto--prensa .proyecto__media { align-self: center; }

.proyecto--prensa .proyecto__carrusel,
.proyecto--prensa .proyecto__carrusel .carrusel__viewport,
.proyecto--prensa .proyecto__carrusel .carrusel__track,
.proyecto--prensa .proyecto__carrusel .carrusel__slide {
  height: auto;
}

.proyecto--prensa .proyecto__carrusel .carrusel__slide .ph,
.proyecto--prensa .proyecto__carrusel .carrusel__slide img {
  height: auto;
  min-height: 260px;
  aspect-ratio: 16 / 9;
}

.proyecto--prensa .proyecto__copy h3 {
  font-size: clamp(1.6rem, 3vw, 2.45rem);
}

.prensa-videos {
  display: grid;
  gap: 34px;
}

.prensa-video {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr);
  gap: 34px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 10px 34px rgba(15, 28, 34, .06);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.prensa-video:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.prensa-video:nth-child(even) {
  grid-template-columns: minmax(300px, 1.05fr) minmax(0, .95fr);
}

.prensa-video:nth-child(even) .prensa-video__media { order: 2; }

.prensa-video__media iframe,
.prensa-video__media video,
.prensa-video__media .ph {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  border: none;
  border-radius: 24px;
  box-shadow: none;
  overflow: hidden;
  display: block;
}

.prensa-video__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 24px 30px 4px;
}

.prensa-video:nth-child(even) .prensa-video__copy { padding: 30px 4px 30px 24px; }

.prensa-video__copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.45rem);
  font-weight: 800;
  line-height: 1.12;
}

.prensa-video__copy > p {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 48ch;
}

/* ---------- Bio y recursos (bios + fotos + logos descargables) ---------- */

.kit-prensa { position: relative; }
.kit-prensa[id] { scroll-margin-top: 80px; }

/* ---- Banda oscura de biografía ----
   El bloque "Biografía" se trata como una sección oscura inmersiva, con la
   paleta de paneles oscuros del sitio; después se vuelve al fondo claro para
   las descargas de fotos y logos. Así el color queda contenido en el fondo
   profundo y no "tiñe" de rosa las zonas claras. */
.kit-bioband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 9vw, 128px) var(--gutter);
  color: var(--white);
  background:
    radial-gradient(115% 90% at 88% -12%, rgba(194, 51, 57, .22), transparent 56%),
    radial-gradient(95% 85% at -8% 112%, rgba(194, 51, 57, .10), transparent 60%),
    linear-gradient(162deg, #17272f 0%, var(--ink) 54%, #081115 100%);
}

/* Filo luminoso superior, como en los demás paneles oscuros */
.kit-bioband::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  pointer-events: none;
}

.kit-bioband__glow {
  position: absolute;
  top: -28%;
  right: -12%;
  width: 60%;
  height: 120%;
  background: radial-gradient(circle, rgba(194, 51, 57, .26), transparent 64%);
  filter: blur(32px);
  pointer-events: none;
  z-index: -1;
}

.kit-bioband .section__inner { position: relative; z-index: 1; }

/* Zona clara de descargas (fotos y logos) */
.kit-prensa__downloads-area { background: var(--white); }

/* Cabecera de la banda de biografía (centrada) */
.kit-prensa__header {
  max-width: 680px;
  margin: 0 auto clamp(40px, 5vw, 58px);
  text-align: center;
}

/* Antetítulo: el mismo estilo del resto del sitio, aclarado para fondo oscuro */
.kit-prensa__header .feature__eyebrow {
  color: #ff7176;
  margin-bottom: 16px;
}

.kit-prensa__header .section__title {
  margin-bottom: 20px;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--white);
}

.kit-prensa__lead {
  color: rgba(255, 255, 255, .72);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.62;
  max-width: 56ch;
  margin: 0 auto;
}

.kit-prensa__actions {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* Botón de contacto en cápsula (LinkedIn) */
.kit-contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 16px 38px rgba(15, 28, 34, .22);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.kit-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--red), #e0454b);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: 0;
}

.kit-contact > * { position: relative; z-index: 1; }

.kit-contact__icon { width: 19px; height: 19px; }

.kit-contact__arrow {
  width: 17px;
  height: 17px;
  transition: transform .35s var(--ease);
}

.kit-contact:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(194, 51, 57, .35);
}

.kit-contact:hover::before { opacity: 1; }
.kit-contact:hover .kit-contact__arrow { transform: translateX(4px); }

/* Bios */

.kit-prensa__bios {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 22px;
  margin-top: 0;
}

/* Tarjetas de biografía en cristal sobre la banda oscura */
.kit-bio {
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 24px;
  padding: clamp(26px, 3vw, 40px);
  box-shadow: 0 26px 64px rgba(8, 17, 21, .38);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}

.kit-bio:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .065);
}

/* Filo luminoso de cada tarjeta */
.kit-bio::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.kit-bio__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.kit-bio__head span {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ff7176;
}

.kit-bio__copy {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--white);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  padding: 8px 16px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.kit-bio__copy:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.kit-bio__text {
  color: rgba(255, 255, 255, .74);
  font-size: 1.04rem;
  line-height: 1.62;
  white-space: pre-line;
}

.kit-bio__text strong { color: var(--white); font-weight: 600; }

/* Bloques de descarga (fotos y logos) */

.kit-prensa__downloads { margin-top: clamp(48px, 7vw, 80px); }
.kit-prensa__downloads-area .kit-prensa__downloads:first-child { margin-top: 0; }

.kit-prensa__download-head {
  max-width: 640px;
  margin: 0 auto 34px;
  text-align: center;
}

.kit-prensa__download-head .feature__eyebrow { margin-bottom: 12px; }

.kit-prensa__download-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
}

.kit-prensa__download-note {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.55;
}

/* Botón de descarga */

.kit-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border: 1px solid rgba(15, 28, 34, .16);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 600;
  padding: 9px 16px;
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.kit-dl:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  transform: translateY(-2px);
}

.kit-dl__icon { width: 17px; height: 17px; }

.kit-dl--solid {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.kit-dl--solid:hover { background: var(--red); border-color: var(--red); }

/* Fotos — galería inmersiva con descarga superpuesta */

.kit-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

.kit-photo {
  border-radius: 26px;
}

.kit-photo__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 26px;
  overflow: hidden;
  background: var(--gray-card);
  border: 1px solid rgba(15, 28, 34, .08);
  box-shadow: 0 12px 34px rgba(15, 28, 34, .08);
  text-decoration: none;
  color: inherit;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

.kit-photo__frame--static { cursor: default; }

.kit-photo__frame:hover {
  transform: translateY(-8px);
  border-color: rgba(194, 51, 57, .28);
  box-shadow: 0 34px 70px rgba(15, 28, 34, .22);
}

.kit-photo__media {
  position: absolute;
  inset: 0;
}

.kit-photo__media img,
.kit-photo__media .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .45s var(--ease);
}

.kit-photo__frame:hover .kit-photo__media img { transform: scale(1.07); }

/* Velo degradado para legibilidad del pie */
.kit-photo__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 28, 34, .82) 0%, rgba(15, 28, 34, .28) 38%, rgba(15, 28, 34, 0) 62%);
  opacity: .9;
  transition: opacity .45s var(--ease);
}

.kit-photo__frame:hover .kit-photo__shade { opacity: 1; }

/* Sello de formato (JPG/PNG…) */
.kit-photo__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
}

/* Botón circular de descarga (siempre visible) */
.kit-photo__dl {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(15, 28, 34, .22);
  transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.kit-photo__dl .kit-dl__icon { width: 20px; height: 20px; }

.kit-photo__frame:hover .kit-photo__dl,
.kit-photo__frame:focus-visible .kit-photo__dl {
  transform: scale(1.12);
  background: var(--red);
  color: var(--white);
}

/* Pie superpuesto: título + descripción + crédito */
.kit-photo__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 20px 20px;
  color: var(--white);
}

.kit-photo__caption h4 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.22;
}

.kit-photo__caption p {
  margin-top: 5px;
  font-size: .92rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .82);
}

.kit-photo__caption small {
  display: block;
  margin-top: 6px;
  font-size: .76rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .62);
}

/* Pista "Descargar foto" que entra al pasar el cursor */
.kit-photo__hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  color: var(--white);
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease), padding .4s var(--ease);
}

.kit-photo__hint .kit-dl__icon { width: 16px; height: 16px; }

.kit-photo__frame:hover .kit-photo__hint,
.kit-photo__frame:focus-visible .kit-photo__hint {
  max-height: 60px;
  margin-top: 14px;
  padding: 9px 16px;
  border-width: 1px;
  opacity: 1;
}

/* En táctil no hay hover: la descarga se muestra siempre */
@media (hover: none) {
  .kit-photo__dl { transform: none; opacity: 1; }
  .kit-photo__hint {
    max-height: 60px;
    margin-top: 14px;
    padding: 9px 16px;
    border-width: 1px;
    opacity: 1;
  }
}

/* Logos */

.kit-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(278px, 1fr));
  gap: 22px;
}

.kit-logo {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(15, 28, 34, .08);
  background: var(--white);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.kit-logo:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(15, 28, 34, .14);
  border-color: rgba(194, 51, 57, .22);
}

.kit-logo__visual {
  display: grid;
  place-items: center;
  min-height: 184px;
  padding: 40px;
  background:
    linear-gradient(45deg, rgba(15, 28, 34, .03) 25%, transparent 25% 75%, rgba(15, 28, 34, .03) 75%) 0 0 / 22px 22px,
    linear-gradient(45deg, rgba(15, 28, 34, .03) 25%, transparent 25% 75%, rgba(15, 28, 34, .03) 75%) 11px 11px / 22px 22px,
    var(--white);
}

.kit-logo--dark .kit-logo__visual {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, .045) 25%, transparent 25% 75%, rgba(255, 255, 255, .045) 75%) 0 0 / 22px 22px,
    linear-gradient(45deg, rgba(255, 255, 255, .045) 25%, transparent 25% 75%, rgba(255, 255, 255, .045) 75%) 11px 11px / 22px 22px,
    var(--ink);
}

.kit-logo__visual img,
.kit-logo__visual .ph {
  width: 100%;
  max-width: 252px;
  height: auto;
  object-fit: contain;
}

.kit-logo__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-top: 1px solid rgba(15, 28, 34, .08);
}

.kit-logo__meta h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.2;
}

.kit-logo__meta small {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: .84rem;
}

/* ---------- Publicaciones (libros y artículos) ---------- */

/* ===== "La Biblioteca": estantería de publicaciones.
   Un mueble librería de verdad: frente de tinta lacada con doble filo rojo
   embutido (mismo lenguaje que la gramola), placa de latón "Ex libris" e
   interior de papel crema con baldas de madera de tinta que initEstanteria-
   Publicaciones dibuja bajo cada fila. Cada publicación es una portada de
   libro (tinta de marca, lomo rojo y canto de páginas) con sombra de contacto;
   al pulsar se levanta de la balda y debajo se abre una ficha "libro abierto"
   con flechas para hojear la colección. Todo es editable desde editor.html. ===== */
.biblioteca-section {
  background: var(--white);
  overflow: hidden;
  /* tapa de libro de marca, reutilizada en portada y ficha */
  --book-bg:
    linear-gradient(115deg, rgba(255, 255, 255, .09), transparent 32%),
    radial-gradient(140% 90% at 92% 0%, rgba(194, 51, 57, .5), transparent 55%),
    linear-gradient(160deg, #243640 0%, #14242c 55%, #0c161c 100%);
}

.biblioteca-head {
  max-width: 760px;
  margin: 0 auto clamp(34px, 5vw, 58px);
  text-align: center;
}
.biblioteca-head .section__title { margin-bottom: 16px; }
.biblioteca-head__text {
  color: var(--ink-soft);
  font-size: 1.12rem;
  max-width: 60ch;
  margin: 0 auto;
}

/* ---------- el mueble librería ----------
   Frente de tinta lacada con doble filo rojo embutido y brillo de barniz
   (el mismo lenguaje que la gramola del salón), placa de latón "Ex libris"
   e interior de papel crema donde las portadas oscuras destacan. Sus
   colores son fijos a propósito: el mueble se ve igual de día y de noche,
   como los demás muebles "diseñados a mano" de la web. */
.biblioteca-stage { position: relative; }

.biblioteca-mueble {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  border-radius: clamp(18px, 2.6vw, 30px);
  padding: 16px clamp(16px, 2.2vw, 26px) clamp(18px, 2.6vw, 26px);
  background:
    radial-gradient(120% 55% at 50% -6%, rgba(194, 51, 57, .2) 0%, transparent 55%),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 0%, transparent 13% 87%, rgba(255, 255, 255, .07) 100%),
    linear-gradient(180deg, #1b2f3a 0%, #101d24 55%, #0a141a 100%);
  border: 1px solid rgba(194, 51, 57, .4);
  box-shadow:
    inset 0 0 0 7px #0a141a,
    inset 0 0 0 9px rgba(194, 51, 57, .32),
    inset 0 0 0 10px rgba(255, 255, 255, .05),
    0 30px 70px rgba(10, 20, 26, .38),
    0 70px 130px -60px rgba(194, 51, 57, .45);
}

/* placa de latón atornillada sobre el frente */
.biblioteca-mueble__plaque {
  position: relative;
  width: max-content;
  max-width: 82%;
  margin: 2px auto 14px;
  padding: 7px 32px;
  border-radius: 7px;
  background: linear-gradient(180deg, #f7efdb 0%, #e2d3ac 55%, #cbb98d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -2px 3px rgba(96, 74, 38, .35),
    0 4px 10px rgba(0, 0, 0, .4);
  color: #4a3a20;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.biblioteca-mueble__plaque::before,
.biblioteca-mueble__plaque::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e6, #8a713f 70%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.biblioteca-mueble__plaque::before { left: 11px; }
.biblioteca-mueble__plaque::after { right: 11px; }

/* interior de papel crema con sombra de caja y luz cálida de galería
   que se enciende UNA vez cuando los libros llegan a la balda */
.biblioteca-case {
  position: relative;
  border-radius: clamp(10px, 1.6vw, 16px);
  background: linear-gradient(180deg, #f8f3e8 0%, #efe6d2 100%);
  box-shadow:
    inset 0 0 0 1px rgba(15, 28, 34, .22),
    inset 0 16px 34px rgba(15, 28, 34, .16),
    inset 0 -12px 26px rgba(15, 28, 34, .14),
    inset 22px 0 34px -26px rgba(15, 28, 34, .5),
    inset -22px 0 34px -26px rgba(15, 28, 34, .5);
  padding: clamp(30px, 4vw, 46px) clamp(16px, 2.6vw, 30px) clamp(10px, 1.6vw, 16px);
  overflow: hidden;
}
.biblioteca-case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 55% at 50% 0%, rgba(255, 214, 150, .4) 0%, rgba(255, 214, 150, .08) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 1.1s var(--ease) .2s;
  pointer-events: none;
}
.biblioteca-case.is-shelved::before { opacity: 1; }

/* las baldas: tablas de madera de tinta que initEstanteriaPublicaciones
   coloca bajo cada fila de libros (top calculado a medida) */
.biblioteca-baldas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.biblioteca-balda {
  position: absolute;
  left: clamp(8px, 1.2vw, 14px);
  right: clamp(8px, 1.2vw, 14px);
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, #33474f 0%, #182931 40%, #0c161c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 12px 22px -6px rgba(15, 28, 34, .4);
}

.biblioteca-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(34px, 4vw, 52px) clamp(20px, 2.6vw, 38px);
  padding: 0 clamp(8px, 2vw, 24px);
}

/* ---------- portada de libro ---------- */
.biblio-book {
  --bw: clamp(122px, 15vw, 156px);
  position: relative;
  width: var(--bw);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  opacity: 0;
}
/* cada libro baja hasta su balda y asienta, una sola vez y escalonado */
.biblioteca-case.is-shelved .biblio-book {
  animation: biblio-colocar .6s var(--ease) calc(var(--i) * 70ms) 1 both;
}
@keyframes biblio-colocar {
  0% { opacity: 0; transform: translateY(-22px); }
  70% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: none; }
}
.biblio-book:focus { outline: none; }
.biblio-book:focus-visible { outline: 2px solid #c23339; outline-offset: 6px; border-radius: 8px; }

.biblio-book__holder {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.2;
}

.biblio-book__obj {
  position: absolute;
  inset: 0;
  transform: perspective(900px) rotateY(-12deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), filter .5s var(--ease);
  filter: drop-shadow(10px 10px 14px rgba(15, 28, 34, .28));
}
@media (hover: hover) {
  .biblio-book:hover .biblio-book__obj {
    transform: perspective(900px) rotateY(-4deg) translateY(-10px) scale(1.05);
    filter: drop-shadow(0 24px 26px rgba(15, 28, 34, .35));
  }
}
.biblio-book:focus-visible .biblio-book__obj {
  transform: perspective(900px) rotateY(-4deg) translateY(-10px) scale(1.05);
}
.biblio-book.is-open .biblio-book__obj {
  transform: perspective(900px) rotateY(0deg) translateY(-14px) scale(1.07);
  filter: drop-shadow(0 26px 34px rgba(194, 51, 57, .38));
}

/* sombra de contacto sobre la balda: se despega cuando el libro se levanta */
.biblio-book__sombra {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -7px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 18, 23, .42), transparent 72%);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.biblio-book:hover .biblio-book__sombra,
.biblio-book.is-open .biblio-book__sombra {
  opacity: .5;
  transform: translateY(2px) scaleX(.92);
}

/* canto de páginas que asoma por la derecha */
.biblio-book__pages {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  right: -7px;
  width: 12px;
  border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(180deg, #f4f1ea 0 2px, #d9d4c8 2px 3px);
}

.biblio-book__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 5px 11px 11px 5px;
  overflow: hidden;
  background: var(--book-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
/* variación de marca: el brillo rojo cambia de esquina según el tipo */
.biblio-book[data-kind="articulo"] .biblio-book__cover { background: linear-gradient(115deg, rgba(255,255,255,.09), transparent 32%), radial-gradient(140% 90% at 8% 100%, rgba(194,51,57,.5), transparent 55%), linear-gradient(160deg, #243640 0%, #14242c 55%, #0c161c 100%); }
.biblio-book[data-kind="capitulo"] .biblio-book__cover { background: linear-gradient(115deg, rgba(255,255,255,.09), transparent 32%), radial-gradient(140% 90% at 8% 0%, rgba(194,51,57,.5), transparent 55%), linear-gradient(160deg, #243640 0%, #14242c 55%, #0c161c 100%); }
.biblio-book[data-kind="colaboracion"] .biblio-book__cover { background: linear-gradient(115deg, rgba(255,255,255,.09), transparent 32%), radial-gradient(140% 90% at 92% 100%, rgba(194,51,57,.5), transparent 55%), linear-gradient(160deg, #243640 0%, #14242c 55%, #0c161c 100%); }

/* lomo rojo de la encuadernación */
.biblio-book__spine {
  position: absolute;
  z-index: 3;
  top: 0; bottom: 0; left: 0;
  width: 10px;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(180deg, #d2434a 0%, var(--red) 45%, #8e2227 100%);
}

.biblio-book__photo { position: absolute; inset: 0; z-index: 1; }
.biblio-book__photo img { width: 100%; height: 100%; object-fit: cover; }

.biblio-book__front {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 17px 13px 14px 22px;
}
.biblio-book__top {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}
.biblio-book__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.82rem, 1.05vw, 1rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: #fff; /* la tapa es oscura fija: el texto no sigue al modo noche */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.biblio-book__foot {
  display: flex;
  align-items: center;
  gap: 10px;
}
.biblio-book__year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .6rem;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .72);
}
.biblio-book__rule {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}
.biblio-book__foot img { height: 13px; width: auto; opacity: .9; margin-left: auto; }

/* rótulo de cada portada: etiqueta de museo bajo la balda.
   Va sobre el papel crema del mueble, así que sus colores son fijos
   (no cambian con el modo noche, igual que el mueble). */
.biblio-book__caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  width: 100%;
  margin-top: clamp(16px, 2vw, 21px);
  min-height: 2.9em;
}
.biblio-book__capKind {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c23339;
}
.biblio-book__capTitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.22;
  color: #182a33;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s var(--ease);
}
.biblio-book.is-open .biblio-book__capTitle { color: #c23339; }

/* ---------- ficha "libro abierto" (colores de marca) ---------- */
.biblioteca-reader {
  position: relative;
  margin-top: clamp(26px, 4vw, 44px);
}
.biblioteca-reader__hint {
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: .92rem;
  letter-spacing: .03em;
  padding: 14px 0 2px;
}
.biblioteca-reader.is-open .biblioteca-reader__hint { display: none; }

/* flechas para hojear la colección desde la ficha */
.biblioteca-reader__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.biblioteca-reader__nav[hidden] { display: none; } /* el display:flex no debe ganar al hidden */
.biblioteca-reader__flecha {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.biblioteca-reader__flecha:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
}
.biblioteca-reader__flecha svg { width: 18px; height: 18px; }
.biblioteca-reader__count {
  min-width: 64px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
}

.biblio-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  max-width: 720px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .08);
  box-shadow: 0 34px 74px rgba(15, 28, 34, .16);
  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.biblio-card.is-in { opacity: 1; transform: none; }

.biblio-card__page { position: relative; padding: clamp(18px, 2.2vw, 28px); }
/* la página izquierda lleva un pliegue suave hacia el lomo central */
.biblio-card__page--left {
  background: var(--gray-bg);
  box-shadow: inset -20px 0 26px -20px rgba(15, 28, 34, .22);
}

.biblio-card__cover {
  position: relative;
  width: 100%;
  max-width: 158px;
  margin: 0 auto;
  aspect-ratio: 3 / 4.1;
  border-radius: 5px 10px 10px 5px;
  overflow: hidden;
  background: var(--book-bg);
  box-shadow: 12px 14px 28px rgba(15, 28, 34, .22), inset 5px 0 0 rgba(0, 0, 0, .14);
}
.biblio-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.biblio-card__coverPh {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 14px 14px 22px;
  color: #fff; /* tapa oscura fija: texto blanco también de noche */
}
.biblio-card__coverPh::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 9px;
  background: linear-gradient(180deg, #d2434a 0%, var(--red) 45%, #8e2227 100%);
}
.biblio-card__coverKind {
  font-family: var(--font-display);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.biblio-card__coverTitle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.86rem, 1.2vw, 1.02rem);
  line-height: 1.16;
  color: #fff;
}
.biblio-card__coverYear {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .7);
}

.biblio-card__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}
.biblio-card__meta div {
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 10px;
  padding: 8px 11px;
}
.biblio-card__meta dt {
  font-family: var(--font-display);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.biblio-card__meta dd {
  margin-top: 3px;
  color: var(--ink);
  font-weight: 600;
  font-size: .92rem;
}

.biblio-card__kind {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 7px;
}
.biblio-card__title {
  color: var(--ink);
  font-size: clamp(1.12rem, 1.9vw, 1.5rem);
  line-height: 1.14;
  margin-bottom: 10px;
}
.biblio-card__summary { color: var(--ink-soft); line-height: 1.5; font-size: .94rem; }
.biblio-card__quote {
  margin-top: 14px;
  padding: 11px 15px;
  border-left: 3px solid var(--red);
  border-radius: 0 10px 10px 0;
  background: rgba(194, 51, 57, .06);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: .92rem;
  line-height: 1.45;
}
.biblio-card__cta { margin-top: 16px; }

.biblio-card__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--white);
  background: var(--ink);
  box-shadow: 0 8px 20px rgba(15, 28, 34, .28);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.biblio-card__close:hover { transform: rotate(90deg); background: var(--red); }
.biblio-card__close svg { width: 18px; height: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .biblio-book { --bw: 100%; }
  .biblioteca-mueble {
    border-radius: 18px;
    padding: 12px 12px 14px;
    box-shadow:
      inset 0 0 0 5px #0a141a,
      inset 0 0 0 6.5px rgba(194, 51, 57, .32),
      inset 0 0 0 7.5px rgba(255, 255, 255, .05),
      0 24px 50px rgba(10, 20, 26, .38);
  }
  .biblioteca-mueble__plaque {
    margin-bottom: 10px;
    padding: 6px 24px;
    font-size: .56rem;
    letter-spacing: .16em;
  }
  .biblioteca-case { padding: 24px 12px 8px; }
  .biblioteca-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 150px));
    justify-content: center;
    gap: clamp(30px, 7vw, 44px) clamp(16px, 5vw, 26px);
    padding: 0;
  }
  .biblio-card { grid-template-columns: 1fr; max-width: 460px; }
  .biblio-card__page--left { display: flex; gap: 18px; align-items: flex-start; box-shadow: none; }
  .biblio-card__cover { flex: 0 0 42%; }
  .biblio-card__meta { flex: 1 1 auto; margin-top: 0; grid-template-columns: 1fr; align-content: start; }
}

@media (prefers-reduced-motion: reduce) {
  .biblio-book { animation: none !important; opacity: 1; }
  .biblio-book__obj, .biblio-book__sombra, .biblio-card { transition: none !important; }
  .biblioteca-case::before { transition: none; opacity: 1; }
  .biblio-book__obj { transform: perspective(900px) rotateY(-10deg); }
}
/* ===== Proyectos destacados: vitrina editorial.
   El proyecto estrella abre la sección en un gran panel oscuro con brillo
   de marca (como el artículo destacado del blog): numeración gigante,
   imagen, tipo, título, chips, resumen, resultado y botón. El resto forma
   una rejilla de tarjetas con inclinación 3D y brillo que sigue al cursor,
   y los botones de filtro por tipo reordenan la vitrina con una
   reaparición escalonada (la interacción vive en initProyectosDestacados). ===== */
.vitrina-section {
  background: var(--white);
}

.vitrina-head {
  max-width: 860px;
  margin-bottom: 54px;
}

.vitrina-head .section__title { margin-bottom: 18px; }

.vitrina-head__text {
  color: var(--ink-soft);
  font-size: 1.12rem;
  max-width: 62ch;
}

/* ---------- proyecto estrella (gran panel oscuro) ---------- */

.vitrina-star {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(194, 51, 57, .32), transparent 55%),
    linear-gradient(135deg, #1a2a33 0%, var(--ink) 58%, #0a1318 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(15, 28, 34, .24);
  margin-bottom: 56px;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}

.vitrina-star:hover { transform: translateY(-4px); box-shadow: 0 34px 80px rgba(15, 28, 34, .3); }

/* fino borde interior, como un cristal sobre el panel */
.vitrina-star::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .09);
  pointer-events: none;
}

.vitrina-star__num {
  position: absolute;
  z-index: 2;
  top: -24px;
  right: 8px;
  font-family: var(--font-display);
  font-size: clamp(6rem, 12vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16);
  pointer-events: none;
  user-select: none;
}

.vitrina-star__media {
  position: relative;
  display: block;
  min-height: 380px;
  overflow: hidden; /* el zoom de la imagen no debe invadir la zona de texto */
}

.vitrina-star__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.vitrina-star:hover .vitrina-star__img { transform: scale(1.04); }

div.vitrina-star__img.vitrina-ph { display: grid; place-items: center; }

/* la imagen se funde con el panel oscuro por su borde interior */
.vitrina-star__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 72%, rgba(15, 28, 34, .55) 100%);
  pointer-events: none;
}

.vitrina-star__copy {
  position: relative;
  z-index: 1;
  padding: clamp(34px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  color: #fff;
}

.vitrina-star__kicker {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e88a8e;
}

.vitrina-star__title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
}

.vitrina-star__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vitrina-star__summary {
  color: rgba(255, 255, 255, .78);
  font-size: 1.02rem;
  max-width: 52ch;
}

.vitrina-star__result {
  padding-left: 18px;
  border-left: 3px solid var(--red);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  max-width: 48ch;
}

.vitrina-star__cta { margin-top: 10px; }

/* ---------- chips compartidos (tipo y datos) ---------- */

.vitrina-kind {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  padding: 6px 15px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(194, 51, 57, .35);
}

.vitrina-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vitrina-chips li {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 28, 34, .14);
  background: rgba(15, 28, 34, .04);
  color: var(--ink-soft);
}

.vitrina-chips--light li {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .08);
  color: var(--white);
}

/* placeholder de marca sobre fondo oscuro cuando no hay imagen */
.vitrina-ph {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 140% at 80% 0%, rgba(194, 51, 57, .16), transparent 55%),
    linear-gradient(135deg, #1a2a33 0%, var(--ink) 60%, #0a1318 100%);
}

.vitrina-ph svg { width: clamp(48px, 18%, 96px); height: auto; opacity: .92; }

/* ---------- filtro por tipo de proyecto ---------- */

.vitrina-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 38px;
}

.vitrina-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--gray-card);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}

.vitrina-filter__btn span {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 28, 34, .08);
  transition: background .3s var(--ease);
}

.vitrina-filter__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.vitrina-filter__btn.active {
  background: var(--ink);
  color: var(--white);
}

.vitrina-filter__btn.active span { background: rgba(255, 255, 255, .16); }

.vitrina-filter__count {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------- rejilla de tarjetas con inclinación 3D ---------- */

.vitrina-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  perspective: 1400px;
}

.vitrina-card { grid-column: span 2; }

.vitrina-card--wide { grid-column: span 4; }

/* la inclinación vive en un envoltorio interno para no pelearse con .reveal */
.vitrina-card__tilt {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gray-card);
  border-radius: var(--radius);
  overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s var(--ease), box-shadow .45s var(--ease);
  transform-style: preserve-3d;
}

.vitrina-card--live .vitrina-card__tilt { transition: transform .08s linear, box-shadow .45s var(--ease); }

.vitrina-card:hover .vitrina-card__tilt { box-shadow: var(--shadow-hover); }

.vitrina-card--wide .vitrina-card__tilt { flex-direction: row; }

.vitrina-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex: none;
}

.vitrina-card--wide .vitrina-card__media {
  aspect-ratio: auto;
  flex: 1 1 52%;
  min-height: 300px;
}

.vitrina-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.vitrina-card:hover .vitrina-card__img { transform: scale(1.05); }

.vitrina-card__num {
  position: absolute;
  right: 16px;
  bottom: 6px;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .28);
  letter-spacing: -0.04em;
  pointer-events: none;
}

.vitrina-card__kind {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(194, 51, 57, .92);
  padding: 5px 13px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.vitrina-card__body {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.vitrina-card--wide .vitrina-card__body {
  flex: 1 1 48%;
  justify-content: center;
  padding: clamp(28px, 3vw, 44px);
}

.vitrina-card__title {
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  font-weight: 700;
  line-height: 1.22;
}

.vitrina-card--wide .vitrina-card__title { font-size: clamp(1.4rem, 2.3vw, 1.9rem); }

.vitrina-card__title a { color: inherit; text-decoration: none; }

/* toda la tarjeta es clicable a través del titular */
.vitrina-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.vitrina-card__title a:hover { color: var(--red); }

.vitrina-card__summary {
  color: var(--ink-soft);
  font-size: .96rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vitrina-card__result {
  padding-left: 14px;
  border-left: 3px solid var(--red);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
}

.vitrina-card__foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vitrina-card__more { font-size: .9rem; }

.vitrina-card:hover .vitrina-card__more { color: var(--red); }

.vitrina-card:hover .vitrina-card__more::after { transform: translateX(4px); }

/* brillo especular que sigue al cursor */
.vitrina-card__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, .35), transparent 62%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.vitrina-card--live .vitrina-card__glare { opacity: 1; }

/* reaparición escalonada al filtrar */
@keyframes vitrinaPop {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.vitrina-pop { animation: vitrinaPop .5s var(--ease) both; animation-delay: var(--pop-delay, 0ms); }

.vitrina-empty {
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

@media (max-width: 1020px) {
  .vitrina-card { grid-column: span 3; }
  .vitrina-card--wide { grid-column: span 6; }
}

@media (prefers-reduced-motion: reduce) {
  .vitrina-star__img,
  .vitrina-card__img { transition: none; }
  .vitrina-star:hover .vitrina-star__img,
  .vitrina-card:hover .vitrina-card__img { transform: none; }
  .vitrina-pop { animation: none; }
}

/* ---------- Conferencias destacadas: escenario claro ----------
   Módulo propio de la página de conferencias, sobre el gris de marca.
   Cada conferencia es una "escena": una pila de 1 a 5 fotos con marco
   blanco que se despliega al entrar en pantalla —dejando ver que debajo
   hay más— y la ficha (chip, título, datos, texto y botón cápsula). Al
   tocar la pila, la foto de arriba vuela al fondo de forma fluida. El
   marco respeta la orientación de cada foto (no se reencuadra). El paso
   de fotos y el ajuste del marco los gestiona app.js. */

.conf-head { max-width: 760px; }

.conf-head .section__title { margin-bottom: 14px; }

.conf-head__text {
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 640px;
}

/* Escenas */

.conf-escenas {
  display: grid;
  gap: clamp(70px, 9vw, 130px);
  margin-top: clamp(42px, 6vw, 72px);
}

.conf-escena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
}

.conf-escena--flip .conf-escena__media { order: 2; }

.conf-escena__media { position: relative; }

/* Abanico de fotos: las cartas comparten marco y se reparten con giros
   y desplazamientos por posición. --spread regula la apertura: 0 antes
   de entrar en pantalla (pila cerrada), 1 desplegado y un poco más al
   pasar el ratón. El paralaje llega por --conf-shift desde app.js. */
.conf-deck {
  --spread: 1;
  position: relative;
  display: block;
  width: min(100%, 520px);
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  transform: translateY(calc(var(--conf-shift, 0) * -16px));
}

.conf-deck--static { cursor: default; }

.conf-deck:not(.conf-deck--static):hover { --spread: 1.22; }

/* La carta solo posiciona y centra; no pinta blanco ni recorta. Así no
   hay bandas: el marco blanco lo lleva la propia imagen como borde fino y
   uniforme (igual en verticales y horizontales). */
.conf-deck__card {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  transition: transform .45s var(--ease);
  will-change: transform;
}

/* Cada foto se muestra completa con su orientación (vertical u horizontal),
   sin reencuadrar. El passe-partout es un borde blanco fino y uniforme que
   se ciñe exactamente a la foto, más la sombra de la pila. */
.conf-deck__card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: var(--white);
  border: clamp(6px, 1.4vw, 11px) solid var(--white);
  box-shadow: 0 18px 50px rgba(15, 28, 34, .16);
}

.conf-deck__card.is-pos-0 { z-index: 5; transform: rotate(calc(var(--spread) * -1.4deg)); }
.conf-deck__card.is-pos-1 { z-index: 4; transform: rotate(calc(var(--spread) * 5.5deg)) translate(calc(var(--spread) * 7%), calc(var(--spread) * 5%)) scale(.975); }
.conf-deck__card.is-pos-2 { z-index: 3; transform: rotate(calc(var(--spread) * -7deg)) translate(calc(var(--spread) * -7%), calc(var(--spread) * 8.5%)) scale(.95); }
.conf-deck__card.is-pos-3 { z-index: 2; transform: rotate(calc(var(--spread) * 9deg)) translate(calc(var(--spread) * 9%), calc(var(--spread) * 12%)) scale(.925); }
.conf-deck__card.is-pos-4 { z-index: 1; transform: rotate(calc(var(--spread) * -10.5deg)) translate(calc(var(--spread) * -8.5%), calc(var(--spread) * 15.5%)) scale(.9); }

/* Antes de entrar en pantalla, la pila está cerrada; al hacerse visible
   (clase .visible del observador de reveals) se despliega. Un retardo de
   entrada por carta da la cascada solo al aparecer, sin frenar el paso de
   fotos al hacer clic (esa transición no lleva retardo). */
.conf-escena.reveal:not(.visible) .conf-deck { --spread: 0; }
.conf-escena.reveal:not(.visible) .conf-deck__card { transform: translateY(26px); }
.conf-escena.reveal:not(.visible) .conf-deck__card.is-pos-1 { transition-delay: .05s; }
.conf-escena.reveal:not(.visible) .conf-deck__card.is-pos-2 { transition-delay: .1s; }
.conf-escena.reveal:not(.visible) .conf-deck__card.is-pos-3 { transition-delay: .15s; }
.conf-escena.reveal:not(.visible) .conf-deck__card.is-pos-4 { transition-delay: .2s; }

/* La foto de arriba, al pasar el ratón por la pila, se endereza y se
   eleva un poco: invita a tocar. */
.conf-deck:not(.conf-deck--static):hover .conf-deck__card.is-pos-0 {
  transform: rotate(0deg) translateY(-10px);
}
.conf-deck:not(.conf-deck--static):hover .conf-deck__card.is-pos-0 img {
  box-shadow: 0 26px 70px rgba(15, 28, 34, .22);
}

/* La foto de arriba sale hacia un lado antes de colocarse al fondo —el
   mismo gesto que las demás pilas (.pila__card--out)—. !important: debe
   ganar al transform de la posición. */
.conf-deck .conf-deck__card.is-leaving {
  z-index: 6;
  transform: translate(-58%, 4%) rotate(-12deg) scale(.94) !important;
}

.conf-deck__ph {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
}

.conf-deck__ph svg { width: clamp(90px, 28%, 150px); opacity: .5; }

.conf-deck__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 520px);
  margin: 22px auto 0;
  min-height: 20px;
}

.conf-deck__caption {
  font-size: .92rem;
  color: var(--ink-soft);
  text-align: center;
}

/* Ficha de la escena */

.conf-escena__copy { position: relative; }

.conf-escena__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(194, 51, 57, .35);
  border-radius: 999px;
  padding: 7px 16px;
}

.conf-escena__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.conf-escena__title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 16px 0 12px;
}

.conf-escena__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: .95rem;
}

.conf-escena__meta li { display: flex; align-items: center; gap: 12px; }

.conf-escena__meta li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(194, 51, 57, .55);
}

.conf-escena__text {
  font-size: 1.05rem;
  max-width: 52ch;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .conf-escena {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .conf-escena--flip .conf-escena__media { order: 0; }
  .conf-deck { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .conf-deck { transform: none; }
  .conf-deck__card { transition: none; }
  .conf-escena.reveal:not(.visible) .conf-deck { --spread: 1; }
  .conf-escena.reveal:not(.visible) .conf-deck__card { transform: none; }
}

.publicaciones-section .section__title { margin-bottom: 18px; }

.publicaciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 36px;
}

.publicacion {
  display: flex;
  flex-direction: column;
  background: var(--gray-bg);
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              background .4s var(--ease), border-color .4s var(--ease);
}

.publicacion:hover {
  transform: translateY(-6px);
  background: var(--white);
  border-color: rgba(194, 51, 57, .22);
  box-shadow: var(--shadow-hover);
}

.publicacion__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--gray-card);
  overflow: hidden;
}

.publicacion__cover img,
.publicacion__cover .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.publicacion__kind {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
  padding: 6px 12px;
  border-radius: 999px;
}

.publicacion__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 26px 28px;
  flex: 1;
}

.publicacion__eyebrow {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}

.publicacion__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.16;
}

.publicacion__meta {
  font-size: .95rem;
  color: var(--ink);
  font-weight: 500;
}

.publicacion__text {
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 48ch;
}

.publicacion__cta {
  margin-top: auto;
  padding-top: 14px;
}

@media (max-width: 540px) {
  .publicaciones { grid-template-columns: 1fr; }
}

/* ---------- Libro destacado ---------- */

.libro {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  background: var(--gray-bg);
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 72px);
}

.libro__cover img,
.libro__cover .ph {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 28, 34, .22);
}

.libro__eyebrow {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.libro__title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
}

.libro__meta {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 500;
}

.libro__text {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 1.12rem;
  max-width: 52ch;
}

.libro__cta { margin-top: 32px; }

@media (max-width: 760px) {
  .libro { grid-template-columns: 1fr; }
  .libro__cover { max-width: 280px; }
}

/* ---------- Libro destacado: variante espectacular (promo) ---------- */

/* La sección hereda el gris del final de la portada y desemboca en blanco */
.libro-section--promo {
  background: linear-gradient(180deg, var(--gray-bg) 0%, var(--white) 60%);
}

.libro--promo {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(230px, 360px) 1fr;
  border: 1px solid rgba(255, 255, 255, .06);
  color: var(--white);
  background:
    radial-gradient(120% 150% at 88% -10%, rgba(194, 51, 57, .32), transparent 55%),
    radial-gradient(90% 120% at -10% 110%, rgba(194, 51, 57, .14), transparent 55%),
    linear-gradient(160deg, #1a2a33 0%, var(--ink) 52%, #0a1318 100%);
  box-shadow: 0 40px 90px rgba(15, 28, 34, .25);
}

/* Etiqueta como cápsula roja con latido de "novedad" */
.libro--promo .libro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 20px;
  box-shadow: 0 10px 26px rgba(194, 51, 57, .35);
}

.libro--promo .libro__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
  animation: libro-pulse 1.8s ease-in-out infinite;
}

@keyframes libro-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.5); opacity: .5; }
}

.libro--promo .libro__title { font-size: clamp(2rem, 4.4vw, 3.3rem); }

.libro--promo .libro__meta { color: rgba(255, 255, 255, .66); }

.libro--promo .libro__text {
  color: rgba(255, 255, 255, .80);
  font-size: clamp(1.08rem, 2vw, 1.2rem);
}

.libro--promo .libro__text strong { color: var(--white); font-weight: 500; }

.libro--promo .btn--pill { background: var(--red); }

.libro--promo .btn--pill:hover {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(255, 255, 255, .22);
}

.libro--promo .link-arrow { color: var(--white); }
.libro--promo .link-arrow:hover { color: var(--red); }

/* Portada real subida desde el editor */
.libro--promo .libro__cover img {
  box-shadow: 0 36px 80px rgba(0, 0, 0, .55);
  transform: rotate(-3deg);
  transition: transform .5s var(--ease);
}

.libro--promo .libro__cover img:hover { transform: rotate(0deg) scale(1.03); }

/* Libro 3D dibujado con CSS mientras no haya portada subida */
.libro__cover--auto { display: grid; place-items: center; }

.libro-book {
  position: relative;
  width: min(82%, 290px);
  aspect-ratio: 3 / 4.2;
  transform: perspective(1100px) rotateY(-14deg) rotateX(1deg);
  transition: transform .6s var(--ease);
  animation: libro-float 7s ease-in-out infinite alternate;
}

.libro-book:hover { transform: perspective(1100px) rotateY(-4deg) scale(1.03); }

@keyframes libro-float {
  from { translate: 0 0; }
  to   { translate: 0 -14px; }
}

/* Canto de páginas que asoma por la derecha */
.libro-book__pages {
  position: absolute;
  z-index: 0;
  top: 6px;
  bottom: 6px;
  right: -9px;
  width: 16px;
  border-radius: 0 5px 5px 0;
  background: repeating-linear-gradient(180deg, #f4f1ea 0 2px, #d9d4c8 2px 3px);
}

.libro-book__front {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 26px 22px 22px 34px;
  border-radius: 6px 14px 14px 6px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .09), transparent 32%),
    radial-gradient(140% 90% at 92% 0%, rgba(194, 51, 57, .50), transparent 55%),
    linear-gradient(160deg, #243640 0%, #14242c 55%, #0c161c 100%);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55);
}

/* Lomo rojo de la encuadernación */
.libro-book__spine {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(180deg, #d2434a 0%, var(--red) 45%, #8e2227 100%);
}

.libro-book__top {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}

.libro-book__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--white);
}

.libro-book__foot {
  display: flex;
  align-items: center;
  gap: 14px;
}

.libro-book__foot::before {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}

.libro-book__foot img { height: 18px; width: auto; opacity: .9; }

@media (max-width: 760px) {
  /* la variante promo declara sus columnas fuera del media query de .libro,
     así que hay que volver a plegarla aquí. La portada necesita un ancho
     explícito: con margin auto y ancho automático, el % del libro 3D se
     volvería circular y colapsaría a 0. */
  .libro--promo { grid-template-columns: 1fr; text-align: center; }
  .libro--promo .libro__cover { margin: 0 auto; width: 100%; }
  .libro--promo .libro__text { margin-inline: auto; }
  .libro-book { margin: 0 auto; }
}

/* ---------- Promo de libro a ancho completo (cierre) ---------- */

.promo-libro {
  width: 100%;
  padding: clamp(76px, 9vw, 132px) var(--gutter);
  overflow: hidden;
}

.promo-libro__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  /* Columnas acotadas (no fr) y grupo centrado: así el texto y el libro
     quedan juntos con una separación fija y el espacio sobrante de las
     pantallas grandes se va a los márgenes exteriores, no entre ambos. */
  grid-template-columns: minmax(0, 38rem) clamp(230px, 26vw, 340px);
  gap: clamp(36px, 4vw, 72px);
  align-items: center;
  justify-content: center;
}

/* Fondo oscuro: tinta con destello de marca, igual de espectacular que el
   libro destacado pero a sangre */
.promo-libro--oscuro {
  color: var(--white);
  background:
    radial-gradient(120% 140% at 90% -10%, rgba(194, 51, 57, .34), transparent 55%),
    radial-gradient(90% 120% at -8% 112%, rgba(194, 51, 57, .16), transparent 55%),
    linear-gradient(160deg, #1a2a33 0%, var(--ink) 52%, #0a1318 100%);
}

/* Fondo claro: gris cálido (no blanco) con un velo rojo muy suave */
.promo-libro--claro {
  color: var(--ink);
  background:
    radial-gradient(120% 140% at 90% -10%, rgba(194, 51, 57, .10), transparent 55%),
    linear-gradient(160deg, #e9ebef 0%, #f1efec 55%, #efe7e4 100%);
}

/* Portada / libro con halo rojo detrás */
.promo-libro__cover { position: relative; display: grid; place-items: center; }

.promo-libro__cover::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 51, 57, .30), transparent 68%);
  filter: blur(12px);
}

.promo-libro--claro .promo-libro__cover::before {
  background: radial-gradient(circle, rgba(194, 51, 57, .16), transparent 66%);
}

.promo-libro__cover > * { position: relative; z-index: 1; }

.promo-libro__cover--img img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 16px;
  transform: rotate(-3deg);
  transition: transform .5s var(--ease);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .45);
}

.promo-libro__cover--img img:hover { transform: rotate(0deg) scale(1.03); }

/* Etiqueta como cápsula roja con latido de novedad (reutiliza libro-pulse) */
.promo-libro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 22px;
  box-shadow: 0 10px 26px rgba(194, 51, 57, .35);
}

.promo-libro__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
  animation: libro-pulse 1.8s ease-in-out infinite;
}

.promo-libro__title {
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}

/* Filete rojo de acento bajo el titular */
.promo-libro__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--red);
  margin-top: 22px;
}

.promo-libro__meta {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
}

.promo-libro--oscuro .promo-libro__meta { color: rgba(255, 255, 255, .66); }
.promo-libro--claro .promo-libro__meta { color: var(--ink-soft); }

.promo-libro__text {
  margin-top: 16px;
  max-width: 54ch;
  font-size: clamp(1.08rem, 2vw, 1.22rem);
  line-height: 1.6;
}

.promo-libro--oscuro .promo-libro__text { color: rgba(255, 255, 255, .82); }
.promo-libro--oscuro .promo-libro__text strong { color: var(--white); font-weight: 500; }
.promo-libro--claro .promo-libro__text { color: var(--ink-soft); }
.promo-libro--claro .promo-libro__text strong { color: var(--ink); font-weight: 600; }

.promo-libro__cta { margin-top: 34px; }

/* Botón: rojo sobre oscuro, tinta sobre claro */
.promo-libro--oscuro .btn--pill { background: var(--red); }
.promo-libro--oscuro .btn--pill:hover {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(255, 255, 255, .22);
}
.promo-libro--oscuro .link-arrow { color: var(--white); }
.promo-libro--oscuro .link-arrow:hover { color: var(--red); }
.promo-libro--claro .link-arrow { color: var(--ink); }
.promo-libro--claro .link-arrow:hover { color: var(--red); }

/* Móvil: una columna, portada arriba */
@media (max-width: 820px) {
  /* minmax(0,1fr) en vez de 1fr: la columna puede bajar de su min-content,
     así el titular grande envuelve en lugar de desbordar el ancho. */
  .promo-libro__inner { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 44px; }
  .promo-libro__cover { order: -1; }
  .promo-libro__cover--img, .promo-libro__cover--auto { margin: 0 auto; width: 100%; }
  .promo-libro__title { font-size: clamp(1.85rem, 7vw, 2.7rem); }
  .promo-libro__text { margin-inline: auto; }
  .promo-libro__title::after { margin-inline: auto; }
  .libro-book { margin: 0 auto; }
}

/* ---------- Prompts modulares ---------- */

/* Margen lateral fluido: en pantallas de portátil (~1280-1366px) el contenido
   tocaba casi el borde porque sólo quedaban los 24px de .section. Con clamp el
   aire lateral crece según el ancho. En pantallas grandes el límite de 1280px ya
   manda, así que el resultado es idéntico al de antes. */
/* =====================================================================
   BIBLIOTECA DE PROMPTS · "La Estantería"
   La biblioteca se presenta como un mueble de estudio en tinta profunda
   (el azul-negro de la marca) con detalles del rojo profes.tv y un piloto
   de "en el aire": cada categoría es una balda con su rótulo, cada prompt
   un tomo con su lomo de color (tono por módulo, con variaciones de
   imprenta por tomo).
   Al pulsar un lomo, el libro se abre en la "mesa de lectura": una capa
   superpuesta con las dos páginas del libro, el texto completo con los
   [campos] subrayados en ámbar y la barra de acciones de siempre.
   El marcado conserva los data-hooks históricos (data-prompt-library /
   -search / -filter / -category / -card / -tag / -count / -share / -print
   y las clases .prompt-snippet__bar/__title/__label/__path +
   .prompt-card__copy), de modo que el buscador, los filtros, el copiado,
   el cuaderno y «Abrir en IA» siguen funcionando sin tocarse.
   ===================================================================== */

.bp-section {
  padding-block: clamp(40px, 7vw, 96px);
  background:
    radial-gradient(120% 120% at 50% -10%, #ffffff 0%, #f6f7f9 58%, #eceef2 100%);
}

/* ---- Encabezado claro que introduce el mueble ---- */
.bp-intro {
  max-width: 760px;
  margin: 0 auto clamp(30px, 4vw, 52px);
  text-align: center;
}

.bp-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
}

.bp-intro__title {
  margin-bottom: 18px;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.bp-intro__lead {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 1.16rem;
  line-height: 1.62;
  text-wrap: pretty;
}

/* =====================================================================
   El mueble
   ===================================================================== */
.bp-room {
  max-width: 1180px;
  margin: 0 auto;
}

.bp-case {
  --bp-tinta: #16242c;
  --bp-tinta-osc: #0c151b;
  --bp-rojo: #e0565c;
  --bp-rojo-claro: #ff9aa0;
  --bp-nieve: #eef4f7;
  --bp-nieve-dim: #93a6b0;

  position: relative;
  isolation: isolate;
  border-radius: 22px;
  padding: clamp(18px, 3vw, 34px) clamp(14px, 2.6vw, 30px) clamp(14px, 2vw, 22px);
  background:
    linear-gradient(180deg, #22343e 0%, var(--bp-tinta) 26%, #0e1a21 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 0 6px rgba(0, 0, 0, .2),
    0 40px 90px -30px rgba(15, 28, 34, .75),
    0 18px 50px -28px rgba(15, 28, 34, .85);
  color: var(--bp-nieve);
  overflow: hidden;
}

/* tramado del panel lacado + luz del foco del estudio, muy tenues */
.bp-case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 34% at 50% 0%, rgba(160, 210, 235, .12), transparent 70%),
    radial-gradient(42% 26% at 50% 0%, rgba(224, 86, 92, .1), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 7px, rgba(255, 255, 255, .02) 7px 9px, transparent 9px 14px);
}

.bp-case > * { position: relative; z-index: 1; }

/* ---- Frontón: el rótulo lacado en rojo, como la chapa de un plató ---- */
.bp-front {
  text-align: center;
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.bp-front__plate {
  display: inline-block;
  padding: 9px 30px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #d04046, #a8262c);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 0 0 3px #a8262c,
    inset 0 0 0 4px rgba(255, 255, 255, .35),
    0 4px 12px rgba(0, 0, 0, .35),
    0 0 26px rgba(224, 86, 92, .3);
  font-family: var(--font-display);
  font-size: clamp(.8rem, 1.8vw, .98rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}

.bp-front__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--bp-nieve-dim);
}

/* el piloto rojo de "en el aire", encendido y quieto */
.bp-front__gema {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffb3b6, #d4494f 70%);
  box-shadow: 0 0 10px 2px rgba(224, 86, 92, .6);
}

/* ---- El atril del bibliotecario: buscador ---- */
.bp-desk {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto clamp(14px, 2vw, 20px);
  padding: 4px 8px 4px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0e1a21, #13222b);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.bp-desk:focus-within {
  border-color: rgba(224, 86, 92, .7);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 4px rgba(224, 86, 92, .16);
}

.bp-desk__glyph { display: inline-flex; color: var(--bp-rojo); flex: none; }
.bp-desk__glyph svg { width: 18px; height: 18px; }

.bp-desk input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 11px 4px;
  color: var(--bp-nieve);
  font-family: var(--font-body);
  font-size: .98rem;
}
.bp-desk input[type="search"]::placeholder { color: #7c919c; }
.bp-desk input[type="search"]:focus { outline: none; }
.bp-desk input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* etiqueta activa: una ficha de préstamo prendida junto al buscador */
.bp-tag-activa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: #fff;
  color: #a2352f;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
}
.bp-tag-activa button {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 0;
  border-radius: 50%;
  background: rgba(162, 53, 47, .12);
  color: #a2352f;
  font-size: .68rem;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.bp-tag-activa button:hover { background: #a2352f; color: #fff; }

/* ---- Marcapáginas: los filtros por balda ---- */
.bp-marcas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-bottom: clamp(20px, 3vw, 30px);
  padding: 0 4px;
}

.bp-marca {
  --bp-h: 202; --bp-s: 26%; --bp-l: 30%;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  padding: 9px 15px 15px;
  color: rgba(240, 246, 249, .92);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 40%),
    hsl(var(--bp-h) var(--bp-s) var(--bp-l));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px));
  box-shadow: inset 0 -10px 14px rgba(0, 0, 0, .25);
  transition: translate .2s var(--ease), filter .2s var(--ease);
}

.bp-marca:hover { translate: 0 2px; filter: brightness(1.12); }

.bp-marca.active {
  translate: 0 4px;
  filter: brightness(1.18);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), inset 0 -10px 14px rgba(0, 0, 0, .22);
}

.bp-marca:focus-visible { outline: 2px solid var(--bp-nieve); outline-offset: 2px; }

.bp-marca__num {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  font-family: var(--font-mono);
  font-size: .68rem;
  color: rgba(240, 246, 249, .85);
}

/* ---- Las baldas ---- */
.bp-shelves {
  display: grid;
  /* minmax(0,1fr): sin esto, la balda con más libros ensancharía la columna
     hasta su max-content y desbordaría el mueble (el clásico grid blowout) */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 38px);
}

.bp-shelf { min-width: 0; }

.bp-shelf__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 0 6px 12px;
}

.bp-shelf__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--bp-rojo-claro);
  background: radial-gradient(circle at 35% 30%, rgba(255, 154, 160, .14), rgba(0, 0, 0, .3));
  box-shadow: inset 0 0 0 1px rgba(224, 86, 92, .45);
}
.bp-shelf__icon svg { width: 20px; height: 20px; }

.bp-shelf__title {
  font-size: clamp(1.06rem, 2vw, 1.22rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: #f6fafc;
}

.bp-shelf__desc {
  margin-top: 2px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--bp-nieve-dim);
  max-width: 70ch;
  text-wrap: pretty;
}

.bp-shelf__count {
  align-self: start;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--bp-rojo-claro);
  white-space: nowrap;
}

/* la balda: un cajón forrado en penumbra donde reposan las tiras */
.bp-shelf__row {
  position: relative;
  border-radius: 12px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .32));
  box-shadow:
    inset 0 8px 16px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .1);
}

/* ---- Las tiras: cada prompt es una tira entera del color de su balda,
   como las cápsulas de la Expendedora pero coloreadas de punta a punta ---- */
.bp-tiras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  gap: 9px;
}

.bp-tira {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  text-align: left;
  border: 0;
  cursor: pointer;
  padding: 9px 12px 9px 9px;
  border-radius: 12px;
  color: #f0f6f9;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 42%),
    linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 26%),
    hsl(var(--bp-h, 202) var(--bp-s, 26%) calc(var(--bp-l, 30%) + var(--dl, 0%)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -2px 0 rgba(0, 0, 0, .28),
    0 2px 6px rgba(0, 0, 0, .3);
  translate: 0 0;
  transition: translate .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}

.bp-tira:hover,
.bp-tira:focus-visible {
  translate: 0 -3px;
  filter: brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -2px 0 rgba(0, 0, 0, .28),
    0 10px 18px rgba(0, 0, 0, .38);
}
.bp-tira:focus-visible { outline: 2px solid var(--bp-nieve); outline-offset: 2px; }

/* el icono del prompt, en su medallón entelado */
.bp-tira__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--bp-nieve);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%),
    rgba(0, 0, 0, .26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}
.bp-tira__icono svg { width: 19px; height: 19px; }

.bp-tira__nombre {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.bp-tira__num {
  flex: none;
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .04em;
  color: rgba(240, 246, 249, .55);
}

/* colocación de las tiras al entrar en pantalla: una vez y se acabó */
.bp-shelf.is-colocada:not(.bp-anim-hecha) .bp-tira {
  animation: bp-colocar .45s var(--ease) calc(min(var(--i, 0), 24) * 18ms) 1 backwards;
}
@keyframes bp-colocar {
  from { opacity: 0; translate: 0 -12px; }
  to   { opacity: 1; translate: 0 0; }
}

/* hueco que deja la tira cuando el libro está en la mesa de lectura */
.bp-hueco {
  display: block;
  border-radius: 12px;
  background: rgba(0, 0, 0, .38);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55);
}

/* ---- Sin resultados: la balda vacía ---- */
.bp-empty {
  margin: 4px auto 0;
  max-width: 460px;
  padding: 30px 26px;
  border-radius: 14px;
  text-align: center;
  background: var(--bp-nieve);
  color: #33424c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.bp-empty__glyph { display: inline-flex; color: #a2352f; margin-bottom: 10px; }
.bp-empty__glyph svg { width: 30px; height: 30px; }
.bp-empty p { font-size: 1.02rem; line-height: 1.5; }
.bp-empty p span { color: #6c8291; font-size: .92rem; }

/* ---- Pie del mueble ---- */
.bp-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 2.6vw, 26px);
  padding: 12px 10px 2px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.bp-pie__count {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--bp-nieve-dim);
}

.bp-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 154, 160, .45);
  background: linear-gradient(180deg, #13222b, #0e1a21);
  color: var(--bp-rojo-claro);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.bp-download svg { width: 14px; height: 14px; }
.bp-download:hover,
.bp-download:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-1px);
}

/* =====================================================================
   La mesa de lectura: el libro abierto
   ===================================================================== */
body.bp-lectura { overflow: hidden; }

.bp-mesa {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 36px);
}

/* La capa entra con animaciones CSS puras (no con transición + clase):
   arrancan solas cada vez que la mesa deja de estar oculta, una vez y
   se paran, incluso si la pestaña estaba en segundo plano. */
.bp-mesa__fondo {
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 90% at 50% 0%, rgba(13, 25, 32, .82), rgba(4, 9, 12, .92));
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  animation: bp-fondo .3s var(--ease) 1;
  cursor: pointer;
}
@keyframes bp-fondo {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bp-mesa__libro {
  position: relative;
  width: min(1020px, 100%);
  max-height: 100%;
  /* la entrada anima SOLO transform: si un entorno llega a congelar la
     animación, el libro sigue siendo visible (nunca opacity desde 0) */
  animation: bp-abrir .45s var(--ease) 1;
}
@keyframes bp-abrir {
  from { transform: translateY(34px) scale(.955); }
  to   { transform: none; }
}

.bp-mesa__cerrar {
  position: absolute;
  top: -14px;
  right: -12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #16242c;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.bp-mesa__cerrar:hover { background: #c23339; color: #fff; transform: rotate(90deg); }
.bp-mesa__cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* la tarjeta abierta forma caja dentro de la mesa */
.bp-card--abierto { display: block; }
.bp-card--abierto .bp-tira { display: none; }

.bp-book { display: flex; flex-direction: column; max-height: calc(100vh - 2 * clamp(14px, 3vw, 36px)); }

.bp-book__paginas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.35fr);
  min-height: 0;
  border-radius: 10px 16px 0 0;
  background: linear-gradient(180deg, #faf3e2, #f4ead3);
  border-left: 12px solid hsl(var(--bp-h, 356) var(--bp-s, 50%) var(--bp-l, 33%));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  overflow: hidden;
}

/* canto de páginas en el borde derecho */
.bp-book__paginas::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 0;
  width: 9px;
  background: repeating-linear-gradient(90deg, #e5d7b6 0 1px, #f6eeda 1px 3px);
  pointer-events: none;
}

.bp-page {
  min-width: 0;
  padding: clamp(22px, 3.4vw, 38px);
}

.bp-page--izq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: inset -26px 0 30px -24px rgba(90, 64, 32, .45);
}

.bp-page--dcha {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: inset 26px 0 30px -24px rgba(90, 64, 32, .5);
}

/* la cinta roja de punto de lectura */
.bp-page--dcha::before {
  content: "";
  position: absolute;
  top: 0;
  right: 38px;
  width: 24px;
  height: 66px;
  background: linear-gradient(180deg, #c23339, #9c242a);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
}

.bp-book__exlibris {
  align-self: flex-start;
  padding: 4px 12px;
  border: 1px solid rgba(160, 132, 85, .55);
  border-radius: 4px;
  rotate: -2deg;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a08455;
}

.bp-book__label {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: hsl(var(--bp-h, 356) calc(var(--bp-s, 50%) + 6%) calc(var(--bp-l, 33%) - 2%));
}

.bp-book__title {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: #33261a;
  text-wrap: balance;
}

.bp-book__vol {
  font-family: Georgia, "Iowan Old Style", serif;
  font-style: italic;
  font-size: .88rem;
  color: #8a7048;
}

.bp-book__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 4px;
}

/* etiquetas como sellos de tinta */
.bp-book__tag {
  border: 1.5px solid rgba(162, 53, 47, .55);
  border-radius: 6px;
  background: none;
  padding: 3px 9px;
  color: #a2352f;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.bp-book__tag:nth-child(odd) { rotate: -1.4deg; }
.bp-book__tag:nth-child(even) { rotate: 1deg; }
.bp-book__tag:hover,
.bp-book__tag.active { background: #a2352f; color: #f8f1de; }

.bp-book__consejo {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(160, 132, 85, .5);
  font-size: .82rem;
  line-height: 1.6;
  color: #6b543a;
}

.bp-book__path {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .04em;
  color: #a08455;
}

/* el texto del prompt: página de libro, serifa y aire */
.bp-book__texto {
  min-height: 0;
  overflow: auto;
  padding-right: 14px;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: .99rem;
  line-height: 1.85;
  color: #3a2c1c;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 132, 85, .55) transparent;
}
.bp-book__texto::-webkit-scrollbar { width: 8px; }
.bp-book__texto::-webkit-scrollbar-thumb { background: rgba(160, 132, 85, .5); border-radius: 99px; }

/* Los [campos editables], subrayados con marcador ámbar.
   (Regla base de .tok-var para toda la web: el resto de páginas la matiza
   con sus propios colores — blog, diferenciador, expendedora…) */
.tok-var {
  padding: 0 3px;
  border-radius: 4px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: rgba(194, 51, 57, .1);
  color: #a92930;
}

.bp-book .tok-var,
.bp-book__consejo .tok-var {
  background: #f4e0a8;
  color: #7a5b16;
  font-family: var(--font-mono);
  font-size: .84em;
}

/* ---- barra de acciones: el borde de la mesa ---- */
.bp-book__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 13px 18px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #1c2c35, #101b22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.bp-book__bar .prompt-card__util {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: #dfe9ee;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.bp-book__bar .prompt-card__util svg { width: 16px; height: 16px; }
.bp-book__bar .prompt-card__util:hover,
.bp-book__bar .prompt-card__util.copied {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Botón copiar (el handler reescribe su textContent → glifo en ::before) */
.bp-book__bar .prompt-card__copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 9px 16px 9px 13px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #f0f6f9;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.bp-book__bar .prompt-card__copy::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--copy-glyph) center / contain no-repeat;
          mask: var(--copy-glyph) center / contain no-repeat;
  --copy-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}
.bp-book__bar .prompt-card__copy:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-1px);
}

/* =====================================================================
   Estrecho: el mueble en el bolsillo
   ===================================================================== */
@media (max-width: 900px) {
  .bp-book__paginas { grid-template-columns: 1fr; }
  .bp-page--izq { box-shadow: inset 0 -20px 24px -20px rgba(90, 64, 32, .4); padding-bottom: 16px; }
  .bp-page--dcha { box-shadow: none; padding-top: 16px; }
  .bp-page--dcha::before { display: none; }
  .bp-book__consejo { display: none; }
  .bp-book__texto { max-height: 38vh; }
}

@media (max-width: 600px) {
  .bp-case { border-radius: 16px; }
  .bp-front__sub { font-size: .64rem; }
  .bp-shelf__head { grid-template-columns: auto 1fr; }
  .bp-shelf__count { display: none; }
  .bp-shelf__desc { font-size: .84rem; }
  .bp-marca { padding: 8px 12px 13px; font-size: .74rem; }
  .bp-shelf__row { padding: 9px; }
  .bp-tiras { grid-template-columns: 1fr; gap: 8px; }
  .bp-intro__lead { font-size: 1.04rem; }
  .bp-mesa { padding: 10px; }
  .bp-mesa__cerrar { top: -8px; right: -4px; width: 38px; height: 38px; }
  .bp-page { padding: 18px 18px 14px; }
  .bp-book__bar { padding: 11px 12px; gap: 7px; }
  .bp-pie { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-tira, .bp-marca, .bp-download, .bp-mesa__cerrar { transition: none; }
  .bp-shelf.is-colocada:not(.bp-anim-hecha) .bp-tira,
  .bp-mesa__fondo,
  .bp-mesa__libro { animation: none; }
  .bp-tira:hover, .bp-tira:focus-visible { translate: 0 0; }
}

/* ---- Foreshadow: la portada de prompts ya respira "código" ---- */
.hero--prompts .hero__eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .22em;
}


/* ---------- Guía de prompts ---------- */

.prompt-guide { background: var(--white); }

.prompt-guide .section__title { margin-bottom: 18px; }

.prompt-guide__head {
  max-width: 900px;
  margin-bottom: 44px;
}

.prompt-guide__intro {
  color: var(--ink-soft);
  font-size: 1.12rem;
  max-width: 62ch;
}

.prompt-guide__label,
.prompt-guide__lead-copy span {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}

.prompt-guide__lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}

.prompt-guide__lead-copy {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 38px;
}

.prompt-guide__lead-copy h3,
.prompt-anatomy__head h3,
.prompt-builder__head h3,
.prompt-guide__tips-head h3 {
  margin-top: 8px;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 800;
  line-height: 1.12;
}

.prompt-guide__lead-copy p {
  margin-top: 18px;
  color: rgba(255, 255, 255, .72);
  font-size: 1.06rem;
  max-width: 58ch;
}

.prompt-guide__questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.prompt-guide__question {
  position: relative;
  min-height: 118px;
  display: flex;
  align-items: flex-end;
  background: var(--gray-bg);
  border-radius: 24px;
  padding: 46px 22px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}

.prompt-guide__question small {
  position: absolute;
  top: 18px;
  right: 20px;
  color: var(--red);
  font: inherit;
  font-size: .78rem;
}

.prompt-guide__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 24px;
  align-items: start;
}

.prompt-anatomy,
.prompt-builder,
.prompt-guide__tips {
  border-radius: var(--radius);
  padding: 34px;
}

.prompt-anatomy,
.prompt-guide__tips {
  background: var(--gray-bg);
}

.prompt-anatomy__parts {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.prompt-anatomy__part {
  min-height: 148px;
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  text-align: left;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.prompt-anatomy__part span,
.prompt-builder__step span {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  color: var(--red);
}

.prompt-anatomy__part strong {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.15;
}

.prompt-anatomy__part em {
  color: var(--ink-soft);
  font-style: normal;
  font-size: .88rem;
  line-height: 1.35;
}

.prompt-anatomy__part:hover,
.prompt-anatomy__part.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.prompt-anatomy__part:hover em,
.prompt-anatomy__part.active em {
  color: rgba(255, 255, 255, .72);
}

.prompt-anatomy__detail {
  min-height: 255px;
  margin-top: 18px;
  border-left: 4px solid var(--red);
  border-radius: 24px;
  background: var(--white);
  padding: 30px;
  box-shadow: 0 8px 26px rgba(15, 28, 34, .05);
}

.prompt-anatomy__detail h4 {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.15;
}

.prompt-anatomy__detail p:not(.prompt-guide__label) {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 1.03rem;
}

.prompt-anatomy__detail blockquote {
  margin-top: 18px;
  border-radius: 18px;
  background: var(--gray-bg);
  color: var(--ink);
  font-style: italic;
  padding: 16px 18px;
}

.prompt-builder {
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow);
}

.prompt-builder__head p:not(.prompt-guide__label) {
  margin-top: 14px;
  color: rgba(255, 255, 255, .72);
}

.prompt-builder__steps {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.prompt-builder__step {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 600;
  padding: 10px 14px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.prompt-builder__step:hover,
.prompt-builder__step.active {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
  transform: translateY(-1px);
}

.prompt-builder__output {
  min-height: 180px;
  display: block;
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .88);
  font-size: 1.02rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  padding: 24px;
  white-space: pre-wrap;
}

.prompt-builder__copy {
  margin-top: 18px;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  padding: 12px 20px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}

.prompt-builder__copy:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-1px);
}

.prompt-builder__copy:disabled {
  cursor: not-allowed;
  opacity: .45;
  transform: none;
}

.prompt-guide__tips {
  margin-top: 24px;
}

.prompt-guide__tip-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.prompt-guide__tip {
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}

.prompt-guide__tip:hover {
  box-shadow: 0 8px 26px rgba(15, 28, 34, .05);
  transform: translateY(-2px);
}

.prompt-guide__tip summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  line-height: 1.25;
}

.prompt-guide__tip summary::-webkit-details-marker { display: none; }

.prompt-guide__tip-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
}

.prompt-guide__tip-title svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--red);
  transition: color .3s var(--ease);
}

.prompt-guide__tip[open] .faq__icon {
  transform: rotate(45deg);
  background: var(--red);
  color: var(--white);
}

.prompt-guide__tip p {
  padding: 0 20px 20px;
  color: var(--ink-soft);
}

.prompt-guide__summary {
  margin-top: 28px;
  max-width: 78ch;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

/* ---------- Guía de asistentes ---------- */

.prompt-anatomy__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(194, 51, 57, .1);
  color: var(--red);
  border-radius: 12px;
}

.prompt-anatomy__icon svg { width: 19px; height: 19px; }

.prompt-anatomy__part:hover .prompt-anatomy__icon,
.prompt-anatomy__part.active .prompt-anatomy__icon {
  background: var(--red);
  color: var(--white);
}

.assistant-check {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 24px;
}

.assistant-check__copy {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 38px;
}

.assistant-check__copy h3 {
  margin-top: 8px;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 800;
  line-height: 1.12;
}

.assistant-check__copy p:not(.prompt-guide__label) {
  margin-top: 18px;
  color: rgba(255, 255, 255, .72);
  font-size: 1.06rem;
  max-width: 58ch;
}

.assistant-check__panel {
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: 28px;
  display: grid;
  gap: 16px;
  align-content: start;
}

.assistant-check__signals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.assistant-check__signal {
  position: relative;
  min-height: 104px;
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: flex-end;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  padding: 44px 18px 16px;
}

.assistant-check__signal small {
  position: absolute;
  top: 16px;
  left: 18px;
  color: var(--red);
  font: inherit;
  font-size: .78rem;
}

.assistant-check__signal::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}

.assistant-check__result {
  border-left: 4px solid var(--red);
  border-radius: 18px;
  background: var(--white);
  padding: 18px 22px;
  box-shadow: 0 8px 26px rgba(15, 28, 34, .05);
}

.assistant-check__count {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.assistant-check__verdict {
  margin-top: 6px;
  color: var(--ink);
  font-size: 1.02rem;
}

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 14px; }

.faq__item {
  background: var(--gray-card);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .35s var(--ease);
}

.faq__item[open] { box-shadow: var(--shadow); background: var(--white); }

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__icon {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--red);
  font-weight: 400;
  font-size: 1.2rem;
  transition: transform .3s var(--ease), background .3s, color .3s;
}

.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--red); color: #fff; }

.faq__item p { padding: 0 26px 24px; color: var(--ink-soft); max-width: 68ch; }

/* ---------- Testimonios ---------- */

.testimonios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.testimonio {
  background: var(--white);
  border-radius: var(--radius);
  padding: 38px 34px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.testimonio:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.testimonio__quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.45;
}

.testimonio footer { margin-top: auto; display: grid; gap: 2px; font-size: .88rem; }

.testimonio footer strong { font-weight: 500; }

.testimonio footer span { color: var(--ink-soft); }

/* ---------- Facade de vídeo (sin conexión hasta aceptar) ---------- */

.video__facade { position: relative; display: grid; place-items: center; gap: 18px; padding: 24px; }

.video__facade svg { position: absolute; opacity: .18; }

.video__load { position: relative; z-index: 1; }

.video__notice {
  position: relative; z-index: 1;
  color: rgba(255, 255, 255, .65);
  font-size: .78rem;
  text-align: center;
  margin: 0;
}

/* ---------- Aviso de cookies ---------- */

.cookies {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 200;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}

.cookies.show { opacity: 1; transform: none; pointer-events: auto; }

.cookies__inner {
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(15, 28, 34, .22);
  padding: 22px 26px;
  max-width: 720px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.cookies__text { flex: 1; min-width: 240px; }

.cookies__text strong { font-family: var(--font-display); font-size: .95rem; }

.cookies__text p { font-size: .85rem; color: var(--ink-soft); margin-top: 4px; }

.cookies__text a { color: var(--red); }

.cookies__btns { display: flex; gap: 10px; flex-wrap: wrap; }

.btn--ghostpill {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(15, 28, 34, .25);
}

.btn--ghostpill:hover { background: var(--gray-bg); color: var(--ink); box-shadow: none; }

/* ---------- Llamada de atención flotante (contacto) ---------- */

.llamada {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px 14px 17px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--red) 0%, #9d2329 100%);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: .005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(26px) scale(.94);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.llamada__icon { display: inline-flex; }
.llamada__text { white-space: nowrap; }

.llamada.show {
  opacity: 1;
  transform: none;
  animation: llamada-ring 2.6s var(--ease) infinite;
}

.llamada:hover { transform: translateY(-3px); }
.llamada:active { transform: translateY(-1px) scale(.98); }
.llamada:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* aro de luz que late para captar la atención sin mover el botón */
@keyframes llamada-ring {
  0%   { box-shadow: 0 14px 34px rgba(194, 51, 57, .40), 0 0 0 0 rgba(194, 51, 57, .50); }
  70%  { box-shadow: 0 14px 34px rgba(194, 51, 57, .40), 0 0 0 20px rgba(194, 51, 57, 0); }
  100% { box-shadow: 0 14px 34px rgba(194, 51, 57, .40), 0 0 0 0 rgba(194, 51, 57, 0); }
}

/* en móvil, súbela por encima del aviso de cookies mientras esté visible;
   la flecha "volver arriba" la sigue apilándose por encima */
@media (max-width: 760px) {
  body.has-cookies .llamada { bottom: 168px; }
  body.has-cookies .back-top { bottom: 230px; }
}

/* en pantallas muy estrechas deja solo el icono para no estorbar */
@media (max-width: 460px) {
  .llamada { padding: 15px; }
  .llamada__text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .llamada { transition: none; }
  .llamada.show { animation: none; box-shadow: 0 14px 34px rgba(194, 51, 57, .40); }
}

/* ---------- Animaciones de entrada ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.visible { opacity: 1; transform: none; }

.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }
.reveal[data-delay="4"] { transition-delay: .48s; }

/* Variantes de aparición: mismo lenguaje y easing que .reveal, pero con una
   dirección propia para que no todas las secciones entren igual. */
.reveal--left { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(.94); }
.reveal--left.visible,
.reveal--right.visible,
.reveal--scale.visible { transform: none; }

/* Variante "carta": entra desde abajo, desenfocada y con un leve giro,
   como cartas repartidas sobre la mesa (trío de recursos de la portada). */
.reveal--carta {
  transform: translateY(70px) scale(.92) rotate(1.6deg);
  filter: blur(14px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}

.trio .reveal--carta:nth-child(odd) { transform: translateY(70px) scale(.92) rotate(-1.6deg); }

.reveal--carta.visible,
.trio .reveal--carta.visible { transform: none; filter: none; }

/* Barra de progreso de lectura */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 1000;
  pointer-events: none;
  will-change: transform;
}

/* Botón "volver arriba": se coloca encima de la llamada flotante para que
   ambos sean visibles al llegar al final de la página y no se tapen. */
.back-top {
  position: fixed;
  right: 24px;
  bottom: 86px;
  z-index: 150;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(15, 28, 34, .28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease),
              background .25s var(--ease);
}

.back-top svg { width: 20px; height: 20px; }

.back-top.show { opacity: 1; pointer-events: auto; transform: none; }

.back-top:hover { background: var(--red); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal--carta { filter: none; }
  .hero--home::before,
  .hero--home::after,
  .hero--escenario::before,
  .hero--cuaderno .hero__title::after,
  .hero--biblioteca::after,
  .hero__ticker-track,
  .libro-book,
  .trio-card__dibujo path,
  .trio-card__dibujo line,
  .trio-card__dibujo circle,
  .libro--promo .libro__eyebrow::before { animation: none; }
  /* Sin animación, el garabato debe verse ya dibujado */
  .hero-cuaderno__garabato path { animation: none; stroke-dashoffset: 0; }
  /* … y la carta del MAPA también, con sus cuatro paradas ya puestas */
  .hero--mapa .hero-mapa__carta,
  .hero--mapa .hero-mapa__pliegue,
  .hero--mapa .hero-mapa__senda { animation: none; stroke-dashoffset: 0; }
  .hero--mapa .hero-mapa__parada { animation: none; opacity: 1; transform: none; }
  .hero-search, .hero-search__lupa, .trio-card__dibujo,
  .trio-card, .trio-card__icon, .trio-card__mark, .libro-book,
  .libro--promo .libro__cover img, .portafolio-card, .portafolio-card::after,
  .portafolio-card__icon, .portafolio-card__title, .portafolio-card__text,
  .portafolio-card__more, .portafolio-card__more span { transition: none; }
  .read-progress { display: none; }
  .back-top { transition: none; transform: none; }
  .card__visual img { transition: none; }
  .card:hover .card__visual img { transform: none; }
  .btn, .card, .recurso-card, .metric, .proyecto, .prensa-video, .proyecto__carrusel .carrusel__slide img, .galeria__item, .kit-photo, .kit-logo, .kit-dl, .kit-bio__copy, .biblio-book, .biblio-card, .mapa-scroll__stage, .mapa-scroll__stage-node, .mapa-scroll__copy, .prompt-card, .prompt-tag, .prompt-card__tag, .prompt-active-tag button, .prompt-page, .prompt-anatomy__part, .prompt-builder__step, .prompt-builder__copy, .prompt-guide__tip, .socials a { transition: none; }
}

/* ---------- Linea de vida cinematografica ---------- */

/* La trayectoria se presenta como una emision de profes.tv: una barra de
   reproduccion pegajosa arriba (scrubber con los anos), una senal luminosa
   central que se dibuja al hacer scroll con un cometa en la punta, y
   capitulos alternos a los lados de la senal. El ano gigante entra en
   cascada de cifras huecas y se rellena de rojo al activarse el capitulo. */

.linea-vida {
  position: relative;
  background:
    radial-gradient(130% 100% at 100% 0%, #fbfcfd 0%, var(--white) 46%),
    var(--white);
  /* overflow-x: clip contiene los anos gigantes y las fotos sin crear
     un contenedor de scroll que rompa el position: sticky del scrubber. */
  overflow-x: clip;
}

/* Aurora ambiental: focos suaves que dan profundidad al fondo. */
.linea-vida__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 12% 8%, rgba(194, 51, 57, .09), transparent 70%),
    radial-gradient(40% 46% at 92% 72%, rgba(194, 51, 57, .07), transparent 72%),
    radial-gradient(34% 28% at 50% 102%, rgba(15, 28, 34, .05), transparent 75%);
  opacity: .9;
}

.linea-vida .section__inner { position: relative; z-index: 1; }

.linea-vida__head {
  max-width: 860px;
  margin-bottom: clamp(30px, 4vw, 46px);
}

.linea-vida__head .section__title { margin-bottom: 18px; }

.linea-vida__intro {
  color: var(--ink-soft);
  font-size: clamp(1.04rem, 2vw, 1.18rem);
  max-width: 62ch;
}

/* ----- Barra de reproduccion (scrubber pegajoso) ----- */

.linea-vida__player {
  position: sticky;
  top: clamp(70px, 8vh, 84px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding: 10px clamp(16px, 2.4vw, 26px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(15, 28, 34, .08);
  box-shadow: 0 18px 44px rgba(15, 28, 34, .12);
  margin-bottom: clamp(56px, 8vw, 96px);
}

.linea-vida__play {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(135deg, #e84a50, var(--red) 60%, #a92a30);
  box-shadow: 0 10px 24px rgba(194, 51, 57, .35), 0 0 0 6px rgba(194, 51, 57, .08);
}

.linea-vida__play svg { width: 20px; height: 20px; }

.linea-vida__scrub {
  position: relative;
  flex: 1;
  height: 56px;
}

.linea-vida__scrub-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 28, 34, .1);
}

.linea-vida__scrub-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(100% * var(--vida-progress, 0));
  border-radius: 999px;
  background: linear-gradient(90deg, #e84a50, var(--red) 70%, #a92a30);
  box-shadow: 0 0 12px rgba(194, 51, 57, .5);
  transition: width .12s linear;
}

.linea-vida__scrub-thumb {
  position: absolute;
  left: calc(100% * var(--vida-progress, 0));
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--white);
  border: 3px solid var(--red);
  box-shadow: 0 2px 10px rgba(15, 28, 34, .25), 0 0 0 5px rgba(194, 51, 57, .12);
  transition: left .12s linear;
}

/* Marcas de ano sobre el scrubber, repartidas por indice. */
.linea-vida__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(0%, var(--at, 0%), 100%);
  transform: translateX(-50%);
  min-width: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  color: var(--ink-soft);
}

.linea-vida__mark-dot {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--white);
  border: 2px solid rgba(15, 28, 34, .28);
  transition: border-color .3s var(--ease), background .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}

.linea-vida__mark-year {
  position: absolute;
  top: 31px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color .3s var(--ease), transform .3s var(--ease);
}

.linea-vida__mark.is-past { color: var(--ink); }
.linea-vida__mark.is-past .linea-vida__mark-dot {
  background: var(--red);
  border-color: var(--red);
}

.linea-vida__mark:hover { color: var(--red); }
.linea-vida__mark:hover .linea-vida__mark-dot {
  border-color: var(--red);
  transform: translateX(-50%) scale(1.15);
}

.linea-vida__mark.is-active { color: var(--red); }
.linea-vida__mark.is-active .linea-vida__mark-year { transform: translateX(-50%) scale(1.18); }
.linea-vida__mark.is-active .linea-vida__mark-dot {
  background: var(--red);
  border-color: var(--red);
  transform: translateX(-50%) scale(1.3);
  box-shadow: 0 0 0 5px rgba(194, 51, 57, .16), 0 0 14px rgba(194, 51, 57, .5);
}

/* Contador de capitulo, como el marcador de tiempo de un reproductor. */
.linea-vida__clock {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.linea-vida__clock b { color: var(--red); font-size: 1.02rem; letter-spacing: .04em; }
.linea-vida__clock i { font-style: normal; opacity: .6; margin: 0 2px; }

/* ----- Senal central con cometa ----- */

.linea-vida__flow { position: relative; }

.linea-vida__beam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(15, 28, 34, .05), rgba(15, 28, 34, .13) 10%,
                    rgba(15, 28, 34, .13) 90%, rgba(15, 28, 34, .03));
}

.linea-vida__beam-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% * var(--vida-progress, 0));
  border-radius: 999px;
  background: linear-gradient(180deg, #e84a50, var(--red) 70%, #a92a30);
  box-shadow: 0 0 16px rgba(194, 51, 57, .55), 0 0 5px rgba(194, 51, 57, .8);
  transition: height .12s linear;
}

/* El cometa viaja en la punta de la senal; la estela queda detras. */
.linea-vida__beam-comet {
  position: absolute;
  left: 50%;
  top: calc(100% * var(--vida-progress, 0));
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffd9db, #e84a50 45%, var(--red));
  box-shadow:
    0 0 0 5px rgba(194, 51, 57, .14),
    0 0 18px 4px rgba(194, 51, 57, .55),
    0 0 44px 10px rgba(194, 51, 57, .25);
  transition: top .12s linear;
}

.linea-vida__beam-comet::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  height: 72px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(232, 74, 80, .6));
}

/* ----- Capitulos ----- */

.linea-vida__chapters {
  list-style: none;
  display: grid;
  gap: clamp(72px, 10vw, 140px);
  padding: clamp(10px, 2vw, 24px) 0 clamp(64px, 9vw, 120px);
}

.linea-vida__chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(64px, 9vw, 150px);
  align-items: center;
  transition: opacity .55s var(--ease);
}

/* El .reveal del capitulo solo funde la opacidad: cada pieza interior
   (cifras, titulo, fotos) trae su propia coreografia de entrada. */
.linea-vida__chapter.reveal { transform: none; }

/* Foco de lectura: los capitulos que no estan activos se atenuan. */
.linea-vida__chapter.visible:not(.is-active) { opacity: .45; }

/* Escena a un lado, texto al otro; los capitulos pares se espejan. */
.linea-vida__scene {
  order: 0;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 120px;
}

.linea-vida__copy { order: 1; max-width: 560px; }

.linea-vida__chapter:nth-child(even) .linea-vida__scene { order: 1; }
.linea-vida__chapter:nth-child(even) .linea-vida__copy { order: 0; justify-self: end; }

/* Nodo sobre la senal: anillo + nucleo; el activo muestra el play. */
.linea-vida__node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.linea-vida__node-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid rgba(15, 28, 34, .25);
  transition: border-color .35s var(--ease), background .35s var(--ease),
              transform .35s var(--ease), box-shadow .35s var(--ease);
}

.linea-vida__node-core {
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: rgba(15, 28, 34, .2);
  transition: background .35s var(--ease), opacity .35s var(--ease);
}

.linea-vida__node-play {
  position: absolute;
  inset: 5px;
  color: var(--white);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.linea-vida__chapter.is-past .linea-vida__node-ring { border-color: var(--red); }
.linea-vida__chapter.is-past .linea-vida__node-core { background: var(--red); }

.linea-vida__chapter.is-active .linea-vida__node-ring {
  border-color: var(--red);
  background: linear-gradient(135deg, #e84a50, var(--red));
  transform: scale(1.35);
  box-shadow: 0 0 0 7px rgba(194, 51, 57, .14), 0 0 22px rgba(194, 51, 57, .55);
}

.linea-vida__chapter.is-active .linea-vida__node-core { opacity: 0; }
.linea-vida__chapter.is-active .linea-vida__node-play { opacity: 1; transform: scale(1); }

/* Ramal que se dibuja desde la senal hacia el texto del capitulo activo. */
.linea-vida__chapter::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + 16px);
  width: clamp(30px, 4.5vw, 78px);
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, var(--red), rgba(194, 51, 57, 0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease) .1s;
}

.linea-vida__chapter:nth-child(even)::before {
  left: auto;
  right: calc(50% + 16px);
  background: linear-gradient(270deg, var(--red), rgba(194, 51, 57, 0));
  transform-origin: right center;
}

.linea-vida__chapter.is-active::before { transform: scaleX(1); }

/* ----- Ano gigante y paralaje ----- */

/* La deriva (--drift, la pone initLineaVida) mueve en paralaje el ano
   gigante y, en sentido contrario, la pila de fotos. Sin transicion:
   sigue al scroll fotograma a fotograma. */
.linea-vida__drift {
  transform: translateY(calc(var(--drift, 0) * var(--depth, 1) * 46px));
  will-change: transform;
}

.linea-vida__drift--year { --depth: 1; }

.linea-vida__drift--foto {
  --depth: -.35;
  position: relative;
  z-index: 1;
  width: min(100%, 340px);
}

/* Cifras huecas que suben en cascada al entrar el capitulo. */
.linea-vida__bigyear {
  display: inline-flex;
  overflow: hidden;
  padding: .06em .05em .07em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.8rem, 11vw, 11rem);
  line-height: .82;
  letter-spacing: -.045em;
  user-select: none;
}

.linea-vida__bigyear span {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 2px rgba(15, 28, 34, .18);
  transform: translateY(70%);
  opacity: 0;
  transition: transform .7s var(--ease), opacity .5s var(--ease);
  transition-delay: calc(var(--d, 0) * 75ms + 80ms);
}

.linea-vida__chapter.visible .linea-vida__bigyear span {
  transform: none;
  opacity: 1;
}

/* El relleno rojo de cada cifra vive en un ::before con el mismo glifo:
   se enciende cifra a cifra cuando el capitulo esta activo. */
.linea-vida__bigyear span::before {
  content: attr(data-d);
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #e84a50, var(--red) 55%, #8f2227);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke-width: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
  transition-delay: calc(var(--d, 0) * 60ms);
}

.linea-vida__chapter.is-active .linea-vida__bigyear span::before { opacity: 1; }

/* Con el relleno encendido, el trazo pasa a tono rojo para que no asome
   ningun filo gris bajo el degradado. */
.linea-vida__chapter.is-active .linea-vida__bigyear span {
  -webkit-text-stroke-color: rgba(194, 51, 57, .45);
}

/* Con fotos, el ano gigante pasa detras de la pila como marca de agua. */
.linea-vida__chapter.has-fotos .linea-vida__drift--year {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) translateY(calc(var(--drift, 0) * 46px));
}

.linea-vida__chapter.has-fotos .linea-vida__bigyear {
  font-size: clamp(5rem, 13vw, 12rem);
}

.linea-vida__chapter.has-fotos .linea-vida__bigyear span {
  -webkit-text-stroke-color: rgba(15, 28, 34, .12);
}

.linea-vida__chapter.has-fotos.is-active .linea-vida__bigyear span {
  -webkit-text-stroke-color: rgba(194, 51, 57, .28);
}

.linea-vida__chapter.has-fotos.is-active .linea-vida__bigyear span::before { opacity: .22; }

/* ----- Fotos del capitulo ----- */

/* La pila reutiliza el mecanismo tactil de .pila__stack / .pila__card
   (initPilas en app.js): al tocar, la foto de arriba pasa al fondo. */
.linea-vida__stack.pila__stack {
  width: 100%;
  aspect-ratio: 4 / 3;
  transition: transform .5s var(--ease);
}

.linea-vida__chapter.is-active .linea-vida__stack.pila__stack {
  transform: rotate(-1.6deg) scale(1.02);
}

.linea-vida__photo.pila__card {
  border-radius: 20px;
  overflow: hidden;
  background: var(--gray-card);
  border: 5px solid var(--white);
  box-shadow: 0 22px 56px rgba(15, 28, 34, .2);
}

.linea-vida__photo.pila__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.linea-vida__hint,
.linea-vida__caption { color: var(--ink-soft); }

/* ----- Texto del capitulo ----- */

.linea-vida__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(15, 28, 34, .06);
}

.linea-vida__eyebrow b { color: var(--red); font-weight: 800; letter-spacing: .06em; }

.linea-vida__eyebrow i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 28, 34, .35);
}

.linea-vida__copy h3 {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  overflow: hidden;
}

.linea-vida__copy h3 span {
  display: block;
  transform: translateY(112%);
  transition: transform .65s var(--ease) .12s;
}

.linea-vida__chapter.visible .linea-vida__copy h3 span { transform: none; }

.linea-vida__meta {
  margin-top: 14px;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15, 28, 34, .05);
  transition: background .4s var(--ease), color .4s var(--ease);
}

.linea-vida__chapter.is-active .linea-vida__meta {
  background: rgba(194, 51, 57, .09);
  color: var(--red);
}

.linea-vida__copy > p:not(.linea-vida__eyebrow):not(.linea-vida__meta) {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 56ch;
}

.linea-vida__copy strong {
  color: var(--ink);
  font-weight: 600;
}

.linea-vida__cta { margin-top: 24px; }

/* ----- Cierre de la senal ----- */

/* El final se enciende solo cuando la senal llega abajo: la opacidad
   sale del propio --vida-progress (calc se recorta solo entre 0 y 1). */
.linea-vida__terminus {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  opacity: calc((var(--vida-progress, 0) - .9) * 10);
  transform: translateY(calc((1 - var(--vida-progress, 0)) * 18px));
}

.linea-vida__terminus-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffd9db, #e84a50 45%, var(--red));
  box-shadow: 0 0 0 6px rgba(194, 51, 57, .12), 0 0 22px rgba(194, 51, 57, .5);
}

.linea-vida__terminus-label {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(15, 28, 34, .08);
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(15, 28, 34, .08);
}

@media (prefers-reduced-motion: reduce) {
  .linea-vida__scrub-fill,
  .linea-vida__scrub-thumb,
  .linea-vida__beam-fill,
  .linea-vida__beam-comet,
  .linea-vida__mark-dot,
  .linea-vida__mark-year,
  .linea-vida__node-ring,
  .linea-vida__node-core,
  .linea-vida__node-play,
  .linea-vida__chapter,
  .linea-vida__chapter::before,
  .linea-vida__bigyear span,
  .linea-vida__bigyear span::before,
  .linea-vida__copy h3 span,
  .linea-vida__stack.pila__stack,
  .linea-vida__photo { transition: none; }
  .linea-vida__drift { transform: none; }
  .linea-vida__chapter.has-fotos .linea-vida__drift--year { transform: translate(-50%, -60%); }
  .linea-vida__bigyear span { transform: none; opacity: 1; }
  .linea-vida__copy h3 span { transform: none; }
  .linea-vida__chapter.visible:not(.is-active) { opacity: 1; }
  .linea-vida__terminus { opacity: 1; transform: none; }
}

/* ---------- Muro de evidencias ---------- */

/* Pila táctil de capturas (talleres, portadas, diapositivas, recursos,
   feedback, programas de congresos...) con una ficha lateral que cambia al
   tocar: qué es, por qué importa, qué demuestra. La pila reutiliza el
   mecanismo de .pila__stack / .pila__card (initEvidencias en app.js). */
.evidencias { background: var(--white); overflow-x: clip; }

.evidencias--dark {
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(194, 51, 57, .18), transparent 55%),
    var(--ink);
  color: var(--white);
}

.evidencias__head {
  max-width: 860px;
  margin-bottom: 56px;
}

.evidencias__head .section__title { margin-bottom: 18px; }

.evidencias__intro {
  color: var(--ink-soft);
  font-size: clamp(1.04rem, 2vw, 1.18rem);
  max-width: 62ch;
}

.evidencias--dark .evidencias__intro { color: rgba(255, 255, 255, .72); }

.evidencias__board {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 6vw, 80px);
  align-items: center;
}

.evidencias__visual {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.evidencias__stack.pila__stack {
  width: min(100%, 420px);
  aspect-ratio: 4 / 3;
}

.evidencias__card.pila__card {
  border-radius: 22px;
  overflow: hidden;
  background: var(--gray-card);
}

.evidencias__card.pila__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15, 28, 34, .22);
}

.evidencias--dark .evidencias__card.pila__card img {
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

.evidencias__card.pila__card .ph {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 22px;
}

.evidencias__hint { text-align: center; }
.evidencias--dark .evidencias__hint { opacity: .6; }

.evidencias__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.evidencias__counter {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--red);
  margin-bottom: 14px;
}

.evidencias__kind {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.evidencias--dark .evidencias__kind { color: rgba(255, 255, 255, .6); }

.evidencias__title {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 6px;
}

.evidencias__facts {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.evidencias__fact {
  position: relative;
  padding-left: 22px;
}

.evidencias__fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 999px;
  background: var(--red);
  opacity: .85;
}

.evidencias__fact dt {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}

.evidencias__fact dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.5;
  max-width: 52ch;
}

.evidencias--dark .evidencias__fact dd { color: rgba(255, 255, 255, .76); }

/* La ficha lateral entra con un leve desplazamiento cada vez que cambia la
   evidencia de arriba (lo dispara initEvidencias quitando y reañadiendo la
   clase). Sin animación si el usuario prefiere reducir movimiento. */
.evidencias__copy--in { animation: evidencias-in .42s var(--ease); }

@keyframes evidencias-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

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

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .socials--nav { display: none; }
}

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .card, .card--big { grid-column: span 2; }
  .evidencias__board { grid-template-columns: 1fr; }
  .evidencias__visual { order: -1; }
  /* La senal pasa al borde izquierdo y los capitulos, a una columna:
     escena (ano gigante / fotos) arriba y texto debajo. */
  .linea-vida__beam { left: 15px; margin-left: 0; }
  .linea-vida__chapters { gap: clamp(56px, 9vw, 88px); }
  .linea-vida__chapter {
    grid-template-columns: 1fr;
    row-gap: 22px;
    padding-left: 48px;
    align-items: start;
  }
  .linea-vida__chapter:nth-child(even) .linea-vida__scene { order: 0; }
  .linea-vida__chapter:nth-child(even) .linea-vida__copy { order: 1; justify-self: start; }
  .linea-vida__chapter::before,
  .linea-vida__chapter:nth-child(even)::before { display: none; }
  .linea-vida__node {
    left: 15px;
    top: 12px;
    transform: translate(-50%, 0);
  }
  .linea-vida__scene { min-height: 0; }
  .linea-vida__bigyear { font-size: clamp(4rem, 14vw, 7.5rem); }
  .linea-vida__chapter.has-fotos .linea-vida__bigyear { font-size: clamp(4.6rem, 17vw, 8.5rem); }
  .linea-vida__terminus {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    padding-left: 7px;
  }
  .kit-prensa__bios { grid-template-columns: 1fr; }
  .prompt-guide__lead,
  .prompt-guide__workspace,
  .assistant-check { grid-template-columns: 1fr; }
  .prompt-anatomy__parts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 820px) {
  :root { --gutter: 20px; } /* margen lateral menor en móvil/tablet */
  .feature__inner { grid-template-columns: 1fr; gap: 40px; }
  .feature:nth-child(even) .feature__inner { direction: ltr; }
  .proyecto,
  .proyecto:nth-child(even),
  .prensa-video,
  .prensa-video:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .proyecto:nth-child(even) .proyecto__media { order: 0; }
  .prensa-video:nth-child(even) .prensa-video__media { order: 0; }
  .proyecto::before,
  .proyecto:nth-child(even)::before {
    inset: 0 0 auto;
    width: 100%;
    height: 5px;
  }
  /* las tarjetas rediseñadas conservan su aro degradado completo */
  .proyecto--obra::before,
  .proyecto--obra:nth-child(even)::before {
    inset: 0;
    width: auto;
    height: auto;
  }
  .proyecto__copy,
  .proyecto:nth-child(even) .proyecto__copy,
  .prensa-video__copy,
  .prensa-video:nth-child(even) .prensa-video__copy { padding: 0 10px 14px; }
  .proyecto__carrusel .carrusel__slide .ph,
  .proyecto__carrusel .carrusel__slide img,
  .prensa-video__media iframe,
  .prensa-video__media video,
  .prensa-video__media .ph { min-height: auto; }
  /* la vitrina pasa a columna: el panel estrella apila imagen y ficha,
     y las tarjetas ocupan todo el ancho */
  .vitrina-star { grid-template-columns: 1fr; border-radius: 30px; }
  .vitrina-star__media { min-height: 0; aspect-ratio: 16 / 10; }
  .vitrina-star__media::after {
    background: linear-gradient(to bottom, rgba(15, 28, 34, 0) 55%, rgba(15, 28, 34, .62) 100%);
  }
  .vitrina-star__num { top: -16px; right: 10px; font-size: 5.4rem; }
  .vitrina-star__copy { padding: 28px 26px 34px; }
  .vitrina-card, .vitrina-card--wide { grid-column: span 6; }
  .vitrina-card--wide .vitrina-card__tilt { flex-direction: column; }
  .vitrina-card--wide .vitrina-card__media { aspect-ratio: 16 / 10; min-height: 0; flex: none; }
  .vitrina-filter { gap: 8px; }
  .vitrina-filter__count { width: 100%; margin-left: 0; }
  .prompt-category { grid-template-columns: 1fr; gap: 22px; }
  .prompt-pagination { grid-column: 1; }
  .prompts-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    top: 66px;
    padding: 10px 12px;
  }
  .prompts-search { flex: none; }
  .section, .feature { padding: 80px 20px; }
  .linea-vida__player {
    top: 66px;
    gap: 12px;
    padding: 8px 14px;
    margin-bottom: 48px;
  }
  .linea-vida__play { width: 32px; height: 32px; }
  .linea-vida__play svg { width: 17px; height: 17px; }
  /* hueco extra para que la etiqueta del ultimo ano no pise el contador */
  .linea-vida__scrub { margin-right: 14px; }
  .linea-vida__drift--foto { width: min(100%, 330px); }
  .card { padding: 34px 28px 28px; }
  .card__visual { margin: 16px -28px -28px; margin-top: auto; width: calc(100% + 56px); }
  .prompt-guide__lead-copy,
  .prompt-anatomy,
  .prompt-builder,
  .prompt-guide__tips,
  .assistant-check__copy,
  .assistant-check__panel { padding: 28px; }
  .prompt-guide__questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .hero { padding-top: 72px; }
  .hero__visual { margin-top: 52px; }
  .narrativa__stats { gap: 36px; }
  .proyectos { gap: 28px; }
  .linea-vida__chapters { gap: 48px; }
  .linea-vida__chapter { padding-left: 38px; }
  .linea-vida__beam { left: 11px; }
  .linea-vida__node { left: 11px; }
  .linea-vida__clock-word { display: none; }
  .linea-vida__mark { min-width: 34px; }
  .linea-vida__mark-year { font-size: .66rem; }
  .linea-vida__bigyear { font-size: clamp(3.4rem, 15vw, 5.4rem); }
  .linea-vida__chapter.has-fotos .linea-vida__bigyear { font-size: clamp(4rem, 19vw, 6.4rem); }
  .linea-vida__photo.pila__card { border-radius: 16px; border-width: 4px; }
  .linea-vida__eyebrow { font-size: .7rem; padding: 6px 12px; }
  .linea-vida__copy h3 { font-size: 1.5rem; }
  .linea-vida__copy > p:not(.linea-vida__eyebrow):not(.linea-vida__meta) { font-size: 1rem; }
  .linea-vida__terminus-label { font-size: .68rem; padding: 7px 14px; }
  .kit-bio,
  .kit-photo,
  .kit-photo__frame,
  .kit-logo { border-radius: 24px; }
  .kit-photos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .vitrina-grid { gap: 18px; }
  .vitrina-star { border-radius: 26px; margin-bottom: 40px; }
  .vitrina-star__copy { padding: 24px 22px 30px; }
  .vitrina-star__title { font-size: 1.55rem; }
  .vitrina-card__body { padding: 22px 22px 24px; }
  .mapa-scroll__stage {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 24px;
  }
  .mapa-scroll__stage-mark {
    font-size: 4.5rem;
    margin-bottom: -12px;
  }
  .mapa-scroll__stage-copy h3 { font-size: 1.8rem; }
  .mapa-scroll-card { padding: 16px; }
  .proyecto,
  .prensa-video { padding: 14px; border-radius: 24px; }
  .proyecto__media,
  .proyecto__carrusel .carrusel__viewport,
  .prensa-video__media iframe,
  .prensa-video__media video,
  .prensa-video__media .ph { border-radius: 18px; }
  .proyecto__copy h3 { font-size: 1.65rem; }
  .proyecto__copy > p,
  .prensa-video__copy > p { font-size: 1rem; }
  .prensa-video__copy h3 { font-size: 1.65rem; }
  .proyecto__carrusel .carrusel__btn { width: 38px; height: 38px; }
  .prompt-guide__questions,
  .prompt-anatomy__parts,
  .assistant-check__signals { grid-template-columns: 1fr; }
  .prompt-guide__question { min-height: 96px; }
  .prompt-anatomy__part { min-height: 118px; }
  .assistant-check__signal { min-height: 88px; }
  .prompt-builder__steps { display: grid; }
  .prompt-builder__step { justify-content: flex-start; width: 100%; }
  .prompt-builder__output { min-height: 150px; }
}

/* ============================================================
   MAPA en scroll narrativo — "El mapa de la expedición"
   Sección oscura con una carta cartográfica de pergamino donde la
   ruta roja une las cuatro paradas (M-A-P-A) y un marcador viaja
   con el scroll. Markup: renderer mapaScrollNarrativo (app.js);
   lógica: initMapaScrollNarrativo (coloca chinchetas + marcador).
   ============================================================ */

.mapa-scroll {
  background:
    radial-gradient(110% 70% at 85% -5%, rgba(194, 51, 57, .16), transparent 55%),
    linear-gradient(165deg, #16252c 0%, var(--ink) 56%, #0a1318 100%);
  color: var(--white);
  overflow: clip;
}

.mapa-scroll .feature__eyebrow { color: rgba(255, 255, 255, .66); }

.mapa-scroll__head {
  max-width: 720px;
  margin: 0 auto 8px;
  text-align: center;
}

.mapa-scroll__head .section__title { margin-bottom: 18px; }

.mapa-scroll__intro {
  color: rgba(255, 255, 255, .7);
  font-size: 1.16rem;
  line-height: 1.6;
  max-width: 58ch;
  margin: 0 auto;
}

.mapa-scroll__stages {
  position: relative;
  z-index: 0;
  display: grid;
  gap: clamp(28px, 5vh, 58px);
  max-width: 900px;
  margin: 0 auto;
  padding: 7vh 0 5vh;
}

/* La ruta continua que enhebra las estaciones */
.mapa-scroll__stages::before,
.mapa-scroll__stages::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 35px;
  width: 2px;
}
/* Tramo punteado de fondo (toda la ruta) */
.mapa-scroll__stages::before {
  bottom: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .35) 0 42%, transparent 0);
  background-size: 2px 13px;
  -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
  opacity: .55;
}
/* Tramo rojo recorrido (crece con el scroll) */
.mapa-scroll__stages::after {
  left: 34px;
  width: 4px;
  height: calc(100% * var(--mapa-scroll-progress, 0));
  border-radius: 4px;
  background: linear-gradient(var(--red), rgba(194, 51, 57, .55));
  box-shadow: 0 0 16px rgba(194, 51, 57, .6);
  -webkit-mask-image: linear-gradient(transparent, #000 6%);
  mask-image: linear-gradient(transparent, #000 6%);
  transition: height .25s var(--ease);
}

.mapa-scroll__stage {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
  align-items: start;
  opacity: .4;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mapa-scroll__stage.is-done { opacity: .62; }
.mapa-scroll__stage.is-active { opacity: 1; transform: none; }

/* Estación: medallón con letra sobre la ruta + coordenada */
.mapa-scroll__stage-mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 28px;
}

.mapa-scroll__stage-node {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #14222a;
  border: 1.5px solid rgba(255, 255, 255, .22);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.mapa-scroll__stage-node::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--red);
  opacity: 0;
}
.mapa-scroll__stage.is-done .mapa-scroll__stage-node {
  background: rgba(194, 51, 57, .85);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(194, 51, 57, .3);
}
.mapa-scroll__stage.is-done .mapa-scroll__stage-letter { color: #fff; }
.mapa-scroll__stage.is-active .mapa-scroll__stage-node {
  background: var(--red);
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(194, 51, 57, .5);
}
.mapa-scroll__stage.is-active .mapa-scroll__stage-node::after {
  animation: mapaNodePulse 2.4s var(--ease) infinite;
}
@keyframes mapaNodePulse {
  0%   { transform: scale(.72); opacity: .6; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.mapa-scroll__stage-letter {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .58);
  transition: color .5s var(--ease);
}
.mapa-scroll__stage.is-active .mapa-scroll__stage-letter { color: #fff; }

.mapa-scroll__stage-coord {
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  transition: color .5s var(--ease);
}
.mapa-scroll__stage.is-active .mapa-scroll__stage-coord { color: rgba(255, 255, 255, .7); }

/* Panel (la tarjeta) */
.mapa-scroll__stage-copy {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 26px;
  background: linear-gradient(152deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  padding: clamp(26px, 3.4vw, 44px);
  transition: border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.mapa-scroll__stage.is-active .mapa-scroll__stage-copy {
  border-color: rgba(194, 51, 57, .4);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(194, 51, 57, .13), transparent 58%),
    linear-gradient(152deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025));
  box-shadow: 0 32px 72px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Letra fantasma de fondo */
.mapa-scroll__stage-ghost {
  position: absolute;
  top: -.36em;
  right: -.02em;
  font-family: var(--font-display);
  font-size: clamp(9rem, 15vw, 14rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: color .5s var(--ease);
}
.mapa-scroll__stage.is-active .mapa-scroll__stage-ghost { color: rgba(194, 51, 57, .09); }

.mapa-scroll__stage-copy > :not(.mapa-scroll__stage-ghost) { position: relative; z-index: 1; }

.mapa-scroll__step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 16px;
  transition: color .5s var(--ease);
}
.mapa-scroll__step-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.mapa-scroll__step-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .22), transparent);
  transition: background .5s var(--ease);
}
.mapa-scroll__stage.is-active .mapa-scroll__step { color: rgba(255, 255, 255, .74); }
.mapa-scroll__stage.is-active .mapa-scroll__step-dot {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(194, 51, 57, .25);
}
.mapa-scroll__stage.is-active .mapa-scroll__step-rule {
  background: linear-gradient(90deg, rgba(194, 51, 57, .65), transparent);
}

.mapa-scroll__eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}

.mapa-scroll__stage-copy h3 {
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.025em;
}

.mapa-scroll__claim {
  margin-top: 16px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  max-width: 42ch;
}

.mapa-scroll__text {
  margin-top: 18px;
  color: rgba(255, 255, 255, .66);
  font-size: 1.06rem;
  line-height: 1.64;
  max-width: 58ch;
}

.mapa-scroll__cards {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mapa-scroll-card {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .055);
  padding: 18px 20px;
}

.mapa-scroll-card > p {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 8px;
}

.mapa-scroll-card > div {
  color: rgba(255, 255, 255, .82);
  font-size: .98rem;
}

.mapa-scroll-card--prompt {
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
}

.mapa-scroll-card--error {
  border-color: rgba(194, 51, 57, .42);
}

.mapa-scroll__copy {
  margin-top: 14px;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  padding: 9px 16px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.mapa-scroll__copy:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .mapa-scroll__stage,
  .mapa-scroll__copy { transition: none; }
  .mapa-scroll__stages::after { transition: none; }
  .mapa-scroll__stage-node::after { animation: none; }
}

@media (max-width: 1024px) {
  .mapa-scroll__stages { padding: 6vh 0 4vh; gap: 28px; }
}

@media (max-width: 680px) {
  .mapa-scroll__stages::before,
  .mapa-scroll__stages::after { display: none; }
  .mapa-scroll__stage {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mapa-scroll__stage-mark {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding-top: 0;
    margin-bottom: 14px;
  }
  .mapa-scroll__stage-node { width: 50px; height: 50px; }
  .mapa-scroll__stage-letter { font-size: 1.45rem; }
  .mapa-scroll__stage-copy { padding: 26px 22px; }
  .mapa-scroll__stage-copy h3 { font-size: 1.8rem; }
  .mapa-scroll__stage-ghost { font-size: 8rem; }
  .mapa-scroll__cards { grid-template-columns: 1fr; margin-top: 20px; }
  .mapa-scroll-card { padding: 16px; }
  .mapa-scroll-card--prompt { grid-column: auto; }
}

/* ============================================================
   Modelo MAPA — presentación interactiva de las cuatro paradas
   ============================================================ */

.mapa-section { overflow: hidden; }

.mapa-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.mapa-head__intro {
  margin-top: 20px;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  color: var(--ink-soft);
}

/* El viaje del aprendizaje */
.mapa-journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 auto 56px;
  max-width: 1040px;
  counter-reset: journey;
}
.mapa-journey__step {
  position: relative;
  background: var(--gray-bg);
  border-radius: 24px;
  padding: 24px 22px;
  display: grid;
  gap: 12px;
}
.mapa-journey__step::after {
  content: "›";
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--red);
  z-index: 1;
}
.mapa-journey__step:last-child::after { display: none; }
.mapa-journey__dot {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  color: var(--red);
  letter-spacing: .08em;
}
.mapa-journey__step p { font-size: .94rem; color: var(--ink); line-height: 1.5; }

/* Tablero: pestañas de parada + panel activo */
.mapa-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 34px;
}
.mapa-stage {
  position: relative;
  display: grid;
  gap: 8px;
  text-align: left;
  padding: 22px 20px;
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 26px;
  background: var(--white);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.mapa-stage:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(194, 51, 57, .35); }
.mapa-stage.active {
  background: linear-gradient(150deg, #1a2a33 0%, var(--ink) 70%);
  border-color: transparent;
  box-shadow: var(--shadow-hover);
}
.mapa-stage__letter {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--red);
}
.mapa-stage.active .mapa-stage__letter { color: #ff6b71; }
.mapa-stage__icon { width: 26px; height: 26px; color: var(--ink-soft); }
.mapa-stage.active .mapa-stage__icon { color: rgba(255, 255, 255, .9); }
.mapa-stage__icon svg { width: 100%; height: 100%; }
.mapa-stage__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}
.mapa-stage.active .mapa-stage__name { color: var(--white); }
.mapa-stage__claim { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; }
.mapa-stage.active .mapa-stage__claim { color: rgba(255, 255, 255, .72); }

/* Panel de la parada activa */
.mapa-panels { position: relative; }
.mapa-panel {
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: 40px;
  animation: mapaFade .4s var(--ease);
}
@keyframes mapaFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.mapa-panel__head {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.mapa-panel__badge {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 26px;
  background: linear-gradient(150deg, #1a2a33 0%, var(--ink) 70%);
  display: grid;
  place-items: center;
  position: relative;
}
.mapa-panel__letter {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--white);
  line-height: 1;
}
.mapa-panel__icon {
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--red);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
.mapa-panel__icon svg { width: 24px; height: 24px; }
.mapa-panel__intro { flex: 1; min-width: 240px; }
.mapa-panel__claim {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.mapa-panel__title {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin-bottom: 12px;
}
.mapa-panel__text { color: var(--ink-soft); font-size: 1.02rem; max-width: 640px; }

/* Prompts de la parada */
.mapa-prompts__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.mapa-prompt-list { display: grid; gap: 12px; }
.mapa-prompt {
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.mapa-prompt[open] { border-color: rgba(194, 51, 57, .3); box-shadow: var(--shadow); }
.mapa-prompt summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
}
.mapa-prompt summary::-webkit-details-marker { display: none; }
.mapa-prompt__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--red);
  flex: none;
}
.mapa-prompt__heads { flex: 1; display: grid; gap: 2px; }
.mapa-prompt__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mapa-prompt__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.mapa-prompt__chevron {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--red);
  transition: transform .25s var(--ease);
}
.mapa-prompt[open] .mapa-prompt__chevron { transform: rotate(45deg); }
.mapa-prompt__body { padding: 0 22px 22px 58px; display: grid; gap: 16px; }
.mapa-prompt__text {
  font-style: italic;
  color: var(--ink);
  background: var(--gray-bg);
  border-radius: 14px;
  padding: 16px 18px;
  line-height: 1.55;
  white-space: pre-line;
}
.mapa-prompt__copy {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  color: var(--white);
  background: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.mapa-prompt__copy:hover { background: var(--red); transform: translateY(-1px); }

.mapa-summary {
  max-width: 720px;
  margin: 48px auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--ink);
}

@media (max-width: 900px) {
  .mapa-journey { grid-template-columns: 1fr 1fr; }
  .mapa-journey__step:nth-child(2n)::after { display: none; }
  .mapa-stages { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .mapa-journey { grid-template-columns: 1fr; }
  .mapa-journey__step::after { display: none; }
  .mapa-stages { grid-template-columns: 1fr; }
  .mapa-panel { padding: 26px 20px; }
  .mapa-prompt__body { padding-left: 22px; }
}

/* ============================================================
   Blog — portada destacada, filtro por etiquetas, tarjetas con
   inclinación 3D y lectura inmersiva del artículo.
   ============================================================ */

.blog-head { max-width: 880px; }

.blog-head .section__title { margin-bottom: 18px; }

.blog-intro {
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 62ch;
  margin-bottom: 54px;
}

/* ---------- etiquetas (chips) ---------- */

.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.blog-chip {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(194, 51, 57, .1);
  border: 1px solid rgba(194, 51, 57, .18);
  border-radius: 999px;
  padding: 5px 14px;
  white-space: nowrap;
}

.blog-chips--light .blog-chip {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}

/* Ficha del artículo: cada dato con su icono (calendario, reloj…). Los
   iconos hacen de separador, así que ya no hacen falta los puntos «·». */
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 15px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

.blog-meta__dato { display: inline-flex; align-items: center; gap: 6px; }

.blog-meta__ico {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: .8;
}

.blog-meta--light { color: rgba(255, 255, 255, .72); }

/* ---------- artículo destacado (panel oscuro) ---------- */

.blog-star {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(194, 51, 57, .28), transparent 55%),
    linear-gradient(135deg, #1a2a33 0%, var(--ink) 58%, #0a1318 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 64px;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}

.blog-star:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.blog-star__media {
  position: relative;
  display: block;
  min-height: 380px;
  overflow: hidden; /* el zoom de la imagen no debe invadir la zona de texto */
}

.blog-star__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.blog-star:hover .blog-star__img { transform: scale(1.04); }

div.blog-star__img.blog-ph { display: grid; place-items: center; }

.blog-star__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 72%, rgba(15, 28, 34, .55) 100%);
  pointer-events: none;
}

.blog-star__copy {
  padding: clamp(34px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  color: #fff;
}

.blog-star__kicker {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e88a8e;
}

.blog-star__title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
}

.blog-star__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-size: 0% 3px;
  background-position: 0 100%;
  padding-bottom: 4px;
  transition: background-size .45s var(--ease);
}

.blog-star__title a:hover { background-size: 100% 3px; }

.blog-star__excerpt {
  color: rgba(255, 255, 255, .78);
  font-size: 1.02rem;
  max-width: 48ch;
}

.blog-star__cta { margin-top: 10px; }

/* ---------- rutas de lectura (itinerarios) ----------
   Antes de la rejilla, unas cuantas puertas de entrada por tema: «IA y
   ética», «Pensamiento crítico»… Al pulsar una, la rejilla se queda con
   los artículos de esa ruta. */

.blog-rutas { margin-bottom: 40px; }

.blog-rutas__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 18px;
}

.blog-rutas__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.blog-rutas__claim {
  font-size: .92rem;
  color: var(--ink-soft);
}

.blog-rutas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.blog-ruta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  background: var(--gray-card);
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: 18px;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease), background .3s var(--ease);
}

.blog-ruta:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(194, 51, 57, .35);
}

.blog-ruta__num {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: var(--red);
  opacity: .35;
  flex: none;
}

.blog-ruta__copy { display: grid; gap: 3px; min-width: 0; flex: 1; }

.blog-ruta__name {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 700;
  color: var(--ink);
}

.blog-ruta__n {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .75;
}

.blog-ruta__flecha {
  flex: none;
  color: var(--ink-soft);
  transition: transform .3s var(--ease), color .3s var(--ease);
}

.blog-ruta__flecha svg { width: 18px; height: 18px; display: block; }

.blog-ruta:hover .blog-ruta__flecha { transform: translateX(3px); color: var(--red); }

/* la ruta puesta se queda encendida en tinta */
.blog-ruta.active {
  background: var(--ink);
  border-color: var(--ink);
}

.blog-ruta.active .blog-ruta__name,
.blog-ruta.active .blog-ruta__flecha { color: #fff; }

.blog-ruta.active .blog-ruta__n { color: rgba(255, 255, 255, .72); }

.blog-ruta.active .blog-ruta__num { color: #fff; opacity: .5; }

/* sello de la ruta puesta, dentro de la barra de archivo */
.blog-ruta-sello {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: .86rem;
  color: var(--ink-soft);
}

.blog-ruta-sello[hidden] { display: none; }

.blog-ruta-sello__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(194, 51, 57, .1);
  border-radius: 999px;
  padding: 4px 10px;
}

.blog-ruta-sello__nombre { font-weight: 700; color: var(--ink); }

.blog-ruta-sello__salir {
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.blog-ruta-sello__salir:hover { color: var(--red); }

/* ---------- barra de archivo: buscador + tira de etiquetas ----------
   El buscador manda en su propia línea (con el recuento a la derecha) y
   las etiquetas viven debajo, en una sola tira que se desliza. Antes eran
   pastillas idénticas al buscador y pegadas a él: se apilaban en cuatro
   filas en el móvil y se lo comían. */

.blog-barra { margin-bottom: 38px; }

.blog-barra__fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.blog-barra__count {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* la tira se desvanece por el lado que aún esconde etiquetas (lo marca
   initBlog al deslizarla), así se ve que hay más y no hace falta barra */
.blog-tira {
  --mask: none;
  position: relative;
  margin-top: 16px;
}

.blog-tira.is-izq { --mask: linear-gradient(90deg, transparent 0, #000 40px); }

.blog-tira.is-der { --mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%); }

.blog-tira.is-izq.is-der {
  --mask: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.blog-tira__pista {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 4px 2px;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}

.blog-tira__pista::-webkit-scrollbar { display: none; }

/* etiquetas: fichas de índice, no botones. Livianas y en voz baja para
   que el buscador siga mandando en la barra. */
.blog-tag {
  flex: none;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid rgba(15, 28, 34, .16);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}

.blog-tag:hover {
  color: var(--red);
  border-color: rgba(194, 51, 57, .45);
  transform: translateY(-1px);
}

.blog-tag.active {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.blog-tag.active:hover { color: #fff; }

/* ---------- rejilla de tarjetas ---------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  perspective: 1400px;
}

.blog-card { grid-column: span 2; }

.blog-card--wide { grid-column: span 4; }

/* la inclinación vive en un envoltorio interno para no pelearse con .reveal */
.blog-card__tilt {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gray-card);
  border-radius: var(--radius);
  overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s var(--ease), box-shadow .45s var(--ease);
  transform-style: preserve-3d;
}

.blog-card--live .blog-card__tilt { transition: transform .08s linear, box-shadow .45s var(--ease); }

.blog-card:hover .blog-card__tilt { box-shadow: var(--shadow-hover); }

.blog-card--wide .blog-card__tilt { flex-direction: row; }

.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex: none;
}

.blog-card--wide .blog-card__media {
  aspect-ratio: auto;
  flex: 1 1 52%;
  min-height: 300px;
}

.blog-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.blog-card:hover .blog-card__img { transform: scale(1.05); }

.blog-ph {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 140% at 80% 0%, rgba(194, 51, 57, .16), transparent 55%),
    linear-gradient(135deg, #1a2a33 0%, var(--ink) 60%, #0a1318 100%);
}

.blog-ph svg { width: clamp(48px, 18%, 96px); height: auto; opacity: .92; }

.blog-card__num {
  position: absolute;
  right: 16px;
  bottom: 6px;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .28);
  letter-spacing: -0.04em;
  pointer-events: none;
}

.blog-card__body {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.blog-card--wide .blog-card__body {
  flex: 1 1 48%;
  justify-content: center;
  padding: clamp(28px, 3vw, 44px);
}

.blog-card__title {
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  font-weight: 700;
  line-height: 1.22;
}

.blog-card--wide .blog-card__title { font-size: clamp(1.4rem, 2.3vw, 1.9rem); }

.blog-card__title a { color: inherit; text-decoration: none; }

/* toda la tarjeta es clicable a través del titular */
.blog-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.blog-card__title a:hover { color: var(--red); }

.blog-card__excerpt {
  color: var(--ink-soft);
  font-size: .96rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blog-card__more { font-size: .9rem; }

.blog-card:hover .blog-card__more { color: var(--red); }

.blog-card:hover .blog-card__more::after { transform: translateX(4px); }

/* brillo especular que sigue al cursor */
.blog-card__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, .35), transparent 62%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.blog-card--live .blog-card__glare { opacity: 1; }

/* reaparición escalonada al filtrar */
@keyframes blogPop {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.blog-pop { animation: blogPop .5s var(--ease) both; animation-delay: var(--pop-delay, 0ms); }

.blog-empty {
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.blog-empty__reset {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--red);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.blog-empty__reset:hover { text-decoration-thickness: 2px; }

/* ---------- lectura del artículo ---------- */

.blog-read:focus { outline: none; }

.blog-read__cover {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: clamp(420px, 62vh, 620px);
  display: flex;
  align-items: flex-end;
  background: var(--ink);
}

.blog-read__cover-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.blog-read__cover-media.blog-ph { display: grid; place-items: center; }

.blog-read__cover-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 28, 34, .18) 0%, rgba(15, 28, 34, .42) 55%, rgba(15, 28, 34, .82) 100%);
}

.blog-read__back {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(8px);
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 20px;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.blog-read__back:hover { background: var(--red); color: #fff; transform: translateY(-2px); }

.blog-read__cover-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px);
  display: grid;
  gap: 16px;
  color: #fff;
}

.blog-read__title {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}

.blog-read__body {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 4px 0;
  font-size: 1.12rem;
  line-height: 1.85;
  display: grid;
  gap: 26px;
}

/* letra capital en el primer párrafo: detalle editorial de revista */
.blog-read__body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.6em;
  line-height: .82;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--red);
}

/* Enlaces de prosa: rojos y subrayados. Los botones del cierre del artículo
   (compartir, autor, suscripción) también viven dentro del cuerpo, así que
   quedan excluidos: si no, heredarían el rojo y el subrayado. */
.blog-read__body a:not(.blog-boton):not(.blog-share-red):not(.btn) {
  color: var(--red);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere; /* las URLs largas no desbordan en el móvil */
}

.blog-read__body a:not(.blog-boton):not(.blog-share-red):not(.btn):hover { color: var(--ink); }

.blog-read__body h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 700;
  margin-top: 18px;
}

.blog-read__body blockquote {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  padding: 10px 0 10px 30px;
  border-left: 4px solid var(--red);
  margin: 14px 0;
}

.blog-read__body ul { display: grid; gap: 10px; padding-left: 6px; list-style: none; }

.blog-read__body ul li {
  position: relative;
  padding-left: 26px;
}

.blog-read__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--red);
}

.blog-read__body ol {
  display: grid;
  gap: 10px;
  padding-left: 6px;
  list-style: none;
  counter-reset: blog-ol;
}

.blog-read__body ol li {
  position: relative;
  padding-left: 36px;
  counter-increment: blog-ol;
}

.blog-read__body ol li::before {
  content: counter(blog-ol);
  position: absolute;
  left: 0;
  top: .32em;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
  display: grid;
  place-items: center;
}

/* código HTML incrustado en el artículo (iframes, embeds...) */
.blog-read__body .blog-embed {
  max-width: 100%;
  overflow: hidden;
  border-radius: 18px;
}

.blog-read__body .blog-embed iframe,
.blog-read__body .blog-embed embed,
.blog-read__body .blog-embed object,
.blog-read__body .blog-embed video {
  max-width: 100%;
  border: 0;
  border-radius: 18px;
  display: block;
}

/* los vídeos incrustados ocupan todo el ancho y mantienen su proporción */
.blog-read__body .blog-embed iframe[src*="youtube.com"],
.blog-read__body .blog-embed iframe[src*="youtube-nocookie.com"],
.blog-read__body .blog-embed iframe[src*="youtu.be"],
.blog-read__body .blog-embed iframe[src*="vimeo.com"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.blog-read__share { margin-top: 16px; }

.blog-share {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--gray-card);
  border: none;
  border-radius: 999px;
  padding: 11px 24px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.blog-share svg { width: 16px; height: 16px; }

.blog-share:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

.blog-share.copied { background: var(--red); color: #fff; }

/* ---------- «Sigue leyendo sobre esto» ----------
   Tres artículos emparentados por etiquetas (las raras pesan más: lo
   calcula blogRelacionados en app.js). Van antes del anterior/siguiente,
   porque casi siempre apetece más seguir el tema que seguir el orden. */

.blog-rel {
  max-width: 920px;
  margin: clamp(48px, 7vw, 80px) auto 0;
}

.blog-rel__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 18px;
}

.blog-rel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.blog-rel__card {
  display: grid;
  gap: 12px;
  background: var(--gray-card);
  border-radius: var(--radius);
  padding: 12px;
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.blog-rel__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.blog-rel__media {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--gray-card);
}

.blog-rel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}

.blog-rel__card:hover .blog-rel__img { transform: scale(1.05); }

.blog-rel__body { display: grid; gap: 6px; padding: 0 6px 6px; }

.blog-rel__tag {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}

.blog-rel__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.blog-rel__min {
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--ink-soft);
}

.blog-read__nav {
  max-width: 920px;
  margin: clamp(32px, 4vw, 44px) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.blog-read__navcard {
  display: grid;
  gap: 8px;
  background: var(--gray-card);
  border-radius: var(--radius);
  padding: 26px 30px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.blog-read__navcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.blog-read__navcard--empty { background: transparent; pointer-events: none; }

.blog-read__navcard:last-child { text-align: right; }

.blog-read__navlabel {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}

.blog-read__navtitle {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

/* transición tarjeta → portada al abrir un artículo (View Transitions) */
::view-transition-old(blog-cover),
::view-transition-new(blog-cover) {
  animation-duration: .55s;
  height: 100%;
  overflow: clip;
}

/* ---------- buscador del blog y botón «ver todos» ---------- */

.blog-buscar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 260px;
  max-width: 420px;
  padding: 3px 6px 3px 18px;
  background: var(--gray-card);
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 999px;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.blog-buscar:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(194, 51, 57, .15);
}

.blog-buscar svg { width: 18px; height: 18px; color: var(--ink-soft); flex: none; }

.blog-buscar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 11px 0;
  outline: none;
}

/* la cruz nativa del type="search" es fea y desaparece de golpe: ponemos
   la nuestra, que solo asoma cuando hay algo escrito */
.blog-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.blog-buscar__x {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.blog-buscar__x svg { width: 14px; height: 14px; }

.blog-buscar__x:hover { background: rgba(15, 28, 34, .08); color: var(--ink); }

.blog-buscar__x[hidden] { display: none; }

/* El faro del scroll infinito: tres puntos al final de la rejilla que dicen
   «queda más abajo». Solo asoman mientras quedan artículos por soltar; en la
   práctica casi no se ven, porque el lote entra 600px antes de llegar aquí.
   Sin latido: las tarjetas aparecen al instante (no hay nada que descargar),
   así que un spinner girando sería mentira. */
.blog-faro {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  min-height: 20px;
}

.blog-faro[hidden] { display: none; }

.blog-faro__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: .28;
}

.blog-faro__punto:nth-child(2) { opacity: .2; }

.blog-faro__punto:nth-child(3) { opacity: .12; }

.blog-more-wrap { display: flex; justify-content: center; margin-top: 36px; }

.blog-more[hidden] { display: none; }

/* ---------- bloque de prompt copiable (:::prompt) ---------- */

.blog-read__body .blog-prompt {
  background: var(--ink);
  border-radius: 20px;
  overflow: hidden;
  color: #eef2f4;
}

.blog-prompt__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.blog-prompt__dots { display: inline-flex; gap: 6px; flex: none; }

.blog-prompt__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}

.blog-prompt__dots i:first-child { background: var(--red); }

.blog-prompt__label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-prompt__copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.blog-prompt__copy svg { width: 14px; height: 14px; }

.blog-prompt__copy:hover { background: var(--red); color: #fff; transform: translateY(-1px); }

.blog-prompt__copy.copied { background: var(--red); color: #fff; }

.blog-prompt__text {
  margin: 0;
  padding: 20px 22px 24px;
  font-family: var(--font-mono);
  font-size: .92rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.blog-prompt__text .tok-var {
  background: rgba(194, 51, 57, .3);
  color: #ffccce;
  border-radius: 6px;
  padding: .08em .34em;
}

/* ---------- foto con pie y alt (:::img) ---------- */

.blog-read__body .blog-fig { margin: 0; }

.blog-read__body .blog-fig img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

.blog-read__body .blog-fig figcaption {
  margin-top: 12px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 14px;
  border-left: 3px solid var(--red);
}

/* ---------- vídeo pegando el enlace (:::video) ---------- */

.blog-read__body .blog-video .video__facade {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: 18px;
  color: #fff;
}

.blog-read__body .blog-video video { width: 100%; border-radius: 18px; display: block; }

/* ============================================================
   Bloques de presentación del artículo
   Los ocho bloques que el editor inserta desde el menú «Insertar»:
   aviso, plegable, pasos, llamada a la acción, comparativa, dato,
   tabla y galería. Sirven para PRESENTAR la información, no solo
   para escribirla. Sus gemelos para las páginas estáticas de /blog/
   están en seo_blog_estilos() (admin/lib/seo.php): si cambias uno,
   cambia el otro.
   ============================================================ */

/* Título opcional que encabeza pasos, comparativa y datos */
.blog-read__body .blog-bloque__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}

/* ---------- caja de aviso (:::aviso) ---------- */

.blog-read__body .blog-aviso {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid rgba(15, 28, 34, .1);
  border-left: 5px solid var(--tono, var(--ink));
  background: var(--tono-suave, var(--gray-card));
}

.blog-read__body .blog-aviso--idea     { --tono: var(--ink); --tono-suave: rgba(15, 28, 34, .05); }
.blog-read__body .blog-aviso--consejo  { --tono: #1f7a4d; --tono-suave: rgba(31, 122, 77, .08); }
.blog-read__body .blog-aviso--atencion { --tono: #b3701a; --tono-suave: rgba(179, 112, 26, .09); }
.blog-read__body .blog-aviso--clave    { --tono: var(--red); --tono-suave: rgba(194, 51, 57, .07); }

.blog-aviso__icono { font-size: 1.3rem; line-height: 1.3; flex: none; }

.blog-aviso__cuerpo { display: grid; gap: 8px; min-width: 0; }

.blog-read__body .blog-aviso__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--tono);
  margin: 0;
}

.blog-read__body .blog-aviso p { margin: 0; }

/* ---------- plegable (:::plegable) ---------- */

.blog-read__body .blog-plegable {
  border: 1px solid rgba(15, 28, 34, .12);
  border-radius: 16px;
  background: var(--white);
  overflow: hidden;
}

.blog-read__body .blog-plegable > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .25s var(--ease);
}

.blog-read__body .blog-plegable > summary::-webkit-details-marker { display: none; }

/* el signo "+" que gira hasta convertirse en "×" al abrirse */
.blog-read__body .blog-plegable > summary::before {
  content: "+";
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform .3s var(--ease);
}

.blog-read__body .blog-plegable[open] > summary::before { transform: rotate(135deg); }

.blog-read__body .blog-plegable > summary:hover { background: rgba(194, 51, 57, .05); }

.blog-plegable__cuerpo {
  padding: 0 22px 20px 60px;
  display: grid;
  gap: 12px;
}

.blog-read__body .blog-plegable__cuerpo p { margin: 0; }

/* ---------- pasos numerados (:::pasos) ---------- */

.blog-read__body .blog-pasos__lista {
  display: grid;
  gap: 18px;
  counter-reset: paso;
  list-style: none;
  padding: 0;
}

.blog-read__body .blog-pasos__paso {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 0;
  counter-increment: paso;
}

.blog-read__body .blog-pasos__paso::before {
  content: counter(paso);
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  /* anula la bolita roja que llevan los <li> normales del artículo */
  position: static;
  top: auto;
  left: auto;
}

.blog-pasos__texto { display: grid; gap: 4px; min-width: 0; padding-top: 8px; }

.blog-read__body .blog-pasos__t {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
}

.blog-read__body .blog-pasos__d { margin: 0; color: var(--ink-soft); }

/* ---------- llamada a la acción (:::cta) ---------- */

.blog-read__body .blog-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 30px;
  border-radius: 24px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}

.blog-cta__texto { display: grid; gap: 6px; min-width: 0; }

.blog-read__body .blog-cta__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.01em;
  margin: 0;
  color: #fff;
}

.blog-read__body .blog-cta__sub {
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: .95rem;
}

.blog-read__body .blog-cta__btn {
  flex: none;
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  text-decoration: none;
  background-image: none;
}

.blog-read__body .blog-cta__btn:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- dos columnas enfrentadas (:::comparativa) ---------- */

.blog-comp__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) { .blog-comp__cols { grid-template-columns: 1fr; } }

.blog-comp__col {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(15, 28, 34, .1);
  background: var(--gray-card);
}

/* la columna de la derecha es la "buena": se lleva el rojo de marca */
.blog-comp__col--b {
  background: rgba(194, 51, 57, .06);
  border-color: rgba(194, 51, 57, .22);
}

.blog-read__body .blog-comp__t {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 12px;
}

.blog-comp__col--b .blog-comp__t { color: var(--red); }

.blog-read__body .blog-comp__lista { gap: 8px; padding: 0; }

/* ---------- cifras grandes (:::dato) ---------- */

.blog-datos__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.blog-dato {
  display: grid;
  gap: 4px;
  padding: 22px 20px;
  border-radius: 18px;
  background: var(--gray-card);
  border: 1px solid rgba(15, 28, 34, .08);
  text-align: center;
}

.blog-dato__cifra {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--red);
}

.blog-dato__txt { font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- tabla (:::tabla) ---------- */

.blog-read__body .blog-tabla { margin: 0; }

/* en el móvil la tabla se desliza a lo ancho en vez de romper la página */
.blog-tabla__scroll { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(15, 28, 34, .12); }

.blog-tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  background: var(--white);
}

.blog-tabla th,
.blog-tabla td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(15, 28, 34, .09);
}

.blog-tabla thead th {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.blog-tabla tbody tr:last-child td { border-bottom: 0; }
.blog-tabla tbody tr:hover { background: rgba(194, 51, 57, .04); }

.blog-read__body .blog-tabla figcaption {
  margin-top: 12px;
  font-size: .88rem;
  color: var(--ink-soft);
  padding-left: 14px;
  border-left: 3px solid var(--red);
}

/* ---------- galería de fotos (:::galeria) ---------- */

.blog-read__body .blog-galeria { margin: 0; }

.blog-galeria__rejilla {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

.blog-galeria[data-n="1"] .blog-galeria__rejilla { grid-template-columns: 1fr; }
.blog-galeria[data-n="3"] .blog-galeria__rejilla,
.blog-galeria[data-n="4"] .blog-galeria__rejilla { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 640px) {
  .blog-galeria__rejilla,
  .blog-galeria[data-n="3"] .blog-galeria__rejilla,
  .blog-galeria[data-n="4"] .blog-galeria__rejilla { grid-template-columns: repeat(2, 1fr); }
}

.blog-galeria__rejilla img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.blog-read__body .blog-galeria figcaption {
  margin-top: 12px;
  font-size: .88rem;
  color: var(--ink-soft);
  padding-left: 14px;
  border-left: 3px solid var(--red);
}

/* ---------- pila de fotos (:::pila) ----------
   No inventa nada: reutiliza el motor y las clases de las pilas de la casa
   (.pila__stack / .pila__card, initPilas). Aquí solo se le da el sitio que
   necesita dentro de la columna del artículo: se centra, se le pone un ancho
   máximo (a todo lo ancho quedaría gigante) y se le deja aire alrededor para
   que las cartas de abajo, giradas, no se corten. */
.blog-read__body .blog-pila {
  display: grid;
  justify-items: center;
  padding: 0 6% 8px;
}

.blog-read__body .blog-pila .blog-bloque__titulo {
  justify-self: start;
  margin-bottom: 22px;
}

.blog-pila__stack {
  width: 100%;
  max-width: 460px;
}

.blog-read__body .blog-pila .pila__caption,
.blog-read__body .blog-pila .pila__hint { margin-left: auto; margin-right: auto; }

.blog-read__body .blog-pila .pila__hint { margin-bottom: 0; }

/* ---------- las fotos del artículo se amplían al tocarlas ---------- */

.blog-zoomable { cursor: zoom-in; }

.blog-zoom {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: clamp(16px, 4vw, 44px);
  background: rgba(15, 28, 34, .93);
  cursor: zoom-out;
}

.blog-zoom img {
  max-width: min(1180px, 94vw);
  max-height: 82vh;
  width: auto;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.blog-zoom__pie {
  max-width: 70ch;
  text-align: center;
  color: rgba(255, 255, 255, .78);
  font-size: .9rem;
  line-height: 1.6;
}

.blog-zoom__cerrar {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  cursor: pointer;
  transition: background .3s var(--ease);
}

.blog-zoom__cerrar:hover { background: var(--red); border-color: var(--red); }

@keyframes blogZoomIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.blog-zoom--anim { animation: blogZoomIn .25s var(--ease) both; }

/* ---------- fila de compartir con redes ---------- */

.blog-share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.blog-share-red {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--gray-card);
  border-radius: 50%;
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.blog-share-red svg { width: 18px; height: 18px; }

.blog-share-red:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

/* ---------- ficha de autor al pie del artículo ---------- */

.blog-autor {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--gray-card);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 32px);
  margin-top: 14px;
}

.blog-autor__foto {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink);
  display: grid;
  place-items: center;
}

.blog-autor__foto img { width: 100%; height: 100%; object-fit: cover; }

.blog-autor__foto svg { width: 46px; height: 46px; }

.blog-autor__firma {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}

.blog-autor__nombre {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  margin-top: 2px;
}

.blog-autor__bio {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 4px;
}

.blog-autor__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

/* ---------- botones del cierre del artículo (autor y suscripción) ----------
   Una sola familia para los cuatro: mismo alto, misma píldora, icono a la
   izquierda. Dos pesos: --solid (el que quieres que pulsen) y --line (el
   secundario). Sobre el panel oscuro de suscripción se invierten solos.
   Los colores salen de la paleta, así que el modo noche los da hechos. */
.blog-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}

.blog-boton svg { width: 16px; height: 16px; flex: none; }

.blog-boton--solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.blog-boton--line {
  background: transparent;
  border-color: rgba(127, 145, 155, .45);
  color: var(--ink);
}

.blog-boton:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(194, 51, 57, .28);
}

.blog-boton:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* ---------- despedida con suscripción (Telegram + RSS) ---------- */

.blog-sus {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 34px);
}

.blog-sus__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.blog-sus__text {
  margin-top: 8px;
  font-size: .95rem;
  color: rgba(255, 255, 255, .72);
  max-width: 56ch;
}

.blog-sus__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

/* Sobre el panel oscuro los dos botones se invierten: el sólido pasa a blanco
   y el de contorno se dibuja con un filo claro. El rojo del hover es el mismo. */
.blog-sus .blog-boton--solid {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.blog-sus .blog-boton--line {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.blog-sus .blog-boton:hover { background: var(--red); border-color: var(--red); color: #fff; }

.blog-sus .blog-boton:focus-visible { outline-color: #fff; }

.blog-sus__hint {
  flex-basis: 100%;
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
}

/* ---------- impresión: el artículo sale limpio con ⌘P ---------- */

@media print {
  body.blog-leyendo .nav,
  body.blog-leyendo .footer,
  body.blog-leyendo .blog-progress,
  body.blog-leyendo .blog-read__back,
  body.blog-leyendo .blog-read__toc,
  body.blog-leyendo .blog-read__share,
  body.blog-leyendo .blog-autor__ctas,
  body.blog-leyendo .blog-sus,
  body.blog-leyendo .blog-read__nav,
  body.blog-leyendo .blog-prompt__copy,
  body.blog-leyendo .blog-video,
  body.blog-leyendo .blog-embed,
  body.blog-leyendo .cookies,
  body.blog-leyendo .llamada,
  body.blog-leyendo .lang-fab { display: none !important; }

  body.blog-leyendo .blog-read__cover {
    min-height: auto;
    border-radius: 0;
    background: none;
  }

  body.blog-leyendo .blog-read__cover-media,
  body.blog-leyendo .blog-read__cover-veil { display: none; }

  body.blog-leyendo .blog-read__cover-copy { color: #000; padding: 0 0 18px; }

  body.blog-leyendo .blog-meta--light { color: #444; }

  body.blog-leyendo .blog-chips--light .blog-chip { color: #444; border: 1px solid #bbb; background: none; }

  body.blog-leyendo .blog-read__body { font-size: 11pt; padding-top: 10px; }

  body.blog-leyendo .blog-prompt {
    background: none;
    border: 1.5pt solid #000;
    color: #000;
  }

  body.blog-leyendo .blog-prompt__bar { background: none; border-bottom: 1pt solid #999; }

  body.blog-leyendo .blog-prompt__label { color: #444; }

  body.blog-leyendo .blog-prompt__text .tok-var { background: none; color: #000; font-weight: 700; }

  body.blog-leyendo .blog-autor { border: 1pt solid #ccc; background: none; }

  /* de dónde salió este papel */
  body.blog-leyendo #site-main::after {
    content: "Publicado en profes.tv — el blog Garabatos.";
    display: block;
    margin-top: 24px;
    font-size: 9pt;
    color: #666;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .blog-star { grid-template-columns: 1fr; }
  .blog-star__media { min-height: 280px; }
  .blog-star__media::after {
    background: linear-gradient(180deg, transparent 65%, rgba(15, 28, 34, .6) 100%);
  }
  .blog-card { grid-column: span 3; }
  .blog-card--wide { grid-column: span 6; }
}

@media (max-width: 680px) {
  .blog-card, .blog-card--wide { grid-column: span 6; }
  .blog-card--wide .blog-card__tilt { flex-direction: column; }
  .blog-card--wide .blog-card__media { aspect-ratio: 16 / 10; min-height: 0; flex: none; }
  /* el buscador ocupa la línea entera y el recuento se le pone debajo */
  .blog-buscar { flex-basis: 100%; max-width: none; }
  .blog-barra__count { margin-left: 0; }
  .blog-tira { margin-top: 12px; }
  /* los relacionados se apilan; con tres en fila no se leería el titular */
  .blog-rel__grid { grid-template-columns: 1fr; }
  .blog-rel__card { grid-template-columns: 96px 1fr; align-items: center; }
  .blog-rel__media { aspect-ratio: 1; }
  .blog-rel__body { padding: 0; }
  .blog-read__cover { min-height: 65vh; }
  .blog-read__back { top: 16px; left: 16px; }
  .blog-read__nav { grid-template-columns: 1fr; }
  .blog-read__navcard:last-child { text-align: left; }
  .blog-autor { flex-direction: column; align-items: flex-start; gap: 16px; }
  .blog-autor__foto { width: 72px; height: 72px; }
  .blog-prompt__bar { flex-wrap: wrap; }
  .blog-prompt__label { order: 3; flex-basis: 100%; white-space: normal; }
}

/* ============================================================
   Blog «Garabatos» — portada integrada y estética de cuaderno
   La sección del blog es ahora su propia cabecera: título gigante
   con cursor de escritura y el garabato rojo que se subraya solo,
   sobre un fondo de cuaderno de puntos. Las tarjetas caen con una
   ligera inclinación, como recortes en un diario de papel.
   ============================================================ */

.blog-section--masthead {
  position: relative;
  isolation: isolate;
  padding-top: clamp(64px, 9vh, 110px);
  overflow: clip; /* el cuaderno de puntos se extiende más allá de los bordes */
}

/* --- la portada dentro de la sección --- */

.blog-mast {
  position: relative;
  max-width: 900px;
  margin: 0 auto clamp(56px, 8vw, 100px);
  text-align: center;
}

/* cuaderno de puntos solo tras la portada, desvanecido en los bordes */
.blog-mast::before {
  content: "";
  position: absolute;
  inset: -90px -22vw -60px;
  z-index: -1;
  background-image: radial-gradient(rgba(15, 28, 34, .12) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(92% 100% at 50% 42%, #000 40%, transparent 98%);
  mask-image: radial-gradient(92% 100% at 50% 42%, #000 40%, transparent 98%);
  pointer-events: none;
}

.blog-mast__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(.62rem, 1.6vw, .85rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

.blog-mast__eyebrow::before,
.blog-mast__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* título gigante con cursor de escritura parpadeando: ideas en proceso */
.blog-mast__title {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 10vw, 7rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ink);
}

.blog-mast__title::after {
  content: "";
  display: inline-block;
  width: .07em;
  height: .82em;
  margin-left: .1em;
  background: var(--red);
  vertical-align: -.02em;
  animation: caret-blink 1.1s steps(1) infinite;
}

/* el lápiz: recorre la cabecera dejando el garabato detrás y se queda
   apoyado al final del trazo. El lápiz viaja por el mismo camino que dibuja
   (offset-path), así que si se cambia la "d" del trazo hay que copiarla
   también ahí abajo o el lápiz escribirá por su cuenta. */
.blog-mast__lapiz {
  width: clamp(190px, 26vw, 290px);
  margin: 4px auto 0;
}

.blog-mast__lapiz svg { display: block; width: 100%; height: auto; overflow: visible; }

.blog-mast__trazo {
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: garabato-trazo 1.6s cubic-bezier(.5, 0, .4, 1) .55s forwards;
}

.blog-mast__mina {
  offset-path: path("M12 58 C 20 24, 42 22, 46 46 C 50 70, 26 74, 32 46 C 38 18, 66 20, 74 46 C 80 66, 60 74, 62 52 C 64 30, 92 30, 108 50");
  offset-rotate: 0deg;
  offset-distance: 0%;
  opacity: 0;
  animation: garabato-lapiz 1.6s cubic-bezier(.5, 0, .4, 1) .55s forwards;
}

/* El lápiz, por capas: primero los rellenos planos, luego las dos caras del
   hexágono (una luz y una sombra, que son blanco y negro translúcidos para
   que funcionen igual de día que de noche) y encima el filo, que es el
   contorno completo dibujado de una tirada. */
.blog-mast__madera  { fill: #e9c893; }
.blog-mast__grafito { fill: #1d2a32; } /* la mina siempre oscura: con var(--ink) se volvía blanca de noche */
.blog-mast__palo    { fill: var(--red); }
.blog-mast__luz     { fill: #fff; opacity: .24; }
.blog-mast__sombra  { fill: #000; opacity: .16; }
.blog-mast__virola  { fill: #ccd3d8; }
.blog-mast__goma    { fill: #efc2be; }

.blog-mast__vetas {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: .5;
}

.blog-mast__filo {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

@keyframes garabato-lapiz {
  0%   { offset-distance: 0%; opacity: 0; transform: translateY(-7px); }
  8%   { opacity: 1; transform: translateY(0); }
  94%  { offset-distance: 100%; transform: translateY(0); }
  100% { offset-distance: 100%; opacity: 1; transform: translateY(-2px); }
}

.blog-mast__claim {
  margin: 20px auto 0;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 640px;
}

/* --- tarjetas: recortes de cuaderno con ligera inclinación --- */

.blog-section--masthead .blog-card__tilt {
  rotate: var(--tumbo, 0deg);
  transition: transform .35s var(--ease), rotate .35s var(--ease), box-shadow .45s var(--ease);
}

.blog-section--masthead .blog-grid .blog-card:nth-child(4n+1) { --tumbo: -.65deg; }
.blog-section--masthead .blog-grid .blog-card:nth-child(4n+2) { --tumbo: .5deg; }
.blog-section--masthead .blog-grid .blog-card:nth-child(4n+3) { --tumbo: -.4deg; }
.blog-section--masthead .blog-grid .blog-card:nth-child(4n)   { --tumbo: .7deg; }

.blog-section--masthead .blog-card:hover .blog-card__tilt { rotate: 0deg; }

/* el titular se subraya con rotulador al pasar por la tarjeta */
.blog-card__title a {
  background-image: linear-gradient(0deg, rgba(194, 51, 57, .16), rgba(194, 51, 57, .16));
  background-repeat: no-repeat;
  background-size: 0% 42%;
  background-position: 0 82%;
  transition: background-size .45s var(--ease);
}

.blog-card:hover .blog-card__title a { background-size: 100% 42%; }

/* etiquetas como pegatinas del cuaderno: se ladean un poco al pasar */
.blog-section--masthead .blog-tag { box-shadow: 0 2px 0 rgba(15, 28, 34, .06); }

.blog-section--masthead .blog-tag:nth-child(odd):not(.active):hover { transform: translateY(-2px) rotate(-1.6deg); }

.blog-section--masthead .blog-tag:nth-child(even):not(.active):hover { transform: translateY(-2px) rotate(1.6deg); }

/* ---------- modo lectura inmersivo ----------
   Al abrir un artículo desaparecen la cabecera y el resto de secciones:
   la lectura empieza arriba del todo, sin tener que bajar el scroll. */

body.blog-leyendo #site-main > *:not(.blog-section) { display: none !important; }

body.blog-leyendo .blog-section { padding-top: clamp(18px, 3vw, 36px); }

/* barra de progreso de lectura: un trazo de rotulador que avanza arriba */
.blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 240;
  pointer-events: none;
}

.blog-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red), #e05a60);
  border-radius: 0 99px 99px 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* índice del artículo bajo la portada */
.blog-read__toc {
  max-width: 760px;
  margin: clamp(26px, 4vw, 40px) auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--gray-card);
  border-radius: var(--radius);
}

.blog-read__toc-label {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-right: 4px;
}

.blog-read__toc a {
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.blog-read__toc a:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

/* subtítulos: hueco bajo la barra fija y subrayado corto de marca */
.blog-read__body h2 { scroll-margin-top: 96px; }

.blog-read__body h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--red);
}

.blog-read__body h3 {
  font-size: clamp(1.12rem, 2vw, 1.32rem);
  font-weight: 700;
  margin-top: 10px;
}

/* separador "---": una línea corta y limpia, centrada, con el punto rojo de la marca */
.blog-read__body .blog-hr {
  position: relative;
  border: 0;
  width: min(220px, 56%);
  height: 1px;
  margin: 22px auto;
  background: rgba(15, 28, 34, .14);
}

.blog-read__body .blog-hr::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--red);
}

/* cierre del artículo: una línea fina sobre el botón de compartir */
.blog-read__share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.blog-read__fin {
  width: min(220px, 56%);
  height: 1px;
  background: rgba(15, 28, 34, .14);
}

/* --- accesibilidad y pantallas pequeñas --- */

@media (prefers-reduced-motion: reduce) {
  .blog-mast__title::after { animation: none; }
  .blog-section--masthead .blog-card__tilt { rotate: 0deg; }
}

/* sin movimiento: el garabato aparece ya escrito y el lápiz, apoyado al final */
@media (prefers-reduced-motion: reduce) {
  .blog-mast__trazo { animation: none; stroke-dashoffset: 0; }
  .blog-mast__mina { animation: none; opacity: 1; offset-distance: 100%; }
}

html.a11y-reduce-motion .blog-mast__trazo { animation: none; stroke-dashoffset: 0; }
html.a11y-reduce-motion .blog-mast__mina { animation: none; opacity: 1; offset-distance: 100%; }

@media (max-width: 680px) {
  .blog-read__toc { padding: 14px 16px; }
}

/* ============================================================
   Muro de recortes de prensa
   Cada aparición es un recorte de papel de periódico: cinta
   adhesiva arriba, cabecera del medio con filete, titular en
   serifa y una ligera inclinación propia (--tilt). El recorte
   se lee entero en el muro —fotos en pila táctil, cita,
   contexto, vídeo y enlace a la fuente si está publicada—:
   no hay ficha que abrir.
   ============================================================ */

.muro-prensa-section { position: relative; }

/* tipografía de periódico solo dentro de los recortes */
.muro-prensa-section { --font-prensa: Georgia, "Times New Roman", "Liberation Serif", serif; }

/* ---------- filtros por tipo ---------- */

.muro-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.muro-filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}

.muro-filtro span {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 28, 34, .08);
  transition: background .3s var(--ease);
}

.muro-filtro:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.muro-filtro.active { background: var(--ink); color: var(--white); }

.muro-filtro.active span { background: rgba(255, 255, 255, .16); }

/* ---------- el muro ---------- */

.muro {
  /* Rejilla en lugar de multicolumna (columns): el multicolumna de Chrome
     fragmentaba el celo (position:absolute) de los recortes que abren columna,
     estirándolo hasta cubrir la tarjeta y dejándolo como un celo gigante
     e interactivo. La rejilla no tiene ese problema. */
  display: grid;
  /* recortes algo más anchos que antes: ahora llevan dentro toda la pieza
     (fotos, cita, contexto y enlace), y el texto necesita columna */
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 34px;
  align-items: start;
  margin-top: 30px;
  /* aire para que las rotaciones y la cinta no se recorten */
  padding-top: 16px;
}

/* Mampostería: con recortes de distinto alto, la rejilla dejaba socavones
   debajo de los cortos. initMuroPrensa mide cada recorte y le asigna las
   filas de 8px que ocupa, así cada uno sube hasta donde acaba el de arriba.
   La clase la pone el JS: sin él, la rejilla normal sigue funcionando. */
.muro--masonry { grid-auto-rows: 8px; }

.muro-empty {
  margin-top: 26px;
  font-size: .95rem;
  color: var(--ink-soft);
}

/* ---------- recorte ---------- */

/* El recorte ya no es un botón: es la pieza entera, con su pila de fotos y
   su enlace dentro. Por eso se queda quieto (nada de enderezarse ni crecer
   al pasar el ratón: movería las fotos bajo el dedo mientras se tocan) y
   solo levanta un punto la sombra. */
.recorte {
  position: relative;
  display: block;
  margin: 0;
  padding: 24px 24px 18px;
  background:
    linear-gradient(160deg, rgba(15, 28, 34, .015), transparent 38%),
    #fdfcf7;
  border: 1px solid rgba(15, 28, 34, .07);
  /* papel recortado: esquinas casi vivas, nada de cápsulas */
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(15, 28, 34, .1);
  transform: rotate(var(--tilt, 0deg));
  transition: box-shadow .35s var(--ease);
}

.recorte:hover,
.recorte:focus-within { box-shadow: var(--shadow-hover); }

/* cinta adhesiva */
.recorte__cinta {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(238, 224, 188, .85);
  border-left: 1px dashed rgba(15, 28, 34, .12);
  border-right: 1px dashed rgba(15, 28, 34, .12);
  box-shadow: 0 2px 6px rgba(15, 28, 34, .08);
}

.recorte:nth-child(even) .recorte__cinta { transform: translateX(-50%) rotate(2.5deg); }

/* cabecera del medio, con doble filete de periódico */
.recorte__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 4px 0 -3px var(--ink);
}

.recorte__medio {
  font-family: var(--font-prensa);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

.recorte__fecha {
  flex: none;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Marco de fotos del recorte: un paspartú de papel fotográfico pegado sobre
   el periódico. Dentro vive la pila táctil (initPilas). El marco recorta lo
   que se salga: cuando la foto de arriba se va al fondo, se desliza hacia el
   borde y se mete debajo, sin invadir el texto ni los recortes vecinos. */
.recorte__foto {
  position: relative;
  margin: 16px 0 0;
  padding: 10px;
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .12);
  box-shadow: 0 6px 16px rgba(15, 28, 34, .1);
  overflow: hidden;
}

/* La pila dentro del recorte: el marco lo fija la primera foto (initPilas,
   con data-pila-min / data-pila-max) y ya no cambia; las demás se ven
   enteras y centradas sobre el paspartú, cada una con su orientación. */
.pila__stack--recorte {
  aspect-ratio: 4 / 3;   /* de partida; initPilas lo ajusta a la primera foto */
  background: #ece9e0;
}

.pila__stack--recorte .pila__card img {
  border-radius: 2px;    /* papel fotográfico, no cápsula */
  box-shadow: 0 8px 20px rgba(15, 28, 34, .22);
}

/* Salida más corta que en las pilas grandes de la web: dentro de un recorte,
   la foto solo se asoma al borde del marco antes de irse al fondo. */
.pila__stack--recorte .pila__card--out {
  transform: translate(-30%, 3%) rotate(-8deg) scale(.92) !important;
}

.pila__stack--recorte:focus-visible { outline-offset: 3px; border-radius: 2px; }

/* con una sola foto no hay nada que pasar: ni mano ni pista */
.pila__stack--recorte:not([role]) { cursor: default; }

/* Contador de la pila: en qué foto vamos ("2 / 5") */
.recorte__contador {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 6;
  padding: 3px 10px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--white);
  background: rgba(15, 28, 34, .82);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Pie de la foto de arriba. El hueco queda reservado (data-pila-fijo en el
   HTML) y mide siempre dos líneas: así el recorte no da ningún salto de alto
   al cambiar de foto, aunque unas fotos lleven pie y otras no. */
.recorte__foto-pie {
  position: relative;
  z-index: 6;
  margin: 10px 0 0;
  min-height: 2.4em;
  max-width: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: .78rem;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-soft);
}

.recorte__hint {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: .74rem;
  text-align: center;
  color: var(--ink-soft);
  opacity: .75;
}

/* vídeo o audio de la aparición, dentro del propio recorte */
.recorte__embed { margin-top: 16px; }

.recorte__embed iframe,
.recorte__embed video,
.recorte__embed .video__facade {
  width: 100%;
  display: block;
  border: 0;
  border-radius: 4px;
  aspect-ratio: 16 / 9;
}

.recorte__titular {
  font-family: var(--font-prensa);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 16px 0 0;
}

.recorte__cita {
  font-family: var(--font-prensa);
  font-style: italic;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--ink-soft);
  border-left: 3px solid var(--red);
  padding-left: 14px;
  margin: 18px 0 0;
}

/* el contexto de la aparición, ya en el propio recorte */
.recorte__texto {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

.recorte__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 28, 34, .18);
}

.recorte__kind {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(194, 51, 57, .08);
  border-radius: 999px;
  padding: 4px 12px;
}

/* Enlace a la pieza publicada. Solo existe si el recorte trae URL: una
   aparición sin enlace se queda en lo que se lee en el papel. */
.recorte__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 51, 57, .35);
  padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.recorte__link svg { width: 14px; height: 14px; flex: none; transition: transform .3s var(--ease); }

.recorte__link:hover { color: var(--ink); border-color: var(--ink); }

.recorte__link:hover svg { transform: translate(2px, -2px); }

@media (max-width: 640px) {
  .recorte { padding: 22px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .recorte__link,
  .recorte__link svg,
  .pila__stack--recorte .pila__card { transition: none; }
}

/* Bloquear el fondo con una ventana abierta. El muro ya no abre ninguna,
   pero la pizarra y el canal de TV siguen usando esta clase. */
body.modal-abierto { overflow: hidden; }

/* ============================================================
   Citas de prensa
   Franja oscura con una gran comilla de marca; las citas rotan
   en el mismo hueco (rejilla apilada) y los puntos permiten
   elegirlas a mano.
   ============================================================ */

.citas-prensa-section { padding-top: 0; }

.citas-prensa {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 84px) clamp(24px, 6vw, 96px);
  text-align: center;
}

.citas-prensa__mark {
  position: absolute;
  top: -30px;
  left: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10rem, 18vw, 16rem);
  line-height: 1;
  color: var(--red);
  opacity: .35;
  pointer-events: none;
  user-select: none;
}

.citas-prensa__eyebrow {
  position: relative;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 10px;
}

.citas-prensa__title {
  position: relative;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  margin-bottom: 26px;
}

/* todas las citas comparten celda: la franja mide lo que la más larga */
.citas-prensa__viewport { position: relative; display: grid; }

.citas-prensa__item {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}

.citas-prensa__item.active { opacity: 1; transform: none; pointer-events: auto; }

.citas-prensa__quote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 880px;
  margin: 0 auto;
}

.citas-prensa__autor { font-size: .95rem; color: rgba(255, 255, 255, .65); }

.citas-prensa__autor strong { color: var(--white); font-weight: 600; }

.citas-prensa__dots {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.citas-prensa__dot {
  width: 9px;
  height: 9px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  padding: 0;
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.citas-prensa__dot:hover { background: rgba(255, 255, 255, .55); }

.citas-prensa__dot.active { background: var(--red); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .citas-prensa__item { transition: none; transform: none; }
}

/* ============================================================
   Pizarra viva — portafolio de proyectos e instituciones
   Lienzo de tiza enmarcado en madera a pantalla completa: la línea se
   dibuja sola con el scroll (initPizarra), cada proyecto se enciende al
   asomar y sus fotos cuelgan como polaroids pegadas con cinta washi.
   ============================================================ */
.pizarra-section { padding: 0; }

.pizarra__board {
  position: relative;
  overflow: hidden;
  /* Marco de madera de aula a sangre (full-bleed); el padding lateral
     mantiene el gutter de 24px del sitio para el contenido, y el inferior
     deja sitio a la bandeja de tizas. .pizarra-section anula el padding. */
  padding: clamp(86px, 12vw, 156px) clamp(26px, 4vw, 56px) clamp(124px, 14vw, 196px);
  color: #e9ece6;
  /* Marco liso y elegante, color madera oscura para mayor profesionalidad */
  border: clamp(16px, 2.1vw, 30px) solid #22160f;
  background:
    radial-gradient(125% 85% at 14% 4%, rgba(180, 214, 222, .05), transparent 56%),
    radial-gradient(95% 64% at 88% 22%, rgba(255, 255, 255, .03), transparent 52%),
    radial-gradient(140% 120% at 50% 120%, rgba(0, 0, 0, .55), transparent 60%),
    linear-gradient(162deg, #162429 0%, #0c1519 54%, #080f11 100%);
  background-color: #080e11;
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, .7),
    0 30px 70px rgba(0, 0, 0, .3);
}

/* Grano de pizarra: ruido muy tenue + leves "barridos" de borrador horizontales
   que recuerdan a una pizarra recién limpiada, sobre todo el lienzo. */
.pizarra__board::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Ruido más fino y orgánico, opacidad sutil */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Textura general de borrador: trazos cruzados por todo el lienzo */
.pizarra__board::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(2deg, rgba(255, 255, 255, .018) 0, transparent 2px, rgba(255, 255, 255, .006) 4px, transparent 10px),
    repeating-linear-gradient(-3deg, rgba(255, 255, 255, .014) 0, transparent 3px, rgba(255, 255, 255, .005) 7px, transparent 15px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 90%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 90%);
  opacity: .75;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

/* Bisel interior: una fina ranura oscura + brillo que separa la madera del
   slate y le da relieve de marco real. Va por encima del fondo, bajo el texto. */
.pizarra__bevel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .9),
    inset 0 0 0 2px rgba(255, 255, 255, .05),
    inset 0 8px 24px rgba(0, 0, 0, .5);
}

/* Bandeja de tizas encajada en la base del marco.
   Diseño minimalista en madera oscura. */
.pizarra__ledge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(34px, 4.5vw, 48px);
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, #2b1c12 0%, #170e08 100%);
  border-top: 1px solid rgba(255, 255, 255, .06);
  box-shadow:
    0 -12px 24px rgba(0, 0, 0, .6),
    inset 0 6px 10px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* Sombra suave que proyecta la bandeja sobre el slate, sobre su borde. */
.pizarra__ledge::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45));
  pointer-events: none;
}

/* Tizas cilíndricas: estilo hiperrealista con luces y sombras de volumen. */
.pizarra__chalk {
  position: absolute;
  /* Al estar dentro de la bandeja, se apoyan en su base interior */
  bottom: clamp(8px, 1.2vw, 12px);
  height: 14px;
  /* Extremo izquierdo gastado (suave), derecho de fábrica (corte recto) */
  border-radius: 10px 3px 3px 10px;
  box-shadow:
    0 6px 8px rgba(0, 0, 0, .3),
    0 2px 3px rgba(0, 0, 0, .6),
    inset 0 -3px 4px rgba(0, 0, 0, .25), /* volumen cilíndrico interno */
    inset 0 2px 2px rgba(255, 255, 255, .4);
}
/* Tope del extremo derecho: cara plana en sombra */
.pizarra__chalk::after {
  content: "";
  position: absolute;
  top: 1px; right: 0; bottom: 1px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(0,0,0,.35));
}
/* Mota de polvo bajo la punta gastada */
.pizarra__chalk::before {
  content: "";
  position: absolute;
  left: -4px; bottom: -3px;
  width: 22px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), transparent 100%);
  filter: blur(1.5px);
  z-index: -1;
}

/* Tamaños irregulares por desgaste: tiza casi nueva, tocón y tiza media */
.pizarra__chalk--1 {
  left: 10%; width: 82px; z-index: 2;
  background: linear-gradient(180deg, #d4d4d4 0%, #fff 20%, #e0e0e0 50%, #999 90%, #666 100%);
  transform: rotate(-1.5deg);
}
.pizarra__chalk--2 {
  left: 18%; width: 28px; z-index: 1;
  background: linear-gradient(180deg, #cbcbcb 0%, #fdfdfd 20%, #d8d8d8 50%, #888 90%, #555 100%);
  transform: rotate(3deg) translateY(1px);
}
.pizarra__chalk--red {
  right: 14%; width: 46px;
  background: linear-gradient(180deg, #d8666c 0%, #ffc0c4 20%, #df4c52 50%, #8a151b 90%, #4a0508 100%);
  transform: rotate(2deg);
  box-shadow:
    0 6px 8px rgba(90, 10, 14, .35),
    0 2px 3px rgba(0, 0, 0, .6),
    inset 0 -3px 4px rgba(90, 10, 14, .5),
    inset 0 2px 2px rgba(255, 255, 255, .3);
}
.pizarra__chalk--red::before {
  background: radial-gradient(closest-side, rgba(255, 155, 160, .5), transparent 100%);
}

/* Borrador realista: mango de madera texturizada y base gruesa de fieltro. */
.pizarra__eraser {
  position: absolute;
  right: 28%;
  bottom: clamp(8px, 1.2vw, 12px);
  width: 110px; height: 38px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg,
    #e4a873 0%, #c18146 10%, #8f5322 38%, #5a2e10 40%, /* madera */
    #1c1e20 40%, #2a2d30 45%, #111315 95%, #050607 100% /* fieltro */
  );
  box-shadow:
    0 8px 12px rgba(0, 0, 0, .45),
    0 2px 4px rgba(0, 0, 0, .7),
    inset 0 2px 3px rgba(255, 255, 255, .25), /* luz superior madera */
    inset 0 -1px 2px rgba(0, 0, 0, .8); /* sombra inferior fieltro */
  transform: rotate(-1deg);
}
/* Veta de la madera en la mitad superior del borrador */
.pizarra__eraser::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 40%;
  border-radius: 5px 5px 0 0;
  background:
    repeating-linear-gradient(7deg, transparent 0, rgba(0, 0, 0, .15) 1.5px, transparent 5px, rgba(255, 255, 255, .1) 8px),
    repeating-linear-gradient(-3deg, transparent 0, rgba(0, 0, 0, .08) 2px, transparent 10px);
  pointer-events: none;
}
/* Restos de polvo de tiza esparcidos por el fieltro */
.pizarra__eraser::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; bottom: 3px;
  height: 16px;
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(255, 255, 255, .15), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, .1), transparent 50%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 6px);
  pointer-events: none;
}

.pizarra__inner { position: relative; z-index: 2; }

/* ---- Cabecera escrita en tiza ---- */
.pizarra__head { text-align: center; max-width: 760px; margin: 0 auto clamp(50px, 7vw, 92px); }
.pizarra__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: .78rem;
  color: #ff7a7e;
  margin-bottom: 16px;
}
.pizarra__title {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #f4f6f1;
  /* Halo de tiza: difumina apenas los bordes del texto. */
  text-shadow: 0 0 1px rgba(255, 255, 255, .28), 0 2px 20px rgba(255, 255, 255, .07);
}
.pizarra__underline {
  display: block;
  width: min(320px, 78%);
  height: 16px;
  margin: 14px auto 0;
  color: #ff7a7e;
  opacity: .9;
}
/* El subrayado se dibuja solo cuando el título entra en pantalla. */
.pizarra__underline path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(255, 122, 126, .45));
  transition: stroke-dashoffset 1s var(--ease) .35s;
}
.pizarra__title.visible .pizarra__underline path { stroke-dashoffset: 0; }
.pizarra__intro {
  margin: 22px auto 0;
  max-width: 60ch;
  color: #b8c1bb;
  font-size: 1.06rem;
  line-height: 1.62;
}

/* ---- Recorrido con la línea de tiza ---- */
.pizarra__timeline {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  --rail-x: clamp(16px, 4.5vw, 30px);
}
.pizarra__rail {
  position: absolute;
  left: calc(var(--rail-x) - 15px);
  top: 0;
  width: 30px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pizarra__rail-bg { stroke: rgba(233, 236, 230, .2); stroke-width: 2.6; }
.pizarra__rail-draw {
  stroke: rgba(245, 247, 241, .97);
  stroke-width: 3.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

@keyframes pizarra-tip {
  0%   { transform: scale(.5); opacity: .7; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}

.pizarra__nodos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(48px, 7vw, 90px);
  counter-reset: pizn;
}
.pizarra__nodo {
  position: relative;
  padding-left: calc(var(--rail-x) + clamp(30px, 5vw, 54px));
  counter-increment: pizn;
}

/* Número de tiza sobre cada punto, como una lista numerada en la pizarra. */
.pizarra__nodo::before {
  content: counter(pizn, decimal-leading-zero);
  position: absolute;
  left: var(--rail-x);
  top: -19px;
  transform: translateX(-50%) rotate(-7deg) scale(.7);
  transform-origin: center bottom;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  color: rgba(244, 246, 241, .42);
  text-shadow: 0 0 6px rgba(255, 255, 255, .18);
  opacity: 0;
  transition: opacity .55s var(--ease) .1s, transform .55s var(--ease) .1s;
  pointer-events: none;
}
.pizarra__nodo.is-on::before {
  opacity: 1;
  transform: translateX(-50%) rotate(-7deg) scale(1);
}
.pizarra__nodo.is-accent::before { color: rgba(255, 122, 126, .85); text-shadow: 0 0 8px rgba(255, 122, 126, .4); }

/* Punto de tiza sobre la línea: apagado hasta que el proyecto se enciende. */
.pizarra__dot {
  position: absolute;
  left: var(--rail-x);
  top: 7px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  /* Relleno radial con borde difuminado: aspecto de punto de tiza, no de píxel. */
  background: radial-gradient(circle at 42% 38%, #fff 0%, #e9ece6 52%, rgba(233, 236, 230, .55) 100%);
  transform: translate(-50%, 0) scale(.7);
  opacity: .3;
  box-shadow: 0 0 0 4px rgba(233, 236, 230, .1), 0 0 14px 2px rgba(233, 236, 230, .3);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.pizarra__nodo.is-on .pizarra__dot { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pizarra__nodo.is-accent .pizarra__dot {
  background: radial-gradient(circle at 42% 38%, #fff 0%, #ff8f93 50%, #ff7a7e 100%);
  box-shadow: 0 0 0 4px rgba(255, 122, 126, .16), 0 0 16px 3px rgba(255, 122, 126, .5);
}
/* Anillo de tiza que late una vez al encenderse el hito destacado. */
.pizarra__nodo.is-accent.is-on .pizarra__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 122, 126, .5);
  animation: pizarra-tip 2.6s var(--ease) 1 both;
}

/* La ficha entra como dibujada a tiza cuando el proyecto se enciende. */
.pizarra__card {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.pizarra__nodo.is-on .pizarra__card { opacity: 1; transform: none; }
.pizarra__text { min-width: 0; max-width: 60ch; }

.pizarra__marca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 12px;
}
.pizarra__logo { display: inline-flex; }
/* Cualquier logo se convierte en tiza blanca, sea cual sea su color. */
.pizarra__logo img {
  max-height: 46px;
  width: auto;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .85;
}
.pizarra__inst-chalk {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: .01em;
  color: #f1f4ee;
}
.pizarra__inst {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: #cdd5cf;
}
.pizarra__anio {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #95a09a;
  border: 1px solid rgba(233, 236, 230, .22);
  padding: 4px 11px;
  border-radius: 999px;
}
.pizarra__nodo-title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.32rem, 2.6vw, 1.85rem);
  line-height: 1.13;
  letter-spacing: -.015em;
  color: #f4f6f1;
}
.pizarra__nodo.is-accent .pizarra__nodo-title { color: #fff; }
.pizarra__nodo.is-accent .pizarra__nodo-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 11px;
  border-radius: 3px;
  background: #ff7a7e;
  box-shadow: 0 0 10px rgba(255, 122, 126, .5);
}
.pizarra__rol {
  margin-top: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .95rem;
  color: #9fc6b8;
}
.pizarra__desc {
  margin-top: 12px;
  max-width: 54ch;
  color: #c1c9c3;
  font-size: 1.02rem;
  line-height: 1.62;
}
.pizarra__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: #e9ece6;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(233, 236, 230, .4);
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}
.pizarra__link svg { width: 16px; height: 16px; }
.pizarra__link:hover { color: #fff; border-color: #ff7a7e; gap: 12px; }

/* ---- Acciones: botón «Ampliar información» + enlace ---- */
.pizarra__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 22px;
}
.pizarra__ampliar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  color: #0f1c22;
  background: #f4f6f1;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .05);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.pizarra__ampliar svg { width: 17px; height: 17px; }
.pizarra__ampliar:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 16px 32px rgba(0, 0, 0, .5); }
.pizarra__ampliar:focus-visible { outline: 2px solid #ff7a7e; outline-offset: 3px; }
.pizarra__nodo.is-accent .pizarra__ampliar { background: #ff7a7e; color: #2a0d0e; box-shadow: 0 10px 26px rgba(255, 122, 126, .42); }
.pizarra__nodo.is-accent .pizarra__ampliar:hover { background: #ff9296; }

/* ---- Polaroids del proyecto, pegadas con washi tape a la pizarra ----
   Se despliegan como un abanico horizontal debajo del texto del proyecto:
   solapan un poco, se inclinan a un lado y a otro y escalonan su altura. */
.pizarra__fotos {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 14px 0;
  margin-top: clamp(24px, 3vw, 36px);
  padding: 14px 0 0 6px;
}
.pizarra__polaroid {
  position: relative;
  width: clamp(118px, 13vw, 164px);
  margin: 0 -8px;
  padding: 9px 9px 34px;
  background: #fbfaf3;
  border-radius: 2px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .46), 0 3px 6px rgba(0, 0, 0, .34);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pizarra__fotos .pizarra__polaroid:nth-child(1) { transform: rotate(-5deg);   z-index: 1; }
.pizarra__fotos .pizarra__polaroid:nth-child(2) { transform: rotate(3.5deg);  margin-top: 20px; z-index: 2; }
.pizarra__fotos .pizarra__polaroid:nth-child(3) { transform: rotate(-2.5deg); margin-top: 8px;  z-index: 1; }
.pizarra__fotos .pizarra__polaroid:nth-child(4) { transform: rotate(4.5deg);  margin-top: 24px; z-index: 2; }
.pizarra__fotos .pizarra__polaroid:nth-child(5) { transform: rotate(-3.5deg); margin-top: 12px; z-index: 1; }
/* Al pasar el ratón la polaroid se endereza, crece y sube al frente. */
.pizarra__fotos .pizarra__polaroid:hover {
  transform: rotate(0) scale(1.07) translateY(-8px);
  box-shadow: 0 28px 48px rgba(0, 0, 0, .55);
  z-index: 6;
}
.pizarra__photo {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #d9d6cb;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.pizarra__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pizarra__pie {
  position: absolute;
  left: 10px; right: 10px; bottom: 9px;
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: .8rem;
  line-height: 1.2;
  color: #3a3a34;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cintas: washi de colores + un celo transparente, rotando por foto. */
.pizarra__tape {
  position: absolute;
  z-index: 3;
  top: -12px;
  left: 50%;
  width: 62px;
  height: 26px;
  transform: translateX(-50%) rotate(-4deg);
  opacity: .9;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .28);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.pizarra__tape--mint  { background: repeating-linear-gradient(90deg, rgba(127, 209, 193, .88) 0 6px, rgba(156, 224, 209, .74) 6px 12px); }
.pizarra__tape--coral { background: repeating-linear-gradient(90deg, rgba(255, 122, 126, .88) 0 6px, rgba(255, 158, 161, .74) 6px 12px); }
.pizarra__tape--sky   { background: repeating-linear-gradient(90deg, rgba(133, 188, 230, .88) 0 6px, rgba(168, 210, 242, .74) 6px 12px); }
.pizarra__tape--sun   { background: repeating-linear-gradient(90deg, rgba(242, 193, 78, .9) 0 6px, rgba(248, 212, 128, .76) 6px 12px); }
.pizarra__tape--celo  {
  background: linear-gradient(120deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .42) 55%, rgba(255, 255, 255, .14));
  opacity: .5;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .16);
}

/* ---- Ventana de detalle: ficha del proyecto sobre papel ---- */
.pizarra-modal {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.pizarra-modal.show { opacity: 1; }
.pizarra-modal[hidden] { display: none; }
.pizarra-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 12, 14, .82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.pizarra-modal__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  transform: translateY(16px) scale(.985);
  transition: transform .3s var(--ease);
  outline: none;
}
.pizarra-modal.show .pizarra-modal__dialog { transform: none; }
.pizarra-modal__close {
  position: absolute;
  top: -14px; right: -8px;
  z-index: 4;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #fbfaf3;
  color: #0f1c22;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.pizarra-modal__close svg { width: 20px; height: 20px; }
.pizarra-modal__close:hover { transform: rotate(90deg); background: #fff; }
.pizarra-modal__close:focus-visible { outline: 2px solid #ff7a7e; outline-offset: 3px; }

.pizarra-ficha { position: relative; }
.pizarra-ficha__paper {
  position: relative;
  max-height: 86vh;
  overflow: auto;
  background: #fbf8ef;
  background-image: radial-gradient(120% 60% at 50% 0%, rgba(0, 0, 0, .04), transparent 60%);
  border-radius: 4px;
  padding: clamp(30px, 4vw, 54px) clamp(24px, 4vw, 56px) clamp(28px, 4vw, 48px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .04);
  color: #21251f;
}
.pizarra-ficha__tape {
  position: absolute;
  z-index: 3;
  top: -15px;
  width: 116px; height: 34px;
  opacity: .82;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .22);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.pizarra-ficha__tape--l { left: 9%;  transform: rotate(-5deg); background: repeating-linear-gradient(90deg, rgba(255, 122, 126, .8) 0 7px, rgba(255, 158, 161, .66) 7px 14px); }
.pizarra-ficha__tape--r { right: 9%; transform: rotate(4deg);  background: repeating-linear-gradient(90deg, rgba(133, 188, 230, .8) 0 7px, rgba(168, 210, 242, .66) 7px 14px); }

.pizarra-ficha__sup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: #5d6b62;
}
.pizarra-ficha__anio {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7a857c;
  border: 1px solid rgba(15, 28, 34, .18);
  padding: 4px 11px;
  border-radius: 999px;
}
.pizarra-ficha__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: #15201c;
}
.pizarra-ficha__titulo.is-accent::after {
  content: "";
  display: block;
  width: 70px; height: 5px;
  margin-top: 12px;
  border-radius: 3px;
  background: #c23339;
}
.pizarra-ficha__rol {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  color: var(--red);
}
.pizarra-ficha__body { margin-top: 22px; }
.pizarra-ficha__body p {
  margin: 0 0 1em;
  color: #3a4038;
  font-size: 1.05rem;
  line-height: 1.72;
}
.pizarra-ficha__body p:last-child { margin-bottom: 0; }
.pizarra__fotos--ficha {
  justify-content: flex-start;
  margin-top: 28px;
  padding-top: 18px;
}
.pizarra__fotos--ficha .pizarra__polaroid { width: clamp(120px, 22vw, 152px); }
.pizarra-ficha__cta { margin-top: 26px; }

/* ---- Versión adaptada a pantallas pequeñas ---- */
@media (max-width: 560px) {
  /* El marco se adelgaza para dejar más ancho al contenido. */
  .pizarra__board { padding-left: 18px; padding-right: 18px; border-width: 12px; }
  .pizarra__title { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .pizarra__desc { font-size: .98rem; }
  .pizarra__logo img { max-height: 38px; }
  .pizarra__fotos { padding-left: 0; }
  .pizarra__polaroid { width: clamp(108px, 38vw, 140px); }
  .pizarra__smudge--c { display: none; }
  .pizarra__actions { gap: 12px 16px; }
  .pizarra__ampliar { flex: 1 1 auto; justify-content: center; }
}

/* Sin animación: la línea aparece dibujada y todo se ve de inmediato. */
@media (prefers-reduced-motion: reduce) {
  .pizarra__card { opacity: 1 !important; transform: none !important; transition: none; }
  .pizarra__dot { opacity: 1; transform: translate(-50%, 0) scale(1); transition: none; }
  .pizarra__rail-draw { stroke-dashoffset: 0 !important; }
  .pizarra__nodo::before { opacity: 1; transform: translateX(-50%) rotate(-7deg) scale(1); transition: none; }
  .pizarra__nodo.is-accent.is-on .pizarra__dot::after { animation: none; }
  .pizarra__underline path { stroke-dashoffset: 0 !important; transition: none; }
  .pizarra__polaroid,
  .pizarra__ampliar,
  .pizarra-modal,
  .pizarra-modal__dialog,
  .pizarra-modal__close { transition: none; }
}

/* ============================================================
   chatIA — "Pregúntale a la IA quién soy"
   Panel de chat glass sobre fondo de tinta con aurora, rejilla,
   borde luminoso giratorio y orbe de IA animado. Las respuestas se
   escriben con efecto máquina y las credenciales brillan al salir.
   ============================================================ */
@property --chatia-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.chatia-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: clamp(72px, 9vw, 128px);
  background: radial-gradient(125% 120% at 82% -12%, #1c3038 0%, var(--ink) 47%, #070f15 100%);
  color: #fff;
}

.chatia__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.chatia__aurora {
  position: absolute; border-radius: 50%;
  filter: blur(72px); opacity: .55; mix-blend-mode: screen;
  will-change: transform;
}
.chatia__aurora--a { width: 48vw; height: 48vw; left: -12vw; top: -14vw;
  background: radial-gradient(circle, rgba(194,51,57,.72), transparent 64%);
  animation: chatia-float-a 17s ease-in-out infinite; }
.chatia__aurora--b { width: 42vw; height: 42vw; right: -10vw; top: 8vw;
  background: radial-gradient(circle, rgba(54,150,214,.55), transparent 64%);
  animation: chatia-float-b 21s ease-in-out infinite; }
.chatia__aurora--c { width: 38vw; height: 38vw; left: 28vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(126,84,206,.45), transparent 64%);
  animation: chatia-float-a 26s ease-in-out infinite reverse; }
.chatia__grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask: radial-gradient(circle at 50% 28%, #000, transparent 72%);
          mask: radial-gradient(circle at 50% 28%, #000, transparent 72%);
}

.chatia__inner { position: relative; z-index: 1; max-width: 960px; }

.chatia__head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.chatia__eyebrow {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; font-size: .8rem;
  color: var(--red); margin-bottom: 14px;
}
.chatia__title {
  font-family: var(--font-display); font-weight: 700; line-height: 1.04;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); color: #fff;
  letter-spacing: -0.02em; margin: 0 0 .45em;
}
.chatia__lead {
  color: rgba(255,255,255,.68); font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.6; max-width: 58ch; margin: 0 auto;
}

/* ---- el "dispositivo": panel de chat ---- */
.chatia__device {
  position: relative; max-width: 760px; margin: 0 auto;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 44px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
}
/* borde luminoso giratorio (sin recortar el panel) */
.chatia__device::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--chatia-a),
    rgba(194,51,57,0) 0deg, rgba(194,51,57,.9) 70deg,
    rgba(120,200,255,.75) 150deg, rgba(255,255,255,0) 230deg, rgba(194,51,57,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: chatia-spin-a 8s linear infinite;
  pointer-events: none; z-index: 0;
}
.chatia__chrome, .chatia__stage, .chatia__chips, .chatia__bar { position: relative; z-index: 1; }

.chatia__chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.chatia__traffic { display: inline-flex; gap: 7px; }
.chatia__traffic i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.chatia__traffic i:nth-child(1) { background: #ff5f57; }
.chatia__traffic i:nth-child(2) { background: #febc2e; }
.chatia__traffic i:nth-child(3) { background: #28c840; }
.chatia__id { display: flex; align-items: center; gap: 10px; margin-left: 6px; margin-right: auto; }
.chatia__id-tx { display: flex; flex-direction: column; line-height: 1.2; }
.chatia__id-tx strong { font-family: var(--font-display); font-size: .92rem; color: #fff; }
.chatia__status { font-size: .72rem; color: #43d17a; display: inline-flex; align-items: center; gap: 6px; }
.chatia__status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #43d17a;
  box-shadow: 0 0 8px #43d17a; animation: chatia-pulse 2s ease-in-out infinite;
}
.chatia__ia-pill {
  font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .14em;
  color: #fff; padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, #d8454b, var(--red));
  box-shadow: 0 6px 16px rgba(194,51,57,.4);
}

/* ---- zona de conversación ---- */
.chatia__stage { position: relative; }
.chatia__log {
  list-style: none; margin: 0; padding: 22px 20px 8px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 300px; max-height: 460px; overflow-y: auto; scroll-behavior: smooth;
}
.chatia__log::-webkit-scrollbar { width: 8px; }
.chatia__log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }

.chatia__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center; min-height: 256px; margin: auto;
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.chatia__empty.is-gone { opacity: 0; transform: scale(.94); pointer-events: none; }
.chatia__empty-tx { color: rgba(255,255,255,.62); max-width: 30ch; font-size: 1.04rem; line-height: 1.5; }

.chatia__msg {
  display: flex; gap: 12px; align-items: flex-end; max-width: 100%;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.chatia__msg.show { opacity: 1; transform: none; }
.chatia__msg--user { flex-direction: row-reverse; }

.chatia__avatar {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
}
.chatia__avatar--user {
  overflow: hidden; border: 2px solid rgba(194,51,57,.85);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.6);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.chatia__avatar--user img { width: 100%; height: 100%; object-fit: cover; }
.chatia__avatar--user svg { width: 22px; height: 22px; }
.chatia__avatar--ai { overflow: visible; }

.chatia__bubble {
  position: relative; padding: 14px 18px; border-radius: 20px;
  line-height: 1.58; font-size: 1rem; max-width: 76%;
}
.chatia__msg--ai .chatia__bubble {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.92); border-bottom-left-radius: 6px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.chatia__msg--user .chatia__bubble {
  background: linear-gradient(135deg, #d8454b, var(--red)); color: #fff;
  border-bottom-right-radius: 6px; font-weight: 500;
  box-shadow: 0 12px 28px rgba(194,51,57,.34);
}
.chatia__bubble p { margin: 0 0 .62em; }
.chatia__bubble p:last-child { margin-bottom: 0; }
.chatia__bubble strong { color: #fff; font-weight: 700; }
.chatia__text { white-space: pre-wrap; }
.chatia__text.is-typing::after {
  content: ""; display: inline-block; width: .55em; height: 1.05em; vertical-align: -3px;
  margin-left: 2px; background: rgba(255,255,255,.85); border-radius: 1px;
  animation: chatia-caret 1s steps(2, jump-none) infinite;
}

.chatia__think { display: inline-flex; gap: 6px; padding: 4px 0; }
.chatia__think i {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.65);
  animation: chatia-think 1.2s ease-in-out infinite;
}
.chatia__think i:nth-child(2) { animation-delay: .18s; }
.chatia__think i:nth-child(3) { animation-delay: .36s; }

/* credenciales con brillo */
.chatia__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.chatia__credential {
  position: relative; overflow: hidden; display: inline-flex; flex-direction: column;
  padding: 8px 14px; border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.18);
  opacity: 0; transform: translateY(8px) scale(.96);
  animation: chatia-badge-in .5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * .1s);
}
.chatia__credential strong { font-family: var(--font-display); font-size: .92rem; color: #fff; line-height: 1.2; }
.chatia__credential span { font-size: .72rem; color: rgba(255,255,255,.62); margin-top: 1px; }
.chatia__credential::after {
  content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
  animation: chatia-shine 4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .12s + .7s);
}

/* ---- chips de preguntas ---- */
.chatia__chips { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 20px 4px; }
.chatia__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86); font-family: var(--font-body); font-size: .9rem;
  transition: transform .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.chatia__chip:hover {
  transform: translateY(-2px); background: rgba(194,51,57,.16);
  border-color: rgba(194,51,57,.6); box-shadow: 0 8px 22px rgba(194,51,57,.25); color: #fff;
}
.chatia__chip-ic { display: inline-flex; color: var(--red); transition: color .25s var(--ease); }
.chatia__chip-ic svg { width: 17px; height: 17px; }
.chatia__chip:hover .chatia__chip-ic { color: #ff7b80; }
.chatia__chip.is-asked { opacity: .48; }
.chatia__chip.is-asked .chatia__chip-tx { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.4); }

/* ---- barra para escribir ---- */
.chatia__bar { display: flex; align-items: center; gap: 11px; padding: 14px 20px 20px; }
.chatia__input {
  flex: 1; min-width: 0; padding: 13px 19px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: #fff; font-family: var(--font-body); font-size: .98rem; outline: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.chatia__input::placeholder { color: rgba(255,255,255,.45); }
.chatia__input:focus {
  border-color: rgba(194,51,57,.7); background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 4px rgba(194,51,57,.18);
}
.chatia__send {
  width: 48px; height: 48px; flex: 0 0 auto; border: none; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #d8454b, var(--red));
  box-shadow: 0 10px 24px rgba(194,51,57,.4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.chatia__send:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 30px rgba(194,51,57,.5); }
.chatia__send svg { width: 21px; height: 21px; }

/* ---- el orbe de IA ---- */
.chatia__orb { position: relative; width: var(--s, 84px); height: var(--s, 84px); flex: 0 0 auto; display: inline-flex; }
.chatia__orb--mini { --s: 30px; }
.chatia__orb--msg { --s: 40px; }
.chatia__orb--hero { --s: 108px; }
.chatia__orb-halo {
  position: absolute; inset: -28%; border-radius: 50%;
  background: radial-gradient(circle, rgba(194,51,57,.55), transparent 70%);
  filter: blur(6px); animation: chatia-breathe 3.4s ease-in-out infinite;
}
.chatia__orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(194,51,57,.95), rgba(120,200,255,.85), rgba(194,51,57,0) 70%, rgba(194,51,57,.95));
  -webkit-mask: radial-gradient(closest-side, transparent 56%, #000 60%);
          mask: radial-gradient(closest-side, transparent 56%, #000 60%);
  animation: chatia-spin 4.5s linear infinite;
}
.chatia__orb-ring--b { inset: 15%; opacity: .8; animation-duration: 6.5s; animation-direction: reverse; }
.chatia__orb-core {
  position: absolute; inset: 33%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd2d4 32%, var(--red) 78%);
  box-shadow: 0 0 18px rgba(194,51,57,.7); animation: chatia-pulse 3s ease-in-out infinite;
}

@keyframes chatia-spin { to { transform: rotate(360deg); } }
@keyframes chatia-spin-a { to { --chatia-a: 360deg; } }
@keyframes chatia-breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes chatia-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .8; } }
@keyframes chatia-think { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes chatia-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes chatia-badge-in { to { opacity: 1; transform: none; } }
@keyframes chatia-shine { 0%, 55% { left: -65%; } 85%, 100% { left: 130%; } }
@keyframes chatia-float-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4vw, 3vw); } }
@keyframes chatia-float-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3vw, 4vw); } }

@media (max-width: 640px) {
  .chatia__device { border-radius: 24px; }
  .chatia__log { max-height: 64vh; min-height: 240px; padding: 16px 14px 6px; }
  .chatia__bubble { max-width: 84%; font-size: .96rem; }
  .chatia__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chatia__chips::-webkit-scrollbar { display: none; }
  .chatia__chip { flex: 0 0 auto; }
  .chatia__id-tx strong { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chatia__aurora, .chatia__grid, .chatia__device::before,
  .chatia__orb-ring, .chatia__orb-halo, .chatia__orb-core,
  .chatia__status::before, .chatia__think i,
  .chatia__credential, .chatia__credential::after { animation: none !important; }
  .chatia__credential { opacity: 1; transform: none; }
}

/* ============================================================
   Acreditación (lanyard) — Ponencias destacadas
   Escenario oscuro tipo backstage: la credencial blanca cuelga
   de un cordón de marca, se balancea y cambia de congreso.
   ============================================================ */
.lny-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -8%, #163742 0%, rgba(22, 55, 66, 0) 56%),
    linear-gradient(180deg, #0b161b 0%, #0f1c22 60%, #0c171c 100%);
  color: #fff;
  padding-top: clamp(66px, 9vw, 124px);
  padding-bottom: clamp(66px, 9vw, 124px);
}
.lny-section .section__inner { position: relative; z-index: 2; }

.lny-glow {
  position: absolute;
  left: 30%;
  top: 56%;
  width: min(820px, 96%);
  height: 760px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(130, 196, 214, .16), rgba(130, 196, 214, 0) 72%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Cabecera ---------- */
.lny-head { max-width: 760px; }
.lny-head__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #e2575c;
  margin-bottom: 14px;
}
.lny-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.02;
  font-size: clamp(2rem, 5vw, 3.4rem);
}
.lny-head__text {
  margin-top: 16px;
  color: #b7c3c7;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  max-width: 62ch;
}
/* ---------- Selector de congresos ---------- */
.lny-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(28px, 4vw, 44px) 0 clamp(20px, 3vw, 34px);
}
.lny-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px 10px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #e3eaec;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease),
              color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.lny-tab:hover { background: rgba(255, 255, 255, .11); transform: translateY(-1px); }
.lny-tab.is-active {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
}
.lny-tab__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cat, #9aa3a7);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .1), 0 0 10px -1px var(--cat, #9aa3a7);
  flex: 0 0 auto;
}

/* ---------- Escenario (lanyard + ficha) ---------- */
.lny-stage {
  display: grid;
  grid-template-columns: minmax(290px, .92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: start;
  margin-top: clamp(12px, 2vw, 22px);
}

/* ---------- El cordón ---------- */
.lny-lanyard-wrap { position: relative; display: flex; justify-content: center; }
.lny-lanyard { position: relative; width: min(344px, 86%); margin: 0 auto; padding-top: 108px; }

.lny-strap {
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 122px;
  transform-origin: 50% 100%;
  border-radius: 5px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .32), rgba(255, 255, 255, .22) 32%, rgba(0, 0, 0, .12) 66%, rgba(0, 0, 0, .34)),
    linear-gradient(180deg, #d23b41, #a8282e);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
.lny-strap b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font: 800 9px/1 var(--font-display);
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.lny-strap--l { transform: translateX(-50%) rotate(-27deg); }
.lny-strap--r { transform: translateX(-50%) rotate(27deg); }

.lny-buckle {
  position: absolute;
  top: 104px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(180deg, #eef1f2, #b6bdc0 58%, #878f93);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(0, 0, 0, .25), 0 5px 12px rgba(0, 0, 0, .4);
  z-index: 6;
}

.lny-swing {
  position: relative;
  transform-origin: 50% 0;
  will-change: transform;
}
/* Balanceo en reposo: solo como respaldo sin JS. Con JS la oscilación (y el
   impulso al cambiar de ponencia) la gobierna la física de péndulo. */
@media (prefers-reduced-motion: no-preference) {
  .lny-swing { animation: lnySway 6.5s ease-in-out infinite; }
}

.lny-clip {
  position: relative;
  z-index: 5;
  width: 18px;
  height: 30px;
  margin: 0 auto -7px;
  border-radius: 7px 7px 5px 5px;
  background: linear-gradient(180deg, #d4d9dc, #868d91);
  box-shadow: inset 0 1px 0 #fff, 0 3px 7px rgba(0, 0, 0, .35);
}

/* ---------- La credencial ---------- */
.lny-card {
  --cat: #9aa3a7;
  position: relative;
  width: 100%;
  padding-bottom: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f4f5 100%);
  color: var(--ink);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .8);
  overflow: hidden;
  transform: perspective(1100px) rotateX(calc(var(--lift, 0) * -5deg)) rotateY(calc(var(--tilt, 0) * 9deg));
  transition: transform .25s var(--ease);
}
.lny-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--cat);
  z-index: 4;
  transition: background .4s var(--ease);
}
.lny-card__hole {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 11px;
  border-radius: 999px;
  background: #0f1c22;
  opacity: .14;
  z-index: 7;
}
.lny-card__sheen {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(150px 130px at var(--mx, 32%) var(--my, 4%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
    linear-gradient(120deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .35) 49%, rgba(255, 255, 255, 0) 56%);
  mix-blend-mode: screen;
  opacity: .85;
}
.lny-card__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 28px 18px 12px;
  border-bottom: 1px dashed rgba(15, 28, 34, .14);
}
.lny-card__logo { width: 24px; height: 22px; flex: 0 0 auto; }
.lny-mark { display: inline-flex; align-items: center; justify-content: center; }
.lny-mark__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lny-card__logo .lny-mark { width: 100%; height: 100%; }
.lny-card__brandname { font: 800 .9rem var(--font-display); letter-spacing: -.015em; line-height: 1.1; }
.lny-card__role {
  margin-left: auto;
  font: 700 .6rem var(--font-display);
  letter-spacing: .2em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}
.lny-card__band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 13px 14px 0;
  padding: 10px 14px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 60%), var(--cat);
  color: #fff;
  font: 700 .82rem var(--font-display);
  letter-spacing: .015em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  box-shadow: 0 12px 22px -12px var(--cat);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), opacity .26s var(--ease), transform .26s var(--ease);
}
.lny-card__band-ic { display: inline-flex; }
.lny-card__band-ic svg { width: 18px; height: 18px; display: block; }
.lny-card__photo {
  position: relative;
  margin: 13px 14px 0;
  height: 152px;
  border-radius: 12px;
  overflow: hidden;
  background: #e7ebec;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(15, 28, 34, .07);
}
.lny-card__photo > img { width: 100%; height: 100%; object-fit: cover; }
.lny-card__photo .lny-mark { width: 56px; height: 56px; opacity: .5; }
.lny-card__title {
  margin: 15px 16px 0;
  font: 800 1.18rem/1.16 var(--font-display);
  letter-spacing: -.02em;
}
.lny-card__meta {
  margin: 13px 16px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.lny-card__meta dt {
  font: 700 .58rem var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lny-card__meta dd { margin-top: 3px; font: 500 .92rem var(--font-body); color: var(--ink); }
.lny-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 16px 0;
  padding-top: 13px;
  border-top: 1px dashed rgba(15, 28, 34, .14);
}
.lny-card__barcode {
  flex: 1;
  height: 32px;
  border-radius: 2px;
  opacity: .92;
  background: repeating-linear-gradient(90deg,
    #132127 0 2px, transparent 2px 4px, #132127 4px 5px,
    transparent 5px 8px, #132127 8px 11px, transparent 11px 13px);
}
.lny-card__id {
  font: 700 .66rem var(--font-display);
  letter-spacing: .06em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Cambio de ponencia: el contenido de la credencial se funde suavemente en
   lugar de saltar de golpe mientras la acreditación se balancea. */
.lny-card__photo,
.lny-card__title,
.lny-card__meta,
.lny-card__id { transition: opacity .26s var(--ease), transform .26s var(--ease); }
.lny-card.is-swapping .lny-card__band,
.lny-card.is-swapping .lny-card__photo,
.lny-card.is-swapping .lny-card__title,
.lny-card.is-swapping .lny-card__meta,
.lny-card.is-swapping .lny-card__id { opacity: 0; transform: translateY(8px); }

/* ---------- Ficha "por qué" + pila de fotos ---------- */
.lny-records { position: relative; }
.lny-record { display: grid; gap: clamp(20px, 3vw, 32px); }
.lny-record[hidden] { display: none; }
.lny-record.is-in { animation: lnyIn .5s var(--ease); }

.lny-pile { position: relative; }
.lny-deck {
  --spread: 1;
  position: relative;
  display: block;
  width: min(100%, 540px);
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}
.lny-deck--static { cursor: default; }
.lny-deck:not(.lny-deck--static):hover { --spread: 1.16; }
.lny-deck__card {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .45s var(--ease);
  will-change: transform;
}
.lny-deck__card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  border: clamp(7px, 1.5vw, 12px) solid #fff;
  box-shadow: 0 24px 52px rgba(0, 0, 0, .42);
}
.lny-deck__card.is-pos-0 { z-index: 5; transform: rotate(calc(var(--spread) * -2deg)); }
.lny-deck__card.is-pos-1 { z-index: 4; transform: rotate(calc(var(--spread) * 4deg)) translate(calc(var(--spread) * 6%), calc(var(--spread) * 3%)) scale(.97); }
.lny-deck__card.is-pos-2 { z-index: 3; transform: rotate(calc(var(--spread) * -5.5deg)) translate(calc(var(--spread) * -7%), calc(var(--spread) * 4%)) scale(.95); }
.lny-deck__card.is-pos-3 { z-index: 2; transform: rotate(calc(var(--spread) * 7deg)) translate(calc(var(--spread) * 4%), calc(var(--spread) * 7%)) scale(.93); }
.lny-deck__card.is-pos-4 { z-index: 1; transform: rotate(calc(var(--spread) * -8.5deg)) translate(calc(var(--spread) * -5%), calc(var(--spread) * 9%)) scale(.91); }
.lny-deck__card.is-leaving {
  transform: translate(120%, -12%) rotate(11deg) scale(.96) !important;
  opacity: 0;
  z-index: 6;
  transition: transform .36s ease-in, opacity .36s ease-in;
}
.lny-deck__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 7;
  background: rgba(15, 28, 34, .72);
  color: #fff;
  font: 700 .7rem var(--font-display);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.lny-deck__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .05);
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 14px;
}
.lny-deck__ph .lny-mark { width: 66px; height: 66px; opacity: .55; }
.lny-deck__caption {
  margin-top: 16px;
  color: #aab6ba;
  font-size: .94rem;
  font-style: italic;
  min-height: 1.2em;
}

.lny-why__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  font: 700 .74rem var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #eef3f4;
}
.lny-why__name { line-height: 1.34; }
.lny-why__star {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  color: var(--cat, #9aa3a7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  flex: 0 0 auto;
}
.lny-why__star svg { width: 17px; height: 17px; }
.lny-why__text {
  margin-top: 15px;
  color: #e9eff1;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.62;
}
.lny-why__host {
  margin-top: 13px;
  color: #9db0b5;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .96rem;
}
.lny-why__cta { margin-top: 20px; }
.lny-section .btn--pill { background: #fff; color: var(--ink); }
.lny-section .btn--pill:hover { background: var(--red); color: #fff; box-shadow: 0 10px 28px rgba(194, 51, 57, .45); }
.lny-section .link-arrow { color: #fff; }
.lny-section .link-arrow:hover { color: #e2575c; }

@keyframes lnySway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}
@keyframes lnyIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .lny-stage { grid-template-columns: 1fr; gap: clamp(34px, 6vw, 52px); }
  .lny-lanyard-wrap { order: -1; }
  .lny-lanyard { width: min(330px, 78%); }
  .lny-glow { left: 50%; top: 32%; }
}
@media (max-width: 560px) {
  .lny-card__title { font-size: 1.08rem; }
  .lny-card__meta { grid-template-columns: 1fr; gap: 8px; }
  .lny-rail { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lny-rail::-webkit-scrollbar { display: none; }
  .lny-tab { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lny-swing { animation: none; }
  .lny-card { transition: none; }
  .lny-record.is-in { animation: none; }
  .lny-deck__card { transition: none; }
}

/* ============================================================
   EL TALLER DEL INVENTOR — página de asistentes (blueprint)
   ============================================================ */
.taller {
  --bp-ink: #081820;
  --bp-ink-2: #0c2531;
  --bp-line: rgba(120, 205, 232, .42);
  --bp-line-soft: rgba(120, 205, 232, .20);
  --bp-line-strong: rgba(176, 232, 250, .92);
  --bp-text: #d6e8ef;
  --bp-dim: rgba(214, 232, 239, .62);
  --bp-accent: #c23339;
  --bp-amber: #ffce6a;
  --bp-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  position: relative;
  isolation: isolate;
  color: var(--bp-text);
  background:
    radial-gradient(120% 90% at 18% -10%, #11313f 0%, transparent 55%),
    radial-gradient(120% 120% at 100% 110%, #0a212c 0%, transparent 50%),
    linear-gradient(160deg, var(--bp-ink-2), var(--bp-ink));
  overflow: hidden;
  padding-top: clamp(56px, 8vw, 110px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
/* papel milimetrado de fondo */
.taller::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--bp-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-line-soft) 1px, transparent 1px),
    linear-gradient(var(--bp-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-line-soft) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  mask-image: radial-gradient(130% 100% at 50% 0%, #000 55%, transparent 100%);
  opacity: .5;
}
.taller__inner { position: relative; }

.taller__head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.taller__stamp {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--bp-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bp-line-strong);
  border: 1px solid var(--bp-line); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 20px;
}
.taller__stamp i { font-style: normal; opacity: .65; }
.taller__stamp b { font-weight: 700; }
.taller__eyebrow {
  font-family: var(--bp-mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--bp-accent); margin: 0 0 10px;
}
.taller__title { color: #fff; letter-spacing: -.01em; }
.taller__intro { color: var(--bp-dim); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; margin-top: 18px; max-width: 64ch; }

.taller__label {
  font-family: var(--bp-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bp-line-strong); margin: 0;
}

/* ---- cubierta: plano + panel de piezas ---- */
.taller__deck {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px); align-items: stretch;
}
@media (max-width: 880px) { .taller__deck { grid-template-columns: 1fr; } }

.taller__stage {
  position: relative; margin: 0;
  border: 1px solid var(--bp-line);
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--bp-line-soft) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--bp-line-soft) 23px 24px),
    #0a212c;
  padding: clamp(18px, 3vw, 34px);
  min-height: 460px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.taller__stage-label {
  position: absolute; top: 14px; left: 16px;
  font-family: var(--bp-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bp-dim);
}
.taller__crop { position: absolute; width: 16px; height: 16px; border: 2px solid var(--bp-line); }
.taller__crop--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.taller__crop--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.taller__crop--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.taller__crop--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.taller__cartouche {
  position: absolute; right: 12px; bottom: 12px;
  border: 1px solid var(--bp-line); border-radius: 8px;
  background: rgba(8, 24, 32, .72); backdrop-filter: blur(2px);
  padding: 8px 12px; text-align: right; line-height: 1.35;
  font-family: var(--bp-mono);
}
.taller__cartouche-brand { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--bp-accent); }
.taller__cartouche b { display: block; font-size: 13px; color: #fff; font-weight: 700; }
.taller__cartouche i { display: block; font-size: 10px; color: var(--bp-dim); font-style: normal; }

/* ---- el autómata SVG ---- */
.taller-bot { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.taller-bot line, .taller-bot path, .taller-bot rect, .taller-bot circle { vector-effect: non-scaling-stroke; }
.taller-bot__axis { stroke: var(--bp-line-soft); stroke-width: 1; stroke-dasharray: 2 6; }
.taller-bot__frame { fill: none; stroke: var(--bp-line); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.taller-bot__tread { stroke-dasharray: 3 6; opacity: .65; }
.taller-bot__hub { fill: var(--bp-line-strong); stroke: none; }
.taller-bot__ground { stroke: var(--bp-line-soft); stroke-dasharray: 2 7; }
.taller-bot__zone {
  fill: none; stroke: var(--bp-line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: .55; transition: opacity .4s var(--ease), stroke .4s var(--ease), filter .4s var(--ease);
}
.taller-bot__zone .taller-bot__fill { fill: transparent; transition: fill .4s var(--ease); }
.taller-bot__lead { stroke: var(--bp-line); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }
.taller-bot__no circle { fill: rgba(8, 24, 32, .9); stroke: var(--bp-line); stroke-width: 1.3; }
.taller-bot__no text { fill: var(--bp-line-strong); font-family: var(--bp-mono); font-size: 12px; font-weight: 700; text-anchor: middle; }
.taller-bot__zone--core { opacity: .72; }
.taller-bot__zone.is-lit {
  opacity: 1; stroke: var(--bp-line-strong);
  filter: drop-shadow(0 0 7px rgba(140, 220, 250, .55));
}
.taller-bot__zone.is-lit .taller-bot__fill { fill: rgba(194, 51, 57, .32); }
.taller-bot__zone.is-lit .taller-bot__no circle { stroke: var(--bp-accent); fill: rgba(194, 51, 57, .22); }
.taller-bot__zone.is-lit .taller-bot__no text { fill: #fff; }
.taller-bot__zone.is-lit .taller-bot__lead { opacity: 1; stroke: var(--bp-accent); }

/* ---- panel de piezas + ficha técnica ---- */
.taller__panel {
  border: 1px solid var(--bp-line); border-radius: 18px;
  background: rgba(8, 24, 32, .4);
  padding: clamp(20px, 2.6vw, 30px);
  display: flex; flex-direction: column;
}
.taller__panel-title { color: #fff; font-size: clamp(19px, 2vw, 24px); margin: 8px 0 18px; }
.taller__parts { display: flex; flex-direction: column; gap: 10px; }
.taller__part {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--bp-line-soft); border-radius: 12px;
  background: rgba(12, 37, 49, .5);
  padding: 13px 16px;
  color: var(--bp-text);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.taller__part:hover { border-color: var(--bp-line); transform: translateX(3px); }
.taller__part-no { font-family: var(--bp-mono); font-size: 12px; color: var(--bp-dim); }
.taller__part-icon { display: grid; place-items: center; width: 26px; height: 26px; color: var(--bp-line-strong); }
.taller__part-icon svg { width: 20px; height: 20px; }
.taller__part-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.taller__part-copy strong { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; }
.taller__part-copy em { font-style: normal; font-size: 13px; color: var(--bp-dim); }
.taller__part.active {
  border-color: var(--bp-accent);
  background: linear-gradient(90deg, rgba(194, 51, 57, .24), rgba(12, 37, 49, .5) 60%);
  box-shadow: inset 3px 0 0 var(--bp-accent);
}
.taller__part.active .taller__part-no { color: var(--bp-accent); }

.taller__spec {
  margin-top: 18px; padding: 18px 18px 20px;
  border: 1px dashed var(--bp-line); border-radius: 12px;
  background: rgba(8, 24, 32, .55);
}
.taller__spec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.taller__spec-tag {
  font-family: var(--bp-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #07151c; background: var(--bp-line-strong); border-radius: 4px; padding: 3px 8px; font-weight: 700;
}
.taller__spec h4 { font-size: clamp(18px, 2vw, 22px); color: #fff; margin: 4px 0 8px; }
.taller__spec > p { color: var(--bp-dim); line-height: 1.6; font-size: 15px; margin: 0; }
.taller__spec blockquote {
  margin: 14px 0 0; padding: 12px 14px;
  border-left: 2px solid var(--bp-accent);
  background: rgba(12, 37, 49, .6); border-radius: 0 8px 8px 0;
  font-family: var(--bp-mono); font-size: 13.5px; color: var(--bp-line-strong); line-height: 1.55;
}
.taller__spec blockquote[hidden] { display: none; }

/* ---- manual de montaje (builder) ---- */
.taller__manual {
  margin-top: clamp(20px, 3vw, 40px);
  border: 1px solid var(--bp-line); border-radius: 18px;
  background: rgba(8, 24, 32, .4);
  padding: clamp(22px, 3vw, 34px);
}
.taller__manual-head h3 { color: #fff; font-size: clamp(20px, 2.2vw, 27px); margin: 10px 0 6px; }
.taller__manual-head p { color: var(--bp-dim); max-width: 66ch; line-height: 1.6; margin: 0; }
.taller__circuits { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.taller__circuit {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--bp-line-soft); border-radius: 999px;
  background: rgba(12, 37, 49, .5); color: var(--bp-dim);
  padding: 9px 16px 9px 13px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  transition: all .25s var(--ease);
}
.taller__circuit-led {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(214, 232, 239, .25); box-shadow: 0 0 0 3px rgba(214, 232, 239, .06);
  transition: all .25s var(--ease);
}
.taller__circuit-no { font-family: var(--bp-mono); font-size: 11px; opacity: .7; }
.taller__circuit.active {
  color: #fff; border-color: var(--bp-line);
  background: rgba(12, 37, 49, .9);
}
.taller__circuit.active .taller__circuit-led {
  background: var(--bp-line-strong); box-shadow: 0 0 10px rgba(140, 220, 250, .85), 0 0 0 3px rgba(140, 220, 250, .14);
}
.taller__readout-wrap {
  position: relative; border: 1px solid var(--bp-line); border-radius: 12px;
  background: rgba(4, 14, 19, .75); padding: 26px 18px 18px;
}
.taller__readout-tag {
  position: absolute; top: 9px; left: 14px;
  font-family: var(--bp-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--bp-dim);
}
.taller__readout {
  display: block; font-family: var(--bp-mono); font-size: 14px; line-height: 1.7;
  color: #c5e7f2; white-space: pre-wrap; word-break: break-word;
}
.taller__copy {
  margin-top: 16px; cursor: pointer;
  border: 0; border-radius: 999px;
  background: var(--bp-accent); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 12px 26px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.taller__copy:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(194, 51, 57, .4); }
.taller__copy:disabled { opacity: .4; cursor: not-allowed; }

/* ---- mantenimiento (tips) ---- */
.taller__maint { margin-top: clamp(20px, 3vw, 40px); }
.taller__maint-head h3 { color: #fff; font-size: clamp(20px, 2.2vw, 27px); margin: 10px 0 0; }
.taller__maint-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 720px) { .taller__maint-grid { grid-template-columns: 1fr; } }
.taller__note {
  border: 1px solid var(--bp-line-soft); border-radius: 12px;
  background: rgba(8, 24, 32, .45); padding: 4px 18px;
  transition: border-color .3s var(--ease);
}
.taller__note[open] { border-color: var(--bp-line); }
.taller__note summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 14px 0; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 16px;
}
.taller__note summary::-webkit-details-marker { display: none; }
.taller__note-icon { display: grid; place-items: center; width: 22px; height: 22px; color: var(--bp-line-strong); flex: none; }
.taller__note-icon svg { width: 19px; height: 19px; }
.taller__note-title { flex: 1; }
.taller__note-plus { position: relative; width: 14px; height: 14px; flex: none; }
.taller__note-plus::before, .taller__note-plus::after {
  content: ""; position: absolute; background: var(--bp-accent); border-radius: 2px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.taller__note-plus::before { width: 14px; height: 2px; }
.taller__note-plus::after { width: 2px; height: 14px; transition: transform .3s var(--ease); }
.taller__note[open] .taller__note-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.taller__note p { color: var(--bp-dim); line-height: 1.65; font-size: 14.5px; margin: 0 0 16px; padding-left: 34px; }
.taller__summary {
  margin-top: 22px; padding: 18px 22px;
  border-left: 2px solid var(--bp-line); background: rgba(12, 37, 49, .45); border-radius: 0 12px 12px 0;
  color: var(--bp-text); line-height: 1.65; font-size: 15.5px;
}

/* ---- medidor ¿lo fabricamos? ---- */
.taller__gauge {
  margin-top: clamp(20px, 3vw, 40px);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(20px, 3vw, 40px); align-items: center;
  border: 1px solid var(--bp-line); border-radius: 18px;
  background: linear-gradient(120deg, rgba(12, 37, 49, .6), rgba(8, 24, 32, .35));
  padding: clamp(22px, 3vw, 38px);
}
@media (max-width: 820px) { .taller__gauge { grid-template-columns: 1fr; } }
.taller__gauge-copy h3 { color: #fff; font-size: clamp(20px, 2.2vw, 27px); margin: 10px 0 6px; }
.taller__gauge-copy > p { color: var(--bp-dim); line-height: 1.6; margin: 0 0 18px; max-width: 52ch; }
.taller__switches { display: flex; flex-direction: column; gap: 10px; }
.taller__switch {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  cursor: pointer; text-align: left;
  border: 1px solid var(--bp-line-soft); border-radius: 12px;
  background: rgba(8, 24, 32, .5); color: var(--bp-text);
  padding: 12px 16px; transition: border-color .25s var(--ease), background .25s var(--ease);
}
.taller__switch-knob {
  position: relative; width: 40px; height: 22px; border-radius: 999px;
  background: rgba(214, 232, 239, .18); border: 1px solid var(--bp-line-soft);
  transition: background .25s var(--ease);
}
.taller__switch-knob::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #cfe2ea; transition: transform .25s var(--ease), background .25s var(--ease);
}
.taller__switch-text { font-size: 15px; line-height: 1.4; }
.taller__switch-state { font-family: var(--bp-mono); font-size: 11px; color: var(--bp-dim); letter-spacing: .1em; }
.taller__switch.is-on { border-color: var(--bp-accent); background: rgba(194, 51, 57, .18); }
.taller__switch.is-on .taller__switch-knob { background: var(--bp-accent); border-color: var(--bp-accent); }
.taller__switch.is-on .taller__switch-knob::after { transform: translateX(18px); background: #fff; }
.taller__switch.is-on .taller__switch-state { color: var(--bp-accent); }

.taller__dial { text-align: center; }
.taller__dial-svg { width: 100%; max-width: 280px; height: auto; }
.taller__dial-track { fill: none; stroke: rgba(214, 232, 239, .18); stroke-width: 7; stroke-linecap: round; }
.taller__dial-fill {
  fill: none; stroke: var(--bp-accent); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s var(--ease), stroke .4s var(--ease);
}
.taller__dial-tick { stroke: var(--bp-dim); stroke-width: 2; stroke-linecap: round; }
.taller__dial-needle { stroke: var(--bp-line-strong); stroke-width: 3; stroke-linecap: round; transition: transform .55s cubic-bezier(.34, 1.4, .5, 1); transform-box: view-box; }
.taller__dial-hub { fill: #fff; stroke: var(--bp-accent); stroke-width: 2.5; }
.taller__dial-count { display: block; font-family: var(--bp-mono); font-size: 13px; letter-spacing: .12em; color: var(--bp-dim); margin: -6px 0 12px; }
.taller__verdict { color: var(--bp-text); line-height: 1.6; font-size: 15px; min-height: 3em; margin: 0; transition: color .3s var(--ease); }
.taller__gauge.is-low .taller__dial-fill { stroke: var(--bp-accent); }
.taller__gauge.is-low .taller__dial-needle { stroke: var(--bp-accent); }
.taller__gauge.is-low .taller__dial-hub { stroke: var(--bp-accent); }
.taller__gauge.is-mid .taller__dial-fill { stroke: var(--bp-amber); }
.taller__gauge.is-mid .taller__dial-needle { stroke: var(--bp-amber); }
.taller__gauge.is-mid .taller__dial-hub { stroke: var(--bp-amber); }
.taller__gauge.is-mid .taller__verdict { color: #fff; }
.taller__gauge.is-high .taller__dial-fill { stroke: #5fd39a; }
.taller__gauge.is-high .taller__dial-needle { stroke: #5fd39a; }
.taller__gauge.is-high .taller__dial-hub { stroke: #5fd39a; }
.taller__gauge.is-high .taller__verdict { color: #fff; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .taller-bot__zone, .taller__dial-needle, .taller__dial-fill, .taller__part { transition: none; }
}

/* ============================================================
   La línea del aprendizaje (modelo MAPA como línea de metro)
   Una sola línea roja con cuatro paradas (M-A-P-A). Elegir una
   parada ilumina la línea hasta ella y abre su "andén": cartel
   de estación, ejemplo de aula y panel de salidas con prompts.
   ============================================================ */
.mapa-linea { overflow: hidden; }
.mapa-linea__head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.mapa-linea__head .section__title { margin-bottom: 16px; }
.mapa-linea__intro { color: var(--ink-soft); font-size: 1.12rem; line-height: 1.6; }
/* logo de marca que encabeza la sección */
.mapa-linea__logo--head { display: inline-block; margin: 0 auto 26px; }
.mapa-linea__logo--head svg { display: block; height: clamp(108px, 11vw, 140px); width: auto; margin: 0 auto; }

/* ----- plano: la tarjeta tipo mapa de transporte ----- */
.mapa-linea__diagram {
  position: relative;
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: var(--radius-lg);
  padding: 36px 40px 30px;
  margin-bottom: 30px;
  box-shadow: var(--shadow);
  background:
    radial-gradient(circle, rgba(15, 28, 34, .055) 1.3px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #fbfbfc, #f2f3f5);
}

.mapa-linea__legend {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 34px;
}
.mapa-linea__line-name {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: .76rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  background: var(--white); border: 1px solid rgba(15, 28, 34, .1);
  padding: 7px 15px; border-radius: 999px;
}
.mapa-linea__line-name::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 4px rgba(194, 51, 57, .16);
}
.mapa-linea__direction {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-weight: 600; font-size: .76rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
}
.mapa-linea__arrow { position: relative; width: 28px; height: 2px; background: currentColor; }
.mapa-linea__arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* ----- la vía y las paradas ----- */
.mapa-linea__route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  align-items: start;
  --pin: 58px;
  --pad-top: 42px;
  --axis: calc(var(--pad-top) + var(--pin) / 2);
  padding-top: var(--pad-top);
}
.mapa-linea__track {
  position: absolute;
  top: var(--axis);
  left: calc(50% / var(--n));
  right: calc(50% / var(--n));
  height: 8px;
  transform: translateY(-50%);
  background: rgba(194, 51, 57, .16);
  border-radius: 999px;
}
.mapa-linea__track-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--line-progress, 0) * 100%);
  background: linear-gradient(90deg, #c23339, #e2545a, #c23339);
  background-size: 220% 100%;
  border-radius: 999px;
  transition: width .65s var(--ease);
  animation: mapaLineaSheen 4.5s linear infinite;
}
@keyframes mapaLineaSheen { to { background-position: -220% 0; } }
.mapa-linea__track-glow {
  position: absolute; top: 50%; left: calc(var(--line-progress, 0) * 100%);
  width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--red);
  box-shadow: 0 0 0 7px rgba(194, 51, 57, .14);
  transition: left .6s var(--ease);
}

.mapa-linea__station {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 6px;
  background: none; border: none; cursor: pointer;
  font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mapa-linea__pin {
  position: relative;
  width: var(--pin); height: var(--pin); border-radius: 50%;
  background: var(--white); border: 4px solid rgba(194, 51, 57, .3);
  display: grid; place-items: center;
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              background .3s var(--ease), box-shadow .3s var(--ease);
}
.mapa-linea__pin-ring {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--red); opacity: 0; pointer-events: none;
}
.mapa-linea__pin-letter {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  line-height: 1; color: var(--ink); transition: color .3s var(--ease);
}
.mapa-linea__station:hover .mapa-linea__pin { border-color: var(--red); transform: translateY(-3px); }
.mapa-linea__station.is-active .mapa-linea__pin {
  background: linear-gradient(150deg, #d23b41 0%, #9e2329 75%);
  border-color: var(--white);
  box-shadow: 0 0 0 5px rgba(194, 51, 57, .2), var(--shadow-hover);
  transform: translateY(-3px) scale(1.06);
}
.mapa-linea__station.is-active .mapa-linea__pin-letter { color: var(--white); }
.mapa-linea__station.is-active .mapa-linea__pin-ring { animation: mapaLineaPulse 2.1s var(--ease) infinite; }
@keyframes mapaLineaPulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { opacity: 0; }
}

.mapa-linea__here {
  position: absolute; top: -32px; left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); background: var(--red);
  padding: 4px 10px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mapa-linea__here::after {
  content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--red);
}
.mapa-linea__station.is-active .mapa-linea__here { opacity: 1; transform: translateX(-50%) translateY(0); }

.mapa-linea__stop { display: grid; gap: 3px; text-align: center; max-width: 19ch; }
.mapa-linea__stop-icon { width: 22px; height: 22px; margin: 0 auto; color: var(--ink-soft); transition: color .3s var(--ease), transform .3s var(--ease); }
.mapa-linea__stop-icon svg { width: 100%; height: 100%; }
.mapa-linea__station.is-active .mapa-linea__stop-icon { color: var(--red); }
.mapa-linea__stop-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.mapa-linea__stop-claim { font-size: .78rem; color: var(--ink-soft); line-height: 1.35; }

/* ----- el andén de la parada activa ----- */
.mapa-linea__panels { position: relative; }
.mapa-linea__panel {
  /* scroll-margin para que, al llevar el andén a la vista al pulsar una parada,
     no quede tapado por la barra de navegación fija (60px). */
  scroll-margin-top: 80px;
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
}
.mapa-linea__panel.is-active { animation: mapaFade .45s var(--ease); }

.mapa-linea__sign {
  position: relative;
  display: flex; align-items: center; gap: 20px;
  padding: 26px 32px;
  background: linear-gradient(150deg, #1a2a33 0%, var(--ink) 75%);
  color: var(--white);
}
.mapa-linea__sign::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); }
.mapa-linea__sign-no {
  position: absolute; top: 16px; right: 26px;
  font-family: var(--font-display); font-weight: 700; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.mapa-linea__sign-no i { font-style: normal; opacity: .5; margin: 0 3px; }
.mapa-linea__sign-plate { display: flex; align-items: center; gap: 18px; }
.mapa-linea__sign-letter {
  flex: none; width: 64px; height: 64px; border-radius: 18px;
  background: var(--red); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1;
  display: grid; place-items: center;
}
.mapa-linea__sign-icon { flex: none; width: 30px; height: 30px; color: rgba(255, 255, 255, .9); }
.mapa-linea__sign-icon svg { width: 100%; height: 100%; }
.mapa-linea__sign-text { display: grid; gap: 4px; }
.mapa-linea__sign-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.05; }
.mapa-linea__sign-claim { font-size: .92rem; color: rgba(255, 255, 255, .72); }

.mapa-linea__panel-body { padding: 32px; display: grid; gap: 24px; }
.mapa-linea__desc { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65; max-width: 70ch; }

/* Bloque "qué significa" dentro del panel de la parada (definición, tono neutro). */
.mapa-linea__meaning {
  border-radius: 0 16px 16px 0;
  padding: 18px 22px;
  background: var(--gray-bg); border-left: 4px solid var(--ink);
}
.mapa-linea__block-tag {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
}
.mapa-linea__meaning p { color: var(--ink); font-size: .98rem; line-height: 1.55; }

/* ----- panel de salidas (teleindicador con los prompts) ----- */
.mapa-linea__board {
  background: linear-gradient(160deg, #16242b, #0b1419);
  border-radius: 22px;
  padding: 22px;
  color: var(--white);
}
.mapa-linea__board-head {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 4px 16px;
  border-bottom: 1px dashed rgba(255, 255, 255, .14);
  margin-bottom: 14px;
}
.mapa-linea__board-title { font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: .18em; text-transform: uppercase; }
.mapa-linea__board-sub { margin-left: auto; font-family: var(--font-display); font-size: .76rem; letter-spacing: .03em; color: rgba(255, 255, 255, .5); }
.mapa-linea__departures { display: grid; gap: 8px; }
.mapa-linea__departure {
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
  transition: background .2s, border-color .2s;
}
.mapa-linea__departure[open] { background: rgba(255, 255, 255, .07); border-color: rgba(194, 51, 57, .5); }
.mapa-linea__departure summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
}
.mapa-linea__departure summary::-webkit-details-marker { display: none; }
.mapa-linea__dep-no {
  flex: none; font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  color: #ff6b71; letter-spacing: .05em; font-variant-numeric: tabular-nums;
}
.mapa-linea__dep-heads { flex: 1; min-width: 0; display: grid; gap: 3px; }
.mapa-linea__dep-label { font-family: var(--font-display); font-weight: 600; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.mapa-linea__dep-title { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--white); }
.mapa-linea__dep-go {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
  transition: color .2s;
}
.mapa-linea__dep-go i { font-style: normal; font-size: 1.15rem; transition: transform .25s var(--ease); }
.mapa-linea__departure[open] .mapa-linea__dep-go { color: #ff6b71; }
.mapa-linea__departure[open] .mapa-linea__dep-go i { transform: rotate(90deg); }
.mapa-linea__dep-body { padding: 0 18px 18px; display: grid; gap: 14px; }
.mapa-linea__dep-text {
  font-style: italic; color: rgba(255, 255, 255, .9);
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px; padding: 16px; line-height: 1.6; white-space: pre-line;
}
.mapa-linea__copy {
  justify-self: start;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  color: var(--ink); background: var(--white); border: none; border-radius: 999px;
  padding: 9px 20px; cursor: pointer; transition: background .2s, color .2s, transform .2s;
}
.mapa-linea__copy:hover { background: var(--red); color: var(--white); transform: translateY(-1px); }

.mapa-linea__cta { margin-top: 30px; text-align: center; }

/* ----- efectos de entrada: la vía se "dibuja" y las paradas aparecen ----- */
/* Tiempos cortos: las paradas entran casi enseguida para que nadie tenga que
   esperar a que la línea termine de dibujarse antes de poder interactuar. */
.mapa-linea__track { transform-origin: left center; transition: transform .65s var(--ease) .05s; }
.mapa-linea__diagram.reveal:not(.visible) .mapa-linea__track { transform: translateY(-50%) scaleX(0); }
.mapa-linea__station { transition: opacity .38s var(--ease), transform .38s var(--ease); transition-delay: calc(var(--i, 0) * .07s + .1s); }
.mapa-linea__diagram.reveal:not(.visible) .mapa-linea__station { opacity: 0; transform: translateY(20px) scale(.9); }
.mapa-linea__diagram.reveal:not(.visible) .mapa-linea__here { opacity: 0; }

/* posición actual: un halo que late suavemente sobre la línea */
.mapa-linea__track-glow { animation: mapaLineaBeacon 2.1s var(--ease) infinite; }
@keyframes mapaLineaBeacon {
  0%, 100% { box-shadow: 0 0 0 6px rgba(194, 51, 57, .12); }
  50% { box-shadow: 0 0 0 10px rgba(194, 51, 57, .06); }
}

/* pulido de hover */
.mapa-linea__station:hover .mapa-linea__stop-icon { color: var(--red); transform: scale(1.12); }
.mapa-linea__station:hover .mapa-linea__stop-name { color: var(--red); }
.mapa-linea__departure summary:hover { background: rgba(255, 255, 255, .03); }
.mapa-linea__departure:hover { border-color: rgba(255, 255, 255, .16); }

/* ----- móvil: la línea se pone en vertical (como un plano de metro) ----- */
@media (max-width: 760px) {
  .mapa-linea__diagram { padding: 24px 18px 22px; }
  .mapa-linea__legend { margin-bottom: 18px; }
  .mapa-linea__route {
    grid-template-columns: 1fr;
    --pin: 50px;
    --pad-top: 6px;
    padding-top: 6px;
  }
  .mapa-linea__track, .mapa-linea__here { display: none; }
  .mapa-linea__station {
    flex-direction: row; align-items: center; gap: 16px;
    padding: 8px 0; min-height: 70px; text-align: left;
  }
  .mapa-linea__station::before {
    content: ""; position: absolute; z-index: 0;
    top: 0; bottom: 0; left: calc(var(--pin) / 2);
    width: 8px; transform: translateX(-50%);
    background: rgba(194, 51, 57, .16);
  }
  .mapa-linea__station:first-child::before { top: 50%; }
  .mapa-linea__station:last-child::before { bottom: 50%; }
  .mapa-linea__station.is-done::before { background: var(--red); }
  .mapa-linea__station.is-active:not(:first-child)::before {
    background: linear-gradient(180deg, var(--red) 50%, rgba(194, 51, 57, .16) 50%);
  }
  .mapa-linea__pin { z-index: 1; }
  .mapa-linea__stop { text-align: left; max-width: none; }
  .mapa-linea__stop-icon { margin: 0; }

  .mapa-linea__sign { flex-wrap: wrap; padding: 22px 22px 24px; gap: 16px; }
  .mapa-linea__sign-no { position: static; order: -1; flex-basis: 100%; }
  .mapa-linea__sign-letter { width: 54px; height: 54px; font-size: 1.8rem; border-radius: 15px; }
  .mapa-linea__panel-body { padding: 22px 18px; gap: 20px; }
  .mapa-linea__board { padding: 18px 16px; }
  .mapa-linea__departure summary { padding: 12px 14px; gap: 12px; }
  .mapa-linea__board-sub { flex-basis: 100%; margin: 4px 0 0; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .mapa-linea__track-fill, .mapa-linea__track-glow, .mapa-linea__track,
  .mapa-linea__station, .mapa-linea__stop-icon, .mapa-linea__pin,
  .mapa-linea__here, .mapa-linea__panel.is-active { transition: none; animation: none; }
  .mapa-linea__station.is-active .mapa-linea__pin-ring { animation: none; }
  .mapa-linea__diagram.reveal:not(.visible) .mapa-linea__track { transform: translateY(-50%); }
  .mapa-linea__diagram.reveal:not(.visible) .mapa-linea__station { opacity: 1; transform: none; }
}

/* ============================================================
   La mesa del cartógrafo (mapaMesa) · el modelo MAPA como una
   carta de expedición: papel crema, tinta, curvas de nivel y el
   rojo profes.tv. La carta llega plegada sobre una mesa oscura;
   al desplegarla aparecen la leyenda (que personaliza los
   prompts), los cuatro enclaves con sus sellos, la brújula y la
   terra incognita del destino final.
   ============================================================ */
.mapa-mesa {
  --mm-papel: #f3ead4;
  --mm-papel-2: #e9dcba;
  --mm-papel-borde: #d8c69a;
  --mm-carta: #fbf6e8;
  --mm-tinta: #35424a;
  --mm-tinta-suave: rgba(53, 66, 74, .62);
  --mm-linea: rgba(53, 66, 74, .16);
  --mm-texto: #3a464e;
  --mm-raya-fina: rgba(53, 66, 74, .07);
  --mm-raya: rgba(53, 66, 74, .13);
  --mm-borde-suave: rgba(53, 66, 74, .26);
  --mm-borde-media: rgba(53, 66, 74, .36);
  --mm-borde: rgba(53, 66, 74, .5);
  --mm-ghost: rgba(53, 66, 74, .34);
  --mm-velo: rgba(251, 246, 232, .8);
  --mm-velo-denso: rgba(251, 246, 232, .92);
  --mm-bolsillo: rgba(233, 220, 186, .38);
  --mm-niebla: rgba(233, 220, 186, .85);
  --mm-ficha-bg: #fffdf6;
  --mm-polaroid: #ffffff;
  --mm-rojo: #c23339;
  --mm-rojo-osc: #8f2227;
  --mm-mesa: #16242d;
  --mm-mesa-2: #0d161d;
  --mm-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  overflow: hidden;
}

.mapa-mesa__head { max-width: 780px; margin: 0 auto 40px; text-align: center; }
.mapa-mesa__eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--mm-rojo);
  margin-bottom: 14px;
}
.mapa-mesa__head .section__title { margin-bottom: 16px; }
.mapa-mesa__intro { color: var(--ink-soft); font-size: 1.12rem; line-height: 1.6; }

/* ---------- la mesa ---------- */
.mapa-mesa__mesa {
  position: relative;
  border-radius: var(--radius);
  padding: clamp(18px, 3.6vw, 46px);
  background:
    radial-gradient(120% 130% at 50% -10%, rgba(255, 255, 255, .07), transparent 55%),
    linear-gradient(160deg, var(--mm-mesa), var(--mm-mesa-2));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.mapa-mesa__mesa::before {
  /* veta sutil de la mesa */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(94deg, transparent 0 26px, rgba(255, 255, 255, .022) 26px 27px);
  pointer-events: none;
}

/* ---------- la carta plegada ---------- */
.mapa-mesa__plegado {
  position: relative;
  display: grid;
  place-items: center;
  gap: 22px;
  padding: clamp(28px, 5vw, 64px) 0;
}
.mapa-mesa__plegado-papel {
  position: relative;
  width: min(440px, 82%);
  aspect-ratio: 4 / 2.9;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--mm-papel), var(--mm-papel-2));
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .4);
  transform: rotate(-2deg);
}
.mapa-mesa__pliegue {
  position: absolute;
  width: 50%;
  height: 50%;
  pointer-events: none;
}
.mapa-mesa__pliegue:nth-child(1) { left: 0; top: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 60%); box-shadow: inset -1px -1px 0 rgba(120, 95, 45, .28); }
.mapa-mesa__pliegue:nth-child(2) { right: 0; top: 0; background: linear-gradient(225deg, rgba(120, 95, 45, .1), transparent 55%); box-shadow: inset 1px -1px 0 rgba(120, 95, 45, .2); }
.mapa-mesa__pliegue:nth-child(3) { left: 0; bottom: 0; background: linear-gradient(45deg, rgba(120, 95, 45, .12), transparent 55%); box-shadow: inset -1px 1px 0 rgba(120, 95, 45, .2); }
.mapa-mesa__pliegue:nth-child(4) { right: 0; bottom: 0; background: linear-gradient(315deg, rgba(255, 255, 255, .16), transparent 60%); box-shadow: inset 1px 1px 0 rgba(120, 95, 45, .26); }
.mapa-mesa__plegado-cara {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
}
.mapa-mesa__plegado-cara b {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-tinta);
  max-width: 300px;
}
.mapa-mesa__plegado-cara i {
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: .84rem;
  color: var(--mm-tinta-suave);
  max-width: 260px;
}
.mapa-mesa__cordel {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 82%;
  height: 0;
  border-top: 2.5px solid rgba(143, 34, 39, .8);
  transform: rotate(-2.4deg);
}
.mapa-mesa__cordel::after {
  content: "";
  position: absolute;
  left: 24%;
  top: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mm-rojo-osc);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.mapa-mesa__desplegar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 15px 30px;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mm-rojo);
  box-shadow: 0 14px 34px rgba(194, 51, 57, .42);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.mapa-mesa__desplegar:hover { transform: translateY(-2px); background: #d13e44; box-shadow: 0 18px 40px rgba(194, 51, 57, .5); }
.mapa-mesa__desplegar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* el papel se abre en 3D: se alza sobre la mesa, se despliega en dos
   tiempos con un brillo de pliegue y da paso a la carta. UNA sola vez. */
.mapa-mesa__plegado { perspective: 1100px; }
.mapa-mesa__plegado-papel::after {
  /* el brillo del pliegue central, solo durante la apertura */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%);
  opacity: 0;
  pointer-events: none;
}
.mapa-mesa__plegado.is-opening .mapa-mesa__plegado-papel {
  animation: mm-desplegar3d .78s cubic-bezier(.4, .05, .2, 1) forwards;
}
.mapa-mesa__plegado.is-opening .mapa-mesa__plegado-papel::after {
  animation: mm-desplegar-brillo .78s var(--ease) forwards;
}
.mapa-mesa__plegado.is-opening .mapa-mesa__desplegar { opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
@keyframes mm-desplegar3d {
  0%   { transform: rotate(-2deg) rotateX(0) scale(1); }
  32%  { transform: rotate(-1deg) rotateX(42deg) scale(1.06, .68); }
  60%  { transform: rotate(0) rotateX(12deg) scale(1.3, 1.04); opacity: 1; }
  100% { transform: rotateX(0) scale(1.82, 1.6); opacity: 0; }
}
@keyframes mm-desplegar-brillo {
  0%, 15% { opacity: 0; }
  45% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* ---------- la carta desplegada ---------- */
.mapa-mesa__map {
  position: relative;
  aspect-ratio: 1000 / 580;
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(255, 252, 240, .85), transparent 58%),
    linear-gradient(90deg, transparent calc(25% - 1px), rgba(110, 88, 40, .07) 25%, transparent calc(25% + 1px)),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(110, 88, 40, .09) 50%, transparent calc(50% + 1px)),
    linear-gradient(90deg, transparent calc(75% - 1px), rgba(110, 88, 40, .07) 75%, transparent calc(75% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(110, 88, 40, .07) 50%, transparent calc(50% + 1px)),
    linear-gradient(180deg, var(--mm-papel), var(--mm-papel-2));
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .5),
    inset 0 0 70px rgba(96, 74, 32, .16),
    inset 0 0 0 1px rgba(110, 88, 40, .25);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.mapa-mesa__map.is-open { opacity: 1; transform: scale(1); }
.mapa-mesa__map[hidden] { display: none !important; }
.mapa-mesa__map.is-open.is-focus {
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform: scale(1.018);
}

/* sin animaciones al restaurar una expedición recordada */
.mapa-mesa__map.mm-sin-anim,
.mapa-mesa__map.mm-sin-anim *,
.mapa-mesa__map.mm-sin-anim *::before,
.mapa-mesa__map.mm-sin-anim *::after { transition: none !important; animation: none !important; }

.mapa-mesa__papel-arte,
.mapa-mesa__ruta-arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mapa-mesa__reticula line { stroke: var(--mm-raya-fina); stroke-width: 1; }
.mapa-mesa__curvas path { fill: none; stroke: var(--mm-raya); stroke-width: 1.4; }
.mapa-mesa__coords text {
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: 13px;
  fill: var(--mm-borde);
}

/* marco de carta antigua: doble filete, esquinas caligráficas en rojo y
   líneas de rumbo que salen de la brújula */
.mapa-mesa__marco rect { fill: none; stroke: var(--mm-borde-media); }
.mapa-mesa__marco rect:first-child { stroke-width: 1.5; }
.mapa-mesa__marco rect:last-child { stroke-width: .7; }
.mapa-mesa__esquinas path {
  fill: none;
  stroke: rgba(194, 51, 57, .55);
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: stroke .8s var(--ease);
}
.mapa-mesa__map.is-complete .mapa-mesa__esquinas path { stroke: var(--mm-rojo); }
.mapa-mesa__rumbos line { stroke: var(--mm-tinta); opacity: .05; stroke-width: 1; }

/* los territorios a plumilla: faro, puente, delta y campamento. Al sellar
   su parada, la viñeta cobra vida y su acento se enciende en rojo. */
.mapa-mesa__vineta { opacity: .52; transition: opacity .7s var(--ease); }
.mapa-mesa__vineta.is-viva { opacity: .88; }
.mapa-mesa__vineta path {
  fill: none;
  stroke: var(--mm-tinta);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mapa-mesa__vineta .v-punteada { stroke-dasharray: 3 5; stroke-width: 1.6; }
.mapa-mesa__vineta .v-haz { stroke-dasharray: 5 4; }
.mapa-mesa__vineta .v-acento {
  stroke: var(--mm-ghost);
  transition: stroke .7s var(--ease), fill .7s var(--ease);
}
.mapa-mesa__vineta .v-acento-relleno { fill: var(--mm-ghost); stroke-width: 1.6; }
.mapa-mesa__vineta.is-viva .v-acento { stroke: var(--mm-rojo); }
.mapa-mesa__vineta.is-viva .v-acento-relleno { fill: var(--mm-rojo); stroke: var(--mm-rojo); }

/* el monte del destino, con su bandera roja en la cima */
.mapa-mesa__monte { width: 48px; height: auto; }
.mapa-mesa__monte path { fill: none; stroke: var(--mm-tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mapa-mesa__monte .v-acento { stroke: var(--mm-rojo); }
.mapa-mesa__monte .v-acento-relleno { fill: var(--mm-rojo); stroke-width: 1.4; }

/* la ruta: un trazo fantasma a lápiz y la tinta roja que lo va cubriendo */
.mapa-mesa__ghost {
  fill: none;
  stroke: var(--mm-ghost);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.5s var(--ease) .35s;
}
.mapa-mesa__map.is-open .mapa-mesa__ghost { stroke-dashoffset: 0; }
.mapa-mesa__seg {
  fill: none;
  stroke: var(--mm-rojo);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 2px 5px rgba(194, 51, 57, .3));
  transition: stroke-dashoffset .95s var(--ease) .1s;
}
.mapa-mesa__seg.is-drawn { stroke-dashoffset: 0; }

/* cartela con el rondel MAPA */
.mapa-mesa__roundel { width: 44px; height: 44px; }
.mapa-mesa__roundel-aro { fill: none; stroke: var(--mm-rojo); stroke-width: 7; }
.mapa-mesa__roundel-barra { fill: var(--mm-tinta); }
.mapa-mesa__roundel text {
  fill: #f6efdd;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.mapa-mesa__cartela {
  position: absolute;
  left: 3%;
  top: 5.5%;
  display: grid;
  justify-items: start;
  gap: 8px;
  max-width: 240px;
  padding: 14px 16px;
  border: 1.5px solid var(--mm-borde);
  outline: 1px solid var(--mm-borde-suave);
  outline-offset: 3px;
  background: var(--mm-velo);
  opacity: 0;
  transition: opacity .6s var(--ease) .5s;
}
.mapa-mesa__map.is-open .mapa-mesa__cartela { opacity: 1; }
.mapa-mesa__cartela-nombre {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-tinta);
  line-height: 1.45;
}
.mapa-mesa__cartela-escala {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: .68rem;
  color: var(--mm-tinta-suave);
}
.mapa-mesa__cartela-escala i {
  width: 46px;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--mm-tinta) 0 11.5px, transparent 11.5px 23px);
  border: 1px solid var(--mm-tinta);
}

/* la leyenda: el destino educativo que personaliza los prompts */
.mapa-mesa__leyenda {
  position: absolute;
  left: 3%;
  bottom: 5.5%;
  width: min(250px, 27%);
  display: grid;
  gap: 9px;
  padding: 14px 16px 12px;
  border: 1.5px solid var(--mm-borde);
  background: var(--mm-velo-denso);
  box-shadow: 0 10px 26px rgba(70, 50, 15, .14);
  opacity: 0;
  transition: opacity .6s var(--ease) .65s;
}
.mapa-mesa__map.is-open .mapa-mesa__leyenda { opacity: 1; }
.mapa-mesa__leyenda-title {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-tinta);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--mm-rojo);
  width: fit-content;
}
.mapa-mesa__leyenda label { display: grid; gap: 2px; }
.mapa-mesa__leyenda label span {
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-tinta-suave);
}
.mapa-mesa__leyenda input {
  width: 100%;
  border: none;
  border-bottom: 1.5px dashed var(--mm-borde);
  background: transparent;
  padding: 3px 1px 4px;
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--mm-tinta);
  border-radius: 0;
}
.mapa-mesa__leyenda input:focus { outline: none; border-bottom: 1.5px solid var(--mm-rojo); }
.mapa-mesa__leyenda input::placeholder { color: var(--mm-borde-media); }
.mapa-mesa__leyenda-hint {
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: .66rem;
  line-height: 1.45;
  color: var(--mm-tinta-suave);
}
/* con datos escritos, la leyenda confirma; vacía tras desplegar, invita
   con dos pulsos y se queda quieta */
.mapa-mesa__leyenda-ok {
  display: none;
  font-family: var(--font-display);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--mm-rojo-osc);
}
.mapa-mesa__leyenda-ok b { color: var(--mm-rojo); padding-right: 2px; }
.mapa-mesa__leyenda.is-escrita .mapa-mesa__leyenda-hint { display: none; }
.mapa-mesa__leyenda.is-escrita .mapa-mesa__leyenda-ok { display: block; }
.mapa-mesa__leyenda.is-invita { animation: mm-leyenda-invita 1.3s var(--ease) 1.1s 2; }
@keyframes mm-leyenda-invita {
  0%, 100% { box-shadow: 0 10px 26px rgba(70, 50, 15, .14); }
  45% { box-shadow: 0 12px 38px rgba(194, 51, 57, .45); }
}

/* punto de partida */
.mapa-mesa__origen {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 1px;
  color: var(--mm-tinta-suave);
  opacity: 0;
  transition: opacity .6s var(--ease) .55s;
  pointer-events: none;
}
.mapa-mesa__map.is-open .mapa-mesa__origen { opacity: 1; }
.mapa-mesa__origen i { font-style: normal; font-weight: 800; font-size: 1.15rem; line-height: 1; color: var(--mm-tinta); }
.mapa-mesa__origen span { font-family: var(--mm-serif); font-style: italic; font-size: .7rem; white-space: nowrap; }

/* ---------- enclaves (las cuatro paradas) ---------- */
.mapa-mesa__enclave {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -16px);
  display: grid;
  justify-items: center;
  gap: 7px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px;
  text-align: center;
  max-width: 168px;
  opacity: 0;
  transition: opacity .5s var(--ease) calc(.55s + var(--i, 0) * .14s);
  z-index: 2;
}
.mapa-mesa__map.is-open .mapa-mesa__enclave { opacity: 1; }
.mapa-mesa__enclave:focus-visible { outline: 3px solid var(--mm-rojo); outline-offset: 3px; border-radius: 12px; }

.mapa-mesa__marker {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mm-carta);
  border: 2.5px solid var(--mm-tinta);
  box-shadow: 0 3px 8px rgba(60, 45, 15, .3);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.mapa-mesa__marker-letra {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 800;
  color: var(--mm-tinta);
  transition: color .3s var(--ease);
}
.mapa-mesa__marker-aro {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(194, 51, 57, .55);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.mapa-mesa__enclave:hover .mapa-mesa__marker { transform: translateY(-2px); }
.mapa-mesa__enclave.is-stamped .mapa-mesa__marker { border-color: rgba(194, 51, 57, .7); }
.mapa-mesa__enclave.is-active .mapa-mesa__marker { background: var(--mm-rojo); border-color: var(--mm-rojo-osc); }
.mapa-mesa__enclave.is-active .mapa-mesa__marker-letra { color: #fff; }
.mapa-mesa__enclave.is-active .mapa-mesa__marker-aro { opacity: 1; transform: scale(1); }

/* invitación: el siguiente destino late tres veces y se queda quieto */
.mapa-mesa__enclave.is-invite .mapa-mesa__marker { animation: mm-invitar 1.1s var(--ease) .9s 3; }
@keyframes mm-invitar {
  0%, 100% { transform: none; box-shadow: 0 3px 8px rgba(60, 45, 15, .3); }
  40% { transform: translateY(-3px) scale(1.12); box-shadow: 0 8px 18px rgba(194, 51, 57, .4); }
}

.mapa-mesa__stop { display: grid; gap: 2px; justify-items: center; }
.mapa-mesa__stop-here {
  font-family: var(--font-display);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mm-rojo);
  border-radius: 999px;
  padding: 2px 9px 1px;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mapa-mesa__enclave.is-active .mapa-mesa__stop-here { opacity: 1; transform: none; }
.mapa-mesa__stop-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  color: var(--mm-tinta);
}
.mapa-mesa__stop-icon { display: inline-grid; place-items: center; width: 17px; height: 17px; color: var(--mm-rojo); }
.mapa-mesa__stop-icon svg { width: 100%; height: 100%; }
.mapa-mesa__stop-claim {
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: .74rem;
  line-height: 1.35;
  color: var(--mm-tinta-suave);
  max-width: 150px;
}

/* el sello de parada visitada: tinta roja sobre el papel */
.mapa-mesa__sello-mapa {
  position: absolute;
  top: -4px;
  right: -10px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2.5px solid rgba(194, 51, 57, .8);
  box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4.5px rgba(194, 51, 57, .5);
  color: var(--mm-rojo);
  mix-blend-mode: multiply;
  transform: rotate(-14deg) scale(1.7);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.2, 1.5, .4, 1), opacity .3s var(--ease);
  z-index: 3;
}
.mapa-mesa__sello-mapa i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .18em;
}
.mapa-mesa__enclave.is-stamped .mapa-mesa__sello-mapa { opacity: .92; transform: rotate(-14deg) scale(1); }

/* ---------- terra incognita → destino final ---------- */
.mapa-mesa__destino {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .6s var(--ease) .8s;
  pointer-events: none;
  z-index: 1;
}
.mapa-mesa__map.is-open .mapa-mesa__destino { opacity: 1; }
.mapa-mesa__destino-niebla {
  position: relative;
  display: grid;
  place-items: center;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.mapa-mesa__destino-niebla svg {
  width: 130px;
  height: auto;
  fill: var(--mm-niebla);
  stroke: var(--mm-borde);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}
.mapa-mesa__destino-niebla i {
  position: absolute;
  top: 26%;
  font-family: var(--mm-serif);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
  color: var(--mm-tinta-suave);
}
.mapa-mesa__destino-niebla b {
  position: absolute;
  bottom: -4px;
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--mm-tinta-suave);
  white-space: nowrap;
}
.mapa-mesa__destino-final {
  position: absolute;
  display: grid;
  place-items: center;
  gap: 4px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .7s var(--ease) .55s, transform .7s cubic-bezier(.2, 1.5, .4, 1) .55s;
}
.mapa-mesa__laurel { width: 34px; height: 34px; color: var(--mm-rojo); }
.mapa-mesa__destino-final b {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mm-rojo-osc);
  text-align: center;
  max-width: 170px;
  line-height: 1.3;
}
.mapa-mesa__destino.is-revealed .mapa-mesa__destino-niebla { opacity: 0; transform: scale(1.15); }
.mapa-mesa__destino.is-revealed .mapa-mesa__destino-final { opacity: 1; transform: scale(1); }
.mapa-mesa__destino::after {
  /* onda de tinta al descubrir el destino: se expande una vez y desaparece */
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(194, 51, 57, .65);
  opacity: .9;
  visibility: hidden;
  transform: scale(.5);
}
.mapa-mesa__destino.is-revealed::after {
  visibility: visible;
  opacity: 0;
  transform: scale(5.5);
  transition: transform 1.1s var(--ease) .55s, opacity 1.1s var(--ease) .65s;
}
.mapa-mesa__destino.is-revealed { z-index: 2; }

/* ---------- brújula ---------- */
.mapa-mesa__brujula {
  position: absolute;
  right: 2.6%;
  bottom: 5%;
  width: 96px;
  display: grid;
  justify-items: center;
  gap: 5px;
  opacity: 0;
  transition: opacity .6s var(--ease) .75s;
  pointer-events: none;
}
.mapa-mesa__map.is-open .mapa-mesa__brujula { opacity: 1; }
.mapa-mesa__brujula > svg { width: 72px; height: 72px; }
.mapa-mesa__brujula-aro { fill: var(--mm-velo); stroke: var(--mm-tinta); stroke-width: 2; }
.mapa-mesa__brujula-aro2 { fill: none; stroke: var(--mm-borde-media); stroke-width: 1; }
.mapa-mesa__brujula-ticks line { stroke: var(--mm-tinta); stroke-width: 1.6; }
.mapa-mesa__brujula text {
  font-family: var(--mm-serif);
  font-size: 11px;
  font-style: italic;
  fill: var(--mm-tinta);
}
.mapa-mesa__aguja {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(var(--aim, 0deg));
  transition: transform .8s var(--ease);
}
.mapa-mesa__brujula .mapa-mesa__aguja { transform: rotate(var(--aim, 0deg)); }
.mapa-mesa__aguja-n { fill: var(--mm-rojo); }
.mapa-mesa__aguja-s { fill: var(--mm-tinta); }
.mapa-mesa__aguja-eje { fill: var(--mm-carta); stroke: var(--mm-tinta); stroke-width: 1.4; }
.mapa-mesa__brujula-txt {
  display: grid;
  justify-items: center;
  gap: 1px;
  font-family: var(--font-display);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-tinta-suave);
  text-align: center;
}
.mapa-mesa__brujula-txt b { font-size: .66rem; font-weight: 800; color: var(--mm-tinta); letter-spacing: .1em; }

/* ---------- el cuaderno de campo abierto SOBRE la carta ----------
   Nada de ir arriba y abajo: al tocar una parada, el cuaderno se abre
   encima del mapa con su propia navegación (pestañas M·A·P·A, parada
   anterior/siguiente y cerrar). En móvil el panel se coloca justo bajo
   la parada tocada (lo recoloca initMapaMesa). */
.mapa-mesa__cuaderno-capa {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.4vw, 30px);
}
.mapa-mesa__cuaderno-capa[hidden] { display: none !important; }
.mapa-mesa__scrim {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: rgba(8, 16, 22, .48);
  opacity: 0;
  transition: opacity .35s var(--ease);
  cursor: pointer;
}
.mapa-mesa__cuaderno-capa.is-viva .mapa-mesa__scrim { opacity: 1; }
.mapa-mesa__libro {
  position: relative;
  width: min(940px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--mm-carta);
  border: 1.5px solid var(--mm-borde-suave);
  border-radius: 18px;
  box-shadow: 0 44px 90px rgba(0, 0, 0, .5);
  overflow: hidden;
  outline: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.mapa-mesa__cuaderno-capa.is-viva .mapa-mesa__libro { opacity: 1; transform: none; }

.mapa-mesa__libro-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px dashed var(--mm-borde-suave);
}
.mapa-mesa__libro-tabs { display: inline-flex; gap: 8px; }
.mapa-mesa__libro-tab {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px dashed var(--mm-borde-media);
  background: transparent;
  color: var(--mm-tinta-suave);
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.mapa-mesa__libro-tab i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
}
.mapa-mesa__libro-tab:hover { border-color: var(--mm-rojo); color: var(--mm-rojo-osc); }
.mapa-mesa__libro-tab.is-sellada { border-style: solid; border-color: rgba(194, 51, 57, .55); color: var(--mm-rojo-osc); }
.mapa-mesa__libro-tab.is-activa { background: var(--mm-rojo); border: 2px solid var(--mm-rojo); color: #fff; }
.mapa-mesa__libro-acciones { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.mapa-mesa__libro-prev,
.mapa-mesa__libro-cerrar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--mm-borde);
  background: transparent;
  color: var(--mm-tinta);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.mapa-mesa__libro-prev:hover,
.mapa-mesa__libro-cerrar:hover { border-color: var(--mm-rojo); color: var(--mm-rojo-osc); }
.mapa-mesa__libro-prev:disabled { opacity: .35; cursor: default; }
.mapa-mesa__libro-prev:disabled:hover { border-color: var(--mm-borde); color: var(--mm-tinta); }
.mapa-mesa__libro-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  background: var(--mm-rojo);
  color: #fff;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.mapa-mesa__libro-next:hover { transform: translateY(-1px); background: #d13e44; }
.mapa-mesa__libro-next i { font-style: normal; }
.mapa-mesa__libro-aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: rgba(194, 51, 57, .1);
  border-bottom: 1px dashed var(--mm-borde-suave);
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: .9rem;
  color: var(--mm-rojo-osc);
}
.mapa-mesa__libro-aviso button {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--mm-rojo);
  color: #fff;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}
.mapa-mesa__libro-cuerpo { overflow: auto; min-height: 0; overscroll-behavior: contain; }
.mapa-mesa__libro .mapa-mesa__cuaderno {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* ---------- cuaderno de campo (paneles de cada parada) ---------- */
.mapa-mesa__cuaderno {
  background: var(--mm-carta);
  border: 1.5px solid var(--mm-borde-suave);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.mapa-mesa__cuaderno.is-active { animation: mm-cuaderno .45s var(--ease); }
@keyframes mm-cuaderno {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.mapa-mesa__cuaderno-head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 26px;
  background: var(--mm-tinta);
  color: #f6efdd;
}
.mapa-mesa__cuaderno-paso {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .8;
}
.mapa-mesa__cuaderno-paso i { font-style: normal; color: var(--mm-rojo); padding: 0 2px; }
.mapa-mesa__cuaderno-plate { display: inline-flex; align-items: center; gap: 12px; }
.mapa-mesa__cuaderno-letra {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--mm-rojo);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
}
.mapa-mesa__cuaderno-icono { display: inline-grid; place-items: center; width: 22px; height: 22px; color: #f6efdd; opacity: .9; }
.mapa-mesa__cuaderno-icono svg { width: 100%; height: 100%; }
.mapa-mesa__cuaderno-nombres { display: grid; }
.mapa-mesa__cuaderno-nombre { font-family: var(--font-display); font-size: 1.18rem; font-weight: 800; }
.mapa-mesa__cuaderno-claim { font-family: var(--mm-serif); font-style: italic; font-size: .84rem; opacity: .82; }
/* el sello se estampa también en la cabecera del cuaderno: es donde el
   viajero está mirando cuando la parada queda sellada */
.mapa-mesa__cuaderno-sello {
  margin-left: auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1px;
  border-radius: 50%;
  border: 2px solid rgba(240, 104, 109, .85);
  box-shadow: inset 0 0 0 3.5px rgba(240, 104, 109, .35);
  color: #f0868b;
  transform: rotate(-12deg) scale(1.5);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2, 1.5, .4, 1), opacity .3s var(--ease);
}
.mapa-mesa__cuaderno-sello i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: .4rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.mapa-mesa__cuaderno-sello b {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
}
.mapa-mesa__cuaderno-sello.is-on { opacity: .95; transform: rotate(-12deg) scale(1); }
.mapa-mesa__cuaderno-sello.is-nueva { animation: mm-sello-thump .55s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes mm-sello-thump {
  0% { transform: rotate(-4deg) scale(1.8); opacity: 0; }
  60% { transform: rotate(-14deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-12deg) scale(1); }
}

.mapa-mesa__cuaderno-coord {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  opacity: .55;
}
.mapa-mesa__cuaderno-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 26px;
  padding: 26px;
}

/* página izquierda: anotación manuscrita + foto instantánea */
.mapa-mesa__nota { min-width: 0; }
.mapa-mesa__block-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mm-rojo);
  margin-bottom: 12px;
}
.mapa-mesa__nota-texto {
  font-family: var(--mm-serif);
  font-size: 1.04rem;
  line-height: 29px;
  color: var(--mm-texto);
  background-image: repeating-linear-gradient(transparent 0 28px, var(--mm-raya) 28px 29px);
  padding-bottom: 6px;
}
.mapa-mesa__polaroid {
  position: relative;
  margin: 26px 4px 6px;
  padding: 14px 14px 16px;
  background: var(--mm-polaroid);
  box-shadow: 0 10px 26px rgba(60, 45, 15, .2);
  transform: rotate(-1.6deg);
}
.mapa-mesa__celo {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 24px;
  transform: translateX(-50%) rotate(-2.4deg);
  background: rgba(244, 238, 216, .6);
  border-left: 1px dashed rgba(120, 95, 45, .35);
  border-right: 1px dashed rgba(120, 95, 45, .35);
  box-shadow: 0 2px 5px rgba(60, 45, 15, .12);
}
.mapa-mesa__polaroid figcaption {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mm-tinta-suave);
  margin-bottom: 7px;
}
.mapa-mesa__polaroid p {
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--mm-texto);
}

/* página derecha: bolsillo con las fichas de prompts */
.mapa-mesa__bolsillo {
  position: relative;
  border: 1.5px dashed var(--mm-borde);
  border-radius: 16px;
  background: var(--mm-bolsillo);
  padding: 18px;
  min-width: 0;
}
.mapa-mesa__bolsillo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mapa-mesa__bolsillo-title {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-tinta);
}
.mapa-mesa__bolsillo-sub { font-family: var(--mm-serif); font-style: italic; font-size: .78rem; color: var(--mm-tinta-suave); }
.mapa-mesa__fichas { display: grid; gap: 10px; }

.mapa-mesa__ficha {
  background: var(--mm-ficha-bg);
  border: 1px solid var(--mm-borde-suave);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.mapa-mesa__ficha[open] { box-shadow: 0 12px 30px rgba(60, 45, 15, .16); }
.mapa-mesa__ficha summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
}
.mapa-mesa__ficha summary::-webkit-details-marker { display: none; }
.mapa-mesa__ficha-no {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  color: var(--mm-rojo);
}
.mapa-mesa__ficha-heads { display: grid; gap: 1px; min-width: 0; flex: 1; }
.mapa-mesa__ficha-label {
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-tinta-suave);
}
.mapa-mesa__ficha-title { font-family: var(--font-display); font-size: .92rem; font-weight: 700; color: var(--mm-tinta); }
.mapa-mesa__ficha-flag {
  display: none;
  font-family: var(--font-display);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mm-rojo-osc);
  border: 1.5px solid rgba(194, 51, 57, .5);
  border-radius: 999px;
  padding: 3px 9px 2px;
  white-space: nowrap;
}
.mapa-mesa__ficha.is-collected .mapa-mesa__ficha-flag { display: inline-block; }
.mapa-mesa__ficha-go { color: var(--mm-tinta-suave); transition: transform .3s var(--ease); }
.mapa-mesa__ficha-go i { font-style: normal; font-size: 1.1rem; }
.mapa-mesa__ficha[open] .mapa-mesa__ficha-go { transform: rotate(90deg); }
.mapa-mesa__ficha-body { padding: 4px 16px 16px; }
.mapa-mesa__ficha-text {
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--mm-texto);
  white-space: pre-wrap;
  border-top: 1px dashed var(--mm-borde-suave);
  padding-top: 12px;
}
.mapa-mesa__dato {
  background: rgba(194, 51, 57, .13);
  color: var(--mm-rojo-osc);
  font-style: normal;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 5px;
}
.mapa-mesa__ficha-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.mapa-mesa__copy {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  background: var(--mm-rojo);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.mapa-mesa__copy:hover { transform: translateY(-1px); background: #d13e44; }
.mapa-mesa__save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--mm-borde);
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  color: var(--mm-tinta);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.mapa-mesa__save:hover { border-color: var(--mm-rojo); color: var(--mm-rojo-osc); }
.mapa-mesa__save.is-flash { background: rgba(194, 51, 57, .14); border-color: var(--mm-rojo); color: var(--mm-rojo-osc); }
.mapa-mesa__ficha-tools .prompt-open { font-size: .74rem; }

/* ---------- barra de la expedición: sellos + hoja de ruta ---------- */
.mapa-mesa__ruta-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 16px 24px;
  border: 1.5px solid rgba(15, 28, 34, .12);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.mapa-mesa__sellos { display: inline-flex; gap: 9px; }
.mapa-mesa__sello {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px dashed rgba(15, 28, 34, .3);
  color: var(--ink-soft);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s cubic-bezier(.2, 1.5, .4, 1);
}
.mapa-mesa__sello i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 800;
}
.mapa-mesa__sello.is-on {
  background: var(--red);
  border: 2px solid var(--red);
  color: #fff;
  transform: rotate(-8deg);
  box-shadow: 0 6px 16px rgba(194, 51, 57, .35);
}
.mapa-mesa__estado { font-size: .86rem; color: var(--ink-soft); font-weight: 500; }
.mapa-mesa__acciones { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mapa-mesa__hoja-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  background: var(--ink);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.mapa-mesa__hoja-btn:hover { transform: translateY(-1px); background: #21343e; }
.mapa-mesa__hoja-btn b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  font-size: .72rem;
}
.mapa-mesa__reset {
  border: none;
  background: none;
  cursor: pointer;
  font-size: .76rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mapa-mesa__reset:hover { color: var(--red); }

/* celebración al sellar la cuarta parada: un pulso y quieto */
.mapa-mesa__ruta-bar.is-fiesta { animation: mm-fiesta 1.4s var(--ease) 2; }
@keyframes mm-fiesta {
  0%, 100% { box-shadow: var(--shadow); }
  45% { box-shadow: 0 14px 44px rgba(194, 51, 57, .4); border-color: rgba(194, 51, 57, .55); }
}

/* ---------- hoja de ruta ---------- */
.mapa-mesa__hoja {
  margin-top: 20px;
  background: var(--mm-carta);
  border: 1.5px solid var(--mm-borde-suave);
  border-radius: 20px;
  padding: 28px 30px;
  box-shadow: var(--shadow);
}
.mapa-mesa__hoja-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.mapa-mesa__hoja-head h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--mm-tinta);
}
.mapa-mesa__hoja-leyenda { font-family: var(--mm-serif); font-style: italic; font-size: .92rem; color: var(--mm-tinta-suave); }
.mapa-mesa__final {
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mm-rojo-osc);
  border-left: 3px solid var(--mm-rojo);
  padding-left: 14px;
  margin: 10px 0 4px;
}
.mapa-mesa__hoja-lista { list-style: none; counter-reset: mm-hoja; margin-top: 14px; }
.mapa-mesa__hoja-lista li {
  counter-increment: mm-hoja;
  padding: 14px 0;
  border-bottom: 1px dashed var(--mm-borde-suave);
}
.mapa-mesa__hoja-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.mapa-mesa__hoja-item-head::before {
  content: counter(mm-hoja, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  color: var(--mm-rojo);
}
.mapa-mesa__hoja-item-head b { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--mm-tinta); }
.mapa-mesa__hoja-label {
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-tinta-suave);
  border: 1px solid var(--mm-borde-suave);
  border-radius: 999px;
  padding: 3px 9px 2px;
}
.mapa-mesa__hoja-del {
  margin-left: auto;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--mm-tinta-suave);
  padding: 4px 8px;
  border-radius: 8px;
}
.mapa-mesa__hoja-del:hover { color: var(--mm-rojo); background: rgba(194, 51, 57, .1); }
.mapa-mesa__hoja-lista p {
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--mm-texto);
  white-space: pre-wrap;
}
.mapa-mesa__hoja-vacia { font-family: var(--mm-serif); font-style: italic; font-size: .92rem; color: var(--mm-tinta-suave); margin: 12px 0; }
.mapa-mesa__hoja-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.mapa-mesa__hoja-copy {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  background: var(--mm-rojo);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.mapa-mesa__hoja-copy:hover { transform: translateY(-1px); background: #d13e44; }
.mapa-mesa__hoja-print,
.mapa-mesa__hoja-close {
  border: 1.5px solid var(--mm-borde);
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  padding: 11px 20px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  color: var(--mm-tinta);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.mapa-mesa__hoja-print:hover,
.mapa-mesa__hoja-close:hover { border-color: var(--mm-rojo); color: var(--mm-rojo-osc); }

.mapa-mesa__cta { text-align: center; margin-top: 34px; }

/* ---------- adaptación a pantallas medianas y móviles ---------- */
@media (max-width: 1020px) {
  .mapa-mesa__stop-name { font-size: .84rem; }
  .mapa-mesa__stop-claim { font-size: .68rem; max-width: 128px; }
  .mapa-mesa__cartela { max-width: 200px; padding: 11px 12px; }
  .mapa-mesa__cartela-nombre { font-size: .64rem; }
  .mapa-mesa__leyenda { padding: 11px 12px 10px; gap: 7px; }
  .mapa-mesa__brujula { width: 78px; }
  .mapa-mesa__brujula > svg { width: 58px; height: 58px; }
  .mapa-mesa__destino-niebla svg { width: 104px; }
}

@media (max-width: 880px) {
  /* en móvil la carta se convierte en cuaderno de expedición vertical */
  .mapa-mesa__map {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px;
  }
  .mapa-mesa__map.is-focus { transform: none; }
  .mapa-mesa__papel-arte,
  .mapa-mesa__ruta-arte,
  .mapa-mesa__origen,
  .mapa-mesa__brujula { display: none; }
  .mapa-mesa__cartela,
  .mapa-mesa__leyenda {
    position: static;
    width: 100%;
    max-width: none;
    opacity: 1;
  }
  .mapa-mesa__enclaves {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 0;
  }
  .mapa-mesa__enclaves::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 26px;
    bottom: 26px;
    border-left: 2px dashed var(--mm-borde-media);
  }
  .mapa-mesa__enclave {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    max-width: none;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    gap: 4px 10px;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--mm-borde-suave);
    border-radius: 14px;
    background: var(--mm-velo);
  }
  .mapa-mesa__enclave .mapa-mesa__marker { grid-row: 1 / span 1; justify-self: center; }
  .mapa-mesa__stop { justify-items: start; }
  .mapa-mesa__stop-claim { max-width: none; }
  .mapa-mesa__sello-mapa {
    position: static;
    grid-column: 3;
    width: 46px;
    height: 46px;
    transform: rotate(-14deg) scale(1.7);
  }
  .mapa-mesa__enclave.is-stamped .mapa-mesa__sello-mapa { transform: rotate(-14deg) scale(1); }
  .mapa-mesa__sello-mapa i { font-size: .42rem; }
  .mapa-mesa__destino {
    position: static;
    transform: none;
    justify-self: center;
    margin-top: 4px;
    min-height: 84px;
  }
  /* en móvil no hay capa: el cuaderno se coloca bajo la parada tocada */
  .mapa-mesa__cuaderno-capa { display: none !important; }
  .mapa-mesa__enclaves .mapa-mesa__cuaderno { margin: 2px 0 8px; width: 100%; }
  .mapa-mesa__cuaderno-body { grid-template-columns: 1fr; gap: 20px; padding: 20px 18px; }
  .mapa-mesa__cuaderno-head { padding: 15px 18px; gap: 12px; }
  .mapa-mesa__cuaderno-coord { display: none; }
  .mapa-mesa__ruta-bar { border-radius: 24px; padding: 16px 18px; gap: 14px; }
  .mapa-mesa__acciones { margin-left: 0; }
  .mapa-mesa__hoja { padding: 20px 18px; }
  .mapa-mesa__plegado-papel { width: min(340px, 92%); }
}

/* ---------- accesibilidad: sin animaciones ---------- */
@media (prefers-reduced-motion: reduce) {
  .mapa-mesa__map,
  .mapa-mesa__ghost,
  .mapa-mesa__seg,
  .mapa-mesa__cartela,
  .mapa-mesa__leyenda,
  .mapa-mesa__origen,
  .mapa-mesa__enclave,
  .mapa-mesa__destino,
  .mapa-mesa__destino-niebla,
  .mapa-mesa__destino-final,
  .mapa-mesa__destino::after,
  .mapa-mesa__brujula,
  .mapa-mesa__aguja,
  .mapa-mesa__sello-mapa,
  .mapa-mesa__scrim,
  .mapa-mesa__libro,
  .mapa-mesa__sello { transition: none !important; animation: none !important; }
  .mapa-mesa__cuaderno-capa.is-viva .mapa-mesa__scrim { opacity: 1; }
  .mapa-mesa__cuaderno-capa.is-viva .mapa-mesa__libro { opacity: 1; transform: none; }
  .mapa-mesa__map { opacity: 1; transform: none; }
  .mapa-mesa__enclave.is-invite .mapa-mesa__marker,
  .mapa-mesa__ruta-bar.is-fiesta,
  .mapa-mesa__cuaderno.is-active,
  .mapa-mesa__leyenda.is-invita,
  .mapa-mesa__cuaderno-sello.is-nueva,
  .mapa-mesa__plegado-papel::after,
  .mapa-mesa__plegado.is-opening .mapa-mesa__plegado-papel { animation: none !important; }
  .mapa-mesa__vineta,
  .mapa-mesa__vineta .v-acento,
  .mapa-mesa__cuaderno-sello,
  .mapa-mesa__esquinas path { transition: none !important; }
}
html.a11y-reduce-motion .mapa-mesa *,
html.a11y-reduce-motion .mapa-mesa *::before,
html.a11y-reduce-motion .mapa-mesa *::after { transition: none !important; animation: none !important; }
html.a11y-reduce-motion .mapa-mesa__map { opacity: 1; transform: none; }

/* ---------- imprimir SOLO la hoja de ruta ---------- */
@media print {
  html.mapa-imprimiendo body * { visibility: hidden; }
  html.mapa-imprimiendo .mapa-mesa__hoja,
  html.mapa-imprimiendo .mapa-mesa__hoja * { visibility: visible; }
  html.mapa-imprimiendo .mapa-mesa__hoja {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
    box-shadow: none;
    background: #fff;
    padding: 0;
  }
  html.mapa-imprimiendo .mapa-mesa__hoja-tools { display: none; }
  html.mapa-imprimiendo .mapa-mesa__hoja-del { display: none; }
}

/* ============================================================
   Agenda · panel de salidas (teleindicador de estación)
   Sección oscura con las próximas paradas más destacadas.
   ============================================================ */
.agenda-section { padding-top: 90px; padding-bottom: 90px; }

.agenda {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 70px) clamp(22px, 4vw, 64px);
}
.agenda::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(194, 51, 57, .22), transparent 58%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.agenda > * { position: relative; z-index: 1; }

/* ----- cabecera / barra del teleindicador ----- */
.agenda__brandbar {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.agenda__live i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #36d27a;
  box-shadow: 0 0 0 0 rgba(54, 210, 122, .6);
  animation: agendaPulse 2.2s infinite;
}
@keyframes agendaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(54, 210, 122, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(54, 210, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(54, 210, 122, 0); }
}
.agenda__count { margin-left: auto; }

.agenda__titles { margin: 26px 0 32px; }
.agenda__eyebrow {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f0686d;
  margin: 0 0 10px;
}
.agenda__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.04;
  margin: 0 0 12px;
}
.agenda__intro {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 1.02rem;
  line-height: 1.5;
}

/* ----- panel de filas ----- */
.agenda__cols,
.agenda__row {
  display: grid;
  grid-template-columns: 132px 1.1fr 2fr;
  gap: 28px;
}
.agenda__cols {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  padding: 0 10px 12px;
}
.agenda__row {
  align-items: center;
  padding: 22px 10px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), background-color .3s var(--ease);
}
.agenda__row.is-in { opacity: 1; transform: none; }
.agenda__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.agenda__row.is-featured {
  background: linear-gradient(90deg, rgba(194, 51, 57, .18), rgba(194, 51, 57, 0) 72%);
  box-shadow: inset 3px 0 0 #f0686d;
  border-radius: 0 14px 14px 0;
}

/* fecha en casillas tipo teleindicador */
.agenda__when { display: flex; align-items: center; gap: 13px; }
.agenda__flaps { display: inline-grid; gap: 3px; }
.agenda__flap {
  font-family: var(--font-mono);
  background: #0a141a;
  border-radius: 7px;
  text-align: center;
  line-height: 1;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 3px 9px rgba(0, 0, 0, .45);
}
.agenda__flap::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .5);
}
.agenda__flap--day {
  font-size: 1.95rem;
  font-weight: 700;
  padding: 9px 12px;
  color: #fff;
  min-width: 58px;
}
.agenda__flap--mon {
  font-size: .72rem;
  letter-spacing: .2em;
  padding: 5px 10px;
  color: #f0686d;
  background: #11202a;
}
.agenda__flap--mon::after { display: none; }
.agenda__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: rgba(255, 255, 255, .5);
}

/* lugar */
.agenda__where { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agenda__city {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
}
.agenda__venue { color: rgba(255, 255, 255, .6); font-size: .92rem; }

/* evento */
.agenda__what { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.agenda__headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.agenda__event {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.22;
}
/* Chip «Ponencia invitada» a la derecha del nombre (colores de marca: rojo). */
.agenda__tag {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(194, 51, 57, .55);
  background: rgba(194, 51, 57, .12);
  color: #f0686d;
  white-space: nowrap;
}
.agenda__status { font-size: .85rem; color: rgba(255, 255, 255, .55); }

/* «Añadir a mi calendario»: botón discreto que descarga el .ics de la cita */
.agenda__ics {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.agenda__ics svg { width: 13px; height: 13px; }

.agenda__ics:hover,
.agenda__ics:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .08);
}

.agenda__ics:disabled { color: #9fe3b8; border-color: rgba(159, 227, 184, .5); cursor: default; }

.agenda__foot { margin-top: 32px; text-align: center; }

@media (max-width: 760px) {
  .agenda__cols { display: none; }
  .agenda__row {
    grid-template-columns: auto 1fr;
    gap: 14px 18px;
    align-items: start;
    padding: 22px 4px;
  }
  .agenda__what { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .agenda__row { opacity: 1; transform: none; transition: none; }
  .agenda__live i { animation: none; }
}

/* Agenda sincronizada con Google Calendar: estados de carga y de vacío.
   El panel se rellena solo cuando llegan las citas desde agenda-feed.php. */
.agenda__row--loading { opacity: 1; transform: none; }
.agenda__loading,
.agenda__empty {
  display: block;
  font-family: var(--font-mono);
  font-size: .85rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .55);
  padding: 26px 10px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.agenda__loading {
  position: relative;
  padding-left: 30px;
}
.agenda__loading::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: #f0686d;
  border-radius: 50%;
  animation: agendaSpin .8s linear infinite;
}
@keyframes agendaSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .agenda__loading::before { animation: none; }
}

/* ============================================================
   #10 Accesibilidad — botón flotante, panel y clases globales
   ============================================================ */
.a11y-fab {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 240;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.a11y-fab:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.a11y-fab:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.a11y-panel {
  position: fixed;
  left: 24px;
  bottom: 84px;
  z-index: 241;
  width: min(320px, calc(100vw - 48px));
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 22px 64px rgba(15, 28, 34, .24);
  padding: 18px 20px 20px;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transform-origin: left bottom;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.a11y-panel.show { opacity: 1; transform: none; }
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.a11y-panel__head strong { font-family: var(--font-display); font-size: 1.05rem; }
.a11y-panel__close { border: 0; background: none; font-size: 1rem; color: var(--ink-soft); cursor: pointer; padding: 4px; line-height: 1; }
.a11y-panel__close:hover { color: var(--red); }
.a11y-panel__opts { display: grid; gap: 6px; margin: 12px 0 14px; }
.a11y-opt { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 14px; cursor: pointer; transition: background .2s var(--ease); }
.a11y-opt:hover { background: var(--gray-bg); }
.a11y-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.a11y-opt__track {
  flex: none; margin-top: 2px;
  width: 40px; height: 23px; border-radius: 999px;
  background: rgba(15, 28, 34, .18); position: relative;
  transition: background .22s var(--ease);
}
.a11y-opt__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .22s var(--ease);
}
.a11y-opt input:checked + .a11y-opt__track { background: var(--red); }
.a11y-opt input:checked + .a11y-opt__track::after { transform: translateX(17px); }
.a11y-opt input:focus-visible + .a11y-opt__track { outline: 3px solid var(--red); outline-offset: 2px; }
.a11y-opt__txt { display: flex; flex-direction: column; gap: 1px; }
.a11y-opt__txt strong { font-size: .94rem; font-weight: 600; }
.a11y-opt__txt small { font-size: .8rem; color: var(--ink-soft); line-height: 1.3; }
.a11y-panel__reset {
  width: 100%; border: 1px solid rgba(15,28,34,.16); background: none;
  border-radius: 999px; padding: 9px; font-family: var(--font-display);
  font-weight: 600; font-size: .85rem; color: var(--ink-soft); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.a11y-panel__reset:hover { background: var(--gray-bg); color: var(--ink); }

/* ----- efectos globales de accesibilidad ----- */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0ms !important;
}
html.a11y-reduce-motion { scroll-behavior: auto !important; }
html.a11y-reduce-motion .reveal,
html.a11y-reduce-motion .agenda__row { opacity: 1 !important; transform: none !important; }

html.a11y-large-text { font-size: 112.5%; }

html.a11y-contrast { --ink-soft: #2b2b2e; }
html.a11y-contrast a:not(.btn):not(.nav__logo):not([class*="nav__"]):not([class*="omni"]):not([class*="cuaderno"]):not([class*="footer"]) {
  text-decoration: underline; text-underline-offset: 2px;
}
html.a11y-contrast *:focus-visible { outline: 3px solid var(--red) !important; outline-offset: 2px; }
html.a11y-contrast .agenda__intro,
html.a11y-contrast .agenda__venue,
html.a11y-contrast .agenda__status { color: rgba(255, 255, 255, .92) !important; }

/* ============================================================
   #7 Mi cuaderno del profe — botón Guardar, lanzador y cajón
   ============================================================ */
.prompt-save {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--cw-line, rgba(255,255,255,.16));
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: var(--cw-text, rgba(255,255,255,.85));
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.prompt-save:hover { background: rgba(255, 255, 255, .09); }
.prompt-save svg { transition: transform .2s var(--ease); }
.prompt-save.is-on { background: rgba(194, 51, 57, .16); border-color: #f0686d; color: #ffd2d4; }
.prompt-save.is-on svg { fill: #f0686d; stroke: #f0686d; }

.cuaderno-fab {
  position: fixed;
  left: 24px;
  bottom: 84px;
  z-index: 238;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px 13px 15px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(15, 28, 34, .26);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.cuaderno-fab:hover { transform: translateY(-2px); background: #16262e; }
.cuaderno-fab:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.cuaderno-fab__badge {
  min-width: 21px; height: 21px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 999px; background: rgba(255,255,255,.16);
  font-family: var(--font-mono); font-size: .76rem; font-weight: 700;
  transition: background .25s var(--ease);
}
.cuaderno-fab.has-items .cuaderno-fab__badge { background: var(--red); }

.cuaderno { position: fixed; inset: 0; z-index: 320; }
.cuaderno[hidden] { display: none; }
.cuaderno__scrim {
  position: absolute; inset: 0; background: rgba(8, 14, 18, .5);
  opacity: 0; transition: opacity .3s var(--ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cuaderno.show .cuaderno__scrim { opacity: 1; }
.cuaderno__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(440px, 100vw);
  background: #fbfaf7;
  box-shadow: -24px 0 60px rgba(15, 28, 34, .26);
  display: flex; flex-direction: column;
  padding: 26px 26px 22px;
  transform: translateX(100%);
  transition: transform .34s var(--ease);
  /* papel pautado, como un cuaderno */
  background-image: linear-gradient(rgba(15,28,34,.05) 1px, transparent 1px);
  background-size: 100% 30px;
  background-position: 0 96px;
}
.cuaderno.show .cuaderno__panel { transform: none; }
.cuaderno__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cuaderno__kicker { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 2px; }
.cuaderno__title { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; margin: 0; }
.cuaderno__close { border: 0; background: none; font-size: 1.1rem; color: var(--ink-soft); cursor: pointer; padding: 4px; line-height: 1; }
.cuaderno__close:hover { color: var(--red); }
.cuaderno__intro { font-size: .9rem; color: var(--ink-soft); margin: 10px 0 16px; line-height: 1.45; }
.cuaderno__list { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; display: grid; gap: 12px; align-content: start; }
.cuaderno__empty { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; padding: 24px 4px; }
.cuaderno__empty[hidden] { display: none; }

.cuaderno-item {
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 16px;
  padding: 14px 15px;
  box-shadow: 0 6px 18px rgba(15, 28, 34, .05);
}
.cuaderno-item__top { display: flex; align-items: flex-start; gap: 10px; }
.cuaderno-item__no { font-family: var(--font-mono); font-size: .78rem; color: var(--red); font-weight: 700; padding-top: 2px; }
.cuaderno-item__heads { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cuaderno-item__label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-soft); }
.cuaderno-item__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.cuaderno-item__del { border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: .9rem; padding: 2px 4px; line-height: 1; }
.cuaderno-item__del:hover { color: var(--red); }
.cuaderno-item__text {
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; color: #3a3a3d;
  margin: 9px 0 11px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cuaderno-item__tools { display: flex; align-items: center; gap: 14px; }
.cuaderno-item__copy { border: 0; background: none; color: var(--red); font-family: var(--font-display); font-weight: 600; font-size: .84rem; cursor: pointer; padding: 0; }
.cuaderno-item__copy:hover { text-decoration: underline; }
.cuaderno-item__src { font-size: .82rem; color: var(--ink-soft); text-decoration: none; }
.cuaderno-item__src:hover { color: var(--ink); }
.cuaderno__actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; margin-top: 14px; border-top: 1px solid rgba(15, 28, 34, .1); }

/* ============================================================
   #9 Buscador global (⌘K) — disparador en cabecera y overlay
   ============================================================ */
/* Disparador compacto (lupa) que comparte lenguaje con los iconos sociales,
   pero con un borde y un fondo tenue para leerse como acción de búsqueda. */
.nav__search {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(15, 28, 34, .16);
  border-radius: 10px;
  background: rgba(15, 28, 34, .04);
  color: var(--ink);
  cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.nav__search svg { width: 18px; height: 18px; }
.nav__search:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }

body.omni-open { overflow: hidden; }
.omni { position: fixed; inset: 0; z-index: 400; }
.omni[hidden] { display: none; }
.omni__scrim {
  position: absolute; inset: 0; background: rgba(8, 14, 18, .55);
  opacity: 0; transition: opacity .2s var(--ease);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.omni.show .omni__scrim { opacity: 1; }
.omni__box {
  position: relative;
  max-width: 660px;
  margin: 11vh auto 0;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(8, 14, 18, .4);
  overflow: hidden;
  opacity: 0; transform: translateY(-12px) scale(.98);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.omni.show .omni__box { opacity: 1; transform: none; }
.omni__bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(15, 28, 34, .1); }
.omni__icon { color: var(--ink-soft); flex: none; }
.omni__input { flex: 1; border: 0; outline: 0; background: none; font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); }
.omni__input::placeholder { color: var(--ink-soft); font-weight: 400; }
.omni__esc { flex: none; border: 1px solid rgba(15,28,34,.18); background: none; border-radius: 8px; padding: 4px 9px; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-soft); cursor: pointer; }
.omni__esc:hover { color: var(--ink); border-color: var(--ink); }
.omni__results { max-height: min(56vh, 520px); overflow-y: auto; padding: 8px; }
.omni__empty { text-align: center; color: var(--ink-soft); padding: 34px 16px; font-size: .95rem; }
.omni__item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 11px 13px; border-radius: 13px; text-decoration: none; color: var(--ink);
}
.omni__item.is-active { background: var(--gray-bg); }
.omni__item.is-active .omni__page { color: var(--ink); }
.omni__kind {
  flex: none; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: rgba(15,28,34,.07); color: var(--ink-soft); white-space: nowrap;
}
.omni__kind--prompt { background: rgba(194,51,57,.12); color: #b3262c; }
.omni__kind--pagina { background: rgba(15,28,34,.1); color: var(--ink); }
.omni__kind--articulo { background: rgba(70,120,200,.14); color: #2f5aa8; }
.omni__kind--agenda { background: rgba(40,170,110,.16); color: #1f8a5a; }
.omni__kind--conferencia { background: rgba(150,110,220,.16); color: #6c43c0; }
.omni__kind--proyecto { background: rgba(230,140,40,.16); color: #a15c10; }
.omni__kind--recurso { background: rgba(20,150,160,.14); color: #0e7a86; }
.omni__kind--prensa { background: rgba(120,120,130,.16); color: #4c4c55; }
.omni__kind--glosario { background: rgba(190,160,40,.18); color: #7d6410; }
.omni__kind--publicacion { background: rgba(90,80,200,.14); color: #4a3fb0; }
.omni__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.omni__t { font-family: var(--font-display); font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omni__s { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omni__page { flex: none; font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.omni__foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-top: 1px solid rgba(15, 28, 34, .1); font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft); }
.omni__brand { color: var(--red); font-weight: 700; }

/* ----- no chocar con el aviso de cookies en móvil ----- */
@media (max-width: 760px) {
  body.has-cookies .a11y-fab { bottom: 150px; }
  body.has-cookies .cuaderno-fab { bottom: 210px; }
}
@media (max-width: 460px) {
  .cuaderno-fab__txt { display: none; }
  .cuaderno-fab { padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-fab, .a11y-panel, .cuaderno-fab, .cuaderno__panel, .cuaderno__scrim,
  .omni__box, .omni__scrim { transition: none; }
}

/* ----- Guardar en cuaderno desde los ejemplos del modelo MAPA ----- */
.mapa-linea__deptools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prompt-save--mapa {
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .9);
}
.prompt-save--mapa:hover { background: rgba(255, 255, 255, .1); }
.prompt-save--mapa.is-on { background: rgba(194, 51, 57, .2); border-color: #f0686d; color: #ffd2d4; }
.prompt-save--mapa.is-on svg { fill: #f0686d; stroke: #f0686d; }

/* ----- pulso de atención del botón del cuaderno al guardar lo primero ----- */
.cuaderno-fab.is-new { animation: cuadernoPulse 1.3s var(--ease) 2; }
@keyframes cuadernoPulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(15, 28, 34, .26), 0 0 0 0 rgba(194, 51, 57, .5); }
  50%      { box-shadow: 0 12px 32px rgba(15, 28, 34, .26), 0 0 0 14px rgba(194, 51, 57, 0); }
}

/* ----- llamada didáctica del cuaderno (primer guardado) ----- */
.cuaderno-tip {
  position: fixed;
  left: 24px;
  bottom: 144px;
  z-index: 260;
  width: min(330px, calc(100vw - 48px));
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(15, 28, 34, .28);
  padding: 18px 18px 16px;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transform-origin: left bottom;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cuaderno-tip.show { opacity: 1; transform: none; }
.cuaderno-tip__x { position: absolute; top: 10px; right: 10px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: .9rem; line-height: 1; padding: 4px; }
.cuaderno-tip__x:hover { color: var(--red); }
.cuaderno-tip__head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; padding-right: 18px; }
.cuaderno-tip__ico { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--ink); color: #fff; }
.cuaderno-tip__head strong { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.2; }
.cuaderno-tip p { font-size: .88rem; line-height: 1.5; color: #3a3a3d; margin: 0 0 9px; }
.cuaderno-tip p:last-of-type { margin-bottom: 0; }
.cuaderno-tip__actions { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.cuaderno-tip__ok { border: 0; background: none; color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; font-size: .86rem; cursor: pointer; padding: 6px 4px; }
.cuaderno-tip__ok:hover { color: var(--ink); }
.cuaderno-tip__arrow {
  position: absolute; left: 30px; bottom: -9px;
  width: 18px; height: 18px; background: var(--white);
  transform: rotate(45deg); box-shadow: 5px 5px 12px rgba(15, 28, 34, .08);
}

@media (max-width: 760px) {
  body.has-cookies .cuaderno-tip { bottom: 270px; }
}
@media (prefers-reduced-motion: reduce) {
  .cuaderno-fab.is-new { animation: none; }
  .cuaderno-tip { transition: none; }
}

/* ============================================================
   Abrir en IA — botón junto a «Copiar» + menú flotante
   ============================================================ */
.prompt-open {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: var(--cw-text);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.prompt-open svg { flex: none; }
.prompt-open:hover,
.prompt-open.is-open {
  background: var(--cw-accent);
  border-color: var(--cw-accent);
  color: #fff;
  transform: translateY(-1px);
}
/* en barras muy estrechas, deja solo el icono */
@media (max-width: 480px) {
  .prompt-open__txt { display: none; }
  .prompt-open { padding: 6px 9px; }
}

/* botón gemelo dentro del andén del modelo MAPA */
.mapa-linea__deptools .prompt-open { font-size: .76rem; }

.ia-pop {
  position: fixed;
  z-index: 1200;
  width: min(300px, calc(100vw - 24px));
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(16, 26, 32, .97);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 26px 70px rgba(7, 14, 18, .55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  animation: ia-pop-in .18s var(--ease);
}
@keyframes ia-pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.ia-pop__title {
  margin: 0 0 11px;
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 700;
}
.ia-pop__grid { display: grid; gap: 7px; }
.ia-pop__opt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  text-align: left;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.ia-pop__opt:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .26);
  transform: translateX(2px);
}
.ia-pop__opt svg { margin-left: auto; opacity: .55; flex: none; }
.ia-pop__opt:hover svg { opacity: 1; }
.ia-pop__dot {
  width: 11px; height: 11px; flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
}
.ia-pop__label { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ia-pop__name { line-height: 1.2; }
.ia-pop__mode {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .5);
}
.ia-pop__note {
  margin: 11px 2px 0;
  font-size: .76rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .6);
}
.ia-pop__note kbd {
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .14);
}
/* hoja inferior en móviles estrechos */
.ia-pop--sheet {
  top: auto !important;
  left: 0 !important;
  right: 0;
  bottom: 0;
  width: 100%;
  border-radius: 20px 20px 0 0;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  animation: ia-sheet-in .24s var(--ease);
}
@keyframes ia-sheet-in { from { transform: translateY(100%); } }

.ia-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 14px);
  z-index: 1250;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 18px 50px rgba(7, 14, 18, .4);
  opacity: 0;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.ia-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .ia-pop, .ia-pop--sheet { animation: none; }
  .ia-toast { transition: opacity .2s; }
}

/* ============================================================
   Glosario de IA — diccionario didáctico (página Glosario)
   ============================================================ */
.glosario-section { background: var(--white); padding-top: 18px; }
.glosario__head { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.glosario__intro {
  margin: 16px auto 0;
  max-width: 640px;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.glosario__intro strong { color: var(--ink); font-weight: 600; }

.glosario__tools {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 0 auto 18px;
}
.glosario__search {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--gray-bg);
  border: 1px solid transparent;
  transition: border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
.glosario__search:focus-within {
  background: var(--white);
  border-color: rgba(194, 51, 57, .35);
  box-shadow: 0 8px 30px rgba(15, 28, 34, .08);
}
.glosario__search svg { color: var(--ink-soft); flex: none; }
.glosario__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}
.glosario__count {
  flex: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.glosario__alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto 34px;
}
.glosario__letter {
  min-width: 38px;
  padding: 7px 12px;
  border: 1px solid var(--gray-card);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .84rem;
  font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.glosario__letter:hover { border-color: rgba(194, 51, 57, .4); color: var(--red); transform: translateY(-1px); }
.glosario__letter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.glosario__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
/* La ficha viste SIEMPRE la tinta nocturna (#15232b), también en modo
   claro: sus colores son literales para que no cambien con el tema. */
.glosario-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 28px 26px;
  border-radius: var(--radius-lg);
  background: #15232b;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.glosario-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 73, 79, .52);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .42);
}
/* Tira roja de marca en el borde izquierdo: presente en todas las tarjetas,
   se intensifica y ensancha al pasar el ratón. */
.glosario-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #d4494f, #e0575c);
  opacity: .5;
  transition: opacity .4s var(--ease), width .4s var(--ease);
}
.glosario-card:hover::before { opacity: 1; width: 6px; }
.glosario-card__mark {
  position: absolute;
  top: -18px;
  right: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 7rem;
  line-height: 1;
  color: #e8edef;
  opacity: .045;
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.glosario-card:hover .glosario-card__mark { opacity: .08; transform: translateY(4px) scale(1.04); color: #d4494f; }
.glosario-card__top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.glosario-card__term {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.2;
  color: #e8edef;
}
.glosario-card__sigla {
  flex: none;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(194, 51, 57, .1);
  color: #d4494f;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.glosario-card__def {
  margin: 0;
  font-size: .96rem;
  line-height: 1.6;
  color: #d6e0e5;
  position: relative;
  z-index: 1;
}
.glosario-card__def strong { color: #f4f8fa; font-weight: 600; }

/* Enlaces cruzados entre términos: se alinean al pie de la tarjeta (margin-top
   auto) para que todas las cadenas de relacionados queden a la misma altura. */
.glosario-card__related {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  position: relative;
  z-index: 1;
}
.glosario-card__related-label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a4ac;
}
.glosario-card__related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.glosario-card__related-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #0c171d;
  border: 1px solid rgba(255, 255, 255, .13);
  color: #e6eef2;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.glosario-card__related-link::before {
  content: "→";
  color: #d4494f;
  font-weight: 700;
}
.glosario-card__related-link:hover {
  background: rgba(212, 73, 79, .18);
  border-color: rgba(212, 73, 79, .58);
  color: #ff9297;
  transform: translateY(-1px);
}
.glosario-card__related-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
/* Destello breve al llegar a un término desde un enlace cruzado. */
.glosario-card.is-flash {
  animation: glosFlash 1.5s var(--ease);
}
@keyframes glosFlash {
  0%   { box-shadow: 0 0 0 0 rgba(194, 51, 57, .55); border-color: #d4494f; }
  100% { box-shadow: 0 0 0 14px rgba(194, 51, 57, 0); border-color: rgba(255, 255, 255, .12); }
}
@media (prefers-reduced-motion: reduce) {
  .glosario-card.is-flash { animation-duration: .01ms; }
}
.glosario-card[hidden] { display: none; }

.glosario__empty {
  text-align: center;
  margin: 30px auto 0;
  padding: 40px 20px;
  max-width: 460px;
  color: var(--ink-soft);
  font-size: 1rem;
}

@media (max-width: 640px) {
  .glosario__grid { grid-template-columns: 1fr; gap: 16px; }
  .glosario__tools { gap: 10px; }
  .glosario-card { padding: 24px 22px; }
}

/* ============================================================
   Botón flotante de idioma ES / EN
   Solo en las páginas bilingües (recursos, mapa, glosario,
   prompts, asistentes). Píldora segmentada que se apila en la
   esquina inferior izquierda, ENCIMA de "Mi cuaderno" si existe
   (.lang-fab--stacked) o, si no, encima del botón de accesibilidad.
   La opción activa va rellena con la tinta de marca.
   ============================================================ */
.lang-fab {
  position: fixed;
  left: 24px;
  bottom: 84px;            /* encima del botón de accesibilidad (bottom:24px) */
  z-index: 239;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 7px 5px 9px;
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 28, 34, .2);
}
.lang-fab--stacked { bottom: 146px; }   /* encima de "Mi cuaderno" (bottom:84px) */
body.has-cookies .lang-fab { bottom: 210px; }
body.has-cookies .lang-fab--stacked { bottom: 272px; }
.lang-fab__globe {
  display: grid;
  place-items: center;
  color: var(--ink);
  opacity: .55;
  margin-right: 1px;
}
.lang-fab__globe svg { width: 17px; height: 17px; }
.lang-fab__opt {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .03em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang-fab__opt:hover { background: rgba(15, 28, 34, .08); }
.lang-fab__opt.is-active { background: var(--ink); color: #fff; }
.lang-fab__opt.is-active:hover { background: var(--ink); }
.lang-fab__opt:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ============================================================
   canalTv — "El Canal": zapping de proyectos
   Un televisor con marco oscuro, pantalla con líneas de barrido,
   brillo curvo y estática de zapping (ruido SVG), acompañado de un
   mando a distancia real. Los rótulos imitan el OSD clásico (número
   de canal verde, marca de agua, faldón inferior) y el detalle se
   lee en un TELETEXTO con teclas de colores.
   ============================================================ */

.canaltv-section {
  background:
    radial-gradient(120% 90% at 50% 0%, #16262e 0%, #0b1418 46%, #060b0e 100%);
  padding-top: 110px;
  padding-bottom: 130px;
  overflow: hidden;
}

.canaltv__head { max-width: 760px; margin-bottom: 56px; }

.canaltv__eyebrow {
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #e05b60;
  margin-bottom: 18px;
}
.canaltv__eyebrow::before { content: "● "; color: var(--red); animation: canaltv-parpadeo 1.6s steps(2) infinite; }

.canaltv__title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  color: #f4f6f7;
  margin-bottom: 18px;
}

.canaltv__intro { color: rgba(244, 246, 247, .62); font-size: 1.08rem; max-width: 56ch; }

/* --- Televisor + mando --------------------------------------- */

.canaltv__set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 40px;
  align-items: center;
}

.canaltv__tv {
  border-radius: 30px;
  background: linear-gradient(180deg, #232d33 0%, #10171b 55%, #0a1013 100%);
  padding: 18px 18px 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 40px 90px rgba(0, 0, 0, .55),
    0 0 140px rgba(120, 200, 255, .07);
  position: relative;
}

.canaltv__pantalla {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #04080a;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .8), inset 0 0 6px rgba(0, 0, 0, .9);
  isolation: isolate;
}

/* En pantallas estrechas la tele se hace más cuadrada para que quepa el faldón. */
@media (max-width: 860px) {
  .canaltv__pantalla { aspect-ratio: auto; min-height: 480px; }
}

.canaltv__prog { position: absolute; inset: 0; }

/* La emisión: fotos en crossfade ocupando toda la pantalla. */
.canaltv__emision, .canaltv__frame { position: absolute; inset: 0; }
.canaltv__frame { opacity: 0; transition: opacity 1.1s var(--ease); }
.canaltv__frame.is-cur { opacity: 1; }
.canaltv__frame img { width: 100%; height: 100%; object-fit: cover; }
.canaltv__pie-foto {
  position: absolute;
  top: 54px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .85);
  background: rgba(4, 8, 10, .55);
  padding: 4px 10px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* Carta de ajuste para canales sin fotos: barras de color clásicas. */
.canaltv__carta {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #9a9a92 0 14.28%, #96963c 0 28.56%, #3c9696 0 42.84%, #3c963c 0 57.12%,
    #963c96 0 71.4%, #963c44 0 85.68%, #3c3c96 0 100%);
  filter: brightness(.62) saturate(.85);
}
.canaltv__carta-circulo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, transparent 0 118px, rgba(4, 8, 10, .38) 119px 100%),
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .14) 0 2px, transparent 3px 56px, rgba(255, 255, 255, .12) 57px 59px, transparent 60px 116px, rgba(255, 255, 255, .16) 117px 120px, transparent 121px);
}

/* Muebles de pantalla: marca de agua, número de canal y texturas. */
.canaltv__bug {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 4;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .5);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.canaltv__bug::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-left: 6px; opacity: .85; }

.canaltv__chnum {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 4;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .1em;
  color: #46e07f;
  text-shadow: 0 0 12px rgba(70, 224, 127, .55), 0 0 2px rgba(70, 224, 127, .9);
  pointer-events: none;
}
.canaltv__chnum.is-flash { animation: canaltv-chflash 1.1s var(--ease); }
@keyframes canaltv-chflash {
  0% { transform: scale(1.55); transform-origin: top right; opacity: 0; }
  18% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.canaltv__scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    radial-gradient(115% 115% at 50% 50%, transparent 62%, rgba(0, 0, 0, .5) 100%);
  mix-blend-mode: overlay;
}

.canaltv__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(70% 46% at 28% -6%, rgba(255, 255, 255, .1) 0%, transparent 70%);
}

/* Estática del zapping: ruido SVG que "tiembla" a saltos. */
.canaltv__static {
  position: absolute;
  inset: -20%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 280px 280px;
}
.canaltv__pantalla.is-zap .canaltv__static {
  opacity: .92;
  animation: canaltv-ruido .4s steps(5) both;
}
.canaltv__pantalla.is-zap { animation: canaltv-chispazo .4s steps(3) both; }
@keyframes canaltv-ruido {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-6%, 4%); }
  50% { transform: translate(5%, -6%); }
  75% { transform: translate(-3%, -3%); }
  100% { transform: translate(4%, 5%); }
}
@keyframes canaltv-chispazo {
  0%, 100% { filter: none; }
  40% { filter: brightness(1.7) contrast(1.25); }
}
@keyframes canaltv-parpadeo { 50% { opacity: .25; } }

/* OSD del programa: estado arriba y faldón inferior. */
.canaltv__estado {
  position: absolute;
  top: 46px;
  right: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 6px;
}
.canaltv__estado--vivo { color: #fff; background: rgba(194, 51, 57, .92); box-shadow: 0 0 18px rgba(194, 51, 57, .45); }
.canaltv__estado--repo { color: rgba(255, 255, 255, .75); background: rgba(10, 16, 19, .6); border: 1px solid rgba(255, 255, 255, .22); }
.canaltv__punto { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: canaltv-parpadeo 1.2s steps(2) infinite; }

.canaltv__bajo {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  padding: 96px 26px 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 10, .68) 38%, rgba(4, 8, 10, .95) 100%);
}

.canaltv__cadena {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.canaltv__cadena-logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}
.canaltv__cadena-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.canaltv__cadena-inst { color: #fff; background: var(--red); padding: 5px 10px; border-radius: 5px; }
.canaltv__cadena-anio { color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .14); padding: 5px 10px; border-radius: 5px; }

.canaltv__prog-title {
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
  margin-bottom: 6px;
}

.canaltv__rol {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: #7fd4a4;
  margin-bottom: 8px;
}

.canaltv__desc {
  color: rgba(244, 246, 247, .82);
  font-size: .98rem;
  line-height: 1.55;
  max-width: 62ch;
  margin-bottom: 16px;
}

.canaltv__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

.canaltv__accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.canaltv__accion:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
.canaltv__accion svg { width: 16px; height: 16px; }

/* Panel inferior del televisor: altavoz, marca y piloto de encendido. */
.canaltv__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 10px;
}
.canaltv__altavoz {
  flex: 0 0 130px;
  height: 8px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 3px, transparent 3px 8px);
}
.canaltv__marca {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.canaltv__led { width: 9px; height: 9px; border-radius: 50%; background: #46e07f; box-shadow: 0 0 10px rgba(70, 224, 127, .8); }

/* --- El mando a distancia ------------------------------------ */

.canaltv__mando {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: linear-gradient(180deg, #1c2429 0%, #10171b 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 26px;
  padding: 22px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 60px rgba(0, 0, 0, .5);
}

.canaltv__mando-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a4750;
  margin: 0 auto 2px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .04);
}
.canaltv__mando:active .canaltv__mando-led,
.canaltv__mando:focus-within .canaltv__mando-led { background: var(--red); box-shadow: 0 0 12px rgba(194, 51, 57, .9); }

.canaltv__mando-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 2px;
}

.canaltv__tecla {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  color: #e8edef;
  background: linear-gradient(180deg, #2b353b 0%, #1d262b 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 12px 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s var(--ease);
}
.canaltv__tecla:hover { background: linear-gradient(180deg, #37434a 0%, #263137 100%); }
.canaltv__tecla:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }

.canaltv__tecla--ch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: .8rem;
  letter-spacing: .04em;
  padding: 14px 8px;
}
.canaltv__tecla--ch svg { width: 15px; height: 15px; flex: none; }

.canaltv__teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.canaltv__tecla--num { padding: 10px 4px; font-size: .85rem; }
.canaltv__tecla--num.is-cur {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 16px rgba(194, 51, 57, .5);
}

.canaltv__tecla--txt {
  background: linear-gradient(180deg, #3c58d8 0%, #2b41ad 100%);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.canaltv__tecla--txt:hover { background: linear-gradient(180deg, #4a66e6 0%, #3550c4 100%); }

/* --- Teletexto (modal) --------------------------------------- */

.canaltv-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .26s var(--ease);
}
.canaltv-modal.show { opacity: 1; }

.canaltv-modal__backdrop { position: absolute; inset: 0; background: rgba(3, 6, 8, .82); backdrop-filter: blur(6px); }

.canaltv-modal__dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: min(78vh, 640px);
  overflow: auto;
  background: #060a12;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 26px 28px 20px;
  font-family: var(--font-mono);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
  transform: translateY(14px) scale(.98);
  transition: transform .26s var(--ease);
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px);
}
.canaltv-modal.show .canaltv-modal__dialog { transform: none; }
.canaltv-modal__dialog:focus { outline: none; }

.canaltv-tele__bar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 20px;
}
.canaltv-tele__p { color: #fff; }
.canaltv-tele__brand { color: #46e07f; }
.canaltv-tele__mode { color: #59d7e0; }

.canaltv-tele__title {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: #ffe14d;
  background: #14259b;
  padding: 6px 12px;
  margin-bottom: 14px;
}

.canaltv-tele__meta {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #59d7e0;
  margin-bottom: 18px;
}

.canaltv-tele__body { color: #e9edef; font-size: .92rem; line-height: 1.8; }
.canaltv-tele__body p + p { margin-top: 14px; }

.canaltv-tele__link { margin-top: 18px; }
.canaltv-tele__link a { color: #46e07f; font-weight: 700; text-decoration: none; }
.canaltv-tele__link a:hover { text-decoration: underline; }

.canaltv-modal__fastext {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.canaltv__fkey {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .78rem;
  color: #e9edef;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.canaltv__fkey:hover { background: rgba(255, 255, 255, .14); }
.canaltv__fkey::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.canaltv__fkey--rojo::before { background: #e04a50; }
.canaltv__fkey--verde::before { background: #46e07f; }
.canaltv__fkey--amarillo::before { background: #ffe14d; }

/* --- Responsive ----------------------------------------------- */

@media (max-width: 980px) {
  .canaltv__set { grid-template-columns: 1fr; gap: 26px; }
  .canaltv__mando {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 18px;
    border-radius: 999px;
  }
  .canaltv__mando-led { margin: 0; }
  .canaltv__mando-label { display: none; }
  .canaltv__tecla--ch { padding: 11px 16px; }
  .canaltv__teclado { display: flex; flex-wrap: wrap; justify-content: center; }
  .canaltv__tecla--num { min-width: 42px; }
}

@media (max-width: 640px) {
  .canaltv-section { padding-top: 80px; padding-bottom: 90px; }
  .canaltv__tv { padding: 10px 10px 0; border-radius: 22px; }
  .canaltv__pantalla { border-radius: 14px; min-height: 520px; }
  .canaltv__bajo { padding: 80px 16px 18px; }
  .canaltv__desc { font-size: .92rem; }
  .canaltv__chnum { font-size: 1.05rem; }
  .canaltv-modal { padding: 14px; }
  .canaltv-modal__dialog { padding: 20px 16px 16px; }
}

/* Con reduced-motion: nada parpadea ni tiembla; el zapping es un corte. */
@media (prefers-reduced-motion: reduce) {
  .canaltv__eyebrow::before,
  .canaltv__punto,
  .canaltv__chnum.is-flash,
  .canaltv__pantalla.is-zap,
  .canaltv__pantalla.is-zap .canaltv__static { animation: none; }
  .canaltv__pantalla.is-zap .canaltv__static { opacity: 0; }
  .canaltv__frame { transition: none; }
}

/* ============================================================
   nesProyectos — "La Consola": los proyectos como videojuego 8 bits
   Sala oscura con un televisor de tubo que emite un plataformas:
   HUD pixelado, nubes que derivan, cuadro de diálogo de RPG con
   máquina de escribir (la información ampliada se lee hoja a hoja
   en ese mismo recuadro, estilo Pokémon: pestañita HOJA n/m y
   teclas [A]/[B] dibujadas en los botones del diálogo), cartuchos
   que se insertan y mando NES con el uso de cada botón rotulado.
   Tipografía: "Press Start 2P" (autoalojada en assets/fonts.css)
   para todo lo que "emite" la consola; Montserrat/Roboto para lo
   que es de la web (cabecera de sección, etiquetas de cartucho).
   ============================================================ */
.nesx-section {
  --nesx-pix: "Press Start 2P", var(--font-mono);
  --nesx-noche: #14151d;
  --nesx-cielo1: #6b8cff;
  --nesx-cielo2: #82a4ff;
  --nesx-tinta: #0a0a12;
  --nesx-amarillo: #ffe25c;
  --nesx-verde: #7be495;
  --nesx-celeste: #9adcff;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(107, 140, 255, .08) 0%, transparent 60%),
    var(--nesx-noche);
  padding: 110px 0 120px;
  overflow: hidden;
}
.nesx__head { max-width: 760px; margin-bottom: 54px; }
.nesx__eyebrow {
  font-family: var(--nesx-pix);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff9b9f;
  margin-bottom: 18px;
}
.nesx__eyebrow::before { content: "▶ "; color: var(--nesx-verde); }
.nesx__title {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.06;
  color: #fff;
  margin-bottom: 18px;
}
.nesx__intro { color: rgba(255, 255, 255, .68); font-size: 1.06rem; max-width: 58ch; }

/* --- la sala: tele + lateral (cartuchos y mando) --- */
.nesx__sala {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
  gap: 40px;
  align-items: start;
}

/* --- televisor (con su pista debajo) --- */
.nesx__col-tv { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nesx__tv {
  position: relative;
  background: linear-gradient(180deg, #2b2b33, #222228);
  border-radius: 30px;
  /* la ceja de arriba es la que aloja el interruptor de sonido */
  padding: 44px 20px 8px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .07),
    0 30px 80px rgba(0, 0, 0, .55);
}
.nesx__pantalla {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--nesx-cielo1), var(--nesx-cielo2) 78%);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 60px rgba(0, 0, 20, .25);
}
/* líneas de escaneo + viñeta de tubo */
.nesx__scan {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .13) 2px 3px);
}
.nesx__glare {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background:
    radial-gradient(65% 42% at 26% -4%, rgba(255, 255, 255, .12) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 68%, rgba(0, 0, 20, .2) 100%);
}
.nesx__static {
  position: absolute; inset: -20%; z-index: 8; pointer-events: none; opacity: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 280px 280px;
}
.nesx__pantalla.is-static .nesx__static { opacity: .92; animation: nesx-ruido .26s steps(4) infinite; }
@keyframes nesx-ruido {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-6%, 4%); }
  50% { transform: translate(5%, -6%); }
  75% { transform: translate(-3%, -3%); }
  100% { transform: translate(4%, 5%); }
}

/* --- HUD --- */
.nesx__hud {
  position: absolute; inset: 0 0 auto; z-index: 4;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px 0;
  font-family: var(--nesx-pix);
  font-size: .58rem;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
}
/* El rótulo de la izquierda es el título del proyecto, en una chapa con
   relleno (la que antes decía "En juego", que ya no existe): dentro lleva el
   piloto de estado, que parpadea en rojo mientras el proyecto sigue en juego y
   se queda fijo en ámbar cuando está completado. El título puede ser largo, así
   que se recorta con puntos suspensivos antes de comerse los corazones. */
.nesx__hud-mundo {
  min-width: 0; max-width: 64%;
  display: flex; align-items: center; gap: 9px;
  font-size: .66rem;
  background: rgba(10, 10, 18, .85);
  padding: 9px 11px 8px;
  color: var(--nesx-amarillo);
  text-shadow: none;
}
.nesx__hud-mundo b {
  font-weight: 400; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nesx__hud-punto {
  flex: none; width: 9px; height: 9px;
  background: var(--nesx-amarillo);
}
.nesx__hud-mundo.is-vivo { color: #ff6b70; }
.nesx__hud-mundo.is-vivo .nesx__hud-punto {
  background: #ff5157;
  animation: nesx-parpadeo 1.2s steps(1) infinite;
}
.nesx__hud-vidas { display: flex; align-items: center; gap: 6px; color: #ff6b70; flex: none; }
.nesx__hud-num { flex: none; }
.nesx__hud-vidas i {
  width: 12px; height: 11px; background: #ff5157;
  clip-path: polygon(50% 100%, 0 48%, 0 18%, 18% 0, 40% 0, 50% 14%, 60% 0, 82% 0, 100% 18%, 100% 48%);
  filter: drop-shadow(1.5px 1.5px 0 rgba(0, 0, 0, .45));
}

/* --- nivel (paisaje 8 bits) --- */
.nesx__nivel { position: absolute; inset: 0; }
.nesx__paisaje {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--nesx-cielo1), var(--nesx-cielo2) 78%);
}
.nesx__astro, .nesx__decor { position: absolute; display: block; }
.nesx__astro, .nesx__decor { opacity: 0; }
.nesx__nube {
  position: absolute; width: 64px; height: 16px; background: #fff;
  box-shadow: 14px -12px 0 -2px #fff, 34px -10px 0 -3px #fff;
  opacity: .95;
}
.nesx__nube--a { left: 8%; top: 17%; animation: nesx-flota 34s linear infinite; }
.nesx__nube--b { left: 56%; top: 10%; transform: scale(.8); animation: nesx-flota 46s linear infinite reverse; }
.nesx__nube--c { left: 74%; top: 7%; transform: scale(.62); animation: nesx-flota 40s linear infinite; }
@keyframes nesx-flota {
  0% { margin-left: 0; }
  50% { margin-left: 60px; }
  100% { margin-left: 0; }
}
.nesx__colina {
  position: absolute; bottom: 11.5%; background: #46b846;
  clip-path: polygon(0 100%, 0 62%, 12% 62%, 12% 34%, 26% 34%, 26% 10%, 42% 10%, 42% 34%, 56% 34%, 56% 62%, 68% 62%, 68% 100%, 100% 100%, 100% 100%, 0 100%);
}
.nesx__colina--a { left: -4%; width: 34%; height: 26%; }
.nesx__colina--b { right: -6%; width: 28%; height: 18%; background: #379637; }
.nesx__suelo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 11.5%;
  background:
    repeating-linear-gradient(0deg, rgba(80, 26, 0, .85) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(90deg, rgba(80, 26, 0, .85) 0 2px, transparent 2px 30px),
    #c84c0c;
  box-shadow: 0 -3px 0 #7c2b00;
}

/* --- doce mundos: un paisaje distinto para cada cartucho ----------------
   Los elementos son geometría CSS pixelada; no dependen de imágenes y se
   mantienen nítidos en cualquier tamaño de pantalla. El 1 es el clásico
   cielo azul con nubes y colinas (Super Mario Bros.); del 2 al 6, fases al
   estilo Mega Man 2. El proyecto nº decide el mundo: (i % 6) + 1. */
.nesx__mundo--1 .nesx__paisaje {
  background: linear-gradient(180deg, #6b8cff, #82a4ff 78%);
}

/* Del 2 al 6 el homenaje cambia de juego: son fases al estilo Mega Man 2
   (NES, 1988). Nada de cielos azules con nubes: fondos oscuros, tramas
   geométricas repetidas, bloques y maquinaria. Todo es geometría CSS —ni una
   imagen— y NADA se anima en bucle. Cada mundo tiene su color, que es el de la
   tira del cartucho (ver `tiras` en el renderer de app.js).
   Lo que de verdad luce es la mitad superior: la de abajo la tapan el cuadro
   de diálogo y las capturas. */

/* 2 · Espacio: nebulosa limpia, estrellas escasas, Saturno y Tierra
   (antes: campo de estrellas teselado que generaba ruido) */
.nesx__mundo--2 .nesx__paisaje { background: radial-gradient(120% 90% at 78% 12%, #3a2a6b 0%, #1a1147 40%, #0a0723 100%); }
.nesx__mundo--2 .nesx__nube { display: none; }
/* estrellas contadas y colocadas a mano (sin ruido) */
.nesx__mundo--2 .nesx__paisaje::before {
  content: ""; position: absolute; left: 12%; top: 14%; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .9;
  box-shadow:
    40px 30px #fff, 120px 12px #cfe4ff, 210px 46px #fff, 300px 20px #fff, 360px 70px #cfe4ff,
    70px 90px #fff, 180px 120px #fff, 250px 96px #cfe4ff, 20px 150px #fff, 150px 180px #fff,
    330px 150px #fff, 90px 210px #cfe4ff, 280px 200px #fff, 40px 250px #fff, 200px 250px #cfe4ff;
}
/* Saturno. El anillo se pinta DOS VECES para que pase por detrás del planeta,
   como en la realidad (antes era una elipse entera encima del disco y parecía
   un aro colgado delante):
   · ::before = el anillo entero, con una máscara circular que le abre un hueco
     justo del tamaño del planeta → solo se ven las dos alas de los lados, que
     es lo que asoma por detrás.
   · ::after  = el mismo anillo recortado a su mitad inferior → es el tramo que
     pasa POR DELANTE, cruzando la panza del planeta.
   Los dos comparten centro con el planeta (37px, 37px), así que la máscara no
   se descoloca al girar el anillo. */
.nesx__mundo--2 .nesx__astro {
  opacity: 1; right: 12%; top: 12%; width: 74px; height: 74px; border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 3px, transparent 3px 10px),
    radial-gradient(circle at 34% 30%, #ff9ad9, #c060c9 45%, #6d4bd0 85%);
  box-shadow: inset -14px -10px rgba(20,10,50,.4), 0 0 40px rgba(160,90,220,.45);
}
.nesx__mundo--2 .nesx__astro::before,
.nesx__mundo--2 .nesx__astro::after {
  content: ""; position: absolute;
  left: -26px; right: -26px; top: 27px; height: 20px;
  border: 5px solid #d9b6ff; border-radius: 50%;
  transform: rotate(-16deg);
}
/* las alas de detrás: el hueco de la máscara es el propio planeta */
.nesx__mundo--2 .nesx__astro::before {
  box-shadow: 0 0 12px rgba(200, 150, 255, .35);
  -webkit-mask-image: radial-gradient(circle 38px at 63px 10px, transparent 0 37px, #000 38px);
  mask-image: radial-gradient(circle 38px at 63px 10px, transparent 0 37px, #000 38px);
}
/* el tramo de delante: solo la mitad de abajo del aro */
.nesx__mundo--2 .nesx__astro::after {
  border-color: #e7d0ff;
  clip-path: inset(50% 0 0 0);
}
/* colinas lunares grises */
.nesx__mundo--2 .nesx__colina { bottom: 11.5%; clip-path: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #4a4570; }
.nesx__mundo--2 .nesx__colina--a { left: -20%; width: 80%; height: 16%; }
.nesx__mundo--2 .nesx__colina--b { right: -20%; width: 76%; height: 12%; background: #3a3560; }
/* Tierra asomando en el horizonte */
.nesx__mundo--2 .nesx__decor--a {
  opacity: 1; left: 13%; bottom: 14%; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #6fc3ff, #2f7fd0 70%);
  box-shadow: 0 0 16px rgba(90,170,255,.4), inset -6px -4px rgba(10,30,70,.4);
}
.nesx__mundo--2 .nesx__decor--a::before {
  content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 6px; border-radius: 40%; background: #4fae6a;
  box-shadow: 12px 10px 0 -1px #4fae6a, -2px 14px 0 -2px #4fae6a;
}
/* estrella fugaz */
.nesx__mundo--2 .nesx__decor--b {
  opacity: 1; left: 22%; top: 22%; width: 70px; height: 3px; border-radius: 2px; transform: rotate(-24deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff); box-shadow: 0 0 8px rgba(255,255,255,.6);
}
.nesx__mundo--2 .nesx__decor--b::after {
  content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.7);
}
/* estrella brillante con destello */
.nesx__mundo--2 .nesx__decor--c { opacity: 1; right: 34%; top: 44%; width: 4px; height: 4px; background: #fff; box-shadow: 0 0 6px 2px rgba(255,255,255,.6); }
.nesx__mundo--2 .nesx__decor--c::before { content: ""; position: absolute; left: -6px; top: 1px; width: 16px; height: 2px; background: linear-gradient(90deg, transparent, #fff, transparent); }
.nesx__mundo--2 .nesx__decor--c::after { content: ""; position: absolute; left: 1px; top: -6px; width: 2px; height: 16px; background: linear-gradient(0deg, transparent, #fff, transparent); }
/* superficie lunar con cráteres */
.nesx__mundo--2 .nesx__suelo {
  background:
    radial-gradient(circle at 22% 46%, #2b2750 0 7px, transparent 8px),
    radial-gradient(circle at 68% 60%, #2b2750 0 5px, transparent 6px),
    radial-gradient(circle at 88% 40%, #2b2750 0 4px, transparent 5px),
    linear-gradient(#615c8f, #4a4570);
  box-shadow: 0 -4px #8078b0;
}


/* 3 · Hielo: noche polar. Cielo azul profundo con aurora boreal, nieve cayendo
   (copos sueltos y teselados, como los tiles de la NES), montañas heladas y un
   témpano de hielo. El fondo va oscuro a propósito: el rótulo del HUD y la
   chapa son blancos y sobre un cielo claro no se leían. Nada se anima en bucle. */
.nesx__mundo--3 .nesx__paisaje {
  background-image:
    /* nieve: dos capas con paso distinto = profundidad */
    radial-gradient(2px 2px at 50% 30%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1.5px 1.5px at 50% 70%, rgba(214, 238, 255, .5), transparent),
    /* estrellas */
    radial-gradient(1px 1px at 18% 12%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1px 1px at 72% 22%, rgba(255, 255, 255, .6), transparent),
    linear-gradient(#0a2544 0%, #0f3660 38%, #1a5285 72%, #2c6ea6 100%);
  background-size: 40px 52px, 27px 36px, 220px 160px, 300px 190px, 100% 100%;
  background-position: 0 0, 14px 12px, 0 0, 0 0, 0 0;
}
.nesx__mundo--3 .nesx__nube { opacity: 0; animation: none; }
/* Aurora boreal: cortinas de luz casi verticales que se desvanecen hacia
   abajo (con clip-path de picos parecían otra cordillera). */
.nesx__mundo--3 .nesx__decor--a,
.nesx__mundo--3 .nesx__decor--b {
  opacity: 1; left: -6%; width: 112%; top: 3%;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, #000 22%, rgba(0, 0, 0, .35) 62%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, #000 22%, rgba(0, 0, 0, .35) 62%, transparent 100%);
}
.nesx__mundo--3 .nesx__decor--a {
  height: 42%;
  background: repeating-linear-gradient(96deg, rgba(126, 255, 196, .32) 0 7px, transparent 7px 19px, rgba(150, 235, 255, .22) 19px 25px, transparent 25px 44px);
}
.nesx__mundo--3 .nesx__decor--b {
  height: 34%;
  background: repeating-linear-gradient(83deg, rgba(168, 150, 255, .24) 0 6px, transparent 6px 22px, rgba(126, 255, 196, .16) 22px 27px, transparent 27px 52px);
}
/* luna llena con halo */
.nesx__mundo--3 .nesx__astro {
  opacity: 1; right: 14%; top: 9%;
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffffff, #dcefff 62%, #b9d8ee);
  box-shadow: 0 0 30px 10px rgba(200, 232, 255, .35);
}
/* Glaciar del fondo: más pequeño, más apagado y escalonado igual que los
   otros dos. Da profundidad al valle helado. (Antes había aquí un témpano
   facetado que, a este tamaño, parecía una vela.) */
.nesx__mundo--3 .nesx__decor--c {
  opacity: 1; left: 34%; bottom: 11.5%;
  width: 22%; height: 34%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .12) 0 40%, transparent 40% 60%, rgba(12, 52, 92, .3) 60%),
    linear-gradient(180deg, #d7ecf9 0 20%, #a9cbe2 20% 30%, #7ba4c4 30% 62%, #55809f 62%);
  clip-path: polygon(0 100%, 0 74%, 10% 74%, 10% 58%, 20% 58%, 20% 40%, 30% 40%, 30% 22%, 42% 22%, 42% 6%, 56% 6%, 56% 20%, 66% 20%, 66% 38%, 76% 38%, 76% 56%, 86% 56%, 86% 74%, 100% 74%, 100% 100%);
}

/* GLACIARES. Siluetas escalonadas (tiles de la NES, sin diagonales suaves),
   con la cara izquierda iluminada por la luna, la derecha en sombra, estratos
   de hielo comprimido y la cumbre nevada de canto duro. */
.nesx__mundo--3 .nesx__colina {
  bottom: 11.5%;
  background:
    /* cara de luz y cara de sombra */
    linear-gradient(90deg, rgba(255, 255, 255, .22) 0 38%, transparent 38% 58%, rgba(12, 52, 92, .32) 58%),
    /* estratos de hielo */
    repeating-linear-gradient(102deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 24px),
    /* nieve arriba, hielo abajo, con cantos duros */
    linear-gradient(180deg, #ffffff 0 22%, #e2f2fc 22% 30%, #a8d0e9 30% 60%, #74a5cb 60% 84%, #55809f 84%);
}
.nesx__mundo--3 .nesx__colina--a {
  left: -4%; width: 52%; height: 58%;
  clip-path: polygon(0 100%, 0 76%, 7% 76%, 7% 64%, 14% 64%, 14% 50%, 21% 50%, 21% 36%, 28% 36%, 28% 22%, 35% 22%, 35% 10%, 44% 10%, 44% 0, 53% 0, 53% 12%, 60% 12%, 60% 26%, 67% 26%, 67% 40%, 74% 40%, 74% 34%, 81% 34%, 81% 48%, 88% 48%, 88% 64%, 95% 64%, 95% 80%, 100% 80%, 100% 100%);
}
.nesx__mundo--3 .nesx__colina--b {
  right: -6%; width: 44%; height: 44%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .16) 0 34%, transparent 34% 56%, rgba(12, 52, 92, .38) 56%),
    repeating-linear-gradient(98deg, rgba(255, 255, 255, .1) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #eef8ff 0 20%, #cbe5f5 20% 28%, #8fbcda 28% 58%, #5f8fb4 58% 82%, #456f92 82%);
  clip-path: polygon(0 100%, 0 82%, 8% 82%, 8% 68%, 16% 68%, 16% 54%, 24% 54%, 24% 40%, 32% 40%, 32% 26%, 40% 26%, 40% 12%, 50% 12%, 50% 0, 60% 0, 60% 14%, 68% 14%, 68% 30%, 76% 30%, 76% 46%, 84% 46%, 84% 62%, 92% 62%, 92% 80%, 100% 80%, 100% 100%);
}
/* la grieta grande del glaciar mayor */
.nesx__mundo--3 .nesx__colina--a::after {
  content: ""; position: absolute; left: 42%; top: 26%;
  width: 7px; height: 52%;
  background: rgba(24, 78, 124, .45);
  clip-path: polygon(0 0, 100% 14%, 34% 44%, 100% 70%, 24% 100%, 0 62%);
}

/* suelo de hielo: placas, grietas y brillo */
.nesx__mundo--3 .nesx__suelo {
  background:
    repeating-linear-gradient(90deg, rgba(10, 37, 68, .4) 0 3px, transparent 3px 40px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .45) 0 3px, transparent 3px 15px),
    linear-gradient(#cfe9f8, #86b8d8);
  box-shadow: 0 -4px 0 #ffffff;
}

/* 4 · Océano: superficie ondulada, haces de luz, arrecife, corales y peces.
   Lo que se ve de verdad es la mitad de arriba (el diálogo tapa la de abajo),
   así que ahí es donde viven las burbujas, el banco de peces y el pez grande.
   El agua lleva una trama de tiles, como los fondos de la NES. */
.nesx__mundo--4 .nesx__paisaje {
  background-image:
    /* motas en suspensión */
    radial-gradient(1.5px 1.5px at 30% 20%, rgba(220, 250, 255, .5), transparent),
    radial-gradient(1.5px 1.5px at 78% 62%, rgba(220, 250, 255, .35), transparent),
    /* trama de ondas: dos capas de arcos que dan textura al agua */
    radial-gradient(14px 8px at 50% 100%, transparent 6px, rgba(255, 255, 255, .05) 6px 7px, transparent 8px),
    radial-gradient(80% 45% at 50% 0, rgba(117, 235, 247, .34), transparent 68%),
    linear-gradient(#18a8c9 0%, #0b87ab 30%, #076b8e 55%, #064567 80%, #05304a 100%);
  background-size: 120px 90px, 170px 130px, 46px 34px, 100% 100%, 100% 100%;
}
/* haces de luz anchos, abiertos desde la superficie */
.nesx__mundo--4 .nesx__paisaje::before {
  content: ""; position: absolute; left: -8%; right: -8%; top: 0; height: 82%;
  background: linear-gradient(104deg, transparent 12%, rgba(184, 249, 255, .22) 12% 20%, transparent 20% 35%, rgba(135, 230, 246, .15) 35% 46%, transparent 46% 61%, rgba(196, 253, 255, .19) 61% 69%, transparent 69%);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 10% 100%);
  mix-blend-mode: screen;
}
/* la superficie del mar, vista desde abajo */
.nesx__mundo--4 .nesx__paisaje::after {
  content: ""; position: absolute; left: 0; right: 0; top: 3%; height: 15px;
  background: repeating-linear-gradient(90deg, rgba(214, 252, 255, .75) 0 18px, transparent 18px 29px, rgba(122, 225, 239, .6) 29px 48px, transparent 48px 61px);
  clip-path: polygon(0 45%, 7% 10%, 15% 58%, 24% 20%, 33% 70%, 42% 14%, 51% 56%, 61% 8%, 72% 63%, 82% 18%, 91% 54%, 100% 12%, 100% 100%, 0 100%);
  opacity: .8;
}
/* racimos de burbujas de varios tamaños */
.nesx__mundo--4 .nesx__nube {
  width: 14px; height: 14px; border: 3px solid #bceef5; border-radius: 50%;
  background: transparent; opacity: .62; animation: none;
  box-shadow:
    21px -19px 0 -4px transparent, 21px -19px 0 -1px #bceef5,
    40px 7px 0 -5px transparent, 40px 7px 0 -2px #bceef5,
    9px -39px 0 -5px transparent, 9px -39px 0 -3px #bceef5;
}
.nesx__mundo--4 .nesx__nube--a { left: 9%; top: 20%; }
.nesx__mundo--4 .nesx__nube--b { left: 52%; top: 12%; }
.nesx__mundo--4 .nesx__nube--c { left: 80%; top: 30%; }
/* el sol, difuminado por el agua */
.nesx__mundo--4 .nesx__astro {
  opacity: 1; left: 13%; top: -13%; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, #eaffff 0, rgba(184, 246, 252, .55) 25%, rgba(184, 246, 252, 0) 70%);
}
/* siluetas de arrecife rocoso con huecos */
.nesx__mundo--4 .nesx__colina { bottom: 11.5%; background: linear-gradient(#11807a, #07524f); }
.nesx__mundo--4 .nesx__colina--a { left: -8%; width: 63%; height: 30%; clip-path: polygon(0 100%, 0 54%, 9% 54%, 9% 34%, 20% 34%, 20% 62%, 31% 62%, 31% 18%, 45% 18%, 45% 48%, 59% 48%, 59% 8%, 70% 8%, 70% 59%, 82% 59%, 82% 39%, 100% 39%, 100% 100%); }
.nesx__mundo--4 .nesx__colina--b { right: -6%; width: 55%; height: 22%; background: #07504e; clip-path: polygon(0 100%, 0 48%, 18% 48%, 18% 13%, 36% 13%, 36% 61%, 53% 61%, 53% 28%, 72% 28%, 72% 6%, 88% 6%, 88% 52%, 100% 52%, 100% 100%); }
/* kelp: sube alto por la izquierda, que es donde se ve */
.nesx__mundo--4 .nesx__decor--a {
  opacity: 1; left: 6%; bottom: 11.5%; width: 26px; height: 62%;
  background: linear-gradient(90deg, #14735c 0 8px, #2f9e6f 8px 18px, #14735c 18px);
  clip-path: polygon(30% 100%, 8% 74%, 34% 58%, 6% 40%, 36% 24%, 12% 8%, 54% 0, 92% 12%, 62% 26%, 96% 42%, 66% 58%, 94% 76%, 70% 100%);
  filter: drop-shadow(3px 2px 0 rgba(0, 53, 53, .22));
}
/* mata de algas en abanico, a la derecha */
.nesx__mundo--4 .nesx__decor--b {
  opacity: 1; right: 15%; bottom: 11.5%; width: 62px; height: 34%;
  background: linear-gradient(90deg, #1f956b, #4fbd79);
  clip-path: polygon(43% 100%, 7% 18%, 23% 13%, 49% 78%, 40% 0, 57% 0, 59% 75%, 82% 21%, 96% 29%, 68% 100%);
  filter: drop-shadow(4px 2px 0 rgba(0, 53, 53, .24));
}
/* Pez payaso: cuerpo y cola en una sola figura recortada, con la cola
   ABRIÉNDOSE hacia atrás (antes era un triángulo apuntando afuera, y parecía
   una flecha con la cola del revés). Nada en la zona alta, donde se le ve. */
.nesx__mundo--4 .nesx__decor--c {
  opacity: 1; right: 20%; top: 30%;
  width: 52px; height: 26px;
  background: linear-gradient(90deg, #ffd45b 0 22%, #ff7d52 22% 38%, #fff1b4 38% 50%, #ff7d52 50% 66%, #ffd45b 66%);
  clip-path: polygon(
    0 50%, 8% 30%, 22% 14%, 44% 8%, 62% 14%, 72% 30%,
    100% 2%, 86% 50%, 100% 98%,
    72% 70%, 62% 86%, 44% 92%, 22% 86%, 8% 70%);
  filter: drop-shadow(3px 3px 0 rgba(0, 39, 67, .3));
}
/* el ojo, y dos peces pequeños del banco, al fondo */
.nesx__mundo--4 .nesx__decor--c::after {
  content: ""; position: absolute; left: 9px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: #102536;
  box-shadow: -104px 40px 0 2px #8fe1e0, -140px 14px 0 0 #a8eef0, -68px 74px 0 1px #7fd6d8;
}
.nesx__mundo--4 .nesx__suelo {
  background:
    radial-gradient(circle at 13% 38%, #f5dfa0 0 4px, transparent 5px),
    radial-gradient(circle at 72% 65%, #997d53 0 5px, transparent 6px),
    repeating-linear-gradient(100deg, rgba(116, 94, 57, .2) 0 2px, transparent 2px 34px),
    linear-gradient(#e0cf91, #bda568);
  box-shadow: 0 -4px #f0dfa2, inset 0 5px rgba(255, 255, 255, .16);
}

/* 5 · Bosque · homenaje a Wood Man: troncos gigantes, hojas y
   penumbra verde. */
.nesx__mundo--5 .nesx__paisaje {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 3px, transparent 3px 30px),
    linear-gradient(180deg, #1c4a2a, #0f2c1b 76%);
}
.nesx__mundo--5 .nesx__nube, .nesx__mundo--5 .nesx__colina { opacity: 0; animation: none; }
/* troncos: dos delante, uno detrás */
.nesx__mundo--5 .nesx__decor--a,
.nesx__mundo--5 .nesx__decor--b {
  opacity: 1; top: 0; width: 54px; height: 78%;
  background: linear-gradient(90deg, #5c3a1e 0 8px, #8a5a2c 8px 34px, #6b4423 34px 46px, #4a2e17 46px);
}
.nesx__mundo--5 .nesx__decor--a { left: 8%; }
/* apartado del borde derecho: ahí caen la moneda y la bandera del nivel */
.nesx__mundo--5 .nesx__decor--b { right: 26%; width: 40px; height: 62%; opacity: .75; }
/* copa de hojas: bloques escalonados, como los de Wood Man */
.nesx__mundo--5 .nesx__decor--c {
  opacity: 1; left: 0; top: 0; width: 100%; height: 22%;
  background:
    repeating-linear-gradient(90deg, #2f7a3c 0 26px, #256231 26px 52px);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 92% 62%, 92% 84%, 78% 84%, 78% 58%, 62% 58%, 62% 88%, 48% 88%, 48% 60%, 32% 60%, 32% 86%, 18% 86%, 18% 64%, 8% 64%, 8% 82%, 0 82%);
}
.nesx__mundo--5 .nesx__astro {
  opacity: .35; left: 46%; top: 20%;
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 160, .8), transparent 70%);
}
.nesx__mundo--5 .nesx__suelo {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 3px, transparent 3px 36px),
    repeating-linear-gradient(0deg, #6b4423 0 14px, #4f9440 14px 20px);
  box-shadow: 0 -4px 0 #2f7a3c;
}

/* 6 · Volcán: cráter con lava, brasas y suelo agrietado que brilla */
.nesx__mundo--6 .nesx__paisaje { background: linear-gradient(#1a0f22 0%, #4a1330 40%, #a8321f 78%, #ff7a2e 100%); }
.nesx__mundo--6 .nesx__nube { background: #3a2a36; box-shadow: 14px -12px 0 -2px #3a2a36, 34px -10px 0 -3px #3a2a36; opacity: .55; }
.nesx__mundo--6 .nesx__astro { opacity: 1; right: 15%; top: 15%; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #ffd08a, #ff7a3c 60%, #e8431f); box-shadow: 0 0 30px rgba(255,90,40,.6); }
/* volcán central con cráter */
.nesx__mundo--6 .nesx__colina--a {
  left: -6%; width: 74%; height: 52%; bottom: 11.5%; background: linear-gradient(#3a2230, #1c1220);
  clip-path: polygon(0 100%, 34% 34%, 42% 22%, 44% 30%, 56% 30%, 58% 22%, 66% 34%, 100% 100%);
}
/* brasa del cráter */
.nesx__mundo--6 .nesx__colina--a::before {
  content: ""; position: absolute; left: 44%; top: 22%; width: 12%; height: 8%; border-radius: 50%;
  background: radial-gradient(circle, #fff2b0, #ff8a2e 60%, #ff4d1f); box-shadow: 0 0 18px 4px rgba(255,90,30,.7);
}
/* lava que baja del cráter */
.nesx__mundo--6 .nesx__colina--a::after {
  content: ""; position: absolute; left: 49%; top: 28%; width: 5px; height: 40%;
  background: linear-gradient(#ffd15c, #ff5b28); box-shadow: -14px 8px 0 -1px #ff7c32, 12px 14px 0 -1px #ff9d3e;
}
.nesx__mundo--6 .nesx__colina--b { right: -10%; width: 52%; height: 34%; bottom: 11.5%; background: #241826; clip-path: polygon(0 100%, 46% 8%, 54% 8%, 100% 100%); }
/* brasas que ascienden */
.nesx__mundo--6 .nesx__decor--a {
  opacity: 1; left: 42%; top: 34%; width: 5px; height: 5px; border-radius: 50%; background: #ffb347;
  box-shadow: 20px -30px #ff8a3c, -28px -50px 0 -1px #ffd06b, 44px -70px 0 -1px #ff6a2e, 10px -92px 0 -2px #ffb347;
}
/* penacho de humo */
.nesx__mundo--6 .nesx__decor--b {
  opacity: .5; left: 44%; top: 12%; width: 22px; height: 14px; border-radius: 50%; background: #5a4650;
  box-shadow: 10px -12px 0 -3px #5a4650, -8px -18px 0 -5px #4a3844;
}
.nesx__mundo--6 .nesx__suelo { background: repeating-linear-gradient(64deg, #ff8a2e 0 3px, transparent 3px 22px), repeating-linear-gradient(-58deg, #ff5b28 0 3px, transparent 3px 30px), #1a1016; box-shadow: 0 -4px #ff7a2e; }



/* ---- Fondos de recambio (7 a 12): no salen con seis proyectos, pero se
   pueden elegir a mano desde el editor, y entran solos si algún día hay
   más de seis. ---- */

/* 7 · Fábrica · homenaje a Metal Man: engranajes quietos, tuberías y placa
   metálica remachada. */
.nesx__mundo--7 .nesx__paisaje {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #202844, #171d33 70%);
}
.nesx__mundo--7 .nesx__nube, .nesx__mundo--7 .nesx__colina { opacity: 0; animation: none; }
/* engranaje grande: un disco con doce dientes recortados */
.nesx__mundo--7 .nesx__astro {
  opacity: 1; right: 12%; top: 12%;
  width: 96px; height: 96px; background: #6d7ea6;
  clip-path: polygon(50% 0, 59% 7%, 71% 4%, 76% 15%, 89% 17%, 89% 30%, 99% 38%, 94% 50%, 99% 62%, 89% 70%, 89% 83%, 76% 85%, 71% 96%, 59% 93%, 50% 100%, 41% 93%, 29% 96%, 24% 85%, 11% 83%, 11% 70%, 1% 62%, 6% 50%, 1% 38%, 11% 30%, 11% 17%, 24% 15%, 29% 4%, 41% 7%);
  box-shadow: inset 0 0 0 8px #55658a;
}
.nesx__mundo--7 .nesx__astro::after {
  content: ""; position: absolute; left: 34px; top: 34px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #171d33; box-shadow: inset 0 0 0 5px #8ea3c9;
}
/* engranaje pequeño, engranado con el grande */
.nesx__mundo--7 .nesx__decor--a {
  opacity: 1; right: 30%; top: 30%;
  width: 52px; height: 52px; background: #55658a;
  clip-path: polygon(50% 0, 63% 8%, 78% 8%, 84% 22%, 96% 32%, 92% 50%, 96% 68%, 84% 78%, 78% 92%, 63% 92%, 50% 100%, 37% 92%, 22% 92%, 16% 78%, 4% 68%, 8% 50%, 4% 32%, 16% 22%, 22% 8%, 37% 8%);
  box-shadow: inset 0 0 0 5px #3f4d6d;
}
/* tuberías que bajan del techo */
.nesx__mundo--7 .nesx__decor--b {
  opacity: 1; left: 10%; top: 0;
  width: 26px; height: 42%;
  background: linear-gradient(90deg, #55658a 0 6px, #8ea3c9 6px 16px, #3f4d6d 16px);
  box-shadow: 44px 0 0 -4px #3f4d6d, 44px 0 0 -6px #6d7ea6;
}
.nesx__mundo--7 .nesx__decor--b::after {
  content: ""; position: absolute; left: -6px; bottom: 0;
  width: 38px; height: 14px; background: #8ea3c9;
  box-shadow: 0 -22px 0 -3px #6d7ea6;
}
/* torres de bloques al fondo */
.nesx__mundo--7 .nesx__decor--c {
  opacity: 1; left: 32%; bottom: 11.5%;
  width: 46px; height: 34%;
  background:
    repeating-linear-gradient(0deg, #3f4d6d 0 22px, #2c3754 22px 24px),
    #3f4d6d;
  box-shadow: 190px 40px 0 0 #2c3754, 340px 16px 0 0 #364261;
}
.nesx__mundo--7 .nesx__suelo {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 3px, transparent 3px 32px),
    repeating-linear-gradient(0deg, #6d7ea6 0 5px, #55658a 5px 22px);
  box-shadow: 0 -4px 0 #8ea3c9;
}


/* 8 · Tormenta: ciudad de noche bajo el rayo. Torres con las ventanas
   encendidas, relámpago ramificado y lluvia en gotas verticales (teseladas,
   como los tiles de la NES). */
.nesx__mundo--8 .nesx__paisaje {
  background-image:
    radial-gradient(1.5px 7px at 50% 30%, rgba(214, 222, 255, .55), transparent 100%),
    radial-gradient(1.5px 5px at 50% 70%, rgba(180, 190, 240, .32), transparent 100%),
    radial-gradient(58% 42% at 32% 16%, rgba(173, 132, 255, .45), transparent 72%),
    linear-gradient(#2a1f57 0%, #1b1440 44%, #100c26 100%);
  background-size: 34px 44px, 22px 30px, 100% 100%, 100% 100%;
  background-position: 0 0, 11px 9px, 0 0, 0 0;
}
/* nubarrones: la nube de Mario, repintada de tormenta */
.nesx__mundo--8 .nesx__nube {
  background: #241c4d; opacity: .95;
  box-shadow: 14px -12px 0 -2px #241c4d, 34px -10px 0 -3px #241c4d, 0 6px 0 0 #1a1439;
}
/* el relámpago: rama principal y una bifurcación */
.nesx__mundo--8 .nesx__astro {
  opacity: 1; left: 26%; top: 6%;
  width: 54px; height: 132px;
  background: linear-gradient(180deg, #fffbe0, #ffe066 42%, #ffab2e);
  clip-path: polygon(62% 0, 22% 44%, 50% 44%, 12% 100%, 76% 38%, 46% 38%, 82% 6%);
  filter: drop-shadow(0 0 14px rgba(255, 224, 102, .8));
}
.nesx__mundo--8 .nesx__astro::after {
  content: ""; position: absolute; left: 40px; top: 46px;
  width: 30px; height: 54px;
  background: linear-gradient(180deg, #ffe066, #ffab2e);
  clip-path: polygon(40% 0, 0 52%, 34% 52%, 8% 100%, 100% 44%, 44% 44%, 92% 4%);
  filter: drop-shadow(0 0 8px rgba(255, 224, 102, .6));
}
/* fogonazo que ilumina las nubes alrededor del rayo */
.nesx__mundo--8 .nesx__decor--c {
  opacity: 1; left: 20%; top: 2%;
  width: 180px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 150, .30), rgba(173, 132, 255, .10) 45%, transparent 70%);
}
/* torres con las ventanas encendidas: dos capas de trama forman la rejilla */
.nesx__mundo--8 .nesx__colina,
.nesx__mundo--8 .nesx__decor--a {
  bottom: 11.5%; clip-path: none;
  background:
    repeating-linear-gradient(90deg, #362a6b 0 8px, transparent 8px 15px, #362a6b 15px 23px),
    repeating-linear-gradient(0deg, #362a6b 0 10px, #ffd15c 10px 16px, #362a6b 16px 26px),
    #362a6b;
  box-shadow: inset 0 4px 0 #574399, inset 0 0 0 2px #211a45;
}
.nesx__mundo--8 .nesx__colina--a { left: 3%; width: 22%; height: 30%; }
.nesx__mundo--8 .nesx__colina--b { right: 5%; width: 26%; height: 24%; }
/* torre central, más alta, con antena y piloto rojo */
.nesx__mundo--8 .nesx__decor--a {
  opacity: 1; left: 36%; width: 17%; height: 44%;
}
.nesx__mundo--8 .nesx__decor--a::before {
  content: ""; position: absolute; left: 50%; top: -26px;
  width: 4px; height: 26px; background: #4a3f7d;
}
.nesx__mundo--8 .nesx__decor--a::after {
  content: ""; position: absolute; left: calc(50% - 4px); top: -32px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #ff5157; box-shadow: 0 0 12px rgba(255, 81, 87, .9);
}
/* torre lejana, difuminada por la lluvia */
.nesx__mundo--8 .nesx__decor--b {
  opacity: .6; right: 26%; bottom: 11.5%;
  width: 13%; height: 34%;
  background:
    repeating-linear-gradient(0deg, #2b2258 0 12px, #7d6ac9 12px 16px, #2b2258 16px 28px),
    #2b2258;
}
/* asfalto mojado: la ciudad se refleja en el suelo */
.nesx__mundo--8 .nesx__suelo {
  background:
    repeating-linear-gradient(90deg, rgba(255, 209, 92, .13) 0 5px, transparent 5px 34px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px),
    linear-gradient(#2a2158, #171134);
  box-shadow: 0 -4px 0 #9b6cf0;
}

/* 9 · Desierto: atardecer cálido, sol de bandas, pirámides y saguaros */
.nesx__mundo--9 .nesx__paisaje { background: linear-gradient(#f6b95f 0%, #f18a5b 44%, #de6a5f 100%); }
.nesx__mundo--9 .nesx__nube { opacity: .4; background: #ffe3b4; box-shadow: 14px -12px 0 -2px #ffe3b4, 34px -10px 0 -3px #ffe3b4; }
/* pirámides lejanas tras las dunas */
.nesx__mundo--9 .nesx__paisaje::before {
  content: ""; position: absolute; left: 44%; bottom: 11.5%; width: 96px; height: 62px;
  background: #cf7a49; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 76px 18px 0 -8px #c26f43;
}
/* sol retro con cortes horizontales */
.nesx__mundo--9 .nesx__astro {
  opacity: 1; right: 14%; top: 12%; width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(#fff2b0, #ffcf67 52%, #ff9e5e);
  box-shadow: 0 0 34px rgba(255,190,110,.5); overflow: hidden;
}
.nesx__mundo--9 .nesx__astro::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 34px; bottom: 0;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(222,106,95,.92) 4px 6px, transparent 6px 7px, rgba(222,106,95,.92) 7px 10px, transparent 10px 15px, rgba(222,106,95,.92) 15px 18px);
}
/* dunas suaves en dos tonos */
.nesx__mundo--9 .nesx__colina { bottom: 11.5%; clip-path: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #d98b45; }
.nesx__mundo--9 .nesx__colina--a { left: -16%; width: 82%; height: 15%; }
.nesx__mundo--9 .nesx__colina--b { right: -18%; width: 78%; height: 11%; background: #c2762f; }
/* cactus saguaro */
.nesx__mundo--9 .nesx__decor--a,
.nesx__mundo--9 .nesx__decor--b {
  opacity: 1; bottom: 11.5%; width: 46px; height: 78px; background: #3c8a54;
  clip-path: polygon(42% 100%, 42% 58%, 18% 58%, 18% 30%, 30% 30%, 30% 45%, 42% 45%, 42% 0, 58% 0, 58% 45%, 70% 45%, 70% 30%, 82% 30%, 82% 58%, 58% 58%, 58% 100%);
  box-shadow: inset -5px 0 rgba(0,0,0,.16);
}
.nesx__mundo--9 .nesx__decor--a { left: 14%; }
.nesx__mundo--9 .nesx__decor--b { right: 24%; width: 36px; height: 60px; }
/* rocas */
.nesx__mundo--9 .nesx__decor--c {
  opacity: 1; right: 13%; bottom: 11.5%; width: 40px; height: 15px;
  background: #b06a3a; border-radius: 12px 14px 0 0; box-shadow: -58px 3px 0 -5px #a05f33;
}
.nesx__mundo--9 .nesx__suelo { background: repeating-linear-gradient(90deg, rgba(150,84,32,.18) 0 3px, transparent 3px 40px), linear-gradient(#e0a05a, #d98f45); box-shadow: 0 -3px #b06a34; }


/* 10 · Ciudad neón (synthwave limpio): sol de bandas, cordillera, dos
   skylines con ventanas ordenadas, palmeras y rejilla en perspectiva.
   (antes: malla amarilla/magenta que resultaba fea y ruidosa) */
.nesx__mundo--10 .nesx__paisaje { background: linear-gradient(#1a1140 0%, #3b1d6e 38%, #a12d7a 72%, #ff5f8d 100%); }
.nesx__mundo--10 .nesx__nube { display: none; }
/* cordillera oscura tras el sol */
.nesx__mundo--10 .nesx__paisaje::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 34%; height: 15%; opacity: .8; background: #2a1550;
  clip-path: polygon(0 100%, 12% 40%, 22% 70%, 34% 20%, 46% 66%, 58% 30%, 70% 72%, 82% 34%, 92% 64%, 100% 100%);
}
/* sol retro con cortes horizontales */
.nesx__mundo--10 .nesx__astro {
  opacity: 1; right: 16%; top: 11%; width: 78px; height: 78px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(#ffe66d 0%, #ff9e5e 55%, #ff5f8d 100%); box-shadow: 0 0 44px rgba(255,120,150,.5);
}
.nesx__mundo--10 .nesx__astro::after {
  content: ""; position: absolute; left: 0; right: 0; top: 42px; bottom: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #3b1d6e 3px 5px, transparent 5px 6px, #3b1d6e 6px 9px, transparent 9px 13px, #3b1d6e 13px 16px);
}
/* skyline lejano: ventanas cian tenues */
.nesx__mundo--10 .nesx__colina--a {
  left: -2%; width: 104%; height: 30%; bottom: 11.5%;
  background: radial-gradient(rgba(120,220,255,.5) 0 1px, transparent 1.6px) 0 0 / 14px 16px, #2a1a52;
  clip-path: polygon(0 100%, 0 60%, 7% 60%, 7% 40%, 14% 40%, 14% 68%, 21% 68%, 21% 30%, 28% 30%, 28% 56%, 35% 56%, 35% 46%, 42% 46%, 42% 64%, 50% 64%, 50% 34%, 57% 34%, 57% 58%, 64% 58%, 64% 42%, 71% 42%, 71% 66%, 78% 66%, 78% 38%, 85% 38%, 85% 60%, 93% 60%, 93% 50%, 100% 50%, 100% 100%);
}
/* skyline cercano: ventanas ámbar */
.nesx__mundo--10 .nesx__colina--b {
  right: -2%; width: 104%; height: 40%; bottom: 11.5%;
  background: radial-gradient(rgba(255,214,120,.85) 0 1.5px, transparent 2px) 0 0 / 12px 15px, #170f38;
  clip-path: polygon(0 100%, 0 40%, 9% 40%, 9% 66%, 17% 66%, 17% 20%, 25% 20%, 25% 54%, 33% 54%, 33% 70%, 41% 70%, 41% 30%, 49% 30%, 49% 60%, 57% 60%, 57% 12%, 65% 12%, 65% 50%, 73% 50%, 73% 68%, 81% 68%, 81% 36%, 89% 36%, 89% 58%, 100% 58%, 100% 100%);
}
/* palmeras (silueta) */
.nesx__mundo--10 .nesx__decor--a,
.nesx__mundo--10 .nesx__decor--b { opacity: 1; bottom: 11.5%; width: 6px; background: #120a2e; }
.nesx__mundo--10 .nesx__decor--a { left: 9%; height: 64px; }
.nesx__mundo--10 .nesx__decor--b { right: 12%; height: 52px; }
.nesx__mundo--10 .nesx__decor--a::before,
.nesx__mundo--10 .nesx__decor--b::before {
  content: ""; position: absolute; left: -20px; top: -8px; width: 46px; height: 24px; background: #120a2e;
  clip-path: polygon(50% 100%, 0 30%, 14% 44%, 24% 8%, 40% 40%, 50% 0, 60% 40%, 76% 8%, 86% 44%, 100% 30%);
}
/* rótulo neón "play" (guiño a profes.tv) */
.nesx__mundo--10 .nesx__decor--c {
  opacity: 1; left: 24%; top: 34%; width: 26px; height: 26px; border: 3px solid #ff67c7; border-radius: 50%; background: transparent;
  box-shadow: 0 0 12px rgba(255,103,199,.7), inset 0 0 8px rgba(255,103,199,.4);
}
.nesx__mundo--10 .nesx__decor--c::before {
  content: ""; position: absolute; left: 9px; top: 6px; width: 0; height: 0; border: 6px solid transparent; border-left: 9px solid #ff67c7; border-right: 0;
}
/* avenida: rejilla neón con horizonte encendido */
.nesx__mundo--10 .nesx__suelo {
  height: 11.5%;
  background:
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(79,231,225,.55) 26px 28px),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(79,231,225,.4) 10px 12px),
    linear-gradient(#241046, #3a0f52);
  box-shadow: 0 -3px #4be7e1, 0 -6px rgba(75,231,225,.4);
}


/* 11 · Noche encantada: luna llena, estrellas, castillo y fuegos fatuos */
.nesx__mundo--11 .nesx__paisaje { background: linear-gradient(#0a1a3a 0%, #12335e 55%, #2a5a6e 100%); }
.nesx__mundo--11 .nesx__nube { background: #7a97a8; box-shadow: 14px -12px 0 -2px #7a97a8, 34px -10px 0 -3px #7a97a8; opacity: .25; }
/* estrellas escasas */
.nesx__mundo--11 .nesx__paisaje::before {
  content: ""; position: absolute; left: 14%; top: 12%; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .85;
  box-shadow: 60px 20px #fff, 130px 50px #cfe0ff, 210px 16px #fff, 280px 44px #fff, 40px 70px #fff, 180px 90px #cfe0ff, 260px 78px #fff, 320px 30px #fff;
}
/* castillo encantado en la colina */
.nesx__mundo--11 .nesx__paisaje::after {
  content: ""; position: absolute; right: 20%; bottom: 24%; width: 64px; height: 46px; background: #0a1728;
  clip-path: polygon(0 100%, 0 46%, 5% 46%, 5% 34%, 10% 34%, 10% 46%, 15% 46%, 15% 34%, 20% 34%, 20% 46%, 26% 46%, 26% 14%, 30% 14%, 30% 22%, 34% 22%, 34% 14%, 38% 14%, 38% 46%, 44% 46%, 44% 34%, 49% 34%, 49% 46%, 54% 46%, 54% 34%, 59% 34%, 59% 46%, 100% 46%, 100% 100%);
}
/* luna llena con cráteres */
.nesx__mundo--11 .nesx__astro {
  opacity: 1; right: 14%; top: 13%; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff7d6, #f2e39c 70%, #e6d182); box-shadow: 0 0 34px rgba(255,244,190,.5);
}
.nesx__mundo--11 .nesx__astro::before {
  content: ""; position: absolute; left: 12px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: rgba(190,170,110,.5);
  box-shadow: 20px 16px 0 -2px rgba(190,170,110,.45), 6px 28px 0 -3px rgba(190,170,110,.4);
}
/* colinas oscuras */
.nesx__mundo--11 .nesx__colina { bottom: 11.5%; clip-path: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #0d2438; }
.nesx__mundo--11 .nesx__colina--a { left: -18%; width: 82%; height: 20%; }
.nesx__mundo--11 .nesx__colina--b { right: -16%; width: 76%; height: 15%; background: #0a1c2e; }
/* árbol pelado */
.nesx__mundo--11 .nesx__decor--a { opacity: 1; left: 12%; bottom: 11.5%; width: 8px; height: 58px; background: #08131f; }
.nesx__mundo--11 .nesx__decor--a::before {
  content: ""; position: absolute; left: -16px; top: -6px; width: 40px; height: 42px; background: #08131f;
  clip-path: polygon(50% 100%, 46% 54%, 26% 30%, 42% 40%, 40% 14%, 50% 30%, 60% 12%, 58% 40%, 74% 30%, 54% 54%, 54% 100%);
}
/* fuegos fatuos */
.nesx__mundo--11 .nesx__decor--b {
  opacity: 1; left: 30%; top: 52%; width: 5px; height: 5px; border-radius: 50%; background: #b9ffd0;
  box-shadow: 0 0 8px 2px rgba(150,255,200,.7), 40px 16px 0 -1px #b9ffd0, 40px 16px 8px 0 rgba(150,255,200,.4), 82px -10px 0 -1px #b9ffd0, 82px -10px 8px 0 rgba(150,255,200,.4);
}
/* murciélago */
.nesx__mundo--11 .nesx__decor--c {
  opacity: 1; right: 30%; top: 26%; width: 20px; height: 9px; background: #0a1524;
  clip-path: polygon(0 40%, 16% 0, 30% 46%, 50% 18%, 70% 46%, 84% 0, 100% 40%, 84% 100%, 50% 58%, 16% 100%);
}
.nesx__mundo--11 .nesx__suelo { background: repeating-linear-gradient(90deg, rgba(5,20,25,.5) 0 3px, transparent 3px 30px), linear-gradient(#14403a, #0d2c28); box-shadow: 0 -4px #082420; }


/* 12 · Escuela: banderines, pizarra, reloj, ventana con sol y pupitres */
.nesx__mundo--12 .nesx__paisaje { background: linear-gradient(#f3d9a8 0 72%, #d9ab6f 72%); box-shadow: inset 0 10px #fff0c8; }
.nesx__mundo--12 .nesx__nube,
.nesx__mundo--12 .nesx__colina { display: none; }
/* guirnalda de banderines */
.nesx__mundo--12 .nesx__paisaje::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 7%; height: 18px;
  background: repeating-linear-gradient(90deg, #e6483d 0 22px, #4aa3d6 22px 44px, #f2b134 44px 66px);
  clip-path: polygon(0 0, 100% 0, 100% 25%, 93.75% 100%, 87.5% 25%, 81.25% 100%, 75% 25%, 68.75% 100%, 62.5% 25%, 56.25% 100%, 50% 25%, 43.75% 100%, 37.5% 25%, 31.25% 100%, 25% 25%, 18.75% 100%, 12.5% 25%, 6.25% 100%, 0 25%);
}
/* manzana sobre el pupitre */
.nesx__mundo--12 .nesx__paisaje::after {
  content: ""; position: absolute; left: 15%; bottom: 20%; width: 14px; height: 13px; border-radius: 50% 50% 48% 48%; background: #e6483d;
  box-shadow: inset -3px -2px rgba(0,0,0,.15);
}
/* reloj de pared */
.nesx__mundo--12 .nesx__astro {
  opacity: 1; right: 9%; top: 12%; width: 46px; height: 46px; border: 5px solid #fff7df; border-radius: 50%;
  background: conic-gradient(from 0deg, #27475a 0 2%, transparent 2% 24%, #27475a 24% 27%, transparent 27% 100%), radial-gradient(circle, #ffffff, #eef4ee);
  box-shadow: 0 4px #b98b52, 0 7px 12px rgba(91,57,32,.22);
}
.nesx__mundo--12 .nesx__astro::after { content: ""; position: absolute; left: 18px; top: 7px; width: 4px; height: 16px; background: #27475a; transform-origin: 50% 14px; transform: rotate(-42deg); }
/* pizarra con tiza */
.nesx__mundo--12 .nesx__decor--a {
  opacity: 1; left: 7%; top: 14%; width: 60%; height: 44%; border: 9px solid #915f38; border-radius: 3px;
  background: linear-gradient(165deg, rgba(255,255,255,.05), transparent 44%), #24564c;
  box-shadow: inset 0 0 0 3px #17392f, 0 6px #6f4321, 0 9px 14px rgba(91,57,32,.25);
}
.nesx__mundo--12 .nesx__decor--a::before {
  content: "¡A JUGAR!"; position: absolute; left: 9%; top: 20%; font-family: var(--nesx-pix); font-size: .62rem; line-height: 1.9;
  color: rgba(245,248,218,.92); text-shadow: 0 0 1px rgba(245,248,218,.4); transform: rotate(-1.5deg);
}
.nesx__mundo--12 .nesx__decor--a::after {
  content: ""; position: absolute; left: 12%; right: 14%; bottom: 22%; height: 3px; background: rgba(245,248,218,.55);
  box-shadow: 0 12px rgba(245,248,218,.3); transform: rotate(1deg);
}
/* ventana con cielo y solecito */
.nesx__mundo--12 .nesx__decor--b {
  opacity: 1; right: 7%; top: 31%; width: 19%; height: 25%; border: 7px solid #fff4d0; border-radius: 2px;
  background: linear-gradient(90deg, transparent 46%, #fff4d0 46% 54%, transparent 54%), linear-gradient(0deg, transparent 46%, #fff4d0 46% 54%, transparent 54%), linear-gradient(#8fd0ef, #d7f3ff);
  box-shadow: 0 4px #b98b52;
}
.nesx__mundo--12 .nesx__decor--b::before {
  content: ""; position: absolute; left: 12%; top: 12%; width: 12px; height: 12px; border-radius: 50%; background: #ffe27a; box-shadow: 0 0 8px rgba(255,220,120,.7);
}
/* fila de pupitres */
.nesx__mundo--12 .nesx__decor--c {
  opacity: 1; left: 10%; bottom: 11.5%; width: 82px; height: 35px; background: #bd7946; border-top: 7px solid #e0a162;
  box-shadow: 145px -8px #bd7946, 145px -15px #e0a162, 290px 2px #bd7946, 290px -5px #e0a162;
}
.nesx__mundo--12 .nesx__decor--c::before {
  content: ""; position: absolute; left: 8px; top: 28px; width: 8px; height: 45px; background: #754528;
  box-shadow: 58px 0 #754528, 145px -8px #754528, 203px -8px #754528, 290px 2px #754528, 348px 2px #754528;
}
.nesx__mundo--12 .nesx__suelo { height: 11.5%; background: repeating-linear-gradient(90deg, rgba(91,57,32,.24) 0 3px, transparent 3px 44px), repeating-linear-gradient(0deg, #b87843 0 16px, #9e6238 16px 19px); box-shadow: 0 -4px #754625; }

/* bandera de nivel completado / moneda de proyecto en juego */
.nesx__bandera {
  position: absolute; right: 9%; bottom: 11.5%; width: 6px; height: 27%;
  background: #2b7a2b;
}
.nesx__bandera::before {
  content: ""; position: absolute; top: -10px; left: -4px;
  width: 14px; height: 14px; background: var(--nesx-amarillo);
}
.nesx__bandera i {
  position: absolute; top: 6px; right: 6px;
  border-top: 14px solid transparent; border-bottom: 14px solid transparent;
  border-right: 30px solid #f4f6f8;
  filter: drop-shadow(-2px 2px 0 rgba(0, 0, 0, .18));
  animation: nesx-ondea 2.6s ease-in-out infinite;
  transform-origin: right center;
}
@keyframes nesx-ondea {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(.86); }
}
.nesx__moneda {
  position: absolute; right: 10%; top: 26%;
  width: 26px; height: 26px;
  animation: nesx-bota 1.8s ease-in-out infinite;
}
.nesx__moneda i {
  position: absolute; inset: 0; border-radius: 8px;
  background: var(--nesx-amarillo);
  box-shadow: inset 0 0 0 4px #d9a921, inset 0 0 0 8px var(--nesx-amarillo);
  animation: nesx-gira-moneda 1.2s steps(4) infinite;
}
@keyframes nesx-gira-moneda {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(.16); }
  100% { transform: scaleX(1); }
}
@keyframes nesx-bota {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

/* --- capturas (fotos) en marco pixelado ---
   La pantalla es 4/3 y la foto también, así que su alto en % coincide con su
   ancho en %: con top 10% y ancho 51% termina en el 61%, y el cuadro de diálogo
   empieza en el 66%: quedan 5 puntos de aire entre los dos, que respiren. Así
   la caja de texto nunca se come la foto, tenga el texto que tenga. El botón de
   pasar fotos va DENTRO del marco (antes colgaba fuera y le robaba sitio). */
.nesx__capturas {
  position: absolute; z-index: 3;
  left: 7%; top: 14.5%;
  width: 46%; aspect-ratio: 4 / 3;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--nesx-noche), 10px 12px 0 rgba(0, 0, 20, .25);
  background: var(--nesx-tinta);
}
.nesx__frame {
  position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s var(--ease);
}
.nesx__frame.is-cur { opacity: 1; }
.nesx__frame img { width: 100%; height: 100%; object-fit: cover; }
.nesx__frame-pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--nesx-pix); font-size: .42rem; letter-spacing: .06em;
  color: var(--nesx-amarillo); background: rgba(10, 10, 18, .88);
  padding: 5px 7px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* botón para adelantar las fotos, pegado dentro de la esquina del marco
   (antes lo hacía la tecla SELECT del mando) */
.nesx__frame-hint {
  position: absolute; z-index: 2; top: 6px; right: 6px;
  font-family: var(--nesx-pix); font-size: .42rem; letter-spacing: .08em;
  color: rgba(255, 255, 255, .9); text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
  background: rgba(10, 10, 18, .78);
  border: 2px solid rgba(255, 255, 255, .35);
  padding: 4px 6px 3px; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.nesx__frame-hint:hover { border-color: var(--nesx-amarillo); color: var(--nesx-amarillo); }
.nesx__frame-hint:focus-visible { outline: 3px solid var(--nesx-amarillo); outline-offset: 2px; }

/* --- placa del proyecto: entidad, tipo y año ---
   Vive en la franja libre a la derecha de las fotos (las capturas terminan
   en el 53% de ancho y el cuadro de diálogo no empieza hasta el 67% de
   alto). Mismo lenguaje que el recuadro RPG: panel oscuro y borde blanco. */
.nesx__placa {
  position: absolute; z-index: 3;
  left: 57%; right: 6.5%; top: 16%;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  background: rgba(10, 10, 18, .88);
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--nesx-noche), 10px 12px 0 rgba(0, 0, 20, .25);
  padding: 13px 14px 12px;
}
.nesx__placa b {
  font-family: var(--nesx-pix); font-size: .52rem; line-height: 1.75;
  letter-spacing: .05em; color: var(--nesx-amarillo);
}
.nesx__placa span {
  font-family: var(--nesx-pix); font-size: .44rem; line-height: 1.9;
  color: #f0f2ff;
}
.nesx__placa i {
  font-style: normal;
  font-family: var(--nesx-pix); font-size: .4rem; letter-spacing: .1em;
  color: var(--nesx-noche); background: var(--nesx-amarillo);
  padding: 4px 7px 3px;
}

@keyframes nesx-parpadeo { 50% { opacity: .15; } }

/* --- cuadro de diálogo RPG ---
   La caja SIEMPRE mide lo mismo (alto fijo en % de la pantalla), llueva o no
   texto: así no crece hacia arriba ni se come las capturas, que quedan justo
   encima. Dentro es una columna: el texto arriba y la fila de botones abajo,
   pegada al suelo del recuadro. */
.nesx__dialogo {
  position: absolute; z-index: 5;
  left: 4.5%; right: 4.5%; bottom: 5%; height: 28%;
  display: flex; flex-direction: column;
  background: rgba(10, 10, 18, .93);
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--nesx-noche);
  padding: 13px 16px 11px;
}
.nesx__dialogo-texto {
  font-family: var(--nesx-pix); font-size: .58rem; line-height: 1.95;
  color: #f0f2ff; cursor: pointer;
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: none;
}
.nesx__dialogo-texto::-webkit-scrollbar { display: none; }
.nesx__vis-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.nesx__cursor {
  display: none; color: var(--nesx-amarillo); margin-left: 6px;
  animation: nesx-parpadeo 1s steps(1) infinite;
}
/* El ▼ solo parpadea si queda otra hoja por leer (lo decide el JS). */
.nesx__nivel.is-escrito .nesx__cursor { display: inline-block; }
/* Pestañita HOJA n/m sobre la esquina del recuadro, como un marcapáginas. */
.nesx__dialogo-pag {
  position: absolute; top: -17px; right: 12px;
  font-family: var(--nesx-pix); font-size: .4rem; letter-spacing: .1em;
  color: var(--nesx-amarillo); background: rgba(10, 10, 18, .95);
  border: 3px solid #fff; padding: 4px 7px 3px;
  text-transform: uppercase;
}
.nesx__dialogo-pag:empty { display: none; }
/* Botones del recuadro, en el mismo orden que el mando: «Volver» (A) a la
   izquierda de «Seguir leyendo» (B), los dos pegados a la derecha; el enlace
   del proyecto se va al extremo izquierdo. */
.nesx__dialogo-acciones {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 6px 20px; margin-top: 10px;
}
.nesx__accion--link { margin-right: auto; }
.nesx__accion {
  font-family: var(--nesx-pix); font-size: .55rem; letter-spacing: .04em;
  color: var(--nesx-verde); background: none; border: 0; padding: 3px 0;
  cursor: pointer; text-decoration: none;
  transition: transform .2s var(--ease), color .2s;
}
.nesx__accion:hover, .nesx__accion:focus-visible { color: #c4ffd6; transform: translateX(3px); }
.nesx__accion:focus-visible { outline: 2px solid var(--nesx-verde); outline-offset: 4px; }
.nesx__accion--link { color: var(--nesx-celeste); }
.nesx__accion--link:hover, .nesx__accion--link:focus-visible { color: #d3f1ff; }
.nesx__accion--volver { color: var(--nesx-amarillo); }
.nesx__accion--volver:hover, .nesx__accion--volver:focus-visible { color: #fff3bd; transform: translateX(-3px); }
.nesx__accion--volver:focus-visible { outline-color: var(--nesx-amarillo); }
/* Tecla del mando dibujada dentro del botón del diálogo: [A] / [B]. */
.nesx__tecla {
  display: inline-block; margin-left: 7px; padding: 3px 6px 2px;
  font-size: .42rem; line-height: 1;
  border: 2px solid currentColor; border-radius: 5px;
}

/* --- pantalla negra entre niveles y arranque de cartucho --- */
.nesx__inter, .nesx__boot {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: #000; text-align: center;
  font-family: var(--nesx-pix);
}
/* pantalla negra de carga: "CARGANDO PROYECTO..." y el título que viene */
.nesx__inter-carga { font-size: .9rem; color: #fff; letter-spacing: .1em; }
.nesx__inter-titulo {
  font-size: .58rem; color: var(--nesx-amarillo); letter-spacing: .12em;
  line-height: 1.9; max-width: 78%; text-align: center;
}
.nesx__boot-marca { font-size: .9rem; color: #fff; letter-spacing: .06em; animation: nesx-boot .5s var(--ease) both; }
.nesx__boot-anio { font-size: .5rem; color: #8a8f96; letter-spacing: .3em; }
@keyframes nesx-boot {
  from { transform: scale(.55); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* --- confeti del código Konami + rótulo secreto --- */
.nesx__confeti { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.nesx__confeti i { position: absolute; top: -14px; width: 9px; height: 9px; }
.nesx__confeti.is-fiesta i { animation-name: nesx-cae; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes nesx-cae {
  0% { top: -14px; transform: rotate(0); }
  100% { top: 104%; transform: rotate(560deg); }
}
.nesx__secreto {
  position: absolute; z-index: 10; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  font-family: var(--nesx-pix); font-size: .62rem; line-height: 1.9; text-align: center;
  color: var(--nesx-amarillo); background: rgba(10, 10, 18, .94);
  border: 3px solid var(--nesx-amarillo);
  padding: 14px 18px; max-width: 78%;
  animation: nesx-parpadeo 1.1s steps(1) infinite;
}

/* --- panel bajo la pantalla: los mandos y el altavoz --- */
.nesx__panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 20px;
  /* hay hueco abajo porque bajo la cruceta va serigrafiado CAMBIO DE PROYECTO */
  padding: 16px 12px 22px;
}
.nesx__altavoz {
  flex: 1; height: 12px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #17171c 0 4px, transparent 4px 9px);
  opacity: .8;
}
/* el interruptor de sonido, en la esquina superior derecha del televisor */
.nesx__sonido {
  position: absolute; top: 12px; right: 22px; z-index: 2;
  font-family: var(--nesx-pix); font-size: .48rem; letter-spacing: .06em;
  color: #8a8f96; background: #1a1a20;
  border: 2px solid #4a4a52; border-radius: 4px;
  padding: 7px 9px 6px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.nesx__sonido:hover { color: #c9cdd3; }
.nesx__sonido.is-on { color: var(--nesx-verde); border-color: var(--nesx-verde); }
.nesx__sonido:focus-visible { outline: 2px solid var(--nesx-verde); outline-offset: 3px; }

/* ------------------------------------------------------------
   LA CONSOLA: el mueble bajo el televisor, con su ranura arriba
   ------------------------------------------------------------
   Es la diana de los cartuchos. Orden de apilado dentro de
   .nesx__consola (que NO lleva z-index propio a propósito, para no
   crear un contexto que encierre a sus hijos):
     .nesx__ranura   z-index 1 → la boca oscura, detrás
     .nesx__insertado z-index 2 → el cartucho, asomando por arriba
     .nesx__caja     z-index 3 → la carcasa; su ::before es el labio
                                 de plástico que tapa el pie del
                                 cartucho y lo hace parecer metido.
   Si a .nesx__consola le pusieras z-index, el cartucho se vería
   flotando SOBRE la consola en vez de dentro de ella.
   ------------------------------------------------------------ */
.nesx__consola {
  position: relative;
  width: 100%;
  /* hueco para que el cartucho insertado asome sin pisar la estantería */
  margin: 122px auto 0;
}
.nesx__ranura {
  position: relative; z-index: 1;
  display: block;
  width: 172px;
  height: 34px;
  margin: 0 auto -6px;
  background: linear-gradient(180deg, #08080c, #1d1d25);
  border-radius: 7px 7px 0 0;
  box-shadow: inset 0 10px 18px rgba(0, 0, 0, 1), inset 0 0 0 2px #35353f;
  transition: box-shadow .18s var(--ease);
}
.nesx__ranura-boca {
  position: absolute; left: 12px; right: 12px; top: 8px; height: 6px;
  background: #000;
  border-radius: 3px;
  transition: background .18s var(--ease);
}
/* la ranura se enciende cuando traes un cartucho encima */
.nesx__ranura.is-diana {
  box-shadow: inset 0 10px 18px rgba(0, 0, 0, 1), inset 0 0 0 2px var(--nesx-amarillo), 0 0 34px rgba(255, 226, 92, .5);
}
.nesx__ranura.is-diana .nesx__ranura-boca { background: #3d3418; }

/* El cartucho que está metido: mismo aspecto que los de la estantería, pero
   más alto, para que asome por encima de la boca y se lea su etiqueta. El pie
   queda escondido detrás de la carcasa.
   Ojo: lleva también la clase .nesx__cartucho, que se define más abajo con
   position: relative. Por eso estas reglas doblan la clase (misma
   especificidad + más adelante en el archivo ganaría la otra). */
.nesx__cartucho.nesx__insertado {
  position: absolute; z-index: 2;
  left: 10px; right: 10px; bottom: -12px;
  aspect-ratio: 1 / 1;   /* cuadrado, como los de la estantería */
  cursor: default; pointer-events: none;
}
.nesx__cartucho.nesx__insertado:hover { transform: none; }
.nesx__insertado.is-entrando { animation: nesx-entra .42s var(--ease); }
@keyframes nesx-entra {
  0% { transform: translateY(-46px); }
  62% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}
.nesx__insertado.is-saliendo { animation: nesx-sale .18s var(--ease) forwards; }
@keyframes nesx-sale {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}

.nesx__caja {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #e2dfd8, #cfccc4 30%, #a8a49b);
  border-radius: 14px 14px 18px 18px;
  padding: 20px 20px 22px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .8),
    inset 0 -4px 0 rgba(0, 0, 0, .2),
    0 24px 50px rgba(0, 0, 0, .6);
}
/* el labio de la ranura: reborde de plástico que oculta el pie del cartucho */
.nesx__caja::before {
  content: "";
  position: absolute; left: 50%; top: -5px;
  transform: translateX(-50%);
  width: 194px; height: 17px;
  background: linear-gradient(180deg, #5f5c55 0 4px, #e2dfd8 4px, #cfccc4 100%);
  border-radius: 5px 5px 7px 7px;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .25);
}
/* la hendidura de la carcasa, como en las consolas de verdad */
.nesx__caja::after {
  content: "";
  position: absolute; left: 50%; bottom: 7px;
  transform: translateX(-50%);
  width: 62%; height: 3px;
  background: rgba(0, 0, 0, .13);
  border-radius: 2px;
}
.nesx__consola.is-golpe .nesx__caja { animation: nesx-golpe .16s var(--ease); }
@keyframes nesx-golpe {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(4px); }
}
.nesx__caja-marca {
  margin-right: auto;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: #6d6960;
}
.nesx__caja-marca b { color: #a8272d; font-weight: 700; }
/* el icono de la marca, serigrafiado en la carcasa */
.nesx__caja-icono {
  width: 26px; height: 26px; flex: none;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
}
.nesx__caja-rejilla {
  width: 54px; height: 17px;
  background: repeating-linear-gradient(90deg, #9d998f 0 3px, transparent 3px 8px);
  border-radius: 2px;
}
.nesx__caja-led {
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff4b52;
  box-shadow: 0 0 12px rgba(255, 75, 82, .9), inset 0 0 3px rgba(255, 255, 255, .5);
}
.nesx__consola-pista {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: #7d828c; text-align: center; line-height: 1.7;
}

/* El cartucho que viaja con el dedo o el ratón. Vive en <body> para que
   no lo recorten ni el carrusel de cartuchos (overflow-x en tablet) ni
   el overflow de la sección; por eso repite aquí sus variables. */
.nesx-fantasma {
  --nesx-pix: "Press Start 2P", var(--font-mono);
  position: fixed; z-index: 9999;
  margin: 0; padding: 0; pointer-events: none;
  display: flex; flex-direction: column-reverse; text-align: left;
  background: linear-gradient(180deg, #a6a6ae, #8d8d95);
  border-radius: 6px 6px 10px 10px;
  overflow: hidden;
  box-shadow: inset 0 -4px 0 #6e6e76, 0 28px 50px rgba(0, 0, 0, .6);
  will-change: transform;
}
.nesx__cartucho.is-cogido { opacity: .32; }

/* --- lateral: cartuchos + consola + mando ---
   Los tres viven en la columna derecha. Los cartuchos son CUADRADOS y van en
   rejilla de tres, con los contactos abajo (column-reverse): así entran de
   morro en la ranura y lo que se ve asomando es su etiqueta. La tira de color
   de la etiqueta la pinta el renderer con el color del mundo del proyecto. */
.nesx__lateral { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nesx__cartuchos {
  background: #1b1b22;
  border-radius: 18px;
  padding: 16px 16px 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05);
}
.nesx__cartuchos-rotulo {
  grid-column: 1 / -1;
  font-family: var(--nesx-pix); font-size: .48rem; letter-spacing: .34em;
  color: #55565e; margin: 2px 0 3px 2px;
}
.nesx__cartucho {
  position: relative;
  display: flex; flex-direction: column-reverse; text-align: left;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #a6a6ae, #8d8d95);
  border: 0; border-radius: 8px 8px 3px 3px;
  padding: 0; cursor: grab; overflow: hidden;
  box-shadow: inset 0 -4px 0 #6e6e76, 0 6px 14px rgba(0, 0, 0, .35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nesx__cartucho:hover { transform: translateY(-3px); }
.nesx__cartucho:active { cursor: grabbing; }
.nesx__cartucho:focus-visible { outline: 3px solid var(--nesx-amarillo); outline-offset: 3px; }
/* los contactos: la parte que se traga la consola */
.nesx__cartucho-muesca {
  height: 15px; flex: none;
  margin: 0 9px;
  background: repeating-linear-gradient(90deg, #74747c 0 3px, #8d8d95 3px 8px);
  border-top: 2px solid #74747c;
  border-radius: 0 0 3px 3px;
}
.nesx__cartucho-etiqueta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: #f0e8d7;
  margin: 9px 9px 6px;
  border-radius: 3px;
  border-top: 5px solid var(--red); /* el renderer la repinta con el color del mundo */
  padding: 8px 9px 7px;
}
.nesx__cartucho-etiqueta b {
  font-family: var(--font-display); font-weight: 700; font-size: .74rem;
  line-height: 1.2; color: #14151d; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.nesx__cartucho-etiqueta i {
  display: block; font-style: normal; margin-top: auto; padding-top: 6px;
  font-family: var(--nesx-pix); font-size: .4rem; letter-spacing: .08em;
  color: #8a8071; text-transform: uppercase;
}
.nesx__cartucho.is-cur {
  transform: translateY(4px);
  box-shadow: inset 0 -2px 0 #6e6e76, 0 2px 6px rgba(0, 0, 0, .4);
}
.nesx__cartucho.is-cur::after {
  content: "";
  position: absolute; left: 12%; right: 12%; bottom: 0; height: 3px;
  background: #ff5157; box-shadow: 0 0 12px rgba(255, 81, 87, .9);
}

/* --- mandos dentro del televisor: cruceta + A/B ---
   Antes eran un mando NES aparte, con SELECT y START. Ahora viven en el panel
   inferior de la tele y son solo tres botones: la cruceta cambia de proyecto
   (así lo dice el rótulo serigrafiado debajo), B —el de la derecha— sigue
   leyendo y A —el de la izquierda— vuelve atrás. Al ir sobre el chasis oscuro,
   la cruceta es de plata (sobre plástico negro no se veía) y las letras, rosa. */
.nesx__dpad { position: relative; width: 74px; height: 74px; flex: none; }
.nesx__dpad-eje {
  position: absolute; left: 25px; top: 25px; width: 24px; height: 24px;
  background: radial-gradient(circle at 40% 34%, #cbc6bd, #a5a099);
}
.nesx__dpad-btn {
  position: absolute; width: 25px; height: 25px;
  background: #cbc6bd; border: 0; border-radius: 4px;
  color: #2b2b2e; font-size: .56rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 0 #8f8a81;
  cursor: pointer;
  transition: transform .12s;
}
.nesx__dpad-btn--l { left: 0; top: 25px; }
.nesx__dpad-btn--r { right: 0; top: 25px; }
.nesx__dpad-btn--u { top: 0; left: 25px; cursor: default; }
.nesx__dpad-btn--d { bottom: 0; left: 25px; cursor: default; }
.nesx__dpad-btn--l:hover, .nesx__dpad-btn--r:hover { transform: scale(1.08); }
.nesx__dpad-btn--l:active, .nesx__dpad-btn--r:active { transform: scale(.9); box-shadow: inset 0 2px 3px #8f8a81; }
.nesx__dpad-btn:focus-visible { outline: 3px solid var(--nesx-amarillo); outline-offset: 3px; }
.nesx__ab { display: flex; gap: 14px; flex: none; }
.nesx__ab-grupo { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.nesx__btn-ab {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 36% 30%, #e85056, #a8272d);
  box-shadow: inset 0 -5px 7px #7e161b, 0 3px 6px rgba(0, 0, 0, .3);
  transition: transform .12s;
}
.nesx__btn-ab:active { transform: scale(.9); box-shadow: inset 0 3px 6px #7e161b; }
.nesx__btn-ab:focus-visible { outline: 3px solid var(--nesx-amarillo); outline-offset: 3px; }
.nesx__ab-grupo i {
  font-style: normal; font-family: var(--nesx-pix); font-size: .46rem; color: #ff9b9f;
}
/* Rotulitos de uso serigrafiados en el chasis: qué hace cada botón. */
.nesx__uso {
  font-style: normal; font-family: var(--nesx-pix);
  font-size: .34rem; letter-spacing: .12em; color: #7d828c;
  text-transform: uppercase;
}
.nesx__uso--dpad {
  position: absolute; left: 50%; top: calc(100% + 5px);
  transform: translateX(-50%); white-space: nowrap;
}
.nesx__pista {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: #7d828c; text-align: center; line-height: 1.8;
}

/* --- responsive --- */
@media (max-width: 1080px) {
  .nesx__sala { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .nesx__lateral { gap: 20px; }
  .nesx__consola { margin-top: 116px; }
}
@media (max-width: 640px) {
  .nesx-section { padding: 84px 0 90px; }
  .nesx__cartuchos { gap: 9px; padding: 14px 12px 16px; }
  .nesx__cartucho-etiqueta { margin: 7px 7px 5px; padding: 7px 7px 6px; }
  .nesx__cartucho-etiqueta b { font-size: .64rem; }
  .nesx__cartucho-etiqueta i { font-size: .34rem; }
  .nesx__consola { width: 100%; margin-top: 108px; }
  .nesx__caja { padding: 15px 14px 17px; gap: 10px; }
  .nesx__caja-marca { font-size: .6rem; letter-spacing: .1em; }
  .nesx__caja-rejilla { width: 38px; }
  .nesx__consola-pista { font-size: .68rem; }
  .nesx__pantalla { aspect-ratio: auto; min-height: 480px; }
  .nesx__hud { font-size: .46rem; padding: 12px 12px 0; }
  .nesx__hud-mundo { font-size: .54rem; gap: 7px; padding: 7px 8px 6px; max-width: 68%; }
  .nesx__hud-punto { width: 7px; height: 7px; }
  .nesx__capturas { width: 74%; left: 6%; top: 14%; }
  /* En el móvil las fotos van a lo ancho y no queda hueco para la placa. */
  .nesx__placa { display: none; }
  .nesx__dialogo { left: 3.5%; right: 3.5%; bottom: 3.5%; height: 36%; padding: 12px 13px 10px; }
  .nesx__dialogo-texto { font-size: .52rem; }
  .nesx__panel { gap: 12px; padding: 14px 6px 14px; }
  .nesx__dpad { width: 62px; height: 62px; }
  .nesx__dpad-eje { left: 21px; top: 21px; width: 20px; height: 20px; }
  .nesx__dpad-btn { width: 21px; height: 21px; }
  .nesx__dpad-btn--l, .nesx__dpad-btn--r { top: 21px; }
  .nesx__dpad-btn--u, .nesx__dpad-btn--d { left: 21px; }
  .nesx__btn-ab { width: 32px; height: 32px; }
  .nesx__ab { gap: 10px; }
  .nesx__uso { font-size: .3rem; }
  .nesx__dialogo-pag { font-size: .36rem; top: -15px; right: 8px; }
  .nesx__tecla { font-size: .38rem; }
}

/* Con reduced-motion: sin deriva, sin parpadeos, sin caída de confeti;
   los cortes de nivel son instantáneos (los gestiona initNesProyectos). */
@media (prefers-reduced-motion: reduce) {
  .nesx__nube, .nesx__bandera i, .nesx__moneda, .nesx__moneda i,
  .nesx__hud-mundo.is-vivo .nesx__hud-punto, .nesx__cursor, .nesx__secreto,
  .nesx__boot-marca, .nesx__confeti.is-fiesta i,
  .nesx__insertado.is-entrando, .nesx__insertado.is-saliendo,
  .nesx__consola.is-golpe .nesx__caja,
  .nesx__pantalla.is-static .nesx__static { animation: none; }
  .nesx__pantalla.is-static .nesx__static { opacity: 0; }
  .nesx__frame { transition: none; }
}

/* ============================================================
   EL ECUALIZADOR DE TOMLINSON · ecualizador.html
   ------------------------------------------------------------
   Tres piezas: la portada (hero--ecualizador, con mini-mezclador
   bajo el título), la intro «cabina de sonido» (ecu-intro-*: panel
   con espectro animado, módulos de rack plateados y reglas con
   pilotos LED) y la mesa de mezclas en tres pasos numerados
   (ecu-paso): 1 el programa de estrategias, 2 los 9 faders
   verticales rotados con LEDs, VU de aguja, LCD ámbar y memorias
   (ecu-desk), y 3 la cinta impresa del prompt (ecu-tape, papel de
   impresora con arrastre perforado) con la partitura del contexto
   integrada para personalizarlo (ecu-tape__context).
   Basado en Tomlinson, C. A. (2014), The differentiated classroom
   (2.ª ed.), ASCD.
   ============================================================ */

/* ---------- portada ---------- */

.hero--ecualizador {
  position: relative;
  background:
    radial-gradient(130% 120% at 50% -20%, #ffffff 0%, #fafafc 52%, var(--gray-bg) 100%);
}

.hero--ecualizador .hero__title {
  background: linear-gradient(178deg, var(--ink) 30%, #35464f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .14em;
}

.hero-ecu__mixer {
  display: inline-flex;
  gap: 16px;
  margin: 22px auto 4px;
  padding: 14px 20px 12px;
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f1f2f4);
  box-shadow: 0 14px 34px rgba(15, 28, 34, .1), inset 0 1px 0 #fff;
}

.hero-ecu__ch {
  position: relative;
  width: 20px;
  height: 72px;
}

.hero-ecu__ch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #d6dbdf;
  box-shadow: inset 0 1px 2px rgba(15, 28, 34, .25);
}

.hero-ecu__cap {
  position: absolute;
  left: 0;
  bottom: var(--v, 50%);
  width: 20px;
  height: 11px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, .55) 42% 58%, transparent 58%),
    linear-gradient(180deg, #3d4d56, #16232a);
  box-shadow: 0 3px 6px rgba(15, 28, 34, .35);
  animation: hero-ecu-set 1s var(--ease) both;
  animation-delay: calc(.25s + var(--i, 0) * .12s);
}

.hero-ecu__ch:nth-child(3) .hero-ecu__cap {
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, .5) 42% 58%, transparent 58%),
    linear-gradient(180deg, #d9545a, #a3242a);
}

@keyframes hero-ecu-set {
  from { bottom: 46%; }
  to   { bottom: var(--v, 50%); }
}

/* ---------- intro · cabina de sonido ---------- */

.ecu-intro-section { background: var(--white); }

.ecu-intro__head { text-align: center; max-width: 760px; margin: 0 auto 34px; }

.ecu-cabina {
  --cabina-ink: #e8f0f4;
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 26px;
  padding: 0 0 6px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(180deg, #1c2730 0%, #131d24 60%, #0f181e 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 30px 70px rgba(15, 28, 34, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}

.ecu-cabina__chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #93a7b2;
}

.ecu-cabina__rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ff8a8f;
  font-weight: 700;
}

.ecu-cabina__rec i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5d63;
  box-shadow: 0 0 10px rgba(255, 93, 99, .9);
  animation: ecu-rec-blink 1.6s ease-in-out infinite;
}

.ecu-cabina__name { flex: 1; text-align: center; }
.ecu-cabina__meta { color: #6d8290; }

@keyframes ecu-rec-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* La onda de la cabina: forma estática y serena, centrada en su eje como la
   onda de un pódcast. Una capa gemela en rojo se descubre al paso de una
   línea de reproducción que recorre el panel muy despacio (48 s por vuelta). */
.ecu-cabina__wave {
  position: relative;
  height: 118px;
  margin: 18px 24px 0;
}

.ecu-cabina__wave-bars {
  position: absolute;
  inset: 10px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ecu-cabina__wave-bars i {
  flex: 1;
  min-width: 2px;
  height: var(--h, 40%);
  border-radius: 99px;
  background: #37464f;
}

.ecu-cabina__wave-bars--played {
  clip-path: inset(0 100% 0 0);
  animation: ecu-wave-play 48s linear infinite;
}

.ecu-cabina__wave-bars--played i {
  background: linear-gradient(180deg, #e4767b, #b3282e);
}

.ecu-cabina__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: #ff5d63;
  box-shadow: 0 0 12px rgba(255, 93, 99, .65);
  animation: ecu-head-move 48s linear infinite;
}

@keyframes ecu-wave-play {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes ecu-head-move {
  from { left: 0; }
  to   { left: calc(100% - 2px); }
}

.ecu-cabina__lead {
  margin: 6px 0 0;
  padding: 18px 28px 26px;
  color: var(--cabina-ink);
  font-size: 1.08rem;
  line-height: 1.75;
}

/* módulos de rack plateados */

.ecu-racks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 980px;
  margin: 26px auto 0;
}

.ecu-rack {
  position: relative;
  border-radius: 16px;
  padding: 22px 24px 24px;
  background:
    repeating-linear-gradient(90deg, rgba(15, 28, 34, .016) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #fbfbfc 0%, #eef0f2 100%);
  border: 1px solid rgba(15, 28, 34, .1);
  box-shadow: 0 14px 34px rgba(15, 28, 34, .08), inset 0 1px 0 #fff;
}

.ecu-rack__screw {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 0 42%, rgba(15, 28, 34, .55) 42% 58%, transparent 58%),
    radial-gradient(circle at 35% 30%, #ffffff, #b9c0c6 60%, #8d969d);
  box-shadow: inset 0 1px 2px rgba(15, 28, 34, .4);
}

.ecu-rack__screw--tl { top: 10px; left: 10px; }
.ecu-rack__screw--tr { top: 10px; right: 10px; }
.ecu-rack__screw--bl { bottom: 10px; left: 10px; }
.ecu-rack__screw--br { bottom: 10px; right: 10px; }

.ecu-rack__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ecu-rack__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg, #d9545a, var(--red));
  box-shadow: 0 8px 18px rgba(194, 51, 57, .3);
}

.ecu-rack__icon svg { width: 24px; height: 24px; }

.ecu-rack__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7d8b93;
}

.ecu-rack__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--ink);
}

.ecu-rack__text {
  margin: 0;
  color: #4c5a62;
  font-size: .95rem;
  line-height: 1.65;
}

/* reglas de cabina: tira oscura con pilotos */

.ecu-reglas {
  max-width: 980px;
  margin: 26px auto 0;
  border-radius: 18px;
  padding: 18px 24px 20px;
  background: linear-gradient(180deg, #17222a, #10191f);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 20px 44px rgba(15, 28, 34, .25);
}

.ecu-reglas__label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #f0b64b;
}

.ecu-reglas__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ecu-regla { display: flex; gap: 12px; align-items: flex-start; }

.ecu-regla__led {
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  background: #ff5d63;
  box-shadow: 0 0 12px rgba(255, 93, 99, .8);
  animation: ecu-led-pulse 2.6s ease-in-out infinite;
  animation-delay: calc(var(--ri, 0) * .5s);
}

@keyframes ecu-led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.ecu-regla strong {
  display: block;
  color: #f2f6f8;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.ecu-regla p {
  margin: 0;
  color: #9fb1bb;
  font-size: .85rem;
  line-height: 1.55;
}

.ecu-cite {
  max-width: 980px;
  margin: 26px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 28, 34, .1);
  color: var(--ink-soft);
  font-size: .82rem;
  font-style: italic;
  text-align: center;
}

/* ---------- la mesa de mezclas ---------- */

.ecu-mesa-section {
  background:
    radial-gradient(120% 80% at 50% 0%, #ffffff 0%, var(--gray-bg) 78%);
}

.ecu-mesa__head { text-align: center; max-width: 820px; margin: 0 auto 34px; }

.ecu-mesa__intro { color: #4c5a62; line-height: 1.7; margin: 14px 0 0; }

.ecu-desk {
  --ecu-heat: .5;
  position: relative;
  border-radius: 30px;
  padding: 24px 26px 26px;
  background:
    radial-gradient(130% 100% at 50% -12%, rgba(255, 255, 255, .09), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #202b33 0%, #162027 55%, #111a20 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    0 40px 90px rgba(15, 28, 34, .4),
    0 0 calc(18px + 46px * var(--ecu-heat)) rgba(194, 51, 57, calc(.05 + .16 * var(--ecu-heat))),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.ecu-desk__brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 4px 16px;
}

.ecu-desk__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: .06em;
  font-size: 1.05rem;
  color: #f3f6f8;
}

.ecu-desk__sub {
  flex: 1;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8fa3ae;
}

.ecu-desk__air {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 93, 99, .5);
  background: rgba(194, 51, 57, .14);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: #ffb3b6;
}

.ecu-desk__air i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5d63;
  box-shadow: 0 0 10px rgba(255, 93, 99, .95);
  animation: ecu-rec-blink 1.4s ease-in-out infinite;
}

/* los pasos de la maniobra: números LED serigrafiados en la mesa */

.ecu-paso {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  margin-right: 9px;
  border-radius: 50%;
  border: 1px solid rgba(240, 182, 75, .5);
  background: linear-gradient(180deg, #2a363e, #171f25);
  box-shadow: 0 0 10px rgba(240, 182, 75, .22), inset 0 1px 2px rgba(0, 0, 0, .5);
  color: #f0b64b;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* paso 1: el programa (la estrategia didáctica) manda y va antes
   que los faders; debajo de los chips, la ficha de la estrategia
   elegida (qué es y cuándo usarla, la pinta selectStrategy) */

.ecu-desk__programa { margin-bottom: 16px; }

.ecu-programa__label { display: inline-flex; align-items: center; }

.ecu-programa__desc {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: #9db0ba;
}

.ecu-programa__desc:empty { display: none; }

.ecu-programa__desc em { font-style: normal; color: #7d919c; }

.ecu-programa__desc em strong { color: #f0b64b; }

/* paso 2: el rótulo sobre el tablero de faders */

.ecu-desk__step {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #f0b64b;
}

/* tablero: canales + master */

.ecu-desk__board {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 16px;
  align-items: stretch;
}

.ecu-desk__channels {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  padding: 14px 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .06);
}

.ecu-ch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ecu-ch__top {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ecu-ch__code {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #8fa3ae;
}

.ecu-ch__info {
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #46596386;
  background: rgba(255, 255, 255, .05);
  color: #b9c9d2;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.ecu-ch__info:hover,
.ecu-ch__info:focus-visible { color: #fff; border-color: #d9545a; background: rgba(194, 51, 57, .25); }

.ecu-ch__pole {
  min-height: 2.1em;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #cdd9e0;
}

.ecu-ch__pole--min { color: #93a7b2; }

.ecu-ch__slot {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ecu-ch__leds {
  display: flex;
  flex-direction: column-reverse;
  gap: 9px;
  padding: 4px 0;
}

.ecu-ch__leds i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #202c33;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}

.ecu-ch__leds i.is-on:nth-child(1),
.ecu-ch__leds i.is-on:nth-child(2) { background: #35c08e; box-shadow: 0 0 8px rgba(53, 192, 142, .7); }
.ecu-ch__leds i.is-on:nth-child(3) { background: #f0b64b; box-shadow: 0 0 8px rgba(240, 182, 75, .7); }
.ecu-ch__leds i.is-on:nth-child(4),
.ecu-ch__leds i.is-on:nth-child(5) { background: #ff5d63; box-shadow: 0 0 9px rgba(255, 93, 99, .8); }

.ecu-ch__rail {
  position: relative;
  width: 40px;
  height: 190px;
}

.ecu-ch__rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 6px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #070d10;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .06);
}

.ecu-ch__rail::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 12px;
  bottom: 12px;
  background: repeating-linear-gradient(180deg,
    rgba(232, 224, 207, .28) 0 1px,
    transparent 1px calc(25% - .2px));
  pointer-events: none;
}

.ecu-fader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 40px;
  margin: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: grab;
}

.ecu-fader:active { cursor: grabbing; }

.ecu-fader::-webkit-slider-runnable-track { height: 40px; background: transparent; }

.ecu-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 38px;
  margin-top: 1px;
  border: none;
  border-radius: 4px;
  background:
    linear-gradient(0deg, transparent 0 46%, #10181d 46% 54%, transparent 54%),
    linear-gradient(90deg, #29343b 0%, #55646d 12%, #e8edf0 50%, #55646d 88%, #29343b 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.ecu-fader::-moz-range-track { height: 40px; background: transparent; }

.ecu-fader::-moz-range-thumb {
  width: 22px;
  height: 38px;
  border: none;
  border-radius: 4px;
  background:
    linear-gradient(0deg, transparent 0 46%, #10181d 46% 54%, transparent 54%),
    linear-gradient(90deg, #29343b 0%, #55646d 12%, #e8edf0 50%, #55646d 88%, #29343b 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.ecu-fader:focus-visible { outline: none; }

.ecu-fader:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55), 0 0 0 3px rgba(217, 84, 90, .8);
}

.ecu-fader:focus-visible::-moz-range-thumb {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55), 0 0 0 3px rgba(217, 84, 90, .8);
}

.ecu-ch__val {
  min-width: 26px;
  padding: 2px 4px;
  border-radius: 6px;
  border: 1px solid #2b3942;
  background: #0a1114;
  color: #ffd489;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
}

/* módulo master */

.ecu-master {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .06);
}

.ecu-vu {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7efdb, #eee2c4);
  box-shadow: inset 0 2px 8px rgba(94, 74, 24, .3), 0 6px 16px rgba(0, 0, 0, .35);
}

.ecu-vu__dial {
  position: relative;
  width: 150px;
  height: 78px;
  overflow: hidden;
}

.ecu-vu__dial::before {
  content: "";
  position: absolute;
  inset: 6px 6px -70px;
  border-radius: 50%;
  border: 2px solid rgba(63, 51, 24, .25);
}

.ecu-vu__tick {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 70px;
  transform-origin: bottom center;
  background: linear-gradient(180deg, #3f3318 0 12px, transparent 12px);
}

.ecu-vu__tick:nth-of-type(1) { transform: translateX(-50%) rotate(-50deg); }
.ecu-vu__tick:nth-of-type(2) { transform: translateX(-50%) rotate(-25deg); }
.ecu-vu__tick:nth-of-type(3) { transform: translateX(-50%) rotate(0deg); }
.ecu-vu__tick:nth-of-type(4) { transform: translateX(-50%) rotate(25deg); }
.ecu-vu__tick:nth-of-type(5) {
  transform: translateX(-50%) rotate(50deg);
  background: linear-gradient(180deg, var(--red) 0 14px, transparent 14px);
  width: 3px;
}

.ecu-vu__needle {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 3px;
  height: 72px;
  border-radius: 2px;
  transform-origin: bottom center;
  transform: rotate(0deg);
  background: linear-gradient(180deg, #c23339 0%, #7c1d21 100%);
  box-shadow: 0 0 6px rgba(194, 51, 57, .4);
  transition: transform .55s cubic-bezier(.22, 1.4, .36, 1);
}

.ecu-vu__pin {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a666d, #1a242a 70%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.ecu-vu__label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6d5a2a;
}

.ecu-vu__verdict {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #3f3318;
}

.ecu-lamps {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.ecu-lamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #7d919c;
}

.ecu-lamp i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #232f36;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}

.ecu-lamp.is-on { color: #ffce93; }

.ecu-lamp.is-on i {
  background: #f0b64b;
  box-shadow: 0 0 10px rgba(240, 182, 75, .9);
  animation: ecu-led-pulse 1.3s ease-in-out infinite;
}

.ecu-lcd {
  flex: 1;
  min-height: 96px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #2b3942;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #150f05, #1b1408);
  color: #e9c383;
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.55;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55);
}

.ecu-lcd strong { display: block; color: #ffd489; margin-bottom: 4px; letter-spacing: .04em; }
.ecu-lcd__what { display: block; color: #c8a76a; margin-bottom: 4px; }
.ecu-lcd__ej { display: block; color: #a68a55; margin-bottom: 4px; font-style: italic; }
.ecu-lcd__now { display: block; color: #ffe4b3; font-style: normal; }

/* memorias y programa */

.ecu-desk__lower { display: grid; gap: 12px; margin-top: 16px; }

.ecu-presets,
.ecu-programa {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .06);
}

.ecu-presets__label,
.ecu-programa__label {
  flex: none;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #f0b64b;
}

.ecu-presets__row,
.ecu-programa__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ecu-preset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid #3a4a5480;
  background: linear-gradient(180deg, #26323a, #1a242b);
  color: #d5e0e6;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .16s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.ecu-preset i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #202c33;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}

.ecu-preset:hover { transform: translateY(-1px); border-color: #d9545a; }

.ecu-preset.is-on { border-color: #d9545a; background: linear-gradient(180deg, #33262a, #241a1d); }

.ecu-preset.is-on i { background: #ff5d63; box-shadow: 0 0 8px rgba(255, 93, 99, .9); }

.ecu-chip {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid #3a4a5480;
  border-bottom-width: 3px;
  background: linear-gradient(180deg, #26323a, #1a242b);
  color: #d5e0e6;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .14s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

.ecu-chip:hover { transform: translateY(-1px); border-color: #d9545a; }

.ecu-chip.is-on {
  background: linear-gradient(180deg, #c23339, #97262b);
  border-color: #7c1d21;
  color: #fff;
  transform: translateY(1px);
  border-bottom-width: 1px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}

/* ---------- la cinta impresa (prompt en vivo) ---------- */

.ecu-tape {
  max-width: 980px;
  margin: 26px auto 0;
  border-radius: 24px;
  padding: 20px 24px 22px;
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .08);
  box-shadow: var(--shadow);
}

.ecu-tape__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.ecu-tape__rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: #b9484d;
}

.ecu-tape__rec i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d0d7db;
  transition: background .2s var(--ease);
}

.ecu-tape__rec.is-blink i { animation: ecu-rec-print .9s ease-out 1; }

@keyframes ecu-rec-print {
  0%, 60% { background: #ff5d63; box-shadow: 0 0 10px rgba(255, 93, 99, .9); }
  100% { background: #d0d7db; box-shadow: none; }
}

.ecu-tape__title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
}

.ecu-tape__count {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
}

/* paso 3: la partitura del contexto, ahora junto al prompt. Papel
   claro SIEMPRE (colores literales, como el papel de impresora):
   así de noche sigue leyéndose como un formulario sobre papel.
   Nace PLEGADA: solo se ve el botón «personaliza tu prompt» y las
   casillas se despliegan al pulsarlo (menos ruido en la cinta). */

.ecu-tape__context {
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(15, 28, 34, .22);
  background: #faf9f4;
  overflow: hidden;
}

.ecu-tape__context-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #b9484d;
  transition: background .2s var(--ease);
}

.ecu-tape__context-toggle:hover { background: #f3f0e4; }

.ecu-tape__context-title { flex: 1; }

.ecu-tape__context-chevron {
  flex: none;
  transition: transform .25s var(--ease);
}

.ecu-tape__context.is-open .ecu-tape__context-chevron { transform: rotate(180deg); }

.ecu-tape__context .ecu-paso {
  border-color: rgba(185, 72, 77, .45);
  background: linear-gradient(180deg, #ffffff, #f3efe3);
  box-shadow: inset 0 1px 2px rgba(15, 28, 34, .12);
  color: #b9484d;
}

.ecu-tape__context-body { padding: 2px 16px 14px; }

.ecu-tape__campos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ecu-campo { display: grid; gap: 5px; }
.ecu-campo--wide { grid-column: span 2; }

.ecu-campo__label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6a7a84;
}

.ecu-campo input,
.ecu-campo textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 28, 34, .16);
  background: #fff;
  color: #23343d;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.5;
  box-shadow: inset 0 1px 3px rgba(15, 28, 34, .06);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  resize: vertical;
}

.ecu-campo input::placeholder,
.ecu-campo textarea::placeholder { color: #9aa8b0; }

.ecu-campo input:focus-visible,
.ecu-campo textarea:focus-visible {
  outline: none;
  border-color: #d9545a;
  box-shadow: inset 0 1px 3px rgba(15, 28, 34, .06), 0 0 0 3px rgba(194, 51, 57, .18);
}

.ecu-tape__context-hint {
  margin: 10px 2px 0;
  font-size: .74rem;
  color: #6e7a80;
}

.ecu-tape__paper {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(15, 28, 34, .12);
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(15, 28, 34, .045) 25px 26px),
    linear-gradient(180deg, #fefdf9, #faf8f1);
  padding: 18px 46px;
  overflow: hidden;
}

.ecu-tape__paper::before,
.ecu-tape__paper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  background-image: radial-gradient(circle at 50% 13px, rgba(15, 28, 34, .16) 4px, transparent 5px);
  background-size: 26px 26px;
  border-right: 1px dashed rgba(15, 28, 34, .14);
}

.ecu-tape__paper::before { left: 0; }
.ecu-tape__paper::after { right: 0; border-right: none; border-left: 1px dashed rgba(15, 28, 34, .14); }

.ecu-tape__code {
  --cw-accent-bri: #b3282e;
  --cw-accent-soft: rgba(194, 51, 57, .09);
  max-height: 430px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.62;
  color: #23343d;
}

.ecu-tape__bar {
  --cw-line: #d8dee2;
  --cw-text: #3a4a52;
  --cw-accent: #c23339;
  --cw-accent-bri: #b3282e;
  --cw-accent-soft: rgba(194, 51, 57, .09);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.ecu-copy {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(194, 51, 57, .3);
  transition: transform .16s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}

.ecu-copy:hover { transform: translateY(-1px); background: #ab2429; }

.ecu-tape__bar .prompt-open {
  border-radius: 999px;
  background: #fff;
  border-color: #d8dee2;
  color: #3a4a52;
}

.ecu-tape__bar .prompt-open:hover {
  border-color: var(--red);
  color: var(--red);
  background: #fff;
}

.ecu-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #d8dee2;
  background: #fff;
  color: #3a4a52;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.ecu-save:hover { border-color: var(--red); color: var(--red); }

.ecu-save.is-flash {
  border-color: #1f9d6f;
  color: #147854;
  background: rgba(31, 157, 111, .08);
}

.ecu-tape__hint {
  margin: 12px 2px 0;
  font-size: .78rem;
  color: var(--ink-soft);
}

/* ---------- responsive ---------- */

@media (max-width: 1120px) {
  .ecu-desk__board { grid-template-columns: 1fr; }
  .ecu-master { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
  .ecu-master .ecu-lcd { flex: 1 1 260px; min-height: 84px; }
}

@media (max-width: 980px) {
  .ecu-racks { grid-template-columns: 1fr; max-width: 640px; }
  .ecu-reglas__row { grid-template-columns: 1fr; gap: 14px; }
  .ecu-tape__campos { grid-template-columns: repeat(2, 1fr); }
  .ecu-campo--wide { grid-column: span 2; }
}

@media (max-width: 760px) {
  .ecu-desk { padding: 18px 14px 18px; border-radius: 24px; }
  .ecu-desk__brand { flex-wrap: wrap; gap: 8px; }
  .ecu-desk__sub { order: 3; flex-basis: 100%; }
  .ecu-tape__campos { grid-template-columns: 1fr; }
  .ecu-campo--wide { grid-column: auto; }

  /* los canales pasan a ser filas horizontales, más cómodas con el pulgar */
  .ecu-desk__channels { grid-template-columns: 1fr; gap: 14px; padding: 12px; }

  .ecu-ch {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "top top val"
      "min slot max";
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
  }

  .ecu-ch__top { grid-area: top; justify-self: start; }
  .ecu-ch__val { grid-area: val; justify-self: end; }
  .ecu-ch__pole--min { grid-area: min; max-width: 84px; text-align: left; justify-self: start; min-height: 0; }
  .ecu-ch__pole--max { grid-area: max; max-width: 84px; text-align: right; justify-self: end; min-height: 0; }
  .ecu-ch__slot { grid-area: slot; width: 100%; }
  .ecu-ch__leds { display: none; }

  .ecu-ch__rail { width: 100%; height: 40px; }

  .ecu-ch__rail::before {
    left: 4px;
    right: 4px;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 6px;
    transform: translateY(-50%);
  }

  .ecu-ch__rail::after {
    left: 12px;
    right: 12px;
    top: 8px;
    bottom: 8px;
    background: repeating-linear-gradient(90deg,
      rgba(232, 224, 207, .28) 0 1px,
      transparent 1px calc(25% - .2px));
  }

  .ecu-fader {
    width: 100%;
    height: 40px;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  .ecu-fader::-webkit-slider-thumb {
    background:
      linear-gradient(90deg, transparent 0 46%, #10181d 46% 54%, transparent 54%),
      linear-gradient(0deg, #29343b 0%, #55646d 12%, #e8edf0 50%, #55646d 88%, #29343b 100%);
  }

  .ecu-fader::-moz-range-thumb {
    background:
      linear-gradient(90deg, transparent 0 46%, #10181d 46% 54%, transparent 54%),
      linear-gradient(0deg, #29343b 0%, #55646d 12%, #e8edf0 50%, #55646d 88%, #29343b 100%);
  }

  .ecu-presets, .ecu-programa { align-items: flex-start; flex-direction: column; gap: 10px; }

  .ecu-tape { padding: 16px 14px 18px; }
  .ecu-tape__paper { padding: 14px 34px; }
  .ecu-tape__paper::before, .ecu-tape__paper::after { width: 20px; background-size: 20px 26px; }
  .ecu-tape__head { flex-wrap: wrap; }
  .ecu-tape__count { flex-basis: 100%; order: 4; }

  .ecu-cabina__lead { padding: 14px 18px 22px; font-size: 1rem; }
  .ecu-cabina__wave { height: 92px; margin: 14px 16px 0; }
  .ecu-cabina__wave-bars { gap: 3px; }
  .ecu-rack { padding: 18px 18px 20px; }
  .ecu-reglas { padding: 16px 18px 18px; }
}

@media (max-width: 480px) {
  .hero-ecu__mixer { gap: 10px; padding: 12px 14px 10px; }
  .hero-ecu__ch { width: 16px; height: 60px; }
  .hero-ecu__cap { width: 16px; }
  .ecu-ch__pole--min, .ecu-ch__pole--max { max-width: 70px; font-size: .56rem; }
  .ecu-vu__dial { width: 128px; height: 68px; }
}

/* Con reduced-motion: la onda queda fija (con un tercio «reproducido»),
   los pilotos no parpadean y la aguja salta sin muelle. */
@media (prefers-reduced-motion: reduce) {
  .ecu-cabina__wave-bars--played { animation: none; clip-path: inset(0 62% 0 0); }
  .ecu-cabina__playhead { animation: none; left: 38%; }
  .ecu-cabina__rec i,
  .ecu-desk__air i,
  .ecu-regla__led,
  .ecu-lamp.is-on i,
  .hero-ecu__cap,
  .ecu-tape__rec.is-blink i { animation: none; }
  .ecu-vu__needle { transition: none; }
  .ecu-preset, .ecu-chip, .ecu-copy,
  .ecu-tape__context-toggle, .ecu-tape__context-chevron { transition: none; }
}

/* En pantallas estrechas el claim de la portada del Ecualizador vuelve a
   fluir con normalidad (sus líneas fijas están pensadas para escritorio) y
   el título se encoge un punto para que «Ecualizador» quepa entero. */
@media (max-width: 560px) {
  .hero--ecualizador .hero__claim { white-space: normal; }
  .hero--ecualizador .hero__title { font-size: clamp(2.35rem, 11vw, 3rem); }
  .ecu-intro__head .section__title,
  .ecu-mesa__head .section__title { overflow-wrap: break-word; }
}

/* ============================================================
   EL DIFERENCIADOR · diferenciador.html
   ------------------------------------------------------------
   Tres piezas: la portada (hero--diferenciador, con la bandeja de
   cinco fichas-dado que caen sobre la mesa), el taller de fichas
   (dif-obj: la pizarra oscura con la frase del objetivo, el medidor
   de Bloom, el circuito de prompt y las pestañas con las fichas) y
   las instrucciones con el colofón de créditos (dif-como / dif-
   creditos). Adaptación de The Differentiator de Ian Byrd
   (byrdseed.com): Bloom, Kaplan y Gould, y David Chung.
   ============================================================ */

/* ---------- portada ---------- */

.hero--diferenciador {
  position: relative;
  background:
    radial-gradient(130% 120% at 50% -20%, #ffffff 0%, #fafafc 52%, var(--gray-bg) 100%);
}

.hero--diferenciador .hero__title {
  background: linear-gradient(178deg, var(--ink) 30%, #35464f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-dif__fichas {
  display: inline-flex;
  gap: 12px;
  margin: 22px auto 4px;
  padding: 13px 18px;
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f1f2f4);
  box-shadow: 0 14px 34px rgba(15, 28, 34, .1), inset 0 1px 0 #fff;
}

.hero-dif__ficha {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #33424b;
  background: linear-gradient(180deg, #ffffff, #eceef1);
  border: 1px solid rgba(15, 28, 34, .1);
  box-shadow: 0 6px 14px rgba(15, 28, 34, .16), inset 0 1px 0 #fff;
  animation: hero-dif-drop .7s var(--ease) both;
  animation-delay: calc(.25s + var(--i, 0) * .11s);
}

.hero-dif__ficha svg { width: 26px; height: 26px; }

.hero-dif__ficha--roja {
  color: #fff;
  background: linear-gradient(180deg, #d9545a, #a3242a);
  border-color: #8f1f24;
  box-shadow: 0 8px 18px rgba(194, 51, 57, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
}

@keyframes hero-dif-drop {
  from { opacity: 0; transform: translateY(-16px) rotate(-8deg); }
  60%  { opacity: 1; transform: translateY(2px) rotate(2deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------- el taller: cabecera de sección ---------- */

.dif-taller-section { background: var(--white); }

.dif-taller__head { text-align: center; max-width: 780px; margin: 0 auto 12px; }

.dif-taller__intro {
  margin: 14px auto 0;
  max-width: 46rem;
  font-size: 1.02rem;
  color: #3a4a52;
}

.dif-taller__credito {
  margin: 10px auto 30px;
  max-width: 46rem;
  font-size: .84rem;
  color: var(--ink-soft);
}

.dif-taller__credito a,
.dif-creditos p a {
  color: var(--red);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 51, 57, .35);
  transition: border-color .25s var(--ease);
}

.dif-taller__credito a:hover,
.dif-creditos p a:hover { border-bottom-color: var(--red); }

/* ---------- la pizarra del objetivo ---------- */

.dif-obj {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  border-radius: var(--radius);
  padding: clamp(26px, 5vw, 46px);
  color: #fff;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(180deg, #1c2730 0%, #131d24 60%, #0f181e 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 30px 70px rgba(15, 28, 34, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}

.dif-obj::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 51, 57, .35), transparent 68%);
  pointer-events: none;
}

.dif-obj > * { position: relative; z-index: 1; }

.dif-obj__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.dif-obj__titulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .65);
}

.dif-obj__titulo svg { width: 1.1em; height: 1.1em; color: var(--red); }

/* medidor de Bloom */
.dif-bloom { display: grid; gap: 5px; justify-items: end; }

.dif-bloom__barras { display: flex; align-items: flex-end; gap: 4px; height: 26px; }

.dif-bloom__barras i {
  width: 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
  transition: background .35s var(--ease);
}

.dif-bloom__barras i.is-on { background: var(--red); }

.dif-bloom__etiqueta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .74rem;
  color: rgba(255, 255, 255, .75);
  text-align: right;
}

.dif-bloom__etiqueta b { color: #fff; }

.dif-badge-hot {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(194, 51, 57, .28);
  color: #ff9da1;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: 1px;
}

/* la frase */
.dif-frase {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.18rem, 3vw, 1.72rem);
  line-height: 1.65;
  letter-spacing: -.01em;
}

.dif-frag {
  display: inline;
  font: inherit;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: none;
  border-bottom: 3px solid var(--red);
  border-radius: 8px 8px 0 0;
  padding: 0 .2em;
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background .25s var(--ease);
}

.dif-frag:hover { background: rgba(194, 51, 57, .32); }

.dif-frag.flash { animation: dif-fragflash .55s var(--ease); }

@keyframes dif-fragflash {
  0%   { background: var(--red); }
  100% { background: rgba(255, 255, 255, .07); }
}

.dif-tema {
  display: inline;
  font: inherit;
  font-weight: 800;
  color: #fff;
  border-bottom: 3px dashed rgba(255, 255, 255, .55);
  padding: 0 .2em;
  cursor: text;
  outline: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: border-color .25s var(--ease);
}

.dif-tema:focus { border-bottom-color: #fff; }

.dif-tema:empty::before {
  content: attr(data-ph);
  color: rgba(255, 255, 255, .42);
  font-weight: 600;
}

/* acciones de la pizarra */
.dif-obj__acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.dif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.dif-btn:active { transform: translateY(1px); }

.dif-btn svg { width: 1.05em; height: 1.05em; flex: none; }

.dif-btn--rojo { background: var(--red); color: #fff; }

.dif-btn--rojo:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(194, 51, 57, .45); }

.dif-btn--fantasma {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
}

.dif-btn--fantasma:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }

.dif-obj__nota {
  margin-top: 16px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
}

.dif-obj__nota b { color: rgba(255, 255, 255, .85); font-weight: 500; }

/* ---------- de objetivo a prompt ---------- */

.dif-prompt {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px dashed rgba(255, 255, 255, .22);
}

.dif-prompt__titulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .65);
}

.dif-prompt__titulo svg { width: 1.1em; height: 1.1em; color: var(--red); }

/* La personalización (nivel, materia, curso) vive en un cajón plegado: el
   prompt se lee limpio y solo se abre quien quiera afinar sus datos. */
.dif-tune {
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.dif-tune[open] { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); }

.dif-tune__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
  transition: background .2s var(--ease);
}

.dif-tune__btn::-webkit-details-marker { display: none; }
.dif-tune__btn:hover { background: rgba(255, 255, 255, .05); }
.dif-tune__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.dif-tune__ico { width: 19px; height: 19px; color: var(--red); }
.dif-tune__ico svg { display: block; width: 100%; height: 100%; }

.dif-tune__copy { min-width: 0; display: grid; gap: 2px; }

.dif-tune__copy strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  color: rgba(255, 255, 255, .92);
}

.dif-tune__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
  color: rgba(255, 255, 255, .5);
}

.dif-tune__btn b {
  min-width: 42px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .64rem;
  font-weight: 700;
  text-align: center;
  color: rgba(255, 255, 255, .6);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.dif-tune.is-set .dif-tune__btn b {
  border-color: rgba(126, 200, 154, .5);
  background: rgba(126, 200, 154, .14);
  color: #a6e0bb;
}

.dif-tune__chev {
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(255, 255, 255, .5);
  border-bottom: 2px solid rgba(255, 255, 255, .5);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}

.dif-tune[open] .dif-tune__chev { transform: rotate(-135deg) translate(-2px, -2px); }

.dif-tune__body { padding: 2px 15px 15px; }

.dif-prompt__ayuda {
  margin-top: 12px;
  max-width: 46rem;
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
}

.dif-prompt__campos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dif-campo { display: grid; gap: 5px; }

.dif-campo span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
}

.dif-campo input {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  padding: 11px 14px;
  outline: none;
  min-width: 0;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.dif-campo input::placeholder { color: rgba(255, 255, 255, .35); font-weight: 500; }

.dif-campo input:focus { border-color: var(--red); background: rgba(255, 255, 255, .12); }

.dif-prompt__texto {
  margin-top: 16px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, .28);
  border-radius: 14px;
  border-left: 3px solid var(--red);
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}

.dif-prompt__texto .tok-var { color: #ff9da1; font-weight: 500; font-family: inherit; background: none; }

.dif-prompt__ayuda .tok-var { color: #ff9da1; font-weight: 500; }

.dif-prompt__acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* el botón «Copiar» hereda la píldora roja del circuito de prompts */
.dif-copy {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(194, 51, 57, .3);
  transition: transform .16s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}

.dif-copy:hover { transform: translateY(-1px); background: #ab2429; }

/* «Abrir en IA» sobre la pizarra oscura: píldora fantasma clara */
.dif-prompt__acciones .prompt-open {
  border-radius: 999px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-family: var(--font-display);
  font-size: .84rem;
}

.dif-prompt__acciones .prompt-open:hover,
.dif-prompt__acciones .prompt-open.is-open {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
  transform: none;
}

.dif-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}

.dif-save svg { flex: none; }

.dif-save:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }

.dif-save.is-flash { background: rgba(126, 212, 155, .18); border-color: rgba(126, 212, 155, .65); }

/* ---------- pestañas y paneles de fichas ---------- */

.dif-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px;
  margin-top: 34px;
  scrollbar-width: none;
}

.dif-tabs::-webkit-scrollbar { display: none; }

.dif-tab {
  flex: 1 0 auto;
  min-width: 150px;
  display: grid;
  gap: 3px;
  justify-items: start;
  text-align: left;
  background: var(--white);
  color: var(--ink);
  border: 2px solid rgba(15, 28, 34, .1);
  border-radius: 18px;
  padding: 13px 18px;
  cursor: pointer;
  font-family: var(--font-display);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

.dif-tab:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.dif-tab[aria-selected="true"] { border-color: var(--red); box-shadow: 0 12px 30px rgba(194, 51, 57, .14); }

.dif-tab__paso {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

.dif-tab__paso svg { width: 1rem; height: 1rem; color: var(--red); }

.dif-tab__nombre { font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }

.dif-tab__eleccion {
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-soft);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dif-tab[aria-selected="true"] .dif-tab__eleccion { color: var(--red); }

.dif-panel {
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 34px);
  margin-top: 16px;
  animation: dif-aparecer .45s var(--ease);
}

@keyframes dif-aparecer {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.dif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.dif-panel__head p { font-size: .95rem; color: var(--ink-soft); max-width: 40rem; }

.dif-azar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  color: var(--ink);
  background: var(--gray-bg);
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.dif-azar:hover { background: var(--ink); color: #fff; }

.dif-azar svg { width: 1rem; height: 1rem; }

.dif-grupo { padding: 18px 0 6px; }

.dif-grupo + .dif-grupo { border-top: 1px dashed rgba(15, 28, 34, .1); }

.dif-grupo__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dif-grupo__head h3 { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }

.dif-grupo__head .dif-badge-hot { background: rgba(194, 51, 57, .12); color: var(--red); vertical-align: 2px; }

.dif-grupo__desc { font-size: .84rem; color: var(--ink-soft); }

.dif-chips { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: 12px; }

.dif-chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  background: var(--gray-bg);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 9px 17px;
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}

.dif-chip:hover { transform: translateY(-2px); border-color: rgba(15, 28, 34, .22); box-shadow: var(--shadow); }

.dif-chip[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 10px 24px rgba(15, 28, 34, .22);
}

/* ---------- mini barra flotante con el objetivo ---------- */

.dif-mini {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 950;
  transform: translateX(-50%);
  width: min(880px, calc(100% - 26px));
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: #fff;
  border-radius: 18px;
  padding: 12px 12px 12px 20px;
  box-shadow: var(--shadow-hover);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}

.dif-mini.oculta { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }

.dif-mini__texto {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .86rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dif-mini__texto b { color: #ff9da1; font-weight: 700; }

.dif-mini .dif-btn { padding: 9px 16px; font-size: .8rem; }

/* aviso de copiado */
.dif-aviso {
  position: fixed;
  left: 50%;
  top: 76px;
  z-index: 1300;
  transform: translate(-50%, -10px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.dif-aviso.visible { opacity: 1; transform: translate(-50%, 0); }

.dif-aviso svg { width: 1.05em; height: 1.05em; color: #7ed49b; }

/* ---------- cómo se usa + colofón ---------- */

.dif-como-section { background: var(--white); }

.dif-como__head { text-align: center; max-width: 760px; margin: 0 auto 30px; }

.dif-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}

.dif-paso { background: var(--gray-card); border-radius: 24px; padding: 22px; }

.dif-paso__num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 12px;
}

.dif-paso:nth-child(2) .dif-paso__num { background: var(--red); }

.dif-paso h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }

.dif-paso p { font-size: .9rem; color: #3a4a52; }

.dif-consejo {
  max-width: 1080px;
  margin: 18px auto 0;
  padding: 16px 20px;
  border-left: 3px solid var(--red);
  background: rgba(194, 51, 57, .05);
  border-radius: 0 14px 14px 0;
  font-size: .92rem;
  color: #3a4a52;
}

.dif-consejo strong { font-weight: 600; color: var(--ink); }

.dif-creditos {
  max-width: 1080px;
  margin: 34px auto 0;
  padding: 26px 28px;
  border: 1px solid rgba(15, 28, 34, .1);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #f7f7f9);
}

.dif-creditos__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--red);
  margin-bottom: 10px;
}

.dif-creditos p { font-size: .88rem; color: #3a4a52; max-width: 56rem; }

.dif-creditos p + p { margin-top: 8px; }

.dif-creditos__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.dif-creditos__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(15, 28, 34, .14);
  border-radius: 999px;
  padding: 7px 14px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}

.dif-creditos__links a:hover { border-color: var(--red); color: var(--red); }

/* ---------- responsivo ---------- */

@media (max-width: 640px) {
  .dif-prompt__campos { grid-template-columns: 1fr; }
  .dif-tune__btn { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 11px 13px; }
  .dif-tune__chev { display: none; }
  .dif-tune__body { padding: 2px 13px 13px; }
  .dif-obj__head { align-items: flex-start; }
  .dif-bloom { justify-items: start; }
  .dif-bloom__etiqueta { text-align: left; }
  .dif-tab { min-width: 132px; }
}

@media (max-width: 480px) {
  .hero-dif__fichas { gap: 8px; padding: 11px 14px; }
  .hero-dif__ficha { width: 38px; height: 38px; border-radius: 9px; }
  .hero-dif__ficha svg { width: 22px; height: 22px; }
  .dif-obj { padding: 22px 18px 26px; }
  .dif-mini { gap: 10px; padding: 10px 10px 10px 14px; }
}

@media (max-width: 560px) {
  .hero--diferenciador .hero__claim { white-space: normal; }
  .hero--diferenciador .hero__title { font-size: clamp(2.35rem, 10vw, 3rem); }
  .dif-taller__head .section__title,
  .dif-como__head .section__title { overflow-wrap: break-word; }
}

/* Con reduced-motion: las fichas de la portada no caen, la frase no
   parpadea y los paneles aparecen sin deslizarse. */
@media (prefers-reduced-motion: reduce) {
  .hero-dif__ficha { animation: none; }
  .dif-frag.flash { animation: none; }
  .dif-panel { animation: none; }
  .dif-mini, .dif-aviso, .dif-chip, .dif-tab, .dif-btn, .dif-copy,
  .dif-tune, .dif-tune__chev { transition: none; }
}

/* Al imprimir queda solo lo esencial: la frase del objetivo en tinta
   sobre blanco, sin botones ni paneles. */
@media print {
  .dif-tabs, .dif-panel, .dif-mini, .dif-aviso,
  .dif-obj__acciones, .dif-obj__nota, .dif-prompt,
  .dif-como-section .dif-pasos, .dif-consejo { display: none !important; }
  .dif-obj { background: #fff; color: #000; box-shadow: none; border: 2px solid #000; }
  .dif-obj::after { display: none; }
  .dif-frag, .dif-tema { color: #000; background: none; }
  .dif-obj__titulo { color: #444; }
  .dif-bloom__etiqueta { color: #444; }
  .dif-bloom__etiqueta b { color: #000; }
}

/* ============================================================
   EL ASCENSOR DEL PENSAMIENTO · pensamiento.html
   ------------------------------------------------------------
   El Gran Hotel Bloom de noche, en los colores de la marca
   (tinta #0f1c22 + rojo #c23339 + marfil neutro, como el rótulo
   de neón rojo de los hoteles clásicos): la portada (hero--
   pensamiento, indicador semicircular cromado cuya aguja barre
   las seis plantas una sola vez), el vestíbulo (pen-lobby:
   marquesina de neón con sol radiante, tarjetas de la conserjería
   y las tres reglas numeradas) y LA GRAMOLA DEL SALÓN (pen-gramola,
   rediseño 2026-07-09): un cancionero en acordeón con seis filas
   —una por planta de Bloom— cuyas tiras de título (pen-tira, con
   código citable 2·03 e insignia de tipo) abren la ventanilla
   emergente del prompt (pen-rec + pen-ticket), con la ficha
   completa de la estrategia plegada dentro. Toda la luminotecnia
   (los dos neones, el abanico de rayos, la vuelta del disco al
   entrar y al sonar) se reproduce UNA vez y se para: sin bucles.
   Los rótulos van en la letra de la casa en mayúsculas (la
   manuscrita Pacifico se retiró en 2026-07-10). Las variables
   conservan sus nombres históricos (--pen-oro es hoy el rojo de
   marca): NO renombrarlas.
   Fuentes: Project Zero (Harvard), R. Swartz, Costa y Kallick,
   E. de Bono; orden por Bloom a partir de la tabla de Loli García.
   ============================================================ */

:root {
  --pen-noche: #0f1c22;
  --pen-noche2: #0a141a;
  --pen-oro: #c23339;
  --pen-oro2: #f2b6b9;
  --pen-crema: #f7f6f3;
  --pen-borde-oro: rgba(194, 51, 57, .42);
}

/* ---------- portada ---------- */

.hero--pensamiento {
  position: relative;
  background:
    radial-gradient(130% 120% at 50% -20%, #ffffff 0%, #f9f8f6 52%, var(--gray-bg) 100%);
}

.hero--pensamiento .hero__title {
  background: linear-gradient(178deg, var(--ink) 30%, #35464f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* el degradado solo se pinta dentro de la caja: sin este hueco, la «g» y la
     «p» de «gramola del pensamiento» quedan fuera y se ven cortadas */
  padding-bottom: .14em;
}

/* el tocadiscos de la portada: el vinilo da UNA vuelta al llegar y el
   brazo cromado se posa sobre el disco; después, quietud */
.hero-pen__plato {
  position: relative;
  display: inline-block;
  margin: 20px auto 2px;
  padding: 20px 58px 20px 24px;
  border: 1px solid rgba(15, 28, 34, .12);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #eef0f2);
  box-shadow: 0 14px 34px rgba(15, 28, 34, .12), inset 0 1px 0 #fff;
}

.hero-pen__vinilo {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background:
    conic-gradient(from 210deg, rgba(255, 255, 255, .14) 0 40deg, transparent 70deg 180deg, rgba(255, 255, 255, .07) 205deg 235deg, transparent 260deg),
    repeating-radial-gradient(circle, #10181d 0 2.4px, #1d262c 2.4px 4px);
  box-shadow: 0 10px 24px rgba(15, 28, 34, .35), inset 0 0 0 1px rgba(255, 255, 255, .07);
  animation: hero-vinilo-gira 1.7s cubic-bezier(.3, .75, .3, 1) .35s both;
}

@keyframes hero-vinilo-gira { from { transform: rotate(-360deg); } to { transform: rotate(0); } }

.hero-pen__galleta {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e2777c, var(--red) 55%, #7d1e23);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .1);
}
.hero-pen__galleta i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f6f7f7;
}

.hero-pen__brazo {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c6cdd1 55%, #87919a);
  box-shadow: 0 2px 5px rgba(15, 28, 34, .35);
}
.hero-pen__brazo i {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 104px;
  margin-left: -2px;
  border-radius: 4px;
  transform-origin: 50% 2px;
  background: linear-gradient(180deg, #b9c2c8, #78838b);
  animation: hero-brazo-cae 1.2s var(--ease) .55s both;
}
.hero-pen__brazo i::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--red), #7d1e23);
}

@keyframes hero-brazo-cae {
  from { transform: rotate(30deg); }
  60% { transform: rotate(-11deg); }
  to { transform: rotate(-8deg); }
}

/* ---------- vestíbulo · qué es entrenar el pensamiento ---------- */

.pen-intro-section { background: var(--white); }

.pen-intro__head { text-align: center; max-width: 760px; margin: 0 auto 34px; }

.pen-lobby {
  position: relative;
  border-radius: var(--radius);
  padding: 34px 30px 30px;
  background:
    radial-gradient(120% 150% at 50% -30%, #1d3039 0%, var(--pen-noche) 55%, var(--pen-noche2) 100%);
  border: 1px solid var(--pen-borde-oro);
  box-shadow: 0 24px 60px rgba(10, 20, 26, .35);
  overflow: hidden;
}

.pen-lobby::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(194, 51, 57, .26);
  border-radius: calc(var(--radius) - 8px);
  pointer-events: none;
}

.pen-lobby__marquee {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 20px;
  text-align: center;
}

.pen-lobby__sol { color: var(--pen-oro); filter: drop-shadow(0 0 10px rgba(194, 51, 57, .35)); }
.pen-lobby__sol svg { width: 84px; height: 62px; display: block; }

/* rótulo de cartel: la letra de la casa en mayúsculas espaciadas, como
   un título, con el degradado de neón rojo (la manuscrita se retiró) */
.pen-lobby__hotel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 4.2vw, 2.15rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.25;
  padding: 0 .1em;
  background: linear-gradient(180deg, #ffc2c5, #e2555b 55%, var(--pen-oro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(194, 51, 57, .45));
}

.pen-lobby__desde {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, .55);
}

.pen-lobby__lead {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  color: #dbe3e7;
  font-size: .98rem;
  line-height: 1.75;
}

.pen-conserjes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.pen-conserje {
  position: relative;
  background: #ffffff;
  border: 1px solid #e4e7ea;
  border-radius: 16px;
  padding: 20px 20px 18px;
  box-shadow: 0 10px 26px rgba(15, 28, 34, .07);
}

.pen-conserje__esquina {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--pen-oro);
  pointer-events: none;
}
.pen-conserje__esquina--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.pen-conserje__esquina--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.pen-conserje__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pen-conserje__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--red);
  background: radial-gradient(circle at 35% 30%, #ffffff, #e9ebed 60%, #ccd2d6);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(15, 28, 34, .16);
}
.pen-conserje__icon svg { width: 22px; height: 22px; }

.pen-conserje__ordinal {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: rgba(15, 28, 34, .14);
}

.pen-conserje__kicker {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}

.pen-conserje__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 8px;
}

.pen-conserje__text { font-size: .88rem; line-height: 1.6; color: #4a5a62; }

.pen-normas {
  margin-top: 26px;
  background: var(--pen-noche);
  border: 1px solid var(--pen-borde-oro);
  border-radius: 18px;
  padding: 20px 22px;
}

.pen-normas__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.pen-norma { display: flex; gap: 12px; align-items: flex-start; }

/* el número de cada regla (aquí colgaba una llave de hotel, retirada
   el 2026-07-10 con el resto de la metáfora) */
.pen-norma__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--pen-borde-oro);
  color: var(--pen-oro2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
}

.pen-norma strong {
  display: block;
  font-family: var(--font-display);
  font-size: .9rem;
  color: #eef2f4;
  margin-bottom: 3px;
}
.pen-norma p { font-size: .82rem; line-height: 1.55; color: rgba(219, 227, 231, .75); }

.pen-cite {
  margin-top: 22px;
  text-align: center;
  font-size: .8rem;
  font-style: italic;
  color: var(--muted);
  max-width: 720px;
  margin-inline: auto;
}

/* ---------- la gramola del salón ---------- */

.pen-asc-section {
  background:
    radial-gradient(120% 90% at 50% 0%, #1a2d37 0%, var(--pen-noche) 45%, var(--pen-noche2) 100%);
}

.pen-asc__head { text-align: center; max-width: 800px; margin: 0 auto 30px; }
.pen-asc__head .feature__eyebrow { color: var(--pen-oro2); }
.pen-asc-section .section__title { color: #f2f5f6; }
.pen-asc__intro { color: rgba(219, 227, 231, .82); font-size: .95rem; line-height: 1.7; margin-top: 14px; }
.pen-asc__credito { font-size: .78rem; font-style: italic; color: rgba(219, 227, 231, .55); margin-top: 10px; }
.pen-asc__credito a { color: var(--pen-oro2); }

/* el mueble: frente de tinta lacada con corona en arco, doble filo rojo
   embutido, brillo lateral de barniz, sombra de teatro y un charco de
   luz roja en el suelo, como si la gramola iluminara la sala */
.pen-gramola {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  border-radius: 240px 240px 26px 26px;
  padding: clamp(22px, 4vw, 38px) clamp(20px, 3.4vw, 42px) clamp(18px, 3vw, 30px);
  background:
    radial-gradient(140% 60% at 50% -8%, rgba(194, 51, 57, .26) 0%, transparent 55%),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 0%, transparent 14% 86%, rgba(255, 255, 255, .06) 100%),
    linear-gradient(180deg, #1b2f3a 0%, #0e1b22 58%, #0a141a 100%);
  border: 1px solid rgba(194, 51, 57, .4);
  box-shadow:
    inset 0 0 0 8px #0a141a,
    inset 0 0 0 10px rgba(194, 51, 57, .34),
    inset 0 0 0 11px rgba(255, 255, 255, .05),
    0 34px 80px rgba(0, 0, 0, .55),
    0 80px 140px -60px rgba(194, 51, 57, .55);
  overflow: hidden;
}

/* columnas de tubo luminoso a ambos flancos: cromo con peldaños de luz
   (las burbujas de las Wurlitzer, quietas) y su piloto rojo encendido */
.pen-gramola::before, .pen-gramola::after {
  content: "";
  position: absolute;
  top: clamp(190px, 30vw, 235px);
  bottom: 18px;
  width: 14px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .5) 0 3px, transparent 3px 16px),
    linear-gradient(90deg, #5f6971, #eef1f3 45%, #8d979e);
  box-shadow:
    0 -18px 0 -2px rgba(194, 51, 57, .95),
    0 -18px 14px 0 rgba(194, 51, 57, .6),
    inset 0 0 3px rgba(255, 255, 255, .6),
    0 4px 12px rgba(0, 0, 0, .45);
}
.pen-gramola::before { left: 13px; }
.pen-gramola::after { right: 13px; }

/* la corona: neón rojo en arco, disco y rótulo del salón */
.pen-gramola__cima {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 20px 12px 22px;
  margin-bottom: 18px;
}

/* el abanico de rayos tras la corona: un amanecer de luces rosas que
   sale de detrás del disco y se enciende UNA vez al entrar en pantalla */
.pen-gramola__rayos {
  position: absolute;
  inset: -40px -60px 0;
  background: repeating-conic-gradient(from 168deg at 50% 100%,
    rgba(242, 182, 185, .12) 0 5deg, transparent 5deg 12deg);
  -webkit-mask-image: radial-gradient(90% 95% at 50% 92%, #000 25%, transparent 72%);
  mask-image: radial-gradient(90% 95% at 50% 92%, #000 25%, transparent 72%);
  pointer-events: none;
  opacity: .9;
}
.pen-gramola.visible .pen-gramola__rayos { animation: pen-rayos 2.2s var(--ease) .2s 1 both; }

@keyframes pen-rayos {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: .9; transform: none; }
}

/* el tubo de burbujas exterior, como en las Wurlitzer: un arco punteado
   de luces rosas que abraza al neón */
.pen-gramola__tubos {
  position: absolute;
  left: 50%;
  top: -13px;
  transform: translateX(-50%);
  width: min(660px, 99%);
  height: calc(100% + 13px);
  border: 7px dotted rgba(242, 182, 185, .75);
  border-bottom: 0;
  border-radius: 360px 360px 0 0;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(242, 182, 185, .55));
}

.pen-gramola__neon {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(600px, 96%);
  height: 100%;
  border: 3px solid var(--pen-oro);
  border-bottom: 0;
  border-radius: 320px 320px 0 0;
  box-shadow: 0 0 22px rgba(194, 51, 57, .6), 0 0 60px rgba(194, 51, 57, .28), inset 0 0 18px rgba(194, 51, 57, .3);
  pointer-events: none;
  opacity: .95;
}

/* el segundo tubo de neón, rosa y más recogido, dentro del principal */
.pen-gramola__neon2 {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  width: min(500px, 84%);
  height: calc(100% - 30px);
  border: 2px solid rgba(242, 182, 185, .85);
  border-bottom: 0;
  border-radius: 300px 300px 0 0;
  box-shadow: 0 0 14px rgba(242, 182, 185, .5), inset 0 0 14px rgba(242, 182, 185, .22);
  pointer-events: none;
  opacity: .9;
}

/* los neones se encienden cuando la gramola entra en pantalla (.visible
   la pone el sistema de aparición): parpadean una vez y se quedan fijos */
.pen-gramola.visible .pen-gramola__neon { animation: pen-neon 1.8s linear 1 both; }
.pen-gramola.visible .pen-gramola__neon2 { animation: pen-neon 2.2s linear .35s 1 both; }

/* el neón parpadea al encenderse y se queda fijo: una sola vez */
@keyframes pen-neon {
  0% { opacity: 0; }
  10% { opacity: .95; }
  16% { opacity: .25; }
  26% { opacity: .95; }
  34% { opacity: .4; }
  46%, 100% { opacity: .95; }
}

.pen-gramola__disco {
  position: relative;
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f2f5f6 0 3.5%, var(--pen-oro) 4.5% 15%, #7d1e23 15.5% 17%, #10181d 18% 100%);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .6),
    0 0 0 4px rgba(194, 51, 57, .22),
    0 0 30px rgba(194, 51, 57, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pen-gramola__disco i {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 3px, rgba(255, 255, 255, .06) 3px 4px);
}
/* el brillo de vitrina sobre el vinilo: es reflejo, no gira con él */
.pen-gramola__disco b {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 205deg, rgba(255, 255, 255, .2) 0 32deg, transparent 60deg 185deg, rgba(255, 255, 255, .1) 210deg 240deg, transparent 265deg);
}
/* el disco da una vuelta de cortesía al entrar en pantalla y otra cada
   vez que suena una estrategia; nunca en bucle. La regla de .gira va
   después y con la misma cabecera para ganar al giro de entrada. */
.pen-gramola.visible .pen-gramola__disco { animation: pen-disco-entra 1.6s var(--ease) .35s 1 both; }
.pen-gramola__disco.gira,
.pen-gramola.visible .pen-gramola__disco.gira { animation: pen-disco-gira 1.1s var(--ease) 1; }
@keyframes pen-disco-entra { from { transform: rotate(-360deg); } to { transform: rotate(0); } }
@keyframes pen-disco-gira { to { transform: rotate(360deg); } }

.pen-gramola__rotulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 3.4vw, 1.85rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0 .1em;
  text-align: center;
  background: linear-gradient(180deg, #ffc2c5, #e2555b 55%, var(--pen-oro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(194, 51, 57, .5));
}

.pen-gramola__sub {
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(245, 245, 247, .55);
}

/* --- el cancionero: seis filas en acordeón, una por planta --- */

/* la ventana del cancionero: un panel de cristal con brillo superior
   y un reflejo diagonal de vitrina que no estorba al ratón */
.pen-gramola__filas {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(6, 12, 16, .5) 26%);
  border: 1px solid rgba(245, 245, 247, .12);
  box-shadow: inset 0 12px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pen-gramola__filas::after {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  width: 36%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0 30%, rgba(255, 255, 255, .05) 38% 52%, transparent 60%);
  pointer-events: none;
}

/* la rejilla del altavoz, entre el cancionero y el pie: tela trenzada
   en marco hundido, como el paño de las gramolas de verdad */
.pen-gramola__rejilla {
  display: block;
  height: 34px;
  margin: 18px 4px 0;
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg, rgba(245, 245, 247, .13) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(245, 245, 247, .13) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #12212a, #0a1419);
  border: 1px solid rgba(245, 245, 247, .14);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.pen-fila {
  border: 1px solid rgba(245, 245, 247, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .25s, background .25s;
  overflow: hidden;
}
.pen-fila.is-abierta { border-color: rgba(194, 51, 57, .55); background: rgba(194, 51, 57, .07); }

.pen-fila__btn {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: #f2f5f6;
}
.pen-fila__btn:hover .pen-fila__num,
.pen-fila__btn:focus-visible .pen-fila__num {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 3px rgba(194, 51, 57, .25), 0 0 16px rgba(194, 51, 57, .4);
}
.pen-fila__btn:focus-visible { outline: 2px solid var(--pen-oro2); outline-offset: -3px; border-radius: 16px; }

/* el número de planta: botón cromado que se enciende en rojo al abrirse */
.pen-fila__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  color: #232a2f;
  background: radial-gradient(circle at 35% 30%, #ffffff, #ccd2d6 55%, #8d979e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 7px rgba(0, 0, 0, .4);
  transition: box-shadow .25s, background .25s;
}
.pen-fila.is-abierta .pen-fila__num {
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #e2777c, var(--red) 55%, #7d1e23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 18px rgba(194, 51, 57, .55);
}

.pen-fila__tit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}
.pen-fila__tit strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.95rem, 2.4vw, 1.12rem);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pen-fila__tit em { font-size: .84rem; color: var(--pen-oro2); }

.pen-fila__cuenta {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(245, 245, 247, .6);
  border: 1px solid rgba(245, 245, 247, .2);
  border-radius: 999px;
  padding: 3px 10px;
}

.pen-fila__caret {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--pen-oro2);
  transition: transform .3s var(--ease);
}
.pen-fila.is-abierta .pen-fila__caret { transform: rotate(180deg); }

.pen-fila__panel { padding: 2px 16px 16px; }

.pen-fila__lema {
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(219, 227, 231, .85);
  margin-bottom: 12px;
}

.pen-fila__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
}
.pen-fila__prlabel {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 182, 185, .8);
  margin-right: 3px;
}
.pen-fila__meta .pen-accion--dado { margin-left: auto; }

/* --- las tiras de título: una por estrategia, con su código citable --- */

.pen-tiras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
}

.pen-tira {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: var(--pen-crema);
  color: var(--ink);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.pen-tira:hover, .pen-tira:focus-visible { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(0, 0, 0, .45); }
.pen-tira:focus-visible { outline: 2px solid var(--pen-oro2); outline-offset: 2px; }
.pen-tira.is-elegida { box-shadow: 0 0 0 2px var(--red), 0 9px 20px rgba(0, 0, 0, .4); }

.pen-tira__code {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #8b959c;
}
.pen-tira.is-elegida .pen-tira__code { color: var(--red); }

.pen-tira__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.pen-tira__dot--rutina { background: #2f6bd8; }
.pen-tira__dot--destreza { background: #1f9d6f; }
.pen-tira__dot--habito { background: #d9820f; }
.pen-tira__dot--organizador { background: #7c5cd6; }
.pen-tira__dot--paralelo { background: #0f8b9d; }
.pen-tira__dot--estrategia { background: #5d6b74; }

.pen-tira__nombre {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.35;
}

.pen-tira__tipo {
  margin-left: auto;
  flex: 0 0 auto;
  max-width: 38%;
  text-align: right;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #98a1a7;
}

/* --- pie de la gramola: sorpresa, selección y volver al prompt --- */

.pen-gramola__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 14px;
}

/* la tecla gorda de la gramola: pastilla roja con barniz de máquina */
.pen-sorpresa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .86rem;
  color: #fff;
  background: linear-gradient(180deg, #d94f55 0%, var(--red) 45%, #8d1f25 100%);
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(194, 51, 57, .4), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.pen-sorpresa:hover, .pen-sorpresa:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(194, 51, 57, .5), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pen-sorpresa__nota { font-size: 1rem; line-height: 1; }

.pen-gramola__elegida {
  font-size: .74rem;
  font-weight: 700;
  color: #f2f5f6;
  border: 1px solid rgba(245, 245, 247, .25);
  border-radius: 999px;
  padding: 5px 12px;
}

.pen-badge-hot {
  flex: 0 0 auto;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border-radius: 999px;
  padding: 4px 10px;
  align-self: center;
}

.pen-chip {
  font-size: .76rem;
  color: #dbe3e7;
  border: 1px solid rgba(245, 245, 247, .22);
  border-radius: 999px;
  padding: 4px 12px;
}

.pen-accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--pen-oro2);
  background: transparent;
  border: 1px solid var(--pen-borde-oro);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s var(--ease);
}
.pen-accion svg { width: 15px; height: 15px; }
.pen-accion:hover, .pen-accion:focus-visible { background: rgba(194, 51, 57, .14); transform: translateY(-2px); }
.pen-accion:focus-visible { outline: 2px solid var(--pen-oro2); outline-offset: 2px; }

.pen-accion--rec { background: rgba(194, 51, 57, .12); }

/* (las puertas del ascensor y el directorio de suites desaparecieron en
   el rediseño de la gramola: la ficha completa de cada estrategia vive
   ahora dentro de la ventanilla del prompt, ver .pen-rec__ficha) */

/* --- la ventanilla emergente del prompt (pen-rec): se abre desde
   cualquier tira del cancionero, desde el dado de cada fila, desde
   «Planta sorpresa» o desde el pie de la gramola. Dentro: la barra de
   estrategia con «Ver ficha de la estrategia» (pen-rec__ficha, toda la
   información y siempre opcional), los campos del docente y el tique
   con copiar / guardar en Mi cuaderno / abrir en IA. --- */

body.pen-rec-abierta { overflow: hidden; }

.pen-rec {
  position: fixed;
  inset: 0;
  z-index: 330;
  display: grid;
  place-items: center;
  padding: 18px;
}

.pen-rec__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 19, .6);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .3s;
}

.pen-rec__panel {
  position: relative;
  width: min(1020px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  background: var(--pen-crema);
  border: 1px solid var(--pen-borde-oro);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(26px) scale(.97);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.pen-rec__panel:focus { outline: none; }
.pen-rec.show .pen-rec__scrim { opacity: 1; }
.pen-rec.show .pen-rec__panel { opacity: 1; transform: none; }

.pen-rec__marquee {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(14px, 2.4vw, 22px);
  background: radial-gradient(120% 150% at 50% -30%, #1c2e38 0%, var(--pen-noche) 55%, var(--pen-noche2) 100%);
  border-bottom: 1px solid var(--pen-borde-oro);
}

/* la pluma del rótulo hace un gesto de escritura al abrir, una sola vez */
.pen-rec__pluma { display: grid; place-items: center; color: var(--pen-oro2); transform-origin: 50% 15%; }
.pen-rec__pluma svg { width: 19px; height: 19px; }
.pen-rec.show .pen-rec__pluma { animation: pen-ding .9s var(--ease) .18s 1 both; }

@keyframes pen-ding {
  0% { transform: rotate(0); }
  25% { transform: rotate(13deg); }
  55% { transform: rotate(-9deg); }
  80% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}

.pen-rec__rotulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--pen-oro2);
}

.pen-rec__sub {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, .5);
}

.pen-rec__close {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: .95rem;
  color: var(--pen-oro2);
  background: transparent;
  border: 1px solid var(--pen-borde-oro);
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s, transform .25s var(--ease);
}
.pen-rec__close:hover, .pen-rec__close:focus-visible { background: rgba(194, 51, 57, .14); transform: rotate(90deg); }
.pen-rec__close:focus-visible { outline: 2px solid var(--pen-oro2); outline-offset: 2px; }

.pen-rec__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(16px, 2.4vw, 26px);
  padding: clamp(16px, 2.6vw, 26px);
  overflow: auto;
  overscroll-behavior: contain;
}

.pen-rec .pen-ticket { margin-top: 0; }
.pen-rec .pen-ticket__paper { max-height: 340px; }

/* barra de estrategia: qué está sonando y el botón de su ficha */
.pen-rec__estrategia {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.pen-rec__eleg {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e0e4e7;
  border-radius: 999px;
  padding: 6px 14px;
}

.pen-rec__ficha-btn {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 700;
  color: var(--red);
  background: transparent;
  border: 1px solid rgba(194, 51, 57, .4);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .2s;
}
.pen-rec__ficha-btn:hover, .pen-rec__ficha-btn:focus-visible { background: rgba(194, 51, 57, .08); }
.pen-rec__ficha-btn[aria-expanded="true"] { background: rgba(194, 51, 57, .1); }

/* la ficha completa de la estrategia: tipo, proceso, qué es, cuándo,
   evidencia visible, cómo se lleva al aula y fuente — sin recortes */
.pen-rec__ficha {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid #e4e7ea;
  border-left: 3px solid var(--red);
  border-radius: 12px;
  padding: 14px 16px;
}

.pen-rec__ficha-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.pen-chip--ficha {
  color: #46545e;
  border-color: #d6dbdf;
  background: var(--gray-card);
  font-size: .72rem;
}

.pen-rec__ficha-dl { margin: 0; display: grid; gap: 9px; }
.pen-rec__ficha-fila dt {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1px;
}
.pen-rec__ficha-fila dd { margin: 0; font-size: .86rem; line-height: 1.6; color: #3a4a52; }

.pen-recepcion__help { font-size: .86rem; line-height: 1.6; color: #5b6770; margin-bottom: 14px; }

.pen-recepcion__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px;
}

.pen-campo { display: grid; gap: 5px; }
.pen-campo--wide { grid-column: 1 / -1; }

.pen-campo span {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #46545e;
}

.pen-campo input, .pen-campo textarea {
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d8dce0;
  border-radius: 10px;
  padding: 9px 12px;
  transition: border-color .2s, box-shadow .2s;
}
.pen-campo textarea { resize: vertical; }
.pen-campo input:focus-visible, .pen-campo textarea:focus-visible {
  outline: none;
  border-color: var(--pen-oro);
  box-shadow: 0 0 0 3px rgba(194, 51, 57, .16);
}

.pen-ticket {
  margin-top: 18px;
  background: var(--ink);
  border-radius: 16px;
  padding: 18px;
}

.pen-ticket__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.pen-ticket__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pen-oro2);
}

.pen-ticket__paper {
  background: #fbfcfd;
  border-radius: 10px;
  padding: 14px 16px;
  max-height: 430px;
  overflow: auto;
}

.pen-ticket__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: #2a2f33;
}

.pen-ticket__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.pen-copy {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background .25s, transform .25s var(--ease);
}
.pen-copy:hover, .pen-copy:focus-visible { background: #a3242a; transform: translateY(-2px); }

.pen-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--pen-oro2);
  background: transparent;
  border: 1px solid var(--pen-borde-oro);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.pen-save:hover, .pen-save:focus-visible { background: rgba(194, 51, 57, .18); color: #ffd3d5; }

/* confirmación de guardado: el botón se pone verde, cambia el marcapáginas
   por una marca de visto y dice «Guardada en tu cuaderno» unos segundos
   (el lanzador de Mi cuaderno queda tapado por la ventanilla, así que la
   señal tiene que darla el propio botón); el latido suena UNA vez */
.pen-save__check { display: none; }
.pen-save.is-flash {
  background: #1f9d6f;
  border-color: #1f9d6f;
  color: #ffffff;
  animation: pen-save-late .5s var(--ease) 1;
}
.pen-save.is-flash:hover, .pen-save.is-flash:focus-visible { background: #1f9d6f; color: #ffffff; }
.pen-save.is-flash .pen-save__marca { display: none; }
.pen-save.is-flash .pen-save__check { display: block; }

@keyframes pen-save-late {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.pen-ticket__hint { margin-top: 10px; font-size: .74rem; line-height: 1.55; color: rgba(245, 245, 247, .55); }

/* --- responsive --- */

@media (max-width: 880px) {
  .pen-gramola { border-radius: 120px 120px 22px 22px; }
  .pen-gramola::before, .pen-gramola::after { display: none; }
  .pen-gramola__tubos { border-width: 5px; }
  .pen-gramola__neon2 { top: 22px; height: calc(100% - 22px); }
  .pen-gramola__disco { width: 96px; height: 96px; }
  .pen-gramola__rejilla { height: 24px; }
  .pen-rec { padding: 10px; }
  .pen-rec__panel { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .pen-rec__body { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .pen-lobby__hotel { letter-spacing: .08em; }
  .pen-gramola__rotulo { letter-spacing: .1em; }
  .pen-gramola { border-radius: 70px 70px 20px 20px; }
  .pen-gramola__filas { padding: 9px; }
  .pen-fila__cuenta { display: none; }
  .pen-fila__btn { padding: 12px 13px; }
  .pen-fila__panel { padding: 2px 13px 14px; }
  .pen-fila__meta .pen-accion--dado { margin-left: 0; }
  .pen-tiras { grid-template-columns: 1fr; }
  .pen-tira__tipo { display: none; }
  .pen-rec__sub { display: none; }
  .pen-rec__ficha-btn { margin-left: 0; }
}

/* --- accesibilidad: sin movimiento --- */

@media (prefers-reduced-motion: reduce) {
  .hero-pen__vinilo { animation: none; }
  .hero-pen__brazo i { animation: none; transform: rotate(-8deg); }
  .pen-gramola.visible .pen-gramola__neon { animation: none; opacity: .95; }
  .pen-gramola.visible .pen-gramola__neon2 { animation: none; opacity: .9; }
  .pen-gramola.visible .pen-gramola__rayos { animation: none; opacity: .9; }
  .pen-gramola.visible .pen-gramola__disco { animation: none; }
  .pen-gramola__disco.gira { animation: none; }
  .pen-fila__caret { transition: none; }
  .pen-fila__btn, .pen-tira, .pen-accion, .pen-sorpresa, .pen-copy { transition-property: background, color, border-color, box-shadow; }
  .pen-rec__panel { transform: none; transition: opacity .2s; }
  .pen-rec.show .pen-rec__pluma { animation: none; }
  .pen-rec__close { transition-property: background, color, box-shadow; }
}
html.a11y-reduce-motion .hero-pen__vinilo { animation: none; }
html.a11y-reduce-motion .hero-pen__brazo i { animation: none; transform: rotate(-8deg); }
html.a11y-reduce-motion .pen-gramola.visible .pen-gramola__neon { animation: none; opacity: .95; }
html.a11y-reduce-motion .pen-gramola.visible .pen-gramola__neon2 { animation: none; opacity: .9; }
html.a11y-reduce-motion .pen-gramola.visible .pen-gramola__rayos { animation: none; opacity: .9; }
html.a11y-reduce-motion .pen-gramola.visible .pen-gramola__disco { animation: none; }
html.a11y-reduce-motion .pen-gramola__disco.gira { animation: none; }
html.a11y-reduce-motion .pen-fila__caret { transition: none; }
html.a11y-reduce-motion .pen-rec__panel { transform: none; transition: opacity .2s; }
html.a11y-reduce-motion .pen-rec.show .pen-rec__pluma { animation: none; }

/* «Abrir en IA» dentro del tique oscuro del ascensor: pastilla clara,
   como en la cinta del ecualizador, para que se lea sobre la tinta. */
.pen-ticket__bar .prompt-open {
  border-radius: 999px;
  background: #fff;
  border-color: #d8dee2;
  color: #3a4a52;
}
.pen-ticket__bar .prompt-open:hover {
  border-color: var(--red);
  color: var(--red);
  background: #fff;
}

/* ---------- trío: la tarjeta del Ascensor del Pensamiento ---------- */

/* con 7 tarjetas, la última (el ascensor) se centra en su fila */
@media (min-width: 981px) {
  .trio[data-count="7"] .trio-card:nth-child(7) { grid-column: 2; }
}

/* dibujo del indicador de plantas: la aguja barre el arco UNA vez al
   entrar en pantalla y se queda clavada en la última planta; en reposo
   (o con «reducir movimiento») se ve ya terminada */
.trio-anim__aguja {
  transform-origin: 250px 78px;
  transform-box: view-box;
  transform: rotate(50deg);
}

.trio-card.is-anim .trio-anim__aguja {
  animation: trio-aguja 7s var(--ease) 1 forwards;
}

@keyframes trio-aguja {
  0%, 8%  { transform: rotate(-78deg); opacity: 0; }
  14%     { opacity: 1; }
  48%     { transform: rotate(58deg); }
  60%     { transform: rotate(50deg); }
  100%    { transform: rotate(50deg); opacity: 1; }
}

/* ============================================================
   COMPARTIR E IMPRIMIR FICHAS (prompts y Gramola)
   ------------------------------------------------------------
   Cada prompt de la biblioteca y cada estrategia de la Gramola
   tienen botón de compartir (URL con ancla) y de imprimir SOLO
   esa ficha: app.js clona la ficha en .ficha-print y una clase
   temporal en <body> esconde el resto mientras dura la impresión.
   ============================================================ */

/* Botones de icono en la barra de cada prompt (junto a «Copiar»).
   Colores en valores literales: los usa también la ventanilla de la
   Gramola (.pen-rec__util), que es una ventana oscura azulada. */
.prompt-card__util {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 29px;
  padding: 0;
  border: 1px solid rgba(146, 178, 190, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: #e9eff2;
  cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}

.prompt-card__util svg { width: 14px; height: 14px; }

.prompt-card__util:hover,
.prompt-card__util.copied {
  background: #ff5d63;
  border-color: #ff5d63;
  color: #fff;
  transform: translateY(-1px);
}

/* Los botones extra de la ventanilla de la Gramola no empujan a la derecha
   (solo el primero lleva el margen automático) */
.pen-rec__util { margin-left: 0; }

/* Ficha que llega compartida: destello del rojo de marca UNA vez y se para */
@keyframes ficha-compartida {
  0%   { box-shadow: 0 0 0 0 rgba(194, 51, 57, 0); }
  25%  { box-shadow: 0 0 0 5px rgba(194, 51, 57, .55); }
  100% { box-shadow: 0 0 0 4px rgba(194, 51, 57, 0); }
}

.pen-tira.is-compartida {
  scroll-margin-top: 110px;
  animation: ficha-compartida 1.6s var(--ease) .2s 1 both;
}

/* La caja donde se clona la ficha a imprimir: invisible en pantalla */
.ficha-print { display: none; }

@media print {

  /* (el re-anclaje de la paleta clara para imprimir en modo noche vive al
     FINAL del archivo, detrás del bloque nocturno, para poder pisarlo) */
  body.imprime-ficha,
  body[data-page="prompts"],
  body[data-page="glosario"],
  body[data-page="pensamiento"] { background: #fff !important; color: #0f1c22 !important; }

  /* Las apariciones al hacer scroll aún no desveladas (.reveal con opacidad
     cero) saldrían en blanco sobre el papel: al imprimir, todo visible. */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* ---------- imprimir UNA ficha: desaparece todo lo demás ---------- */
  body.imprime-ficha #site-header,
  body.imprime-ficha #site-main,
  body.imprime-ficha #site-footer,
  body.imprime-ficha .a11y-fab,
  body.imprime-ficha .lang-fab,
  body.imprime-ficha .cuaderno-fab,
  body.imprime-ficha .cookies,
  body.imprime-ficha .pen-rec,
  body.imprime-ficha .omni { display: none !important; }

  .ficha-print { display: block !important; font-size: 11pt; line-height: 1.6; }

  /* la copia se imprime en tinta negra sobre papel, sin decoraciones */
  .ficha-print, .ficha-print * {
    background: none !important;
    color: #000 !important;
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }

  .ficha-print button,
  .ficha-print .bp-tira,
  .ficha-print .bp-book__bar,
  .ficha-print .bp-book__tags,
  .ficha-print .bp-book__exlibris,
  .ficha-print .bp-book__consejo { display: none !important; }

  /* el libro de la biblioteca, extendido en papel */
  .ficha-print .bp-book,
  .ficha-print .bp-book[hidden] { display: block !important; }
  .ficha-print .bp-book__paginas { display: block !important; border: none !important; }
  .ficha-print .bp-book__paginas::after { display: none !important; }
  .ficha-print .bp-page { padding: 0 !important; }
  .ficha-print .bp-page--dcha::before { display: none !important; }
  .ficha-print .bp-book__vol { font-size: 9pt; margin-bottom: 8pt; }
  .ficha-print .bp-book__path { display: block; margin-top: 10pt; font-size: 8pt; color: #666 !important; }

  .ficha-print .prompt-snippet__label { font-size: 9pt; letter-spacing: .1em; text-transform: uppercase; }
  .ficha-print .prompt-snippet__title { font-size: 15pt; margin: 2pt 0 4pt; }
  .ficha-print .prompt-snippet__code {
    display: block !important;
    margin-top: 8pt;
    border-left: 2pt solid #000;
    padding-left: 10pt;
    font-size: 10.5pt;
  }
  .ficha-print .tok-var { font-weight: 700; }

  /* la hoja de estrategia de la Gramola (la monta app.js al imprimir) */
  .ficha-print .pen-ficha-hoja__kicker {
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .ficha-print h2 { font-size: 16pt; margin: 4pt 0 10pt; }
  .ficha-print .pen-rec__ficha-fila { margin-bottom: 8pt; }
  .ficha-print .pen-rec__ficha-fila dt {
    font-size: 8pt;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .ficha-print .pen-rec__ficha-fila dd { margin: 0; }

  /* de dónde salió este papel */
  .ficha-print::after {
    content: "Publicado en profes.tv — recursos de IA para la docencia.";
    display: block;
    margin-top: 18pt;
    font-size: 8pt;
    color: #666 !important;
  }

  /* ---------- impresión de página completa: prompts, glosario y gramola ---------- */

  /* fuera la tramoya común de las tres páginas */
  body:is([data-page="prompts"], [data-page="glosario"], [data-page="pensamiento"]):not(.imprime-ficha)
    :is(.nav, .footer, .hero, .a11y-fab, .lang-fab, .cuaderno-fab, .cookies, .ia-toast, .llamada) {
    display: none !important;
  }

  /* la estantería de prompts, de tinta a papel: cada libro se imprime
     abierto (título, etiqueta y texto), sin lomos ni tramoya del mueble */
  body[data-page="prompts"]:not(.imprime-ficha) .bp-section,
  body[data-page="prompts"]:not(.imprime-ficha) .bp-section * {
    background: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body[data-page="prompts"]:not(.imprime-ficha)
    :is(.bp-front, .bp-desk, .bp-marcas, .bp-pie, .bp-mesa, .bp-tira, .bp-hueco,
        .bp-shelf__icon, .prompts-empty, .bp-book__bar,
        .bp-book__tags, .bp-book__exlibris, .bp-book__consejo,
        .prompt-card__copy, .prompt-card__util, .prompt-open, .prompt-save) {
    display: none !important;
  }
  body[data-page="prompts"]:not(.imprime-ficha) .bp-case { border: none !important; padding: 0; }
  /* el tramado del panel es un ::before: el comodín * no llega a los pseudos */
  body[data-page="prompts"]:not(.imprime-ficha) .bp-case::before { display: none !important; }
  body[data-page="prompts"]:not(.imprime-ficha) .bp-tiras { display: block !important; padding: 0; }
  body[data-page="prompts"]:not(.imprime-ficha) .bp-shelf__row { padding: 0; }
  body[data-page="prompts"]:not(.imprime-ficha) .bp-card { display: block !important; }
  body[data-page="prompts"]:not(.imprime-ficha) .bp-book,
  body[data-page="prompts"]:not(.imprime-ficha) .bp-book[hidden] {
    display: block !important;
    border: 1pt solid #999 !important;
    border-radius: 8px;
    break-inside: avoid;
    margin-bottom: 10pt;
    padding: 10pt 12pt;
  }
  body[data-page="prompts"]:not(.imprime-ficha) .bp-book__paginas { display: block !important; border: none !important; }
  body[data-page="prompts"]:not(.imprime-ficha) .bp-book__paginas::after { display: none !important; }
  body[data-page="prompts"]:not(.imprime-ficha) .bp-page { padding: 0 !important; }
  body[data-page="prompts"]:not(.imprime-ficha) .bp-page--dcha::before { display: none !important; }
  body[data-page="prompts"]:not(.imprime-ficha) .bp-book__texto {
    max-height: none !important;
    overflow: visible !important;
    margin-top: 6pt;
    border-left: 2pt solid #000;
    padding-left: 10pt;
    font-size: 10pt;
  }

  /* el glosario, como fichas de cartulina en una columna */
  body[data-page="glosario"]:not(.imprime-ficha)
    :is(.glosario__tools, .glosario__alpha, .glosario__empty, .glosario-card__mark) {
    display: none !important;
  }
  body[data-page="glosario"]:not(.imprime-ficha) .glosario__grid { display: block !important; }
  body[data-page="glosario"]:not(.imprime-ficha) .glosario-card {
    break-inside: avoid;
    border: 1pt solid #999 !important;
    box-shadow: none !important;
    background: #fff !important;
    margin-bottom: 10pt;
  }
  /* la ficha viste tinta nocturna en pantalla (colores literales): sobre
     el papel se le devuelve la letra negra */
  body[data-page="glosario"]:not(.imprime-ficha) .glosario-card * {
    background: none !important;
    color: #000 !important;
  }

  /* la Gramola: el cancionero entero, en tinta sobre papel */
  body[data-page="pensamiento"]:not(.imprime-ficha) .pen-asc-section,
  body[data-page="pensamiento"]:not(.imprime-ficha) .pen-asc-section *,
  body[data-page="pensamiento"]:not(.imprime-ficha) .pen-intro-section,
  body[data-page="pensamiento"]:not(.imprime-ficha) .pen-intro-section * {
    background: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body[data-page="pensamiento"]:not(.imprime-ficha)
    :is(.pen-gramola__rayos, .pen-gramola__tubos, .pen-gramola__neon, .pen-gramola__neon2,
        .pen-gramola__disco, .pen-gramola__rejilla, .pen-gramola__pie, .pen-rec,
        .pen-accion, .pen-fila__caret, .pen-lobby__sol) {
    display: none !important;
  }
  /* todas las filas del cancionero se despliegan para el papel */
  body[data-page="pensamiento"]:not(.imprime-ficha) .pen-fila__panel[hidden] { display: block !important; }
  body[data-page="pensamiento"]:not(.imprime-ficha) .pen-fila {
    border-bottom: 1pt solid #999;
    break-inside: avoid;
  }
  body[data-page="pensamiento"]:not(.imprime-ficha) .pen-tira {
    border: none !important;
    break-inside: avoid;
  }
  body[data-page="pensamiento"]:not(.imprime-ficha) .pen-gramola { border: none !important; }
}

/* ============================================================
   LA EXPENDEDORA DE IDEAS (creatividadMaquina)
   ------------------------------------------------------------
   Las técnicas de creatividad como máquina de bolas: cúpula de
   cristal llena de cápsulas, manivela cromada, cápsula que cae
   y se abre con la técnica dentro. Sección oscura de serie
   (colores fijos): el modo noche no necesita retoques, igual
   que la consola NES o la gramola. Todas las animaciones se
   reproducen UNA vez y se paran.
   ============================================================ */

.crea-section {
  --crea-noche: #101c23;
  --crea-noche2: #0a1218;
  --crea-rojo: #c23339;
  --crea-crema: #ffedc2;
  /* la carta pinta su acento según la familia de la técnica */
  --crea-acc: #e8574f;
  background:
    radial-gradient(120% 90% at 50% 0%, #1b2f3a 0%, var(--crea-noche) 45%, var(--crea-noche2) 100%);
  color: #e8edef;
  padding-top: 90px;
  padding-bottom: 96px;
  overflow: hidden;
}

.crea-section .feature__eyebrow { color: #ff9da1; }
.crea-section .section__title { color: #f2f5f6; }

.crea__head { max-width: 780px; }

.crea__intro {
  margin-top: 18px;
  font-size: 1.06rem;
  line-height: 1.75;
  color: rgba(232, 237, 239, .82);
  max-width: 640px;
}

/* ---------- la escena: máquina + panel de la cápsula ---------- */

.crea-escena {
  margin-top: 54px;
  display: grid;
  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

/* ---------- la máquina de bolas ---------- */

.crea-maquina {
  position: relative;
  width: min(100%, 340px);
  margin: 0 auto;
  user-select: none;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45));
}

/* leve vaivén de toda la máquina al girar: una vez y se para */
.crea-girando .crea-maquina { animation: creaTiembla .55s var(--ease) 1; }
@keyframes creaTiembla {
  0% { transform: rotate(0); }
  30% { transform: rotate(-1.1deg); }
  60% { transform: rotate(1.1deg); }
  100% { transform: rotate(0); }
}

.crea-maquina__marquesina {
  position: relative;
  z-index: 2;
  margin: 0 auto -12px;
  width: 86%;
  text-align: center;
  background: linear-gradient(180deg, #22333d 0%, #131f27 100%);
  border: 1px solid rgba(255, 237, 194, .25);
  border-radius: 18px 18px 10px 10px;
  padding: 12px 16px 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.crea-maquina__rotulo {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crea-crema);
  text-shadow: 0 0 14px rgba(255, 237, 194, .55), 0 0 30px rgba(255, 190, 90, .3);
}

.crea-maquina__sub {
  display: block;
  margin-top: 3px;
  font-size: .68rem;
  letter-spacing: .08em;
  color: rgba(232, 237, 239, .55);
}

/* la cúpula de cristal */
.crea-maquina__cupula {
  position: relative;
  height: 250px;
  border-radius: 165px 165px 26px 26px;
  background:
    radial-gradient(140% 120% at 30% 12%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 34%, rgba(160, 200, 220, .04) 60%, rgba(10, 18, 24, .25) 100%);
  border: 2px solid rgba(210, 230, 240, .28);
  box-shadow:
    inset 0 14px 34px rgba(255, 255, 255, .08),
    inset 0 -18px 30px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.crea-maquina__brillo {
  position: absolute;
  top: 16px;
  left: 20px;
  width: 34%;
  height: 44%;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 62%);
  transform: rotate(-18deg);
  pointer-events: none;
}

.crea-maquina__bolas {
  position: absolute;
  inset: 0;
}

/* sombra de contacto: asienta la pila sobre el fondo de la cúpula */
.crea-maquina__bolas::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 4%;
  right: 4%;
  bottom: -5px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}

/* cada bola: dos mitades de color y un destello de cristal */
.crea-bola {
  position: absolute;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, var(--bola, #e8574f) 0%, var(--bola, #e8574f) 52%, #f4f1ea 52%, #ded9cf 100%);
  box-shadow: inset -3px -4px 8px rgba(0, 0, 0, .28), 0 4px 8px rgba(0, 0, 0, .3);
}

.crea-bola--gen { --bola: #e8574f; }
.crea-bola--eva { --bola: #2f9e8f; }
.crea-bola--nar { --bola: #8e6bbf; }
.crea-bola--col { --bola: #e8a13d; }
.crea-bola--con { --bola: #4a90d9; }
.crea-bola--exp { --bola: #57b26a; }
.crea-bola--res { --bola: #e06a9f; }

/* al girar, las bolas se agitan UNA vez (cada una con su compás) */
.crea-maquina__bolas.agita .crea-bola { animation: creaAgita .62s var(--ease) 1; }
.crea-maquina__bolas.agita .crea-bola:nth-child(2n) { animation-duration: .5s; animation-delay: .05s; }
.crea-maquina__bolas.agita .crea-bola:nth-child(3n) { animation-duration: .7s; animation-delay: .02s; }
.crea-maquina__bolas.agita .crea-bola:nth-child(5n) { animation-delay: .09s; }
@keyframes creaAgita {
  0% { transform: translateY(0); }
  30% { transform: translateY(-9px) rotate(-10deg); }
  60% { transform: translateY(2px) rotate(7deg); }
  100% { transform: translateY(0); }
}

/* el cuerpo rojo de la máquina */
.crea-maquina__cuerpo {
  position: relative;
  margin-top: -6px;
  height: 168px;
  border-radius: 22px 22px 26px 26px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #d4494f 0%, var(--crea-rojo) 38%, #8e2227 100%);
  border: 1px solid rgba(0, 0, 0, .25);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -10px 22px rgba(0, 0, 0, .3);
}

/* la manivela cromada (el botón que lo mueve todo) */
.crea-maquina__manivela {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background:
    radial-gradient(circle at 32% 30%, #ffffff 0%, #cfd8dd 34%, #8d9aa2 72%, #5d6a72 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), inset 0 -4px 8px rgba(0, 0, 0, .3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.crea-maquina__manivela:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 12px 24px rgba(0, 0, 0, .5), inset 0 -4px 8px rgba(0, 0, 0, .3); }
.crea-maquina__manivela:active { transform: translateY(-50%) scale(.97); }

.crea-maquina__eje {
  position: absolute;
  inset: 0;
  display: block;
}

.crea-maquina__eje::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 32%, #6d7a82 0%, #38434a 80%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
}

.crea-maquina__eje i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 40px;
  margin: -40px 0 0 -6px;
  border-radius: 7px;
  transform-origin: 50% 40px;
  background: linear-gradient(90deg, #f5f8fa 0%, #b9c4ca 55%, #77858d 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
}

/* la vuelta de manivela: 360 grados, una vez */
.crea-maquina__eje.gira i { animation: creaGira .68s cubic-bezier(.34, .05, .28, 1) 1; }
@keyframes creaGira { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* la boca por donde cae la cápsula */
.crea-maquina__boca {
  position: absolute;
  right: 22px;
  bottom: 14px;
  width: 76px;
  height: 62px;
  border-radius: 14px;
  background: linear-gradient(180deg, #38080b 0%, #1d0405 100%);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .18);
  overflow: hidden;
}

.crea-maquina__boca::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}

.crea-maquina__gota {
  position: absolute;
  left: 50%;
  bottom: 11px;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, var(--bola, #e8574f) 0%, var(--bola, #e8574f) 52%, #f4f1ea 52%, #ded9cf 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
}

.crea-maquina__gota--gen { --bola: #e8574f; }
.crea-maquina__gota--eva { --bola: #2f9e8f; }
.crea-maquina__gota--nar { --bola: #8e6bbf; }
.crea-maquina__gota--col { --bola: #e8a13d; }
.crea-maquina__gota--con { --bola: #4a90d9; }
.crea-maquina__gota--exp { --bola: #57b26a; }
.crea-maquina__gota--res { --bola: #e06a9f; }

.crea-maquina__gota.cae { animation: creaCae .6s cubic-bezier(.3, .6, .4, 1) 1; }
@keyframes creaCae {
  0% { transform: translateY(-56px); opacity: 0; }
  55% { transform: translateY(0); opacity: 1; }
  72% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.crea-maquina__patas {
  display: flex;
  justify-content: space-between;
  padding: 0 34px;
}

.crea-maquina__patas i {
  width: 44px;
  height: 14px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #57151a 0%, #340a0d 100%);
}

/* ---------- el panel: estado vacío y carta de la técnica ---------- */

.crea-panel { min-height: 380px; display: grid; align-items: center; }

.crea-panel__vacio {
  text-align: center;
  padding: 40px 24px;
  border: 2px dashed rgba(232, 237, 239, .25);
  border-radius: var(--radius);
}

.crea-panel__q {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--crea-crema);
  background: rgba(255, 237, 194, .08);
  border: 1px solid rgba(255, 237, 194, .3);
}

.crea-panel__vacio h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: #f2f5f6;
}

.crea-panel__vacio p {
  margin: 10px auto 22px;
  max-width: 420px;
  color: rgba(232, 237, 239, .7);
}

/* la carta que sale de la cápsula */
.crea-carta {
  position: relative;
  background: #fdfcf9;
  color: #0f1c22;
  border-radius: var(--radius);
  padding: 76px 34px 30px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  text-align: center;
}

.crea-carta--abre { animation: creaPop .5s var(--ease) 1; }
@keyframes creaPop {
  0% { transform: translateY(26px) scale(.94); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.crea-carta--fuera { opacity: .25; transition: opacity .3s var(--ease); }

/* acentos por familia */
.crea-carta--gen { --crea-acc: #e8574f; }
.crea-carta--eva { --crea-acc: #2f9e8f; }
.crea-carta--nar { --crea-acc: #8e6bbf; }
.crea-carta--col { --crea-acc: #d98a1c; }
.crea-carta--con { --crea-acc: #4a90d9; }
.crea-carta--exp { --crea-acc: #3f9e55; }
.crea-carta--res { --crea-acc: #d65a92; }

/* la cápsula abierta que corona la carta */
.crea-carta__capsula {
  position: absolute;
  top: -54px;
  left: 50%;
  width: 108px;
  height: 108px;
  transform: translateX(-50%);
}

.crea-carta__media {
  position: absolute;
  left: 50%;
  width: 92px;
  height: 46px;
  transform: translateX(-50%);
}

.crea-carta__media--sup {
  top: 0;
  border-radius: 92px 92px 0 0;
  background:
    radial-gradient(circle at 32% 42%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 40%),
    var(--crea-acc);
  box-shadow: inset -4px 4px 8px rgba(255, 255, 255, .25), 0 6px 14px rgba(0, 0, 0, .28);
  transform: translateX(-50%) translateY(-10px) rotate(-7deg);
}

.crea-carta__media--inf {
  bottom: 0;
  border-radius: 0 0 92px 92px;
  background: linear-gradient(180deg, #f4f1ea 0%, #d9d3c6 100%);
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .16), 0 8px 16px rgba(0, 0, 0, .22);
  transform: translateX(-50%) translateY(8px) rotate(4deg);
}

.crea-carta--abre .crea-carta__media--sup { animation: creaSup .55s var(--ease) 1; }
.crea-carta--abre .crea-carta__media--inf { animation: creaInf .55s var(--ease) 1; }
@keyframes creaSup {
  0% { transform: translateX(-50%) translateY(6px) rotate(0); }
  100% { transform: translateX(-50%) translateY(-10px) rotate(-7deg); }
}
@keyframes creaInf {
  0% { transform: translateX(-50%) translateY(-6px) rotate(0); }
  100% { transform: translateX(-50%) translateY(8px) rotate(4deg); }
}

.crea-carta__icono {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  color: var(--crea-acc);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
}

.crea-carta__icono svg { width: 32px; height: 32px; }

.crea-carta--abre .crea-carta__icono { animation: creaIcono .6s var(--ease) 1; }
@keyframes creaIcono {
  0% { transform: translate(-50%, -50%) scale(.4); }
  70% { transform: translate(-50%, -50%) scale(1.12); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.crea-carta__familia {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crea-acc);
  background: color-mix(in srgb, var(--crea-acc) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--crea-acc) 35%, #fff);
  border-radius: 999px;
  padding: 5px 14px;
}

.crea-carta__nombre {
  margin-top: 14px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
}

.crea-carta__finalidad {
  margin: 12px auto 22px;
  max-width: 470px;
  color: #4c5a61;
  line-height: 1.65;
}

.crea-carta__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ---------- botones de la sección ---------- */

.crea-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

.crea-boton:hover { transform: translateY(-2px); }

.crea-boton--rojo {
  background: var(--crea-rojo);
  color: #fff;
  box-shadow: 0 10px 24px rgba(194, 51, 57, .35);
}

.crea-boton--rojo:hover { background: #a92930; }

.crea-boton--linea {
  background: #fff;
  color: #0f1c22;
  border: 1.5px solid rgba(15, 28, 34, .25);
}

.crea-boton--linea:hover { border-color: #0f1c22; }

.crea-boton--fantasma {
  background: none;
  color: #5d6d75;
}

.crea-boton--fantasma:hover { color: #0f1c22; }

/* en el estado vacío (fondo noche) el fantasma y la línea no existen,
   pero el botón rojo hereda bien; nada que retocar */

/* ---------- el expositor (catálogo de las 75 cápsulas) ---------- */

.crea-catalogo { margin-top: 46px; text-align: center; }

.crea-catalogo__toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .06);
  color: #e8edef;
  border: 1px solid rgba(232, 237, 239, .22);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}

.crea-catalogo__toggle:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }

.crea-catalogo__toggle-bolas { display: inline-flex; }

.crea-catalogo__toggle-bolas .crea-bola {
  position: static;
  width: 16px;
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .25);
}

.crea-catalogo__toggle-bolas .crea-bola + .crea-bola { margin-left: -5px; }

.crea-catalogo__caret svg { transition: transform .3s var(--ease); display: block; }
.crea-catalogo__toggle.is-abierto .crea-catalogo__caret svg { transform: rotate(180deg); }

.crea-catalogo__panel {
  margin-top: 22px;
  text-align: left;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(232, 237, 239, .14);
  border-radius: var(--radius);
  padding: 26px clamp(18px, 3vw, 34px) 22px;
}

.crea-catalogo__hint {
  margin-bottom: 16px;
  color: rgba(232, 237, 239, .65);
  font-size: .92rem;
}

.crea-catalogo__buscar {
  width: 100%;
  max-width: 430px;
  margin-bottom: 20px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(232, 237, 239, .25);
  background: rgba(10, 18, 24, .5);
  color: #e8edef;
  font-family: var(--font-body);
  font-size: .95rem;
}

.crea-catalogo__buscar::placeholder { color: rgba(232, 237, 239, .4); }
.crea-catalogo__buscar:focus { outline: 2px solid var(--crea-rojo); outline-offset: 2px; }

.crea-catalogo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 9px;
}

.crea-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(232, 237, 239, .12);
  border-radius: 14px;
  padding: 8px 12px 8px 8px;
  color: #e8edef;
  font-family: var(--font-body);
  font-size: .86rem;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.crea-chip:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.crea-chip.is-elegida { border-color: #ff9da1; box-shadow: 0 0 0 1px #ff9da1 inset; }

.crea-chip__bola {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 34%),
    var(--bola, #e8574f);
  box-shadow: inset -2px -3px 6px rgba(0, 0, 0, .28);
}

.crea-chip__bola--gen { --bola: #e8574f; }
.crea-chip__bola--eva { --bola: #2f9e8f; }
.crea-chip__bola--nar { --bola: #8e6bbf; }
.crea-chip__bola--col { --bola: #e8a13d; }
.crea-chip__bola--con { --bola: #4a90d9; }
.crea-chip__bola--exp { --bola: #57b26a; }
.crea-chip__bola--res { --bola: #e06a9f; }

.crea-chip__bola svg { width: 18px; height: 18px; }

.crea-chip__nombre { line-height: 1.25; }

.crea-catalogo__nada { color: rgba(232, 237, 239, .6); font-style: italic; padding: 8px 2px; }

.crea-catalogo__nota {
  margin-top: 20px;
  font-size: .8rem;
  font-style: italic;
  color: rgba(232, 237, 239, .5);
  max-width: 720px;
}

/* ---------- la ventanilla del prompt (modal) ---------- */

body.crea-rec-abierta { overflow: hidden; }

.crea-rec {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.crea-rec.show { opacity: 1; }

.crea-rec__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 13, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.crea-rec__panel {
  position: relative;
  width: min(1000px, 100%);
  max-height: min(92vh, 100%);
  overflow: auto;
  background: #fdfcf9;
  color: #0f1c22;
  border-radius: 26px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  transform: translateY(14px);
  transition: transform .3s var(--ease);
}

.crea-rec.show .crea-rec__panel { transform: translateY(0); }

.crea-rec__marquee {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: linear-gradient(180deg, #22333d 0%, #131f27 100%);
  color: var(--crea-crema);
}

.crea-rec__pluma { display: grid; place-items: center; color: var(--crea-crema); }

.crea-rec__rotulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.crea-rec__sub {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 237, 194, .55);
}

.crea-rec__close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s var(--ease);
}

.crea-rec__close:hover { background: var(--crea-rojo); }

.crea-rec__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
  padding: 22px clamp(18px, 3vw, 30px) 28px;
}

.crea-rec__tecnica {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.crea-rec__eleg {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  margin-right: auto;
}

.crea-rec__ficha-btn {
  border: 1.5px solid rgba(15, 28, 34, .25);
  background: #fff;
  color: #0f1c22; /* fijo: con el color-scheme oscuro del modo noche, el texto de botón de la UA sería blanco */
  border-radius: 999px;
  padding: 7px 15px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .76rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

.crea-rec__ficha-btn:hover { border-color: #0f1c22; }
.crea-rec__ficha-btn[aria-expanded="true"] { background: #0f1c22; color: #fff; border-color: #0f1c22; }

.crea-rec__ficha {
  grid-column: 1 / -1;
  background: #f4f2ec;
  border-radius: 18px;
  padding: 18px 20px;
}

.crea-rec__ficha-meta { margin-bottom: 10px; }

.crea-chip-ficha {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 12px;
  color: #fff;
  background: var(--bola, #e8574f);
}

.crea-chip-ficha--gen { --bola: #d64840; }
.crea-chip-ficha--eva { --bola: #27897c; }
.crea-chip-ficha--nar { --bola: #7c5aa8; }
.crea-chip-ficha--col { --bola: #c17a14; }
.crea-chip-ficha--con { --bola: #3d7cbe; }
.crea-chip-ficha--exp { --bola: #398f4d; }
.crea-chip-ficha--res { --bola: #c14e82; }

.crea-rec__ficha-dl { display: grid; gap: 10px; }

.crea-rec__ficha-fila dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7c6a45;
}

.crea-rec__ficha-fila dd { margin: 3px 0 0; line-height: 1.6; color: #22333d; }

.crea-rec__help { font-size: .88rem; color: #5d6d75; margin-bottom: 14px; line-height: 1.6; }
.crea-rec__help .tok-var { background: rgba(194, 51, 57, .1); color: #a92930; }

.crea-rec__campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.crea-campo { display: grid; gap: 4px; }
.crea-campo--wide { grid-column: 1 / -1; }

.crea-campo span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5d6d75;
}

.crea-campo input,
.crea-campo textarea {
  width: 100%;
  border: 1.5px solid rgba(15, 28, 34, .18);
  border-radius: 12px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: #0f1c22;
  background: #fff;
  transition: border-color .2s var(--ease);
}

.crea-campo textarea { resize: vertical; }
.crea-campo input:focus,
.crea-campo textarea:focus { outline: none; border-color: var(--crea-rojo); }

/* el tique con el prompt vivo */
.crea-ticket {
  background: #101c23;
  border-radius: 20px;
  padding: 18px;
  color: #e8edef;
  box-shadow: 0 18px 40px rgba(15, 28, 34, .25);
}

.crea-ticket__title {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 237, 194, .8);
}

.crea-ticket__paper {
  margin-top: 12px;
  max-height: 320px;
  overflow: auto;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(232, 237, 239, .12);
  border-radius: 12px;
  padding: 14px;
}

.crea-ticket__code {
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: #d7e0e4;
}

.crea-ticket__code .tok-var {
  color: #ffd479;
  background: rgba(255, 212, 121, .12);
}

.crea-ticket__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.crea-copy {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--crea-rojo);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.crea-copy:hover { background: #a92930; transform: translateY(-1px); }

.crea-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid rgba(232, 237, 239, .3);
  border-radius: 999px;
  padding: 8px 16px;
  background: none;
  color: #e8edef;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.crea-save:hover { border-color: #e8edef; }
.crea-save .crea-save__check { display: none; }
.crea-save.is-flash { border-color: #7ac98e; color: #a7e3b5; }
.crea-save.is-flash .crea-save__check { display: block; }
.crea-save.is-flash .crea-save__marca { display: none; }

/* el botón «Abrir en IA» que inyecta initAbrirEnIA hereda su estilo
   global (.prompt-open); sobre el tique oscuro se ve tal cual */

.crea-ticket__hint {
  margin-top: 10px;
  font-size: .74rem;
  color: rgba(232, 237, 239, .5);
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .crea-escena { grid-template-columns: 1fr; }
  .crea-panel { min-height: 0; }
  .crea-carta { padding: 70px 22px 26px; }
}

@media (max-width: 860px) {
  .crea-rec__body { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .crea-section { padding-top: 70px; padding-bottom: 72px; }
  .crea-maquina { width: min(100%, 300px); }
  .crea-maquina__cupula { height: 215px; }
  .crea-maquina__cuerpo { height: 150px; }
  .crea-maquina__manivela { width: 72px; height: 72px; }
  .crea-catalogo__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .crea-rec { padding: 10px; }
  .crea-rec__campos { grid-template-columns: 1fr; }
  .crea-rec__sub { display: none; }
}

/* accesibilidad: sin animaciones si el visitante las reduce */
@media (prefers-reduced-motion: reduce) {
  .crea-maquina__eje.gira i,
  .crea-maquina__bolas.agita .crea-bola,
  .crea-maquina__gota.cae,
  .crea-carta--abre,
  .crea-carta--abre .crea-carta__media--sup,
  .crea-carta--abre .crea-carta__media--inf,
  .crea-carta--abre .crea-carta__icono,
  .crea-girando .crea-maquina { animation: none !important; }
}

html.a11y-reduce-motion .crea-maquina__eje.gira i,
html.a11y-reduce-motion .crea-maquina__bolas.agita .crea-bola,
html.a11y-reduce-motion .crea-maquina__gota.cae,
html.a11y-reduce-motion .crea-carta--abre,
html.a11y-reduce-motion .crea-girando .crea-maquina { animation: none !important; }

/* al imprimir una ficha, la ventanilla no debe salir */
@media print {
  body.imprime-ficha .crea-rec { display: none !important; }
}

/* ============================================================
   EL PANEL (panelSalidas)
   ------------------------------------------------------------
   Las retrospectivas docentes como el panel de salidas de una
   estación: cinco filas (las cinco fases) cuyas letras giran
   hasta componer la actividad. Sección oscura de serie (colores
   fijos): el modo noche no necesita retoques, igual que la
   expendedora o la gramola. Las letras giran UNA vez y se paran.
   ============================================================ */

.retro-section {
  --retro-noche: #101c23;
  --retro-noche2: #0a1218;
  --retro-rojo: #c23339;
  --retro-crema: #ffedc2;
  --retro-flap: #f0e6c8;
  background:
    radial-gradient(120% 90% at 50% 0%, #1b2f3a 0%, var(--retro-noche) 45%, var(--retro-noche2) 100%);
  color: #e8edef;
  padding-top: 90px;
  padding-bottom: 96px;
  overflow: hidden;
}

.retro-section .feature__eyebrow { color: #ff9da1; }
.retro-section .section__title { color: #f2f5f6; }

.retro__head { max-width: 780px; }

.retro__intro {
  margin-top: 18px;
  font-size: 1.06rem;
  line-height: 1.75;
  color: rgba(232, 237, 239, .82);
  max-width: 640px;
}

/* ---------- el tablero ---------- */

.retro-tablero {
  margin-top: 46px;
  background: linear-gradient(180deg, #16232b 0%, #0b1418 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 26px;
  padding: clamp(16px, 2.6vw, 26px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.retro-tablero__marquesina {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.retro-tablero__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--retro-crema);
}

.retro-tablero__rotulo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--retro-rojo);
  box-shadow: 0 0 10px rgba(194, 51, 57, .9);
}

.retro-tablero__sub {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 237, 194, .5);
}

.retro-tablero__reloj {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: rgba(232, 237, 239, .6);
  white-space: nowrap;
}

.retro-tablero__reloj b {
  color: #ffd479;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.retro-tablero__cab,
.retro-fila {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 62px 216px;
  gap: 12px;
  align-items: center;
}

.retro-tablero__cab {
  padding: 12px 2px 8px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(232, 237, 239, .35);
}

.retro-tablero__cab span:nth-child(3) { text-align: center; }

.retro-fila {
  position: relative;
  padding: 8px 2px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.retro-fila.is-fijada::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--retro-rojo);
}

.retro-fila.is-recien { animation: retro-recien .9s var(--ease); }

@keyframes retro-recien {
  0% { background: rgba(194, 51, 57, .16); }
  100% { background: transparent; }
}

.retro-fila__fase {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.retro-fila__fase b {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 237, 194, .12);
  color: var(--retro-crema);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
}

.retro-fila__fase span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
  line-height: 1.25;
  letter-spacing: .02em;
  color: rgba(232, 237, 239, .72);
}

.retro-fila__panel {
  border: 0;
  background: none;
  padding: 4px 2px;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: background .2s var(--ease);
}

.retro-fila__panel:hover { background: rgba(255, 255, 255, .04); }
.retro-fila__panel:focus-visible { outline: 2px solid var(--retro-rojo); outline-offset: 2px; }

.retro-fila__flaps {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  perspective: 300px;
}

.retro-flap {
  position: relative;
  width: 17px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: linear-gradient(180deg, #2b3a44 0 50%, #1a252c 50% 100%);
  color: var(--retro-flap);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  transform-origin: center;
}

.retro-flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .5);
}

/* el nombre de la actividad, solo para lectores de pantalla y buscadores:
   las letras del tablero son decorativas y se leerían una a una */
.retro-fila__lectura {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.retro-flap--sep {
  width: 7px;
  background: none;
  box-shadow: none;
}

.retro-flap--sep::after { display: none; }

.retro-flap.gira { animation: retro-flip .11s linear; }

@keyframes retro-flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(-78deg); }
  100% { transform: rotateX(0); }
}

.retro-fila__min {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.retro-fila__min b {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: #ffd479;
  font-variant-numeric: tabular-nums;
}

.retro-fila__min i {
  font-style: normal;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(232, 237, 239, .38);
}

.retro-fila__mandos {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.retro-icono {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: rgba(232, 237, 239, .75);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.retro-icono:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}

/* el botón del prompt de cada fila: el gesto principal de la fila */
.retro-fila__prompt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(194, 51, 57, .55);
  background: rgba(194, 51, 57, .18);
  color: #ff9da1;
  border-radius: 10px;
  padding: 7px 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.retro-fila__prompt:hover {
  background: var(--retro-rojo);
  border-color: var(--retro-rojo);
  color: #fff;
  transform: translateY(-2px);
}

.retro-icono.is-fijada {
  background: rgba(255, 212, 121, .16);
  border-color: rgba(255, 212, 121, .55);
  color: #ffd479;
}

/* el arco del candado se cierra al fijar la fila */
.retro-icono .retro-candado__arco { transition: transform .25s var(--ease); transform-origin: 12px 10.5px; }
.retro-icono.is-fijada .retro-candado__arco { transform: translateY(-1px); }

.retro-tablero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.retro-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.retro-boton:hover { transform: translateY(-2px); }

.retro-boton--rojo {
  background: var(--retro-rojo);
  color: #fff;
  box-shadow: 0 10px 24px rgba(194, 51, 57, .35);
}

.retro-boton--rojo:hover { background: #a92930; }

.retro-boton--linea {
  background: none;
  color: rgba(232, 237, 239, .82);
  border: 1.5px solid rgba(255, 255, 255, .2);
}

.retro-boton--linea:hover { border-color: rgba(255, 255, 255, .55); color: #fff; }

.retro-tablero__hint {
  margin-top: 14px;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(232, 237, 239, .45);
}

/* ---------- el listado de las 45 actividades ---------- */

.retro-catalogo { margin-top: 40px; text-align: center; }

.retro-catalogo__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: #e8edef;
  border-radius: 999px;
  padding: 11px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.retro-catalogo__toggle:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.retro-catalogo__caret svg { transition: transform .3s var(--ease); display: block; }
.retro-catalogo__toggle.is-abierto .retro-catalogo__caret svg { transform: rotate(180deg); }

.retro-catalogo__panel {
  margin-top: 22px;
  text-align: left;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  padding: clamp(16px, 2.4vw, 24px);
}

.retro-catalogo__hint {
  font-size: .84rem;
  color: rgba(232, 237, 239, .6);
  margin-bottom: 12px;
}

.retro-catalogo__buscar {
  width: 100%;
  border: 1.5px solid rgba(232, 237, 239, .18);
  border-radius: 12px;
  padding: 11px 14px;
  background: rgba(10, 18, 24, .6);
  color: #e8edef;
  font-family: var(--font-body);
  font-size: .92rem;
  margin-bottom: 18px;
}

.retro-catalogo__buscar::placeholder { color: rgba(232, 237, 239, .4); }
.retro-catalogo__buscar:focus { outline: 2px solid var(--retro-rojo); outline-offset: 2px; }

.retro-lista { display: grid; gap: 22px; }

.retro-lista__fase {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .86rem;
  color: var(--retro-crema);
}

.retro-lista__fase b {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 237, 194, .14);
  font-size: .66rem;
}

.retro-lista__fase i {
  font-style: normal;
  font-weight: 400;
  font-size: .74rem;
  color: rgba(232, 237, 239, .45);
}

.retro-lista__chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.retro-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: #e8edef;
  border-radius: 12px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8rem;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}

.retro-chip:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.retro-chip.is-elegida { border-color: #ff9da1; box-shadow: 0 0 0 1px #ff9da1 inset; }

.retro-chip__nombre { flex: 1; line-height: 1.25; }

.retro-chip__min {
  flex: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: #ffd479;
  font-variant-numeric: tabular-nums;
}

.retro-catalogo__nada {
  color: rgba(232, 237, 239, .6);
  font-style: italic;
  padding: 8px 2px;
}

/* ---------- la tarjeta de la fuente (Retromat) ---------- */

.retro-fuente { margin-top: 44px; }

.retro-fuente__marco {
  background: #fdfcf9;
  color: #22333d;
  border-radius: 24px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  border-left: 5px solid var(--retro-rojo);
}

.retro-fuente__eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--retro-rojo);
}

.retro-fuente__title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.02em;
  color: #0f1c22;
}

.retro-fuente__text {
  margin-top: 12px;
  font-size: .95rem;
  line-height: 1.75;
  color: #3a4a52;
  max-width: 72ch;
}

.retro-fuente__links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.retro-fuente__link {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(15, 28, 34, .2);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  color: #0f1c22;
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

.retro-fuente__link:hover { background: var(--retro-rojo); border-color: var(--retro-rojo); color: #fff; }

/* ---------- la ventanilla del prompt ---------- */

body.retro-rec-abierta { overflow: hidden; }

.retro-rec {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.retro-rec.show { opacity: 1; }

.retro-rec__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 13, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.retro-rec__panel {
  position: relative;
  width: min(1080px, 100%);
  max-height: min(92vh, 100%);
  overflow: auto;
  background: #fdfcf9;
  color: #0f1c22;
  border-radius: 26px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  transform: translateY(14px);
  transition: transform .3s var(--ease);
}

.retro-rec.show .retro-rec__panel { transform: translateY(0); }

.retro-rec__marquee {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: linear-gradient(180deg, #22333d 0%, #131f27 100%);
  color: var(--retro-crema, #ffedc2);
}

/* el rótulo de la fase, en la marquesina: texto pelado, sin pinta de botón */
.retro-rec__fase {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 237, 194, .55);
}

.retro-rec__fase::after {
  content: "·";
  margin: 0 2px 0 8px;
  color: rgba(255, 237, 194, .3);
}

.retro-rec__rotulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.retro-rec__close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s var(--ease);
}

.retro-rec__close:hover { background: #c23339; }

.retro-rec__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 22px clamp(18px, 3vw, 30px) 28px;
  align-items: start;
}

.retro-rec__actividad {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* los dos cajones plegados: personalizar el prompt y ver cómo se hace */
.retro-rec__mandos {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* mientras no se abre ninguno, no ocupan ni un píxel */
.retro-rec__cajones { display: none; }
.retro-rec__body.tiene-cajon .retro-rec__cajones { display: grid; gap: 14px; }

.retro-rec__caja {
  background: #f4f2ec;
  border-radius: 18px;
  padding: 18px 20px;
}

/* Con un cajón abierto, la ventanilla se parte en dos: a la izquierda lo que
   acabas de abrir y a la derecha el prompt, que se queda pegado arriba para
   verlo reescribirse mientras rellenas los datos. */
@media (min-width: 900px) {
  .retro-rec__body.tiene-cajon { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .retro-rec__body.tiene-cajon .retro-ticket {
    position: sticky;
    top: 74px; /* justo por debajo de la marquesina, que también va pegada */
  }
  .retro-rec__body.tiene-cajon .retro-ticket__paper { max-height: 46vh; }
}

.retro-rec__eleg {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  width: 100%;
}

/* En la cabecera de la ventanilla solo va el nombre de la actividad: la fase,
   la duración y con quién funciona viven dentro de la ficha. Antes eran
   etiquetas sueltas que parecían botones sin serlo. */

.retro-rec__ficha-btn {
  border: 1.5px solid rgba(15, 28, 34, .25);
  background: #fff;
  color: #0f1c22;
  border-radius: 999px;
  padding: 7px 15px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .76rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

.retro-rec__ficha-btn:hover { border-color: #0f1c22; }
.retro-rec__ficha-btn[aria-expanded="true"] { background: #0f1c22; color: #fff; border-color: #0f1c22; }
.retro-rec__ficha-btn--suave { border-color: rgba(15, 28, 34, .14); color: #5d6d75; }
.retro-rec__ficha-btn--suave:hover { color: #0f1c22; }

.retro-rec__ficha {
  background: #f4f2ec;
  border-radius: 18px;
  padding: 18px 20px;
}

.retro-rec__ficha-dl { display: grid; gap: 12px; margin: 0; }

.retro-rec__ficha-fila dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7c6a45;
}

.retro-rec__ficha-fila dd { margin: 4px 0 0; line-height: 1.65; color: #22333d; font-size: .92rem; }

.retro-pasos {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
}

.retro-pasos li { line-height: 1.65; }

.retro-rec__help { font-size: .88rem; color: #5d6d75; margin-bottom: 14px; line-height: 1.6; }
.retro-rec__help .tok-var { background: rgba(194, 51, 57, .1); color: #a92930; }

.retro-rec__campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.retro-campo { display: grid; gap: 4px; }
.retro-campo--wide { grid-column: 1 / -1; }

.retro-campo span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5d6d75;
}

.retro-campo input,
.retro-campo textarea {
  width: 100%;
  border: 1.5px solid rgba(15, 28, 34, .18);
  border-radius: 12px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: #0f1c22;
  background: #fff;
  transition: border-color .2s var(--ease);
}

.retro-campo textarea { resize: vertical; }
.retro-campo input:focus,
.retro-campo textarea:focus { outline: none; border-color: #c23339; }

/* el tique con el prompt vivo */
.retro-ticket {
  background: #101c23;
  border-radius: 20px;
  padding: 18px;
  color: #e8edef;
  box-shadow: 0 18px 40px rgba(15, 28, 34, .25);
}

.retro-ticket__title {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 237, 194, .8);
}

.retro-ticket__paper {
  margin-top: 12px;
  max-height: 320px;
  overflow: auto;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(232, 237, 239, .12);
  border-radius: 12px;
  padding: 14px;
}

.retro-ticket__code {
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: #d7e0e4;
}

.retro-ticket__code .tok-var {
  color: #ffd479;
  background: rgba(255, 212, 121, .12);
}

.retro-ticket__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.retro-copy {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  background: #c23339;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.retro-copy:hover { background: #a92930; transform: translateY(-1px); }

.retro-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid rgba(232, 237, 239, .3);
  border-radius: 999px;
  padding: 8px 16px;
  background: none;
  color: #e8edef;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.retro-save:hover { border-color: #e8edef; }
.retro-save .retro-save__check { display: none; }
.retro-save.is-flash { border-color: #7ac98e; color: #a7e3b5; }
.retro-save.is-flash .retro-save__check { display: block; }
.retro-save.is-flash .retro-save__marca { display: none; }

.retro-ticket__hint {
  margin-top: 10px;
  font-size: .74rem;
  color: rgba(232, 237, 239, .5);
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .retro-rec__body { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .retro-section { padding-top: 70px; padding-bottom: 72px; }
  .retro-tablero__cab { display: none; }
  .retro-fila {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "fase min"
      "flaps flaps"
      "mandos mandos";
    gap: 8px;
    padding: 14px 2px;
  }
  .retro-fila__fase { grid-area: fase; }
  .retro-fila__panel { grid-area: flaps; }
  .retro-fila__min { grid-area: min; flex-direction: row; align-items: baseline; gap: 4px; }
  .retro-fila__mandos { grid-area: mandos; justify-content: flex-start; }
  .retro-flap { width: 15px; height: 22px; font-size: .72rem; }
  .retro-tablero__sub { display: none; }
  .retro-boton { flex: 1 1 auto; justify-content: center; }
  .retro-rec { padding: 10px; }
  .retro-rec__campos { grid-template-columns: 1fr; }
}

/* la hoja impresa del plan */
.retro-hoja__fase { margin-top: 18px; }
.retro-hoja__fase h3 { font-family: var(--font-display); font-size: 1rem; }

/* accesibilidad: sin giros si el visitante reduce el movimiento */
@media (prefers-reduced-motion: reduce) {
  .retro-flap.gira,
  .retro-fila.is-recien { animation: none !important; }
}

html.a11y-reduce-motion .retro-flap.gira,
html.a11y-reduce-motion .retro-fila.is-recien { animation: none !important; }

/* al imprimir el plan o una ficha, la ventanilla no debe salir */
@media print {
  body.imprime-ficha .retro-rec { display: none !important; }
}

/* ---------- el adorno de la portada (hero--panel) ---------- */

.hero-panel__tablero {
  display: grid;
  gap: 5px;
  justify-content: center;
  margin: 22px auto 4px;
  padding: 14px 16px;
  width: fit-content;
  border-radius: 16px;
  background: linear-gradient(180deg, #16232b 0%, #0b1418 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 44px rgba(15, 28, 34, .28);
  perspective: 320px;
}

.hero-panel__fila { display: flex; gap: 3px; justify-content: center; }

.hero-panel__flap {
  position: relative;
  width: 20px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: linear-gradient(180deg, #2b3a44 0 50%, #1a252c 50% 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: hero-panel-flip .5s var(--ease) both;
  animation-delay: calc(.25s + var(--i) * .07s);
}

.hero-panel__flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .5);
}

.hero-panel__flap b {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1;
  color: #f0e6c8;
}

@keyframes hero-panel-flip {
  0% { transform: rotateX(-85deg); opacity: 0; }
  60% { transform: rotateX(8deg); opacity: 1; }
  100% { transform: rotateX(0); opacity: 1; }
}

@media (max-width: 560px) {
  .hero-panel__flap { width: 16px; height: 23px; }
  .hero-panel__flap b { font-size: .72rem; }
}

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

html.a11y-reduce-motion .hero-panel__flap { animation: none; }

/* ============================================================
   DESIGN THINKING — «El doble diamante» (diseno.html)
   ------------------------------------------------------------
   Tokens propios (tinta + rojo de marca sobre papel claro), la
   entrada (qué es), el tablero maestro-detalle con la cinta del
   doble diamante y el modal del prompt. Estética de estudio de
   diseño: limpia, con hilos finos y un acento rojo. Modo noche al
   final del bloque.
   ============================================================ */
:root {
  --dis-ink: #0f1c22;
  --dis-red: #c23339;
  --dis-paper: #f7f6f3;
  --dis-line: rgba(15, 28, 34, .16);
  --dis-line-soft: rgba(15, 28, 34, .09);
  --dis-muted: #5a6b73;
}

/* ---- entrada: qué es el design thinking ---- */
/* las dos secciones van sobre papel cálido: los muebles blancos
   (pilares, tablero, referencias) destacan encima en modo claro */
.dis-intro, .dis-section { background: linear-gradient(180deg, #f5f2ec, #efebe2); }
.dis-intro { padding-top: 8px; }
.dis-intro__head { max-width: 780px; margin: 0 auto; text-align: center; }
.dis-intro__lead { margin-top: 16px; font-size: 1.12rem; line-height: 1.7; color: #2c3a41; }
.dis-intro__lead strong { font-weight: 600; color: var(--dis-ink); }

.dis-pilares { margin-top: 40px; }
.dis-pilares__label {
  display: block; text-align: center; font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  font-size: .72rem; color: var(--dis-red); margin-bottom: 18px;
}
.dis-pilares__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dis-pilar {
  position: relative; background: var(--white); border: 1px solid var(--dis-line);
  border-radius: 20px; padding: 26px 24px 24px; box-shadow: var(--shadow);
}
.dis-pilar__n {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--dis-ink); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 14px;
}
.dis-pilar__k { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--dis-ink); }
.dis-pilar__t { margin-top: 8px; font-size: .95rem; line-height: 1.55; color: var(--dis-muted); }

.dis-princ { margin-top: 34px; background: var(--white); border: 1px solid var(--dis-line-soft); border-radius: 24px; padding: 30px 30px 26px; box-shadow: var(--shadow); }
.dis-princ__label { text-align: center; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--dis-ink); margin-bottom: 18px; }
.dis-princ__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 26px; }
.dis-princ__item { display: flex; gap: 12px; align-items: flex-start; }
.dis-princ__dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--dis-red); box-shadow: 0 0 0 4px rgba(194, 51, 57, .12); }
.dis-princ__body strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--dis-ink); }
.dis-princ__body span { display: block; font-size: .88rem; line-height: 1.5; color: var(--dis-muted); margin-top: 2px; }
.dis-intro__origen { max-width: 820px; margin: 26px auto 0; text-align: center; font-size: .86rem; line-height: 1.6; color: var(--dis-muted); }
.dis-intro__origen a { color: var(--dis-red); text-decoration: underline; text-underline-offset: 2px; }

/* tarjeta de referencias (en qué se basa) */
.dis-refs { max-width: 860px; margin: 30px auto 0; background: var(--white); border: 1px solid var(--dis-line); border-radius: 22px; box-shadow: var(--shadow); padding: 26px 28px; }
.dis-refs__head { display: flex; gap: 14px; align-items: flex-start; }
.dis-refs__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(194,51,57,.1); color: var(--dis-red); }
.dis-refs__icon svg { width: 21px; height: 21px; }
.dis-refs__title { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--dis-ink); }
.dis-refs__text { margin-top: 5px; font-size: .9rem; line-height: 1.55; color: var(--dis-muted); }
.dis-refs__text em { color: var(--dis-ink); font-style: italic; font-weight: 500; }
.dis-refs__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dis-ref { border: 1px solid var(--dis-line); border-radius: 14px; padding: 14px 16px; background: var(--dis-paper); }
.dis-ref__link { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.dis-ref__obra { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--dis-ink); }
.dis-ref__autor { font-size: .82rem; color: var(--dis-red); font-weight: 600; }
.dis-ref__go { margin-left: auto; color: var(--dis-red); flex: none; opacity: .7; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.dis-ref__link:hover .dis-ref__obra { text-decoration: underline; text-underline-offset: 2px; }
.dis-ref__link:hover .dis-ref__go { transform: translate(2px,-2px); opacity: 1; }
.dis-ref__nota { display: block; margin-top: 6px; font-size: .82rem; line-height: 1.45; color: var(--dis-muted); }

/* ---- el tablero ---- */
.dis-section { padding-top: 6px; }
.dis__head { max-width: 760px; margin: 0 auto; text-align: center; }
.dis__intro { margin-top: 14px; font-size: 1.04rem; line-height: 1.65; color: var(--dis-muted); }

.dis-board {
  margin-top: 36px; background: var(--white);
  border: 1px solid var(--dis-line); border-radius: 30px;
  box-shadow: var(--shadow); overflow: hidden;
}

/* la cinta del doble diamante */
.dis-rail {
  position: relative; background:
    radial-gradient(circle at 1px 1px, rgba(15,28,34,.05) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--dis-paper), #fbfaf8);
  border-bottom: 1px solid var(--dis-line);
  aspect-ratio: 1000 / 232; width: 100%;
}
.dis-rail__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dis-rail__edge { fill: none; stroke: rgba(15,28,34,.5); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.dis-rail__tail { fill: none; stroke: rgba(15,28,34,.42); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.dis-rail__fill { stroke: none; }
.dis-rail__fill--1 { fill: rgba(194, 51, 57, .09); }
.dis-rail__fill--2 { fill: rgba(15, 28, 34, .05); }
.dis-rail__vtx { fill: #fff; stroke: rgba(15,28,34,.4); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill .25s var(--ease); }
.dis-rail__vtx.is-active { fill: var(--dis-red); stroke: var(--dis-red); }

.dis-rail__stops { position: absolute; inset: 0; }
.dis-stop {
  position: absolute; left: var(--sx); top: var(--sy);
  transform: translate(-50%, -50%);
  display: block; border: none; background: none; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.dis-stop__dot {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto;
  border-radius: 50%; background: #fff; border: 2px solid rgba(15,28,34,.28);
  box-shadow: 0 4px 14px rgba(15,28,34,.12);
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.dis-stop__num { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--dis-ink); transition: color .22s var(--ease); }
.dis-stop__nombre {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  color: var(--dis-ink); background: rgba(255,255,255,.86); padding: 3px 9px; border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15,28,34,.06);
}
.dis-stop:hover .dis-stop__dot { transform: scale(1.08); border-color: var(--dis-red); }
.dis-stop[aria-selected="true"] .dis-stop__dot { background: var(--dis-red); border-color: var(--dis-red); transform: scale(1.12); box-shadow: 0 8px 22px rgba(194,51,57,.32); }
.dis-stop[aria-selected="true"] .dis-stop__num { color: #fff; }
.dis-stop[aria-selected="true"] .dis-stop__nombre { color: var(--dis-red); }
.dis-stop:focus-visible { outline: none; }
.dis-stop:focus-visible .dis-stop__dot { outline: 3px solid var(--dis-red); outline-offset: 3px; }

.dis-rail__legend { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 20px; pointer-events: none; }
.dis-rail__leg { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; color: var(--dis-muted); display: inline-flex; align-items: center; gap: 6px; }
.dis-rail__leg::before { content: ""; width: 9px; height: 9px; }
.dis-rail__leg--div::before { background: var(--dis-red); opacity: .5; transform: rotate(45deg); }
.dis-rail__leg--con::before { background: var(--dis-ink); opacity: .4; border-radius: 50%; }

/* el panel de la fase */
.dis-panel { padding: 26px 30px 32px; }
.dis-panel__cab { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--dis-line-soft); }
.dis-panel__fase { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--dis-red); }
.dis-panel__qa { grid-column: 1; }
.dis-panel__pregunta { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.25; color: var(--dis-ink); }
.dis-panel__result { margin-top: 6px; font-size: .92rem; color: var(--dis-muted); }
.dis-panel__rlbl { font-weight: 600; color: var(--dis-ink); }
.dis-panel__tools { grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dis-panel__count { font-family: var(--font-display); font-weight: 600; font-size: .78rem; color: var(--dis-muted); }
.dis-azar { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--dis-line); background: #fff; color: var(--dis-ink); font-family: var(--font-display); font-weight: 600; font-size: .82rem; padding: 8px 14px; border-radius: 22px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); white-space: nowrap; }
.dis-azar svg { width: 16px; height: 16px; }
.dis-azar:hover { border-color: var(--dis-red); background: rgba(194,51,57,.05); }

/* las tarjetas de método: cabecera con código, marca divergir/converger
   y tiempo; nombre y para qué; pie con los pasos y la llamada a abrir.
   El código fantasma del rincón es la firma de las tarjetas de la casa. */
.dis-cards { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.dis-card {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--dis-line); border-radius: 18px;
  padding: 15px 18px 13px; display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 1px 5px rgba(15,28,34,.06);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.dis-card::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--dis-red); opacity: 0; transition: opacity .2s var(--ease); }
.dis-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: rgba(194,51,57,.4); }
.dis-card:hover::before, .dis-card.is-open::before { opacity: 1; }
.dis-card__top { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.dis-card__code { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--dis-red); letter-spacing: .02em; }
.dis-card__tipo { flex: none; width: 8px; height: 8px; }
.dis-card__tipo--divergir { background: var(--dis-red); opacity: .5; transform: rotate(45deg); }
.dis-card__tipo--converger { background: var(--dis-ink); opacity: .4; border-radius: 50%; }
.dis-card__tiempo {
  margin-left: auto; min-width: 0; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: .68rem; color: var(--dis-muted);
  background: rgba(15,28,34,.035); border: 1px dashed var(--dis-line);
  border-radius: 20px; padding: 3px 9px;
}
.dis-card__tiempo svg { width: 12px; height: 12px; flex: none; }
.dis-card__tiempo b { font-weight: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dis-card__cab { display: flex; align-items: center; gap: 11px; }
.dis-card__icono {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; background: rgba(194,51,57,.08); color: var(--dis-red);
}
.dis-card__icono svg { width: 21px; height: 21px; }
.dis-card__nombre { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.25; color: var(--dis-ink); }
.dis-card__para { font-size: .84rem; line-height: 1.5; color: var(--dis-muted); }
.dis-card__pie {
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--dis-line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dis-card__pasos { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: .68rem; color: var(--dis-muted); white-space: nowrap; }
.dis-card__pasos svg { width: 12px; height: 12px; flex: none; }
.dis-card__abrir { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-weight: 700; font-size: .78rem; color: var(--dis-ink); white-space: nowrap; transition: color .2s var(--ease); }
.dis-card__abrir svg { flex: none; transition: transform .2s var(--ease); }
.dis-card:hover .dis-card__abrir { color: var(--dis-red); }
.dis-card:hover .dis-card__abrir svg { transform: translateX(3px); }
.dis-card__ghost {
  position: absolute; right: 12px; bottom: 30px; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 800; font-size: 2.9rem; line-height: 1;
  letter-spacing: -.04em; color: rgba(15,28,34,.045);
}
.dis-card:focus-visible { outline: 3px solid var(--dis-red); outline-offset: 2px; }

/* ---- el modal del prompt ---- */
.dis-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .3s var(--ease); }
.dis-modal.show { opacity: 1; }
.dis-modal__scrim { position: absolute; inset: 0; background: rgba(9, 16, 20, .55); backdrop-filter: blur(3px); }
.dis-modal__panel {
  position: relative; width: min(920px, 100%); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border-radius: 26px; box-shadow: 0 40px 100px rgba(9,16,20,.4);
  transform: translateY(14px) scale(.98); transition: transform .32s var(--ease);
}
.dis-modal.show .dis-modal__panel { transform: none; }
.dis-modal__panel:focus { outline: none; }
.dis-modal__marquee { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--dis-ink); color: #fff; }
.dis-modal__pluma { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; }
.dis-modal__pluma svg { width: 18px; height: 18px; }
.dis-modal__rotulo { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .92rem; background: linear-gradient(90deg, #fff, #f2b6b9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dis-modal__sub { margin-left: auto; font-size: .74rem; color: rgba(255,255,255,.55); font-family: var(--font-display); font-weight: 600; }
.dis-modal__close { margin-left: 12px; border: none; background: rgba(255,255,255,.12); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: .9rem; line-height: 1; transition: background .2s var(--ease); }
.dis-modal__sub + .dis-modal__close { margin-left: 12px; }
.dis-modal__close:hover { background: var(--dis-red); }
.dis-modal__body { padding: 22px 24px 26px; overflow-y: auto; }

.dis-modal__tec { position: relative; padding-bottom: 18px; padding-right: 60px; border-bottom: 1px solid var(--dis-line-soft); }
.dis-tec__icono {
  position: absolute; top: 2px; right: 0; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 13px;
  background: rgba(194,51,57,.08); color: var(--dis-red);
}
.dis-tec__icono svg { width: 26px; height: 26px; }
.dis-tec__chip { display: inline-block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--dis-red); }
.dis-tec__nombre { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.2; color: var(--dis-ink); margin-top: 4px; }
.dis-tec__que { margin-top: 8px; font-size: .96rem; line-height: 1.6; color: #33424a; }
/* dos pestañas: Ver la ficha / Ver el prompt (+ utilidades) */
.dis-tec__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.dis-tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--dis-line); background: #fff; color: var(--dis-ink); font-family: var(--font-display); font-weight: 700; font-size: .88rem; padding: 9px 17px; border-radius: 12px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.dis-tab__ic { display: inline-flex; opacity: .75; }
.dis-tab:hover { border-color: var(--dis-red); background: rgba(194,51,57,.05); }
.dis-tab.is-on { border-color: var(--dis-red); background: var(--dis-red); color: #fff; }
.dis-tab.is-on .dis-tab__ic { opacity: 1; }
.dis-tec__ficha { margin-top: 16px; background: var(--dis-paper); border: 1px solid var(--dis-line-soft); border-radius: 16px; padding: 18px 20px; }
.dis-tec__prompt { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.dis-ficha__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dis-chip { font-size: .78rem; color: var(--dis-muted); background: #fff; border: 1px solid var(--dis-line); border-radius: 20px; padding: 4px 12px; }
.dis-chip b { color: var(--dis-ink); font-weight: 600; }
.dis-ficha__dl { display: flex; flex-direction: column; gap: 12px; }
.dis-ficha__fila dt { font-family: var(--font-display); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dis-red); margin-bottom: 4px; }
.dis-ficha__fila dd { font-size: .92rem; line-height: 1.55; color: #33424a; }
.dis-ficha__ol, .dis-ficha__ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.dis-ficha__ol li, .dis-ficha__ul li { font-size: .9rem; line-height: 1.5; }

.dis-modal__cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; margin-top: 20px; }
.dis-ctx { border: 1px solid var(--dis-line); border-radius: 16px; overflow: hidden; }
.dis-ctx__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--dis-paper); border: none; cursor: pointer; padding: 13px 16px; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--dis-ink); }
.dis-ctx__caret { transition: transform .25s var(--ease); }
.dis-ctx__toggle[aria-expanded="true"] .dis-ctx__caret { transform: rotate(180deg); }
.dis-ctx__body { padding: 14px 16px 16px; }
.dis-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dis-campo { display: flex; flex-direction: column; gap: 5px; }
.dis-campo--wide { grid-column: 1 / -1; }
.dis-campo span { font-family: var(--font-display); font-weight: 600; font-size: .78rem; color: var(--dis-ink); }
.dis-campo input, .dis-campo textarea { font-family: var(--font-body); font-size: .9rem; color: var(--dis-ink); background: #fff; border: 1px solid var(--dis-line); border-radius: 10px; padding: 9px 11px; width: 100%; resize: vertical; transition: border-color .2s var(--ease); }
.dis-campo input:focus, .dis-campo textarea:focus { outline: none; border-color: var(--dis-red); box-shadow: 0 0 0 3px rgba(194,51,57,.12); }
.dis-ctx__hint { margin-top: 10px; font-size: .78rem; line-height: 1.5; color: var(--dis-muted); }

.dis-ticket { background: var(--dis-ink); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; }
.dis-ticket__head { margin-bottom: 10px; }
.dis-ticket__title { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff; }
.dis-ticket__paper { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px; max-height: 320px; overflow-y: auto; }
.dis-ticket__code { font-family: var(--font-mono); font-size: .78rem; line-height: 1.6; color: #dfe7ea; white-space: pre-wrap; word-break: break-word; }
.dis-ticket__bar { display: flex; gap: 10px; margin-top: 14px; }
.dis-copy, .dis-save { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: .86rem; padding: 11px 14px; border-radius: 12px; cursor: pointer; border: none; transition: background .2s var(--ease), transform .12s var(--ease); }
.dis-copy { background: var(--dis-red); color: #fff; }
.dis-copy:hover { background: #a92a30; }
.dis-copy:active { transform: scale(.98); }
.dis-save { background: rgba(255,255,255,.1); color: #fff; }
.dis-save:hover { background: rgba(255,255,255,.18); }
.dis-save__marca { display: inline-block; }
.dis-save__check { display: none; }
.dis-save.is-flash { background: #1f9d6f; }
.dis-save.is-flash .dis-save__marca { display: none; }
.dis-save.is-flash .dis-save__check { display: inline-block; }
.dis-ticket__hint { margin-top: 10px; font-size: .76rem; line-height: 1.5; color: rgba(255,255,255,.5); }
body.dis-modal-abierta { overflow: hidden; }

/* portada (hero variant "diseno"): el título lleva la "g" con cola, así que
   dejamos aire abajo y línea con holgura para que no se corte el descendente */
.hero--diseno .hero__title { line-height: 1.1; padding-bottom: .1em; }

/* adorno de la portada (hero variant "diseno") */
.hero-dis__diamante { width: min(340px, 68vw); margin: 22px auto 0; }
.hero-dis__diamante svg { width: 100%; height: auto; overflow: visible; }
.hero-dis__fill { fill: rgba(194,51,57,.08); }
.hero-dis__fill:nth-of-type(2) { fill: rgba(15,28,34,.07); }
.hero-dis__edge { fill: none; stroke: var(--dis-red); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; opacity: .8; }

/* animación de dibujado del adorno del hero (una sola vez, sin bucle).
   El rail del tablero NO se anima al dibujarse: sus líneas están siempre
   completas para que el diamante se vea cerrado de principio a fin. */
.hero-dis__edge { stroke-dasharray: 100; stroke-dashoffset: 100; }
.hero-dis__diamante.visible .hero-dis__edge { animation: dis-draw 1.1s var(--ease) forwards; }
.hero-dis__diamante.visible .hero-dis__edge:nth-of-type(4) { animation-delay: .18s; }
@keyframes dis-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .dis-pilares__row { grid-template-columns: 1fr; }
  .dis-princ__grid { grid-template-columns: 1fr 1fr; }
  .dis-modal__cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* la cinta se vuelve una fila de paradas desplazable; el diagrama se
     recoge para no amontonar etiquetas en pantallas estrechas */
  .dis-rail { aspect-ratio: auto; padding: 16px 4px; }
  .dis-rail__svg, .dis-rail__legend { display: none; }
  .dis-rail__stops { position: static; display: flex; gap: 10px; overflow-x: auto; padding: 4px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dis-rail__stops::-webkit-scrollbar { display: none; }
  .dis-stop { position: static; transform: none; flex: none; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--dis-line); border-radius: 26px; padding: 6px 14px 6px 6px; }
  .dis-stop__dot { width: 34px; height: 34px; box-shadow: none; }
  .dis-stop__num { font-size: .9rem; }
  .dis-stop__nombre { position: static; transform: none; background: none; box-shadow: none; padding: 0; }
  .dis-stop[aria-selected="true"] { border-color: var(--dis-red); background: rgba(194,51,57,.06); }
  .dis-panel { padding: 22px 18px 26px; }
  .dis-panel__cab { grid-template-columns: 1fr; }
  .dis-panel__tools { grid-column: 1; flex-direction: row; align-items: center; justify-content: space-between; }
  .dis-cards { grid-template-columns: 1fr; }
  .dis-campos { grid-template-columns: 1fr; }
  .dis-modal__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dis__edge { animation: none !important; stroke-dashoffset: 0 !important; }
}
html.a11y-reduce-motion .hero-dis__edge { animation: none !important; stroke-dashoffset: 0 !important; }

/* modo noche del doble diamante */
html[data-tema="noche"] .dis-intro, html[data-tema="noche"] .dis-section { background: none; }
html[data-tema="noche"] .dis-card { box-shadow: none; }
html[data-tema="noche"] .dis-card__tiempo { background: rgba(255,255,255,.05); }
html[data-tema="noche"] .dis-card__icono, html[data-tema="noche"] .dis-tec__icono { background: rgba(229,115,121,.13); color: #e57379; }
html[data-tema="noche"] .dis-intro__lead { color: #c6ccce; }
html[data-tema="noche"] .dis-intro__lead strong { color: #fff; }
html[data-tema="noche"] .dis-pilar,
html[data-tema="noche"] .dis-card,
html[data-tema="noche"] .dis-azar,
html[data-tema="noche"] .dis-tec__btn,
html[data-tema="noche"] .dis-tab,
html[data-tema="noche"] .dis-chip,
html[data-tema="noche"] .dis-campo input,
html[data-tema="noche"] .dis-campo textarea { background: #16252c; border-color: rgba(255,255,255,.12); color: #eef2f3; }
html[data-tema="noche"] .dis-tab.is-on { background: var(--dis-red); border-color: var(--dis-red); color: #fff; }
html[data-tema="noche"] .dis-refs { background: #122026; border-color: rgba(255,255,255,.1); }
html[data-tema="noche"] .dis-ref { background: #16252c; border-color: rgba(255,255,255,.1); }
html[data-tema="noche"] .dis-refs__title, html[data-tema="noche"] .dis-ref__obra { color: #f4f6f7; }
html[data-tema="noche"] .dis-refs__text, html[data-tema="noche"] .dis-ref__nota { color: #9fb0b6; }
html[data-tema="noche"] .dis-refs__text em { color: #eef2f3; }
html[data-tema="noche"] .dis-pilar__k, html[data-tema="noche"] .dis-card__nombre, html[data-tema="noche"] .dis-princ__body strong, html[data-tema="noche"] .dis-panel__pregunta, html[data-tema="noche"] .dis-tec__nombre, html[data-tema="noche"] .dis-ticket__title, html[data-tema="noche"] .dis-panel__rlbl { color: #f4f6f7; }
html[data-tema="noche"] .dis-pilar__t, html[data-tema="noche"] .dis-card__para, html[data-tema="noche"] .dis-princ__body span, html[data-tema="noche"] .dis-panel__result, html[data-tema="noche"] .dis-panel__count { color: #9fb0b6; }
html[data-tema="noche"] .dis-card__code { color: #e57379; }
html[data-tema="noche"] .dis-card__tiempo { color: #9fb0b6; border-color: rgba(255,255,255,.18); }
html[data-tema="noche"] .dis-card__pasos { color: #9fb0b6; }
html[data-tema="noche"] .dis-card__pie { border-top-color: rgba(255,255,255,.14); }
html[data-tema="noche"] .dis-card__abrir { color: #eef2f3; }
html[data-tema="noche"] .dis-card:hover .dis-card__abrir { color: #e57379; }
html[data-tema="noche"] .dis-card__tipo--converger { background: #eef2f3; }
html[data-tema="noche"] .dis-card__ghost { color: rgba(255,255,255,.05); }
html[data-tema="noche"] .dis-board, html[data-tema="noche"] .dis-modal__panel { background: #12202699; background: #122026; border-color: rgba(255,255,255,.1); }
html[data-tema="noche"] .dis-princ, html[data-tema="noche"] .dis-tec__ficha, html[data-tema="noche"] .dis-ctx__toggle { background: #16252c; border-color: rgba(255,255,255,.1); }
html[data-tema="noche"] .dis-rail { background: linear-gradient(180deg, #16252c, #12202a); }
html[data-tema="noche"] .dis-rail__edge { stroke: rgba(255,255,255,.46); }
html[data-tema="noche"] .dis-rail__tail { stroke: rgba(255,255,255,.34); }
html[data-tema="noche"] .dis-rail__fill--1 { fill: rgba(242,182,185,.09); }
html[data-tema="noche"] .dis-rail__fill--2 { fill: rgba(255,255,255,.05); }
html[data-tema="noche"] .dis-rail__vtx { fill: #16252c; stroke: rgba(255,255,255,.4); }
html[data-tema="noche"] .dis-stop__dot { background: #1c2d35; border-color: rgba(255,255,255,.3); }
html[data-tema="noche"] .dis-stop__num { color: #eef2f3; }
html[data-tema="noche"] .dis-stop__nombre { background: rgba(18,32,38,.85); color: #eef2f3; }
html[data-tema="noche"] .dis-stop[aria-selected="true"] .dis-stop__num { color: #fff; }
html[data-tema="noche"] .dis-ctx, html[data-tema="noche"] .dis-ctx__body { border-color: rgba(255,255,255,.1); }
html[data-tema="noche"] .dis-tec__que, html[data-tema="noche"] .dis-ficha__fila dd { color: #c6ccce; }

/* ============================================================
   MODO NOCHE
   ------------------------------------------------------------
   El visitante lo activa con el interruptor luna/sol de la
   cabecera (lo pinta renderHeader en app.js); la elección se
   guarda en localStorage("tema") y un mini-script en el <head>
   de cada página pone data-tema="noche" en <html> ANTES del
   primer pintado, para que no haya destello claro.

   La estrategia: se invierten las variables de color de :root
   (la tinta pasa a ser clara y los fondos, noche), de modo que
   todo lo construido con var(--…) se adapta solo. Debajo van
   los retoques puntuales de los componentes que usan colores
   fijos. Las secciones que ya eran oscuras de serie (consola,
   gramola, NES…) se dejan como están: ya son nocturnas.
   ============================================================ */

/* ---------- el interruptor luna/sol (ambos modos) ---------- */

.tema-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  transition: color .25s var(--ease), transform .25s var(--ease);
}

.tema-toggle:hover { color: var(--red); transform: translateY(-1px); }

.tema-toggle svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .45s var(--ease); }

/* En modo claro se ofrece la luna; en modo noche, el sol. El icono
   saliente gira y se desvanece UNA vez (sin bucles). */
.tema-toggle .tema-toggle__sol { opacity: 0; transform: rotate(-90deg) scale(.6); }
html[data-tema="noche"] .tema-toggle .tema-toggle__sol { opacity: 1; transform: none; }
html[data-tema="noche"] .tema-toggle .tema-toggle__luna { opacity: 0; transform: rotate(90deg) scale(.6); }

/* Transición suave de colores SOLO mientras se cambia de tema
   (app.js pone la clase 450 ms y la quita: una vez y se para). */
html.tema-cambiando, html.tema-cambiando body,
html.tema-cambiando *, html.tema-cambiando *::before, html.tema-cambiando *::after {
  transition: background-color .4s var(--ease), background .4s var(--ease),
              color .4s var(--ease), border-color .4s var(--ease),
              box-shadow .4s var(--ease), fill .4s var(--ease), stroke .4s var(--ease) !important;
}

/* ---------- la paleta nocturna ---------- */

html[data-tema="noche"] {
  color-scheme: dark;
  /* las variables conservan su nombre histórico (--white es "la superficie
     base de la página"): NO renombrarlas */
  --white: #101b21;      /* superficie base: la tinta de marca, aclarada un punto */
  --gray-bg: #0b1318;    /* bandas alternas, más hundidas */
  --gray-card: #19262e;  /* tarjetas y cajas */
  --ink: #e8edef;        /* texto principal */
  --ink-soft: #94a4ac;   /* texto secundario */
  --red: #d4494f;        /* el rojo de marca, un punto más luminoso para leerse sobre noche */
  --shadow: 0 12px 40px rgba(0, 0, 0, .45);
  --shadow-hover: 0 20px 60px rgba(0, 0, 0, .55);
}

html[data-tema="noche"] ::selection { background: rgba(212, 73, 79, .35); color: #fff; }

/* Las fotos bajan un punto de brillo para no deslumbrar sobre fondo noche */
html[data-tema="noche"] img { filter: brightness(.92); }
html[data-tema="noche"] .nav__logo img,
html[data-tema="noche"] .footer__brand > img { filter: none; }

/* ---------- cabecera ---------- */

html[data-tema="noche"] .nav {
  background: rgba(11, 19, 24, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

html[data-tema="noche"] .nav--scrolled {
  background: rgba(11, 19, 24, .92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}

html[data-tema="noche"] .nav__dropdown {
  background: rgba(20, 30, 37, .97);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

html[data-tema="noche"] .nav__mobile {
  border-top-color: rgba(255, 255, 255, .08);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
}

/* ---------- héroes ----------
   Cada portada tiene su variante clara (.hero--X con degradados fijos);
   en modo noche todas comparten un mismo cielo nocturno de marca. */

html[data-tema="noche"] .hero,
html[data-tema="noche"] .hero[class*="hero--"] {
  background:
    radial-gradient(130% 120% at 50% -20%, #16242c 0%, #101b21 52%, var(--gray-bg) 100%);
}

/* ---------- botones ----------
   La píldora de tinta se invierte (píldora clara con texto noche);
   al pasar el ratón se enciende en rojo con texto blanco, como en claro. */

html[data-tema="noche"] .btn--pill:hover { color: #fff; }
html[data-tema="noche"] .btn--light:hover { color: #fff; }

/* ---------- secciones oscuras "de serie" ----------
   Bandas y tarjetas que YA eran oscuras en modo claro (el libro
   promocional, la banda de biografía, el chat de IA, la pila
   oscura…). En modo noche se les re-anclan las variables
   originales para que se vean EXACTAMENTE igual que siempre:
   ya eran nocturnas y son el punto de contraste de la página. */

html[data-tema="noche"] .ph,
html[data-tema="noche"] .trio-card--oscuro,
html[data-tema="noche"] .trio-card--rojo,
html[data-tema="noche"] .llamada,
html[data-tema="noche"] .texto-feature__panel,
html[data-tema="noche"] .kit-bioband,
html[data-tema="noche"] .vitrina-star,
html[data-tema="noche"] .vitrina-ph,
html[data-tema="noche"] .libro--promo,
html[data-tema="noche"] .promo-libro--oscuro,
html[data-tema="noche"] .mapa-scroll,
html[data-tema="noche"] .mapa-stage.active,
html[data-tema="noche"] .mapa-panel__badge,
html[data-tema="noche"] .blog-star,
html[data-tema="noche"] .blog-ph,
html[data-tema="noche"] .chatia-section,
html[data-tema="noche"] .mapa-linea__sign,
html[data-tema="noche"] .blog-sus,
html[data-tema="noche"] .blog-read__body .blog-video .video__facade,
html[data-tema="noche"] .cierre,
html[data-tema="noche"] .cuaderno-fab,
html[data-tema="noche"] .ia-toast,
html[data-tema="noche"] .dif-mini,
html[data-tema="noche"] .dif-aviso,
html[data-tema="noche"] .recorte,
html[data-tema="noche"] .agenda,
html[data-tema="noche"] .lny-section,
html[data-tema="noche"] .citas-prensa,
html[data-tema="noche"] .mapa-linea__board,
html[data-tema="noche"] .mapa-linea__diagram,
html[data-tema="noche"] .ecu-rack,
html[data-tema="noche"] .dif-creditos,
html[data-tema="noche"] .pila--dark {
  --white: #ffffff;
  --gray-bg: #f5f5f7;
  --gray-card: #f2f2f4;
  --ink: #0f1c22;
  --ink-soft: #6e6e73;
  --red: #c23339;
  --shadow: 0 12px 40px rgba(15, 28, 34, .08);
  --shadow-hover: 0 20px 60px rgba(15, 28, 34, .12);
}

/* ---------- tarjetas de logos de la bio ----------
   Las tarjetas de logos descargables (kit de prensa) están diseñadas a mano:
   los propios logotipos llevan sus colores de marca y las versiones en blanco
   se muestran sobre un tablero oscuro. Si se invierten en modo noche el logo
   "desaparece" o queda raro, así que se les re-ancla la paleta clara para que
   se vean EXACTAMENTE igual que en modo claro. (Las fotos sí siguen la noche.) */
html[data-tema="noche"] .kit-logo {
  --white: #ffffff;
  --gray-bg: #f5f5f7;
  --gray-card: #f2f2f4;
  --ink: #0f1c22;
  --ink-soft: #6e6e73;
  --red: #c23339;
  background: #ffffff;
  border-color: rgba(15, 28, 34, .08);
  color: var(--ink);
}
html[data-tema="noche"] .kit-logo__meta h4 { color: var(--ink); }
html[data-tema="noche"] .kit-logo img { filter: none; }

/* ---------- fotos descargables de la bio ----------
   Sus controles viven sobre blanco o sobre el velo oscuro de la propia foto,
   no sobre la superficie de la página. Se fijan aquí sus dos tintas para que
   la inversión global de --ink/--white no deje iconos claros sobre blanco ni
   textos oscuros sobre la imagen. */
html[data-tema="noche"] .kit-photo__tag,
html[data-tema="noche"] .kit-photo__dl {
  color: #0f1c22;
}

html[data-tema="noche"] .kit-photo__frame:hover .kit-photo__dl,
html[data-tema="noche"] .kit-photo__frame:focus-visible .kit-photo__dl,
html[data-tema="noche"] .kit-photo__caption,
html[data-tema="noche"] .kit-photo__hint {
  color: #ffffff;
}

/* ---------- cabecera de divulgación ----------
   La trama y los filetes del periódico estaban dibujados con tinta oscura
   fija. Sobre el cielo nocturno desaparecían; pasan a una tinta clara tenue
   manteniendo la misma jerarquía que en modo día. */
html[data-tema="noche"] .hero--prensa::before {
  background-image: repeating-linear-gradient(90deg,
                    transparent 0 159px,
                    rgba(232, 237, 239, .07) 159px 160px);
}

html[data-tema="noche"] .hero--prensa::after {
  background:
    repeating-linear-gradient(180deg, rgba(232, 237, 239, .09) 0 3px, transparent 3px 11px) left top / clamp(120px, 14vw, 190px) 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(232, 237, 239, .09) 0 3px, transparent 3px 11px) right top / clamp(120px, 14vw, 190px) 100% no-repeat;
}

html[data-tema="noche"] .hero--prensa .hero-prensa__pleca {
  border-top-color: rgba(232, 237, 239, .72);
  border-bottom-color: rgba(232, 237, 239, .30);
}

html[data-tema="noche"] .hero--prensa .hero__ticker {
  border-top-color: rgba(232, 237, 239, .16);
  border-bottom-color: rgba(232, 237, 239, .16);
}

/* El micrófono de noche: el metal sube un punto para no fundirse con el cielo
   de la página y la sombra se hace más honda. El cubo sigue siendo blanco (así
   es el cartel real), así que el isotipo mantiene su color de marca. */
html[data-tema="noche"] .hero-mic {
  --mic-metal-1: #9aa8b0;
  --mic-metal-2: #45565f;
  --mic-metal-3: #22333c;
  --mic-mango-1: #6a7a83;
  --mic-mango-2: #33434b;
  --mic-mango-3: #1a2830;
  --mic-mango-4: #5a6a73;
  --mic-linea: rgba(15, 28, 34, .5);
  --mic-suelo: rgba(0, 0, 0, .55);
}

html[data-tema="noche"] .hero-mic__cabeza-borde { stroke: rgba(255, 255, 255, .28); }

/* Los títulos que en claro usan tinta sólida pasan a background-clip en
   noche. Un pequeño colchón inferior evita que el navegador recorte los
   descendentes de g, p, q e y al pintar ese degradado. Las variantes que ya
   reservan espacio para un subrayado o una cota mantienen su padding propio. */
html[data-tema="noche"] .hero--escenario .hero__title,
html[data-tema="noche"] .hero--prensa .hero__title,
html[data-tema="noche"] .hero--cuaderno .hero__title,
html[data-tema="noche"] .hero--firma .hero__title,
html[data-tema="noche"] .hero--taller .hero__title,
html[data-tema="noche"] .hero--prompts .hero__title,
html[data-tema="noche"] .hero--ecualizador .hero__title,
html[data-tema="noche"] .hero--diferenciador .hero__title,
html[data-tema="noche"] .hero--pensamiento .hero__title {
  padding-bottom: .14em;
}

/* El resto de portadas también contiene información visual dibujada con
   tinta oscura fija (pautas, retículas, marcos y filigranas). Se sustituye
   solo esa tinta por su equivalente luminoso; los acentos rojos no cambian. */
html[data-tema="noche"] .hero--escenario .hero__ticker::before {
  background: linear-gradient(90deg, transparent, rgba(232, 237, 239, .18), transparent);
}

html[data-tema="noche"] .hero--plano {
  --plano-line: rgba(232, 237, 239, .07);
  --plano-line-strong: rgba(232, 237, 239, .16);
}

html[data-tema="noche"] .hero--biblioteca::before {
  background-image: repeating-linear-gradient(180deg,
                    transparent 0 33px,
                    rgba(232, 237, 239, .06) 33px 34px);
}

html[data-tema="noche"] .hero--cuaderno::before {
  background-image: radial-gradient(rgba(232, 237, 239, .14) 1.4px, transparent 1.6px);
}

html[data-tema="noche"] .hero--firma::before {
  background:
    radial-gradient(58% 48% at 50% 36%, rgba(212, 73, 79, .11), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 46px, rgba(232, 237, 239, .06) 46px 47px);
}

html[data-tema="noche"] .hero--taller::after {
  background-image:
    linear-gradient(rgba(232, 237, 239, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 237, 239, .06) 1px, transparent 1px);
}

html[data-tema="noche"] .hero--taller::before {
  --kc: rgba(232, 237, 239, .28);
}

/* el autómata de la portada se dibuja con tinta luminosa; la luz sigue roja */
html[data-tema="noche"] .hero-tal__plano {
  --tal-linea: rgba(232, 237, 239, .82);
  --tal-suave: rgba(232, 237, 239, .26);
  --tal-luz: #d4494f;
}

html[data-tema="noche"] .hero--mapa::before {
  background:
    radial-gradient(42% 34% at 50% 22%, rgba(212, 73, 79, .12), transparent 70%),
    linear-gradient(32deg, transparent 49.8%, rgba(232, 237, 239, .08) 49.8% 50.2%, transparent 50.2%),
    linear-gradient(-21deg, transparent 49.75%, rgba(212, 73, 79, .10) 49.75% 50.25%, transparent 50.25%),
    linear-gradient(76deg, transparent 49.85%, rgba(232, 237, 239, .065) 49.85% 50.15%, transparent 50.15%);
}

html[data-tema="noche"] .hero-rec__util { color: rgba(232, 237, 239, .30); }
html[data-tema="noche"] .hero-rec__util--mapa { color: rgba(212, 73, 79, .62); }
html[data-tema="noche"] .hero-rec__util--creatividad { color: rgba(212, 73, 79, .55); }

html[data-tema="noche"] .hero--kit::before {
  background-image: radial-gradient(rgba(232, 237, 239, .08) 1px, transparent 1.5px);
}

html[data-tema="noche"] .hero-kit__frame { --bc: rgba(232, 237, 239, .24); }

html[data-tema="noche"] .hero-kit__barras {
  background: repeating-linear-gradient(90deg,
    rgba(232, 237, 239, .8) 0 2px, transparent 2px 5px,
    rgba(232, 237, 239, .8) 5px 8px, transparent 8px 10px,
    rgba(232, 237, 239, .8) 10px 11px, transparent 11px 16px);
}

html[data-tema="noche"] .hero--diccionario::before {
  background-image: repeating-linear-gradient(180deg,
                    transparent 0 42px,
                    rgba(232, 237, 239, .07) 42px 43px);
}

html[data-tema="noche"] .hero-dicc__unero i { color: rgba(232, 237, 239, .38); }
html[data-tema="noche"] .hero-dicc__unero i.on { color: #ffffff; }

/* En noche, las tapas del diccionario en miniatura ganan un filo claro
   para no fundirse con el fondo */
html[data-tema="noche"] .hero-dicc__libro::before {
  background: linear-gradient(180deg, #101c23, #070d11);
  box-shadow: 0 0 0 1px rgba(232, 237, 239, .22);
}

/* En noche, las piezas de tinta de los adornos de portada (cámara,
   cajón del índice y tomos) ganan un filo claro; los detalles finos
   dibujados en tinta pasan a su equivalente luminoso. */
html[data-tema="noche"] .hero-cam__cuerpo,
html[data-tema="noche"] .hero-fich__cajon {
  outline: 1px solid rgba(232, 237, 239, .22);
}

/* En noche los tomos suben de tono (las tapas de tinta se fundían con el
   fondo) y ganan un filo claro; el papel del corte se apaga un punto
   para no deslumbrar. */
html[data-tema="noche"] .hero-pila__libro {
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(232, 237, 239, .16);
}
html[data-tema="noche"] .hero-pila__libro::before {
  background:
    repeating-linear-gradient(180deg, rgba(15, 28, 34, .15) 0 1px, transparent 1px 2px),
    linear-gradient(90deg, #b9af96, #ded5be 55%);
}
html[data-tema="noche"] .hero-pila__libro:nth-child(1) { --tomo: #3b505c; --tomo-b: #223038; }
html[data-tema="noche"] .hero-pila__libro:nth-child(3) { --tomo: #6c7c87; --tomo-b: #4a5962; }
html[data-tema="noche"] .hero-pila__libro--rojo { --tomo: #d8555b; --tomo-b: #a52a30; }

/* En noche, las piezas de tinta de la mochila (tirantes, asa, bolsillo)
   se recortan contra el fondo oscuro: un filo claro las devuelve, y la
   sombra del suelo se apaga. */
html[data-tema="noche"] .hero-moch__correas path { stroke: #43545f; }
html[data-tema="noche"] .hero-moch__asa { stroke: #465863; }
html[data-tema="noche"] .hero-moch__asa--luz { stroke: rgba(255, 255, 255, .18); }
html[data-tema="noche"] .hero-moch__bolsillo .hero-moch__tinta {
  stroke: rgba(232, 237, 239, .2);
  stroke-width: .8;
}
html[data-tema="noche"] .hero-moch__sombra { fill: rgba(0, 0, 0, .3); }

html[data-tema="noche"] .hero-pila__gafas u { border-color: #dfe7ea; }
html[data-tema="noche"] .hero-pila__gafas::before { background: #dfe7ea; }

html[data-tema="noche"] .hero-pila__gafas::after {
  background: linear-gradient(90deg, #dfe7ea 0 10px, transparent 10px calc(100% - 10px), #dfe7ea calc(100% - 10px));
}

html[data-tema="noche"] .hero--legal::before { color: rgba(232, 237, 239, .05); }
html[data-tema="noche"] .hero--legal .hero__title::after {
  border-top-color: rgba(232, 237, 239, .64);
  border-bottom-color: rgba(232, 237, 239, .32);
}

/* ---------- títulos de portada con degradado de tinta ----------
   Ocho portadas recortan un degradado de tinta dentro del título;
   en modo noche el degradado pasa a luz de luna (claro → gris azulado). */

html[data-tema="noche"] .hero .hero__title {
  background: linear-gradient(178deg, #f0f4f5 24%, #9fb3bc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- botones flotantes y ventanas ---------- */

html[data-tema="noche"] .lang-fab {
  background: var(--gray-card);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

html[data-tema="noche"] .lang-fab__opt:hover { background: rgba(255, 255, 255, .1); }
html[data-tema="noche"] .lang-fab__opt.is-active { background: var(--ink); color: #10181d; }
html[data-tema="noche"] .lang-fab__opt.is-active:hover { background: var(--ink); }

/* ---------- secciones con fondo claro fijo ---------- */

/* La estantería de prompts vive sobre una sección clara; de noche, la sala
   de lectura se queda en penumbra (la tinta del mueble no cambia) */
html[data-tema="noche"] .bp-section {
  background:
    radial-gradient(120% 120% at 50% -10%, #101c23 0%, #0a1319 60%, #070d11 100%);
}

/* La mesa de mezclas del ecualizador, ídem */
html[data-tema="noche"] .ecu-mesa-section {
  background:
    radial-gradient(120% 80% at 50% 0%, #16242c 0%, var(--gray-bg) 78%);
}

/* Las fichas del glosario van SIEMPRE en tinta nocturna (colores literales
   en su bloque base): aquí solo queda la tramoya de la página — fondo de la
   sección, buscador y filtros alfabéticos. */
html[data-tema="noche"] .glosario-section { background: #0d171d; }
html[data-tema="noche"] .glosario__search { background: #15232b; border-color: rgba(255, 255, 255, .1); }
html[data-tema="noche"] .glosario__search:focus-within { background: #192a33; border-color: rgba(212, 73, 79, .65); box-shadow: 0 8px 30px rgba(0, 0, 0, .34); }
html[data-tema="noche"] .glosario__search input::placeholder { color: #8fa1aa; opacity: 1; }
html[data-tema="noche"] .glosario__letter { background: #15232b; border-color: rgba(255, 255, 255, .12); color: #b8c6cd; }
html[data-tema="noche"] .glosario__letter:hover { border-color: rgba(212, 73, 79, .65); color: #ff858a; }

/* El panel lateral "Mi cuaderno" (papel claro) pasa a papel nocturno */
html[data-tema="noche"] .cuaderno__panel { background: #141f26; }

/* La línea de vida ilumina su esquina con un foco claro; de noche, foco tenue */
html[data-tema="noche"] .linea-vida {
  background:
    radial-gradient(130% 100% at 100% 0%, #17262e 0%, var(--white) 46%),
    var(--white);
}

/* Los recortes de papel no declaran color propio (lo heredaban de la
   página clara): en modo noche se les devuelve su tinta de periódico. */
html[data-tema="noche"] .recorte { color: var(--ink); }

/* Etiquetas de tipo del buscador global: versiones luminosas para noche */
html[data-tema="noche"] .omni__kind--prompt { color: #f0868b; }
html[data-tema="noche"] .omni__kind--articulo { color: #8fb2e8; }
html[data-tema="noche"] .omni__kind--agenda { color: #5fd6a2; }
html[data-tema="noche"] .omni__kind--conferencia { color: #b99cf0; }
html[data-tema="noche"] .omni__kind--proyecto { color: #eab06a; }
html[data-tema="noche"] .omni__kind--recurso { color: #5fc9d4; }
html[data-tema="noche"] .omni__kind--prensa { color: #b9b9c4; }
html[data-tema="noche"] .omni__kind--glosario { color: #d9c15e; }
html[data-tema="noche"] .omni__kind--publicacion { color: #a49bf0; }

/* La llamada didáctica del cuaderno hereda gris de tinta fijo */
html[data-tema="noche"] .cuaderno-tip p { color: var(--ink-soft); }

/* Fichas de tinta con texto blanco fijo: en noche la tinta es clara,
   así que el texto pasa a oscuro (misma inversión que los botones). */
html[data-tema="noche"] .blog-tag.active,
html[data-tema="noche"] .blog-tag.active:hover,
html[data-tema="noche"] .blog-share:hover,
html[data-tema="noche"] .blog-share-red:hover,
html[data-tema="noche"] .blog-read__toc a:hover,
html[data-tema="noche"] .a11y-fab:hover,
html[data-tema="noche"] .nav__search:hover,
html[data-tema="noche"] .dif-azar:hover,
html[data-tema="noche"] .dif-chip[aria-pressed="true"],
html[data-tema="noche"] .glosario__letter.is-active,
html[data-tema="noche"] .muro-filtro.active,
html[data-tema="noche"] .dif-paso__num,
html[data-tema="noche"] .cuaderno-tip__ico { color: #10181d; }

/* Barra de archivo del blog: los filos se dibujaban con tinta oscura y de
   noche desaparecían. Aquí se dibujan con luz. */
html[data-tema="noche"] .blog-buscar { border-color: rgba(255, 255, 255, .12); }

html[data-tema="noche"] .blog-ruta { border-color: rgba(255, 255, 255, .1); }

html[data-tema="noche"] .blog-ruta:hover { border-color: rgba(232, 106, 112, .45); }

/* La ruta encendida es una caja de tinta con letra blanca. De noche la
   tinta es clara, así que la letra se vuelve oscura (igual que los botones). */
html[data-tema="noche"] .blog-ruta.active .blog-ruta__name,
html[data-tema="noche"] .blog-ruta.active .blog-ruta__flecha { color: #10181d; }

html[data-tema="noche"] .blog-ruta.active .blog-ruta__n { color: rgba(16, 24, 29, .7); }

html[data-tema="noche"] .blog-ruta.active .blog-ruta__num { color: #10181d; opacity: .35; }

html[data-tema="noche"] .blog-tag { border-color: rgba(255, 255, 255, .18); }

html[data-tema="noche"] .blog-tag:hover { border-color: rgba(232, 106, 112, .55); }

html[data-tema="noche"] .blog-buscar__x:hover { background: rgba(255, 255, 255, .1); }

html[data-tema="noche"] .blog-section--masthead .blog-tag { box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }

/* El panel de suscripción del blog es una caja oscura sobre una página clara.
   De noche la página ya es oscura y la caja se fundía con el fondo: se le sube
   un punto el tono y se le añade un filo claro para que se siga leyendo como
   una caja. Dentro conserva la paleta de día (va en la lista de arriba), así
   que su texto blanco y sus botones no cambian. */
html[data-tema="noche"] .blog-sus {
  background: #1c2e37;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* Interior del cuaderno en modo noche: pauta tenue clara y texto legible */
html[data-tema="noche"] .cuaderno__panel {
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
}
html[data-tema="noche"] .cuaderno-item__text { color: var(--ink-soft); }

/* La lupa de la cabecera: tinte claro para verse sobre la barra nocturna */
html[data-tema="noche"] .nav__search {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
}

/* ---------- píldoras y campos con fondo blanco fijo ----------
   Componentes que declaran background: #fff y heredaban la tinta
   variable: de noche la tinta es clara y el texto desaparecía sobre
   el blanco. Se les fija la tinta oscura de siempre. */
html[data-tema="noche"] .blog-read__toc a,
html[data-tema="noche"] .blog-read__back,
html[data-tema="noche"] .blog-prompt__copy,
html[data-tema="noche"] .pen-tira,
html[data-tema="noche"] .pen-rec__eleg,
html[data-tema="noche"] .pen-conserje__title,
html[data-tema="noche"] .pen-campo input,
html[data-tema="noche"] .pen-campo textarea { color: #0f1c22; }

/* Al pasar el ratón el botón de copiar se enciende en rojo: texto blanco */
html[data-tema="noche"] .blog-prompt__copy:hover,
html[data-tema="noche"] .blog-prompt__copy.copied,
html[data-tema="noche"] .blog-read__back:hover { color: #fff; }

/* Los grises de tinta fijos del diferenciador (#3a4a52) se pierden sobre
   los fondos nocturnos: pasan al gris claro de lectura del tema. */
html[data-tema="noche"] .dif-taller__intro,
html[data-tema="noche"] .dif-paso p,
html[data-tema="noche"] .dif-consejo { color: var(--ink-soft); }

/* La letra activa del alfabeto del glosario: la píldora nocturna de la
   tarjeta le ganaba a la de tinta y dejaba texto oscuro sobre oscuro. */
html[data-tema="noche"] .glosario__letter.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #10181d;
}

/* El sello giratorio del kit de prensa: su rojo al 55 % se apagaba
   demasiado sobre el cielo nocturno; se enciende un punto. */
html[data-tema="noche"] .hero-kit__sello { color: rgba(240, 134, 139, .66); }

/* El bloque de prompt del blog usaba la tinta variable como fondo oscuro:
   de noche se le devuelve su tinta de siempre para que siga siendo oscuro. */
html[data-tema="noche"] .blog-read__body .blog-prompt { background: #0f1c22; }

/* Los bloques de presentación del artículo que pintan la TINTA DE FONDO con
   texto blanco encima (la llamada a la acción, el número de cada paso y la
   cabecera de la tabla): de noche --ink es un color CLARO, así que se les
   devuelve la tinta fija para que no queden blanco sobre blanco. Mismo
   remedio que el prompt de aquí arriba. */
html[data-tema="noche"] .blog-read__body .blog-cta,
html[data-tema="noche"] .blog-read__body .blog-tabla thead th {
  background: #0f1c22;
  color: #fff;
}

/* Pero esa tinta fija es CASI la del fondo nocturno (#101b21), así que sin un
   filo la tarjeta se derretiría sobre la página: se le dibuja uno tenue. */
html[data-tema="noche"] .blog-read__body .blog-cta {
  border: 1px solid rgba(255, 255, 255, .14);
}

/* Y el número de cada paso desaparecería del todo (un círculo de tinta sobre
   tinta): de noche se le da la vuelta —círculo claro con el número oscuro—,
   que es la misma idea del día pero en negativo. */
html[data-tema="noche"] .blog-read__body .blog-pasos__paso::before {
  background: var(--ink);
  color: #0f1c22;
}

/* Y los filos finísimos de esos bloques, calculados sobre tinta, se
   apagan del todo sobre el fondo nocturno: se pasan a luz tenue. */
html[data-tema="noche"] .blog-read__body .blog-aviso,
html[data-tema="noche"] .blog-read__body .blog-plegable,
html[data-tema="noche"] .blog-read__body .blog-comp__col,
html[data-tema="noche"] .blog-read__body .blog-dato,
html[data-tema="noche"] .blog-read__body .blog-tabla__scroll {
  border-color: rgba(255, 255, 255, .14);
}

html[data-tema="noche"] .blog-read__body .blog-tabla th,
html[data-tema="noche"] .blog-read__body .blog-tabla td {
  border-bottom-color: rgba(255, 255, 255, .12);
}

/* de noche el verde y el ámbar de los avisos se aclaran para poder leerse */
html[data-tema="noche"] .blog-read__body .blog-aviso--consejo  { --tono: #4cc38a; --tono-suave: rgba(76, 195, 138, .1); }
html[data-tema="noche"] .blog-read__body .blog-aviso--atencion { --tono: #e0a33e; --tono-suave: rgba(224, 163, 62, .1); }

/* Los chips de la ficha de estrategia viven sobre la ficha blanca:
   recuperan su gris claro (la tarjeta variable de noche es oscura). */
html[data-tema="noche"] .pen-chip--ficha { background: #f2f2f4; }

/* ---------- sobre papel, SIEMPRE en claro ----------
   Aunque el modo noche esté activo, el papel se imprime con la paleta
   clara de siempre. Este bloque va DETRÁS de todo el modo noche a
   propósito: así sus variables ganan a las nocturnas al imprimir. */
@media print {
  html[data-tema="noche"] {
    --white: #ffffff;
    --gray-bg: #ffffff;
    --gray-card: #f2f2f4;
    --ink: #0f1c22;
    --ink-soft: #6e6e73;
    --red: #c23339;
    --shadow: none;
    --shadow-hover: none;
  }
  html[data-tema="noche"] body { background: #fff; }
  html[data-tema="noche"] img { filter: none; }
  html[data-tema="noche"] .hero,
  html[data-tema="noche"] .hero[class*="hero--"] { background: none; }
}


/* ============================================================
   HISTORIAS CREATIVAS — la máquina mágica de historias
   ------------------------------------------------------------
   La portada (hero--historias) con su maquinita de tres
   carretes, la sala de juego en penumbra (historiasMaquina),
   el cajón de categorías, el billete, el rincón del escritor
   y las jugadas de aula (historiasIdeas). La sala es una banda
   oscura "de serie": va igual en modo claro y en modo noche.
   Los carretes de la maquinita y la impresión del billete se
   animan UNA vez y se detienen; las bombillas solo corren
   mientras giran los rodillos (las mueve historias.js).
   ============================================================ */

/* ---------- portada ---------- */
.hero--historias {
  position: relative;
  background:
    radial-gradient(560px 300px at 50% 92%, rgba(194, 51, 57, .10), transparent 70%),
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #f9f2f0 52%, #f2e5e3 100%);
}

.hero--historias .hero__title {
  background: linear-gradient(178deg, var(--ink) 30%, #35464f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-hist__maquinita {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 22px auto 4px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 28, 34, .12);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #f6efe2);
  box-shadow: 0 14px 34px rgba(15, 28, 34, .12), inset 0 1px 0 #fff;
}

.hero-hist__ventana {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: #fdf6e4;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(169, 123, 34, .4), inset 0 -12px 14px rgba(169, 123, 34, .14);
}

.hero-hist__tira {
  display: grid;
  animation: heroHistRueda 1s cubic-bezier(.2, .7, .3, 1.06) .3s both;
}
.hero-hist__tira--2 { animation-delay: .55s; }
.hero-hist__tira--3 { animation-delay: .8s; }
.hero-hist__tira b {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #7c1a2e;
}

@keyframes heroHistRueda {
  from { transform: translateY(0); }
  to { transform: translateY(-108px); }
}

.hero-hist__palanca {
  position: relative;
  width: 10px;
  height: 62px;
  margin-left: 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, #9aa0ad, #eef1f6 50%, #7c828e);
}
.hero-hist__palanca i {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9d9d, #d92b3f 60%, #7c0f1e);
  box-shadow: 0 4px 8px rgba(15, 28, 34, .3);
}

@media (prefers-reduced-motion: reduce) {
  .hero-hist__tira { animation: none; transform: translateY(-108px); }
}

/* ---------- portada de la Expendedora (hero--creatividad) ----------
   La miniatura de la máquina de bolas bajo el título: cúpula de
   cristal con siete cápsulas que aparecen UNA a una, cuerpo rojo
   con manivela que da UNA vuelta y una bolita que cae por la boca
   y se queda servida. Sin bucles; con «reducir movimiento» se ve
   ya terminada (los estados de espera los pone el propio both). */
.hero--creatividad {
  position: relative;
  background:
    radial-gradient(135% 100% at 50% -12%, #ffffff 0%, #faf7f6 52%, var(--gray-bg) 100%);
}

.hero--creatividad .hero__title {
  background: linear-gradient(178deg, var(--ink) 30%, #35464f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .14em;
}

.hero-crea__maquinita {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto 4px;
  padding-bottom: 20px;
}

.hero-crea__cupula {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95), rgba(236, 244, 248, .5) 55%, rgba(15, 28, 34, .08));
  box-shadow: inset 0 0 0 3px rgba(15, 28, 34, .18), inset -8px -10px 18px rgba(15, 28, 34, .08), 0 10px 24px rgba(15, 28, 34, .16);
}

/* Cada cápsula trae su color en --c y su turno en --i (los pone app.js). */
.hero-crea__chicle {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .8), var(--c) 48%);
  box-shadow: inset -3px -4px 6px rgba(0, 0, 0, .25);
  animation: heroCreaPop .45s cubic-bezier(.2, .7, .3, 1.4) calc(.3s + var(--i) * .12s) both;
}
.hero-crea__chicle:nth-child(1) { left: 13px; top: 52px; }
.hero-crea__chicle:nth-child(2) { left: 35px; top: 58px; }
.hero-crea__chicle:nth-child(3) { left: 57px; top: 52px; }
.hero-crea__chicle:nth-child(4) { left: 24px; top: 34px; }
.hero-crea__chicle:nth-child(5) { left: 46px; top: 32px; }
.hero-crea__chicle:nth-child(6) { left: 63px; top: 36px; }
.hero-crea__chicle:nth-child(7) { left: 6px; top: 38px; }

@keyframes heroCreaPop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.hero-crea__cuerpo {
  position: relative;
  width: 74px;
  height: 46px;
  margin-top: -6px;
  border-radius: 10px 10px 14px 14px;
  background: linear-gradient(180deg, #d94a55, #a92834 70%, #8e1f2c);
  box-shadow: 0 10px 22px rgba(15, 28, 34, .22), inset 0 2px 0 rgba(255, 255, 255, .28);
}

.hero-crea__manivela {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3f5f8, #b9c0cb 60%, #7c828e);
  box-shadow: 0 2px 5px rgba(15, 28, 34, .3);
  animation: heroCreaGira .9s cubic-bezier(.45, .1, .3, 1) 1.2s both;
}
.hero-crea__manivela b {
  position: absolute;
  left: 50%;
  top: -7px;
  width: 4px;
  height: 15px;
  margin-left: -2px;
  border-radius: 3px;
  background: #59616d;
}

@keyframes heroCreaGira {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

.hero-crea__boca {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 20px;
  height: 11px;
  margin-left: -10px;
  border-radius: 4px;
  background: #43141b;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55);
}

.hero-crea__premio {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffe3b0, #e9b44c 50%);
  box-shadow: inset -2px -3px 4px rgba(0, 0, 0, .22), 0 3px 6px rgba(15, 28, 34, .25);
  animation: heroCreaCae .5s cubic-bezier(.3, .6, .4, 1.2) 2.15s both;
}

@keyframes heroCreaCae {
  from { transform: translateY(-24px) scale(.5); opacity: 0; }
  45% { opacity: 1; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-crea__chicle, .hero-crea__manivela, .hero-crea__premio { animation: none; }
}

/* ---------- la sala de juego (historiasMaquina) ---------- */
.hist-sala {
  --hist-tile: 118px;
  --hist-carton: #fdf6e4;
  --hist-tinta: #241428;
  --hist-tinta-suave: #6b5a70;
  --hist-granate: #7c1a2e;
  --hist-granate-2: #4d0e1e;
  --hist-oro: #e8b54a;
  --hist-oro-claro: #f9dd8f;
  --hist-oro-oscuro: #a97b22;
  --hist-led: #ffb648;
  color: #efe2d2;
  background:
    radial-gradient(1100px 700px at 50% -8%, rgba(255, 170, 70, .14), transparent 62%),
    radial-gradient(800px 560px at 88% 18%, rgba(255, 92, 138, .07), transparent 60%),
    radial-gradient(700px 500px at 8% 30%, rgba(120, 70, 255, .08), transparent 60%),
    linear-gradient(180deg, #1c0f30 0%, #140a22 42%, #0d0716 100%);
}

.hist-sala .feature__eyebrow { color: #ffc24b; }
.hist-sala .section__title { color: #fff8ec; }

.hist-head { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.hist-intro { color: #d9c8e4; margin-top: 10px; }
.hist-intro b, .hist-intro strong { color: #fff; font-weight: 500; }

.hist-cifras {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hist-cifras span {
  border: 1px solid rgba(232, 181, 74, .38);
  color: var(--hist-oro-claro);
  border-radius: 999px;
  padding: 7px 16px;
  background: rgba(232, 181, 74, .07);
}

.hist-grow { flex: 1; }
.hist-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* la máquina y su palanca */
.hist-zona { position: relative; width: min(820px, 100%); margin: 0 auto; }

.hist-maquina {
  position: relative;
  z-index: 2;
  border-radius: 34px;
  padding: 0 26px 30px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .09), transparent 30%),
    linear-gradient(180deg, #a02840 0%, var(--hist-granate) 34%, var(--hist-granate-2) 100%);
  border: 3px solid var(--hist-oro-oscuro);
  box-shadow:
    inset 0 0 0 2px rgba(249, 221, 143, .35),
    inset 0 -30px 60px rgba(0, 0, 0, .45),
    0 40px 90px rgba(0, 0, 0, .6),
    0 0 120px rgba(255, 170, 70, .12);
}

.hist-marquesina {
  position: relative;
  margin: 0 -26px;
  background: linear-gradient(180deg, #fff6e0, #f3e0b4);
  border: 3px solid var(--hist-oro-oscuro);
  border-radius: 32px 32px 14px 14px;
  padding: 22px 18px 16px;
  text-align: center;
  box-shadow: inset 0 -8px 18px rgba(169, 123, 34, .35), 0 14px 30px rgba(0, 0, 0, .35);
  transform: translateY(-26px);
}
.hist-marquesina h3 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(1.2rem, 3.6vw, 1.9rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hist-granate-2);
  text-shadow: 0 1px 0 #fff, 0 3px 0 rgba(169, 123, 34, .35);
}
.hist-marquesina__sub {
  font-family: "Press Start 2P", monospace;
  font-size: .5rem;
  letter-spacing: .22em;
  color: var(--hist-oro-oscuro);
  margin-top: 8px;
  text-transform: uppercase;
}
.hist-bombillas {
  position: absolute;
  inset: 6px 10px auto 10px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.hist-bombillas i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe8, #d9b263 60%, #8f6a1e);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  transition: box-shadow .15s, background .15s;
}
.hist-bombillas i.on {
  background: radial-gradient(circle at 35% 30%, #fffef4, #ffd76a 55%, #e09a17);
  box-shadow: 0 0 10px 3px rgba(255, 205, 90, .85);
}

.hist-visor {
  margin: -4px auto 18px;
  max-width: 560px;
  background: #1a0d08;
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, .55);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, .8), inset 0 0 30px rgba(255, 130, 30, .07);
  padding: 12px 18px;
  text-align: center;
}
.hist-led {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(.5rem, 1.6vw, .68rem);
  color: var(--hist-led);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 182, 72, .8);
  white-space: nowrap;
  overflow: hidden;
}

.hist-ventana {
  position: relative;
  background: linear-gradient(180deg, #2a1020, #1c0a16);
  border-radius: 20px;
  border: 2px solid var(--hist-oro-oscuro);
  box-shadow: inset 0 0 0 2px rgba(249, 221, 143, .25), inset 0 10px 40px rgba(0, 0, 0, .75);
  padding: 20px 16px;
}
.hist-payline { position: absolute; top: 50%; left: 4px; right: 4px; height: 0; pointer-events: none; z-index: 5; }
.hist-payline::before, .hist-payline::after {
  content: "";
  position: absolute;
  top: -9px;
  border: 9px solid transparent;
}
.hist-payline::before { left: 0; border-left-color: var(--hist-oro); filter: drop-shadow(0 0 6px rgba(232, 181, 74, .9)); }
.hist-payline::after { right: 0; border-right-color: var(--hist-oro); filter: drop-shadow(0 0 6px rgba(232, 181, 74, .9)); }

.hist-rodillos { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hist-rodillo-col { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }

.hist-rodillo {
  position: relative;
  width: var(--hist-tile);
  height: calc(var(--hist-tile) * 3);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #efe3c6, #fdf6e4 30%, #fdf6e4 70%, #e9dcbd);
  box-shadow: inset 0 0 0 1px rgba(107, 90, 112, .25);
}
.hist-rodillo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(20, 8, 20, .55), transparent 26%, transparent 74%, rgba(20, 8, 20, .55)),
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 46%, rgba(255, 255, 255, .05) 55%, transparent 60%);
}
.hist-rodillo.fijado::after {
  background:
    linear-gradient(180deg, rgba(20, 8, 20, .55), transparent 26%, transparent 74%, rgba(20, 8, 20, .55)),
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 46%, rgba(255, 255, 255, .05) 55%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(232, 181, 74, .16) 0 10px, transparent 10px 20px);
}
.hist-cinta { position: relative; will-change: transform; }
.hist-cinta.girando { filter: blur(1.6px); }
.hist-celda {
  width: var(--hist-tile);
  height: var(--hist-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dashed rgba(107, 90, 112, .28);
}
.hist-celda img { width: 62%; height: 62%; object-fit: contain; user-select: none; -webkit-user-drag: none; }

.hist-nombre-led {
  width: var(--hist-tile);
  min-height: 30px;
  border-radius: 8px;
  background: #1a0d08;
  border: 1px solid rgba(0, 0, 0, .5);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  text-align: center;
}
.hist-nombre-led span {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .64rem;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hist-led);
  text-shadow: 0 0 7px rgba(255, 182, 72, .7);
}
.hist-btn-fijar {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hist-oro-claro);
  border: 1px solid rgba(232, 181, 74, .4);
  border-radius: 999px;
  padding: 4px 12px;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .25s, color .25s, border-color .25s;
}
.hist-punto { width: 7px; height: 7px; border-radius: 50%; background: #5d4a2a; transition: background .25s, box-shadow .25s; }
.hist-btn-fijar[aria-pressed="true"] { background: var(--hist-oro); color: var(--hist-granate-2); border-color: var(--hist-oro); }
.hist-btn-fijar[aria-pressed="true"] .hist-punto { background: #2c8a3d; box-shadow: 0 0 8px rgba(80, 220, 110, .9); }

/* panel de mandos */
.hist-mandos { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.hist-mando-grupo {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(249, 221, 143, .28);
  border-radius: 999px;
  padding: 8px 14px;
}
.hist-etq {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hist-oro-claro);
}
.hist-paso {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(180deg, #f9dd8f, #caa04d);
  color: var(--hist-granate-2);
  font-weight: 800;
  font-size: 1.05rem;
  font-family: "Montserrat", system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .15s;
}
.hist-paso:active { transform: scale(.92); }
.hist-num {
  font-family: "Press Start 2P", monospace;
  font-size: .8rem;
  color: var(--hist-led);
  min-width: 2ch;
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 182, 72, .7);
}

.hist-interruptor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hist-oro-claro);
}
.hist-pala {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #3a2010;
  border: 1px solid rgba(249, 221, 143, .4);
  position: relative;
  transition: background .25s;
}
.hist-pala::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f9dd8f, #caa04d);
  transition: left .25s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.hist-interruptor[aria-pressed="true"] .hist-pala { background: #7a4d15; }
.hist-interruptor[aria-pressed="true"] .hist-pala::after { left: 20px; }

.hist-fila-tirar { margin-top: 20px; display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.hist-btn-categorias {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--hist-granate-2);
  background: linear-gradient(180deg, #fff3d6, #ecd9a4);
  border: 2px solid var(--hist-oro-oscuro);
  border-radius: 14px;
  padding: 12px 20px;
  box-shadow: 0 5px 0 var(--hist-oro-oscuro), 0 10px 18px rgba(0, 0, 0, .4);
  transition: transform .12s, box-shadow .12s;
}
.hist-btn-categorias:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--hist-oro-oscuro), 0 4px 8px rgba(0, 0, 0, .4); }

.hist-btn-tirar {
  position: relative;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  color: #fff;
  padding: 18px 44px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 25%, #ff6b6b, #d92b3f 55%, #8e1424);
  border: 3px solid #f9dd8f;
  box-shadow: 0 7px 0 #6d0f1c, 0 16px 34px rgba(0, 0, 0, .55), inset 0 2px 6px rgba(255, 255, 255, .5);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .45);
  transition: transform .12s, box-shadow .12s, filter .3s;
}
.hist-btn-tirar:hover { filter: brightness(1.08); }
.hist-btn-tirar:active { transform: translateY(6px); box-shadow: 0 1px 0 #6d0f1c, 0 6px 14px rgba(0, 0, 0, .5), inset 0 2px 6px rgba(255, 255, 255, .5); }
.hist-btn-tirar[disabled] { filter: saturate(.4) brightness(.8); cursor: default; }

.hist-ranura { margin-top: 22px; text-align: center; }
.hist-placa {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, #f3e0b4, #cfa955);
  border-radius: 12px;
  border: 2px solid var(--hist-oro-oscuro);
  padding: 10px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 14px rgba(0, 0, 0, .4);
}
.hist-slit { width: 46px; height: 8px; border-radius: 4px; background: #241005; box-shadow: inset 0 2px 4px #000; }
.hist-placa > span:not(.hist-slit):not(.hist-moneda) {
  font-family: "Press Start 2P", monospace;
  font-size: .5rem;
  letter-spacing: .14em;
  color: var(--hist-granate-2);
  text-transform: uppercase;
}
.hist-moneda {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #e8b54a 60%, #a97b22);
  border: 1px solid #8f6a1e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}

/* palanca lateral */
.hist-palanca { position: absolute; right: -74px; top: 130px; width: 74px; height: 300px; z-index: 1; }
.hist-palanca__anclaje {
  position: absolute;
  left: 0;
  top: 96px;
  width: 26px;
  height: 108px;
  background: linear-gradient(90deg, #8f6a1e, #e8b54a 50%, #8f6a1e);
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 6px 12px rgba(0, 0, 0, .5);
}
.hist-palanca__brazo {
  position: absolute;
  left: 12px;
  top: 24px;
  width: 12px;
  height: 128px;
  background: linear-gradient(90deg, #9aa0ad, #eef1f6 50%, #7c828e);
  border-radius: 8px;
  transform-origin: 50% calc(100% - 6px);
  transition: transform .18s;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, .45);
}
.hist-palanca__bola {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ff9d9d, #d92b3f 55%, #7c0f1e);
  box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .35), 0 6px 12px rgba(0, 0, 0, .5);
}
.hist-palanca__pivote {
  position: absolute;
  left: 8px;
  top: 138px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f9dd8f, #a97b22);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
}
.hist-palanca.bajada .hist-palanca__brazo { transform: rotate(178deg); }
.hist-palanca button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  border-radius: 20px;
  cursor: grab;
}
.hist-palanca button:active { cursor: grabbing; }
.hist-palanca__etq {
  position: absolute;
  right: -6px;
  top: 210px;
  transform: rotate(90deg);
  transform-origin: right top;
  font-family: "Press Start 2P", monospace;
  font-size: .42rem;
  letter-spacing: .3em;
  color: rgba(249, 221, 143, .65);
  white-space: nowrap;
}
@media (max-width: 980px) { .hist-palanca { display: none; } }

/* ---------- cajón de categorías ---------- */
.hist-cajon {
  margin: 26px auto 0;
  width: min(820px, 100%);
  background: linear-gradient(180deg, #241233, #180b26);
  border: 1px solid rgba(232, 181, 74, .3);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .5s, opacity .4s;
}
.hist-cajon.abierto { max-height: 5200px; opacity: 1; }
.hist-cajon__inner { padding: 26px; }
.hist-cajon__cabecera { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 6px; }
.hist-cajon__cabecera h3 { font-family: "Montserrat", system-ui, sans-serif; font-size: 1.15rem; font-weight: 800; color: #fff; }
.hist-cuenta { font-size: .52rem; letter-spacing: .1em; white-space: normal; }
.hist-cajon__ayuda { font-size: .85rem; color: #bfa8cf; }
.hist-mini-btn {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: 1px solid rgba(232, 181, 74, .45);
  color: var(--hist-oro-claro);
  border-radius: 999px;
  padding: 6px 14px;
  transition: background .25s;
}
.hist-mini-btn:hover { background: rgba(232, 181, 74, .15); }
.hist-grupo-cats { margin-top: 18px; }
.hist-grupo-cats > header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hist-grupo-cats > header img { width: 20px; height: 20px; }
.hist-grupo-cats > header h4 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hist-oro-claro);
}
.hist-grupo-cats > header button {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #bfa8cf;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline dotted;
}
.hist-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hist-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: .78rem;
  color: #d9c8e4;
  background: none;
  border: 1px solid rgba(191, 168, 207, .35);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  transition: background .2s, color .2s, border-color .2s, transform .12s;
}
.hist-chip img { width: 20px; height: 20px; }
.hist-chip:active { transform: scale(.95); }
.hist-chip[aria-pressed="true"] { background: var(--hist-oro); border-color: var(--hist-oro); color: var(--hist-granate-2); font-weight: 700; }

/* ---------- billete ---------- */
.hist-salida { display: flex; justify-content: center; padding: 8px 0 0; }
.hist-boca {
  width: min(560px, 92%);
  height: 14px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #1c0a16, #000);
  border: 2px solid var(--hist-oro-oscuro);
  border-top: 0;
  box-shadow: inset 0 6px 10px #000;
}
.hist-billete-zona { display: flex; justify-content: center; }
.hist-billete {
  width: min(560px, 100%);
  margin-top: -4px;
  background: var(--hist-carton);
  color: var(--hist-tinta);
  border-radius: 4px 4px 0 0;
  position: relative;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
  transform-origin: top center;
  padding: 26px 28px 34px;
  margin-bottom: 18px;
}
.hist-billete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  background:
    linear-gradient(-45deg, transparent 8px, var(--hist-carton) 8px) 0 0 / 16px 100%,
    linear-gradient(45deg, transparent 8px, var(--hist-carton) 8px) 8px 0 / 16px 100%;
  background-repeat: repeat-x;
}
.hist-billete.imprimiendo { animation: histSale .8s cubic-bezier(.22, .61, .36, 1) 1 both; }
@keyframes histSale {
  from { transform: translateY(-46px) scaleY(.2); opacity: 0; }
  60% { transform: translateY(6px) scaleY(1.02); opacity: 1; }
  to { transform: translateY(0) scaleY(1); opacity: 1; }
}
.hist-billete__cab { text-align: center; border-bottom: 2px dashed rgba(36, 20, 40, .25); padding-bottom: 12px; }
.hist-billete__marca {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--hist-granate);
}
.hist-billete__lema { font-size: .74rem; color: var(--hist-tinta-suave); margin-top: 3px; font-style: italic; }
.hist-billete__iconos { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; margin: 18px 0 4px; }
.hist-sello { width: 96px; text-align: center; }
.hist-sello img { width: 52px; height: 52px; }
.hist-sello .n {
  display: block;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.25;
  margin-top: 4px;
}
.hist-billete__linea { border-top: 2px dashed rgba(36, 20, 40, .25); margin: 14px 0; }
.hist-reto {
  background: rgba(194, 51, 57, .08);
  border: 1px dashed rgba(194, 51, 57, .5);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .86rem;
}
.hist-reto b {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c23339;
  display: block;
  margin-bottom: 2px;
}
.hist-arranque { font-size: .92rem; font-style: italic; text-align: center; color: var(--hist-tinta); margin-top: 10px; }
.hist-arranque b {
  font-family: "Montserrat", system-ui, sans-serif;
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hist-tinta-suave);
  display: block;
  margin-bottom: 4px;
}
.hist-billete__pie { text-align: center; font-size: .62rem; color: var(--hist-tinta-suave); margin-top: 14px; letter-spacing: .06em; }
.hist-billete__acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.hist-btn-billete {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: 1.5px solid var(--hist-tinta);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--hist-tinta);
  transition: background .2s, color .2s;
}
.hist-btn-billete:hover { background: var(--hist-tinta); color: var(--hist-carton); }
.hist-btn-billete--primario { background: #c23339; border-color: #c23339; color: #fff; }
.hist-btn-billete--primario:hover { background: var(--hist-granate); border-color: var(--hist-granate); }

.hist-pleno {
  text-align: center;
  margin: 16px auto 0;
  max-width: 560px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffc24b;
  text-shadow: 0 0 16px rgba(255, 194, 75, .8);
}

/* ---------- rincón del escritor (dentro de la sala) ---------- */
.hist-escritorio { margin-top: 64px; }
.hist-esc-head { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.hist-esc-head__titulo {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 800;
  color: #fff8ec;
  margin-top: 10px;
}
.hist-papel {
  width: min(760px, 100%);
  margin: 0 auto;
  background: var(--hist-carton);
  color: var(--hist-tinta);
  border-radius: 18px;
  padding: 30px 34px 26px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 0 60px rgba(169, 123, 34, .08);
}
.hist-papel__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.hist-papel__cab h4 { font-family: "Montserrat", system-ui, sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--hist-granate-2); }
.hist-sellos { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center; }
.hist-sellos img { width: 30px; height: 30px; }
.hist-sellos__vacio { font-size: .8rem; color: var(--hist-tinta-suave); font-style: italic; }
.hist-papel textarea {
  width: 100%;
  min-height: 300px;
  border: 0;
  resize: vertical;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--hist-tinta);
  line-height: 32px;
  background: repeating-linear-gradient(transparent 0 31px, rgba(124, 26, 46, .25) 31px 32px);
  outline: none;
  padding: 0 2px;
}
.hist-papel__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  border-top: 1px solid rgba(36, 20, 40, .15);
  padding-top: 14px;
}
.hist-contador {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hist-tinta-suave);
}
.hist-tiempo-etq { font-size: .78rem; color: var(--hist-tinta-suave); }
.hist-papel select {
  font: inherit;
  font-size: .8rem;
  border: 1.5px solid rgba(36, 20, 40, .3);
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  color: var(--hist-tinta);
  margin-left: 6px;
}
.hist-crono { font-family: "Press Start 2P", monospace; font-size: .66rem; color: var(--hist-granate); min-width: 5ch; }
.hist-crono.agotado { color: #c23339; }

/* ---------- jugadas de aula y pasos (historiasIdeas, sección clara) ----------
   Banda gris entintada con motas rojas para que las tarjetas,
   vestidas de naipe (doble filo rojo interior), no se pierdan
   en blanco sobre blanco. Todo con variables: en modo noche
   se adapta solo (solo los bordes se re-anclan al final). */
.hist-ideas-sec {
  background:
    radial-gradient(circle at 12% 12%, rgba(194, 51, 57, .07) 0 2px, transparent 3px) 0 0 / 34px 34px,
    var(--gray-bg);
}
.hist-ideas__head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.hist-ideas__intro { color: var(--ink-soft); margin-top: 10px; }
.hist-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.hist-idea {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .12);
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: var(--shadow), inset 0 0 0 5px var(--white), inset 0 0 0 6px rgba(194, 51, 57, .3);
}
.hist-idea::after {
  content: "✦";
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: rgba(194, 51, 57, .45);
  font-size: .78rem;
}
.hist-idea__num {
  font-family: "Press Start 2P", monospace;
  font-size: .58rem;
  color: #c23339;
  letter-spacing: .18em;
}
.hist-idea h3 { font-family: "Montserrat", system-ui, sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--ink); margin: 10px 0 8px; }
.hist-idea p { font-size: .92rem; color: var(--ink-soft); }
.hist-idea p b, .hist-idea p strong { color: var(--ink); font-weight: 600; }

.hist-pasos__head { text-align: center; max-width: 720px; margin: 56px auto 30px; }
.hist-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.hist-paso-card {
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .12);
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: var(--shadow), inset 0 0 0 5px var(--white), inset 0 0 0 6px rgba(194, 51, 57, .3);
}
.hist-paso-card__bolita {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0656b, #c23339 60%, #8f2429);
  color: #fff;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(194, 51, 57, .35);
}
.hist-paso-card h3 { font-family: "Montserrat", system-ui, sans-serif; font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.hist-paso-card p { font-size: .9rem; color: var(--ink-soft); }

/* La tarjeta de créditos de los iconos (Twemoji · CC-BY 4.0), bajo los pasos */
.hist-creditos {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .12);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: var(--shadow), inset 0 0 0 5px var(--white), inset 0 0 0 6px rgba(194, 51, 57, .3);
}
.hist-creditos__iconos { display: flex; gap: 8px; flex: none; }
.hist-creditos__iconos img { width: 34px; height: 34px; }
.hist-creditos__cuerpo h3 { font-family: "Montserrat", system-ui, sans-serif; font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.hist-creditos__cuerpo p { font-size: .9rem; color: var(--ink-soft); }
.hist-creditos__cuerpo p strong { color: var(--ink); font-weight: 700; }
.hist-creditos__links { margin-top: 8px; display: flex; gap: 22px; flex-wrap: wrap; }
.hist-creditos__links a { color: var(--red); font-weight: 700; font-size: .85rem; text-decoration: none; }
.hist-creditos__links a:hover { text-decoration: underline; }
@media (max-width: 620px) {
  .hist-creditos { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- aviso flotante ---------- */
.hist-aviso {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 80px);
  background: #c23339;
  color: #fff;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: .85rem;
  border-radius: 999px;
  padding: 11px 22px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: transform .35s, opacity .35s;
  z-index: 200;
  pointer-events: none;
}
.hist-aviso.visible { transform: translate(-50%, 0); opacity: 1; }

/* ---------- móvil ---------- */
@media (max-width: 760px) {
  .hist-sala { --hist-tile: 86px; }
  .hist-maquina { padding: 0 14px 22px; }
  .hist-marquesina { margin: 0 -14px; }
  .hist-rodillos { gap: 8px; }
  .hist-papel { padding: 24px 18px; }
}
@media (max-width: 420px) { .hist-sala { --hist-tile: 74px; } }

@media (prefers-reduced-motion: reduce) {
  .hist-cinta { transition: none !important; filter: none !important; }
  .hist-billete.imprimiendo { animation: none; }
}

/* ---------- impresión del billete y de la historia ---------- */
.hist-hoja { display: none; }
@media print {
  body.hist-print > :not(.hist-hoja) { display: none !important; }
  body.hist-print { background: #fff !important; }
  body.hist-print .hist-hoja { display: block; color: #000; font-family: Georgia, serif; padding: 10mm; }
  .hist-hoja h1 { font-family: "Montserrat", system-ui, sans-serif; font-size: 18pt; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2mm; }
  .hist-hoja .sub { font-size: 10pt; color: #555; margin-bottom: 8mm; }
  .hist-hoja .iconos-print { display: flex; flex-wrap: wrap; gap: 6mm; margin-bottom: 8mm; }
  .hist-hoja .iconos-print figure { text-align: center; width: 26mm; }
  .hist-hoja .iconos-print img { width: 16mm; height: 16mm; }
  .hist-hoja .iconos-print figcaption { font-size: 8pt; margin-top: 1mm; }
  .hist-hoja .reto-print { border: 1px dashed #999; padding: 4mm; margin-bottom: 6mm; font-size: 11pt; }
  .hist-hoja .texto-print { font-size: 12pt; line-height: 1.8; white-space: pre-wrap; }
  .hist-hoja .lineas { margin-top: 4mm; }
  .hist-hoja .lineas div { border-bottom: 1px solid #bbb; height: 9mm; }
  .hist-hoja .pie-print { margin-top: 10mm; font-size: 8pt; color: #777; }
}

/* ---------- modo noche ----------
   La sala de juego, la máquina, el billete y el papel del
   escritor llevan sus colores pintados a mano (ya son
   nocturnos o de cartón): en modo noche se ven exactamente
   igual. Solo las jugadas y los pasos (sección clara con
   variables) siguen la noche por sí solos. */

/* ============================================================
   HISTORIAS CREATIVAS · REDISEÑO «MESA DE CARTAS»
   Mantiene los nombres de clase históricos para conservar los datos,
   los enlaces compartidos y la compatibilidad con el editor.
   ============================================================ */
.hero-hist__cartas { width:250px; height:158px; border:0; background:none; box-shadow:none; overflow:visible; perspective:900px; }
.hero-hist__carta { position:absolute; left:72px; top:14px; width:82px; height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#0f1c22; background:#fff; border:1px solid rgba(15,28,34,.16); border-radius:9px; box-shadow:0 15px 28px rgba(15,28,34,.16),inset 0 0 0 5px #fff,inset 0 0 0 6px rgba(194,51,57,.28); transform-origin:50% 120%; animation:heroHistReparte .75s cubic-bezier(.2,.72,.2,1) both; }
.hero-hist__carta:nth-child(1) { transform:translate(-48px,12px) rotate(-13deg); animation-delay:.25s; }
.hero-hist__carta:nth-child(2) { transform:translate(0) rotate(0); animation-delay:.42s; }
.hero-hist__carta:nth-child(3) { z-index:2; transform:translate(48px,12px) rotate(13deg); animation-delay:.59s; }
.hero-hist__carta i { font:800 2rem/1 Georgia,serif; color:#c23339; font-style:normal; }
.hero-hist__carta b { font:800 .5rem/1.2 "Montserrat",sans-serif; letter-spacing:.12em; }
.hero-hist__mazo { position:absolute; z-index:1; right:-4px; bottom:2px; width:50px; height:66px; transform:rotate(8deg); }
.hero-hist__mazo::after { content:""; position:absolute; z-index:2; left:14px; top:18px; width:22px; height:20px; background:#fff; -webkit-mask:url("assets/logo03.svg") center/contain no-repeat; mask:url("assets/logo03.svg") center/contain no-repeat; }
.hero-hist__mazo i { position:absolute; inset:0; border-radius:6px; border:2px solid #fff; background:repeating-linear-gradient(45deg,#0f1c22 0 6px,#c23339 6px 7px,#0f1c22 7px 13px); box-shadow:0 5px 10px rgba(15,28,34,.2); }
.hero-hist__mazo i:nth-child(2) { transform:translate(-4px,3px); z-index:-1; }
.hero-hist__mazo i:nth-child(3) { transform:translate(-8px,6px); z-index:-2; }
@keyframes heroHistReparte { from { opacity:0; transform:translate(100px,42px) rotate(22deg) scale(.76); } }

.hist-sala { --hist-tile:142px; --hist-carton:#fff; --hist-tinta:#0f1c22; --hist-tinta-suave:#6e6e73; --hist-granate:#c23339; --hist-granate-2:#8f2429; --hist-oro:#c23339; --hist-oro-claro:#fff; --hist-oro-oscuro:#8f2429; --hist-led:#0f1c22; color:#e8edef; background:radial-gradient(circle at 12% 12%,rgba(212,73,79,.14) 0 2px,transparent 3px) 0 0/34px 34px,radial-gradient(1000px 560px at 50% -6%,rgba(194,51,57,.26),transparent 70%),linear-gradient(180deg,#17272f 0%,#0f1c22 55%,#0b161c 100%); }
.hist-sala .feature__eyebrow { color:#e8767c; }
.hist-sala .section__title { color:#fff; }
.hist-head { max-width:790px; }
.hist-intro { color:#a7b4bb; }
.hist-intro b,.hist-intro strong { color:#fff; }
.hist-cifras span { color:#fff; border-color:rgba(255,255,255,.26); background:rgba(194,51,57,.18); }
.hist-zona { width:min(940px,calc(100% - 110px)); margin-top:56px; }
.hist-maquina { border-radius:28px; padding:34px 34px 30px; background:linear-gradient(105deg,transparent 0 48%,rgba(15,28,34,.018) 49% 51%,transparent 52%),#fff; border:1px solid rgba(15,28,34,.12); box-shadow:inset 0 5px 0 #c23339,0 35px 70px rgba(0,0,0,.5); }
.hist-marquesina { width:min(620px,calc(100% - 40px)); margin:-76px auto 26px; padding:24px 28px 21px; border:0; border-radius:5px; background:#fff; box-shadow:0 14px 28px rgba(15,28,34,.14),inset 0 0 0 1px rgba(15,28,34,.1); transform:rotate(-.6deg); }
.hist-marquesina::before,.hist-marquesina::after { content:""; position:absolute; top:-11px; width:72px; height:24px; background:rgba(210,210,214,.82); box-shadow:0 2px 4px rgba(15,28,34,.1); }
.hist-marquesina::before { left:30px; transform:rotate(-5deg); }
.hist-marquesina::after { right:30px; transform:rotate(5deg); }
.hist-sobremesa { display:block; margin-bottom:7px; color:#c23339; font:800 .58rem/1 "Montserrat",sans-serif; letter-spacing:.2em; }
.hist-marquesina h3 { color:#0f1c22; text-shadow:none; text-transform:none; letter-spacing:-.025em; font-size:clamp(1.55rem,4vw,2.45rem); }
.hist-marquesina__sub { margin-top:7px; color:#6e6e73; font-family:"Roboto",sans-serif; font-size:.82rem; font-style:italic; text-transform:none; letter-spacing:.04em; }
.hist-visor { width:max-content; max-width:100%; margin:0 auto 16px; padding:7px 15px; border:1px solid rgba(15,28,34,.14); border-radius:6px; background:#f5f5f7; box-shadow:none; }
.hist-led { color:#0f1c22; font-family:"Montserrat",sans-serif; font-size:.59rem; font-weight:800; letter-spacing:.12em; text-shadow:none; }
.hist-ventana { min-height:310px; padding:44px 28px 28px; border:1px solid #0f1c22; border-radius:18px; overflow:hidden; background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.055),transparent 60%),repeating-linear-gradient(35deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),#0f1c22; box-shadow:inset 0 0 0 7px #0f1c22,inset 0 0 0 8px rgba(194,51,57,.75),inset 0 16px 42px rgba(0,0,0,.25); }
.hist-ventana::after { content:""; position:absolute; inset:15px; border:1px dashed rgba(255,255,255,.22); border-radius:10px; pointer-events:none; }
.hist-payline { display:none; }
.hist-tapete__rotulo { position:absolute; top:17px; left:28px; right:28px; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.68); font:700 .54rem/1 "Montserrat",sans-serif; letter-spacing:.18em; }
.hist-tapete__rotulo i { height:1px; flex:1; background:rgba(194,51,57,.65); }
.hist-rodillos { position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:19px 13px; }
.hist-rodillo-col { width:clamp(96px,13vw,142px); gap:9px; }
.hist-rodillo { width:100%; height:auto; aspect-ratio:5/7; overflow:visible; border-radius:10px; background:transparent; box-shadow:0 13px 22px rgba(1,17,15,.35); perspective:1000px; }
.hist-rodillo::after { display:none; }
.hist-cinta { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.2,.68,.2,1); }
.hist-cinta.revelada { transform:rotateY(180deg); }
.hist-carta-dorso,.hist-carta-frente { position:absolute; inset:0; border-radius:10px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.hist-carta-dorso { display:grid; place-items:center; padding:7px; border:3px solid #fff; background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(194,51,57,.18) 9px 11px),#0f1c22; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.hist-carta-dorso__marco { width:100%; height:100%; display:grid; place-content:center; gap:10px; text-align:center; border:1px solid rgba(255,255,255,.65); border-radius:5px; color:#fff; }
.hist-carta-logo { display:block; width:52px; height:41px; margin:auto; background:#fff; -webkit-mask:url("assets/logo03.svg") center/contain no-repeat; mask:url("assets/logo03.svg") center/contain no-repeat; }
.hist-carta-frente { transform:rotateY(180deg); padding:7px; border:1px solid rgba(15,28,34,.16); background:#fff; box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 6px rgba(194,51,57,.3); }
.hist-celda { position:relative; width:100%; height:100%; border:0; flex-direction:column; gap:10px; padding:12px 8px 8px; }
.hist-celda::before { content:"✦"; position:absolute; top:5px; left:5px; color:#c23339; font-size:.72rem; }
.hist-celda img { width:61%; height:61%; object-fit:contain; filter:drop-shadow(0 7px 8px rgba(15,28,34,.12)); }
.hist-rodillo:has(.hist-cinta.repartiendo) { animation:histCartaEntra .64s cubic-bezier(.17,.74,.28,1.16) both; }
@keyframes histCartaEntra { from { opacity:0; transform:translate(290px,-105px) rotate(16deg) scale(.7); } }
.hist-rodillo.fijado { box-shadow:0 0 0 3px #c23339,0 14px 25px rgba(0,0,0,.42); transform:translateY(-6px) rotate(-1deg); }
.hist-rodillo.fijado::before { content:"✓"; position:absolute; z-index:5; top:-10px; right:-9px; width:25px; height:25px; display:grid; place-items:center; color:#fff; background:#c23339; border:2px solid #fff; border-radius:50%; font:900 .72rem/1 "Montserrat",sans-serif; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.hist-nombre-led { width:100%; min-height:32px; padding:5px 7px; border:1px solid rgba(15,28,34,.12); border-radius:5px; background:#fff; box-shadow:0 4px 8px rgba(0,0,0,.18); transform:rotate(calc((var(--card-i) - 2)*.18deg)); }
.hist-nombre-led span { color:#0f1c22; font-size:.57rem; letter-spacing:.045em; text-shadow:none; }
.hist-btn-fijar { padding:4px 10px; color:#fff; border-color:rgba(255,255,255,.45); letter-spacing:.07em; }
.hist-btn-fijar:hover { background:rgba(255,255,255,.08); }
.hist-btn-fijar[aria-pressed="true"] { color:#fff; background:#c23339; border-color:#c23339; }
.hist-btn-fijar[aria-pressed="true"] .hist-punto { background:#fff; box-shadow:none; }
.hist-mandos { margin-top:20px; }
.hist-mando-grupo { background:#f5f5f7; border-color:rgba(15,28,34,.14); }
.hist-etq { color:#0f1c22; }
.hist-paso { color:#fff; background:#c23339; box-shadow:0 3px 0 #8f2429; }
.hist-num { color:#0f1c22; font-family:"Montserrat",sans-serif; font-size:1rem; text-shadow:none; }
.hist-pala { background:#203a35; border-color:rgba(255,226,164,.35); }
.hist-pala::after { background:#f4d28e; box-shadow:none; }
.hist-interruptor[aria-pressed="true"] .hist-pala { background:#2b796b; }
.hist-fila-tirar { margin-top:22px; }
.hist-btn-categorias { color:#0f1c22; background:#fff; border:1px solid rgba(15,28,34,.28); border-radius:999px; box-shadow:none; }
.hist-btn-categorias:hover { background:#f5f5f7; }
.hist-btn-tirar { padding:16px 31px; color:#fff; background:#c23339; border:1px solid #c23339; border-radius:9px; box-shadow:0 6px 0 #8f2429,0 14px 24px rgba(15,28,34,.2); text-shadow:none; letter-spacing:.07em; }
.hist-btn-tirar:hover { filter:brightness(1.05); transform:translateY(-2px) rotate(-.5deg); }
.hist-btn-tirar:active { transform:translateY(5px); box-shadow:0 1px 0 #8f2429,0 6px 12px rgba(15,28,34,.2); }
.hist-placa { padding:9px 15px; color:#f3dbb5; border:0; border-top:1px solid rgba(255,255,255,.1); border-radius:0; background:transparent; box-shadow:none; }
.hist-placa>span:not(.hist-slit):not(.hist-moneda) { color:#6e6e73; font-family:"Roboto",sans-serif; font-size:.71rem; text-transform:none; letter-spacing:.05em; }
.hist-moneda { width:24px; height:24px; display:grid; place-items:center; color:#fff; background:#c23339; border:0; box-shadow:none; font:800 .75rem/1 Georgia,serif; }
.hist-slit { display:none; }

.hist-palanca { right:-132px; top:220px; width:102px; height:170px; z-index:3; }
.hist-mazo__sombra { position:absolute; left:5px; right:0; bottom:-8px; height:22px; background:rgba(0,0,0,.25); border-radius:50%; filter:blur(8px); }
.hist-mazo__carta,.hist-palanca__brazo { position:absolute; inset:5px 7px 42px 5px; width:auto; height:auto; border:4px solid #fff; border-radius:10px; background:repeating-linear-gradient(45deg,#0f1c22 0 9px,#c23339 9px 11px,#0f1c22 11px 20px); box-shadow:0 9px 18px rgba(15,28,34,.25),inset 0 0 0 1px rgba(255,255,255,.35); transform:rotate(4deg); transition:transform .25s; }
.hist-mazo__carta--2 { transform:translate(-5px,5px) rotate(1deg); z-index:-1; }
.hist-mazo__carta--3 { transform:translate(-10px,10px) rotate(-2deg); z-index:-2; }
.hist-mazo__sello { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; place-items:center; }
.hist-mazo__sello .hist-carta-logo { width:42px; height:33px; filter:drop-shadow(0 3px 6px rgba(15,28,34,.6)); }
.hist-palanca.bajada .hist-palanca__brazo { transform:translate(-24px,-18px) rotate(-12deg); }
.hist-palanca__etq { top:auto; right:auto; bottom:8px; left:0; width:100%; transform:none; color:rgba(255,255,255,.82); font-family:"Montserrat",sans-serif; font-size:.5rem; letter-spacing:.09em; text-align:center; }
.hist-palanca button { cursor:pointer; }
.hist-palanca:hover .hist-palanca__brazo { transform:translateY(-5px) rotate(1deg); }

.hist-cajon { width:min(940px,100%); margin-top:32px; color:#0f1c22; background:#fff; border:1px solid rgba(15,28,34,.12); border-radius:12px; box-shadow:0 28px 55px rgba(0,0,0,.45); }
.hist-cajon.abierto { max-height:6000px; }
.hist-cajon__inner { padding:30px; }
.hist-cajon__cabecera { padding-bottom:15px; border-bottom:1px solid rgba(15,28,34,.15); }
.hist-cajon__cabecera h3 { color:#0f1c22; font-size:1.35rem; }
.hist-cajon__ayuda { color:#6e6e73; max-width:760px; }
.hist-cajon .hist-led { color:#c23339; }
.hist-mini-btn { color:#0f1c22; border-color:rgba(15,28,34,.3); }
.hist-mini-btn:hover { background:rgba(15,28,34,.06); }
.hist-grupo-cats { padding:15px 0 4px; }
.hist-grupo-cats>header h4 { color:#0f1c22; }
.hist-grupo-cats>header button { color:#c23339; }
.hist-chips { gap:10px; }
.hist-chip { position:relative; color:#4c5357; background:#fff; border:1px solid rgba(15,28,34,.18); border-radius:6px; padding:8px 13px 8px 9px; box-shadow:0 3px 0 rgba(15,28,34,.1); }
.hist-chip::before { content:""; position:absolute; left:9px; right:9px; top:-4px; height:4px; border-radius:3px 3px 0 0; background:rgba(194,51,57,.45); }
.hist-chip:hover { transform:translateY(-2px) rotate(-.5deg); }
.hist-chip[aria-pressed="true"] { color:#fff; background:#c23339; border-color:#c23339; box-shadow:0 3px 0 #8f2429; }
.hist-chip[aria-pressed="true"]::before { background:#0f1c22; }

.hist-salida { padding-top:35px; }
.hist-boca { width:min(620px,92%); height:28px; display:grid; place-items:center; color:rgba(255,255,255,.62); border:0; border-bottom:1px solid rgba(255,255,255,.22); border-radius:0; background:none; box-shadow:none; font:700 .52rem/1 "Montserrat",sans-serif; letter-spacing:.18em; }
.hist-billete { width:min(680px,100%); margin-top:24px; padding:32px 34px 30px; border-radius:8px; background:#fff; box-shadow:0 27px 55px rgba(0,0,0,.5); transform:rotate(.35deg); }
.hist-billete::before { content:""; position:absolute; top:-12px; left:50%; width:96px; height:26px; transform:translateX(-50%) rotate(-2deg); background:rgba(210,210,214,.82); }
.hist-billete::after { display:none; }
.hist-billete.imprimiendo { animation:histFichaAparece .72s cubic-bezier(.18,.76,.24,1.12) both; }
@keyframes histFichaAparece { from { opacity:0; transform:translateY(38px) rotate(2deg) scale(.94); } }
.hist-billete__marca { color:#c23339; }
.hist-billete__iconos { gap:10px; }
.hist-sello { width:104px; padding:9px 6px; border:1px solid rgba(15,28,34,.12); border-radius:7px; background:#f5f5f7; }
.hist-sello img { width:48px; height:48px; }
.hist-btn-billete--primario { background:#c23339; border-color:#c23339; }
.hist-btn-billete--primario:hover { background:#0f1c22; border-color:#0f1c22; }
.hist-pleno { color:#f0aeb1; text-shadow:none; }
.hist-escritorio { margin-top:76px; }
.hist-esc-head__titulo { color:#fff; }
.hist-papel { position:relative; border-radius:6px; background:#fff; box-shadow:0 30px 65px rgba(0,0,0,.5); transform:rotate(-.2deg); }
.hist-papel::before { content:""; position:absolute; left:20px; top:0; bottom:0; width:1px; background:rgba(201,88,61,.2); }
.hist-papel__cab h4 { color:#0f1c22; }
.hist-papel textarea { background:repeating-linear-gradient(transparent 0 31px,rgba(194,51,57,.14) 31px 32px); }

@media (max-width:1120px) { .hist-zona { width:min(940px,100%); } .hist-palanca { display:none; } }
@media (max-width:720px) {
  .hero-hist__cartas { transform:scale(.86); transform-origin:center; }
  .hist-zona { margin-top:45px; }
  .hist-maquina { padding:28px 13px 20px; border-radius:20px; }
  .hist-marquesina { width:calc(100% - 22px); margin-top:-62px; padding:21px 14px 18px; }
  .hist-sobremesa { font-size:.48rem; letter-spacing:.12em; }
  .hist-ventana { min-height:250px; padding:42px 13px 22px; }
  .hist-rodillos { gap:16px 9px; }
  .hist-rodillo-col { flex:0 1 calc(50% - 8px); width:auto; max-width:128px; }
  .hist-nombre-led span { font-size:.51rem; }
  .hist-btn-fijar { font-size:.54rem; }
  .hist-cajon__inner,.hist-billete,.hist-papel { padding:24px 18px; }
}
@media (max-width:420px) {
  .hero--historias .hero__eyebrow { font-size:.68rem; letter-spacing:.1em; }
  .hero--historias .hero__title { font-size:2.2rem; }
  .hero--historias .hero__claim { font-size:1rem; }
  .hist-head .section__title { font-size:2rem; line-height:1.08; }
}
@media (prefers-reduced-motion:reduce) { .hero-hist__carta,.hist-rodillo:has(.hist-cinta.repartiendo) { animation:none; } .hist-cinta { transition:none; } }
html.a11y-reduce-motion .hero-hist__carta,html.a11y-reduce-motion .hist-rodillo:has(.hist-cinta.repartiendo) { animation:none!important; }
html.a11y-reduce-motion .hist-cinta { transition:none!important; }

/* Modo noche: la sala ya es oscura de serie; los naipes de las
   jugadas siguen las variables y solo re-anclan su borde fijo. */
html[data-tema="noche"] .hist-idea,
html[data-tema="noche"] .hist-paso-card,
html[data-tema="noche"] .hist-creditos { border-color: rgba(255, 255, 255, .14); }

/* ============================================================
   Modo noche · La mesa del cartógrafo se convierte en una CARTA
   NÁUTICA NOCTURNA: en vez de "oscurecer" el papel crema, la
   carta pasa a azul marino profundo con tinta de luna pálida.
   El rojo profes.tv sigue marcando la ruta y los sellos.
   ============================================================ */
html[data-tema="noche"] .mapa-mesa {
  --mm-papel: #10222f;
  --mm-papel-2: #0b1926;
  --mm-papel-borde: #0a141d;
  --mm-carta: #13293a;
  --mm-tinta: #dbe6de;
  --mm-tinta-suave: rgba(219, 230, 222, .6);
  --mm-linea: rgba(219, 230, 222, .14);
  --mm-texto: #c7d3ce;
  --mm-raya-fina: rgba(219, 230, 222, .06);
  --mm-raya: rgba(219, 230, 222, .11);
  --mm-borde-suave: rgba(219, 230, 222, .22);
  --mm-borde-media: rgba(219, 230, 222, .32);
  --mm-borde: rgba(219, 230, 222, .45);
  --mm-ghost: rgba(219, 230, 222, .3);
  --mm-velo: rgba(14, 30, 42, .8);
  --mm-velo-denso: rgba(17, 36, 50, .92);
  --mm-bolsillo: rgba(7, 18, 27, .5);
  --mm-niebla: rgba(19, 41, 56, .92);
  --mm-ficha-bg: #112536;
  --mm-polaroid: #16324a;
  --mm-rojo: #d4494f;
  --mm-rojo-osc: #f0aeb1;
  --mm-mesa: #0a1219;
  --mm-mesa-2: #05090d;
}

/* el papel nocturno: sin resplandor cálido, con vaguada de mar profundo */
html[data-tema="noche"] .mapa-mesa__map {
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(96, 150, 180, .12), transparent 58%),
    linear-gradient(90deg, transparent calc(25% - 1px), rgba(0, 0, 0, .3) 25%, transparent calc(25% + 1px)),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(0, 0, 0, .34) 50%, transparent calc(50% + 1px)),
    linear-gradient(90deg, transparent calc(75% - 1px), rgba(0, 0, 0, .3) 75%, transparent calc(75% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(0, 0, 0, .3) 50%, transparent calc(50% + 1px)),
    linear-gradient(180deg, var(--mm-papel), var(--mm-papel-2));
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .7),
    inset 0 0 90px rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(219, 230, 222, .14);
}
html[data-tema="noche"] .mapa-mesa__pliegue { opacity: .45; }
html[data-tema="noche"] .mapa-mesa__plegado-papel { box-shadow: 0 26px 60px rgba(0, 0, 0, .75), 0 4px 14px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(219, 230, 222, .14); }
html[data-tema="noche"] .mapa-mesa__roundel text { fill: #10222f; }
html[data-tema="noche"] .mapa-mesa__cuaderno-head { background: #0c1b27; }
html[data-tema="noche"] .mapa-mesa__cuaderno-paso i { color: var(--mm-rojo); }
html[data-tema="noche"] .mapa-mesa__sello-mapa { mix-blend-mode: normal; }
html[data-tema="noche"] .mapa-mesa__dato { background: rgba(212, 73, 79, .24); color: #ffd2d4; }
html[data-tema="noche"] .mapa-mesa__celo {
  background: rgba(255, 255, 255, .08);
  border-left-color: rgba(219, 230, 222, .25);
  border-right-color: rgba(219, 230, 222, .25);
}
html[data-tema="noche"] .mapa-mesa__polaroid { box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
html[data-tema="noche"] .mapa-mesa__leyenda { box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
html[data-tema="noche"] .mapa-mesa__marker { box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
html[data-tema="noche"] .mapa-mesa__desplegar { box-shadow: 0 14px 34px rgba(212, 73, 79, .3); }
html[data-tema="noche"] .mapa-mesa__hoja-btn { background: #1d2f3a; }
html[data-tema="noche"] .mapa-mesa__hoja-btn:hover { background: #27404f; }
html[data-tema="noche"] .mapa-mesa__scrim { background: rgba(0, 0, 0, .6); }
html[data-tema="noche"] .mapa-mesa__libro { box-shadow: 0 44px 90px rgba(0, 0, 0, .8); }
html[data-tema="noche"] .mapa-mesa__libro-aviso { background: rgba(212, 73, 79, .16); }

/* ============================================================
   NAVEGADOR MAPA
   La carta decorativa se convierte en una herramienta de decisión docente:
   brief de aula, ruta M·A·P·A, prompt activo y plan reutilizable. El aparato
   mantiene su acabado oscuro en ambos temas, como la consola y el ecualizador.
   ============================================================ */
.mapa-nav {
  --mn-bg: #07151d;
  --mn-panel: #0c202b;
  --mn-panel-2: #102b39;
  --mn-line: rgba(221, 235, 240, .13);
  --mn-text: #edf4f6;
  --mn-dim: #91a6af;
  --mn-red: #df4b52;
  --mn-red-bright: #ff747a;
  --mn-paper: #f0ecdf;
  --mn-paper-2: #e4dece;
  --mn-ink: #14242c;
  position: relative;
  overflow: hidden;
  padding-top: clamp(78px, 9vw, 122px);
  padding-bottom: clamp(84px, 10vw, 136px);
}
.mapa-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 42% at 8% 46%, rgba(194, 51, 57, .06), transparent 72%),
    radial-gradient(44% 36% at 94% 78%, rgba(34, 105, 132, .07), transparent 74%);
}
.mapa-nav .section__inner { position: relative; }
.mapa-nav__head { max-width: 790px; margin: 0 auto 44px; text-align: center; }
.mapa-nav__head .feature__eyebrow { margin-bottom: 12px; }
.mapa-nav__head .section__title { margin-bottom: 0; }
.mapa-nav__head > p:last-child:not(.feature__eyebrow) { margin-top: 16px; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.7; }

.mapa-nav__device {
  position: relative;
  color: var(--mn-text);
  background:
    radial-gradient(90% 80% at 50% -15%, rgba(54, 110, 133, .2), transparent 55%),
    linear-gradient(155deg, #0a1b24, var(--mn-bg) 68%);
  border: 1px solid rgba(221, 235, 240, .15);
  border-radius: 34px;
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(4, 16, 23, .34),
    0 0 60px -20px rgba(223, 75, 82, .28),
    inset 0 1px rgba(255, 255, 255, .06);
}
/* filo de luz roja sobre el chasis: el aparato «está encendido» */
.mapa-nav__device::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 116, 122, .7), transparent);
}
.mapa-nav__device::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(221, 235, 240, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(221, 235, 240, .025) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(#000, transparent 55%);
  mask-image: linear-gradient(#000, transparent 55%);
}
.mapa-nav__device > * { position: relative; z-index: 1; }
.mapa-nav__device-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border-bottom: 1px solid var(--mn-line);
  background: rgba(2, 11, 16, .46);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mn-dim);
}
.mapa-nav__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--mn-text); font-weight: 700; }
.mapa-nav__brand i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--mn-red);
  box-shadow: 0 0 0 5px rgba(223, 75, 82, .12), 0 0 18px rgba(223, 75, 82, .55);
}
.mapa-nav__signal { display: inline-flex; align-items: flex-end; gap: 2px; margin-left: auto; height: 14px; }
.mapa-nav__signal i { display: block; width: 3px; border-radius: 2px; background: #6fbe8a; }
.mapa-nav__signal i:nth-child(1) { height: 4px; }
.mapa-nav__signal i:nth-child(2) { height: 7px; }
.mapa-nav__signal i:nth-child(3) { height: 10px; }
.mapa-nav__signal i:nth-child(4) { height: 13px; }

/* La ruta es el golpe visual: una línea viva y cuatro decisiones legibles.
   Arriba solo queda el contador 1/4: el nombre de la decisión ya lo cantan la
   parada encendida y la fila de etapa, y repetirlo era ruido. */
.mapa-nav__route { padding: 8px 34px 32px; }
.mapa-nav__route-top { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-bottom: 14px; }
.mapa-nav__route-progress { text-align: right; }
.mapa-nav__route-progress b { display: block; font: 800 1.24rem/1 var(--font-display); color: var(--mn-red-bright); }
.mapa-nav__track {
  --mapa-progress: 0;
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); align-items: start;
}
.mapa-nav__track-line {
  position: absolute; left: 12.5%; right: 12.5%; top: 28px; height: 5px; border-radius: 99px;
  background:
    repeating-linear-gradient(90deg, rgba(223, 75, 82, .28) 0 7px, transparent 7px 14px),
    rgba(223, 75, 82, .1);
}
.mapa-nav__track-line i {
  display: block; width: calc(var(--mapa-progress) * 100%); height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #af2b32, var(--mn-red-bright));
  box-shadow: 0 0 18px rgba(223, 75, 82, .55); transition: width .65s var(--ease);
}
.mapa-nav__stop {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px;
  border: 0; background: none; color: inherit; cursor: pointer; padding: 0 9px; font: inherit;
}
.mapa-nav__stop-dot {
  position: relative; width: 58px; height: 58px; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid #58717c;
  background: radial-gradient(120% 120% at 32% 22%, #1b3b4b, #0d222d 70%);
  box-shadow: 0 0 0 6px var(--mn-bg), inset 0 1px rgba(255, 255, 255, .1);
  transition: transform .35s var(--ease), background .3s, border-color .3s, box-shadow .3s;
}
/* la parada ya vista no se marca con un tic: se enciende, sin más */
.mapa-nav__stop.is-visited .mapa-nav__stop-dot { border-color: rgba(255, 116, 122, .5); }
.mapa-nav__stop.is-visited .mapa-nav__stop-dot b { color: #f0f6f7; }
.mapa-nav__stop-dot b { font: 800 1.12rem/1 var(--font-display); color: #dbe6e9; transition: color .3s; }
.mapa-nav__stop-copy { display: grid; gap: 3px; text-align: center; }
.mapa-nav__stop-copy strong { font: 750 .9rem/1.2 var(--font-display); color: var(--mn-text); transition: color .3s; }
.mapa-nav__stop-copy small { max-width: 19ch; font-size: .68rem; line-height: 1.35; color: var(--mn-dim); }
.mapa-nav__stop:hover .mapa-nav__stop-dot { transform: translateY(-3px); border-color: var(--mn-red-bright); }
.mapa-nav__stop.is-active .mapa-nav__stop-dot {
  transform: translateY(-4px) scale(1.08); border-color: #ff999d;
  background: radial-gradient(120% 120% at 32% 22%, #ff6a70, var(--mn-red) 68%);
  box-shadow: 0 0 0 6px var(--mn-bg), 0 0 0 11px rgba(223, 75, 82, .16), 0 14px 34px rgba(223, 75, 82, .4);
}
.mapa-nav__stop.is-active .mapa-nav__stop-dot b { color: #fff; }
.mapa-nav__stop.is-active .mapa-nav__stop-copy strong { color: var(--mn-red-bright); }
/* halo que se expande una sola vez al llegar a la parada */
.mapa-nav__stop-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(255, 116, 122, .55); opacity: 0; pointer-events: none;
}
.mapa-nav__stop.is-active .mapa-nav__stop-dot::after { animation: mapa-halo 1.1s var(--ease) 1 forwards; }
@keyframes mapa-halo {
  from { opacity: .8; transform: scale(1); }
  to { opacity: 0; transform: scale(1.6); }
}
.mapa-nav__stop:focus-visible { outline: none; }
.mapa-nav__stop:focus-visible .mapa-nav__stop-dot { outline: 3px solid #fff; outline-offset: 4px; }

/* Superficie de trabajo: explicación a la izquierda, herramienta a la derecha. */
.mapa-nav__panels { border-top: 1px solid var(--mn-line); }
.mapa-nav__panel[hidden] { display: none !important; }
.mapa-nav__panel.is-active { animation: mapa-nav-panel .45s var(--ease); }
@keyframes mapa-nav-panel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* La etapa ya no es una columna: es una FILA que define la decisión activa
   (letra, nombre, frase y explicación) con los pasos de la ruta a la derecha. */
.mapa-nav__stage {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(210px, .82fr) minmax(0, 1.35fr) auto;
  align-items: center; gap: clamp(16px, 2vw, 30px);
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 3vw, 42px);
  background:
    radial-gradient(70% 160% at 6% 50%, rgba(223, 75, 82, .14), transparent 62%),
    linear-gradient(120deg, #112f3e, #0a202b);
  border-bottom: 1px solid var(--mn-line);
}
/* filete rojo que marca la decisión activa, como el lomo de una pestaña */
.mapa-nav__stage::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--mn-red-bright), var(--mn-red) 60%, transparent);
}
.mapa-nav__stage > * { position: relative; z-index: 1; }

/* El dibujo de la etapa, en grande y casi transparente: filigrana del panel.
   Va ENTERO dentro de la fila (antes era la letra y salía cortada por el borde). */
.mapa-nav__stage-ghost {
  position: absolute; z-index: 0; right: clamp(12px, 1.6vw, 24px); top: 50%;
  width: clamp(104px, 12vw, 158px); height: clamp(104px, 12vw, 158px);
  transform: translateY(-50%); pointer-events: none;
  color: #fff; opacity: .05;
}
.mapa-nav__stage-ghost svg { display: block; width: 100%; height: 100%; }
.mapa-nav__panel.is-active .mapa-nav__stage-ghost { animation: mapa-nav-ghost .9s var(--ease) 1 both; }
@keyframes mapa-nav-ghost {
  from { opacity: 0; transform: translateY(-50%) scale(.86) rotate(-6deg); }
  to { opacity: .05; transform: translateY(-50%) scale(1) rotate(0); }
}

/* El medallón preside la decisión: el icono manda y la letra queda de sello. */
.mapa-nav__stage-badge {
  position: relative; flex: none; width: 88px; height: 88px;
  display: grid; place-items: center; border-radius: 26px;
  background: linear-gradient(150deg, #ff6a70, var(--mn-red) 74%);
  box-shadow:
    0 16px 34px rgba(223, 75, 82, .34),
    0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 1px rgba(255, 255, 255, .32);
}
/* aro tenue alrededor del medallón: le da aire de emblema */
.mapa-nav__stage-badge::before {
  content: ""; position: absolute; inset: -7px; border-radius: 32px;
  border: 1px solid rgba(255, 116, 122, .28); pointer-events: none;
}
.mapa-nav__stage-ico { display: block; width: 46px; height: 46px; color: #fff; }
.mapa-nav__stage-ico svg { display: block; width: 100%; height: 100%; }
.mapa-nav__panel.is-active .mapa-nav__stage-ico { animation: mapa-nav-ico .55s var(--ease) .1s 1 both; }
@keyframes mapa-nav-ico {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: none; }
}
/* la letra no desaparece: se convierte en el sello del medallón */
.mapa-nav__stage-letter {
  position: absolute; right: -9px; bottom: -9px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%;
  border: 2px solid rgba(255, 116, 122, .5); background: #0a202b; color: #fff;
  font: 800 .92rem/1 var(--font-display); box-shadow: 0 6px 14px rgba(4, 16, 23, .45);
}
.mapa-nav__stage-copy { min-width: 0; }
.mapa-nav__stage-copy small { display: flex; align-items: center; gap: 7px; color: var(--mn-dim); font: 700 .6rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.mapa-nav__stage-copy h3 { margin: 6px 0 0; font: 800 1.5rem/1.05 var(--font-display); }
.mapa-nav__stage-claim { margin: 4px 0 0; color: var(--mn-red-bright); font: 650 .94rem/1.4 var(--font-display); }
.mapa-nav__stage-desc { min-width: 0; color: #c1d0d6; font-size: .86rem; line-height: 1.65; }
.mapa-nav__stage-nav { display: flex; align-items: center; gap: 9px; }
.mapa-nav__stage-nav button { white-space: nowrap; border: 1px solid rgba(221, 235, 240, .18); border-radius: 999px; background: transparent; color: #c5d2d7; padding: 9px 14px; cursor: pointer; font: 700 .68rem/1 var(--font-display); transition: border-color .2s, color .2s, background .2s; }
.mapa-nav__stage-nav button:last-child { background: #e8eff1; border-color: #e8eff1; color: #10212a; }
.mapa-nav__stage-nav button:hover { border-color: var(--mn-red-bright); color: var(--mn-red-bright); }
.mapa-nav__stage-nav button:last-child:hover { background: var(--mn-red); border-color: var(--mn-red); color: #fff; }
.mapa-nav__stage-nav button:disabled { opacity: .32; pointer-events: none; }

/* Curvas de nivel apenas insinuadas: la mesa sigue siendo un mapa. */
.mapa-nav__prompt-zone {
  min-width: 0; padding: clamp(28px, 3vw, 42px);
  background:
    repeating-radial-gradient(circle at 6% 108%, rgba(221, 235, 240, .028) 0 1px, transparent 1px 30px),
    rgba(2, 12, 17, .28);
}
.mapa-nav__prompt-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 20px; }
/* El rótulo de la caja de herramientas se retiró: encabeza el recuento de
   prompts, en rojo y mayúsculas pero SIN negrita, para que no dé voces. */
.mapa-nav__prompt-head strong {
  display: block; color: var(--mn-red-bright);
  font: 500 .78rem/1.35 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}
.mapa-nav__prompt-count { color: #617983; font: 700 .72rem/1 var(--font-mono); }
.mapa-nav__prompt-grid { display: grid; grid-template-columns: minmax(210px, .78fr) minmax(0, 1.28fr); gap: 18px; align-items: start; }
.mapa-nav__options { display: grid; gap: 8px; }
/* Casilla de prompt: el número canta el orden y el rótulo se lee de un vistazo. */
.mapa-nav__option {
  position: relative; overflow: hidden;
  width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  border: 1px solid var(--mn-line); border-radius: 13px; background: rgba(255, 255, 255, .025);
  color: inherit; padding: 13px 13px; text-align: left; cursor: pointer; font: inherit;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.mapa-nav__option::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--mn-red-bright); opacity: 0; transform: scaleY(.3); transform-origin: center;
  transition: opacity .2s, transform .25s var(--ease);
}
.mapa-nav__option-num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--mn-line); background: rgba(0, 0, 0, .22);
  color: #8fa5ad; font: 700 .72rem/1 var(--font-mono); transition: color .2s, background .2s, border-color .2s;
}
.mapa-nav__option-name { min-width: 0; color: #dce6e9; font: 700 .94rem/1.3 var(--font-display); }
.mapa-nav__option i { color: #58707a; font-style: normal; transition: transform .2s, color .2s; }
.mapa-nav__option:hover { transform: translateX(3px); border-color: rgba(255, 116, 122, .5); background: rgba(255, 255, 255, .045); }
.mapa-nav__option:hover i { transform: translateX(2px); }
.mapa-nav__option.is-active {
  background: linear-gradient(100deg, rgba(223, 75, 82, .18), rgba(223, 75, 82, .06));
  border-color: rgba(255, 116, 122, .62); box-shadow: 0 10px 26px rgba(223, 75, 82, .14);
}
.mapa-nav__option.is-active::before { opacity: 1; transform: scaleY(1); }
.mapa-nav__option.is-active .mapa-nav__option-num { background: var(--mn-red); border-color: var(--mn-red); color: #fff; }
.mapa-nav__option.is-active .mapa-nav__option-name { color: #fff; }
.mapa-nav__option.is-active i { color: var(--mn-red-bright); }
.mapa-nav__option:focus-visible { outline: 2px solid var(--mn-red-bright); outline-offset: 2px; }

.mapa-nav__prompt {
  position: relative; min-width: 0; border: 1px solid rgba(221, 235, 240, .17); border-radius: 18px;
  background: linear-gradient(155deg, #143342, #0d222d); overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .06);
}
/* hilo rojo encendido en el canto superior de la ficha */
.mapa-nav__prompt::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--mn-red-bright), transparent); opacity: .75;
}
/* La ficha ya no lleva descripción: el rótulo rojo «PROMPT | …» ES el título. */
.mapa-nav__prompt-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; }
.mapa-nav__prompt-meta span { color: var(--mn-red-bright); font: 800 .68rem/1.3 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.mapa-nav__prompt-tag { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.mapa-nav__prompt-tag i { font-style: normal; opacity: .5; }
.mapa-nav__prompt-meta b { color: #7f98a2; font: 600 .58rem/1.3 var(--font-mono); text-align: right; }

/* Personalizar el prompt se hace DONDE se lee: un desplegable dentro de la
   ficha con los cuatro datos del aula (el contexto es único para los cuatro). */
.mapa-nav__tune { margin: 0 16px 14px; border: 1px solid var(--mn-line); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.mapa-nav__tune[open] { background: rgba(255, 255, 255, .05); border-color: rgba(255, 116, 122, .4); }
.mapa-nav__tune-btn {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 11px;
  padding: 11px 14px; cursor: pointer; list-style: none; border-radius: inherit;
  transition: background .2s;
}
.mapa-nav__tune-btn::-webkit-details-marker { display: none; }
.mapa-nav__tune-btn:hover { background: rgba(255, 255, 255, .04); }
.mapa-nav__tune-btn:focus-visible { outline: 2px solid var(--mn-red-bright); outline-offset: 2px; }
.mapa-nav__tune-ico { width: 20px; height: 20px; color: var(--mn-red-bright); }
.mapa-nav__tune-ico svg { display: block; width: 100%; height: 100%; }
.mapa-nav__tune-copy { min-width: 0; display: grid; gap: 2px; }
.mapa-nav__tune-copy strong { color: #e7eff1; font: 750 .82rem/1.25 var(--font-display); }
.mapa-nav__tune-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7e959e; font-size: .68rem; }
.mapa-nav__tune-btn b {
  min-width: 40px; text-align: center; border: 1px solid var(--mn-line); border-radius: 999px;
  padding: 4px 8px; color: #8fa5ad; font: 700 .62rem/1 var(--font-mono);
  transition: color .2s, border-color .2s, background .2s;
}
.mapa-nav__tune.is-set .mapa-nav__tune-btn b { border-color: rgba(111, 190, 138, .5); background: rgba(111, 190, 138, .12); color: #9cdfb2; }
.mapa-nav__tune-chev {
  width: 9px; height: 9px; border-right: 2px solid #7e959e; border-bottom: 2px solid #7e959e;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease);
}
.mapa-nav__tune[open] .mapa-nav__tune-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.mapa-nav__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 14px 0; }
.mapa-nav__fields label { display: grid; gap: 6px; min-width: 0; }
.mapa-nav__fields label span {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: #8fa5ad;
}
.mapa-nav__fields input {
  width: 100%; min-width: 0; border: 1px solid var(--mn-line); border-radius: 10px;
  background: rgba(0, 0, 0, .22); padding: 10px 12px; color: #eef5f7;
  font: 600 .84rem/1.3 var(--font-body); transition: border-color .2s, box-shadow .2s, background .2s;
}
.mapa-nav__fields input::placeholder { color: #6d8189; opacity: 1; font-weight: 400; }
.mapa-nav__fields input:focus { outline: none; border-color: var(--mn-red-bright); background: rgba(0, 0, 0, .3); box-shadow: 0 0 0 3px rgba(223, 75, 82, .16); }
.mapa-nav__tune-hint { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px 14px; color: #7e959e; font-size: .72rem; line-height: 1.5; }
.mapa-nav__tune-hint span { color: var(--mn-red-bright); }

.mapa-nav__prompt-text {
  margin: 0; max-height: 360px; overflow: auto; overscroll-behavior: contain;
  padding: 18px 18px 18px 20px; border-top: 1px solid var(--mn-line); border-bottom: 1px solid var(--mn-line);
  background:
    linear-gradient(90deg, rgba(223, 75, 82, .5) 0 2px, transparent 2px),
    rgba(0, 0, 0, .28);
  color: #dbe6e9; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 .78rem/1.68 var(--font-mono); scrollbar-color: #46606b transparent;
}
.mapa-nav__prompt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 14px 16px 16px; }
.mapa-nav__copy,
.mapa-nav__save {
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 999px; padding: 9px 15px; cursor: pointer; font: 750 .68rem/1 var(--font-display);
  transition: transform .2s, background .2s, border-color .2s, color .2s;
}
.mapa-nav__copy {
  border: 1px solid var(--mn-red); color: #fff;
  background: linear-gradient(150deg, #ff6a70, var(--mn-red) 72%);
  box-shadow: 0 10px 24px rgba(223, 75, 82, .3);
}
.mapa-nav__copy:hover { box-shadow: 0 14px 30px rgba(223, 75, 82, .42); }
.mapa-nav__save.mapa-mesa__save { border: 1px solid rgba(221, 235, 240, .25); background: transparent; color: #dbe6e9; padding: 9px 14px; }
.mapa-nav__prompt-actions .prompt-open { min-height: 38px; border-color: rgba(221, 235, 240, .25); background: transparent; color: #dbe6e9; font-size: .68rem; }
.mapa-nav__copy:hover,
.mapa-nav__save:hover,
.mapa-nav__prompt-actions .prompt-open:hover { transform: translateY(-1px); border-color: var(--mn-red-bright); color: #fff; }

.mapa-nav__cta { margin-top: 32px; text-align: center; }

/* ---------- modo claro: el aparato se apoya en la mesa del cartógrafo ----------
   El chasis es oscuro en los dos temas. En claro, si el fondo se queda en blanco
   liso, el aparato flota sin peso: se le pone debajo un papel cálido con curvas
   de nivel apenas dibujadas y una sombra larga que lo despega de la página. */
html:not([data-tema="noche"]) .mapa-nav {
  background: linear-gradient(180deg, #fff, #f4f2ed 52%, #eceae4);
  border-top: 1px solid rgba(15, 28, 34, .06);
  border-bottom: 1px solid rgba(15, 28, 34, .06);
}
html:not([data-tema="noche"]) .mapa-nav::before {
  background:
    radial-gradient(60% 42% at 50% 0%, rgba(194, 51, 57, .07), transparent 70%),
    repeating-radial-gradient(circle at 86% 16%, rgba(15, 28, 34, .05) 0 1px, transparent 1px 36px),
    repeating-radial-gradient(circle at 8% 94%, rgba(15, 28, 34, .04) 0 1px, transparent 1px 44px);
}
html:not([data-tema="noche"]) .mapa-nav__device {
  box-shadow:
    0 50px 90px -34px rgba(15, 28, 34, .5),
    0 0 70px -24px rgba(194, 51, 57, .3),
    inset 0 1px rgba(255, 255, 255, .07);
}

@media (max-width: 1120px) {
  .mapa-nav__stage { grid-template-columns: auto minmax(0, 1fr); row-gap: 16px; }
  /* la fila se hace alta: la filigrana sube a la esquina para no pisar el texto */
  .mapa-nav__stage-ghost { top: clamp(14px, 2vw, 24px); transform: none; }
  @keyframes mapa-nav-ghost {
    from { opacity: 0; transform: scale(.86) rotate(-6deg); }
    to { opacity: .05; transform: none; }
  }
  .mapa-nav__stage-desc { grid-column: 1 / -1; }
  .mapa-nav__stage-nav { grid-column: 1 / -1; justify-content: space-between; }
  .mapa-nav__prompt-grid { grid-template-columns: 1fr; }
  .mapa-nav__options { grid-template-columns: repeat(2, 1fr); }
  .mapa-nav__prompt-text { max-height: 300px; }
}
@media (max-width: 820px) {
  .mapa-nav__device { border-radius: 24px; }
  .mapa-nav__device-bar { padding: 0 16px; }
  .mapa-nav__device-bar > span:last-child { display: none; }
  .mapa-nav__route { padding: 8px 18px 24px; }
  .mapa-nav__route-top { grid-template-columns: 1fr auto; }
  .mapa-nav__prompt-zone { padding: 26px 20px 30px; }
}
@media (max-width: 640px) {
  .mapa-nav__head { margin-bottom: 30px; }
  .mapa-nav__head > p:last-child { font-size: .96rem; }
  .mapa-nav__device-bar { min-height: 48px; gap: 10px; }
  .mapa-nav__brand { max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mapa-nav__fields { grid-template-columns: 1fr; gap: 10px; }
  .mapa-nav__route-top { margin-bottom: 14px; }
  .mapa-nav__route-progress { font-size: .8rem; }
  .mapa-nav__track { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mapa-nav__track-line { display: none; }
  .mapa-nav__stop { min-height: 82px; grid-template-columns: 42px minmax(0, 1fr); justify-items: start; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--mn-line); border-radius: 13px; background: rgba(255, 255, 255, .025); }
  .mapa-nav__stop-dot { width: 42px; height: 42px; box-shadow: none; }
  .mapa-nav__stop-dot b { font-size: .9rem; }
  .mapa-nav__stop-copy { text-align: left; }
  .mapa-nav__stop-copy small { display: none; }
  .mapa-nav__stop.is-active .mapa-nav__stop-dot { transform: none; box-shadow: 0 0 0 4px rgba(223, 75, 82, .13); }
  .mapa-nav__stage { padding: 24px 20px; }
  .mapa-nav__stage-badge { width: 66px; height: 66px; border-radius: 20px; }
  .mapa-nav__stage-badge::before { inset: -5px; border-radius: 25px; }
  .mapa-nav__stage-ico { width: 34px; height: 34px; }
  .mapa-nav__stage-letter { width: 26px; height: 26px; right: -7px; bottom: -7px; font-size: .78rem; }
  .mapa-nav__stage-ghost { width: 92px; height: 92px; right: 10px; opacity: .045; }
  .mapa-nav__stage-copy h3 { font-size: 1.3rem; }
  .mapa-nav__stage-nav button { flex: 1 1 0; }
  .mapa-nav__tune-btn { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mapa-nav__tune-chev { display: none; }
  .mapa-nav__options { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .mapa-nav__option { min-width: 230px; scroll-snap-align: start; }
  .mapa-nav__prompt-meta { align-items: flex-start; flex-direction: column; }
  .mapa-nav__prompt-meta b { text-align: left; }
  .mapa-nav__prompt-text { max-height: 380px; font-size: .72rem; }
  .mapa-nav__prompt-actions { align-items: stretch; }
  .mapa-nav__copy { flex: 1 1 calc(50% - 5px); }
}

@media (prefers-reduced-motion: reduce) {
  .mapa-nav *, .mapa-nav *::before, .mapa-nav *::after { animation: none !important; transition: none !important; }
}
html.a11y-reduce-motion .mapa-nav *,
html.a11y-reduce-motion .mapa-nav *::before,
html.a11y-reduce-motion .mapa-nav *::after { animation: none !important; transition: none !important; }

/* ============================================================
   LA TABLA PERIÓDICA DE LA EVIDENCIA · evidencias.html
   ------------------------------------------------------------
   Las 31 aproximaciones del repositorio de EduCaixa (la versión
   española del Teaching & Learning Toolkit de la EEF) puestas
   como una tabla periódica.

   CÓMO SE CODIFICA EL COLOR (y por qué):
   · El COLOR de la casilla es su FAMILIA. Es identidad, no valor:
     nunca cambia, ni al reordenar ni al filtrar.
   · La ESCALA DE MESES (la columna de chapas de la izquierda) es
     lo único vestido con el rojo de marca: cuanto más oscura la
     chapa, más aprende el alumnado. Por eso ninguna familia es
     roja: el rojo está reservado.
   · Impacto nulo o negativo lleva TRAMA además de color: el color
     por sí solo no puede ser quien avise (daltonismo, impresión,
     alto contraste).

   Las siete familias y los nueve peldaños de la escala están
   validados con el comprobador de paletas: en modo día el peor par
   de familias se separa ΔE 17.2 y en noche ΔE 12.2 (objetivo ≥12),
   con TODOS los pares comparados, porque en una cuadrícula dos
   casillas cualesquiera pueden acabar tocándose. Cada chapa de la
   escala admite tinta o blanco a 4.5:1. NO retoques estos hex a
   ojo: se rompe la accesibilidad sin que se note.
   ============================================================ */

:root {
  /* las 7 familias (día) */
  --tpe-ensenanza: #05773b;
  --tpe-lengua:    #d87d1c;
  --tpe-juntos:    #04a3aa;
  --tpe-apoyo:     #4759b7;
  --tpe-clima:     #b579d9;
  --tpe-entorno:   #b0457b;
  --tpe-centro:    #71640b;

  /* la escala de meses: +7 … −3 (día). Oscuro = más aprendizaje. */
  --tpe-m0: #760810; --tpe-m0-txt: #fff;
  --tpe-m1: #931b1e; --tpe-m1-txt: #fff;
  --tpe-m2: #ac3533; --tpe-m2-txt: #fff;
  --tpe-m3: #c44c47; --tpe-m3-txt: #fff;
  --tpe-m4: #de635c; --tpe-m4-txt: #0f1c22;
  --tpe-m5: #f77a72; --tpe-m5-txt: #0f1c22;
  --tpe-m6: #fca097; --tpe-m6-txt: #0f1c22;
  --tpe-m7: #fdc3bd; --tpe-m7-txt: #0f1c22;
  --tpe-m8: #fee4e1; --tpe-m8-txt: #0f1c22;

  /* la casilla: siete de ellas (la fila más larga, la de +4) tienen que caber
     de sobra en los 1280px del sitio. */
  --tpe-celda: clamp(88px, 9.8vw, 140px);
  --tpe-hair: rgba(15, 28, 34, .09);
}

.tpe-celda[data-fam="ensenanza"], .tpe-chip__dot[data-fam="ensenanza"], .tpe-ficha__head[data-fam="ensenanza"] { --fam: var(--tpe-ensenanza); }
.tpe-celda[data-fam="lengua"],    .tpe-chip__dot[data-fam="lengua"],       .tpe-ficha__head[data-fam="lengua"]    { --fam: var(--tpe-lengua); }
.tpe-celda[data-fam="juntos"],    .tpe-chip__dot[data-fam="juntos"],       .tpe-ficha__head[data-fam="juntos"]    { --fam: var(--tpe-juntos); }
.tpe-celda[data-fam="apoyo"],     .tpe-chip__dot[data-fam="apoyo"],         .tpe-ficha__head[data-fam="apoyo"]     { --fam: var(--tpe-apoyo); }
.tpe-celda[data-fam="clima"],     .tpe-chip__dot[data-fam="clima"],         .tpe-ficha__head[data-fam="clima"]     { --fam: var(--tpe-clima); }
.tpe-celda[data-fam="entorno"],   .tpe-chip__dot[data-fam="entorno"],     .tpe-ficha__head[data-fam="entorno"]   { --fam: var(--tpe-entorno); }
.tpe-celda[data-fam="centro"],    .tpe-chip__dot[data-fam="centro"],       .tpe-ficha__head[data-fam="centro"]    { --fam: var(--tpe-centro); }

/* ---------- la portada ---------- */

.hero--evidencias .hero__title { max-width: 15ch; margin-inline: auto; }

/* la tabla en miniatura, con la silueta de la tabla periódica de toda la vida
   (las dos torres, el valle y la base maciza), pero en versión mini y con
   menos cuadraditos. Se encienden UNA a una. Una pasada y para. */
.hero-tpe__tabla {
  display: grid;
  grid-template-columns: repeat(9, 15px);
  grid-auto-rows: 15px;
  gap: 3px;
  margin: 26px auto 0;
  width: max-content;
}

.hero-tpe__celda {
  grid-row: var(--r);
  grid-column: var(--c);
  border-radius: 5px;
  background: var(--col);
  opacity: 0;
  transform: scale(.5);
}

.hero-tpe__celda.is-alta { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--col); }

.reveal.visible .hero-tpe__celda,
.hero-tpe__tabla.visible .hero-tpe__celda {
  animation: tpe-enciende .5s var(--ease) 1 forwards;
  animation-delay: calc(var(--i) * .055s + .1s);
}

@keyframes tpe-enciende {
  from { opacity: 0; transform: scale(.5); }
  60%  { opacity: 1; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- la clave de lectura ---------- */

.tpe-intro__head { max-width: 780px; }
.tpe-intro__text { margin-top: 18px; color: var(--ink-soft); font-size: 1.05rem; }

.tpe-clave {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding: 30px 34px;
  background: var(--gray-bg);
  border-radius: var(--radius);
}

.tpe-clave__muestra { flex: 0 0 auto; padding: 4px 6px 4px 10px; }

/* la casilla de muestra, más grande y con sus cuatro chinchetas. El selector
   es más específico a propósito: la regla de .tpe-celda va más abajo y lleva
   overflow:hidden, que si no se comería las chinchetas. */
.tpe-clave .tpe-celda--muestra {
  --tpe-celda: 142px;
  cursor: default;
  overflow: visible;
}

.tpe-clave__pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font: 700 .7rem/1 var(--font-display);
  font-style: normal;
}

/* las chinchetas van POR FUERA de la casilla: si se meten dentro pisan el
   nombre, que vive pegado al borde de abajo. Una por esquina, y las dos de la
   izquierda caben porque la caja gris tiene margen de sobra. */
.tpe-clave__pin--1 { top: -13px; left: -13px; }
.tpe-clave__pin--2 { top: -13px; right: -13px; }
.tpe-clave__pin--3 { top: 50%; right: -13px; transform: translateY(-50%); }
.tpe-clave__pin--4 { bottom: -13px; left: -13px; }

.tpe-clave__lista {
  flex: 1 1 300px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pista;
}

.tpe-clave__lista li {
  position: relative;
  counter-increment: pista;
  padding: 9px 0 9px 34px;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.5;
}

.tpe-clave__lista li::before {
  content: counter(pista);
  position: absolute;
  left: 0;
  top: 10px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font: 700 .7rem/1 var(--font-display);
}

.tpe-clave__lista strong { color: var(--ink); font-weight: 600; }

.tpe-unidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.tpe-unidad {
  padding: 22px 24px;
  border: 1px solid var(--tpe-hair);
  border-radius: 22px;
}

.tpe-unidad__dt {
  margin-bottom: 8px;
  font: 700 .95rem/1.3 var(--font-display);
  color: var(--ink);
}

.tpe-unidad__dd { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.tpe-unidad__dd strong { color: var(--ink); font-weight: 600; }

.tpe-aviso {
  margin-top: 30px;
  padding: 18px 22px 18px 20px;
  border-left: 3px solid var(--red);
  background: var(--gray-bg);
  border-radius: 0 16px 16px 0;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.65;
}

.tpe-aviso strong { color: var(--ink); font-weight: 600; }

/* ---------- el mando ---------- */

.tpe-head__intro { margin-top: 16px; max-width: 720px; color: var(--ink-soft); }

.tpe-mando {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.tpe-vistas {
  display: inline-flex;
  padding: 4px;
  background: var(--gray-bg);
  border-radius: 999px;
}

.tpe-vista {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 .85rem/1 var(--font-display);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.tpe-vista:hover { color: var(--ink); }

.tpe-vista.is-on {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 2px 10px rgba(15, 28, 34, .16);
}

.tpe-buscar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  min-width: 260px;
  border: 1px solid var(--tpe-hair);
  border-radius: 999px;
  color: var(--ink-soft);
}

.tpe-buscar:focus-within { border-color: var(--red); }

.tpe-buscar input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .9rem;
}

.tpe-buscar input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

.tpe-pie {
  margin-top: 16px;
  min-height: 1.4em;
  color: var(--ink-soft);
  font-size: .85rem;
}

.tpe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tpe-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--tpe-hair);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 500 .8rem/1 var(--font-body);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.tpe-chip:hover { color: var(--ink); border-color: var(--ink-soft); }

.tpe-chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.tpe-chip__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fam, var(--ink-soft));
}

/* ---------- LA TABLA ----------
   Una fila por cada valor de meses; dentro, las casillas PEGADAS, sin un solo
   hueco. La rejilla familia × meses de la primera versión dejaba 63 celdas para
   28 casillas y quedaba dispersa. Así la silueta que sale es un histograma del
   impacto: se ve de un golpe que casi todo lo que funciona se amontona en +4 y
   +5, y que solo una cosa resta. Además, al no haber columnas, la tabla se
   envuelve sola en pantallas estrechas y NUNCA necesita desplazarse a lo ancho.
   ---------------------------------------------------------------- */

.tpe-tabla-wrap { margin-top: 28px; }

.tpe-tabla {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 1108px;          /* lo marca la fila más larga: siete casillas */
  margin: 0 auto;
}

.tpe-fila { display: flex; align-items: stretch; gap: 15px; }

/* el raíl: una línea fina enhebra las nueve chapas y hace de eje de la escala */
.tpe-fila__rail {
  position: relative;
  flex: 0 0 56px;
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.tpe-fila__rail::before {
  content: "";
  position: absolute;
  top: -9px;
  bottom: -9px;
  right: -8px;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 12%, var(--white));
}

.tpe-fila:first-child .tpe-fila__rail::before { top: 15px; }
.tpe-fila:last-child .tpe-fila__rail::before { bottom: auto; height: 16px; }

.tpe-fila__n {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 31px;
  border-radius: 9px;
  background: var(--paso, var(--gray-card));
  color: var(--paso-txt, var(--ink));
  font: 800 .92rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.tpe-fila[data-nivel="0"] { --paso: var(--tpe-m0); --paso-txt: var(--tpe-m0-txt); }
.tpe-fila[data-nivel="1"] { --paso: var(--tpe-m1); --paso-txt: var(--tpe-m1-txt); }
.tpe-fila[data-nivel="2"] { --paso: var(--tpe-m2); --paso-txt: var(--tpe-m2-txt); }
.tpe-fila[data-nivel="3"] { --paso: var(--tpe-m3); --paso-txt: var(--tpe-m3-txt); }
.tpe-fila[data-nivel="4"] { --paso: var(--tpe-m4); --paso-txt: var(--tpe-m4-txt); }
.tpe-fila[data-nivel="5"] { --paso: var(--tpe-m5); --paso-txt: var(--tpe-m5-txt); }
.tpe-fila[data-nivel="6"] { --paso: var(--tpe-m6); --paso-txt: var(--tpe-m6-txt); }
.tpe-fila[data-nivel="7"] { --paso: var(--tpe-m7); --paso-txt: var(--tpe-m7-txt); }
.tpe-fila[data-nivel="8"] { --paso: var(--tpe-m8); --paso-txt: var(--tpe-m8-txt); }

.tpe-fila[data-aviso="1"] .tpe-fila__n { box-shadow: inset 0 0 0 1.5px rgba(15, 28, 34, .28); }

.tpe-fila__celdas {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  flex: 1;
}

/* ---------- LA CASILLA ----------
   Lleva sus TRES cifras encima, y por eso ya no hacen falta columnas:
   los meses arriba a la izquierda, el coste en euros arriba a la derecha,
   y la solidez como una barra al pie (cuanto más larga, más fiable).
   Sin barra = cero escudos = no se sabe.
   -------------------------------------------------------------- */

.tpe-celda {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  width: var(--tpe-celda);
  height: var(--tpe-celda);
  padding: 8px 9px 10px;
  border: 1px solid var(--gray-card);
  border-radius: 13px;
  background: var(--gray-card);
  background: color-mix(in oklab, var(--fam) 17%, var(--white));
  border-color: color-mix(in oklab, var(--fam) 42%, var(--white));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), opacity .25s var(--ease);
}

.tpe-celda:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(15, 28, 34, .16);
  z-index: 3;
}

.tpe-celda__meses {
  grid-area: 1 / 1;
  font: 800 .8rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--fam);
}

.tpe-celda__coste {
  grid-area: 1 / 2;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 700 .62rem/1 var(--font-display);
  letter-spacing: -.06em;
  color: color-mix(in oklab, var(--ink) 55%, var(--white));
}

/* el número de euros, junto a los símbolos: cuesta menos que contarlos */
.tpe-celda__costen {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ink);
}

.tpe-celda__sim {
  grid-area: 2 / 1 / 3 / 3;
  align-self: center;
  justify-self: center;
  font: 700 clamp(1.35rem, 1.9vw, 1.75rem)/1 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ink);
}

.tpe-celda__nombre {
  grid-area: 3 / 1 / 4 / 3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(.55rem, .68vw, .66rem);
  line-height: 1.2;
  color: var(--ink-soft);
  hyphens: auto;
}

/* la barra de solidez: 0 escudos -> no se dibuja nada, que es justo el mensaje */
.tpe-celda__evid {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--evid, 0) / 5 * 100%);
  background: var(--fam);
  border-radius: 0 3px 0 0;
}

/* impacto nulo o negativo: TRAMA además de color. El color por sí solo no
   puede ser quien avise (daltonismo, impresión, alto contraste). */
.tpe-celda[data-aviso="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    rgba(15, 28, 34, .09) 5px 7px
  );
}

/* filtrada fuera: se queda de fondo, no desaparece (así la tabla no "salta") */
.tpe-celda.is-off {
  opacity: .15;
  filter: saturate(.2);
  pointer-events: none;
}

/* ---------- el zócalo: las que no tienen cifra ---------- */

.tpe-isla {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 24px 28px;
  border: 1px dashed color-mix(in oklab, var(--ink) 22%, var(--white));
  border-radius: 24px;
}

.tpe-isla__rotulo { flex: 1 1 320px; }

.tpe-isla__rotulo strong {
  display: block;
  margin-bottom: 5px;
  font: 700 .95rem/1.3 var(--font-display);
  color: var(--ink);
}

.tpe-isla__rotulo span { color: var(--ink-soft); font-size: .87rem; line-height: 1.6; }

.tpe-isla__celdas { display: flex; gap: var(--tpe-gap); flex-wrap: wrap; }

.tpe-cita {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--tpe-hair);
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.7;
}

.tpe-cita strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   MODO CLARO · profundidad del laboratorio
   ------------------------------------------------------------
   En claro, todo caía sobre blanco puro —fondo, cajas y casillas
   pastel— y quedaba plano y descolorido. Aquí, y SOLO en claro
   (el modo noche ya saca su riqueza mezclando la familia con la
   tinta oscura de --white), se le da al mueble una superficie de
   "mesa de laboratorio" tenue para que las cajas blancas floten
   con sombra y los pastel de las casillas tengan contra qué
   despuntar. No se toca ningún hex de familia ni de la escala:
   solo la superficie, la elevación y un punto más de saturación
   en el relleno de la casilla (que sigue sobrando de contraste
   con la tinta). El modo noche queda intacto.
   ============================================================ */
html:not([data-tema="noche"]) .tpe-intro,
html:not([data-tema="noche"]) .tpe-section {
  background:
    radial-gradient(120% 90% at 50% -10%, #f7f8fb 0%, rgba(247, 248, 251, 0) 60%),
    linear-gradient(180deg, #eef1f6 0%, #e9ecf2 100%);
}

/* las cajas de la clave pasan a ser papel blanco con sombra: es el truco
   clásico de "tarjeta sobre superficie tintada" y da profundidad al instante */
html:not([data-tema="noche"]) .tpe-clave,
html:not([data-tema="noche"]) .tpe-unidad {
  background: var(--white);
  border-color: rgba(15, 28, 34, .07);
  box-shadow: 0 1px 2px rgba(15, 28, 34, .04), 0 10px 30px rgba(15, 28, 34, .07);
}

html:not([data-tema="noche"]) .tpe-aviso {
  background: var(--white);
  box-shadow: 0 1px 2px rgba(15, 28, 34, .04), 0 10px 26px rgba(15, 28, 34, .06);
}

/* el mando: la pista del segmentado y el buscador se levantan como controles
   de papel sobre la mesa (si se quedan en --gray-bg, que es más claro que la
   superficie tintada, parecen hundidos al revés) */
html:not([data-tema="noche"]) .tpe-vistas {
  background: var(--white);
  box-shadow: 0 1px 2px rgba(15, 28, 34, .05), 0 4px 14px rgba(15, 28, 34, .06);
}
html:not([data-tema="noche"]) .tpe-buscar {
  background: var(--white);
  border-color: rgba(15, 28, 34, .08);
  box-shadow: 0 1px 2px rgba(15, 28, 34, .04);
}
html:not([data-tema="noche"]) .tpe-chip {
  background: var(--white);
  border-color: rgba(15, 28, 34, .08);
}
html:not([data-tema="noche"]) .tpe-chip:hover { border-color: var(--ink-soft); }
html:not([data-tema="noche"]) .tpe-chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
}

/* la isla del zócalo (las que no tienen cifra) también sobre papel */
html:not([data-tema="noche"]) .tpe-isla {
  background: var(--white);
  border-color: rgba(15, 28, 34, .14);
  box-shadow: 0 1px 2px rgba(15, 28, 34, .04), 0 10px 26px rgba(15, 28, 34, .06);
}

/* la casilla: un punto más de color en el relleno y en el borde, más una
   sombra fina para que despunte de la mesa. El texto es tinta oscura, así que
   subir del 17 % al 24 % sigue sobrando de contraste. */
html:not([data-tema="noche"]) .tpe-celda {
  background: color-mix(in oklab, var(--fam) 24%, var(--white));
  border-color: color-mix(in oklab, var(--fam) 50%, var(--white));
  box-shadow: 0 1px 2px rgba(15, 28, 34, .05), 0 4px 12px rgba(15, 28, 34, .05);
}

/* ============================================================
   LA FICHA (la ventana de cada evidencia)
   ============================================================ */

body.tpe-abierta { overflow: hidden; }

.tpe-ficha {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  padding: 24px;
}

.tpe-ficha__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 34, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.tpe-ficha.show .tpe-ficha__scrim { opacity: 1; }

.tpe-ficha__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  padding: 0 0 34px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}

.tpe-ficha.show .tpe-ficha__panel { opacity: 1; transform: none; }
.tpe-ficha__panel:focus { outline: none; }

.tpe-ficha__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease);
}

.tpe-ficha__close:hover { background: var(--white); }

.tpe-ficha__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 34px 38px 30px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--gray-bg);
  background: color-mix(in oklab, var(--fam) 12%, var(--white));
  border-bottom: 3px solid var(--fam, var(--ink));
}

/* el símbolo, ampliado: la misma casilla que has pulsado */
.tpe-ficha__sim {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 15px;
  background: var(--white);
  border: 1px solid var(--fam);
  color: var(--fam);
  font: 700 1.75rem/1 var(--font-display);
  letter-spacing: -.02em;
}

.tpe-ficha__fam {
  margin-bottom: 4px;
  font: 600 .72rem/1 var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fam);
}

.tpe-ficha__nombre { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.2; color: var(--ink); }
.tpe-ficha__alt { margin-top: 5px; color: var(--ink-soft); font-size: .82rem; font-style: italic; }

/* los tres medidores */
.tpe-medidores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--tpe-hair);
  border-bottom: 1px solid var(--tpe-hair);
}

.tpe-med {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px 20px;
  background: var(--white);
}

.tpe-med__label {
  font: 600 .66rem/1.2 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tpe-med__valor {
  font: 800 1.5rem/1.1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tpe-med--meses .tpe-med__valor { font-size: 2.1rem; color: var(--red); }
.tpe-med--meses[data-aviso="1"] .tpe-med__valor { color: var(--ink); }
.tpe-med--coste .tpe-med__valor,
.tpe-med--evid .tpe-med__valor { font-size: 1rem; font-weight: 700; }

.tpe-med__pie { color: var(--ink-soft); font-size: .72rem; line-height: 1.4; }

/* la regla de −3 a +8, con la marca de esta evidencia */
.tpe-regla {
  position: relative;
  height: 4px;
  margin: 6px 0 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tpe-m8), var(--tpe-m4) 55%, var(--tpe-m0));
}

.tpe-regla__cero {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 27.27%;                 /* el 0 en una escala de −3 a +8 */
  width: 1px;
  background: var(--ink);
  opacity: .4;
}

.tpe-regla__marca {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--red);
}

.tpe-regla__marca[data-aviso="1"] { border-color: var(--ink); }

.tpe-glifos { display: flex; gap: 3px; align-items: center; }

.tpe-euro {
  font: 700 .95rem/1 var(--font-display);
  color: var(--tpe-hair);
  color: color-mix(in oklab, var(--ink) 18%, var(--white));
}

.tpe-euro.is-on { color: var(--ink); }

.tpe-escudo { fill: color-mix(in oklab, var(--ink) 16%, var(--white)); }
.tpe-escudo.is-on { fill: var(--ink); }

/* los dos botones bajo los medidores: ficha y prompt, cada uno despliega su
   panel. La ficha se abre con los dos plegados (como en la captura). */
.tpe-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 26px 38px 0;
}

.tpe-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--tpe-hair);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font: 600 .9rem/1 var(--font-display);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}

.tpe-tab:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.tpe-tab > svg:first-child { color: var(--red); flex: 0 0 auto; }
.tpe-tab > span { margin-right: auto; }
.tpe-tab .tpe-chevron { color: var(--ink-soft); flex: 0 0 auto; transition: transform .25s var(--ease); }
.tpe-tab.is-open { border-color: var(--ink); background: var(--gray-bg); }
.tpe-tab.is-open .tpe-chevron { transform: rotate(180deg); }

/* estrategias sin prompt: aviso en el sitio donde estaría el prompt */
.tpe-noprompt {
  display: flex;
  gap: 14px;
  padding: 4px 2px;
}

.tpe-noprompt__icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--white);
  color: var(--ink-soft);
}

.tpe-noprompt__title { font-size: .98rem; color: var(--ink); margin-bottom: 6px; }
.tpe-noprompt__text { color: var(--ink-soft); font-size: .9rem; line-height: 1.65; }

/* los enlaces de las fuentes, bajo los créditos */
.tpe-cita__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 14px;
}

.tpe-cita__enlaces a {
  position: relative;
  font: 600 .82rem/1.3 var(--font-display);
  color: var(--red);
  padding-left: 18px;
}

.tpe-cita__enlaces a::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--red);
}

.tpe-cita__enlaces a:hover { text-decoration: underline; }

/* el cuerpo */
.tpe-ficha__cuerpo { padding: 30px 38px 0; }

.tpe-ficha__h {
  margin: 26px 0 9px;
  font: 700 .72rem/1 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}

.tpe-ficha__cuerpo > .tpe-ficha__h:first-child { margin-top: 0; }
.tpe-ficha__p { color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }

.tpe-lista { margin: 0; padding: 0; list-style: none; }

.tpe-lista li {
  position: relative;
  padding: 7px 0 7px 22px;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.6;
}

.tpe-lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* «ojo con esto»: nace plegada. Menos ruido. */
.tpe-ojo {
  margin-top: 24px;
  border: 1px solid var(--tpe-hair);
  border-radius: 16px;
  overflow: hidden;
}

.tpe-ojo__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 .84rem/1 var(--font-display);
  text-align: left;
  cursor: pointer;
}

.tpe-ojo__toggle svg:first-child { color: var(--red); flex: 0 0 auto; }
.tpe-ojo__toggle .tpe-chevron { margin-left: auto; color: var(--ink-soft); transition: transform .25s var(--ease); }
.tpe-ojo.is-open .tpe-ojo__toggle .tpe-chevron { transform: rotate(180deg); }
.tpe-ojo.is-open { background: var(--gray-bg); }
.tpe-lista--ojo { padding: 0 18px 14px; }
.tpe-lista--ojo li::before { background: var(--ink-soft); }

/* ---------- el prompt ---------- */

.tpe-prompt {
  margin: 32px 38px 0;
  padding: 24px;
  background: var(--gray-bg);
  border-radius: 24px;
}

.tpe-prompt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tpe-prompt__title { font-size: 1rem; color: var(--ink); }
.tpe-prompt__count { color: var(--ink-soft); font-size: .72rem; font-variant-numeric: tabular-nums; }

.tpe-prompt__ctx {
  margin-bottom: 14px;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
}

.tpe-prompt__ctxtoggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 .84rem/1 var(--font-display);
  text-align: left;
  cursor: pointer;
}

.tpe-prompt__ctxtoggle .tpe-chevron { margin-left: auto; color: var(--ink-soft); transition: transform .25s var(--ease); }
.tpe-prompt__ctx.is-open .tpe-prompt__ctxtoggle .tpe-chevron { transform: rotate(180deg); }

.tpe-paso {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font: 700 .68rem/1 var(--font-display);
}

.tpe-prompt__ctxbody { padding: 4px 16px 16px; }

.tpe-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.tpe-campo { display: flex; flex-direction: column; gap: 5px; }
.tpe-campo--wide { grid-column: 1 / -1; }

.tpe-campo__label {
  font: 600 .7rem/1.2 var(--font-display);
  color: var(--ink-soft);
}

.tpe-campo input,
.tpe-campo textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--tpe-hair);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .85rem;
  resize: vertical;
}

.tpe-campo input:focus,
.tpe-campo textarea:focus { outline: none; border-color: var(--red); }

.tpe-prompt__hint { margin-top: 10px; color: var(--ink-soft); font-size: .74rem; line-height: 1.6; }
.tpe-prompt__hint--pie { margin-top: 12px; }

.tpe-prompt__paper {
  max-height: 300px;
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--white);
  border-radius: 16px;
}

.tpe-prompt__code {
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.tpe-prompt__bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.tpe-copy,
.tpe-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 .82rem/1 var(--font-display);
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}

.tpe-copy { background: var(--ink); color: var(--white); }
.tpe-copy:hover { transform: translateY(-2px); }

.tpe-save {
  background: transparent;
  border-color: var(--tpe-hair);
  color: var(--ink);
}

.tpe-save:hover { border-color: var(--ink-soft); }
.tpe-save.is-flash { background: #0f7b46; border-color: #0f7b46; color: #fff; }

.tpe-ficha__fuente { margin: 24px 0 0; font-size: .8rem; }
.tpe-ficha__fuente a { color: var(--ink-soft); }
.tpe-ficha__fuente a:hover { color: var(--red); }

/* ---------- pantallas estrechas ---------- */

@media (max-width: 900px) {
  .tpe-clave { gap: 26px; padding: 24px; }
  .tpe-mando { flex-direction: column; align-items: stretch; }
  .tpe-vistas { justify-content: center; }
  .tpe-buscar { min-width: 0; }
  .tpe-medidores { grid-template-columns: 1fr; }
  .tpe-ficha { padding: 0; align-items: end; }
  .tpe-ficha__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 26px 26px 0 0;
  }
  .tpe-ficha__head { padding: 28px 22px 24px; border-radius: 26px 26px 0 0; }
  .tpe-tabs { padding: 22px 22px 0; grid-template-columns: 1fr; }
  .tpe-ficha__cuerpo { padding: 26px 22px 0; }
  .tpe-prompt { margin: 26px 22px 0; padding: 18px; }
  .tpe-ficha__fuente { margin: 20px 0 0; }
}

@media (max-width: 560px) {
  .tpe-celda--muestra { --tpe-celda: 122px; }
  .tpe-ficha__sim { width: 58px; height: 58px; font-size: 1.4rem; }
  .tpe-isla { padding: 20px; gap: 18px; }
}

/* quien pide menos movimiento, no ve volar las casillas */
@media (prefers-reduced-motion: reduce) {
  .tpe-celda { transition: none !important; }
  .hero-tpe__celda { animation: none !important; opacity: 1; transform: none; }
}

html.a11y-reduce-motion .tpe-celda,
html.a11y-reduce-motion .hero-tpe__celda { transition: none !important; animation: none !important; }
html.a11y-reduce-motion .hero-tpe__celda { opacity: 1; transform: none; }

/* ============================================================
   LA TABLA PERIÓDICA · MODO NOCHE
   Los siete tonos de familia se re-escalonan para la superficie
   oscura (no es un "invertir automático": son pasos elegidos y
   validados contra #19262e). La escala de meses se invierte: de
   noche, la banda de más impacto es la que MÁS luce.
   ============================================================ */

html[data-tema="noche"] {
  --tpe-ensenanza: #357d4c;
  --tpe-lengua:    #bf8350;
  --tpe-juntos:    #009faa;
  --tpe-apoyo:     #5c72de;
  --tpe-clima:     #a165c4;
  --tpe-entorno:   #c8548d;
  --tpe-centro:    #7d6f15;

  --tpe-m0: #fdc0b9; --tpe-m0-txt: #0f1c22;
  --tpe-m1: #fb9991; --tpe-m1-txt: #0f1c22;
  --tpe-m2: #f1746d; --tpe-m2-txt: #0f1c22;
  --tpe-m3: #d65c56; --tpe-m3-txt: #0f1c22;
  --tpe-m4: #bb4440; --tpe-m4-txt: #fff;
  --tpe-m5: #a12a2a; --tpe-m5-txt: #fff;
  --tpe-m6: #860b14; --tpe-m6-txt: #fff;
  --tpe-m7: #63040b; --tpe-m7-txt: #fff;
  --tpe-m8: #420004; --tpe-m8-txt: #fff;

  --tpe-hair: rgba(255, 255, 255, .12);
}

html[data-tema="noche"] .tpe-celda { box-shadow: none; }
html[data-tema="noche"] .tpe-celda:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }

/* la trama de aviso, en claro sobre fondo oscuro */
html[data-tema="noche"] .tpe-celda[data-aviso="1"]::after {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    rgba(255, 255, 255, .10) 5px 7px
  );
}

html[data-tema="noche"] .tpe-fila[data-aviso="1"] .tpe-fila__n { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32); }
html[data-tema="noche"] .tpe-vista.is-on,
html[data-tema="noche"] .tpe-chip.is-on { background: var(--red); border-color: var(--red); color: #fff; }
html[data-tema="noche"] .tpe-copy { background: var(--red); color: #fff; }
html[data-tema="noche"] .tpe-clave__pin,
html[data-tema="noche"] .tpe-clave__lista li::before { background: var(--red); color: #fff; }
html[data-tema="noche"] .tpe-ficha__close { background: rgba(25, 38, 46, .85); }
html[data-tema="noche"] .tpe-ficha__close:hover { background: var(--gray-card); }
html[data-tema="noche"] .tpe-ficha__scrim { background: rgba(0, 0, 0, .68); }
html[data-tema="noche"] .tpe-regla__cero { background: #fff; }
html[data-tema="noche"] .tpe-save.is-flash { background: #1f9c5e; border-color: #1f9c5e; }

/* ==========================================================================
   EL DUALIZADOR (dua.html) — el DUA 3.0 como sala de realización.
   La entrada clara (.duai-*) explica el marco; el mueble (.dua-*) es un
   muro de nueve monitores (3 principios × 3 alturas) siempre oscuro, como
   una regiduría de verdad, y una mesa clara que sirve ficha y prompt.
   Las animaciones se reproducen UNA vez y se paran.
   ========================================================================== */

:root {
  --dua-noche: #10181f;          /* el cuarto oscuro de realización */
  --dua-noche-2: #16212b;
  --dua-bisel: #232f3a;          /* biseles y cantos del muro */
  --dua-hair: rgba(15, 28, 34, .12);
  --dua-imp: #e9b44c;            /* implicación · el porqué */
  --dua-rep: #4f9d8b;            /* representación · el qué */
  --dua-acc: #5b7fc7;            /* acción y expresión · el cómo */
}

/* ---------- el hero: el muro dibujado a línea ---------- */

.hero--dua {
  position: relative;
  overflow: hidden;
  /* en claro, la portada ya insinúa los tres colores del marco:
     un lavado ámbar, otro azul y un poso verde, todos muy diluidos */
  background:
    radial-gradient(80% 64% at 12% -8%, rgba(233, 180, 76, .18), transparent 58%),
    radial-gradient(80% 64% at 88% -4%, rgba(91, 127, 199, .16), transparent 58%),
    radial-gradient(64% 46% at 50% 34%, rgba(79, 157, 139, .10), transparent 62%),
    linear-gradient(180deg, #fdfcf8 0%, #f5f3ee 100%);
}

.hero-dua__wall {
  width: min(272px, 58vw);
  margin: 28px auto 4px;
}

.hero-dua__wall svg { display: block; width: 100%; height: auto; }

/* cada pantalla se TRAZA con el color de su principio */
.hero-dua__scr {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.hero-dua__scr[data-col="0"] { stroke: var(--dua-imp); }
.hero-dua__scr[data-col="1"] { stroke: var(--dua-rep); }
.hero-dua__scr[data-col="2"] { stroke: var(--dua-acc); }

.hero-dua__base,
.hero-dua__pata {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* la señal que entra en programa: el relleno rojo del centro */
.hero-dua__pgmfill { fill: var(--red); opacity: 0; }

.hero-dua__wall.visible .hero-dua__scr {
  animation: hero-dua-trazo .7s var(--ease) calc(var(--i) * .1s) forwards;
}

.hero-dua__wall.visible .hero-dua__pata { animation: hero-dua-trazo .45s var(--ease) .95s forwards; }
.hero-dua__wall.visible .hero-dua__base { animation: hero-dua-trazo .55s var(--ease) 1.05s forwards; }

.hero-dua__wall.visible .hero-dua__scr--pgm {
  animation:
    hero-dua-trazo .7s var(--ease) calc(var(--i) * .1s) forwards,
    hero-dua-pgm .55s var(--ease) 1.5s forwards;
}

.hero-dua__wall.visible .hero-dua__pgmfill {
  animation: hero-dua-fill .55s var(--ease) 1.5s forwards;
}

@keyframes hero-dua-trazo { to { stroke-dashoffset: 0; } }

@keyframes hero-dua-fill {
  from { opacity: 0; transform: scale(.85); transform-origin: 124px 85px; }
  to { opacity: 1; transform: scale(1); transform-origin: 124px 85px; }
}

@keyframes hero-dua-pgm {
  to { stroke: var(--red); filter: drop-shadow(0 0 7px rgba(194, 51, 57, .55)); }
}

/* ---------- la entrada: qué es el DUA ---------- */

/* En claro, la entrada y la sala pisan un suelo cálido (no un folio
   en blanco) con los tres colores del marco muy diluidos: así las
   tarjetas blancas ganan relieve y el muro oscuro destaca más. */
.duai,
.dua-section {
  background-color: #f5f3ee;
}

.duai {
  background-image:
    radial-gradient(56% 42% at 6% 0%, rgba(233, 180, 76, .13), transparent 62%),
    radial-gradient(56% 42% at 96% 28%, rgba(91, 127, 199, .11), transparent 62%),
    radial-gradient(64% 46% at 40% 100%, rgba(79, 157, 139, .11), transparent 65%);
}

.duai__head { max-width: 860px; }
.duai__lead { margin-top: 18px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.85; }
.duai__lead a { color: var(--red); }

.duai__label {
  margin: 0 0 16px;
  font: 700 .78rem/1.2 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}

.duai-redes { margin-top: 44px; }

.duai-redes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.duai-red {
  position: relative;
  padding: 22px 22px 20px;
  background: color-mix(in srgb, var(--dua-imp) 14%, #fff);
  border-radius: var(--radius);
  border-top: 3px solid var(--dua-imp);
}

.duai-red:nth-child(2) { background: color-mix(in srgb, var(--dua-rep) 12%, #fff); border-top-color: var(--dua-rep); }
.duai-red:nth-child(3) { background: color-mix(in srgb, var(--dua-acc) 12%, #fff); border-top-color: var(--dua-acc); }

.duai-red__zona {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--white);
  font: 700 .68rem/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a5c10;
}

.duai-red:nth-child(2) .duai-red__zona { color: #2e6d5e; }
.duai-red:nth-child(3) .duai-red__zona { color: #44639f; }

.duai-red__red { margin: 12px 0 8px; font-size: 1.02rem; }
.duai-red__texto { color: var(--ink-soft); font-size: .9rem; line-height: 1.7; }

.duai-marco { margin-top: 44px; }
.duai-marco__texto { max-width: 760px; margin: -6px 0 18px; color: var(--ink-soft); font-size: .95rem; line-height: 1.75; }

.duai-marco__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.duai-cifra {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(15, 28, 34, .05);
}

.duai-cifra__n {
  flex: 0 0 auto;
  font: 800 2.2rem/1 var(--font-display);
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

.duai-cifra__t { margin: 2px 0 6px; font-size: .95rem; }
.duai-cifra__d { color: var(--ink-soft); font-size: .85rem; line-height: 1.65; }

.duai-meta {
  position: relative;
  max-width: 860px;
  margin: 44px 0 0;
  padding: 26px 30px;
  background: var(--dua-noche);
  color: #eef4f8;
  border-radius: var(--radius);
}

.duai-meta::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 10px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--dua-imp), var(--dua-rep), var(--dua-acc));
}

.duai-meta__label {
  display: block;
  margin-bottom: 8px;
  font: 700 .72rem/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dua-imp);
}

.duai-meta__texto { font-size: 1.02rem; line-height: 1.8; }

.duai-cambios { margin-top: 44px; }

.duai-cambios__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px 22px;
}

.duai-cambio { display: flex; gap: 12px; align-items: flex-start; }

.duai-cambio__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--red);
}

.duai-cambio__cuerpo { display: flex; flex-direction: column; gap: 3px; }
.duai-cambio__cuerpo strong { font-family: var(--font-display); font-size: .92rem; }
.duai-cambio__cuerpo span { color: var(--ink-soft); font-size: .87rem; line-height: 1.65; }

.duai-aviso {
  max-width: 860px;
  margin-top: 34px;
  padding: 16px 20px;
  background: var(--white);
  border-left: 4px solid var(--red);
  border-radius: 0 14px 14px 0;
  box-shadow: 0 8px 22px rgba(15, 28, 34, .05);
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.7;
}

.duai-aviso strong { color: var(--ink); }

.duai-refs {
  margin-top: 40px;
  padding: 24px 26px;
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 8px 22px rgba(15, 28, 34, .05);
}

.duai-refs__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.duai-refs__icon { flex: 0 0 auto; width: 34px; height: 34px; color: var(--red); }
.duai-refs__icon svg { width: 100%; height: 100%; }
.duai-refs__title { margin: 2px 0 4px; font-size: 1rem; }
.duai-refs__text { color: var(--ink-soft); font-size: .88rem; line-height: 1.65; }

.duai-refs__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.duai-ref { display: flex; flex-direction: column; gap: 5px; }

.duai-ref__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 12px 14px;
  border: 1px solid var(--dua-hair);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.duai-ref__link:hover { border-color: var(--red); transform: translateY(-2px); }
.duai-ref__obra { font: 600 .88rem/1.4 var(--font-display); }
.duai-ref__autor { color: var(--ink-soft); font-size: .78rem; }
.duai-ref__go { margin-left: auto; color: var(--red); }
.duai-ref__nota { padding: 0 4px; color: var(--ink-soft); font-size: .78rem; line-height: 1.55; }

/* ---------- la sala: cabecera de la sección ---------- */

.dua-head { max-width: 860px; }
.dua-head__intro { margin-top: 18px; color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }

/* ---------- el muro de monitores ---------- */

.dua-muro {
  margin-top: 40px;
  padding: 18px 18px 22px;
  background: var(--dua-noche);
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.dua-muro__barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--dua-bisel);
  margin-bottom: 16px;
}

.dua-muro__logo {
  font: 800 .95rem/1 var(--font-display);
  letter-spacing: .18em;
  color: #eef4f8;
}

.dua-muro__sub {
  font: 600 .68rem/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(238, 244, 248, .55);
}

/* el botón rojo: EMISIÓN COMPLETA */
.dua-master {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 10px 16px;
  border: 1.5px solid rgba(224, 85, 96, .55);
  border-radius: 999px;
  background: rgba(194, 51, 57, .12);
  color: #ffdfe1;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.dua-master:hover { transform: translateY(-2px); border-color: #e05560; }

.dua-master.is-pgm {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 22px rgba(194, 51, 57, .5);
}

.dua-master__luz {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e05560;
  box-shadow: 0 0 8px rgba(224, 85, 96, .9);
}

.dua-master.is-pgm .dua-master__luz { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .9); }
.dua-master__textos { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.dua-master__label { font: 800 .74rem/1 var(--font-display); letter-spacing: .12em; }
.dua-master__sub { font: 500 .66rem/1 var(--font-display); opacity: .75; }

.dua-muro__rejilla { display: flex; flex-direction: column; gap: 10px; }

.dua-muro__cab,
.dua-fila {
  display: grid;
  grid-template-columns: 118px repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
}

.dua-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--dua-noche-2);
  border-top: 3px solid var(--dua-imp);
}

.dua-col[data-principio="representacion"] { border-top-color: var(--dua-rep); }
.dua-col[data-principio="accion"] { border-top-color: var(--dua-acc); }

.dua-col__zona {
  font: 700 .62rem/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dua-imp);
}

.dua-col[data-principio="representacion"] .dua-col__zona { color: var(--dua-rep); }
.dua-col[data-principio="accion"] .dua-col__zona { color: #8fa9e0; }

.dua-col__nombre { color: #eef4f8; font: 700 .88rem/1.25 var(--font-display); }
.dua-col__red { color: rgba(238, 244, 248, .5); font-size: .68rem; }

.dua-fila__rail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px dashed var(--dua-bisel);
}

.dua-fila__nombre {
  color: rgba(238, 244, 248, .85);
  font: 700 .7rem/1.2 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dua-fila__hint { color: rgba(238, 244, 248, .45); font-size: .66rem; line-height: 1.45; }

/* el monitor: bisel, pantalla y tally */
.dua-mon {
  --dua-acento: var(--dua-imp);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 7px 7px 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(170deg, #27333f, #1a232c);
  box-shadow: inset 0 0 0 1.5px var(--dua-bisel);
  cursor: pointer;
  text-align: left;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.dua-mon[data-principio="representacion"] { --dua-acento: var(--dua-rep); }
.dua-mon[data-principio="accion"] { --dua-acento: var(--dua-acc); }

.dua-mon:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--dua-acento), 0 10px 22px rgba(0, 0, 0, .35); }
.dua-mon:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.dua-mon__pantalla {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 92px;
  padding: 10px 12px;
  border-radius: 7px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .08), transparent 55%),
    linear-gradient(200deg, color-mix(in srgb, var(--dua-acento) 30%, #101820), #0b1219);
  overflow: hidden;
}

/* las líneas de barrido del tubo: quietas, solo textura */
.dua-mon__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, .035) 3px 4px);
  pointer-events: none;
}

.dua-mon__num {
  position: absolute;
  top: 6px;
  right: 10px;
  font: 800 1.7rem/1 var(--font-display);
  color: color-mix(in srgb, var(--dua-acento) 80%, #fff);
  opacity: .9;
}

/* el rótulo gráfico de la señal: grande y al fondo del tubo, como una
   marca de agua que asoma por el borde (el mismo recurso del logo en el
   banner de cierre); el nombre y el número quedan por delante */
.dua-mon__icono {
  position: absolute;
  top: 50%;
  right: -12px;
  width: 76px;
  height: 76px;
  transform: translateY(-50%) rotate(-8deg);
  color: color-mix(in srgb, var(--dua-acento) 78%, #eef4f8);
  opacity: .2;
  pointer-events: none;
}

.dua-mon__nombre {
  position: relative;
  color: #eef4f8;
  font: 700 .84rem/1.3 var(--font-display);
}

.dua-mon__pie {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 5px;
}

.dua-mon__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #37444f;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}

.dua-mon__tally {
  font: 700 .58rem/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: transparent;
  transition: color .2s var(--ease);
}

/* la señal pinchada: tally rojo, marco encendido */
.dua-mon.is-pgm { box-shadow: inset 0 0 0 2px var(--red), 0 0 24px rgba(194, 51, 57, .35); }
.dua-mon.is-pgm .dua-mon__led { background: #e05560; box-shadow: 0 0 8px rgba(224, 85, 96, .9); }
.dua-mon.is-pgm .dua-mon__tally { color: #ff9da1; }

/* el encendido del muro: UNA pasada al entrar en pantalla y se queda */
.dua-muro.visible .dua-mon__pantalla {
  animation: dua-enciende .55s var(--ease) calc(var(--i) * .1s) both;
}

@keyframes dua-enciende {
  0% { filter: brightness(.15); }
  60% { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}

/* ---------- la mesa de realización ---------- */

.dua-mesa {
  --dua-acento: var(--red);
  margin-top: 26px;
  padding: 30px 34px 34px;
  background: var(--white);
  border: 1px solid var(--dua-hair);
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.dua-mesa[data-senal="implicacion"] { --dua-acento: var(--dua-imp); }
.dua-mesa[data-senal="representacion"] { --dua-acento: var(--dua-rep); }
.dua-mesa[data-senal="accion"] { --dua-acento: var(--dua-acc); }

.dua-mesa__cab {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.dua-mesa__num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 62px;
  height: 62px;
  padding: 0 10px;
  border-radius: 16px;
  background: var(--dua-noche);
  color: color-mix(in srgb, var(--dua-acento) 82%, #fff);
  font: 800 1.6rem/1 var(--font-display);
}

.dua-mesa__id { min-width: 0; }

.dua-mesa__migas {
  font: 700 .68rem/1.3 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.dua-mesa__nombre { margin: 6px 0 4px; font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.25; }
.dua-mesa__lema { color: var(--ink-soft); font-size: .9rem; font-style: italic; }

.dua-mesa__onair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: 700 .62rem/1 var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dua-mesa__onair i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px rgba(255, 255, 255, .9);
}

.dua-mesa__que {
  max-width: 820px;
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.75;
}

/* las tarjetas: una casilla visual por consideración (como las técnicas
   del doble diamante), y la última —a trazos— es el prompt de la pauta */
.dua-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--dua-hair);
}

.dua-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 104px;
  padding: 16px 16px 14px;
  border: 1px solid var(--dua-hair);
  border-top: 3px solid var(--dua-acento, var(--red));
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.dua-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dua-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.dua-card__num {
  font: 800 1.35rem/1 var(--font-display);
  color: var(--dua-acento, var(--red));
  font-variant-numeric: tabular-nums;
}

.dua-card__nombre { font: 600 .84rem/1.4 var(--font-display); }

.dua-card__nueva {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(194, 51, 57, .1);
  color: #a92930;
  font: 700 .56rem/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dua-card.is-on {
  background: var(--dua-noche);
  border-color: var(--dua-noche);
  border-top-color: var(--dua-acento, var(--red));
  color: #fff;
}

.dua-card.is-on .dua-card__nueva { background: rgba(255, 255, 255, .12); color: #ffb9bd; }

.dua-card--pauta {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 0;
  border-style: dashed;
  border-top-style: solid;
  color: var(--ink-soft);
}

.dua-card--pauta svg { flex: 0 0 auto; color: var(--dua-acento, var(--red)); }
.dua-card--pauta span { font: 600 .8rem/1.35 var(--font-display); }
.dua-card--pauta.is-on { border-style: solid; color: #fff; }

/* ---------- el detalle: la señal en programa, con dos desplegables ---------- */

.dua-detalle { margin-top: 22px; }

.dua-detalle__cab {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.dua-detalle__nombre { font-size: 1.05rem; line-height: 1.4; }

.dua-detalle__nueva {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(194, 51, 57, .1);
  color: #a92930;
  font: 700 .62rem/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* los dos botones-desplegable, como los de la ficha de las evidencias */
.dua-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dua-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border: 1px solid var(--dua-hair);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font: 600 .84rem/1 var(--font-display);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.dua-tab svg:first-child { color: var(--dua-acento, var(--red)); flex: 0 0 auto; }
.dua-tab .dua-chevron { margin-left: auto; color: var(--ink-soft); transition: transform .25s var(--ease); }
.dua-tab:hover { border-color: var(--ink-soft); }
.dua-tab.is-open { background: var(--gray-bg); border-color: transparent; }
.dua-tab.is-open .dua-chevron { transform: rotate(180deg); }
.dua-tab[hidden] { display: none; }
.dua-tabs:has(.dua-tab[hidden]) { grid-template-columns: 1fr; }

.dua-detalle__ficha { padding: 20px 4px 4px; }

.dua-detalle__que {
  max-width: 820px;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.75;
}

.dua-detalle__h {
  margin: 20px 0 6px;
  font: 700 .72rem/1 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}

.dua-lista { margin: 0; padding: 0; list-style: none; }

.dua-lista li {
  position: relative;
  padding: 7px 0 7px 22px;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.6;
}

.dua-lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dua-acento, var(--red));
}

/* el prompt: mismo lenguaje que la tabla periódica, en clave dua */
.dua-prompt {
  margin-top: 12px;
  padding: 24px;
  background: var(--gray-bg);
  border-radius: 24px;
}

.dua-prompt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.dua-prompt__title { font-size: 1rem; color: var(--ink); }
.dua-prompt__count { color: var(--ink-soft); font-size: .72rem; font-variant-numeric: tabular-nums; }

.dua-prompt__ctx {
  margin-bottom: 14px;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
}

.dua-prompt__ctxtoggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 .84rem/1 var(--font-display);
  text-align: left;
  cursor: pointer;
}

.dua-prompt__ctxtoggle .dua-chevron { margin-left: auto; color: var(--ink-soft); transition: transform .25s var(--ease); }
.dua-prompt__ctx.is-open .dua-prompt__ctxtoggle .dua-chevron { transform: rotate(180deg); }

.dua-paso {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font: 700 .68rem/1 var(--font-display);
}

.dua-prompt__ctxbody { padding: 4px 16px 16px; }

.dua-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.dua-campo { display: flex; flex-direction: column; gap: 5px; }
.dua-campo--wide { grid-column: 1 / -1; }

.dua-campo__label {
  font: 600 .7rem/1.2 var(--font-display);
  color: var(--ink-soft);
}

.dua-campo input,
.dua-campo textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--dua-hair);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .85rem;
  resize: vertical;
}

.dua-campo input:focus,
.dua-campo textarea:focus { outline: none; border-color: var(--red); }

.dua-prompt__hint { margin-top: 10px; color: var(--ink-soft); font-size: .74rem; line-height: 1.6; }
.dua-prompt__hint--pie { margin-top: 12px; }

.dua-prompt__paper {
  max-height: 320px;
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--white);
  border-radius: 16px;
}

.dua-prompt__code {
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.dua-prompt__bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.dua-copy,
.dua-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 .82rem/1 var(--font-display);
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}

.dua-copy { background: var(--ink); color: var(--white); }
.dua-copy:hover { transform: translateY(-2px); }

.dua-save {
  background: transparent;
  border-color: var(--dua-hair);
  color: var(--ink);
}

.dua-save:hover { border-color: var(--ink-soft); }
.dua-save.is-flash { background: #0f7b46; border-color: #0f7b46; color: #fff; }

.dua-cita { max-width: 860px; margin-top: 30px; color: var(--ink-soft); font-size: .82rem; line-height: 1.7; }
.dua-cita__enlaces { margin-top: 6px; font-size: .82rem; }
.dua-cita__enlaces a { color: var(--red); margin-right: 16px; }

/* ---------- pantallas estrechas ---------- */

@media (max-width: 900px) {
  .dua-muro { padding: 14px 12px 16px; border-radius: 20px; }
  .dua-muro__cab,
  .dua-fila { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dua-muro__esq { display: none; }
  .dua-fila__rail {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 6px 4px 2px;
    border: 0;
  }
  .dua-mon__pantalla { min-height: 78px; padding: 8px 10px; }
  .dua-mon__num { font-size: 1.3rem; }
  .dua-mon__icono { right: -10px; width: 62px; height: 62px; }
  .dua-mon__nombre { font-size: .72rem; }
  .dua-mon__tally { display: none; }
  .dua-master { width: 100%; justify-content: center; margin-left: 0; }
  .dua-mesa { padding: 22px 18px 24px; }
  .dua-mesa__onair { display: none; }
  .dua-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .dua-card { min-height: 92px; padding: 13px 13px 12px; }
  .dua-tabs { grid-template-columns: 1fr; }
  .dua-prompt { padding: 18px; }
}

@media (max-width: 560px) {
  .dua-col__red { display: none; }
  .dua-col__nombre { font-size: .72rem; }
  .dua-col { padding: 8px; }
  .dua-mon__pantalla { min-height: 64px; padding-top: 24px; }
  .dua-mon__icono { right: -8px; width: 52px; height: 52px; }
  .dua-mesa__num { min-width: 50px; height: 50px; font-size: 1.25rem; border-radius: 13px; }
}

/* quien pide menos movimiento ve el muro ya dibujado y encendido */
@media (prefers-reduced-motion: reduce) {
  .dua-muro.visible .dua-mon__pantalla { animation: none; }
  .hero-dua__scr,
  .hero-dua__base,
  .hero-dua__pata { stroke-dashoffset: 0; animation: none !important; }
  .hero-dua__pgmfill { opacity: 1; animation: none !important; }
  .hero-dua__scr--pgm { stroke: var(--red); }
}

/* ---------- modo noche ---------- */
/* El muro ya vive a oscuras; aquí se re-anclan la entrada y la mesa. */

/* el suelo cálido del claro no existe de noche: vuelve la superficie base */
html[data-tema="noche"] .duai,
html[data-tema="noche"] .dua-section { background: none; }

html[data-tema="noche"] .duai-red { background: var(--gray-card); }
html[data-tema="noche"] .duai-red .duai-red__zona { background: rgba(255, 255, 255, .08); color: var(--dua-imp); }
html[data-tema="noche"] .duai-red:nth-child(2) .duai-red__zona { color: var(--dua-rep); }
html[data-tema="noche"] .duai-red:nth-child(3) .duai-red__zona { color: var(--dua-acc); }
html[data-tema="noche"] .duai-cifra,
html[data-tema="noche"] .duai-refs { background: var(--gray-card); border-color: rgba(255, 255, 255, .08); }
html[data-tema="noche"] .duai-meta { background: var(--dua-noche-2); }
html[data-tema="noche"] .duai-aviso { background: var(--gray-card); }
html[data-tema="noche"] .duai-ref__link { border-color: rgba(255, 255, 255, .12); color: inherit; }
html[data-tema="noche"] .duai-ref__link:hover { border-color: var(--red); }

html[data-tema="noche"] .dua-mesa { background: var(--gray-card); border-color: rgba(255, 255, 255, .08); }
html[data-tema="noche"] .dua-card { background: transparent; border-color: rgba(255, 255, 255, .14); border-top-color: var(--dua-acento, var(--red)); color: inherit; }
html[data-tema="noche"] .dua-card.is-on { background: var(--dua-noche); border-color: var(--dua-noche); border-top-color: var(--dua-acento, var(--red)); color: #fff; }
html[data-tema="noche"] .dua-card__nueva,
html[data-tema="noche"] .dua-detalle__nueva { background: rgba(224, 85, 96, .18); color: #ff9da1; }
html[data-tema="noche"] .dua-tab { background: transparent; border-color: rgba(255, 255, 255, .16); color: inherit; }
html[data-tema="noche"] .dua-tab.is-open { background: rgba(0, 0, 0, .3); border-color: transparent; }
html[data-tema="noche"] .dua-prompt { background: rgba(0, 0, 0, .25); }
html[data-tema="noche"] .dua-prompt__ctx,
html[data-tema="noche"] .dua-prompt__paper { background: var(--dua-noche-2); }
html[data-tema="noche"] .dua-campo input,
html[data-tema="noche"] .dua-campo textarea { background: var(--dua-noche); border-color: rgba(255, 255, 255, .14); color: #eef4f8; }
html[data-tema="noche"] .dua-copy { background: var(--red); color: #fff; }
html[data-tema="noche"] .dua-save { border-color: rgba(255, 255, 255, .2); color: inherit; }
html[data-tema="noche"] .dua-save.is-flash { background: #1f9c5e; border-color: #1f9c5e; color: #fff; }
html[data-tema="noche"] .dua-prompt__code { color: #e8eef2; }
html[data-tema="noche"] .hero-dua__muro { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }

/* — Botonera de recursos — */
html[data-tema="noche"] .botonera__btn { background: linear-gradient(165deg, #1b2d35 0%, #12212a 90%); border-color: rgba(255, 255, 255, .12); color: #eef2f3; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
html[data-tema="noche"] .botonera__btn::after { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .14) 50%, transparent 62%); }
html[data-tema="noche"] .botonera__btn:hover { border-color: rgba(229, 115, 121, .45); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 6px 18px rgba(194, 51, 57, .18); }
html[data-tema="noche"] .botonera__icon { background: radial-gradient(120% 120% at 30% 20%, rgba(229, 115, 121, .2), rgba(229, 115, 121, .07)); box-shadow: inset 0 0 0 1px rgba(229, 115, 121, .25); color: #e57379; }
html[data-tema="noche"] .botonera__btn:hover .botonera__icon { background: linear-gradient(160deg, #d2434a 0%, var(--red) 55%, #8e2227 100%); box-shadow: 0 10px 22px rgba(0, 0, 0, .5); color: #fff; }
html[data-tema="noche"] .botonera__num { color: #e57379; }
html[data-tema="noche"] .botonera__flecha { color: #9fb0b6; }
html[data-tema="noche"] .botonera__btn:hover .botonera__flecha { background: rgba(229, 115, 121, .14); color: #e57379; }

/* ============================================================
   TV · LA MEDIATECA (tv.html)
   La portada enciende una carta de ajuste bajo el título y la
   sección .tvm es un plató oscuro con un videowall de teles:
   cada reel de Instagram vive dentro de un televisor que
   arranca "sin señal" (nieve) y se sintoniza al acercarse.
   El plató usa colores FIJOS (como la consola de Proyectos):
   el modo noche no necesita retoques.
   ============================================================ */

/* --- portada: carta de ajuste --- */
.hero-tv__carta {
  display: flex;
  width: min(380px, 72vw);
  height: 54px;
  margin: 30px auto 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 6px var(--ink), 0 18px 40px rgba(15, 28, 34, .22);
  background: var(--ink);
}
.hero-tv__carta i {
  flex: 1;
  background: var(--c);
  transform: scaleY(0);
  transform-origin: bottom;
}
.hero-tv__carta.visible i {
  animation: heroTvBarra .5s calc(var(--i) * 80ms) var(--ease) both;
}
@keyframes heroTvBarra {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
/* brillo de cristal curvo sobre las barras */
.hero-tv__carta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(130% 90% at 50% 118%, rgba(15, 28, 34, .32), transparent 60%);
  pointer-events: none;
}
.hero-tv__rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .24em;
  color: var(--ink-soft);
}
.hero-tv__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px 2px rgba(194, 51, 57, .55);
}

/* --- el plató --- */
.tvm {
  background:
    radial-gradient(120% 70% at 50% -10%, #17262e 0%, transparent 60%),
    #0b151b;
  color: #eef2f4;
}
.tvm__inner { max-width: 1380px; margin: 0 auto; }

/* cabecera del plató: rótulo ON AIR, título, texto y mando a distancia */
.tvm-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px 40px;
  margin-bottom: 46px;
}
.tvm-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #93a7af;
  margin-bottom: 14px;
}
.tvm-onair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 2px solid var(--red);
  border-radius: 10px;
  color: #ff8d92;
  font-size: .72rem;
  letter-spacing: .22em;
  box-shadow: 0 0 22px rgba(194, 51, 57, .28), inset 0 0 12px rgba(194, 51, 57, .14);
}
.tvm-onair i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5157;
  box-shadow: 0 0 10px 2px rgba(255, 81, 87, .65);
}
.tvm-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #fff;
}
.tvm-texto {
  max-width: 620px;
  margin-top: 16px;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.65;
  color: #b9c6cc;
}
.tvm-texto strong { color: #fff; font-weight: 500; }
.tvm-mando {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.tvm-contador {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .14em;
  color: #8fa3ab;
  text-transform: uppercase;
}
.tvm-contador b { color: #fff; font-size: 1.05rem; }
.tvm-zapping {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(194, 51, 57, .35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.tvm-zapping:hover { transform: translateY(-2px); background: #d2434a; box-shadow: 0 18px 40px rgba(194, 51, 57, .45); }
.tvm-zapping:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* --- el videowall --- */
.tvm-muro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 30px 26px;
}
.tvm-tele {
  position: relative;
  border-radius: 20px;
  padding: 10px;
  background: linear-gradient(180deg, #1d2e37 0%, #131f26 78%, #0f1a20 100%);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tvm-tele:hover {
  transform: translateY(-7px);
  box-shadow: 0 32px 64px rgba(0, 0, 0, .55), 0 10px 30px rgba(194, 51, 57, .16), inset 0 1px 0 rgba(255, 255, 255, .1);
}
/* pantalla: el embed de Instagram a tamaño natural. Dentro de un iframe,
   Instagram pinta la vista previa del reel SIEMPRE a 4:5 (alto = ancho ×
   1,25, medido y constante), con 54px de cabecera y ~190px de pie. Si el
   iframe se queda corto, encoge el vídeo para hacer sitio al pie. */
.tvm-pantalla {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  padding-top: calc(125% + 244px);
}
.tvm-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .5s ease .1s;
  background: #fff;
}
.tvm-tele.is-on .tvm-frame { opacity: 1; }

/* modo "solo vídeo" (el de serie): la ventana de la tele mide lo que mide el
   vídeo dentro del embed (ancho ÷ 0,52) más la fila del enlace «Ver más en
   Instagram» (46px), y el iframe se desplaza 55px hacia arriba. Así la
   cabecera de Instagram (avatar y nombre) queda por encima del marco y las
   filas de me gusta / comentarios por debajo: solo se ve el vídeo —que se
   reproduce ahí mismo al pulsar el play, sin salir de la web— y el enlace.
   El iframe conserva su altura natural completa para que Instagram no
   encoja el vídeo al ajustarse. */
.tvm--limpio .tvm-pantalla { padding-top: calc(125% + 46px); }
.tvm--limpio .tvm-frame {
  top: -55px;
  height: calc(100% + 320px); /* holgura para que Instagram no encoja el vídeo */
}

/* nieve de "sin señal": ruido estático que chisporrotea unas pasadas
   (y se queda quieto: las micro-animaciones de la web no van en bucle) */
.tvm-nieve {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  background: repeating-conic-gradient(#212c33 0% 25%, #0e161b 0% 50%) 0 0 / 6px 6px;
  transition: opacity .45s ease .12s;
}
.tvm-nieve::before {
  content: "";
  position: absolute;
  inset: -120%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .13) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  animation: tvmNieve .55s steps(6) 5;
}
@keyframes tvmNieve {
  0% { transform: translate(0, 0); }
  100% { transform: translate(9%, 7%); }
}
.tvm-tele.is-on .tvm-nieve { opacity: 0; pointer-events: none; }
.tvm-sintonia {
  position: relative;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .3em;
  color: #e8f0f3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.tvm-senal {
  position: relative;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .34em;
  color: #93a7af;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}

/* destello de encendido de tubo: una línea blanca que se abre (una pasada) */
.tvm-tele.is-on .tvm-pantalla::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  pointer-events: none;
  animation: tvmEncender .55s var(--ease) both;
}
@keyframes tvmEncender {
  0% { opacity: .95; transform: scaleY(.008); }
  55% { opacity: .7; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

/* panel bajo la pantalla: led, canal y marca */
.tvm-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 4px;
}
.tvm-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5157;
  box-shadow: 0 0 8px 1px rgba(255, 81, 87, .6);
}
.tvm-canal {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: #8fa3ab;
}
.tvm-marca {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #b9c6cc;
}
.tvm-marca b { color: #e57379; }

/* zapping: fogonazo del canal elegido (una pasada) */
.tvm-tele.is-zap { animation: tvmZap 1s var(--ease) 1; }
@keyframes tvmZap {
  0% { box-shadow: 0 0 0 4px rgba(194, 51, 57, .95), 0 22px 48px rgba(0, 0, 0, .42); }
  100% { box-shadow: 0 0 0 22px rgba(194, 51, 57, 0), 0 22px 48px rgba(0, 0, 0, .42); }
}

.tvm-pie { margin-top: 52px; text-align: center; }

/* accesibilidad: sin chisporroteos ni destellos si se pide calma */
html.a11y-reduce-motion .tvm-nieve::before,
html.a11y-reduce-motion .tvm-tele.is-on .tvm-pantalla::after,
html.a11y-reduce-motion .tvm-tele.is-zap,
html.a11y-reduce-motion .hero-tv__carta.visible i { animation: none; }
html.a11y-reduce-motion .hero-tv__carta i { transform: scaleY(1); }

/* pantallas medianas y móvil */
@media (max-width: 860px) {
  .tvm-cabecera { align-items: flex-start; flex-direction: column; }
  .tvm-mando { flex-direction: row; align-items: center; gap: 18px; }
}
@media (max-width: 560px) {
  .tvm-muro { grid-template-columns: 1fr; gap: 26px; }
  .tvm-mando { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .hero-tv__carta { height: 46px; }
}

/* --- TV · retoques: puntitos de emisión junto a "Mediateca" --- */
.hero--tv .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero--tv .hero__eyebrow::before,
.hero--tv .hero__eyebrow::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px 2px rgba(194, 51, 57, .45);
}

/* --- TV · botón de ampliar en cada tele --- */
.tvm-ampliar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: rgba(10, 16, 20, .6);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.tvm-ampliar:hover { background: var(--red); transform: scale(1.08); }
.tvm-ampliar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* --- TV · modo cine: el reel en grande sin salir de la página --- */
body.tvm-sin-scroll { overflow: hidden; }
.tvm-cine {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tvm-cine__fondo {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 12, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.tvm-cine__marco {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 10px;
}
.tvm-cine__tele {
  position: relative;
  border-radius: 24px;
  padding: 12px;
  background: linear-gradient(180deg, #22343e 0%, #131f26 80%, #0f1a20 100%);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: tvmCineEntra .35s var(--ease) both;
}
@keyframes tvmCineEntra {
  from { transform: scale(.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* la pantalla del cine mide lo que el vídeo + la fila «Ver más en Instagram»,
   y cabe siempre: ni más ancha que la ventana ni más alta que ella */
.tvm-cine__pantalla {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  width: min(460px, calc(100vw - 190px), calc((100vh - 270px) * .74));
  width: min(460px, calc(100vw - 190px), calc((100dvh - 270px) * .74));
  padding-top: calc(125% + 46px);
}
.tvm-cine__frame {
  position: absolute;
  left: 0;
  top: -55px !important;
  width: 100%;
  height: calc(100% + 320px) !important;
  border: 0;
  background: #fff;
  opacity: 1;
}
.tvm-cine__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 6px 2px;
}
.tvm-cine__canal {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: #8fa3ab;
}
.tvm-cine__ir {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid rgba(229, 115, 121, .6);
  padding-bottom: 1px;
}
.tvm-cine__ir:hover { color: #e57379; border-color: #e57379; }
.tvm-cine__cerrar {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.tvm-cine__cerrar:hover { transform: scale(1.1); background: #d2434a; }
.tvm-cine__cerrar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tvm-cine__nav {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(16, 25, 31, .6);
  color: #fff;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.tvm-cine__nav:hover { background: var(--red); border-color: var(--red); transform: scale(1.06); }
.tvm-cine__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 700px) {
  .tvm-cine__pantalla {
    width: min(calc(100vw - 56px), calc((100vh - 290px) * .74));
    width: min(calc(100vw - 56px), calc((100dvh - 290px) * .74));
  }
  .tvm-cine__nav { position: absolute; bottom: -70px; }
  .tvm-cine__nav--prev { left: calc(50% - 72px); }
  .tvm-cine__nav--next { right: calc(50% - 72px); }
}
html.a11y-reduce-motion .tvm-cine__tele { animation: none; }

/* --- TV · reproductor nativo (vídeo autoalojado en assets/tv/) --- */
/* Si el canal tiene su mp4 en assets/tv/<código>.mp4, la tele lo reproduce
   con el reproductor del navegador: play ahí mismo, volumen y pantalla
   completa en los controles, sin pasar por Instagram. La ventana pasa a ser
   un 9:16 puro (sin la fila del embed). */
.tvm-tele.is-nativa .tvm-pantalla { padding-top: 177.78%; }
.tvm-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  opacity: 0;
  transition: opacity .5s ease .1s;
}
.tvm-tele.is-nativa .tvm-video { opacity: 1; }

/* cine nativo: ventana 9:16 y el vídeo entero (sin recortes), controles
   del navegador con su botón de pantalla completa */
.tvm-cine--nativa .tvm-cine__pantalla {
  width: min(440px, calc(100vw - 190px), calc((100vh - 230px) * .5625));
  width: min(440px, calc(100vw - 190px), calc((100dvh - 230px) * .5625));
  padding-top: 177.78%;
}
.tvm-cine__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  opacity: 1;
}
@media (max-width: 700px) {
  .tvm-cine--nativa .tvm-cine__pantalla {
    width: min(calc(100vw - 56px), calc((100vh - 250px) * .5625));
    width: min(calc(100vw - 56px), calc((100dvh - 250px) * .5625));
  }
}