:root{
  /* Solo dos colores corporativos: MAGENTA + NEGRO. El resto, neutros puros. */
  --mag:#E91E8C; --mag-hi:#FF099B; --mag-wash:#FDEFF7; --on-mag:#FFFFFF;
  --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;
  --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;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F5F5F5; --ink-2:#C9C9C9; --paper:#0D0D0D; --surface:#161616; --surface-2:#202020;
    --line:#2A2A2A; --line-2:#454545; --muted:#9A9A9A;
    --mag:#FF66B8; --mag-hi:#FF94CE; --mag-wash:#221016; --on-mag:#111111;
    --night:#050505; --night-2:#141414; --night-line:#2A2A2A;
  }
}
:root[data-theme="dark"]{
  --ink:#F5F5F5; --ink-2:#C9C9C9; --paper:#0D0D0D; --surface:#161616; --surface-2:#202020;
  --line:#2A2A2A; --line-2:#454545; --muted:#9A9A9A;
  --mag:#FF66B8; --mag-hi:#FF94CE; --mag-wash:#221016; --on-mag:#111111;
  --night:#050505; --night-2:#141414; --night-line:#2A2A2A;
}

*{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);color:var(--on-mag);border-color:var(--mag);box-shadow:none}
.b-fill:hover{background:var(--mag-hi);border-color:var(--mag-hi);box-shadow:none}
.b-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.b-line:hover{border-color:var(--mag);color:var(--mag)}
.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}
.hero-inner{position:relative}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:58px;align-items:center;position:relative;padding:26px 30px}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:52px;padding:24px 14px}.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}
.pvc{position:relative;width:min(100%,442px);aspect-ratio:85.6/54;border-radius:3.71%/5.89%;
  background:linear-gradient(142deg,#2A2A2A 0%,#141414 45%,#232323 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 32px 62px -20px rgba(0,0,0,.58),0 2px 6px rgba(0,0,0,.3);
  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}}
.pvc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.16) 46%,transparent 62%);
  background-size:260% 100%;animation:shine 5.5s ease-in-out infinite}
@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}
@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)}
.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);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)}
.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:var(--night);padding:56px 46px;min-height:400px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-card) 0 0 var(--r-card)}
@media(max-width:900px){.press{padding:44px 24px;min-height:330px;margin:0 -34px;border-radius:0}}
@media(max-width:640px){.press{margin:0 -20px}}
.press .halftone{opacity:.16;-webkit-mask-image:none;mask-image:none}
.sheet{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:11px;width:100%;max-width:430px}
@media(max-width:520px){.sheet{grid-template-columns:repeat(3,1fr);max-width:300px}}
.mini{aspect-ratio:85.6/54;border-radius:6px;background:linear-gradient(140deg,#282828,#171717);border:1px solid rgba(255,255,255,.09);position:relative;overflow:hidden;opacity:0;transform:scale(.86);animation:pop .5s cubic-bezier(.2,.8,.3,1) forwards}
.mini::before{content:"";position:absolute;left:11%;top:26%;width:44%;height:8%;background:rgba(255,255,255,.26);border-radius:1px}
.mini::after{content:"";position:absolute;left:11%;top:44%;width:26%;height:6%;background:var(--mag);opacity:.8;border-radius:1px}
@keyframes pop{to{opacity:1;transform:scale(1)}}
.press-marks{position:absolute;inset:26px;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)}

/* ══ 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-2);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);text-transform:uppercase;white-space:nowrap}
.partner h3{transition:color .25s}
.partner:hover h3{color:var(--mag)}
.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-2);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);color:var(--mag);transform:translateY(-2px)}
.opt[aria-pressed="true"]{background:var(--mag);border-color:var(--mag);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}

/* ══ prueba social: cinta en movimiento ══ */
.marquee{overflow:hidden;position:relative;margin-bottom:58px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:16px;width:max-content;animation:slide 26s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.logo-ph{height:70px;width:180px;flex:none;border:1px dashed var(--line-2);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase;transition:border-color .25s,color .25s,transform .25s}
.logo-ph:hover{border-color:var(--mag);color:var(--mag);transform:scale(1.05)}
.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 var(--night-line);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 h4{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);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 img{display:block;height:34px;width:auto}
.brand .on-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .on-light{display:none}
  :root:not([data-theme="light"]) .brand .on-dark{display:block}
}
:root[data-theme="dark"] .brand .on-light{display:none}
:root[data-theme="dark"] .brand .on-dark{display:block}
/* sobre las bandas negras el logo es siempre el claro */
.night .brand .on-light,.close-band .brand .on-light,.memo .brand .on-light{display:none}
.night .brand .on-dark,.close-band .brand .on-dark,.memo .brand .on-dark{display:block}
footer.site .brand img{height:40px}

.ph{border-bottom:2px dotted var(--mag);cursor:help}
.memo{background:var(--night-2);color:var(--night-ink);padding:40px 0}
.memo .wrap{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start}
@media(max-width:700px){.memo .wrap{grid-template-columns:1fr;gap:14px}}
.memo h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0;color:var(--mag);white-space:nowrap}
.memo p{font-size:.8438rem;line-height:1.7;color:var(--night-muted);max-width:76ch}
.memo p+p{margin-top:9px}
.memo b{color:var(--night-ink);font-weight:650}

.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}
  .mq-track{animation: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}
html:not(.js) .mq-track{animation:none!important}

.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}

/* ══════════════════════════════════════════════════════════════════
   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}
  .nav.abierta{max-height:70vh;overflow-y:auto;visibility:visible;transition:max-height .38s cubic-bezier(.2,.8,.3,1),visibility 0s}
  .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);outline:none}
.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}