/* ══════════════════════════════════════════
   TEAM DX · SHARED STYLES v2.0
   Negro / Grafito / Blanco / Vino
   Bebas Neue + Inter + Space Mono
══════════════════════════════════════════ */
:root{
  --black:#000000;--graphite:#161616;--graphite-hi:#202020;
  --edge:rgba(255,255,255,.09);--edge-hi:rgba(255,255,255,.18);
  --white:#F0EEE8;--white-dim:#8A8A86;--white-mute:#404040;
  --wine:#8B1E32;--wine-hi:#A52B42;
  --ff-d:'Bebas Neue',sans-serif;
  --ff-b:'Inter',sans-serif;
  --ff-m:'Space Mono',monospace;
  --t-micro:.65rem;--t-cap:.75rem;--t-sm:.875rem;--t-body:1rem;
  --t-blg:1.125rem;--t-h4:1.333rem;--t-h3:1.777rem;--t-h2:2.369rem;
  --t-h1:3.157rem;--t-disp:4.209rem;--t-xl:5.610rem;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --ease-cin:cubic-bezier(0.25,0,0.05,1);
  --ease-out:cubic-bezier(0.16,1,0.30,1);
  --ease-io:cubic-bezier(0.65,0,0.35,1);
  --hdr:68px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{font-family:var(--ff-b);font-size:var(--t-body);line-height:1.65;color:var(--white);background:var(--black);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--wine);color:var(--white)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E")}
.sh{max-width:1100px;margin:0 auto;padding:0 var(--s6)}
@media(max-width:680px){.sh{padding:0 var(--s5)}}
/* Typography */
.lbl{font-family:var(--ff-m);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--wine)}
.lbl-g{font-family:var(--ff-m);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--white-dim)}
.wine-rule{width:28px;height:1px;background:var(--wine);margin-bottom:var(--s5)}
/* Buttons */
.btn-wine{display:inline-flex;align-items:center;gap:var(--s3);padding:13px var(--s7);background:var(--wine);font-family:var(--ff-d);font-size:var(--t-sm);letter-spacing:.1em;color:var(--white);transition:background .45s var(--ease-out)}
.btn-wine:hover{background:var(--wine-hi)}
.btn-outline{display:inline-flex;align-items:center;gap:var(--s2);padding:9px var(--s5);border:1px solid var(--edge);font-family:var(--ff-m);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--white-dim);transition:border-color .4s,color .4s;white-space:nowrap}
.btn-outline:hover{border-color:var(--edge-hi);color:var(--white)}
.btn-wine-out{border-color:var(--wine);color:var(--wine)}
.btn-wine-out:hover{background:var(--wine);color:var(--white)}
.btn-ghost{font-family:var(--ff-m);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--white-dim);display:inline-flex;align-items:center;gap:var(--s2);transition:color .4s}
.btn-ghost:hover{color:var(--white)}
.btn-buy{display:flex;align-items:center;justify-content:center;gap:var(--s3);padding:18px var(--s8);background:var(--wine);font-family:var(--ff-d);font-size:var(--t-h4);letter-spacing:.1em;color:var(--white);cursor:pointer;border:none;width:100%;max-width:480px;margin:0 auto;transition:background .35s var(--ease-out)}
.btn-buy:hover{background:var(--wine-hi)}
/* Sections */
.sec{padding:var(--s9) 0;border-top:1px solid var(--edge)}
.bg-alt{background:var(--graphite)}
.bg-hi{background:var(--graphite-hi)}
.bg-black{background:var(--black)}
.sec-top{margin-bottom:var(--s8)}
.sec-h{font-family:var(--ff-d);font-size:clamp(2.2rem,5vw,var(--t-h1));letter-spacing:.04em;line-height:.95;color:var(--white);max-width:680px;margin-top:var(--s4)}
.sec-lead{margin-top:var(--s5);font-size:var(--t-sm);font-weight:300;color:var(--white-dim);max-width:460px;line-height:1.7}
/* Header */
header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--hdr);display:flex;align-items:center;transition:background .6s var(--ease-io),border-color .5s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(0,0,0,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--edge)}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo-link{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:6px 14px 6px 8px;background:rgba(255,255,255,.04);transition:border-color .3s}
.logo-link:hover{border-color:rgba(255,255,255,.32)}
.logo-img{height:44px;width:auto;transition:opacity .3s}
.logo-img:hover{opacity:.85}
.logo-wordmark{font-family:var(--ff-d);font-size:1.55rem;letter-spacing:.1em;color:var(--white);line-height:1}
.logo-wordmark em{font-style:normal;color:var(--wine)}
nav.desk{display:flex;align-items:center;gap:var(--s7)}
nav.desk a{font-family:var(--ff-b);font-size:var(--t-sm);font-weight:400;letter-spacing:.03em;color:var(--white-dim);position:relative;transition:color .4s}
nav.desk a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--white);transition:width .5s var(--ease-cin)}
nav.desk a:hover{color:var(--white)}
nav.desk a:hover::after{width:100%}
nav.desk a.active{color:var(--white)}
nav.desk a.active::after{width:100%}
.hdr-wa{font-family:var(--ff-m);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--white-dim);border:1px solid var(--edge);padding:7px var(--s4);display:flex;align-items:center;gap:var(--s2);transition:border-color .4s,color .4s}
.hdr-wa:hover{border-color:var(--wine);color:var(--white)}
.ham{display:none;flex-direction:column;gap:5px;width:24px;cursor:pointer;padding:4px 0}
.ham span{display:block;height:1px;background:var(--white);transition:transform .45s var(--ease-out),opacity .3s}
@media(max-width:860px){nav.desk,.hdr-wa.desk{display:none}.ham{display:flex}}
/* Mobile menu */
.mob{position:fixed;inset:0;z-index:999;background:var(--black);display:flex;flex-direction:column;justify-content:center;padding:var(--s9) var(--s6);opacity:0;pointer-events:none;transition:opacity .5s var(--ease-out)}
.mob.open{opacity:1;pointer-events:all}
.mob nav{display:flex;flex-direction:column;gap:var(--s2)}
.mob nav a{font-family:var(--ff-d);font-size:clamp(2rem,8vw,3.5rem);letter-spacing:.08em;color:var(--white-mute);padding-left:var(--s4);border-left:1px solid transparent;transition:color .3s,border-color .3s}
.mob nav a:hover{color:var(--white);border-left-color:var(--wine)}
.mob-foot{margin-top:var(--s8);font-family:var(--ff-m);font-size:var(--t-cap);letter-spacing:.08em;color:var(--white-mute)}
/* WA float */
.wa-float{position:fixed;bottom:var(--s6);right:var(--s6);z-index:900;font-family:var(--ff-m);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;background:var(--wine);color:var(--white);padding:10px var(--s5);display:flex;align-items:center;gap:var(--s2);transition:background .4s;border-radius:4px}
.wa-float:hover{background:var(--wine-hi)}
/* Progress bar */
#pb{position:fixed;top:0;left:0;height:1px;width:0;background:var(--wine);z-index:10001;transition:width .1s linear}
/* Footer */
footer{background:var(--graphite);border-top:1px solid var(--edge);padding:var(--s8) 0 var(--s7)}
.ft-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s7);align-items:start}
@media(max-width:680px){.ft-grid{grid-template-columns:1fr;gap:var(--s6)}}
.ft-logo-img{height:52px;width:auto;opacity:.9;margin-bottom:var(--s3)}
.ft-tag{font-size:var(--t-sm);font-weight:300;color:var(--white-dim);line-height:1.6}
.ft-col-t{font-family:var(--ff-m);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--wine);margin-bottom:var(--s4)}
.ft-links{display:flex;flex-direction:column;gap:var(--s3)}
.ft-links a{font-size:var(--t-sm);font-weight:300;color:var(--white-dim);transition:color .3s}
.ft-links a:hover{color:var(--white)}
.socials{display:flex;gap:var(--s3);margin-top:var(--s4)}
.soc{font-family:var(--ff-m);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;padding:5px var(--s3);border:1px solid var(--edge);color:var(--white-dim);transition:border-color .3s,color .3s}
.soc:hover{border-color:var(--wine);color:var(--white)}
.ft-bottom{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--edge);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3)}
.ft-legal{font-family:var(--ff-m);font-size:var(--t-micro);letter-spacing:.05em;color:var(--white-mute)}
/* Accessibility */
.skip-link{position:absolute;top:-100%;left:var(--s4);background:var(--wine);color:var(--white);padding:var(--s2) var(--s4);font-family:var(--ff-m);font-size:var(--t-sm);z-index:99999;border-radius:0 0 4px 4px}
.skip-link:focus{top:0}
*:focus-visible{outline:2px solid var(--wine);outline-offset:3px}