/* =====================================================================
   Botón Rojo · prototipo 2026 · un solo CSS, sin framework, mobile-first
   ===================================================================== */

@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Marca */
  --red: #C71E24;
  --red-deep: #B62025;
  --red-bright: #E5484D;          /* solo para texto pequeño sobre fondo oscuro (contraste) */
  --ink: #221F1F;                 /* casi negro del logo */
  --yellow: #FFD600;

  /* Superficies */
  --bg: #171414;
  --surface: #221F1F;
  --surface-2: #2B2727;
  --line: rgba(246, 242, 236, .1);
  --line-strong: rgba(246, 242, 236, .2);

  /* Texto */
  --text: #F6F2EC;
  --muted: #B9B1A8;

  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--yellow); color: var(--ink); padding: .6rem 1rem; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Tipografía ---------- */
.display {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; line-height: .95;
  text-transform: uppercase; text-wrap: balance;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(199, 30, 36, .22); }
.hl { color: var(--red); }
.lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 38rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.4rem; border: 2px solid var(--red); border-radius: 999px;
  background: var(--red); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s, color .2s;
}
.btn:hover { background: var(--red-deep); border-color: var(--red-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icon { transition: transform .2s; }
.btn:hover .icon { transform: translateX(3px); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: rgba(246, 242, 236, .06); border-color: var(--text); }
.btn-big { min-height: 56px; padding: 1rem 1.8rem; font-size: 1.075rem; box-shadow: 0 14px 34px -12px rgba(199, 30, 36, .75); }
.btn-small { min-height: 40px; padding: .45rem 1.1rem; font-size: .95rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(23, 20, 20, .72); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .25s, background-color .25s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(23, 20, 20, .92); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand img { height: 46px; width: auto; }
@media (min-width: 900px) { .brand img { height: 52px; } }

.nav-toggle {
  display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .25s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav { display: none; }
.site-nav.is-open {
  display: block; position: absolute; top: var(--header-h); left: 0; right: 0;
  background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem var(--gutter) 1.5rem;
}
.site-nav ul { display: flex; flex-direction: column; gap: .25rem; }
.site-nav a:not(.btn) { display: block; padding: .8rem 0; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line); }
.site-nav .btn { margin-top: 1rem; width: 100%; }
/* sin JS: el menú se muestra siempre */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .site-nav { display: block; }
html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: 1rem; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: block; position: static; padding: 0; background: none; border: 0; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 2rem; }
  .site-nav a:not(.btn) { padding: .25rem 0; border: 0; color: var(--muted); font-size: .975rem; transition: color .2s; position: relative; }
  .site-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .site-nav a:not(.btn):hover { color: var(--text); }
  .site-nav a:not(.btn):hover::after { transform: scaleX(1); }
  .site-nav .btn { margin: 0; width: auto; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 8vw, 6.5rem) clamp(3rem, 5vw, 4rem); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .35;
  mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 20%, transparent 75%);
}
.hero-grid { position: relative; display: grid; gap: 3rem; align-items: center; }
.hero-title { font-size: clamp(3.6rem, 15vw, 7.5rem); line-height: .9; margin-bottom: 1.5rem; }
.hero-l1, .hero-title-break { display: block; }
/* el punto final del titular es el botón rojo (el texto "." queda para lectores de pantalla) */
.hero-dot {
  display: inline-block; position: relative; width: .17em; height: .17em; margin-left: .04em; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #E5484D, var(--red) 58%, #8E161A);
  box-shadow: 0 0 .25em rgba(199, 30, 36, .45);
}
.hero .lead { color: #D4CCC3; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

@media (min-width: 1000px) {
  .hero { display: grid; align-content: center; min-height: min(calc(100vh - var(--header-h)), 860px); padding-block: 3rem 4rem; }
  .hero-grid { grid-template-columns: 1.08fr 1fr; gap: 3.5rem; }
}

/* ---------- Visual: transmisión en vivo ---------- */
.live { position: relative; margin: 0; isolation: isolate; }
.live::before {                                   /* halo rojo detrás del panel */
  content: ""; position: absolute; inset: -12% -18% -6% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(199, 30, 36, .38), transparent 75%);
}
.live-stage { position: relative; }
.live-panel {
  position: relative; overflow: hidden; border-radius: 18px;
  background: linear-gradient(180deg, rgba(45, 40, 40, .92), rgba(27, 24, 24, .96));
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(199, 30, 36, .12);
}
.live-head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.live-pill {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .65rem; border-radius: 6px;
  background: var(--red); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: live-dot 1.4s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: .25; } }
.live-title { font-weight: 600; font-size: .95rem; }
.live-src { margin-left: auto; display: none; gap: .35rem; }
.live-src span { padding: .2rem .5rem; border: 1px solid var(--line-strong); border-radius: 6px; font-size: .72rem; color: var(--muted); }

.live-feed {
  --row: 54px;
  height: calc(var(--row) * 4); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
}
.live-list { animation: feed 24s cubic-bezier(.65, 0, .35, 1) infinite; will-change: transform; }
.live-list li {
  height: var(--row); display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  padding: 0 1.1rem; border-bottom: 1px solid var(--line);
}
.live-list p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; color: #E9E3DB; }
.av { width: 26px; height: 26px; border-radius: 50%; }
.av-1 { background: linear-gradient(135deg, #5A5150, #3A3434); }
.av-2 { background: linear-gradient(135deg, #8E161A, #5A1215); }
.av-3 { background: linear-gradient(135deg, #6E6560, #403A38); }
.av-4 { background: linear-gradient(135deg, #B9B1A8, #7A726B); }
.av-5 { background: linear-gradient(135deg, #C71E24, #7A1418); }
.tag { padding: .22rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tag-q { color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(255, 214, 0, .45); }
.tag-p { color: var(--text); background: rgba(246, 242, 236, .12); }
.tag-n { color: #FF9A9D; background: rgba(199, 30, 36, .25); }
.tag-t { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* el feed sube una fila cada 3 s; la segunda mitad repite las primeras filas para cerrar el ciclo sin salto */
@keyframes feed {
  0%, 10%      { transform: translateY(0); }
  12.5%, 22.5% { transform: translateY(calc(var(--row) * -1)); }
  25%, 35%     { transform: translateY(calc(var(--row) * -2)); }
  37.5%, 47.5% { transform: translateY(calc(var(--row) * -3)); }
  50%, 60%     { transform: translateY(calc(var(--row) * -4)); }
  62.5%, 72.5% { transform: translateY(calc(var(--row) * -5)); }
  75%, 85%     { transform: translateY(calc(var(--row) * -6)); }
  87.5%, 97.5% { transform: translateY(calc(var(--row) * -7)); }
  100%         { transform: translateY(calc(var(--row) * -8)); }
}

.live-topics { padding: .95rem 1.1rem 1.1rem; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.live-topics-label { display: block; margin-bottom: .6rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.live-topics ul { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.25rem; }
.live-topics li { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: .5rem; font-size: .8rem; color: #D4CCC3; }
.bar { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(246, 242, 236, .08); overflow: hidden; }
.bar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); transform: scaleX(var(--w));
  animation: breathe 5s ease-in-out infinite alternate;
}
.bar-1 { --w: .88; } .bar-1::after { background: linear-gradient(90deg, #E2BE01, var(--yellow)); animation-duration: 3.2s; }
.bar-2 { --w: .62; } .bar-2::after { animation-delay: -1.5s; }
.bar-3 { --w: .5; }  .bar-3::after { animation-delay: -3s; }
.bar-4 { --w: .36; } .bar-4::after { animation-delay: -.8s; }
@keyframes breathe { from { transform: scaleX(var(--w)); } to { transform: scaleX(calc(var(--w) * .82)); } }

.live-alert {
  position: absolute; right: 1rem; bottom: -2rem; z-index: 2;
  display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem .6rem .75rem; border-radius: 12px;
  background: var(--yellow); color: var(--ink); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
  animation: alert 12s ease-in-out infinite;
}
.live-alert .icon { width: 18px; height: 18px; }
.live-alert strong { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
.live-alert span { display: block; font-size: .88rem; font-weight: 600; line-height: 1.25; }
@keyframes alert {                                 /* empieza visible: así no parpadea al terminar la intro */
  0%, 70%   { opacity: 1; transform: none; }
  76%, 94%  { opacity: 0; transform: translateY(-8px) scale(.97); }
  100%      { opacity: 1; transform: none; }
}
.live-cap { margin-top: 3rem; max-width: 26rem; font-size: .8rem; color: var(--muted); }

@media (min-width: 520px) {
  .live-src { display: inline-flex; }
  .live-feed { --row: 58px; height: calc(var(--row) * 5); }
}
@media (min-width: 1000px) {
  .live-alert { right: 1.5rem; }
}

/* ---------- Secciones ---------- */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.section-intro { margin-top: 1.25rem; color: var(--muted); font-size: 1.125rem; max-width: 40rem; }

/* ---------- Servicios ---------- */
.services { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.service { position: relative; background: var(--bg); padding: 1.75rem 1.5rem 2rem; transition: background-color .25s; }
.service::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--red); transition: width .35s ease; }
.service:hover { background: var(--surface); }
.service:hover::before { width: 100%; }
.service-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.service-num { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--red-bright); letter-spacing: .04em; }
.service-icon { width: 30px; height: 30px; color: var(--text); opacity: .85; }
.service h3 { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; color: var(--muted); margin-bottom: .75rem; text-wrap: balance; }
.service .service-moment { font-size: 1.2rem; font-weight: 500; line-height: 1.4; color: var(--text); opacity: 1; text-wrap: pretty; }
.service p { color: var(--text); opacity: .92; }
.service .service-more { margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed var(--line-strong); color: var(--muted); opacity: 1; font-size: .975rem; }

@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .services { grid-template-columns: repeat(6, 1fr); }
  .service { grid-column: span 2; padding: 2rem 1.75rem 2.25rem; }
  /* 3 + 3 + 2 + 2: las dos últimas filas abren a medio ancho para cerrar la retícula */
  .service:nth-child(n+7) { grid-column: span 3; }
}

/* ---------- Frase (full-bleed) ---------- */
.band {
  position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 7rem);
  background: radial-gradient(circle at 85% 120%, rgba(255, 255, 255, .12), transparent 45%), var(--red-deep);
}
.band::before {                                   /* anillos del "botón", decorativos */
  content: ""; position: absolute; right: -8rem; top: 50%; width: 30rem; height: 30rem; transform: translateY(-50%); border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 0 0 4rem rgba(255, 255, 255, .03), 0 0 0 8rem rgba(255, 255, 255, .025);
  pointer-events: none;
}
.band-line { position: relative; max-width: 19ch; font-size: clamp(2.8rem, 8vw, 6.4rem); color: #fff; }
.band-line span { display: block; color: var(--yellow); }

/* ---------- Pasos ---------- */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
.step { position: relative; padding: 2rem 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.step-num {
  display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.25rem; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #E5484D, var(--red) 55%, #8E161A); color: #fff;
  font-family: var(--font-display); font-size: 1.7rem; line-height: 1; box-shadow: 0 6px 18px rgba(199, 30, 36, .35);
}
.step h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.25; margin-bottom: .6rem; }
.step p { color: var(--muted); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: calc(2rem + 26px); left: calc(1.75rem + 64px); right: -1.5rem; height: 1px;
    background: linear-gradient(90deg, var(--red), transparent);
  }
}

/* ---------- Por qué ---------- */
.why { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.why li { background: var(--bg); padding: 1.75rem 0; }
.why h3 { display: flex; align-items: center; gap: .75rem; font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; }
.why h3::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--yellow); border-radius: 2px; transform: rotate(45deg); }
.why p { color: var(--muted); max-width: 36rem; }
@media (min-width: 760px) {
  .why { grid-template-columns: repeat(2, 1fr); border: 0; background: none; gap: 0 3rem; }
  .why li { border-top: 1px solid var(--line); padding: 2rem 0; }
}
@media (min-width: 1040px) {
  .why-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; }
  .why-grid .section-head { position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0; }
}

/* ---------- Contacto ---------- */
.contact { position: relative; background: linear-gradient(180deg, var(--bg), #1d1010 60%, #2a0f11); border-top: 1px solid var(--line); overflow: hidden; }
.contact::after {
  content: ""; position: absolute; right: -180px; bottom: -220px; width: 560px; height: 560px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(199, 30, 36, .35), transparent 65%);
}
.contact-grid { position: relative; z-index: 1; display: grid; gap: 3rem; }
.contact h2 { font-size: clamp(3rem, 8vw, 5.5rem); }
.contact-list { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.icon-tile { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: rgba(199, 30, 36, .16); color: var(--red-bright); }
.icon-tile .icon { width: 22px; height: 22px; }
.contact-list .label { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-list a { font-weight: 600; font-size: 1.125rem; text-decoration-color: var(--red); text-underline-offset: 4px; }
.contact-list a:hover { color: var(--yellow); }
.contact-list address { font-size: 1.0625rem; }

.contact-form {
  display: grid; gap: 1.1rem; padding: clamp(1.5rem, 4vw, 2.25rem);
  background: rgba(34, 31, 31, .85); border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 4px);
}
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .95rem; }
.optional { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .75rem .9rem; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 214, 0, .25); }
.field [aria-invalid="true"] { border-color: var(--red-bright); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .25rem; }
.form-status { flex: 1 1 14rem; font-size: .95rem; color: var(--muted); }
.form-status.is-error { color: #FF9A9D; }
.form-status.is-ok { color: var(--yellow); }
.form-status a { color: var(--text); font-weight: 600; }

@media (min-width: 640px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .field-full { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1fr 1.25fr; gap: 4rem; align-items: start; } }

/* ---------- Footer ---------- */
.site-footer { background: #110f0f; border-top: 1px solid var(--line); padding-top: 3rem; font-size: .975rem; }
.footer-inner { display: grid; gap: 2rem; padding-bottom: 2.5rem; }
.footer-brand img { height: 52px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; }
.footer-nav a, .footer-contact a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.footer-contact { display: grid; gap: .35rem; color: var(--muted); }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 1.25rem 1.75rem; color: var(--muted); font-size: .875rem; }
@media (min-width: 900px) {
  .footer-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 3rem; }
  .footer-nav { justify-content: center; }
  .footer-contact { text-align: right; }
}

/* ---------- Animación de entrada (solo con JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; }
.notfound .brand img { height: 52px; width: auto; }
.nf-eyebrow { margin-top: 3rem; }
.nf-title { font-size: clamp(3rem, 9vw, 6rem); }
.nf-lead { margin-top: 1.25rem; }

/* =====================================================================
   INTRO: el botón rojo se presiona, llegan las palabras y el botón aterriza
   como el punto final de "decisión". ~2.9 s, luego queda el hero normal.
   - html.intro      → lo pone el script inline (1.ª visita de la sesión, sin reduced-motion, sin #ancla)
   - html.intro-run  → lo pone main.js cuando las fuentes están listas (arranca la secuencia)
   Solo usa opacity/transform/filter sobre el layout final: no hay saltos al terminar.
   ===================================================================== */
.intro-stage, .intro-skip { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .intro .intro-stage {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none;
  }
  .intro .intro-stage > * { grid-area: 1 / 1; }
  .intro-stage::before, .intro-stage::after { content: ""; position: absolute; inset: 0; }
  .intro-stage::before { background: #0c0a0a; }
  .intro-stage::after { background: radial-gradient(circle at 50% 50%, rgba(199, 30, 36, .28), transparent 38%); animation: intro-breathe 1.6s ease-in-out infinite alternate; }

  .intro-fly { --b: clamp(104px, 20vmin, 176px); position: relative; width: var(--b); height: var(--b); }
  .intro-btn {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #E5484D, var(--red) 55%, #8E161A);
    box-shadow: 0 0 0 .7rem rgba(199, 30, 36, .12), 0 0 0 1.4rem rgba(199, 30, 36, .06), 0 30px 60px -10px rgba(0, 0, 0, .8), inset 0 -10px 24px rgba(0, 0, 0, .35);
    animation: intro-btn-in .6s cubic-bezier(.2, .8, .2, 1) both;
  }
  .intro-btn::after { content: ""; position: absolute; left: 22%; top: 14%; width: 46%; height: 26%; border-radius: 50%; background: rgba(255, 255, 255, .2); }
  .intro-ring { --b: clamp(104px, 20vmin, 176px); width: var(--b); height: var(--b); border-radius: 50%; border: 2px solid var(--red); opacity: 0; }

  .intro-skip {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1001;
    align-items: center; gap: .45rem; min-height: 40px; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
    background: rgba(246, 242, 236, .06); border: 1px solid var(--line-strong); color: var(--muted);
    font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  }
  .intro .intro-skip { display: inline-flex; animation: intro-rise .4s .3s ease both; }
  .intro-skip:hover { color: var(--text); border-color: var(--text); }

  /* estado inicial: todo el hero espera fuera de cuadro */
  .intro .site-header, .intro .hero::before, .intro .hero .eyebrow, .intro .hero .lead, .intro .hero-actions,
  .intro .hero-l1, .intro .hero-title-break, .intro .hero-dot, .intro .live-stage, .intro .live-cap,
  .intro .live-list li, .intro .live-alert { opacity: 0; }
  .intro .live-list { animation: none; }
  .intro .bar::after { animation: none; transform: scaleX(0); }
  .intro .hero-title .hl { color: var(--text); }

  /* secuencia */
  .intro-run .intro-btn { animation: intro-press .42s .1s cubic-bezier(.3, 0, .2, 1) both; }
  .intro-run .intro-ring { animation: intro-ring 1.15s .3s cubic-bezier(.1, .6, .2, 1) both; }
  .intro-run .intro-ring-2 { animation-delay: .46s; }
  .intro-run .intro-stage::before { animation: intro-out .55s .38s ease both; }
  .intro-run .intro-stage::after { animation: intro-out .5s 1s ease both; }
  .intro-run .intro-fly { animation: intro-fly .5s 1.05s cubic-bezier(.7, 0, .25, 1) both, intro-vanish .01s 1.56s both; }

  .intro-run .hero::before { animation: intro-grid .9s .4s ease both; }
  .intro-run .hero-l1 { transform-origin: 0 60%; animation: intro-slam .46s .55s cubic-bezier(.16, 1, .3, 1) both; }
  .intro-run .hero-title-break { transform-origin: 0 60%; animation: intro-slam .46s .85s cubic-bezier(.16, 1, .3, 1) both; }
  .intro-run .hero-title .hl { animation: intro-red .35s 1.25s ease both; }
  .intro-run .hero-dot { animation: intro-show .01s 1.55s both; }

  .intro-run .site-header { animation: intro-drop .5s 1.5s cubic-bezier(.2, .8, .2, 1) both; }
  .intro-run .hero .eyebrow { animation: intro-rise .5s 1.4s ease both; }
  .intro-run .hero .lead { animation: intro-rise .55s 1.6s ease both; }
  .intro-run .hero-actions { animation: intro-rise .55s 1.75s ease both; }

  .intro-run .live-stage { animation: intro-assemble .65s 1.25s cubic-bezier(.2, .8, .2, 1) both; }
  .intro-run .live-list li { animation: intro-row .42s 1.55s cubic-bezier(.2, .8, .2, 1) both; }
  .intro-run .live-list li:nth-child(2) { animation-delay: 1.63s; }
  .intro-run .live-list li:nth-child(3) { animation-delay: 1.71s; }
  .intro-run .live-list li:nth-child(4) { animation-delay: 1.79s; }
  .intro-run .live-list li:nth-child(5) { animation-delay: 1.87s; }
  .intro-run .live-list li:nth-child(n+6) { animation-delay: 1.95s; }
  .intro-run .bar::after { animation: intro-bar .7s 2s cubic-bezier(.2, .8, .2, 1) both; }
  .intro-run .live-alert { animation: intro-pop .42s 2.35s cubic-bezier(.3, 1.4, .5, 1) both; }
  .intro-run .live-cap { animation: intro-rise .5s 2.2s ease both; }
}

@keyframes intro-breathe { from { opacity: .7; } to { opacity: 1; } }
@keyframes intro-btn-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes intro-press { 0% { transform: none; } 35% { transform: scale(.86); filter: brightness(.82); } 70% { transform: scale(1.05); filter: none; } 100% { transform: none; } }
@keyframes intro-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(9); } }
@keyframes intro-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes intro-fly { from { transform: none; } to { transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fs, .1)); } }
@keyframes intro-vanish { to { opacity: 0; } }
@keyframes intro-grid { from { opacity: 0; } to { opacity: .35; } }
@keyframes intro-slam {
  0%   { opacity: 0; transform: scale(1.9) translateY(-4%); filter: blur(14px); }
  55%  { opacity: 1; transform: scale(.985); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes intro-red { from { color: var(--text); } to { color: var(--red); } }
@keyframes intro-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-drop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes intro-assemble { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes intro-row { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes intro-bar { from { transform: scaleX(0); } to { transform: scaleX(var(--w)); } }
@keyframes intro-pop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }

/* =====================================================================
   PROPUESTA B (propuesta-b.html): la página abre en el ruido.
   Fragmentos de comentarios a la deriva → se ordenan volando a las filas del panel en vivo,
   aparecen las etiquetas, se llenan las barras, salta la alerta y el titular se revela. ~3 s.
   - html.introb      → script inline (cada carga, sin reduced-motion, sin #ancla)
   - html.introb-run  → main.js, tras medir el destino de cada fragmento (--tx, --ty, --ts)
   ===================================================================== */
.nb-stage { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .introb .nb-stage { display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
  .nb-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #1a1515, #0c0a0a 70%); }
  .nb-frag {
    position: absolute; white-space: nowrap; transform-origin: 0 50%;
    font-size: var(--fz); font-weight: 500; line-height: 1.2; color: var(--text); opacity: var(--o);
    animation: nb-in .7s ease both;
  }
  .nb-frag > span { display: block; }
  .nb-d { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; color: #E9E3DB; }
  .nb-frag:nth-child(3n) { color: #FF9A9D; }                  /* algunos fragmentos en rojo tenue: tono de queja */
  .nb-frag:nth-child(4n+1) { animation-delay: .12s; }
  .nb-frag:nth-child(4n+2) { animation-delay: .24s; }
  .nb-frag:nth-child(4n+3) { animation-delay: .36s; }

  .nb-frag:nth-child(1) { left: 4%; top: 8%; --fz: 2.4rem; --o: 0.34; }
  .nb-frag:nth-child(1) > span { animation: nb-drift-1 6s ease-in-out -0.7s infinite alternate; }
  .introb-run .nb-frag:nth-child(1) { animation-delay: 0.90s; }
  .nb-frag:nth-child(2) { left: 50%; top: 6%; --fz: 1.15rem; --o: 0.42; }
  .nb-frag:nth-child(2) > span { animation: nb-drift-2 7s ease-in-out -1.4s infinite alternate; }
  .introb-run .nb-frag:nth-child(2) { animation-delay: 0.95s; }
  .nb-frag:nth-child(3) { left: 68%; top: 19%; --fz: 2.8rem; --o: 0.24; }
  .nb-frag:nth-child(3) > span { animation: nb-drift-3 8s ease-in-out -2.1s infinite alternate; }
  .introb-run .nb-frag:nth-child(3) { animation-delay: 1.00s; }
  .nb-frag:nth-child(4) { left: 9%; top: 27%; --fz: 1.3rem; --o: 0.44; }
  .nb-frag:nth-child(4) > span { animation: nb-drift-2 7s ease-in-out -2.8s infinite alternate; }
  .introb-run .nb-frag:nth-child(4) { animation-delay: 1.05s; }
  .nb-frag:nth-child(5) { left: 38%; top: 35%; --fz: 3.4rem; --o: 0.18; }
  .nb-frag:nth-child(5) > span { animation: nb-drift-1 6s ease-in-out -3.5s infinite alternate; }
  .introb-run .nb-frag:nth-child(5) { animation-delay: 1.10s; }
  .nb-frag:nth-child(6) { left: 71%; top: 43%; --fz: 1.1rem; --o: 0.4; }
  .nb-frag:nth-child(6) > span { animation: nb-drift-3 8s ease-in-out -4.2s infinite alternate; }
  .introb-run .nb-frag:nth-child(6) { animation-delay: 0.93s; }
  .nb-frag:nth-child(7) { left: 2%; top: 47%; --fz: 1.2rem; --o: 0.32; }
  .nb-frag:nth-child(7) > span { animation: nb-drift-1 6s ease-in-out -4.9s infinite alternate; }
  .introb-run .nb-frag:nth-child(7) { animation-delay: 0.98s; }
  .nb-frag:nth-child(8) { left: 28%; top: 55%; --fz: 2.2rem; --o: 0.28; }
  .nb-frag:nth-child(8) > span { animation: nb-drift-2 7s ease-in-out -5.6s infinite alternate; }
  .introb-run .nb-frag:nth-child(8) { animation-delay: 1.03s; }
  .nb-frag:nth-child(9) { left: 56%; top: 61%; --fz: 1.25rem; --o: 0.42; }
  .nb-frag:nth-child(9) > span { animation: nb-drift-3 8s ease-in-out -6.3s infinite alternate; }
  .introb-run .nb-frag:nth-child(9) { animation-delay: 1.08s; }
  .nb-frag:nth-child(10) { left: 6%; top: 67%; --fz: 3.0rem; --o: 0.2; }
  .nb-frag:nth-child(10) > span { animation: nb-drift-2 7s ease-in-out -7.0s infinite alternate; }
  .introb-run .nb-frag:nth-child(10) { animation-delay: 1.13s; }
  .nb-frag:nth-child(11) { left: 44%; top: 74%; --fz: 1.1rem; --o: 0.36; }
  .nb-frag:nth-child(11) > span { animation: nb-drift-1 6s ease-in-out -7.7s infinite alternate; }
  .introb-run .nb-frag:nth-child(11) { animation-delay: 0.96s; }
  .nb-frag:nth-child(12) { left: 74%; top: 79%; --fz: 2.4rem; --o: 0.24; }
  .nb-frag:nth-child(12) > span { animation: nb-drift-2 7s ease-in-out -8.4s infinite alternate; }
  .introb-run .nb-frag:nth-child(12) { animation-delay: 1.01s; }
  .nb-frag:nth-child(13) { left: 14%; top: 85%; --fz: 1.2rem; --o: 0.38; }
  .nb-frag:nth-child(13) > span { animation: nb-drift-3 8s ease-in-out -9.1s infinite alternate; }
  .introb-run .nb-frag:nth-child(13) { animation-delay: 1.06s; }
  .nb-frag:nth-child(14) { left: 38%; top: 91%; --fz: 2.0rem; --o: 0.22; }
  .nb-frag:nth-child(14) > span { animation: nb-drift-1 6s ease-in-out -9.8s infinite alternate; }
  .introb-run .nb-frag:nth-child(14) { animation-delay: 1.11s; }
  .nb-frag:nth-child(15) { left: 64%; top: 89%; --fz: 1.15rem; --o: 0.32; }
  .nb-frag:nth-child(15) > span { animation: nb-drift-2 7s ease-in-out -10.5s infinite alternate; }
  .introb-run .nb-frag:nth-child(15) { animation-delay: 1.16s; }
  .nb-frag:nth-child(16) { left: 24%; top: 16%; --fz: 1.05rem; --o: 0.32; }
  .nb-frag:nth-child(16) > span { animation: nb-drift-3 8s ease-in-out -11.2s infinite alternate; }
  .introb-run .nb-frag:nth-child(16) { animation-delay: 0.99s; }
  .nb-frag:nth-child(17) { left: 58%; top: 30%; --fz: 1.0rem; --o: 0.3; }
  .nb-frag:nth-child(17) > span { animation: nb-drift-1 6s ease-in-out -11.9s infinite alternate; }
  .introb-run .nb-frag:nth-child(17) { animation-delay: 1.04s; }
  .nb-frag:nth-child(18) { left: 18%; top: 40%; --fz: 2.6rem; --o: 0.16; }
  .nb-frag:nth-child(18) > span { animation: nb-drift-3 8s ease-in-out -12.6s infinite alternate; }
  .introb-run .nb-frag:nth-child(18) { animation-delay: 1.09s; }
  .nb-frag:nth-child(19) { left: 78%; top: 55%; --fz: 1.9rem; --o: 0.2; }
  .nb-frag:nth-child(19) > span { animation: nb-drift-1 6s ease-in-out -13.3s infinite alternate; }
  .introb-run .nb-frag:nth-child(19) { animation-delay: 1.14s; }
  .nb-frag:nth-child(20) { left: 34%; top: 66%; --fz: 1.0rem; --o: 0.34; }
  .nb-frag:nth-child(20) > span { animation: nb-drift-3 8s ease-in-out -14.0s infinite alternate; }
  .introb-run .nb-frag:nth-child(20) { animation-delay: 1.19s; }
  .nb-frag:nth-child(21) { left: 60%; top: 12%; --fz: 1.9rem; --o: 0.18; }
  .nb-frag:nth-child(21) > span { animation: nb-drift-2 7s ease-in-out -14.7s infinite alternate; }
  .introb-run .nb-frag:nth-child(21) { animation-delay: 1.02s; }
  .nb-frag:nth-child(22) { left: 84%; top: 30%; --fz: 1.05rem; --o: 0.28; }
  .nb-frag:nth-child(22) > span { animation: nb-drift-2 7s ease-in-out -15.4s infinite alternate; }
  .introb-run .nb-frag:nth-child(22) { animation-delay: 1.07s; }
  .nb-frag:nth-child(23) { left: 20%; top: 78%; --fz: 1.6rem; --o: 0.22; }
  .nb-frag:nth-child(23) > span { animation: nb-drift-1 6s ease-in-out -16.1s infinite alternate; }
  .introb-run .nb-frag:nth-child(23) { animation-delay: 1.12s; }
  .nb-frag:nth-child(24) { left: 52%; top: 50%; --fz: 1.0rem; --o: 0.3; }
  .nb-frag:nth-child(24) > span { animation: nb-drift-2 7s ease-in-out -16.8s infinite alternate; }
  .introb-run .nb-frag:nth-child(24) { animation-delay: 1.17s; }
  .nb-frag:nth-child(25) { left: 80%; top: 68%; --fz: 1.1rem; --o: 0.3; }
  .nb-frag:nth-child(25) > span { animation: nb-drift-3 8s ease-in-out -17.5s infinite alternate; }
  .introb-run .nb-frag:nth-child(25) { animation-delay: 1.22s; }
  .nb-frag:nth-child(26) { left: 0%; top: 93%; --fz: 1.5rem; --o: 0.2; }
  .nb-frag:nth-child(26) > span { animation: nb-drift-2 7s ease-in-out -18.2s infinite alternate; }
  .introb-run .nb-frag:nth-child(26) { animation-delay: 1.05s; }

  .introb .intro-skip { display: inline-flex; animation: intro-rise .4s .3s ease both; }

  /* estado inicial del hero */
  .introb .site-header, .introb .hero::before, .introb .hero .eyebrow, .introb .hero .lead, .introb .hero-actions,
  .introb .hero-l1, .introb .hero-title-break, .introb .hero-dot, .introb .live-stage, .introb .live-cap,
  .introb .live-list li, .introb .tag, .introb .live-alert { opacity: 0; }
  .introb .live-list { animation: none; }
  .introb .bar::after { animation: none; transform: scaleX(0); }

  /* secuencia */
  .introb-run .nb-frag { animation: nb-collapse .7s .9s cubic-bezier(.6, 0, .2, 1) both; }
  .introb-run .nb-stage::before { animation: intro-out .6s 1.05s ease both; }

  .introb-run .hero::before { animation: intro-grid .9s 1s ease both; }
  .introb-run .live-stage { animation: nb-fade .45s 1s ease both; }
  .introb-run .live-list li { animation: nb-fade .3s 1.45s ease both; }
  .introb-run .live-list li:nth-child(2) { animation-delay: 1.5s; }
  .introb-run .live-list li:nth-child(3) { animation-delay: 1.55s; }
  .introb-run .live-list li:nth-child(4) { animation-delay: 1.6s; }
  .introb-run .live-list li:nth-child(5) { animation-delay: 1.65s; }
  .introb-run .live-list li:nth-child(n+6) { animation-delay: 1.7s; }
  .introb-run .tag { animation: nb-tag .32s 1.75s cubic-bezier(.3, 1.5, .5, 1) both; }
  .introb-run .live-list li:nth-child(2) .tag { animation-delay: 1.83s; }
  .introb-run .live-list li:nth-child(3) .tag { animation-delay: 1.91s; }
  .introb-run .live-list li:nth-child(4) .tag { animation-delay: 1.99s; }
  .introb-run .live-list li:nth-child(5) .tag { animation-delay: 2.07s; }
  .introb-run .live-list li:nth-child(n+6) .tag { animation-delay: 2.1s; }
  .introb-run .bar::after { animation: intro-bar .7s 2.05s cubic-bezier(.2, .8, .2, 1) both; }
  .introb-run .live-alert { animation: intro-pop .42s 2.45s cubic-bezier(.3, 1.4, .5, 1) both; }
  .introb-run .live-cap { animation: intro-rise .5s 2.35s ease both; }

  .introb-run .hero-l1 { animation: nb-reveal .65s 1.15s cubic-bezier(.2, .8, .2, 1) both; }
  .introb-run .hero-title-break { animation: nb-reveal .65s 1.3s cubic-bezier(.2, .8, .2, 1) both; }
  .introb-run .hero-dot { animation: nb-tag .35s 1.75s cubic-bezier(.3, 1.6, .5, 1) both; }
  .introb-run .site-header { animation: intro-drop .5s 1.7s cubic-bezier(.2, .8, .2, 1) both; }
  .introb-run .hero .eyebrow { animation: intro-rise .5s 1.6s ease both; }
  .introb-run .hero .lead { animation: intro-rise .55s 1.85s ease both; }
  .introb-run .hero-actions { animation: intro-rise .55s 2s ease both; }
}

@keyframes nb-in { from { opacity: 0; } to { opacity: var(--o); } }
@keyframes nb-drift-1 { from { transform: translate(-10px, -6px); } to { transform: translate(14px, 8px); } }
@keyframes nb-drift-2 { from { transform: translate(12px, 4px); } to { transform: translate(-14px, -8px); } }
@keyframes nb-drift-3 { from { transform: translate(0, 10px); } to { transform: translate(-8px, -10px); } }
@keyframes nb-collapse {
  0%   { opacity: var(--o); transform: none; }
  25%  { opacity: .9; transform: scale(1.04); }
  100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, .5)); }
}
@keyframes nb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nb-tag { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes nb-reveal {
  from { opacity: 0; transform: translateY(.18em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(-30% -5% -30% -5%); }
}

/* =====================================================================
   PROPUESTA C (propuesta-c.html): tipográfica, un solo gesto.
   RUIDO enorme, apilado y desfasado, llena la pantalla; tras una pausa, una banda roja baja
   y lo va borrando: debajo ya está el hero asentado (no se oculta nada del hero). ~2.9 s.
   La cubierta (.nc-cover) se recorta con clip-path y la banda viaja en .nc-track con la misma
   duración, curva y porcentajes: el borde del recorte siempre queda bajo el centro de la banda.
   ===================================================================== */
.nc-stage { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .introc .nc-stage { display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
  .introc .intro-skip { display: inline-flex; animation: intro-rise .4s .3s ease both; }

  .nc-cover {
    position: absolute; inset: 0; overflow: hidden; background: #0c0a0a;
    display: flex; flex-direction: column; justify-content: center;
    clip-path: inset(0 0 0 0);
  }
  .nc-row {
    display: block; white-space: nowrap; font-family: var(--font-display); text-transform: uppercase;
    font-size: max(36vh, 24vw); line-height: .74; letter-spacing: -.005em;
    opacity: 0;
  }
  /* blanco y rojo, cada fila con su "doble" desfasado en el otro color */
  .nc-row-1, .nc-row-3 { color: #F6F2EC; text-shadow: .045em .035em 0 var(--red-deep); }
  .nc-row-2, .nc-row-4 { color: var(--red); text-shadow: -.045em .035em 0 rgba(246, 242, 236, .14); }
  .nc-row-1 { margin-left: -.32em; }
  .nc-row-2 { margin-left: -1.55em; }
  .nc-row-3 { margin-left: -.9em; }
  .nc-row-4 { margin-left: -2.1em; }

  .nc-track { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform: translateY(0); }
  .nc-band {
    position: absolute; left: 0; right: 0; top: 0; height: clamp(88px, 16vh, 168px); transform: translateY(-50%) scaleY(0);
    display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter);
    background: linear-gradient(180deg, var(--red-deep), var(--red) 60%, #D42A30);
    box-shadow: 0 3px 0 var(--yellow), 0 24px 50px -10px rgba(0, 0, 0, .6);
    color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  }
  .nc-band span:last-child { text-transform: none; letter-spacing: .12em; font-size: .95rem; }

  /* secuencia: filas entran (0–0.3 s), pausa sobre RUIDO, barrido 1.0–2.7 s */
  .introc-run .nc-row { animation: nc-in .3s ease-out both, nc-drift 2.9s linear both; }
  .introc-run .nc-row-2, .introc-run .nc-row-4 { animation: nc-in .3s .06s ease-out both, nc-drift-r 2.9s linear both; }
  .introc-run .nc-cover { animation: nc-clip 1.7s 1s cubic-bezier(.65, 0, .35, 1) both; }
  .introc-run .nc-track { animation: nc-track 1.7s 1s cubic-bezier(.65, 0, .35, 1) both; }
  .introc-run .nc-band { animation: nc-band-open .28s 1s cubic-bezier(.2, .8, .2, 1) both; }
}

@keyframes nc-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes nc-drift { from { translate: 0 0; } to { translate: -3vw 0; } }
@keyframes nc-drift-r { from { translate: 0 0; } to { translate: 3vw 0; } }
@keyframes nc-clip {
  0%   { clip-path: inset(0 0 0 0); }
  85%  { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(100% 0 0 0); }
}
@keyframes nc-track {
  0%   { transform: translateY(0); }
  85%  { transform: translateY(100%); }
  100% { transform: translateY(calc(100% + 30vh)); }
}
@keyframes nc-band-open { from { transform: translateY(-50%) scaleY(0); } to { transform: translateY(-50%) scaleY(1); } }

/* =====================================================================
   PROPUESTA D (propuesta-d.html): el ruido de B + terminal de "transacciones".
   Cada comentario suelto aterriza como una línea en una terminal oscura que lo clasifica y lo confirma;
   la terminal está sobre el panel en vivo (main.js mide --tl/--tt/--tw/--th) y al final se funde en él.
   Rojo: solo los indicadores ">" / "$". Amarillo: solo el "■ confirmado" final y la alerta existente. ~3.2 s.
   ===================================================================== */
.nd-stage { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .introd .nd-stage { display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
  .nd-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #171313, #0a0909 72%); }
  .introd .intro-skip { display: inline-flex; animation: intro-rise .4s .3s ease both; }

  .nd-frag {
    position: absolute; white-space: nowrap; transform-origin: 0 50%;
    font-size: var(--fz); font-weight: 500; line-height: 1.2; color: var(--text); opacity: var(--o);
    animation: nb-in .6s ease both;
  }
  .nd-frag > span { display: block; }
  .nd-d { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; color: #E9E3DB; }

  .nd-frag:nth-child(1) { left: 6%; top: 10%; --fz: 1.25rem; --o: 0.42; }
  .nd-frag:nth-child(1) > span { animation: nb-drift-1 6s ease-in-out -0.7s infinite alternate; }
  .introd-run .nd-frag:nth-child(1):not([data-line]) { animation-delay: 1.70s; }
  .nd-frag:nth-child(2) { left: 40%; top: 6%; --fz: 2.6rem; --o: 0.2; }
  .nd-frag:nth-child(2) > span { animation: nb-drift-2 7s ease-in-out -1.4s infinite alternate; }
  .introd-run .nd-frag:nth-child(2):not([data-line]) { animation-delay: 1.55s; }
  .nd-frag:nth-child(3) { left: 4%; top: 30%; --fz: 1.2rem; --o: 0.4; }
  .nd-frag:nth-child(3) > span { animation: nb-drift-3 8s ease-in-out -2.1s infinite alternate; }
  .introd-run .nd-frag:nth-child(3):not([data-line]) { animation-delay: 1.40s; }
  .nd-frag:nth-child(4) { left: 30%; top: 22%; --fz: 2.4rem; --o: 0.22; }
  .nd-frag:nth-child(4) > span { animation: nb-drift-1 6s ease-in-out -2.8s infinite alternate; }
  .introd-run .nd-frag:nth-child(4):not([data-line]) { animation-delay: 1.75s; }
  .nd-frag:nth-child(5) { left: 62%; top: 4%; --fz: 1.1rem; --o: 0.34; }
  .nd-frag:nth-child(5) > span { animation: nb-drift-2 7s ease-in-out -3.5s infinite alternate; }
  .introd-run .nd-frag:nth-child(5):not([data-line]) { animation-delay: 1.60s; }
  .nd-frag:nth-child(6) { left: 10%; top: 52%; --fz: 1.3rem; --o: 0.44; }
  .nd-frag:nth-child(6) > span { animation: nb-drift-2 7s ease-in-out -4.2s infinite alternate; }
  .introd-run .nd-frag:nth-child(6):not([data-line]) { animation-delay: 1.45s; }
  .nd-frag:nth-child(7) { left: 48%; top: 40%; --fz: 1.1rem; --o: 0.36; }
  .nd-frag:nth-child(7) > span { animation: nb-drift-3 8s ease-in-out -4.9s infinite alternate; }
  .introd-run .nd-frag:nth-child(7):not([data-line]) { animation-delay: 1.80s; }
  .nd-frag:nth-child(8) { left: 2%; top: 70%; --fz: 2.8rem; --o: 0.2; }
  .nd-frag:nth-child(8) > span { animation: nb-drift-1 6s ease-in-out -5.6s infinite alternate; }
  .introd-run .nd-frag:nth-child(8):not([data-line]) { animation-delay: 1.65s; }
  .nd-frag:nth-child(9) { left: 34%; top: 62%; --fz: 1.15rem; --o: 0.38; }
  .nd-frag:nth-child(9) > span { animation: nb-drift-2 7s ease-in-out -6.3s infinite alternate; }
  .introd-run .nd-frag:nth-child(9):not([data-line]) { animation-delay: 1.50s; }
  .nd-frag:nth-child(10) { left: 70%; top: 86%; --fz: 2.4rem; --o: 0.22; }
  .nd-frag:nth-child(10) > span { animation: nb-drift-3 8s ease-in-out -7.0s infinite alternate; }
  .introd-run .nd-frag:nth-child(10):not([data-line]) { animation-delay: 1.35s; }
  .nd-frag:nth-child(11) { left: 38%; top: 80%; --fz: 1.2rem; --o: 0.36; }
  .nd-frag:nth-child(11) > span { animation: nb-drift-1 6s ease-in-out -7.7s infinite alternate; }
  .introd-run .nd-frag:nth-child(11):not([data-line]) { animation-delay: 1.70s; }
  .nd-frag:nth-child(12) { left: 54%; top: 93%; --fz: 1.1rem; --o: 0.3; }
  .nd-frag:nth-child(12) > span { animation: nb-drift-2 7s ease-in-out -8.4s infinite alternate; }
  .introd-run .nd-frag:nth-child(12):not([data-line]) { animation-delay: 1.55s; }
  .nd-frag:nth-child(13) { left: 16%; top: 88%; --fz: 2.0rem; --o: 0.24; }
  .nd-frag:nth-child(13) > span { animation: nb-drift-3 8s ease-in-out -9.1s infinite alternate; }
  .introd-run .nd-frag:nth-child(13):not([data-line]) { animation-delay: 1.40s; }
  .nd-frag:nth-child(14) { left: 66%; top: 22%; --fz: 1.05rem; --o: 0.3; }
  .nd-frag:nth-child(14) > span { animation: nb-drift-1 6s ease-in-out -9.8s infinite alternate; }
  .introd-run .nd-frag:nth-child(14):not([data-line]) { animation-delay: 1.75s; }

  .nd-term {
    position: absolute; left: var(--tl, 5vw); top: var(--tt, 20vh); width: var(--tw, 90vw); height: var(--th, 60vh);
    display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
    background: rgba(10, 9, 9, .97); border: 1px solid var(--line-strong);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(199, 30, 36, .1);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
    font-size: .9rem; line-height: 1.6; color: var(--muted); opacity: 0;
  }
  .nd-term-head { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .74rem; letter-spacing: .08em; }
  .nd-dots { display: inline-flex; gap: .35rem; }
  .nd-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(246, 242, 236, .18); }
  .nd-term-body { padding: .8rem 1.1rem; overflow: hidden; }
  .nd-line { margin: 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nd-type { width: 0; }
  .nd-instant { opacity: 0; color: var(--text); }
  .nd-conf { color: var(--text); }
  .nd-p { color: var(--red-bright); }
  .nd-ok { color: var(--yellow); font-weight: 700; }
  .nd-caret { opacity: 0; }
  .nd-caret i { display: inline-block; width: .6em; height: 1.05em; vertical-align: -.18em; background: var(--text); animation: nd-blink .9s steps(1) infinite; }

  /* estado inicial del hero (igual que B) */
  .introd .site-header, .introd .hero::before, .introd .hero .eyebrow, .introd .hero .lead, .introd .hero-actions,
  .introd .hero-l1, .introd .hero-title-break, .introd .hero-dot, .introd .live-stage, .introd .live-cap,
  .introd .live-alert { opacity: 0; }
  .introd .live-list { animation: none; }
  .introd .bar::after { animation: none; transform: scaleX(0); }

  /* secuencia: terminal → líneas (horario en main.js: --d) → fragmentos aterrizan → se funde en el panel */
  .introd-run .nd-term { animation: nd-term-in .3s .05s cubic-bezier(.2, .8, .2, 1) both, nd-out .3s 2.45s ease both; }
  .introd-run .nd-type { animation: nd-type calc(var(--n, 20) * 6ms) steps(var(--n, 20), end) var(--d, 0s) both; }
  .introd-run .nd-instant { animation: nd-flash .4s var(--d, 0s) ease-out both; }
  .introd-run .nd-caret { animation: nb-fade .01s var(--d, 2.3s) both; }
  .introd-run .nd-frag[data-line] { animation: nd-land .34s var(--fd, .3s) cubic-bezier(.6, 0, .2, 1) both; }
  .introd-run .nd-frag:not([data-line]) { animation: nd-sink .5s 1.5s cubic-bezier(.6, 0, .2, 1) both; }
  .introd-run .nd-stage::before { animation: intro-out .45s 2.2s ease both; }

  .introd-run .hero::before { animation: intro-grid .8s 2.2s ease both; }
  .introd-run .live-stage { animation: nb-fade .35s 2.4s ease both; }
  .introd-run .bar::after { animation: intro-bar .6s 2.55s cubic-bezier(.2, .8, .2, 1) both; }
  .introd-run .live-alert { animation: intro-pop .4s 2.75s cubic-bezier(.3, 1.4, .5, 1) both; }
  .introd-run .live-cap { animation: intro-rise .45s 2.65s ease both; }
  .introd-run .hero-l1 { animation: nb-reveal .6s 2.2s cubic-bezier(.2, .8, .2, 1) both; }
  .introd-run .hero-title-break { animation: nb-reveal .6s 2.3s cubic-bezier(.2, .8, .2, 1) both; }
  .introd-run .hero-dot { animation: nb-tag .35s 2.6s cubic-bezier(.3, 1.6, .5, 1) both; }
  .introd-run .site-header { animation: intro-drop .5s 2.4s cubic-bezier(.2, .8, .2, 1) both; }
  .introd-run .hero .eyebrow { animation: intro-rise .45s 2.3s ease both; }
  .introd-run .hero .lead { animation: intro-rise .5s 2.5s ease both; }
  .introd-run .hero-actions { animation: intro-rise .5s 2.6s ease both; }
}

@keyframes nd-term-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes nd-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes nd-type { from { width: 0; } to { width: calc(var(--n, 20) * 1ch); } }
@keyframes nd-flash { from { opacity: 0; background: rgba(246, 242, 236, .14); } to { opacity: 1; background: transparent; } }
@keyframes nd-blink { 50% { opacity: 0; } }
@keyframes nd-land {
  0%   { opacity: var(--o); transform: none; }
  20%  { opacity: 1; }
  85%  { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, .5)); }
  100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, .5)); }
}
@keyframes nd-sink {
  0%   { opacity: var(--o); transform: none; }
  100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, .3)); }
}

/* =====================================================================
   PROPUESTA E (propuesta-e.html) = 1 + 4, una sola secuencia (~3.5 s):
   botón rojo al centro → se presiona, dos anillos → el clic libera el ruido (los fragmentos salen del botón)
   y aparece la terminal sobre el panel → líneas y fragmentos confirmados → el ruido se hunde en la terminal,
   la terminal se funde en el panel, el titular se revela y el botón vuela a ser el punto de "decisión".
   Reutiliza las piezas de A (.intro-stage/.intro-fly/.intro-btn/.intro-ring) y de D (.nd-frag/.nd-term)
   con animaciones propias bajo html.introe / html.introe-run.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .introe .intro-stage { display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
  .introe .intro-stage > * { grid-area: 1 / 1; }
  .introe .intro-skip { display: inline-flex; animation: intro-rise .4s .3s ease both; }
  .ne-noise { position: absolute; inset: 0; }
  @media (max-width: 699px) { .introe .intro-stage { align-items: start; padding-top: 12vh; } }

  /* antes del clic: solo el botón */
  .introe .ne-noise .nd-frag { opacity: 0; animation: none; }
  .introe .site-header, .introe .hero::before, .introe .hero .eyebrow, .introe .hero .lead, .introe .hero-actions,
  .introe .hero-l1, .introe .hero-title-break, .introe .hero-dot, .introe .live-stage, .introe .live-cap,
  .introe .live-alert { opacity: 0; }
  .introe .live-list { animation: none; }
  .introe .bar::after { animation: none; transform: scaleX(0); }

  /* 1. el botón: clic, rebote y descanso a .72 mientras trabaja la terminal; anillos */
  .introe-run .intro-btn { animation: ne-press 1.1s .1s cubic-bezier(.3, 0, .2, 1) both; }
  .introe-run .intro-ring { animation: intro-ring 1.15s .3s cubic-bezier(.1, .6, .2, 1) both; }
  .introe-run .intro-ring-2 { animation-delay: .46s; }
  .introe-run .intro-stage::after { animation: intro-out .45s .55s ease both; }
  .introe-run .intro-stage::before { animation: intro-out .45s 2.3s ease both; }

  /* 2. el clic libera el ruido; terminal sobre el panel (líneas con horario de main.js: --d) */
  .introe-run .ne-noise .nd-frag { animation: ne-burst .6s .45s cubic-bezier(.2, .8, .2, 1) both, nd-sink .5s 1.95s cubic-bezier(.6, 0, .2, 1) forwards; }
  .introe-run .ne-noise .nd-frag:nth-child(1):not([data-line]) { animation-delay: 0.49s, 2.13s; }
  .introe-run .ne-noise .nd-frag:nth-child(2):not([data-line]) { animation-delay: 0.53s, 2.01s; }
  .introe-run .ne-noise .nd-frag:nth-child(3):not([data-line]) { animation-delay: 0.57s, 1.89s; }
  .introe-run .ne-noise .nd-frag:nth-child(4):not([data-line]) { animation-delay: 0.61s, 2.17s; }
  .introe-run .ne-noise .nd-frag:nth-child(5):not([data-line]) { animation-delay: 0.45s, 2.05s; }
  .introe-run .ne-noise .nd-frag:nth-child(6):not([data-line]) { animation-delay: 0.49s, 1.93s; }
  .introe-run .ne-noise .nd-frag:nth-child(7):not([data-line]) { animation-delay: 0.53s, 2.21s; }
  .introe-run .ne-noise .nd-frag:nth-child(8):not([data-line]) { animation-delay: 0.57s, 2.09s; }
  .introe-run .ne-noise .nd-frag:nth-child(9):not([data-line]) { animation-delay: 0.61s, 1.97s; }
  .introe-run .ne-noise .nd-frag:nth-child(10):not([data-line]) { animation-delay: 0.45s, 1.85s; }
  .introe-run .ne-noise .nd-frag:nth-child(11):not([data-line]) { animation-delay: 0.49s, 2.13s; }
  .introe-run .ne-noise .nd-frag:nth-child(12):not([data-line]) { animation-delay: 0.53s, 2.01s; }
  .introe-run .ne-noise .nd-frag:nth-child(13):not([data-line]) { animation-delay: 0.57s, 1.89s; }
  .introe-run .ne-noise .nd-frag:nth-child(14):not([data-line]) { animation-delay: 0.61s, 2.17s; }
  .introe-run .ne-noise .nd-frag[data-line] { animation: ne-burst .6s .45s cubic-bezier(.2, .8, .2, 1) both, nd-land .34s var(--fd, 1s) cubic-bezier(.6, 0, .2, 1) forwards; }
  .introe-run .nd-term { animation: nd-term-in .3s .55s cubic-bezier(.2, .8, .2, 1) both, nd-out .3s 2.6s ease forwards; }
  .introe-run .nd-type { animation: nd-type calc(var(--n, 20) * 6ms) steps(var(--n, 20), end) var(--d, 0s) both; }
  .introe-run .nd-instant { animation: nd-flash .4s var(--d, 0s) ease-out both; }
  .introe-run .nd-caret { animation: nb-fade .01s var(--d, 2.6s) both; }

  /* 3. la terminal se vuelve el panel; titular; el botón vuela a ser el punto */
  .introe-run .live-stage { animation: nb-fade .35s 2.55s ease both; }
  .introe-run .hero::before { animation: intro-grid .8s 2.3s ease both; }
  .introe-run .hero-l1 { animation: nb-reveal .6s 2.35s cubic-bezier(.2, .8, .2, 1) both; }
  .introe-run .hero-title-break { animation: nb-reveal .6s 2.45s cubic-bezier(.2, .8, .2, 1) both; }
  .introe-run .intro-fly { animation: intro-fly .5s 2.5s cubic-bezier(.7, 0, .25, 1) both, intro-vanish .01s 3.01s both; }
  .introe-run .hero-dot { animation: intro-show .01s 3s both; }
  .introe-run .hero .eyebrow { animation: intro-rise .45s 2.5s ease both; }
  .introe-run .site-header { animation: intro-drop .5s 2.6s cubic-bezier(.2, .8, .2, 1) both; }
  .introe-run .hero .lead { animation: intro-rise .5s 2.7s ease both; }
  .introe-run .hero-actions { animation: intro-rise .5s 2.8s ease both; }
  .introe-run .bar::after { animation: intro-bar .6s 2.75s cubic-bezier(.2, .8, .2, 1) both; }
  .introe-run .live-cap { animation: intro-rise .45s 2.85s ease both; }
  .introe-run .live-alert { animation: intro-pop .4s 3s cubic-bezier(.3, 1.4, .5, 1) both; }
}

@keyframes ne-press {
  0%   { transform: none; }
  15%  { transform: scale(.86); filter: brightness(.82); }
  32%  { transform: scale(1.05); filter: none; }
  42%  { transform: none; }
  100% { transform: scale(.72); }
}
@keyframes ne-burst {
  from { opacity: 0; translate: var(--cx, 0) var(--cy, 0); scale: .3; }
  to   { opacity: var(--o); translate: 0 0; scale: 1; }
}

/* =====================================================================
   PROPUESTA E · PANEL DEMO (solo propuesta-e.html: .ne-live / .ne-demo; A–D no usan estas clases)
   Tras la intro, main.js (neDemo) pone .ne-loop y .b1/.b2/.b3 en .ne-live: ciclo de 15 s (5.8 + 4.2 + 5 s).
   1. comentarios: la escucha recorre YouTube, Facebook, X, Instagram y TikTok (la fila nueva enciende su red)
   2. corte por tema con conteos de ejemplo + "armando el reporte del día"
   3. el reporte del día se dibuja dentro del panel y queda "listo"; luego vuelve a 1.
   Sin JS o con reduced-motion: panel asentado (comentarios + las cinco redes), sin ciclo.
   ===================================================================== */
.ne-title { display: grid; min-width: 0; }
.ne-title > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ne-t2, .ne-t3 { opacity: 0; transform: translateY(6px); }
.ne-steps { margin-left: auto; display: none; gap: 4px; }
.ne-steps i { position: relative; width: 18px; height: 3px; border-radius: 2px; background: rgba(246, 242, 236, .14); overflow: hidden; }
.ne-steps i::after { content: ""; position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(0); }

.ne-nets { display: flex; align-items: center; gap: .35rem; padding: .55rem 1.1rem; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .12); overflow: hidden; }
.ne-nets-label { display: none; margin-right: .3rem; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ne-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem; border: 1px solid var(--line-strong); border-radius: 6px;
  font-size: .72rem; color: #D4CCC3; white-space: nowrap;
}
.ne-chip::before { content: ""; display: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }

.ne-views { --row: 54px; display: grid; grid-template-rows: calc(var(--row) * 5); overflow: hidden; }
.ne-views > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }
.ne-demo .live-feed { height: calc(var(--row) * 5); }
.ne-via { display: none; min-width: 4.4rem; margin-right: .55rem; font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); vertical-align: 1px; }

/* 2. corte por tema */
.ne-stats, .ne-report, .ne-build { opacity: 0; visibility: hidden; }
.ne-stats { display: flex; flex-direction: column; justify-content: center; padding: .8rem 1.1rem; transform: translateY(10px); }
.ne-stats-head { display: flex; justify-content: space-between; margin-bottom: .7rem; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ne-corte { display: grid; gap: .6rem; }
.ne-corte li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) 2rem; align-items: center; column-gap: .75rem; row-gap: .15rem; }
.ne-cname { font-size: .88rem; font-weight: 600; color: #E9E3DB; }
.ne-cbar { position: relative; height: 8px; border-radius: 4px; background: rgba(246, 242, 236, .08); overflow: hidden; }
.ne-cbar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); transform-origin: left; transform: scaleX(var(--w)); }
.ne-c1 { --w: 1; }  .ne-c1 .ne-cbar i { background: linear-gradient(90deg, #E2BE01, var(--yellow)); }
.ne-c2 { --w: .64; } .ne-c3 { --w: .5; } .ne-c4 { --w: .36; }
.ne-corte b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.ne-corte small { grid-column: 2 / 4; font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 3. reporte del día */
.ne-report { display: flex; padding: .8rem 1.1rem; transform: translateY(10px); }
.ne-card { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: .9rem 1rem; border-radius: 12px; background-color: rgba(246, 242, 236, .04); }
.ne-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ne-frame rect { width: calc(100% - 1px); height: calc(100% - 1px); fill: none; stroke: rgba(246, 242, 236, .24); stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 0; }
.ne-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ne-card-title { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; letter-spacing: .02em; color: var(--text); }
.ne-state { display: grid; }
.ne-state > span {
  grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px;
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.ne-state-wip { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); opacity: 0; }
.ne-state-ok { color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(255, 214, 0, .55); }
.ne-state-ok .icon { width: 12px; height: 12px; }
.ne-card-meta { margin: .35rem 0 0; font-size: .7rem; color: var(--muted); }
.ne-findings { margin: .8rem 0 0; padding: 0; list-style: none; counter-reset: ne-f; display: grid; gap: .5rem; }
.ne-findings li { position: relative; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .5rem; counter-increment: ne-f; font-size: .86rem; line-height: 1.35; color: #E9E3DB; }
.ne-findings li::before { content: counter(ne-f); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; color: var(--red-bright); }
.ne-skel { position: absolute; left: 1.6rem; top: .3em; width: 72%; height: .75em; border-radius: 4px; background: rgba(246, 242, 236, .1); opacity: 0; }

/* abajo: temas ahora ↔ armando el reporte */
.ne-bottom { display: grid; }
.ne-bottom > * { grid-area: 1 / 1; min-width: 0; }
.ne-build { display: flex; flex-direction: column; justify-content: center; }
.ne-build .live-topics-label { margin-bottom: .3rem; color: var(--text); }
.ne-build-steps { display: grid; font-size: .82rem; color: #D4CCC3; }
.ne-build-steps > span { grid-area: 1 / 1; opacity: 0; }
.ne-track { position: relative; display: block; height: 4px; margin-top: .65rem; border-radius: 2px; background: rgba(246, 242, 236, .08); overflow: hidden; }
.ne-track::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); transform-origin: left; transform: scaleX(0); }

@media (min-width: 520px) {
  .ne-views { --row: 58px; }
  .ne-nets-label, .ne-via { display: inline-block; }
  .ne-chip::before { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  .ne-title > span { transition: opacity .4s ease, transform .4s ease; }
  .ne-chip, .ne-chip::before { transition: color .3s, border-color .3s, background-color .3s, opacity .3s, box-shadow .3s; }
  .ne-demo .live-feed, .ne-stats, .ne-report { transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s .5s; }
  .ne-topics, .ne-build { transition: opacity .35s ease, visibility 0s .35s; }

  /* encabezado: título y barra de progreso de los tres tiempos */
  .ne-loop .ne-steps { display: inline-flex; }
  .ne-loop.b1 .ne-steps i:nth-child(1)::after { animation: ne-fill 5.8s linear both; }
  .ne-loop.b2 .ne-steps i:nth-child(1)::after, .ne-loop.b3 .ne-steps i:nth-child(-n+2)::after { transform: none; }
  .ne-loop.b2 .ne-steps i:nth-child(2)::after { animation: ne-fill 4.2s linear both; }
  .ne-loop.b3 .ne-steps i:nth-child(3)::after { animation: ne-fill 5s linear both; }
  .ne-loop.b2 .ne-t1, .ne-loop.b3 .ne-t1 { opacity: 0; transform: translateY(-6px); }
  .ne-loop.b2 .ne-t2, .ne-loop.b3 .ne-t3 { opacity: 1; transform: none; }

  /* redes: una a la vez en 1, todas juntas en 2 (el corte suma las cinco), en reposo en 3 */
  .ne-loop .ne-chip { opacity: .55; }
  .ne-loop .ne-chip.is-on, .ne-loop.b2 .ne-chip { opacity: 1; color: #fff; border-color: rgba(229, 72, 77, .7); background-color: rgba(199, 30, 36, .18); }
  .ne-loop .ne-chip.is-on::before, .ne-loop.b2 .ne-chip::before { background-color: var(--red-bright); opacity: 1; box-shadow: 0 0 0 3px rgba(229, 72, 77, .25); }
  .ne-loop.b3 .ne-chip { opacity: .4; }

  /* 1. comentarios: main.js sube una fila por paso (--i); la nueva se marca */
  .ne-loop .live-list { animation: none; transform: translateY(calc(var(--row) * var(--i, 0) * -1)); transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
  .ne-loop .live-list.is-snap { transition: none; }
  .ne-loop .live-list li { transition: background-color .6s ease; }
  .ne-loop .live-list li.is-new { background-color: rgba(199, 30, 36, .12); }
  .ne-loop .live-list li.is-new .ne-via { color: var(--red-bright); }
  .ne-loop.b2 .live-feed, .ne-loop.b3 .live-feed { opacity: 0; transform: translateY(-12px); }

  /* 2. corte */
  .ne-loop.b2 .ne-stats, .ne-loop.b3 .ne-report {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .45s .15s ease, transform .55s .15s cubic-bezier(.2, .8, .2, 1), visibility 0s;
  }
  .ne-loop .ne-cbar i { transform: scaleX(0); }
  .ne-loop.b2 .ne-cbar i { transform: scaleX(var(--w)); transition: transform 1.1s .35s cubic-bezier(.2, .8, .2, 1); }
  .ne-loop.b2 .ne-c2 .ne-cbar i { transition-delay: .45s; }
  .ne-loop.b2 .ne-c3 .ne-cbar i { transition-delay: .55s; }
  .ne-loop.b2 .ne-c4 .ne-cbar i { transition-delay: .65s; }
  .ne-loop .ne-corte small { opacity: 0; }
  .ne-loop.b2 .ne-corte small { opacity: 1; transition: opacity .4s 1.4s ease; }
  .ne-loop.b2 .ne-topics { opacity: 0; visibility: hidden; }
  .ne-loop.b2 .ne-build { opacity: 1; visibility: visible; transition: opacity .35s .2s ease, visibility 0s; }
  .ne-loop.b2 .ne-track::after { animation: ne-fill 3.6s .3s cubic-bezier(.4, 0, .6, 1) both; }
  .ne-loop.b2 .ne-build-steps > span { animation: ne-step 1.2s .3s both; }
  .ne-loop.b2 .ne-build-steps > span:nth-child(2) { animation-delay: 1.5s; }
  .ne-loop.b2 .ne-build-steps > span:nth-child(3) { animation: ne-in .3s 2.7s both; }

  /* 3. el reporte se dibuja: marco, título, hallazgos (primero el esqueleto), "listo" */
  .ne-loop.b3 .ne-frame rect { animation: ne-draw .9s .2s cubic-bezier(.6, 0, .3, 1) both; }
  .ne-loop.b3 .ne-card { animation: ne-cardbg .5s .8s ease both; }
  .ne-loop.b3 .ne-card-title { animation: ne-wipe .5s .5s cubic-bezier(.4, 0, .2, 1) both; }
  .ne-loop.b3 .ne-card-meta { animation: ne-in .35s .85s ease both; }
  .ne-loop.b3 .ne-skel { animation: ne-in .25s .9s ease both, ne-out .2s 1.35s forwards; }
  .ne-loop.b3 .ne-findings li:nth-child(2) .ne-skel { animation-delay: .95s, 1.8s; }
  .ne-loop.b3 .ne-findings li:nth-child(3) .ne-skel { animation-delay: 1s, 2.25s; }
  .ne-loop.b3 .ne-findings li::before { animation: ne-in .3s 1.3s ease both; }
  .ne-loop.b3 .ne-findings li:nth-child(2)::before { animation-delay: 1.75s; }
  .ne-loop.b3 .ne-findings li:nth-child(3)::before { animation-delay: 2.2s; }
  .ne-loop.b3 .ne-findings li > span { animation: ne-wipe .55s 1.35s cubic-bezier(.4, 0, .2, 1) both; }
  .ne-loop.b3 .ne-findings li:nth-child(2) > span { animation-delay: 1.8s; }
  .ne-loop.b3 .ne-findings li:nth-child(3) > span { animation-delay: 2.25s; }
  .ne-loop.b3 .ne-state-wip { animation: ne-in .3s .6s ease both, ne-out .2s 2.85s forwards; }
  .ne-loop.b3 .ne-state-ok { animation: ne-pop .45s 2.95s cubic-bezier(.3, 1.4, .5, 1) both; }

  /* alerta amarilla: visible en 1 y al inicio de 2; se va antes del reporte */
  .ne-loop .live-alert { animation: none; transition: opacity .35s ease, transform .35s ease; }
  .ne-loop.ne-noalert .live-alert { opacity: 0; transform: translateY(-8px) scale(.97); }
}

@keyframes ne-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ne-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ne-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ne-step {
  0%   { opacity: 0; transform: translateY(4px); }
  15%, 85% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes ne-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ne-cardbg { from { background-color: transparent; } }
@keyframes ne-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ne-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.ne-demo .live-pill { flex-shrink: 0; white-space: nowrap; }
/* móvil (revisión 8 oct): la fila de redes no debe ensanchar la columna del hero (en ≤360 px empujaba la página
   y cortaba el texto a la derecha); en pantallas angostas las redes bajan de línea y el título del panel parte en dos */
.ne-live { min-width: 0; }
@media (max-width: 519px) {
  .ne-nets { flex-wrap: wrap; row-gap: .35rem; }
  .ne-title > span { white-space: normal; line-height: 1.2; }
}
/* móvil (8 oct): botones del hero compactos solo en E/F (:has → index y B–D no cambian); se ciñen a su texto
   y, si caben, van en una fila; si no, se apilan a su ancho. Escritorio sin cambios. */
@media (max-width: 519px) {
  .hero-grid:has(.ne-live) .hero-actions { gap: .5rem; }
  .hero-grid:has(.ne-live) .hero-actions .btn {
    flex: 0 0 auto; min-height: 40px; padding: .45rem .8rem; gap: .4rem;
    border-radius: 11px; font-size: .9rem; line-height: 1.2;
  }
  .hero-grid:has(.ne-live) .hero-actions .btn-big { box-shadow: 0 10px 24px -12px rgba(199, 30, 36, .75); }
  .hero-grid:has(.ne-live) .hero-actions .btn .icon { width: 16px; height: 16px; }
}
/* móvil (8 oct): comentarios del panel E/F con más texto visible: letra un poco menor y etiqueta más chica;
   siguen en una línea con "…" si no caben */
@media (max-width: 519px) {
  .ne-demo .live-list li { gap: .6rem; padding: 0 1rem; }
  .ne-demo .live-list p { font-size: .82rem; }
  .ne-demo .live-list .tag { padding: .16rem .42rem; font-size: .58rem; letter-spacing: .05em; }
}

/* =====================================================================
   PROPUESTA F · SERVICIOS (solo propuesta-f.html: clases .nf-*; A–E no las usan)
   Un servicio a la vez: riel con los diez nombres + escenario grande (número, nombre, la escena ya escrita
   y un visual abstracto en HTML/CSS). main.js (nfServices) avanza solo cada 6 s; pasar el cursor o
   hacer clic elige y pausa. Sin JS: los diez servicios en columna. Con reduced-motion: sin avance ni animación.
   ===================================================================== */
.nf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.nf > * { min-width: 0; }
html:not(.js) .nf-railwrap { display: none; }
.nf-rail {
  display: flex; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: .15rem .15rem .6rem; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent);
}
.nf-rail::-webkit-scrollbar { display: none; }
.nf-tab {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .55rem; overflow: hidden;
  padding: .55rem .95rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
  color: var(--muted); font: 600 .92rem/1.2 var(--font-body); text-align: left; cursor: pointer; scroll-snap-align: start;
  transition: color .25s, background-color .25s, border-color .25s;
}
.nf-tab:hover { color: var(--text); }
.nf-tab:focus-visible, .nf-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.nf-tab-num { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; line-height: 1; letter-spacing: .04em; color: var(--red-bright); }
.nf-tab[aria-selected="true"] { color: var(--text); border-color: rgba(229, 72, 77, .7); background-color: rgba(199, 30, 36, .16); }
.nf-tab-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red-bright); transform-origin: left; transform: scaleX(0); }
.nf-toggle {
  display: none; margin-top: .5rem; padding: .35rem .8rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--muted); font: 600 .72rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.nf-toggle:hover { color: var(--text); border-color: var(--text); }
.nf.is-auto .nf-toggle { display: inline-flex; }

.nf-stage {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(45, 40, 40, .7), rgba(27, 24, 24, .9));
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85);
}
.nf-stage::before {
  content: ""; position: absolute; inset: -30% -20% auto auto; width: 70%; height: 90%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(199, 30, 36, .22), transparent 75%);
}
.nf-panel { display: grid; gap: 1.75rem; padding: clamp(1.4rem, 4vw, 3rem); }
html:not(.js) .nf-panel + .nf-panel { border-top: 1px solid var(--line); }
.js .nf-stage { display: grid; }
.js .nf-panel { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; }
.js .nf-panel.is-active { visibility: visible; opacity: 1; }
.nf-num {
  display: block; font-family: var(--font-display); font-size: clamp(5rem, 11vw, 9rem); line-height: .8; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--red-bright);
}
.nf-name { margin-top: 1rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: .95; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.nf-moment { margin-top: 1.1rem; max-width: 34rem; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; line-height: 1.4; color: var(--text); text-wrap: pretty; }
.nf-more { margin-top: .9rem; max-width: 32rem; font-size: .95rem; color: var(--muted); }
.nf-vis {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  min-height: 15rem; padding: 1.5rem; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .22);
}
.nf-v { width: 100%; max-width: 21rem; }
.nf-v-cap { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nf-skl { display: block; height: .55rem; border-radius: 4px; background: rgba(246, 242, 236, .16); }
.w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; }
.w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w80 { width: 80%; }
.nf-chip { flex: none; padding: .2rem .55rem; border-radius: 999px; font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--text); background: rgba(246, 242, 236, .12); }
.nf-chip-y { color: var(--yellow); background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 214, 0, .5); }
.nf-chip-r { color: #FF9A9D; background: rgba(199, 30, 36, .25); }
.nf-line { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(246, 242, 236, .04); }
.nf-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* 01 mapa que se colorea estado por estado */
.nf-v-map { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; max-width: 17rem; }
.nf-v-map i { aspect-ratio: 1; border-radius: 4px; background: rgba(246, 242, 236, .08); }
.nf-v-map .t1 { background: rgba(199, 30, 36, .35); } .nf-v-map .t2 { background: rgba(199, 30, 36, .65); }
.nf-v-map .t3 { background: var(--red); }            .nf-v-map .t4 { background: rgba(255, 214, 0, .85); }
.nf-v-map i:nth-child(1), .nf-v-map i:nth-child(2), .nf-v-map i:nth-child(6), .nf-v-map i:nth-child(12),
.nf-v-map i:nth-child(19), .nf-v-map i:nth-child(20), .nf-v-map i:nth-child(24) { visibility: hidden; }
/* 02 comentarios con tema, tono y quién lo mueve */
.nf-v-listen, .nf-live-rows { display: grid; gap: .5rem; }
/* 03 ranking */
.nf-rk { display: grid; grid-template-columns: 1.3rem 4.5rem minmax(0, 1fr) 1rem; align-items: center; gap: .7rem; padding: .65rem .2rem; border-bottom: 1px solid var(--line); }
.nf-rk b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1; color: var(--text); }
.nf-rk .nf-skl { width: 100%; }
.nf-rk-bar { height: 6px; border-radius: 3px; background: rgba(246, 242, 236, .08); overflow: hidden; }
.nf-rk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); transform-origin: left; transform: scaleX(var(--w, .5)); }
.nf-rk:nth-child(1) { --w: .92; } .nf-rk:nth-child(2) { --w: .74; } .nf-rk:nth-child(3) { --w: .58; } .nf-rk:nth-child(4) { --w: .41; }
.nf-rk em { font-style: normal; font-size: .7rem; text-align: center; color: var(--muted); }
.nf-rk .up { color: var(--yellow); } .nf-rk .dn { color: var(--red-bright); }
/* 04 folio */
.nf-v-folio { padding: 1rem 1.1rem 1.1rem; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(246, 242, 236, .05); }
.nf-folio-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .65rem; margin-bottom: .4rem; border-bottom: 1px dashed var(--line-strong); }
.nf-folio-head span:first-child { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .04em; }
.nf-dots { color: var(--muted); letter-spacing: .2em; }
.nf-folio-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: .6rem; padding: .45rem 0; font-size: .78rem; color: var(--muted); }
.nf-status { display: grid; justify-items: start; }
.nf-status > span { grid-area: 1 / 1; padding: .18rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text); background: rgba(246, 242, 236, .12); }
.nf-status > span:nth-child(n+2) { opacity: 0; }
.nf-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: .7rem; }
.nf-steps3 i { height: 4px; border-radius: 2px; background: rgba(246, 242, 236, .1); }
.nf-steps3 i:first-child { background: var(--red); }
/* 05 misiones */
.nf-v-mission { display: grid; gap: .5rem; }
.nf-ms { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(246, 242, 236, .04); }
.nf-box { position: relative; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong); }
.nf-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); }
.nf-ms:first-child .nf-box { background: var(--red); border-color: var(--red); }
.nf-ms:first-child .nf-box::after { transform: rotate(45deg); }
.nf-ms-total { margin-top: .5rem; display: grid; gap: .45rem; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nf-track { display: block; height: 6px; border-radius: 3px; background: rgba(246, 242, 236, .08); overflow: hidden; }
.nf-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); transform-origin: left; transform: scaleX(.34); }
/* 06 mapa por sección con una prioridad */
.nf-v-sec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; max-width: 17rem; transform: rotate(-4deg); }
.nf-v-sec i { position: relative; aspect-ratio: 1.25; background: rgba(246, 242, 236, .07); }
.nf-v-sec .s1 { background: rgba(246, 242, 236, .14); } .nf-v-sec .s2 { background: rgba(199, 30, 36, .3); } .nf-v-sec .s3 { background: rgba(199, 30, 36, .55); }
.nf-v-sec i:nth-child(1) { border-top-left-radius: 14px; } .nf-v-sec i:nth-child(4) { border-top-right-radius: 6px; }
.nf-v-sec i:nth-child(13) { border-bottom-left-radius: 6px; } .nf-v-sec i:nth-child(16) { border-bottom-right-radius: 18px; }
.nf-v-sec .nf-hot { z-index: 1; background: var(--red); box-shadow: 0 0 0 2px var(--yellow); }
.nf-v-sec .nf-hot::after { content: ""; position: absolute; inset: -2px; border-radius: 2px; box-shadow: 0 0 0 2px var(--yellow); opacity: 0; }
/* 07 en vivo */
.nf-v-live { display: grid; gap: .7rem; }
.nf-live-head { display: flex; align-items: center; gap: .75rem; }
.nf-live-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .65rem; border-radius: 6px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.nf-live-pill .nf-live-dot { background: #fff; }
.nf-live-head .nf-skl { flex: 1; }
/* 08 marco de sitio */
.nf-v-site { border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(246, 242, 236, .04); overflow: hidden; }
.nf-site-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
.nf-site-dots { display: inline-flex; gap: 4px; } .nf-site-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(246, 242, 236, .25); }
.nf-site-url { flex: 1; height: .9rem; border-radius: 5px; background: rgba(246, 242, 236, .08); }
.nf-site-clock { display: grid; font: 600 .72rem/1 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; }
.nf-site-clock > span { grid-area: 1 / 1; } .nf-site-clock > span + span { opacity: 0; }
.nf-site-hero { height: 4.6rem; margin: .7rem; border-radius: 6px; background: linear-gradient(120deg, var(--red-deep), #5A1215); }
.nf-site-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 .7rem .7rem; }
.nf-site-cols i { height: 2.6rem; border-radius: 5px; background: rgba(246, 242, 236, .08); }
.nf-site-load { height: 3px; background: rgba(246, 242, 236, .06); }
.nf-site-load i { display: block; height: 100%; background: var(--yellow); transform-origin: left; }
/* 09 conversación por mensajería */
.nf-v-chat { display: flex; flex-direction: column; gap: .5rem; }
.nf-chat-time { align-self: center; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nf-bub { display: grid; gap: .4rem; width: 70%; padding: .7rem .85rem; border-radius: 14px; }
.nf-bub .nf-skl { height: .5rem; }
.nf-bub-in { align-self: flex-start; border-bottom-left-radius: 4px; background: rgba(246, 242, 236, .1); }
.nf-bub-out { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--red); }
.nf-bub-out .nf-skl { margin-left: auto; background: rgba(255, 255, 255, .55); }
.nf-reply { display: grid; justify-items: end; align-items: start; }
.nf-reply > * { grid-area: 1 / 1; }
.nf-bub-out { width: 70%; }
.nf-bub-typing { opacity: 0; display: grid; grid-auto-flow: column; width: auto; gap: 4px; padding: .65rem .8rem; background: rgba(199, 30, 36, .35); border-bottom-right-radius: 4px; }
.nf-bub-typing i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .7; }
.nf-handoff { align-self: flex-end; margin-top: .2rem; padding: .22rem .6rem; border-radius: 999px; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(255, 214, 0, .5); }
/* 10 escudo y monitoreo */
.nf-v-shield { display: grid; justify-items: center; gap: 1rem; }
.nf-shield { position: relative; display: grid; place-items: center; width: 6.5rem; height: 6.5rem; }
.nf-shield > * { grid-area: 1 / 1; }
.nf-shield-body { width: 4.2rem; height: 4.9rem; background: linear-gradient(160deg, var(--red-bright), var(--red-deep)); clip-path: polygon(50% 0, 100% 16%, 100% 52%, 50% 100%, 0 52%, 0 16%); }
.nf-ring { width: 6.5rem; height: 6.5rem; border-radius: 50%; border: 1px solid rgba(229, 72, 77, .45); }
.nf-ring-2 { width: 5.4rem; height: 5.4rem; border-color: rgba(229, 72, 77, .25); }
.nf-pulse { display: flex; align-items: center; gap: 4px; height: 2.4rem; width: 100%; max-width: 16rem; }
.nf-pulse i { flex: 1; height: 22%; border-radius: 2px; background: rgba(246, 242, 236, .22); }
.nf-pulse i:nth-child(3n) { height: 34%; } .nf-pulse i:nth-child(4n+1) { height: 16%; }
.nf-pulse i:nth-child(13) { height: 100%; background: var(--red-bright); } .nf-pulse i:nth-child(12), .nf-pulse i:nth-child(14) { height: 55%; }
.nf-alert-row { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--yellow); }

@media (min-width: 900px) {
  .nf { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2.25rem; align-items: start; }
  .nf-railwrap { position: sticky; top: calc(var(--header-h, 72px) + 1.5rem); }
  .nf-rail { flex-direction: column; gap: 0; overflow: visible; padding: 0; border-left: 1px solid var(--line); -webkit-mask-image: none; mask-image: none; }
  .nf-tab { width: 100%; padding: .78rem 1rem .78rem 1.25rem; border: 0; border-radius: 0; font-size: 1rem; overflow: visible; }
  .nf-tab[aria-selected="true"] { background-color: transparent; background-image: linear-gradient(90deg, rgba(199, 30, 36, .16), transparent 85%); }
  .nf-tab[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: rgba(229, 72, 77, .4); }
  .nf-tab-prog { left: -1px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; transform: scaleY(0); }
  .nf-toggle { margin: 1rem 0 0 1.25rem; }
}
@media (min-width: 1100px) {
  .nf-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; }
  .nf-vis { min-height: 22rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .nf-panel { transition: opacity .4s ease, visibility 0s .4s; }
  .js .nf-panel.is-active { transition: opacity .45s .08s ease, visibility 0s; }
  .nf-panel.is-active .nf-num { animation: nf-up .6s cubic-bezier(.2, .8, .2, 1) both; }
  .nf-panel.is-active .nf-name { animation: nf-up .6s .06s cubic-bezier(.2, .8, .2, 1) both; }
  .nf-panel.is-active .nf-moment { animation: nf-up .6s .12s cubic-bezier(.2, .8, .2, 1) both; }
  .nf-panel.is-active .nf-more { animation: nf-up .6s .18s cubic-bezier(.2, .8, .2, 1) both; }
  .nf-panel.is-active .nf-vis { animation: nf-in .6s .1s ease both; }

  /* progreso del avance automático en la pestaña activa */
  .nf.is-auto:not(.is-paused) .nf-tab[aria-selected="true"] .nf-tab-prog { animation: nf-prog-x var(--nf-dur, 6s) linear both; }
  .nf.is-paused .nf-tab[aria-selected="true"] .nf-tab-prog { transform: none; opacity: .45; }
  @media (min-width: 900px) { .nf.is-auto:not(.is-paused) .nf-tab[aria-selected="true"] .nf-tab-prog { animation-name: nf-prog-y; } }

  /* visuales: solo corren en el servicio activo */
  .is-active .nf-v-map i { animation: nf-tint .45s both; }
  .is-active .nf-v-map i:nth-child(6n+2) { animation-delay: .15s; } .is-active .nf-v-map i:nth-child(6n+3) { animation-delay: .3s; }
  .is-active .nf-v-map i:nth-child(6n+4) { animation-delay: .45s; } .is-active .nf-v-map i:nth-child(6n+5) { animation-delay: .6s; }
  .is-active .nf-v-map i:nth-child(6n) { animation-delay: .75s; }

  .is-active .nf-v-listen .nf-line, .is-active .nf-live-rows .nf-line { animation: nf-up .45s cubic-bezier(.2, .8, .2, 1) both; }
  .is-active .nf-line .nf-chip { animation: nf-pop .35s cubic-bezier(.3, 1.4, .5, 1) both; }
  .is-active .nf-line:nth-child(1) { animation-delay: .2s; } .is-active .nf-line:nth-child(1) .nf-chip { animation-delay: .6s; }
  .is-active .nf-line:nth-child(2) { animation-delay: .5s; } .is-active .nf-line:nth-child(2) .nf-chip { animation-delay: .9s; }
  .is-active .nf-line:nth-child(3) { animation-delay: .8s; } .is-active .nf-line:nth-child(3) .nf-chip { animation-delay: 1.2s; }
  .is-active .nf-line:nth-child(4) { animation-delay: 1.1s; } .is-active .nf-line:nth-child(4) .nf-chip { animation-delay: 1.5s; }

  .is-active .nf-rk-bar i { animation: nf-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
  .is-active .nf-rk:nth-child(2) .nf-rk-bar i { animation-delay: .1s; } .is-active .nf-rk:nth-child(3) .nf-rk-bar i { animation-delay: .2s; }
  .is-active .nf-rk:nth-child(4) .nf-rk-bar i { animation-delay: .3s; }
  .is-active .nf-rk em { animation: nf-pop .35s 1s cubic-bezier(.3, 1.4, .5, 1) both; }

  .is-active .nf-status > span { animation: nf-status 4.5s infinite both; }
  .is-active .nf-status > span:nth-child(2) { animation-delay: 1.5s; } .is-active .nf-status > span:nth-child(3) { animation-delay: 3s; }
  .is-active .nf-steps3 i:nth-child(2) { animation: nf-step2 4.5s infinite both; }
  .is-active .nf-steps3 i:nth-child(3) { animation: nf-step3 4.5s infinite both; }

  .is-active .nf-ms:nth-child(2) .nf-box { animation: nf-check-b .3s 1s both; } .is-active .nf-ms:nth-child(2) .nf-box::after { animation: nf-check .3s 1.05s both; }
  .is-active .nf-ms:nth-child(3) .nf-box { animation: nf-check-b .3s 2s both; } .is-active .nf-ms:nth-child(3) .nf-box::after { animation: nf-check .3s 2.05s both; }
  .is-active .nf-track i { animation: nf-track 2.4s .3s steps(1, end) both; }

  .is-active .nf-v-sec i { animation: nf-in .4s both; }
  .is-active .nf-v-sec i:nth-child(odd) { animation-delay: .12s; } .is-active .nf-v-sec i:nth-child(3n) { animation-delay: .24s; }
  .is-active .nf-v-sec .nf-hot::after { animation: nf-ping 1.6s .7s ease-out infinite; }

  .is-active .nf-live-dot { animation: live-dot 1.4s ease-in-out infinite; }
  .is-active .nf-live-rows .nf-line:nth-child(1) { animation-delay: .3s; }

  .is-active .nf-site-clock > span:nth-child(1) { animation: nf-clock-a 4s 1s infinite both; }
  .is-active .nf-site-clock > span:nth-child(2) { animation: nf-clock-b 4s 1s infinite both; }
  .is-active .nf-site-load i { animation: nf-load 4s 1s infinite both; }

  .is-active .nf-bub-in { animation: nf-up .4s .3s cubic-bezier(.2, .8, .2, 1) both; }
  .is-active .nf-bub-typing { animation: nf-in .25s .9s both, nf-gone .01s 1.9s forwards; }
  .is-active .nf-bub-typing i { animation: nd-blink .8s infinite; } .is-active .nf-bub-typing i:nth-child(2) { animation-delay: .15s; } .is-active .nf-bub-typing i:nth-child(3) { animation-delay: .3s; }
  .is-active .nf-bub-out { animation: nf-up .4s 1.9s cubic-bezier(.2, .8, .2, 1) both; }
  .is-active .nf-handoff { animation: nf-pop .35s 2.8s cubic-bezier(.3, 1.4, .5, 1) both; }

  .is-active .nf-ring { animation: nf-ring 2.4s ease-out infinite; } .is-active .nf-ring-2 { animation-delay: 1.2s; }
  .is-active .nf-pulse i { animation: nf-beat 1.8s ease-in-out infinite; transform-origin: center; }
  .is-active .nf-pulse i:nth-child(odd) { animation-delay: -.6s; } .is-active .nf-pulse i:nth-child(3n) { animation-delay: -1.2s; }
  .is-active .nf-alert-row .nf-live-dot { animation: live-dot 1s ease-in-out infinite; }
}

@keyframes nf-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nf-gone { to { opacity: 0; } }
@keyframes nf-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes nf-prog-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nf-prog-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes nf-tint { from { background-color: rgba(246, 242, 236, .08); transform: scale(.8); } }
@keyframes nf-grow { from { transform: scaleX(0); } }
@keyframes nf-status { 0% { opacity: 0; transform: translateY(4px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; } }
@keyframes nf-step2 { 0%, 33% { background: rgba(246, 242, 236, .1); } 34%, 100% { background: var(--red); } }
@keyframes nf-step3 { 0%, 66% { background: rgba(246, 242, 236, .1); } 67%, 100% { background: var(--yellow); } }
@keyframes nf-check-b { to { background: var(--red); border-color: var(--red); } }
@keyframes nf-check { to { transform: rotate(45deg) scale(1); } }
@keyframes nf-track { 0% { transform: scaleX(.34); } 40% { transform: scaleX(.67); } 80%, 100% { transform: scaleX(1); } }
@keyframes nf-ping { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes nf-clock-a { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes nf-clock-b { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nf-load { 0%, 45% { transform: scaleX(0); } 52%, 95% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes nf-ring { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes nf-beat { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.5); } }

/* =====================================================================
   AVISO DE PRIVACIDAD (privacidad.html) + casilla de aceptación del formulario (8 oct 2026)
   Clases nuevas; no cambian el resto del diseño.
   ===================================================================== */
.field-check { display: flex; align-items: flex-start; gap: .7rem; }
.field .field-check-box, .field-check input[type="checkbox"] {
  flex: none; width: 22px; height: 22px; min-height: 0; margin: .15rem 0 0; padding: 0;
  border-radius: 5px; accent-color: var(--red); cursor: pointer;
}
.field-check label { font-weight: 500; font-size: .95rem; cursor: pointer; }
.field-check label a { color: var(--text); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.field-check input[aria-invalid="true"] { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.footer-bottom a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--text); text-decoration-color: var(--red); }

.legal-header { position: sticky; }
.legal-body { max-width: 46rem; }
.legal-title { margin-top: .9rem; font-size: clamp(2.8rem, 7vw, 4.6rem); }
.legal-date { margin-top: .8rem; font-size: .9rem; color: var(--muted); }
.legal-lead { margin-top: 2rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.5; color: var(--text); }
.legal-body h2 { margin-top: 2.6rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.legal-body p:not(.eyebrow):not(.legal-date):not(.legal-lead) { margin-top: .9rem; color: #D4CCC3; }
.legal-body ul { margin-top: .9rem; padding-left: 1.25rem; list-style: disc; color: #D4CCC3; }
.legal-body li + li { margin-top: .3rem; }
.legal-body li::marker { color: var(--red-bright); }
.legal-body a { color: var(--text); text-decoration-color: var(--red); text-underline-offset: 3px; }

/* =====================================================================
   TEMA CLARO (8 oct 2026) · html[data-theme="light"]
   Oscuro sigue siendo el default: sin data-theme (o sin JS) todo lo de arriba queda igual.
   El switch del header (.theme-switch, main.js → theme()) pone data-theme y lo guarda en localStorage.
   Claro = papel cálido + tinta casi negra + el mismo rojo. El panel en vivo, la terminal de la intro y los
   visuales de servicios se quedan como "pantallas" oscuras: dentro de ellos se restauran las variables oscuras.
   ===================================================================== */
.logo-light { display: none; }
html[data-theme="light"] .logo-dark { display: none; }
html[data-theme="light"] .logo-light { display: inline-block; }

.theme-switch {
  display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: auto; padding: 3px;
  border: 1px solid var(--line-strong); border-radius: 999px;
}
.theme-switch button {
  min-height: 34px; padding: .3rem .62rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--muted); font: 600 .8rem/1 var(--font-body); letter-spacing: .02em; transition: color .2s, background-color .2s;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.theme-switch button:focus-visible { outline-offset: 1px; }
html:not(.js) .theme-switch { display: none; }
.header-inner .theme-switch + .nav-toggle { margin-left: -.4rem; }
@media (min-width: 900px) {
  .header-inner .site-nav { margin-left: auto; }
  .header-inner .theme-switch { order: 3; margin-left: .5rem; }
  .theme-switch button { padding: .3rem .75rem; }
}
@media (max-width: 380px) {
  .theme-switch button { padding: .3rem .5rem; font-size: .76rem; }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F4EFE8;
  --surface: #EBE4DA;
  --surface-2: #E2DACE;
  --line: rgba(34, 31, 31, .12);
  --line-strong: rgba(34, 31, 31, .24);
  --text: #221F1F;
  --muted: #5C544E;
  --red-bright: #B62025;             /* en claro, el texto rojo pequeño usa el rojo de marca (más contraste) */
}
/* pantallas oscuras dentro del tema claro */
html[data-theme="light"] .live-panel,
html[data-theme="light"] .nd-term,
html[data-theme="light"] .nf-vis {
  color-scheme: dark;
  --bg: #171414; --surface: #221F1F; --surface-2: #2B2727;
  --line: rgba(246, 242, 236, .1); --line-strong: rgba(246, 242, 236, .2);
  --text: #F6F2EC; --muted: #B9B1A8; --red-bright: #E5484D;
  color: var(--text);
}
html[data-theme="light"] .nf-vis { background: #1E1A1A; border-color: rgba(34, 31, 31, .2); }
html[data-theme="light"] .live-panel { border-color: rgba(34, 31, 31, .22); box-shadow: 0 40px 80px -36px rgba(60, 30, 25, .55), 0 0 0 1px rgba(199, 30, 36, .1); }
html[data-theme="light"] .live::before { background: radial-gradient(closest-side, rgba(199, 30, 36, .2), transparent 75%); }

html[data-theme="light"] :focus-visible { outline-color: var(--red-deep); }
html[data-theme="light"] .live-panel :focus-visible,
html[data-theme="light"] .nf-vis :focus-visible { outline-color: var(--yellow); }

/* header + nav */
html[data-theme="light"] .site-header { background: rgba(244, 239, 232, .8); }
html[data-theme="light"] .site-header.is-scrolled { background: rgba(244, 239, 232, .94); }
html[data-theme="light"] .btn-ghost:hover { background: rgba(34, 31, 31, .06); }

/* hero */
html[data-theme="light"] .hero .lead { color: #3F3935; }
html[data-theme="light"] .hero::before { opacity: .5; }
html[data-theme="light"] .hero-dot { box-shadow: 0 0 .2em rgba(199, 30, 36, .3); }

/* intro (E): papel cálido de fondo; el botón sigue rojo y la terminal sigue oscura */
html[data-theme="light"] .intro-stage::before { background: var(--bg); }
html[data-theme="light"] .intro-stage::after { background: radial-gradient(circle at 50% 50%, rgba(199, 30, 36, .16), transparent 40%); }
html[data-theme="light"] .intro-btn { box-shadow: 0 0 0 .7rem rgba(199, 30, 36, .1), 0 0 0 1.4rem rgba(199, 30, 36, .05), 0 30px 60px -14px rgba(90, 20, 20, .45), inset 0 -10px 24px rgba(0, 0, 0, .3); }
html[data-theme="light"] .intro-skip { background: rgba(34, 31, 31, .05); }
html[data-theme="light"] .nd-d { color: #2E2927; }
html[data-theme="light"] .nd-stage::before { background: radial-gradient(ellipse at 50% 45%, #F7F3ED, #E9E2D8 72%); }
html[data-theme="light"] .nd-term { box-shadow: 0 40px 90px -30px rgba(60, 30, 25, .55), 0 0 0 1px rgba(199, 30, 36, .1); }

/* servicios (F) */
html[data-theme="light"] .nf-stage {
  background: linear-gradient(180deg, #FBF8F3, #F0E9DF);
  box-shadow: 0 40px 90px -50px rgba(60, 30, 25, .35);
}
html[data-theme="light"] .nf-stage::before { background: radial-gradient(closest-side, rgba(199, 30, 36, .12), transparent 75%); }
html[data-theme="light"] .nf-tab[aria-selected="true"] { border-color: rgba(182, 32, 37, .55); background-color: rgba(199, 30, 36, .1); }
html[data-theme="light"] .nf-tab:focus-visible,
html[data-theme="light"] .nf-toggle:focus-visible { outline-color: var(--red-deep); }
html[data-theme="light"] .nf-num { -webkit-text-stroke-width: 2px; }

/* pasos / por qué */
html[data-theme="light"] .step { background: #FBF8F3; }
html[data-theme="light"] .step-num { box-shadow: 0 6px 16px rgba(199, 30, 36, .25); }
html[data-theme="light"] .why h3::before { background: var(--red); }
html[data-theme="light"] .icon-tile { background: rgba(199, 30, 36, .1); }

/* contacto */
html[data-theme="light"] .contact { background: linear-gradient(180deg, var(--bg), #F2E7DF 60%, #EFDCD5); }
html[data-theme="light"] .contact::after { background: radial-gradient(circle, rgba(199, 30, 36, .16), transparent 65%); }
html[data-theme="light"] .contact-list a:hover { color: var(--red-deep); }
html[data-theme="light"] .contact-form { background: #FBF8F3; box-shadow: 0 30px 70px -50px rgba(60, 30, 25, .35); }
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea { background: #FFFDF9; }
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field select:focus,
html[data-theme="light"] .field textarea:focus { border-color: var(--red-deep); box-shadow: 0 0 0 3px rgba(182, 32, 37, .18); }
html[data-theme="light"] .form-status.is-error { color: var(--red-deep); }
html[data-theme="light"] .form-status.is-ok { color: #6E5200; }

/* footer + aviso de privacidad */
html[data-theme="light"] .site-footer { background: #EAE3D9; }
html[data-theme="light"] .legal-body p:not(.eyebrow):not(.legal-date):not(.legal-lead),
html[data-theme="light"] .legal-body ul { color: #3F3935; }
@media (max-width: 519px) {
  .legal-header .header-inner { gap: .5rem; }
  .legal-header .header-inner > .btn { flex: none; white-space: nowrap; padding-inline: .7rem; font-size: .82rem; }
}
@media (max-width: 400px) {
  .legal-header .brand img { height: 36px; }
  .legal-header .theme-switch button { padding-inline: .45rem; }
}