/* OUTLET Dyserco · v2 · 2026-10-20 · «El stock que sobra, fuera» */
:root{
  --ink:#0a0b0e; --ink2:#111318; --ink3:#1a1d24; --paper:#f4efe6; --paper2:#ece5d7; --white:#fff;
  --red:#ff3b2f; --redF:#e2281d; --redD:#b81a10; --redT:#c41d12; --yellow:#ffd23f; --yellowD:#e9b200;
  --mut:#5b606b; --mutD:#a7a9b0; --line:rgba(24,20,12,.10); --line2:rgba(24,20,12,.16); --lineW:rgba(255,255,255,.10);
  --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r1:10px; --r2:14px; --r3:20px; --r4:28px;
  --e-out:cubic-bezier(.16,1,.3,1); --e-spring:cubic-bezier(.34,1.56,.64,1);
  --sh1:0 1px 1px rgba(24,18,8,.04),0 2px 4px -1px rgba(24,18,8,.05),0 10px 22px -12px rgba(24,18,8,.16);
  --sh2:0 1px 1px rgba(24,18,8,.04),0 6px 12px -4px rgba(24,18,8,.08),0 22px 44px -18px rgba(24,18,8,.30);
  --hh:66px;
  --grainD:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grainL:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 70px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font:16px/1.6 var(--sans);color:var(--ink);background:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-optical-sizing:auto;font-feature-settings:"kern","liga","calt";overflow-x:hidden}
html.intro-on,html.intro-on body{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{display:block}
ul,ol{list-style:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:6px}
.sec :focus-visible,.dlg :focus-visible{outline-color:var(--redF)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--redT)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
::selection{background:var(--yellow);color:#111}

/* =====================================================================
   INTRO
   ===================================================================== */
#intro{display:none}
html.js.intro-on #intro,#intro.wiping{display:block;position:fixed;inset:0;z-index:400;overflow:hidden;background:#050608;cursor:pointer;contain:strict}
#intro.clear{background:transparent;pointer-events:none}
#intro.clear .in-skip{display:none}
.in-stage{position:absolute;inset:0;overflow:hidden;transform-origin:50% 50%}
.in-stage>*{position:absolute}
/* — el almacén detrás de la persiana — */
.in-back{inset:0;opacity:0;will-change:transform,opacity}
.in-ring,.in-flash,.in-center{will-change:transform,opacity}
.in-back>*{position:absolute}
.in-backlight{inset:0;background:
  radial-gradient(38% 30% at 50% 47%,rgba(255,236,196,.42),rgba(255,180,90,.12) 55%,transparent 75%),
  radial-gradient(70% 55% at 50% 100%,rgba(255,59,47,.30),transparent 70%),
  radial-gradient(120% 90% at 50% 40%,#1d1612 0%,#0b0a0c 55%,#040405 100%)}
.in-rays{left:50%;top:-12%;width:180vmax;height:140vh;margin-left:-90vmax;background:conic-gradient(from 180deg at 50% 0%,transparent 158deg,rgba(255,232,180,.26) 167deg,transparent 172deg,rgba(255,232,180,.18) 176deg,transparent 179deg,rgba(255,232,180,.30) 183deg,transparent 188deg,rgba(255,232,180,.16) 193deg,transparent 202deg);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 85%);mask-image:linear-gradient(180deg,#000 10%,transparent 85%);animation:rays 7s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes rays{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.in-floor{left:-50%;right:-50%;bottom:-8%;height:62%;transform:perspective(500px) rotateX(72deg);transform-origin:50% 100%;background:
  repeating-linear-gradient(90deg,rgba(255,210,63,.42) 0 2px,transparent 2px 90px),
  repeating-linear-gradient(0deg,rgba(255,210,63,.30) 0 2px,transparent 2px 90px);
  -webkit-mask-image:radial-gradient(60% 90% at 50% 100%,#000 20%,transparent 75%);mask-image:radial-gradient(60% 90% at 50% 100%,#000 20%,transparent 75%)}
/* — productos que vuelan — */
.in-fly{inset:0;perspective:900px;perspective-origin:50% 50%;transform-style:preserve-3d}
.tl{position:absolute;left:50%;top:50%;opacity:0;will-change:transform,opacity;backface-visibility:hidden}
.tl-c{width:100%;height:100%;background:#fff;border-radius:16px;padding:9%;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.25),0 30px 60px -18px rgba(0,0,0,.75);display:grid;place-items:center}
.tl-c img{width:100%;height:100%;object-fit:contain}
/* — OUTLET — */
.in-center{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.in-word{position:relative;display:flex;perspective:1000px;font:900 clamp(78px,min(21vw,33vh),290px)/.9 var(--serif);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1;letter-spacing:-.035em}
.in-word .L{position:relative;display:inline-block;opacity:0;transform-style:flat;will-change:transform,opacity;padding:0 .005em}
.in-word .L::before{content:attr(data-l);position:absolute;left:.005em;top:0;z-index:-1;will-change:transform;color:#9e140b;text-shadow:
  0 .006em 0 #d5291d,0 .012em 0 #c8241a,0 .018em 0 #ba2016,0 .024em 0 #aa1c13,0 .03em 0 #981810,0 .036em 0 #86140d,0 .042em 0 #73110b,0 .048em 0 #5f0d08,
  0 .07em .04em rgba(0,0,0,.55),0 .16em .22em rgba(0,0,0,.6)}
.in-word .L b{position:relative;display:block;will-change:transform;font-weight:inherit;color:transparent;background:linear-gradient(176deg,#ffffff 0%,#fffaf0 38%,#efe2c9 52%,#fffdf8 64%,#f6ead4 100%);-webkit-background-clip:text;background-clip:text}
.in-word.shine .L b{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.95) 45%,rgba(255,240,190,.9) 50%,transparent 62%) -160% 0/250% 100% no-repeat,linear-gradient(176deg,#ffffff 0%,#fffaf0 38%,#efe2c9 52%,#fffdf8 64%,#f6ead4 100%);-webkit-background-clip:text;background-clip:text;animation:shine 1s cubic-bezier(.4,0,.2,1) forwards}
.in-word.shine .L:nth-child(2) b{animation-delay:.05s}.in-word.shine .L:nth-child(3) b{animation-delay:.1s}.in-word.shine .L:nth-child(4) b{animation-delay:.15s}.in-word.shine .L:nth-child(5) b{animation-delay:.2s}.in-word.shine .L:nth-child(6) b{animation-delay:.25s}
@keyframes shine{to{background-position:260% 0,0 0}}
.in-sticker{position:absolute;right:-.42em;top:-.5em;width:.86em;height:.86em;opacity:0;z-index:4;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.in-sticker .bdg{font:16px/1 var(--sans);letter-spacing:0;font-variation-settings:normal}
.in-sticker .bdg{width:100%;height:100%}
.bdg-ring{transform-origin:100px 100px;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.in-line{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,3.4vh,34px);font:600 clamp(11px,1.25vw,15px)/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#f1ebdd;opacity:0;white-space:nowrap}
.in-line i{width:5px;height:5px;background:var(--yellow);transform:rotate(45deg);flex:none}
.in-line2{margin-top:12px;font:italic 500 clamp(15px,1.7vw,22px)/1.2 var(--serif);color:var(--yellow);opacity:0;letter-spacing:.01em}
.in-ring{left:50%;top:50%;width:70vmin;height:70vmin;border-radius:50%;border:2px solid rgba(255,236,196,.8);box-shadow:0 0 40px rgba(255,200,120,.35),inset 0 0 40px rgba(255,200,120,.25);opacity:0;z-index:2}
.in-flash{inset:0;background:radial-gradient(50% 40% at 50% 52%,rgba(255,240,210,.9),transparent 70%);opacity:0;z-index:2;mix-blend-mode:screen}
/* — la persiana — */
.in-stage{--hood:clamp(48px,8.6vh,92px);--barh:clamp(42px,6.8vh,66px);--sp:clamp(24px,4.2vh,42px)}
.in-door{inset:0;z-index:6;pointer-events:none}
.in-door>*{position:absolute}
.in-clip{inset:0;clip-path:inset(var(--hood) 0 0 0)}
.in-move{position:absolute;inset:0;will-change:transform}
.in-move>*{position:absolute}
/* lamas: perfil de acero con la junta (luz) entre una y otra */
.in-light{inset:0;opacity:.5;background:linear-gradient(180deg,#fff0cc 0,#ffd08a 45%,#ffa84f 100%);will-change:opacity}
.in-slats{inset:0 0 var(--barh);background:
  linear-gradient(90deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.08) 14%,rgba(255,255,255,.07) 44%,rgba(255,255,255,.02) 58%,rgba(0,0,0,.1) 84%,rgba(0,0,0,.66) 100%),
  var(--grainL) 0 0/180px 180px,
  repeating-linear-gradient(180deg,#7f858f 0,#aeb4bc calc(var(--sp)*.14),#979da6 calc(var(--sp)*.36),#6a6f78 calc(var(--sp)*.62),#464a52 calc(var(--sp)*.84),#25272c calc(var(--sp) - 5px),#101114 calc(var(--sp) - 4px),transparent calc(var(--sp) - 4px),transparent var(--sp));
  background-blend-mode:normal,overlay,normal}
.in-glint{inset:0 0 var(--barh);opacity:0;background:linear-gradient(104deg,transparent 38%,rgba(255,244,220,.16) 48%,rgba(255,244,220,.05) 54%,transparent 62%);will-change:transform,opacity}
/* rótulo */
.in-plate{left:50%;top:47%;transform:translate(-50%,-50%);width:min(84vw,1760px);display:flex;flex-direction:column;align-items:center;padding:clamp(22px,3.1vw,50px) 0 clamp(20px,2.7vw,44px);background:linear-gradient(172deg,#1a1b20,#0a0b0d 60%,#111216);border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 0 clamp(6px,.62vw,10px) #0a0b0d,0 0 0 calc(clamp(6px,.62vw,10px) + 1.5px) rgba(212,172,74,.8),0 38px 80px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden}
.in-plate::before{content:"";position:absolute;inset:clamp(7px,.9vw,13px);border:1px solid rgba(212,172,74,.32);border-radius:2px;pointer-events:none}
.in-plate small{display:flex;gap:.9em;align-items:center;font:700 clamp(9px,1vw,14px)/1 var(--sans);letter-spacing:.38em;text-transform:uppercase;color:#a7a08f;margin-bottom:clamp(8px,1.1vw,18px)}
.in-plate small .dt{color:#d4ac4a}
.pl-main{display:flex;align-items:baseline;justify-content:center;gap:.26em;font-size:min(9.3vw,17.5vh,180px);line-height:1;white-space:nowrap}
.pl-main strong{font:900 1em/.95 var(--sans);letter-spacing:.045em;color:#f6f0e2;text-shadow:0 2px 0 #000,0 10px 26px rgba(0,0,0,.55)}
.pl-main em{font:italic 900 1em/.95 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.01em;color:#ffd23f;text-shadow:0 3px 0 #6e4f00,0 12px 28px rgba(0,0,0,.55)}
.pl-hz{width:42%;height:1px;margin-top:clamp(12px,1.7vw,26px);background:linear-gradient(90deg,transparent,#d4ac4a 20%,#d4ac4a 80%,transparent)}
.pl-sw{position:absolute;inset:0;opacity:0;background:linear-gradient(100deg,transparent 40%,rgba(255,244,214,.2) 50%,transparent 60%);will-change:transform,opacity}
.in-plate .sc{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9ecf0,#7d828b 55%,#3b3e45);box-shadow:0 1px 1px rgba(0,0,0,.6)}
.in-plate .sc::after{content:"";position:absolute;left:1.5px;right:1.5px;top:4.5px;height:1px;background:rgba(0,0,0,.55);transform:rotate(35deg)}
.in-plate .s1{left:clamp(14px,1.6vw,24px);top:clamp(14px,1.6vw,24px)}.in-plate .s2{right:clamp(14px,1.6vw,24px);top:clamp(14px,1.6vw,24px)}.in-plate .s3{left:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px)}.in-plate .s4{right:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px)}
/* barra inferior */
.in-bot{left:0;right:0;bottom:0;height:var(--barh);background:linear-gradient(180deg,#d4d8de 0,#a2a8b0 10%,#737882 42%,#4d515a 74%,#25272b 92%,#0a0a0b 100%);box-shadow:0 -1px 0 rgba(255,255,255,.35),0 -8px 18px rgba(0,0,0,.45)}
.in-bot>*{position:absolute}
.in-bot .hz{left:0;right:0;bottom:0;height:7px;background:linear-gradient(180deg,#1a1b1e,#050506)}
.in-bot .grip{left:50%;top:38%;width:clamp(110px,14vw,200px);height:clamp(11px,1.7vh,16px);margin-left:calc(clamp(110px,14vw,200px)/-2);border-radius:8px;background:linear-gradient(180deg,#050506,#24262b);box-shadow:inset 0 3px 5px #000,0 1px 0 rgba(255,255,255,.35)}
.in-bot .lock{left:19%;top:30%;width:clamp(14px,1.5vw,22px);height:clamp(14px,1.5vw,22px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1f2f4,#8b9099 50%,#3a3d44);box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.25)}
.in-bot .lock::after{content:"";position:absolute;left:50%;top:22%;width:2px;height:48%;margin-left:-1px;background:#16171a;border-radius:1px}
.in-bot .seal{left:calc(19% + clamp(20px,2vw,30px));top:36%;width:clamp(9px,1vw,14px);height:clamp(18px,2.2vw,30px);background:linear-gradient(180deg,#c92b20,#8c1710);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.6);transform:rotate(6deg)}
.in-spill{left:0;right:0;top:100%;height:44vh;opacity:.15;background:linear-gradient(180deg,rgba(255,216,150,.62),rgba(255,170,90,.16) 34%,transparent);will-change:opacity}
/* tambor superior donde se enrollan las lamas */
.in-hood{left:0;right:0;top:0;height:var(--hood);z-index:2;overflow:hidden;background:linear-gradient(180deg,#0c0d10 0,#32353c 9%,#7e848d 24%,#c5cad1 37%,#8a9099 52%,#4a4e56 76%,#17181b 100%);box-shadow:0 8px 22px rgba(0,0,0,.6)}
.in-hood>*{position:absolute}
.in-hood .roll{left:0;right:0;top:-480px;height:calc(100% + 480px);background:repeating-linear-gradient(180deg,rgba(0,0,0,.34) 0 1px,rgba(255,255,255,.1) 1px 3px,transparent 3px 10px);will-change:transform}
.in-hood .hl{left:0;right:0;bottom:0;height:5px;background:linear-gradient(180deg,rgba(0,0,0,.5),#0a0a0c);box-shadow:0 -1px 0 rgba(255,255,255,.18)}
.in-coilsh{left:0;right:0;top:var(--hood);height:clamp(18px,3.4vh,34px);z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent)}
.in-cap{top:0;width:clamp(30px,4.2vw,64px);height:calc(var(--hood) + 8px);z-index:3;background:linear-gradient(90deg,#0d0e10,#3a3d44 40%,#171819);box-shadow:0 6px 14px rgba(0,0,0,.55)}
.in-cap.l{left:0;border-radius:0 0 8px 0}.in-cap.r{right:0;border-radius:0 0 0 8px;transform:scaleX(-1)}
.in-cap b{position:absolute;left:50%;top:50%;width:clamp(12px,1.5vw,20px);height:clamp(12px,1.5vw,20px);margin:calc(clamp(12px,1.5vw,20px)/-2) 0 0 calc(clamp(12px,1.5vw,20px)/-2);border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9ecf0,#7d828b 55%,#3b3e45);box-shadow:0 1px 2px rgba(0,0,0,.7)}
.in-rail{top:var(--hood);bottom:0;z-index:2;width:clamp(12px,1.7vw,24px);background:radial-gradient(circle at 50% 50%,#c9cdd3 0 1.8px,#5a5e66 2.3px 3.2px,transparent 3.8px) 50% 40px/100% 140px repeat-y,linear-gradient(90deg,#14151a,#5d626b 30%,#3a3d44 60%,#0f1013);box-shadow:0 0 14px rgba(0,0,0,.6)}
.in-rail.l{left:0}.in-rail.r{right:0;transform:scaleX(-1)}
.in-cv{inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
.in-vig{inset:0;z-index:8;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
/* — barrido de salida — */
.in-wipe{position:absolute;left:0;top:-100vh;height:300vh;display:flex;transform:translate3d(200vw,0,0) rotate(-12deg);z-index:20;pointer-events:none;will-change:transform;visibility:hidden}
#intro.wiping .in-wipe{visibility:visible}
.in-wipe i{flex:none;height:100%}
.in-wipe .hz{width:clamp(48px,7vmin,84px);background:repeating-linear-gradient(-33deg,var(--yellow) 0 22px,#111 22px 44px)}
.in-wipe .rd{width:clamp(6px,1vmin,12px);background:var(--red)}
.in-wipe .bd{width:170vw;background:var(--ink)}
/* — saltar — */
.in-skip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;border-radius:99px;background:rgba(10,11,14,.55);border:1px solid rgba(255,255,255,.22);color:#fff;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.in-skip:hover{background:var(--redF);border-color:var(--redF)}
.in-skip svg{width:30px;height:30px;transform:rotate(-90deg)}
.in-skip circle{fill:none;stroke-width:2}
.in-skip .trk{stroke:rgba(255,255,255,.18)}
.in-skip .prg{stroke:var(--yellow);stroke-dasharray:100.5;stroke-dashoffset:100.5;stroke-linecap:round}
.in-skip path{fill:#fff;transform:rotate(90deg);transform-origin:18px 18px}

/* =====================================================================
   CABECERA
   ===================================================================== */
.top{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--hh);display:flex;align-items:center;gap:14px;padding:0 max(clamp(16px,4vw,44px),env(safe-area-inset-right)) 0 max(clamp(16px,4vw,44px),env(safe-area-inset-left));color:#fff;transition:background .35s,box-shadow .35s,height .35s var(--e-out),transform .45s var(--e-out)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 20%,rgba(255,255,255,.14) 80%,transparent);opacity:0;transition:opacity .35s}
.top.scrolled{--hh:58px;background:rgba(10,11,14,.93);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.top.scrolled::after{opacity:1}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font:600 21px/1 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:.01em}
.logo img{width:34px;height:34px;object-fit:contain;border-radius:50%;background:#fff;padding:2px;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.chip-outlet{position:relative;background:var(--yellow);color:#111;font:800 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:7px 9px 7px 11px;transform:rotate(-3deg);box-shadow:2px 2px 0 var(--redF);border-radius:2px}
.top-nav{margin-left:auto;display:flex;gap:2px}
.top-nav a{position:relative;text-decoration:none;color:#d9d6ce;font:500 14px/1 var(--sans);padding:10px 13px;border-radius:99px;transition:color .2s,background .2s}
.top-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.top-sel{display:flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 13px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font:600 13px/1 var(--sans);color:#fff;transition:background .2s}
.top-sel[hidden]{display:none}
.top-sel:hover{background:rgba(255,255,255,.16)}
.top-sel svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.top-sel b{min-width:26px;height:26px;border-radius:99px;display:grid;place-items:center;background:var(--yellow);color:#111;font:800 13px/1 var(--sans);padding:0 7px}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;min-height:max(680px,min(100svh,940px));display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;background:var(--ink);padding:calc(var(--hh) + 56px) 0 96px;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg i{position:absolute}
.hero-bg .g1{inset:0;background:radial-gradient(48% 60% at 76% 42%,rgba(255,59,47,.30),transparent 70%),radial-gradient(36% 46% at 70% 60%,rgba(255,210,63,.10),transparent 70%),radial-gradient(60% 70% at 0% 100%,rgba(255,59,47,.10),transparent 70%)}
.hero-bg .g2{inset:0;background:var(--grainL) 0 0/180px 180px;opacity:.05}
.hero-bg .beam{left:42%;top:-30%;width:70%;height:150%;background:linear-gradient(100deg,transparent 30%,rgba(255,236,196,.06) 48%,transparent 62%);transform:rotate(14deg)}
.hero-bg .grid-l{inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 120px);-webkit-mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent 80%);mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent 80%)}
.hero-grid{position:relative;z-index:3;width:100%;max-width:1360px;margin:0 auto;padding:0 clamp(18px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(20px,3vw,48px);align-items:center}
.kick{display:inline-flex;align-items:center;gap:11px;font:700 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);margin-bottom:26px}
.kick i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--red)}
.kick i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);animation:ping 1.8s var(--e-out) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(3.6);opacity:0}}
.hero h1{font:800 clamp(52px,8.6vw,132px)/.9 var(--serif);font-variation-settings:"opsz" 144,"SOFT" 30;letter-spacing:-.035em;font-kerning:normal}
.hero h1 .ln{display:block;overflow:hidden;padding:.02em .04em .1em 0;margin-bottom:-.1em}
.hero h1 .ln>span{display:inline-block;transform:translate3d(0,110%,0);will-change:transform}
.hero h1 em{position:relative;display:inline-block;font-style:italic;font-weight:900;color:var(--red);padding-right:.04em}
.hero h1 .slash{position:absolute;left:-2%;bottom:-.02em;width:104%;height:.2em;overflow:visible;z-index:-1}
.hero h1 .slash path{fill:none;stroke:var(--yellow);stroke-width:13;stroke-linecap:round;stroke-dasharray:310;stroke-dashoffset:310}
.lead{max-width:600px;margin:30px 0 26px;font-size:clamp(16.5px,1.45vw,19.5px);line-height:1.62;color:#cfcbc1;letter-spacing:-.003em}
.lead b{color:#fff;font-weight:600}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.trust li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border:1px solid rgba(255,255,255,.14);border-radius:99px;font:500 13.5px/1 var(--sans);color:#ece8df;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.trust svg{width:17px;height:17px;fill:none;stroke:var(--yellow);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero-count{display:flex;align-items:center;gap:12px;color:#b5b2a9;font:500 13px/1.3 var(--sans);letter-spacing:.01em}
.hero-count b{font:800 46px/1 var(--serif);font-variation-settings:"opsz" 144;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:2.1ch}
.hero-count span{padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}
/* entrada del hero (tras la intro o directamente) */
.hx{opacity:0}
html.hero-go .hx{animation:hx .9s var(--e-out) both}
html.hero-go .kick{animation-delay:.05s}
html.hero-go h1.hx{animation:none;opacity:1}
html.hero-go .hero h1 .ln>span{animation:lnUp 1s var(--e-out) both}
html.hero-go .hero h1 .ln:nth-child(2)>span{animation-delay:.08s}
html.hero-go .hero h1 .ln:nth-child(3)>span{animation-delay:.16s}
html.hero-go .hero h1 .slash path{animation:draw .8s .75s cubic-bezier(.65,0,.35,1) forwards}
html.hero-go .lead{animation-delay:.3s}
html.hero-go .trust{animation-delay:.4s}
html.hero-go .hero-cta{animation-delay:.5s}
@keyframes hx{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes lnUp{from{transform:translate3d(0,110%,0)}to{transform:translate3d(0,0,0)}}
@keyframes draw{to{stroke-dashoffset:0}}
/* collage de productos en 3D */
.hero-art{position:relative;height:clamp(420px,46vw,620px);perspective:1400px}
.art-3d{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.ft{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;transform:translate3d(0,0,var(--z)) rotate(var(--r));transform-style:preserve-3d;opacity:0}
html.hero-go .ft{animation:ftIn 1.2s var(--e-out) both;animation-delay:calc(.25s + var(--i) * .08s)}
@keyframes ftIn{from{opacity:0;transform:translate3d(0,60px,calc(var(--z) - 400px)) rotate(calc(var(--r) * 3))}to{opacity:1;transform:translate3d(0,0,var(--z)) rotate(var(--r))}}
.ft-in{width:100%;height:100%;background:#fff;border-radius:var(--r3);padding:10%;display:grid;place-items:center;position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.3),0 18px 30px -10px rgba(0,0,0,.55),0 50px 80px -30px rgba(0,0,0,.65);animation:bob var(--t,6s) ease-in-out infinite alternate}
.ft-in::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.0) 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 60%) 200% 0/300% 100% no-repeat;pointer-events:none;mix-blend-mode:overlay}
.ft-in img{width:100%;height:100%;object-fit:contain}
.ft .htag{position:absolute;left:-14px;top:18%;transform:rotate(-12deg);transform-origin:100% 50%;background:var(--redF);color:#fff;font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:8px 10px 8px 18px;clip-path:polygon(9px 0,100% 0,100% 100%,9px 100%,0 50%);box-shadow:0 6px 12px rgba(0,0,0,.3);white-space:nowrap}
.ft .htag::before{content:"";position:absolute;left:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#fff}
@keyframes bob{from{transform:translate3d(0,-7px,0)}to{transform:translate3d(0,8px,0)}}
.art-badge{position:absolute;left:-3%;bottom:-2%;width:clamp(120px,13vw,176px);aspect-ratio:1;z-index:5;transform:translateZ(200px) rotate(-14deg);opacity:0;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
html.hero-go .art-badge{animation:stamp .7s .95s var(--e-spring) both}
@keyframes stamp{from{opacity:0;transform:rotate(-40deg) scale(2.2)}to{opacity:1;transform:rotate(-14deg) scale(1)}}
.art-badge .bdg{width:100%;height:100%}
.scroll-cue{position:absolute;left:50%;bottom:30px;z-index:5;width:26px;height:40px;margin-left:-13px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;opacity:.85}
.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s var(--e-out) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;background:linear-gradient(180deg,#f0372b,var(--redF) 55%,#d02317);color:#fff;text-decoration:none;font:700 15px/1 var(--sans);letter-spacing:.01em;padding:15px 24px;border-radius:99px;border:0;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.18),0 1px 2px rgba(120,10,0,.35),0 10px 24px -8px rgba(226,40,29,.6);transition:transform .25s var(--e-out),box-shadow .25s,background .2s;will-change:transform}
.btn>span,.btn>svg{position:relative;pointer-events:none}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.18),0 2px 4px rgba(120,10,0,.35),0 16px 34px -10px rgba(226,40,29,.75)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.big{min-height:56px;padding:18px 28px;font-size:16px}
.btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-out)}
.btn:hover svg{transform:translateY(2px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink),0 14px 30px -14px rgba(0,0,0,.45)}
.btn.ghost.light{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.btn.ghost.light:hover{background:#fff;color:#111;box-shadow:inset 0 0 0 1.5px #fff}

/* =====================================================================
   SECCIONES
   ===================================================================== */
.sec{position:relative;background:var(--paper);padding:110px 0 90px}
.sec::before{content:"";position:absolute;inset:0;background:var(--grainD) 0 0/180px 180px;opacity:.035;pointer-events:none}
.sec.alt{background:#fbf9f5}
.wrap{position:relative;max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.sec-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:34px}
.sec-h{max-width:760px}
.sec-h h2,.reel-h h2,.fin h2{font:700 clamp(36px,5.2vw,72px)/1 var(--serif);font-variation-settings:"opsz" 144,"SOFT" 20;letter-spacing:-.03em;margin:16px 0 14px}
.sec-h h2 em{white-space:nowrap}
.sec-h h2 em,.fin h2 em{font-style:italic;font-weight:600;color:var(--redT)}
.sec-h .sub,.reel-h .sub{color:var(--mut);font-size:17px;line-height:1.6;max-width:600px}
.steps{display:flex;gap:6px;padding:6px;border-radius:var(--r3);background:#fff;box-shadow:var(--sh1),0 0 0 1px var(--line)}
.steps li{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:var(--r2);font:500 13.5px/1.25 var(--sans);color:#3d414a;white-space:nowrap}
.steps li+li{border-left:1px solid var(--line)}
.steps span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--yellow);font:700 13px/1 var(--serif)}
.steps b{color:var(--ink);font-weight:700}
/* filtros fijos */
.tools-sent{display:block;height:1px}
.tools{position:sticky;top:calc(var(--hh) - 8px);z-index:20;display:flex;gap:12px;align-items:center;justify-content:space-between;margin:0 calc(clamp(16px,4vw,48px) * -1) 6px;padding:14px clamp(16px,4vw,48px);transition:background .3s,box-shadow .3s}
.tools::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:rgba(244,239,230,.86);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);box-shadow:0 1px 0 var(--line),0 14px 30px -20px rgba(24,18,8,.35);opacity:0;transition:opacity .3s;z-index:-1}
.tools.stuck::before{opacity:1}
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);padding:2px 40px 2px 2px;min-width:0;flex:1}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px var(--line2),0 1px 2px rgba(24,18,8,.05);font:600 13px/1 var(--sans);color:#2c3038;transition:background .2s,color .2s,box-shadow .2s,transform .2s var(--e-out);white-space:nowrap}
.chip small{font:600 11px/1 var(--sans);color:#7c808a;font-variant-numeric:tabular-nums;padding:3px 6px;border-radius:99px;background:var(--paper)}
.chip:hover{box-shadow:0 0 0 1px var(--ink),0 4px 10px -4px rgba(24,18,8,.25)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:0 0 0 1px var(--ink),0 6px 14px -6px rgba(0,0,0,.5)}
.chip[aria-pressed="true"] small{background:rgba(255,255,255,.14);color:#fff}
.search{flex:none;display:flex;align-items:center;gap:9px;height:44px;width:300px;background:#fff;border-radius:99px;padding:0 16px;box-shadow:0 0 0 1px var(--line2),0 1px 2px rgba(24,18,8,.05);transition:box-shadow .2s,width .35s var(--e-out)}
.search svg{flex:none;width:19px;height:19px;fill:none;stroke:#6b707a;stroke-width:1.8;stroke-linecap:round}
.search input{border:0;outline:0;background:none;font:500 15px/1 var(--sans);color:var(--ink);padding:0;width:100%;min-width:0;height:100%}
.search input::placeholder{color:#8b8f98}
.search:focus-within{box-shadow:0 0 0 1.5px var(--redF),0 0 0 5px rgba(226,40,29,.12)}
.count{font:500 13px/1 var(--sans);color:var(--mut);margin:10px 0 18px;letter-spacing:.01em}
.count b{color:var(--ink);font-weight:700}

/* tarjetas */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:22px}
.card{position:relative;background:#fff;border-radius:var(--r3);cursor:pointer;box-shadow:0 0 0 1px var(--line),var(--sh1);transition:box-shadow .35s var(--e-out),transform .5s var(--e-out);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);-webkit-user-select:none;user-select:none;isolation:isolate}
.card.rv{opacity:0;transform:translate3d(0,28px,0) scale(.98)}
.card.rv.in{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:opacity .8s var(--e-out) var(--d,0s),transform .8s var(--e-out) var(--d,0s),box-shadow .35s var(--e-out)}
.card.rv.in.tilting{transition:transform .12s linear,box-shadow .35s var(--e-out)}
.card:hover{box-shadow:0 0 0 1px var(--line2),var(--sh2)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 45%);opacity:0;transition:opacity .35s;mix-blend-mode:soft-light;z-index:3}
.card:hover::after{opacity:1}
.card .ph{position:relative;aspect-ratio:1;border-radius:var(--r3) var(--r3) 0 0;background:#fff;display:flex;align-items:center;justify-content:center;padding:9%;overflow:hidden}
.card .stg{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.card .stg img{position:relative;width:100%;height:auto;max-height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:0;transform:translateY(6px) scale(.985);transition:opacity .6s var(--e-out),transform .7s var(--e-out)}
.card .stg img.ld{opacity:1;transform:none}
.card:hover .stg img.ld{transform:translateY(-4px) scale(1.025)}
.card .cs{position:absolute;left:22%;right:22%;bottom:1%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(24,18,8,.13),rgba(24,18,8,0));transition:transform .7s var(--e-out),opacity .7s;pointer-events:none}
.card:hover .cs{transform:scaleX(.88);opacity:.75}
.card.lowres .ph{background:radial-gradient(75% 70% at 50% 45%,#fff 40%,#f7f4ee 100%)}
.card.lowres .stg img{width:auto;max-width:var(--mw,100%)}
.card .tag{position:absolute;left:0;top:16px;z-index:2;display:flex;align-items:center;gap:6px;background:var(--redF);color:#fff;font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:7px 14px 7px 12px;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.card .ori{position:absolute;left:12px;bottom:10px;z-index:2;font:500 10.5px/1 var(--sans);color:#6f7380;background:rgba(255,255,255,.92);padding:5px 8px;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.ok{position:absolute;right:12px;top:12px;z-index:2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1.5px rgba(24,18,8,.18);transition:background .25s,box-shadow .25s,transform .4s var(--e-spring),opacity .25s;opacity:0;transform:scale(.8)}
.card:hover .ok,.card:focus-visible .ok{opacity:1;transform:scale(1)}
.ok svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ok svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s .08s var(--e-out)}
.sel .ok{opacity:1;transform:scale(1);background:var(--redF);box-shadow:0 0 0 3px #fff,0 4px 12px rgba(226,40,29,.45)}
.sel .ok svg path{stroke-dashoffset:0}
.ok::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--redF);opacity:0}
.sel .ok.pop::after{animation:ripple .6s var(--e-out)}
@keyframes ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}
.card .tx{padding:6px 18px 18px;display:flex;flex-direction:column;gap:12px}
.card h3{font:600 17px/1.28 var(--serif);font-variation-settings:"opsz" 24;letter-spacing:-.008em;color:#16181d;min-height:2.56em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .bd{display:flex;gap:6px;flex-wrap:wrap}
.card .bd span{display:inline-flex;align-items:center;gap:5px;font:600 10.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#4b505a;padding:6px 8px 6px 7px;border-radius:6px;background:#f6f3ec;box-shadow:inset 0 0 0 1px rgba(24,18,8,.06)}
.card .bd svg{width:11px;height:11px;fill:none;stroke:#1f7a4d;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pick{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border-radius:var(--r2);font:700 13.5px/1 var(--sans);letter-spacing:.02em;background:var(--ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:background .25s,transform .2s var(--e-out)}
.pick svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.card:hover .pick{background:#23262e}
.card:active .pick{transform:scale(.98)}
.card.sel{box-shadow:0 0 0 2px var(--redF),0 18px 40px -18px rgba(226,40,29,.55)}
.card.sel .pick{background:var(--redF)}
.more{text-align:center;margin-top:44px}
.more[hidden]{display:none}
.empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:60px 0;font:italic 500 20px/1.4 var(--serif)}

/* rodillo */
.reel{position:relative;background:var(--ink);color:#fff;padding:110px 0 110px;overflow:hidden;isolation:isolate}
.reel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 50% 60%,rgba(255,59,47,.16),transparent 70%)}
.reel::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grainL) 0 0/180px 180px;opacity:.04}
.reel-h{max-width:1320px;margin:0 auto 46px;padding:0 clamp(16px,4vw,48px)}
.reel-h .eyebrow{color:var(--yellow)}
.reel-h h2 em{font-style:italic;color:var(--yellow);font-weight:600}
.reel-h .sub{color:#a9aab0}
.reel-row{position:relative;height:calc(var(--rw,210px) + 34px);overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.reel-row.drag{cursor:grabbing}
.reel-track{position:absolute;inset:0}
.rc{position:absolute;left:0;top:17px;width:var(--rw,210px);aspect-ratio:1;background:#fff;border-radius:var(--r3);padding:calc(var(--rw,210px) * .11);display:flex;align-items:center;justify-content:center;cursor:pointer;will-change:transform,opacity;transform:translate3d(-9999px,0,0);box-shadow:0 0 0 1px rgba(255,255,255,.4),0 16px 34px -14px rgba(0,0,0,.7);-webkit-user-select:none;user-select:none}
.rc img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;opacity:0;transition:opacity .5s}
.rc img.ld{opacity:1}
.rc .nm{position:absolute;left:8px;right:8px;bottom:8px;padding:8px 10px;border-radius:10px;background:rgba(10,11,14,.86);color:#fff;font:500 12px/1.25 var(--sans);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s var(--e-out);pointer-events:none}
.rc:hover .nm{opacity:1;transform:none}
.rc .ok{right:9px;top:9px;width:28px;height:28px}
.rc:hover .ok{opacity:1;transform:scale(1)}
.rc.sel{box-shadow:0 0 0 3px var(--red),0 16px 34px -14px rgba(0,0,0,.7)}

/* lista */
.list{columns:3 320px;column-gap:48px}
.lg{break-inside:avoid;margin-bottom:38px}
.lg h4{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:600 21px/1.15 var(--serif);font-variation-settings:"opsz" 36;letter-spacing:-.01em;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--ink)}
.lg h4 small{font:600 11px/1 var(--sans);letter-spacing:.12em;color:var(--redT);text-transform:uppercase;white-space:nowrap}
.li{display:flex;align-items:center;gap:13px;padding:9px 8px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:10px;transition:background .18s}
.li:hover{background:#f3eee4}
.li .bx{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px #b9b3a5;background:#fff;transition:background .2s,box-shadow .2s,transform .3s var(--e-spring)}
.li .bx svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.li .bx path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s .05s var(--e-out)}
.li img{flex:none;width:42px;height:42px;object-fit:contain;background:#fff;border-radius:9px;padding:3px;box-shadow:0 0 0 1px var(--line)}
.li .n{font:500 15px/1.35 var(--sans);color:#24272e}
.li.sel .bx{background:var(--redF);box-shadow:inset 0 0 0 1.5px var(--redF);transform:scale(1.06)}
.li.sel .bx path{stroke-dashoffset:0}
.li.sel .n{font-weight:650;color:var(--ink)}
.pv{position:fixed;left:0;top:0;z-index:60;width:230px;padding:14px 14px 12px;background:#fff;border-radius:var(--r3);box-shadow:0 0 0 1px var(--line),0 30px 60px -20px rgba(24,18,8,.45);pointer-events:none;opacity:0;transform:translate3d(-999px,0,0);transition:opacity .2s;will-change:transform}
.pv.on{opacity:1}
.pv img{width:100%;aspect-ratio:1;object-fit:contain}
.pv span{display:block;margin-top:8px;font:500 12px/1.3 var(--sans);color:var(--mut)}

/* cierre */
.fin{position:relative;background:var(--ink);color:#fff;text-align:center;padding:120px 0 0;overflow:hidden;isolation:isolate}
.fin::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 50% 0%,rgba(255,59,47,.22),transparent 70%)}
.fin .eyebrow{color:var(--yellow)}
.fin .eyebrow::before{display:none}
#lista .sec-h{margin-bottom:44px}
.foot-in a{white-space:nowrap}
.fin h2 em{color:var(--yellow)}
.fin-in>p{margin:0 auto 26px;color:#c6c3ba;max-width:520px;font-size:17px}
.fin-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:96px!important}
.foot{border-top:1px solid var(--lineW);padding:28px 0 calc(28px + env(safe-area-inset-bottom))}
.foot-in{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font:400 13.5px/1.6 var(--sans);color:#9c9a93}
.foot-in b{color:#fff;font-weight:600}
.foot-in a{color:#d9d6ce;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
.foot-in a:hover{color:#fff;border-color:#fff}
.foot-in span{margin:0 9px;opacity:.4}
body.has-fab .foot{padding-bottom:calc(110px + env(safe-area-inset-bottom))}

/* revelado al hacer scroll */
.rv{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.rv.in{opacity:1;transform:none}

/* =====================================================================
   BOTÓN FLOTANTE
   ===================================================================== */
.fab{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:150;display:flex;gap:10px;align-items:center;transform:translateX(-50%)}
.fab[hidden]{display:none}
.fab.show{animation:fabIn .6s var(--e-spring) both}
@keyframes fabIn{from{opacity:0;transform:translate(-50%,110px)}to{opacity:1;transform:translate(-50%,0)}}
.fab-go{position:relative;display:flex;align-items:center;gap:12px;height:60px;padding:0 20px 0 10px;border-radius:99px;background:linear-gradient(180deg,#f0372b,var(--redF) 55%,#cc2116);color:#fff;font:700 16px/1 var(--sans);letter-spacing:.005em;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.2),0 2px 4px rgba(120,10,0,.35),0 18px 40px -10px rgba(226,40,29,.65),0 30px 60px -20px rgba(0,0,0,.6);transition:transform .25s var(--e-out)}
.fab-go::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(255,59,47,.7);z-index:-1;animation:fabPulse 2.4s var(--e-out) infinite}
@keyframes fabPulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.12,1.35);opacity:0}}
.fab-go:hover{transform:translateY(-2px)}
.fab-go:active{transform:translateY(1px) scale(.98)}
.fab-th{display:flex;padding-left:2px}
.fab-th img{width:40px;height:40px;border-radius:50%;object-fit:contain;background:#fff;padding:4px;box-shadow:0 0 0 2px var(--redF),0 2px 6px rgba(0,0,0,.25)}
.fab-th img+img{margin-left:-16px}
.fab-n{min-width:30px;height:30px;padding:0 8px;border-radius:99px;background:var(--yellow);color:#111;display:grid;place-items:center;font:800 15px/1 var(--sans);font-variant-numeric:tabular-nums;box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
.fab-n.bump{animation:bump .5s var(--e-spring)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45) rotate(-8deg)}100%{transform:scale(1)}}
.fab-go>svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fab-clear{width:46px;height:46px;border-radius:50%;background:rgba(10,11,14,.82);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 24px -10px rgba(0,0,0,.6);transition:background .2s,transform .2s var(--e-out)}
.fab-clear svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.fab-clear:hover{background:#000;transform:rotate(90deg)}

/* =====================================================================
   FORMULARIO
   ===================================================================== */
.dlg{position:fixed;inset:0;z-index:250;background:rgba(6,7,9,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;overflow-y:auto;animation:fade .3s ease both}
.dlg[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.dlg-box{position:relative;width:min(660px,100%);background:#fff;border-radius:var(--r4);overflow:hidden;max-height:calc(100dvh - 32px);overflow-y:auto;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 100px -20px rgba(0,0,0,.7);animation:dlgIn .55s var(--e-out) both;overscroll-behavior:contain}
@keyframes dlgIn{from{opacity:0;transform:translate3d(0,40px,0) scale(.96)}to{opacity:1;transform:none}}
.dlg-x{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;z-index:2;transition:background .2s,transform .3s var(--e-out)}
.dlg-x:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.dlg-x svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.dlg-head{position:relative;background:var(--ink);color:#fff;padding:30px 32px 26px;overflow:hidden;isolation:isolate}
.dlg-head::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 120% at 100% 0%,rgba(255,59,47,.35),transparent 70%),repeating-linear-gradient(-45deg,transparent 0 20px,rgba(255,210,63,.05) 20px 40px)}
.dlg-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 10px,#111 10px 20px)}
.dlg-chip{display:inline-block;background:var(--yellow);color:#111;font:800 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:6px 9px;transform:rotate(-3deg);box-shadow:2px 2px 0 var(--redF);border-radius:2px}
.dlg-head h3{font:700 34px/1.05 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.025em;margin:16px 0 6px}
.dlg-head p{color:#b9b6ad;font-size:15px}
#frm{padding:24px 32px 28px;display:grid;gap:16px}
.sel-list{display:flex;flex-wrap:wrap;gap:6px;max-height:132px;overflow:auto;padding:2px;margin:-2px}
.sel-list>span{display:inline-flex;align-items:center;gap:7px;background:#fbf9f5;border-radius:99px;padding:3px 4px 3px 3px;font:500 12.5px/1.2 var(--sans);color:#2b2e35;box-shadow:inset 0 0 0 1px var(--line2);animation:chipIn .35s var(--e-out) both}
@keyframes chipIn{from{opacity:0;transform:scale(.9)}}
.sel-list img{width:26px;height:26px;border-radius:50%;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--line)}
.sel-list em{font-style:normal;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-list button{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#ece7dc;transition:background .2s}
.sel-list button svg{width:11px;height:11px;fill:none;stroke:#333;stroke-width:2.6;stroke-linecap:round}
.sel-list button:hover{background:var(--redF)}.sel-list button:hover svg{stroke:#fff}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#frm label{display:grid;gap:7px;align-content:start;font:600 12.5px/1 var(--sans);letter-spacing:.02em;color:#3d414a}
#frm label i{font-style:normal;color:var(--redT)}
#frm input,#frm textarea{font:400 16px/1.35 var(--sans);color:var(--ink);padding:13px 14px;border:0;border-radius:var(--r2);outline:0;background:#fff;width:100%;box-shadow:inset 0 0 0 1px var(--line2),0 1px 2px rgba(24,18,8,.04);transition:box-shadow .2s}
#frm textarea{resize:vertical;min-height:70px}
#frm input::placeholder,#frm textarea::placeholder{color:#9a9ea6}
#frm input:hover,#frm textarea:hover{box-shadow:inset 0 0 0 1px rgba(24,18,8,.3)}
#frm input:focus,#frm textarea:focus{box-shadow:inset 0 0 0 1.5px var(--redF),0 0 0 4px rgba(226,40,29,.12)}
#frm input.bad{box-shadow:inset 0 0 0 1.5px var(--redF),0 0 0 4px rgba(226,40,29,.12);background:#fff8f7;animation:shake .4s}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.err{color:var(--redD);font:600 14px/1.4 var(--sans);min-height:0}
.err:empty{display:none}
.err:not(:empty){padding:11px 14px;border-radius:var(--r2);background:#fff3f1;box-shadow:inset 0 0 0 1px rgba(226,40,29,.25)}
.send{width:100%}
.send[disabled]{opacity:.7;pointer-events:none}
.send.busy span::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.small{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;line-height:1.4;color:#6c707a;text-align:center}
.small svg{flex:none;width:14px;height:14px;fill:none;stroke:#6c707a;stroke-width:1.8;stroke-linecap:round}
.done{position:relative;padding:50px 32px 40px;text-align:center;overflow:hidden}
.done[hidden]{display:none}
.done-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ok-ic{position:relative;width:92px;height:92px;margin:0 auto 20px}
.ok-ic svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ok-ic circle{fill:var(--redF);stroke:var(--redF);transform-origin:26px 26px;animation:okPop .6s var(--e-spring) both}
.ok-ic path{stroke:#fff;stroke-width:3.4;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .35s var(--e-out) forwards}
@keyframes okPop{from{transform:scale(0)}to{transform:scale(1)}}
.done h3{position:relative;font:700 38px/1 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em;margin-bottom:12px}
.done p{position:relative;color:#4d515b;margin:0 auto 26px;max-width:420px}

/* =====================================================================
   MÓVIL
   ===================================================================== */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{height:clamp(300px,62vw,460px);margin-top:10px}
  .sec-top{grid-template-columns:1fr;gap:22px}
  .steps{justify-self:start}
}
@media (max-width:720px){
  :root{--hh:58px}
  .top{gap:10px}
  .top-nav a:nth-child(3){display:none}
  .top-nav a{padding:9px 10px;font-size:13.5px}
  .top-sel .lbl{display:none}
  .hero{padding:calc(var(--hh) + 34px) 0 72px;min-height:0}
  .hero h1{font-size:clamp(50px,15.2vw,84px)}
  .kick{font-size:10.5px;letter-spacing:.14em;gap:9px;margin-bottom:20px}
  .lead{margin:22px 0 22px}
  .trust{margin-bottom:28px}
  .trust li{font-size:12.5px;padding:8px 12px 8px 9px}
  .hero-cta{gap:18px}
  .hero-count b{font-size:38px}
  .scroll-cue{display:none}
  .sec{padding:76px 0 64px}
  .steps{flex-direction:column;width:100%;gap:0}
  .steps li{padding:9px 10px}
  .steps li+li{border-left:0;border-top:1px solid var(--line)}
  .tools{gap:8px;padding-top:10px;padding-bottom:10px}
  .search{width:44px;padding:0 12px;cursor:text}
  .search input::placeholder{color:transparent}
  .search:focus-within,.search.has{width:100%;flex:1 0 100%}
  .tools:has(.search:focus-within) .chips,.tools.qon .chips{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{border-radius:16px}.card .ph{border-radius:16px 16px 0 0;padding:8%}
  .card .tx{padding:4px 11px 12px;gap:9px}
  .card h3{font-size:14.5px}
  .card .bd{display:none}
  .card .tag{font-size:8.5px;padding:6px 11px 6px 9px;top:10px;letter-spacing:.1em}
  .card .ori{font-size:9.5px;left:8px;bottom:7px;padding:4px 6px}
  .ok{opacity:1;transform:scale(1);width:28px;height:28px;right:8px;top:8px}
  .pick{height:40px;font-size:12.5px;border-radius:12px}
  .reel{padding:80px 0}
  .reel-row{--rw:150px}
  .list{columns:1}
  .lg h4{font-size:19px}
  .f2{grid-template-columns:1fr}
  .dlg{padding:0;place-items:end stretch}
  .dlg-box{width:100%;border-radius:24px 24px 0 0;max-height:94dvh;animation:sheetIn .5s var(--e-out) both}
  @keyframes sheetIn{from{transform:translate3d(0,100%,0)}to{transform:none}}
  .dlg-head{padding:26px 22px 22px}.dlg-head h3{font-size:28px}
  #frm{padding:20px 22px calc(24px + env(safe-area-inset-bottom))}
  .fab{left:12px;right:12px;transform:none;bottom:max(12px,env(safe-area-inset-bottom))}
  .fab.show{animation:fabIn2 .55s var(--e-spring) both}
  @keyframes fabIn2{from{opacity:0;transform:translateY(110px)}to{opacity:1;transform:none}}
  .fab-go{flex:1;justify-content:center;height:56px;padding:0 14px 0 8px;font-size:15px}
  .fab-go .fab-t{flex:1;text-align:left}
  .fab-th img{width:36px;height:36px}
  .foot-in{flex-direction:column;text-align:center;align-items:center}
  .pv{display:none}
  #lista .sec-h{margin-bottom:32px}
}
@media (max-width:560px){.in-line{flex-wrap:wrap;justify-content:center;gap:6px 10px;white-space:normal;max-width:92vw;letter-spacing:.16em;font-size:10.5px;text-align:center}}
@media (max-width:400px){.logo span{display:none}.fab-th img+img+img{display:none}}
@media (hover:none){.card:hover{box-shadow:0 0 0 1px var(--line),var(--sh1)}.card::after{display:none}.card:hover .stg img.ld{transform:none}}

/* =====================================================================
   MOVIMIENTO REDUCIDO
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ft-in,.bdg-ring{animation:none!important}
  #intro{display:none!important}
  .hx,.rv,.card.rv,.ft,.art-badge{opacity:1!important;transform:none!important}
  .hero h1 .ln>span{transform:none!important}
  .hero h1 .slash path{stroke-dashoffset:0}
}

/* intro movil: rotulo en dos lineas, cada palabra a ~70 % del ancho */
@media (max-width:720px){
  .in-plate{width:90vw}
  .pl-main{flex-direction:column;align-items:center;gap:.04em;font-size:min(19.4vw,15vh)}
  .pl-main strong{letter-spacing:.03em}
  .in-plate small{letter-spacing:.24em;font-size:9px}
}