/* =====================================================================
   HOME oscura — branding de la campaña SAVAGE (brocha, trazos rojos, azul)
   ===================================================================== */
.brush{font-family:var(--brush);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.9}
.wide{font:700 11px/1.2 var(--body);font-stretch:120%;letter-spacing:.32em;text-transform:uppercase}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

body[data-page="home"]{background:var(--night);color:#fff}
body[data-page="home"] .nav{color:#fff}
body[data-page="home"] .nav::before{background:rgba(10,10,11,.72)}
body[data-page="home"] .nav.scrolled{border-color:#222}
body[data-page="home"] .nav .logo img{filter:none}
body[data-page="home"] .nav-links a::after{background:#fff}
body[data-page="home"] .icon-btn:hover{background:rgba(255,255,255,.1)}
body[data-page="home"] .nav.menu-open::before{background:var(--night)}
body[data-page="home"] .nav-links{background:var(--night)}
body[data-page="home"] .nav-links a{border-color:#222}
body[data-page="home"] .search{background:var(--night);border-color:#222}
body[data-page="home"] .search input{background:#1a1a1c;color:#fff}
body[data-page="home"] .foot{margin-top:0;border-top:1px solid #1c1c1c}

/* ---- hero ---- */
.hx{position:relative;overflow:hidden;isolation:isolate;min-height:calc(100svh - 100px);display:flex;flex-direction:column;background:var(--night)}
.hx-bg{position:absolute;inset:0;z-index:-2;background:url(/img/d71.webp) center/cover;opacity:.32;filter:grayscale(1) contrast(1.15);transform:scale(1.06);animation:slowzoom 20s ease-out forwards}
.hx::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(45% 55% at 78% 55%, rgba(47,107,255,.28), transparent 70%),
  radial-gradient(40% 50% at 18% 30%, rgba(225,37,27,.2), transparent 70%),
  linear-gradient(180deg, rgba(10,10,11,.2), var(--night) 96%)}
.slash{position:absolute;z-index:0;pointer-events:none;color:var(--red)}
.slash path{fill:currentColor}
.slash.s1{top:-4%;left:-8%;width:min(560px,58vw);transform:rotate(-28deg);opacity:.85}
.slash.s2{bottom:2%;right:-12%;width:min(620px,70vw);transform:rotate(-28deg);opacity:.8}
.hx-in{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center;
  max-width:1440px;width:100%;margin:0 auto;padding:clamp(28px,5vh,60px) var(--gut) clamp(24px,4vh,40px)}
.hx-meta{display:flex;justify-content:space-between;gap:16px;color:rgba(255,255,255,.62);margin-bottom:clamp(18px,4vh,40px)}
.hx-meta .live{display:flex;align-items:center;gap:10px;color:#fff}
.hx-meta .live i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}
.hx-drop{font-size:clamp(34px,4.6vw,70px);margin:0;color:#fff;transform:rotate(-3deg);transform-origin:left;animation:rise .9s var(--ease) both}
.hx-drop b{color:var(--red);font-weight:400}
.hx-title{position:relative;margin:.04em 0 0;font-size:clamp(92px,15vw,240px);color:#fff;transform:rotate(-5deg);transform-origin:left;
  text-shadow:0 10px 40px rgba(0,0,0,.6);animation:rise 1s .08s var(--ease) both;isolation:isolate}
.hx-title .underline{position:absolute;left:2%;right:-6%;bottom:-.06em;height:.2em;z-index:-1;color:var(--red)}
.hx-title .underline path{fill:currentColor}
.hx-lead{max-width:40ch;font-size:clamp(16px,1.35vw,19px);color:rgba(255,255,255,.78);margin:clamp(22px,4vh,40px) 0 26px;animation:rise 1s .18s var(--ease) both}
.hx-lead b{color:#fff}
.hx .ctas{display:flex;gap:12px;flex-wrap:wrap;animation:rise 1s .26s var(--ease) both}

/* selector de colores (estilo "elige tu colorway") */
.cw{position:relative;animation:rise 1.1s .2s var(--ease) both}
.cw-stage{position:relative;display:block;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#EDECE8,#D9D8D2);box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
.cw-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.07) contrast(1.03);transition:opacity .4s var(--ease),transform .7s var(--ease)}
.cw-stage img.out{opacity:0;transform:scale(.96)}
.cw-chip{position:absolute;left:14px;top:14px;z-index:2;background:var(--ink);color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px;display:flex;gap:10px;align-items:center}
.cw-chip span{color:rgba(255,255,255,.6);font-weight:600}
.cw-tag{position:absolute;right:14px;top:14px;z-index:2;background:var(--red);color:#fff;border-radius:999px;padding:8px 12px}
.cw-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;flex-wrap:wrap}
.swatches{display:flex;gap:12px}
.sw{width:40px;height:40px;border-radius:50%;padding:0;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:transform .2s var(--ease)}
.sw::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 2px transparent;transition:box-shadow .2s}
.sw:hover{transform:scale(1.08)}
.sw.on::after{box-shadow:0 0 0 2px #fff}
.cw-name{font:400 clamp(22px,2.2vw,30px)/1 var(--display);text-transform:uppercase}
.cw-links{display:flex;gap:20px;margin-top:12px;flex-wrap:wrap;font-weight:700}
.cw-links a{border-bottom:2px solid currentColor;padding-bottom:2px}
.cw-links a.blue{color:#7FA3FF}

/* franja de atributos (como en la campaña) */
.attrs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);max-width:1440px;width:100%;margin:0 auto 52px}
.attr{display:flex;gap:14px;align-items:center;padding:20px var(--gut);border-right:1px solid rgba(255,255,255,.12)}
.attr:last-child{border-right:0}
.attr svg{width:34px;height:34px;flex:none;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.attr b{display:block;font:800 13px/1.2 var(--body);font-stretch:110%;text-transform:uppercase;letter-spacing:.04em}
.attr small{display:block;color:#7FA3FF;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}

/* ticker con brocha */
.ticker.brushy{background:var(--red);transform:rotate(-2deg);margin-top:-14px}
.ticker.brushy .ticker-track{font-family:var(--brush);font-size:clamp(34px,4.4vw,60px);gap:46px;padding:4px 0}
.ticker.brushy .ticker-track .o{-webkit-text-stroke:0;color:var(--ink)}

/* secciones sobre oscuro */
.dark .eyebrow.muted,.dark .muted{color:#8d8d8d}
.dark .card-info h3,.dark .card-info .price{color:#fff}
.dark .card-info .cat{color:#8d8d8d}
.dark .round{background:#1b1b1d;color:#fff}
.dark .round:hover{background:#2a2a2d}
.dark .link-u{color:#fff}
.dark .tile{box-shadow:0 0 0 1px #1d1d1f}
.dark .split .copy{background:#141416;box-shadow:0 0 0 1px #222}
.dark .team,.dark .kids{box-shadow:0 0 0 1px #222}
.dark .sec-head h2 .brush{color:var(--red);font-size:.78em;display:inline-block;transform:rotate(-4deg);margin-left:.15em}
.manifesto.dark p .w{opacity:.16}
.manifesto.dark p .w.on{opacity:1}

/* campaña */
.camp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px);align-items:center}
.camp-art{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px #222}
.camp-art img{width:100%;height:auto;display:block}
.camp-copy h2{font-size:clamp(56px,7vw,112px);margin:12px 0 20px;transform:rotate(-3deg);transform-origin:left}
.camp-copy h2 em{font-style:normal;color:var(--blue)}
.camp-copy p{color:rgba(255,255,255,.75);font-size:17px;max-width:44ch;margin:0 0 22px}
.camp-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:0 0 26px}
.camp-colors a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#141416;box-shadow:0 0 0 1px #242427;font-weight:700;font-size:14px;transition:background .2s}
.camp-colors a:hover{background:#1d1d20}
.camp-colors i{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.camp-colors small{margin-left:auto;color:#8d8d8d;font-weight:600}

@media (max-width:960px){
  .hx-in{grid-template-columns:1fr}
  .cw{max-width:520px;width:100%}
  .attrs{grid-template-columns:1fr 1fr}
  .attr:nth-child(2){border-right:0}
  .attr:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
  .camp{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hx-meta .wide:last-child{display:none}
  .hx-title{font-size:clamp(84px,27vw,140px)}
  .attr{padding:16px}
  .attr svg{width:28px;height:28px}
  .sw{width:34px;height:34px}
  .cw-tag{display:none}
}