/* ============================================================
   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 de igual peso (logo | enlaces | acciones): las columnas
   laterales crecen por igual, así los enlaces quedan centrados respecto
   a la página aunque la derecha tenga más elementos. */
.nav__logo { flex: 1 1 0; min-width: 0; pointer-events: none; }
.nav__logo img { height: 28px; width: auto; pointer-events: auto; }

.nav__links {
  display: flex;
  gap: 26px;
  flex: 0 1 auto;
  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: 1 1 0; min-width: 0; }

.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); }

.nav__mobile {
  display: none;
  flex-direction: column;
  padding: 12px 24px 24px;
  gap: 16px;
  border-top: 1px solid rgba(15, 28, 34, .06);
}

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

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

.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);
}

.hero__visual img { width: 100%; }

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

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

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

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

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

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

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

/* El diagrama de la línea bajo el título: la línea roja con sus cuatro
   paradas (M·A·P·A) y un tren que las recorre parándose en cada una */
.hero--mapa .hero-mapa__linea {
  position: relative;
  width: min(560px, 82vw);
  height: 20px;
  margin: 30px auto 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero--mapa .hero-mapa__linea::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 99px;
  background: var(--red);
  box-shadow: 0 8px 22px rgba(194, 51, 57, .32);
}

.hero--mapa .hero-mapa__parada {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--white);
  border: 3.5px solid var(--red);
  box-shadow: 0 2px 6px rgba(15, 28, 34, .18);
}

/* El tren: una pastilla de tinta que viaja de parada en parada y vuelve */
.hero--mapa .hero-mapa__tren {
  position: absolute;
  top: 50%;
  left: 0;
  width: 26px;
  height: 11px;
  border-radius: 99px;
  background: var(--ink);
  transform: translateY(-50%);
  box-shadow: 0 4px 10px rgba(15, 28, 34, .35);
  animation: mapa-tren 11s ease-in-out 1.2s infinite;
}

@keyframes mapa-tren {
  0%   { left: 0; }
  13%  { left: calc((100% - 26px) / 3); }
  22%  { left: calc((100% - 26px) / 3); }
  35%  { left: calc((100% - 26px) * 2 / 3); }
  44%  { left: calc((100% - 26px) * 2 / 3); }
  57%  { left: calc(100% - 26px); }
  72%  { left: calc(100% - 26px); }
  100% { left: 0; }
}

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

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

.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); }

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

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

/* ---------- 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__linea { width: min(88vw, 420px); margin-top: 24px; }
  .hero--prensa .hero-prensa__pleca-precio { display: none; }
}

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

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

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

/* 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 y parpadean dos veces */
.trio-card.is-anim .trio-anim__ojo { animation-name: trio-ojo; }

@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: scale(0); opacity: 0; }
  44%       { transform: scale(1.4); opacity: 1; }
  48%       { transform: scale(1); }
  58%       { transform: scaleY(1); }
  60%       { transform: scaleY(.1); }
  62%       { transform: scaleY(1); }
  76%       { transform: scaleY(1); }
  78%       { transform: scaleY(.1); }
  80%       { transform: scaleY(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.
   Cada publicación es una portada de libro con el lenguaje del libro destacado
   de la home (tinta de marca, lomo rojo y canto de páginas), en pequeño y sobre
   una balda clara. Al pulsar, el libro se eleva y debajo se abre una ficha
   editorial "libro abierto" con los colores de la web. Todo es editable desde
   editor.html. La coreografía vive en initEstanteriaPublicaciones. ===== */
.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;
}

/* ---------- balda de portadas ---------- */
.biblioteca-stage { position: relative; }
.biblioteca-shelf { position: relative; }

.biblioteca-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(40px, 5vw, 66px) 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;
  transform: translateY(26px);
  transition: transform .55s var(--ease), opacity .5s var(--ease);
}
.biblioteca-shelf.is-shelved .biblio-book {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 65ms);
}
.biblio-book:focus { outline: none; }
.biblio-book:focus-visible { outline: 2px solid var(--red); outline-offset: 7px; border-radius: 8px; }

.biblio-book__obj {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.2;
  transform: perspective(900px) rotateY(-13deg) rotateZ(var(--tilt, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), filter .5s var(--ease);
  filter: drop-shadow(0 16px 24px rgba(15, 28, 34, .22));
}
@media (hover: hover) {
  .biblio-book:hover .biblio-book__obj {
    transform: perspective(900px) rotateY(-5deg) rotateZ(0deg) translateY(-8px) scale(1.04);
    filter: drop-shadow(0 26px 34px rgba(15, 28, 34, .3));
  }
}
.biblio-book:focus-visible .biblio-book__obj {
  transform: perspective(900px) rotateY(-5deg) rotateZ(0deg) translateY(-8px) scale(1.04);
}
.biblio-book.is-open .biblio-book__obj {
  transform: perspective(900px) rotateY(0deg) rotateZ(0deg) translateY(-10px) scale(1.06);
  filter: drop-shadow(0 30px 42px rgba(194, 51, 57, .3));
}

/* 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: var(--white);
  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 */
.biblio-book__caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  width: 100%;
  margin-top: clamp(13px, 1.6vw, 18px);
  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: var(--red);
}
.biblio-book__capTitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.22;
  color: var(--ink);
  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: var(--red); }

/* ---------- ficha "libro abierto" (colores de marca) ---------- */
.biblioteca-reader {
  position: relative;
  margin-top: clamp(22px, 3.4vw, 38px);
}
.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; }

.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); }
.biblio-card__page--left { background: var(--gray-bg); }

.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: var(--white);
}
.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: var(--white);
}
.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-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 150px));
    justify-content: center;
    gap: clamp(34px, 8vw, 48px) clamp(18px, 5vw, 30px);
    padding: 0;
  }
  .biblio-card { grid-template-columns: 1fr; max-width: 460px; }
  .biblio-card__page--left { display: flex; gap: 18px; align-items: flex-start; }
  .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, .biblio-book__obj, .biblio-card { transition: none !important; }
  .biblio-book { opacity: 1; transform: none; }
  .biblio-book__obj { transform: perspective(900px) rotateY(-10deg) rotateZ(var(--tilt, 0deg)); }
}
/* ===== 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 consola"
   La biblioteca se presenta como un editor de código / terminal: una
   ventana oscura sobre una sección clara, con barra de título, paleta de
   búsqueda, un explorador de módulos (las categorías) a la izquierda y los
   prompts como fragmentos de código a la derecha. Los [campos editables]
   se resaltan como variables. El marcado conserva los mismos data-hooks de
   antes (data-prompt-library / -search / -filter / -category / -card /
   -text / -expand / -tag / -count y .prompt-pagination / .prompt-page /
   .prompt-card__copy / .prompt-card--open / .prompts-empty), de modo que
   el buscador, los filtros, la paginación y el copiado siguen igual.
   ===================================================================== */

.prompt-console-section {
  padding-block: clamp(40px, 7vw, 96px);
  background:
    radial-gradient(120% 120% at 50% -10%, #ffffff 0%, #f3f4f6 60%, #ebedf0 100%);
}

/* ---- Encabezado claro que introduce la consola ---- */
.prompt-console__intro {
  max-width: 760px;
  margin: 0 auto clamp(30px, 4vw, 52px);
  text-align: center;
}

.prompt-console__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--red);
}

.prompt-console__eyebrow::before {
  content: "</>";
  font-size: .82rem;
  letter-spacing: 0;
  opacity: .8;
}

.prompt-console__title {
  margin-bottom: 18px;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.prompt-console__lead {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 1.16rem;
  line-height: 1.62;
  text-wrap: pretty;
}

/* =====================================================================
   La ventana de la consola
   ===================================================================== */
.prompt-console {
  --cw-bg: #0b1217;
  --cw-chrome: #0e161c;
  --cw-status: #090f13;
  --cw-panel: #0a1015;
  --cw-snippet: #0f1a21;
  --cw-snippet-hover: #132129;
  --cw-line: rgba(146, 178, 190, .14);
  --cw-line-soft: rgba(146, 178, 190, .08);
  --cw-text: #e9eff2;
  --cw-code: #c9d6dc;
  --cw-dim: #93a6ae;
  --cw-faint: #5e727b;
  --cw-accent: #ff5d63;
  --cw-accent-bri: #ff8488;
  --cw-accent-soft: rgba(255, 93, 99, .13);

  position: relative;
  isolation: isolate;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 22px;
  background: var(--cw-bg);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 40px 90px -30px rgba(8, 14, 18, .8),
    0 18px 50px -28px rgba(8, 14, 18, .9);
  color: var(--cw-text);
  overflow: hidden;
}

/* Trama tenue de "pantalla" sobre el cuerpo de la ventana */
.prompt-console::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(255, 93, 99, .08), transparent 70%),
    linear-gradient(var(--cw-line-soft) 1px, transparent 1px) 0 0 / 100% 30px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}

.prompt-console > * { position: relative; z-index: 1; }

/* ---- Barra de título (chrome) ---- */
.console__chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: linear-gradient(180deg, #11191f, var(--cw-chrome));
  border-bottom: 1px solid var(--cw-line);
}

.console__dots { display: inline-flex; gap: 8px; }
.console__dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.console__dots i:first-child { background: var(--cw-accent); }
.console__dots i:nth-child(2) { background: rgba(255, 196, 84, .55); }
.console__dots i:nth-child(3) { background: rgba(96, 209, 132, .5); }

.console__name {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cw-dim);
}

.console__meta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--cw-faint);
  white-space: nowrap;
}
.console__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #60d184;
  box-shadow: 0 0 0 0 rgba(96, 209, 132, .6);
  animation: consolePulse 2.4s var(--ease) infinite;
}
@keyframes consolePulse {
  0% { box-shadow: 0 0 0 0 rgba(96, 209, 132, .5); }
  70% { box-shadow: 0 0 0 7px rgba(96, 209, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(96, 209, 132, 0); }
}

/* ---- Paleta de búsqueda (command bar) ---- */
.console__cmd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .015);
  border-bottom: 1px solid var(--cw-line);
}

.console__cmd-glyph {
  display: grid;
  place-items: center;
  color: var(--cw-accent);
  flex: none;
}
.console__cmd-glyph svg { width: 19px; height: 19px; }

.console__cmd input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--cw-text);
  font-family: var(--font-mono);
  font-size: .98rem;
  letter-spacing: .01em;
  padding: 6px 2px;
  caret-color: var(--cw-accent);
}
.console__cmd input[type="search"]::placeholder { color: var(--cw-faint); }
.console__cmd input[type="search"]:focus { outline: none; }
.console__cmd input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Etiqueta activa (aparece al pulsar un #tag) */
.prompt-active-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border: 1px solid rgba(255, 93, 99, .35);
  border-radius: 999px;
  background: var(--cw-accent-soft);
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--cw-text);
}
.prompt-active-tag__text strong { color: var(--cw-accent-bri); font-weight: 700; }
.prompt-active-tag button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--cw-text);
  cursor: pointer;
  font-size: .72rem;
  line-height: 1;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.prompt-active-tag button:hover { background: var(--cw-accent); color: #fff; }

/* ---- Cuerpo: explorador + editor ---- */
.console__main {
  display: grid;
  grid-template-columns: 248px 1fr;
  align-items: start;
}

/* Explorador (las categorías como árbol de archivos) */
.console__explorer {
  position: sticky;
  top: 86px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  background: var(--cw-panel);
  border-right: 1px solid var(--cw-line);
}

.console__explorer-label {
  padding: 4px 10px 8px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cw-faint);
}

.console__tree { display: flex; flex-direction: column; gap: 2px; }

.console__file {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--cw-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .86rem;
  text-align: left;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.console__file-glyph {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--cw-faint);
  flex: none;
  transition: color .2s var(--ease);
}
.console__file-glyph svg { width: 17px; height: 17px; }
.console__file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console__file-slash { color: var(--cw-faint); }
.console__file-count {
  flex: none;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--cw-faint);
  font-size: .72rem;
  text-align: center;
}

.console__file:hover {
  background: rgba(255, 255, 255, .04);
  color: var(--cw-text);
}
.console__file:hover .console__file-glyph { color: var(--cw-dim); }

.console__file.active {
  background: linear-gradient(90deg, var(--cw-accent-soft), rgba(255, 93, 99, .02));
  border-left-color: var(--cw-accent);
  color: #fff;
}
.console__file.active .console__file-glyph { color: var(--cw-accent); }
.console__file.active .console__file-slash { color: var(--cw-accent-bri); }
.console__file.active .console__file-count {
  background: rgba(255, 93, 99, .22);
  color: #ffd9da;
}

.console__explorer-foot {
  margin-top: 12px;
  padding: 12px 10px 4px;
  border-top: 1px solid var(--cw-line-soft);
  font-size: .76rem;
  line-height: 1.55;
  color: var(--cw-faint);
}
.console__explorer-foot .tok-var { font-family: var(--font-mono); font-size: .72rem; }

/* ---- Editor (la lista de prompts) ---- */
.console__editor {
  min-width: 0;
  padding: clamp(16px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.prompt-categories {
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.prompt-module { scroll-margin-top: 96px; }

.prompt-module__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px dashed var(--cw-line);
}

.prompt-module__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cw-accent-soft);
  border: 1px solid rgba(255, 93, 99, .25);
  color: var(--cw-accent);
}
.prompt-module__icon svg { width: 24px; height: 24px; }

.prompt-module__heading { min-width: 0; }
.prompt-module__eyebrow {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--cw-faint);
}
.prompt-module__title {
  margin-top: 4px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.prompt-module__desc {
  margin-top: 8px;
  max-width: 64ch;
  color: var(--cw-dim);
  font-size: .98rem;
  line-height: 1.55;
}
.prompt-category__count {
  justify-self: end;
  align-self: center;
  padding: 6px 12px;
  border: 1px solid var(--cw-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--cw-dim);
  white-space: nowrap;
}

.prompt-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

/* ---- El fragmento de prompt (la "tarjeta") ---- */
.prompt-snippet {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--cw-snippet), #0d171d);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prompt-snippet:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 93, 99, .4);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
}

.prompt-snippet__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  background: rgba(255, 255, 255, .025);
  border-bottom: 1px solid var(--cw-line-soft);
}
.prompt-snippet__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.prompt-snippet__tab-icon {
  display: grid;
  place-items: center;
  color: var(--cw-faint);
  flex: none;
}
.prompt-snippet__tab-icon svg { width: 15px; height: 15px; }
.prompt-snippet__path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--cw-faint);
}
.prompt-snippet__ext { color: var(--cw-accent); opacity: .85; }

/* Botón copiar (el handler reescribe su textContent → glifo en ::before) */
.prompt-card__copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  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-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");
}
.prompt-card__copy:hover {
  background: var(--cw-accent);
  border-color: var(--cw-accent);
  color: #fff;
  transform: translateY(-1px);
}

.prompt-snippet__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 18px;
  flex: 1;
}

.prompt-snippet__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cw-accent);
}
.prompt-snippet__title {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #fff;
}

/* El cuerpo del prompt, en monoespaciada y recortado a unas líneas */
.prompt-snippet__code {
  position: relative;
  margin: 2px 0;
  padding-left: 14px;
  border-left: 2px solid var(--cw-line);
  color: var(--cw-code);
  font-family: var(--font-mono);
  font-size: .85rem;
  line-height: 1.72;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
.prompt-card--open .prompt-snippet__code {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
/* Degradado de "hay más" solo cuando el texto está realmente recortado */
.prompt-snippet:has(.prompt-snippet__more:not([hidden])):not(.prompt-card--open) .prompt-snippet__code::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.6em;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #0e1820 92%);
}

/* La variable resaltada: el corazón del concepto */
.tok-var {
  color: var(--cw-accent-bri);
  background: var(--cw-accent-soft);
  padding: 0 3px;
  border-radius: 4px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.prompt-snippet__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--cw-accent-bri);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  transition: color .2s var(--ease), gap .2s var(--ease);
}
.prompt-snippet__more::before {
  content: "›";
  font-size: 1.1em;
  line-height: 1;
  transition: transform .25s var(--ease);
}
.prompt-card--open .prompt-snippet__more::before { transform: rotate(90deg); }
.prompt-snippet__more:hover { color: #fff; gap: 9px; }

.prompt-snippet__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.prompt-snippet__tag {
  border: 1px solid var(--cw-line-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  color: var(--cw-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: 3px 8px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.prompt-snippet__tag:hover {
  color: var(--cw-text);
  border-color: var(--cw-line);
}
.prompt-snippet__tag.active {
  background: var(--cw-accent-soft);
  border-color: rgba(255, 93, 99, .4);
  color: var(--cw-accent-bri);
}

/* ---- Paginación (hooks JS: .prompt-pagination / .prompt-page) ---- */
.prompt-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--cw-line);
}
.prompt-page {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  color: var(--cw-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.prompt-page--nav { font-size: 1rem; }
.prompt-page:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--cw-text);
  border-color: var(--cw-line);
}
.prompt-page.active {
  background: var(--cw-accent);
  border-color: var(--cw-accent);
  color: #fff;
}
.prompt-page:disabled { opacity: .3; cursor: default; pointer-events: none; }
.prompt-page__gap {
  display: grid;
  place-items: center;
  min-width: 18px;
  color: var(--cw-faint);
  font-family: var(--font-mono);
}

/* ---- Estado vacío ---- */
.prompts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 6px auto 10px;
  padding: 44px 24px;
  text-align: center;
  color: var(--cw-dim);
}
.prompts-empty__glyph {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  color: var(--cw-accent);
  letter-spacing: .1em;
}
.prompts-empty p { font-size: 1.02rem; line-height: 1.5; }
.prompts-empty p span { color: var(--cw-faint); font-size: .92rem; }

/* ---- Barra de estado inferior ---- */
.console__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 16px;
  background: var(--cw-status);
  border-top: 1px solid var(--cw-line);
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--cw-faint);
}
.console__status-left { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.console__branch { display: inline-flex; align-items: center; gap: 5px; color: var(--cw-accent); }
.console__branch svg { width: 13px; height: 13px; }
.console__count { color: var(--cw-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console__status-right { white-space: nowrap; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 920px) {
  .console__main { grid-template-columns: 1fr; }

  /* El explorador pasa a ser una barra de pestañas horizontal y pegajosa */
  .console__explorer {
    position: sticky;
    top: 64px;
    z-index: 5;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--cw-line);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .console__explorer-label,
  .console__explorer-foot { display: none; }
  .console__tree { flex-direction: row; gap: 6px; }
  .console__file {
    width: auto;
    flex: none;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    white-space: nowrap;
  }
  .console__file-name { overflow: visible; }
  .console__file.active {
    border-left: 0;
    border-bottom-color: transparent;
    background: var(--cw-accent);
    color: #fff;
  }
  .console__file.active .console__file-glyph,
  .console__file.active .console__file-slash { color: #fff; }
  .console__file.active .console__file-count { background: rgba(0, 0, 0, .22); color: #fff; }
}

@media (max-width: 600px) {
  .prompt-console { border-radius: 16px; }
  .console__meta { display: none; }
  .console__main,
  .console__editor { padding-inline: 0; }
  .console__editor { padding: 14px 12px 18px; gap: 24px; }
  .prompt-list { grid-template-columns: 1fr; }
  .prompt-module__head { grid-template-columns: auto 1fr; }
  .prompt-category__count { display: none; }
  .console__status-right { display: none; }
  .prompt-console__lead { font-size: 1.04rem; }
}

@media (prefers-reduced-motion: reduce) {
  .console__live { animation: none; }
  .prompt-snippet { transition: none; }
}

/* ---- 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-mapa__tren,
  .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; }
  .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 ---------- */

.linea-vida {
  position: relative;
  background:
    radial-gradient(130% 100% at 100% 0%, #fbfcfd 0%, var(--white) 46%),
    var(--white);
  /* overflow-x: clip contiene el abanico de fotos y los anos gigantes sin crear
     un contenedor de scroll que rompa el position: sticky del rail de anos. */
  overflow-x: clip;
}

/* Aurora ambiental: dos focos suaves rojos 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, .08), transparent 70%),
    radial-gradient(40% 46% at 92% 78%, rgba(194, 51, 57, .07), transparent 72%);
  opacity: .9;
}

.linea-vida .section__inner { position: relative; z-index: 1; }

.linea-vida__head {
  max-width: 860px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

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

.linea-vida__board {
  display: grid;
  grid-template-columns: minmax(168px, 232px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* ----- Rail de anos con espina luminosa ----- */
.linea-vida__rail {
  position: sticky;
  top: 96px;
  display: grid;
  gap: clamp(16px, 1.6vw, 26px);
  padding: 18px 0 18px 0;
}

.linea-vida__spine {
  position: absolute;
  left: 13px;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(15, 28, 34, .04), rgba(15, 28, 34, .14) 12%,
                    rgba(15, 28, 34, .14) 88%, rgba(15, 28, 34, .04));
  overflow: visible;
}

.linea-vida__spine-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 14px rgba(194, 51, 57, .55), 0 0 4px rgba(194, 51, 57, .8);
  transition: height .12s linear;
}

.linea-vida__year {
  position: relative;
  z-index: 1;
  min-height: 46px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  display: grid;
  gap: 3px;
  padding: 2px 0 2px 42px;
  font-family: var(--font-display);
  transition: transform .35s var(--ease);
}

.linea-vida__dot {
  position: absolute;
  left: 6px;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid rgba(15, 28, 34, .22);
  transition: border-color .3s var(--ease), background .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}

.linea-vida__year-label {
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.05;
  letter-spacing: -.01em;
  transition: color .3s var(--ease), transform .3s var(--ease);
  transform-origin: left center;
}

.linea-vida__year small {
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-soft);
  opacity: .85;
}

/* Anos ya recorridos: nodo relleno, texto en tinta. */
.linea-vida__year.is-past { color: var(--ink); }
.linea-vida__year.is-past .linea-vida__dot {
  background: var(--red);
  border-color: var(--red);
}

.linea-vida__year:hover { color: var(--ink); }
.linea-vida__year:hover .linea-vida__dot { border-color: var(--red); transform: scale(1.1); }

.linea-vida__year.is-active { color: var(--ink); }
.linea-vida__year.is-active .linea-vida__year-label {
  color: var(--red);
  transform: scale(1.12);
}

.linea-vida__year.is-active .linea-vida__dot {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(194, 51, 57, .14), 0 0 18px rgba(194, 51, 57, .5);
}

/* ----- Hitos ----- */
.linea-vida__items {
  display: grid;
  gap: clamp(30px, 4vw, 48px);
}

.linea-vida__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  background: linear-gradient(180deg, #fbfbfc, var(--gray-bg));
  border: 1px solid rgba(15, 28, 34, .08);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 46px);
  overflow: hidden;
  isolation: isolate;
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

/* Cinta de acento que aparece a la izquierda del hito activo. */
.linea-vida__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #e84a50, var(--red));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--ease);
}

/* Glow superior sutil que envuelve el hito activo. */
.linea-vida__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(80% 120% at 0% 0%, rgba(194, 51, 57, .07), transparent 60%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}

/* Ano gigante fantasma de fondo: toque editorial. */
.linea-vida__ghost {
  position: absolute;
  right: clamp(-12px, 1vw, 18px);
  bottom: clamp(-26px, -2vw, -10px);
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(7rem, 18vw, 16rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: rgba(15, 28, 34, .035);
  pointer-events: none;
  user-select: none;
  transition: color .5s var(--ease), transform .6s var(--ease);
}

.linea-vida__count {
  position: absolute;
  top: clamp(18px, 2.4vw, 28px);
  right: clamp(20px, 2.6vw, 32px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
  opacity: .55;
  transition: color .4s var(--ease), opacity .4s var(--ease);
}

.linea-vida__count i { font-style: normal; margin: 0 3px; opacity: .55; }

.linea-vida__item.visible {
  opacity: .55;
  transform: scale(.97) translateY(6px);
}

.linea-vida__item.visible.is-active {
  opacity: 1;
  transform: none;
  background: var(--white);
  border-color: rgba(194, 51, 57, .22);
  box-shadow: 0 28px 70px rgba(15, 28, 34, .14), 0 2px 0 rgba(255, 255, 255, .6) inset;
}

.linea-vida__item.is-active::before { transform: scaleY(1); }
.linea-vida__item.is-active::after { opacity: 1; }
.linea-vida__item.is-active .linea-vida__ghost { color: rgba(194, 51, 57, .07); }
.linea-vida__item.is-active .linea-vida__count { color: var(--red); opacity: 1; }

.linea-vida__visual {
  min-height: 250px;
  display: grid;
  place-items: center;
}

/* La pila reutiliza el mecanismo tactil de .pila__stack / .pila__card
   (initPilas en app.js): al tocar, la foto de arriba pasa al fondo. Aqui
   solo se ajusta el tamano del marco y el aspecto de las fotos del hito. */
.linea-vida__stack.pila__stack {
  width: min(100%, 330px);
  aspect-ratio: 4 / 3;
  transition: transform .5s var(--ease);
}

.linea-vida__item.is-active .linea-vida__stack.pila__stack {
  transform: rotate(-1.5deg);
}

.linea-vida__photo.pila__card {
  border-radius: 22px;
  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: 18px;
}

.linea-vida__photo.pila__card .ph {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 18px;
}

.linea-vida__hint,
.linea-vida__caption { color: var(--ink-soft); }

.linea-vida__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.linea-vida__date {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 5.4rem);
  line-height: .9;
  margin-bottom: 16px;
  overflow: hidden;
}

.linea-vida__date span {
  display: inline-block;
  background: linear-gradient(120deg, #e84a50, var(--red) 55%, #9e272d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}

.linea-vida__item.is-active .linea-vida__date span {
  transform: translateY(0);
  opacity: 1;
}

.linea-vida__eyebrow {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.linea-vida__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .6;
}

.linea-vida__copy h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.55rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.linea-vida__meta {
  margin-top: 12px;
  color: var(--ink);
  font-size: .98rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15, 28, 34, .05);
}

.linea-vida__item.is-active .linea-vida__meta {
  background: rgba(194, 51, 57, .09);
  color: var(--red);
}

.linea-vida__copy > p:not(.linea-vida__date):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: 58ch;
}

.linea-vida__copy strong {
  color: var(--ink);
  font-weight: 600;
}

.linea-vida__cta { margin-top: 26px; }

@media (prefers-reduced-motion: reduce) {
  .linea-vida__spine-fill,
  .linea-vida__dot,
  .linea-vida__item,
  .linea-vida__date span,
  .linea-vida__stack.pila__stack,
  .linea-vida__photo { transition: none; }
  .linea-vida__date span { transform: none; opacity: 1; }
}

/* ---------- 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; }
  .linea-vida__board { grid-template-columns: 1fr; }
  .evidencias__board { grid-template-columns: 1fr; }
  .evidencias__visual { order: -1; }
  .linea-vida__rail {
    position: relative;
    top: auto;
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 4px 2px 14px;
    scrollbar-width: thin;
  }
  .linea-vida__spine { display: none; }
  .linea-vida__year {
    flex: 0 0 auto;
    min-width: 132px;
    min-height: 0;
    border: 1px solid rgba(15, 28, 34, .12);
    border-radius: 16px;
    background: var(--white);
    padding: 12px 14px 12px 38px;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
  }
  .linea-vida__dot { left: 14px; top: 50%; margin-top: -8px; }
  .linea-vida__year.is-active {
    border-color: rgba(194, 51, 57, .4);
    box-shadow: 0 12px 30px rgba(194, 51, 57, .14);
    transform: translateY(-2px);
  }
  .linea-vida__year.is-active .linea-vida__year-label { transform: none; }
  .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__item { grid-template-columns: 1fr; }
  .linea-vida__visual {
    min-height: 220px;
    order: -1;
  }
  .linea-vida__stack.pila__stack { width: min(100%, 360px); }
  .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__items { gap: 24px; }
  .linea-vida__item { border-radius: 24px; padding: 26px 22px; }
  .linea-vida__ghost { font-size: clamp(5.5rem, 34vw, 9rem); bottom: -16px; right: -6px; }
  .linea-vida__count { top: 16px; right: 18px; font-size: .74rem; }
  .linea-vida__visual { min-height: 190px; }
  .linea-vida__photo { border-radius: 18px; }
  .linea-vida__copy h3 { font-size: 1.55rem; }
  .linea-vida__copy > p:not(.linea-vida__date):not(.linea-vida__eyebrow):not(.linea-vida__meta) { font-size: 1rem; }
  .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);
}

.blog-meta {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

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

/* ---------- filtro por etiquetas ---------- */

.blog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 38px;
}

.blog-filter__btn {
  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);
}

.blog-filter__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.blog-filter__btn.active {
  background: var(--ink);
  color: #fff;
}

.blog-filter__count {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-soft);
}

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

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

.blog-read__body a {
  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: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; }

.blog-read__nav {
  max-width: 920px;
  margin: clamp(48px, 7vw, 80px) 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;
  max-width: 480px;
  margin-top: 10px;
  padding: 4px 8px 4px 18px;
  background: var(--gray-card);
  border-radius: 999px;
  transition: box-shadow .3s var(--ease);
}

.blog-buscar:focus-within { box-shadow: 0 0 0 2px var(--red); }

.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: 10px 10px 10px 0;
  outline: none;
}

.blog-more-wrap { display: flex; justify-content: center; margin-top: 36px; }

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

/* ---------- 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%;
  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: 16px;
  margin-top: 14px;
}

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

.blog-sus .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--ink);
}

.blog-sus .btn:hover { background: var(--red); color: #fff; }

.blog-sus .blog-sus__rss {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}

.blog-sus .blog-sus__rss:hover { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }

.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; }
  .blog-filter { gap: 8px; }
  .blog-filter__count { width: 100%; margin-left: 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 garabato: dos pasadas de subrayado a mano que se dibujan solas */
.blog-mast__garabato {
  width: clamp(210px, 34vw, 360px);
  margin: 0 auto;
}

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

.blog-mast__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;
}

.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%; }

/* filtros como pegatinas: se ladean un poco al pasar */
.blog-section--masthead .blog-filter__btn { box-shadow: 0 2px 0 rgba(15, 28, 34, .08); }

.blog-section--masthead .blog-filter__btn:nth-child(odd):not(.active):hover { transform: translateY(-2px) rotate(-1.6deg); }

.blog-section--masthead .blog-filter__btn: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-mast__garabato path { animation: none; stroke-dashoffset: 0; }
  .blog-section--masthead .blog-card__tilt { rotate: 0deg; }
}

@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). Al pulsarlo
   se abre su ficha completa en una ventana sobre la página.
   ============================================================ */

.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;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  align-items: start;
  margin-top: 30px;
  /* aire para que las rotaciones y la cinta no se recorten */
  padding-top: 16px;
}

.muro-empty {
  margin-top: 26px;
  font-size: .95rem;
  color: var(--ink-soft);
}

/* ---------- recorte ---------- */

.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));
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.recorte:hover,
.recorte:focus-visible {
  transform: rotate(0deg) translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-hover);
  z-index: 1;
}

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

/* foto principal del recorte: una de las fotos de la ficha ampliada, en
   grande, como la imagen de portada de un periódico (recorte 3:2 uniforme) */
.recorte__img {
  position: relative;
  margin: 18px -12px 2px;
  border: 1px solid rgba(15, 28, 34, .12);
  background: var(--white);
  padding: 7px;
  box-shadow: 0 6px 16px rgba(15, 28, 34, .1);
}

.recorte__img-foto {
  display: block;
  overflow: hidden;
  background: #ece9e0;
}

.recorte__img-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .55s var(--ease);
}

.recorte:hover .recorte__img-foto img,
.recorte:focus-visible .recorte__img-foto img { transform: scale(1.06); }

/* distintivo sobre la foto: cuántas fotos esconde la pila de la ficha */
.recorte__pila-badge {
  position: absolute;
  right: 13px;
  bottom: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--white);
  background: rgba(15, 28, 34, .82);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 28, 34, .28);
}

.recorte__pila-badge svg { width: 13px; height: 13px; }

.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 10px;
}

.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-bottom: 14px;
}

.recorte__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  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;
}

.recorte__etiquetas {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* indicador de cuántas fotos esconde la pila de la ficha */
.recorte__fotos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.recorte__fotos svg { width: 14px; height: 14px; }

.recorte__abrir {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  color: var(--red);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.recorte:hover .recorte__abrir,
.recorte:focus-visible .recorte__abrir { opacity: 1; transform: none; }

/* en táctil no hay hover: la pista de apertura se ve siempre */
@media (hover: none) {
  .recorte__abrir { opacity: .8; transform: none; }
}

/* ---------- ventana del recorte ---------- */

body.modal-abierto { overflow: hidden; }

.recorte-modal {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.recorte-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 34, .55);
  opacity: 0;
  transition: opacity .28s var(--ease);
}

.recorte-modal__dialog {
  position: relative;
  width: min(980px, 100%);
  max-height: min(86vh, 860px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  opacity: 0;
  transform: translateY(26px) scale(.97);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  outline: none;
}

/* El desenfoque del fondo solo vive mientras la ventana está abierta. Al
   cerrar se retira en el acto (junto con la clase .show), de modo que Chrome
   repinta la página sin dejar "fantasmas" de composición: antes quedaban dos
   recortes pegados al pie del muro que, además, abrían la ficha al pulsarlos. */
.recorte-modal.show .recorte-modal__backdrop {
  opacity: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.recorte-modal.show .recorte-modal__dialog { opacity: 1; transform: none; }

.recorte-modal__close {
  position: sticky;
  top: 14px;
  float: right;
  margin: 14px 14px 0 0;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease);
}

.recorte-modal__close:hover { transform: rotate(90deg); background: var(--red); }

.recorte-modal__close svg { width: 18px; height: 18px; }

/* ---------- ficha del recorte ---------- */

.recorte-ficha {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(24px, 4vw, 48px);
}

.recorte-ficha__media { align-self: start; }

.recorte-ficha__img {
  background: #fdfcf7;
  border: 1px solid rgba(15, 28, 34, .1);
  padding: 10px;
  box-shadow: var(--shadow);
  transform: rotate(-1.2deg);
}

.recorte-ficha__img img { width: 100%; }

.recorte-ficha__img figcaption {
  font-size: .8rem;
  color: var(--ink-soft);
  padding: 10px 4px 2px;
}

.recorte-ficha__ph .ph { aspect-ratio: 4 / 3; border-radius: var(--radius); }

/* pila de fotos dentro de la ficha (hasta 7, mecánica de initPilas):
   un poco de aire alrededor para que las cartas del fondo asomen sin
   tocar los bordes de la ventana. */
.recorte-ficha__pila { padding: 12px 18px 0; }

.recorte-ficha__pila .pila__stack { width: min(100%, 380px); margin: 0 auto; }

.recorte-ficha__pila .pila__card img {
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15, 28, 34, .22);
}

.recorte-ficha__pila .pila__caption {
  text-align: center;
  margin-top: 16px;
}

.recorte-ficha__pila .pila__hint { margin-top: 12px; }

.recorte-ficha__embed iframe,
.recorte-ficha__embed video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 18px;
  display: block;
}

.recorte-ficha__embed .video__facade {
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 20px;
}

.recorte-ficha__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.recorte-ficha__medio {
  font-family: var(--font-prensa, Georgia, serif);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.recorte-ficha__titulo {
  font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

.recorte-ficha__cita {
  font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
  border-left: 3px solid var(--red);
  padding-left: 16px;
  margin-bottom: 18px;
}

.recorte-ficha__texto {
  font-size: .98rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.recorte-ficha__cta { margin-top: 26px; }

/* botón hacia la pieza original: cápsula de tinta con icono de
   periódico y flecha que apunta afuera; en hover pasa al rojo de marca
   y la flecha se escapa en diagonal. */
.recorte-ficha__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--white);
  background: var(--ink);
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 26px;
  box-shadow: var(--shadow);
  transition: background .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}

.recorte-ficha__link:hover {
  background: var(--red);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.recorte-ficha__link svg { width: 17px; height: 17px; flex: none; }

.recorte-ficha__link-flecha { transition: transform .3s var(--ease); }

.recorte-ficha__link:hover .recorte-ficha__link-flecha { transform: translate(2px, -2px); }

/* ---------- navegación dentro de la ventana ---------- */

.recorte-modal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px 24px;
}

.recorte-modal__flecha {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  border: 1px solid rgba(15, 28, 34, .15);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.recorte-modal__flecha:hover:not(:disabled) {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-2px);
}

.recorte-modal__flecha:disabled { opacity: .3; cursor: default; }

.recorte-modal__contador {
  min-width: 56px;
  text-align: center;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 840px) {
  .recorte-ficha { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .recorte-modal { padding: 12px; }
  .recorte-modal__dialog { max-height: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
  .recorte,
  .recorte__abrir,
  .recorte-modal__backdrop,
  .recorte-modal__dialog,
  .recorte-modal__close,
  .recorte-modal__flecha { transition: none; }
  .recorte { transform: none; }
}

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

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

/* ============================================================
   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); }
.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;
}
.glosario-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 28px 26px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--gray-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.glosario-card:hover {
  transform: translateY(-5px);
  border-color: rgba(194, 51, 57, .22);
  box-shadow: 0 26px 60px rgba(15, 28, 34, .12);
}
/* 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, var(--red), #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: var(--ink);
  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: var(--red); }
.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: var(--ink);
}
.glosario-card__sigla {
  flex: none;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(194, 51, 57, .1);
  color: var(--red);
  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: #3a3a3d;
  position: relative;
  z-index: 1;
}
.glosario-card__def strong { color: var(--ink); 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 var(--gray-card);
  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: var(--ink-soft);
}
.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: var(--gray-bg);
  border: 1px solid var(--gray-card);
  color: var(--ink);
  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: var(--red);
  font-weight: 700;
}
.glosario-card__related-link:hover {
  background: rgba(194, 51, 57, .1);
  border-color: rgba(194, 51, 57, .35);
  color: var(--red);
  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: var(--red); }
  100% { box-shadow: 0 0 0 14px rgba(194, 51, 57, 0); border-color: var(--gray-card); }
}
@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, cartuchos que se insertan y mando NES.
   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,
   cuerpo legible de la pantalla de pausa).
   ============================================================ */
.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.72fr) minmax(300px, 1fr);
  gap: 40px;
  align-items: start;
}

/* --- televisor --- */
.nesx__tv {
  background: linear-gradient(180deg, #2b2b33, #222228);
  border-radius: 30px;
  padding: 20px 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);
}
.nesx__hud-vidas { display: flex; align-items: center; gap: 6px; color: #ff6b70; }
.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; }
.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;
}
/* 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 --- */
.nesx__capturas {
  position: absolute; z-index: 3;
  left: 7%; top: 17%;
  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;
}
.nesx__frame-hint {
  position: absolute; top: -26px; right: -4px;
  font-family: var(--nesx-pix); font-size: .42rem; letter-spacing: .08em;
  color: rgba(255, 255, 255, .85); text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}

/* --- chapa de estado + institución --- */
.nesx__chapa {
  position: absolute; z-index: 4; left: 18px; top: 40px;
  display: flex; flex-wrap: wrap; gap: 8px; max-width: 74%;
}
.nesx__estado, .nesx__chapa-inst {
  font-family: var(--nesx-pix); font-size: .5rem; letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(10, 10, 18, .85); color: #fff;
  padding: 7px 9px 6px;
}
.nesx__estado--vivo { color: #ff6b70; }
.nesx__estado--fin { color: var(--nesx-amarillo); }
.nesx__estado-punto {
  display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  background: #ff5157; animation: nesx-parpadeo 1.2s steps(1) infinite;
}
@keyframes nesx-parpadeo { 50% { opacity: .15; } }

/* --- cuadro de diálogo RPG --- */
.nesx__dialogo {
  position: absolute; z-index: 5;
  left: 4.5%; right: 4.5%; bottom: 5%;
  background: rgba(10, 10, 18, .93);
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--nesx-noche);
  padding: 16px 18px 13px;
}
.nesx__dialogo-titulo {
  font-family: var(--nesx-pix); font-weight: 400;
  font-size: .72rem; line-height: 1.75; letter-spacing: .02em;
  color: var(--nesx-amarillo);
  margin-bottom: 4px;
}
.nesx__dialogo-rol {
  font-family: var(--nesx-pix); font-size: .5rem; line-height: 1.9;
  color: var(--nesx-celeste); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 9px;
}
.nesx__dialogo-texto {
  font-family: var(--nesx-pix); font-size: .58rem; line-height: 2.05;
  color: #f0f2ff; cursor: pointer; min-height: 2.4em;
}
.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;
}
.nesx__nivel.is-escrito .nesx__cursor { display: inline-block; }
.nesx__dialogo-acciones { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 11px; }
.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; }

/* --- 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);
}
.nesx__inter-mundo { font-size: .95rem; color: #fff; letter-spacing: .1em; }
.nesx__inter-vidas { font-size: .58rem; color: #c9cdd3; letter-spacing: .12em; text-transform: uppercase; }
.nesx__inter-vidas b { color: var(--nesx-amarillo); font-weight: 400; }
.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: altavoz, marca, sonido, led --- */
.nesx__panel { display: flex; align-items: center; gap: 16px; padding: 13px 10px 9px; }
.nesx__altavoz {
  flex: 1; height: 12px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #17171c 0 4px, transparent 4px 9px);
  opacity: .8;
}
.nesx__marca {
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: #8a8f96;
}
.nesx__sonido {
  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; }
.nesx__led { width: 9px; height: 9px; border-radius: 50%; background: #ff5157; box-shadow: 0 0 10px rgba(255, 81, 87, .8); }

/* --- lateral: cartuchos + mando --- */
.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; gap: 11px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05);
}
.nesx__cartuchos-rotulo {
  font-family: var(--nesx-pix); font-size: .48rem; letter-spacing: .34em;
  color: #55565e; margin: 2px 0 3px 2px;
}
.nesx__cartucho {
  position: relative;
  display: flex; align-items: stretch; text-align: left;
  background: linear-gradient(180deg, #a6a6ae, #8d8d95);
  border: 0; border-radius: 6px 6px 10px 10px;
  padding: 0; cursor: pointer; 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:focus-visible { outline: 3px solid var(--nesx-amarillo); outline-offset: 3px; }
.nesx__cartucho-muesca {
  width: 20px; flex: none;
  background: repeating-linear-gradient(0deg, #74747c 0 3px, #8d8d95 3px 9px);
  border-right: 2px solid #74747c;
}
.nesx__cartucho-etiqueta {
  flex: 1; min-width: 0;
  background: #f0e8d7;
  margin: 8px 10px 10px 4px;
  border-radius: 3px;
  border-top: 5px solid var(--red);
  padding: 8px 10px 7px;
}
.nesx__cartucho-etiqueta b {
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  line-height: 1.25; color: #14151d; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nesx__cartucho-etiqueta i {
  display: block; font-style: normal;
  font-family: var(--nesx-pix); font-size: .42rem; letter-spacing: .1em;
  color: #8a8071; margin-top: 5px; 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);
}
.nesx__cartucho.is-metiendo { animation: nesx-mete .7s var(--ease); }
@keyframes nesx-mete {
  0% { transform: translateY(-3px); }
  45% { transform: translateY(7px); }
  100% { transform: translateY(4px); }
}

/* --- mando NES --- */
.nesx__mando {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 18px;
  background: linear-gradient(180deg, #ddd8d1, #c6c0b7);
  border: 3px solid #aaa49a;
  border-radius: 14px;
  padding: 20px 20px 18px;
  box-shadow: inset 0 2px 0 #f5f2ed, inset 0 -7px 0 #a39d92, 0 18px 40px rgba(0, 0, 0, .4);
}
.nesx__dpad { position: relative; width: 78px; height: 78px; flex: none; }
.nesx__dpad-eje {
  position: absolute; left: 26px; top: 26px; width: 26px; height: 26px;
  background: radial-gradient(circle at 40% 34%, #3a3a40, #232328);
}
.nesx__dpad-btn {
  position: absolute; width: 26px; height: 26px;
  background: #2b2b2e; border: 0; border-radius: 4px;
  color: #d9d4cd; font-size: .58rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 0 #101014;
  cursor: pointer;
  transition: transform .12s;
}
.nesx__dpad-btn--l { left: 0; top: 26px; }
.nesx__dpad-btn--r { right: 0; top: 26px; }
.nesx__dpad-btn--u { top: 0; left: 26px; cursor: default; }
.nesx__dpad-btn--d { bottom: 0; left: 26px; 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 #101014; }
.nesx__dpad-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.nesx__centro {
  background: #cfc9c0; border-radius: 10px;
  padding: 12px 12px 10px;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .18);
}
.nesx__pills { display: flex; justify-content: center; gap: 16px; }
.nesx__pill-grupo { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.nesx__pill {
  width: 44px; height: 13px; border-radius: 7px;
  background: #2b2b2e; border: 0; cursor: pointer;
  box-shadow: inset 0 -3px 0 #101014;
  transition: transform .12s;
}
.nesx__pill:active { transform: scale(.92); box-shadow: inset 0 2px 3px #101014; }
.nesx__pill:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.nesx__pill-grupo i {
  font-style: normal; font-family: var(--nesx-pix); font-size: .42rem;
  letter-spacing: .1em; color: #a8272d;
}
.nesx__ab { display: flex; gap: 16px; flex: none; }
.nesx__ab-grupo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nesx__btn-ab {
  width: 40px; height: 40px; 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(--red); outline-offset: 3px; }
.nesx__ab-grupo i {
  font-style: normal; font-family: var(--nesx-pix); font-size: .48rem; color: #a8272d;
}
.nesx__pista {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: #7d828c; text-align: center; line-height: 1.8;
}

/* --- pantalla de pausa (modal) --- */
.nesx-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center; padding: 22px;
  opacity: 0; transition: opacity .28s var(--ease);
}
.nesx-modal.show { opacity: 1; }
.nesx-modal__backdrop { position: absolute; inset: 0; background: rgba(5, 7, 16, .78); }
.nesx-modal__dialog {
  position: relative;
  width: min(720px, 100%); max-height: 86vh; overflow: auto;
  background: #0c1440; color: #e8ecff;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px #0c1440, 0 40px 100px rgba(0, 0, 0, .6);
  padding: 0 0 16px;
  transform: translateY(14px); transition: transform .28s var(--ease);
}
.nesx-modal.show .nesx-modal__dialog { transform: translateY(0); }
.nesx-modal__dialog:focus-visible { outline: 3px solid var(--nesx-amarillo); outline-offset: -3px; }
.nesx-pausa__bar {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--nesx-pix); font-size: .55rem; letter-spacing: .1em;
  color: var(--nesx-amarillo); background: #091033;
  padding: 14px 18px 12px;
  border-bottom: 3px solid rgba(255, 255, 255, .22);
  position: sticky; top: 0;
}
.nesx-pausa__bar-marca { color: #8fa4d6; }
.nesx-pausa__pagina { padding: 22px 24px 6px; }
.nesx-pausa__titulo {
  font-family: var(--nesx-pix); font-weight: 400;
  font-size: .88rem; line-height: 1.85; color: #fff;
  margin-bottom: 10px;
}
.nesx-pausa__meta {
  font-family: var(--nesx-pix); font-size: .52rem; line-height: 2;
  letter-spacing: .06em; color: var(--nesx-celeste); text-transform: uppercase;
  margin-bottom: 16px;
}
.nesx-pausa__cuerpo p {
  font-size: .99rem; line-height: 1.78; color: #d5dcf5;
  margin-bottom: 13px; max-width: 62ch;
}
.nesx-pausa__link a {
  font-family: var(--nesx-pix); font-size: .58rem; color: var(--nesx-verde);
  text-decoration: none;
}
.nesx-pausa__link a:hover, .nesx-pausa__link a:focus-visible { color: #c4ffd6; }
.nesx-pausa__teclas {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 14px 24px 4px;
  border-top: 3px solid rgba(255, 255, 255, .18);
  margin-top: 10px;
}
.nesx__fkey {
  font-family: var(--nesx-pix); font-size: .52rem; letter-spacing: .06em;
  color: #e8ecff; background: #14204f;
  border: 2px solid rgba(255, 255, 255, .4);
  padding: 9px 12px 8px; cursor: pointer;
  transition: background .2s;
}
.nesx__fkey:hover { background: #1b2a66; }
.nesx__fkey:focus-visible { outline: 3px solid var(--nesx-amarillo); outline-offset: 2px; }
.nesx__fkey--b { color: #ff8d90; border-color: rgba(255, 141, 144, .7); }

/* --- responsive --- */
@media (max-width: 1080px) {
  .nesx__sala { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .nesx__lateral { gap: 20px; }
  .nesx__cartuchos {
    grid-auto-flow: column; grid-auto-columns: minmax(190px, 220px);
    overflow-x: auto; max-width: 100%; padding-bottom: 14px;
    scrollbar-width: thin;
  }
  .nesx__cartuchos-rotulo { position: sticky; left: 2px; }
}
@media (max-width: 640px) {
  .nesx-section { padding: 84px 0 90px; }
  .nesx__pantalla { aspect-ratio: auto; min-height: 480px; }
  .nesx__hud { font-size: .46rem; padding: 12px 12px 0; }
  .nesx__chapa { top: 34px; left: 12px; }
  .nesx__capturas { width: 62%; left: 6%; top: 15%; }
  .nesx__dialogo { left: 3.5%; right: 3.5%; bottom: 3.5%; padding: 13px 13px 11px; }
  .nesx__dialogo-titulo { font-size: .62rem; }
  .nesx__dialogo-texto { font-size: .52rem; }
  .nesx__mando { gap: 12px; padding: 16px 14px 14px; }
  .nesx__dpad { width: 66px; height: 66px; }
  .nesx__dpad-eje { left: 22px; top: 22px; width: 22px; height: 22px; }
  .nesx__dpad-btn { width: 22px; height: 22px; }
  .nesx__dpad-btn--l, .nesx__dpad-btn--r { top: 22px; }
  .nesx__dpad-btn--u, .nesx__dpad-btn--d { left: 22px; }
  .nesx__btn-ab { width: 34px; height: 34px; }
  .nesx__pill { width: 36px; }
  .nesx-pausa__pagina { padding: 18px 16px 4px; }
  .nesx-pausa__teclas { padding: 12px 16px 2px; }
}

/* 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__estado-punto, .nesx__cursor, .nesx__secreto,
  .nesx__boot-marca, .nesx__cartucho.is-metiendo,
  .nesx__confeti.is-fiesta i,
  .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 (ecu-desk: 9 faders verticales
   rotados, LEDs, VU de aguja, LCD ámbar, memorias y programas),
   con la cinta impresa del prompt (ecu-tape, papel de impresora
   con arrastre perforado) y la cassettera de estrategias
   (ecu-cassette: al pasar el ratón un reflejo barre la carcasa y
   las bobinas avanzan un tramo una sola vez —nada de giros en
   bucle—; la cassette cargada en la mesa enciende su piloto PLAY).
   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;
}

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

/* la partitura: entradas LCD */

.ecu-desk__context {
  border-radius: 18px;
  padding: 16px 18px 14px;
  margin-bottom: 18px;
  background: rgba(6, 12, 16, .5);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35);
}

.ecu-desk__context-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #f0b64b;
}

.ecu-desk__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: #9db0ba;
}

.ecu-campo input,
.ecu-campo textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #2b3942;
  background: linear-gradient(180deg, #0a1114, #0d1519);
  color: #ffd489;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.5;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  resize: vertical;
}

.ecu-campo input::placeholder,
.ecu-campo textarea::placeholder { color: #55676f; }

.ecu-campo input:focus-visible,
.ecu-campo textarea:focus-visible {
  outline: none;
  border-color: #d9545a;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 3px rgba(194, 51, 57, .25);
}

.ecu-desk__context-hint {
  margin: 10px 2px 0;
  font-size: .74rem;
  color: #7d919c;
}

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

.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,
.ecu-cassette__bar .prompt-open {
  border-radius: 999px;
  background: #fff;
  border-color: #d8dee2;
  color: #3a4a52;
}

.ecu-tape__bar .prompt-open:hover,
.ecu-cassette__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);
}

/* ---------- cassettera de estrategias ---------- */

.ecu-strats { max-width: 1080px; margin: 40px auto 0; }

.ecu-strats__head { text-align: center; max-width: 760px; margin: 0 auto 26px; }

.ecu-strats__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--ink);
}

.ecu-strats__text { margin: 0; color: #4c5a62; line-height: 1.65; }

.ecu-strats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.ecu-cassette {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(15, 28, 34, .08);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.ecu-cassette:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.ecu-cassette__shell {
  position: relative;
  padding: 14px 16px 12px;
  background:
    radial-gradient(circle at 12px 12px, rgba(15, 28, 34, .14) 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, rgba(15, 28, 34, .14) 2.5px, transparent 3.5px),
    linear-gradient(180deg, #f6f2e7, #efe9d9);
  border-bottom: 1px solid rgba(15, 28, 34, .1);
}

.ecu-cassette__band {
  border-left: 6px solid var(--cas, var(--red));
  padding: 2px 0 6px 12px;
}

.ecu-cassette__side {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--cas, var(--red));
}

.ecu-cassette__name {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
}

.ecu-cassette__window {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1a242a, #10181d);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}

.ecu-cassette__reel {
  position: relative;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, #e8e0cf 0deg 24deg, transparent 24deg 60deg),
    radial-gradient(circle, #10181d 0 28%, #3c4a52 30% 100%);
  transition: transform 1.5s cubic-bezier(.22, .61, .21, 1);
}

.ecu-cassette__reel::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #10181d;
}

/* Al entrar, la cinta «avanza»: cada bobina gira un tramo con frenada
   suave (la izquierda un poco más, como en un casete real) y rebobina
   al salir. Un gesto único y elástico, sin bucles que mareen. */
.ecu-cassette:hover .ecu-cassette__reel,
.ecu-cassette:focus-within .ecu-cassette__reel { transform: rotate(210deg); }

.ecu-cassette:hover .ecu-cassette__reel--b,
.ecu-cassette:focus-within .ecu-cassette__reel--b { transform: rotate(140deg); }

/* …mientras un reflejo de luz barre la carcasa una sola vez */
.ecu-cassette__shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    transparent 32%,
    rgba(255, 255, 255, .07) 43%,
    rgba(255, 255, 255, .5) 50%,
    rgba(255, 255, 255, .07) 57%,
    transparent 68%);
  transform: translateX(-120%);
}

.ecu-cassette:hover .ecu-cassette__shell::after,
.ecu-cassette:focus-within .ecu-cassette__shell::after {
  animation: ecu-cas-sheen .95s var(--ease) both;
}

@keyframes ecu-cas-sheen { to { transform: translateX(120%); } }

.ecu-cassette__tapefill {
  flex: 1;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, #6b4c2a, #4a3117);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}

/* Piloto PLAY: serigrafiado y apagado en todas las cassettes; se
   enciende solo en la cargada en la mesa (.is-playing, lo marca
   selectStrategy en app.js), que además se rodea con su color. */
.ecu-cassette__play {
  flex: none;
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #3c4a52;
  transition: color .3s var(--ease), text-shadow .3s var(--ease);
}

.ecu-cassette.is-playing {
  box-shadow: 0 0 0 2px var(--cas, var(--red)), var(--shadow);
}

.ecu-cassette.is-playing:hover {
  box-shadow: 0 0 0 2px var(--cas, var(--red)), var(--shadow-hover);
}

.ecu-cassette.is-playing .ecu-cassette__play {
  color: #ff5d63;
  text-shadow: 0 0 10px rgba(255, 93, 99, .75);
}

.ecu-cassette__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}

.ecu-cassette__desc { margin: 0 0 8px; color: #33434c; font-size: .92rem; line-height: 1.6; }

.ecu-cassette__cuando { margin: 0 0 12px; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }

.ecu-cassette__cuando strong { color: #3a4a52; }

.ecu-cassette__code {
  --cw-accent-bri: #b3282e;
  --cw-accent-soft: rgba(194, 51, 57, .09);
  position: relative;
  max-height: 168px;
  overflow: hidden;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 28, 34, .1);
  background: #faf9f4;
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.6;
  color: #23343d;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.ecu-cassette__code:not(.is-open)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  background: linear-gradient(180deg, rgba(250, 249, 244, 0), #faf9f4 82%);
}

.ecu-cassette__code.is-open { max-height: none; overflow: auto; }

.ecu-cassette__more {
  align-self: flex-start;
  margin: 8px 0 12px;
  padding: 0;
  border: none;
  background: none;
  color: var(--red);
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}

.ecu-cassette__more:hover { text-decoration: underline; }

.ecu-cassette__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: 8px;
  margin-top: auto;
}

.ecu-cassette__bar .ecu-copy {
  padding: 7px 14px;
  font-size: .78rem;
  box-shadow: 0 8px 16px rgba(194, 51, 57, .22);
}

.ecu-cassette__use {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--cas, var(--red));
  background: #fff;
  color: var(--cas, var(--red));
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .16s var(--ease);
}

.ecu-cassette__use::before { content: "▮▶"; font-size: .6rem; letter-spacing: -.1em; }

.ecu-cassette__use:hover { background: var(--cas, var(--red)); color: #fff; transform: translateY(-1px); }

.ecu-cassette__bar .prompt-save--ecu {
  border: 1px solid #d8dee2;
  background: #fff;
  color: #3a4a52;
  border-radius: 999px;
  padding: 7px 13px;
}

.ecu-cassette__bar .prompt-save--ecu:hover { background: #fff; border-color: var(--red); color: var(--red); }

.ecu-cassette__bar .prompt-save--ecu.is-on {
  background: rgba(194, 51, 57, .08);
  border-color: var(--red);
  color: var(--red);
}

.ecu-cassette__bar .prompt-save--ecu.is-on svg { fill: var(--red); stroke: var(--red); }

/* ---------- 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-desk__campos { grid-template-columns: repeat(2, 1fr); }
  .ecu-campo--wide { grid-column: span 2; }
  .ecu-strats__grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}

@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-desk__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; }
  .ecu-cassette__body { padding: 14px 14px 16px; }
}

/* Con reduced-motion: la onda queda fija (con un tercio «reproducido»), las
   bobinas no se mueven, el reflejo no barre la carcasa, 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-cassette__reel { transition: none; }
  .ecu-cassette:hover .ecu-cassette__reel,
  .ecu-cassette:focus-within .ecu-cassette__reel,
  .ecu-cassette:hover .ecu-cassette__reel--b,
  .ecu-cassette:focus-within .ecu-cassette__reel--b { transform: none; }
  .ecu-cassette:hover .ecu-cassette__shell::after,
  .ecu-cassette:focus-within .ecu-cassette__shell::after { animation: none; }
  .ecu-vu__needle { transition: none; }
  .ecu-cassette, .ecu-preset, .ecu-chip, .ecu-copy, .ecu-cassette__use { 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); }

.dif-prompt__ayuda {
  margin-top: 8px;
  max-width: 46rem;
  font-size: .88rem;
  color: rgba(255, 255, 255, .6);
}

.dif-prompt__campos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

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

.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-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 { 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, en clave art déco: la portada (hero--
   pensamiento, con el indicador semicircular de latón cuya aguja
   barre las seis plantas una sola vez), el vestíbulo (pen-lobby:
   marquesina dorada con sol radiante, tarjetas de la conserjería
   con esquinas déco y las «normas de la casa»), la máquina del
   ascensor (pen-machine: botonera de latón, indicador de aguja,
   placa con el nivel de pensamiento y sus procesos cognitivos),
   las puertas que se cierran y abren al cambiar de planta
   (pen-doors), el directorio de estrategias (pen-suite: placas
   de habitación con su insignia de tipo —rutina, destreza,
   hábito…—) y la recepción donde la estrategia se convierte en
   prompt (pen-recepcion + pen-ticket). 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: #14211f;
  --pen-noche2: #0d1615;
  --pen-oro: #c9a24f;
  --pen-oro2: #e6cf9a;
  --pen-crema: #f7f3e8;
  --pen-borde-oro: rgba(201, 162, 79, .45);
}

/* ---------- portada ---------- */

.hero--pensamiento {
  position: relative;
  background:
    radial-gradient(130% 120% at 50% -20%, #ffffff 0%, #fbf9f2 52%, var(--gray-bg) 100%);
}

.hero--pensamiento .hero__title {
  background: linear-gradient(178deg, var(--ink) 30%, #59492a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-pen__dial {
  display: inline-block;
  margin: 20px auto 2px;
  padding: 16px 22px 10px;
  border: 1px solid rgba(138, 107, 44, .25);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf6, #f4ecd8);
  box-shadow: 0 14px 34px rgba(70, 54, 20, .14), inset 0 1px 0 #fff;
}

.hero-pen__arc {
  position: relative;
  width: 210px;
  height: 112px;
  border: 2px solid #b08d3e;
  border-bottom: 0;
  border-radius: 210px 210px 0 0;
  background: linear-gradient(180deg, #fdf8ec, #f1e7cd);
  overflow: hidden;
}

.hero-pen__tick,
.hero-pen__num,
.hero-pen__needle {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform-origin: 50% 100%;
  transform: rotate(var(--a, 0deg));
}

.hero-pen__tick {
  width: 2px;
  height: 96px;
  margin-left: -1px;
}
.hero-pen__tick::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 2px;
  height: 11px;
  background: #8a6b2c;
}

.hero-pen__num {
  width: 2px;
  height: 96px;
  margin-left: -1px;
}
.hero-pen__num span {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(calc(-1 * var(--a, 0deg)));
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
  color: #6b5426;
}

.hero-pen__needle {
  width: 3px;
  height: 78px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--red), #7d1e23);
  box-shadow: 0 0 8px rgba(194, 51, 57, .4);
  animation: hero-pen-barre 1.7s cubic-bezier(.3, .8, .3, 1.06) both;
  animation-delay: .45s;
}

@keyframes hero-pen-barre {
  0% { transform: rotate(-90deg); }
  72% { transform: rotate(64deg); }
  100% { transform: rotate(54deg); }
}

.hero-pen__pin {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 18px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2dfae, #c9a24f 55%, #8a6b2c);
  box-shadow: 0 2px 5px rgba(70, 54, 20, .4);
}

/* ---------- 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%, #21322e 0%, var(--pen-noche) 55%, var(--pen-noche2) 100%);
  border: 1px solid var(--pen-borde-oro);
  box-shadow: 0 24px 60px rgba(13, 22, 21, .35);
  overflow: hidden;
}

.pen-lobby::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 162, 79, .28);
  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); }
.pen-lobby__sol svg { width: 90px; height: 34px; display: block; }

.pen-lobby__hotel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  letter-spacing: .34em;
  text-indent: .34em;
  background: linear-gradient(180deg, #f3e3b5, var(--pen-oro) 60%, #9d7c33);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pen-lobby__desde {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247, 243, 232, .55);
}

.pen-lobby__lead {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  color: #e9e4d4;
  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: #fdfbf4;
  border: 1px solid #e6dcc0;
  border-radius: 16px;
  padding: 20px 20px 18px;
  box-shadow: 0 10px 26px rgba(70, 54, 20, .08);
}

.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: #6b5426;
  background: radial-gradient(circle at 35% 30%, #f7ecc9, #e6cf9a 60%, #cbab5e);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(70, 54, 20, .18);
}
.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(107, 84, 38, .18);
}

.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__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pen-oro2);
  text-align: center;
  margin-bottom: 16px;
}

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

.pen-norma__llave {
  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);
}
.pen-norma__llave svg { width: 17px; height: 17px; }

.pen-norma strong {
  display: block;
  font-family: var(--font-display);
  font-size: .9rem;
  color: #f4efdf;
  margin-bottom: 3px;
}
.pen-norma p { font-size: .82rem; line-height: 1.55; color: rgba(233, 228, 212, .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 máquina del ascensor ---------- */

.pen-asc-section {
  background:
    radial-gradient(120% 90% at 50% 0%, #1b2a27 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: #f4efdf; }
.pen-asc__intro { color: rgba(233, 228, 212, .82); font-size: .95rem; line-height: 1.7; margin-top: 14px; }
.pen-asc__credito { font-size: .78rem; font-style: italic; color: rgba(233, 228, 212, .55); margin-top: 10px; }
.pen-asc__credito a { color: var(--pen-oro2); }

.pen-machine {
  border-radius: 22px;
  border: 1px solid var(--pen-borde-oro);
  background: linear-gradient(180deg, #22332f, #17231f);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(230, 207, 154, .18);
  padding: 22px clamp(16px, 3vw, 34px) 28px;
}

.pen-machine__marquee {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(201, 162, 79, .25);
  text-align: center;
}

.pen-machine__hotel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .4em;
  text-indent: .4em;
  color: var(--pen-oro2);
}

.pen-machine__sub {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(233, 228, 212, .45);
}

.pen-machine__body {
  display: grid;
  grid-template-columns: 225px 1fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}

/* --- botonera --- */

.pen-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--pen-borde-oro);
  background: linear-gradient(180deg, #2a3b36, #1a2723);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35);
}

.pen-panel__label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(230, 207, 154, .6);
  text-align: center;
  margin-bottom: 4px;
}

.pen-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(201, 162, 79, .18);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}

.pen-btn:hover, .pen-btn:focus-visible { border-color: rgba(201, 162, 79, .55); transform: translateX(3px); }
.pen-btn:focus-visible { outline: 2px solid var(--pen-oro2); outline-offset: 2px; }

.pen-btn__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: #2a2118;
  background: radial-gradient(circle at 35% 30%, #f2dfae, #c9a24f 55%, #8a6b2c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 7px rgba(0, 0, 0, .4);
  transition: box-shadow .25s;
}

.pen-btn__nombre {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(233, 228, 212, .75);
  transition: color .25s;
}

.pen-btn.is-on { background: rgba(201, 162, 79, .13); border-color: rgba(201, 162, 79, .6); }
.pen-btn.is-on .pen-btn__num {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 3px rgba(230, 207, 154, .3), 0 0 18px rgba(230, 207, 154, .55);
}
.pen-btn.is-on .pen-btn__nombre { color: var(--pen-oro2); }

.pen-btn--sorpresa {
  margin-top: 8px;
  border-top: 1px dashed rgba(201, 162, 79, .3);
  border-radius: 0 0 12px 12px;
  padding-top: 12px;
}
.pen-btn--sorpresa .pen-btn__num {
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #e2777c, var(--red) 55%, #7d1e23);
}
.pen-btn--sorpresa .pen-btn__nombre { color: #e2a0a3; }
.pen-btn--sorpresa:hover .pen-btn__nombre, .pen-btn--sorpresa:focus-visible .pen-btn__nombre { color: #f2c9cb; }

/* --- cabina: indicador + placa --- */

.pen-cab { display: grid; gap: 18px; justify-items: center; }

.pen-dial {
  padding: 16px 22px 8px;
  border-radius: 18px;
  border: 1px solid var(--pen-borde-oro);
  background: linear-gradient(180deg, #fffdf6, #f2e9d2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35), inset 0 1px 0 #fff;
}

.pen-dial__arc {
  position: relative;
  width: min(300px, 68vw);
  height: calc(min(300px, 68vw) / 2 + 6px);
  border: 2px solid #b08d3e;
  border-bottom: 0;
  border-radius: 300px 300px 0 0;
  background: linear-gradient(180deg, #fdf8ec, #f1e7cd);
  overflow: hidden;
}

.pen-dial__tick, .pen-dial__num, .pen-dial__needle {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform-origin: 50% 100%;
  transform: rotate(var(--a, 0deg));
}

.pen-dial__tick { width: 2px; height: calc(100% - 10px); margin-left: -1px; }
.pen-dial__tick::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 2px;
  height: 12px;
  background: #8a6b2c;
}

.pen-dial__num { width: 2px; height: calc(100% - 10px); margin-left: -1px; }
.pen-dial__num span {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%) rotate(calc(-1 * var(--a, 0deg)));
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  color: #6b5426;
}

.pen-dial__needle {
  width: 3px;
  height: calc(100% - 34px);
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--red), #7d1e23);
  box-shadow: 0 0 8px rgba(194, 51, 57, .45);
  transition: transform .95s cubic-bezier(.25, .85, .3, 1.06);
}

.pen-dial__pin {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 20px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2dfae, #c9a24f 55%, #8a6b2c);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.pen-placa { text-align: center; max-width: 620px; }

.pen-placa__label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(230, 207, 154, .6);
  margin-bottom: 8px;
}

.pen-placa__linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 12px;
}

.pen-placa__num {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pen-oro2);
  border: 1px solid var(--pen-borde-oro);
  border-radius: 999px;
  padding: 3px 11px;
}

.pen-placa__nombre {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.4vw, 1.8rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f4efdf;
}

.pen-placa__apodo { font-size: .95rem; color: var(--pen-oro2); }

.pen-badge-hot {
  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-placa__lema { margin-top: 8px; font-size: .9rem; line-height: 1.6; color: rgba(233, 228, 212, .8); }

.pen-placa__procesos-label {
  margin-top: 14px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(230, 207, 154, .55);
}

.pen-placa__procesos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 8px;
}

.pen-chip {
  font-size: .76rem;
  color: #eadfc0;
  border: 1px solid rgba(201, 162, 79, .4);
  border-radius: 999px;
  padding: 4px 12px;
}

.pen-placa__acciones { margin-top: 14px; }

.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(201, 162, 79, .16); transform: translateY(-2px); }
.pen-accion:focus-visible { outline: 2px solid var(--pen-oro2); outline-offset: 2px; }

/* --- puertas + directorio de la planta --- */

.pen-dirs { margin-top: 34px; }

.pen-dirs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}

.pen-dirs__label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(230, 207, 154, .6);
}

.pen-dirs__planta {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  color: #f4efdf;
}

.pen-doors-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 180px;
}

.pen-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, #22332f, #16221e);
  transition: transform .42s cubic-bezier(.6, 0, .8, .4);
}
.pen-door i {
  position: absolute;
  inset: 12px 16px;
  border: 1px solid rgba(201, 162, 79, .35);
  border-radius: 10px;
}
.pen-door--l { left: 0; transform: translateX(-103%); border-right: 2px solid var(--pen-oro); }
.pen-door--r { right: 0; transform: translateX(103%); border-left: 2px solid var(--pen-oro); }

.pen-doors-wrap.is-cerrando .pen-door { transform: translateX(0); }
.pen-doors-wrap.is-abriendo .pen-door { transition: transform .52s cubic-bezier(.2, .6, .3, 1); }
.pen-doors-wrap.is-abriendo .pen-door--l { transform: translateX(-103%); }
.pen-doors-wrap.is-abriendo .pen-door--r { transform: translateX(103%); }

.pen-dir__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
}

.pen-suite {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fbf8f0;
  border: 1px solid #e4d9bd;
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  transition: transform .3s var(--ease), box-shadow .3s;
}

.pen-suite:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0, 0, 0, .26); }

.pen-suite.is-elegida {
  box-shadow: 0 0 0 2px var(--pen-oro), 0 18px 38px rgba(0, 0, 0, .28);
}
.pen-suite.is-elegida .pen-suite__num { background: var(--red); }

.pen-suite__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pen-suite__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--pen-oro2);
  background: var(--pen-noche);
  border-radius: 7px;
  padding: 4px 9px;
  transition: background .25s;
}

.pen-suite__tipo {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
  text-align: right;
}
.pen-suite__tipo--rutina { background: rgba(47, 107, 216, .13); color: #2b55ac; }
.pen-suite__tipo--destreza { background: rgba(31, 157, 111, .15); color: #147050; }
.pen-suite__tipo--habito { background: rgba(217, 130, 15, .16); color: #9c5e08; }
.pen-suite__tipo--organizador { background: rgba(124, 92, 214, .14); color: #5b3fb0; }
.pen-suite__tipo--paralelo { background: rgba(15, 139, 157, .14); color: #0b6a78; }
.pen-suite__tipo--estrategia { background: rgba(93, 107, 116, .14); color: #46545e; }

.pen-suite__nombre {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 7px;
}

.pen-suite__proceso {
  display: inline-block;
  align-self: flex-start;
  font-size: .74rem;
  font-style: italic;
  color: #6b5426;
  background: #f0e8d2;
  border-radius: 999px;
  padding: 3px 11px;
  margin-bottom: 9px;
}
.pen-suite__proceso span {
  font-style: normal;
  font-weight: 800;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-right: 5px;
}

.pen-suite__que { font-size: .89rem; line-height: 1.6; color: #3a4a52; margin-bottom: 9px; }

.pen-suite__meta { font-size: .8rem; line-height: 1.55; color: #5a6a72; margin-bottom: 6px; }
.pen-suite__meta strong { color: var(--ink); }

.pen-suite__como {
  background: #f4eeda;
  border-left: 3px solid var(--pen-oro);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .83rem;
  line-height: 1.6;
  color: #4a4432;
  margin: 4px 0 8px;
}

.pen-suite__more {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 2px 0;
  font-size: .76rem;
  font-weight: 700;
  color: #8a6b2c;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  margin-bottom: 8px;
}
.pen-suite__more:hover, .pen-suite__more:focus-visible { color: var(--red); }

.pen-suite__bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ddd0ac;
}

.pen-suite__use {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  color: var(--pen-crema);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  transition: background .25s, transform .25s var(--ease);
}
.pen-suite__use:hover, .pen-suite__use:focus-visible { background: var(--red); transform: translateY(-2px); }

.pen-suite__fuente {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9a9078;
  text-align: right;
}

/* --- la recepción: de estrategia a prompt --- */

.pen-recepcion {
  margin-top: 40px;
  background: var(--pen-crema);
  border: 1px solid #e2d8bd;
  border-radius: 20px;
  padding: clamp(18px, 3vw, 30px);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .3);
}

.pen-recepcion__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.pen-recepcion__campana {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #2a2118;
  background: radial-gradient(circle at 35% 30%, #f2dfae, #c9a24f 55%, #8a6b2c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px rgba(70, 54, 20, .25);
}
.pen-recepcion__campana svg { width: 24px; height: 24px; }

.pen-recepcion__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 4px;
}

.pen-recepcion__help { font-size: .86rem; line-height: 1.6; color: #5a5a48; }

.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: #6b5426;
}

.pen-campo input, .pen-campo textarea {
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #dccfa9;
  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(201, 162, 79, .22);
}

.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__elegida {
  font-size: .74rem;
  font-weight: 700;
  color: #f4efdf;
  border: 1px solid var(--pen-borde-oro);
  border-radius: 999px;
  padding: 4px 12px;
}

.pen-ticket__paper {
  background: #fdfaf2;
  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;
}
.pen-save:hover, .pen-save:focus-visible, .pen-save.is-flash { background: rgba(201, 162, 79, .18); color: #f3e3b5; }

.pen-ticket__hint { margin-top: 10px; font-size: .74rem; line-height: 1.55; color: rgba(247, 243, 232, .55); }

/* --- responsive --- */

@media (max-width: 880px) {
  .pen-machine__body { grid-template-columns: 1fr; }
  .pen-panel {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }
  .pen-panel__label { width: 100%; }
  .pen-btn {
    flex-direction: column;
    gap: 6px;
    width: 86px;
    padding: 8px 4px;
    text-align: center;
  }
  .pen-btn:hover, .pen-btn:focus-visible { transform: translateY(-2px); }
  .pen-btn__nombre { font-size: .56rem; letter-spacing: .06em; }
  .pen-btn--sorpresa { margin-top: 0; border-top: 1px solid rgba(201, 162, 79, .18); border-radius: 12px; padding-top: 8px; }
}

@media (max-width: 560px) {
  .pen-dir__grid { grid-template-columns: 1fr; }
  .pen-suite__bar { flex-direction: column; align-items: flex-start; }
  .pen-suite__fuente { text-align: left; }
  .pen-lobby__hotel { letter-spacing: .2em; text-indent: .2em; }
}

/* --- accesibilidad: sin movimiento --- */

@media (prefers-reduced-motion: reduce) {
  .hero-pen__needle { animation: none; transform: rotate(54deg); }
  .pen-dial__needle { transition: none; }
  .pen-door { transition: none; }
  .pen-suite, .pen-btn, .pen-accion, .pen-suite__use, .pen-copy { transition-property: background, color, border-color, box-shadow; }
}
html.a11y-reduce-motion .hero-pen__needle { animation: none; transform: rotate(54deg); }
html.a11y-reduce-motion .pen-dial__needle { transition: none; }
html.a11y-reduce-motion .pen-door { transition: 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; }
}