/* ==========================================================================
   King Drip Shoop — hoja de estilos del tema
   Generada a partir del prototipo; no editar a mano, se regenera.
   ========================================================================== */

:root{
  --tinta:#fff;
  --font-d:'Archivo Black','Arial Black',Impact,sans-serif;
  --font-b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --c1:#ff4d1c;   /* color base del modelo activo */
  --c2:#7a1600;   /* sombra del degradado */
  --c3:#ffd6a0;   /* luz  */
  /* dorado de marca: lo usan la franja de avisos, el menu y las tarjetas */
  --oro:#e8b74d;
  --gold-hi:#ffe9a8;
  --negro:#070707;
}

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0}

body{background:#0a0a0a;color:var(--tinta);font-family:var(--font-b);
     -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ================= ESCENA ================= */
.hero{
  position:relative;width:100%;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(90% 62% at 50% 34%, var(--c3) 0%, var(--c1) 34%, var(--c2) 78%, #170500 100%);
  transition:background 1.3s var(--ease);
  padding-top:calc(56px + env(safe-area-inset-top));
}

/* textura de hormigon: da suciedad de calle al color plano */
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url('../img/textura.webp') center/cover repeat;
  mix-blend-mode:overlay;opacity:.32;
}

/* viñeta + grano */
.hero::after{
  content:'';position:absolute;inset:0;z-index:7;pointer-events:none;
  box-shadow:inset 0 0 200px 60px rgba(0,0,0,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ================= MENÚ SUPERIOR (cristal líquido) ================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  /* el cristal se funde con lo que tiene detrás en vez de taparlo */
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset;
  transition:background .45s var(--ease), border-color .45s ease, box-shadow .45s ease;
}

/* al bajar gana algo de cuerpo para que el texto no se pierda */
.nav.compacta{
  background:rgba(8,8,8,.52);
  border-bottom-color:rgba(255,255,255,.14);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.08) inset;
}

.nav__in{
  max-width:1360px;margin:0 auto;
  display:flex;align-items:center;gap:14px;
  padding:10px clamp(14px,3vw,30px);
  padding-top:calc(10px + env(safe-area-inset-top));
}

.nav__logo{
  flex:0 0 auto;display:inline-flex;align-items:baseline;gap:3px;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;text-decoration:none;white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}

.nav__logo sup{font-size:.6em;opacity:.5}

.nav__links{display:none;align-items:center;gap:clamp(14px,1.8vw,28px);margin-left:6px}

.nav__links a{
  position:relative;
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.82);text-decoration:none;white-space:nowrap;
  padding:4px 0;transition:color .22s ease;
}

.nav__links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--oro,#e8b74d);transition:right .3s var(--ease);
}

.nav__links a:hover{color:#fff}

.nav__links a:hover::after{right:0}

.nav__acc{margin-left:auto;display:flex;align-items:center;gap:8px}

/* --- buscador: cerrado por defecto, se abre sólo si lo piden --- */
.busca{
  display:flex;align-items:center;
  height:34px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  transition:width .42s var(--ease), background .3s ease, border-color .3s ease;
  width:34px;
}

.busca.abierta{width:min(58vw,260px);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}

.busca__b{
  flex:0 0 34px;width:34px;height:34px;
  display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:#fff;padding:0;
}

.busca__b svg{width:15px;height:15px}

.busca input{
  flex:1 1 auto;min-width:0;width:100%;
  background:transparent;border:0;outline:0;
  color:#fff;font-family:inherit;font-size:13px;
  padding:0 12px 0 0;
  opacity:0;pointer-events:none;transition:opacity .3s ease .1s;
}

.busca.abierta input{opacity:1;pointer-events:auto}

.busca input::placeholder{color:rgba(255,255,255,.55)}

/* ---- desplegable de categorias ---- */
.consub{position:relative}

.consub>a{display:inline-flex;align-items:center;gap:5px}

.consub>a svg{width:9px;height:9px;opacity:.7;transition:transform .3s var(--ease)}

.consub:hover>a svg{transform:rotate(180deg)}

.sub{
  position:absolute;top:calc(100% + 16px);left:-20px;
  width:min(74vw,720px);padding:22px 24px;
  background:rgba(10,10,10,.84);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.13);border-radius:16px;
  box-shadow:0 28px 64px -22px rgba(0,0,0,.85);
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px 24px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}

.consub:hover .sub,.consub:focus-within .sub{opacity:1;visibility:visible;transform:none}

.sub h4{margin:0 0 9px;font-size:9.5px;font-weight:800;letter-spacing:.19em;
        text-transform:uppercase;color:var(--oro)}

.sub a{display:block;padding:4.5px 0;font-size:12.5px;font-weight:500;
       letter-spacing:0;text-transform:none;color:rgba(255,255,255,.76);
       text-decoration:none;transition:color .18s,transform .18s}

.sub a::after{display:none}

.sub a:hover{color:#fff;transform:translateX(3px)}

.sub a i{opacity:.4;font-style:normal;font-size:.85em;margin-left:3px}

/* acordeon del panel movil */
.grupo>button{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.09);
  color:#fff;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;text-align:left}

.grupo>button svg{width:12px;height:12px;opacity:.6;transition:transform .3s var(--ease)}

.grupo.abierto>button svg{transform:rotate(180deg)}

.grupo__c{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}

.grupo.abierto .grupo__c{max-height:60vh;overflow-y:auto}

.grupo__c a{font-size:14px;font-weight:500;padding:9px 0 9px 12px;
  color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.055)}

.panel{max-height:100vh;overflow-y:auto}

/* ================= FRANJA DE AVISOS ================= */
.aviso{
  position:relative;z-index:4;overflow:hidden;
  background:linear-gradient(96deg,var(--gold-hi,#ffe9a8),var(--oro) 42%,#a9741d);
  border-top:1px solid rgba(0,0,0,.18);
  border-bottom:1px solid rgba(0,0,0,.18);
  box-shadow:0 12px 40px -14px rgba(232,183,77,.7);
}

.aviso__t{display:flex;width:max-content;animation:correAviso 34s linear infinite}

.aviso:hover .aviso__t{animation-play-state:paused}

@keyframes correAviso{to{transform:translateX(-50%)}}

.aviso__g{display:flex;flex:0 0 auto;align-items:center}

.aviso__i{
  display:inline-flex;align-items:center;gap:9px;
  padding:16px clamp(20px,2.8vw,38px);
  font-size:clamp(13.5px,1.75vw,17px);font-weight:800;
  letter-spacing:.015em;color:#150f03;white-space:nowrap;
}

.aviso__i svg{width:clamp(18px,2vw,22px);height:clamp(18px,2vw,22px);flex:0 0 auto;opacity:.85}

.aviso__s{width:5px;height:5px;border-radius:50%;background:rgba(21,15,3,.42)}

/* ============ SELECTOR DE IDIOMA ============ */
.lang{display:flex;gap:2px;padding:3px;border-radius:99px;flex:0 0 auto;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}

.lang__b{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:99px;
  font-size:10px;font-weight:800;letter-spacing:.07em;color:rgba(255,255,255,.62);
  text-decoration:none;white-space:nowrap;transition:background .22s,color .22s}

.lang__b::after{display:none!important}

.lang__b svg{width:15px;height:10px;border-radius:2px;flex:0 0 auto;display:block}

.lang__b:hover{color:#fff}

.lang__b.on{background:#fff;color:#141414}

.lang__b span{display:none}

@media (min-width:520px){ .lang__b span{display:inline} }

/* en el panel del movil va suelto y mas grande */
.panel .lang{margin:16px 0 4px;align-self:flex-start;width:max-content}

.panel .lang__b{padding:7px 13px;font-size:12px}

.panel .lang__b span{display:inline}

@media (prefers-reduced-motion:reduce){
  .aviso__t{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
}

/* ================= CATEGORIAS ================= */
.cats{background:#0b0b0b;padding:clamp(34px,6vw,72px) 0}

.cats__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.cats__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin:0 0 clamp(18px,2.6vw,30px);padding-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.1)}

.cats__eye{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.cats__eye i{display:block;width:20px;height:1px;background:var(--oro)}

.cats h2{font-family:var(--font-d);font-weight:400;font-size:clamp(26px,5vw,48px);
  line-height:.95;letter-spacing:-.025em;margin:0;text-transform:uppercase;color:#fff}

.cat{
  position:relative;display:block;border-radius:14px;overflow:hidden;
  background:#161616;text-decoration:none;color:inherit;
  aspect-ratio:1/1;isolation:isolate;
}

.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .8s var(--ease),filter .4s ease;
  filter:saturate(.9) brightness(.86)}

.cat:hover img{transform:scale(1.09);filter:saturate(1.03) brightness(.95)}

.cat::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 30%,
    rgba(0,0,0,.08) 58%,transparent 76%)}

.cat__pie{position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:clamp(11px,1.5vw,18px)}

.cat__n{display:block;font-family:var(--font-d);font-weight:400;
  font-size:clamp(14px,2vw,21px);line-height:1;letter-spacing:-.015em;
  text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7)}

.cat__c{display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--oro)}

.cat__c b{font-weight:800;color:#fff;opacity:.85}

/* flecha que aparece al pasar por encima */
.cat__f{position:absolute;z-index:2;top:10px;right:10px;width:30px;height:30px;
  border-radius:99px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);color:#fff;
  opacity:0;transform:translate(-4px,4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}

.cat:hover .cat__f{opacity:1;transform:none}

.cat__f svg{width:13px;height:13px}

.cats__pie{margin-top:clamp(16px,2.4vw,26px);text-align:center}

.cats__todo{display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;text-decoration:none;padding:.85em 1.6em;border-radius:99px;
  border:1px solid rgba(255,255,255,.26);transition:background .2s,color .2s}

.cats__todo:hover{background:#fff;color:#0a0a0a}

.cats__todo svg{width:13px;height:13px}

/* entrada escalonada */
.cat{opacity:0;transform:translateY(14px)}

.listo .cat{opacity:1;transform:none;
  transition:opacity .65s var(--ease),transform .65s var(--ease)}

.listo .cat:nth-child(1){transition-delay:.02s}

.listo .cat:nth-child(2){transition-delay:.06s}

.listo .cat:nth-child(3){transition-delay:.10s}

.listo .cat:nth-child(4){transition-delay:.14s}

.listo .cat:nth-child(5){transition-delay:.18s}

.listo .cat:nth-child(6){transition-delay:.22s}

.listo .cat:nth-child(7){transition-delay:.26s}

.listo .cat:nth-child(8){transition-delay:.30s}

@media (prefers-reduced-motion:reduce){ .cat{opacity:1;transform:none} }

/* ================= GARANTIAS ================= */
.gar{background:#070707;padding:clamp(34px,6vw,72px) 0}

.gar__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.gar__cab{margin:0 0 clamp(20px,3vw,34px);text-align:center}

.gar__eye{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.gar__eye i{display:block;width:20px;height:1px;background:var(--oro)}

.gar h2{font-family:var(--font-d);font-weight:400;font-size:clamp(25px,4.6vw,44px);
  line-height:.98;letter-spacing:-.025em;margin:0;text-transform:uppercase;color:#fff}

.gar h2 em{font-family:var(--font-b);font-style:italic;font-weight:900;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro) 52%,#a9741d);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.pilares{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.4vw,16px)}

@media (min-width:760px){ .pilares{grid-template-columns:repeat(3,1fr)} }

.pilar{
  position:relative;padding:clamp(20px,2.6vw,30px);border-radius:16px;
  background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.11);
  transition:border-color .3s ease,transform .3s var(--ease);
}

.pilar:hover{border-color:rgba(232,183,77,.4);transform:translateY(-3px)}

.pilar__i{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  margin:0 0 15px;color:#171102;
  background:linear-gradient(140deg,var(--gold-hi),var(--oro) 60%,#a9741d);
  box-shadow:0 8px 22px -8px rgba(232,183,77,.6);
}

.pilar__i svg{width:22px;height:22px}

.pilar h3{margin:0 0 7px;font-size:clamp(16px,1.9vw,19px);font-weight:800;
  letter-spacing:-.015em;color:#fff}

.pilar p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62)}

/* cifras reales */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,16px);
  margin-top:clamp(14px,2vw,22px)}

.cifra{padding:clamp(15px,2vw,22px) 12px;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}

.cifra b{display:block;font-family:var(--font-d);font-weight:400;
  font-size:clamp(22px,3.6vw,38px);line-height:1;letter-spacing:-.02em;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro) 55%,#a9741d);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.cifra span{display:block;margin-top:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ================= NOVEDADES ================= */
.nue{background:#0b0b0b;padding:clamp(34px,6vw,72px) 0}

.nue .vend__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.eti{position:absolute;z-index:2;top:9px;left:9px;padding:4px 9px;border-radius:99px;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro));color:#171102;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* ================= INSTAGRAM ================= */
.ig{position:relative;overflow:hidden;padding:clamp(40px,7vw,86px) 0;text-align:center;
  background:radial-gradient(75% 60% at 50% 0%,#241a06 0%,#0d0a03 62%,#070707 100%)}

.ig__in{max-width:700px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px);position:relative;z-index:2}

.ig__i{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin:0 auto 18px;
  background:linear-gradient(140deg,var(--gold-hi),var(--oro) 55%,#a9741d);color:#171102;
  box-shadow:0 14px 34px -10px rgba(232,183,77,.6)}

.ig__i svg{width:28px;height:28px}

.ig h2{font-family:var(--font-d);font-weight:400;font-size:clamp(25px,4.8vw,46px);
  line-height:.98;letter-spacing:-.025em;margin:0 0 12px;text-transform:uppercase;color:#fff}

.ig p{margin:0 0 24px;font-size:clamp(13.5px,1.7vw,16px);line-height:1.55;color:rgba(255,255,255,.62)}

.ig__b{display:inline-flex;align-items:center;gap:9px;padding:1em 1.9em;border-radius:99px;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro) 52%,#a9741d);color:#171102;
  font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;box-shadow:0 12px 32px -10px rgba(232,183,77,.65);
  transition:transform .16s,box-shadow .3s}

.ig__b:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(232,183,77,.8)}

.ig__b svg{width:16px;height:16px}

/* ================= CIFRAS ================= */
.cifrasSec{background:#070707;padding:clamp(22px,3.4vw,40px) 0}

.cifrasSec__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

/* ---- categorias: misma mecanica de scroll que los carruseles ---- */
.rej{display:flex;gap:var(--hueco,12px);overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px}

.rej::-webkit-scrollbar{display:none}

.cat{flex:0 0 calc((100% - var(--hueco,12px))/2);scroll-snap-align:start}

@media (min-width:1000px){
  .rej{--hueco:16px}
  .cat{flex:0 0 calc((100% - 48px)/4)}
}

/* ================= OFERTAS ================= */
.of{background:#0b0b0b;padding:clamp(34px,6vw,72px) 0}

.of .vend__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.of h2{font-family:var(--font-d);font-weight:400;font-size:clamp(26px,5vw,48px);
  line-height:.95;letter-spacing:-.025em;margin:0;text-transform:uppercase;color:#fff}

.of h2 em{font-family:var(--font-b);font-style:italic;font-weight:900;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro) 52%,#a9741d);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.dto{position:absolute;z-index:2;top:9px;left:9px;padding:4px 9px;border-radius:99px;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro));color:#171102;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* ================= SELECTOR DE CATEGORIAS ================= */
.sel{background:#070707;padding:clamp(34px,6vw,72px) 0}

.sel__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.sel__cab{margin:0 0 clamp(20px,3vw,32px)}

.sel__eye{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.sel__eye i{display:block;width:20px;height:1px;background:var(--oro)}

.sel h2{font-family:var(--font-d);font-weight:400;font-size:clamp(26px,5vw,48px);
  line-height:.95;letter-spacing:-.025em;margin:0;text-transform:uppercase;color:#fff}

.sel__cuerpo{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,34px);align-items:start}

@media (min-width:900px){ .sel__cuerpo{grid-template-columns:190px 1fr} }

/* lista de grupos */
.sel__nav{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}

.sel__nav::-webkit-scrollbar{display:none}

/* align-items para que cada pestaña mida lo que su texto: en columna se
   estiraban a todo el ancho y parecian barras. */
@media (min-width:900px){ .sel__nav{flex-direction:column;align-items:flex-start;
  gap:2px;overflow:visible;padding:0} }

.sel__b{
  background:none;border:0;padding:7px 0;cursor:pointer;text-align:left;white-space:nowrap;
  font-family:var(--font-b);font-size:clamp(19px,2.6vw,28px);font-weight:700;
  letter-spacing:-.02em;color:rgba(255,255,255,.3);
  transition:color .3s var(--ease),transform .3s var(--ease);
}

.sel__b:hover{color:rgba(255,255,255,.6)}

.sel__b.on{color:#fff}

@media (min-width:900px){ .sel__b.on{transform:translateX(4px)} }

/* panel: una grande + estrechas con el nombre en vertical */
.sel__panel{display:none;gap:clamp(8px,1vw,12px);height:clamp(290px,42vw,430px)}
.sel__panel.on{display:flex}

.sel__g{position:relative;flex:1 1 auto;border-radius:16px;overflow:hidden;
  background:#161616;text-decoration:none;color:inherit;isolation:isolate;
  transition:flex .55s var(--ease)}

.sel__g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .8s var(--ease),filter .4s ease;
  filter:saturate(.92) brightness(.8)}

.sel__g:hover img{transform:scale(1.07);filter:saturate(1) brightness(.9)}

.sel__g::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 32%,transparent 70%)}

.sel__pie{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(13px,1.7vw,22px)}

.sel__n{display:block;font-family:var(--font-d);font-weight:400;
  font-size:clamp(15px,2.1vw,26px);line-height:1;letter-spacing:-.015em;
  text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.75)}

.sel__c{display:block;margin-top:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--oro)}

/* las secundarias se encogen y giran el rotulo */
.sel__g--min{flex:0 0 clamp(58px,7vw,96px)}

.sel__g--min .sel__pie{padding:0;inset:0;display:grid;place-items:center}

.sel__g--min .sel__n{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(12px,1.4vw,16px);letter-spacing:.02em}

.sel__g--min .sel__c{display:none}

.sel__g--min::after{background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.45))}

.sel__pie2{margin-top:clamp(16px,2.4vw,26px);text-align:center}

.sel__todo{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;text-decoration:none;
  padding:.85em 1.6em;border-radius:99px;border:1px solid rgba(255,255,255,.26);
  transition:background .2s,color .2s}

.sel__todo:hover{background:#fff;color:#0a0a0a}

.sel__todo svg{width:13px;height:13px}

/* las cifras suben al entrar en pantalla */
.cifra b{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}

.cifra.va b{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){ .cifra b{opacity:1;transform:none} }

/* ================= RESENAS ================= */
.rev{position:relative;background:#0b0b0b;padding:clamp(34px,6vw,72px) 0;overflow:hidden}

.rev::before{content:'';position:absolute;z-index:0;pointer-events:none;
  left:50%;top:-10%;transform:translateX(-50%);
  width:min(120vw,900px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--oro) 0%,transparent 66%);
  opacity:.07;filter:blur(80px)}

.rev__in{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.rev__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin:0 0 clamp(18px,2.6vw,30px)}

.rev__eye{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.rev__eye i{display:block;width:20px;height:1px;background:var(--oro)}

.rev h2{font-family:var(--font-d);font-weight:400;font-size:clamp(26px,5vw,48px);
  line-height:.95;letter-spacing:-.025em;margin:0;text-transform:uppercase;color:#fff}

.rev h2 em{font-family:var(--font-b);font-style:italic;font-weight:900;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro) 52%,#a9741d);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.rev__sub{margin:9px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.5);max-width:46ch}

/* la tira */
.tira{display:flex;gap:var(--hueco,12px);overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:4px 0 6px}

.tira::-webkit-scrollbar{display:none}

.rv{
  position:relative;flex:0 0 clamp(190px,46vw,260px);scroll-snap-align:start;
  border-radius:16px;overflow:hidden;
  background:#141414;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  transition:transform .4s var(--ease),border-color .4s ease;
}

.rv:hover{transform:translateY(-4px);border-color:rgba(232,183,77,.36)}

.rv img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  /* las capturas vienen con brillos muy distintos: esto las iguala */
  filter:saturate(.94) contrast(1.03) brightness(.97)}

/* marca de agua discreta en cada ficha */
.rv__m{position:absolute;z-index:2;right:9px;bottom:9px;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:99px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  font-size:9px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.8)}

.rv__m svg{width:10px;height:10px;color:var(--oro)}

@media (min-width:1000px){ .tira{--hueco:16px} }

/* pie con el sello de reales */
.rev__pie{display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:clamp(16px,2.2vw,24px);
  font-size:11.5px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.45)}

.rev__pie svg{width:14px;height:14px;color:var(--oro)}

/* ================= MAS VENDIDOS ================= */
.vend{position:relative;background:var(--negro,#070707);padding:clamp(34px,6vw,72px) 0}

.vend__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.vend__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin:0 0 clamp(18px,2.6vw,30px);padding-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.1)}

.vend__eye{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.vend__eye i{display:block;width:20px;height:1px;background:var(--oro)}

.vend h2,.nue h2{font-family:var(--font-d);font-weight:400;font-size:clamp(26px,5vw,48px);
  line-height:.95;letter-spacing:-.025em;margin:0;text-transform:uppercase;color:#fff}

.vend__acc{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.flecha{width:38px;height:38px;border-radius:99px;display:none;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  color:#fff;cursor:pointer;padding:0;transition:background .2s,opacity .2s}

.flecha:hover{background:rgba(255,255,255,.16)}

.flecha[disabled]{opacity:.3;cursor:default}

.flecha svg{width:15px;height:15px}

.vend__todo{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;text-decoration:none;
  white-space:nowrap;padding:.7em 1.15em;border-radius:99px;
  border:1px solid rgba(255,255,255,.26);transition:background .2s,color .2s}

.vend__todo:hover{background:#fff;color:#0a0a0a}

.vend__todo svg{width:12px;height:12px}

/* carrusel: 2 tarjetas en movil, 4 en PC, siempre enteras */
.carru{display:flex;gap:var(--hueco,12px);overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px}

.carru::-webkit-scrollbar{display:none}

.carta{position:relative;display:block;flex:0 0 calc((100% - var(--hueco,12px))/2);
  scroll-snap-align:start;border-radius:14px;overflow:hidden;background:#161616;
  text-decoration:none;color:inherit;aspect-ratio:4/5;isolation:isolate}

.carta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.01);transition:transform .75s var(--ease);filter:saturate(.96)}

.carta:hover img{transform:scale(1.07)}

.carta::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 22%,
    rgba(0,0,0,.1) 48%,transparent 68%)}

.carta__pie{position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:clamp(10px,1.4vw,16px);display:flex;align-items:flex-end;
  justify-content:space-between;gap:9px}

.carta__n{font-size:clamp(11.5px,1.5vw,14.5px);font-weight:700;line-height:1.22;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 2px 10px rgba(0,0,0,.65)}

.carta__p{flex:0 0 auto;font-size:clamp(12.5px,1.6vw,16px);font-weight:800;
  letter-spacing:-.02em;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.65)}

.carta__pos{position:absolute;z-index:2;top:9px;left:9px;display:inline-flex;
  align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;
  border-radius:99px;background:rgba(0,0,0,.52);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);font-size:10px;font-weight:800;color:#fff}

.carta--top .carta__pos{background:var(--oro);color:#171102;border-color:transparent}

@media (min-width:1000px){
  .carru{--hueco:16px}
  .carta{flex:0 0 calc((100% - 48px)/4)}
  .flecha{display:grid}
}

/* --- hamburguesa --- */
.ham{
  width:34px;height:34px;border-radius:99px;
  display:grid;place-items:center;gap:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  cursor:pointer;padding:0;
}

.ham i{
  display:block;width:15px;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .32s var(--ease),opacity .2s ease;
}

.ham i+i{margin-top:3.5px}

.ham.x i:nth-child(1){transform:translateY(5px) rotate(45deg)}

.ham.x i:nth-child(2){opacity:0}

.ham.x i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* --- panel desplegable en móvil --- */
.panel{
  position:fixed;top:0;left:0;right:0;z-index:55;
  padding:64px clamp(16px,5vw,28px) 22px;
  background:rgba(8,8,8,.86);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.12);
  transform:translateY(-101%);
  transition:transform .48s var(--ease);
}

.panel.abierto{transform:translateY(0)}

.panel a{
  display:block;padding:13px 0;
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.09);
}

.panel a:last-child{border-bottom:0}

@media (min-width:860px){
  .nav__links{display:flex}
  .ham{display:none}
  .panel{display:none}
  .nav__logo{font-size:12.5px}
}

/* ================= CABECERA ================= */
.top{
  position:relative;z-index:6;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;
}

.logo{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
      text-shadow:0 2px 12px rgba(0,0,0,.5)}

.logo sup{font-size:.58em;opacity:.55;vertical-align:super}

.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:.42em .85em;border-radius:99px;
  border:1px solid rgba(255,255,255,.34);background:rgba(0,0,0,.24);
  backdrop-filter:blur(8px);
  font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;
}

.pill i{width:5px;height:5px;border-radius:50%;background:#fff;
        box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:pulso 2.2s infinite}

@keyframes pulso{70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ================= ESCENARIO DEL PRODUCTO ================= */
.escena{
  position:relative;z-index:3;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
}

/* nombre gigante DETRAS de la zapatilla: el recorte permite que lo tape */
.fondo-txt{
  position:absolute;z-index:1;left:50%;top:47%;
  transform:translate(-50%,-50%);
  width:100%;text-align:center;pointer-events:none;user-select:none;
  font-family:var(--font-d);
  font-size:clamp(58px,20vw,220px);
  line-height:.82;letter-spacing:-.04em;text-transform:uppercase;
  color:rgba(255,255,255,.26);
  text-shadow:0 6px 40px rgba(0,0,0,.28);
  white-space:nowrap;
  transition:opacity .45s ease, transform .9s var(--ease);
}

.fondo-txt.is-swap{opacity:0;transform:translate(-50%,-50%) scale(.96)}

/* Reclamos que van apareciendo POR ENCIMA del producto.
   Fondo translucido + sombra para que sigan siendo legibles sobre la zapatilla. */
.reclamo{
  position:absolute;z-index:5;left:50%;top:9%;
  transform:translateX(-50%);
  pointer-events:none;white-space:nowrap;
}

.reclamo span{
  display:inline-block;
  padding:.5em 1.15em;border-radius:99px;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(10px);
  font-family:var(--font-b);
  font-size:clamp(13px,3.9vw,17px);
  font-weight:800;letter-spacing:.01em;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7);
  transition:opacity .42s var(--ease), transform .55s var(--ease);
}

.reclamo.is-swap span{opacity:0;transform:translateY(-9px) scale(.97)}

/* sombra proyectada en el suelo */
.sombra{
  position:absolute;z-index:2;left:50%;bottom:7%;
  transform:translateX(-50%);
  width:54%;max-width:480px;height:6%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.62) 0%, transparent 72%);
  filter:blur(11px);
  transition:opacity .6s ease;
}

.zapa{
  position:absolute;z-index:3;top:50%;left:50%;
  width:94%;height:auto;max-height:86%;object-fit:contain;
  opacity:0;
  transform:translate(-50%,-50%) translateY(7%) rotate(-3deg) scale(.96);
  transition:opacity .75s var(--ease), transform 1.15s var(--ease);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.45));
  will-change:opacity,transform;
}

.zapa.is-on{
  opacity:1;z-index:4;
  transform:translate(-50%,-50%) translateY(0) rotate(-3deg) scale(1);
  animation:flotar 6s ease-in-out infinite;
}

.zapa.is-out{
  opacity:0;
  transform:translate(-50%,-50%) translateY(-6%) rotate(-3deg) scale(1.02);
}

/* flota: movimiento permanente, nunca un fotograma congelado */
@keyframes flotar{
  0%,100%{margin-top:0}
  50%    {margin-top:-1.6%}
}

/* ================= TEXTO ================= */
.copy{
  position:relative;z-index:6;flex:0 0 auto;
  padding:0 20px calc(18px + env(safe-area-inset-bottom));
}

h1{
  font-family:var(--font-d);font-weight:400;
  font-size:clamp(30px,8.6vw,46px);
  line-height:.94;letter-spacing:-.025em;
  margin:0 0 13px;text-transform:uppercase;
  text-shadow:0 3px 24px rgba(0,0,0,.45);
}

h1 span{display:block}

h1 .it{font-family:var(--font-b);font-style:italic;font-weight:900;
       color:rgba(255,255,255,.72)}

.cursor{display:inline-block;width:.055em;height:.76em;background:currentColor;
        margin-left:.05em;animation:parp .85s step-end infinite}

.cursor.off{display:none}

@keyframes parp{0%,100%{opacity:1}50%{opacity:0}}

.claims{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}

.claims li{
  display:inline-flex;align-items:center;gap:5px;
  padding:.42em .8em;border-radius:99px;
  background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
  font-size:10.5px;font-weight:600;white-space:nowrap;
}

.claims b{font-weight:800}

.barra{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid rgba(255,255,255,.22);
}

.mod__m{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;
        text-transform:uppercase;opacity:.72;margin-bottom:4px}

.mod__n{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.precio{font-size:28px;font-weight:800;letter-spacing:-.035em;white-space:nowrap;
        text-shadow:0 3px 16px rgba(0,0,0,.4)}

.mod,.precio{transition:opacity .32s ease,transform .32s var(--ease)}

.is-swap .mod,.is-swap .precio{opacity:0;transform:translateY(7px)}

.acc{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;
  padding:.95em 1.55em;border-radius:99px;border:1px solid transparent;cursor:pointer;
  transition:transform .14s,background .25s,color .25s,border-color .25s,box-shadow .25s;
}

.btn:active{transform:scale(.975)}

.btn--w{background:#fff;color:#111;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}

.btn--w:hover{background:#111;color:#fff}

.btn--o{background:rgba(0,0,0,.2);color:#fff;border-color:rgba(255,255,255,.4);
        backdrop-filter:blur(6px)}

.btn--o:hover{background:#fff;color:#111;border-color:#fff}

.btn svg{width:14px;height:14px}

.puntos{display:flex;gap:5px;margin-left:auto}

.pt{width:19px;height:3px;border-radius:99px;background:rgba(255,255,255,.34);
    border:0;padding:0;cursor:pointer;transition:width .45s var(--ease),background .3s}

.pt.is-on{width:34px;background:#fff}

.pt:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ================= ESCRITORIO ================= */
@media (min-width:900px){
  .top{padding:20px max(34px,3.2vw)}
  .escena{padding:0}
  .fondo-txt{font-size:clamp(120px,15.5vw,260px);top:46%}
  .reclamo{top:7%}
  .reclamo span{font-size:19px;padding:.55em 1.3em}
  .zapa{width:62%;max-height:74%}
  .sombra{width:34%;bottom:13%;height:4.5%}
  .copy{
    padding:0 max(34px,3.2vw) 34px;
    display:grid;grid-template-columns:1fr auto;align-items:end;
    column-gap:44px;row-gap:13px;
  }
  h1{grid-column:1;grid-row:1;font-size:clamp(42px,4.4vw,72px);margin:0}
  .claims{grid-column:1;grid-row:2;margin:0}
  .acc{grid-column:1;grid-row:3;margin-top:4px}
  .barra{
    grid-column:2;grid-row:1 / span 3;
    flex-direction:column;align-items:flex-end;justify-content:flex-end;
    border-bottom:0;border-left:1px solid rgba(255,255,255,.22);
    padding:0 0 0 34px;margin:0;min-width:200px;text-align:right;
  }
  .mod__n{font-size:18px}
  .precio{font-size:42px;margin-top:8px}
  .btn{font-size:13.5px;padding:1.02em 1.85em}
}

.up{opacity:0;transform:translateY(16px)}

.listo .up{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

.listo .up:nth-child(1){transition-delay:.06s}

.listo .up:nth-child(2){transition-delay:.16s}

.listo .up:nth-child(3){transition-delay:.26s}

.listo .up:nth-child(4){transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
}

:root{
  --negro:#070707;
  --panel:#111;
  --tinta:#fff;
  --mute:rgba(255,255,255,.55);
  --linea:rgba(255,255,255,.1);
  --oro:#e8b74d;
  --gold-hi:#ffe9a8;
  --font-d:'Archivo Black','Arial Black',Impact,sans-serif;
  --font-b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body{background:var(--negro);color:var(--tinta);font-family:var(--font-b);
     -webkit-font-smoothing:antialiased;overflow-x:hidden}

img{max-width:100%}

/* varios bloques se ocultan con el atributo hidden y llevan display propio:
   sin esto, el display del autor gana y el bloque sigue viendose */
[hidden]{display:none!important}

/* ============ MENU (mismo cristal que la home) ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background .45s var(--ease)}

.nav.compacta{background:rgba(8,8,8,.62)}

.nav__in{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:14px;
  padding:10px clamp(14px,3vw,30px);padding-top:calc(10px + env(safe-area-inset-top))}

.nav__logo{flex:0 0 auto;font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap}

.nav__volver{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.8);text-decoration:none}

.nav__volver svg{width:13px;height:13px}

/* ---- menu completo ---- */
.nav__links{display:none;align-items:center;gap:clamp(12px,1.5vw,24px);margin-left:6px}

.nav__links a{position:relative;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.82);text-decoration:none;
  padding:4px 0;white-space:nowrap;transition:color .22s}

.nav__links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--oro);transition:right .3s var(--ease)}

.consub{position:relative}

.sub{position:absolute;top:calc(100% + 16px);left:-20px;width:min(74vw,680px);padding:20px 22px;
  background:rgba(10,10,10,.86);backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.13);border-radius:16px;
  box-shadow:0 28px 64px -22px rgba(0,0,0,.85);
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px 22px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}

.sub h4{margin:0 0 8px;font-size:9.5px;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--oro)}

.sub a{display:block;padding:4px 0;font-size:12px;font-weight:500;letter-spacing:0;
  text-transform:none;color:rgba(255,255,255,.76);text-decoration:none;transition:color .18s,transform .18s}

.busca{display:flex;align-items:center;height:32px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  transition:width .42s var(--ease),background .3s;width:32px}

.busca.abierta{width:min(58vw,240px);background:rgba(255,255,255,.14)}

.busca__b{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:#fff;padding:0}

.busca__b svg{width:14px;height:14px}

.busca input{flex:1 1 auto;min-width:0;width:100%;background:transparent;border:0;outline:0;
  color:#fff;font-family:inherit;font-size:12.5px;padding:0 11px 0 0;opacity:0;
  pointer-events:none;transition:opacity .3s ease .1s}

.ham{width:32px;height:32px;border-radius:99px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);cursor:pointer;padding:0}

.ham i{display:block;width:14px;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .32s var(--ease),opacity .2s}

.panel{position:fixed;top:0;left:0;right:0;z-index:55;max-height:100vh;overflow-y:auto;
  padding:60px clamp(16px,5vw,28px) 22px;background:rgba(8,8,8,.9);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.12);
  transform:translateY(-101%);transition:transform .48s var(--ease)}

.panel>a{display:block;padding:12px 0;font-size:16px;font-weight:700;color:#fff;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.09)}

.grupo>button{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.09);
  color:#fff;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;text-align:left}

.grupo__c a{display:block;font-size:13.5px;font-weight:500;padding:8px 0 8px 12px;
  color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.055)}

@media (min-width:1080px){
  .nav__links{display:flex}
  .ham{display:none}
  .panel{display:none}
  .nav__volver{display:none}
}

/* ---- barra de entrega estimada ---- */
.entrega{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:13px 15px;border-radius:14px;margin:0 0 20px;
  background:linear-gradient(120deg,rgba(232,183,77,.14),rgba(232,183,77,.05));
  border:1px solid rgba(232,183,77,.32);
}

.entrega__i{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold-hi),var(--oro) 60%,#a9741d);color:#171102}

.entrega__i svg{width:18px;height:18px}

.entrega__t{min-width:0}

.entrega__t b{display:block;font-size:13px;font-weight:800;line-height:1.3}

.entrega__t span{display:block;font-size:11.5px;color:var(--mute);margin-top:2px;line-height:1.35}

.entrega__t em{font-style:normal;color:var(--oro);font-weight:700}

/* ---- pie de pagina ---- */
.footer{background:#050505;border-top:1px solid var(--linea);
  padding:clamp(34px,5vw,60px) 0 0;margin-top:clamp(20px,3vw,40px)}

.footer__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.footer__top{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);
  padding-bottom:clamp(26px,3.4vw,40px)}

@media (min-width:860px){ .footer__top{grid-template-columns:1.3fr 1fr 1fr 1.2fr} }

.footer__logo{font-family:var(--font-d);font-weight:400;font-size:19px;letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 11px}

.footer__logo sup{font-size:.5em;opacity:.5;vertical-align:super}

.footer__p{margin:0 0 16px;font-size:12.5px;line-height:1.6;color:var(--mute);max-width:36ch}

.redes{display:flex;gap:9px}

.redes a{width:36px;height:36px;border-radius:99px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  color:#fff;transition:background .22s,border-color .22s,transform .18s}

.redes a:hover{background:var(--oro);color:#171102;border-color:transparent;transform:translateY(-2px)}

.redes svg{width:16px;height:16px}

.footer h5{margin:0 0 12px;font-size:10px;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--oro)}

.footer ul{list-style:none;margin:0;padding:0}

.footer li{margin:0 0 8px}

.footer li a{font-size:12.5px;color:rgba(255,255,255,.66);text-decoration:none;transition:color .2s}

.footer li a:hover{color:#fff}

.fbloque{padding:13px;border-radius:13px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);margin:0 0 10px}

.fbloque b{display:block;font-size:12px;font-weight:800;margin:0 0 5px}

.fbloque p{margin:0;font-size:11.5px;line-height:1.55;color:var(--mute)}

.footer__bar{border-top:1px solid var(--linea);padding:16px 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}

.footer__bar p{margin:0;font-size:11.5px;color:rgba(255,255,255,.4)}

.footer__pagos{display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,.4)}

.footer__pagos b{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  background:rgba(232,183,77,.1);border:1px solid rgba(232,183,77,.26);
  color:var(--oro);font-size:10.5px;font-weight:700}

.footer__pagos svg{width:13px;height:13px}

/* ============ MIGAS ============ */
.migas{max-width:1360px;margin:0 auto;padding:calc(64px + env(safe-area-inset-top)) clamp(16px,3.4vw,40px) 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:11px;color:var(--mute)}

.migas a{color:var(--mute);text-decoration:none;transition:color .2s}

.migas a:hover{color:#fff}

.migas span{opacity:.4}

/* ============ RELACIONADOS ============ */
.rel{padding:clamp(34px,5vw,64px) 0 0}

.rel__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.rel__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin:0 0 clamp(16px,2.2vw,26px)}

.rel__eye{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

.rel__eye i{display:block;width:20px;height:1px;background:var(--oro)}

.rel h2{font-family:var(--font-d);font-weight:400;font-size:clamp(22px,3.6vw,36px);
  line-height:.98;letter-spacing:-.025em;margin:0;text-transform:uppercase}

.flechas{display:flex;gap:8px;flex:0 0 auto}

.flecha{width:36px;height:36px;border-radius:99px;display:none;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  color:#fff;cursor:pointer;padding:0;transition:background .2s,opacity .2s}

.flecha svg{width:14px;height:14px}

@media (min-width:900px){ .flecha{display:grid} }

.tira{display:flex;gap:var(--hueco,11px);overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}

/* tarjeta de cristal */
.tj{position:relative;flex:0 0 calc((100% - var(--hueco,11px))/2);scroll-snap-align:start;
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;isolation:isolate;
  background:linear-gradient(170deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 14px 34px -20px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08) inset;
  transition:transform .4s var(--ease),border-color .35s ease,box-shadow .35s ease}

.tj:hover{transform:translateY(-4px);border-color:rgba(232,183,77,.4);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.14) inset}

.tj__f{position:relative;aspect-ratio:1/1;overflow:hidden;margin:7px 7px 0;border-radius:11px}

.tj__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .7s var(--ease)}

.tj:hover .tj__f img{transform:scale(1.08)}

.tj__d{padding:10px 12px 13px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}

.tj__n{font-size:12.5px;font-weight:700;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.tj__p{flex:0 0 auto;font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--oro)}

@media (min-width:1000px){
  .tira{--hueco:14px}
  .tj{flex:0 0 calc((100% - 42px)/4)}
}

.aviso{
  position:relative;z-index:4;overflow:hidden;
  background:linear-gradient(96deg,var(--gold-hi,#ffe9a8),var(--oro) 42%,#a9741d);
  border-top:1px solid rgba(0,0,0,.18);
  border-bottom:1px solid rgba(0,0,0,.18);
  box-shadow:0 12px 40px -14px rgba(232,183,77,.7);
}

/* el contenedor de las migas no debe romper el flex del padre,
   si no los separadores se quedan pegados a los nombres */
.migas #migaR{display:contents}

/* ============ CABECERA DE CATEGORIA ============ */
.cab{max-width:1360px;margin:0 auto;padding:clamp(14px,2.2vw,24px) clamp(16px,3.4vw,40px) clamp(18px,2.6vw,30px)}

.cab__eye{display:flex;align-items:center;gap:8px;margin:0 0 11px;font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

.cab__eye i{display:block;width:20px;height:1px;background:var(--oro)}

.cab h1{font-family:var(--font-d);font-weight:400;
  font-size:clamp(34px,7.4vw,74px);line-height:.9;letter-spacing:-.03em;
  margin:0;text-transform:uppercase}

.cab h1 em{font-family:var(--font-b);font-style:italic;font-weight:900;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro) 52%,#a9741d);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.cab__p{margin:12px 0 0;max-width:56ch;font-size:13.5px;line-height:1.6;color:var(--mute)}

.cab__fila{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}

.sello{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.8)}

.sello svg{width:13px;height:13px;color:var(--oro)}

.sello--oro{background:rgba(232,183,77,.11);border-color:rgba(232,183,77,.3);color:var(--oro)}

@media (min-width:860px){
  .cab{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.4vw,50px);align-items:end}
  .cab__der{padding-bottom:4px}
}

.cab .entrega{margin:0}

/* ============ SUBCATEGORIAS ============ */
.subs{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:rgba(255,255,255,.015)}

.subs__in{max-width:1360px;margin:0 auto;padding:11px clamp(16px,3.4vw,40px);
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}

.subs__in::-webkit-scrollbar{display:none}

.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.78);font-family:inherit;font-size:12px;font-weight:600;
  letter-spacing:.01em;white-space:nowrap;text-decoration:none;
  transition:background .22s,border-color .22s,color .22s,transform .18s}

.chip:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-1px)}

.chip i{font-style:normal;font-size:10.5px;opacity:.5;font-weight:700}

.chip.on{background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);
  border-color:transparent;color:#171102}

.chip.on i{opacity:.6}

/* ============ BARRA DE ORDEN ============ */
.barra{max-width:1360px;margin:0 auto;
  padding:clamp(16px,2.4vw,26px) clamp(16px,3.4vw,40px) 0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

.barra__n{margin:0;font-size:12px;color:var(--mute)}

.barra__n b{color:#fff;font-weight:800;font-size:13px}

.orden{position:relative;display:inline-flex;align-items:center}

.orden svg{position:absolute;right:11px;width:11px;height:11px;pointer-events:none;
  color:var(--mute)}

.orden select{appearance:none;-webkit-appearance:none;
  padding:9px 32px 9px 14px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-family:inherit;font-size:12px;font-weight:600;outline:0;
  transition:border-color .22s,background .22s}

.orden select:hover{background:rgba(255,255,255,.1)}

.orden select:focus-visible{border-color:var(--oro)}

.orden option{background:#141414;color:#fff}

/* ============ REJILLA ============ */
/* el hueco de abajo lo pone la rejilla, no el bloque de "ver mas":
   asi no se pega a la franja dorada cuando no hay nada que paginar */
.rejilla{max-width:1360px;margin:0 auto;
  padding:clamp(14px,2vw,22px) clamp(16px,3.4vw,40px) clamp(24px,3.2vw,36px);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(9px,1.1vw,16px)}

@media (min-width:640px){ .rejilla{grid-template-columns:repeat(3,1fr)} }

@media (min-width:1000px){ .rejilla{grid-template-columns:repeat(4,1fr)} }

/* la tarjeta es la misma .tj de la ficha, aqui solo deja de ser de ancho fijo.
   Nacen visibles: antes empezaban en opacity:0 esperando una clase que nadie
   llegaba a ponerles, y los listados enteros salian en negro. */
.rejilla .tj{flex:none;width:auto;
  transition:transform .4s var(--ease),border-color .35s ease,box-shadow .35s ease}

.tj__eti{position:absolute;z-index:3;top:13px;left:13px;
  padding:4px 9px;border-radius:99px;
  font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);color:#171102}

.tj__eti--n{background:rgba(10,10,10,.72);color:#fff;
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}

.tj__c{display:block;margin-top:3px;font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute)}

.tj__p--c{font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}

.tj__pv{display:block;font-size:10.5px;color:var(--mute);text-decoration:line-through;
  font-weight:600;margin-bottom:1px}

/* ============ VER MAS / VACIO ============ */
.mas{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px) clamp(24px,3.2vw,36px);
  display:flex;flex-direction:column;align-items:center;gap:12px}

.mas__b{display:inline-flex;align-items:center;gap:9px;padding:14px 30px;border-radius:99px;
  cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;transition:background .24s,border-color .24s,transform .18s}

.mas__b:hover{background:rgba(255,255,255,.12);border-color:rgba(232,183,77,.4);transform:translateY(-2px)}

.mas__b svg{width:13px;height:13px}

.mas__n{margin:0;font-size:11.5px;color:var(--mute)}

.mas__bar{width:min(200px,60vw);height:2px;border-radius:2px;background:rgba(255,255,255,.1);
  overflow:hidden}

.mas__bar i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-hi),var(--oro));transition:width .5s var(--ease)}

.vacio{grid-column:1/-1;padding:46px 20px;text-align:center}

.vacio b{display:block;font-size:15px;font-weight:800;margin:0 0 6px}

.vacio p{margin:0;font-size:12.5px;color:var(--mute)}

/* esqueleto mientras carga el catalogo */
.hueso{border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);aspect-ratio:1/1.32;
  animation:lat 1.4s ease-in-out infinite}

@keyframes lat{0%,100%{opacity:.45}50%{opacity:.85}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation:none!important}
}

/* ============ BLOQUE PRINCIPAL ============ */
.prod{max-width:1360px;margin:0 auto;padding:clamp(16px,2.4vw,28px) clamp(16px,3.4vw,40px) 0;
  display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,44px);align-items:start}

@media (min-width:940px){ .prod{grid-template-columns:1.05fr .95fr} }

/* --- galeria --- */
/* En movil NO debe ser sticky: se quedaba pegada y el resto de la ficha
   pasaba por encima. Solo se fija cuando hay dos columnas. */
.gal{position:relative}

@media (min-width:940px){ .gal{position:sticky;top:84px} }

.gal__m{position:relative;border-radius:18px;overflow:hidden;background:var(--panel);
  border:1px solid var(--linea);aspect-ratio:4/5}

/* La foto nace visible: antes empezaba en opacity:0 esperando una clase que
   nadie le llegaba a poner, y la ficha se quedaba con un hueco negro. El
   fundido se hace solo mientras se cambia de foto. */
.gal__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1;transition:opacity .28s var(--ease)}

.gal__m img.mudando{opacity:0}

.gal__et{position:absolute;z-index:2;top:12px;left:12px;padding:5px 11px;border-radius:99px;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro));color:#171102;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

.gal__t{display:flex;gap:9px;margin-top:10px}

.gal__t button{flex:0 0 auto;width:66px;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:var(--panel);border:1px solid var(--linea);padding:0;cursor:pointer;
  transition:border-color .25s ease,transform .18s}

.gal__t button.on{border-color:var(--oro)}

.gal__t button:hover{transform:translateY(-2px)}

.gal__t img{width:100%;height:100%;object-fit:cover;display:block}

/* --- datos --- */
.info__marca{display:flex;align-items:center;gap:9px;margin:0 0 9px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}

h1{font-family:var(--font-d);font-weight:400;font-size:clamp(27px,4.4vw,44px);
  line-height:1;letter-spacing:-.025em;margin:0 0 14px;text-transform:uppercase}

.valor{display:flex;align-items:center;gap:10px;margin:0 0 18px;flex-wrap:wrap}

.estrellas{display:inline-flex;gap:2px}

.estrellas svg{width:15px;height:15px;color:var(--oro)}

.valor__t{font-size:12.5px;color:var(--mute)}

.valor__t a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}

.precio{display:flex;align-items:baseline;gap:11px;margin:0 0 6px}

.precio b{font-size:clamp(34px,5vw,46px);font-weight:800;letter-spacing:-.035em;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro) 55%,#a9741d);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.precio i{font-style:normal;font-size:13px;color:var(--mute)}

.envio{margin:0 0 22px;font-size:12.5px;color:var(--mute)}

.envio b{color:#fff;font-weight:700}

/* tallas */
.bloque{margin:0 0 20px}

.bloque__t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}

.bloque__t span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.bloque__t a{font-size:11.5px;color:var(--mute);text-decoration:underline}

.tallas{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}

@media (min-width:520px){ .tallas{grid-template-columns:repeat(10,1fr)} }

@media (min-width:940px){ .tallas{grid-template-columns:repeat(5,1fr)} }

.talla{
  aspect-ratio:1.5/1;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;
  transition:background .2s,border-color .2s,color .2s,transform .12s;
}

.talla:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}

.talla.on{background:#fff;color:#0a0a0a;border-color:#fff}

.talla:active{transform:scale(.96)}

/* botones */
.acciones{display:grid;gap:9px;margin:0 0 20px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;border:1px solid transparent;
  padding:1.05em 1.6em;border-radius:99px;cursor:pointer;
  transition:transform .14s,background .25s,color .25s,border-color .25s,box-shadow .3s}

.btn:active{transform:scale(.985)}

.btn--oro{background:linear-gradient(96deg,var(--gold-hi),var(--oro) 52%,#a9741d);
  color:#171102;box-shadow:0 12px 32px -10px rgba(232,183,77,.65)}

.btn--oro:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(232,183,77,.8)}

.btn--linea{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.24)}

.btn--linea:hover{background:#fff;color:#0a0a0a;border-color:#fff}

.btn svg{width:16px;height:16px}

/* garantias en linea */
.gar3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 20px}

.gar3 div{padding:12px 9px;border-radius:12px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}

.gar3 svg{width:17px;height:17px;color:var(--oro);margin-bottom:6px}

.gar3 span{display:block;font-size:10.5px;font-weight:600;line-height:1.3;color:rgba(255,255,255,.72)}

/* acordeon de detalles */
.det{border-top:1px solid var(--linea)}

.det__i{border-bottom:1px solid var(--linea)}

.det__b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 0;background:none;border:0;color:#fff;cursor:pointer;text-align:left;
  font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.01em}

.det__b svg{width:13px;height:13px;opacity:.6;transition:transform .3s var(--ease);flex:0 0 auto}

.det__i.on .det__b svg{transform:rotate(180deg)}

.det__c{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}

.det__i.on .det__c{max-height:320px}

.det__c p{margin:0 0 15px;font-size:13.5px;line-height:1.6;color:var(--mute)}

/* ============ BARRA FIJA ============ */
.fija{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(10,10,10,.82);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.12);
  padding:10px clamp(14px,3vw,30px);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .45s var(--ease);
}

.fija.on{transform:none}

.fija__in{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:12px}

.fija__m{flex:0 0 auto;width:42px;height:42px;border-radius:10px;overflow:hidden;
  border:1px solid var(--linea);display:none}

.fija__m img{width:100%;height:100%;object-fit:cover}

.fija__t{flex:1 1 auto;min-width:0}

.fija__n{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

.fija__p{display:block;font-size:11.5px;color:var(--oro);font-weight:700;margin-top:1px}

.fija .btn{flex:0 0 auto;padding:.85em 1.4em;font-size:12.5px}

@media (min-width:640px){ .fija__m{display:block} }

/* ============ RESENAS ============ */
.rev{position:relative;padding:clamp(34px,5vw,64px) 0 clamp(80px,9vw,90px);overflow:hidden}

.rev__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.rv{position:relative;flex:0 0 clamp(170px,42vw,230px);scroll-snap-align:start;
  border-radius:15px;overflow:hidden;background:#141414;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 36px -22px rgba(0,0,0,.9);
  transition:transform .4s var(--ease),border-color .4s ease}

.rv img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.94) contrast(1.03) brightness(.97)}

.rv__m{position:absolute;z-index:2;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;
  padding:4px 8px;border-radius:99px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  font-size:8.5px;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.8)}

.rv__m svg{width:9px;height:9px;color:var(--oro)}

/* ============ POPUP DE COMPRA ============ */
.velo{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}

.velo.on{opacity:1;visibility:visible}

.modal{
  position:fixed;z-index:91;left:50%;bottom:0;transform:translateX(-50%) translateY(100%);
  width:min(100%,560px);max-height:92vh;overflow-y:auto;
  background:#0f0f0f;border:1px solid rgba(255,255,255,.14);
  border-radius:22px 22px 0 0;
  transition:transform .48s var(--ease);
}

.modal.on{transform:translateX(-50%) translateY(0)}

@media (min-width:640px){
  .modal{top:50%;bottom:auto;border-radius:22px;
    transform:translate(-50%,-46%) scale(.97);opacity:0;
    transition:transform .4s var(--ease),opacity .3s}
  .modal.on{transform:translate(-50%,-50%) scale(1);opacity:1}
}

.modal__c{padding:clamp(20px,3vw,30px)}

.modal__x{position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:99px;
  display:grid;place-items:center;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;padding:0}

.modal__x svg{width:14px;height:14px}

.modal h3{font-family:var(--font-d);font-weight:400;font-size:clamp(20px,3vw,27px);
  line-height:1;letter-spacing:-.02em;margin:0 0 6px;text-transform:uppercase}

.modal__s{margin:0 0 20px;font-size:13px;line-height:1.5;color:var(--mute)}

.resumen{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--linea);margin:0 0 18px}

.resumen img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:0 0 auto}

.resumen b{display:block;font-size:13.5px;font-weight:700}

.resumen span{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}

.resumen em{margin-left:auto;font-style:normal;font-size:19px;font-weight:800;color:var(--oro)}

.campos{display:grid;gap:11px;margin:0 0 18px}

.campo{display:grid;gap:5px}

.campo--2{grid-template-columns:1fr 1fr;gap:11px}

.campo label{font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute)}

.campo input,.campo select{
  width:100%;padding:12px 13px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-family:inherit;font-size:14px;outline:none;
  transition:border-color .2s,background .2s}

.campo input:focus,.campo select:focus{border-color:var(--oro);background:rgba(255,255,255,.08)}

.campo input::placeholder{color:rgba(255,255,255,.3)}

.campo select option{background:#151515}

/* --- ayuda y error bajo cada campo --- */
.campo__ay{font-size:10.5px;color:rgba(255,255,255,.42);line-height:1.35}

.campo__er{font-size:10.5px;font-weight:700;color:#ff8d7a;line-height:1.35;display:none}

.campo.mal input,.campo.mal select{border-color:#ff8d7a;background:rgba(255,141,122,.07)}

.campo.mal .campo__er{display:block}

.campo.mal .campo__ay{display:none}

.opc{opacity:.5;text-transform:none;letter-spacing:0;font-weight:600}

/* --- codigo postal, ciudad y provincia: el pais manda el orden --- */
.dir3{display:grid;grid-template-columns:1fr 1fr;gap:11px}

.dir3 > .campo{min-width:0}

.dir3[data-pais="ES"] #cCP  {order:1}

.dir3[data-pais="ES"] #cCiu {order:2}

.dir3[data-pais="ES"] #cProv{order:3;grid-column:1/-1}

.dir3[data-pais="PT"] #cCiu {order:1}

.dir3[data-pais="PT"] #cProv{order:2}

.dir3[data-pais="PT"] #cCP  {order:3;grid-column:1/-1}

@media (max-width:430px){
  .dir3[data-pais="PT"]{grid-template-columns:1fr}
  .dir3[data-pais="PT"] > .campo{grid-column:1/-1}
}

/* --- telefono con el prefijo pegado --- */
.tel{display:flex;align-items:stretch;border-radius:11px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  transition:border-color .2s,background .2s}

.tel:focus-within{border-color:var(--oro);background:rgba(255,255,255,.08)}

.campo.mal .tel{border-color:#ff8d7a;background:rgba(255,141,122,.07)}

.tel__p{flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:0 12px;font-size:14px;font-weight:700;color:var(--oro);
  background:rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.12)}

.tel__p svg{width:18px;height:12px;border-radius:2px;flex:0 0 auto}

.tel input{flex:1 1 auto;min-width:0;border:0!important;background:transparent!important;
  border-radius:0;letter-spacing:.08em}

.tel input:focus{background:transparent!important}

#prem{margin:0 0 20px}

.pago{display:flex;align-items:center;gap:11px;padding:13px;border-radius:13px;
  background:rgba(232,183,77,.09);border:1px solid rgba(232,183,77,.3);margin:0 0 18px}

.pago svg{width:22px;height:22px;color:var(--oro);flex:0 0 auto}

.pago b{display:block;font-size:13px;font-weight:800}

.pago span{display:block;font-size:11.5px;color:var(--mute);margin-top:2px;line-height:1.4}

.aviso{margin:13px 0 0;font-size:11px;line-height:1.5;color:rgba(255,255,255,.4);text-align:center}

/* ============ PIE ============ */
.pie{padding:clamp(26px,4vw,40px) 0;border-top:1px solid var(--linea);text-align:center}

.pie p{margin:0;font-size:11.5px;color:rgba(255,255,255,.4)}

[hidden]{display:none!important}

/* ============ CABECERA DE PAGINA ============ */
.cabp{max-width:1360px;margin:0 auto;padding:clamp(14px,2.2vw,26px) clamp(16px,3.4vw,40px) clamp(16px,2.4vw,28px)}

.cabp__eye{display:flex;align-items:center;gap:8px;margin:0 0 11px;font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

.cabp__eye i{display:block;width:20px;height:1px;background:var(--oro)}

.cabp h1{font-family:var(--font-d);font-weight:400;
  font-size:clamp(30px,6.4vw,62px);line-height:.92;letter-spacing:-.03em;
  margin:0;text-transform:uppercase}

.cabp h1 em{font-family:var(--font-b);font-style:italic;font-weight:900;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro) 52%,#a9741d);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.cabp__p{margin:12px 0 0;max-width:58ch;font-size:13.5px;line-height:1.6;color:var(--mute)}

.env{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px) clamp(30px,5vw,64px)}

.env--fino{max-width:900px}

/* ============ BOTONES ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:99px;cursor:pointer;border:1px solid transparent;
  font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;transition:transform .2s,box-shadow .25s,background .25s}

.btn--oro{background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);color:#171102;
  box-shadow:0 12px 30px -14px rgba(232,183,77,.9)}

.btn--oro:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(232,183,77,1)}

.btn--linea{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#fff}

.btn--linea:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)}

.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important}

/* ============ CAJAS ============ */
.caja{border-radius:18px;padding:clamp(16px,2.2vw,24px);
  background:linear-gradient(170deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}

.caja--oro{background:linear-gradient(140deg,rgba(232,183,77,.14),rgba(232,183,77,.05));
  border-color:rgba(232,183,77,.32)}

.caja h2{font-family:var(--font-d);font-weight:400;font-size:clamp(17px,2.2vw,22px);
  line-height:1;letter-spacing:-.02em;margin:0 0 14px;text-transform:uppercase}

.caja h3{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.vacia{text-align:center;padding:clamp(34px,6vw,70px) 20px}

.vacia__i{width:66px;height:66px;margin:0 auto 18px;border-radius:99px;display:grid;place-items:center;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);color:var(--oro)}

.vacia__i svg{width:28px;height:28px}

.vacia b{display:block;font-family:var(--font-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,3.4vw,30px);letter-spacing:-.02em;margin:0 0 9px}

.vacia p{margin:0 auto 22px;max-width:44ch;font-size:13px;line-height:1.6;color:var(--mute)}

/* fila de garantias, la misma de la ficha */
.gar3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0 0}

.gar3 > div{padding:12px 10px;border-radius:13px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}

.gar3 svg{width:17px;height:17px;color:var(--oro);margin:0 0 6px}

.gar3 span{display:block;font-size:10.5px;font-weight:700;line-height:1.35;color:rgba(255,255,255,.8)}

.car{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,28px);align-items:start}

@media (min-width:920px){ .car{grid-template-columns:1.6fr .9fr} }

.lin{display:grid;grid-template-columns:76px 1fr auto;gap:13px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--linea)}

.lin:last-child{border-bottom:0}

.lin__f{width:76px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--panel)}

.lin__f img{width:100%;height:100%;object-fit:cover}

.lin__n{display:block;font-size:13.5px;font-weight:800;line-height:1.3;
  color:inherit;text-decoration:none}

.lin__n:hover{color:var(--oro)}

.lin__t{display:block;margin-top:3px;font-size:11px;color:var(--mute)}

.lin__pu{display:block;margin-top:2px;font-size:11px;color:var(--mute)}

.lin__d{display:flex;flex-direction:column;align-items:flex-end;gap:8px}

.lin__p{font-size:15px;font-weight:800;color:var(--oro);letter-spacing:-.02em;white-space:nowrap}

.cant{display:inline-flex;align-items:center;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}

.cant button{width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;color:#fff;font-size:15px;font-weight:700;line-height:1;padding:0;
  transition:background .2s}

.cant button:hover{background:rgba(255,255,255,.12)}

.cant button[disabled]{opacity:.3;cursor:not-allowed}

.cant span{min-width:26px;text-align:center;font-size:13px;font-weight:800}

.quitar{background:none;border:0;cursor:pointer;padding:2px 0;
  color:rgba(255,255,255,.4);font-family:inherit;font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-decoration:underline;text-underline-offset:3px;transition:color .2s}

.quitar:hover{color:#ff8d7a}

.res{position:relative}

@media (min-width:920px){ .res{position:sticky;top:84px} }

.res__f{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;font-size:13px;color:var(--mute)}

.res__f b{color:#fff;font-weight:700}

.res__f--gratis b{color:var(--oro)}

.res__tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}

.res__tot span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.res__tot b{font-family:var(--font-d);font-weight:400;font-size:clamp(26px,4vw,36px);
  letter-spacing:-.03em;color:var(--oro)}

.res .btn{width:100%;margin-top:16px}

.res__nota{margin:11px 0 0;font-size:11px;line-height:1.5;color:var(--mute);text-align:center}

.seguir{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:12px;font-weight:700;color:rgba(255,255,255,.7);text-decoration:none}

.seguir:hover{color:#fff}

.seguir svg{width:13px;height:13px}

.res__f--dto b{color:var(--oro)}

#prem{margin:0 0 clamp(14px,2vw,20px)}

.chk{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,30px);align-items:start}

@media (min-width:920px){ .chk{grid-template-columns:1.25fr .75fr} }

.chk__res{position:relative}

@media (min-width:920px){ .chk__res{position:sticky;top:84px} }

.mini{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--linea)}

.mini:last-of-type{border-bottom:0}

.mini img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:0 0 auto}

.mini b{display:block;font-size:12.5px;font-weight:800;line-height:1.3}

.mini span{display:block;font-size:11px;color:var(--mute);margin-top:2px}

.mini em{margin-left:auto;font-style:normal;font-size:14px;font-weight:800;color:var(--oro);white-space:nowrap}

.paso{display:flex;align-items:center;gap:9px;margin:0 0 14px}

.paso i{width:24px;height:24px;border-radius:99px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);color:#171102;
  font-style:normal;font-size:12px;font-weight:900}

.paso h2{margin:0}

.canarias{display:none;align-items:flex-start;gap:10px;margin:11px 0 0;padding:12px 13px;
  border-radius:13px;background:rgba(255,141,122,.1);border:1px solid rgba(255,141,122,.35)}

.canarias.on{display:flex}

.canarias svg{width:18px;height:18px;color:#ff8d7a;flex:0 0 auto;margin-top:1px}

.canarias p{margin:0;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.85)}

.canarias b{color:#ff8d7a}

.res__tot b{font-family:var(--font-d);font-weight:400;font-size:clamp(24px,3.4vw,32px);
  letter-spacing:-.03em;color:var(--oro)}

.ok{max-width:760px;margin:0 auto;text-align:center}

.ok__i{width:84px;height:84px;margin:0 auto 20px;border-radius:99px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);color:#171102;
  box-shadow:0 16px 40px -16px rgba(232,183,77,.9);
  animation:sello .6s var(--ease) both}

@keyframes sello{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

.ok__i svg{width:38px;height:38px}

.ok h1{font-family:var(--font-d);font-weight:400;font-size:clamp(28px,5.4vw,50px);
  line-height:.95;letter-spacing:-.03em;margin:0 0 12px;text-transform:uppercase}

.ok h1 em{font-family:var(--font-b);font-style:italic;font-weight:900;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro) 52%,#a9741d);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.ok__p{margin:0 auto 24px;max-width:48ch;font-size:13.5px;line-height:1.6;color:var(--mute)}

.ped{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:0 0 24px}

.ped span{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  font-size:11.5px;font-weight:700}

.ped span b{color:var(--oro)}

.ok .caja{text-align:left;margin:0 0 14px}

.ok__bt{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}

/* --- guarda nuestro numero --- */
.guarda__bt{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}

.guarda__n{margin:13px 0 0;font-size:11px;letter-spacing:.09em;
  color:rgba(255,255,255,.45);text-align:center}

.guarda__n b{color:var(--oro);font-weight:800;letter-spacing:.04em}

@media (max-width:460px){ .guarda__bt .btn{width:100%} }

.mini2{display:flex;gap:9px;padding:8px 0;font-size:12.5px;line-height:1.55;
  color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.07)}

.mini2:last-child{border-bottom:0}

.mini2 b{color:var(--oro);flex:0 0 auto}

.cta{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,30px);align-items:start}

@media (min-width:880px){ .cta{grid-template-columns:1fr 1fr} }

.pest{display:flex;gap:6px;padding:4px;border-radius:99px;margin:0 0 18px;width:max-content;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13)}

.pest button{padding:8px 18px;border-radius:99px;cursor:pointer;background:none;border:0;
  color:rgba(255,255,255,.62);font-family:inherit;font-size:12px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;transition:background .22s,color .22s}

.pest button.on{background:#fff;color:#141414}

.cta .btn{width:100%;margin-top:6px}

.enlacep{display:block;margin-top:12px;font-size:11.5px;color:var(--mute);text-decoration:none;text-align:center}

.enlacep:hover{color:#fff}

.legal{margin:12px 0 0;font-size:10.5px;line-height:1.55;color:rgba(255,255,255,.4)}

.ventaja{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}

.ventaja:last-child{border-bottom:0}

.ventaja svg{width:17px;height:17px;color:var(--oro);flex:0 0 auto;margin-top:2px}

.ventaja b{display:block;font-size:12.5px;font-weight:800;margin-bottom:3px}

.ventaja span{display:block;font-size:11.5px;line-height:1.5;color:var(--mute)}

/* pedidos */
.ped2{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--linea)}

.ped2:last-child{border-bottom:0}

.ped2 b{font-size:13px;font-weight:800}

.ped2 span{display:block;font-size:11px;color:var(--mute);margin-top:3px}

.estado{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}

.estado--ok{background:rgba(232,183,77,.13);border:1px solid rgba(232,183,77,.32);color:var(--oro)}

.estado--cam{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff}

.vias{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 clamp(24px,4vw,44px)}

@media (min-width:760px){ .vias{grid-template-columns:repeat(3,1fr)} }

.via{display:block;padding:clamp(16px,2.2vw,22px);border-radius:18px;text-decoration:none;color:inherit;
  background:linear-gradient(170deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  transition:transform .3s var(--ease),border-color .3s}

.via:hover{transform:translateY(-3px);border-color:rgba(232,183,77,.4)}

.via__i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin:0 0 13px;
  background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);color:#171102}

.via__i svg{width:21px;height:21px}

.via b{display:block;font-size:14px;font-weight:800;margin:0 0 5px}

.via span{display:block;font-size:12px;line-height:1.55;color:var(--mute)}

.via em{display:block;margin-top:9px;font-style:normal;font-size:13px;font-weight:800;color:var(--oro)}

.faq{border-top:1px solid var(--linea)}

.faq__i{border-bottom:1px solid var(--linea)}

.faq__b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;background:none;border:0;cursor:pointer;color:#fff;text-align:left;
  font-family:inherit;font-size:14px;font-weight:800;line-height:1.35}

.faq__b svg{width:13px;height:13px;flex:0 0 auto;opacity:.55;transition:transform .3s var(--ease)}

.faq__i.on .faq__b svg{transform:rotate(180deg)}

.faq__i.on .faq__b{color:var(--oro)}

.faq__c{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}

.faq__c p{margin:0 0 16px;font-size:13px;line-height:1.65;color:var(--mute);max-width:70ch}

.horario{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}

.bus{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

.bus__f{display:flex;align-items:center;gap:10px;padding:5px 5px 5px 18px;border-radius:99px;
  max-width:620px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  transition:border-color .25s}

.bus__f:focus-within{border-color:var(--oro)}

.bus__f input{flex:1 1 auto;min-width:0;background:none;border:0;outline:0;color:#fff;
  font-family:inherit;font-size:15px;padding:12px 0}

.bus__f input::placeholder{color:rgba(255,255,255,.34)}

.bus__f button{flex:0 0 auto;width:42px;height:42px;border-radius:99px;display:grid;place-items:center;
  cursor:pointer;border:0;background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);
  color:#171102;transition:transform .2s}

.bus__f button:hover{transform:scale(1.06)}

.bus__f button svg{width:17px;height:17px}

.sug{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}

.sug a{padding:7px 13px;border-radius:99px;font-size:11.5px;font-weight:600;text-decoration:none;
  color:rgba(255,255,255,.75);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);transition:background .2s,color .2s}

.sug a:hover{background:rgba(255,255,255,.11);color:#fff}

/* (la rejilla se define mas arriba, con sus columnas por tamaño de pantalla:
   repetirla aqui anulaba esas columnas y dejaba dos en cualquier pantalla) */

.cuenta2{max-width:1360px;margin:0 auto;padding:clamp(18px,2.4vw,26px) clamp(16px,3.4vw,40px) 0;
  font-size:12px;color:var(--mute)}

.cuenta2 b{color:#fff;font-weight:800;font-size:13px}

.e404{max-width:760px;margin:0 auto;text-align:center;padding:clamp(30px,7vw,90px) 0}

.e404__n{font-family:var(--font-d);font-weight:400;font-size:clamp(90px,26vw,220px);
  line-height:.8;letter-spacing:-.05em;margin:0 0 6px;
  background:linear-gradient(170deg,rgba(255,255,255,.22),rgba(255,255,255,.04));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.e404 h1{font-family:var(--font-d);font-weight:400;font-size:clamp(22px,4.4vw,38px);
  line-height:1;letter-spacing:-.02em;margin:0 0 14px;text-transform:uppercase}

.e404 p{margin:0 auto 26px;max-width:46ch;font-size:13.5px;line-height:1.6;color:var(--mute)}

.e404__bt{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

.e404__l{margin-top:clamp(30px,5vw,54px);padding-top:26px;border-top:1px solid var(--linea)}

.e404__l h3{margin:0 0 14px;font-size:10.5px;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--oro)}

.e404__l div{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

.e404__l a{padding:8px 15px;border-radius:99px;font-size:12px;font-weight:700;text-decoration:none;
  color:rgba(255,255,255,.75);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);transition:background .2s,color .2s}

.e404__l a:hover{background:rgba(255,255,255,.12);color:#fff}


/* ==========================================================================
   Selector de idioma de TranslatePress
   El plugin expone sus colores como variables CSS, asi que se redefinen en
   vez de pelear con sus reglas. Si TranslatePress cambia de version, lo peor
   que pasa es que vuelva a su aspecto por defecto, no que se rompa nada.
   ========================================================================== */
/* TranslatePress ya pinta su propia pastilla con borde: la nuestra sobraba y
   se veian dos aros, uno dentro del otro. */
.lang--trp{display:flex;align-items:center;flex:0 0 auto;
  background:none!important;border:0!important;padding:0!important}
.lang--trp .trp-shortcode-switcher__wrapper{line-height:1}
.lang--trp .trp-language-item{padding:5px 9px!important;min-height:0!important}
.lang--trp .trp-shortcode-arrow{width:14px!important;height:14px!important}
.lang--trp .trp-flag-image{width:15px!important;height:11px!important}
/* en el panel del movil va suelto, sin heredar el tamaño de la cabecera */
.panel .lang--trp{margin:16px 0 4px}
.lang--trp .trp-shortcode-switcher__wrapper{
  /* TranslatePress escribe estas variables en el atributo style del propio
     elemento, y eso gana a cualquier hoja: por eso llevan !important. */
  --bg:rgba(255,255,255,.07)!important;
  --bg-hover:rgba(255,255,255,.14)!important;
  --text:rgba(255,255,255,.85)!important;
  --text-hover:#fff!important;
  --border:1px solid rgba(255,255,255,.16)!important;
  --border-color:rgba(255,255,255,.16)!important;
  --border-radius:99px!important;
  --flag-radius:2px!important;
  --flag-size:15px!important;
  --font-size:11px!important;
}
.lang--trp .trp-language-item{font-weight:700;letter-spacing:.04em}
.lang--trp .trp-language-item::after{display:none!important}
/* en pantallas estrechas solo la bandera, que el nombre no cabe */
@media (max-width:560px){
  .lang--trp .trp-language-item-name{display:none}
}


/* ==========================================================================
   Colores de enlace: Elementor define uno global para <a> con mas peso que
   nuestras clases sueltas, asi que aqui se reafirman los del tema con la
   especificidad justa para ganar. Sin !important: solo un selector mas.
   ========================================================================== */
.nav .nav__logo{color:#fff}
.nav .nav__links a{color:rgba(255,255,255,.82)}
.nav .nav__links a:hover{color:#fff}
.nav .sub a{color:rgba(255,255,255,.76)}
.nav .sub a:hover{color:#fff}
.nav .nav__volver{color:rgba(255,255,255,.8)}
.panel .grupo__c a{color:rgba(255,255,255,.72)}
body .panel > a{color:#fff}
.footer .redes a{color:#fff}
.footer li a{color:rgba(255,255,255,.66)}
.footer li a:hover{color:#fff}
.migas a{color:var(--mute)}
.migas a:hover{color:#fff}
.tj:hover .tj__n{color:inherit}
body a.tj{color:inherit}
body a.btn--oro{color:#171102}
body a.btn--linea{color:#fff}
.subs .chip{color:rgba(255,255,255,.78)}
.subs .chip.on{color:#171102}
.e404__l a{color:rgba(255,255,255,.75)}
.sug a{color:rgba(255,255,255,.75)}
.vias .via{color:inherit}
.lin .lin__n{color:inherit}
.seguir{color:rgba(255,255,255,.7)}


/* lo que existe para WooCommerce pero no debe verse */
.kd-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.cant__n{width:34px;text-align:center;background:none;border:0;color:#fff;
  font-family:inherit;font-size:13px;font-weight:800;padding:0;
  -moz-appearance:textfield;appearance:textfield}
.cant__n::-webkit-outer-spin-button,.cant__n::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.salta{position:absolute;left:-9999px;top:0;padding:10px 16px;background:#fff;color:#111;
  z-index:100;border-radius:0 0 8px 0}
.salta:focus{left:0}

/* ==========================================================================
   Piezas que pinta WooCommerce con su propio marcado
   Mi cuenta, los avisos y los formularios del checkout. No se reescriben:
   se visten para que encajen con el resto del tema.
   ========================================================================== */

/* --- envoltura general --- */
.woocommerce-account .cabp + .woocommerce,
.woocommerce-account > .woocommerce{max-width:1360px;margin:0 auto;
  padding:0 clamp(16px,3.4vw,40px) clamp(30px,5vw,64px)}

/* --- formularios de acceso y registro --- */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword{
  max-width:460px;margin:0 auto;border-radius:18px;padding:clamp(18px,2.4vw,26px);
  background:linear-gradient(170deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12)}
.woocommerce-account h2,
.woocommerce-ResetPassword > p:first-child{
  font-family:var(--font-d);font-weight:400;font-size:clamp(17px,2.2vw,22px);
  line-height:1;letter-spacing:-.02em;margin:0 0 16px;text-transform:uppercase;color:#fff;
  text-align:center}

.woocommerce form .form-row{display:grid;gap:5px;margin:0 0 13px}
.woocommerce form .form-row label{font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute)}
.woocommerce form .form-row label .required{color:var(--oro);text-decoration:none;border:0}
.woocommerce form .form-row .optional{opacity:.5;text-transform:none;letter-spacing:0}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%;padding:12px 13px;border-radius:11px;min-height:auto;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-family:inherit;font-size:14px;outline:0;
  transition:border-color .2s,background .2s}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:var(--oro);background:rgba(255,255,255,.08)}
.woocommerce form .form-row input::placeholder{color:rgba(255,255,255,.3)}
.woocommerce .password-input,.woocommerce .show-password-input{width:100%}
.woocommerce .show-password-input::after{color:rgba(255,255,255,.5)}

/* el desplegable de pais/provincia usa select2 */
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#fff;line-height:1.4;padding:0}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{top:12px}
.select2-dropdown{background:#141414;border-color:rgba(255,255,255,.18);color:#fff}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--oro);color:#171102}
.select2-search--dropdown .select2-search__field{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff}

/* --- botones de WooCommerce --- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce .button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:99px;border:0;cursor:pointer;
  background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);color:#171102;
  font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;line-height:1;
  box-shadow:0 12px 30px -14px rgba(232,183,77,.9);
  transition:transform .2s,box-shadow .25s}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce .button:hover{
  background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);
  color:#171102;transform:translateY(-2px)}
.woocommerce .button.alt{background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c)}

.woocommerce-form-login__rememberme{font-size:12px;color:var(--mute);font-weight:500;
  letter-spacing:0;text-transform:none;display:flex;align-items:center;gap:7px}
.woocommerce-LostPassword{margin:12px 0 0;text-align:center}
.woocommerce-LostPassword a{font-size:11.5px;color:var(--mute);text-decoration:none}
.woocommerce-LostPassword a:hover{color:#fff}

/* --- menu lateral de la cuenta --- */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 20px;padding:0;
  display:flex;flex-wrap:wrap;gap:7px}
.woocommerce-MyAccount-navigation li a{display:inline-block;padding:8px 15px;border-radius:99px;
  font-size:12px;font-weight:700;text-decoration:none;color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:background .2s,color .2s}
.woocommerce-MyAccount-navigation li a:hover{background:rgba(255,255,255,.12);color:#fff}
.woocommerce-MyAccount-navigation li.is-active a{
  background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);
  border-color:transparent;color:#171102}
.woocommerce-MyAccount-content p{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.8)}
.woocommerce-MyAccount-content a{color:var(--oro)}

/* --- tablas (pedidos, direcciones) --- */
.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:0;
  border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  padding:12px 14px;border:0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12.5px;color:rgba(255,255,255,.82);text-align:left}
.woocommerce table.shop_table th{font-size:10.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute)}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}

/* --- avisos --- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  max-width:1360px;margin:0 auto clamp(14px,2vw,20px);
  padding:14px 16px;border-radius:14px;list-style:none;
  font-size:13px;line-height:1.5;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.woocommerce-message{background:rgba(232,183,77,.12);border-color:rgba(232,183,77,.34)}
.woocommerce-error{background:rgba(255,141,122,.12);border-color:rgba(255,141,122,.4)}
.woocommerce-error li{margin:0}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto;padding:9px 18px;font-size:11px}

/* --- errores de validacion del checkout --- */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{
  border-color:#ff8d7a;background:rgba(255,141,122,.07)}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-color:rgba(232,183,77,.4)}

/* ==========================================================================
   Encabezados
   Elementor fija un color global para h1-h6 con el mismo peso que nuestras
   clases, y segun cual cargue despues, los titulos salian en negro sobre
   negro. El prefijo "body" sube el peso lo justo para ganar siempre.
   ========================================================================== */
body .cabp h1,
body .cab h1,
body .ok h1,
body .e404 h1,
body .info__h,
body .caja h2,
body .caja h3,
body .paso h2,
body .vend h2,
body .of h2,
body .sel h2,
body .rev h2,
body .rel h2,
body .cifra__n,
body .woocommerce-account h2,
body .woocommerce h2,
body .woocommerce h3{color:#fff}

/* los que llevan degradado dorado no deben recibir color plano */
body .cab h1 em,
body .ok h1 em,
body .rev h2 em,
body .cabp h1 em{color:transparent}

body .footer h5,
body .prem__cab h3,
body .cabp__eye,
body .cab__eye{color:var(--oro)}
body .cabp__eye,
body .cab__eye{color:var(--mute)}

/* los dos ultimos encabezados que se escapaban: el titular del banner y los
   que WooCommerce pone dentro del formulario de compra */
body .copy h1,
body .copy h1 span,
body .chk h3,
body form.checkout h3,
body .woocommerce-billing-fields h3,
body #order_review_heading{color:#fff}
body .copy h1 .it{color:#fff}

/* ==========================================================================
   LA RAIZ DEL PROBLEMA DE COLORES
   Elementor escribe su color global en el propio <body> mediante la clase
   .elementor-kit-XXXX, y eso pesa mas que nuestro "body{color:...}". Todo lo
   que hereda color acababa en negro sobre negro: el logo, los titulos, los
   precios del banner, las etiquetas del formulario...
   Con el selector de atributo subimos una decima el peso y se acabo. Los
   colores concretos de cada pieza siguen mandando, porque son mas especificos.
   ========================================================================== */
body[class]{color:var(--tinta)}
/* Solo los enlaces sin clase heredan: los que tienen clase se quedan con el
   color que les da su propia regla, que para eso esta. */
body[class] a:not([class]){color:inherit}

/* ==========================================================================
   Formularios de WooCommerce dentro del tema
   Elementor pinta label y h3 desde su kit con reglas que en algunos casos
   llevan un id, y contra un id no hay especificidad que valga. Aqui si esta
   justificado el !important: es un ambito cerrado (nuestros formularios) y la
   alternativa seria una cadena de selectores ilegible.
   ========================================================================== */
.chk label,
.campos label,
.woocommerce-billing-fields label,
.woocommerce-form label,
.woocommerce-checkout label{color:var(--mute)!important}
.chk label .required,
.woocommerce-billing-fields label .required{color:var(--oro)!important}

.chk h3,
.woocommerce-billing-fields h3,
#order_review_heading,
.woocommerce-checkout h3{color:#fff!important}

.chk input.input-text,
.chk textarea,
.chk select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select{color:#fff!important}

/* el desplegable de orden de los listados es de WooCommerce */
.woocommerce-ordering{position:relative;display:inline-flex;align-items:center}
.woocommerce-ordering select.orderby{
  appearance:none;-webkit-appearance:none;
  padding:9px 32px 9px 14px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  color:#fff!important;font-family:inherit;font-size:12px;font-weight:600;outline:0}
.woocommerce-ordering select.orderby:hover{background:rgba(255,255,255,.1)}
.woocommerce-ordering select.orderby option{background:#141414;color:#fff}
.woocommerce-ordering::after{content:'';position:absolute;right:13px;top:50%;
  width:7px;height:7px;margin-top:-5px;pointer-events:none;
  border-right:2px solid rgba(255,255,255,.55);border-bottom:2px solid rgba(255,255,255,.55);
  transform:rotate(45deg)}

/* enlaces del carrito que heredaban negro */
.lin .lin__n{color:#fff!important}
.lin .quitar{color:rgba(255,255,255,.4)!important}
.lin .quitar:hover{color:#ff8d7a!important}

/* --- enlaces con clase: se reafirma su color por encima del kit de Elementor --- */
body[class] a.btn--oro,
body[class] a.btn--w{color:#171102}
body[class] a.btn--linea,
body[class] a.btn--o,
body[class] a.lin__n{color:#fff}
body[class] a.seguir{color:rgba(255,255,255,.7)}
body[class] a.seguir:hover{color:#fff}
body[class] a.quitar{color:rgba(255,255,255,.4)}
body[class] a.tj,
body[class] a.via,
body[class] a.sel__g,
body[class] a.cat{color:inherit}
body[class] a.chip{color:rgba(255,255,255,.78)}
body[class] a.chip.on{color:#171102}
body[class] a.vend__todo,
body[class] a.sel__todo,
body[class] a.of__todo,
body[class] a.enlacep{color:rgba(255,255,255,.7)}

/* --- caja de la forma de pago y avisos de privacidad del checkout --- */
.woocommerce-checkout .payment_box,
.woocommerce-checkout .payment_box p,
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods label{
  background:transparent!important;color:rgba(255,255,255,.7)!important}
.woocommerce-checkout .payment_box::before{display:none!important}
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{
  border:0;padding:0;margin:0 0 14px;list-style:none}
.woocommerce-checkout #payment div.form-row{padding:0}
.woocommerce-checkout #place_order{width:100%}


/* ==========================================================================
   Escalera de premios
   En el prototipo estos estilos los inyectaba el propio JavaScript; aqui
   van en la hoja, que es donde deben estar.
   ========================================================================== */
.prem{border-radius:18px;padding:clamp(15px,2.1vw,21px);
  background:linear-gradient(170deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.prem--oro{background:linear-gradient(140deg,rgba(232,183,77,.16),rgba(232,183,77,.05));
  border-color:rgba(232,183,77,.36)}
.prem__cab{display:flex;align-items:center;gap:9px;margin:0 0 4px}
.prem__cab h3{margin:0;font-size:11px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro,#e8b74d)}
.prem__cab i{flex:1 1 auto;height:1px;background:rgba(255,255,255,.12)}
.prem__t{margin:0 0 15px;font-size:14.5px;font-weight:700;line-height:1.45}
.prem__t b{font-family:var(--font-d,sans-serif);font-weight:400;font-size:1.25em;
  letter-spacing:-.02em;color:var(--oro,#e8b74d);vertical-align:-.02em}
.prem__t em{font-style:normal;color:var(--oro,#e8b74d);font-weight:800}
.prem__via{position:relative;margin:0 0 9px;padding:0 0 4px}
.prem__riel{position:absolute;left:0;right:0;top:15px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.1);overflow:hidden}
.prem__lleno{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#ffe9a8,var(--oro,#e8b74d));
  box-shadow:0 0 14px rgba(232,183,77,.55);
  transition:width .7s cubic-bezier(.22,.61,.36,1)}
.prem__pasos{position:relative;display:grid;gap:4px}
.prem__p{text-align:center;min-width:0}
.prem__b{width:34px;height:34px;margin:0 auto 7px;border-radius:99px;display:grid;
  place-items:center;position:relative;z-index:1;
  background:#141414;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.4);
  transition:background .45s ease,color .45s ease,border-color .45s ease,transform .45s ease}
.prem__b svg{width:16px;height:16px}
.prem__p.on .prem__b{background:linear-gradient(140deg,#ffe9a8,var(--oro,#e8b74d) 58%,#c8912c);
  color:#171102;border-color:transparent;box-shadow:0 6px 18px -6px rgba(232,183,77,.9)}
.prem__p.nuevo .prem__b{animation:premPop .55s cubic-bezier(.22,.61,.36,1)}
@keyframes premPop{0%{transform:scale(.7)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
.prem__n{display:block;font-size:10.5px;font-weight:800;line-height:1.3;
  color:rgba(255,255,255,.55);transition:color .4s}
.prem__p.on .prem__n{color:#fff}
.prem__e{display:block;margin-top:2px;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.32)}
.prem__p.on .prem__e{color:var(--oro,#e8b74d)}
.prem__lista{margin:13px 0 0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.1)}
.prem__l{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:12px;line-height:1.5}
.prem__l svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.prem__l--on{color:#fff}
.prem__l--on svg{color:var(--oro,#e8b74d)}
.prem__l--off{color:rgba(255,255,255,.42)}
.prem__l b{font-weight:800}
.prem__l span{color:rgba(255,255,255,.5);font-weight:500}
@media (max-width:420px){
  .prem__n{font-size:9.5px}
  .prem__b{width:30px;height:30px}
  .prem__b svg{width:14px;height:14px}
  .prem__riel{top:13px}
}

/* Ningun icono debe salirse: si a algun SVG se le olvida el tamano, que
   no reviente la maqueta como paso con los sellos y el bloque de premios. */
svg{max-width:100%}
.prem svg,.sello svg,.via__i svg,.gar3 svg,.mini2 svg{flex:0 0 auto}

/* ==========================================================================
   Campos de formulario
   Elementor pinta todos los input en blanco desde su kit con una regla de
   tres clases. Nuestros campos son oscuros, asi que se imponen. El !important
   esta acotado a los campos del tema y evita una cadena de selectores que
   nadie podria mantener.
   ========================================================================== */
.campos input,
.campos textarea,
.campos select,
form.checkout input.input-text,
form.checkout textarea,
form.checkout select,
.woocommerce-form input.input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  background:rgba(255,255,255,.05)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:11px!important}

.campos input:focus,
form.checkout input.input-text:focus,
.woocommerce form .form-row input.input-text:focus{
  border-color:var(--oro)!important;background:rgba(255,255,255,.08)!important}

/* estos van sin caja propia: viven dentro de otra */
.busca input,
.bus__f input,
.guia__campos input,
.quantity input.qty,
.cant__n{background:transparent!important;border:0!important;color:#fff!important}
.cant__n,
.quantity input.qty,
.guia__campos input{border-radius:0!important}
.guia__campos input,
.quantity input.qty,
.cant__n{padding:0!important;height:auto!important;min-height:0!important;
  box-shadow:none!important;font-size:15px!important;font-weight:700!important}
.quantity input.qty,
.cant__n{text-align:center!important}

/* La cantidad de la ficha: sin esto la pintaba Elementor, con un relleno tan
   grande que el numero se salia de la caja y parecia un recuadro blanco vacio.
   Se le quitan tambien las flechitas, que no hacen mas que dar problemas. */
.quantity{display:inline-flex;align-items:center;justify-content:center;
  min-width:70px;margin-right:10px;padding:11px 12px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.quantity input.qty{width:46px;-moz-appearance:textfield;appearance:textfield}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button,
.cant__n::-webkit-outer-spin-button,
.cant__n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cant__n{-moz-appearance:textfield;appearance:textfield;width:42px}

/* el selector de pais usa select2 y tambien se pinta claro */
.select2-container--default .select2-selection--single{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:11px!important;height:auto!important;padding:12px 13px!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#fff!important;padding:0!important;line-height:1.4!important}

/* ==========================================================================
   Popup de WhatsApp al terminar la compra
   ========================================================================== */
.modal--wa{text-align:center;max-width:min(94vw,430px)}
.modal--wa .modal__c{padding:clamp(24px,3.4vw,32px)}
.wa__i{width:60px;height:60px;margin:0 auto 16px;border-radius:99px;display:grid;
  place-items:center;background:#25d366;color:#fff;
  box-shadow:0 14px 34px -14px rgba(37,211,102,.9);
  animation:waLatido 2.4s ease-in-out infinite}
.wa__i svg{width:30px;height:30px}
@keyframes waLatido{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.modal--wa h3{margin:0 0 12px}
.modal--wa .modal__s{margin:0 0 13px;text-align:left}
.modal--wa .modal__s:last-of-type{margin-bottom:20px}
.wa__n{margin:14px 0 0;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.45)}
.wa__n b{color:var(--oro);font-weight:800}
.wa__no{display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:11.5px;color:rgba(255,255,255,.45);
  text-decoration:underline;text-underline-offset:3px}
.wa__no:hover{color:#fff}

/* --- remates del popup: el titulo y el aspa tambien los pintaba Elementor --- */
body .modal h3,
body .modal--wa h3{color:#fff}
body .modal__x{
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;
  border-radius:99px!important;
  padding:0!important;
  box-shadow:none!important;
  display:grid;place-items:center}
body .modal__x:hover{background:rgba(255,255,255,.18)!important;transform:none}
body .wa__no{background:none!important;border:0!important;box-shadow:none!important;
  color:rgba(255,255,255,.45)!important;padding:0!important;text-transform:none;
  letter-spacing:0;font-size:11.5px;font-weight:500}
body .wa__no:hover{color:#fff!important;transform:none}
body .cant button{background:transparent!important;border:0!important;box-shadow:none!important;
  color:#fff!important;padding:0!important;border-radius:0!important}
body .cant button:hover{background:rgba(255,255,255,.12)!important;transform:none}

/* ==========================================================================
   Tallas que no hay y sus alternativas
   ========================================================================== */
/* Las tallas que no tenemos se enseñan igual que las demas, a proposito: si
   salieran tachadas o apagadas nadie las tocaria, y es justo al tocarlas
   cuando se le ofrecen al cliente los modelos que si hay en su talla. Se
   marca en dorado la que ha pedido y debajo se abre el carrusel. */
.talla--no{position:relative}
.talla--no:hover{border-color:var(--oro)!important}
.talla--no.on{border-style:solid!important;
  border-color:var(--oro)!important;color:var(--oro)!important;
  background:rgba(232,183,77,.1)!important}

.otras{margin:14px 0 0;padding:14px;border-radius:16px;
  background:linear-gradient(140deg,rgba(232,183,77,.13),rgba(232,183,77,.04));
  border:1px solid rgba(232,183,77,.3);
  animation:otrasEntra .35s cubic-bezier(.22,.61,.36,1) both}
@keyframes otrasEntra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.otras__cab{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px}
.otras__t{margin:0;flex:1 1 auto;font-size:13px;line-height:1.45;font-weight:600;
  color:rgba(255,255,255,.88)}
.otras__t b{color:var(--oro);font-weight:800}
.otras__x{flex:0 0 auto;width:26px;height:26px;border-radius:99px;display:grid;
  place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;padding:0!important;box-shadow:none!important}
.otras__x:hover{background:rgba(255,255,255,.18)!important;transform:none}
.otras__x svg{width:12px;height:12px}
.otras .tira{--hueco:9px}
.otras .tj{flex:0 0 calc((100% - 9px)/2)}
@media (min-width:560px){ .otras .tj{flex:0 0 calc((100% - 18px)/3)} }

/* ==========================================================================
   Botones del tema
   Elementor da color de fondo a todo <button> desde su kit, con mas peso que
   nuestras clases sueltas. Se reafirman aqui uno por uno: es una lista finita
   y explicita, mejor que un reset general que luego pisaria a los que si
   tienen fondo propio.
   ========================================================================== */
body[class] .talla{background:rgba(255,255,255,.05);color:#fff;border-radius:11px}
body[class] .talla:hover{background:rgba(255,255,255,.1)}
body[class] .talla.on{background:#fff;color:#0a0a0a}
body[class] .talla--no.on{background:rgba(232,183,77,.1);color:var(--oro)}

body[class] .flecha,
body[class] .ham,
body[class] .busca__b,
body[class] .mas__b{background:rgba(255,255,255,.07);color:#fff}
body[class] .flecha:hover,
body[class] .ham:hover,
body[class] .mas__b:hover{background:rgba(255,255,255,.14)}
body[class] .busca__b{background:transparent}

body[class] .det__b,
body[class] .faq__b,
body[class] .grupo > button,
body[class] .wa__no,
body[class] .quitar{background:transparent;color:#fff;box-shadow:none}
body[class] .det__b:hover,
body[class] .faq__b:hover{background:transparent}

body[class] .chip{background:rgba(255,255,255,.05);color:rgba(255,255,255,.78)}
body[class] .chip.on{background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);
  color:#171102}

body[class] .pest button{background:transparent;color:rgba(255,255,255,.62)}
body[class] .pest button.on{background:#fff;color:#141414}

/* Las pestañas de categorias son texto, no botones: Elementor les metia su
   fondo y su relleno y salian como barras blancas de lado a lado. */
body[class] .sel__b{background:none!important;border:0!important;
  padding:7px 0!important;border-radius:0!important;width:auto!important;
  min-height:0!important;box-shadow:none!important;
  color:rgba(255,255,255,.3)!important}
body[class] .sel__b:hover{color:rgba(255,255,255,.6)!important}
body[class] .sel__b.on{background:none!important;color:#fff!important}

/* los ultimos dos botones que el kit de Elementor todavia pintaba de azul */
body[class] button.btn--oro,
body[class] .btn--oro{color:#171102}
body[class] button.btn--linea,
body[class] .btn--linea{background:rgba(255,255,255,.05);color:#fff}
body[class] button.btn--w{background:#fff;color:#111}
body[class] button.btn--o{background:transparent;color:#fff}
body[class] .pt{background:rgba(255,255,255,.28);box-shadow:none}
body[class] .pt.is-on{background:#fff}

/* El conmutador flotante de TranslatePress sobra aqui: este tema ya lo lleva
   en la cabecera y en el panel, y el flotante se plantaba encima del
   contenido en el movil. Solo se oculta con este tema; la web de siempre
   sigue teniendo el suyo. */
.trp-floating-switcher{display:none!important}

/* Mientras esta puesta la barra de compra, el carrito flotante del plugin se
   aparta: en el movil se plantaba justo encima del boton de comprar, que es
   el que tiene que estar libre. El de WhatsApp queda por encima y no estorba. */
body.kd-con-barra .cc-compass{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}

/* ==========================================================================
   Guia de tallas
   ========================================================================== */

/* El enlace, junto al rotulo de las tallas. Va con body[class] porque
   Elementor pinta todos los botones de azul con su propio relleno, y este
   salia como un boton azul en vez de como un enlace. */
body[class] .guia__ab{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:none!important;border:0!important;cursor:pointer;
  font-family:inherit;font-size:11.5px!important;font-weight:700!important;
  letter-spacing:.02em;line-height:1.2!important;
  color:var(--oro)!important;text-decoration:underline;text-underline-offset:3px;
  padding:0!important;border-radius:0!important;box-shadow:none!important;
  min-height:0!important;width:auto!important}
.guia__ab:hover{color:var(--gold-hi)}
.guia__ab svg{width:15px;height:15px;flex:0 0 auto}
.tallas__cab{display:flex;align-items:center;gap:10px}

body.kd-sin-scroll{overflow:hidden}

.guia[hidden]{display:none!important}
/* muy arriba a proposito: por encima van el carrito flotante, el boton de
   WhatsApp y el aviso de "alguien acaba de comprar", que si no se plantan
   encima de la guia */
.guia{position:fixed;inset:0;z-index:1000000;display:grid;place-items:center;
  padding:clamp(12px,3vw,26px)}

body.kd-sin-scroll .cc-compass,
body.kd-sin-scroll .joinchat,
body.kd-sin-scroll .popup_position{opacity:0!important;pointer-events:none!important}
.guia__velo{position:absolute;inset:0;background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.guia__caja{position:relative;z-index:1;width:min(96vw,720px);
  max-height:min(88vh,860px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--linea);border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);overflow:hidden;
  animation:guiaEntra .3s var(--ease) both}
@keyframes guiaEntra{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}

.guia__cab{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px clamp(16px,2.4vw,24px);border-bottom:1px solid var(--linea)}
.guia__cab h2{margin:0;font-family:var(--font-d);font-size:clamp(16px,2vw,20px);
  letter-spacing:.01em;text-transform:uppercase}
.guia__x{background:none;border:0;cursor:pointer;color:rgba(255,255,255,.55);
  padding:4px;display:grid;place-items:center;border-radius:8px}
.guia__x:hover{color:#fff;background:rgba(255,255,255,.07)}
.guia__x svg{width:19px;height:19px}

/* En columna y sin encoger: la tabla lleva su propio desplazamiento lateral y
   una rejilla se la comia, aplastandola a cuatro pixeles para que todo cupiera.
   Asi conserva su alto y es el cuadro el que se desplaza. */
.guia__cuerpo{overflow-y:auto;padding:clamp(16px,2.4vw,24px);
  display:flex;flex-direction:column;gap:18px}
.guia__cuerpo > *{flex:0 0 auto}

.guia__exacta{margin:0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.72)}
.guia__exacta b{color:var(--oro);font-weight:800}

/* calculadora */
.guia__cal{background:rgba(255,255,255,.04);border:1px solid var(--linea);
  border-radius:15px;padding:clamp(14px,2vw,18px)}
.guia__calt{margin:0 0 4px;font-family:var(--font-d);font-size:13px;
  text-transform:uppercase;letter-spacing:.04em}
.guia__ayuda{margin:0 0 13px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.55)}
.guia__campos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:13px}
.guia__campos label{flex:1 1 130px;display:block}
.guia__campos span{display:block;margin-bottom:5px;font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.guia__campos i{display:flex;align-items:center;gap:6px;font-style:normal;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:11px;padding:10px 13px}
.guia__campos input{flex:1 1 auto;min-width:0;background:transparent;border:0;
  color:#fff;font-family:inherit;font-size:15px;font-weight:700;outline:0;
  -moz-appearance:textfield;appearance:textfield}
.guia__campos input::-webkit-outer-spin-button,
.guia__campos input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.guia__campos em{flex:0 0 auto;font-style:normal;font-size:12px;font-weight:700;
  color:rgba(255,255,255,.4)}
.guia__btn{width:100%}
.guia__res{margin:13px 0 0;padding:11px 14px;border-radius:11px;
  font-size:13.5px;font-weight:700;text-align:center;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.7)}
.guia__res.on{background:rgba(232,183,77,.14);color:var(--oro);
  border:1px solid rgba(232,183,77,.35)}
.guia__res[hidden]{display:none!important}

/* tabla */
.guia__tabla{overflow-x:auto;border:1px solid var(--linea);border-radius:14px}
.guia__tabla table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:380px}
.guia__tabla th,.guia__tabla td{padding:9px 11px;text-align:center;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.07)}
.guia__tabla th{background:rgba(255,255,255,.05);font-size:10.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62);
  position:sticky;top:0}
.guia__tabla th small{display:block;font-size:9px;font-weight:600;
  letter-spacing:.04em;color:rgba(255,255,255,.35);text-transform:none}
.guia__tabla tbody tr:last-child td{border-bottom:0}
.guia__tabla td b{color:#fff;font-weight:800}
.guia__tabla tbody tr.on{background:rgba(232,183,77,.13)}
.guia__tabla tbody tr.on td b{color:var(--oro)}

.guia__pie,.guia__dudas{margin:0;font-size:11.5px;line-height:1.55;
  color:rgba(255,255,255,.45)}
.guia__dudas a{color:var(--oro);font-weight:700}

@media (max-width:560px){
  .guia{padding:0;place-items:end stretch}
  .guia__caja{width:100%;max-height:92vh;border-radius:20px 20px 0 0;border-bottom:0}
}

/* ==========================================================================
   Paginado de los listados

   WordPress lo sacaba como una lista suelta: numeros azules y rojos con sus
   puntitos de lista. Ojo con una trampa: WooCommerce le pone la clase
   "page-numbers" tambien al <ul> que envuelve, no solo a cada numero; si no se
   excluye, la lista entera se lleva la pastilla.
   ========================================================================== */
.mas{display:flex;justify-content:center;padding:0 clamp(16px,3.4vw,40px)
  clamp(30px,4vw,48px)}

body[class] .mas ul.page-numbers,
body[class] .mas .nav-links{display:flex;justify-content:center;align-items:center;
  gap:7px;flex-wrap:wrap;list-style:none;margin:0;padding:0;
  background:none!important;border:0!important}
body[class] .mas ul.page-numbers li{margin:0;padding:0;list-style:none}
.mas .screen-reader-text{position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

body[class] .mas :not(ul) > .page-numbers,
body[class] .mas .nav-links > .page-numbers{display:inline-flex;align-items:center;
  justify-content:center;min-width:40px;height:40px;padding:0 13px;
  border-radius:11px;text-decoration:none;
  font-family:var(--font-b);font-size:13px;font-weight:700;line-height:1;
  color:rgba(255,255,255,.6);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease)}

body[class] .mas a.page-numbers:hover{color:#fff;background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.22)}

body[class] .mas .page-numbers.current{color:#171102;border-color:transparent;
  background:linear-gradient(96deg,var(--gold-hi),var(--oro) 58%,#c9922c);
  box-shadow:0 8px 20px -10px rgba(232,183,77,.8)}

body[class] .mas .page-numbers.dots{background:none;border-color:transparent;
  color:rgba(255,255,255,.35);min-width:auto;padding:0 3px}

/* ==========================================================================
   El relleno de sus botones

   Elementor le mete a TODO boton 16px 26px de relleno, y eso gana a nuestras
   reglas de una sola clase. El resultado se veia: la lupa quedaba aplastada
   dentro de su circulo (parecia un boton gris vacio), las tallas salian
   larguisimas y las pestañas de categorias como barras de lado a lado.

   Aqui se le devuelve a cada boton del tema el relleno que le toca. Solo se
   nombran clases nuestras: los botones de los plugins no se tocan.
   ========================================================================== */

body[class] .busca__b,
body[class] .ham,
body[class] .flecha,
body[class] .talla,
body[class] .cant button,
body[class] .gal__t button,
body[class] .otras__x,
body[class] .pt,
body[class] .fija .btn{padding:0!important}

body[class] .busca input{padding:0 11px 0 0!important;height:auto!important;
  min-height:0!important}

/* el buscador grande de la pagina de resultados */
body[class] .bus__f input{padding:12px 0!important;height:auto!important;
  min-height:0!important}
body[class] .bus__f button{padding:0!important;min-height:0!important}

body[class] .guia__x{padding:4px!important}
body[class] .det__b{padding:15px 0!important}
body[class] .faq__b{padding:16px 0!important}
body[class] .grupo > button{padding:13px 0!important}

/* y que ninguno herede alturas ni sombras que no son suyas */
body[class] .busca__b,
body[class] .ham,
body[class] .flecha,
body[class] .talla,
body[class] .cant button,
body[class] .gal__t button,
body[class] .otras__x,
body[class] .guia__x,
body[class] .det__b,
body[class] .faq__b,
body[class] .grupo > button,
body[class] .sel__b{min-height:0!important;box-shadow:none!important;
  line-height:normal!important}

/* ==========================================================================
   La tabla de variaciones de WooCommerce

   WooCommerce envuelve el desplegable de tallas en una tabla con su propio
   rotulo. Como el rotulo lo pone nuestro bloque de tallas, salian dos "Talla":
   el nuestro y el suyo, este ultimo en azul y metido en su celda. Se aplana la
   tabla y se deja solo lo nuestro.
   ========================================================================== */
body[class] table.variations,
body[class] table.variations tbody,
body[class] table.variations tr,
body[class] table.variations td.value{display:block!important;width:100%!important;
  margin:0!important;padding:0!important;border:0!important;background:none!important}

body[class] table.variations th.label,
body[class] table.variations .reset_variations{display:none!important}

/* ==========================================================================
   El aviso de ventas recientes (plugin Salert)

   Venia como una tarjeta enorme con borde blanco que en el movil se comia
   media pantalla. Aqui se queda pequeño, en una esquina y con la ropa del
   tema. El plugin no se toca: esto solo vale con este tema puesto.

   Los selectores llevan #salertWrapper porque asi escribe los suyos el
   plugin, y sin eso no habria manera de ganarle.
   ========================================================================== */

#salertWrapper .popup_position{width:auto!important;max-width:calc(100vw - 28px)!important}
#salertWrapper .popup_position.bottomLeft,
#salertWrapper .popup_position.topLeft{left:14px!important;right:auto!important}
#salertWrapper .popup_position.bottomRight,
#salertWrapper .popup_position.topRight{right:14px!important;left:auto!important}
#salertWrapper .popup_position.bottomLeft,
#salertWrapper .popup_position.bottomRight{bottom:14px!important;top:auto!important}

#salertWrapper .popup_template{
  position:relative!important;
  /* el plugin le mete un bottom propio que lo sacaba de la pantalla */
  bottom:auto!important;top:auto!important;left:auto!important;right:auto!important;
  width:auto!important;max-width:268px!important;min-width:0!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
  background:rgba(14,14,14,.93)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:14px!important;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

#salertWrapper .popup-item{
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:8px 26px 8px 8px!important;margin:0!important;width:auto!important;
  min-height:0!important;background:none!important;border:0!important;float:none!important}

/* dentro hay un enlace que envuelve la foto y el texto: si no se le dice que
   es la fila, los apila uno debajo del otro y el aviso crece el doble */
#salertWrapper .popup-item > a{
  display:flex!important;align-items:center!important;gap:10px!important;
  flex:1 1 auto!important;min-width:0!important;width:auto!important;
  margin:0!important;padding:0!important;text-decoration:none!important}

#salertWrapper .salert-img{
  flex:0 0 auto!important;width:42px!important;height:42px!important;
  margin:0!important;padding:0!important;border:0!important;
  border-radius:9px!important;overflow:hidden!important;float:none!important}
#salertWrapper .salert-img img{width:100%!important;height:100%!important;
  object-fit:cover!important;display:block!important;border-radius:0!important;
  margin:0!important;max-width:none!important}

#salertWrapper .popup_position .salert-content-wrap{
  flex:1 1 auto!important;min-width:0!important;
  margin:0!important;padding:0!important;width:auto!important;float:none!important;
  font-family:var(--font-b)!important;font-size:11.5px!important;
  line-height:1.35!important;color:rgba(255,255,255,.82)!important;text-align:left!important}
#salertWrapper .popup_position .salert-content-wrap p{margin:0!important;padding:0!important;
  font-size:inherit!important;line-height:inherit!important;color:inherit!important;
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden!important}
#salertWrapper .popup_position .salert-content-wrap b,
#salertWrapper .popup_position .salert-content-wrap strong,
#salertWrapper .popup_position .salert-content-wrap a{color:#fff!important;font-weight:700!important;
  text-decoration:none!important}

#salertWrapper .popup_position .timehace,
#salertWrapper .popup_position .time{display:inline!important;margin:0!important;
  font-size:9.5px!important;font-style:normal!important;font-weight:600!important;
  letter-spacing:.02em!important;color:rgba(255,255,255,.4)!important}
#salertWrapper .popup_position .timehace{margin-left:0!important}

#salertWrapper .close{position:absolute!important;top:5px!important;right:5px!important;
  margin:0!important;padding:0!important}
#salertWrapper .close-btn{width:20px!important;height:20px!important;
  padding:0!important;margin:0!important;min-height:0!important;
  background:none!important;border:0!important;box-shadow:none!important;
  color:rgba(255,255,255,.45)!important;cursor:pointer;
  display:grid!important;place-items:center!important}
#salertWrapper .close-btn:hover{color:#fff!important}
#salertWrapper .close-btn svg{width:11px!important;height:11px!important}

@media (max-width:560px){
  #salertWrapper .popup_template{max-width:min(76vw,248px)!important}
  #salertWrapper .salert-img{width:36px!important;height:36px!important}
  #salertWrapper .popup_position .salert-content-wrap{font-size:11px!important}
  #salertWrapper .popup_position.bottomLeft,
  #salertWrapper .popup_position.bottomRight{bottom:12px!important}
}

/* ==========================================================================
   Filtro de tallas de los listados
   ========================================================================== */
.ftl{border-bottom:1px solid var(--linea);background:rgba(255,255,255,.015)}
.ftl__in{max-width:1360px;margin:0 auto;padding:13px clamp(16px,3.4vw,40px)}

.ftl__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:9px}
.ftl__t{display:inline-flex;align-items:center;gap:7px;margin:0;
  font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.ftl__t svg{width:14px;height:14px;color:var(--oro);flex:0 0 auto}
.ftl__x{font-size:11.5px;font-weight:700;color:var(--oro);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
.ftl__x:hover{color:var(--gold-hi)}

.ftl__g{display:flex;align-items:center;gap:10px}
.ftl__g + .ftl__g{margin-top:8px}
.ftl__e{flex:0 0 auto;min-width:52px;font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.32)}

.ftl__l{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:2px}
.ftl__l::-webkit-scrollbar{display:none}

.ftl__b{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;min-width:46px;padding:7px 10px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  text-decoration:none;line-height:1;
  transition:background .2s,border-color .2s,transform .18s}
.ftl__b b{font-size:13px;font-weight:800;color:#fff;line-height:1}
.ftl__b i{font-style:normal;font-size:9.5px;font-weight:700;line-height:1;
  color:rgba(255,255,255,.38)}
.ftl__b:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);
  transform:translateY(-1px)}
.ftl__b.on{background:linear-gradient(140deg,var(--gold-hi),var(--oro) 58%,#c8912c);
  border-color:transparent}
.ftl__b.on b{color:#171102}
.ftl__b.on i{color:rgba(23,17,2,.62)}

/* en pantalla ancha caben todas sin desplazar */
@media (min-width:720px){ .ftl__l{flex-wrap:wrap;overflow:visible} }

/* en el movil, el rotulo del grupo encima y las tallas se deslizan */
@media (max-width:719px){
  .ftl__g{flex-direction:column;align-items:flex-start;gap:5px}
  .ftl__g + .ftl__g{margin-top:11px}
  .ftl__e{min-width:auto}
  .ftl__l{width:100%}
}

/* Elementor pinta los enlaces con su color global */
body[class] .ftl__b b{color:#fff}
body[class] .ftl__b.on b{color:#171102}
body[class] .ftl__x{color:var(--oro)}


/* Ficha de producto: las columnas de la rejilla no se estiran con lo que llevan dentro.
   Sin esto, la fila de "No tenemos este en la X, pero si estos" (tarjetas en
   horizontal) ensanchaba la columna y en el movil la pagina salia ampliada. */
.prod > *{min-width:0}
/* Precio tachado + precio + "IVA incluido" no caben en un movil de 375px: se deja bajar de linea. */
.info .precio{flex-wrap:wrap;row-gap:2px}