/* ============================================================================
   Pitágoras Cloud · Portada · Header + Piso 01 (HERO)
   Prototipo aprobado piso por piso. Consume tokens.css + tema scroll-craft.
   Dirección: interfaz de máquina (JetBrains Mono) contra display gordo
   (Bricolage Grotesque 800), sobre la ciudad del futuro (metropolis).
   ========================================================================== */

:root {
  --pc-gradient: linear-gradient(90deg, #E94FD1, #BA36ED 55%, #3730A3);
  /* Degradado del botón: solo magenta → violeta, para que el texto ink
     mantenga >= 4,5:1 en todo su recorrido (6,07 → 4,52). */
  --pc-gradient-cta: linear-gradient(90deg, #E94FD1, #BA36ED);
  --nav-h: 76px;
  --maxw: 1360px;
  --gutter: clamp(18px, 4vw, 28px);
  --ink-a: 12 10 22;                 /* ink en canales, para velos */
  --glass: rgb(22 18 31 / .74);      /* panel sobre video */
}

[hidden] { display: none !important; }
/* Un ancla no puede aterrizar debajo del encabezado fijo. La regla vivía solo
   en servicio.css, de modo que las once anclas de paquetes funcionaban y las
   de cualquier otra página habrían quedado tapadas por la barra. Va aquí
   porque portada.css es la única hoja que cargan las dieciséis páginas. */
:target, [id] { scroll-margin-top: calc(var(--nav-h) + 28px); }
html { background: var(--ink); }
/* el fondo lo puede mover scroll-craft con data-sc-drift (piso 04) */
body { background: var(--sc-canvas, var(--ink)); color: var(--paper); font-family: var(--font-body); transition: background-color 120ms linear; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--magenta); color: var(--ink); padding: 10px 14px;
  font: 600 13px/1 var(--font-mono); text-transform: uppercase; border-radius: var(--radius-sm);
}
.skip:focus { top: 12px; }

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

/* ------------------------------------------------------------- botones -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: transform 160ms var(--ease-out), box-shadow 320ms var(--ease-out), background-color 160ms;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn--cta { background: var(--magenta); color: var(--ink); padding: 13px 18px; }
.btn--primary { background: var(--pc-gradient-cta); color: var(--ink); padding: 18px 26px; font-size: 14px; }
.btn--block { width: 100%; padding-block: 18px; }
@media (hover: hover) and (pointer: fine) {
  .btn--cta:hover, .btn--primary:hover { box-shadow: 0 10px 40px -8px rgb(240 84 212 / .6); transform: translateY(-1px); }
  .btn--primary:hover span { transform: translateX(3px); }
}
.btn span { transition: transform 160ms var(--ease-out); }

/* ================================================================ NAV ===== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.nav.is-solid {
  background: rgb(var(--ink-a) / .84);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}
.nav__in { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.nav__logo { flex: none; display: block; }
.nav__logo img { height: 36px; width: auto; }
.nav__main { margin-left: auto; }
.nav__menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }

/* Interfaz de máquina: rutas con "/" y resaltado invertido en bloque */
.nav__link {
  display: inline-flex; align-items: center; gap: 2px;
  font: 500 13px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--paper); text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: 10px 10px; border-radius: 3px;
  transition: background-color 120ms, color 120ms;
}
.nav__link::before { content: "/"; color: var(--magenta); transition: color 120ms; }
.nav__link:hover, .nav__link[aria-expanded="true"] { background: var(--magenta); color: var(--ink); }
.nav__link:hover::before, .nav__link[aria-expanded="true"]::before { color: var(--ink); }
.nav__chev { font-size: 10px; margin-left: 4px; }

.nav__drop { position: relative; }
.nav__cta { flex: none; }
.nav__toggle { display: none; }

/* ------------------------------------------------------- megamenús (D-030) --
   Panel de ancho completo bajo el header. Cada categoría real lleva su color:
   magenta = Contenido para marcas, teal = Optimización Empresarial con IA.
   El panel derecho es el "preview": una pieza real de la casa, no un icono. */
.nav.has-mega {
  background: rgb(var(--ink-a) / .92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--rule);
}
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: linear-gradient(180deg, var(--panel) 0%, var(--ink) 78%);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .9);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 140ms var(--ease-out), transform 180ms var(--ease-out);
}
.mega.is-on { opacity: 1; transform: none; }
.mega::before {
  content: ""; position: absolute; inset: -1px 0 auto; height: 1px;
  background: var(--pc-gradient); opacity: .5;
}
.mega__in {
  display: grid; grid-template-columns: 1.15fr .85fr 1fr; gap: 40px;
  padding: 34px 0 38px; align-items: start;
}
.mega--blog .mega__in { grid-template-columns: .9fr 1.4fr; gap: 56px; }

.mega__col { position: relative; padding-left: 16px; }
.mega__col::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  background: var(--rule);
}
.mega__col--magenta::before { background: linear-gradient(180deg, var(--magenta) 0 32%, transparent); }
.mega__col--teal::before { background: linear-gradient(180deg, var(--teal) 0 32%, transparent); }
.mega__col--cats { padding-left: 0; }
.mega__col--cats::before { display: none; }

.mega__kicker {
  margin: 0 0 8px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--magenta);
}
.mega__col--teal .mega__kicker, .mega__kicker--teal { color: var(--teal); }

/* El rótulo de la categoría también lleva a su página (D-079). En el megamenú
   de servicios el único enlace a la categoría estaba al FONDO de la columna,
   y el ojo lo busca primero arriba, en el título. La flecha se ve siempre
   —en pantalla táctil no hay hover que revele nada— pero atenuada, para no
   convertir un rótulo en un botón. */
a.mega__kicker {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  margin-bottom: 5px; padding-bottom: 3px;
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease-out);
}
a.mega__kicker span { opacity: .5; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.mega__kicker:hover { border-bottom-color: currentColor; }
  a.mega__kicker:hover span { transform: translateX(3px); opacity: 1; }
}
a.mega__kicker:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.mega__kicker, a.mega__kicker span { transition: none; } }
.mega__desc {
  margin: 0 0 18px; max-width: 34ch;
  font: 400 13.5px/1.55 var(--font-body); color: var(--paper-dim);
}
.mega__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__lista a {
  display: block; padding: 9px 12px; margin-left: -12px; border-radius: 6px;
  text-decoration: none; color: var(--paper);
  transition: background-color 120ms, transform 160ms var(--ease-out);
}
.mega__lista a span {
  display: block; font: 600 14px/1.3 var(--font-body); letter-spacing: -.01em;
}
.mega__lista a small {
  display: block; margin-top: 2px;
  font: 400 12px/1.4 var(--font-body); color: var(--paper-faint);
  transition: color 120ms;
}
@media (hover: hover) and (pointer: fine) {
  .mega__lista a:hover { background: rgb(233 79 209 / .12); transform: translateX(3px); }
  .mega__col--teal .mega__lista a:hover { background: rgb(79 184 176 / .12); }
  .mega__lista a:hover small { color: var(--paper-dim); }
}
.mega__lista a:focus-visible { background: rgb(233 79 209 / .14); }
/* Blog: las tres categorías reales como tarjetas, cada una con su color */
.mega--blog .mega__in { grid-template-columns: .8fr 2.1fr; }
.mega__lista--cats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mega__lista--cats a {
  height: 100%; margin: 0; padding: 18px 18px 20px; border-radius: 10px;
  border: 1px solid var(--rule); background: rgb(var(--ink-a) / .6);
  transition: border-color 200ms, background-color 200ms, transform 220ms var(--ease-out);
}
.mega__lista--cats i {
  display: block; margin-bottom: 26px; font-style: normal;
  font: 600 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--c, var(--magenta));
}
.mega__lista--cats a span { font-size: 18px; line-height: 1.2; }
.mega__lista--cats a small { margin-top: 6px; max-width: 26ch; }
.cat--1 { --c: var(--magenta); }
.cat--2 { --c: var(--glow-lilac); }
.cat--3 { --c: var(--teal); }
@media (hover: hover) and (pointer: fine) {
  .mega__lista--cats a:hover { background: rgb(var(--ink-a) / .6); transform: translateY(-3px); border-color: var(--c); }
}
.mega__todo {
  display: block; padding: 9px 0;
  font: 400 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--paper-faint);
}
.mega__mas {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
.mega__mas span { transition: transform 160ms var(--ease-out); }
.mega__mas:hover { color: var(--magenta); border-bottom-color: var(--magenta); }
.mega__mas:hover span { transform: translateX(4px); }

.mega__destacado { align-self: stretch; }
.mega__card {
  display: block; text-decoration: none; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--panel);
  transition: border-color 200ms, transform 220ms var(--ease-out);
}
.mega__card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mega__card-body { display: block; padding: 16px 18px 18px; }
.mega__card-kicker {
  display: block; margin-bottom: 6px;
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.mega__card-title {
  display: block; font: 600 16px/1.25 var(--font-display); letter-spacing: -.02em; color: var(--paper);
}
.mega__card-cta {
  display: inline-flex; gap: 6px; margin-top: 12px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--magenta);
}
.mega__card-cta span { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mega__card:hover { border-color: var(--magenta); transform: translateY(-3px); }
  .mega__card:hover .mega__card-cta span { transform: translateX(4px); }
}

/* ---------------------------------------------------- menú en celular -- */
.menu-movil {
  /* OJO — ESTE ALTO NO SE PUEDE VOLVER A ESCRIBIR COMO `inset … 0`.
     El panel vive DENTRO de `.nav`, y `.nav.is-solid` lleva `backdrop-filter`.
     Un `backdrop-filter` convierte al elemento en BLOQUE CONTENEDOR de sus
     descendientes `position: fixed`: dejan de medirse contra la ventana y
     pasan a medirse contra la caja del nav. Con `bottom: 0` el panel se
     desplomaba de 768 px a 57 px en cuanto el visitante hacía scroll y se
     encendía la barra — abierto, pero del alto de la barra. Medido.
     El alto explícito en unidades de ventana es inmune al cambio de bloque
     contenedor, en los dos estados. */
  position: fixed;
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); left: 0; right: 0;
  height: calc(100vh  - var(--nav-h) - env(safe-area-inset-top, 0px));
  height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top, 0px));
  background: var(--ink); border-top: 1px solid var(--rule);
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  overflow-y: auto;
}
.menu-movil ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-movil li { border-bottom: 1px solid var(--rule); }
.mm__lista > li > a, .mm__acc {
  display: flex; align-items: center; justify-content: flex-start; gap: 2px;
  width: 100%; padding: 20px 0; background: none; border: 0; text-align: left; cursor: pointer;
  font: 600 20px/1.2 var(--font-mono); letter-spacing: .02em; text-transform: uppercase;
  color: var(--paper); text-decoration: none;
}
.mm__lista > li > a::before, .mm__acc::before { content: "/"; color: var(--magenta); }
.mm__acc > span {
  margin-left: auto; width: 1em; text-align: center;
  font-size: 24px; color: var(--magenta); transition: transform 200ms var(--ease-out);
}
.mm__acc[aria-expanded="true"] > span { transform: rotate(45deg); }
.mm__panel { display: grid; padding: 0 0 20px 14px; border-left: 2px solid var(--rule); margin-bottom: 4px; }
.mm__panel .mega__kicker { margin: 10px 0 4px; }
.mm__panel a {
  padding: 11px 0; text-decoration: none; color: var(--paper-dim);
  font: 500 15px/1.3 var(--font-body);
}
.mm__panel a:active { color: var(--magenta); }
.mm__mas { color: var(--magenta) !important; font-family: var(--font-mono) !important;
  font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1220px) {
  .mega__in { grid-template-columns: 1fr 1fr; gap: 32px; }
  .mega__destacado { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 1080px) {
  .nav__main, .nav__cta, .mega { display: none; }
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 12px; margin-left: auto;
    background: none; border: 1px solid var(--rule); border-radius: var(--radius-sm);
    padding: 11px 14px; cursor: pointer; color: var(--paper);
    font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  }
  .nav__burger { display: grid; gap: 5px; width: 18px; }
  .nav__burger i { display: block; height: 2px; background: var(--magenta); transition: transform 200ms var(--ease-out); }
  .nav__toggle[aria-expanded="true"] .nav__burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav.is-open { background: var(--ink); border-bottom-color: var(--rule); }
}
@media (max-width: 420px) { .nav__logo img { height: 30px; } }

/* =============================================================== HERO ===== */
.piso--hero { position: relative; isolation: isolate; }

.hero__media {
  position: absolute; inset: 0 0 auto; height: 100%; z-index: -2; overflow: hidden;
  /* D-197 (9-10-2026): en móvil (<=860px, el mismo corte que `movil` en portada.js)
     el fondo es el póster móvil; el de escritorio (276 KB) solo se pide arriba de 860px.
     Medido: antes, móvil bajaba 276 KB + 103 KB para mostrar uno. */
  background: #0d1233 url("/assets/img/metropolis-poster-movil.webp") center 40% / cover no-repeat;
}
@media (min-width: 861px) {
  .hero__media { background-image: url("/assets/img/metropolis-poster.webp"); }
}
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* Velo: denso solo donde vive el texto (columna izquierda), una franja
   arriba para el menú y un fundido a ink abajo donde aterriza el rail.
   El centro y la derecha quedan limpios para que la nave cruce a la vista. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--ink-a) / .72) 0, rgb(var(--ink-a) / 0) 150px),
    linear-gradient(0deg, var(--ink) 0, rgb(var(--ink-a) / .92) 20%, rgb(var(--ink-a) / 0) 48%),
    linear-gradient(90deg, rgb(var(--ink-a) / .9) 0, rgb(var(--ink-a) / .66) 30%, rgb(var(--ink-a) / .12) 56%, rgb(var(--ink-a) / 0) 72%);
}

.hero__grid {
  position: relative;
  min-height: max(calc(100svh - 72px), 620px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "copy ." "toggle aaas";
  column-gap: 32px; row-gap: 28px;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(28px, 9vh, 112px));
  padding-bottom: clamp(20px, 4vh, 40px);
}

.hero__copy { grid-area: copy; align-self: start; max-width: 760px; }

.hero__eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(18px, 3vh, 28px);
  font: 500 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper);
}
.hero__eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--magenta); }

.hero__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(3rem, min(7.4vw, 14.5vh), 7.25rem);
  line-height: .92; letter-spacing: -.025em;
  color: var(--paper);
  text-wrap: balance;
}
.grad {
  background: var(--pc-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-right: .04em; /* evita que el recorte coma la última letra */
}

.hero__lead {
  margin: clamp(18px, 3vh, 28px) 0 0; max-width: 40ch;
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.375rem); line-height: 1.5;
  color: var(--paper); text-wrap: pretty;
}
.hero__actions { margin-top: clamp(22px, 4vh, 36px); display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------- tarjeta de Pitágoras (AaaS) -- */
.aaas-card {
  grid-area: aaas; justify-self: end; align-self: end;
  display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: stretch;
  width: min(100%, 440px); padding: 0; text-align: left; cursor: pointer;
  background: var(--glass); color: var(--paper);
  border: 1px solid rgb(186 54 237 / .38); border-radius: 14px; overflow: hidden;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color 160ms, transform 160ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.aaas-card__thumb { position: relative; display: block; background: #16121F; }
.aaas-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.aaas-card__play {
  position: absolute; left: 12px; bottom: 12px;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--magenta); color: var(--ink); font-size: 14px; padding-left: 3px;
  box-shadow: 0 6px 18px -4px rgb(var(--ink-a) / .6);
}
.aaas-card__body { display: grid; align-content: center; gap: 6px; padding: 16px 18px; }
.aaas-card__kicker { font: 600 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.aaas-card__title { font: 700 20px/1.15 var(--font-display); letter-spacing: -.01em; }
.aaas-card__meta { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-dim); }
@media (hover: hover) and (pointer: fine) {
  .aaas-card:hover { border-color: var(--magenta); transform: translateY(-2px); box-shadow: 0 18px 50px -18px rgb(240 84 212 / .55); }
}

/* ------------------------------------------- pausa del video de fondo -- */
.bg-toggle {
  grid-area: toggle; align-self: end; justify-self: start;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgb(var(--ink-a) / .5); border: 1px solid var(--rule); border-radius: 6px; cursor: pointer;
  font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim);
}
.bg-toggle:hover { color: var(--paper); border-color: var(--paper-dim); }
.bg-toggle__icon { font-size: 9px; letter-spacing: -1px; }

/* =================================================== RAIL · servicios ===== */
.rail { position: relative; padding-bottom: clamp(56px, 8vh, 96px); }
.rail__head {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim);
}
.rail__head::before { content: "──"; color: var(--magenta); letter-spacing: 0; }
.rail__head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.rail__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px;
  padding: 22px 24px 20px; text-decoration: none; color: var(--paper);
  background: var(--glass); border: 1px solid var(--rule); border-radius: 14px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color 160ms, transform 160ms var(--ease-out);
}
.svc__tag { font: 600 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); }
.svc__title { font: 700 21px/1.15 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.svc__text { font-size: 14.5px; line-height: 1.6; color: var(--paper-dim); }
.svc__go { justify-self: end; font: 500 16px/1 var(--font-mono); color: var(--paper-dim); transition: transform 160ms var(--ease-out), color 160ms; }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { border-color: var(--magenta); transform: translateY(-2px); }
  .svc:hover .svc__go { color: var(--magenta); transform: translateX(4px); }
}


/* ---- Rail · animación de firma "arranque de máquina" (D-022) ------------
   Cada tarjeta "enciende" como una terminal: sube y aparece, una línea
   magenta barre su borde superior, la etiqueta se escribe letra a letra y
   luego entran título, texto y flecha. Cascada de 140 ms entre tarjetas.
   Solo se arma con JS y sin movimiento reducido: sin JS se ven en reposo. */
.rail.is-armed .svc { opacity: 0; transform: translateY(24px); }
.rail.is-armed .svc > * { opacity: 0; }
.rail.is-armed .svc__tag { opacity: 1; clip-path: inset(0 100% 0 0); }
.svc::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px;
  background: var(--magenta); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none;
}
.rail.is-on .svc { animation: svc-in 700ms var(--ease-out) both; animation-delay: calc(var(--i) * 140ms); }
.rail.is-on .svc::before { animation: svc-scan 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + 120ms); }
.rail.is-on .svc__tag { animation: svc-type 460ms steps(14, end) both; animation-delay: calc(var(--i) * 140ms + 260ms); }
.rail.is-on .svc__title { animation: svc-rise 560ms var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + 420ms); }
.rail.is-on .svc__text { animation: svc-rise 560ms var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + 500ms); }
.rail.is-on .svc__go { animation: svc-go 420ms var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + 640ms); }
@keyframes svc-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes svc-scan { 0% { opacity: 1; transform: scaleX(0); } 70% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes svc-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes svc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes svc-go { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ---- Fondo animado de las tarjetas: orbes de marca (Atlas 08) ---------- */
.svc { overflow: hidden; }
.svc__orbes { position: absolute; inset: 0; z-index: -1; opacity: .95; }
.svc__orbes i {
  position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; opacity: .5;
  filter: blur(6px);
}
.svc__orbes i:nth-child(1) { left: -12%; top: 4%;  background: radial-gradient(closest-side, var(--magenta), transparent 72%); }
.svc__orbes i:nth-child(2) { right: -18%; top: 34%; background: radial-gradient(closest-side, var(--violet), transparent 72%); opacity: .45; }
.svc__orbes i:nth-child(3) { left: 24%; bottom: -24%; background: radial-gradient(closest-side, var(--blue), transparent 70%); opacity: .55; }
.rail.is-live .svc__orbes i:nth-child(1) { animation: orb-a 19s ease-in-out infinite alternate; }
.rail.is-live .svc__orbes i:nth-child(2) { animation: orb-b 23s ease-in-out infinite alternate; }
.rail.is-live .svc__orbes i:nth-child(3) { animation: orb-c 27s ease-in-out infinite alternate; }
.svc:nth-child(2) .svc__orbes { animation-delay: -6s; transform: scaleX(-1); }
.svc:nth-child(3) .svc__orbes i:nth-child(1) { left: 40%; }
@keyframes orb-a { to { transform: translate3d(26%, 14%, 0) scale(1.12); } }
@keyframes orb-b { to { transform: translate3d(-22%, -12%, 0) scale(1.08); } }
@keyframes orb-c { to { transform: translate3d(14%, -18%, 0) scale(1.15); } }

.next { border-top: 1px solid var(--rule); padding-block: 56px 120px; }
.next__label { margin: 0 auto; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); }

/* ================================================= REPRODUCTOR (dialog) === */
.player {
  width: min(1120px, calc(100vw - 32px)); max-height: calc(100svh - 32px);
  padding: 0; border: 1px solid rgb(186 54 237 / .45); border-radius: 16px;
  background: var(--panel); color: var(--paper); overflow: auto;
}
.player::backdrop { background: rgb(var(--ink-a) / .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.player__bar {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--rule);
  font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim);
}
.player__dot { display: inline-block; width: 7px; height: 7px; background: var(--magenta); margin-right: 10px; vertical-align: 1px; }
.player__acciones { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.player__externo {
  color: var(--paper-dim); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--rule); padding-bottom: 3px;
}
.player__externo:hover { color: var(--magenta); border-bottom-color: var(--magenta); }
@media (max-width: 560px) { .player__externo { display: none; } }
.player__close {
  background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; cursor: pointer;
  font: 600 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper);
}
.player__close:hover { border-color: var(--magenta); }
.player__close kbd { font: inherit; color: var(--paper-dim); margin-left: 6px; }
.player__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; padding: 24px; }
.player__video { align-self: start; border-radius: 12px; overflow: hidden; background: #16121F; }
.player__video video { width: 100%; height: auto; aspect-ratio: 720 / 406; }
.player__video video::cue { font-family: var(--font-body); background: rgb(var(--ink-a) / .82); color: var(--paper); }
.player__text { display: grid; align-content: start; gap: 14px; }
.player__text p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--paper-dim); }
.player__kicker { font: 600 11px/1.2 var(--font-mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--gold) !important; }
.player__title { margin: 0; font: 800 clamp(26px, 3vw, 34px)/1.05 var(--font-display); letter-spacing: -.02em; }
.player__transcript { border-top: 1px solid var(--rule); padding-top: 12px; }
.player__transcript summary {
  cursor: pointer; font: 600 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--magenta);
}
.player__transcript ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.player__transcript li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: 14px; line-height: 1.55; color: var(--paper-dim); }
.player__transcript time { font: 500 12px/1.55 var(--font-mono); color: var(--paper-dim); font-variant-numeric: tabular-nums; }

/* ============================================================ CELULAR ===== */
@media (max-width: 860px) {
  .hero__media { height: 100svh; min-height: 560px; }
  .hero__media::after {                     /* fundido del video hacia ink */
    content: ""; position: absolute; inset: auto 0 0; height: 40%;
    background: linear-gradient(0deg, var(--ink), rgb(var(--ink-a) / 0));
  }
  .hero__scrim {
    height: 100svh; min-height: 560px; bottom: auto;
    background:
      linear-gradient(180deg, rgb(var(--ink-a) / .7) 0, rgb(var(--ink-a) / .1) 22%, rgb(var(--ink-a) / .35) 48%, rgb(var(--ink-a) / .9) 78%, var(--ink) 100%);
  }
  .hero__grid {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "copy" "toggle" "aaas";
    padding-top: 0; row-gap: 20px;
  }
  .hero__copy {
    min-height: max(100svh, 560px);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: calc(var(--nav-h) + 24px); padding-bottom: 8px;
  }
  .hero__title { font-size: clamp(2.75rem, 13vw, 4.5rem); }
  .hero__lead { max-width: none; }
  .hero__actions .btn { width: 100%; }
  .bg-toggle { justify-self: start; }
  .aaas-card { justify-self: stretch; width: 100%; grid-template-columns: 120px minmax(0, 1fr); }
  .rail { padding-top: 32px; }
  /* Rail horizontal con snap: las tres tarjetas en una fila deslizable */
  .rail__list {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    padding-bottom: 6px; scrollbar-width: none;
  }
  .rail__list::-webkit-scrollbar { display: none; }
  .rail__list > li { scroll-snap-align: start; }
  .player__grid { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .svc, .aaas-card, .nav, .nav__link { transition: none; }
  .mega, .mega__lista a, .mega__card, .mm__acc > span { transition: none; }
  .mega { transform: none; }
}


/* ==================================================== PISOS 02–04 ======== */
.piso { position: relative; isolation: isolate; }
.piso__head { padding-block: clamp(72px, 12vh, 140px) 0; max-width: var(--maxw); }
.piso__title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(2.5rem, 1rem + 4.6vw, 4.75rem); line-height: .96; letter-spacing: -.03em;
  text-wrap: balance;
}
.piso__lead { margin: clamp(16px, 2.4vh, 26px) 0 0; max-width: 62ch; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.6; color: var(--paper-dim); text-wrap: pretty; }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(14px, 2vh, 22px);
  font: 500 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; }
.eyebrow--magenta { color: var(--paper); } .eyebrow--magenta::before { background: var(--magenta); }
.eyebrow--teal { color: var(--teal); }     .eyebrow--teal::before { background: var(--teal); }
.eyebrow--gold { color: var(--gold); }     .eyebrow--gold::before { background: var(--gold); }

/* ------------------------------------------- PISO 02 · De cero a cien --- */
.piso--filosofia { padding-bottom: clamp(72px, 12vh, 140px); overflow: hidden; }
.halos { position: absolute; inset: -10% 0; z-index: -1; pointer-events: none; }
.halo { position: absolute; display: block; width: min(52vw, 720px); aspect-ratio: 1; border-radius: 50%; opacity: .32; }
.halo--m { left: -12%; top: 2%;  background: radial-gradient(closest-side, var(--glow-magenta), transparent 70%); animation: halo-a 26s ease-in-out infinite alternate; }
.halo--v { right: -14%; top: 22%; background: radial-gradient(closest-side, var(--glow-lilac), transparent 70%); animation: halo-b 31s ease-in-out infinite alternate; opacity: .26; }
.halo--b { left: 32%; bottom: -18%; background: radial-gradient(closest-side, var(--glow-indigo), transparent 70%); animation: halo-c 24s ease-in-out infinite alternate; opacity: .3; }
@keyframes halo-a { to { transform: translate3d(12%, 8%, 0) scale(1.15); } }
@keyframes halo-b { to { transform: translate3d(-14%, -6%, 0) scale(1.1); } }
@keyframes halo-c { to { transform: translate3d(8%, -12%, 0) scale(1.18); } }
.geo { position: absolute; right: -8%; top: 12%; width: min(46vw, 620px); opacity: .16; }
.geo circle { fill: none; stroke: var(--violet); stroke-width: 1; }
.geo__ticks line { stroke: var(--magenta); stroke-width: 1.5; }

.cien {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
  padding-top: clamp(36px, 6vh, 72px);
}
.tacometro { margin: 0; position: relative; }
.tacometro svg { width: 100%; height: auto; overflow: visible; }
.tac__rail { fill: none; stroke: var(--rule); stroke-width: 14; stroke-linecap: round; }
.tac__arc { fill: none; stroke: url(#arcg); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.tac__ticks line { stroke: var(--paper-faint); stroke-width: 2; }
.tac__ticks line.on { stroke: var(--paper); }
.tac__needle { transform-origin: 160px 170px; transform: rotate(-120deg); }
.tac__needle rect { fill: var(--paper); }
.tac__hub { fill: var(--magenta); }
.tac__read { margin-top: -4px; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.tac__read b { font: 800 clamp(34px, 4vw, 52px)/1 var(--font-display); letter-spacing: -.03em; background: var(--pc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.tac__read span { font: 500 13px/1 var(--font-mono); color: var(--paper-dim); }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: paso; }
.pasos li {
  display: flex; align-items: baseline; gap: 16px; padding: 14px 16px; border-radius: 10px;
  font: 700 clamp(17px, 1.1rem + .5vw, 23px)/1.25 var(--font-display); color: var(--paper-faint);
  border: 1px solid transparent; transition: color 320ms var(--ease-out), background-color 320ms, border-color 320ms;
}
.pasos__n { font: 600 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--paper-faint); transition: color 320ms; }
.pasos li.on { color: var(--paper); background: rgb(22 18 31 / .6); border-color: var(--rule); }
.pasos li.on .pasos__n { color: var(--magenta); }

.yt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding-top: clamp(48px, 8vh, 96px); }
.yt__poster {
  position: relative; display: block; padding: 0; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  background: var(--pc-gradient); cursor: pointer; aspect-ratio: 16 / 9;
}
.yt__poster img { width: 100%; height: 100%; object-fit: cover; }
.yt__poster.is-sin-miniatura img { display: none; }
.yt__poster.is-sin-miniatura::after { content: "De cero a cien"; position: absolute; inset: auto 0 18% 0; text-align: center; font: 800 clamp(28px, 3.4vw, 46px)/1 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.yt__play {
  position: absolute; right: 20px; bottom: 20px;
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--magenta); color: var(--ink); font-size: 24px; padding-left: 5px;
  box-shadow: 0 12px 40px -8px rgb(var(--ink-a) / .8); transition: transform 200ms var(--ease-out);
}
.yt__badge { position: absolute; right: 14px; top: 14px; padding: 6px 10px; border-radius: 6px; background: rgb(var(--ink-a) / .78); color: var(--paper); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .yt__poster:hover .yt__play { transform: scale(1.08); } }
.yt__text { margin: 0 0 20px; font-size: clamp(15px, .95rem + .3vw, 17px); line-height: 1.65; color: var(--paper-dim); max-width: 52ch; }
.yt__cta { margin: 0; }
.btn--ghost { background: transparent; border: 1px solid var(--rule); color: var(--paper); padding: 14px 20px; }
.btn--ghost:hover { border-color: var(--magenta); }

/* ----------------------------------------- PISO 03 · Conquista futuro --- */
.piso--slogan { overflow: hidden; padding-bottom: clamp(72px, 12vh, 140px); }
.aurora { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; }

/* Fotografía abstracta de fondo (D-031): tinta en agua oscura, Nano Banana Pro.
   Elegida entre dos tomas por medición: en la franja central —donde se apoya el
   titular— es la más oscura y la menos turbulenta (sd 0,043 vs 0,073). */
.tinta { position: absolute; inset: 0; z-index: -2; display: block; }
.tinta img {
  width: 100%; height: 100%; object-fit: cover; object-position: 40% 44%; display: block;
}
.aurora__velo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* campo de lectura: mata el brillo justo donde se apoyan titular, lead y dato */
    radial-gradient(74% 44% at 50% 30%, rgb(var(--ink-a) / .52), rgb(var(--ink-a) / .20) 72%, rgb(var(--ink-a) / 0) 100%),
    radial-gradient(130% 100% at 50% 38%, rgb(var(--ink-a) / .22), rgb(var(--ink-a) / .60) 62%, rgb(var(--ink-a) / .9) 100%),
    linear-gradient(0deg, var(--ink) 0, rgb(var(--ink-a) / .40) 34%, rgb(var(--ink-a) / 0) 62%, rgb(var(--ink-a) / 0) 74%, var(--ink) 100%);
}
/* En celular el texto ocupa casi todo el alto: el velo deja de ser un foco
   central y pasa a ser una capa pareja, calibrada sobre el recorte vertical. */
@media (max-width: 700px) {
  .aurora__velo {
    background: linear-gradient(180deg,
      rgb(var(--ink-a) / .88) 0, rgb(var(--ink-a) / .70) 14%,
      rgb(var(--ink-a) / .70) 84%, var(--ink) 100%);
  }
}

.slogan { padding-block: clamp(96px, 16vh, 180px) 0; text-align: center; display: grid; justify-items: center; }
.slogan .eyebrow { justify-content: center; }
.slogan__title {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-variation-settings: 'opsz' 96;
  font-size: clamp(2.75rem, 1rem + 6.4vw, 6.5rem); line-height: .94; letter-spacing: -.035em; text-wrap: balance;
}
.slogan__lead { margin: clamp(20px, 3vh, 34px) auto 0; max-width: 64ch; font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); line-height: 1.65; color: var(--paper); text-wrap: pretty; }

/* Estándar de dato estadístico */
.dato { padding-top: clamp(48px, 8vh, 96px); display: grid; gap: 20px; justify-items: center; }
.dato__duelo { width: min(760px, 100%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: clamp(12px, 3vw, 32px); }
.dato__barra { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dato__barra::after {
  content: ""; order: 2; width: 100%; height: clamp(90px, 16vh, 170px); border-radius: 12px 12px 4px 4px;
  transform-origin: bottom; transform: scaleY(0);
  transition: transform 1.1s var(--ease-out);
}
.is-live .dato__barra::after { transform: scaleY(calc(var(--pct) / 100)); }
.dato__barra--a::after { background: var(--pc-gradient-cta); }
.dato__barra--b::after { background: linear-gradient(0deg, var(--rule), var(--paper-faint)); }
.dato__cifra { order: 1; font: 800 clamp(34px, 4.6vw, 64px)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dato__barra--a .dato__cifra { background: var(--pc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dato__barra--b .dato__cifra { color: var(--paper-dim); }
.dato__rot { order: 3; font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); text-align: center; max-width: 22ch; }
.dato__brecha { align-self: stretch; display: grid; align-items: center; justify-items: center; padding-bottom: 8px; }
.dato__brecha span {
  writing-mode: vertical-rl; font: 600 11px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--magenta);
  border-left: 1px dashed var(--magenta); border-right: 1px dashed var(--magenta); padding: 14px 8px;
}
.dato__pie { margin: 0; max-width: 62ch; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--paper-dim); }

/* -------------------------------------------- PISO 04 · Cinco razones ---
   Riel horizontal (D-056). Las cinco razones ocupaban 2,97 pantallas apiladas
   en vertical; en riel ocupan una. El gesto es el de una estantería —el mismo
   que ya usaba el Piso 01 en celular—, no un carrusel que secuestra el scroll:
   la pista es `overflow-x` nativo con scroll-snap, así el navegador resuelve el
   conflicto entre el gesto horizontal y el vertical sin que nosotros toquemos
   nada. Un carrusel con arrastre en JS sí rompe ese gesto en celular.
   Nada de bucle infinito: con cinco fichas el visitante tiene que poder saber
   cuántas hay y dónde está, y eso lo dice la barra de progreso del pie. */
.piso--razones { padding-bottom: clamp(48px, 7vh, 84px); }

/* La cabecera comparte fila con las flechas y las alinea abajo, a la altura
   del texto, no flotando sobre el título. */
.piso__head--riel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px); align-items: end;
}
.riel__mando { display: flex; gap: 10px; padding-bottom: 6px; }
.riel__flecha {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%; cursor: pointer;
  background: rgb(29 24 48 / .55); color: var(--paper); font-size: 17px;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out),
              transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .riel__flecha:hover:not(:disabled) { background: var(--magenta); border-color: var(--magenta); color: var(--ink); transform: scale(1.06); }
}
.riel__flecha:disabled { opacity: .3; cursor: default; }

/* La pista sangra hasta el borde de la ventana pero arranca alineada con el
   `wrap`: la ficha que asoma a la derecha es la señal de que hay más. */
.riel { margin-top: clamp(28px, 4.5vh, 56px); }
.riel__pista {
  list-style: none; margin: 0; display: flex; gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-block: 6px 10px;
  scrollbar-width: none;
}
.riel__pista::-webkit-scrollbar { display: none; }
.riel__pista:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 8px; }

/* Entrada en cascada de cualquier riel. Se anima `translate` y no `transform`
   porque las fichas de la vitrina usan `transform` para su hover, y una
   animación con `forwards` se lo comería. */
.riel__pista > * { opacity: 0; translate: 0 14px; }
.riel__pista.is-on > * { animation: rielEntra 560ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes rielEntra { to { opacity: 1; translate: 0 0; } }

.rz {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 0 0 clamp(290px, 27vw, 420px); scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--rule); border-radius: 18px;
  background: linear-gradient(180deg, rgb(29 24 48 / .58), rgb(18 14 28 / .72));
  transition: border-color 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rz:hover { border-color: rgb(233 79 209 / .42); }
}

/* La fotografía de cada razón (D-034) se conserva: pasa de columna lateral a
   fondo de la ficha, con la misma máscara radial para que emerja de la
   oscuridad en vez de vivir en un rectángulo recortado. */
.rz__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rz__foto {
  position: absolute; inset: 0; display: block; overflow: hidden;
  -webkit-mask-image: radial-gradient(128% 86% at 78% 24%, #000 24%, rgb(0 0 0 / .5) 58%, transparent 84%);
          mask-image: radial-gradient(128% 86% at 78% 24%, #000 24%, rgb(0 0 0 / .5) 58%, transparent 84%);
}
.rz__foto img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .30; }

.rz__foto--ancha img { object-position: 78% center; opacity: .26; }

.rz__n {
  margin: 0 0 14px; font: 800 clamp(34px, 2rem + 1.4vw, 52px)/1 var(--font-display); letter-spacing: -.04em;
  background: var(--pc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rz__titulo {
  margin: 0 0 12px; font: 700 clamp(19px, 1.05rem + .55vw, 24px)/1.2 var(--font-display);
  letter-spacing: -.02em; text-wrap: balance; color: var(--paper);
}
.rz__txt { margin: 0 0 auto; font-size: 14.5px; line-height: 1.62; color: var(--paper-dim); text-wrap: pretty; }
.rz__dato {
  margin: 22px 0 0; display: flex; flex-direction: column; gap: 5px;
  padding: 13px 16px; border: 1px solid var(--rule); border-radius: 12px;
  background: rgb(12 10 22 / .58);
}
.rz__dato b { font: 800 clamp(20px, 1.1rem + .8vw, 26px)/1 var(--font-display); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rz__dato span { font-size: 12.5px; line-height: 1.45; color: var(--paper-dim); }

/* Las figuras geométricas siguen siendo el sello de marca, ahora dentro de
   la ficha y más discretas. */
.rz .geo-shape { opacity: .3; }
.rz .geo-shape--disco { right: -18%; top: -8%; width: 60%; }
.rz .geo-shape--rejilla { right: -12%; top: -6%; width: 62%; height: 62%; }
.rz .geo-shape--arco { right: -14%; top: -4%; width: 58%; }
.rz .geo-shape--barras { right: -8%; top: 6%; width: 56%; height: 90px; }
.rz .geo-shape--doble { right: -16%; top: -6%; width: 60%; }

/* Pie: barra de progreso a la izquierda, llamada a la acción a la derecha.
   La barra dice cuánto falta; es lo que reemplaza al bucle infinito. */
.riel__pie {
  padding-top: clamp(26px, 4vh, 44px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.riel__barra {
  margin: 0; flex: 1 1 180px; max-width: 320px; height: 3px; border-radius: 2px;
  background: var(--rule); overflow: hidden;
}
.riel__barra span {
  display: block; height: 100%; width: 22%; border-radius: 2px;
  background: var(--pc-gradient);
  transition: width 220ms var(--ease-out), transform 220ms var(--ease-out);
}

@media (max-width: 860px) {
  .piso__head--riel { grid-template-columns: minmax(0, 1fr); align-items: start; }
  /* En celular sobra el mando: el dedo ya sabe qué hacer con una estantería */
  .riel__mando { display: none; }
  .rz { flex-basis: min(84vw, 380px); }
  .riel__pie { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .riel__pista { scroll-behavior: auto; }
  .rz { opacity: 1; transform: none; }
  .riel__pista.is-on .rz { animation: none; }
  .riel__flecha, .riel__barra span { transition: none; }
}

.geo-shape { position: absolute; display: block; opacity: .5; }
.geo-shape--disco { right: 6%; top: 10%; width: min(28vw, 320px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(186 54 237 / .5); }
.geo-shape--rejilla { right: 4%; top: 6%; width: min(30vw, 360px); height: min(30vw, 360px);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.geo-shape--arco { right: 2%; top: 14%; width: min(26vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--magenta); border-right-color: var(--violet); transform: rotate(-24deg); opacity: .55; }
.geo-shape--barras { right: 5%; top: 18%; width: min(24vw, 280px); height: 120px;
  background: repeating-linear-gradient(90deg, rgb(233 79 209 / .5) 0 2px, transparent 2px 18px); }
.geo-shape--doble { right: 6%; top: 12%; width: min(26vw, 300px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(80 73 212 / .35), transparent 70%); }

/* reproductor de YouTube */
/* El ancho de este diálogo NO es una decisión estética: YouTube elige la
   resolución inicial por el tamaño en píxeles que ocupa el reproductor al
   arrancar, y no hay forma soportada de pedirle una calidad —los métodos
   de calidad desaparecieron de la IFrame API—. A 1180 px nunca tenía razón
   para servir 1080p. Se toma todo el ancho que quepa, acotado por la altura
   para que el 16/9 no quede cortado ni obligue a hacer scroll.
   En 1920x1080 esto da 1600 px; antes daba 1178. */
.player--yt {
  --yt-barra: 56px;                  /* alto real de .player__bar */
  width: min(1600px, calc(100vw - 32px),
             calc((100svh - 32px - var(--yt-barra)) * 16 / 9));
}
.player__frame { aspect-ratio: 16 / 9; background: #000; position: relative; }
.player__frame iframe,
.player__frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.player__frame video::cue { font-family: var(--font-body); background: rgb(var(--ink-a) / .82); color: var(--paper); }
/* Respaldo cuando el embed no puede cargar (ver portada.js) */
.player__respaldo {
  position: absolute; inset: 0; z-index: 2; margin: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center; background: var(--ink);
  font: 400 15px/1.6 var(--font-body); color: var(--paper-dim);
}
.player__frame.is-bloqueado .player__respaldo { display: flex; }
.player__respaldo a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-radius: var(--radius-sm);
  background: var(--magenta); color: var(--ink); text-decoration: none;
  font: 700 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.player__respaldo a:hover { background: var(--glow-magenta); }

@media (max-width: 980px) {
  .cien { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tacometro { max-width: 340px; margin-inline: auto; }
  .yt { grid-template-columns: minmax(0, 1fr); }
  .dato__duelo { gap: 10px; }
  .dato__rot { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .halo, .svc__orbes i { animation: none !important; }
  .dato__barra::after { transition: none; }
}

/* ======================================== PISO 05 · VITRINAZO (D-036) =====
   El homenaje del catálogo: seis cajas en un estante iluminado. La tarjeta
   entera es zona de clic — el enlace real vive en el nombre, y la cover y el
   CTA quedan fuera del orden de tabulación para no repetir el mismo destino
   tres veces al navegar con teclado. */
.piso--vitrina { position: relative; padding-block: clamp(76px, 12vh, 140px); overflow: hidden; }
.vitrina__luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgb(233 79 209 / .13), transparent 70%),
    radial-gradient(50% 44% at 50% 100%, rgb(55 48 163 / .18), transparent 72%);
}
/* La vitrina usa el mismo riel que las cinco razones (D-058): la rejilla de
   3x2 costaba 2,65 pantallas en escritorio y 5,10 en celular. */
.vitrina { margin: 0; }
.vt { flex: 0 0 clamp(250px, 23vw, 322px); scroll-snap-align: start; }

.vt {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgb(29 24 48 / .62), rgb(18 15 28 / .82));
  transition: border-color 240ms, transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.vt__cover { display: block; background: var(--void); border-bottom: 1px solid var(--rule); }
.vt__cover img {
  /* height:auto es obligatorio: con un alto explícito heredado, aspect-ratio
     no manda. El marco toma la proporción exacta de la imagen (3/4) para que
     la caja se vea entera: en una vitrina, un producto recortado no vende. */
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: center; background: var(--void);
  transition: transform 420ms var(--ease-out);
}
.vt__cuerpo { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2vw, 24px); }
.vt__n { margin: 0 0 8px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.vt__nombre { margin: 0; font: 800 clamp(19px, 1rem + .7vw, 25px)/1.08 var(--font-display); letter-spacing: -.03em; }
.vt__nombre a { color: var(--paper); text-decoration: none; }
/* la tarjeta entera responde al clic del nombre */
.vt__nombre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vt__tag { margin: 8px 0 0; font: 500 12.5px/1.4 var(--font-mono); letter-spacing: .02em; color: var(--gold); }
.vt__lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.vt__lista li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.45; color: var(--paper-dim); }
.vt__lista li::before { content: ""; position: absolute; left: 0; top: .52em; width: 6px; height: 6px; border-radius: 2px; background: var(--pc-gradient-cta); }
.vt__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px;
  font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--magenta);
}
.vt__cta span { transition: transform 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .vt:hover { border-color: var(--magenta); transform: translateY(-5px); box-shadow: 0 30px 60px -30px rgb(240 84 212 / .5); }
  .vt:hover .vt__cover img { transform: scale(1.04); }
  .vt:hover .vt__cta span { transform: translateX(4px); }
}
.vt:focus-within { border-color: var(--magenta); }

.riel__pie--vitrina { padding-top: clamp(32px, 5vh, 56px); }

/* ------------------- PISO 06 · vitrinazo de Optimización (D-059) ---------
   Mismo objeto que la vitrina de Contenido, en el color de su categoría: el
   megamenú ya enseña que Contenido es magenta y Optimización es teal, y la
   portada no puede contradecir esa clave. */
.vitrina__luz--frio {
  background:
    radial-gradient(60% 40% at 50% 0%, rgb(79 184 176 / .12), transparent 70%),
    radial-gradient(50% 44% at 50% 100%, rgb(55 48 163 / .20), transparent 72%);
}
.piso--vitrina2 .vt__n { color: var(--teal); }
.piso--vitrina2 .vt__lista li::before { background: var(--teal); }
@media (hover: hover) and (pointer: fine) {
  .piso--vitrina2 .vt:hover { border-color: var(--teal); box-shadow: 0 30px 60px -30px rgb(79 184 176 / .45); }
}
.piso--vitrina2 .vt:focus-within { border-color: var(--teal); }

/* El precio cierra la ficha: es lo último que el ojo toca antes del CTA. */
.vt__precio {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px;
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-dim);
}
.vt__precio b {
  font: 800 clamp(17px, 1rem + .4vw, 21px)/1 var(--font-display); letter-spacing: -.03em;
  text-transform: none; color: var(--paper); font-variant-numeric: tabular-nums;
}
.vt__precio span { font-weight: 400; letter-spacing: .04em; text-transform: none; font-size: 10.5px; }

/* -------------------------- PISO 07 · la trilogía (D-061) ----------------
   Fichas 16:9 en el mismo riel. La miniatura viene de la CDN de YouTube; si
   no carga —red, bloqueador, o la política del contenedor de artefactos— la
   ficha no deja un hueco negro: pasa a rótulo tipográfico (.is-sin-miniatura). */
.piso--obra { position: relative; padding-block: clamp(76px, 12vh, 140px); overflow: hidden; }
.obra__cap { flex: 0 0 clamp(290px, 40vw, 520px); scroll-snap-align: start; }
.obra__marco {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
  background: linear-gradient(140deg, #241C3D, #120E22 70%);
  transition: border-color 240ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.obra__marco img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.obra__marco.is-sin-miniatura img { display: none; }
.obra__marco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--ink-a) / .05) 0, rgb(var(--ink-a) / .55) 72%, rgb(var(--ink-a) / .86) 100%);
}
/* El play va a la esquina, no al centro: estas carátulas son piezas
   compuestas con su propio título y encuadre, no fotogramas sueltos, y un
   botón en mitad de la imagen se come la obra que precisamente queremos
   enseñar. El velo inferior ya le da el contraste que necesita. */
.obra__play {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--magenta); color: var(--ink); font-size: 16px; padding-left: 3px;
  box-shadow: 0 10px 34px -8px rgb(240 84 212 / .75);
  transition: transform 200ms var(--ease-out);
}
.obra__dur {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  padding: 5px 9px; border-radius: 6px; background: rgb(12 10 22 / .82);
  font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--paper);
}
/* El rótulo solo aparece cuando la miniatura no está: es el plan B, no un
   subtítulo permanente sobre la imagen. */
.obra__rotulo { display: none; }
.obra__marco.is-sin-miniatura {
  aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 22px;
}
.obra__marco.is-sin-miniatura .obra__rotulo {
  display: block; max-width: 18ch; text-align: center;
  font: 800 clamp(20px, 1rem + 1.4vw, 30px)/1.12 var(--font-display); letter-spacing: -.03em;
  background: var(--pc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.obra__marco.is-sin-miniatura::after { display: none; }
.obra__marco.is-sin-miniatura .obra__play { top: auto; bottom: 18px; left: 18px; translate: none; width: 46px; height: 46px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .obra__marco:hover { border-color: var(--magenta); transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgb(240 84 212 / .5); }
  .obra__marco:hover .obra__play { transform: scale(1.09); }
}
.obra__cap-n {
  margin: 16px 0 0; font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.obra__titulo { margin: 8px 0 0; font: 800 clamp(20px, 1.1rem + .8vw, 27px)/1.1 var(--font-display); letter-spacing: -.03em; color: var(--paper); }
.obra__txt { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--paper-dim); text-wrap: pretty; }

.riel__pie--obra { padding-top: clamp(28px, 4.5vh, 48px); }
.obra__nota { margin: 0; font: 400 12px/1.5 var(--font-mono); letter-spacing: .03em; color: var(--paper-dim); }
@media (max-width: 860px) {
  .obra__cap { flex-basis: min(84vw, 420px); }
  .riel__pie--obra { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 860px) { .vt { flex-basis: min(76vw, 320px); } }
@media (prefers-reduced-motion: reduce) { .vt, .vt__cover img, .vt__cta span { transition: none; } }

/* ---------------------------------------- Megamenú · Documentos de marca --
   La biblioteca se enseña con su portada: seis fichas en 3x2, cada una con
   su carátula pequeña, su número, su título y su versión. Es el mismo gesto
   que el megamenú de servicios —enseñar el producto, no listarlo— aplicado a
   documentos, que es lo que aquí hace las veces de producto. */
.mega--docs .mega__in { grid-template-columns: .72fr 2.3fr; gap: 48px; }
.mega__col--gold::before { background: linear-gradient(180deg, var(--gold) 0 32%, transparent); }
.mega__kicker--gold { color: var(--gold); }

.docmenu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.docm { --c: var(--magenta); }
.docm--teal { --c: var(--teal); }
.docm--gold { --c: var(--gold); }
.docmenu a {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: start;
  height: 100%; margin: 0; padding: 12px 14px 14px 12px; border-radius: 10px;
  border: 1px solid var(--rule); background: rgb(var(--ink-a) / .6);
  transition: border-color 200ms, background-color 200ms, transform 220ms var(--ease-out);
}
.docmenu img {
  display: block; width: 58px; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 5px; border: 1px solid var(--rule);
}
.docm__txt { display: block; min-width: 0; }
.docm__n { display: block; font-style: normal; font: 600 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--c); }
.docm__t { display: block; margin-top: 7px; font: 600 14px/1.25 var(--font-body); letter-spacing: -.01em; color: var(--paper); }
.docmenu a small { display: block; margin-top: 5px; font: 400 12px/1.4 var(--font-body); color: var(--paper-dim); }
.docm__v {
  display: inline-block; margin-top: 9px; padding: 3px 7px; border-radius: 999px;
  background: rgb(var(--ink-a) / .7); border: 1px solid var(--rule);
  font: 600 9.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--paper-dim);
}
@media (hover: hover) and (pointer: fine) {
  .docmenu a:hover { background: rgb(var(--ink-a) / .6); transform: translateY(-3px); border-color: var(--c); }
  .docmenu a:hover small { color: var(--paper-dim); }
}
@media (max-width: 1180px) {
  .mega--docs .mega__in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .docmenu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
   PIE · el cierre del sitio
   Dirección (D-066): el arte de marca ocupa la ENTRADA del pie, no el pie
   entero. La lección de D-064 aplicada al revés: en vez de tapar una foto
   bonita con un velo del 90 % para poder escribir encima, se deja la tinta
   plena donde el texto no la pisa —la franja de entrada— y el resto del pie
   baja a tinta sólida. Así hay color de verdad, y la biblioteca de documentos
   —que es lo que de verdad tiene que leerse aquí— nunca pelea con el fondo.
   ========================================================================== */
.pie { position: relative; isolation: isolate; margin-top: clamp(40px, 8vh, 96px); background: var(--ink); overflow: hidden; }
.pie::before {
  /* filete de luz que cose el último piso con el pie */
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgb(233 79 209 / .55) 22%, rgb(79 184 176 / .45) 62%, transparent);
}
.pie__fondo { position: absolute; inset: 0 0 auto; height: clamp(420px, 52vh, 700px); z-index: -2; display: block; }
.pie__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
/* El arte definitivo (fondo-pie v1) mide 6,23:1 en la franja del titular ANTES
   de ponerle nada encima, así que el velo puede ser mucho más ligero que el
   del montaje provisional: se baja de .80 a .46 a la izquierda. */
.pie__velo {
  position: absolute; inset: 0 0 auto; height: clamp(420px, 52vh, 700px); z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--ink-a) / .28) 0, rgb(var(--ink-a) / .16) 34%, rgb(var(--ink-a) / .08) 60%, rgb(var(--ink-a) / 0) 100%),
    linear-gradient(180deg, rgb(var(--ink-a) / .14) 0, rgb(var(--ink-a) / .06) 20%, rgb(var(--ink-a) / .34) 58%, rgb(var(--ink-a) / .74) 80%, var(--ink) 100%);
}

/* ------------------------------------------------------ A · biblioteca -- */
.pie__biblio { padding-block: clamp(56px, 9vh, 104px) clamp(40px, 6vh, 64px); }
.pie__biblio-head { max-width: 62ch; }
.pie__title {
  margin: clamp(14px, 2vh, 20px) 0 0;
  font-family: var(--font-display); font-weight: 800; font-variation-settings: 'opsz' 96;
  font-size: clamp(2rem, 1rem + 3.2vw, 3.5rem); line-height: 1.02; letter-spacing: -.035em;
  color: var(--paper); text-wrap: balance;
}
.pie__lead { margin: clamp(14px, 2.2vh, 22px) 0 0; max-width: 58ch; font-size: clamp(.95rem, .9rem + .3vw, 1.0625rem); line-height: 1.68; color: var(--paper-dim); text-wrap: pretty; }

.docs {
  list-style: none; margin: clamp(30px, 5vh, 52px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.doc { --doc-c: var(--magenta); --doc-soft: var(--magenta-soft); }
.doc--teal { --doc-c: var(--teal); --doc-soft: var(--teal-soft); }
.doc--gold { --doc-c: var(--gold); --doc-soft: var(--gold-soft); }
.doc a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px;
  height: 100%; padding: 18px 18px 18px 16px; text-decoration: none;
  border: 1px solid var(--rule); border-left: 2px solid var(--doc-c); border-radius: 12px;
  background: linear-gradient(180deg, rgb(29 24 48 / .72), rgb(18 14 28 / .82));
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out), translate 200ms var(--ease-out);
}
.doc__n { font: 700 12px/1 var(--font-mono); letter-spacing: .06em; color: var(--doc-c); padding-top: 3px; font-style: normal; }
.doc__cuerpo { display: grid; gap: 5px; }
.doc__t { font: 700 clamp(15px, .92rem + .3vw, 17px)/1.3 var(--font-display); letter-spacing: -.015em; color: var(--paper); }
.doc__s { font-size: 13px; line-height: 1.55; color: var(--paper-dim); text-wrap: pretty; }
.doc__v {
  flex: none; padding: 4px 8px; border-radius: 999px; background: var(--doc-soft);
  font: 600 10px/1 var(--font-mono); letter-spacing: .08em; color: var(--paper);
}
@media (hover: hover) and (pointer: fine) {
  .doc a:hover { border-color: var(--doc-c); background: linear-gradient(180deg, rgb(38 31 62 / .86), rgb(22 17 36 / .9)); translate: 0 -2px; }
}
.docs__nota { margin: clamp(20px, 3vh, 28px) 0 0; font: 400 12.5px/1.6 var(--font-mono); letter-spacing: .02em; color: var(--paper-dim); }
.docs__nota a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--rule); }
.docs__nota a:hover { color: var(--magenta); border-bottom-color: var(--magenta); }

/* ----------------------------------------------------------- B · marca -- */
.pie__marca {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--rule);
}
.pie__logo { width: clamp(168px, 16vw, 216px); height: auto; display: block; }
.pie__tagline { margin: 14px 0 0; font: 500 11px/1 var(--font-mono); letter-spacing: .34em; text-transform: uppercase; color: var(--paper-dim); }
.pie__somos { margin: 18px 0 0; max-width: 52ch; font-size: 13.5px; line-height: 1.7; color: var(--paper-dim); text-wrap: pretty; }

.redes { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(20px, 3vh, 28px) 0 0; padding: 0; }
.redes:empty { display: none; }
.redes a {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 12px;
  border: 1px solid var(--rule); border-radius: 999px; text-decoration: none;
  font: 600 11.5px/1 var(--font-mono); letter-spacing: .04em; color: var(--paper-dim);
  background: rgb(29 24 48 / .5);
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.redes svg { width: 15px; height: 15px; flex: none; fill: currentColor; }
.redes a:hover { border-color: var(--magenta); color: var(--paper); background: rgb(233 79 209 / .14); }

.pie__col-t { margin: 0 0 14px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pie__col--mapa .pie__col-t + ul + .pie__col-t { margin-top: 26px; }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pie__lista a { font-size: 13.5px; line-height: 1.5; color: var(--paper-dim); text-decoration: none; transition: color 180ms var(--ease-out); }
.pie__lista a:hover { color: var(--paper); }

.pie__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pie__datos li { display: grid; gap: 4px; }
.pie__dato-k { font: 600 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); }
.pie__dato-v { font: 500 13.5px/1.4 var(--font-mono); color: var(--paper); text-decoration: none; }
a.pie__dato-v { border-bottom: 1px solid var(--rule); width: fit-content; transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out); }
a.pie__dato-v:hover { color: var(--magenta); border-bottom-color: var(--magenta); }
.pie__cta { margin-top: clamp(20px, 3vh, 28px); }

/* ----------------------------------------------------------- C · legal -- */
.pie__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(18px, 3vw, 36px);
  padding-block: clamp(22px, 3vh, 30px); border-top: 1px solid var(--rule);
}
.pie__copy, .pie__hecho { margin: 0; font: 400 11.5px/1.5 var(--font-mono); letter-spacing: .03em; color: var(--paper-dim); }
.pie__hecho { margin-left: auto; }
.pie__legal-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px clamp(14px, 2vw, 24px); }
.pie__legal-lista a { font: 400 11.5px/1.5 var(--font-mono); letter-spacing: .03em; color: var(--paper-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.pie__legal-lista a:hover { color: var(--paper); border-bottom-color: var(--rule); }

/* ======================================================== RESPONSIVE === */
@media (max-width: 1080px) {
  .pie__marca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pie__col--marca { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .pie__marca { grid-template-columns: minmax(0, 1fr); }
  /* En una columna el texto cruza toda la imagen: el velo vuelve a subir */
  .pie__velo {
    background: linear-gradient(180deg, rgb(var(--ink-a) / .58) 0, rgb(var(--ink-a) / .74) 30%, var(--ink) 92%);
  }
  .pie__hecho { margin-left: 0; }
  .pie__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .doc a, .redes a, .pie__lista a, a.pie__dato-v { transition: none; }
}

/* --------------------------------------------- megamenú · blog, artículos --
   El panel del blog era el más pobre de los tres: ocho enlaces y ninguna
   imagen. Va una fila nueva que ocupa el ancho completo de la retícula ya
   existente (grid-column: 1 / -1), así no hay que redefinir columnas ni tocar
   lo que ya funciona. Cuatro artículos fijos: uno por categoría obligaría a
   rediseñar el panel cada vez que se publica.
   -------------------------------------------------------------------------- */
.mega__col--arts {
  grid-column: 1 / -1; padding-left: 0; margin-top: 6px;
  border-top: 1px solid var(--rule); padding-top: 20px;
}
.mega__col--arts::before { display: none; }
.mega__lista--arts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.mega__lista--arts a {
  display: block; padding: 8px; border-radius: 12px;
  border: 1px solid transparent; text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.mega__lista--arts img { display: block; width: 100%; height: auto; border-radius: 8px; }
.mega__lista--arts b { display: block; margin-top: 10px; font: 700 14px/1.28 var(--font-display); color: var(--paper); }
.mega__lista--arts small { display: block; margin-top: 5px; font: 400 12px/1.4 var(--font-body); color: var(--paper-dim); }
.mega__lista--arts a:hover, .mega__lista--arts a:focus-visible {
  background: rgb(var(--ink-a) / .6); border-color: var(--c); transform: translateY(-3px);
}
.art--1 { --c: var(--magenta); }
.art--2 { --c: var(--teal); }
.art--3 { --c: var(--teal); }
.art--4 { --c: var(--glow-lilac); }
@media (max-width: 1100px) { .mega__lista--arts { grid-template-columns: repeat(2, 1fr); } }

/* D-071 · en la vitrina la leyenda de IVA tambien es un dato del paquete.
   «Excluido de IVA» sube al tono del papel porque vende; el resto se queda
   en el tono tenue de la linea de precio. */
.vt__precio .vt__iva--excl { color: var(--paper); font-weight: 600; }