:root{
  --rojo:#d00b2b;
  --rojo-osc:#8f0719;
  --naranja:#ff9a1f;
  --amarillo:#ffd23f;
  --tinta:#1b1214;
  --gris:#5d5155;
  --crema:#fff6ec;
  --blanco:#fff;
  --wa:#25d366;
  --titulo:'Barlow Condensed',Impact,sans-serif;
  --texto:'Space Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:116px}
body{font-family:var(--texto);color:var(--tinta);background:var(--blanco);line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--titulo);font-style:italic;font-weight:800;line-height:.95;text-transform:uppercase}
h2{font-size:clamp(40px,7vw,72px);margin-bottom:24px}
h2 em,h1 em{color:var(--rojo);font-style:italic}

/* Botones */
.btn{display:inline-block;background:var(--rojo);color:#fff;font-weight:700;font-size:15px;text-decoration:none;padding:14px 34px;border-radius:30px;transition:transform .25s var(--ease),background .25s;border:2px solid var(--rojo)}
.btn:hover{background:var(--rojo-osc);border-color:var(--rojo-osc);transform:translateY(-2px)}
.btn-sm{padding:10px 22px;font-size:13px}
.btn-ghost{background:transparent;color:var(--tinta);border-color:var(--tinta);margin-left:10px}
.btn-ghost:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* Barra superior */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:6px 20px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.brand img{height:54px;width:auto}
.chips{position:sticky;top:66px;z-index:29;background:var(--rojo)}
.chips-in{display:flex;gap:8px;overflow-x:auto;padding:10px 20px;justify-content:center;scrollbar-width:none}
.chips-in::-webkit-scrollbar{display:none}
.chips a{flex:none;color:#fff;text-decoration:none;font-family:var(--titulo);font-style:italic;font-weight:800;text-transform:uppercase;font-size:17px;letter-spacing:.03em;padding:4px 16px;border-radius:30px;border:2px solid rgba(255,255,255,.55);transition:background .2s,color .2s}
.chips a:hover,.chips a.on{background:#fff;color:var(--rojo);border-color:#fff}

/* Hero */
.hero{background:linear-gradient(135deg,var(--amarillo) 0%,var(--naranja) 45%,var(--rojo) 100%);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 55%,rgba(255,255,255,.35),transparent 45%);pointer-events:none}
.hero-in{position:relative;z-index:1;width:min(1160px,100% - 40px);margin-inline:auto;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:20px;min-height:560px;padding:48px 0}
.tag{display:inline-block;background:var(--rojo);color:#fff;font-family:var(--titulo);font-style:italic;font-weight:800;text-transform:uppercase;font-size:20px;padding:4px 18px;margin-bottom:18px;transform:skew(-8deg)}
.hero h1{font-size:clamp(64px,11vw,148px);color:var(--tinta);margin-bottom:20px}
.hero h1 em{color:#fff;-webkit-text-stroke:0;text-shadow:4px 4px 0 var(--rojo-osc)}
.hero p{max-width:460px;font-size:18px;margin-bottom:26px;color:var(--tinta);font-weight:500}
.hero-joe{width:100%;max-width:520px;margin-inline:auto;filter:drop-shadow(0 24px 30px rgba(80,0,10,.35));animation:flota 4s ease-in-out infinite}
@keyframes flota{50%{transform:translateY(-14px) rotate(-2deg)}}

/* Por qué */
.porque{background:var(--crema);padding:90px 0}
.porque-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
.porque-joe{max-width:380px;margin-inline:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.2))}
.callout{padding:18px 0 18px 22px;border-left:5px solid var(--rojo);margin-bottom:12px}
.new{display:inline-block;background:var(--rojo);color:#fff;font-family:var(--titulo);font-style:italic;font-weight:800;text-transform:uppercase;font-size:14px;padding:1px 10px;margin-bottom:6px;transform:skew(-8deg)}
.callout h3{font-size:clamp(26px,4vw,34px);margin-bottom:4px}
.callout p{color:var(--gris);max-width:480px}

/* Catálogo */
.linea{padding:80px 0 40px}
.linea:nth-of-type(even){background:var(--crema)}
.linea-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.linea-head h2{margin-bottom:0;font-size:clamp(52px,10vw,110px)}
.linea-head p{font-family:var(--titulo);font-style:italic;font-weight:700;font-size:clamp(20px,3vw,28px);color:var(--rojo);text-transform:uppercase}
/* Buscador */
.buscador{padding:40px 0 0}
.buscador label{display:block;font-family:var(--titulo);font-style:italic;font-weight:800;text-transform:uppercase;font-size:26px;margin-bottom:10px}
.buscador input{width:100%;max-width:520px;font:inherit;font-size:17px;padding:14px 22px;border-radius:30px;border:2px solid var(--tinta);background:#fff}
.buscador input:focus{outline:3px solid var(--naranja);outline-offset:2px}
#resultados{padding:30px 0 40px}
.res-n{font-weight:700;margin-bottom:18px}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:30px 20px}

/* Bandas que corren */
.banda{margin-top:44px}
.banda-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--tinta);padding-bottom:6px}
.banda-t h3{font-size:clamp(26px,4vw,38px)}
.banda-t span{font-size:13px;font-weight:700;color:var(--rojo);text-transform:uppercase;letter-spacing:.06em}
.banda-cuerpo{position:relative}
.js-corre .carril{animation:none;will-change:transform}
.flecha{position:absolute;top:70px;z-index:4;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--rojo);box-shadow:0 6px 18px rgba(60,0,10,.28);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transform:scale(.85);transition:opacity .25s,transform .25s var(--ease),background .2s,color .2s}
.flecha.izq{left:6px}
.flecha.izq svg{transform:rotate(180deg)}
.flecha.der{right:6px}
.banda-cuerpo:hover .flecha,.banda-cuerpo:focus-within .flecha{opacity:1;pointer-events:auto;transform:none}
.flecha:hover{background:var(--rojo);color:#fff}
.flecha:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}
@media (hover:none),(prefers-reduced-motion:reduce){.flecha{display:none}}
.pista{overflow:hidden;touch-action:pan-y;padding:26px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.carril{display:flex;width:max-content;animation:corre var(--dur,60s) linear infinite;animation-direction:reverse}
.banda.inv .carril{animation-direction:normal}
.pista:hover .carril,.pista:focus-within .carril{animation-play-state:paused}
.grupo{display:flex;gap:38px;padding-right:38px}
@keyframes corre{to{transform:translateX(-50%)}}

/* Zapato flotando */
.zapato{flex:none;width:250px;background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0}
.foto{width:100%;height:150px;display:grid;place-items:center;position:relative}
.foto::after{content:"";position:absolute;left:14%;right:14%;bottom:2px;height:12px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(60,0,10,.28),transparent 70%);transition:transform .5s var(--ease),opacity .5s}
.foto img{position:relative;z-index:1;max-width:100%;max-height:136px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(60,0,10,.25));transform:rotate(-4deg);transition:transform .5s var(--ease)}
.zapato:hover .foto img,.zapato:focus-visible .foto img{transform:translateY(-12px) rotate(-8deg) scale(1.06)}
.zapato:hover .foto::after{transform:scale(.8);opacity:.6}
.zapato:focus-visible{outline:3px solid var(--naranja);outline-offset:6px;border-radius:12px}
.zapato b{font-family:var(--titulo);font-style:italic;font-weight:800;font-size:30px;line-height:1;margin-top:10px}
.zapato small{font-size:13px;color:var(--gris);text-transform:capitalize}

/* Lista completa */
.buscador-fila{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.buscador-fila input{flex:1 1 280px}
.grande{margin:auto}
.grande[open]{display:block;width:min(1180px,calc(100% - 24px));max-height:calc(100% - 24px);padding:0;background:var(--crema);overflow-x:hidden;overscroll-behavior:contain}
.todos-top{position:sticky;top:0;z-index:3;background:var(--crema);padding:18px 24px 12px;border-bottom:2px solid var(--tinta)}
.todos-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.todos-cab h3{font-size:clamp(32px,5vw,48px)}
.todos-cab h3 span{color:var(--rojo)}
.todos-cab .cerrar{position:static;flex:none}
.todos-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.todos-chips::-webkit-scrollbar{display:none}
.todos-chips button{flex:none;font:inherit;font-weight:700;font-size:14px;padding:7px 16px;border-radius:30px;border:2px solid var(--tinta);background:#fff;color:var(--tinta);cursor:pointer;transition:background .2s,color .2s}
.todos-chips button:hover{background:var(--amarillo)}
.todos-chips button.on{background:var(--rojo);border-color:var(--rojo);color:#fff}
.todos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;padding:22px 24px 30px}
.todos-grid .tarjeta{width:auto;min-width:0;background:#fff;border-radius:18px;padding:14px 10px 16px;box-shadow:0 6px 22px rgba(60,0,10,.10);transition:transform .35s var(--ease),box-shadow .35s}
.tarjeta:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(60,0,10,.18)}
.tarjeta .foto{height:120px}
.tarjeta .foto img{max-height:104px}
.tarjeta b{font-size:26px;margin-top:6px}

/* Ficha */
.talla{display:inline-block;background:var(--rojo);color:#fff;font-family:var(--titulo);font-style:italic;font-weight:800;text-transform:uppercase;font-size:15px;padding:1px 12px;margin-bottom:8px;transform:skew(-8deg)}
dialog{margin:auto;border:0;border-radius:22px;padding:0;width:min(760px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
body.modal-abierto{overflow:hidden}
dialog{overscroll-behavior:contain}
dialog::backdrop{background:rgba(27,18,20,.72)}
dialog[open]{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:10px;padding:26px;position:fixed}
.cerrar{position:absolute;top:10px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--tinta);color:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:2}
.ficha-img{background:linear-gradient(160deg,#fff1de,#ffd9a8);border-radius:16px;padding:20px;display:grid;place-items:center;min-height:240px}
.ficha-img img{max-width:100%;max-height:300px;filter:drop-shadow(0 16px 14px rgba(60,0,10,.3))}
.ficha-txt{padding:10px 8px}
.ficha-txt h3{font-size:clamp(40px,6vw,56px);margin-bottom:12px}
.ficha-datos{list-style:none;margin-bottom:22px;display:grid;gap:8px}
.ficha-datos li{font-size:17px;font-weight:500}
.ficha-datos span{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo)}

/* Mayoreo */
.mayoreo{padding:90px 0;background:var(--rojo);color:#fff}
.mayoreo h2 em{color:var(--amarillo)}
.mayoreo-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.pasos{list-style:none;margin-bottom:30px;display:grid;gap:14px}
.pasos li{display:flex;gap:16px;align-items:center;font-size:18px}
.pasos b{flex:none;width:44px;height:44px;border-radius:50%;background:var(--amarillo);color:var(--tinta);display:grid;place-items:center;font-family:var(--titulo);font-style:italic;font-size:26px}
.mayoreo .btn{background:#fff;color:var(--rojo);border-color:#fff}
.mayoreo .btn:hover{background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)}
.estados-t{font-size:30px;margin:44px 0 14px}
.estados{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.estados li{background:rgba(255,255,255,.15);padding:6px 16px;border-radius:30px;font-size:14px;font-weight:500}
.mayoreo-joe{max-width:340px;margin-inline:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.3))}

/* Nosotros y contacto */
.nosotros{padding:90px 0;background:var(--crema)}
.nosotros-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:50px;align-items:center}
.nosotros-grid img{max-width:340px;margin-inline:auto}
.nosotros p{font-size:19px;color:var(--gris);margin-bottom:16px;max-width:560px}
.contacto{padding:90px 0}
.contacto-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:center}
.contacto-grid img{max-width:300px;margin-inline:auto}
.contacto p{font-size:19px;color:var(--gris);margin-bottom:20px}
.datos{list-style:none;margin-bottom:28px;display:grid;gap:12px}
.datos li{display:flex;flex-direction:column;min-width:0}
.datos span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo)}
.datos a{font-size:20px;text-decoration:none;font-weight:500;overflow-wrap:anywhere}
.datos a:hover{color:var(--rojo)}
footer{background:var(--tinta);color:#fff;padding:36px 20px;text-align:center;font-size:13px}
footer img{height:60px;margin:0 auto 12px;background:#fff;border-radius:14px;padding:4px 10px}

/* WhatsApp flotante */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;width:58px;height:58px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .25s var(--ease)}
.wa-float:hover{transform:scale(1.1)}

/* Aparecer al hacer scroll */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-joe{animation:none}html{scroll-behavior:auto}}
@media (prefers-reduced-motion:reduce){.pista{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}.pista::-webkit-scrollbar{display:none}.carril{animation:none}.grupo[aria-hidden]{display:none}.zapato{scroll-snap-align:center}}

@media (max-width:820px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-areas:"tag tag" "titulo joe" "texto texto" "botones botones";gap:0 6px;align-items:center;min-height:0;text-align:left;padding:24px 0 30px}
  .hero-txt{display:contents}
  .hero .tag{grid-area:tag;justify-self:start;font-size:16px;margin-bottom:14px}
  .hero h1{grid-area:titulo;font-size:clamp(40px,12.2vw,64px);margin-bottom:0}
  .hero h1 em{text-shadow:3px 3px 0 var(--rojo-osc)}
  .hero-joe{grid-area:joe;width:122%;max-width:none;justify-self:end;margin:-8px -14px -4px 0}
  .hero p{grid-area:texto;max-width:none;font-size:16px;margin:16px 0 20px}
  .hero-btns{grid-area:botones;display:flex;flex-wrap:wrap;gap:10px}
  .hero-btns .btn{padding:13px 26px}
  .btn-ghost{margin:0}
  .porque-grid,.mayoreo-grid,.nosotros-grid,.contacto-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .porque-joe,.mayoreo-joe,.nosotros-grid img,.contacto-grid img{width:min(100%,210px)}
  .porque,.mayoreo,.nosotros,.contacto{padding:60px 0}
  .linea{padding:56px 0 24px}
  .chips-in{justify-content:flex-start}
  .zapato{width:200px}
  .foto{height:124px}
  .foto img{max-height:110px}
  dialog[open]{grid-template-columns:minmax(0,1fr);padding:18px}
  .grande[open]{padding:0}
  .todos-top{padding:14px 16px 10px}
  .todos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}
  .todos-grid .tarjeta{padding:10px 6px 14px}
  .todos-grid .foto{height:104px}
  .todos-grid .foto img{max-height:92px}
  .todos-grid b{font-size:24px}
  .buscador-fila .btn{width:100%;text-align:center}
  .brand img{height:46px}
  .datos a{font-size:17px}
  .chips{top:58px}
}