/* --------------------------------------------------------------------------
   La casa — piel oscura y sobria.

   Decisión de fondo: la casa NO tiene color de marca. Fondo casi negro,
   tipografía blanca, acciones en blanco puro. Todo el color de la página lo
   ponen los renders de los productos. Así el día que saques un plugin azul o
   uno verde, la web no se pelea con él — y de paso no hay que comprometer una
   paleta antes de tener nombre.

   Sin tipografías externas ni peticiones a terceros: nada que declarar en un
   aviso de cookies.
   -------------------------------------------------------------------------- */

:root{
  --bg:      #08090a;
  --bg-2:    #0d0f11;
  --bg-3:    #121517;
  --line:    #1c1f22;
  --line-hi: #2b2f33;
  --ink:     #f4f5f6;
  --ink-2:   #969ca2;
  --ink-3:   #62686d;

  --wrap: 1240px;
  --pad: 24px;
  --r: 4px;                       /* esquinas casi rectas: lee más instrumento */

  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }

h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.025em; line-height:1.04; }
h1{ font-size:clamp(2.7rem,7vw,5.2rem); }
h2{ font-size:clamp(1.9rem,4vw,3rem); }
h3{ font-size:1.05rem; letter-spacing:-.01em; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:8px; top:8px; z-index:99; background:var(--ink); color:var(--bg); padding:10px 16px; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* etiqueta técnica: el único recurso "de marca" que usa la casa */
.tag{
  font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.lede{ color:var(--ink-2); font-size:clamp(1.05rem,1.6vw,1.24rem); max-width:56ch; }
.micro{ color:var(--ink-3); font-size:.84rem; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font:600 15px/1 var(--sans); padding:14px 24px; border-radius:var(--r);
  border:1px solid transparent; cursor:pointer;
  transition:background .16s, border-color .16s, color .16s, opacity .16s;
}
.btn--solid{ background:var(--ink); color:var(--bg); }
.btn--solid:hover{ opacity:.88; }
.btn--ghost{ border-color:var(--line-hi); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--lg{ padding:17px 32px; font-size:16px; }

/* ---------- navegación ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(8,9,10,.82);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line);
}
.nav__in{ display:flex; align-items:center; gap:30px; height:64px; }

/* EL RÓTULO
   La tipografía del nombre vive en --wordmark: cambiarla es una línea.
   Jost es una geométrica ligera, de la familia de la Futura; contra la serif
   de contraste de los titulares hace un emparejamiento clásico y sobrio. */
.mark{ display:flex; align-items:center; gap:14px; margin-right:auto; }
.mark__name{
  font-family:var(--wordmark); font-weight:var(--wordmark-peso); font-size:25px; line-height:1;
  letter-spacing:var(--wordmark-track);
  /* Un script cuelga por debajo de la línea de base y sube mucho con las
     mayúsculas, así que el centro de su caja no es su centro óptico. Medido:
     la mancha del texto quedaba 5,6 px por encima de la del ave. Este empujón
     iguala los dos centros ópticos, no los de sus cajas. */
  transform:translateY(.165em); white-space:nowrap;
}

.nav__links{ display:flex; gap:28px; font-size:15px; color:var(--ink-2); }
.nav__links a:hover{ color:var(--ink); }
.nav__act{ display:flex; gap:10px; }
.burger{ display:none; width:40px; height:40px; background:none; border:1px solid var(--line-hi); border-radius:var(--r); cursor:pointer; }
.burger span, .burger span::before, .burger span::after{ display:block; width:16px; height:1px; background:var(--ink); margin:0 auto; content:""; position:relative; }
.burger span::before{ top:-5px; } .burger span::after{ top:4px; }
.menu{ display:none; flex-direction:column; padding:8px var(--pad) 20px; border-bottom:1px solid var(--line); }
.menu a{ padding:13px 0; color:var(--ink-2); border-bottom:1px solid var(--line); }
.menu .btn{ margin-top:14px; border-bottom:0; }

/* ---------- portada de la casa ---------- */
.lead{ padding:clamp(70px,11vw,140px) 0 clamp(40px,6vw,72px); }
.lead h1{ max-width:16ch; text-wrap:balance; }
.lead .lede{ margin-top:28px; }
.lead .tag{ display:block; margin-bottom:26px; }

/* ---------- la galería de productos ---------- */
.shelf{ border-top:1px solid var(--line); }
.piece{ border-bottom:1px solid var(--line); padding:clamp(48px,7vw,86px) 0; }
.piece__in{
  display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
  gap:clamp(24px,3.2vw,46px); align-items:center;
}
.piece__art{ margin-left:calc(-1 * var(--pad)); }
.piece__art{ position:relative; }
.piece__art img{ border:1px solid var(--line); border-radius:var(--r); }
.piece__art::before{                      /* brillo tenue bajo el aparato */
  content:""; position:absolute; inset:auto 10% -18px; height:40px;
  background:radial-gradient(50% 100% at 50% 0, rgba(255,255,255,.07), transparent 70%);
  filter:blur(14px); z-index:-1;
}
.piece__txt .tag{ display:block; margin-bottom:16px; }
.piece__txt h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
.piece__txt p{ color:var(--ink-2); margin-top:18px; }
.piece__meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:24px;
}
.piece__meta span{
  font:500 11px/1 var(--mono); letter-spacing:.09em; color:var(--ink-2);
  border:1px solid var(--line-hi); border-radius:3px; padding:7px 10px;
}
.piece__cta{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }

/* lo que viene: una banda fina. Un recuadro vacío del alto de la ficha
   anunciaba un producto que todavía no existe con más peso que el que sí. */
.proximo{ border-bottom:1px solid var(--line); background:var(--bg-2); }
.proximo__in{
  display:flex; align-items:baseline; gap:clamp(14px,2.4vw,30px);
  padding-block:clamp(26px,3.4vw,42px); flex-wrap:wrap;
}
.proximo .tag{ flex:none; }
.proximo p{ color:var(--ink-3); margin:0; max-width:58ch; font-size:.95rem; }

/* ---------- por qué / principios ---------- */
.creed{ padding:clamp(66px,9vw,112px) 0; border-bottom:1px solid var(--line); }
.creed__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; margin-top:44px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.creed__grid > div{ background:var(--bg); padding:30px 26px; }
.creed h3{ margin-top:14px; }
.creed p{ color:var(--ink-2); font-size:.95rem; margin-top:10px; }

/* ---------- el panel: texto largo con sus detalles al lado ---------- */
.panel__cuerpo{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,4vw,62px); align-items:start; margin-top:26px; }
.panel__cuerpo > div > p{ color:var(--ink-2); max-width:62ch; margin:0 0 16px; }
.panel__detalles{ display:grid; gap:26px; }
.panel__detalles figure{ margin:0; }
.panel__detalles img{ width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:var(--r); }
.panel__detalles figcaption{ color:var(--ink-3); font-size:.84rem; margin-top:11px; }
@media (max-width:860px){ .panel__cuerpo{ grid-template-columns:1fr } }

/* ---------- los tres mandos que vienen del original ----------
   Recortados sobre transparencia, así que en fila no son tres rectángulos
   oliva compitiendo: son tres piezas sueltas sobre el fondo de la página.
   Sin marco ni sombra de CSS — cada una trae la suya del render. */
.mandos{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,42px); margin-top:clamp(32px,4vw,48px);
}
.mandos__pieza img{ width:100%; height:auto; display:block; margin-bottom:clamp(14px,1.6vw,22px); }
.mandos__pieza h3{ margin-top:9px; font-size:1.06rem; }
.mandos__pieza p{ color:var(--ink-2); font-size:.93rem; margin-top:12px; }
@media (max-width:880px){
  .mandos{ grid-template-columns:1fr; gap:clamp(26px,5vw,40px); }
  .mandos__pieza{ display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    gap:24px; align-items:center; }
  .mandos__pieza img{ margin-bottom:0; }
}
@media (max-width:560px){
  .mandos__pieza{ grid-template-columns:1fr; gap:14px; }
}

/* ---------- la lupa sobre el esquemático ----------
   El plano es denso a propósito: en vez de encogerlo hasta que no se lea, se
   deja entero y se da una lente. Sólo con ratón; en táctil no hay puntero que
   seguir y la imagen se lee ampliándola con los dedos. */
.esquema{ position:relative; }
.esquema img{ border:0; box-shadow:0 20px 50px rgba(0,0,0,.55); }
.esquema__lente{
  position:absolute; width:250px; height:250px; border-radius:50%;
  border:3px solid rgba(24,18,10,.55);
  box-shadow:0 14px 34px rgba(0,0,0,.6), inset 0 0 30px rgba(60,44,22,.35);
  background-repeat:no-repeat; pointer-events:none; opacity:0;
  transition:opacity .16s var(--ease);
}
.esquema.is-lente{ cursor:zoom-in; }
.esquema.is-lente .esquema__lente{ opacity:1; }
@media (hover:none){ .esquema__lente{ display:none } }

/* ---------- la foto de época ---------- */
.epoca{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,56px); align-items:start; }
.epoca > div > p{ margin:0 0 16px; max-width:none; }
.epoca__fig{ margin:0; }
.epoca__fig img{ width:100%; height:auto; display:block; border-radius:2px;
  box-shadow:0 20px 48px rgba(0,0,0,.55); }
.epoca__fig figcaption{ color:var(--ink-3); font-size:.84rem; margin-top:14px; }
@media (max-width:860px){ .epoca{ grid-template-columns:1fr } }

/* ---------- el original: ficha con pestañas ----------
   Tres caras del mismo aparato — su historia, su circuito y sus cifras — sin
   obligar a bajar por tres pantallas de texto. Los paneles son hermanos, así
   que la altura de la sección la fija el más alto y no salta al cambiar. */
.origen{ padding:clamp(66px,9vw,112px) 0; border-bottom:1px solid var(--line); background:var(--bg-2); }
.origen__tabs{ display:flex; flex-wrap:wrap; gap:2px; margin-top:32px; border-bottom:1px solid var(--line); }
.origen__tabs button{
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  color:var(--ink-3); font:inherit; font-size:.95rem; padding:12px 18px; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.origen__tabs button:hover{ color:var(--ink-2); }
.origen__tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
.origen__panel{ padding-top:32px; }
.origen__panel[hidden]{ display:none; }
.origen__panel p{ color:var(--ink-2); max-width:72ch; margin:16px 0 0; }
.origen__panel p:first-child{ margin-top:0; }
.origen__fig{ margin:30px 0 0; }
.origen__fig img{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); }
.origen__fig figcaption{ color:var(--ink-3); font-size:.86rem; margin-top:14px; max-width:72ch; }
.origen__tabla{ width:100%; max-width:660px; border-collapse:collapse; margin-top:8px; }
.origen__tabla th, .origen__tabla td{ text-align:left; padding:11px 2px; border-bottom:1px solid var(--line); }
.origen__tabla th{ width:48%; color:var(--ink-3); font:500 11px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.origen__tabla td{ color:var(--ink-2); font-size:.95rem; }
.origen q{ color:var(--ink); font-style:italic; }

/* ---------- comparador A/B ---------- */
.sound{ padding:clamp(66px,9vw,112px) 0; text-align:center; border-bottom:1px solid var(--line); }
.sound .lede{ margin:16px auto 0; }
.ab{
  margin:44px auto 0; max-width:680px; text-align:left;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:22px;
}
.ab__head{ display:flex; align-items:center; gap:18px; }
.ab__play{ flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:var(--ink); border:0; cursor:pointer; display:grid; place-items:center; }
.ab__play svg{ width:22px; height:22px; fill:var(--bg); margin-left:2px; }
.ab__play[disabled]{ background:var(--bg-3); cursor:not-allowed; }
.ab__play[disabled] svg{ fill:var(--ink-3); }
.ab__meta{ flex:1 1 auto; min-width:0; }
.ab__name{ font:500 12px/1 var(--mono); letter-spacing:.09em; color:var(--ink-2); }
.ab__bar{ height:3px; background:var(--line-hi); margin-top:12px; overflow:hidden; }
.ab__bar i{ display:block; height:100%; width:0; background:var(--ink); }
.ab__toggle{ display:flex; border:1px solid var(--line-hi); border-radius:var(--r); overflow:hidden; flex:0 0 auto; }
.ab__toggle button{ background:none; border:0; color:var(--ink-2); cursor:pointer; font:600 13px/1 var(--sans); padding:11px 15px; }
.ab__toggle button.is-on{ background:var(--ink); color:var(--bg); }
.ab__soon{ color:var(--ink-3); font-size:.85rem; margin-top:18px; text-align:center; }

/* ---------- ficha de producto ---------- */
.hero{ padding:clamp(56px,8vw,104px) 0 0; text-align:center; overflow:hidden; }
.hero .tag{ display:block; margin-bottom:24px; }
.hero h1{ margin-inline:auto; max-width:14ch; }
.hero .lede{ margin:26px auto 0; }
.cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.hero__art{ margin:clamp(46px,6vw,76px) auto 0; max-width:1120px; padding-inline:var(--pad); position:relative; }
.hero__art::before{
  content:""; position:absolute; inset:-10% 8% 22%;
  background:radial-gradient(58% 50% at 50% 45%, rgba(255,255,255,.10), transparent 70%);
  filter:blur(34px); z-index:-1;
}
.hero__art img{ border:1px solid var(--line); border-radius:var(--r); }

.strip{ border-block:1px solid var(--line); margin-top:clamp(56px,8vw,92px); background:var(--bg-2); }
.strip__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip__in > div{ padding:26px 18px; text-align:center; border-left:1px solid var(--line); }
.strip__in > div:first-child{ border-left:0; }
.strip b{ display:block; font-size:.95rem; font-weight:600; }
.strip span{ display:block; color:var(--ink-3); font-size:.82rem; margin-top:4px; }

.inside{ padding:clamp(66px,9vw,112px) 0; }
.inside__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,66px); align-items:center; }
.inside p{ color:var(--ink-2); margin-top:20px; }
.ticks{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:13px; }
.ticks li{ position:relative; padding-left:24px; color:var(--ink-2); font-size:.96rem; }
.ticks li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--ink-3); }
.inside__art img{ border:1px solid var(--line); border-radius:var(--r); }

.specs{ background:var(--bg-2); border-block:1px solid var(--line); padding:clamp(66px,9vw,112px) 0; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1px; margin-top:40px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.grid > div{ background:var(--bg); padding:24px; }
dt{ font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
dd{ margin:11px 0 0; color:var(--ink-2); font-size:.96rem; }

.buy{ padding:clamp(66px,9vw,112px) 0; text-align:center; }
.buy__in{ max-width:620px; }
.buy .lede{ margin:16px auto 0; }
.pricetag{ margin:36px 0 24px; }
.pricetag .price{ font-size:3.4rem; font-weight:600; letter-spacing:-.03em; }
.pricetag .once{ color:var(--ink-3); font-size:.95rem; margin-left:6px; }

/* ---------- pie ---------- */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding-top:58px; }
.foot__in{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:38px; }
.foot__mark p{ color:var(--ink-3); font-size:.88rem; margin-top:14px; max-width:30ch; }
.foot nav{ display:flex; flex-direction:column; gap:11px; }
.foot h3{ font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; }
.foot nav a{ color:var(--ink-2); font-size:.92rem; }
.foot nav a:hover{ color:var(--ink); }
.foot__legal{
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:52px; padding-block:22px; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:.83rem;
}
.foot__legal nav{ flex-direction:row; gap:20px; }

/* ---------- adaptación ---------- */
@media (max-width: 920px){
  .nav__links, .nav__act{ display:none; }
  .burger{ display:block; }
  .menu[data-open]{ display:flex; }
  .piece__in, .inside__in{ grid-template-columns:1fr; }
  .piece__art{ margin-left:0; }
  .strip__in{ grid-template-columns:1fr 1fr; }
  .strip__in > div:nth-child(3){ border-left:0; }
  .strip__in > div:nth-child(n+3){ border-top:1px solid var(--line); }
  .foot__in{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  body{ font-size:16px; }
  .ab__head{ flex-wrap:wrap; }
  .ab__toggle{ width:100%; } .ab__toggle button{ flex:1; }
  .foot__in{ grid-template-columns:1fr; gap:26px; }
}

/* --------------------------------------------------------------------------
   MOVIMIENTO

   Un solo lenguaje para toda la web: recorridos cortos, salidas con inercia y
   nada de rebotes. La referencia es un mando de equipo bueno — pesa, frena
   solo y no oscila. Todo con transform y opacity, que son las dos únicas
   propiedades que el navegador anima sin repintar.
   -------------------------------------------------------------------------- */

:root{
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur: .72s;
}

/* aparición al entrar en pantalla: los hijos del contenedor, escalonados */
.js [data-reveal] > *:not(img){
  opacity:0; transform:translateY(18px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js [data-reveal].is-in > *:not(img){ opacity:1; transform:none; }
.js [data-reveal] > *:nth-child(2){ transition-delay:.07s }
.js [data-reveal] > *:nth-child(3){ transition-delay:.14s }
.js [data-reveal] > *:nth-child(4){ transition-delay:.21s }
.js [data-reveal] > *:nth-child(5){ transition-delay:.28s }
.js [data-reveal] > *:nth-child(6){ transition-delay:.35s }

/* el aparato entra con un punto más de escala y un barrido de luz encima:
   es el prisma hecho movimiento, y sólo ocurre una vez */
.js .hero__art, .js .piece__art{ opacity:0; transition:opacity 1s var(--ease); }
.js .hero__art.is-in, .js .piece__art.is-in{ opacity:1; }
.js .hero__art [data-tilt], .js .piece__art [data-tilt]{ --s:1.03; }
.js .hero__art.is-in [data-tilt], .js .piece__art.is-in [data-tilt]{ --s:1; }

.hero__art::after, .piece__art::after{
  content:""; position:absolute; inset:0 var(--pad); border-radius:var(--r);
  pointer-events:none; z-index:2;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.13) 50%, transparent 58%);
  background-size:300% 100%; background-position:220% 0; background-repeat:no-repeat;
}
.piece__art::after{ inset:0; }
.js .hero__art.is-in::after, .js .piece__art.is-in::after{
  animation:sweep 1.5s var(--ease) .35s both;
}
@keyframes sweep{ from{ background-position:220% 0 } to{ background-position:-120% 0 } }

/* inclinación sutil siguiendo el puntero: da volumen sin llamar la atención */
[data-tilt]{
  --s:1;
  transform:perspective(1500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s));
  transition:transform 1.2s var(--ease);
}
[data-tilt].is-tilting{ transition:transform .12s linear; }

/* la barra se asienta al bajar */
.nav{ transition:height .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); }
.nav__in{ transition:height .3s var(--ease); }
.nav.is-down{ background:rgba(8,9,10,.94); border-bottom-color:var(--line-hi); }
.nav.is-down .nav__in{ height:56px; }

/* brillo que cruza el botón principal al pasar por encima */
.btn--solid{ position:relative; overflow:hidden; }
.btn--solid::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  background-size:300% 100%; background-position:220% 0; background-repeat:no-repeat;
}
.btn--solid:hover::after{ animation:sweep .7s var(--ease) both; }
.btn--solid:hover{ transform:translateY(-1px); }
.btn{ transition:background .16s, border-color .16s, color .16s, opacity .16s, transform .16s var(--ease); }
.btn--ghost:hover{ transform:translateY(-1px); }

/* fichas y datos: se levantan al pasar por encima */
.creed__grid > div, .grid > div{ transition:background-color .25s var(--ease); }
.creed__grid > div:hover, .grid > div:hover{ background:var(--bg-3); }
.piece__meta span{ transition:border-color .2s var(--ease), color .2s var(--ease); }
.piece__meta span:hover{ border-color:var(--ink-3); color:var(--ink); }

/* el botón de reproducir late mientras suena */
.ab__play.is-playing{ animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(244,245,246,.28) } 70%{ box-shadow:0 0 0 12px rgba(244,245,246,0) } }
.ab__bar i{ transition:width .1s linear; }

/* --------------------------------------------------------------------------
   Quien haya pedido menos movimiento en su sistema no ve nada de lo anterior,
   pero sigue viendo la página entera.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal] > *:not(img){ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .hero__art, .js .piece__art{ opacity:1 !important; }
  .hero__art::after, .piece__art::after, .btn--solid::after{ display:none; }
  [data-tilt]{ transform:none !important; }
  .ab__play.is-playing{ animation:none; }
}

/* ==========================================================================
   TIPOGRAFÍA Y COLOR

   Dos problemas que tenía la versión anterior: una sola tipografía, así que
   todo pesaba igual y no había jerarquía; y un solo tono, porque decidí no
   comprometer un color de marca y me pasé de frenada.

   La solución al color no es elegir uno: es que **cada producto traiga el
   suyo**, sacado de su propio render. La casa sigue siendo neutra — es la
   galería — y el cuadro pone el color. El día que saques un plugin azul,
   añades una línea y su sección entera se tiñe sola.
   ========================================================================== */

/* El rótulo: Sacramento, un script fino de Z inequívoca — el defecto que
   descartó a Great Vibes, cuya Z se lee como una L. Al ser cursiva va en caja
   mixta y sin espaciado: las letras tienen que tocarse. */
@font-face{
  font-family:'Sacramento';
  src:url('/fonts/sacramento.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('/fonts/instrument-serif-normal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('/fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}

:root{
  --display:'Instrument Serif', 'Iowan Old Style', Palatino, Georgia, serif;
  /* Para cambiar la tipografía del nombre: el nombre aquí, y el peso y el
     espaciado en .mark__name. La fuente se declara arriba en @font-face. */
  --wordmark:'Sacramento', 'Snell Roundhand', cursive;
  --wordmark-peso:400;
  --wordmark-track:0;
  /* la casa no tiene color: su acento es la propia tinta */
  --accent:var(--ink);
  --accent-ink:var(--bg);
  --accent-soft:var(--ink-2);
}

/* ---- el color lo trae cada producto ---- */
[data-accent="volvo"]{
  --accent:#d8a24a;        /* el ámbar de las válvulas */
  --accent-ink:#1a1305;
  --accent-soft:#d1c4b1;   /* la crema del vúmetro */
}

/* ---- tres voces distintas: display con contraste, texto neutro, datos mono ---- */
h1,h2{
  font-family:var(--display); font-weight:400; letter-spacing:-.005em;
}
h1{ font-size:clamp(3rem,7.6vw,5.9rem); line-height:.96; }
h2{ font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.04; }
h3{ font-family:var(--sans); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; }
em{ font-style:italic; color:var(--accent-soft); }
.pricetag .price{ font-family:var(--display); font-weight:400; font-size:4rem; letter-spacing:-.01em; }

/* la etiqueta técnica se tiñe sólo dentro de un producto */
[data-accent] .tag{ color:var(--accent); }

/* ---- dónde se ve el color ---- */
[data-accent] .btn--solid{ background:var(--accent); color:var(--accent-ink); }
[data-accent] .ab__bar i{ background:var(--accent); }
[data-accent] .ab__toggle button.is-on{ background:var(--accent); color:var(--accent-ink); }
[data-accent] .ab__play{ background:var(--accent); }
[data-accent] .ab__play svg{ fill:var(--accent-ink); }
[data-accent] .piece__meta span:hover{ border-color:var(--accent); color:var(--accent); }
[data-accent] .ticks li::before{ background:var(--accent); }
[data-accent] dt{ color:var(--accent); }
[data-accent] .strip b{ color:var(--accent-soft); }

/* el resplandor bajo el aparato toma su color, no blanco */
[data-accent] .hero__art::before{
  background:radial-gradient(58% 50% at 50% 45%,
    color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
}
[data-accent] .piece__art::before{
  background:radial-gradient(50% 100% at 50% 0,
    color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}
[data-accent] .ab__play.is-playing{ animation:pulseAccent 2s ease-in-out infinite; }
@keyframes pulseAccent{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 34%, transparent) }
  70%    { box-shadow:0 0 0 12px transparent }
}

/* ---- relieve entre secciones: dejan de ser todas el mismo negro ---- */
.creed{ background:var(--bg-2); }
.inside{ background:var(--bg-2); border-block:1px solid var(--line); }
.buy{ background:
  radial-gradient(70% 120% at 50% 0, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
  var(--bg); }

/* la primera pieza de la estantería, sobre su propio halo */
.piece[data-accent]{ background:
  radial-gradient(85% 100% at 22% 50%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 62%),
  var(--bg); }

/* la serif ocupa más que la sans: las cajas de los titulares se ensanchan */
.hero h1{ max-width:20ch; }
.lead h1{ max-width:14ch; }

/* --------------------------------------------------------------------------
   LA MARCA

   El ave hereda el color del texto y el collar toma el del fondo, de modo que
   el negativo sigue leyendose igual en claro y en oscuro. Con un relleno fijo
   casi negro, la marca desaparecia sobre el fondo del sitio.
   -------------------------------------------------------------------------- */
:root{ --mark-ink: var(--ink); --mark-void: var(--bg); }

.mark__ave{
  width:40px; height:35px; flex:0 0 auto; display:block;
  color:var(--ink); overflow:visible;
}
.nav.is-down .mark__ave{ width:34px; height:29px; }
.nav.is-down .mark__name{ font-size:22px; }
.mark__name{ transition:font-size .3s var(--ease); }
.mark__ave, .nav .mark__ave{ transition:width .3s var(--ease), height .3s var(--ease); }
.mark:hover .mark__ave{ color:var(--ink); }

/* en el pie la marca va sobre el fondo elevado */
.foot{ --mark-void: var(--bg-2); }
/* El ave y el nombre en linea; la frase debajo. Con flex, el max-width de la
   frase le ganaba al salto de linea y se quedaba pegada al nombre. */
.foot__mark .mark__ave{ display:inline-block; vertical-align:middle; margin-right:12px;
                        width:38px; height:33px; }
.foot__mark .mark__name{ display:inline-block; vertical-align:middle; font-size:24px; }

@media (max-width: 560px){
  .mark__ave{ width:33px; height:29px; }
  .mark__name{ font-size:21px; }
}

/* --------------------------------------------------------------------------
   El aparato en movimiento. Un vídeo en bucle, no un GIF: el GIF sólo admite
   256 colores —los degradados del panel se bandean— y pesa 19 veces más.
   -------------------------------------------------------------------------- */
.hero__art video.pieza, .piece__art video.pieza{
  display:block; width:100%; height:auto;
  /* Sin marco. Las esquinas del render son negro puro y el fondo de la página
     es (8,9,10): con un borde recto se veía el rectángulo recortado. La
     máscara funde los cuatro cantos y el aparato emerge de la página. */
  border:0; border-radius:var(--r);
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite:intersect;
}
/* quien haya pedido menos movimiento ve el cartel fijo, no el bucle */
@media (prefers-reduced-motion: reduce){
  video.pieza{ display:none; }
  video.pieza + img, .hero__art .respaldo{ display:block; }
}

/* El vídeo sólo empieza cuando entra en pantalla: así la portada no descarga
   300 KB antes de que nadie los vea. */
video.pieza[data-espera]{ }

/* --------------------------------------------------------------------------
   EL TELÓN
   El aparato girando muy despacio detrás de la página del plugin. Es
   atmósfera, no información: va desenfocado, atenuado y bajo un velo oscuro,
   porque lo que tiene que leerse es el texto, no el vídeo.
   -------------------------------------------------------------------------- */
body[data-telon]{ background:transparent; }
html:has(body[data-telon]){ background:var(--bg); }

.telon{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.telon video{
  width:100%; height:100%; object-fit:cover;
  filter:blur(3px) saturate(.95);
  transform:scale(1.06);            /* el desenfoque come los bordes: se compensa */
  opacity:.62;
}
/* velo: más oscuro arriba y abajo, algo más abierto en el centro */
.telon::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(140% 90% at 50% 40%, rgba(8,9,10,0), rgba(8,9,10,.55) 78%),
    linear-gradient(180deg, rgba(8,9,10,.45), rgba(8,9,10,.12) 40%, rgba(8,9,10,.78));
}

/* Las secciones dejan de ser opacas para que el telón se intuya detrás,
   pero conservan cuerpo suficiente para que el texto no pierda contraste. */
body[data-telon] .strip{ background:color-mix(in srgb, var(--bg-2) 62%, transparent); backdrop-filter:blur(6px); }
body[data-telon] .inside{ background:color-mix(in srgb, var(--bg-2) 60%, transparent); backdrop-filter:blur(6px); }
body[data-telon] .specs{ background:color-mix(in srgb, var(--bg-2) 66%, transparent); backdrop-filter:blur(6px); }
body[data-telon] .grid > div{ background:color-mix(in srgb, var(--bg) 72%, transparent); }
body[data-telon] .ab{ background:color-mix(in srgb, var(--bg-2) 72%, transparent); backdrop-filter:blur(8px); }
body[data-telon] .foot{ background:color-mix(in srgb, var(--bg-2) 74%, transparent); backdrop-filter:blur(8px); }
body[data-telon] .buy{ background:
  radial-gradient(70% 120% at 50% 0, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%); }

@media (prefers-reduced-motion: reduce){ .telon video{ display:none; } }
@media (max-width: 720px){ .telon video{ opacity:.48; } }

/* La imagen de la portada recibe el mismo fundido que el vídeo de la ficha:
   el render tiene las esquinas en negro puro y el fondo de la página es
   (8,9,10), así que con un borde recto se marcaba el rectángulo. */
.piece__art img{
  border:0;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite:intersect;
}

/* --------------------------------------------------------------------------
   IDIOMA
   Dos direcciones distintas, /  y  /es/ , cada una indexable. Nunca se
   redirige por IP: la IP dice dónde estás, no qué idioma hablas, y además
   Google rastrea desde un solo país y sólo vería una de las dos versiones.
   -------------------------------------------------------------------------- */
.idioma{ display:flex; align-items:center; gap:2px; margin-right:14px; }
.idioma a{
  font:600 11px/1 var(--mono); letter-spacing:.08em; color:var(--ink-3);
  padding:7px 8px; border-radius:var(--r); transition:color .16s, background .16s;
}
.idioma a:hover{ color:var(--ink); }
.idioma a.is-on{ color:var(--ink); background:var(--bg-3); }

/* la banda se ofrece y se puede descartar; nunca redirige sola.
   El atributo hidden lo anula cualquier display del autor, así que hay que
   declararlo a mano o el elemento se ve aunque JavaScript lo dé por oculto. */
.sugerencia[hidden]{ display:none; }
.sugerencia{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  padding:12px var(--pad); background:var(--bg-3); border-bottom:1px solid var(--line);
  font-size:14px; color:var(--ink-2);
}
.sugerencia p{ margin:0; }
.sugerencia .btn{ padding:9px 16px; font-size:13px; }
.sugerencia button[data-descartar]{
  background:none; border:0; color:var(--ink-3); font:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.sugerencia button[data-descartar]:hover{ color:var(--ink-2); }
@media (max-width: 560px){ .sugerencia{ font-size:13px; gap:10px; } }
@media (max-width: 920px){ .idioma{ margin-right:8px; } }


/* --------------------------------------------------------------------------
   PÁGINAS DE TEXTO
   Legales, soporte, descargas. Medida corta y jerarquía marcada: son páginas
   que se leen buscando un dato, no de corrido.
   -------------------------------------------------------------------------- */
.doc{ padding:clamp(56px,8vw,104px) 0 clamp(72px,10vw,128px); }
.doc .wrap{ max-width:760px; }
.doc .tag{ display:block; margin-bottom:20px; }
.doc h1{ font-size:clamp(2rem,4.6vw,3.1rem); text-wrap:balance; }
.doc h2{
  font-size:1.06rem; margin-top:44px; padding-top:22px;
  border-top:1px solid var(--line);
}
.doc h2:first-of-type{ margin-top:38px; }
.doc p, .doc li{ color:var(--ink-2); margin-top:14px; line-height:1.72; }
.doc .lede{ margin-top:22px; }
.doc strong{ color:var(--ink); font-weight:600; }
.doc ul{ margin:14px 0 0; padding-left:1.1em; }
.doc li{ margin-top:8px; }
.doc li::marker{ color:var(--ink-3); }
/* Sólo los enlaces de texto. Sin :not(.btn) esta regla gana en especificidad a
   .btn--solid y le deja el texto del mismo color que su fondo. */
.doc a:not(.btn){ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-hi); transition:text-decoration-color .18s var(--ease); }
.doc a:not(.btn):hover{ text-decoration-color:currentColor; }
.doc__fecha{
  margin-top:16px; color:var(--ink-3);
  font:500 11px/1.8 var(--mono); letter-spacing:.09em; text-transform:uppercase;
}
.doc__cta{ margin-top:30px; }
.doc__cta .btn{ font-family:var(--mono); }
.doc__vacio{
  margin-top:26px; padding:clamp(24px,3.4vw,34px);
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2);
}
.doc__vacio p{ margin:0; }

/* Dato que solo conoce el autor y todavía no está puesto. Se pinta para que
   sea imposible publicar el sitio sin darse cuenta de que falta. */
.pendiente{
  color:#e0a23c; background:color-mix(in srgb, #e0a23c 12%, transparent);
  border:1px dashed color-mix(in srgb, #e0a23c 45%, transparent); border-radius:3px;
  padding:1px 6px; font:500 .84em/1.5 var(--mono); white-space:nowrap;
}