:root{
    --bg:#0c0c0c; --bg-2:#121212; --surface:#171717; --line:#222;
    --text:#f1ede4; --text-soft:#a8a39a; --muted:#6e6a64;
    --red:#e02315; --red-deep:#9c1209; --red-glow:rgba(224,35,21,.4);
    --cream:#f1ede4;
--cyan:#1fb6d8;
--paper:#ece5d4;
--container:1320px;
--ease:cubic-bezier(.6,.05,.2,1);
--out:cubic-bezier(.16,1,.3,1);
--card-radius:15px;
--media-radius:10px;
--surface-card:#111110;
--line-card:rgba(241,237,228,.11);
--line-soft-card:rgba(241,237,228,.065);

  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  @media (hover:hover) and (pointer:fine){
    .cursor{position:fixed;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--cream);pointer-events:none;z-index:10000;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease)}
    .cursor.hover{width:50px;height:50px}
  }

  /* LOADER */
  .loader{position:fixed;inset:0;background:#000;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .loader-text{font-family:'Anton',sans-serif;font-size:clamp(48px,11vw,160px);letter-spacing:.02em;color:var(--cream);line-height:1;display:flex;gap:0}
  .loader-letter{display:inline-block;overflow:hidden;height:1em}
  .loader-letter span{display:block;transform:translateY(110%)}
  .loader-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:#1a1a1a}
  .loader-bar span{display:block;width:100%;height:100%;background:var(--red);transform-origin:left;transform:scaleX(0)}
  .loader-meta{position:absolute;top:30px;left:30px;font-size:11px;letter-spacing:.3em;color:#666;text-transform:uppercase}
  .loader-meta-r{position:absolute;top:30px;right:30px;font-size:11px;letter-spacing:.3em;color:#666;text-transform:uppercase}
  /* Contador grande de la esquina inferior derecha: números en Fraunces
     itálica roja, % en gris suave y más chico. tabular-nums para que el
     número no baile al cambiar de dígitos. */
  .loader-count{position:absolute;bottom:22px;right:30px;font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:clamp(64px,10vw,128px);line-height:1;display:flex;align-items:baseline;pointer-events:none}
  .loader-count .num{color:var(--red);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .loader-count .pct{color:var(--text-soft);font-size:.42em;margin-left:.08em}
  @media (max-width:700px){
    .loader-count{bottom:18px;right:20px;font-size:clamp(56px,17vw,84px)}
    .loader-meta{top:22px;left:20px}
    .loader-meta-r{top:22px;right:20px}
  }

  /* NAV */
  nav.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:22px 32px;transition:padding .35s var(--ease),background .35s var(--ease),backdrop-filter .35s}
  nav.top.scrolled{padding:14px 32px;background:rgba(12,12,12,.7);backdrop-filter:blur(18px);border-bottom:1px solid rgba(241,237,228,.06)}
  .brand{display:flex;align-items:center;gap:12px;font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.08em}
  .brand-mark{width:26px;height:26px;border:1.5px solid var(--cream);position:relative;border-radius:50%;display:flex;align-items:center;justify-content:center}
  .brand-mark::after{content:"";width:8px;height:8px;background:var(--red);border-radius:50%}
  .brand-italic{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:18px;color:var(--text-soft);margin-left:-4px}
  .nav-links{display:flex;gap:36px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
  .nav-links a{position:relative;padding:6px 0;color:var(--text-soft);transition:color .25s}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--red);transition:width .35s var(--ease)}
  .nav-links a:hover{color:var(--cream)}
  .nav-links a:hover::after{width:100%}
  .nav-right{display:flex;gap:14px;align-items:center}
  .cart-btn{display:flex;align-items:center;gap:10px;border:1px solid rgba(241,237,228,.18);padding:10px 18px;border-radius:999px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;transition:all .25s}
  .cart-btn:hover{background:var(--cream);color:#000;border-color:var(--cream)}
  .cart-btn .count{background:var(--red);color:var(--cream);border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
  .burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;background:#1a1a1a}

  /* MENU MOVIL */
  .mobile-menu{position:fixed;inset:0;background:#0a0a0a;z-index:150;transform:translateX(100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;padding:90px 28px 40px}
  .mobile-menu.open{transform:translateX(0)}
  .mm-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;background:#1a1a1a;display:flex;align-items:center;justify-content:center}
  .mm-links{display:flex;flex-direction:column;gap:6px;margin-top:20px}
  .mm-links a{font-family:'Anton',sans-serif;font-size:38px;text-transform:uppercase;letter-spacing:.01em;padding:8px 0;border-bottom:1px solid var(--line);color:var(--cream);display:flex;justify-content:space-between;align-items:center}
  .mm-links a span{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--red)}
  .mm-foot{margin-top:auto;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

   /* HERO */
  .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:140px 28px 110px;background:#0a0a0a}

    .hero-blob-wrap{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);width:min(640px,82vw);height:min(640px,82vw);z-index:3;pointer-events:none;mix-blend-mode:difference}
    
  .hero-blob-wrap svg{width:100%;height:100%;animation:blobRotate 34s linear infinite;overflow:visible}
  @keyframes blobRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  .hero-blob-wrap path{fill:var(--red)}
  .hero-glow{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);width:min(680px,88vw);height:min(680px,88vw);border-radius:50%;background:radial-gradient(circle,rgba(224,35,21,.28),transparent 64%);filter:blur(75px);z-index:0;animation:glowPulse 7s ease-in-out infinite}

  /* TELA DIGITAL: entre el glow (z0) y la retícula/contenido (z1+).
     El canvas se renderiza a resolución interna reducida y aquí se
     estira a pantalla completa: el blur del estiramiento es parte
     del look soft-focus. Arranca invisible; 10-hero-cloth.js le da
     opacity 1 en enter() (el aironazo del loader). */
  #heroCloth{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
  @keyframes glowPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.1);opacity:1}}

  .hero::before{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(241,237,228,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(241,237,228,.03) 1px,transparent 1px);background-size:90px 90px;mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);pointer-events:none}
  .hero::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse 72% 58% at center,transparent 38%,rgba(10,10,10,.6) 100%);pointer-events:none}

      .hero-content{position:relative;z-index:2;text-align:center;max-width:1100px}
  /* "intensidad" queda DEBAJO del blob (z-index:2). El blob en difference la pinta cian */
  .hero h1 .line.below{position:relative;z-index:2}
  /* estas líneas van ENCIMA del blob (z-index:5): siempre blancas, intactas */
  .hero h1 .line.above{position:relative;z-index:5}
  
    

  .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--text-soft);margin-bottom:40px;font-weight:600}
  .hero-eyebrow::before,.hero-eyebrow::after{content:"";width:28px;height:1px;background:var(--red);opacity:.7}

  .hero h1{font-family:'Anton',sans-serif;font-size:clamp(56px,14vw,210px);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
  .hero h1 .line{display:block;overflow:hidden;padding:0 0 .04em 0}
  .hero h1 .line>span{display:inline-block;will-change:transform}
  .hero h1 .solid{color:var(--cream)}
    
    /* "intensidad": roja normal, pero con una capa que la vuelve cian sobre el blob */
   .hero h1 .red{font-family:'Fraunces',serif;font-style:italic;font-weight:400;letter-spacing:-.04em}
   
    
  /* línea outline en EXCLUSION: sobre el blob rojo se invierte suave, sin cian feo */
  .hero h1 .outline{-webkit-text-stroke:1.6px var(--cream);color:transparent}

  /* DECK EDITORIAL — una pausa íntima después del titular monumental.
     La medida estrecha, el leading óptico y el peso 400 estabilizan el
     bloque sobre la atmósfera móvil sin convertirlo en texto de UI. */
  .hero-sub{
    margin:clamp(28px,4vh,42px) auto 0;
    max-inline-size:34rem;
    padding-inline:clamp(4px,1.6vw,18px);
    font-size:clamp(17px,1.45vw,20px);
    line-height:1.58;
    color:rgba(241,237,228,.9);
    font-weight:400;
    letter-spacing:-.006em;
    text-wrap:balance;
    text-shadow:0 1px 18px rgba(0,0,0,.28);
  }
  .hero-sub .accent{
    color:#f06458;
    font-family:'Fraunces',Georgia,serif;
    font-style:italic;
    font-weight:600;
    font-size:1.08em;
    letter-spacing:-.018em;
  }
  /* La especificación es una pieza editorial independiente. Su layout no
     se anima: así el tracking nunca altera el ancho ni provoca reflow. */
  .hero-sub .fade{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(10px,1.6vw,18px);
    width:fit-content;
    max-width:100%;
    margin:clamp(20px,2.8vh,28px) auto 0;
    font-family:'Inter',Arial,sans-serif;
    font-size:clamp(9px,.72vw,11px);
    line-height:1.35;
    font-weight:600;
    letter-spacing:.265em;
    text-transform:uppercase;
    white-space:nowrap;
    color:rgba(241,237,228,.66);
    text-shadow:none;
  }
  .hero-sub .fade::before,
  .hero-sub .fade::after{
    content:"";
    flex:0 1 clamp(18px,4vw,54px);
    width:clamp(18px,4vw,54px);
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(224,35,21,.58));
  }
  .hero-sub .fade::after{transform:scaleX(-1)}
  /* Rotador de frases (js/12-microcopy.js): solo se anima el span
     interior, así las líneas decorativas del .fade no parpadean. */
  #heroPhrase{
    display:inline-block;
    opacity:1;
    filter:blur(0);
    transform:translateY(0);
    transition:opacity .45s ease,filter .45s ease,transform .45s ease;
  }
  #heroPhrase.is-swapping{
    opacity:0;
    filter:blur(3px);
    transform:translateY(4px);
  }
  @media (prefers-reduced-motion:reduce){
    #heroPhrase{transition:none}
  }

  /* Red de seguridad: si las fuentes remotas exceden el font gate, el hero
     usa una composición local fija en vez de aceptar un swap tardío. */
  .hero-font-fallback .hero h1{font-family:Impact,'Arial Narrow',sans-serif}
  .hero-font-fallback .hero h1 .red,
  .hero-font-fallback .hero-sub .accent,
  .hero-font-fallback .scroll-hint{font-family:Georgia,'Times New Roman',serif}
  .hero-font-fallback .hero-sub,
  .hero-font-fallback .hero-sub .fade,
  .hero-font-fallback .btn-hero{font-family:Arial,sans-serif}

  .hero-cta{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:min(100%,430px);
    margin:clamp(42px,6vh,62px) auto 0;
  }

           /* ====== BOTONES HERO — SHADER-LIKE (CSS+GSAP) ====== */
  @property --bh-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  @property --bh-fill{ syntax:'<percentage>'; inherits:false; initial-value:0%; }

  .btn-hero{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:58px;
    padding:17px clamp(22px,3vw,38px);
    border:1px solid transparent;
    border-radius:999px;
    overflow:hidden;
    isolation:isolate;
    contain:paint;
    font-weight:700;
    font-size:11px;
    line-height:1;
    letter-spacing:.19em;
    text-transform:uppercase;
    transition:transform .35s var(--out),border-color .4s var(--ease),color .45s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease);
  }

  /* Texto SIEMPRE nítido por encima de todas las capas */
  .btn-hero .txt{
    position:relative;z-index:4;display:inline-flex;align-items:center;gap:10px;
    transition:color .45s var(--ease);
    mix-blend-mode:normal;
    pointer-events:none;      /* el click siempre lo recibe el <a>, no el texto */
  }
  /* FLECHA EDITORIAL — SVG inline de trazo fino (1.2px) con cola
     larga: precisa y ligera, nada de glifo corporativo grueso */
  .i-arrow{display:inline-block;flex:none;overflow:visible}
  .btn-hero .txt .i-arrow{width:23px;height:10px;transition:transform .4s var(--ease)}
  .btn-hero:hover .txt .i-arrow{transform:translateX(6px)}

  /* CAPA 1 — liquid fill: plasma rojo que sube desde abajo */
  .btn-hero::before{
    content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
    background:
      radial-gradient(120% 140% at 50% 120%, var(--red) 0%, var(--red-deep) 55%, #5e0a04 100%),
      conic-gradient(from var(--bh-angle), var(--red), #ff5a3c, var(--red-deep), var(--red));
    background-blend-mode:overlay;
    clip-path:inset(calc(100% - var(--bh-fill)) 0 0 0 round 999px);
    transition:clip-path .5s var(--ease);
    pointer-events:none;
  }

  /* CAPA 2 — glow reactivo que sigue al cursor */
  .btn-hero::after{
    content:"";position:absolute;inset:-2px;z-index:2;border-radius:inherit;
    background:radial-gradient(180px 180px at var(--bh-mx,50%) var(--bh-my,50%),
              rgba(255,120,90,.55), transparent 60%);
    opacity:0;transition:opacity .4s var(--ease);pointer-events:none;mix-blend-mode:screen;
  }
  .btn-hero:hover::after{opacity:1}

  /* CAPA 3 — grain sutil */
  .btn-hero .bh-grain{
    position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
    opacity:.08;mix-blend-mode:overlay;transition:opacity .4s var(--ease);
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
    background-size:120px 120px;
  }
  .btn-hero:hover .bh-grain{opacity:.28}

  /* CAPA ripple — onda desde el click. SIEMPRE pointer-events:none y dentro del botón */
  .btn-hero .bh-ripple{
    position:absolute;z-index:3;border-radius:50%;
    pointer-events:none !important;       /* NUNCA bloquea clicks */
    background:radial-gradient(circle, rgba(255,255,255,.5), transparent 70%);
    mix-blend-mode:overlay;transform:translate(-50%,-50%) scale(0);
  }

  /* Activa el fill y el giro del plasma al hover */
  .btn-hero:hover{ --bh-fill:108%; }
  .btn-hero:hover::before{ animation:bhPlasma 6s linear infinite; }
  @keyframes bhPlasma{ to{ --bh-angle:360deg; } }

  /* En reposo los CTA ya tienen materialidad: papel entintado frente a
     placa oscura. El hover amplifica esa lógica; no la inventa. */
  .btn-hero.primary{
    color:#0a0a0a;
    background:linear-gradient(112deg,#fffaf0 0%,var(--cream) 52%,#d8d0c1 100%);
    border-color:rgba(255,255,255,.5);
    box-shadow:0 12px 30px rgba(0,0,0,.24),inset 0 0 0 1px rgba(10,10,10,.05);
  }
  .btn-hero.primary:hover{
    color:#0a0a0a;
    border-color:var(--red);
    box-shadow:0 16px 38px rgba(75,5,2,.32),0 0 36px rgba(224,35,21,.22);
  }

  .btn-hero.ghost{
    color:rgba(241,237,228,.9);
    background:linear-gradient(110deg,rgba(16,12,11,.7),rgba(43,15,12,.38));
    border-color:rgba(241,237,228,.26);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 10px 28px rgba(0,0,0,.16);
  }
  .btn-hero.ghost .txt::before{
    content:"";
    width:12px;
    height:1px;
    background:var(--red);
    box-shadow:4px 0 0 rgba(224,35,21,.28);
  }
  .btn-hero.ghost:hover{
    color:var(--cream);
    border-color:var(--red);
    box-shadow:0 14px 34px rgba(75,5,2,.3),0 0 32px rgba(224,35,21,.2);
  }

  /* Click: micro-squash solo en el texto */
  .btn-hero:active .txt{transform:scale(.96)}

  /* Foco visible */
  .btn-hero:focus-visible{outline:2px solid var(--cream);outline-offset:4px}

  /* Reduced motion */
  @media (prefers-reduced-motion:reduce){
    .btn-hero,.btn-hero::before,.btn-hero::after,.btn-hero .bh-grain{transition:none!important;animation:none!important}
    .btn-hero:hover::before{animation:none!important}
  }

  /* Móvil */
  @media (max-width:640px){
    .btn-hero:hover .bh-grain{opacity:0}
    .btn-hero::after{background:radial-gradient(120px 120px at var(--bh-mx,50%) var(--bh-my,50%),rgba(255,120,90,.45),transparent 60%)}
  }
  
  

  .scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:3;font-family:'Fraunces',serif;font-style:italic;text-transform:lowercase;font-size:13px;letter-spacing:.05em}
  .scroll-hint::after{content:"";width:1px;height:46px;background:linear-gradient(transparent,var(--red));animation:bounce 2s infinite}
  @keyframes bounce{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.6)}}

  @media (max-width:640px){
    .hero{padding:120px 22px 90px}
    .hero-blob-wrap{width:80vw;height:80vw;top:45%}
    .hero-glow{width:90vw;height:90vw;top:45%}
    .hero h1{font-size:clamp(46px,15vw,90px)}
    .hero-sub{
      max-inline-size:22rem;
      margin-top:clamp(26px,4.2vh,34px);
      padding-inline:6px;
      font-size:clamp(15.5px,4.2vw,17px);
      line-height:1.55;
    }
    .hero-sub .fade{
      margin-top:20px;
      font-size:clamp(8px,2.35vw,9.5px);
      letter-spacing:.2em;
    }
    .hero-sub .fade::before,
    .hero-sub .fade::after{display:none}
    .hero-cta{width:min(100%,410px);margin-top:clamp(36px,5.2vh,46px)}
    .btn-hero{min-height:54px;padding:16px 14px;font-size:10px;letter-spacing:.12em}
  }

  @media (max-width:380px){
    .hero-sub .fade{font-size:8px;letter-spacing:.16em}
    .hero-cta{gap:9px}
    .btn-hero{padding-inline:10px;font-size:9.5px;letter-spacing:.09em}
    .btn-hero.ghost .txt::before{display:none}
  }
  
  

  /* MARQUEE */
  .marquee{background:var(--cream);color:#0a0a0a;overflow:hidden;padding:22px 0;border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)}
  /* Sin gap en el track: el espacio entre copias vive DENTRO de cada span
     (padding-right). Así translateX(-50%) = exactamente una copia y el loop
     reinicia sin salto. */
  .marquee-track{display:flex;white-space:nowrap;width:max-content;animation:scroll 32s linear infinite;font-family:'Anton',sans-serif;font-size:32px;letter-spacing:.04em;text-transform:uppercase;align-items:center}
  .marquee-track > span{display:inline-flex;align-items:center;gap:50px;padding-right:50px}
  .marquee-track em{font-family:'Fraunces',serif;font-style:italic;font-weight:400;color:var(--red);text-transform:lowercase;font-size:34px}
  /* Mezclas tipográficas dentro de un mismo mensaje (petición de
     Alejandro): en algunos ítems —no todos— una palabra brinca al otro
     estilo. Dos direcciones:
     · em.mq-mixed b  → palabra en Anton negro DENTRO de una frase roja
       itálica ("pursuit YOUR dreams", "discipline is our RELIGION").
     · .mq-item em    → palabra en Fraunces roja DENTRO de un grito
       Anton ("HEAVY like YOU!!", "ARTISTIC and PRETTY"). */
  .marquee-track em.mq-mixed{text-transform:none}
  .marquee-track em.mq-mixed b{font-family:'Anton',sans-serif;font-style:normal;font-weight:400;color:#0a0a0a;text-transform:uppercase;font-size:32px;letter-spacing:.04em}
  /* "u are a MACHINE!!": el are va en Anton pero minúsculas (así lo
     escribió Alejandro) */
  .marquee-track em.mq-mixed b.mq-lc{text-transform:lowercase}
  /* AIR ’26 / ’26 LOOKS / mezclas: mantiene el mensaje como una unidad */
  .marquee-track .mq-item{white-space:nowrap;display:inline-flex;align-items:center;gap:14px}
  .marquee-track .star{display:inline-block;width:12px;height:12px;background:var(--red);border-radius:50%}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  section{padding:140px 28px;position:relative}
  .container{max-width:var(--container);margin:0 auto}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:70px;flex-wrap:wrap}
  .sec-title{font-family:'Anton',sans-serif;font-size:clamp(44px,7.5vw,110px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em}
  .sec-title .red{color:var(--red);font-family:'Fraunces',serif;font-style:italic;font-weight:400;letter-spacing:-.04em}
  .sec-title>span{display:block;overflow:hidden}
  .sec-title>span>span{display:inline-block}
  .sec-kicker{font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--red);margin-bottom:22px;display:flex;align-items:center;gap:12px;font-weight:500}
  .sec-kicker::before{content:"";width:36px;height:1px;background:var(--red)}
  .sec-desc{max-width:380px;color:var(--text-soft);line-height:1.7;font-weight:300;font-size:15px}
  .sec-desc em{font-family:'Fraunces',serif;font-style:italic;color:var(--cream)}
  /* énfasis duro dentro de descripciones: Anton en caja alta al mismo cuerpo
     de texto — los hechos del producto golpean; lo humano va en Fraunces */
  .sec-desc strong{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;color:var(--cream);letter-spacing:.06em;font-size:.94em}
  /* firma editorial: frase corta a tamaño normal en la voz Fraunces de la
     marca — sin cejillas ni adornos, el contraste tipográfico es el estilo */
  .sec-desc--signoff{font-family:'Fraunces',serif;font-style:italic;font-size:17px;color:var(--text-soft);letter-spacing:.01em}
  .sec-desc--signoff em{color:var(--cream);font-weight:600;font-size:1.12em;letter-spacing:-.01em}
  .sec-desc--signoff em::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-left:8px;vertical-align:.12em}
  /* año del drop pegado a la cejilla ("CATÁLOGO ’26"): misma línea, voz
     Fraunces itálica roja. Lo escribe js/12-microcopy.js solo, así nunca
     se queda viejo. */
  .sec-kicker .kicker-year{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--text-soft);font-size:13px;letter-spacing:.02em;margin-left:-6px}

  .cats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:60px}
  .cat-chip{padding:13px 24px;border:1px solid rgba(241,237,228,.14);border-radius:999px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft);transition:all .25s;font-weight:500;white-space:nowrap}
  .cat-chip:hover{border-color:var(--cream);color:var(--cream)}
  .cat-chip.active{background:var(--cream);border-color:var(--cream);color:#000}

  /* Móvil: los chips dejan de envolver (quedaban en filas de 2 con un
     hueco muerto a la derecha) y pasan a UNA fila deslizable de borde a
     borde — patrón estándar de tiendas móviles. Los márgenes negativos
     compensan el padding lateral de la sección (28px) para que la fila
     sangre hasta el filo de la pantalla, y el scroll-padding devuelve
     el aire al frenar. La máscara desvanece el filo derecho como pista
     de "hay más"; se corta sola al llegar al final gracias al overscroll
     del propio contenido. Sin scrollbar visible. */
  @media(max-width:700px){
    .cats{
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      margin-left:-28px;
      margin-right:-28px;
      padding-left:28px;
      /* > zona de máscara (44px): al llegar al final del scroll el
         último chip queda ANTES del desvanecido, nunca cortado */
      padding-right:52px;
      scroll-padding-left:28px;
      scroll-snap-type:x proximity;
      scrollbar-width:none;
      margin-bottom:48px;
      -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent);
      mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent);
    }
    .cats::-webkit-scrollbar{display:none}
    .cat-chip{
      flex-shrink:0;
      scroll-snap-align:start;
      padding:12px 20px;
    }
  }
  /* Chip de DROP DESTACADO (drops.featured, editable desde el panel):
     mismo esqueleto que los de tipo de prenda pero con acento rojo de
     marca, para que el drop que Alejandro quiere lucir se distinga. */
  .cat-chip--drop{border-color:rgba(224,35,21,.5);color:var(--red)}
  .cat-chip--drop:hover{border-color:var(--red);color:var(--red);background:rgba(224,35,21,.08)}
  .cat-chip--drop.active{background:var(--red);border-color:var(--red);color:var(--cream)}