/* ==========================================================================
   Maqueta de trade.duehub.app · DueHub Trade, pedidos mayoristas de punta a punta.

   Sigue la línea de duehub.app (sitio/estilo.css) y de la web de DueHub ERP: marco central con rieles de 1 px,
   bandas separadas por líneas, rótulos mono, titulares livianos en dos tonos, celdas, chips y cierre en tinta.
   Cambia la paleta: la de DueHub Trade (duehub-trade/brand): negro, blanco, lima #C7F33C y lima pálido #E1F2AE.
   Reglas de su guía de marca (duehub-trade/brand/guia-de-marca.html) que esta hoja sigue:
   - El lima siempre lleva tinta negra encima. Sobre blanco es relleno, nunca texto ni línea fina.
   - LA BANDA: lima con texto negro y esquinas rectas. Va como resaltado detrás de una o dos palabras de un título
     (.soft), como rótulo mono en mayúsculas (.banda) y como marca chica antes de un rótulo de sección (.eyebrow).
     Una banda por bloque. Nunca lima sobre lima pálido, ni blanco sobre lima.
   - Sobre negro el lima puede ser texto corto. El texto de lectura sobre negro es #E8E8E8, no blanco puro.
   - Los grises son los de la guía: tema claro entibiado hacia el lima, tema oscuro neutro. No se agregan tonos.
   - Logo: el principal (TRADE en la banda, debajo) siempre que entra, a 120 px o más; el horizontal sólo en el pie,
     a 220 px o más. Alrededor queda libre la altura de la banda.
   - Sin degradados de fondo. Sobre una foto, el texto va en un recuadro sólido. La tarjeta de DueHub Match
     conserva sus colores.

   Servir esta carpeta:  python3 servir.py   →   http://127.0.0.1:4730/
   ========================================================================== */

@font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url("media/fuentes/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 100 900; font-display: swap; src: url("media/fuentes/GeistMono-Variable.woff2") format("woff2"); }

:root, [data-hoja="blanca"] {
  color-scheme: light;
  --ink: #000000; --ink-2: #2a2c25; --muted: #5e6257; --faint: #5e6257; --tenue: #8c9084;
  --canvas: #ffffff; --surface: #fafbf8; --surface-2: #f4f5f1; --tint: #f4f5f1; --line: #e3e5dd; --line-strong: #cbcec3;
  --lima: #c7f33c; --lima-palido: #e1f2ae; --filete: #c7f33c;
  --boton: #000; --boton-texto: #ffffff; --subraya: #c7f33c;
}
:root {
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --rail: min(1240px, calc(100% - 32px));
  --pad: clamp(20px, 4vw, 56px);
  --nav: 64px;
  --curva: cubic-bezier(.32, .72, 0, 1);
}
[data-hoja="negra"] {
  color-scheme: dark;
  --ink: #e8e8e8; --ink-2: #cfcfcf; --muted: #a0a0a0; --faint: #868686; --tenue: #868686;
  --canvas: #000000; --surface: #171717; --surface-2: #1f1f1f; --tint: #1f1f1f; --line: #2c2c2c; --line-strong: #414141;
  --boton: #c7f33c; --boton-texto: #000; --subraya: #c7f33c;
}
/* Hoja lima: sólo tinta negra encima; las líneas son negro a baja intensidad. No lleva banda (sería lima sobre lima). */
[data-hoja="lima"] { --canvas: #c7f33c; --surface: #c7f33c; --ink: #000; --ink-2: #000; --muted: #000; --faint: #000; --line: rgba(0, 0, 0, .2); --line-strong: #000; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #ffffff; }
body { margin: 0; background: #ffffff; color: #000000; font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.band, .nav, .foot, [data-hoja] { background: var(--canvas); color: var(--ink); }
img, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.035em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 5px #c7f33c; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #000; color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 16px; }

.band { position: relative; border-top: 1px solid var(--line); }
.col { width: var(--rail); margin-inline: auto; border-inline: 1px solid var(--line); position: relative; }
.inner { padding: clamp(56px, 8vw, 104px) var(--pad); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ""; width: 14px; height: 6px; background: #c7f33c; outline: 1px solid rgba(0, 0, 0, .18); }
[data-hoja="negra"] .eyebrow::before, .viaje .eyebrow::before { outline: 0; }
[data-hoja="lima"] .eyebrow::before { background: #000; outline: 0; }
.h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; margin-top: 18px; max-width: 20ch; }
/* La banda como resaltado: una o dos palabras del título, lima con tinta negra y esquinas rectas. */
/* El fondo se dibuja de la altura de las letras (no de toda la caja de la línea) para que no tape el renglón de arriba. */
.soft { background: linear-gradient(#c7f33c, #c7f33c) 0 62% / 100% .98em no-repeat; color: #000; padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap; }
/* La banda como rótulo: mono, mayúsculas, letras separadas. */
.banda { display: inline-block; background: #c7f33c; color: #000; font: 600 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; padding: .7em .9em; border-radius: 0; }
.lede { color: var(--muted); font-size: 17px; max-width: 58ch; margin-top: 18px; }
.k { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-strong); font: normal 12px var(--mono); color: var(--ink-2); white-space: nowrap; background: var(--canvas); }
.chip i { width: 8px; height: 5px; background: #c7f33c; outline: 1px solid rgba(0, 0, 0, .25); }
[data-hoja="negra"] .chip i, .viaje .chip i { outline: 0; }

.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 8px; font-weight: 500; font-size: 15px; border: 1px solid transparent; cursor: pointer;
  transition: transform .5s var(--curva), border-color .3s var(--curva), background .3s var(--curva); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--boton); color: var(--boton-texto); }
.btn .arr { font-family: var(--mono); }
.btn-match { background: #111114; color: #f2f2f4; border-color: #111114; }
.btn-match .punto { width: 8px; height: 8px; border-radius: 50%; background: #ff6fdd; box-shadow: 5px 0 0 -1px #00ddff; margin-right: 4px; }
.enlace { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--ink); border-bottom: 3px solid var(--subraya); padding-bottom: 2px; }
.enlace .arr { font-family: var(--mono); transition: transform .5s var(--curva); }
.enlace:hover .arr { transform: translateX(3px); }

/* Trama de barras inclinadas (la del isotipo). La dibuja app.js. Nunca detrás de un texto. */
.trama { position: absolute; pointer-events: none; z-index: 0; }
.trama svg { display: block; width: 100%; height: 100%; }
.band > .col > *:not(.trama) { position: relative; z-index: 1; }

/* Aparición al entrar en pantalla. */
.rev { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--curva), transform .9s var(--curva), filter .9s var(--curva); transition-delay: var(--d, 0s); }
.rev.visto { opacity: 1; transform: none; filter: none; }

/* Ventana de la app */
.ventana { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .4); }
.ventana-barra { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid #e4e7da; background: #f1f3e9; }
.ventana-barra i { width: 10px; height: 10px; border-radius: 50%; background: #cdd1c0; }
.ventana-barra i:first-child { background: #000; } .ventana-barra i:nth-child(2) { background: #c7f33c; box-shadow: 0 0 0 1px rgba(10, 10, 10, .4); }
.ventana-barra span { margin-left: 10px; font: 12px var(--mono); color: #5a5d52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ventana-cuerpo { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #f6f7f1; }
.ventana-cuerpo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ── Barra superior ───────────────────────────────────────────────────────────── */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; border-bottom: 1px solid var(--line); background: #ffffff; }
.nav .col { display: flex; align-items: center; gap: 24px; height: var(--nav); padding-inline: var(--pad); border-inline-color: transparent; }
.nav .logo { display: inline-flex; }
.nav .logo img { width: 136px; height: auto; }
.nav .col > nav:not(.lang) { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav ul { display: flex; gap: 24px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.nav ul a { padding: 6px 0; border-bottom: 3px solid transparent; transition: border-color .3s var(--curva); }
.nav ul a:hover, .nav ul a[aria-current="true"] { border-bottom-color: #c7f33c; }
.nav .right { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.lang a { display: inline-flex; align-items: center; padding: 6px 10px; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--muted); }
.lang a[aria-current="page"] { background: #c7f33c; color: #000; }
.lang a:hover { color: var(--ink); }

/* ── Portada ──────────────────────────────────────────────────────────────────── */
.hero .col { display: grid; grid-template-columns: 1fr 1.08fr; min-height: min(780px, calc(100vh - var(--nav))); }
.hero-copy { padding: clamp(48px, 8vw, 104px) var(--pad) 48px; display: flex; flex-direction: column; justify-content: center; }
.hero h1 { font-size: clamp(40px, 4.5vw, 62px); line-height: 1.08; margin-top: 26px; max-width: 14ch; }
.hero .lede { font-size: 18px; margin-top: 26px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.hero-datos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.hero-media { position: relative; border-left: 1px solid var(--line); overflow: hidden; background: #000; min-height: 460px; }
.hero-media .foto { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.hero-media .ventana { position: absolute; z-index: 2; left: 5%; bottom: 6%; width: min(60%, 430px); transform: rotate(-1.2deg); will-change: transform; }
.hero-media .pildora { position: absolute; z-index: 3; right: 5%; top: 6%; padding: 9px 12px; background: #000; color: #e8e8e8; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; will-change: transform; }

/* ── Franja de módulos ────────────────────────────────────────────────────────── */
.strip .col { display: grid; grid-template-columns: 220px 1fr; }
.strip .label { padding: 24px var(--pad); font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); display: flex; align-items: center; }
.strip ul { display: grid; grid-template-columns: repeat(6, 1fr); }
.strip li { display: grid; place-items: center; padding: 20px 8px; border-right: 1px solid var(--line); font: 500 14px var(--sans); color: var(--ink); text-align: center; letter-spacing: -.01em; }
.strip li:last-child { border-right: 0; }
.strip li a { border-bottom: 3px solid transparent; transition: border-color .3s var(--curva); } .strip li a:hover { border-bottom-color: #c7f33c; }

/* ── Declaración: las palabras se encienden al pasar ──────────────────────────── */
.declaracion .inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.declaracion p.grande { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -.03em; max-width: 23ch; margin-top: 22px; }
.declaracion p.grande span { color: var(--ink); opacity: .28; transition: opacity .7s var(--curva); }
.declaracion p.grande span.on { opacity: 1; }
.declaracion p.grande span.acento { color: #c7f33c; }
.declaracion .lamina { justify-self: center; width: min(100%, 360px); aspect-ratio: 1; object-fit: cover; border-radius: 20px; border: 1px solid var(--line-strong); transform: rotate(2deg); }
.declaracion .lamina.rev.visto { transform: rotate(2deg); }

/* ── El viaje de un pedido ────────────────────────────────────────────────────── */
.viaje-intro .inner { padding-bottom: clamp(40px, 5vw, 64px); }
.viaje { position: relative; background: #000; color: #e8e8e8; }
.viaje .pista { position: relative; }
.viaje .escenario { position: sticky; top: var(--nav); height: calc(100svh - var(--nav)); overflow: hidden; background: #000; }
.via-foto { position: absolute; inset: 0; width: 100%; height: 100%; will-change: opacity; }
.via-velo { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.pasos { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); top: 16px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 0; padding: 12px 16px 10px; border-radius: 14px; background: rgba(0, 0, 0, .72); border: 1px solid #2f2f2f; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); max-width: 1180px; margin-inline: auto; }
.pasos li { position: relative; display: flex; flex-direction: column; gap: 7px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #868686; transition: color .5s var(--curva); min-width: 0; }
.pasos li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.pasos li i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: #000; border: 2px solid #4a4a4a; transition: background .5s var(--curva), border-color .5s var(--curva), box-shadow .5s var(--curva); }
.pasos li::before { content: ""; position: absolute; left: 12px; right: 0; top: 5px; height: 2px; background: #333; }
.pasos li::after { content: ""; position: absolute; left: 12px; right: 0; top: 5px; height: 2px; background: #c7f33c; transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--curva); }
.pasos li:last-child::before, .pasos li:last-child::after { display: none; }
.pasos li.hecho { color: #e8e8e8; }
.pasos li.hecho i { background: #c7f33c; border-color: #c7f33c; }
.pasos li.hecho::after { transform: scaleX(1); }
.pasos li.actual { color: #c7f33c; }
.pasos li.actual i { border-color: #c7f33c; box-shadow: 0 0 0 5px rgba(199, 243, 60, .22); }
.via-textos { position: absolute; z-index: 3; left: var(--pad); bottom: 68px; width: min(430px, 36%); min-height: 300px; }
.capitulo { position: absolute; left: 0; bottom: 0; width: 100%; padding: 26px 28px 28px; border-radius: 16px; background: rgba(0, 0, 0, .76); border: 1px solid #2f2f2f; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .6s var(--curva), transform .6s var(--curva); }
.capitulo.activo { opacity: 1; transform: none; pointer-events: auto; }
.capitulo .num { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #c7f33c; }
.capitulo h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.06; margin-top: 12px; color: #fff; }
.capitulo > p { color: #b9b9b9; margin-top: 12px; font-size: 15.5px; }
.capitulo ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.capitulo .chip { background: #171717; border-color: #3a3a3a; color: #cfcfcf; }
.capitulo .nota-toma { min-height: 2.9em; margin-top: 16px; padding-top: 14px; border-top: 1px solid #2f2f2f; font: 12.5px/1.45 var(--mono); color: #c7f33c; }
.capitulo .nota-toma:empty { opacity: .0; }
.capitulo .estaticas { display: none; }
.via-ventana { position: absolute; z-index: 2; right: var(--pad); top: 55%; width: min(55%, calc((100svh - var(--nav) - 210px) * 1.5)); transform-origin: 70% 50%; opacity: 0; will-change: transform, opacity; border-color: #3a3a3a; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .9); margin-top: 0; translate: 0 -50%; }
.via-ventana .ventana-cuerpo img { opacity: 0; transform-origin: 0 0; will-change: transform, opacity; }
.via-pie { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: 14px; display: flex; align-items: center; gap: 16px; padding: 9px 14px; border-radius: 10px; background: rgba(0, 0, 0, .76); border: 1px solid #2c2c2c; font: 12px var(--mono); color: #a0a0a0; }
.via-pie .barra { flex: 1; height: 2px; background: #2f2f2f; overflow: hidden; }
.via-pie .barra i { display: block; height: 100%; background: #c7f33c; transform-origin: 0 50%; transform: scaleX(0); }
.viaje.estatico .pista { height: auto !important; }
.viaje.estatico .escenario { position: static; height: auto; overflow: visible; padding: 24px var(--pad) 56px; }
.viaje.estatico .via-foto, .viaje.estatico .via-velo, .viaje.estatico .via-ventana, .viaje.estatico .via-pie, .viaje.estatico .pasos { display: none; }
.viaje.estatico .via-textos { position: static; width: var(--rail); margin-inline: auto; min-height: 0; }
.viaje.estatico .capitulo { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: 16px; background: #0d0d0d; }
.viaje.estatico .nota-toma { display: none; }
.viaje.estatico .estaticas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.viaje.estatico .estaticas img { border: 1px solid #3a3a3a; border-radius: 10px; width: 100%; }
.viaje.estatico .estaticas .estatica-foto { grid-column: 1 / -1; }

/* ── Galerías: una ventana y varios botones ───────────────────────────────────── */
/* Foto y capturas juntas: la ventana se apoya sobre el borde de la foto. */
.combo { display: grid; grid-template-columns: minmax(0, 3.7fr) minmax(0, 9fr); align-items: end; margin-top: 44px; }
.combo.al-reves { grid-template-columns: minmax(0, 9fr) minmax(0, 3.7fr); }
.combo-foto { position: relative; z-index: 0; margin: 0 -44px 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid var(--line-strong); background: var(--surface-2); }
.combo.al-reves .combo-foto { margin: 0 0 0 -44px; }
.combo-foto img { width: 100%; height: 100%; object-fit: cover; }
.combo .galeria { position: relative; z-index: 1; margin: 0 0 36px; }
.galeria { margin-top: 40px; min-width: 0; }
.selector { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.selector button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--canvas); font: 500 13px var(--sans); color: var(--ink-2); cursor: pointer;
  transition: transform .5s var(--curva), background .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva); }
.selector button:hover { transform: translateY(-1px); background: var(--surface); }
.selector button:active { transform: translateY(1px); }
.selector button[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }
.galeria .ventana { margin-top: 18px; }
.galeria .ventana-cuerpo img { opacity: 0; transition: opacity .8s var(--curva); }
.galeria .ventana-cuerpo img.on { opacity: 1; }
.galeria-nota { margin-top: 14px; font: 13px var(--mono); color: var(--muted); min-height: 1.5em; }
.celdas { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 44px; }
.celdas.tres { grid-template-columns: repeat(3, 1fr); } .celdas.dos { grid-template-columns: 1fr 1fr; margin-top: 0; }
.cell { padding: 26px 26px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--canvas); transition: background .5s var(--curva); }
.cell:hover { background: var(--surface); }
.cell .n { display: block; font: 500 11px var(--mono); letter-spacing: .14em; color: var(--tenue); }
.cell h3 { font-size: 20px; line-height: 1.15; margin-top: 16px; letter-spacing: -.02em; }
.cell p { color: var(--muted); margin-top: 8px; font-size: 15px; }

/* ── Trazabilidad: la ficha del producto, en abanico ──────────────────────────── */
.traza-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.traza-lista { margin-top: 30px; border-top: 1px solid var(--line-strong); counter-reset: t; }
.traza-lista li { display: grid; grid-template-columns: 34px 150px 1fr; gap: 10px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-strong); counter-increment: t; }
.traza-lista li::before { content: counter(t, decimal-leading-zero); font: 500 11px var(--mono); color: var(--faint); }
.traza-lista b { font-weight: 500; letter-spacing: -.01em; }
.traza-lista span { color: var(--muted); font-size: 15px; }
/* Lima pálido como tarjeta destacada (fondo suave, con tinta negra). Encima, la foto y las tres pantallas. */
.traza-tarjeta { position: relative; aspect-ratio: 1 / .88; border-radius: 20px; background: #e1f2ae; }
.traza-tarjeta.rev.visto { transform: none; }
.traza-foto { position: absolute; left: 4%; bottom: 5%; width: 45%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 1px solid #000; z-index: 1; }
.abanico { position: absolute; inset: 0; z-index: 2; }
.abanico .ventana { position: absolute; left: 38%; top: 14%; width: 57%; will-change: transform; border-color: #000; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .5); }

/* ── Pantalla partida ─────────────────────────────────────────────────────────── */
.ancha { padding: 0; }
.ancha .pista { position: relative; }
.an-escenario { position: sticky; top: var(--nav); height: calc(100svh - var(--nav)); overflow: hidden; background: #000; }
.an-escena { position: absolute; inset: 0; width: 100%; height: 100%; will-change: opacity; }
.an-titulo { position: absolute; z-index: 3; left: max(var(--pad), calc((100% - 1240px) / 2 + var(--pad))); top: 50%; transform: translateY(-50%); width: min(600px, calc(100% - 2 * var(--pad))); padding: 32px 34px 36px; border-radius: 18px; background: rgba(0, 0, 0, .74); border: 1px solid #2f2f2f; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); will-change: transform, opacity; }
.an-titulo h2 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.08; margin-top: 18px; color: #fff; }
.an-titulo p { color: #b9b9b9; margin-top: 18px; font-size: 17px; max-width: 46ch; }
.an-franja { position: absolute; left: 0; top: 50%; z-index: 2; transform-origin: 0 50%; will-change: transform, opacity; opacity: 0; }
.an-franja .marco { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #3a3a3a; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9); background: #171717; }
.an-franja img { display: block; width: 100%; height: auto; }
.an-franja img.noche { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.an-rotulos { position: absolute; left: 0; right: 0; bottom: clamp(12px, 3vh, 32px); z-index: 4; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0 var(--pad); opacity: 0; transition: opacity .5s var(--curva); }
.an-rotulos .chip { background: #171717; border-color: #3a3a3a; color: #cfcfcf; transition: background .5s var(--curva), color .5s var(--curva), border-color .5s var(--curva); }
.an-rotulos .chip.activa { background: #c7f33c; color: #000; border-color: #c7f33c; }
.an-leyenda { position: absolute; left: 50%; top: clamp(10px, 2.4vh, 28px); z-index: 5; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); text-align: center; padding: 12px 22px 14px; border-radius: 14px;
  background: rgba(0, 0, 0, .78); border: 1px solid #2f2f2f; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .5s var(--curva), top .7s var(--curva); }
.an-leyenda.abajo { top: calc(100% - 118px); }
.an-leyenda b { display: block; font-weight: 400; font-size: clamp(19px, 2vw, 28px); letter-spacing: -.03em; line-height: 1.1; color: #fff; }
.an-leyenda span { display: block; margin-top: 6px; color: #a6a6a6; font-size: 14px; }
.an-muro { position: absolute; inset: 0; z-index: 1; opacity: 0; will-change: opacity; }
.an-muro .fila { position: absolute; left: 0; top: 0; border-radius: 10px; overflow: hidden; border: 1px solid #3a3a3a; will-change: transform, opacity; }
.an-muro .fila img { display: block; width: 100%; height: auto; }
.an-muro .fila[hidden] { display: none; }
.an-muro .fila span { position: absolute; left: 0; top: 0; padding: 8px 12px; background: #c7f33c; color: #000; font: 600 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.an-muro .fila:nth-child(2) span { top: auto; bottom: 0; }
.ancha.estatico .pista { height: auto !important; }
.ancha.estatico .an-escenario { position: static; height: auto; padding: 72px 0; }
.ancha.estatico .an-escena, .ancha.estatico .an-franja, .ancha.estatico .an-rotulos, .ancha.estatico .an-leyenda { display: none; }
.ancha.estatico .an-titulo { position: static; transform: none; opacity: 1 !important; margin: 0 auto; width: var(--rail); }
.ancha.estatico .an-muro { position: static; opacity: 1 !important; margin: 48px auto 0; width: min(1720px, calc(100% - 32px)); display: grid; gap: 14px; }
.ancha.estatico .an-muro .fila { position: relative; transform: none !important; opacity: 1 !important; width: auto !important; height: auto !important; }
.ancha.estatico .an-muro .fila[hidden] { display: block; }
.dos-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; margin-top: 44px; }
.dos-foto { margin: 0; position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong); min-height: 320px; }
.dos-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.disposiciones { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; align-content: start; }
.disposiciones figure { margin: 0; }
.disposiciones .ventana { border-radius: 10px; }
.disposiciones .ventana-cuerpo { aspect-ratio: 16 / 9; }
.disposiciones figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.disposiciones figcaption b { font-weight: 500; letter-spacing: -.01em; }
.disposiciones figcaption span { color: var(--muted); font-size: 14.5px; }

/* ── Idiomas y temas ──────────────────────────────────────────────────────────── */
.idiomas-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.idiomas-grid .galeria { margin-top: 6px; }
.idi-foto { position: relative; width: min(100%, 330px); margin-top: 36px; padding: 0 56px 40px 0; }
.idi-foto .foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; border: 1px solid var(--line-strong); }
.telefono { position: absolute; right: 0; bottom: 0; width: 46%; border-radius: 26px; border: 7px solid #000; overflow: hidden; background: #000; transform: rotate(3deg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.telefono img { width: 100%; border-radius: 19px; }

/* ── Dónde encaja ─────────────────────────────────────────────────────────────── */
.usos-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; margin-top: 44px; }
.usos-grid figure { margin: 0; min-height: 320px; position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong); }
.usos-grid figure { overflow: visible; border: 0; }
.usos-grid figure .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; border: 1px solid var(--line-strong); }
.usos-grid figure .ventana { position: absolute; left: 8%; right: -6%; bottom: -8%; z-index: 2; border-radius: 10px; }

/* ── Mila y Teo ───────────────────────────────────────────────────────────────── */
.personas-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.fichas { display: grid; gap: 12px; margin-top: 30px; }
.ficha { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #ffffff; border: 1px solid #000; color: #000; }
.ficha img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.ficha h3 { font-size: 20px; letter-spacing: -.02em; }
.ficha p { color: #5e6257; font-size: 14.5px; margin-top: 2px; }
.personas .nota { margin-top: 22px; font: 12.5px var(--mono); color: #000; max-width: 46ch; }
.personas .lede { color: #000; }
.poses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.poses img { width: 100%; border-radius: 14px; border: 1px solid #000; object-fit: cover; background: #ded9d2; }
.poses img:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.poses img:not(:first-child) { aspect-ratio: 3 / 4; object-position: 50% 12%; }

/* ── Preguntas ────────────────────────────────────────────────────────────────── */
.faq { max-width: 820px; margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; font-size: 18px; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #c7f33c; color: #000; font: 400 18px/1 var(--mono); transition: transform .5s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 22px; color: var(--muted); max-width: 64ch; }
.faq details a { color: var(--ink); border-bottom: 3px solid #c7f33c; }

/* ── Contacto (el mismo de duehub.app) ────────────────────────────────────────── */
.contacto .cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.dato-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: flex-end; }
.dato { font: 400 clamp(20px, 2.4vw, 30px) var(--mono); letter-spacing: -.02em; color: #fff; border-bottom: 3px solid #c7f33c; padding-bottom: 4px; }
.copy { height: 38px; padding: 0 16px; border-radius: 8px; border: 1px solid #3a3a3a; background: #171717; color: #e8e8e8; font: 500 13px var(--mono); cursor: pointer; transition: transform .5s var(--curva), background .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva); }
.copy:hover { transform: translateY(-1px); border-color: #c7f33c; }
.copy:active { transform: translateY(1px); }
.copy.hecho { background: #c7f33c; color: #000; border-color: #c7f33c; }
.contacto .meta { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.contacto .meta a { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #000; transition: background .5s var(--curva); }
.contacto .meta a:hover { background: #171717; }
.contacto .meta b { font-weight: 400; font-size: 20px; letter-spacing: -.02em; color: #fff; }
.contacto .meta em { font: normal 13px var(--mono); color: #c7f33c; }

/* ── Cierre: DueHub Match ─────────────────────────────────────────────────────── */
.cierre-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.product.match { position: relative; overflow: hidden; border-radius: 16px; background: #ffffff; border: 1px solid #cdd1c0; padding: 12px 12px 30px; display: flex; flex-direction: column; color: #0b1b33; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .35); }
.product.match .pieza { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 800; object-fit: cover; border-radius: 10px; background: #b98cf0; }
.product.match .cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px 0; }
.product.match h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; max-width: 22ch; color: #0b1b33; }
.product.match p { color: #5b6b82; max-width: 48ch; }
.product.match .pieza-enlace { display: block; border-radius: 10px; }
.product.match .ir { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.product.match .btn { white-space: nowrap; }
.product.match .dominio { font-family: var(--mono); font-size: 14px; color: #0b1b33; text-decoration: underline; text-decoration-color: #ff6fdd; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .3s var(--curva); }
.product.match .dominio:hover { text-decoration-color: #00ddff; }

/* ── Pie ──────────────────────────────────────────────────────────────────────── */
.foot .col { padding: 48px var(--pad) 28px; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-top img { width: 232px; height: auto; }
.foot-top p { color: var(--muted); font-size: 14px; margin-top: 14px; max-width: 34ch; }
.foot h4 { margin: 0 0 12px; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.foot ul { display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.foot ul a { display: inline-flex; align-items: center; min-height: 32px; transition: color .3s var(--curva); }
.foot ul a:hover { color: #c7f33c; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }

/* ── Anchos ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nav ul { gap: 16px; font-size: 13px; }
  .pasos li span { font-size: 9.5px; }
}
@media (max-width: 1000px) {
  .nav .col > nav:not(.lang) { display: none; }
  .nav .right { margin-left: auto; }
  .hero .col { grid-template-columns: minmax(0, 1fr); }
  .hero-media { border-left: 0; border-top: 1px solid var(--line); min-height: 0; aspect-ratio: 5 / 4; }
  .strip .col { grid-template-columns: 1fr; }
  .strip .label { border-right: 0; border-bottom: 1px solid var(--line); padding-block: 16px; }
  .strip ul { grid-template-columns: repeat(3, 1fr); }
  .strip li { border-bottom: 1px solid var(--line); } .strip li:nth-child(3n) { border-right: 0; } .strip li:nth-last-child(-n+3) { border-bottom: 0; }
  .declaracion .inner, .traza-grid, .idiomas-grid, .usos-grid, .personas-grid, .cierre-grid, .contacto .cta, .dos-grid { grid-template-columns: minmax(0, 1fr); }
  .dos-foto { min-height: 0; aspect-ratio: 16 / 9; }
  .usos-grid figure { margin-bottom: 9%; }
  .usos-grid figure .ventana { right: 4%; }
  .declaracion .lamina { width: min(70%, 320px); }
  .dato-fila { justify-content: flex-start; }
  .usos-grid figure { min-height: 0; aspect-ratio: 3 / 2; }
  .celdas.tres { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  [data-hoja="negra"] > .col > .trama { display: none; }
  /* El viaje en pantallas angostas: la pantalla arriba y el texto abajo. */
  .pasos { grid-template-columns: repeat(9, 1fr); padding: 10px 12px; left: 12px; right: 12px; top: 10px; }
  .pasos li span { display: none; }
  .pasos li.actual span { display: block; position: absolute; left: 0; top: 18px; padding: 0; overflow: visible; }
  .pasos li:nth-child(n+6).actual span { left: auto; right: 0; }
  .pasos { padding-bottom: 26px; }
  .via-textos { left: 12px; right: 12px; width: auto; bottom: 46px; min-height: 0; }
  .capitulo { padding: 18px 18px 20px; }
  .capitulo h3 { font-size: 24px; }
  .capitulo > p { font-size: 14.5px; }
  .capitulo ul { display: none; }
  .capitulo .nota-toma { min-height: 2.9em; margin-top: 12px; padding-top: 10px; }
  .via-ventana { left: 12px; right: 12px; width: auto; top: 74px; translate: none; transform-origin: 50% 0; }
  .via-pie { left: 12px; right: 12px; bottom: 14px; }
  .an-titulo { left: 12px; right: 12px; width: auto; padding: 24px 22px 26px; }
}
@media (max-width: 860px) {
  .combo, .combo.al-reves { grid-template-columns: minmax(0, 1fr); }
  .combo-foto, .combo.al-reves .combo-foto { margin: 0 0 18px; aspect-ratio: 16 / 10; width: 72%; order: -1; }
  .combo.al-reves .combo-foto { margin-left: auto; }
  .combo .galeria { margin-bottom: 0; }
  .disposiciones { grid-template-columns: 1fr; }
  .contacto .meta { grid-template-columns: 1fr; }
  .celdas.dos { grid-template-columns: 1fr; }
  .traza-lista li { grid-template-columns: 30px 1fr; } .traza-lista span { grid-column: 2; }
}
@media (max-width: 640px) {
  .soft { white-space: normal; }
  .nav .logo img { width: 124px; }
  .hero-media { aspect-ratio: 1; }
  .hero-media .ventana { width: 66%; }
  .strip ul { grid-template-columns: 1fr 1fr; }
  .strip li:nth-child(3n) { border-right: 1px solid var(--line); } .strip li:nth-child(2n) { border-right: 0; }
  .strip li:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .strip li:nth-last-child(-n+2) { border-bottom: 0; }
  .selector button { height: 34px; padding: 0 12px; font-size: 12.5px; }
  .foot-top { grid-template-columns: 1fr; }
  .viaje.estatico .estaticas { grid-template-columns: 1fr; }
  .traza-tarjeta { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev { opacity: 1; transform: none; filter: none; transition: none; }
  .declaracion p.grande span { opacity: 1; }
  * { transition-duration: .01ms !important; animation: none !important; }
}