*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --v:#274001;--vl:#A2BF6A;--d:#CD934A;--cr:#F4E9D3;
  --save:#4F6E20;
  --ease:cubic-bezier(.4,0,.2,1);--hh:66px;--hh-mob:58px;
  --ff-display:'CooperBlack','CooperBlackFallback','Cooper Black','Bowlby One SC',Georgia,serif;
  --ff-body:'Karla',sans-serif;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Dawn fija en body line-height:~1.8 y letter-spacing:0.06rem; luffa-web NO (deja
   ambos "normal" y los pone por elemento). Esa herencia engordaba/espaciaba los
   bloques sin valor propio. Restauramos "normal" para igualar al estático. */
body{font-family:var(--ff-body);background:var(--cr);color:var(--v);overflow-x:hidden;line-height:normal;letter-spacing:normal}
/* Dawn pone class="gradient" en el <body> y su regla .gradient{background:var(--gradient-background)}
   (blanco del esquema) GANA por especificidad a body{}. El blanco asomaba en cualquier hueco
   sin sección (p.ej. el margin-top del filtro en la tienda). Forzamos crema con mayor especificidad. */
body.gradient{background:var(--cr)}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--cr)}
::-webkit-scrollbar-thumb{background:var(--vl);border-radius:3px}

/* ── ANNOUNCEMENT marquee ── */
.ann{
  background:var(--v);color:var(--cr);overflow:hidden;white-space:nowrap;
  padding:9px 0;position:relative;transition:height .3s var(--ease),padding .3s var(--ease),opacity .3s;
}
.ann.hidden{height:0;padding:0;opacity:0;pointer-events:none}
.ann-track{display:inline-flex;gap:0;animation:marquee 84s linear infinite;will-change:transform}
.ann:hover .ann-track{animation-play-state:paused}
.ann-item{
  display:inline-flex;align-items:center;gap:0;padding:0;
  font-size:11.5px !important;font-weight:700 !important;letter-spacing:.08em;
  flex-shrink:0;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
.ann-sep{color:var(--vl);font-size:14px;opacity:.7;margin:0 42px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Dawn oculta los elementos vacíos (a:empty,div:empty…{display:none}); luffa-web no
   lo hace, y eso rompe nuestros divs decorativos/placeholders (hero-bg, fondos de
   categoría, sello, barras de progreso, etc., que van vacíos a propósito).
   Restauramos su display (esta hoja carga después de base.css → gana por orden). */
a:empty,ul:empty,dl:empty,div:empty,section:empty,article:empty,p:empty,h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty{display:revert}
/* Excepciones: elementos que SÍ deben seguir ocultos cuando están vacíos (no son
   decorativos: se rellenan por JS). Si no, el `:empty{display:revert}` de arriba los
   muestra como barras vacías. P.ej. el aviso del bundle (línea naranja al cargar). */
.bundle-warning:empty,#bundleWarning:empty,.toast:empty,#shipBarSlot:empty{display:none}
/* Dawn tiene utilidades .left/.right/.center (text-align) que CHOCAN con nuestras
   clases de dirección de la animación reveal (.reveal.left / .reveal.right).
   En luffa-web esos bloques NO se alinean (heredan), así que lo restauramos. */
.reveal.left,.reveal.right,.reveal.center{text-align:inherit}
/* Dawn fija color en h1–h6 (color:var(--color-foreground)); luffa-web no, los
   encabezados HEREDAN el verde del contenedor. Restauramos la herencia para que
   los títulos sin color propio (hero, .prod h3, etc.) salgan en verde de marca.
   Los que sí fijan color por clase (.an-manifesto h1, etc.) siguen mandando. */
h1,h2,h3,h4,h5,h6{color:inherit}
@media(max-width:768px){
  .ann-item{font-size:10.5px !important;padding:0;letter-spacing:.06em}
  .ann-sep{font-size:13px;margin:0 26px}
}

/* ── HEADER (sticky siempre, desktop y móvil)
   IMPORTANTE: lo limitamos a `header#hdr` (el header global del sitio)
   para no afectar a otros `<header>` decorativos dentro de la página
   (p. ej. el `bundle-page-head` del creador de packs). */
header#hdr{
  background:var(--cr);display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 48px;height:var(--hh);
  position:sticky;top:0;z-index:150;
  border-bottom:1px solid rgba(39,64,1,.12);transition:box-shadow .3s;
}
header#hdr.scrolled{box-shadow:0 2px 24px rgba(39,64,1,.11)}
.h-left{display:flex;align-items:center}
.main-nav{display:flex;align-items:center;gap:28px}
.main-nav>a,.has-drop>a{
  font-family:var(--ff-body);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  position:relative;padding-bottom:3px;display:flex;align-items:center;gap:4px;
  transition:color .2s;white-space:nowrap;cursor:pointer;
}
.main-nav>a::after,.has-drop>a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;
  background:var(--d);transition:width .3s var(--ease);
}
.main-nav>a:hover::after,.has-drop:hover>a::after{width:100%}
.main-nav>a:hover,.has-drop>a:hover{color:var(--d)}
.has-drop{position:relative}
.drop{position:absolute;top:100%;left:0;padding-top:16px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .22s,transform .22s;z-index:400}
.drop::before{content:'';position:absolute;top:0;left:-20px;right:-20px;height:20px}
.drop-inner{background:var(--cr);border:1px solid rgba(39,64,1,.15);min-width:148px;padding:6px 0;box-shadow:0 8px 28px rgba(39,64,1,.1)}
.has-drop:hover .drop{opacity:1;pointer-events:all;transform:translateY(0)}
.drop-inner a{display:block;padding:9px 16px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:background .18s,color .18s}
.drop-inner a:hover{background:var(--v);color:var(--cr)}

.h-center{display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s}
.h-center:hover{opacity:.7}
.h-center .logo-img{height:42px;width:auto;display:block}

.h-right{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:background .2s,transform .2s}
.ico:hover{background:rgba(39,64,1,.08);transform:scale(1.1)}
.ico svg{width:18px;height:18px;stroke:var(--v);fill:none;stroke-width:1.7}
.cart-ico-wrap{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;width:38px;height:38px}
.cart-ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s,transform .2s}
.cart-ico:hover{background:rgba(39,64,1,.08);transform:scale(1.1)}
.cart-ico svg{width:19px;height:19px;stroke:var(--v);fill:none;stroke-width:1.7}
.cart-badge{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--d);color:#fff;font-size:9px;font-weight:800;display:none;align-items:center;justify-content:center;line-height:1;border:1.5px solid var(--cr)}
.cart-badge.vis{display:flex}
.cart-badge.pop{animation:badgePop .4s var(--ease)}
@keyframes badgePop{0%{transform:scale(0)}70%{transform:scale(1.4)}100%{transform:scale(1)}}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--v);transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── SELECTOR DE IDIOMA (PC) ── */
.flag-ic{display:inline-block;width:21px;height:15px;border-radius:3px;overflow:hidden;flex-shrink:0;line-height:0;box-shadow:inset 0 0 0 1px rgba(39,64,1,.14)}
.flag-ic svg{display:block;width:100%;height:100%}
.lang-switch{position:relative}
.lang-switch .lang-form{margin:0;display:flex}

/* Opción A — junto al buscador, dropdown vertical (siempre visible en el header sticky) */
.lang-a .lang-trigger{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;background:none;border:1.5px solid rgba(39,64,1,.16);border-radius:20px;cursor:pointer;font-family:var(--ff-body);transition:border-color .2s,background .2s}
.lang-a .lang-trigger:hover{background:rgba(39,64,1,.06);border-color:rgba(39,64,1,.32)}
.lang-a .lang-cur{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--v)}
.lang-a .lang-caret{width:13px;height:13px;stroke:var(--v);fill:none;stroke-width:2.2;transition:transform .25s}
.lang-a.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 11px);right:0;min-width:178px;background:var(--cr);border:1px solid rgba(39,64,1,.15);border-radius:14px;padding:6px;box-shadow:0 16px 40px rgba(39,64,1,.18);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:420}
.lang-a.open .lang-menu{opacity:1;pointer-events:all;transform:translateY(0)}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:var(--ff-body);font-size:12.5px;font-weight:700;color:var(--v);letter-spacing:.02em;text-align:left;transition:background .16s}
.lang-opt .lang-name{flex:1;text-transform:capitalize}
.lang-opt:hover{background:rgba(162,191,106,.24)}
.lang-opt.on{background:rgba(39,64,1,.07)}
.lang-check{width:15px;height:15px;stroke:var(--d);fill:none;stroke-width:2.6;margin-left:auto;flex-shrink:0}

@media(max-width:768px){.lang-a{display:none}}

/* ── SEARCH OVERLAY (ocupa exactamente el header, oculta ann bar) ── */
.srch-overlay{
  position:fixed;top:0;left:0;right:0;background:var(--cr);
  padding:0 48px;display:flex;align-items:center;gap:14px;
  height:var(--hh);
  transform:translateY(-120%);transition:transform .4s var(--ease);
  z-index:300;border-bottom:2.5px solid var(--vl);
  box-shadow:0 6px 32px rgba(39,64,1,.12);
}
.srch-overlay.open{transform:translateY(0)}
.srch-overlay input{flex:1;background:none;border:none;outline:none;box-shadow:none;font-family:var(--ff-body);font-size:18px;font-weight:700;color:var(--v)}
.srch-overlay input::placeholder{color:rgba(39,64,1,.3)}
.srch-icon svg{width:20px;height:20px;stroke:var(--v);fill:none;stroke-width:1.7;flex-shrink:0}

/* Dawn aplica un anillo de foco (box-shadow blanco) a inputs/botones/selects.
   luffa-web no lo usa → lo neutralizamos dentro de los componentes Iberluffa
   para que quede idéntico (sin recuadros blancos raros al enfocar). */
header#hdr :focus,
header#hdr :focus-visible,
.srch-overlay input:focus,
.srch-overlay input:focus-visible,
.mob-drawer :focus,
.mob-drawer :focus-visible,
.cart-drawer :focus,
.cart-drawer :focus-visible,
.user-panel :focus,
.user-panel :focus-visible,
.info-popup :focus,
.info-popup :focus-visible,
.lgp-modal :focus,
.lgp-modal :focus-visible,
.qo-pop :focus,
.qo-pop :focus-visible,
footer :focus,
footer :focus-visible{box-shadow:none}
.srch-close{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .25s;flex-shrink:0}
.srch-close:hover{background:rgba(39,64,1,.08);transform:rotate(90deg)}
.srch-close svg{width:18px;height:18px;stroke:var(--v);fill:none;stroke-width:1.7}

/* ── MOBILE DRAWER ── */
.mob-drawer{
  position:fixed;top:var(--hh-mob);left:0;right:0;bottom:0;
  background:var(--cr);z-index:498;
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .4s var(--ease);
  overflow:hidden;
  isolation:isolate;
}
.mob-drawer.open{transform:translateX(0)}
.mob-nav-wrap{position:relative;background:var(--cr);flex-shrink:0;overflow:hidden}
.mob-nav{display:flex;flex-direction:column;padding:8px 22px 0}
.mob-nav a{
  font-size:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--v);padding:14px 0;border-bottom:1px solid rgba(39,64,1,.09);
  display:flex;align-items:center;justify-content:space-between;
  transition:color .2s,padding-left .2s;
}
.mob-nav a:last-child{border-bottom:none}
.mob-nav a:hover{color:var(--d);padding-left:5px}
.mob-nav a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;opacity:.35}
/* Submenú que se desliza dentro del drawer, cubriendo sólo el área de mob-nav */
.mob-sub{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:var(--cr);
  transform:translateX(105%);
  transition:transform .32s var(--ease);
  display:flex;flex-direction:column;
  padding:8px 22px 0;
  z-index:5;
  pointer-events:none;
}
.mob-sub.open{transform:translateX(0);pointer-events:auto}
.mob-sub-back{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--d);padding:12px 0 14px;
  border-bottom:1px solid rgba(39,64,1,.12);
  display:flex;align-items:center;gap:9px;cursor:pointer;
  margin-bottom:2px;
  transition:color .2s var(--ease),gap .25s var(--ease);
}
.mob-sub-back:hover{color:var(--v);gap:13px}
.mob-sub-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.mob-sub a:not(.mob-sub-back){
  font-size:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--v);padding:14px 0;border-bottom:1px solid rgba(39,64,1,.09);
  display:flex;align-items:center;justify-content:space-between;
  transition:color .2s,padding-left .2s;
}
.mob-sub a:not(.mob-sub-back):last-child{border-bottom:none}
.mob-sub a:not(.mob-sub-back):hover{color:var(--d);padding-left:5px}
.mob-sub a:not(.mob-sub-back) svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;opacity:.35}
.mob-util{padding:14px 22px 0;border-top:1.5px solid rgba(39,64,1,.1);margin-top:4px}
.mob-util-lbl{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;opacity:.38;margin-bottom:8px}
.mob-util-links{display:flex;flex-direction:column}
.mob-util-links a{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--v);padding:10px 0;border-bottom:1px solid rgba(39,64,1,.07);display:flex;align-items:center;gap:11px;transition:color .2s}
.mob-util-links a:last-child{border-bottom:none}
.mob-util-links a:hover{color:var(--d)}
.mob-util-links a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;flex-shrink:0}
.mob-lang{margin-top:auto;padding:18px 22px 32px;border-top:1px solid rgba(39,64,1,.1);flex-shrink:0}
.mob-lang-lbl{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.38;margin-bottom:10px}
.mob-lang-form{margin:0}
.flags{display:flex;gap:8px;flex-wrap:wrap}
.flag{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:20px;border:1.5px solid rgba(39,64,1,.2);font-family:var(--ff-body);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--v);background:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.flag.on,.flag:hover{background:var(--v);color:var(--cr);border-color:var(--v)}
.flag .flag-ic{width:19px;height:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

/* ── CART DRAWER ── */
.cart-overlay{position:fixed;inset:0;background:rgba(39,64,1,.38);z-index:499;opacity:0;pointer-events:none;transition:opacity .35s}
.cart-overlay.vis{opacity:1;pointer-events:all}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:95vw;background:var(--cr);z-index:500;transform:translateX(110%);transition:transform .4s var(--ease);display:flex;flex-direction:column;box-shadow:-4px 0 40px rgba(39,64,1,.15)}
.cart-drawer.open{transform:translateX(0)}

/* ── USER PANEL (login / mi cuenta)
   Desktop: dropdown anclado debajo del icono de usuario, con flechita.
   Móvil: bottom-sheet a pantalla completa con backdrop blureado. */
.user-panel-bg{
  position:fixed;inset:0;
  background:rgba(39,64,1,.32);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease-out;
  z-index:480;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.user-panel-bg.vis{opacity:1;pointer-events:all}
.user-panel{
  position:fixed;top:calc(var(--hh) + 14px);right:64px;
  width:340px;background:var(--cr);
  border:1px solid rgba(39,64,1,.12);
  border-radius:18px;
  box-shadow:0 26px 60px -16px rgba(39,64,1,.32),0 2px 10px rgba(39,64,1,.06);
  padding:26px 26px 22px;
  z-index:490;
  opacity:0;pointer-events:none;
  transform:translateY(-6px) scale(.98);
  transform-origin:top right;
  transition:opacity .18s ease-out, transform .22s ease-out;
}
.user-panel.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.user-panel::before{
  content:'';position:absolute;top:-6px;right:35px;
  width:12px;height:12px;background:var(--cr);
  border-top:1px solid rgba(39,64,1,.12);
  border-left:1px solid rgba(39,64,1,.12);
  transform:rotate(45deg);
}
.up-close{
  position:absolute;top:14px;right:14px;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:transparent;border:none;
  transition:background .15s ease-out,transform .2s ease-out;
}
.up-close:hover{background:rgba(39,64,1,.08);transform:rotate(90deg)}
.up-close svg{width:14px;height:14px;stroke:var(--v);fill:none;stroke-width:1.8}
.up-head{display:flex;justify-content:center;margin-bottom:14px;padding-top:4px}
.up-logo{height:38px;width:auto;display:block}
.up-title{
  font-family:var(--ff-display);font-weight:400;
  text-transform:uppercase;font-size:22px;
  letter-spacing:.02em;color:var(--v);
  text-align:center;margin-bottom:5px;line-height:1.05;
}
.up-sub{font-size:12.5px;color:var(--d);text-align:center;margin-bottom:20px;letter-spacing:.02em}
.up-form{display:flex;flex-direction:column;gap:11px}
.up-field{display:flex;flex-direction:column;gap:5px}
.up-field-label{
  font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--v);opacity:.68;
}
.up-field input{
  font-family:var(--ff-body);font-size:16px;color:var(--v);
  background:#fff;border:1px solid rgba(39,64,1,.18);
  border-radius:10px;padding:12px 14px;outline:none;
  transition:border-color .15s ease-out,box-shadow .18s ease-out;
  /* iOS: evitar zoom automático al hacer focus (font-size < 16px lo dispara) */
  -webkit-text-size-adjust:100%;
}
.up-field input:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(162,191,106,.28)}
.up-submit{
  font-family:var(--ff-body);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;background:var(--v);color:var(--cr);
  border:none;padding:14px;border-radius:9999px;cursor:pointer;
  margin-top:6px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .35s ease-out, transform .18s ease-out, box-shadow .2s ease-out;
}
.up-submit::before{
  content:'';position:absolute;inset:0;
  background:var(--vl);
  transform:translateX(-101%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  z-index:-1;
}
.up-submit:hover::before{transform:translateX(0)}
.up-submit:hover{color:var(--v);box-shadow:0 10px 22px -10px rgba(39,64,1,.35)}
.up-submit:active{transform:scale(.985)}
/* Botón primario "Continuar con Shop" (placeholder — al portar a Shopify
   se reemplaza por el componente oficial de Shop Pay) */
.up-shop{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-body);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  background:var(--v);color:var(--cr);
  border:none;padding:13px 16px;border-radius:9999px;cursor:pointer;
  width:100%;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .18s ease-out,box-shadow .2s ease-out;
}
.up-shop::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#1d3001 0%,#0f1e00 100%);
  transform:translateX(-101%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  z-index:-1;
}
.up-shop:hover::before{transform:translateX(0)}
.up-shop:hover{box-shadow:0 12px 26px -10px rgba(39,64,1,.45)}
.up-shop:active{transform:scale(.985)}
.up-shop-mark{
  font-family:var(--ff-body);font-weight:800;letter-spacing:.02em;
  font-size:13.5px;color:var(--cr);
}
.up-shop-mark::first-letter{color:var(--vl)}
.up-divider{
  display:flex;align-items:center;gap:12px;
  margin:14px 0 4px;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;
  color:rgba(39,64,1,.45);text-transform:lowercase;
}
.up-divider::before,.up-divider::after{
  content:'';flex:1;height:1px;background:rgba(39,64,1,.16);
}
.up-check{display:flex;align-items:flex-start;gap:9px;margin-top:10px;cursor:pointer;user-select:none}
.up-check input{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex-shrink:0;margin-top:2px;
  border:1.5px solid rgba(39,64,1,.32);
  border-radius:4px;background:#fff;cursor:pointer;
  display:grid;place-items:center;
  transition:background .2s,border-color .2s;
}
.up-check input:checked{background:var(--v);border-color:var(--v)}
.up-check input:checked::after{
  content:'';width:8px;height:4px;
  border:1.5px solid var(--cr);border-top:none;border-right:none;
  transform:rotate(-45deg) translate(.5px,-.5px);
}
.up-check span{font-size:11.5px;color:var(--v);line-height:1.5;letter-spacing:.01em}
.up-foot{
  font-size:10.5px;color:rgba(39,64,1,.55);
  margin-top:14px;text-align:center;line-height:1.5;
}
.up-foot a{color:var(--v);text-decoration:underline;text-underline-offset:2px}

/* ── INFO POPUP (páginas aún no enlazadas) ──────────────────────────────
   Reutiliza la estética del user-panel pero permite posicionarse
   dinámicamente según el elemento que lo dispara. La flecha cambia de lado
   con las clases .arrow-top / .arrow-bottom / .arrow-left / .arrow-right
   y se desplaza con las variables --arrow-left / --arrow-top.
*/
.info-popup{
  /* Anula el anclado del user-panel original (top-right): el JS lo coloca */
  top:auto;right:auto;left:auto;bottom:auto;
  transform-origin:top center;
  transition:opacity .2s ease-out, transform .26s cubic-bezier(.22,1,.36,1);
  z-index:495;
}
/* Centrado en pantalla cuando no hay trigger (fallback desktop) */
.info-popup.centered{
  top:50%;left:50%;
  transform:translate(-50%, calc(-50% - 6px)) scale(.97);
}
.info-popup.centered.open{
  transform:translate(-50%, -50%) scale(1);
}
.info-popup.centered::before{display:none}

/* Flecha base: oculta por defecto, cada modificador la coloca y orienta */
.info-popup::before{display:none}
.info-popup.arrow-top::before,
.info-popup.arrow-bottom::before,
.info-popup.arrow-left::before,
.info-popup.arrow-right::before{
  content:'';position:absolute;
  width:14px;height:14px;background:var(--cr);
  border:1px solid rgba(39,64,1,.12);
  display:block;
  pointer-events:none;
}
.info-popup.arrow-top::before{
  top:-7px;left:var(--arrow-left,28px);right:auto;
  transform:translateX(-50%) rotate(45deg);
  border-right:none;border-bottom:none;
}
.info-popup.arrow-bottom::before{
  bottom:-7px;left:var(--arrow-left,28px);right:auto;top:auto;
  transform:translateX(-50%) rotate(45deg);
  border-left:none;border-top:none;
}
.info-popup.arrow-left::before{
  left:-7px;top:var(--arrow-top,28px);right:auto;
  transform:translateY(-50%) rotate(45deg);
  border-right:none;border-top:none;
}
.info-popup.arrow-right::before{
  right:-7px;top:var(--arrow-top,28px);left:auto;
  transform:translateY(-50%) rotate(45deg);
  border-left:none;border-bottom:none;
}

.info-popup .ip-body{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:4px 0 18px;text-align:center;
}
.info-popup .ip-icon{
  width:54px;height:54px;border-radius:50%;
  background:rgba(162,191,106,.18);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
}
.info-popup .ip-icon svg{width:26px;height:26px;stroke:var(--v);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.info-popup .ip-text{
  font-size:13px;color:var(--v);line-height:1.55;
  letter-spacing:.01em;max-width:280px;margin:0;
}
.info-popup .ip-text strong{font-weight:700}
.info-popup .ip-text-soft{color:rgba(39,64,1,.6);font-size:12px}
.info-popup .ip-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.info-popup .ip-cta{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;text-align:center;
}
.info-popup .ip-cta-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 18px;border-radius:10px;
  background:transparent;border:1px solid rgba(39,64,1,.18);
  color:var(--v);text-decoration:none;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;
  transition:background .18s ease, border-color .18s ease;
}
.info-popup .ip-cta-ghost:hover{background:rgba(39,64,1,.05);border-color:rgba(39,64,1,.3)}

/* ── INFO POPUP móvil: bottom-sheet compacto y siempre cerrable ──────── */
@media(max-width:768px){
  .info-popup{
    /* Sobrescribe TODO lo que el JS pudo haber inyectado en estilo inline */
    top:auto !important; left:0 !important; right:0 !important;
    bottom:0 !important;
    width:100%; max-width:100%;
    max-height:88vh; overflow-y:auto;
    padding:20px 18px 22px;
    transform:translateY(100%); 
    transform-origin:bottom center;
    border-radius:20px 20px 0 0;
    -webkit-overflow-scrolling:touch;
  }
  .info-popup.open{transform:translateY(0) !important}
  /* En móvil ignoramos flechas (es bottom sheet) */
  .info-popup.arrow-top::before,
  .info-popup.arrow-bottom::before,
  .info-popup.arrow-left::before,
  .info-popup.arrow-right::before{display:none}
  /* Botón cerrar igual que el del user panel (transparente, sin sticky) */
  .info-popup .up-close{
    position:absolute;
    top:14px; right:14px;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    margin:0;
    z-index:5;
  }
  .info-popup .up-head{margin-bottom:8px;padding-top:0}
  .info-popup .up-logo{height:30px}
  .info-popup .up-title{font-size:19px;margin-bottom:3px}
  .info-popup .up-sub{font-size:11.5px;margin-bottom:14px}
  .info-popup .ip-body{gap:10px;margin:0 0 14px}
  .info-popup .ip-icon{width:44px;height:44px}
  .info-popup .ip-icon svg{width:22px;height:22px}
  .info-popup .ip-text{font-size:12.5px;max-width:none}
  .info-popup .ip-text-soft{font-size:11.5px}
  .info-popup .ip-actions{gap:9px}
  .info-popup .ip-cta-ghost{height:40px;font-size:12px}
  /* Handle grabber arriba del bottom sheet */
  .info-popup::after{
    content:'';position:sticky;top:0;
    display:block;width:42px;height:4px;border-radius:4px;
    background:rgba(39,64,1,.22);
    margin:-6px auto 12px;
  }
}
@media(max-width:768px){
  .user-panel{
    top:auto;bottom:0;right:0;left:0;
    width:100%;max-width:100%;
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
    padding:24px 20px 28px;
    box-shadow:0 -16px 50px -10px rgba(39,64,1,.3);
    transform-origin:bottom center;
    transition:transform .26s ease-out, opacity .18s ease-out;
  }
  .user-panel.open{transform:translateY(0)}
  .user-panel::before{display:none}
  /* Handle/grabber */
  .user-panel::after{
    content:'';position:absolute;top:8px;left:50%;
    width:42px;height:4px;border-radius:4px;
    background:rgba(39,64,1,.18);transform:translateX(-50%);
  }
}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid rgba(39,64,1,.12);flex-shrink:0}
.cart-head h3{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.cart-head-close{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .25s}
.cart-head-close:hover{background:rgba(39,64,1,.08);transform:rotate(90deg)}
.cart-head-close svg{width:16px;height:16px;stroke:var(--v);fill:none;stroke-width:1.7}

/* ── Free shipping progress bar ── */
.ship-bar{
  position:relative;padding:14px 24px 14px;
  background:rgba(162,191,106,.1);
  border-bottom:1px solid rgba(39,64,1,.08);
  transition:background .5s var(--ease);
  flex-shrink:0;
}
.ship-bar.done{background:rgba(162,191,106,.22)}
.ship-bar-txt{
  display:flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.04em;color:var(--v);
  margin-bottom:8px;line-height:1.4;
}
.ship-bar-txt svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ship-bar.done .ship-bar-txt svg{stroke:var(--v);animation:sparkleSpin 1.4s ease-out}
@keyframes sparkleSpin{0%{transform:scale(.4) rotate(-90deg);opacity:0}60%{transform:scale(1.25) rotate(20deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:1}}
.ship-bar-txt strong{font-weight:800}
.ship-bar.done .ship-bar-txt{font-weight:700}
.ship-bar.done .ship-bar-txt strong{color:var(--v);text-transform:uppercase;letter-spacing:.06em}
.ship-track{
  height:5px;background:rgba(39,64,1,.1);
  border-radius:4px;overflow:hidden;position:relative;
}
.ship-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--vl),var(--v));
  border-radius:4px;
  transition:width .55s var(--ease);
  position:relative;
}
.ship-bar.done .ship-fill::after{
  content:'';position:absolute;inset:0;left:-30%;width:30%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:sweep 1.8s ease-in-out infinite;
}
@keyframes sweep{from{left:-30%}to{left:130%}}
.ship-spark{
  position:absolute;top:8px;right:18px;
  width:22px;height:22px;
  opacity:0;pointer-events:none;
}
.ship-spark svg{width:100%;height:100%;stroke:var(--v);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ship-spark.pop{animation:sparkPop 1.2s ease-out}
@keyframes sparkPop{
  0%{opacity:0;transform:scale(.4) rotate(-30deg)}
  30%{opacity:1;transform:scale(1.3) rotate(10deg)}
  60%{opacity:1;transform:scale(1) rotate(0deg)}
  100%{opacity:0;transform:scale(1.2) rotate(20deg)}
}

.cart-items{flex:1;overflow-y:auto;padding:0 24px 12px}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:220px;gap:14px;opacity:.35;text-align:center;padding-top:24px}
.cart-empty svg{width:52px;height:52px;stroke:var(--v);fill:none;stroke-width:1.1}
.cart-empty p{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ── Confirmation banner (perder envío gratis) ── */
.cart-confirm{
  margin:14px 0 6px;padding:14px 16px;
  background:var(--cr);border:1.5px solid var(--d);
  border-radius:12px;
  animation:cfIn .3s var(--ease);
}
.cart-confirm-title{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.05em;
  color:var(--d);text-transform:uppercase;margin-bottom:6px;
}
.cart-confirm p{font-size:11.5px;line-height:1.5;color:var(--v);margin-bottom:11px}
.cart-confirm-actions{display:flex;gap:8px}
.cart-confirm-actions button{
  flex:1;padding:10px 8px;border-radius:24px;
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;
  font-family:var(--ff-body);transition:all .25s var(--ease);
}
.cf-keep{background:var(--v);border:1.5px solid var(--v);color:var(--cr)}
.cf-keep:hover{background:transparent;color:var(--v)}
.cf-remove{background:transparent;border:1.5px solid rgba(39,64,1,.25);color:rgba(39,64,1,.55)}
.cf-remove:hover{border-color:#c0392b;color:#c0392b}
@keyframes cfIn{from{opacity:0;transform:translateY(-8px)}}

.cart-item{display:grid;grid-template-columns:68px 1fr;gap:13px;padding:14px 0;border-bottom:1px solid rgba(39,64,1,.09);animation:itemIn .3s var(--ease)}
@keyframes itemIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.cart-item-img{width:68px;height:68px;border-radius:8px;overflow:hidden;flex-shrink:0;background:#e5dcc4;display:flex;align-items:center;justify-content:center}
.cart-item-img img{width:100%;height:100%;object-fit:cover;display:block}
.cart-item-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-item-name{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cart-item-sub{font-size:10px;color:var(--d);letter-spacing:.05em;text-transform:uppercase;opacity:.8}
.cart-item-priceline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:3px}
.cart-item-price{font-size:13.5px;font-weight:800}
.cart-item-price-old{font-size:11px;text-decoration:line-through;opacity:.4;font-weight:600}
.disc-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--vl);color:var(--v);
  font-size:9px;font-weight:800;letter-spacing:.05em;
  padding:2px 8px;border-radius:20px;
  text-transform:uppercase;
  width:fit-content;
}
.disc-hint{
  display:inline-flex;align-items:center;gap:6px;
  font-size:9.5px;font-weight:700;color:var(--d);
  opacity:.85;margin-top:5px;letter-spacing:.04em;
  text-transform:uppercase;
}
.disc-hint svg{width:13px;height:13px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.disc-hint.max{color:var(--save);opacity:1}
.cart-item-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.cart-qty{display:flex;align-items:center;border:1px solid rgba(39,64,1,.2);border-radius:20px;overflow:hidden}
.cart-qty button{width:28px;height:26px;background:none;border:none;cursor:pointer;font-size:15px;font-weight:700;color:var(--v);transition:background .15s;display:flex;align-items:center;justify-content:center;font-family:var(--ff-body)}
.cart-qty button:hover{background:rgba(39,64,1,.08)}
.cart-qty span{font-size:12px;font-weight:700;min-width:22px;text-align:center}
.cart-remove{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(39,64,1,.33);cursor:pointer;background:none;border:none;transition:color .2s;font-family:var(--ff-body)}
.cart-remove:hover{color:#c0392b}

/* ─── CART · BUNDLE LINE ───
   Una línea de carrito de tipo bundle contiene:
   1) HEAD: collage 2x2 con foto compuesta + título "Pack a medida" + precio
   2) GALLERY (toggle): slider horizontal con productos del pack editables
   3) PICKER (toggle): grid de productos del catálogo para añadir al pack */
.cart-bundle{
  display:block;
  grid-template-columns:none;
  background:rgba(162,191,106,.08);
  border:1px solid rgba(39,64,1,.1);
  border-radius:14px;
  padding:14px;
  margin:14px 0;
  position:relative;
  animation:itemIn .35s var(--ease);
}
.cart-bundle-head{
  display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;
}
.cart-bundle-collage{
  width:96px;height:96px;flex-shrink:0;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:3px;border-radius:10px;overflow:hidden;background:#e5dcc4;
  position:relative;
}
.cart-bundle-collage .cb-cell{
  position:relative;overflow:hidden;background:#e5dcc4;
}
.cart-bundle-collage .cb-cell img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.cart-bundle:hover .cart-bundle-collage .cb-cell img{transform:scale(1.06)}
.cart-bundle-collage .cb-cell-empty{
  background:rgba(39,64,1,.05);
  background-image:repeating-linear-gradient(45deg,rgba(39,64,1,.04) 0,rgba(39,64,1,.04) 4px,transparent 4px,transparent 8px);
}
.cart-bundle-collage .cb-cell-more::after{
  content:'';position:absolute;inset:0;background:rgba(39,64,1,.55);
}
.cart-bundle-collage .cb-more-badge{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--cr);font-size:14px;font-weight:800;
  letter-spacing:.04em;z-index:2;font-family:var(--ff-body);
}
.cart-bundle-info{min-width:0;display:flex;flex-direction:column;gap:4px}
.cart-bundle-tag{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--v);color:var(--cr);
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 9px 3px 7px;border-radius:9999px;
  width:fit-content;line-height:1;
}
.cart-bundle-tag svg{width:11px;height:11px;flex-shrink:0}
.cart-bundle .cart-item-name{margin-top:2px}
.cart-bundle .cart-item-row{margin-top:6px;gap:10px;flex-wrap:wrap}
.cb-gal-toggle{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--ff-body);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--v);
  background:rgba(39,64,1,.06);border:none;cursor:pointer;
  padding:7px 12px;border-radius:9999px;
  transition:background .2s var(--ease);
}
.cb-gal-toggle:hover{background:rgba(39,64,1,.12)}
.cb-gal-toggle svg{width:12px;height:12px;flex-shrink:0;transition:transform .25s var(--ease)}
.cart-bundle.gal-open .cb-gal-toggle svg{transform:rotate(180deg)}

/* Gallery — colapsada por defecto */
.cart-bundle-gallery{
  max-height:0;overflow:hidden;
  transition:max-height .35s var(--ease);
}
.cart-bundle.gal-open .cart-bundle-gallery{max-height:800px}
.cb-gal-track{
  display:flex;gap:12px;
  overflow-x:auto;overflow-y:hidden;
  padding:14px 2px 12px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(39,64,1,.35) transparent;
  cursor:grab;
  scroll-behavior:smooth;
}
.cb-gal-track.dragging{cursor:grabbing;scroll-behavior:auto}
.cb-gal-track::-webkit-scrollbar{height:6px}
.cb-gal-track::-webkit-scrollbar-track{background:transparent;margin:0 4px}
.cb-gal-track::-webkit-scrollbar-thumb{background:rgba(39,64,1,.22);border-radius:3px;transition:background .2s}
.cb-gal-track::-webkit-scrollbar-thumb:hover{background:rgba(39,64,1,.45)}
.cb-prod{
  flex:0 0 110px;
  background:var(--cr);border:1px solid rgba(39,64,1,.1);
  border-radius:10px;padding:8px;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  scroll-snap-align:start;
  animation:itemIn .3s var(--ease);
}
.cb-prod-img{
  width:100%;aspect-ratio:1;border-radius:7px;overflow:hidden;background:#e5dcc4;
}
.cb-prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.cb-prod-name{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--v);text-align:center;line-height:1.2;
  width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.cb-prod-ctrl{
  display:inline-flex;align-items:center;background:rgba(39,64,1,.06);
  border-radius:9999px;padding:1px;
}
.cb-prod-ctrl button{
  width:24px;height:24px;background:transparent;border:none;cursor:pointer;
  color:var(--v);font-size:13px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:background .15s var(--ease), color .2s var(--ease);
  font-family:var(--ff-body);
}
.cb-prod-ctrl button:hover{background:var(--v);color:var(--cr)}
.cb-prod-ctrl span{
  min-width:18px;text-align:center;
  font-size:11px;font-weight:800;color:var(--v);
  font-variant-numeric:tabular-nums;
}
.cb-prod-x{
  position:absolute;top:4px;right:4px;
  width:20px;height:20px;border-radius:50%;
  background:var(--cr);border:1px solid rgba(39,64,1,.15);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s;
  color:var(--v);opacity:.55;
}
.cb-prod-x:hover{background:#c0392b;color:#fff;border-color:#c0392b;opacity:1}
.cb-prod-x svg{width:10px;height:10px}

/* "+ Añadir" tile */
.cb-add-tile{
  flex:0 0 110px;
  background:transparent;border:1.5px dashed rgba(39,64,1,.28);
  border-radius:10px;padding:8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--v);
  font-family:var(--ff-body);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:border-color .2s var(--ease), background .2s var(--ease);
  min-height:140px;
}
.cb-add-tile:hover,.cb-add-tile.on{border-color:var(--v);background:rgba(39,64,1,.04)}
.cb-add-icon{
  width:34px;height:34px;border-radius:50%;
  background:var(--v);color:var(--cr);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease);
}
.cb-add-tile:hover .cb-add-icon{transform:scale(1.08)}
.cb-add-icon svg{width:16px;height:16px}
.cb-add-tile.on .cb-add-icon{transform:rotate(45deg);background:var(--d)}

/* Picker (catálogo dentro del bundle) */
.cb-picker{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease), padding .3s var(--ease);
}
.cb-picker.open{max-height:520px;padding:6px 0 0}
.cb-pick-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--v);padding:8px 2px;
  border-top:1px solid rgba(39,64,1,.12);
  margin-top:4px;
}
.cb-pick-head button{
  background:transparent;border:none;cursor:pointer;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--v);transition:background .15s, transform .25s;
}
.cb-pick-head button:hover{background:rgba(39,64,1,.08);transform:rotate(90deg)}
.cb-pick-head svg{width:12px;height:12px}
.cb-pick-grid{
  max-height:230px;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px;padding:4px 2px 8px;
  scrollbar-width:thin;scrollbar-color:var(--vl) transparent;
}
.cb-pick-item{
  display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;
  background:var(--cr);border:1px solid rgba(39,64,1,.08);
  border-radius:8px;padding:6px 10px 6px 6px;cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .2s var(--ease);
  text-align:left;
}
.cb-pick-item:hover{border-color:var(--v);background:rgba(39,64,1,.04);transform:translateX(2px)}
.cb-pick-item img{width:38px;height:38px;border-radius:6px;object-fit:cover;background:#e5dcc4}
.cb-pick-info{min-width:0;display:flex;flex-direction:column;gap:1px}
.cb-pick-name{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--v);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cb-pick-price{font-size:11px;font-weight:700;color:var(--d);letter-spacing:.02em}
.cb-pick-add{
  width:26px;height:26px;border-radius:50%;
  background:var(--v);color:var(--cr);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;line-height:1;
  transition:background .2s var(--ease), transform .2s var(--ease);
  font-family:var(--ff-body);
}
.cb-pick-item:hover .cb-pick-add{background:var(--vl);color:var(--v);transform:scale(1.08)}
.cb-pick-empty{
  text-align:center;font-size:11.5px;color:var(--v);opacity:.55;
  padding:20px 12px;letter-spacing:.02em;
}
/* Responsive cart bundle */
@media(max-width:480px){
  .cart-bundle{padding:12px}
  .cart-bundle-head{grid-template-columns:78px 1fr;gap:10px}
  .cart-bundle-collage{width:78px;height:78px}
  .cb-prod,.cb-add-tile{flex:0 0 96px}
  .cb-add-tile{min-height:124px}
}

.cart-footer{padding:14px 24px 26px;border-top:1px solid rgba(39,64,1,.12);flex-shrink:0}
.cart-fline{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;margin-bottom:5px}
.cart-fline-lbl{opacity:.55;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.cart-fline-val{font-weight:700}
.cart-fline.save .cart-fline-lbl{color:var(--save);opacity:1;font-weight:800}
.cart-fline.save .cart-fline-val{color:var(--save);font-weight:800}
.cart-total-row{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 5px;padding-top:10px;border-top:1px dashed rgba(39,64,1,.18)}
.cart-total-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cart-total-price{font-size:22px;font-weight:800;font-family:var(--ff-body)}
.cart-note{font-size:10.5px;opacity:.42;margin-bottom:14px;line-height:1.5}
/* Selector de región de envío (encima de "Ir a pagar") */
.ship-region{margin:0 0 12px;padding:11px 12px;background:rgba(162,191,106,.10);border:1px solid rgba(39,64,1,.10);border-radius:14px}
.ship-region-head{display:flex;align-items:center;gap:7px}
.ship-region-head svg{width:15px;height:15px;flex:none;stroke:var(--v);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.ship-region-lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v);opacity:.75}
.ship-region-sel{margin-left:auto;font-family:var(--ff-body);font-size:12.5px;font-weight:600;color:var(--v);background-color:#fff;border:1px solid rgba(39,64,1,.16);border-radius:9px;padding:5px 26px 5px 10px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23274001' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:12px;transition:border-color .2s}
.ship-region-sel:hover{border-color:var(--vl)}
.ship-region-sel:focus{outline:none;border-color:var(--vl);box-shadow:none}
.ship-region-info{font-size:11px;margin:8px 0 0;color:var(--v);opacity:.82;line-height:1.4}
.ship-region-rate{opacity:.6}
/* Dropdown custom (estilo de marca) — reemplaza los <select> nativos del SO */
.ib-dd{position:relative;display:inline-flex}
.ib-dd-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-body);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--v);background:transparent;border:1px solid rgba(39,64,1,.22);padding:7px 14px;border-radius:9999px;cursor:pointer;transition:border-color .2s var(--ease);white-space:nowrap}
.ib-dd-btn:hover,.ib-dd.open .ib-dd-btn{border-color:var(--v)}
.ib-dd-caret{width:13px;height:13px;flex:none;stroke:var(--v);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.ib-dd.open .ib-dd-caret{transform:rotate(180deg)}
.ib-dd-menu{position:absolute;z-index:120;top:calc(100% + 6px);right:0;min-width:100%;background:#fffdf7;border:1px solid rgba(39,64,1,.14);border-radius:13px;box-shadow:0 14px 34px rgba(39,64,1,.18);padding:5px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;pointer-events:none}
.ib-dd.open .ib-dd-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.ib-dd-up .ib-dd-menu{top:auto;bottom:calc(100% + 6px);transform:translateY(6px)}
.ib-dd-up.open .ib-dd-menu{transform:translateY(0)}
.ib-dd-opt{display:block;width:100%;text-align:left;font-family:var(--ff-body);font-size:12px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--v);background:transparent;border:none;border-radius:9px;padding:9px 13px;cursor:pointer;white-space:nowrap;transition:background .15s}
.ib-dd-opt:hover{background:rgba(162,191,106,.22)}
.ib-dd-opt.on{background:var(--v);color:var(--cr)}
.ship-region-dd{margin-left:auto}
.ship-region-dd .ib-dd-btn{text-transform:none;letter-spacing:.01em;font-size:12.5px;background:#fff;border-color:rgba(39,64,1,.16);padding:6px 12px}
.btn-cart-full{display:block;width:100%;padding:12px;text-align:center;border:1.5px solid var(--v);color:var(--v);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:40px;margin-bottom:9px;transition:all .3s var(--ease);cursor:pointer;background:none;font-family:var(--ff-body)}
.btn-cart-full:hover{background:var(--v);color:var(--cr)}
.btn-cart-pay{display:block;width:100%;padding:13px;text-align:center;background:var(--v);color:var(--cr);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:40px;border:none;transition:background .3s;cursor:pointer;font-family:var(--ff-body)}
.btn-cart-pay:hover{background:var(--vl);color:var(--v)}

/* ── FLY + TOAST ── */
.fly-dot{position:fixed;width:54px;height:54px;border-radius:10px;background:var(--cr);box-shadow:0 8px 24px -8px rgba(39,64,1,.35);z-index:9999;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .65s cubic-bezier(.2,1,.3,1)}
.fly-dot img{width:100%;height:100%;object-fit:cover;display:block}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--v);color:var(--cr);padding:12px 26px;border-radius:40px;font-size:12px;font-weight:700;letter-spacing:.05em;z-index:9998;opacity:0;pointer-events:none;transition:transform .4s var(--ease),opacity .4s,bottom .35s var(--ease);white-space:nowrap;max-width:90vw;text-align:center;box-shadow:0 12px 40px rgba(39,64,1,.25)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.celebrate{background:linear-gradient(120deg,var(--vl),var(--v));font-size:13px;padding:14px 28px;display:inline-flex;align-items:center;gap:9px}
.toast .toast-spark{width:18px;height:18px;flex-shrink:0;stroke:var(--cr);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;animation:sparkleSpin 1.4s ease-out}

/* En móvil el toast sube por encima del FAB de WhatsApp para no taparlo,
   y cuando el carrito está abierto se ancla justo encima del botón
   "Ir a pagar" del cart-footer (que mide unos 200px de alto). */
@media(max-width:768px){
  .toast{ bottom:88px; }
  body:has(.cart-drawer.open) .toast{ bottom:230px; }
}

/* ── HERO ── */
.hero{position:relative;height:92vh;min-height:560px;overflow:hidden}
.hero-bg{position:absolute;inset:-35% -3%;background:linear-gradient(160deg,rgba(39,64,1,.54) 0%,rgba(39,64,1,.18) 55%,transparent 100%),var(--ib-hero-desktop-ae88b496-jpg) center/cover;will-change:transform}
/* Hero responsive: imagen vertical en móvil */
.hero-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border:2px solid rgba(255,255,255,.75);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:background .3s,transform .3s;animation:pulse 2.5s ease infinite}
.hero-play:hover{background:rgba(255,255,255,.2);transform:translate(-50%,-50%) scale(1.1)}
.hero-play svg{width:22px;height:22px;fill:white;margin-left:4px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.4)}50%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.hero-cnt{position:absolute;bottom:64px;left:60px;color:var(--cr);max-width:560px;z-index:2;opacity:0;transform:translateY(28px);animation:fadeUp .9s .2s var(--ease) forwards}
.hero-cnt h1{
  font-family:var(--ff-display);
  font-size:clamp(38px,5.2vw,72px);
  font-weight:400;line-height:1.04;margin-bottom:14px;
  letter-spacing:-.01em;
  color:inherit;   /* hereda el crema de .hero-cnt (Dawn fija h1{color} y lo pisaba) */
}
.hero-cnt p{font-size:14.5px;opacity:.92;margin-bottom:26px;line-height:1.6;letter-spacing:.02em;color:inherit}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* ── BUTTONS (elipse pura, fluida) ── */
.btn-w,.btn-d{
  display:inline-flex;align-items:center;justify-content:center;
  width:220px;height:60px;
  font-family:var(--ff-body);
  font-size:11px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;
  border-radius:50%;
  cursor:pointer;background:transparent;
  white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .35s cubic-bezier(.22,.61,.36,1), border-color .3s var(--ease), background .25s ease;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  outline:none;
}
.btn-w:focus,.btn-d:focus,.btn-w:focus-visible,.btn-d:focus-visible{outline:none;box-shadow:none}
/* ── LIQUID WAVE FILL ──
   Dos pseudo-elementos con bordes redondeados irregulares simulan una
   ola orgánica que fluye rápidamente de izquierda a derecha. La segunda
   capa entra con un retardo mínimo para crear profundidad acuática. */
.btn-w::before,.btn-d::before,
.btn-w::after,.btn-d::after{
  content:'';position:absolute;
  top:-30%;bottom:-30%;width:200%;left:-220%;
  z-index:-1;
  transition: left .55s cubic-bezier(.22,.61,.36,1);
  will-change:left;
}
.btn-w::before,.btn-d::before{
  border-radius:50% 42% 50% 50% / 50% 60% 50% 50%;
}
.btn-w::after,.btn-d::after{
  border-radius:45% 50% 50% 50% / 60% 50% 50% 65%;
  opacity:.55;
  transition-delay:.05s;
}
.btn-w::before{background:var(--cr)}
.btn-w::after{background:var(--cr)}
.btn-d::before{background:var(--v)}
.btn-d::after{background:var(--v)}

.btn-w:hover::before,.btn-d:hover::before{left:-95%}
.btn-w:hover::after,.btn-d:hover::after{left:-102%}

.btn-w{border:1px solid var(--cr);color:var(--cr)}
.btn-w:hover{color:var(--v)}
.btn-d{border:1px solid var(--v);color:var(--v)}
.btn-d:hover{color:var(--cr)}
.btn-w:active,.btn-d:active{transform:scale(.985)}

/* ── TOUCH (sin hover real): el liquid wave queda "pegado" tras un tap en
   WebKit y los pseudos con border-radius irregular asoman a la derecha
   simulando un segundo botón. Eliminamos los pseudos por completo en touch
   y dejamos un relleno limpio SOLO durante :active. :focus y :hover en
   touch no deben quedar visibles porque crearían un botón "fantasma". */
@media (hover:none), (pointer:coarse){
  .btn-w::before,.btn-d::before,
  .btn-w::after,.btn-d::after{content:none !important;display:none !important}
  /* Estado normal por defecto (anula cualquier hover/focus persistente) */
  .btn-w,.btn-w:hover,.btn-w:focus,.btn-w:focus-visible{
    /* En móvil/touch el botón del hero (home y tienda) va SÓLIDO crema (su estado
       hover) para que se vea bien sobre la foto; antes quedaba transparente y no
       se distinguía. */
    background:var(--cr) !important;
    color:var(--v) !important;
  }
  .btn-d,.btn-d:hover,.btn-d:focus,.btn-d:focus-visible{
    background:transparent !important;
    color:var(--v) !important;
  }
  /* Sólo durante el tap activo se rellena */
  .btn-d:active{ background:var(--v) !important; color:var(--cr) !important; }
  .btn-w:active{ background:var(--cr) !important; color:var(--v) !important; }
}
/* Las flechas se ocultan: la elipse va con texto puro como en la referencia */
.btn-w svg,.btn-d svg{display:none}

/* ── TOOLTIPS (solo en dispositivos con ratón / hover real) ── */
.tip{display:none}
@media (hover:hover) and (pointer:fine){
  .tip{
    display:block;
    position:absolute;
    top:calc(100% + 14px);
    left:50%;
    transform:translateX(-50%) translateY(-6px);
    background:var(--v);
    color:var(--cr);
    font-family:var(--ff-body);
    font-size:10.5px;font-weight:600;letter-spacing:.05em;
    text-transform:none;
    padding:9px 16px;
    border-radius:22px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    box-shadow:0 14px 32px -10px rgba(39,64,1,.4);
    transition:opacity .25s var(--ease), transform .35s cubic-bezier(.22,1,.36,1);
    z-index:600;
  }
  .tip::before{
    content:'';
    position:absolute;
    top:-4px;left:50%;
    width:9px;height:9px;
    background:var(--v);
    border-radius:2px;
    transform:translateX(-50%) rotate(45deg);
  }
  /* Mostrar al hacer hover en el contenedor */
  .main-nav>a:hover>.tip,
  .ico:hover>.tip,
  .cart-ico-wrap:hover>.tip{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
  /* Tooltips de la nav izquierda: alineados al inicio del link
     para que no se salgan del viewport en pantallas con header pegado al borde */
  .main-nav>a>.tip{
    left:0;
    transform:translateY(-6px);
  }
  .main-nav>a:hover>.tip{
    transform:translateY(0);
  }
  .main-nav>a>.tip::before{
    left:26px;
  }
  /* Asegura que los iconos del header sean el ancla del tooltip */
  .ico,.cart-ico-wrap{position:relative}
}

/* ── CATEGORIES DESKTOP ── */
.cats-desk{background:var(--cr);padding:40px 48px}
.cats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cat{cursor:pointer}
.cat-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.cat-wrap{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:.72;margin-bottom:10px}
.cat-ph{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .6s var(--ease);font-size:0;color:transparent}
.cats-desk .cat:nth-child(1) .cat-ph{background-image:var(--ib-hogar-jpg)}
.cats-desk .cat:nth-child(2) .cat-ph{background-image:var(--ib-bano-jpg)}
.cats-desk .cat:nth-child(3) .cat-ph{background-image:var(--ib-pies-jpg)}
.cats-desk .cat:nth-child(4) .cat-ph{background-image:var(--ib-diy-jpg)}
.cats-desk .cat:nth-child(5) .cat-ph{background-image:var(--ib-arquitectura-jpg)}
.cats-desk .cat:nth-child(6) .cat-ph{background-image:var(--ib-sets-jpg)}
.cats-mob .cat:nth-child(1) .cat-ph{background-image:var(--ib-hogar-destacado-mobile-jpg)}
.cats-mob .cat:nth-child(2) .cat-ph{background-image:var(--ib-bano-destacado-mobile-jpg)}
.cats-mob .cat:nth-child(3) .cat-ph{background-image:var(--ib-pies-destacado-mobile-jpg)}
.cats-mob .cat:nth-child(4) .cat-ph{background-image:var(--ib-diy-destacado-mobile-jpg)}
.cats-mob .cat:nth-child(5) .cat-ph{background-image:var(--ib-arquitectura-jpg)}
.cats-mob .cat:nth-child(6) .cat-ph{background-image:var(--ib-sets-jpg)}
.cat:hover .cat-ph{transform:scale(1.07)}
.cat-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(39,64,1,.32));opacity:0;transition:opacity .3s}
.cat:hover .cat-wrap::after{opacity:1}
.cat-buy{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--d);border-bottom:1px solid var(--d);display:inline-block;transition:color .2s,border-color .2s}
.cat:hover .cat-buy{color:var(--v);border-color:var(--v)}

/* ── CATEGORIES MOBILE SCROLL-JACK (más compacto y pegado al hero) ── */
.cats-mob{display:none;background:var(--cr);position:relative;z-index:1}
.cats-sticky{
  position:sticky;top:var(--hh-mob);background:var(--cr);
  overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-start;  /* arriba, no centrado */
  padding:54px 0 0;
}
.cats-mob-lbl{
  text-align:center;
  font-family:var(--ff-display);font-weight:400;
  font-size:28px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--v);margin-bottom:34px;padding:0 20px;line-height:1.05;
}
.cats-slider{display:flex;gap:14px;padding:0 20px;align-items:flex-end}
.cats-slider .cat{
  flex:0 0 auto;
  width:calc(82vw - var(--shrink,0) * 24vw);
  max-width:calc(340px - var(--shrink,0) * 100px);
  transition:transform .35s var(--ease);
}
.cats-slider .cat-wrap{aspect-ratio:.74}
.cats-slider .cat-lbl{font-size:13px;letter-spacing:.12em}
.cats-slider .cat-buy{font-size:12px}
.cats-scrollbar{padding:10px 20px 2px}
.cats-track{height:3px;background:rgba(39,64,1,.12);border-radius:0;overflow:hidden}
.cats-fill{height:100%;background:var(--v);width:0%}
/* Hint "Sigue bajando para continuar":
   - Quitamos `will-change` (era contraproducente: en animaciones infinitas
     fuerza al GPU a mantener una capa de compositor activa permanentemente,
     consumiendo recursos y causando jank en iPhone).
   - Animamos sólo opacity (que es la propiedad más barata, no fuerza
     repaint en otros elementos).
   - La animación SÓLO corre cuando la sección está cerca del viewport (clase
     `.cats-hint-on`). Cuando no está visible, animation-play-state: paused
     deja al GPU descansar. */
.cats-hint{
  text-align:center;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--v);margin-top:14px;padding:8px 20px 4px;
  transition:opacity .4s;
  opacity:.55;
  animation:catsHintPulse 1.8s ease-in-out infinite;
  animation-play-state:paused;
}
.cats-hint.cats-hint-on{ animation-play-state:running; }
@keyframes catsHintPulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .cats-hint{animation:none;opacity:.8}
}

/* ── PRODUCCIÓN ── */
.produccion{
  background:var(--cr);padding:48px 48px 56px;
  text-align:center;
}
.produccion .sec-lbl-big{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(20px,2.2vw,30px);letter-spacing:.02em;
  text-transform:uppercase;color:var(--d);display:block;margin-bottom:22px;line-height:1.15;
}
.produccion p{max-width:560px;margin:0 auto 12px;line-height:1.75;font-size:14.5px}

/* ── BESTSELLERS ── */
.bestsellers{background:var(--cr);padding:28px 48px 56px}
.bs-head{text-align:center;margin-bottom:32px}
.bs-head h2{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(24px,2.6vw,36px);letter-spacing:.02em;
  text-transform:uppercase;color:var(--v);line-height:1.1;
}
.prod-slider{
  display:flex;gap:22px;overflow-x:auto;
  scroll-snap-type:x proximity;  /* desktop: softer snap */
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  cursor:grab;padding-bottom:4px;
  scroll-behavior:auto;          /* drag debe ser inmediato */
}
.prod-slider.dragging{cursor:grabbing}
.prod-slider::-webkit-scrollbar{display:none}
.prod{
  flex:0 0 calc(33.333% - 15px);min-width:0;
  scroll-snap-align:start;cursor:pointer;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.prod-img{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:1;margin-bottom:12px;background:#e5dcc4}
.prod-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);display:block}
.prod:hover .prod-pic{transform:scale(1.06)}
/* Capa de hover: tinte verde + SVG centrado del producto.
   Queda DEBAJO del botón "añadir a la cesta" gracias al z-index */
.prod-hover{
  position:absolute;inset:0;
  background-color:rgba(39,64,1,.5);
  background-position:center;background-repeat:no-repeat;
  background-size:58% auto;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
  z-index:1;
}
.prod:hover .prod-hover{opacity:1}
/* Pulso para móvil: al darle a "añadir a la cesta" la capa aparece 
   brevemente sobre el producto, devolviendo feedback visual */
.prod-hover.prod-pulse{
  animation:prodPulse .9s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes prodPulse{
  0%{opacity:0;transform:scale(1.05)}
  25%{opacity:1;transform:scale(1)}
  75%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.02)}
}
.qadd{position:absolute;bottom:0;left:0;right:0;background:rgba(39,64,1,.9);color:var(--cr);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:13px;text-align:center;transform:translateY(100%);transition:transform .3s var(--ease),background .25s var(--ease);cursor:pointer;border:none;width:100%;font-family:var(--ff-body);z-index:2;border-radius:0 0 8px 8px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.prod:hover .qadd{transform:translateY(0)}
.qadd:active{background:var(--vl);color:var(--v)}
.prod h3{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.prod .prod-sub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--d);margin-top:3px}
.prod-price{font-size:13px;font-weight:700;margin-top:5px;display:block}

/* ── BS DRAGGABLE SCROLLBAR ── */
.bs-bar-wrap{padding:18px 0 0;user-select:none}
.bs-track-hit{padding:14px 0;cursor:pointer;position:relative}
.bs-track{
  position:relative;
  height:5px;background:rgba(39,64,1,.14);border-radius:4px;overflow:hidden;
  transition:height .25s var(--ease),background .25s;
}
.bs-track-hit:hover .bs-track,
.bs-track-hit.dragging .bs-track{height:9px;background:rgba(39,64,1,.18)}
.bs-thumb{
  position:absolute;top:0;left:0;height:100%;
  background:var(--d);border-radius:4px;
  width:30%;transition:background .2s;cursor:grab;
}
.bs-track-hit.dragging .bs-thumb{cursor:grabbing;background:var(--v)}
.bs-track-hit:hover .bs-thumb{background:var(--v)}
/* Mientras arrastras la barra, deshabilitamos el snap para que el
   desplazamiento sea suave sub-píxel en vez de saltar de producto en producto */
.prod-slider.dragging-thumb{scroll-snap-type:none}

/* ── MISION ── */
.mision{display:grid;grid-template-columns:1fr 1fr;min-height:500px}
.mis-img{position:relative;overflow:hidden}
.mis-ph{
  position:absolute;inset:0;
  background:var(--ib-mision-luffa-jpg) center/cover no-repeat,
             linear-gradient(135deg,#7a9a5a 0%,#3a5a2a 50%,#2a4a20 100%);
  transition:transform 6s ease;
}
.mis-ph::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0px,rgba(255,255,255,.04) 1px,transparent 1px,transparent 20px);pointer-events:none}
.mis-img:hover .mis-ph{transform:scale(1.04);transition:transform 6s ease}
.mis-txt{background:var(--cr);padding:60px 52px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.sec-lbl{font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--d);display:block;margin-bottom:14px}
.mis-txt h2{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(26px,3vw,42px);
  line-height:1.05;text-transform:uppercase;margin-bottom:22px;color:var(--d);
  letter-spacing:.01em;
}
.mis-txt p{font-size:14.5px;line-height:1.75;margin-bottom:12px}
.sello{position:absolute;bottom:36px;right:36px;width:140px;height:auto;aspect-ratio:173/134;display:block;pointer-events:none;filter:drop-shadow(0 6px 18px rgba(39,64,1,.18));transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── INSTAGRAM ── */
.instagram{background:var(--cr);padding:56px 48px;text-align:center;border-top:1px solid rgba(39,64,1,.1)}
.instagram h2{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(24px,2.6vw,36px);letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:14px;color:var(--d);line-height:1.1;
}
.ig-intro{font-size:14.5px;line-height:1.7;margin:0 auto 32px;opacity:.85;max-width:440px}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ig-item{aspect-ratio:1;border-radius:6px;overflow:hidden;position:relative;cursor:pointer;background:#dcd3b8;display:block;text-decoration:none;color:inherit}
.ig-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);display:block}
.ig-item:hover .ig-pic{transform:scale(1.08)}
.ig-ov{position:absolute;inset:0;background:rgba(39,64,1,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .45s var(--ease);backdrop-filter:blur(0px)}
.ig-item:hover .ig-ov{opacity:1;backdrop-filter:blur(2px)}
.ig-ov-inner{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transform:translateY(6px) scale(.85);
  transition:transform .55s cubic-bezier(.22,1,.36,1) .08s;
}
.ig-item:hover .ig-ov-inner{transform:translateY(0) scale(1)}
.ig-ov svg{width:32px;height:32px;stroke:white;fill:none;stroke-width:1.5}
.ig-handle{
  font-size:11.5px;font-weight:600;letter-spacing:.06em;color:#fff;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease) .28s, transform .45s var(--ease) .28s;
}
.ig-item:hover .ig-handle{opacity:1;transform:translateY(0)}
.ig-ico{
  position:absolute;top:8px;right:8px;width:26px;height:26px;
  background:var(--cr);border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  transform-origin:center;
  transition:opacity .35s var(--ease), transform .5s cubic-bezier(.7,-.15,.4,1.4);
}
.ig-item:hover .ig-ico{
  opacity:0;
  transform:scale(.35) rotate(-25deg);
}
.ig-ico svg{width:14px;height:14px;stroke:var(--v);fill:none;stroke-width:1.5}

/* ── FOOTER ── */
footer{background:var(--cr);border-top:1px solid rgba(39,64,1,.15);padding:32px 48px}
.foot-links{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-bottom:20px}
.foot-links a{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;position:relative;padding-bottom:2px;transition:color .2s}
.foot-links a::after{content:'';position:absolute;bottom:0;left:50%;right:50%;height:1px;background:var(--d);transition:left .25s var(--ease),right .25s var(--ease)}
.foot-links a:hover{color:var(--d)}
.foot-links a:hover::after{left:0;right:0}

/* ── ACTIVE PAGE INDICATOR ──
   Resalta el enlace correspondiente a la página actual en header,
   menú móvil y footer. Lo aplica `injectGlobals` en site.js leyendo
   la ruta y comparando con el href de cada enlace. */
.main-nav > a.is-active,
.main-nav .has-drop > a.is-active{color:var(--d)}
.main-nav > a.is-active::after,
.main-nav .has-drop > a.is-active::after{width:100%}
.foot-links a.is-active{color:var(--d)}
.foot-links a.is-active::after{left:0;right:0;background:var(--d)}
.mob-nav a.is-active,
.mob-sub a:not(.mob-sub-back).is-active{
  color:var(--d);
  position:relative;padding-left:14px;
}
.mob-nav a.is-active::before,
.mob-sub a:not(.mob-sub-back).is-active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--d);
}
.mob-nav a.is-active svg,
.mob-sub a:not(.mob-sub-back).is-active svg{opacity:.8}
.foot-soc{display:flex;justify-content:center;gap:12px}
.soc-btn{width:38px;height:38px;border:1.5px solid rgba(39,64,1,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,border-color .3s,transform .25s;text-decoration:none;color:inherit}
.soc-btn:hover{background:var(--v);border-color:var(--v);transform:translateY(-3px)}
.soc-btn:hover svg{stroke:var(--cr)}
.soc-btn svg{width:17px;height:17px;stroke:var(--v);fill:none;stroke-width:1.6;transition:stroke .3s}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.left{transform:translateX(-30px)}
.reveal.right{transform:translateX(30px)}
.reveal.vis{opacity:1;transform:translate(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ═══════ RESPONSIVE 1024 ═══════ */
@media(max-width:1024px){
  header{padding:0 24px}
  .srch-overlay{padding:0 24px}
  .cats-desk,.bestsellers,.produccion,.instagram,.mis-txt{padding-left:24px;padding-right:24px}
  footer{padding:28px 24px}
  .hero-cnt{left:32px;bottom:48px}
}

/* ═══════ RESPONSIVE 768 MOBILE ═══════ */
@media(max-width:768px){
  /* Header */
  header#hdr{padding:0 14px;height:var(--hh-mob);grid-template-columns:auto 1fr auto}
  .h-left .main-nav{display:none}
  .hamburger{display:flex}
  .h-center .logo-img{height:32px}
  .h-right .ico{display:none}
  /* Search overlay: ahora ocupa exactamente el header mobile */
  .srch-overlay{padding:0 14px;height:var(--hh-mob);z-index:400}
  .srch-overlay input{font-size:16px}

  /* Hero */
  .hero{height:68vh;min-height:460px}
  .hero-bg{background:linear-gradient(160deg,rgba(39,64,1,.54) 0%,rgba(39,64,1,.18) 55%,transparent 100%),var(--ib-hero-mobile-df5486c4-jpg) center/cover}
  .hero-cnt{left:18px;bottom:32px;max-width:90%}
  .hero-cnt h1{font-size:clamp(34px,9vw,52px);line-height:1.02}
  .hero-cnt p{font-size:13.5px;margin-bottom:20px}

  /* Cats — pegado al hero, contenido arriba */
  .cats-desk{display:none}
  .cats-mob{display:block}
  .cats-sticky{
    top:var(--hh-mob);
    justify-content:flex-start;
    padding:54px 0 0;
  }
  .cats-mob-lbl{font-size:28px;margin-bottom:34px}

  /* Produccion - pegada a cats */
  .produccion{padding:20px 18px 28px}
  .produccion .sec-lbl-big{font-size:24px;margin-bottom:16px;line-height:1.15}
  .produccion p{font-size:14px;margin-bottom:10px}

  /* Bestsellers */
  .bestsellers{padding:20px 0 28px}
  .bs-head{padding:0 18px;margin-bottom:18px}
  .bs-head h2{font-size:28px}
  .prod-slider{
    padding:8px 18px 8px 24px;     /* +6px de aire a la izquierda en móvil */
    scroll-padding-left:24px;       /* el snap respeta ese aire */
    scroll-snap-type:x mandatory;
    gap:14px;
  }
  .prod{
    flex:0 0 60vw;max-width:280px;
    transform:scale(.9);opacity:.6;
    transition:transform .4s var(--ease), opacity .4s var(--ease);
  }
  .prod.best-active{transform:scale(1);opacity:1}
  /* En móvil el añadir al carrito siempre visible */
  .qadd{transform:translateY(0);padding:11px 13px;font-size:10.5px;letter-spacing:.08em}
  .bs-bar-wrap{padding:14px 18px 0}

  /* Mision */
  .mision{grid-template-columns:1fr}
  .mis-img{height:240px}
  .mis-txt{padding:32px 18px}
  .mis-txt h2{font-size:clamp(26px,7.5vw,38px)}
  .sec-lbl{font-size:12px}
  .sello{bottom:16px;right:16px;width:100px;height:auto}

  /* Instagram */
  .instagram{padding:32px 18px 36px}
  .instagram h2{font-size:26px;margin-bottom:10px}
  .ig-intro{font-size:13.5px;margin-bottom:20px}
  .ig-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .ig-handle{display:none}

  /* Footer */
  footer{padding:24px 18px}
  .foot-links{gap:10px 16px}

  /* Cart full width */
  .cart-drawer{width:100%;max-width:100%}
  .btn-d,.btn-w{width:200px;height:52px;font-size:10.5px;letter-spacing:.22em}
}

@media(max-width:480px){
  .cats-slider .cat{
    width:calc(88vw - var(--shrink,0) * 16vw);
    max-width:none;
  }
  .prod{flex:0 0 64vw}
}

/* ═══════ DESKTOP-ONLY TYPE BUMP (+2px en cuerpos y precios) ═══════
   Solo aplica >768px. M\u00f3vil y tablet (<=768) conservan sus tama\u00f1os. */
@media(min-width:769px){
  /* Cuerpos de texto */
  .hero-cnt p{font-size:16.5px}
  .produccion p{font-size:16.5px}
  .mis-txt p{font-size:16.5px}
  .ig-intro{font-size:16.5px}

  /* Botones Saber m\u00e1s */
  .btn-w,.btn-d{font-size:16px;letter-spacing:.18em}

  /* Categorias: titulos +2px solo en PC */
  .cat-lbl{font-size:13px}
  .cat-buy{font-size:11.5px}

  /* Info de producto */
  .prod h3{font-size:14.5px}
  .prod .prod-sub{font-size:13px}
  .prod-price{font-size:15px}

  /* Carrito (todo +2px excepto "Tu cesta", botones y total en \u20ac) */
  .ship-bar-txt{font-size:13px}
  .cart-item-name{font-size:13px}
  .cart-item-sub{font-size:12px}
  .cart-item-price{font-size:15.5px}
  .cart-item-price-old{font-size:13px}
  .disc-badge{font-size:11px}
  .disc-hint{font-size:11.5px}
  .cart-qty button{font-size:17px}
  .cart-qty span{font-size:14px}
  .cart-remove{font-size:12px}
  .cart-fline{font-size:13px}
  .cart-fline-lbl{font-size:13px}
  .cart-total-lbl{font-size:13px}
  .cart-note{font-size:12.5px}
  .cart-confirm-title{font-size:14px}
  .cart-confirm p{font-size:13.5px}
}

/* ─── VÍDEO MODAL (lo abre el play del hero) ─── */
.video-modal{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,28,4,.86);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.video-modal.vm-open{opacity:1;pointer-events:auto}
.vm-frame{position:relative;width:min(1100px,100%);aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 40px 100px -30px rgba(0,0,0,.7);transform:scale(.96);transition:transform .35s var(--ease)}
.video-modal.vm-open .vm-frame{transform:scale(1)}
.vm-media{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vm-close{position:absolute;top:18px;right:20px;z-index:2;width:46px;height:46px;border-radius:50%;border:none;background:rgba(244,233,211,.16);color:var(--cr);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.vm-close:hover{background:rgba(244,233,211,.32);transform:scale(1.06)}
.vm-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:768px){
  /* Respetamos el notch/safe-area y damos algo más de margen para que el vídeo
     y el botón de cerrar no queden pegados al borde (cierre antes a 10/12px,
     quedaba bajo la barra de estado en iPhone). Aislado al modal. */
  .video-modal{padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-right:max(18px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom));padding-left:max(18px,env(safe-area-inset-left))}
  .vm-close{top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:42px;height:42px}
}

/* ─── SEARCH AJAX-LIKE (suggestions panel) ─── */
.srch-bg{
  position:fixed;inset:0;background:rgba(39,64,1,.32);
  z-index:285;opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.srch-bg.vis{opacity:1;pointer-events:all}
.srch-results{
  position:fixed;top:var(--hh);left:0;right:0;
  background:var(--cr);
  max-height:calc(100vh - var(--hh));
  overflow-y:auto;
  z-index:295;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:transform .25s var(--ease), opacity .2s var(--ease);
  box-shadow:0 16px 40px -12px rgba(39,64,1,.25);
  border-bottom:1px solid rgba(39,64,1,.1);
}
.srch-results.open{transform:translateY(0);opacity:1;pointer-events:all}
.srch-results-inner{max-width:780px;margin:0 auto;padding:20px 48px 24px}
.srch-count{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--d);margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid rgba(39,64,1,.08);
}
.srch-list{display:flex;flex-direction:column;gap:4px}
.srch-item{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;
  padding:10px 8px;border-radius:10px;cursor:pointer;
  transition:background .15s var(--ease), transform .25s var(--ease);
  opacity:0;animation:srchItemIn .4s var(--ease) forwards;
}
@keyframes srchItemIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.srch-item:hover{background:rgba(39,64,1,.05);transform:translateX(2px)}
.srch-item img{
  width:54px;height:54px;border-radius:8px;
  object-fit:cover;background:#e5dcc4;
}
.srch-item-info{min-width:0}
.srch-item-info h4{
  font-family:var(--ff-body);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--v);
  margin-bottom:3px;line-height:1.2;
}
.srch-item-info p{
  font-size:11.5px;color:var(--d);letter-spacing:.04em;
  text-transform:uppercase;opacity:.85;line-height:1.3;
}
/* Badge para productos pack/set en los resultados de búsqueda.
   Distingue sin gritar: tinta verde clara + iconito de caja. */
.srch-pack-badge{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:5px;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--v);
  background:var(--vl);
  padding:3px 9px 3px 7px;border-radius:9999px;
  line-height:1;width:fit-content;
  font-family:var(--ff-body);
}
.srch-pack-badge svg{
  width:11px;height:11px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.srch-item-price{
  font-size:15px;font-weight:800;color:var(--v);white-space:nowrap;
}
.srch-item-add{
  width:36px;height:36px;border-radius:50%;
  background:var(--v);color:var(--cr);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
  flex-shrink:0;
}
.srch-item-add svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.srch-item-add:hover{background:var(--vl);color:var(--v);transform:scale(1.1)}
.srch-item-add:active{transform:scale(.94)}
.srch-empty{
  text-align:center;padding:30px 18px 26px;color:var(--v);
}
.srch-empty svg{width:38px;height:38px;stroke:var(--v);fill:none;stroke-width:1.4;margin-bottom:12px;opacity:.4}
.srch-empty p{font-size:14px;margin-bottom:4px}
.srch-empty-sub{opacity:.55;font-size:12.5px}

@media(max-width:768px){
  .srch-results{top:var(--hh-mob);max-height:calc(100vh - var(--hh-mob))}
  .srch-results-inner{padding:14px 14px 20px}
  .srch-item{grid-template-columns:auto 1fr auto;gap:11px;padding:9px 5px}
  .srch-item img{width:46px;height:46px}
  .srch-item-info h4{font-size:12px}
  .srch-item-info p{font-size:10.5px}
  .srch-item-price{font-size:13.5px;grid-column:1 / -1;grid-row:2;justify-self:start;margin-left:57px;margin-top:-4px}
  .srch-item-add{width:32px;height:32px;grid-row:1;grid-column:3}
}

/* ════════════════════════════════════════════════════════════════
   AUTH — pestañas Particular / Mayorista en el user-panel.
   Añadido para integrar el panel B2B. Solo aplica si el user-panel
   tiene la clase .user-panel-tabs.
   ════════════════════════════════════════════════════════════════ */
.user-panel-tabs .up-tabs{
  display:flex;background:rgba(39,64,1,.07);
  border-radius:9999px;padding:4px;margin:0 0 16px;
  position:relative;
}
.user-panel-tabs .up-tab{
  flex:1;cursor:pointer;border:none;background:transparent;
  font-family:var(--ff-body);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--v);
  opacity:.55;padding:10px 8px;border-radius:9999px;
  position:relative;z-index:2;
  transition:opacity .35s,color .35s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.user-panel-tabs .up-tab svg{
  width:13px;height:13px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.user-panel-tabs .up-tab.on{opacity:1;color:var(--cr)}
.user-panel-tabs .up-tabs-ind{
  position:absolute;top:4px;bottom:4px;left:4px;
  width:calc(50% - 4px);background:var(--v);
  border-radius:9999px;
  box-shadow:0 6px 16px -6px rgba(39,64,1,.5);
  transition:transform .5s cubic-bezier(.6,-.28,.4,1.4),background .35s;
  z-index:1;
}
.user-panel-tabs .up-tabs.tab-mayorista .up-tabs-ind{
  transform:translateX(100%);
  background:linear-gradient(135deg,var(--d),#b07e3a);
}
.user-panel-tabs .up-pane{display:none;animation:upFadeIn .35s var(--ease)}
.user-panel-tabs .up-pane.on{display:block}
@keyframes upFadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.user-panel-tabs .up-field.err input{
  border-color:#c0392b;
  box-shadow:0 0 0 3px rgba(192,57,43,.15);
}
.user-panel-tabs .up-err{
  font-size:11px;color:#c0392b;
  font-weight:700;margin-top:2px;display:none;
}
.user-panel-tabs .up-field.err .up-err{display:block}
.user-panel-tabs .up-alert{
  background:linear-gradient(135deg,rgba(205,147,74,.18),rgba(205,147,74,.06));
  border:1px solid rgba(205,147,74,.4);
  border-radius:12px;padding:11px 13px;margin-bottom:14px;
  display:flex;gap:10px;align-items:flex-start;
}
.user-panel-tabs .up-alert-ico{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--d);display:grid;place-items:center;color:var(--cr);
}
.user-panel-tabs .up-alert-ico svg{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.user-panel-tabs .up-alert-txt{
  font-size:11.5px;line-height:1.45;color:var(--v);
}
.user-panel-tabs .up-alert-txt strong{
  display:block;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--d);margin-bottom:3px;
}
.user-panel-tabs .up-alert-txt a{
  color:var(--v);text-decoration:underline;
  font-weight:700;cursor:pointer;
}
.user-panel-tabs .up-submit.mayor{background:var(--d)}
.user-panel-tabs .up-submit.mayor::before{background:#b07e3a}
.user-panel-tabs .up-submit.mayor:hover{color:var(--cr)}


/* ── Acceso mayorista: panel B2B en construcción ── */
.user-panel-tabs .up-build{text-align:center;padding:4px 2px 2px}
.user-panel-tabs .up-build-ico{
  position:relative;width:58px;height:58px;margin:4px auto 16px;border-radius:50%;
  background:linear-gradient(135deg,rgba(205,147,74,.22),rgba(205,147,74,.07));
  display:grid;place-items:center;color:var(--d);
}
.user-panel-tabs .up-build-ico svg{
  position:relative;z-index:1;width:27px;height:27px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.user-panel-tabs .up-build-pulse{
  position:absolute;inset:0;border-radius:50%;border:2px solid var(--d);opacity:.45;
  animation:upBuildPulse 1.9s ease-out infinite;
}
@keyframes upBuildPulse{0%{transform:scale(1);opacity:.45}100%{transform:scale(1.6);opacity:0}}
.user-panel-tabs .up-build-h{font-size:16px;color:var(--v);font-weight:800;margin-bottom:7px;letter-spacing:-.01em}
.user-panel-tabs .up-build-p{font-size:12.5px;line-height:1.55;color:var(--v);opacity:.85;margin-bottom:16px}
.user-panel-tabs .up-build-bar{height:5px;border-radius:99px;overflow:hidden;background:rgba(39,64,1,.1);margin-bottom:18px}
.user-panel-tabs .up-build-bar span{
  display:block;height:100%;width:45%;border-radius:99px;
  background:linear-gradient(90deg,var(--vl),var(--d));
  animation:upBuildBar 1.6s ease-in-out infinite;
}
@keyframes upBuildBar{0%{margin-left:-45%}100%{margin-left:100%}}
.user-panel-tabs .up-build-contact{display:flex;flex-direction:column;gap:9px}
.user-panel-tabs .up-build-link{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 14px;border-radius:12px;border:1px solid rgba(39,64,1,.16);
  background:#fff;color:var(--v);font-size:13px;font-weight:700;text-decoration:none;
  transition:border-color .2s,background .2s,transform .15s;
}
.user-panel-tabs .up-build-link svg{
  width:17px;height:17px;stroke:var(--d);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}
.user-panel-tabs .up-build-link:hover{border-color:var(--d);background:var(--cr);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){
  .user-panel-tabs .up-build-pulse,.user-panel-tabs .up-build-bar span{animation:none}
}


/* ── LEGAL / PRIVACY POPUP (modal moderno, contenido sincronizado con legal.html) ── */
.lgp-bg{position:fixed;inset:0;background:rgba(39,64,1,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s ease-out;z-index:9100}
.lgp-bg.vis{opacity:1;pointer-events:all}
.lgp-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,calc(-50% + 12px)) scale(.96);width:min(640px,calc(100vw - 24px));max-height:min(86vh,820px);background:var(--cr);border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -16px rgba(39,64,1,.4),0 8px 22px rgba(39,64,1,.14);z-index:9110;opacity:0;pointer-events:none;transition:opacity .26s ease-out,transform .35s cubic-bezier(.22,1.2,.36,1);display:flex;flex-direction:column;color:var(--v);font-family:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.lgp-modal.open{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)}
.lgp-head{position:relative;padding:24px 60px 18px 28px;background:var(--v);color:var(--cr);flex-shrink:0;overflow:hidden}
.lgp-head::before{content:'';position:absolute;right:-40px;bottom:-50px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(162,191,106,.35) 0%,transparent 70%);pointer-events:none}
.lgp-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--vl);margin-bottom:6px}
.lgp-eyebrow::before{content:'';width:18px;height:1.5px;background:var(--vl)}
.lgp-title{font-family:var(--ff-display,'CooperBlack',Georgia,serif);font-size:clamp(22px,4vw,30px);font-weight:400;letter-spacing:.02em;text-transform:uppercase;margin:0;line-height:1.05}
.lgp-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:rgba(244,233,211,.16);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .25s}
.lgp-close:hover{background:rgba(244,233,211,.3);transform:rotate(90deg)}
.lgp-close svg{width:16px;height:16px;stroke:var(--cr);stroke-width:2.2;fill:none;stroke-linecap:round}
.lgp-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 26px 24px;background:var(--cr)}
.lgp-body::-webkit-scrollbar{width:6px}
.lgp-body::-webkit-scrollbar-thumb{background:rgba(39,64,1,.15);border-radius:3px}
.lgp-content{font-size:13.5px;line-height:1.65;color:rgba(39,64,1,.82)}
.lgp-content h3{font-size:14px;font-weight:800;color:var(--v);margin:18px 0 6px;letter-spacing:.01em}
.lgp-content h3:first-child{margin-top:0}
.lgp-content p{margin:0 0 10px}
.lgp-content a{color:var(--d);text-decoration:underline;text-underline-offset:2px;font-weight:700}
.lgp-content strong{color:var(--v);font-weight:700}
.lgp-content ul,.lgp-content ol{margin:6px 0 12px;padding-left:0;list-style:none}
.lgp-content ul li,.lgp-content ol li{position:relative;padding:4px 0 4px 22px;font-size:13px}
.lgp-content ul li::before{content:'';position:absolute;left:3px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--vl)}
.lgp-content ol{counter-reset:lgp}
.lgp-content ol li{counter-increment:lgp}
.lgp-content ol li::before{content:counter(lgp);position:absolute;left:0;top:3px;font-size:11px;font-weight:800;color:var(--d)}
.lgp-content .legal-meta{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--d);font-weight:700;margin-bottom:14px}
.lgp-content .legal-note{margin-top:16px;background:rgba(162,191,106,.16);border:1px solid rgba(162,191,106,.4);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--v)}
.lgp-content .legal-note strong{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d);margin-bottom:3px}
.lgp-loading{text-align:center;color:rgba(39,64,1,.55);padding:30px 0}
.lgp-foot{flex-shrink:0;padding:14px 22px;border-top:1px solid rgba(39,64,1,.1);background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lgp-foot-txt{font-size:12.5px;color:rgba(39,64,1,.7);margin:0}
.lgp-foot-txt strong{color:var(--v);font-weight:700}
.lgp-foot-cta{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:var(--v);color:var(--cr);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em;text-decoration:none;transition:background .2s,transform .2s}
.lgp-foot-cta:hover{transform:translateY(-1px)}
.lgp-foot-cta svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2}
@media (max-width:768px){
  .lgp-modal{left:0;right:0;bottom:0;top:auto;width:100%;max-width:100%;max-height:92vh;border-radius:20px 20px 0 0;transform:translateY(100%)}
  .lgp-modal.open{transform:translateY(0)}
  .lgp-head{padding:24px 56px 16px 22px}
  .lgp-body{padding:18px 20px 20px}
}


/* ── Quick options (selector de variante en el grid) ── */
.qo-bg{position:fixed;inset:0;background:rgba(39,64,1,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s ease-out;z-index:9200;display:flex;align-items:center;justify-content:center;padding:20px}
.qo-bg.vis{opacity:1;pointer-events:all}
.qo-pop{width:min(380px,100%);background:var(--cr);border-radius:20px;padding:24px 24px 20px;position:relative;box-shadow:0 30px 70px -20px rgba(39,64,1,.45);transform:translateY(10px) scale(.97);transition:transform .26s cubic-bezier(.22,1.2,.36,1)}
.qo-bg.vis .qo-pop{transform:none}
.qo-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(39,64,1,.08);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .25s}
.qo-close:hover{background:rgba(39,64,1,.16);transform:rotate(90deg)}
.qo-close svg{width:14px;height:14px;stroke:var(--v);stroke-width:2.2;fill:none;stroke-linecap:round}
.qo-eyebrow{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--d);margin-bottom:6px}
.qo-title{font-family:var(--ff-display,'CooperBlack',Georgia,serif);font-size:22px;font-weight:400;text-transform:uppercase;color:var(--v);margin-bottom:16px;line-height:1.1}
.qo-opts{display:flex;flex-direction:column;gap:9px}
.qo-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 15px;border-radius:13px;border:1px solid rgba(39,64,1,.16);background:#fff;cursor:pointer;text-align:left;transition:border-color .2s,background .2s,transform .15s}
.qo-opt:hover{border-color:var(--d);background:var(--cr);transform:translateY(-1px)}
.qo-opt.is-off{opacity:.45;cursor:not-allowed}
.qo-opt.is-off:hover{border-color:rgba(39,64,1,.16);background:#fff;transform:none}
.qo-opt.is-off .qo-opt-price{text-decoration:line-through}
.qo-opt-info{display:flex;flex-direction:column;gap:2px}
.qo-opt-name{font-size:14px;font-weight:800;color:var(--v);letter-spacing:.02em}
.qo-opt-sub{font-size:11.5px;color:var(--v);opacity:.6}
.qo-opt-price{font-size:15px;font-weight:800;color:var(--d);font-variant-numeric:tabular-nums;white-space:nowrap}