/* ==========================================================================
   ZAPAFLASH — hoja de estilos del tema
   Blanco, ambar (la estrella del logo) y negro; formas inclinadas. La base de
   componentes viene del tema de kingdrip; el sistema visual, que es lo que
   ve el cliente, esta al final del fichero y es propio.
   ========================================================================== */

:root{
  --fondo:#ffffff;
  --fondo2:#f7f3eb;         /* crema calido para franjas y pie */
  --panel:#ffffff;
  --tinta:#111111;
  --mute:rgba(17,17,17,.6);
  --linea:rgba(17,17,17,.12);
  --ambar:#f2a516;          /* el ambar de la estrella */
  --ambar-hi:#ffc34d;
  --ambar-os:#b7750a;       /* ambar oscuro: texto sobre blanco, sombras */
  --ambar-cl:#fff3d6;       /* tinte suave */
  --negro:#111111;
  --font-d:'Oswald','Arial Narrow',Impact,sans-serif;
  --font-b:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --c1:#f2a516;
  --c2:#fff3d6;
  --c3:#ffffff;
}



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

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

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

/* ================= 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,.8);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 0 rgba(0,0,0,.017) 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(255,255,255,.9);
  border-bottom-color:rgba(0,0,0,.112);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.18),0 1px 0 rgba(0,0,0,.019) 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:#111;text-decoration:none;white-space:nowrap;
  text-shadow:none;
}

.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(17,17,17,.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(--ambar,#f2a516);transition:right .3s var(--ease);
}

.nav__links a:hover{color:#111}

.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(0,0,0,.064);
  border:1px solid rgba(0,0,0,.128);
  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(0,0,0,.112);border-color:rgba(0,0,0,.24)}

.busca__b{
  flex:0 0 34px;width:34px;height:34px;
  display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:#111;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:#111;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(17,17,17,.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(255,255,255,.97);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(0,0,0,.104);border-radius:16px;
  box-shadow:0 28px 64px -22px rgba(0,0,0,.255);
  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(--ambar)}

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

.sub a::after{display:none}

.sub a:hover{color:#111;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(0,0,0,.072);
  color:#111;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(17,17,17,.72);border-bottom:1px solid rgba(0,0,0,.044)}

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

/* ================= FRANJA DE AVISOS ================= */
.aviso{
  position:relative;z-index:4;overflow:hidden;
  background:linear-gradient(96deg,var(--ambar-hi,#ffc34d),var(--ambar) 42%,var(--ambar-os));
  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(242,165,22,.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:#fff;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(255,255,255,.55)}

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

.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(17,17,17,.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:#111}

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

.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:var(--fondo2);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(0,0,0,.08)}

.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(17,17,17,.55)}

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

.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:#111}

.cat{
  position:relative;display:block;border-radius:14px;overflow:hidden;
  background:#e9e9ec;text-decoration:none;color:#fff;
  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(--ambar)}

.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(0,0,0,.112);border:1px solid rgba(0,0,0,.192);
  backdrop-filter:blur(8px);color:#111;
  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:#111;text-decoration:none;padding:.85em 1.6em;border-radius:99px;
  border:1px solid rgba(0,0,0,.208);transition:background .2s,color .2s}

.cats__todo:hover{background:#111;color:#fff}

.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:var(--fondo);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(17,17,17,.55)}

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

.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:#111}

.gar h2 em{font-family:var(--font-b);font-style:italic;font-weight:900;
  background:linear-gradient(96deg,var(--ambar-hi),var(--ambar) 52%,var(--ambar-os));
  -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(0,0,0,.056),rgba(0,0,0,.02));
  border:1px solid rgba(0,0,0,.088);
  transition:border-color .3s ease,transform .3s var(--ease);
}

.pilar:hover{border-color:rgba(242,165,22,.4);transform:translateY(-3px)}

.pilar__i{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  margin:0 0 15px;color:#fff;
  background:linear-gradient(140deg,var(--ambar-hi),var(--ambar) 60%,var(--ambar-os));
  box-shadow:0 8px 22px -8px rgba(242,165,22,.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:#111}

.pilar p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(17,17,17,.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(0,0,0,.032);border:1px solid rgba(0,0,0,.072)}

.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(--ambar-hi),var(--ambar) 55%,var(--ambar-os));
  -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(17,17,17,.5)}

/* ================= NOVEDADES ================= */
.nue{background:var(--fondo2);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(--ambar-hi),var(--ambar));color:#fff;
  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(--ambar-hi),var(--ambar) 55%,var(--ambar-os));color:#fff;
  box-shadow:0 14px 34px -10px rgba(242,165,22,.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:#111}

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

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

.ig__b:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(242,165,22,.8)}

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

/* ================= CIFRAS ================= */
.cifrasSec{background:var(--fondo);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:var(--fondo2);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:#111}

.of h2 em{font-family:var(--font-b);font-style:italic;font-weight:900;
  background:linear-gradient(96deg,var(--ambar-hi),var(--ambar) 52%,var(--ambar-os));
  -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(--ambar-hi),var(--ambar));color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* ================= SELECTOR DE CATEGORIAS ================= */
.sel{background:var(--fondo);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(17,17,17,.55)}

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

.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:#111}

.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(0,0,0,.24);
  transition:color .3s var(--ease),transform .3s var(--ease);
}

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

.sel__b.on{color:#111}

@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:#e9e9ec;text-decoration:none;color:#fff;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,.7)}

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

/* 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:#111;text-decoration:none;
  padding:.85em 1.6em;border-radius:99px;border:1px solid rgba(0,0,0,.208);
  transition:background .2s,color .2s}

.sel__todo:hover{background:#111;color:#fff}

.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:var(--fondo2);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(--ambar) 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(17,17,17,.55)}

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

.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:#111}

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

.rev__sub{margin:9px 0 0;font-size:13px;line-height:1.5;color:rgba(17,17,17,.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:#f3f3f5;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.27);
  transition:transform .4s var(--ease),border-color .4s ease;
}

.rv:hover{transform:translateY(-4px);border-color:rgba(242,165,22,.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(17,17,17,.88);border:1px solid rgba(0,0,0,.1);
  backdrop-filter:blur(8px);
  font-size:9px;font-weight:700;letter-spacing:.06em;color:rgba(17,17,17,.8)}

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

@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(17,17,17,.45)}

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

/* ================= MAS VENDIDOS ================= */
.vend{position:relative;background:var(--fondo);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(0,0,0,.08)}

.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(17,17,17,.55)}

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

.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:#111}

.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(0,0,0,.056);border:1px solid rgba(0,0,0,.16);
  color:#111;cursor:pointer;padding:0;transition:background .2s,opacity .2s}

.flecha:hover{background:rgba(0,0,0,.128)}

.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:#111;text-decoration:none;
  white-space:nowrap;padding:.7em 1.15em;border-radius:99px;
  border:1px solid rgba(0,0,0,.208);transition:background .2s,color .2s}

.vend__todo:hover{background:#111;color:#fff}

.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:#e9e9ec;
  text-decoration:none;color:#fff;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(17,17,17,.88);border:1px solid rgba(0,0,0,.1);
  backdrop-filter:blur(8px);font-size:10px;font-weight:800;color:#111}

.carta--top .carta__pos{background:var(--ambar);color:#fff;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(0,0,0,.064);border:1px solid rgba(0,0,0,.128);
  cursor:pointer;padding:0;
}

.ham i{
  display:block;width:15px;height:1.5px;background:#111;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(255,255,255,.97);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,.096);
  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:#111;text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.072);
}

.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}
}

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


body{background:var(--fondo);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,.8);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:background .45s var(--ease)}

.nav.compacta{background:rgba(255,255,255,.92)}

.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:#111;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(17,17,17,.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(17,17,17,.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(--ambar);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(255,255,255,.97);backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(0,0,0,.104);border-radius:16px;
  box-shadow:0 28px 64px -22px rgba(0,0,0,.255);
  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(--ambar)}

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

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

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

.busca__b{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:#111;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:#111;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(0,0,0,.064);border:1px solid rgba(0,0,0,.128);cursor:pointer;padding:0}

.ham i{display:block;width:14px;height:1.5px;background:#111;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(255,255,255,.97);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,.096);
  transform:translateY(-101%);transition:transform .48s var(--ease)}

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

.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(0,0,0,.072);
  color:#111;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(17,17,17,.72);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.044)}

@media (min-width:1280px){
  .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(242,165,22,.084),rgba(242,165,22,.03));
  border:1px solid rgba(242,165,22,.32);
}

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

.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(--ambar);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:#111}

.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(--ambar)}

.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(0,0,0,.056);border:1px solid rgba(0,0,0,.16);
  color:#111;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:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 34px -20px rgba(0,0,0,.27),0 1px 0 rgba(0,0,0,.019) inset;
  transition:transform .4s var(--ease),border-color .35s ease,box-shadow .35s ease}

.tj:hover{transform:translateY(-4px);border-color:rgba(242,165,22,.4);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.285),0 1px 0 rgba(0,0,0,.034) 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(--ambar)}

@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(--ambar-hi,#ffc34d),var(--ambar) 42%,var(--ambar-os));
  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(242,165,22,.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(--ambar)}

.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(--ambar-hi),var(--ambar) 52%,var(--ambar-os));
  -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(0,0,0,.044);border:1px solid rgba(0,0,0,.096);
  font-size:11.5px;font-weight:600;color:rgba(17,17,17,.8)}

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

.sello--oro{background:rgba(242,165,22,.066);border-color:rgba(242,165,22,.3);color:var(--ambar)}

@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(0,0,0,.012)}

.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(0,0,0,.04);border:1px solid rgba(0,0,0,.096);
  color:rgba(17,17,17,.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(0,0,0,.08);color:#111;transform:translateY(-1px)}

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

.chip.on{background:linear-gradient(140deg,var(--ambar-hi),var(--ambar) 58%,var(--ambar-os));
  border-color:transparent;color:#fff}

.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:#111;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(0,0,0,.044);border:1px solid rgba(0,0,0,.112);
  color:#111;font-family:inherit;font-size:12px;font-weight:600;outline:0;
  transition:border-color .22s,background .22s}

.orden select:hover{background:rgba(0,0,0,.08)}

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

.orden option{background:#f3f3f5;color:#111}

/* ============ 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(--ambar-hi),var(--ambar) 58%,var(--ambar-os));color:#fff}

.tj__eti--n{background:rgba(17,17,17,.82);color:#fff;
  border:1px solid rgba(0,0,0,.176);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(17,17,17,.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(0,0,0,.048);border:1px solid rgba(0,0,0,.144);
  color:#111;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(0,0,0,.096);border-color:rgba(242,165,22,.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(0,0,0,.08);
  overflow:hidden}

.mas__bar i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--ambar-hi),var(--ambar));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(0,0,0,.032);
  border:1px solid rgba(0,0,0,.064);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(--ambar-hi),var(--ambar));color:#fff;
  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(--ambar)}

.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(--ambar)}

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(--ambar)}

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

.valor__t a{color:#111;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.24)}

.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(--ambar-hi),var(--ambar) 55%,var(--ambar-os));
  -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:#111;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(0,0,0,.04);border:1px solid rgba(0,0,0,.112);
  color:#111;font-family:inherit;font-size:13.5px;font-weight:700;
  transition:background .2s,border-color .2s,color .2s,transform .12s;
}

.talla:hover{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.24)}

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

.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(--ambar-hi),var(--ambar) 52%,var(--ambar-os));
  color:#fff;box-shadow:0 12px 32px -10px rgba(242,165,22,.65)}

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

.btn--linea{background:rgba(0,0,0,.04);color:#111;border-color:rgba(0,0,0,.192)}

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

.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(0,0,0,.032);border:1px solid rgba(0,0,0,.072)}

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

.gar3 span{display:block;font-size:10.5px;font-weight:600;line-height:1.3;color:rgba(17,17,17,.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:#111;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(255,255,255,.94);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border-top:1px solid rgba(0,0,0,.096);
  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(--ambar);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:#f3f3f5;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 16px 36px -22px rgba(0,0,0,.27);
  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(0,0,0,.128);backdrop-filter:blur(8px);
  font-size:8.5px;font-weight:700;letter-spacing:.05em;color:rgba(17,17,17,.8)}

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

/* ============ 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:#fff;border:1px solid rgba(0,0,0,.112);
  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(0,0,0,.064);
  border:1px solid rgba(0,0,0,.128);color:#111;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(0,0,0,.032);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(--ambar)}

.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(0,0,0,.04);border:1px solid rgba(0,0,0,.112);
  color:#111;font-family:inherit;font-size:14px;outline:none;
  transition:border-color .2s,background .2s}

.campo input:focus,.campo select:focus{border-color:var(--ambar);background:rgba(0,0,0,.064)}

.campo input::placeholder{color:rgba(0,0,0,.24)}

.campo select option{background:#fff}

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

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

.campo.mal input,.campo.mal select{border-color:#c62828;background:rgba(198,40,40,.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(0,0,0,.04);border:1px solid rgba(0,0,0,.112);
  transition:border-color .2s,background .2s}

.tel:focus-within{border-color:var(--ambar);background:rgba(0,0,0,.064)}

.campo.mal .tel{border-color:#c62828;background:rgba(198,40,40,.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(--ambar);
  background:rgba(0,0,0,.04);border-right:1px solid rgba(0,0,0,.096)}

.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(242,165,22,.054);border:1px solid rgba(242,165,22,.3);margin:0 0 18px}

.pago svg{width:22px;height:22px;color:var(--ambar);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(17,17,17,.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(17,17,17,.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(--ambar)}

.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(--ambar-hi),var(--ambar) 52%,var(--ambar-os));
  -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(--ambar-hi),var(--ambar) 58%,var(--ambar-os));color:#fff;
  box-shadow:0 12px 30px -14px rgba(242,165,22,.9)}

.btn--oro:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(242,165,22,1.0)}

.btn--linea{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.16);color:#111}

.btn--linea:hover{background:rgba(0,0,0,.088);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:#fff;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px -22px rgba(0,0,0,.25)}

.caja--oro{background:linear-gradient(140deg,rgba(242,165,22,.084),rgba(242,165,22,.03));
  border-color:rgba(242,165,22,.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(0,0,0,.044);border:1px solid rgba(0,0,0,.096);color:var(--ambar)}

.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(0,0,0,.032);border:1px solid rgba(0,0,0,.072)}

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

.gar3 span{display:block;font-size:10.5px;font-weight:700;line-height:1.35;color:rgba(17,17,17,.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(--ambar)}

.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(--ambar);letter-spacing:-.02em;white-space:nowrap}

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

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

.cant button:hover{background:rgba(0,0,0,.096)}

.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(17,17,17,.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:#c62828}

.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:#111;font-weight:700}

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

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

.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(--ambar)}

.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(17,17,17,.7);text-decoration:none}

.seguir:hover{color:#111}

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

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

#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(--ambar);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(--ambar-hi),var(--ambar) 58%,var(--ambar-os));color:#fff;
  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(198,40,40,.1);border:1px solid rgba(198,40,40,.35)}

.canarias.on{display:flex}

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

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

.canarias b{color:#c62828}

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

.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(--ambar-hi),var(--ambar) 58%,var(--ambar-os));color:#fff;
  box-shadow:0 16px 40px -16px rgba(242,165,22,.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(--ambar-hi),var(--ambar) 52%,var(--ambar-os));
  -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(0,0,0,.044);border:1px solid rgba(0,0,0,.104);
  font-size:11.5px;font-weight:700}

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

.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(17,17,17,.45);text-align:center}

.guarda__n b{color:var(--ambar);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(17,17,17,.82);border-bottom:1px solid rgba(0,0,0,.056)}

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

.mini2 b{color:var(--ambar);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(0,0,0,.044);border:1px solid rgba(0,0,0,.104)}

.pest button{padding:8px 18px;border-radius:99px;cursor:pointer;background:none;border:0;
  color:rgba(17,17,17,.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:#111;color:#fff}

.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:#111}

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

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

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

.ventaja svg{width:17px;height:17px;color:var(--ambar);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(242,165,22,.078);border:1px solid rgba(242,165,22,.32);color:var(--ambar)}

.estado--cam{background:rgba(0,0,0,.048);border:1px solid rgba(0,0,0,.128);color:#111}

.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:#fff;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px -22px rgba(0,0,0,.25);
  transition:transform .3s var(--ease),border-color .3s}

.via:hover{transform:translateY(-3px);border-color:rgba(242,165,22,.4)}

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

.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(--ambar)}

.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:#111;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(--ambar)}

.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(0,0,0,.048);border:1px solid rgba(0,0,0,.128);
  transition:border-color .25s}

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

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

.bus__f input::placeholder{color:rgba(17,17,17,.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(--ambar-hi),var(--ambar) 58%,var(--ambar-os));
  color:#fff;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(17,17,17,.75);background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.096);transition:background .2s,color .2s}

.sug a:hover{background:rgba(0,0,0,.088);color:#111}

/* (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:#111;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(0,0,0,.176),rgba(0,0,0,.032));
  -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(--ambar)}

.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(17,17,17,.75);background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.096);transition:background .2s,color .2s}

.e404__l a:hover{background:rgba(0,0,0,.096);color:#111}


/* ==========================================================================
   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(0,0,0,.056)!important;
  --bg-hover:rgba(0,0,0,.112)!important;
  --text:rgba(17,17,17,.85)!important;
  --text-hover:#fff!important;
  --border:1px solid rgba(0,0,0,.128)!important;
  --border-color:rgba(0,0,0,.128)!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:#111}
.nav .nav__links a{color:rgba(17,17,17,.82)}
.nav .nav__links a:hover{color:#111}
.nav .sub a{color:rgba(17,17,17,.76)}
.nav .sub a:hover{color:#111}
.nav .nav__volver{color:rgba(17,17,17,.8)}
.panel .grupo__c a{color:rgba(17,17,17,.72)}
body .panel > a{color:#111}
.footer .redes a{color:#111}
.footer li a{color:rgba(17,17,17,.66)}
.footer li a:hover{color:#111}
.migas a{color:var(--mute)}
.migas a:hover{color:#111}
.tj:hover .tj__n{color:inherit}
body a.tj{color:inherit}
body a.btn--oro{color:#fff}
body a.btn--linea{color:#111}
.subs .chip{color:rgba(17,17,17,.78)}
.subs .chip.on{color:#fff}
.e404__l a{color:rgba(17,17,17,.75)}
.sug a{color:rgba(17,17,17,.75)}
.vias .via{color:inherit}
.lin .lin__n{color:inherit}
.seguir{color:rgba(17,17,17,.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:#111;
  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:#111;color:#fff;
  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:#fff;
  border:1px solid rgba(0,0,0,.08)}
.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:#111;
  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(--ambar);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(0,0,0,.04);border:1px solid rgba(0,0,0,.112);
  color:#111;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(--ambar);background:rgba(0,0,0,.064)}
.woocommerce form .form-row input::placeholder{color:rgba(0,0,0,.24)}
.woocommerce .password-input,.woocommerce .show-password-input{width:100%}
.woocommerce .show-password-input::after{color:rgba(17,17,17,.5)}

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

/* --- 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(--ambar-hi),var(--ambar) 58%,var(--ambar-os));color:#fff;
  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(242,165,22,.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(--ambar-hi),var(--ambar) 58%,var(--ambar-os));
  color:#fff;transform:translateY(-2px)}
.woocommerce .button.alt{background:linear-gradient(140deg,var(--ambar-hi),var(--ambar) 58%,var(--ambar-os))}

.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:#111}

/* --- 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(17,17,17,.75);
  background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.096);
  transition:background .2s,color .2s}
.woocommerce-MyAccount-navigation li a:hover{background:rgba(0,0,0,.096);color:#111}
.woocommerce-MyAccount-navigation li.is-active a{
  background:linear-gradient(140deg,var(--ambar-hi),var(--ambar) 58%,var(--ambar-os));
  border-color:transparent;color:#fff}
.woocommerce-MyAccount-content p{font-size:13.5px;line-height:1.65;color:rgba(17,17,17,.8)}
.woocommerce-MyAccount-content a{color:var(--ambar)}

/* --- tablas (pedidos, direcciones) --- */
.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:0;
  border-radius:16px;overflow:hidden;background:rgba(0,0,0,.032)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  padding:12px 14px;border:0;border-bottom:1px solid rgba(0,0,0,.064);
  font-size:12.5px;color:rgba(17,17,17,.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:#111;
  background:rgba(0,0,0,.048);border:1px solid rgba(0,0,0,.112)}
.woocommerce-message{background:rgba(242,165,22,.072);border-color:rgba(242,165,22,.34)}
.woocommerce-error{background:rgba(198,40,40,.12);border-color:rgba(198,40,40,.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:#c62828;background:rgba(198,40,40,.07)}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-color:rgba(242,165,22,.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:#111}

/* 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(--ambar)}
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:#111}
body .copy h1 .it{color:var(--ambar)}

/* ==========================================================================
   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(--ambar)!important}

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

.chk input.input-text,
.chk textarea,
.chk select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select{color:#111!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(0,0,0,.044);border:1px solid rgba(0,0,0,.112);
  color:#111!important;font-family:inherit;font-size:12px;font-weight:600;outline:0}
.woocommerce-ordering select.orderby:hover{background:rgba(0,0,0,.08)}
.woocommerce-ordering select.orderby option{background:#f3f3f5;color:#111}
.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(17,17,17,.55);border-bottom:2px solid rgba(17,17,17,.55);
  transform:rotate(45deg)}

/* enlaces del carrito que heredaban negro */
.lin .lin__n{color:#111!important}
.lin .quitar{color:rgba(17,17,17,.4)!important}
.lin .quitar:hover{color:#c62828!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:#fff}
body[class] a.btn--linea,
body[class] a.btn--o,
body[class] a.lin__n{color:#111}
body[class] a.seguir{color:rgba(17,17,17,.7)}
body[class] a.seguir:hover{color:#111}
body[class] a.quitar{color:rgba(17,17,17,.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(17,17,17,.78)}
body[class] a.chip.on{color:#fff}
body[class] a.vend__todo,
body[class] a.sel__todo,
body[class] a.of__todo,
body[class] a.enlacep{color:rgba(17,17,17,.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(17,17,17,.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:#fff;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px -22px rgba(0,0,0,.25)}
.prem--oro{background:linear-gradient(140deg,rgba(242,165,22,.096),rgba(242,165,22,.03));
  border-color:rgba(242,165,22,.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(--ambar,#f2a516)}
.prem__cab i{flex:1 1 auto;height:1px;background:rgba(0,0,0,.096)}
.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(--ambar,#f2a516);vertical-align:-.02em}
.prem__t em{font-style:normal;color:var(--ambar,#f2a516);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(0,0,0,.08);overflow:hidden}
.prem__lleno{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#ffc34d,var(--ambar,#f2a516));
  box-shadow:0 0 14px rgba(242,165,22,.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:#f3f3f5;border:1px solid rgba(0,0,0,.144);color:rgba(17,17,17,.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,#ffc34d,var(--ambar,#f2a516) 58%,var(--ambar-os));
  color:#fff;border-color:transparent;box-shadow:0 6px 18px -6px rgba(242,165,22,.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(17,17,17,.55);transition:color .4s}
.prem__p.on .prem__n{color:#111}
.prem__e{display:block;margin-top:2px;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  color:rgba(17,17,17,.32)}
.prem__p.on .prem__e{color:var(--ambar,#f2a516)}
.prem__lista{margin:13px 0 0;padding:12px 0 0;border-top:1px solid rgba(0,0,0,.08)}
.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:#111}
.prem__l--on svg{color:var(--ambar,#f2a516)}
.prem__l--off{color:rgba(17,17,17,.42)}
.prem__l b{font-weight:800}
.prem__l span{color:rgba(17,17,17,.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(0,0,0,.04)!important;
  color:#111!important;
  border:1px solid rgba(0,0,0,.112)!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(--ambar)!important;background:rgba(0,0,0,.064)!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:#111!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(0,0,0,.04);border:1px solid rgba(0,0,0,.112)}
.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(0,0,0,.04)!important;
  border:1px solid rgba(0,0,0,.112)!important;
  border-radius:11px!important;height:auto!important;padding:12px 13px!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#111!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(17,17,17,.45)}
.wa__n b{color:var(--ambar);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(17,17,17,.45);
  text-decoration:underline;text-underline-offset:3px}
.wa__no:hover{color:#111}

/* --- remates del popup: el titulo y el aspa tambien los pintaba Elementor --- */
body .modal h3,
body .modal--wa h3{color:#111}
body .modal__x{
  background:rgba(0,0,0,.064)!important;
  border:1px solid rgba(0,0,0,.144)!important;
  color:#111!important;
  border-radius:99px!important;
  padding:0!important;
  box-shadow:none!important;
  display:grid;place-items:center}
body .modal__x:hover{background:rgba(0,0,0,.144)!important;transform:none}
body .wa__no{background:none!important;border:0!important;box-shadow:none!important;
  color:rgba(17,17,17,.45)!important;padding:0!important;text-transform:none;
  letter-spacing:0;font-size:11.5px;font-weight:500}
body .wa__no:hover{color:#111!important;transform:none}
body .cant button{background:transparent!important;border:0!important;box-shadow:none!important;
  color:#111!important;padding:0!important;border-radius:0!important}
body .cant button:hover{background:rgba(0,0,0,.096)!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(--ambar)!important}
.talla--no.on{border-style:solid!important;
  border-color:var(--ambar)!important;color:var(--ambar)!important;
  background:rgba(242,165,22,.06)!important}

.otras{margin:14px 0 0;padding:14px;border-radius:16px;
  background:linear-gradient(140deg,rgba(242,165,22,.078),rgba(242,165,22,.024));
  border:1px solid rgba(242,165,22,.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(17,17,17,.88)}
.otras__t b{color:var(--ambar);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(0,0,0,.064)!important;border:1px solid rgba(0,0,0,.144)!important;
  color:#111!important;padding:0!important;box-shadow:none!important}
.otras__x:hover{background:rgba(0,0,0,.144)!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(0,0,0,.04);color:#111;border-radius:11px}
body[class] .talla:hover{background:rgba(0,0,0,.08)}
body[class] .talla.on{background:#111;color:#fff}
body[class] .talla--no.on{background:rgba(242,165,22,.06);color:var(--ambar)}

body[class] .flecha,
body[class] .ham,
body[class] .busca__b,
body[class] .mas__b{background:rgba(0,0,0,.056);color:#111}
body[class] .flecha:hover,
body[class] .ham:hover,
body[class] .mas__b:hover{background:rgba(0,0,0,.112)}
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:#111;box-shadow:none}
body[class] .det__b:hover,
body[class] .faq__b:hover{background:transparent}

body[class] .chip{background:rgba(0,0,0,.04);color:rgba(17,17,17,.78)}
body[class] .chip.on{background:linear-gradient(140deg,var(--ambar-hi),var(--ambar) 58%,var(--ambar-os));
  color:#fff}

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

/* 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(0,0,0,.24)!important}
body[class] .sel__b:hover{color:rgba(17,17,17,.6)!important}
body[class] .sel__b.on{background:none!important;color:#111!important}

/* los ultimos dos botones que el kit de Elementor todavia pintaba de azul */
body[class] button.btn--oro,
body[class] .btn--oro{color:#fff}
body[class] button.btn--linea,
body[class] .btn--linea{background:rgba(0,0,0,.04);color:#111}
body[class] button.btn--w{background:var(--ambar);color:#fff}
body[class] button.btn--o{background:transparent;color:#111}
body[class] .pt{background:rgba(0,0,0,.18);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(--ambar)!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(--ambar-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,.27);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(17,17,17,.55);
  padding:4px;display:grid;place-items:center;border-radius:8px}
.guia__x:hover{color:#111;background:rgba(0,0,0,.056)}
.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(17,17,17,.72)}
.guia__exacta b{color:var(--ambar);font-weight:800}

/* calculadora */
.guia__cal{background:rgba(0,0,0,.032);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(17,17,17,.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(17,17,17,.6)}
.guia__campos i{display:flex;align-items:center;gap:6px;font-style:normal;
  background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.112);
  border-radius:11px;padding:10px 13px}
.guia__campos input{flex:1 1 auto;min-width:0;background:transparent;border:0;
  color:#111;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(17,17,17,.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(0,0,0,.048);color:rgba(17,17,17,.7)}
.guia__res.on{background:rgba(242,165,22,.084);color:var(--ambar);
  border:1px solid rgba(242,165,22,.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(0,0,0,.056)}
.guia__tabla th{background:rgba(0,0,0,.04);font-size:10.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:rgba(17,17,17,.62);
  position:sticky;top:0}
.guia__tabla th small{display:block;font-size:9px;font-weight:600;
  letter-spacing:.04em;color:rgba(17,17,17,.35);text-transform:none}
.guia__tabla tbody tr:last-child td{border-bottom:0}
.guia__tabla td b{color:#111;font-weight:800}
.guia__tabla tbody tr.on{background:rgba(242,165,22,.078)}
.guia__tabla tbody tr.on td b{color:var(--ambar)}

.guia__pie,.guia__dudas{margin:0;font-size:11.5px;line-height:1.55;
  color:rgba(17,17,17,.45)}
.guia__dudas a{color:var(--ambar);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(17,17,17,.6);background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease)}

body[class] .mas a.page-numbers:hover{color:#111;background:rgba(0,0,0,.088);
  border-color:rgba(0,0,0,.176)}

body[class] .mas .page-numbers.current{color:#fff;border-color:transparent;
  background:linear-gradient(96deg,var(--ambar-hi),var(--ambar) 58%,var(--ambar-os));
  box-shadow:0 8px 20px -10px rgba(242,165,22,.8)}

body[class] .mas .page-numbers.dots{background:none;border-color:transparent;
  color:rgba(17,17,17,.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(255,255,255,.97)!important;
  border:1px solid rgba(0,0,0,.096)!important;
  border-radius:14px!important;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.27)!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(17,17,17,.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:#111!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(17,17,17,.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(17,17,17,.45)!important;cursor:pointer;
  display:grid!important;place-items:center!important}
#salertWrapper .close-btn:hover{color:#111!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(0,0,0,.012)}
.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(17,17,17,.5)}
.ftl__t svg{width:14px;height:14px;color:var(--ambar);flex:0 0 auto}
.ftl__x{font-size:11.5px;font-weight:700;color:var(--ambar);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
.ftl__x:hover{color:var(--ambar-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(17,17,17,.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(0,0,0,.04);border:1px solid rgba(0,0,0,.096);
  text-decoration:none;line-height:1;
  transition:background .2s,border-color .2s,transform .18s}
.ftl__b b{font-size:13px;font-weight:800;color:#111;line-height:1}
.ftl__b i{font-style:normal;font-size:9.5px;font-weight:700;line-height:1;
  color:rgba(17,17,17,.38)}
.ftl__b:hover{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.176);
  transform:translateY(-1px)}
.ftl__b.on{background:linear-gradient(140deg,var(--ambar-hi),var(--ambar) 58%,var(--ambar-os));
  border-color:transparent}
.ftl__b.on b{color:#fff}
.ftl__b.on i{color:rgba(255,255,255,.72)}

/* 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:#111}
body[class] .ftl__b.on b{color:#fff}
body[class] .ftl__x{color:var(--ambar)}


/* 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}


/* ==========================================================================
   El logo es una imagen (vive en assets/img), no un texto
   ========================================================================== */
.nav__logo{padding:1px 0}
.nav__logo picture,.nav__logo img{display:block;height:34px;width:auto}
@media (min-width:860px){ .nav__logo picture,.nav__logo img{height:38px} }
.footer__logo{margin:0 0 14px}
.footer__logo picture,.footer__logo img{display:block;height:54px;width:auto}


/* ==========================================================================
   Remates que la conversion a claro no acierta sola
   ========================================================================== */
/* Los botones de la portada: el .btn generico (mas abajo en la hoja) les
   quitaba el borde y el color. Dos clases para ganarle sin !important. */
.acc .btn--w,body[class] a.btn--w{background:var(--ambar);color:#fff;border-color:transparent;
  box-shadow:0 14px 30px -12px rgba(242,165,22,.55)}
.acc .btn--w:hover,body[class] a.btn--w:hover{background:var(--ambar-os);color:#fff}
.acc .btn--o,body[class] a.btn--o{background:transparent;color:#111;border-color:rgba(0,0,0,.3)}
.acc .btn--o:hover,body[class] a.btn--o:hover{background:#111;color:#fff;border-color:#111}

/* El pie es oscuro a proposito (el logo esta hecho en blanco y rojo), asi que
   no puede heredar los tokens claros del resto de la web. Con body[class]
   para ganar a la regla generica de enlaces sin clase. */
body[class] .footer{color:#fff;border-top-color:rgba(255,255,255,.1)}
body[class] .footer .footer__p,
body[class] .footer .fbloque p{color:rgba(255,255,255,.62)}
body[class] .footer .fbloque b{color:#fff}
body[class] .footer .fbloque{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
body[class] .footer h5{color:var(--ambar-hi)}
body[class] .footer li a,
body[class] .footer a:not([class]){color:rgba(255,255,255,.66)}
body[class] .footer li a:hover,
body[class] .footer a:not([class]):hover{color:#fff}
body[class] .footer .redes a{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
body[class] .footer .redes a:hover{background:var(--ambar);color:#fff;border-color:transparent}
body[class] .footer .footer__bar{border-top-color:rgba(255,255,255,.1)}
body[class] .footer .footer__bar p,
body[class] .footer .footer__pagos{color:rgba(255,255,255,.45)}
body[class] .footer .footer__pagos b{color:var(--ambar-hi);background:rgba(242,165,22,.14);border-color:rgba(242,165,22,.4)}

/* la miga actual (la ultima) va en tinta, no apagada */
.migas .migas__act{color:var(--tinta);opacity:1}

/* los formularios de WooCommerce traen un borde lila propio con mas peso */
body[class] .woocommerce form.login,
body[class] .woocommerce form.register,
body[class] .woocommerce form.checkout_coupon{border:1px solid rgba(0,0,0,.1);border-radius:18px}

/* El "404" grande: la regla generica ".e404 p" (mas especifica) le pisaba el
   tamaño y el color y salia como un parrafo pequeño. Tambien pasaba en kingdrip. */
.e404 p.e404__n{font-size:clamp(90px,26vw,220px);line-height:.8;letter-spacing:-.05em;
  margin:0 0 6px;max-width:none;color:transparent;
  background:linear-gradient(170deg,rgba(242,165,22,.5),rgba(242,165,22,.08));
  -webkit-background-clip:text;background-clip:text}

/* Elementor da white-space:nowrap a los botones desde su kit: una pregunta
   larga de las FAQ no partia de linea y sacaba la pagina a lo ancho en el
   movil. Los botones de texto del tema parten de linea como un parrafo. */
body[class] .faq__b,
body[class] .det__b,
body[class] .grupo > button{white-space:normal!important;text-align:left;min-width:0}
.faq__b > svg,.det__b > svg{flex:0 0 auto}
.footer__pagos{flex-wrap:wrap}
.footer__bar > *{min-width:0}

/* El importe del total: WooCommerce lo envuelve en un span y la regla de la
   etiqueta "Total" (11px, mayusculas) se lo comia. Heredado de kingdrip. */
.res__tot b span,.res__tot b bdi{font-size:inherit!important;letter-spacing:inherit;text-transform:none;color:inherit}


/* ==========================================================================
   ZAPAFLASH — el sistema visual propio
   Blanco con ámbar (el color de la estrella del logo) y negro. Oswald en los
   titulares, Open Sans en el texto. Formas inclinadas, bandas a rayas y una
   portada en banda negra: la idea es velocidad. Todo lo que hay debajo pisa
   a la base generica de arriba.
   ========================================================================== */

/* ---------- texto y titulares ---------- */
body[class]{font-family:var(--font-b);background:var(--fondo)}
h1,h2,h3,.cab h1,.cabp h1,.ok h1,.e404 h1,.vend h2,.of h2,.sel h2,.rev h2,.rel h2,.caja h2,
.footer__logo,.vacia b,.res__tot b,.guia__cab h2,.modal h3,.info__h,.usp h2,.faqs h2,.cats2 h2{
  font-family:var(--font-d);font-weight:600;letter-spacing:.01em;text-transform:uppercase}
.cab h1{font-size:clamp(40px,7.4vw,84px);line-height:.95}
.cabp h1{font-size:clamp(34px,6vw,68px);line-height:.95}
.vend h2,.of h2,.sel h2,.rev h2,.usp h2,.faqs h2,.cats2 h2{font-size:clamp(28px,4.6vw,48px);line-height:.95}
.rel h2{font-size:clamp(24px,3.6vw,38px)}
.info__h{font-size:clamp(28px,4.2vw,46px);line-height:1}
.vacia b{font-size:clamp(24px,3.6vw,34px)}
/* las etiquetas sobre los titulos: una pestaña ambar inclinada */
.vend__eye,.sel__eye,.rev__eye,.rel__eye,.cab__eye,.cabp__eye,.usp__eye,.faqs__eye,.cats2__eye{
  display:inline-flex;align-items:center;gap:0;margin:0 0 12px;padding:5px 12px;
  background:var(--ambar);color:#111;font-family:var(--font-d);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;transform:skewX(-10deg);border-radius:3px}
.vend__eye > *,.sel__eye > *,.rev__eye > *,.rel__eye > *,.cab__eye > *,.cabp__eye > *{transform:skewX(10deg)}
.vend__eye i,.sel__eye i,.rev__eye i,.rel__eye i,.cab__eye i,.cabp__eye i,.usp__eye i,.faqs__eye i,.cats2__eye i{display:none}
body .cabp__eye,body .cab__eye{color:#111}
.vend__cab,.rel__cab,.rev__cab,.sel__cab{border-bottom:3px solid var(--tinta);padding-bottom:14px}

/* ---------- botones: inclinados, ambar ---------- */
.btn,body[class] a.btn--oro,body[class] .btn--oro,body[class] button.btn--oro,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce .button,
.woocommerce .button.alt,.woocommerce button.button.alt,.woocommerce .single_add_to_cart_button,
body[class] .single_add_to_cart_button,.woocommerce button.button.alt.disabled,.woocommerce .button.disabled{
  border-radius:4px;background:var(--ambar)!important;color:#111!important;border:0!important;box-shadow:0 6px 0 var(--ambar-os)!important;
  font-family:var(--font-d);font-weight:600;font-size:16px;letter-spacing:.07em;text-transform:uppercase;
  padding:12px 24px;transform:skewX(-8deg);transition:transform .14s,box-shadow .14s,background .2s}
.btn > *,.woocommerce .button > *{transform:skewX(8deg);display:inline-block}
.btn:hover,body[class] a.btn--oro:hover,.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
body[class] .single_add_to_cart_button:hover{
  background:var(--tinta)!important;color:#fff!important;transform:skewX(-8deg) translateY(-1px);box-shadow:0 7px 0 var(--ambar)!important}
.btn:active{transform:skewX(-8deg) translateY(3px);box-shadow:0 3px 0 var(--ambar-os)!important}
.woocommerce button.button.alt.disabled,.woocommerce .button.disabled{opacity:.45}
body[class] a.btn--linea,body[class] .btn--linea,body[class] button.btn--linea{
  background:#fff!important;color:var(--tinta)!important;border:2px solid var(--tinta)!important;box-shadow:0 6px 0 var(--tinta)!important}
body[class] a.btn--linea:hover,body[class] .btn--linea:hover{background:var(--tinta)!important;color:#fff!important}
body[class] .btn svg{width:15px;height:15px;transform:skewX(8deg)}
/* el titular del banner y el boton sin inclinar en movil pequeño */
@media (max-width:420px){ .btn,.woocommerce .button{transform:none}.btn > *,.woocommerce .button > *{transform:none}.btn:hover{transform:none} }

/* ---------- barra de navegacion: blanca con filo ambar ---------- */
.nav,.nav.compacta{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--linea);
  border-top:4px solid var(--ambar);box-shadow:0 8px 24px -20px rgba(0,0,0,.35)}
.nav__in{padding:8px clamp(14px,3vw,30px);padding-top:calc(8px + env(safe-area-inset-top))}
.nav__logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.nav__logo picture,.nav__logo img{display:block;height:36px;width:auto}
.nav__logo b{font-family:var(--font-d);font-weight:700;font-size:20px;letter-spacing:.06em;color:var(--tinta);line-height:1}
.nav__logo b i{font-style:normal;color:var(--ambar-os)}
@media (min-width:860px){ .nav__logo picture,.nav__logo img{height:42px}.nav__logo b{font-size:23px} }
.nav .nav__links a{font-family:var(--font-d);font-size:15px;font-weight:500;letter-spacing:.07em;color:var(--tinta);padding:6px 0}
.nav .nav__links a::after{height:3px;background:var(--ambar)}
.nav .nav__links a:hover{color:var(--ambar-os)}
.busca,.busca.abierta{border-radius:99px;border:2px solid var(--tinta);background:#fff}
.busca__b,body[class] .busca__b{color:var(--tinta)}
.ham,body[class] .ham{border-radius:99px;border:2px solid var(--tinta);background:#fff}
.ham i{background:var(--tinta)}
.consub .sub{border-radius:12px;border:2px solid var(--tinta);box-shadow:0 18px 40px -20px rgba(0,0,0,.4);background:#fff}
.sub h4{color:var(--ambar-os)}
/* selector de idioma (Polylang) */
.lang{display:flex;gap:2px;padding:3px;border-radius:99px;flex:0 0 auto;background:var(--fondo2);border:1px solid var(--linea)}
.lang__b{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px;font-size:11px;font-weight:800;
  letter-spacing:.07em;color:var(--mute);text-decoration:none;white-space:nowrap;transition:background .22s,color .22s}
.lang__b:hover{color:var(--tinta)}
.lang__b.on,body[class] a.lang__b.on{background:var(--tinta);color:#fff}
body[class] a.lang__b{color:var(--mute)}
.panel .lang{margin:0 0 14px;width:max-content}

/* el panel del movil sube desde abajo, como una hoja */
.panel{top:auto;bottom:0;left:0;right:0;max-height:88vh;max-height:88dvh;padding:18px 20px calc(24px + env(safe-area-inset-bottom));
  background:#fff;border-bottom:0;border-top:4px solid var(--ambar);border-radius:18px 18px 0 0;
  transform:translateY(104%);visibility:hidden;transition:transform .42s var(--ease),visibility 0s .42s;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 -20px 50px -20px rgba(0,0,0,.35);overflow-y:auto}
.panel.abierto{transform:none;visibility:visible;transition:transform .42s var(--ease),visibility 0s}
.panel::before{content:'';display:block;width:44px;height:5px;border-radius:5px;background:var(--linea);margin:0 auto 14px}
body .panel > a,.panel > a{font-family:var(--font-d);font-size:21px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tinta);border-bottom:1px solid var(--linea);padding:11px 0}
.panel .grupo > button{font-family:var(--font-d);font-size:21px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta);border-bottom:1px solid var(--linea)}
.panel .grupo__c a{color:var(--mute);font-size:15px}
html{overflow-x:clip}

/* ---------- portada: banda negra, estrella, foto inclinada ---------- */
.hero{position:relative;overflow:hidden;background:var(--tinta);color:#fff;
  padding-top:calc(74px + env(safe-area-inset-top))}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:url('../img/textura.webp') center/cover repeat;mix-blend-mode:screen;opacity:.08}
.hero::after{content:'';position:absolute;left:-10%;right:-10%;bottom:-2px;height:38px;pointer-events:none;
  background:repeating-linear-gradient(-55deg,var(--ambar) 0 18px,transparent 18px 36px);opacity:.9;transform:skewY(-1.5deg)}
.hero__in{position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:22px clamp(16px,3.4vw,40px) 70px;
  display:grid;grid-template-columns:1fr;gap:30px}
@media (min-width:900px){
  .hero{padding-top:calc(82px + env(safe-area-inset-top))}
  .hero__in{grid-template-columns:1.05fr .95fr;align-items:center;column-gap:clamp(30px,5vw,80px);
    min-height:calc(92svh - 82px);padding-bottom:90px}
}
.hero__eye{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:6px 12px;border-radius:3px;
  background:var(--ambar);color:#111;font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transform:skewX(-10deg)}
.hero__eye > *{transform:skewX(10deg)}
.hero__eye i{display:block;width:6px;height:6px;border-radius:50%;background:#111}
.copy{padding:0}
.copy h1,body .copy h1,body .copy h1 span{font-family:var(--font-d);font-weight:600;font-size:clamp(44px,10.5vw,68px);line-height:.9;
  letter-spacing:.005em;margin:0 0 16px;text-transform:uppercase;color:#fff}
.copy h1 span{display:block}
.copy h1 .it,body .copy h1 .it{font-family:var(--font-d);font-style:italic;font-weight:700;color:var(--ambar)}
@media (min-width:900px){ .copy h1,body .copy h1,body .copy h1 span{font-size:clamp(60px,6.2vw,104px)} }
.hero__sub{margin:0 0 22px;max-width:46ch;font-size:clamp(14px,1.6vw,17px);line-height:1.6;color:rgba(255,255,255,.72)}
.cursor{display:inline-block;width:.06em;height:.76em;background:var(--ambar);margin-left:.05em;animation:parp .85s step-end infinite}
.cursor.off{display:none}
@keyframes parp{0%,100%{opacity:1}50%{opacity:0}}
.acc{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 24px}
.acc .btn--w,body[class] a.btn--w{background:var(--ambar)!important;color:#111!important;box-shadow:0 6px 0 var(--ambar-os)!important}
.acc .btn--w:hover,body[class] a.btn--w:hover{background:#fff!important;color:#111!important;box-shadow:0 7px 0 var(--ambar)!important}
.acc .btn--o,body[class] a.btn--o{background:transparent!important;color:#fff!important;border:2px solid rgba(255,255,255,.55)!important;box-shadow:none!important}
.acc .btn--o:hover,body[class] a.btn--o:hover{background:#fff!important;color:#111!important;border-color:#fff!important}
.copy .barra{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;max-width:none;
  padding:14px 0 0;margin:0;border-top:1px solid rgba(255,255,255,.22);border-bottom:0;flex-wrap:wrap}
.mod__m{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ambar);margin-bottom:3px}
.mod__n{display:block;font-family:var(--font-d);font-size:21px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.copy .precio{display:block;margin:0;font-family:var(--font-d);font-size:36px;font-weight:600;letter-spacing:.01em;color:#fff}
.mod,.copy .precio{transition:opacity .32s ease,transform .32s var(--ease)}
.is-swap .mod,.is-swap .precio{opacity:0;transform:translateY(7px)}
.puntos{display:flex;gap:7px;width:100%;margin:12px 0 0}
.pt,body[class] .pt{width:30px;height:8px;border-radius:99px;background:rgba(255,255,255,.28);border:0;padding:0;cursor:pointer;
  color:transparent;font-size:0;box-shadow:none;transition:background .25s,width .35s var(--ease)}
.pt.is-on,body[class] .pt.is-on{background:var(--ambar);width:48px}
.pt:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}

.escena{position:relative;z-index:1;display:block;min-height:0;padding:30px 12px 24px}
.fondo-txt{display:none}
.hero__estrella{position:absolute;z-index:0;right:-6%;top:-4%;width:min(52%,300px);opacity:.14;pointer-events:none;
  filter:grayscale(1) brightness(3)}
.marco{position:relative;z-index:1;aspect-ratio:4/5;background:#fff;border-radius:22px;overflow:hidden;
  transform:rotate(-3deg);box-shadow:0 30px 60px -24px rgba(0,0,0,.7),0 0 0 6px rgba(255,255,255,.08);
  transition:transform .5s var(--ease)}
.marco:hover{transform:rotate(-1.5deg)}
.marco::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:22px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.06)}
@media (min-width:900px){ .marco{max-height:min(620px,calc(92svh - 200px));margin-left:auto;width:min(100%,500px)} }
.zapa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;padding:0;border-radius:0;
  background:#fff;box-shadow:none;transform:scale(1.04);transition:opacity .6s var(--ease),transform 1.1s var(--ease);
  top:auto;left:auto;aspect-ratio:auto;will-change:opacity,transform}
.zapa.is-on{opacity:1;z-index:2;transform:none;animation:none}
.zapa.is-out{opacity:0;transform:scale(1.02)}
.zapa--logo{object-fit:contain;padding:16%;opacity:1;transform:none;animation:none;background:#fff}
.reclamo{position:absolute;z-index:3;left:-6px;top:12px;transform:rotate(-6deg);pointer-events:none;white-space:nowrap}
.reclamo span{display:inline-block;padding:.5em 1em;border-radius:4px;background:var(--ambar);color:#111;
  box-shadow:0 5px 0 var(--ambar-os);font-family:var(--font-d);
  font-size:clamp(14px,3.6vw,18px);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  transition:opacity .42s var(--ease),transform .55s var(--ease)}
.reclamo.is-swap span{opacity:0;transform:translateY(-8px)}
.sombra{display:none}
.listo .up{animation:sube .8s var(--ease) both}
.listo .up:nth-child(2){animation-delay:.06s}
.listo .up:nth-child(3){animation-delay:.16s}
.listo .up:nth-child(4){animation-delay:.26s}
.listo .up:nth-child(5){animation-delay:.36s}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- franja de avisos: ambar a rayas ---------- */
.aviso{background:var(--ambar);border-top:3px solid var(--tinta);border-bottom:3px solid var(--tinta);box-shadow:none}
.aviso__i{color:#111;font-family:var(--font-d);font-weight:600;font-size:clamp(15px,1.9vw,19px);letter-spacing:.09em;text-transform:uppercase}
.aviso__i svg{opacity:1}
.aviso__s{width:14px;height:14px;border-radius:0;background:var(--tinta);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ---------- tarjeta de producto ---------- */
.tj,.rejilla .tj{background:#fff;border:1px solid var(--linea);border-radius:14px;box-shadow:0 10px 24px -18px rgba(0,0,0,.3);
  backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.tj:hover{transform:translateY(-4px);border-color:var(--ambar);box-shadow:0 22px 40px -22px rgba(0,0,0,.35),0 0 0 3px rgba(242,165,22,.25)}
.tj__f{margin:0;border-radius:14px 14px 0 0;background:#fff}
.tj__d{padding:11px 12px 13px}
.tj__n{font-family:var(--font-d);font-size:16px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
.tj__c{color:var(--ambar-os);letter-spacing:.14em}
.tj__p{display:inline-block;padding:4px 9px;border-radius:4px;background:var(--tinta);color:#fff;font-size:13px;letter-spacing:0;transform:skewX(-8deg)}
.tj__pv{color:var(--mute)}
.tj__eti,.tj__eti--n{border-radius:3px;background:var(--ambar);color:#111;border:0;backdrop-filter:none;transform:skewX(-10deg);
  font-family:var(--font-d);font-size:12px;letter-spacing:.08em;padding:4px 9px;top:10px;left:10px}
.tj__eti--n{background:var(--tinta);color:#fff}
.flecha,body[class] .flecha{border-radius:99px;border:2px solid var(--tinta);background:#fff;color:var(--tinta)}
.flecha:hover,body[class] .flecha:hover{background:var(--ambar);border-color:var(--ambar);color:#111}
.vend__todo,.sel__todo,body[class] a.vend__todo,body[class] a.sel__todo{border-radius:99px;border:2px solid var(--tinta);
  color:var(--tinta);font-family:var(--font-d);font-size:14px;letter-spacing:.06em}
.vend__todo:hover,.sel__todo:hover,body[class] a.vend__todo:hover{background:var(--tinta);color:#fff}
.vend,.of,.sel,.rev,.cifrasSec,.usp,.faqs,.cats2{background:var(--fondo)}
.of{background:var(--fondo2)}

/* "lo mas vendido" en rejilla fija, no en carrusel */
.vend .carru{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,18px);overflow:visible}
@media (min-width:700px){ .vend .carru{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .vend .carru{grid-template-columns:repeat(4,1fr)} }
.vend .carru .tj{flex:none;width:auto}
.vend .carru .tj:nth-child(n+9){display:none}
.vend .flechas{display:none}

/* ---------- cuenta atras de las ofertas ---------- */
.cuenta{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;padding:8px 12px;border-radius:8px;
  background:var(--tinta);color:#fff;font-size:12.5px;font-weight:700}
.cuenta b{font-family:var(--font-d);font-size:22px;font-weight:600;letter-spacing:.06em;color:var(--ambar);font-variant-numeric:tabular-nums;min-width:7.2ch}

/* ---------- los tres pilares (entrega, video, contra reembolso) ---------- */
.usp{padding:clamp(30px,5vw,60px) 0}
.usp__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}
.usp__grid{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.4vw,18px);margin-top:18px}
@media (min-width:760px){ .usp__grid{grid-template-columns:repeat(3,1fr)} }
.usp__c{position:relative;padding:clamp(18px,2.4vw,26px);border-radius:14px;background:#fff;border:1px solid var(--linea);
  box-shadow:0 10px 24px -18px rgba(0,0,0,.3);overflow:hidden}
.usp__c::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ambar)}
.usp__i{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin:0 0 14px;background:var(--tinta);color:var(--ambar)}
.usp__i svg{width:24px;height:24px}
.usp__c b{display:block;font-family:var(--font-d);font-weight:600;font-size:20px;letter-spacing:.03em;text-transform:uppercase;margin:0 0 6px}
.usp__c p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mute)}

/* ---------- categorias: rail de fichas redondas ---------- */
.cats2{padding:clamp(30px,5vw,64px) 0}
.cats2__in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}
.cats2__rail{display:flex;gap:clamp(12px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:18px 4px 10px;-webkit-overflow-scrolling:touch}
.cats2__rail::-webkit-scrollbar{display:none}
.cats2__t{flex:0 0 clamp(120px,22vw,170px);scroll-snap-align:start;text-align:center;text-decoration:none;color:var(--tinta)}
.cats2__f{display:block;position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--fondo2);
  border:4px solid #fff;box-shadow:0 0 0 2px var(--linea),0 14px 30px -18px rgba(0,0,0,.4);transition:transform .3s var(--ease),box-shadow .3s}
.cats2__t:hover .cats2__f{transform:translateY(-4px) rotate(-3deg);box-shadow:0 0 0 3px var(--ambar),0 18px 34px -18px rgba(0,0,0,.45)}
.cats2__f img{width:100%;height:100%;object-fit:cover;display:block}
.cats2__n{display:block;margin:10px 0 0;font-family:var(--font-d);font-size:16px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.cats2__n i{display:block;font-style:normal;font-family:var(--font-b);font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.08em}
body[class] a.cats2__t{color:var(--tinta)}

/* ---------- preguntas en la portada ---------- */
.faqs{padding:clamp(30px,5vw,64px) 0}
.faqs__in{max-width:900px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

/* ---------- cifras ---------- */
.cifra{border:1px solid var(--linea);border-radius:14px;background:#fff;box-shadow:0 10px 24px -18px rgba(0,0,0,.3)}
.cifra b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--tinta);
  font-family:var(--font-d);font-weight:600;font-size:clamp(34px,5vw,56px)}
.cifra span{color:var(--mute)}

/* ---------- listados ---------- */
#kd-main{padding-top:calc(70px + env(safe-area-inset-top))}
body.home #kd-main{padding-top:0}
.migas{padding-top:14px}
.subs{background:var(--fondo2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.chip,body[class] .chip,body[class] a.chip{border-radius:99px;border:2px solid var(--tinta);background:#fff;color:var(--tinta);
  font-family:var(--font-d);font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.chip.on,body[class] .chip.on,body[class] a.chip.on{background:var(--tinta);color:var(--ambar)}
.sello{border-radius:99px;border:2px solid var(--tinta);background:#fff;color:var(--tinta)}
.sello svg{color:var(--ambar-os)}
.sello--oro{background:var(--ambar);color:#111;border-color:var(--ambar)}
.sello--oro svg{color:#111}
.woocommerce-ordering select.orderby{border-radius:99px;border:2px solid var(--tinta);background:#fff}
.barra__n b{font-family:var(--font-d);font-size:18px}
body[class] .mas :not(ul) > .page-numbers,body[class] .mas .nav-links > .page-numbers{border-radius:99px;border:2px solid var(--tinta);
  background:#fff;color:var(--tinta);font-family:var(--font-d);font-size:15px}
body[class] .mas .page-numbers.current{background:var(--tinta);color:var(--ambar);box-shadow:none;border-color:var(--tinta)}
.ftl{background:var(--fondo2);border-bottom:1px solid var(--linea)}
.ftl__b{border-radius:12px;border:2px solid var(--tinta);background:#fff}
.ftl__b b{font-family:var(--font-d);font-size:15px}
.ftl__b.on{background:var(--tinta);border-color:var(--tinta)}
.ftl__b.on b,body[class] .ftl__b.on b{color:var(--ambar)}
.ftl__b.on i{color:rgba(255,255,255,.7)}
.ftl__t svg,.ftl__x,body[class] .ftl__x{color:var(--ambar-os)}

/* ---------- entrega estimada: tarjeta con filo ambar ---------- */
.entrega{background:#fff;border:1px solid var(--linea);border-left:6px solid var(--ambar);border-radius:12px;color:var(--tinta);
  box-shadow:0 10px 24px -18px rgba(0,0,0,.3)}
.entrega__i{background:var(--tinta);color:var(--ambar);border-radius:10px}
.entrega__t b{color:var(--tinta)}
.entrega__t span{color:var(--mute)}
.entrega__t em{color:var(--ambar-os)}

/* ---------- escalera de premios: cuatro tarjetas ---------- */
.prem{background:#fff;border:1px solid var(--linea);border-radius:14px;box-shadow:0 10px 24px -18px rgba(0,0,0,.3);backdrop-filter:none}
.prem--oro{border-color:var(--ambar);box-shadow:0 0 0 3px rgba(242,165,22,.22),0 10px 24px -18px rgba(0,0,0,.3)}
.prem__cab h3{font-family:var(--font-d);font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--tinta)}
.prem__cab i{background:var(--ambar);height:3px}
.prem__t{font-size:14px}
.prem__t b{font-family:var(--font-d);font-weight:600;color:var(--ambar-os);font-size:1.35em}
.prem__t em{color:var(--tinta);background:var(--ambar-cl);padding:1px 6px;border-radius:4px}
.prem__barra{height:10px;border-radius:99px;background:var(--fondo2);overflow:hidden;margin:0 0 14px;
  background-image:repeating-linear-gradient(-55deg,rgba(0,0,0,.05) 0 6px,transparent 6px 12px)}
.prem__barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ambar-hi),var(--ambar));transition:width .7s var(--ease)}
.prem__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:560px){ .prem__cards{grid-template-columns:repeat(4,1fr)} }
.res .prem__cards,.chk__res .prem__cards{grid-template-columns:repeat(2,1fr)}
.prem__cd{position:relative;padding:12px 10px 10px;border-radius:10px;border:1px solid var(--linea);background:var(--fondo2);text-align:center;min-width:0}
.prem__cd.on{background:#fff;border-color:var(--ambar);box-shadow:0 0 0 2px rgba(242,165,22,.25)}
.prem__cd .prem__b{width:38px;height:38px;margin:0 auto 8px;border-radius:10px;border:0;background:#fff;color:var(--mute);display:grid;place-items:center;
  box-shadow:0 2px 0 var(--linea);position:static;transition:background .3s,color .3s}
.prem__cd .prem__b svg{width:17px;height:17px}
.prem__cd.on .prem__b{background:var(--tinta);color:var(--ambar);box-shadow:none}
.prem__cd b{display:block;font-family:var(--font-d);font-size:14px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;line-height:1.15;color:var(--mute)}
.prem__cd.on b{color:var(--tinta)}
.prem__cd > span{display:block;margin-top:3px;font-size:10.5px;line-height:1.3;color:var(--mute)}
.prem__cd em{position:absolute;top:-8px;right:8px;font-style:normal;font-family:var(--font-d);font-size:11px;letter-spacing:.06em;
  padding:2px 7px;border-radius:99px;background:var(--linea);color:var(--tinta)}
.prem__cd.on em{background:var(--ambar);color:#111}

/* ---------- ficha de producto ---------- */
.gal__m{border:1px solid var(--linea);border-radius:18px;box-shadow:0 20px 40px -24px rgba(0,0,0,.4);background:#fff}
.gal__t button{border-radius:12px;border:2px solid var(--linea);background:#fff}
.gal__t button.on{border-color:var(--ambar)}
.info__m{color:var(--ambar-os)}
body .precio b,.info .precio b,.precio b{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--tinta);font-family:var(--font-d);font-weight:600;letter-spacing:.01em}
.info .precio .woocommerce-Price-amount,.info .precio ins{color:var(--tinta)}
.info .precio del{color:var(--mute);font-size:.6em}
.envio b{color:var(--tinta)}
.tallas{gap:8px}
.talla,body[class] .talla{border-radius:10px;border:2px solid var(--linea);background:#fff;color:var(--tinta);
  font-family:var(--font-d);font-size:16px;font-weight:500;letter-spacing:.03em}
.talla:hover,body[class] .talla:hover{background:#fff;border-color:var(--tinta)}
.talla.on,body[class] .talla.on{background:var(--tinta);color:var(--ambar);border-color:var(--tinta)}
.talla--no{border-style:dashed!important;opacity:.75}
.talla--no:hover{border-color:var(--ambar)!important}
.talla--no.on,body[class] .talla--no.on{border-style:solid!important;border-color:var(--ambar)!important;color:var(--ambar-os)!important;
  background:var(--ambar-cl)!important}
.tallas__cab span{font-family:var(--font-d);font-size:14px;letter-spacing:.1em;color:var(--tinta)}
body[class] .guia__ab{color:var(--ambar-os)!important}
.otras{border-radius:14px;border:1px solid var(--ambar);background:var(--ambar-cl);box-shadow:none}
.otras__t b{color:var(--ambar-os)}
.gar3 > div,.gar3 div{border-radius:12px;border:1px solid var(--linea);background:#fff}
.gar3 svg{color:var(--ambar-os)}
.det__b{font-family:var(--font-d);font-size:17px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.quantity{border-radius:10px;border:2px solid var(--linea);background:#fff}
.fija{background:#fff;border-top:3px solid var(--ambar);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 -14px 30px -20px rgba(0,0,0,.4)}
.fija__m{border-radius:10px;border:1px solid var(--linea)}
.fija__p{color:var(--ambar-os)}

/* ---------- cajas, carrito, pago ---------- */
.caja{background:#fff;border:1px solid var(--linea);border-radius:14px;box-shadow:0 10px 24px -18px rgba(0,0,0,.3);backdrop-filter:none;-webkit-backdrop-filter:none}
.caja--oro{background:var(--ambar-cl);border-color:var(--ambar)}
.caja h2{font-size:clamp(20px,2.4vw,26px)}
.caja h3{font-family:var(--font-d);font-size:16px;font-weight:600;letter-spacing:.08em}
.vacia__i{border-radius:50%;border:2px solid var(--tinta);background:#fff;color:var(--ambar-os)}
.lin__f{border-radius:12px;border:1px solid var(--linea);background:#fff}
.lin__n{font-family:var(--font-d);font-size:17px;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.lin__p,.res__f--gratis b,.res__f--dto b,.mini em,.resumen em{color:var(--ambar-os)}
.res__tot b{color:var(--tinta)}
.res__tot{border-top:3px solid var(--tinta)}
.res__f--envio b{color:var(--tinta)}
.cant{border-radius:99px;border:2px solid var(--linea);background:#fff}
.paso i{border-radius:50%;background:var(--ambar);color:#111;font-family:var(--font-d);font-size:14px}
.pago{border-radius:12px;border:1px solid var(--ambar);background:var(--ambar-cl)}
.pago svg{color:var(--ambar-os)}
.mini img,.resumen img{border-radius:10px;border:1px solid var(--linea)}
.ped span{border-radius:99px;border:2px solid var(--tinta);background:#fff}
.ped span b{color:var(--ambar-os)}
.ok__i{border-radius:50%;background:var(--ambar);color:#111;box-shadow:0 10px 30px -14px rgba(242,165,22,.9);border:0}
.mini2 b{color:var(--ambar-os)}
.guarda__n b,.wa__n b{color:var(--ambar-os)}
.via{background:#fff;border:1px solid var(--linea);border-radius:14px;box-shadow:0 10px 24px -18px rgba(0,0,0,.3);backdrop-filter:none}
.via:hover{transform:translateY(-3px);border-color:var(--ambar)}
.via__i{border-radius:12px;background:var(--tinta);color:var(--ambar)}
.via b{font-family:var(--font-d);font-size:19px;font-weight:500;letter-spacing:.03em;text-transform:uppercase}
.via em{color:var(--ambar-os)}
.faq__b{font-family:var(--font-d);font-size:18px;font-weight:500;letter-spacing:.03em;text-transform:uppercase}
.faq__i.on .faq__b{color:var(--ambar-os)}
.bus__f{border-radius:99px;border:2px solid var(--tinta);background:#fff}
.bus__f button{border-radius:99px;background:var(--ambar);color:#111}
.sug a,.e404__l a,body[class] a.sug,body[class] .e404__l a{border-radius:99px;border:2px solid var(--tinta);background:#fff;color:var(--tinta)}
.e404 p.e404__n{background:none;color:var(--ambar);-webkit-text-stroke:0;font-family:var(--font-d);font-weight:700}
.e404__l h3{color:var(--ambar-os)}

/* la tabla de revision del pedido de WooCommerce (en esta tienda hay envios de pago) */
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:13.5px}
.woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{padding:10px 0;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
.woocommerce-checkout-review-order-table thead th{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.woocommerce-checkout-review-order-table .product-total,.woocommerce-checkout-review-order-table tfoot td{text-align:right;font-weight:700}
.woocommerce-checkout-review-order-table tfoot th{font-weight:600;color:var(--mute)}
.woocommerce-checkout-review-order-table .order-total td,.woocommerce-checkout-review-order-table .order-total th{font-family:var(--font-d);font-size:22px;font-weight:600;color:var(--tinta);border-bottom:0;padding-top:14px}
.woocommerce-checkout-review-order-table .shipping ul{list-style:none;margin:0;padding:0}
.woocommerce-checkout-review-order-table .shipping li{margin:0 0 6px;font-weight:600}
.woocommerce-checkout-review-order-table .shipping input{margin-right:6px}
.woocommerce-checkout-review-order-table .fee td,.woocommerce-checkout-review-order-table .fee th{color:var(--ambar-os)}
#order_review .pago{margin-top:14px}

/* formularios */
.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,.select2-container--default .select2-selection--single{
  background:#fff!important;border:2px solid var(--linea)!important;border-radius:10px!important}
.campos input:focus,form.checkout input.input-text:focus,.woocommerce form .form-row input.input-text:focus{
  border-color:var(--ambar)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(242,165,22,.22)}
.woocommerce form .form-row label{color:var(--tinta)}
.chk label,.campos label,.woocommerce-billing-fields label,.woocommerce-form label,.woocommerce-checkout label{color:var(--tinta)!important}
.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword,body[class] .woocommerce form.login,body[class] .woocommerce form.register{
  background:#fff;border:1px solid var(--linea);border-radius:14px;box-shadow:0 10px 24px -18px rgba(0,0,0,.3)}
.woocommerce-MyAccount-navigation li a{border-radius:99px;border:2px solid var(--tinta);background:#fff;color:var(--tinta)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--tinta);color:var(--ambar)}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{border-radius:12px;border:1px solid var(--linea);background:#fff}
.woocommerce-message{background:var(--ambar-cl);border-color:var(--ambar)}
.woocommerce table.shop_table{border:1px solid var(--linea);border-radius:14px}

/* ---------- modales y guia ---------- */
.modal,.guia__caja{background:#fff;border:1px solid var(--linea);border-radius:18px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);border-top:4px solid var(--ambar)}
body .modal__x,.guia__x{border-radius:99px!important;border:2px solid var(--tinta)!important;background:#fff!important;color:var(--tinta)!important}
.guia__cal{border:1px solid var(--linea);border-radius:12px;background:var(--fondo2)}
.guia__campos i{border-radius:10px;border:2px solid var(--linea);background:#fff}
.guia__res.on{background:var(--ambar-cl);color:var(--ambar-os);border:1px solid var(--ambar)}
.guia__tabla{border:1px solid var(--linea);border-radius:12px}
.guia__tabla tbody tr.on{background:var(--ambar-cl)}
.guia__tabla tbody tr.on td b,.guia__exacta b,.guia__dudas a{color:var(--ambar-os)}
.wa__i{border-radius:50%}

/* ---------- pie: crema calido, logo y titulos ambar ---------- */
body[class] .footer{background:var(--fondo2);color:var(--tinta);border-top:4px solid var(--tinta)}
body[class] .footer .footer__p,body[class] .footer .fbloque p,body[class] .footer .footer__bar p,body[class] .footer .footer__pagos{color:var(--mute)}
body[class] .footer .fbloque b{color:var(--tinta)}
body[class] .footer .fbloque{background:#fff;border:1px solid var(--linea);border-radius:12px}
body[class] .footer h5{color:var(--ambar-os);font-family:var(--font-d);font-size:15px;font-weight:600;letter-spacing:.1em}
body[class] .footer li a,body[class] .footer a:not([class]){color:var(--tinta)}
body[class] .footer li a:hover,body[class] .footer a:not([class]):hover{color:var(--ambar-os)}
body[class] .footer .redes a{color:var(--tinta);background:#fff;border:2px solid var(--tinta);border-radius:99px}
body[class] .footer .redes a:hover{background:var(--ambar);color:#111;border-color:var(--ambar)}
body[class] .footer .footer__bar{border-top:1px solid var(--linea)}
body[class] .footer .footer__pagos b{color:#111;background:var(--ambar);border-color:var(--ambar);border-radius:99px}
.footer__logo{display:flex;align-items:center;gap:10px}
.footer__logo picture,.footer__logo img{height:54px;width:auto;display:block}
.footer__logo b{font-family:var(--font-d);font-weight:700;font-size:24px;letter-spacing:.06em;text-transform:uppercase}
.footer__logo b i{font-style:normal;color:var(--ambar-os)}

/* ---------- avisos de compra del plugin ---------- */
#salertWrapper .popup_template{background:#fff!important;border:1px solid var(--linea)!important;border-left:5px solid var(--ambar)!important;border-radius:12px!important;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.4)!important;backdrop-filter:none}

/* ---------- restos ---------- */
.migas a:hover{color:var(--ambar-os)}
.migas .migas__act{font-weight:700}
.res__tot b span,.res__tot b bdi{font-size:inherit!important;letter-spacing:inherit;text-transform:none;color:inherit}
.res__tot b{font-size:clamp(28px,3.4vw,36px)}
svg{max-width:100%}
/* contenido de paginas sueltas (aviso legal, terminos...) */
.kd-texto{font-size:15px;line-height:1.7;color:var(--tinta)}
.kd-texto h2,.kd-texto h3{margin:26px 0 10px}
.kd-texto p{margin:0 0 14px}
.kd-texto ul,.kd-texto ol{margin:0 0 14px 22px}
/* el texto de las cajas destacadas hereda la tinta, no va en blanco */
.caja--oro p{color:var(--mute)}

/* ==========================================================================
   MÓVIL, PENSADO PARA VENDER
   Lo que hay aqui no reduce el escritorio: lo reorganiza. En cada pantalla el
   objetivo esta a un pulgar: producto, precio y boton en la primera vista;
   talla en una hoja inferior; total y "finalizar" siempre a la vista.
   ========================================================================== */

/* tacto: sin brillo azul al tocar, sin retardo, botones de 44px como minimo */
*{-webkit-tap-highlight-color:transparent}
a,button,input,select,textarea,label{touch-action:manipulation}
@media (max-width:899px){
  .btn,.woocommerce .button,.talla,.chip,.ftl__b,.flecha,.cant button,.pt,.lang__b,.busca__b,.ham{min-height:44px}
  .pt,body[class] .pt{min-height:0}
  /* iOS hace zoom en campos de menos de 16px */
  input,select,textarea,.woocommerce form .form-row input.input-text,.woocommerce form .form-row select,
  .campos input,form.checkout input.input-text,.busca input,.bus__f input,.guia__campos input{font-size:16px!important}
}

/* ---------- portada movil: producto, precio y boton en la primera pantalla ---------- */
@media (max-width:899px){
  .hero{padding-top:calc(60px + env(safe-area-inset-top));min-height:0}
  .hero__in{display:flex;flex-direction:column;gap:0;padding:12px 16px 56px}
  .escena{order:-1;padding:6px 0 0;margin:0 auto 14px;width:min(70%,300px)}
  .hero__estrella{width:70%;right:-22%;top:-6%;opacity:.12}
  .marco{aspect-ratio:1;transform:rotate(-2deg);border-radius:18px;box-shadow:0 18px 40px -20px rgba(0,0,0,.8),0 0 0 5px rgba(255,255,255,.08)}
  .reclamo{left:-10px;top:6px}
  .reclamo span{font-size:13px;padding:.45em .9em}
  .copy{display:flex;flex-direction:column}
  .hero__eye{order:0;margin:0 0 10px;font-size:11.5px;padding:5px 10px;align-self:flex-start}
  .copy h1,body .copy h1,body .copy h1 span{order:1;font-size:clamp(34px,10vw,44px);line-height:.92;margin:0 0 10px}
  .hero__sub{order:4;margin:14px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62)}
  .copy .barra{order:2;border-top:0;padding:0;margin:0 0 12px;align-items:center}
  .mod__m{font-size:10px;margin-bottom:2px}
  .mod__n{font-size:17px;max-width:58vw}
  .copy .precio{font-size:30px}
  .puntos{margin:10px 0 0}
  .acc{order:3;flex-direction:column;align-items:stretch;gap:8px;margin:0}
  .acc .btn--w,body[class] a.btn--w{width:100%;justify-content:center;font-size:17px;padding:14px 20px;transform:none}
  .acc .btn--w > *{transform:none}
  .acc .btn--o,body[class] a.btn--o{width:100%;justify-content:center;transform:none;border-width:1.5px;font-size:15px;padding:11px 16px}
  .acc .btn--o > *{transform:none}
  .hero::after{height:26px}
}

/* ---------- los tres pilares, como lista compacta ---------- */
@media (max-width:759px){
  .usp{padding:22px 0 10px}
  .usp h2{font-size:26px}
  .usp__grid{gap:8px;margin-top:12px}
  .usp__c{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-radius:12px}
  .usp__i{width:40px;height:40px;margin:0;flex:0 0 auto;border-radius:10px}
  .usp__i svg{width:20px;height:20px}
  .usp__c b{font-size:16px;margin:0 0 2px}
  .usp__c p{font-size:12px;line-height:1.4}
}

/* ---------- el buscador se abre a lo ancho ---------- */
@media (max-width:859px){
  .busca.abierta{width:min(68vw,320px)}
}

/* ---------- ficha: tallas grandes, barra fija con talla y fecha ---------- */
@media (max-width:519px){
  .tallas{grid-template-columns:repeat(4,1fr);gap:8px}
  .talla,body[class] .talla{min-height:48px;font-size:17px;border-radius:12px}
}
.prueba{display:inline-flex;align-items:center;gap:7px;margin:0 0 16px;padding:6px 11px;border-radius:99px;
  background:var(--ambar-cl);color:#111;font-size:12.5px;font-weight:700}
.prueba svg{width:14px;height:14px;color:var(--ambar-os);flex:0 0 auto}
.btn--wa,body[class] a.btn--wa{display:inline-flex;width:100%;justify-content:center;margin:10px 0 18px;
  background:#fff!important;color:#128c4a!important;border:2px solid #25d366!important;box-shadow:0 6px 0 #1fa85a!important;transform:none}
.btn--wa > *,body[class] a.btn--wa > *{transform:none}
.btn--wa:hover,body[class] a.btn--wa:hover{background:#25d366!important;color:#fff!important}
.btn--wa svg{width:18px;height:18px;color:#25d366}
.btn--wa:hover svg{color:#fff}
@media (min-width:940px){ .btn--wa,body[class] a.btn--wa{width:auto} }

.fija{padding:8px 14px calc(8px + env(safe-area-inset-bottom))}
.fija__in{gap:10px}
.fija__t b{display:block;font-family:var(--font-d);font-size:14px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.fija__t > span{display:block;font-size:12px;color:var(--mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fija__p{font-weight:800;color:var(--tinta);font-size:13px}
.fija__p del{display:none}
.fija__p ins{text-decoration:none}
.fija__talla{font-style:normal;font-weight:700;color:var(--ambar-os);margin-left:4px}
.fija__t strong{color:var(--tinta)}
.fija .btn{flex:0 0 auto;padding:11px 18px;font-size:15px;transform:none}
.fija .btn > *{transform:none}
/* con la barra puesta, el boton flotante del carrito del plugin se aparta */
body.kd-con-barra .cc-compass{opacity:0;pointer-events:none}

/* ---------- la hoja inferior (tallas en la ficha, filtro en los listados) ---------- */
.hoja{position:fixed;inset:0;z-index:1000001;display:grid;align-items:end}
.hoja[hidden]{display:none!important}
.hoja__velo{position:absolute;inset:0;background:rgba(17,17,17,.55);animation:hojaVelo .25s ease both}
@keyframes hojaVelo{from{opacity:0}to{opacity:1}}
.hoja__caja{position:relative;z-index:1;background:#fff;border-radius:20px 20px 0 0;border-top:4px solid var(--ambar);
  padding:12px 18px calc(18px + env(safe-area-inset-bottom));max-height:84vh;max-height:84dvh;overflow-y:auto;
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.4);animation:hojaSube .32s var(--ease) both}
@keyframes hojaSube{from{transform:translateY(100%)}to{transform:none}}
.hoja__caja::before{content:'';display:block;width:44px;height:5px;border-radius:5px;background:var(--linea);margin:0 auto 12px}
.hoja__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.hoja__cab h3{margin:0;font-family:var(--font-d);font-weight:600;font-size:22px;letter-spacing:.03em;text-transform:uppercase}
.hoja__x,body[class] .hoja__x{width:36px;height:36px;border-radius:99px;border:2px solid var(--tinta);background:#fff;color:var(--tinta);
  display:grid;place-items:center;padding:0;cursor:pointer;min-height:0}
.hoja__x svg{width:14px;height:14px}
.hoja__tallas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}
.hoja__tallas .talla{min-height:50px;font-size:18px}
.hoja__nota{margin:0 0 14px;font-size:12px;line-height:1.45;color:var(--mute)}
.hoja__btn,body[class] .hoja__btn{width:100%;justify-content:center;font-size:17px;padding:14px 20px;transform:none}
.hoja__btn > *{transform:none}
.hoja__btn[disabled]{opacity:.45;cursor:not-allowed}
.hoja__elegida{display:none;align-items:center;gap:8px;margin:0 0 12px;padding:9px 12px;border-radius:10px;background:var(--ambar-cl);font-size:13px;font-weight:700}
.hoja__elegida.on{display:flex}
.hoja__elegida b{font-family:var(--font-d);font-size:20px;color:var(--ambar-os)}
@media (min-width:900px){ .hoja{display:none!important} }

/* ---------- escalera de premios compacta en movil ---------- */
.prem__mas{display:none}
@media (max-width:899px){
  .prem--compacta .prem__cards{display:none}
  .prem--compacta.abierta .prem__cards{display:grid}
  .prem--compacta .prem__mas,body[class] .prem--compacta .prem__mas{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:0;
    background:none;border:0;box-shadow:none;color:var(--ambar-os);font-family:var(--font-b);font-size:13px;font-weight:700;
    text-decoration:underline;text-underline-offset:3px;cursor:pointer;transform:none;min-height:36px}
  .prem--compacta .prem__mas svg{width:12px;height:12px;transition:transform .3s var(--ease)}
  .prem--compacta.abierta .prem__mas svg{transform:rotate(180deg)}
  .prem--compacta .prem__barra{margin-bottom:4px}
}

/* ---------- barra fija de total en carrito y pago ---------- */
.pie-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:3px solid var(--ambar);
  padding:8px 14px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -14px 30px -20px rgba(0,0,0,.4);
  transform:translateY(110%);transition:transform .35s var(--ease)}
.pie-cta.on{transform:none}
.pie-cta__in{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1360px;margin:0 auto}
.pie-cta__t span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pie-cta__t b{display:block;font-family:var(--font-d);font-weight:600;font-size:24px;line-height:1;color:var(--tinta)}
.pie-cta__t b span,.pie-cta__t b bdi{font-size:inherit!important}
.pie-cta .btn,body[class] .pie-cta .btn{flex:0 0 auto;padding:11px 20px;font-size:15px;transform:none}
.pie-cta .btn > *{transform:none}
@media (min-width:920px){ .pie-cta{display:none} }
body.kd-con-barra .joinchat{opacity:0;pointer-events:none}

/* confianza bajo el titulo del pago */
.confia{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;padding:0;list-style:none}
.confia li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--tinta)}
.confia li::before{content:'';width:16px;height:16px;border-radius:99px;background:var(--ambar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;flex:0 0 auto}
@media (max-width:919px){
  .chk{gap:14px}
  .caja{padding:16px}
  .paso h2{font-size:20px}
  /* el pago en movil: los campos a toda anchura y con aire */
  .woocommerce form .form-row{margin:0 0 12px}
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none}
  .woocommerce form .form-row input.input-text,.woocommerce form .form-row select,
  .select2-container--default .select2-selection--single{padding:13px 14px!important}
  .woocommerce-checkout #place_order{width:100%;font-size:17px;padding:15px 20px}
  .chk__res{order:-1}
  .chk__res .prem{display:none}
  .chk__res .entrega{margin:0 0 4px}
}
@media (max-width:919px){
  .car{gap:12px}
  .lin{grid-template-columns:70px 1fr;grid-template-rows:auto auto;gap:8px 12px}
  .lin__f{width:70px;grid-row:1 / span 2}
  .lin__d{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}
  .lin__p{order:2}
  .cant{order:1}
  .cant button{width:40px;height:40px;min-height:0;font-size:18px}
  .quitar{order:3;margin-left:8px}
  .res .btn{min-height:50px;font-size:17px}
  .kd-prem-carrito .prem__cards{grid-template-columns:repeat(2,1fr)}
}

/* ---------- listados: boton flotante de talla ---------- */
.ftl__flot{position:fixed;left:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:69;display:none;align-items:center;gap:8px;
  padding:11px 16px;border-radius:99px;background:var(--tinta);color:var(--ambar);border:0;cursor:pointer;
  font-family:var(--font-d);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transform:translateY(140%);transition:transform .3s var(--ease)}
.ftl__flot svg{width:16px;height:16px}
.ftl__flot i{font-style:normal;background:var(--ambar);color:#111;font-family:var(--font-b);font-size:11px;font-weight:800;
  padding:2px 7px;border-radius:99px}
.ftl__flot.on{transform:none}
@media (max-width:899px){ .ftl__flot{display:inline-flex} }
.hoja .ftl__l{flex-wrap:wrap;overflow:visible;gap:8px}
.hoja .ftl__b{min-width:56px;min-height:50px}
.hoja .ftl__b b{font-size:17px}
.hoja .ftl__e{display:block;margin:10px 0 6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.hoja .ftl__x{display:inline-block;margin:12px 0 0;font-size:13px;font-weight:700;color:var(--ambar-os)}

/* ---------- galeria de la ficha: pasa de foto deslizando ---------- */
.gal__m{touch-action:pan-y}
@media (max-width:939px){
  .gal__t{overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .gal__t::-webkit-scrollbar{display:none}
  .gal__t button{width:58px}
  .gal__pos{position:absolute;z-index:2;right:10px;bottom:10px;padding:4px 9px;border-radius:99px;background:rgba(17,17,17,.75);color:#fff;
    font-size:11px;font-weight:700;letter-spacing:.06em}
}
@media (min-width:940px){ .gal__pos{display:none} }

/* ---------- remates medidos en el movil ---------- */
/* el total de la barra fija: en una linea, en tinta, con el simbolo pegado */
.pie-cta__t{min-width:0;flex:0 1 auto}
.pie-cta__t b{font-size:22px;white-space:nowrap}
.pie-cta__t b *{color:var(--tinta)!important;font-size:inherit!important;font-weight:inherit!important;white-space:nowrap}
.pie-cta .btn,body[class] .pie-cta .btn{white-space:nowrap}
/* "Volver" en la ficha: solo la flecha en pantallas estrechas, que si no la hamburguesa se sale */
.nav__volver{margin-left:0;flex:0 0 auto}
@media (max-width:599px){
  .nav__volver{width:36px;height:36px;justify-content:center;border-radius:99px;border:2px solid var(--tinta);gap:0}
  .nav__volver span{display:none}
  .nav__volver svg{width:15px;height:15px}
  .nav__acc{gap:6px}
  .lang__b{padding:4px 7px}
}

/* la cabecera en pantallas estrechas: todo cabe con aire */
@media (max-width:599px){
  .nav__in{gap:8px;padding-left:12px;padding-right:12px}
  .nav__logo{gap:6px}
  .nav__logo picture,.nav__logo img{height:30px}
  .nav__logo b{font-size:17px}
  .lang{padding:2px}
  .lang__b,body[class] a.lang__b{min-height:30px;padding:3px 7px;font-size:10.5px}
  .ham,.busca__b,body[class] .ham,body[class] .busca__b{min-height:36px}
}
/* la barra fija de total: el importe no se parte nunca */
.pie-cta__in{flex-wrap:nowrap}
.pie-cta__t{flex:1 1 auto;overflow:hidden}
.pie-cta__t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip;line-height:1.1}
.pie-cta__t b strong,.pie-cta__t b span,.pie-cta__t b bdi{display:inline;white-space:nowrap}

/* ---- el menu completo solo cuando cabe (medido: a 1100 px desbordaba 150 px); de 1280 a 1399 un poco mas prieto ---- */
@media (min-width:1280px) and (max-width:1399px){
  .nav .nav__links a{font-size:13.5px;letter-spacing:.05em}
  .nav__links{gap:12px}
}

/* ==========================================================================
   Tono serio (9 de octubre de 2026, a peticion del dueño): fuera las
   inclinaciones, las rayas de obra, las pegatinas giradas, el titular que se
   escribe solo y las mayusculas a lo grande. Misma paleta (blanco, ambar y
   negro), formas rectas, titulares en caja baja y animaciones minimas.
   Va al final de la hoja: pisa a todo lo de arriba.
   ========================================================================== */

/* ---- titulares: Oswald en caja baja, tamaños contenidos ---- */
h1,h2,h3,.cab h1,.cabp h1,.ok h1,.e404 h1,.vend h2,.of h2,.sel h2,.rev h2,.rel h2,.caja h2,
.info__h,.usp h2,.faqs h2,.cats2 h2,.modal h3,.guia__cab h2,.hoja__cab h3,.vacia b,.gar h2,.ig h2,
.copy h1,body .copy h1,body .copy h1 span{text-transform:none;letter-spacing:0;font-weight:500}
.cab h1{font-size:clamp(30px,4.2vw,46px);line-height:1.05}
.cabp h1{font-size:clamp(26px,3.4vw,38px);line-height:1.05}
.vend h2,.of h2,.sel h2,.rev h2,.usp h2,.faqs h2,.cats2 h2{font-size:clamp(24px,3.2vw,36px);line-height:1.08}
.rel h2{font-size:clamp(20px,2.6vw,28px)}
.info__h{font-size:clamp(24px,2.9vw,34px);line-height:1.1}
.ok h1{font-size:clamp(26px,4vw,40px)}
.e404 h1{font-size:clamp(22px,3.4vw,32px)}
.caja h2{font-size:clamp(18px,2vw,22px)}
.modal h3{font-size:clamp(18px,2.4vw,24px)}
.hoja__cab h3{font-size:19px}
.rev h2 em{font-style:normal;color:var(--ambar-os)}

/* ---- etiquetas sobre los titulos: una linea ambar y texto pequeño, sin pestaña ---- */
.vend__eye,.sel__eye,.rev__eye,.rel__eye,.cab__eye,.cabp__eye,.usp__eye,.faqs__eye,.cats2__eye,.hero__eye{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;padding:0;background:none;border-radius:0;transform:none;
  font-family:var(--font-b);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ambar-os)}
.vend__eye::before,.sel__eye::before,.rev__eye::before,.rel__eye::before,.cab__eye::before,.cabp__eye::before,
.usp__eye::before,.faqs__eye::before,.cats2__eye::before,.hero__eye::before{content:'';width:22px;height:2px;background:var(--ambar);flex:0 0 auto}
.vend__eye > *,.sel__eye > *,.rev__eye > *,.rel__eye > *,.cab__eye > *,.cabp__eye > *,
.usp__eye > *,.faqs__eye > *,.cats2__eye > *,.hero__eye > *{transform:none}
body .cabp__eye,body .cab__eye{color:var(--ambar-os)}
.hero__eye{color:var(--ambar);margin:0 0 18px}
.hero__eye i{display:block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45)}

/* ---- botones: rectos y planos ---- */
.btn,body[class] a.btn--o,.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.single_add_to_cart_button,.acc .btn--w,body[class] a.btn--w,body[class] a.btn--linea,body[class] .btn--linea,body[class] button.btn--linea{
  border-radius:6px!important;box-shadow:none!important;transform:none!important;
  font-family:var(--font-b)!important;font-weight:700!important;font-size:14px!important;letter-spacing:.01em!important;text-transform:none!important;
  padding:13px 22px!important;line-height:1.2!important;transition:background .2s,color .2s,border-color .2s!important}
.btn,.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.single_add_to_cart_button,.acc .btn--w,body[class] a.btn--w{
  background:var(--ambar)!important;color:#111!important;border:1.5px solid var(--ambar)!important}
.btn:hover,.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.single_add_to_cart_button:hover,.acc .btn--w:hover,body[class] a.btn--w:hover{
  background:#111!important;color:#fff!important;border-color:#111!important;transform:none!important;box-shadow:none!important}
.btn:active{transform:none!important;box-shadow:none!important}
.btn > *,.woocommerce .button > *,body[class] .btn svg{transform:none!important}
body[class] a.btn--linea,body[class] .btn--linea,body[class] button.btn--linea{background:#fff!important;color:#111!important;border:1.5px solid #111!important}
body[class] a.btn--linea:hover,body[class] .btn--linea:hover,body[class] button.btn--linea:hover{background:#111!important;color:#fff!important}
.acc .btn--o,body[class] a.btn--o{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.55)!important}
.acc .btn--o:hover,body[class] a.btn--o:hover{background:#fff!important;color:#111!important;border-color:#fff!important}
.btn--wa,body[class] a.btn--wa{background:#25d366!important;color:#fff!important;border-color:#25d366!important}
.btn--wa:hover,body[class] a.btn--wa:hover{background:#1a9e4b!important;border-color:#1a9e4b!important;color:#fff!important}
.single_add_to_cart_button.disabled,.single_add_to_cart_button:disabled{background:var(--ambar-cl)!important;color:var(--mute)!important;border-color:var(--ambar-cl)!important}

/* ---- portada: banda negra limpia ---- */
.hero::before,.hero::after{display:none}
.hero__in{padding-bottom:clamp(40px,6vw,70px)}
.hero__estrella{opacity:.08}
.marco,.marco:hover{transform:none;border-radius:12px;box-shadow:0 24px 48px -28px rgba(0,0,0,.65)}
.marco::after{border-radius:12px}
.reclamo{display:none}
.copy h1,body .copy h1,body .copy h1 span{font-size:clamp(36px,4.6vw,60px);line-height:1.04;letter-spacing:-.01em;margin:0 0 18px}
body .copy h1 .it,.copy h1 .it{font-style:normal;color:var(--ambar)}
.hero__sub{color:rgba(255,255,255,.78);font-size:clamp(15px,1.4vw,17px);max-width:48ch}
.mod__n{text-transform:none;letter-spacing:0;font-size:19px}
.mod__m{letter-spacing:.14em}
@media (max-width:899px){
  .copy h1,body .copy h1,body .copy h1 span{font-size:clamp(28px,8vw,36px);line-height:1.08;margin:0 0 10px}
  .hero__sub{font-size:14px;color:rgba(255,255,255,.7)}
}

/* ---- franja de ventajas: quieta y sobria ---- */
.aviso{background:var(--fondo2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:12px 0;box-shadow:none}
.aviso__t,.aviso:hover .aviso__t{animation:none;width:100%;justify-content:center;flex-wrap:wrap;padding:0 16px}
.aviso__g{flex-wrap:wrap;justify-content:center;gap:8px clamp(14px,2.4vw,34px)}
.aviso__g + .aviso__g{display:none}
.aviso__i{padding:0;margin:0;font-family:var(--font-b);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tinta)}
.aviso__i svg{color:var(--ambar-os);opacity:1}
.aviso__s{width:4px;height:4px;border-radius:50%;clip-path:none;background:rgba(17,17,17,.3)}
.aviso__g .aviso__i:last-child{display:none}
@media (max-width:699px){ .aviso__i:has(.aviso__s){display:none} .aviso__g{gap:8px 18px} .aviso__i{font-size:12.5px} }

/* ---- tarjetas, chips y etiquetas: rectas ---- */
.tj,.rejilla .tj{border-radius:10px;box-shadow:none}
.tj:hover{transform:translateY(-2px);border-color:rgba(17,17,17,.25);box-shadow:0 14px 28px -22px rgba(0,0,0,.35)}
.tj__f{border-radius:10px 10px 0 0}
.tj__n{text-transform:none;letter-spacing:0;font-size:15px}
.tj__p{padding:0;background:none;color:var(--tinta);font-family:var(--font-b);font-size:15px;font-weight:800;transform:none;border-radius:0}
.tj__eti,.tj__eti--n{transform:none;border-radius:4px;font-family:var(--font-b);font-size:10.5px;font-weight:700;letter-spacing:.08em}
.dto{border-radius:4px;background:var(--tinta);color:#fff}
.chip,body[class] .chip,body[class] a.chip{border:1px solid var(--linea);font-family:var(--font-b);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;background:#fff;color:var(--tinta)}
.chip.on,body[class] .chip.on,body[class] a.chip.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.vend__todo,.sel__todo,.cats__todo{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;border-radius:6px}
.cats2__t:hover .cats2__f{transform:translateY(-3px);box-shadow:0 0 0 2px var(--ambar),0 14px 28px -20px rgba(0,0,0,.4)}
.cats2__n{text-transform:none;letter-spacing:0;font-size:15px}
.entrega{border-radius:8px}

/* ---- pilares, cifras, FAQ, premios, acordeones ---- */
.usp__c{border-radius:10px;box-shadow:none}
.usp__c::before{display:none}
.usp__i{background:var(--ambar-cl);color:var(--tinta);border-radius:10px}
.usp__c b{text-transform:none;letter-spacing:0;font-size:18px}
.cifra{border-radius:10px;box-shadow:none}
.cifra b{font-size:clamp(30px,4vw,44px)}
.faq__b{text-transform:none;letter-spacing:0;font-size:17px}
.det__b{text-transform:none;letter-spacing:0;font-size:16px}
.prem__cab h3{text-transform:none;letter-spacing:0;font-size:16px;font-weight:500}
.prem__cd{border-radius:8px}
.prem__cd b{text-transform:none;letter-spacing:0;font-size:13.5px}
.prem__cd .prem__b,.prem__cd.on .prem__b{border-radius:8px}
.prem__cd.on .prem__b{background:var(--ambar-cl);color:var(--tinta)}
.cuenta b{color:var(--tinta)}

/* ---- menu lateral y barras fijas del movil ---- */
body .panel > a,.panel > a,.panel .grupo > button{text-transform:none;letter-spacing:0;font-size:17px;font-weight:500}
.fija__t b,.pie-cta__t span{text-transform:none;letter-spacing:0}

/* ---- remates del tono serio (medidos): franja que envuelve en movil, sombra del boton de comprar, titulo de premios ---- */
.aviso__g{flex:1 1 100%;max-width:100%;min-width:0}
body[class] .btn,body[class] a.btn,body[class] button.btn,body[class] .woocommerce .button,body[class] .woocommerce a.button,body[class] .woocommerce button.button,
body[class] .single_add_to_cart_button,body[class] button.single_add_to_cart_button,body[class] .button.alt,body[class] .button.alt.disabled,body[class] input.button{
  box-shadow:none!important;border-radius:6px!important;transform:none!important;text-transform:none!important;
  font-family:var(--font-b)!important;font-weight:700!important;font-size:14px!important;letter-spacing:.01em!important}
body[class] .btn:hover,body[class] .woocommerce .button:hover,body[class] .single_add_to_cart_button:hover,body[class] .button.alt:hover{box-shadow:none!important;transform:none!important}
body[class] .btn:active,body[class] .single_add_to_cart_button:active{box-shadow:none!important;transform:none!important}
.prem__cab h3,body[class] .prem__cab h3{color:var(--tinta)}

/* ---- remates del tono serio (2): titular algo menor, pilares del movil en dos columnas, pastillas rectas ---- */
.copy h1,body .copy h1,body .copy h1 span{font-size:clamp(34px,4.2vw,54px)}
@media (max-width:899px){
  .usp__c{display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:2px;align-items:start;padding:14px 14px 14px 16px}
  .usp__i{grid-row:1/3;align-self:center}
  .usp__c b{grid-column:2;font-size:16px;margin:0}
  .usp__c p{grid-column:2;font-size:12.5px}
  .copy h1,body .copy h1,body .copy h1 span{font-size:clamp(28px,8vw,36px)}
}
.sello,body[class] .sello{border-radius:6px}
.chip,body[class] .chip,body[class] a.chip,.chip.on,body[class] .chip.on,body[class] a.chip.on{border-radius:8px}

/* ---- remates del tono serio (3): cabeceras de los bloques del pago en caja baja ---- */
.woocommerce-billing-fields > h3,.woocommerce-shipping-fields > h3,.woocommerce-additional-fields > h3,
body[class] .woocommerce-billing-fields > h3,body[class] .woocommerce-shipping-fields > h3,body[class] .woocommerce-additional-fields > h3{
  text-transform:none;letter-spacing:0;font-size:16px;font-weight:500}

/* ---- remates del tono serio (4): el nombre en las lineas del carrito y la casilla de cuenta, en caja baja ---- */
.lin__n,body[class] .lin__n,body[class] a.lin__n{text-transform:none;letter-spacing:0}
.woocommerce-account-fields .form-row label,.woocommerce-account-fields label.checkbox{text-transform:none;letter-spacing:0;font-size:14px}

/* ---- remates del tono serio (5): la casilla "crear una cuenta" del pago, con mas peso que la regla generica de WooCommerce ---- */
body[class] .woocommerce form .woocommerce-account-fields label,body[class] .woocommerce form .form-row.create-account label{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600}

/* ==========================================================================
   Banner de marca (12 de octubre de 2026): sin productos. Promesa clara,
   un boton principal, y a la derecha tres tarjetas que son los tres
   argumentos de compra con datos reales (fecha de entrega y corte de hoy).
   ========================================================================== */
.hero--marca .hero__in{align-items:center;padding-bottom:clamp(44px,6vw,72px)}
@media (min-width:900px){
  .hero--marca .hero__in{grid-template-columns:1.08fr .92fr;column-gap:clamp(34px,5vw,86px);min-height:calc(86svh - 82px)}
}
.hero--marca .hero__sub{margin-bottom:22px}
.hero__fe{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;max-width:54ch}
.hero__fe li{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.3;color:rgba(255,255,255,.84)}
.hero__fe svg{width:17px;height:17px;flex:0 0 auto;color:var(--ambar)}

.promesa{position:relative;z-index:1;display:grid;gap:12px;padding:16px 0 16px 18px}
.promesa .hero__estrella{right:-14%;top:-14%;width:min(76%,380px);opacity:.1}
.pcard{position:relative;z-index:1;display:flex;gap:14px;align-items:flex-start;padding:18px 20px 18px 16px;border-radius:12px;
  background:#fff;color:var(--tinta);box-shadow:0 26px 50px -30px rgba(0,0,0,.75)}
.pcard--entrega{border-left:4px solid var(--ambar);transform:translateX(-18px)}
.pcard--pago{transform:translateX(16px)}
.pcard__i{flex:0 0 auto;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--ambar-cl);color:var(--tinta)}
.pcard__i svg{width:22px;height:22px}
.pcard > div{min-width:0}
.pcard small{display:block;margin:0 0 3px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ambar-os)}
.pcard b{display:block;font-family:var(--font-d);font-weight:500;font-size:20px;line-height:1.12;letter-spacing:0}
.pcard b strong{font-weight:500;color:var(--ambar-os)}
.pcard > div > span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--mute)}
.pcard > div > .pcard__corte{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:5px 10px;border-radius:6px;
  background:var(--tinta);color:#fff;font-size:12px;font-weight:600;line-height:1.2}
.pcard__corte::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ambar);animation:kdLate 1.5s ease-in-out infinite}
@keyframes kdLate{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){ .pcard__corte::before{animation:none} }
.pcard__n{position:relative;z-index:1;margin:4px 0 0 2px;font-size:13px;color:rgba(255,255,255,.72)}
.pcard__n b{font-family:var(--font-d);font-weight:500;font-size:19px;color:#fff;margin-right:2px}
.usp{scroll-margin-top:90px}

@media (max-width:899px){
  .hero--marca .hero__in{padding-bottom:36px}
  .hero__fe{display:none}
  .hero--marca .hero__sub{order:4;margin:14px 0 0}
  .promesa{order:6;grid-template-columns:1fr 1fr;gap:8px;padding:16px 0 0}
  .promesa .hero__estrella{width:60%;right:-18%;top:auto;bottom:-10%;opacity:.08}
  .pcard,.pcard--entrega,.pcard--pago{transform:none;box-shadow:none;padding:12px 12px;gap:10px;border-radius:10px;align-items:center}
  .pcard--entrega{grid-column:1/-1;border-left-width:4px}
  .pcard__i{width:36px;height:36px;border-radius:8px}
  .pcard__i svg{width:18px;height:18px}
  .pcard small{font-size:10px;letter-spacing:.08em;margin:0 0 2px}
  .pcard b{font-size:15.5px}
  .pcard > div > span{display:none}
  .pcard > div > .pcard__corte{display:inline-flex;margin-top:6px;font-size:11.5px;padding:4px 8px}
  .pcard__n{grid-column:1/-1;text-align:center;margin:4px 0 0;font-size:12.5px}
  .pcard__n b{font-size:16px}
}

/* ---- banner en movil: el ojal con un solo dato, en una linea ---- */
@media (max-width:599px){
  .hero--marca .hero__eye{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:flex}
  .hero--marca .hero__eye i,.hero--marca .hero__eye span + i + span{display:none}
}

/* ---- el enlace del cupon en el pago, con los colores del tema (WooCommerce lo pinta rosa) ---- */
.woocommerce-form-coupon-toggle .showcoupon,body[class] .woocommerce-form-coupon-toggle a.showcoupon{color:var(--ambar-os);text-decoration:underline;text-underline-offset:3px}
.woocommerce-form-coupon-toggle .showcoupon:hover,body[class] .woocommerce-form-coupon-toggle a.showcoupon:hover{color:var(--tinta)}

/* ==========================================================================
   Barra de anuncio (12 de octubre de 2026): las cuatro ventajas una sola vez,
   fijas arriba del todo. La cabecera y la pagina bajan su altura. En el
   movil se ve una ventaja cada vez (zapaflash.js las rota).
   ========================================================================== */
:root{--anuncio:34px}
@media (max-width:759px){ :root{--anuncio:32px} }
.anuncio{position:fixed;top:0;left:0;right:0;z-index:61;height:var(--anuncio);background:var(--tinta);color:#fff;
  font-family:var(--font-b);font-size:12.5px;font-weight:600;line-height:1.2;overflow:hidden}
.anuncio__in{max-width:1360px;margin:0 auto;height:100%;padding:0 clamp(14px,3vw,30px);display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,44px)}
.anuncio__i{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:#fff}
.anuncio__i svg{width:15px;height:15px;flex:0 0 auto;color:var(--ambar)}
.anuncio__i > span{color:#fff}
@media (max-width:759px){
  .anuncio{font-size:12px}
  .anuncio__in{justify-content:center;gap:0}
  .anuncio__i{display:none}
  .anuncio__i.on{display:inline-flex;animation:kdAnuncio .45s ease}
  @keyframes kdAnuncio{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){ .anuncio__i.on{animation:none} }

/* todo lo que colgaba del borde superior baja la altura de la barra */
.nav,body[class] .nav{top:var(--anuncio)}
.hero,body[class] .hero{padding-top:calc(82px + var(--anuncio) + env(safe-area-inset-top))}
@media (max-width:899px){ .hero,body[class] .hero{padding-top:calc(60px + var(--anuncio) + env(safe-area-inset-top))} }
#kd-main,body[class] #kd-main{padding-top:calc(70px + var(--anuncio) + env(safe-area-inset-top))}
body.home #kd-main,body[class].home #kd-main{padding-top:0}
.usp{scroll-margin-top:calc(90px + var(--anuncio))}
.salta{top:var(--anuncio)}

/* el ojal del banner: ahora son las familias del catalogo, con enlace */
.hero__eye--cats a{color:inherit;text-decoration:none}
.hero__eye--cats a:hover{color:#fff}
@media (max-width:599px){
  .hero--marca .hero__eye{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:flex;font-size:10.5px;letter-spacing:.1em}
  .hero--marca .hero__eye i,.hero--marca .hero__eye span + i + span{display:block}
}

/* "Como funciona" como tres pasos numerados, mas abajo de la portada */
.usp--pasos .usp__grid{list-style:none;margin:18px 0 0;padding:0;counter-reset:paso}
.usp--pasos .usp__c{position:relative}
.usp__n{font-family:var(--font-d);font-weight:500;font-size:20px;color:var(--tinta);background:var(--ambar);border-radius:10px}
@media (max-width:899px){ .usp--pasos .usp__i{grid-row:1/3;align-self:center} }

/* ==========================================================================
   Banner de imagen (12 de octubre de 2026): los dos banners del dueño
   (escritorio 2048x768, movil 1122x1402) con los botones pintados en la
   imagen y, encima, dos enlaces de verdad del mismo tamaño y en el mismo
   sitio. Las zonas van en % del banner, asi que valen a cualquier ancho.
   ========================================================================== */
.hero--img{background:#0b0d0c;padding-bottom:0;min-height:0}
.hero--img .hero__in{display:none}
.hero__img{position:relative;max-width:1360px;margin:0 auto;line-height:0}
@media (min-width:1400px){ .hero__img{border-radius:0 0 14px 14px;overflow:hidden} }
.hero__foto{display:block;width:100%;height:auto;aspect-ratio:2048/768}
@media (max-width:767px){ .hero__foto{aspect-ratio:1122/1402} }

/* las zonas pulsables: el texto va dentro pero invisible (lo lee el lector de pantalla y lo ve el foco) */
.hero__zona{position:absolute;display:block;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  border-radius:999px;color:transparent;font-size:0;cursor:pointer;z-index:2;
  outline:0;transition:box-shadow .2s,transform .15s}
.hero__zona span{position:absolute;left:-9999px}
.hero__zona:hover{box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.hero__zona:active{transform:scale(.985)}
.hero__zona:focus-visible{box-shadow:0 0 0 3px var(--ambar),0 0 0 6px rgba(0,0,0,.6)}
@media (max-width:767px){
  .hero__zona{left:var(--lm);top:var(--tm);width:var(--wm);height:var(--hm)}
}

/* la cabecera fija sigue bajando el banner; la pagina ya no lleva el hueco de abajo */
.hero--img{padding-top:calc(65px + var(--anuncio) + env(safe-area-inset-top))}
@media (max-width:899px){ .hero--img{padding-top:calc(57px + var(--anuncio) + env(safe-area-inset-top))} }

/* ---- movil: los botones pintados miden 32 px en un telefono; la zona pulsable se estira
   (sin verse) hasta 43 px, sin que las dos se pisen (hay 1,6 % de hueco entre ellas) ---- */
@media (max-width:767px){
  .hero__zona--cat{top:calc(var(--tm) - 1.6%);height:calc(var(--hm) + 2.4%)}
  .hero__zona--como{top:calc(var(--tm) - 0.6%);height:calc(var(--hm) + 2.2%)}
}

/* ---- la cuenta atras de las ofertas va en caja negra: el reloj en ambar, no en tinta (se perdia) ---- */
.cuenta b,body[class] .cuenta b{color:var(--ambar)}

/* ---- ofertas sin rebajas: la seccion se queda en su sitio con un aviso honesto y el WhatsApp ---- */
.of--vacia .vend__cab{margin-bottom:14px}
.of__vacia{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border:1px solid var(--linea);border-radius:10px;background:#fff}
.of__vacia p{margin:0;font-size:15px;line-height:1.5;color:var(--mute);max-width:62ch}
.of__vacia .btn{flex:0 0 auto}
.of__vacia .btn svg{width:18px;height:18px}
@media (max-width:699px){
  .of__vacia{flex-direction:column;align-items:stretch;padding:16px}
  .of__vacia p{font-size:14px}
  .of__vacia .btn{justify-content:center}
}

/* ==========================================================================
   Listado (16 de octubre de 2026): los productos en la primera pantalla.
   Cabecera de una linea, chips de categorias, una fila de herramientas
   (talla, entrega, orden) y la rejilla. En el movil el filtro de tallas
   no se pinta en linea: se abre en la hoja inferior desde "Talla".
   ========================================================================== */
.lst{max-width:1360px;margin:0 auto;padding:10px clamp(16px,3.4vw,40px) 12px}
.lst__t{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.lst h1,body[class] .lst h1{margin:0;font-family:var(--font-d);font-weight:500;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:0;text-transform:none}
.lst__n{font-size:13px;color:var(--mute);white-space:nowrap}
.lst__n b{font-family:var(--font-d);font-weight:500;font-size:16px;color:var(--tinta)}

.subs,body[class] .subs{border-top:0}
.subs__in{padding:9px clamp(16px,3.4vw,40px)}
.ftl__in{padding:10px clamp(16px,3.4vw,40px)}

.lst__tools{max-width:1360px;margin:0 auto;padding:10px clamp(16px,3.4vw,40px) 2px;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.lst__talla{display:none}
.lst__ent{flex:1 1 auto;min-width:0;margin:0;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mute)}
.lst__ent svg{width:16px;height:16px;flex:0 0 auto;color:var(--ambar-os)}
.lst__ent-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lst__ent b{color:var(--tinta);font-weight:700}
.lst__orden{flex:0 0 auto;margin-left:auto}
.lst__orden form{margin:0}
.lst__orden select.orderby,body[class] .lst__orden select.orderby{appearance:none;-webkit-appearance:none;margin:0;min-height:40px;padding:8px 34px 8px 12px;border-radius:6px;
  border:1.5px solid var(--tinta);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center/14px;
  color:var(--tinta);font-family:var(--font-b);font-size:13.5px;font-weight:600;cursor:pointer}

.rejilla{padding-top:12px}

/* descripcion de la categoria, al final: es texto para Google, no para quien viene a comprar */
.lst__desc{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px) clamp(28px,4vw,48px)}
.lst__desc-in{max-width:72ch;font-size:13.5px;line-height:1.65;color:var(--mute);padding-top:18px;border-top:1px solid var(--linea)}
.lst__desc-in p{margin:0 0 10px}

@media (max-width:899px){
  .ftl,body[class] .ftl{display:none}
  .lst{padding:4px 16px 8px}
  .lst h1,body[class] .lst h1{font-size:23px}
  .subs__in{padding:8px 16px}
  .lst__tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 16px 0}
  .lst__talla{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 12px;border-radius:6px;border:1.5px solid var(--tinta);background:#fff;color:var(--tinta);
    font-family:var(--font-b);font-size:13.5px;font-weight:600;cursor:pointer}
  .lst__talla svg{width:16px;height:16px}
  .lst__talla i{font-style:normal;background:var(--ambar);color:var(--tinta);border-radius:4px;padding:1px 7px;font-weight:700}
  .lst__talla.on{background:var(--tinta);color:#fff}
  .lst__orden{margin:0;min-width:0}
  .lst__orden form,.lst__orden select.orderby,body[class] .lst__orden select.orderby{width:100%;min-height:42px;font-size:13px;padding-right:30px;text-overflow:ellipsis}
  .lst__ent{grid-column:1/-1;font-size:12.5px;margin-top:2px}
  .rejilla{padding-top:10px}
}

/* ---- remates del listado (medidos): la linea de entrega cabe en el movil, el orden llena su columna ---- */
.lst__orden .woocommerce-ordering{display:block;width:100%;margin:0}
@media (max-width:899px){
  .lst__ent{font-size:12px;letter-spacing:-.01em}
  .lst__orden select.orderby,body[class] .lst__orden select.orderby{display:block;width:100%;box-sizing:border-box}
}

/* ---- remates del listado (2): en el movil, Talla y Orden en la misma fila y la entrega debajo; un solo chevron ---- */
.lst__orden .woocommerce-ordering::after,.lst__orden .woocommerce-ordering::before{display:none!important;content:none!important}
.lst__orden select.orderby,body[class] .lst__orden select.orderby{width:100%!important;max-width:none!important}
@media (max-width:899px){
  .lst__tools{grid-template-columns:1fr 1fr;grid-template-areas:"talla orden" "ent ent";align-items:stretch}
  .lst__talla{grid-area:talla}
  .lst__orden{grid-area:orden}
  .lst__ent{grid-area:ent;margin-top:0}
}

/* ---- remates del listado (3): el padding de 30 px era para el select, no para el formulario ---- */
.lst__orden form,.lst__orden .woocommerce-ordering{padding:0!important}

/* zf-espacios-portada (17/10, pedido del usuario): menos hueco entre el banner,
   "Así compras en Zapaflash" y "Lo más vendido"; había ~130 px entre secciones. */
.usp--pasos{padding:clamp(18px,2.6vw,32px) 0 clamp(8px,1.2vw,14px)}
#vendidos{padding-top:clamp(18px,2.6vw,32px)}