:root{
  /* Solo dos colores corporativos: MAGENTA + NEGRO. El resto, neutros puros. */
  /* #E91E8C es el magenta de marca y NO se toca: se usa en filetes, iconos y
     decoración. Pero sobre blanco da 4,18:1 y AA pide 4,5, así que para TEXTO y
     para rellenos con texto blanco encima se usan las dos variantes de abajo,
     calculadas al tono exacto de la marca. Verificado el 2026-08-19. */
  --mag:#E91E8C; --mag-hi:#FF099B; --mag-wash:#FDEFF7; --on-mag:#FFFFFF;
  --mag-aa:#E11684;    /* 4,52:1 con blanco, en los dos sentidos */
  --mag-deep:#D3157C;  /* 4,53:1 sobre --mag-wash */
  /* Relleno de boton: el rosa EXACTO del logotipo, medido sobre el PNG
     (#E2007A es el tono dominante). Da 4,65:1 con blanco, o sea que cumple AA
     por si solo y no hay que retocarlo. Va SIN redefinir en modo oscuro a
     proposito: el boton de "Pedir presupuesto" salia en #FF66B8 —un rosa chicle
     que no es el de la marca— porque heredaba la variante aclarada del tema
     oscuro. Decision de Carlos, 2026-08-23: el boton es el rosa del logo en los
     dos modos. */
  --mag-btn:#E2007A; --mag-btn-hi:#C7006B; --on-mag-btn:#FFFFFF;
  --line-ui:#949494;   /* 3,03:1 con blanco: borde de control interactivo */
  /* Azul del nombre en las resenas de Google. Estaba fijo en #1A73E8 y no
     reaccionaba al tema: sobre papel oscuro daba 4,31:1 y AA pide 4,5. */
  --azul-resena:#1A73E8;
  --ink:#111111; --ink-2:#474747; --paper:#FFFFFF;
  --surface:#F5F5F5; --surface-2:#E9E9E9;
  --line:#E0E0E0; --line-2:#C0C0C0; --muted:#6E6E6E;
  --night:#0D0D0D; --night-2:#1A1A1A; --night-line:#2E2E2E;
  --night-ink:#F5F5F5; --night-muted:#9A9A9A;
  --r-btn:999px; --r-card:16px; --r-sm:10px;
  --maxw:1220px;
  /* La web es de tema claro y solo claro (decision de Carlos, 2026-08-23).
     Habia modo oscuro y salia caro de mantener: la portada perdia el ritmo de
     bandas claro/gris/negro sobre el que se apoya "Fabricamos por detras", la
     tarjeta del configurador se volvia invisible sobre #161616 y dos heroes
     abrian con una losa clara —su fotografia lo es— sobre pagina negra.
     color-scheme se declara para que el navegador tampoco oscurezca por su
     cuenta los controles nativos. */
  color-scheme:light;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--mag);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:34px}
@media(max-width:640px){.wrap{padding-inline:20px}}

h1,h2,h3{margin:0;text-wrap:balance}
h1{font-size:clamp(2.7rem,7.6vw,5.8rem);font-weight:800;letter-spacing:-.048em;line-height:.92}
h1 .thin,h2 .thin{font-weight:270;letter-spacing:-.038em}
h2{font-size:clamp(2rem,4.6vw,3.5rem);font-weight:800;letter-spacing:-.042em;line-height:1}
h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;line-height:1.28}
p{margin:0}
.lede{font-size:clamp(1.02rem,1.35vw,1.1875rem);color:var(--ink-2);line-height:1.6;max-width:56ch}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0;display:flex;align-items:center;gap:9px}
.tag::before{content:"";width:16px;height:1px;background:var(--mag);flex:none;transform-origin:left;animation:growLine .8s cubic-bezier(.2,.8,.3,1) both}
@keyframes growLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ══ artes gráficas: magenta + negro ══ */
.dens{display:flex;height:5px;width:100%;border-radius:999px;overflow:hidden}
.dens i{flex:1}
.dens i:nth-child(1){background:var(--ink)}
.dens i:nth-child(2){background:var(--mag);opacity:.35}
.dens i:nth-child(3){background:var(--mag);opacity:.7}
.dens i:nth-child(4){background:var(--mag)}
.dens.thin{height:3px;border-radius:0}
.reg{width:22px;height:22px;position:relative;color:var(--line-2);flex:none;animation:spinReg 14s linear infinite}
@keyframes spinReg{to{transform:rotate(360deg)}}
.reg::before,.reg::after{content:"";position:absolute;background:currentColor}
.reg::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.reg::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.reg span{position:absolute;inset:5px;border:1px solid currentColor;border-radius:50%}
.crop{position:absolute;width:19px;height:19px;color:var(--line-2);pointer-events:none}
.crop::before,.crop::after{content:"";position:absolute;background:currentColor}
.crop::before{width:1px;height:100%}
.crop::after{height:1px;width:100%}
.crop.tl{top:0;left:0}.crop.tl::before{left:0;top:0}.crop.tl::after{top:0;left:0}
.crop.tr{top:0;right:0}.crop.tr::before{right:0;top:0}.crop.tr::after{top:0;right:0}
.crop.bl{bottom:0;left:0}.crop.bl::before{left:0;bottom:0}.crop.bl::after{bottom:0;left:0}
.crop.br{bottom:0;right:0}.crop.br::before{right:0;bottom:0}.crop.br::after{bottom:0;right:0}
.halftone{position:absolute;inset:0;pointer-events:none;color:var(--mag);opacity:.13;
  background-image:radial-gradient(currentColor 1.05px,transparent 1.3px);background-size:8px 8px;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 78% 22%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse 62% 78% at 78% 22%,#000 0%,transparent 72%);
  animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{from{background-position:0 0}to{background-position:34px 24px}}

/* ══ botones redondeados ══ */
.btn{display:inline-flex;align-items:center;gap:.6em;font-size:.875rem;font-weight:650;padding:1em 1.7em;
  border:1.5px solid transparent;border-radius:var(--r-btn);text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .25s}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 55%);opacity:0;transition:opacity .3s}
.btn:hover::before{opacity:1}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.b-fill{background:var(--mag-btn);color:var(--on-mag-btn);border-color:var(--mag-btn);box-shadow:none}
.b-fill:hover{background:var(--mag-btn-hi);border-color:var(--mag-btn-hi);box-shadow:none}
.b-line{background:transparent;color:var(--ink);border-color:var(--line-ui)}
.b-line:hover{border-color:var(--mag-aa);color:var(--mag-aa)}
.b-night{background:transparent;color:var(--night-ink);border-color:var(--night-line)}
.b-night:hover{border-color:var(--mag);color:var(--mag)}
.arw{font-family:var(--mono);transition:transform .22s cubic-bezier(.2,.8,.3,1);position:relative;z-index:1}
.btn:hover .arw{transform:translateX(4px)}
.btn>*{position:relative;z-index:1}

header.site{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;gap:38px;height:74px}
.brand{font-weight:850;font-size:1.0625rem;letter-spacing:-.05em;text-decoration:none;white-space:nowrap;display:flex;align-items:baseline;gap:1px}
.brand i{font-style:normal;color:var(--mag)}
.nav{display:flex;gap:29px;flex:1}
.nav a{font-size:.875rem;font-weight:550;text-decoration:none;color:var(--ink-2);position:relative;padding:5px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--mag);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
@media(max-width:980px){.nav{display:none}}

/* ══ héroe ══ */
.hero{padding:92px 0 84px;position:relative;overflow:hidden}
/* Paginas de eje sin fotografia: mismo aire que los heroes con imagen, para
   que las cinco cabeceras se lean como un sistema y no como tres decisiones
   distintas. No afecta a la portada. */
.hero--eje{padding:58px 0 54px}
.hero--eje .hero-simple{padding-block:8px}
.hero--eje .hero-simple h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.hero--eje .hero-simple .lede{margin-top:20px}
.hero--eje .hero-cta{margin-top:28px}
@media(max-width:960px){.hero--eje{padding:44px 0 42px}}
.hero-inner{position:relative}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:58px;align-items:center;position:relative;padding:26px 0}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:52px;padding:24px 0}.hero{padding:58px 0 60px}}
.hero h1{margin:22px 0 0}
.hero .lede{margin-top:26px}
.hero-cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.hero-meta{display:flex;align-items:center;gap:14px;margin-top:44px;padding-top:20px;border-top:1px solid var(--line)}
.hero-meta .dens{width:112px;height:4px}
.hero-meta span{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--muted)}
.ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ln>span{display:block;transform:translateY(105%);animation:lineUp .95s cubic-bezier(.16,.9,.28,1) forwards}
@keyframes lineUp{to{transform:translateY(0)}}
.fadeUp{opacity:0;transform:translateY(18px);animation:fadeUp .8s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

.stage{perspective:1400px;display:flex;justify-content:center;padding:8px}
/* La tarjeta de las secciones oscuras. Era negro sobre negro y se perdía: ahora
   lleva un rescoldo magenta en la esquina, filo superior de marca y chip dorado.
   El chip va en ::before y el brillo en ::after, así ninguna de las nueve páginas
   que la usan tiene que tocar su HTML. */
.pvc{position:relative;width:min(100%,442px);aspect-ratio:85.6/54;border-radius:3.71%/5.89%;
  background:
    radial-gradient(125% 96% at 88% 6%, rgba(233,30,140,.46) 0%, rgba(233,30,140,.14) 36%, transparent 68%),
    radial-gradient(90% 80% at 8% 92%, rgba(255,9,155,.14) 0%, transparent 60%),
    linear-gradient(142deg,#333 0%,#151515 46%,#242424 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 38px 72px -22px rgba(0,0,0,.66),0 2px 8px rgba(0,0,0,.34),
             inset 0 1px 0 rgba(255,255,255,.13);
  padding:8.5% 8% 7.5%;display:flex;flex-direction:column;justify-content:space-between;
  transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-11deg));
  transition:transform .55s cubic-bezier(.22,.68,.32,1);will-change:transform;
  animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -12px}}
/* Chip de contacto: es lo que hace que se lea como tarjeta y no como rectángulo. */
/* 58% deja el chip entre la etiqueta y el pie: a 34% se montaba encima del slot. */
.pvc::before{content:"";position:absolute;z-index:2;left:8.5%;top:57%;
  width:13%;aspect-ratio:1.32/1;border-radius:4px;
  background:linear-gradient(135deg,#B8901F 0%,#F2DC86 38%,#C9A227 62%,#8F6E14 100%);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4)}
.pvc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,transparent 28%,rgba(255,255,255,.22) 46%,transparent 64%);
  background-size:260% 100%;animation:shine 5.5s ease-in-out infinite}
/* Filo superior magenta: el detalle que la ata a la marca sin poner el logotipo. */
.pvc .slot::before{content:"";position:absolute;left:-8.5%;right:-8.5%;top:-14%;height:2px;
  background:linear-gradient(90deg,var(--mag) 0%,rgba(233,30,140,.5) 42%,transparent 78%)}
@keyframes shine{0%{background-position:150% 0}55%,100%{background-position:-60% 0}}
.pvc-mag{position:absolute;left:0;right:0;top:17%;height:13%;background:#080808}
.slot{position:relative;z-index:2;align-self:flex-start;margin-top:12%;min-width:58%;min-height:2.9em;display:flex;align-items:center;padding:.62em .85em;border-radius:6px}
.slot .lbl{font-family:var(--mono);font-size:clamp(10px,2.4vw,12px);letter-spacing:.14em;text-transform:uppercase;transition:opacity .42s,transform .42s}
.slot.empty{border:1.5px dashed rgba(255,255,255,.32)}
.slot.empty .lbl{color:rgba(255,255,255,.5)}
.slot.filled{border:1.5px solid transparent;background:rgba(255,255,255,.09)}
.slot.filled .lbl{color:#fff;font-weight:600;letter-spacing:.05em}
.slot.swap .lbl{opacity:0;transform:translateY(-6px)}
.chip{position:absolute;z-index:2;left:8%;bottom:26%;width:12.5%;aspect-ratio:1.3/1;border-radius:3px;background:linear-gradient(135deg,#C9A227,#F2DC86 42%,#B8901F);opacity:.92}
.pvc-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.pvc-foot span{font-family:var(--mono);font-size:clamp(11px,1.9vw,12px);letter-spacing:.1em;color:rgba(255,255,255,.42);text-transform:uppercase}
.stage-note{margin-top:22px;text-align:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--muted)}

/* ══ cifras ══ */
.facts{border-block:1px solid var(--line);background:var(--surface);padding:10px 0}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.facts-grid{grid-template-columns:repeat(2,1fr)}}
.fact{padding:34px;border-right:1px solid var(--line);position:relative;overflow:hidden;transition:background-color .3s}
.fact::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--mag);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.fact:hover{background:var(--paper)}
.fact:hover::after{transform:scaleX(1)}
.fact:last-child{border-right:0}
@media(max-width:820px){.fact{border-bottom:1px solid var(--line)}.fact:nth-child(2n){border-right:0}.fact:nth-last-child(-n+2){border-bottom:0}}
.fact b{display:block;font-family:var(--mono);font-size:clamp(1.7rem,3.5vw,2.55rem);font-weight:500;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1}
.fact span{display:block;margin-top:10px;font-size:.8125rem;color:var(--muted)}

section.band{padding:100px 0}
@media(max-width:640px){section.band{padding:66px 0}}
.rule{border-top:1px solid var(--line)}
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:44px;align-items:end;margin-bottom:56px}
@media(max-width:820px){.shead{grid-template-columns:1fr;gap:20px;align-items:start;margin-bottom:40px}}
.shead h2{margin:18px 0 0}

/* ══ catálogo: tarjetas con vida ══ */
.cat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1200px}
/* Rejilla apaisada, para paginas con cuatro fichas: en tres columnas una se
   quedaba sola en la segunda fila y el marco 4/3 hacia que cada ficha se
   leyera como un cuadrado. Dos columnas anchas y foto 16/9. */
.cat-ancha{grid-template-columns:repeat(2,1fr)}
.cat-ancha .prod-foto{aspect-ratio:16/9}
@media(max-width:600px){.cat-ancha{grid-template-columns:1fr}}
@media(max-width:900px){.cat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cat{grid-template-columns:1fr}}
.prod{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:0 0 24px;display:flex;flex-direction:column;overflow:hidden;
  transform:rotateX(var(--px,0deg)) rotateY(var(--py,0deg)) translateY(var(--pz,0px));
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.prod::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),rgba(233,30,140,.14),transparent 62%);
  transition:opacity .3s}
.prod:hover{--pz:-6px;border-color:var(--mag);box-shadow:0 10px 24px -14px rgba(0,0,0,.3)}
.prod:hover::after{opacity:1}
.prod .bar{height:4px;display:flex;flex:none}
.prod .bar i{flex:1;transform-origin:left;transition:opacity .45s ease}
.prod:hover .bar i:nth-child(4){opacity:1}
.prod .pad{padding:26px 28px 0;display:flex;flex-direction:column;gap:14px;flex:1}
.prod h3{margin:0;transition:color .25s}
.prod:hover h3{color:var(--mag-aa)}
.spec{font-family:var(--mono);font-size:12px;line-height:1.85;color:var(--muted)}
.spec b{color:var(--ink-2);font-weight:600}
.prod-foot{margin:auto 28px 0;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.moq{font-family:var(--mono);font-size:11px;letter-spacing:.11em;color:var(--muted);text-transform:uppercase;font-variant-numeric:tabular-nums}
.moq b{color:var(--ink);font-weight:600}
.pdf{font-size:.8125rem;font-weight:650;color:var(--mag-aa);text-decoration:none;white-space:nowrap;display:inline-flex;gap:.4em;align-items:center}
.pdf .arw{transition:transform .22s}
.prod:hover .pdf .arw{transform:translateY(3px)}
/* Una ficha que no lleva a ninguna parte no debe comportarse como si llevara.
   Nueve de ellas —cuatro en formatos, cinco en personalizacion— se elevaban, se
   ponian el borde magenta, encendian el titular y sacaban el resplandor igual
   que las que si tienen destino. El raton prometia un clic que no existia, y era
   la razon concreta de que esas dos paginas se sintieran a medio hacer.
   Auditoria de diseno del 2026-08-23. */
.prod:not(:has(a)):hover{--pz:0;border-color:var(--line);box-shadow:none}
.prod:not(:has(a)):hover::after{opacity:0}
.prod:not(:has(a)):hover h3{color:inherit}
.prod:not(:has(a)):hover .bar i:nth-child(4){opacity:1}

.cat .rv{transform:translateY(30px) rotateX(-12deg);transform-origin:50% 100%}
.cat .rv.on{transform:none}

/* ══ pliego ══ */
.sheet-band{background:var(--surface-2);border-block:1px solid var(--line);overflow:hidden;padding:12px 0}
.sheet-grid{display:grid;grid-template-columns:.82fr 1.18fr;align-items:center}
@media(max-width:900px){.sheet-grid{grid-template-columns:1fr}}
.sheet-copy{padding:76px 44px 76px 0}
@media(max-width:900px){.sheet-copy{padding:56px 0 12px}}
.sheet-copy h2{margin:18px 0 20px}
.press{position:relative;background:#FCFCFB;padding:26px 22px;min-height:300px;display:flex;
  /* La hoja se cine al pliego: con la columna entera era casi todo blanco a los lados.
     Ancho explicito y justify-self, no margin:auto: un margen auto en un grid item
     anula el stretch y encoge la caja al contenido. */
  width:min(100%,512px);justify-self:end;
  align-items:center;justify-content:center;border-radius:var(--r-card) 0 0 var(--r-card);
  /* Un pliego es papel. Estaba sobre negro y por eso el plano de troquel no
     terminaba de leerse: en un archivo de imposición el corte se ve sobre
     blanco. La sombra interior le da el canto de la hoja. */
  box-shadow:inset 0 0 0 1px var(--line), 0 18px 44px rgba(0,0,0,.09)}
@media(max-width:900px){.press{padding:22px 18px;min-height:240px;margin:0 -34px;border-radius:0;width:auto}}
@media(max-width:640px){.press{margin:0 -20px}}
.press .halftone{display:none}
/* El pliego como plano de troquel. Todas las tarjetas iguales: lo que se dibuja
   es el corte, no el diseño de cada una. El magenta es el color con el que se
   marca el troquel en un archivo de imposición, así que aquí coincide que es
   además el color de la marca. */
.sheet{display:block;width:100%;max-width:460px;height:auto;overflow:visible}
.sheet-tarjetas rect{fill:rgba(17,17,17,.035);stroke:var(--mag);stroke-width:.9;
  opacity:0;animation:pop .4s cubic-bezier(.2,.8,.3,1) forwards;transform-origin:center;transform-box:fill-box}
.sheet-corte line{stroke:rgba(17,17,17,.62);stroke-width:.8}
.sheet-registro circle{fill:none;stroke:rgba(17,17,17,.7);stroke-width:.8}
.sheet-registro line{stroke:rgba(17,17,17,.7);stroke-width:.8}
@media(prefers-reduced-motion:reduce){.sheet-tarjetas rect{animation:none;opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.press-marks{position:absolute;inset:13px;pointer-events:none}
.press-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:rgba(255,255,255,.35)}

/* Descarga de la ficha tecnica en la pagina de cada tecnologia. */
.ficha-pdf{margin-top:26px}
.ficha-pdf .btn{display:inline-flex;align-items:baseline;gap:.7em}
.ficha-pdf-peso{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ══ marca blanca ══ */
.night{background:var(--night);color:var(--night-ink);position:relative;overflow:hidden;padding:110px 0}
@media(max-width:640px){.night{padding:72px 0}}
.night .halftone{opacity:.15;-webkit-mask-image:radial-gradient(ellipse 58% 70% at 16% 84%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 58% 70% at 16% 84%,#000 0%,transparent 70%)}
.night .tag{color:var(--night-muted)}
.night h2,.night h3{color:var(--night-ink)}
.night .lede{color:var(--night-muted)}
.wl{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;position:relative}
@media(max-width:900px){.wl{grid-template-columns:1fr;gap:48px}}
.wl-item{padding:25px 0;border-top:1px solid var(--night-line);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);opacity:0;transform:translateX(28px)}
.wl-item.on{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}
.wl-item:last-child{border-bottom:1px solid var(--night-line)}
.wl-item.on:hover{transform:translateX(12px)}
.wl-mark{width:8px;height:8px;background:var(--mag);margin-top:9px;flex:none;border-radius:50%;transition:box-shadow .35s,transform .35s}
.wl-item:hover .wl-mark{transform:scale(1.6)}
.wl-item p{font-size:.9375rem;color:var(--night-muted);line-height:1.6;margin-top:6px}

/* etiqueta de envío neutro, animada */
.label-stage{display:flex;justify-content:center;perspective:1200px}
.label{width:min(100%,420px);background:#F7F7F5;color:#111;border-radius:var(--r-sm);padding:22px 24px 20px;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.75);position:relative;overflow:hidden;
  transform:rotateX(6deg) rotateY(-7deg);animation:floaty 8s ease-in-out infinite}
.label::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--mag)}
.lbl-h{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px dashed #A8A8A8;padding-bottom:12px;margin-bottom:14px}
.lbl-h b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#4A4A4A}
.lbl-h em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#5A5A5A}
.lbl-f{margin-bottom:14px}
.lbl-f>span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5A5A5A;margin-bottom:6px}
.lbl-val{font-size:.9375rem;font-weight:600;min-height:1.5em;letter-spacing:-.01em}
.lbl-val.sub{font-weight:400;font-size:.8125rem;color:#4A4A4A;min-height:1.2em}
.redact{position:relative;display:inline-block;min-width:190px;min-height:1.35em;border-radius:3px}
.redact .txt{position:relative;z-index:1;transition:opacity .25s}
.redact .bar{position:absolute;left:0;top:2px;bottom:2px;width:0;background:#111;border-radius:2px;z-index:2}
.redact.wiping .bar{animation:wipe 1.15s cubic-bezier(.5,0,.2,1) forwards}
@keyframes wipe{0%{width:0}55%{width:100%}100%{width:100%}}
.redact.done .txt{opacity:0}
.redact.done .bar{width:100%;background:repeating-linear-gradient(45deg,#111 0 6px,#2A2A2A 6px 12px)}
.lbl-bars{display:flex;gap:2.4px;align-items:flex-end;height:44px;margin-top:16px;padding-top:14px;border-top:1px dashed #A8A8A8}
.lbl-bars i{display:block;background:#111;height:100%}
.lbl-cap{margin-top:18px;text-align:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--night-muted)}
.lbl-cap b{color:var(--mag);font-weight:500}

/* ══ proceso ══ */
.steps{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{padding:32px 30px 36px 0;border-top:2px solid var(--line);position:relative;transition:transform .3s}
.step::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--mag);transform:scaleX(0);transform-origin:left;transition:transform .65s cubic-bezier(.2,.8,.3,1)}
.step.on::after{transform:scaleX(1)}
.step:hover{transform:translateY(-5px)}
.step .n{font-family:var(--mono);font-size:2.1rem;font-weight:400;letter-spacing:-.06em;color:var(--line-ui);display:block;margin-bottom:15px;font-variant-numeric:tabular-nums;transition:color .4s,transform .3s}
.step.on .n{color:var(--mag)}
.step:hover .n{transform:scale(1.12);transform-origin:left}
.step p{font-size:.9375rem;color:var(--muted);line-height:1.6;margin-top:8px}

/* ══ partners ══ */
.partners{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px}
@media(max-width:760px){.partners{grid-template-columns:1fr}}
.partner{padding:29px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:baseline;transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.partner:hover{transform:translateX(12px)}
.partner .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--mag-aa);text-transform:uppercase;white-space:nowrap}
.partner h3{transition:color .25s}
.partner:hover h3{color:var(--mag-aa)}
.partner p{font-size:.9375rem;color:var(--muted);line-height:1.6;margin-top:7px}

/* ══ configurador ══ */
.cfg{display:grid;grid-template-columns:1.12fr .88fr;gap:66px;align-items:center}
@media(max-width:960px){.cfg{grid-template-columns:1fr;gap:46px}}
.cfg-stage{perspective:1500px;display:flex;justify-content:center;align-items:center;min-height:340px}
.cfg-tilt{transform:rotateX(var(--crx,6deg)) rotateY(var(--cry,-9deg));transition:transform .55s cubic-bezier(.22,.68,.32,1);width:min(100%,480px)}
.cfg-flip{position:relative;width:100%;aspect-ratio:85.6/54;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.5,.05,.2,1);cursor:pointer}
.cfg-flip.back{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:3.71%/5.89%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 34px 64px -20px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3)}
.face.front{background:linear-gradient(142deg,#2E2E2E 0%,#161616 46%,#262626 100%)}
.face.back{background:linear-gradient(142deg,#232323 0%,#131313 52%,#1E1E1E 100%);transform:rotateY(180deg)}
.sheen{position:absolute;inset:0;pointer-events:none;transition:opacity .4s,background .4s}
.f-brillo .sheen{opacity:1;background:linear-gradient(116deg,transparent 28%,rgba(255,255,255,.17) 46%,rgba(255,255,255,.05) 54%,transparent 68%)}
.f-mate .sheen{opacity:.32;background:linear-gradient(116deg,transparent 34%,rgba(255,255,255,.05) 50%,transparent 66%)}
.f-uv .sheen{opacity:1;background:radial-gradient(ellipse 42% 34% at 30% 34%,rgba(255,255,255,.3) 0%,transparent 70%)}
.el{position:absolute;transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.3,1)}
.el.off{opacity:0;pointer-events:none}
.c-mag{left:0;right:0;top:15%;height:13.5%;background:#070707;transform-origin:left center}
.c-mag.off{transform:scaleX(0)}
.c-chip{left:8.5%;top:33%;width:13%;aspect-ratio:1.3/1;border-radius:3px;background:linear-gradient(135deg,#C9A227,#F2DC86 42%,#B8901F);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35)}
.c-chip.off{transform:scale(.5) rotate(-14deg)}
.c-ant{inset:0;width:100%;height:100%}
.c-ant rect{fill:none;stroke:rgba(233,30,140,.65);stroke-width:1.1;stroke-dasharray:640;stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.3,1),opacity .4s}
.c-ant.off rect{stroke-dashoffset:640}
.c-brand{left:8.5%;bottom:20%;font-family:var(--mono);font-size:clamp(10px,2.2vw,12.5px);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);font-weight:600}
.c-foot{left:8.5%;right:8.5%;bottom:8%;display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:clamp(11px,1.8vw,12px);letter-spacing:.11em;color:rgba(255,255,255,.4);text-transform:uppercase}
.c-sign{left:8.5%;right:8.5%;top:38%;height:12%;background:rgba(255,255,255,.82);border-radius:2px}
.c-code{left:8.5%;bottom:22%;display:flex;gap:2.2px;align-items:flex-end;height:15%}
.c-code i{display:block;width:2px;background:rgba(255,255,255,.72);height:100%}
.flip-hint{margin-top:24px;text-align:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--muted)}
.flip-hint b{color:var(--mag);font-weight:500}
.ctl{margin-bottom:28px}
.ctl>span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{font-family:var(--sans);font-size:.8125rem;font-weight:600;padding:.66em 1.15em;border:1.5px solid var(--line-ui);background:transparent;color:var(--ink-2);cursor:pointer;border-radius:var(--r-btn);
  transition:border-color .2s,color .2s,background-color .2s,transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s}
.opt:hover{border-color:var(--mag-aa);color:var(--mag-aa);transform:translateY(-2px)}
.opt[aria-pressed="true"]{background:var(--mag-aa);border-color:var(--mag-aa);color:var(--on-mag);box-shadow:none}
.specsheet{border-top:1px solid var(--line);margin-top:32px;padding-top:22px}
.srow{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:10px 0;font-family:var(--mono);font-size:12px;border-bottom:1px solid var(--line)}
.srow dt{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:11px;padding-top:2px}
.srow dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
.srow dd.flash{animation:flashv .5s ease}
@keyframes flashv{0%{opacity:0;transform:translateY(-5px)}100%{opacity:1;transform:none}}
.specsheet dl{margin:0}



.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
@media(max-width:820px){.cases{grid-template-columns:1fr;gap:28px}}
.case b{display:block;font-family:var(--mono);font-size:clamp(2.5rem,5.2vw,3.6rem);font-weight:500;letter-spacing:-.058em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--ink)}
.case p{margin-top:15px;font-size:.9375rem;color:var(--muted);line-height:1.6;padding-top:15px;border-top:1px solid var(--line)}

/* ══ cierre ══ */
.close-band{background:var(--night);color:var(--night-ink);padding:94px 0;position:relative;overflow:hidden}
.close-band .halftone{opacity:.16;-webkit-mask-image:radial-gradient(ellipse 56% 70% at 84% 18%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 56% 70% at 84% 18%,#000 0%,transparent 70%)}
.close-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center;position:relative}
@media(max-width:900px){.close-grid{grid-template-columns:1fr;gap:40px}}
.close-band h2,.close-band h3{color:var(--night-ink)}
.close-band .lede,.close-band .tag{color:var(--night-muted)}
.routes{border:1px solid #5F5F5F;border-radius:var(--r-card);overflow:hidden}
.route{padding:24px 26px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;text-decoration:none;border-bottom:1px solid var(--night-line);position:relative;overflow:hidden;transition:background-color .25s}
.route::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mag);transform:scaleY(0);transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.route:last-child{border-bottom:0}
.route:hover{background:var(--night-2)}
.route:hover::before{transform:scaleY(1)}
.route p{font-size:.875rem;color:var(--night-muted);line-height:1.5;margin-top:4px}
.route .go{font-family:var(--mono);color:var(--mag);font-size:1.15rem;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.route:hover .go{transform:translateX(6px)}

footer.site{padding:64px 0 34px;background:var(--surface);border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr}}
.foot .foot-h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:500}
.foot a{display:block;font-size:.875rem;color:var(--ink-2);text-decoration:none;margin-bottom:10px;transition:color .18s,transform .18s}
.foot a:hover{color:var(--mag-aa);transform:translateX(4px)}
.foot p{font-size:.875rem;color:var(--muted);line-height:1.62;max-width:32ch}
.legal{margin-top:46px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.05em;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}


/* ══ logotipo real ══ */
.brand{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.brand picture{display:block;line-height:0}
.brand img{display:block;width:auto}
/* sobre las bandas negras el logo es siempre el claro */
footer.site .brand img{height:40px!important}




@media(max-width:700px){}





.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,.wl-item{opacity:1;transform:none}
  .pvc,.cfg-tilt,.label{transform:none}
  .step::after{transform:scaleX(1)}
  .mini{opacity:1;transform:none}
  .ln>span{transform:none}
  .fadeUp{opacity:1;transform:none}
  
}

/* Red de seguridad: si el JS no llega (LiteSpeed combina y difiere scripts),
   la pagina se ve entera y quieta en vez de quedarse en blanco bajo el heroe. */
html:not(.js) .rv,html:not(.js) .wl-item,html:not(.js) .mini,html:not(.js) .fadeUp,html:not(.js) .ln>span{opacity:1!important;transform:none!important;animation:none!important}
html:not(.js) .step::after{transform:scaleX(1)!important}

/* OJO: aquí había un "html:not(.js)" suelto de una edición anterior. Como CSS se
   come los saltos de línea, no eran dos reglas sino una: "html:not(.js) .skip".
   El enlace de salto solo se ocultaba SIN JavaScript, o sea nunca, y se veía
   siempre arriba a la izquierda. No dejar selectores colgando. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;background:var(--ink);color:var(--paper);font-weight:650;text-decoration:none;border-radius:var(--r-sm)}
.skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;clip-path:none;padding:14px 20px;z-index:100}
/* :focus salta también al tocar con el dedo, y en el móvil el enlace aparecía solo.
   Se vuelve a ocultar cuando el foco NO viene del teclado. El :focus de arriba se queda
   como está para los navegadores sin :focus-visible: allí sigue el comportamiento anterior,
   que es visible de más pero nunca inaccesible. */
.skip:focus:not(:focus-visible){position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);padding:0}

/* ══════════════════════════════════════════════════════════════════
   AÑADIDOS DEL TEMA (no estaban en la maqueta estática)
   ══════════════════════════════════════════════════════════════════ */

/* ── Texto solo para lectores de pantalla ── */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── Navegación móvil ──
   En la maqueta, por debajo de 980 px la navegación desaparecía sin sustituto:
   ninguna forma de llegar a Marca blanca o Producción desde un teléfono. */
.nav-toggle{display:none;flex:none;width:46px;height:46px;padding:0;border:1.5px solid var(--line-2);border-radius:var(--r-btn);background:transparent;color:var(--ink);cursor:pointer;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.nav-toggle:hover{border-color:var(--mag);color:var(--mag)}
.nav-toggle-box{display:block;width:18px;height:12px;position:relative}
.nav-toggle-box i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .2s}
.nav-toggle-box i:nth-child(1){top:0}
.nav-toggle-box i:nth-child(2){top:50%;margin-top:-.75px}
.nav-toggle-box i:nth-child(3){bottom:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-box i:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-box i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-box i:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}

@media(max-width:980px){
  .nav-toggle{display:inline-flex}
  .hdr{gap:14px}
  .hdr-cta{margin-left:auto;padding:.85em 1.3em;font-size:.8125rem}
  .nav{position:absolute;left:0;right:0;top:100%;display:block;flex:none;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:6px 0 18px;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .38s cubic-bezier(.2,.8,.3,1),visibility 0s linear .38s}
    /* 85vh y no 70: con los cuatro grupos cerrados el menú ya ocupa 339 px, así
     que al desplegar uno de 301 px no cabía y había que hacer scroll dentro
     del propio menú para ver sus enlaces. */
  .nav.abierta{max-height:85vh;overflow-y:auto;visibility:visible;transition:max-height .38s cubic-bezier(.2,.8,.3,1),visibility 0s;overscroll-behavior:contain}
  .nav a{display:block;padding:15px 34px;font-size:1rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  header.site{position:sticky}
}
@media(max-width:640px){.nav a{padding:15px 20px}}
/* Sin JS el menú queda desplegado: mejor visible que inalcanzable. */
html:not(.js) .nav{max-height:none;visibility:visible;overflow:visible}
html:not(.js) .nav-toggle{display:none!important}

/* ── Contenido del blog ── */
.entry{font-size:1.0625rem;line-height:1.75;color:var(--ink-2)}
.entry > * + *{margin-top:1.35em}
.entry h2{font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink);margin-top:2em;letter-spacing:-.03em;line-height:1.15}
.entry h3{font-size:1.25rem;color:var(--ink);margin-top:1.8em}
.entry h4{font-size:1.05rem;color:var(--ink);margin-top:1.6em}
.entry a{color:var(--mag);text-underline-offset:3px}
.entry a:hover{text-decoration-thickness:2px}
.entry strong,.entry b{color:var(--ink);font-weight:650}
.entry ul,.entry ol{padding-left:1.3em}
.entry li + li{margin-top:.5em}
.entry ul li::marker{color:var(--mag)}
.entry img,.entry iframe,.entry video{max-width:100%;height:auto;border-radius:var(--r-sm)}
.entry figure{margin:2em 0}
.entry figcaption{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:10px}
.entry blockquote{border-left:3px solid var(--mag);padding:4px 0 4px 22px;margin-left:0;color:var(--ink);font-size:1.125rem}
.entry code{font-family:var(--mono);font-size:.9em;background:var(--surface);padding:.15em .4em;border-radius:5px;color:var(--ink)}
.entry pre{background:var(--night);color:var(--night-ink);padding:20px 22px;border-radius:var(--r-sm);overflow-x:auto}
.entry pre code{background:none;padding:0;color:inherit}
.entry table{width:100%;border-collapse:collapse;font-size:.9375rem;display:block;overflow-x:auto}
.entry th,.entry td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.entry th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.entry hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}

/* ── Buscador ── */
.buscador{display:flex;gap:10px;flex-wrap:wrap}
.buscador input[type="search"]{flex:1;min-width:min(100%,15rem);font-family:var(--sans);font-size:.9375rem;padding:.95em 1.2em;border:1.5px solid var(--line-2);border-radius:var(--r-btn);background:var(--paper);color:var(--ink)}
.buscador input[type="search"]:focus{border-color:var(--mag-aa);outline:2px solid var(--mag-aa);outline-offset:2px}
.buscador input::placeholder{color:var(--muted)}

/* ── Paginación de listados ── */
.pagination{margin-top:56px;display:flex;justify-content:center}
.nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 .9em;
  border:1.5px solid var(--line-2);border-radius:var(--r-btn);text-decoration:none;font-family:var(--mono);font-size:.875rem;
  color:var(--ink-2);transition:border-color .2s,color .2s}
.page-numbers:hover{border-color:var(--mag);color:var(--mag)}
.page-numbers.current{background:var(--mag);border-color:var(--mag);color:var(--on-mag)}
.page-numbers.dots{border-color:transparent}

/* ── Dónde estoy ──
   El critique señaló que la navegación no marcaba la sección actual
   en una web de 8 anclas y 6.000 px de scroll. */
.nav a[aria-current="page"]{color:var(--ink);font-weight:650}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media(max-width:980px){
  .nav a[aria-current="page"]{color:var(--mag)}
  .nav a[aria-current="page"]::after{display:none}
}

/* ══════════════════════════════════════════════════════════════
   Presupuesto y contacto — estructura de tarjetas
   ══════════════════════════════════════════════════════════════ */

.presu-cab{background:var(--surface);border-bottom:1px solid var(--line);padding:70px 0 60px;position:relative;overflow:hidden}
.presu-cab .wrap{position:relative}
.presu-cab .halftone{opacity:.1}
.presu-cab h1{font-size:clamp(2.1rem,4.8vw,3.6rem);margin-top:18px}
.presu-cab .lede{margin-top:20px}
.presu-cab .lede b{color:var(--ink);font-weight:650}
@media(max-width:640px){.presu-cab{padding:48px 0 42px}}

.presu-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start;padding-top:48px}
@media(max-width:1060px){.presu-grid{grid-template-columns:1fr;gap:24px}}
.presu-col{display:grid;gap:24px;min-width:0}
.presu-sticky{position:sticky;top:98px;display:grid;gap:20px}
@media(max-width:1060px){.presu-sticky{position:static}}

/* ── tarjeta base ── */
.tarj{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:32px 34px}
@media(max-width:640px){.tarj{padding:26px 22px;border-radius:16px}}
.tarj-cab{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.tarj-num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--mag-aa);color:var(--on-mag);
  display:grid;place-items:center;font-family:var(--mono);font-size:.875rem;font-weight:500;font-variant-numeric:tabular-nums}
.tarj-cab h2,.tarj-cab h3{font-size:1.1875rem;font-weight:750;letter-spacing:-.028em;color:var(--ink);line-height:1.2}
.tarj-icono{flex:none;width:34px;height:34px;border-radius:50%;background:var(--mag-wash);color:var(--mag);display:grid;place-items:center}
.tarj-icono svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tarj-ayuda{font-size:.9375rem;color:var(--muted);line-height:1.65;margin:-14px 0 24px;max-width:64ch}
.tarj-ayuda b{color:var(--ink);font-weight:650}
.tarj.atenuada{opacity:.35;pointer-events:none;transition:opacity .3s}

/* ── campos ── */
.rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:640px){.rejilla{grid-template-columns:1fr}}
.ancho{grid-column:1/-1}
.campo{display:flex;flex-direction:column;gap:9px;min-width:0}
.campo > label,.campo > .etq{font-size:.8125rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.campo input,.campo select,.campo textarea{
  font-family:var(--sans);font-size:.9375rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line-ui);border-radius:12px;padding:.92em 1.05em;width:100%;
  transition:border-color .2s,box-shadow .2s}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;cursor:pointer}
.campo textarea{resize:vertical;min-height:6.5em;line-height:1.6}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--line-2)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--mag-aa);outline:2px solid var(--mag-aa);outline-offset:2px;box-shadow:none}
.campo input::placeholder,.campo textarea::placeholder{color:var(--muted)}
.campo-nota{font-size:.8125rem;color:var(--muted);line-height:1.55}
.campo-nota b{color:var(--ink-2);font-weight:650}

/* ── opciones tipo pastilla ── */
.pastillas{display:flex;flex-wrap:wrap;gap:10px}
.pastilla{position:relative}
.pastilla input{position:absolute;opacity:0;width:0;height:0}
.pastilla span{display:inline-block;padding:.82em 1.35em;border:1.5px solid var(--line-ui);border-radius:var(--r-btn);
  font-size:.875rem;font-weight:650;color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.pastilla:hover span{border-color:var(--line-2)}
.pastilla input:checked + span{border-color:var(--mag-aa);color:var(--mag-deep);background:var(--mag-wash)}
.pastilla input:focus-visible + span{outline:2px solid var(--mag);outline-offset:3px}

/* ── opciones grandes (cualificación) ── */
.opciones{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:640px){.opciones{grid-template-columns:1fr}}
.opcion{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;cursor:pointer;
  border:1.5px solid var(--line-ui);border-radius:14px;transition:border-color .2s,background-color .2s}
.opcion:hover{border-color:var(--line-2)}
.opcion input{margin:2px 0 0;accent-color:var(--mag);width:17px;height:17px;flex:none}
.opcion:has(input:checked){border-color:var(--mag);background:var(--mag-wash)}
.opcion-cuerpo b{display:block;font-size:.9063rem;font-weight:700;color:var(--ink);letter-spacing:-.012em}
.opcion-cuerpo em{display:block;margin-top:4px;font-style:normal;font-size:.8125rem;color:var(--muted);line-height:1.5}
/* La opción de cliente final ya no es una salida: ocupa la fila entera porque
   es la quinta de cuatro, pero se presenta como una más. */
.opcion-salida{grid-column:1/-1}

.salida{margin-top:20px;padding:22px 24px;border-radius:14px;background:var(--night);color:var(--night-ink)}
.salida p{font-size:.9063rem;line-height:1.65;color:var(--night-muted)}
.salida p + p{margin-top:10px}
.salida b{color:var(--night-ink);font-weight:650}
.salida a{color:var(--mag);font-weight:600}

/* ── zona de archivos ── */
.soltar{position:relative;border:1.5px dashed var(--line-2);border-radius:14px;padding:34px 24px;text-align:center;
  transition:border-color .2s,background-color .2s}
.soltar:hover,.soltar.encima{border-color:var(--mag);background:var(--mag-wash)}
.soltar input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.soltar p{font-size:.9375rem;color:var(--muted);line-height:1.6;pointer-events:none}
.soltar b{color:var(--mag);font-weight:650}
.soltar small{display:block;margin-top:7px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.01em}
.soltar-lista{margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);line-height:1.7;text-align:left}

.check{display:flex;gap:12px;align-items:flex-start;font-size:.9063rem;color:var(--ink-2);cursor:pointer;line-height:1.55}
.check input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--mag);flex:none}
.check a{color:var(--mag);font-weight:650}

/* ── panel oscuro de resumen ── */
.tarj-oscura{background:var(--night);border:1px solid var(--night-line);color:var(--night-ink);border-radius:20px;padding:30px 30px 26px}
.tarj-oscura h2{font-size:1.1875rem;font-weight:750;letter-spacing:-.028em;margin-bottom:22px}
.resumen{margin:0}
.resumen div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--night-line);font-size:.875rem}
.resumen dt{color:var(--night-muted)}
.resumen dd{margin:0;font-weight:700;color:var(--night-ink);text-align:right}
.resumen dd.pendiente{color:var(--night-muted);font-weight:400}
.resumen-nota{margin-top:20px;font-size:.875rem;line-height:1.6;color:var(--night-muted)}
.resumen-nota b{color:var(--night-ink);font-weight:650}
.tarj-oscura .btn{width:100%;justify-content:center;margin-top:22px}
.tarj-oscura .pie{margin-top:14px;text-align:center;font-size:.8125rem;color:var(--night-muted)}

/* ── tarjeta de llamada ── */
.tarj-llamar{display:flex;align-items:center;gap:16px;padding:22px 24px}
.tarj-llamar .tarj-icono{width:42px;height:42px}
.tarj-llamar b{display:block;font-size:.9375rem;font-weight:700;color:var(--ink)}
.tarj-llamar span{display:block;margin-top:3px;font-size:.875rem;color:var(--muted)}
.tarj-llamar a{color:var(--mag);font-weight:700;text-decoration:none}

/* ── datos y horario ── */
.dato{display:flex;gap:15px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--line);text-decoration:none}
.dato:last-child{border-bottom:0;padding-bottom:0}
.dato-txt span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dato-txt b{display:block;margin-top:5px;font-size:1rem;font-weight:700;letter-spacing:-.018em;color:var(--ink);line-height:1.45;transition:color .2s}
a.dato:hover .dato-txt b{color:var(--mag-aa)}
.horario div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.horario div:last-of-type{border-bottom:0}
.horario dt{font-weight:700;color:var(--ink)}
.horario dd{margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums}
.horario dd.cerrado{color:var(--muted)}
.horario-nota{margin-top:18px;padding:14px 18px;border-radius:12px;background:var(--mag-wash);
  font-size:.875rem;font-weight:650;color:var(--mag-deep);display:flex;gap:9px;align-items:center}

/* ── mapa ── */
.mapa{border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:28px}
.mapa iframe{display:block;width:100%;height:430px;border:0;filter:saturate(.85)}
@media(max-width:640px){.mapa iframe{height:300px}}
.mapa-pie{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  padding:16px 22px;border-top:1px solid var(--line);font-size:.875rem;color:var(--muted)}
.mapa-pie b{color:var(--ink);font-weight:700}
.mapa-pie a{color:var(--ink);font-weight:700;text-decoration:none}
.mapa-pie a:hover{color:var(--mag)}

.contacto-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:28px;align-items:start;padding-top:48px}
@media(max-width:1060px){.contacto-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   Aviso de cookies (RGPD / LSSI-CE)
   ══════════════════════════════════════════════════════════════ */

.ck-banner{position:fixed;left:0;right:0;bottom:0;z-index:9000;
  background:var(--night);color:var(--night-muted);
  border-top:1px solid var(--night-line);
  box-shadow:0 -14px 44px rgba(0,0,0,.34);
  padding:20px 0;
  transform:translateY(115%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.ck-banner.ck-visible{transform:none}
.ck-inner{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.ck-texto{flex:1;min-width:270px;font-size:.875rem;line-height:1.6}
.ck-texto b{display:block;margin-bottom:5px;font-size:.9375rem;font-weight:700;color:var(--night-ink);letter-spacing:-.015em}
.ck-texto a{color:var(--mag);font-weight:650}
.ck-acciones{display:flex;gap:10px;flex-wrap:wrap}
.ck-btn{padding:.85em 1.5em;font-size:.8438rem;white-space:nowrap}
@media(max-width:400px){.ck-btn{padding:.85em .7em;font-size:.8125rem}}
@media(max-width:640px){
  .ck-banner{padding:18px 0}
  .ck-acciones{width:100%}
  .ck-btn{flex:1;justify-content:center;padding:.85em 1em}
}

.ck-fondo{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,.62);
  display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .28s}
.ck-fondo.ck-visible{opacity:1}
@supports (backdrop-filter:blur(3px)){.ck-fondo{backdrop-filter:blur(3px)}}

.ck-panel{background:var(--paper);color:var(--ink);border-radius:20px;
  max-width:560px;width:100%;max-height:86vh;overflow:auto;
  padding:32px 34px;box-shadow:0 30px 80px rgba(0,0,0,.42)}
@media(max-width:640px){.ck-panel{padding:26px 22px;border-radius:16px}}
.ck-titulo{font-size:1.375rem;font-weight:800;letter-spacing:-.032em;margin:0 0 8px}
.ck-intro{font-size:.875rem;color:var(--muted);line-height:1.6;margin:0 0 22px}

.ck-fila{display:flex;gap:14px;align-items:flex-start;
  border:1.5px solid var(--line-ui);border-radius:14px;padding:16px 18px;margin-bottom:10px;cursor:pointer;
  transition:border-color .2s,background-color .2s}
.ck-fila:hover{border-color:var(--line-2)}
.ck-fila:has(input:checked){border-color:var(--mag);background:var(--mag-wash)}
.ck-fila.ck-fija{cursor:default;opacity:.85}
.ck-fila.ck-fija:hover{border-color:var(--line)}
.ck-fila input{margin-top:3px;width:18px;height:18px;accent-color:var(--mag);flex:none}
.ck-fila b{display:block;font-size:.9063rem;font-weight:700;letter-spacing:-.012em}
.ck-fila span{display:block;margin-top:4px;font-size:.8125rem;color:var(--muted);line-height:1.5}

.ck-panel-acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
@media(max-width:520px){.ck-panel-acciones .ck-btn{flex:1;justify-content:center}}
.ku-cookies-link{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.ku-cookies-link:hover{color:var(--mag)}

/* ══ Submenú de la navegación ══ */
.nav-grupo{position:relative;display:inline-flex}
.nav-padre{display:inline-flex;align-items:center;gap:6px}
.nav-flecha{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s cubic-bezier(.2,.8,.3,1);flex:none}
.nav-grupo:hover .nav-flecha,.nav-grupo:focus-within .nav-flecha{transform:rotate(-135deg) translate(-2px,-2px)}

.nav-sub{position:absolute;top:100%;left:-18px;min-width:222px;z-index:90;
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 46px -18px rgba(0,0,0,.28);
  padding:8px;margin-top:12px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s,transform .22s cubic-bezier(.2,.8,.3,1),visibility 0s linear .22s}
/* franja invisible para que el ratón pueda bajar sin que se cierre */
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-grupo:hover .nav-sub,.nav-grupo:focus-within .nav-sub,.nav-sub.abierto{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav-sub a{padding:11px 14px;border-radius:9px;font-size:.875rem;font-weight:550;color:var(--ink-2);white-space:nowrap}
.nav-sub a::after{display:none}
.nav-sub a:hover{background:var(--surface);color:var(--ink)}
.nav-sub a[aria-current="page"]{color:var(--mag);font-weight:700}

@media(max-width:980px){
  .nav-grupo{display:block;width:100%}
  .nav-padre{width:100%;justify-content:space-between}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;background:transparent;border-radius:0;
    padding:0 0 8px;margin:0;min-width:0;
    max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.2,.8,.3,1)}
  .nav-sub::before{display:none}
  /* El :not(.abierto) es obligatorio: al tocar "Productos" el enlace recibe el foco,
     :focus-within se activa y su especificidad (0,3,0) ganaba a .nav-sub.abierto (0,2,0).
     El JS abría el submenú y el CSS lo dejaba en max-height:0, o sea invisible. */
  .nav-grupo:hover .nav-sub:not(.abierto),
  .nav-grupo:focus-within .nav-sub:not(.abierto){max-height:0}
  .nav-sub.abierto{max-height:420px}
  .nav-sub a{padding:12px 34px 12px 52px;font-size:.9375rem;border-bottom:1px solid var(--line)}
  .nav-sub a:last-child{border-bottom:0}
}
@media(max-width:640px){.nav-sub a{padding-left:38px;padding-right:20px}}
html:not(.js) .nav-sub{opacity:1;visibility:visible;transform:none;max-height:none;overflow:visible}

/* ══ Preguntas frecuentes ══ */
.faqs{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;gap:20px;justify-content:space-between;
  padding:24px 0;cursor:pointer;list-style:none;font-size:1.0625rem;font-weight:700;
  letter-spacing:-.022em;color:var(--ink);line-height:1.35;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--mag-aa)}
.faq-mas{position:relative;flex:none;width:18px;height:18px;margin-top:4px}
.faq-mas::before,.faq-mas::after{content:"";position:absolute;background:var(--mag);border-radius:2px;transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.faq-mas::before{left:0;right:0;top:8px;height:2px}
.faq-mas::after{top:0;bottom:0;left:8px;width:2px}
.faq[open] .faq-mas::after{transform:rotate(90deg)}
.faq-cuerpo{padding:0 0 26px;max-width:64ch}
.faq-cuerpo p{font-size:.9375rem;line-height:1.7;color:var(--ink-2)}
@media(max-width:640px){.faq summary{font-size:1rem;padding:20px 0}}

/* ══ Estados de los formularios ══ */
.ku-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.campo-error{display:block;margin-top:7px;font-size:.8125rem;font-weight:650;color:#C41B4B;line-height:1.45}
.campo-error::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:middle}
.ku-fallo{padding:18px 22px;border-radius:14px;background:#FDECF0;border:1.5px solid #F1B9C6;color:#8A1234;font-size:.9063rem;line-height:1.6}
.ku-fallo b{display:block;margin-bottom:3px}
.ku-exito{display:flex;gap:18px;align-items:flex-start;padding:32px 34px;border-radius:20px;
  background:var(--night);color:var(--night-muted)}
.ku-exito:focus{outline:2px solid var(--mag);outline-offset:3px}
.ku-exito-marca{flex:none;width:38px;height:38px;border-radius:50%;background:var(--mag);position:relative}
.ku-exito-marca::after{content:"";position:absolute;left:12px;top:10px;width:11px;height:18px;
  border-right:2.5px solid var(--on-mag);border-bottom:2.5px solid var(--on-mag);transform:rotate(42deg)}
.ku-exito h2{font-size:1.25rem;font-weight:750;letter-spacing:-.028em;color:var(--night-ink);margin:0 0 10px}
.ku-exito p{font-size:.9375rem;line-height:1.65}
.ku-exito p + p{margin-top:10px}
.ku-ref{font-family:var(--mono);font-size:.8125rem;letter-spacing:.02em}
.ku-ref b{color:var(--mag);font-weight:500}
.ku-aviso-pruebas{font-family:var(--mono);font-size:12px;color:var(--night-muted);
  border-top:1px solid var(--night-line);padding-top:12px}
.ku-aviso-pruebas b{color:var(--night-ink)}
@media(max-width:640px){.ku-exito{padding:26px 22px;gap:14px}}

/* ══ Cabecera de página interior ══
   Estaba repetida como estilo en línea en 9 plantillas, y con DOS escalas
   distintas de h1 por accidente de copia-pega: clamp(2.3rem,5.6vw,4.4rem) en
   siete y clamp(2.4rem,6vw,4.6rem) en dos. Ahora hay una sola. */
/* padding lateral 0: el titular tiene que caer en la misma columna que el
   cuerpo de la pagina (x=144). Con 30 px propios se iba a 174 y el hero se
   leia desalineado respecto a todo lo que venia debajo. 2026-08-23. */
.hero-simple{max-width:52rem;padding:26px 0}
@media(max-width:960px){.hero-simple{padding:24px 0}}
.hero-simple h1,.hero-media h1{font-size:clamp(2.3rem,5.6vw,4.4rem);margin-top:20px}
.hero-simple .lede{margin-top:26px}
.shead .tag + h2{margin-top:18px}
.cierre-h2{margin:18px 0 0}
.cierre-lede{margin-top:22px}

.foot .foot-h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:500;line-height:1.4}
button.ku-cookies-link{background:none;border:0;padding:0;font:inherit;cursor:pointer}

/* ══ Fotos de la planta ══ */
.foto-planta{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.foto-planta img{display:block;width:100%;height:auto}

/* ══════════════════════════════════════════════════════════════════
   ACCESORIOS — héroe con foto y catálogo visual
   La página eran seis bloques de texto seguidos. Un lanyard o una pinza
   se eligen por lo que se ve, no por su descripción: aquí manda la foto
   y el texto explica. Las fotos salen del catálogo de accesorios propio.
   ══════════════════════════════════════════════════════════════════ */
.hero-media{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;padding:26px 30px}
.hero-foto{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.hero-foto img{display:block;width:100%;height:auto}
@media(max-width:900px){
  .hero-media{grid-template-columns:1fr;gap:32px;padding:20px 0}
  .hero-foto{order:-1}
}

.accs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.acc{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s,box-shadow .3s}
.acc:hover{transform:translateY(-4px);border-color:var(--mag);box-shadow:0 14px 34px rgba(0,0,0,.09)}
/* Fondo fijo, no tokenizado: son fotos de producto recortadas sobre blanco.
   Con un fondo que cambiara en modo oscuro se vería el recorte como un parche. */
.acc-foto{aspect-ratio:4/3;overflow:hidden;background:#f1f1f4}
.acc-foto img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.acc:hover .acc-foto img{transform:scale(1.045)}
/* Variante para las fotos que el catálogo trae pequeñas: se muestran a su tamaño
   real, centradas y con aire, en vez de estirarlas hasta llenar y verlas blandas. */
.acc-foto--nat{display:flex;align-items:center;justify-content:center;padding:14px}
.acc-foto--nat img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.acc-txt{padding:21px 22px 25px;flex:1}
.acc .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--mag-aa);text-transform:uppercase}
.acc h3{margin-top:9px;transition:color .25s}
.acc:hover h3{color:var(--mag-aa)}
.acc p{font-size:.9375rem;color:var(--muted);line-height:1.6;margin-top:8px}
@media(max-width:980px){.accs{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}}
@media(max-width:620px){.accs{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.acc:hover,.acc:hover .acc-foto img{transform:none}}
/* La ficha entera es un enlace: el título hereda el color y la flecha indica destino. */
.acc-link{text-decoration:none;color:inherit}
.acc-link::after{display:none}
.acc-ir{display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mag-aa)}
.acc-ir .arw{transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.acc:hover .acc-ir .arw{transform:translateX(5px)}

/* ══ Páginas de categoría de accesorios ══ */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cat-cab{position:relative;overflow:hidden;padding:74px 0 48px;border-bottom:1px solid var(--line)}
.miga{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center}
.miga a{color:var(--mag-aa);text-decoration:none}
.miga a:hover{text-decoration:underline}
.miga a::after{display:none}
.cat-cab h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-top:18px}
.cat-cab .lede{margin-top:18px;max-width:44rem}
.cat-cuenta{margin-top:22px;font-size:.875rem;color:var(--muted)}

.refs{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:6px}
.ref{display:grid;grid-template-columns:190px 1fr;gap:22px;padding:22px;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.ref-foto{aspect-ratio:4/3;background:#f1f1f4;border-radius:var(--r-sm);overflow:hidden;align-self:start}
.ref-foto img{display:block;width:100%;height:100%;object-fit:cover}
.ref-modelo{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.ref-nombre{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mag-aa);margin-top:6px}
.ref-desc{font-size:.9375rem;color:var(--muted);line-height:1.62;margin-top:11px}
.ref-codigo{margin-top:13px;font-size:.875rem}
.ref-codigo span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ref-codigo b{font-family:var(--mono);margin-left:8px}
.ref-tabla{width:100%;border-collapse:collapse;margin-top:14px;font-size:.8125rem}
.ref-tabla th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 10px 7px 0;border-bottom:1px solid var(--line)}
.ref-tabla td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.ref-tabla td:last-child{font-family:var(--mono);white-space:nowrap;color:var(--ink)}
.ref-tabla tr:last-child td{border-bottom:0}
.ref-pers{margin-top:12px;font-size:.8125rem;color:var(--mag-deep)}
@media(max-width:1080px){.refs{grid-template-columns:1fr}}
@media(max-width:560px){
  .ref{grid-template-columns:1fr;gap:16px;padding:18px}
  .ref-foto{max-width:230px}
}
.sheet-grid .foto-planta{border-radius:var(--r-card) 0 0 var(--r-card);height:100%}
.sheet-grid .foto-planta img{height:100%;object-fit:cover;min-height:400px}
@media(max-width:900px){
  .sheet-grid .foto-planta{margin:0 -34px;border-radius:0}
  .sheet-grid .foto-planta img{min-height:280px}
}
@media(max-width:640px){.sheet-grid .foto-planta{margin:0 -20px}}

/* ══ Filtro del blog ══ */
.blog-filtros{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}
.pastilla-nav{display:inline-flex;align-items:center;gap:8px;padding:.66em 1.1em;
  border:1.5px solid var(--line);border-radius:var(--r-btn);text-decoration:none;
  font-size:.8438rem;font-weight:600;color:var(--ink-2);
  transition:border-color .2s,color .2s,background-color .2s}
.pastilla-nav b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.pastilla-nav:hover{border-color:var(--line-ui);color:var(--ink)}
.pastilla-nav.activa{border-color:var(--mag-aa);background:var(--mag-wash);color:var(--mag-deep)}
.pastilla-nav.activa b{color:var(--mag-deep)}
.blog-buscador{margin-bottom:44px;max-width:34rem}

/* ══ Gama de impresoras ══ */
.maquinas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:980px){.maquinas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.maquinas{grid-template-columns:1fr}}
.maquina{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .25s,transform .25s cubic-bezier(.2,.8,.3,1)}
.maquina:hover{border-color:var(--mag-aa);transform:translateY(-3px)}
.maquina-foto{background:#fff;border-bottom:1px solid var(--line)}
.maquina-foto img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.maquina-txt{padding:22px 24px 26px;display:flex;flex-direction:column;gap:7px;flex:1}
.maquina-txt .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.maquina-txt h3{font-size:1.1875rem;letter-spacing:-.028em;color:var(--ink)}
.maquina:hover .maquina-txt h3{color:var(--mag-aa)}
.maquina-uso{font-family:var(--mono);font-size:12px;color:var(--mag-deep);letter-spacing:.01em}
.maquina-txt p:last-child{font-size:.875rem;line-height:1.6;color:var(--muted);margin-top:4px}

/* ══ Imagen del héroe de la portada ══ */
.stage-foto{display:flex;justify-content:center;align-items:center;padding:8px}
.stage-foto img{display:block;width:100%;max-width:520px;height:auto;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.16))}
@media(max-width:960px){.stage-foto img{max-width:420px}}

/* ══ Banner de impresoras — imagen completa a sangre, como en la web antigua ══ */
/* ══ El hero con foto: paleta clara siempre ══
   Las fotos de los heroes son claras en los dos esquemas — una foto no se adapta
   al modo oscuro del sistema. Pero el texto sí lo hacía: con el móvil en oscuro,
   --ink pasaba a #F5F5F5 y el titular quedaba blanco sobre el velo blanco, es
   decir, invisible. Y el magenta pasaba a #FF66B8, que sobre blanco no llega al
   contraste mínimo.

   Se fija aquí la paleta clara para todo lo que vive dentro del hero. No es una
   excepción caprichosa: el fondo de este bloque no participa del cambio de tema,
   así que su texto tampoco debe. */
.hero-banner,
.hero-banner--acc,
.hero-banner--acr,
.hero-banner--pvc{
  --ink:#111111; --ink-2:#474747; --muted:#6B6B6B;
  --line:#E5E5E7; --line-2:#D4D4D6; --line-ui:#8A8A8C;
  --paper:#FFFFFF; --mag-aa:#C2185B;
}
.hero-banner{position:relative;overflow:hidden;display:flex;align-items:center;
  /* Altura unificada de todos los heroes (decision de Carlos, 2026-08-23): la de
     tecnologia era la que le gustaba. Antes cada pagina tenia la suya, entre 620
     y 940 px, y la franja se comia la pantalla entera antes de ver nada. */
  min-height:min(54vh,440px);border-bottom:1px solid var(--line)}
.hero-banner-img{position:absolute;inset:0;width:100%;height:100%;
  /* 20% en vertical y no 'bottom': anclado abajo se cortaban los alimentadores
     verticales, que son lo que identifica a la Smart 70. */
  object-fit:cover;object-position:72% 20%;pointer-events:none}
.hero-banner-txt{position:relative;max-width:var(--maxw);width:100%;padding-block:70px}
.hero-banner-txt > *{max-width:min(100%,33rem)}
.hero-banner-txt h1{font-size:clamp(2.4rem,5.8vw,4.8rem);margin-top:20px;color:var(--ink)}
.hero-banner-txt .lede{margin-top:24px;color:var(--ink-2)}
.hero-banner-txt .tag{color:var(--ink-2)}
.hero-banner-txt .hero-cta{margin-top:38px}
/* velo claro para que el texto se lea sobre cualquier zona de la foto */
.hero-banner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.82) 34%,rgba(255,255,255,.28) 56%,transparent 72%)}
@media(max-width:960px){
  .hero-banner{min-height:min(52vh,400px)}
  .hero-banner-img{object-position:78% 22%}
  .hero-banner-txt > *{max-width:none}
  .hero-banner::before{background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.86) 55%,rgba(255,255,255,.55) 100%)}
}
/* Tecnología: la foto salía a sangre y recortada, o sea AMPLIADA — el archivo
   mide 1536 px y se estiraba a todo el ancho de la ventana, que en una pantalla
   Retina son el doble de píxeles de los que hay: de ahí que se viera pixelada y
   que las tarjetas parecieran enormes.
   Lo que la hacía verse pequeña al reducirla era el propio archivo: su 37 %
   izquierdo es fondo vacío. Se usa un recorte sin ese vacío
   (tecnologia-hero.webp) para que las tarjetas ocupen lo que tienen que ocupar
   sin volver a ampliar el archivo.
   Decisión de Carlos, 2026-08-23. */
.hero-banner--tec{min-height:min(54vh,440px);
  background:linear-gradient(118deg,#FBFBFC 0%,#F5F4F7 56%,#EFEEF1 100%)}
@media(min-width:761px){
  /* Alto mayor que el hero y centrada: desborda por arriba y por abajo, que es
     donde la foto solo tiene fondo, así que NUNCA quedan franjas grises y no se
     corta ninguna tarjeta. El ancho lo pone el propio ratio. */
    /* -53% y no -50%: la foto tiene mas aire arriba que abajo, asi que se sube un
     poco para que el desborde no muerda la esquina de la tarjeta de 125 kHz. */
  .hero-banner--tec .hero-banner-img{left:auto;right:5%;top:50%;bottom:auto;
    width:auto;height:128%;transform:translateY(-53%);object-fit:fill;
    /* los dos cantos verticales se funden con el fondo del hero */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 94%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 94%,transparent 100%)}
  /* La foto entra ahora por debajo del texto (la tarjeta de 125 kHz baja en
     diagonal hasta la zona de los botones), asi que el velo tiene que llegar mas
     lejos y mas opaco: el texto se lee limpio y la tarjeta se adivina detras. */
  /* z-index como en las otras variantes: sin el, el ::before se pinta DEBAJO de
     la foto y el velo no vela nada. */
  .hero-banner--tec::before{z-index:1;background:linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 26%,rgba(255,255,255,.72) 40%,rgba(255,255,255,.3) 52%,transparent 62%)}
  .hero-banner--tec .hero-banner-txt{z-index:2}
  /* Titular mas corto de cuerpo: con el tamano general (hasta 4,8 rem) ocupaba
     cuatro lineas y estiraba el hero muy por encima de la foto. */
  .hero-banner--pvc .hero-banner-txt{padding-block:46px}
  .hero-banner--pvc .hero-banner-txt h1{font-size:clamp(2rem,3.6vw,3.15rem)}
  .hero-banner--pvc .hero-banner-txt .lede{font-size:.975rem;margin-top:18px}
  .hero-banner--pvc .hero-banner-txt .hero-cta{margin-top:26px}
}
/* Accesorios: las pulseras llenan todo el encuadre y el fondo ya es blanco, así
   que se centra la foto y el velo puede ser más suave que en impresoras. */
.hero-banner--acc{min-height:min(54vh,440px)}
/* La composición ya trae el hueco a la izquierda; 68% asegura que en pantallas
   estrechas el recorte no se coma los lanyards de la derecha. */
.hero-banner--acc .hero-banner-img{object-position:68% 50%}
/* El fondo de estudio ya es blanco, así que el velo solo tiene que asegurar el
   tercio izquierdo. Aun así se mantiene alto: medido, el texto pasa AA con
   holgura y no depende de dónde caiga cada cordón. */
/* z-index obligatorio: el ::before es el primer hijo, así que sin él la <img>
   —que va después y también es absolute— se pinta encima y el velo no se ve.
   Medido: el fondo bajo el rótulo daba (200,111,117), rosa saturado, en vez de
   casi blanco. Con el velo tapado, el texto no llegaba ni a 2,7:1. */
.hero-banner--acc::before{z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.955) 36%,rgba(255,255,255,.8) 48%,rgba(255,255,255,.22) 64%,transparent 78%)}
.hero-banner--acc .hero-banner-txt{z-index:2}
@media(max-width:960px){
  .hero-banner--acc{min-height:min(52vh,400px)}
  .hero-banner--acc .hero-banner-img{object-position:62% 50%}
  .hero-banner--acc::before{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.93) 46%,rgba(255,255,255,.62) 100%)}
}

/* ══ Fila de marcas ══ */
.marcas-fila{border-bottom:1px solid var(--line);padding:30px 0 34px;background:var(--paper)}
.marcas-titulo{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-bottom:22px}
.marcas-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 40px}
.marcas-logos img{height:30px;width:auto;opacity:.6;filter:grayscale(1);transition:opacity .25s,filter .25s}
.marcas-logos img:hover{opacity:1;filter:none}
@media(max-width:640px){.marcas-logos{gap:20px 26px}.marcas-logos img{height:24px}}

/* ══ Fichas técnicas por modelo ══ */
.fichas{display:grid;gap:22px}
.ficha{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  scroll-margin-top:100px}
.ficha:target{border-color:var(--mag-aa);box-shadow:0 0 0 3px var(--mag-wash)}
@media(max-width:760px){.ficha{grid-template-columns:1fr}}
.ficha-foto{background:#fff;border-right:1px solid var(--line);display:flex;align-items:center}
@media(max-width:760px){.ficha-foto{border-right:0;border-bottom:1px solid var(--line)}}
.ficha-foto img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.ficha-txt{padding:28px 30px 30px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ficha-txt h3{font-size:1.375rem;letter-spacing:-.03em;color:var(--ink)}
.ficha-intro{font-size:.9375rem;line-height:1.65;color:var(--ink-2);max-width:62ch}
.ficha .specsheet{margin-top:8px;border-top:1px solid var(--line);padding-top:4px}
.ficha .srow{grid-template-columns:minmax(120px,auto) 1fr}
.ficha-ideal{font-size:.875rem;line-height:1.6;color:var(--muted);margin-top:6px}
.ficha-ideal b{color:var(--ink);font-weight:650}
.ficha-txt .btn{align-self:flex-start;margin-top:12px}

/* la tarjeta de la rejilla ahora es un enlace */
a.maquina{text-decoration:none;color:inherit}
a.maquina:hover .maquina-txt h3{color:var(--mag-aa)}

/* ══ Volver arriba ══
   Aparece pasada una pantalla y media. Sale del HTML con [hidden] y el JS se lo
   quita: sin JavaScript queda como un enlace normal al final del pie, que sigue
   llevando al contenido. 48px de lado, que es el mínimo táctil cómodo. */
/* El chat de Chatwoot vive en la esquina inferior derecha con una burbuja de
   64 px a 20 px del borde, y el tema no le fija posición: usa la suya. El botón
   de subir se coloca A SU IZQUIERDA, a la misma altura y más pequeño, para que
   se lea como lo secundario que es (decisión de Carlos, 2026-08-24). El `right`
   es 20 del borde + 64 de la burbuja + 12 de aire. */
.arriba{position:fixed;right:96px;bottom:20px;z-index:80;
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-ui);border-radius:50%;background:var(--paper);color:var(--ink);
  box-shadow:0 6px 20px rgba(0,0,0,.10);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s,transform .28s cubic-bezier(.2,.8,.3,1),visibility 0s linear .28s,
             border-color .2s,color .2s,background .2s}
.arriba::after{display:none}
.arriba.se-ve{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.arriba:hover{border-color:var(--mag);color:var(--mag-aa)}
.arriba:focus-visible{outline:2px solid var(--mag);outline-offset:3px}
.arriba svg{display:block;width:17px;height:17px}
/* El aviso de cookies ocupa la banda inferior mientras esté sin responder:
   ahí el botón se sube para no montarse encima. La clase real es .ck-visible,
   que es la que el JS del banner añade al mostrarlo. */
body:has(.ck-banner.ck-visible) .arriba.se-ve{transform:translateY(-118px)}
@media(max-width:640px){
  .arriba{right:76px;bottom:14px;width:36px;height:36px}
  body:has(.ck-banner.ck-visible) .arriba.se-ve{transform:translateY(-186px)}
}
html:not(.js) .arriba{position:static;opacity:1;visibility:visible;transform:none;
  margin:0 auto 28px;box-shadow:none}
@media (prefers-reduced-motion:reduce){.arriba{transition:opacity .01s,visibility .01s}}

/* ══ Acreditaciones ══ */
.hero-banner--acr{min-height:min(54vh,440px)}
.hero-banner--acr .hero-banner-img{object-position:64% 50%}
/* El fondo de estudio ya es gris claro y liso en el tercio izquierdo, así que el
   velo solo tiene que asegurar que nada del producto entre bajo el texto. */
.hero-banner--acr::before{z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 34%,rgba(255,255,255,.62) 48%,rgba(255,255,255,.14) 66%,transparent 80%)}
.hero-banner--acr .hero-banner-txt{z-index:2}
@media(max-width:960px){
  .hero-banner--acr{min-height:min(52vh,400px)}
  .hero-banner--acr .hero-banner-img{object-position:58% 50%}
  .hero-banner--acr::before{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.58) 100%)}
}

/* Formatos */
.formatos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.fmt{padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.fmt-k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mag-aa)}
.fmt-med{font-size:1.375rem;font-weight:700;letter-spacing:-.02em;margin-top:9px}
.fmt-txt{font-size:.9375rem;color:var(--muted);line-height:1.6;margin-top:10px}
.fmt-medida{border-color:var(--mag);background:var(--mag-wash)}
.fmt-medida .fmt-med{color:var(--mag-deep)}
.fmt-medida .fmt-txt{color:var(--ink-2)}
@media(max-width:900px){.formatos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.formatos{grid-template-columns:1fr}}

/* La acreditación de la banda oscura es una foto con fondo negro: funde con la
   sección sin borde ni caja. Solo hay que centrarla y limitarla. */
.acr-foto-negra{margin:0;display:flex;justify-content:center}
/* Dos piezas para que la foto funda con la banda oscura:
   1) la viñeta va horneada en la imagen, que lleva sus bordes a negro puro;
   2) los bordes no van a negro puro sino al color exacto de la banda (13,13,13).
   Con negro puro el borde quedaba en 3 sobre un fondo de 13 y el rectángulo se
   seguía viendo, en oscuro. mix-blend-mode:screen no sirvió: no llega a aplicarse
   dentro de esta sección. */
.acr-foto-negra img{display:block;width:min(100%,440px);height:auto}
@media(max-width:900px){.acr-foto-negra img{width:min(100%,320px)}}

/* ══ Fichas de tecnología con foto (tipos de tarjetas) ══
   La ficha entraba por una barra de color de 4 px. Una tarjeta se elige por lo
   que hace y por cómo se ve: la foto enseña la tecnología (el chip, la banda,
   el símbolo contactless) mejor que la ficha técnica que va debajo. */
.prod-foto{aspect-ratio:4/3;overflow:hidden;background:#FFFFFF;flex:none}
.prod-foto img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.prod-img:hover .prod-foto img{transform:scale(1.04)}
.prod-img .pad{padding-top:22px}
@media (prefers-reduced-motion:reduce){.prod-img:hover .prod-foto img{transform:none}}

/* ══ Héroe de tarjetas PVC: pliego real desenfocado ══
   La foto es un pliego de imposición de producción, así que lleva marcas,
   teléfonos y direcciones de clientes. Va girada 12 grados y desenfocada a 7 px,
   ambas cosas horneadas en el fichero y no aplicadas por CSS: así no se pueden
   deshacer desactivando estilos ni descargando el original.

   El pliego entero se compone sobre un lienzo 16:9 en vez de recortar por dentro.
   Girar y recortar el rectángulo inscrito obligaba a ampliar al 88 %, y ese zoom
   hacía dos cosas malas a la vez: dejaba a la vista solo ocho tarjetas y agrandaba
   los logotipos hasta volverlos legibles — con 6 px se leía "AMARE" y "don Pa".
   Componiéndolo entero se ven unas veinte y basta con 7 px.

   El radio seguro depende del encuadre, no es un número fijo. Si se cambia el
   recorte hay que volver a comprobar, ampliando al doble, que no se lee ninguna
   marca ni teléfono.

   alt vacío a propósito: es decoración, y describirla no aporta nada. */
.hero-banner--pvc{min-height:min(54vh,440px)}
.hero-banner--pvc .hero-banner-img{object-position:50% 48%}
/* La parrilla a sangre salia AMPLIADA: a todo el ancho, cada tarjeta se veia
   casi al tamano del archivo y solo cabian ocho. Contenida a la derecha se ven
   las treinta y tantas, pequenas, y ademas se REDUCE en vez de ampliarse, que es
   lo que la mantiene nitida. Decision de Carlos, 2026-08-23. */
@media(min-width:761px){
  /* width explicito: con width:auto la caja se queda con el ancho intrinseco del
     archivo (1536 px) y la parrilla se iba hacia el texto. */
  /* cover y no contain: el titular hacia crecer el hero por encima de su altura
     minima y la parrilla, al verse entera, dejaba una banda blanca arriba y otra
     abajo. Con cover llena siempre, sea cual sea la altura, y el canto izquierdo
     lo funde la mascara. */
  .hero-banner--pvc .hero-banner-img{left:auto;right:0;top:0;bottom:0;
    width:min(50%,720px);height:100%;object-fit:cover;object-position:center center;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);
    mask-image:linear-gradient(to right,transparent 0,#000 16%)}
}
/* Velo más suave que en los otros héroes: aquí la gracia es que se vea el pliego.
   Se mantiene alto solo en el tercio del texto y cae rápido. Medido: pasa AA. */
.hero-banner--pvc::before{z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.92) 34%,rgba(255,255,255,.7) 48%,rgba(255,255,255,.2) 66%,transparent 84%)}
.hero-banner--pvc .hero-banner-txt{z-index:2}
@media(max-width:960px){
  .hero-banner--pvc{min-height:min(52vh,400px)}
  .hero-banner--pvc::before{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.6) 100%)}
}

/* ══ Comparativa de tecnologías ══
   Tabla de verdad, no un grid maquillado: el distribuidor la lee cruzando fila y
   columna, y así la lee también un buscador. Scroll propio en móvil para que la
   página no desborde a lo ancho. */
.tabla-scroll{overflow-x:auto;margin-top:34px;-webkit-overflow-scrolling:touch}
.comparativa{width:100%;min-width:760px;border-collapse:collapse;font-size:.9375rem}
.comparativa th,.comparativa td{text-align:left;padding:15px 18px 15px 0;border-bottom:1px solid var(--line);vertical-align:top}
.comparativa thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding-bottom:11px;border-bottom:1px solid var(--line-2)}
.comparativa tbody th{font-weight:700;color:var(--ink);white-space:nowrap;padding-right:26px}
.comparativa td{color:var(--muted);line-height:1.6}
.comparativa .norma{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);white-space:nowrap}
.comparativa tbody tr:last-child th,.comparativa tbody tr:last-child td{border-bottom:0}
.comparativa tbody tr:hover th{color:var(--mag-aa)}
.tabla-pie{margin-top:18px;font-size:.875rem;color:var(--muted)}

/* Nota de uso bajo la ficha técnica: la spec dice qué es, esta línea dice cuándo
   pedirlo. Es lo que el distribuidor necesita para vendérselo a su cliente. */
.mat-nota{font-size:.9375rem;color:var(--muted);line-height:1.6;margin-top:12px}
/* El índice de ejes son fichas sin foto: el padding superior lo pone el texto. */
.accs .acc-txt:first-child{padding-top:24px}


/* Logotipo en la tarjeta SOLO en Nosotros, Producción e Impresoras. En Marca
   blanca, Partners y Sin mínimo la tarjeta dice "Tu marca" justo para vender que
   el cliente final no sabe que existimos: ahí el logo diría lo contrario. */
.pvc--marca{background-image:
    url("../img/logo-claro@2x.png"),
    radial-gradient(125% 96% at 88% 6%, rgba(233,30,140,.46) 0%, rgba(233,30,140,.14) 36%, transparent 68%),
    radial-gradient(90% 80% at 8% 92%, rgba(255,9,155,.14) 0%, transparent 60%),
    linear-gradient(142deg,#333 0%,#151515 46%,#242424 100%);
  background-repeat:no-repeat;
  background-position:right 8% bottom 30%, 0 0, 0 0, 0 0;
  background-size:27% auto, auto, auto, auto}

/* Nota para quien compra para su propia empresa. En magenta suave, no en negro:
   es una aclaración de tarifa, no un aviso de que se ha equivocado de sitio. */
.salida-ok{background:var(--mag-wash);color:var(--ink);border:1px solid var(--mag)}
.salida-ok p{color:var(--ink-2)}
.salida-ok b{color:var(--mag-deep)}
.salida-ok a{color:var(--mag-deep);font-weight:650}

/* ══ Reseñas de Google ══
   Contenido propio, no un widget: se ve igual y además lo lee un buscador. */
/* ══ Reseñas de Google ══
   La nota global a un lado y las tres reseñas al otro, como el widget de la web
   antigua — a Carlos le convencía más ese bloque, y con razón: el 5,0 se lee de
   un vistazo. La diferencia es que aquí es HTML propio, así que el texto lo
   indexa Google en vez de quedarse dentro de un iframe. */
.resenas-bloque{display:grid;grid-template-columns:minmax(210px,.72fr) 3fr;gap:26px;
  align-items:start;margin-top:34px}
@media(max-width:980px){.resenas-bloque{grid-template-columns:1fr;gap:22px}}

.resenas-nota{padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--paper);text-align:center}
.rn-marca{font-weight:700;font-size:1.0625rem;color:var(--ink)}
.rn-cifra{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:8px}
.rn-cifra b{font-size:1.75rem;font-weight:800;color:#DE6A00;line-height:1}
.rn-base{margin-top:8px;font-size:.8125rem;color:var(--ink-2)}
.rn-google{margin-top:12px;font-size:.8125rem;color:var(--ink-2)}
.rn-btn{margin-top:16px;width:100%;justify-content:center}

/* Las estrellas, en el naranja de la ficha de Google pero oscurecido: el tono
   original (#F5A623) da 2,03:1 sobre blanco, y una estrella no es decoración —
   transmite la valoración, así que le aplica el 3:1 de elemento gráfico.
   #DE6A00 llega a 3,40:1 y a simple vista sigue siendo el mismo dorado. */
.estrellas{display:inline-flex;gap:2px;line-height:0}
.estrellas svg{fill:#DE6A00;display:block}

/* El logotipo de Google con sus cuatro colores: es la señal que hace que la
   reseña se lea como verificada y no como un testimonio escrito por nosotros. */
.g-logo,.resena-g{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.02em}
.g-logo b,.resena-g b{font-weight:700}
.g1{color:#4285F4}.g2{color:#EA4335}.g3{color:#FBBC05}.g4{color:#4285F4}.g5{color:#34A853}.g6{color:#EA4335}
.resena-g{font-size:1.05rem;margin-left:auto;align-self:flex-start}

.resenas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.resenas{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
@media(max-width:620px){.resenas{grid-template-columns:1fr}}
.resena{margin:0;padding:20px 18px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--paper);display:flex;flex-direction:column;gap:12px}
.resena-cab{display:flex;align-items:center;gap:11px}
.resena-av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.0625rem}
.resena-quien{display:flex;flex-direction:column;min-width:0}
.resena-quien b{font-size:.875rem;font-weight:650;color:var(--azul-resena);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resena-quien span{font-size:.75rem;color:var(--ink-2)}
.resena blockquote{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
@media(max-width:900px){.resenas{grid-template-columns:1fr;gap:16px}}

/* ══ FAQ desplegable ══
   <details> nativo: funciona sin JavaScript, el teclado lo abre solo y el
   contenido está en el HTML desde el principio, que es lo que necesita el
   schema FAQPage — un acordeón que inyecte el texto por JS no vale. */
.faqs{margin-top:34px;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-weight:650;font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink);
  transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--mag-aa)}
.faq summary:focus-visible{outline:2px solid var(--mag);outline-offset:3px;border-radius:4px}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.faq[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq[open] summary{color:var(--mag-aa)}
.faq-cuerpo{padding:0 40px 22px 0}
.faq-cuerpo p{font-size:.9375rem;line-height:1.68;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* La ficha de producto reutiliza .comparativa pero solo tiene dos columnas: el
   min-width de 760 px, que existe para que cinco columnas no se aplasten, aquí
   sobra y desbordaba la página 8 px en móvil. */
.comparativa--ficha{min-width:0}
.comparativa--ficha th[scope="row"]{white-space:normal;width:42%}
@media(max-width:520px){.comparativa--ficha th[scope="row"]{width:44%;padding-right:14px}}

/* Sin scroll horizontal en ninguna página.
   Varias animaciones de entrada arrancan desplazadas hacia la derecha
   (.wl-item a 28 px, .partner y .rv en su hover) y eso daba 8 px de scroll
   lateral en móvil aunque no hubiera nada que ver ahí.
   clip y NO hidden: hidden en el body convierte al documento en contenedor de
   scroll y rompe el position:sticky de la cabecera. */
html,body{overflow-x:clip}

/* ══ Acciones directas de contacto (solo móvil) ══
   En el móvil nadie quiere leer un número: quiere pulsarlo. En escritorio se
   ocultan porque los datos completos están justo debajo y un botón de WhatsApp
   en un portátil no lleva a ninguna parte. */
.acciones-movil{display:none}
@media(max-width:760px){
  .acciones-movil{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
  .acc-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    min-height:66px;padding:12px 6px;border:1px solid var(--line-ui);border-radius:var(--r-sm);
    background:var(--paper);color:var(--ink);text-decoration:none;
    font-size:.8125rem;font-weight:650;transition:border-color .2s,color .2s,background .2s}
  .acc-btn::after{display:none}
  .acc-btn:hover,.acc-btn:focus-visible{border-color:var(--mag);color:var(--mag-aa)}
  .acc-btn svg{display:block}
  /* WhatsApp con su verde: es el único sitio de la web donde un color ajeno a la
     marca ayuda, porque el botón se reconoce antes por el color que por el texto.
     Pero el verde de WhatsApp (#25D366) sobre blanco da 1,98:1 y el texto en
     #128C4A se quedaba en 4,31:1 — medido, no estimado. #0F8043 llega a 5,01:1 y
     sigue leyéndose como WhatsApp; el borde comparte color para pasar también el
     3:1 que pide un elemento de interfaz. */
  .acc-wa{border-color:#0F8043;color:#0F8043}
  .acc-wa:hover,.acc-wa:focus-visible{border-color:#0B6B37;color:#0B6B37;background:#F0FBF4}
}

/* ══ Mapa a la espera de consentimiento ══
   Ocupa exactamente lo mismo que ocupará el mapa, para que al cargarlo no salte
   la página. */
.mapa-caja{position:relative;width:100%;aspect-ratio:16/9;min-height:280px;
  border:1px solid var(--line-ui);border-radius:var(--r-md);overflow:hidden;background:var(--paper-2)}
.mapa-caja iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mapa-espera{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:28px 22px;text-align:center}
.mapa-dir{font-size:1rem;line-height:1.55;color:var(--ink)}
.mapa-nota{font-size:.8125rem;color:var(--ink-2);max-width:34rem}
@media(max-width:600px){
  .mapa-caja{aspect-ratio:4/3}
  .mapa-espera{padding:22px 16px;gap:12px}
}

/* El mapa sin cookies que se ve por debajo del aviso. No es interactivo: está
   ahí para que la página nunca muestre un hueco vacío mientras se decide. */
.mapa-previo{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  pointer-events:none;filter:saturate(.72) contrast(.96)}
.mapa-caja .mapa-espera{background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(1.5px)}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .mapa-caja .mapa-espera{background:rgba(255,255,255,.9)}
}


/* ══ Cabecera de tecnología con foto de producto ══
   Solo la usan 125 kHz y MIFARE, que son las dos que tienen foto de la antena.
   Las demás siguen a una columna: media cabecera vacía se nota más que la falta
   de la foto. */
.cat-cab-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
/* Con foto, la trama de fondo baja: competía con la tarjeta y se colaba por
   las zonas transparentes. */
.cat-cab--foto .halftone{opacity:.35}
@media(max-width:900px){.cat-cab-grid{grid-template-columns:1fr;gap:26px}}
/* La sombra la pone CSS y no la imagen. Las fotos vienen recortadas de fondo, y
   la sombra que traían era la del original: se veía la trama de la cabecera a
   través de ella y quedaba sucia. drop-shadow sigue el contorno real del alfa,
   así que la tarjeta apoya sin caja gris alrededor. */
.cat-cab-foto img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 16px 20px rgba(17,17,17,.13)) drop-shadow(0 3px 5px rgba(17,17,17,.08))}
@media(max-width:900px){
  .cat-cab-foto{max-width:460px;margin-inline:auto}
}

/* ══ Los heroes en móvil ══
   El texto sigue yendo ENCIMA de la foto, igual que en escritorio. Lo que cambia
   es la foto: en móvil se sirve un recorte vertical distinto (el `<source>` de
   cada página), con el producto abajo y fondo liso arriba.

   Antes se usaba la foto apaisada recortada con `cover` para llenar 620 px de
   alto: la imagen se ampliaba tanto que en impresoras la máquina salía justo
   detrás del titular y en tecnología quedaba media tarjeta cortada. El problema
   no era el texto encima, era estirar una foto apaisada en un hueco vertical.

   Va al final de la hoja para ganar por orden a las variantes --acc, --acr y
   --pvc, que fijan su propio alto. */
@media(max-width:760px){
  .hero-banner,
  .hero-banner--acc,
  .hero-banner--acr,
  .hero-banner--pvc{
    min-height:0;
    /* La misma proporción que el recorte móvil: la foto entra entera, sin
       recorte adicional, y el bloque no se come la pantalla. */
    aspect-ratio:4/5;max-height:86vh;
    align-items:flex-start}

  .hero-banner .hero-banner-img,
  .hero-banner--acc .hero-banner-img,
  .hero-banner--acr .hero-banner-img,
  .hero-banner--pvc .hero-banner-img{object-position:center bottom}

  /* El velo, de arriba abajo: opaco donde va el texto y limpio donde está el
     producto, que es justo al revés de como estaba. */
  .hero-banner::before,
  .hero-banner--acc::before,
  .hero-banner--acr::before,
  .hero-banner--pvc::before{
    display:block;
    background:linear-gradient(180deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.95) 52%,
      rgba(255,255,255,.78) 68%,
      rgba(255,255,255,.28) 84%,
      rgba(255,255,255,0) 94%)}

  /* .b-line es transparente por diseno; sobre foto se veia la maquina a traves
     del boton. En movil lleva fondo propio, que ademas lo separa del velo. */
  .hero-banner .b-line,
  .hero-banner--acc .b-line,
  .hero-banner--acr .b-line,
  .hero-banner--pvc .b-line{background:var(--paper)}

  .hero-banner-txt{padding-block:26px 0}
  .hero-banner-txt h1{margin-top:12px;font-size:clamp(1.95rem,7.4vw,2.6rem)}
  .hero-banner-txt .lede{margin-top:16px}
  .hero-banner-txt .hero-cta{margin-top:22px}
}

/* Velo reforzado para el hero sobre el pliego a todo color. Con el velo normal,
   el 30 % del fondo bajo el titular no llegaba a 3:1 — medido, no estimado: los
   amarillos y blancos del pliego se comen un texto oscuro. Las demás fotos
   tienen fondo liso arriba y no lo necesitan. */
.hero-banner--denso::before{
  background:linear-gradient(180deg,
    rgba(255,255,255,.985) 0%,
    rgba(255,255,255,.965) 46%,
    rgba(255,255,255,.72) 64%,
    rgba(255,255,255,.18) 84%,
    rgba(255,255,255,0) 100%)}
@media(max-width:760px){
  .hero-banner--denso::before{
    background:linear-gradient(180deg,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.975) 48%,
      rgba(255,255,255,.80) 66%,
      rgba(255,255,255,.20) 86%,
      rgba(255,255,255,0) 100%)}
}


/* ══ Despiece de capas ═══════════════════════════════════════════════════════
   Cómo está construida una tarjeta por dentro, en las dos versiones que se
   fabrican aquí. Sustituye a una imagen que trajo Carlos (2026-08-24) y que no
   se podía publicar: mockup gratuito con la marca de agua "free-psd-templates"
   impresa en la propia tarjeta, en naranja, y con todo el texto dentro del PNG
   —o sea, ilegible para Google y para los modelos, que son el público al que
   este contenido le habla.

   ⚠️ ESTRUCTURA CORREGIDA POR CARLOS el 2026-08-24. La primera versión separaba
   "impresión" y "núcleo" como capas distintas, y es falso: la impresión va SOBRE
   la lámina de PVC, no encima de un núcleo aparte. Lo real son dos láminas de
   PVC —cada una impresa por su cara exterior— entre dos overlays, y el inlay de
   la antena va justo en medio de esas dos láminas. De ahí 4 capas y 5. No
   volver a introducir una capa de "núcleo" independiente.

   Va sobre papel negro a propósito: el overlay es transparente y sobre blanco no
   se veía —era la mitad del mensaje perdida—, mientras que sobre negro el filo lo
   delata. La portada ya usa esa banda oscura para los momentos que deben golpear.

   La pila es 3D real (preserve-3d + translateZ), así que separar una capa es un
   movimiento en la normal del plano y no un apaño que se descuadra al rotar. */

.capas{background:var(--night);color:var(--night-ink);padding:82px 0}
.capas .tag{color:var(--mag-hi)}
.capas h2{color:var(--night-ink)}
.capas .lede{color:var(--night-muted)}

/* ── las dos pilas, una al lado de la otra ── */
.capas-duo{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:48px}
.capas-tipo{margin:0;padding:26px 20px 22px;border:1px solid var(--night-line);
  border-radius:var(--r-card);background:var(--night-2)}
.capas-escena{perspective:1600px;perspective-origin:50% 44%;
  display:flex;align-items:center;justify-content:center;min-height:318px}
.capas-pila{position:relative;width:min(86%,300px);aspect-ratio:85.6/54;margin-top:58px;
  transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-30deg)}
.capas-tipo figcaption{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--night-line)}
.capas-tipo b{font-size:16px;letter-spacing:-.01em;color:var(--night-ink)}
.capas-tipo em{font-style:normal;font-size:13.5px;color:var(--night-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.capa{position:absolute;inset:0;border-radius:3.71%/5.89%;
  transform:translateZ(calc(var(--i) * 40px));
  transition:transform .5s cubic-bezier(.22,.68,.32,1),box-shadow .5s}

/* El overlay es una película: sobre negro solo lo delatan el filo y un barrido
   especular. Es exactamente lo que hace en la mano. */
.capa--ovl{background:linear-gradient(128deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.04) 44%,rgba(255,255,255,.13) 100%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* Las dos láminas de PVC. Las barras son las de registro de un pliego real y van
   en CMYK a propósito: la marca se llama Kuatricomía por la cuatricromía. */
.capa--pvc{background:linear-gradient(148deg,#FFFFFF 0%,#EFEFEF 54%,#F8F8F8 100%);
  border:1px solid rgba(255,255,255,.7);overflow:hidden;
  box-shadow:0 30px 46px -22px rgba(0,0,0,.9)}
.capa--pvc::before{content:"";position:absolute;inset:15% 12% auto 12%;height:8.5%;
  background:linear-gradient(90deg,#00AEEF 0 25%,#E91E8C 25% 50%,#FFE800 50% 75%,#111 75% 100%);
  border-radius:2px}
.capa--pvc::after{content:"";position:absolute;inset:auto 12% 17% 12%;height:5%;
  background:repeating-linear-gradient(90deg,#111 0 3px,transparent 3px 6px);opacity:.4}
.capa--dorso::before{inset:23% 12% auto 12%;height:5.5%;opacity:.45}
.capa--dorso::after{inset:auto 12% 25% 12%;height:4%}

/* El inlay solo existe en RFID: filete magenta y fondo apenas teñido, para que
   se lea como algo embutido y no como una lámina más. */
.capa--inlay{background:rgba(226,0,122,.09);border:1px solid var(--mag-hi);
  box-shadow:0 18px 30px -18px rgba(226,0,122,.55)}
.capa--inlay svg{position:absolute;inset:9%;width:82%;height:82%;overflow:visible}

/* Señalar una capa en la lista la aparta en las DOS pilas a la vez: así se ve que
   las cuatro comunes son literalmente las mismas y la diferencia es una sola. */
.capas-obj:has(.capas-lista li[data-c="ovl-f"]:hover) .capa[data-c="ovl-f"],
.capas-obj:has(.capas-lista li[data-c="ovl-f"]:focus-within) .capa[data-c="ovl-f"],
.capas-obj:has(.capas-lista li[data-c="pvc-f"]:hover) .capa[data-c="pvc-f"],
.capas-obj:has(.capas-lista li[data-c="pvc-f"]:focus-within) .capa[data-c="pvc-f"],
.capas-obj:has(.capas-lista li[data-c="inlay"]:hover) .capa[data-c="inlay"],
.capas-obj:has(.capas-lista li[data-c="inlay"]:focus-within) .capa[data-c="inlay"],
.capas-obj:has(.capas-lista li[data-c="pvc-d"]:hover) .capa[data-c="pvc-d"],
.capas-obj:has(.capas-lista li[data-c="pvc-d"]:focus-within) .capa[data-c="pvc-d"],
.capas-obj:has(.capas-lista li[data-c="ovl-d"]:hover) .capa[data-c="ovl-d"],
.capas-obj:has(.capas-lista li[data-c="ovl-d"]:focus-within) .capa[data-c="ovl-d"]{
  transform:translateZ(calc(var(--i) * 40px + 52px)) translateX(-5%)}

/* ── la lista, en tres columnas bajo las pilas ── */
.capas-lista{list-style:none;margin:44px 0 0;padding:0;counter-reset:capa;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px}
.capas-lista li{counter-increment:capa;padding-top:16px;
  border-top:1px solid var(--night-line);transition:border-color .3s}
.capas-lista li:hover,.capas-lista li:focus-within{border-color:var(--mag-hi)}
.capas-lista h3{margin:0 0 6px;font-size:16px;line-height:1.3;letter-spacing:-.01em;
  color:var(--night-ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.capas-lista h3::before{content:counter(capa);flex:0 0 auto;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--night-ink);color:var(--night);
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;transition:background .3s}
.capas-lista li:hover h3::before,.capas-lista li:focus-within h3::before{background:var(--mag-hi)}
.capas-lista p{margin:0;font-size:14.5px;line-height:1.55;color:var(--night-muted)}
.capas-lista .opcional{padding:2px 9px;border:1px solid var(--mag-hi);border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--mag-hi);
  text-transform:uppercase;white-space:nowrap}

@media (max-width:1000px){
  .capas-lista{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .capas{padding:58px 0}
  .capas-duo{grid-template-columns:1fr;gap:18px;margin-top:34px}
  .capas-escena{min-height:270px}
  .capas-pila{width:min(70%,230px);margin-top:40px;transform:rotateX(56deg) rotateZ(-24deg)}
  .capa{transform:translateZ(calc(var(--i) * 30px))}
  .capas-lista{grid-template-columns:1fr;gap:20px;margin-top:32px}
}
@media (prefers-reduced-motion:reduce){.capa{transition:none}}

/* ══ Precio en las fichas de impresora ═══════════════════════════════════════
   Publicado el 2026-08-24. Hasta entonces la página no daba precio, y el
   Planificador de Google dice que ~100 búsquedas al mes son variantes de
   «impresora tarjetas pvc precio»: la intención estaba y no se respondía.

   El «Desde» y el «+ IVA» van deliberadamente pequeños y en gris, no escondidos:
   el comprador es una empresa y compara en neto, pero el número tiene que poder
   leerse de un vistazo al comparar siete modelos. El asterisco enlaza a la nota
   en vez de abrir un tooltip: funciona sin JavaScript y se puede imprimir. */

.ficha-precio{display:flex;align-items:baseline;gap:8px;margin:0 0 16px;
  font-variant-numeric:tabular-nums}
.ficha-precio .desde{font-size:13px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;font-weight:600}
.ficha-precio b{font-size:clamp(26px,2.4vw,32px);line-height:1;letter-spacing:-.025em;
  color:var(--ink);font-weight:800}
.ficha-precio .iva{font-size:13.5px;color:var(--muted)}
.ficha-precio .pnota{color:var(--mag-deep);text-decoration:none;font-weight:700;
  font-size:15px;padding:0 2px}
.ficha-precio .pnota:hover{text-decoration:underline}

.nota-precios{margin:34px 0 0;padding:18px 20px;background:var(--surface);
  border-left:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:14px;line-height:1.6;color:var(--ink-2);max-width:76ch}
.nota-precios b{color:var(--ink)}

/* ══ Descargas ═══════════════════════════════════════════════════════════════
   La web prometía «te pasamos la plantilla» desde el rediseño y no había ninguna
   descarga en ningún sitio: había que escribir para pedirla. Carlos preparó las
   dos plantillas el 2026-08-24 y aquí dejan de ser una promesa.

   La extensión va en una etiqueta propia y NO con los iconos de Illustrator y
   Photoshop: son marca registrada de Adobe, sus directrices no permiten usarlos
   para etiquetar descargas de terceros, y además son azul y morado —los dos
   colores que la marca tiene prohibidos—. Comunica igual y es de la casa. */

.descargas{display:flex;flex-direction:column;gap:12px;margin-top:38px}
.dl{
  display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:18px 22px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--paper);text-decoration:none;color:inherit;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.dl:hover,.dl:focus-visible{
  border-color:var(--mag-btn);transform:translateY(-2px);
  box-shadow:0 12px 26px -18px rgba(0,0,0,.35);
}
.dl-ext{
  display:grid;place-items:center;width:58px;height:58px;border-radius:10px;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.04em;
}
.dl-ficha .dl-ext{background:var(--mag-btn);color:var(--on-mag-btn)}
.dl-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.dl-txt b{font-size:17px;letter-spacing:-.01em}
.dl-txt em{font-style:normal;font-size:14.5px;color:var(--muted);line-height:1.45}
.dl-peso{
  font-family:var(--mono);font-size:13px;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.dl-pie{margin:26px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:74ch}

@media (max-width:700px){
  .dl{grid-template-columns:46px minmax(0,1fr);gap:15px;padding:15px 17px}
  .dl-ext{width:46px;height:46px;font-size:13px}
  .dl-peso{grid-column:2;font-size:12.5px}
  .dl-txt b{font-size:16px}
}

/* La plantilla, en el paso donde se sube el archivo. No se repite aquí la
   sección entera de /formatos-y-grosores/: quien está rellenando un presupuesto
   no necesita leerla, necesita saber que existe y poder bajarla sin salir. */
.presu-plantilla{
  margin:0 0 16px;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);
  font-size:14.5px;line-height:1.6;color:var(--ink-2);
}
.presu-plantilla a{color:var(--mag-deep);font-weight:600;text-underline-offset:2px}

/* ── Redes en el pie ──
   Discretas a propósito: son una señal de identidad para Google, no un CTA. El
   objetivo del pie sigue siendo llevar al presupuesto, no sacar a nadie de la web. */
.foot-redes{list-style:none;display:flex;gap:10px;margin:18px 0 0;padding:0}
.foot-redes a{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);
  transition:color .22s,border-color .22s,background .22s;
}
.foot-redes a:hover{color:var(--on-mag-btn);background:var(--mag-btn);border-color:var(--mag-btn)}
.foot-redes a:focus-visible{outline:2px solid var(--mag);outline-offset:3px}
.foot-redes svg{width:16px;height:16px;display:block}