*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --negro:#07060a; --oscuro:#0f0e13; --panel:#16141c;
  --crema:#ede8de; --crema2:#f5f1ea;
  --gris:#b8b0a4;  --gris2:#7a7268;
  --dorado:#b89a5c; --dorado2:#d4b87a;
  --linea:rgba(184,154,92,.18);
  --verde:#4caf78; --rojo:#c0392b; --naranja:#e07030; --grisclaro:#888;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat','Helvetica Neue',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--negro);color:var(--crema);font-family:var(--sans);font-weight:300}
a{color:inherit;text-decoration:none} button{cursor:pointer;font-family:inherit;border:none;outline:none;background:none;color:inherit}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:var(--dorado)}

/* FONDO */

#modal-perfil{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);padding:1rem}
#modal-perfil.open{display:flex}
#modal-perfil .mp-box{background:#1a1915;border:1px solid rgba(200,180,120,.2);border-radius:8px;padding:1.8rem 2rem;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
#modal-perfil h3{font-family:var(--serif);color:var(--dorado);font-size:1.2rem;margin-bottom:1.2rem;border-bottom:1px solid rgba(200,180,120,.15);padding-bottom:.6rem}
#modal-perfil label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,180,120,.7);display:block;margin-bottom:.3rem}
#modal-perfil input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(200,180,120,.2);border-radius:4px;color:rgba(237,232,222,.9);padding:.45rem .7rem;font-size:.88rem;margin-bottom:1rem}
#modal-perfil input:focus{outline:none;border-color:var(--dorado)}
.mp-btn{padding:.5rem 1.4rem;border-radius:4px;border:none;cursor:pointer;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.mp-btn.prim{background:var(--dorado);color:#1a1915;font-weight:600}
.mp-btn.sec{background:transparent;border:1px solid rgba(200,180,120,.3);color:rgba(200,180,120,.7)}
.mp-msg{font-size:.8rem;padding:.4rem .7rem;border-radius:4px;margin-bottom:.8rem;display:none}
.mp-msg.ok{background:rgba(100,180,100,.15);color:#8fcc8f;display:block}
.mp-msg.err{background:rgba(200,80,80,.15);color:#e08080;display:block}
#stage{position:fixed;inset:0}
#bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity 1.4s ease}
#bg-ov{position:absolute;inset:0;background:linear-gradient(160deg,rgba(7,6,10,.15) 0%,rgba(7,6,10,.02) 45%,rgba(7,6,10,.18) 100%)}

/* ══════════════════
   TOPBAR — siempre visible, z 200 en pantalla, z 810 dentro de overlays
══════════════════ */
#topbar{position:fixed;top:0;left:0;right:0;z-index:200;height:56px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 1.4rem;gap:1rem;border-bottom:1px solid rgba(184,154,92,.1);background:rgba(7,6,10,.72);backdrop-filter:blur(18px)}
.ov-active #topbar, .ov #topbar{z-index:900}
.tb-left{display:flex;align-items:center;gap:.85rem;flex-shrink:0}
#btn-ham{width:32px;height:32px;display:flex;flex-direction:column;justify-content:center;gap:5px;flex-shrink:0;z-index:900;padding:2px}
#btn-ham span{display:block;height:1px;background:rgba(237,232,222,.55);transition:all .45s var(--ease);transform-origin:center}
#btn-ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg);background:rgba(237,232,222,.9)}
#btn-ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
#btn-ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:rgba(237,232,222,.9)}
.logo-sm{height:22px;width:auto;opacity:1;transition:opacity .3s,filter .3s;display:block;cursor:pointer}
.logo-sm:hover{opacity:.75;filter:brightness(1.3) drop-shadow(0 0 4px rgba(184,154,92,.5))}

/* TICKER */
#tb-center{overflow:hidden;position:relative;height:56px;display:flex;align-items:center;-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}
#ticker-wrap{display:flex;align-items:center;gap:2.5rem;white-space:nowrap;animation:ticker-move 40s linear infinite}
#ticker-wrap:hover{animation-play-state:paused}
@keyframes ticker-move{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tk-item{font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(237,232,222,.72);font-weight:300;display:flex;align-items:center;gap:.5rem}
.tk-sep{color:rgba(184,154,92,.2);font-size:.7rem}
.tk-user{color:rgba(184,154,92,.6);font-weight:400;font-size:.56rem;letter-spacing:.1em}

/* TOPBAR DERECHA */
.tb-right{display:flex;align-items:center;gap:.8rem;flex-shrink:0}
#btn-login-top{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,232,222,.85);padding:.3rem .7rem;border:1px solid rgba(237,232,222,.35);transition:all .35s;display:none}
#btn-login-top:hover{color:var(--dorado);border-color:var(--dorado)}
#user-area{display:none;align-items:center;gap:.7rem;font-size:.56rem;letter-spacing:.07em}
#user-name{color:var(--dorado);font-weight:400}
.cart-info{display:flex;align-items:center;gap:.4rem;color:rgba(237,232,222,.45);transition:color .3s;cursor:pointer}
.cart-info:hover{color:var(--dorado)}
#cart-count{font-size:.52rem;letter-spacing:.05em}
#cart-amount{font-family:var(--serif);font-size:.85rem;font-weight:300;color:var(--dorado)}
#btn-logout-top{font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(154,145,132,.25);border-left:1px solid var(--linea);padding-left:.7rem;transition:color .3s}
#btn-logout-top:hover{color:var(--dorado)}
.admin-sep{width:1px;height:12px;background:var(--linea)}
.admin-link{font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(184,154,92,.3);padding:.22rem .5rem;border:1px solid rgba(184,154,92,.1);transition:all .35s;display:none;align-items:center;gap:.28rem}
.admin-link.visible{display:inline-flex}
.admin-link:hover{color:var(--dorado);border-color:var(--dorado)}

/* CENTRO */
#center{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;user-select:none;padding-top:56px}
#logo-grande{width:min(70vw,820px);max-width:90vw;display:block;opacity:.92;margin-bottom:1.4rem}
.claim{font-family:var(--serif);font-size:clamp(.8rem,1.5vw,1.1rem);font-weight:200;font-style:italic;letter-spacing:.22em;text-transform:lowercase;color:rgba(237,232,222,.95);text-align:center}
.side-lbl{position:fixed;z-index:15;font-size:.44rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(237,232,222,.1);font-weight:300;writing-mode:vertical-rl}
.side-lbl.l{left:1.5rem;top:50%;transform:translateY(-50%) rotate(180deg)}
.side-lbl.r{right:1.5rem;top:50%;transform:translateY(-50%)}

/* ══════════════════
   MENÚ CARRUSEL
══════════════════ */
/* ── MENÚ OVERLAY ROTATIVO ───────────────────── */
#menu-velo{
  position:fixed;inset:0;z-index:1000;
  pointer-events:none;
  display:block;
  background:transparent;
  transition:background .5s var(--ease),backdrop-filter .5s
}
#menu-velo.open{
  background:rgba(7,6,10,.97);
  backdrop-filter:blur(24px) saturate(.3);
  pointer-events:auto
}
/* Menú: ocupa toda la pantalla, imágenes de fondo */
#menu-panel{
  position:absolute;inset:0;
  height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(2.5rem,8vw,7rem);
  padding-right:clamp(2rem,6vw,5rem);
  opacity:0;transform:translateX(-28px);
  transition:opacity .45s .05s var(--ease),transform .45s .05s var(--ease);
  overflow:visible;
  z-index:2
}
#menu-velo.open #menu-panel{opacity:1;transform:translateX(0)}
/* Fade top/bottom del carrusel */
#menu-panel::before,#menu-panel::after{
  content:'';position:absolute;left:0;right:0;z-index:4;pointer-events:none
}
#menu-panel::before{
  top:0;height:22%;
  background:linear-gradient(to bottom,rgba(7,6,10,.98) 0%,rgba(7,6,10,.55) 65%,transparent 100%)
}
#menu-panel::after{
  bottom:0;height:22%;
  background:linear-gradient(to top,rgba(7,6,10,.98) 0%,rgba(7,6,10,.55) 65%,transparent 100%)
}
/* viewport del carrusel: toda la altura de la pantalla */
#menu-viewport{
  height:100vh;
  width:100%;
  overflow-y:hidden;
  overflow-x:visible;
  position:relative;z-index:1;
  touch-action:none;
  display:flex;align-items:center
}
#menu-list{
  display:flex;flex-direction:column;
  align-items:flex-start;
  list-style:none;padding:0;margin:0;
  width:max-content;
  min-width:100%;
  transition:transform .42s var(--ease);
  will-change:transform
}
/* ── Tamaño de ítem según distancia al centro ── */
.m-item{
  font-family:var(--serif);
  font-size:clamp(.7rem,1.3vw,1.05rem);
  font-weight:300;letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(237,232,222,.18);
  cursor:pointer;user-select:none;
  white-space:nowrap;
  overflow:visible;
  max-width:none;
  padding:.22rem 0;
  line-height:1;
  /* altura dinámica por JS, usamos min-height */
  transition:font-size .38s var(--ease),color .3s,letter-spacing .3s,opacity .3s
}
.m-item[data-dist="0"]{
  font-size:clamp(1.1rem,2.0vw,1.8rem);
  color:var(--crema2);
  letter-spacing:.06em;
  font-weight:300
}
.m-item[data-dist="0"]::before{
  content:'';display:inline-block;
  width:14px;height:1px;
  background:var(--dorado);
  margin-right:.5rem;
  vertical-align:middle;opacity:.7
}
.m-item[data-dist="1"]{
  font-size:clamp(.85rem,1.5vw,1.35rem);
  letter-spacing:.05em;
  color:rgba(237,232,222,.68)
}
.m-item[data-dist="2"]{
  font-size:clamp(.72rem,1.2vw,1.05rem);
  letter-spacing:.04em;
  color:rgba(237,232,222,.44)
}
.m-item[data-dist="3"]{
  font-size:clamp(.75rem,1.3vw,1.05rem);
  color:rgba(237,232,222,.26)
}
.m-item[data-dist="4"]{
  font-size:clamp(.65rem,1.1vw,.88rem);
  color:rgba(237,232,222,.13)
}
/* Imágenes de fondo B&N (detrás del texto) */
#menu-imgs{
  position:absolute;inset:0;
  height:100vh;
  overflow:hidden;
  opacity:0;
  z-index:1;
  transition:opacity .6s .15s var(--ease)
}
#menu-velo.open #menu-imgs{opacity:1}
.mi-img{
  position:absolute;
  inset:0;
  background-size:cover;background-position:center;
  filter:grayscale(100%) brightness(.22) contrast(1.15);
  opacity:0;
  transition:opacity .7s var(--ease)
}
.mi-img.visible{opacity:1}
/* Barra de puntos laterales (indicador) */
#menu-dots{
  position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.55rem;z-index:5;
  opacity:0;transition:opacity .5s .2s
}
#menu-velo.open #menu-dots{opacity:1}
.m-dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(237,232,222,.2);
  cursor:pointer;transition:background .3s,transform .3s
}
.m-dot.active{background:var(--dorado);transform:scale(1.5)}
/* Social links */
#menu-soc{
  position:absolute;bottom:2rem;left:clamp(2.5rem,8vw,7rem);
  display:flex;align-items:center;gap:1.3rem;z-index:5;
  opacity:0;transition:opacity .5s .3s
}
#menu-velo.open #menu-soc{opacity:1}
.soc-a{font-size:.48rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(154,145,132,.28);transition:color .3s}
.soc-a:hover{color:var(--dorado)}
.soc-sp{width:1px;height:8px;background:var(--linea)}

/* ══════════════════
   OVERLAY GENÉRICO — con topbar integrado y footer fijo
══════════════════ */
.ov{
  position:fixed;inset:0;z-index:850;
  background:rgba(10,9,14,.97);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .42s var(--ease);
}
.ov.show{opacity:1;pointer-events:auto}

/* topbar dentro de overlay — heredado del global, z-index elevado */
.ov .ov-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.6rem;height:56px;flex-shrink:0;
  background:rgba(7,6,10,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.ov .ov-topbar .ot-left{display:flex;align-items:center;gap:.9rem}
.ov .ov-topbar .ot-title{font-family:var(--serif);font-size:1rem;font-weight:300;letter-spacing:.08em}
.ov .ov-topbar .ot-title em{font-style:italic;color:var(--dorado)}

/* ════════════════════════════════════════════════════════════
   TIENDA — CSS COMPLETO (única definición canónica)
   ════════════════════════════════════════════════════════════ */

/* ── .ov-body ── */
.ov-body{flex:1;overflow-y:auto;padding:1.2rem 0;min-height:0}
#ov-tienda .ov-body{overflow-x:visible;overflow-y:visible;display:flex;flex-direction:column;min-height:0}

/* ── TIENDA GRID 3 COLUMNAS ── */
.shop-wrap{
  display:grid;
  grid-template-columns:200px 1fr 250px;
  grid-template-rows:1fr;
  flex:1;overflow:visible;min-height:0;height:100%;
}


/* ── FILTROS IZQUIERDA ── */
.shop-filters{
  background:rgba(7,6,10,.55);
  border-right:1px solid rgba(184,154,92,.1);
  overflow-y:auto;padding:1rem .8rem;
  font-size:.67rem;color:rgba(200,190,178,.8);
}
.sf-title{
  font-family:var(--serif);font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(200,190,178,.45);
  margin-bottom:1rem;padding-bottom:.4rem;
  border-bottom:1px solid rgba(184,154,92,.12);
}
.sf-group{margin-bottom:.9rem}
.sf-group-title{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(184,154,92,.45);margin-bottom:.35rem}
.sf-group label{display:flex;align-items:center;gap:.35rem;color:rgba(200,190,178,.7);cursor:pointer;padding:.15rem 0;font-size:.64rem;transition:color .2s}
.sf-group label:hover{color:var(--dorado)}
.sf-group input[type=checkbox]{width:10px;height:10px;accent-color:var(--dorado);flex-shrink:0}
.sf-toggle-wrap{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.3rem}
.sf-toggle-label{font-size:.64rem;color:rgba(200,190,178,.65)}
.sf-tog{position:relative;display:inline-block;width:30px;height:17px}
.sf-tog input{opacity:0;width:0;height:0}
.sf-tog-sl{position:absolute;inset:0;border-radius:17px;background:rgba(100,90,80,.35);cursor:pointer;transition:.3s}
.sf-tog-sl:before{content:'';position:absolute;height:11px;width:11px;left:3px;bottom:3px;border-radius:50%;background:rgba(200,190,178,.45);transition:.3s}
.sf-tog input:checked+.sf-tog-sl{background:rgba(184,154,92,.55)}
.sf-tog input:checked+.sf-tog-sl:before{transform:translateX(13px);background:var(--dorado)}

/* ── ZONA CENTRAL COVERFLOW ── */
#shop-center{
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  overflow:visible;position:relative;
  padding:1rem 0 .5rem;
}
#cf-stage{
  position:relative;width:100%;
  height:400px;
  display:flex;align-items:center;justify-content:center;
  perspective:1100px;overflow:visible;
}
.cf-card{
  position:absolute;
  width:clamp(250px,32vw,400px);
  height:360px;
  background:linear-gradient(145deg,rgba(28,24,18,.97),rgba(14,12,9,.99));
  border:1px solid rgba(184,154,92,.18);border-radius:10px;
  overflow:hidden;display:flex;cursor:pointer;
  transition:transform .5s cubic-bezier(.25,.46,.45,.94),opacity .5s,box-shadow .5s;
  will-change:transform,opacity;user-select:none;
}
.cf-card[data-rel="-2"]{transform:translateX(-160%) translateZ(-300px) rotateY(20deg);opacity:.18;pointer-events:none}
.cf-card[data-rel="-1"]{transform:translateX(-68%)  translateZ(-130px) rotateY(11deg);opacity:.55;pointer-events:auto}
.cf-card[data-rel="0"] {transform:translateX(0)     translateZ(0)       rotateY(0deg);opacity:1;pointer-events:auto}
.cf-card[data-rel="1"] {transform:translateX(68%)   translateZ(-130px) rotateY(-11deg);opacity:.55;pointer-events:auto}
.cf-card[data-rel="2"] {transform:translateX(160%)  translateZ(-300px) rotateY(-20deg);opacity:.18;pointer-events:none}
.cf-card.active{box-shadow:0 18px 70px rgba(7,6,10,.9),0 0 0 1px rgba(184,154,92,.22);z-index:10}

/* ── IMAGEN Y INFO DE TARJETA ── */
.cf-card-img{width:44%;flex-shrink:0;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.cf-card-img img{width:100%;height:100%;object-fit:contain;object-position:center;padding:.6rem;background:rgba(12,10,16,.95);display:block}
.cf-card-info{flex:1;padding:1.2rem 1rem;display:flex;flex-direction:column;overflow:hidden}
.cf-nombre{font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:300;color:var(--crema2);line-height:1.18;margin-bottom:.25rem}
.cf-anada{font-size:.56rem;letter-spacing:.12em;color:var(--dorado2);margin-bottom:.15rem}
.cf-formato{font-size:.55rem;letter-spacing:.1em;color:rgba(200,190,178,.7);text-transform:uppercase;margin-bottom:.45rem}
.cf-specs{font-size:.58rem;color:rgba(200,190,178,.7);margin-bottom:.55rem;line-height:1.6}
.cf-disp{font-size:.57rem;font-weight:500;letter-spacing:.04em;margin-bottom:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-disp.verde{color:var(--verde)}.cf-disp.rojo{color:var(--rojo)}.cf-disp.naranja{color:var(--naranja)}.cf-disp.gris{color:var(--grisclaro)}
.cf-pvp{font-size:1rem;color:rgba(200,190,178,.6);margin-bottom:.12rem}
.cf-pvp.tachado{text-decoration:line-through;font-size:1rem;opacity:.5}
.cf-miprecio{font-size:1.1rem;color:rgba(210,184,122,.92);line-height:1.5}
.cf-miprecio strong{font-family:var(--serif);font-size:1rem;color:var(--dorado);font-weight:300}

/* ── FLECHAS NAVEGACIÓN ── */
.cf-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:20;background:rgba(10,9,14,.65);
  border:1px solid rgba(184,154,92,.2);border-radius:50%;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:rgba(200,180,120,.75);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;user-select:none;
}
.cf-nav:hover{background:rgba(184,154,92,.18);color:var(--dorado);border-color:rgba(184,154,92,.5)}
.cf-nav.prev{left:8px}.cf-nav.next{right:8px}

/* ── PANEL DE COMPRA ── */
.shop-buy{
  width:clamp(250px,32vw,400px);
  margin-top:.5rem;padding:.55rem .85rem .45rem;
  background:rgba(10,9,14,.8);
  border:1px solid rgba(184,154,92,.15);border-radius:0 0 8px 8px;
  display:flex;flex-direction:column;gap:.3rem;
}
.sb-nom{font-family:var(--serif);font-size:.82rem;color:var(--crema2);font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-disp{font-size:.6rem;letter-spacing:.04em}
.sb-disp.verde{color:var(--verde)}.sb-disp.naranja{color:var(--naranja)}.sb-disp.rojo{color:var(--rojo)}.sb-disp.gris{color:rgba(150,140,130,.7)}
.sb-price-row{display:flex;align-items:baseline;gap:.6rem}
.sb-pvp{font-size:.78rem;color:rgba(200,190,178,.5);text-decoration:line-through}
.sb-miprecio{font-family:var(--serif);font-size:1.1rem;color:var(--dorado);font-weight:300}
.sb-qty-row{display:flex;align-items:center;gap:.6rem}
.sb-min,.sb-max{font-size:.56rem;color:rgba(184,154,92,.5)}
.sb-qty-ctrl{display:flex;align-items:center;gap:.4rem}
.sb-qty-ctrl button{width:22px;height:22px;border-radius:50%;background:rgba(184,154,92,.12);border:1px solid rgba(184,154,92,.25);color:var(--dorado);font-size:.9rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.sb-qty-ctrl button:hover{background:rgba(184,154,92,.25)}
#shop-qty{font-family:var(--serif);font-size:1rem;color:var(--crema2);min-width:28px;text-align:center}
.sb-add{
  margin-top:.25rem;padding:.42rem .8rem;
  background:linear-gradient(135deg,rgba(184,154,92,.22),rgba(184,154,92,.14));
  border:1px solid rgba(184,154,92,.3);border-radius:5px;
  color:var(--dorado);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s;
}
.sb-add:hover{background:rgba(184,154,92,.3);border-color:rgba(184,154,92,.55)}
.sb-login{font-size:.65rem;color:rgba(184,154,92,.55);text-align:center;padding:.2rem 0;cursor:pointer}
.sb-login:hover{color:var(--dorado)}

/* ── CESTA LATERAL ── */
.shop-cart{
  background:rgba(7,6,10,.6);
  border-left:1px solid rgba(184,154,92,.1);
  overflow-y:auto;padding:1rem .85rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.sc-title{font-family:var(--serif);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(200,190,178,.45);margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:1px solid rgba(184,154,92,.1)}
.sc-row{display:flex;align-items:center;gap:.55rem;padding:.4rem 0;border-bottom:1px solid rgba(184,154,92,.07)}
.sc-thumb{width:44px;height:44px;border-radius:4px;object-fit:contain;background:rgba(14,12,10,.9);flex-shrink:0;padding:2px}
.sc-info{flex:1;min-width:0}
.sc-nom{font-size:.75rem;color:rgba(220,215,205,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-prc{font-size:.8rem;color:var(--dorado);font-family:var(--serif)}
.bq{width:22px;height:22px;border-radius:50%;background:rgba(184,154,92,.1);border:1px solid rgba(184,154,92,.2);color:rgba(200,180,120,.7);font-size:.85rem;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.bq:hover{background:rgba(184,154,92,.22);color:var(--dorado)}
.qn{font-size:.8rem;color:rgba(200,190,178,.8);min-width:24px;text-align:center}
.qn-bot{font-size:.6rem;color:rgba(184,154,92,.55)}
.sc-total-row{margin-top:auto;padding-top:.6rem;border-top:1px solid rgba(184,154,92,.15)}
.sc-envio{font-size:.62rem;color:rgba(184,154,92,.5);margin-bottom:.3rem}
.sc-total{display:flex;justify-content:space-between;align-items:baseline}
.sc-total-lbl{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,190,178,.5)}
.sc-total-num{font-family:var(--serif);font-size:1.1rem;color:var(--dorado)}
.sc-btn-pagar{
  margin-top:.5rem;width:100%;padding:.5rem;
  background:linear-gradient(135deg,rgba(184,154,92,.25),rgba(184,154,92,.15));
  border:1px solid rgba(184,154,92,.35);border-radius:5px;
  color:var(--dorado);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:background .2s;
}
.sc-btn-pagar:hover{background:rgba(184,154,92,.35)}
.sc-vacio{font-size:.68rem;color:rgba(154,145,132,.35);text-align:center;padding:1.5rem 0}

/* ── PROYECTOS 2×2 ── */
.pj-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1rem;max-width:680px;width:92%;margin:1rem auto;
  padding:0 .5rem .5rem;
}
.pj-card{position:relative;height:190px;border-radius:7px;overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s}
.pj-card:hover{transform:scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.6)}
.pj-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s}
.pj-card:hover .pj-bg{transform:scale(1.06)}
.pj-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,4,8,.92) 0%,rgba(5,4,8,.3) 50%,transparent 100%)}
.pj-body{position:absolute;bottom:0;left:0;right:0;padding:.75rem .85rem}
.pj-zona{font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(200,180,120,.65);margin-bottom:.15rem}
.pj-name{font-family:var(--serif);font-size:.95rem;color:var(--crema2);font-weight:300;line-height:1.15}
.pj-var{font-size:.56rem;color:rgba(180,155,100,.75);margin-top:.12rem}
.pj-desc{display:none}
.pj-ver{display:inline-block;margin-top:.35rem;font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(200,180,120,.65);border-bottom:1px solid rgba(200,180,120,.25);padding-bottom:1px;transition:color .2s,border-color .2s}
.pj-card:hover .pj-ver{color:var(--dorado);border-color:var(--dorado)}


/* ── FILOSOFÍA ── */
.fil-wrap{max-width:660px;width:92%;margin:0 auto;padding:1rem 1rem 2rem;font-family:Georgia,'Times New Roman',serif;color:rgba(237,232,222,.9)}
#fil-img,.fil-bg{width:100%;max-height:360px;object-fit:cover;border-radius:6px;margin-bottom:1.4rem;display:block;opacity:.72}
.fil-quote{font-family:Georgia,'Times New Roman',serif;font-size:clamp(.95rem,1.4vw,1.15rem);font-style:italic;color:rgba(200,180,120,.82);border-left:2px solid rgba(200,180,120,.28);padding-left:1rem;margin-bottom:1.3rem;line-height:1.7}
.fil-txt{font-size:.86rem;line-height:1.85;color:rgba(220,215,205,.8);margin-bottom:1.1rem}
.fil-txt p{margin-bottom:.85rem}
.fil-pilares{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;margin:1.3rem 0}
.fil-pilar{background:rgba(184,154,92,.07);border:1px solid rgba(184,154,92,.14);border-radius:6px;padding:.85rem .95rem}
.fil-pilar h4{font-family:var(--serif);font-size:.8rem;color:var(--dorado);margin-bottom:.35rem;letter-spacing:.06em}
.fil-pilar p{font-size:.74rem;color:rgba(200,195,185,.7);line-height:1.6}


/* ── MIEMBROS ── */
.mb-wrap{max-width:660px;width:92%;margin:0 auto;padding:1.2rem 1rem 2.5rem;font-family:Georgia,'Times New Roman',serif;color:rgba(237,232,222,.92);line-height:1.75}
.mb-hero-img{width:100%;max-height:340px;object-fit:cover;border-radius:6px;margin-bottom:1.3rem;display:block;opacity:.72}
.mb-intro,.mb-bold,.mb-maxima,.mb-cierre,.mb-ul,.mb-note{font-family:Georgia,'Times New Roman',serif;font-size:clamp(.88rem,1.3vw,1.05rem);line-height:1.8;color:rgba(237,232,222,.9)}
.mb-intro{margin-bottom:1.3rem}.mb-bold{font-weight:600;margin-bottom:.9rem}
.mb-maxima{margin:.55rem 0 .55rem 1.1rem;font-style:normal}
.mb-cierre{font-style:italic;margin-top:1.1rem;color:rgba(200,180,120,.85)}

/* ── BODEGAS / CONTACTO / TÉRMINOS / PRIVACIDAD ── */
.bd-wrap,.ct-wrap,.tm-wrap,.pv-wrap{max-width:640px;width:92%;margin:0 auto;padding:1.2rem 1rem 2.5rem;font-family:Georgia,'Times New Roman',serif;color:rgba(220,215,205,.85);font-size:.86rem;line-height:1.9}
.bd-wrap h3,.ct-wrap h3,.tm-wrap h3,.pv-wrap h3{font-family:var(--serif);font-size:1.05rem;color:var(--dorado);margin-bottom:.9rem;border-bottom:1px solid rgba(184,154,92,.18);padding-bottom:.5rem}
.bd-wrap p,.ct-wrap p,.tm-wrap p,.pv-wrap p{margin-bottom:.75rem}


/* ── MODAL EMPLEADO ── */
#modal-empleado{
  display:none;position:fixed;inset:0;z-index:2000;
  align-items:center;justify-content:center;
  background:rgba(5,4,8,.88);
}
#modal-empleado.open{display:flex}
.me-box{
  background:#1a1915;border:1px solid rgba(200,180,120,.25);
  border-radius:10px;padding:2rem 2.2rem;max-width:380px;width:90%;
  text-align:center;
}
.me-box h3{font-family:var(--serif);font-size:1.1rem;color:var(--dorado);margin-bottom:.6rem}
.me-box p{font-size:.82rem;color:rgba(220,215,205,.8);margin-bottom:1.2rem;line-height:1.6}
.me-btns{display:flex;flex-direction:column;gap:.7rem}
.me-btn{padding:.65rem 1rem;border-radius:6px;font-size:.8rem;letter-spacing:.06em;cursor:pointer;border:1px solid;transition:background .2s}
.me-btn.erp{background:rgba(184,154,92,.15);border-color:rgba(184,154,92,.35);color:var(--dorado)}
.me-btn.erp:hover{background:rgba(184,154,92,.28)}
.me-btn.tienda{background:rgba(80,120,160,.12);border-color:rgba(100,140,180,.3);color:rgba(160,200,230,.85)}
.me-btn.tienda:hover{background:rgba(80,120,160,.22)}


/* ── BOTONES OV-FOOTER (.obtn) ── */
.obtn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.55rem 1.4rem;border-radius:5px;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  border:1px solid;transition:background .2s,color .2s;
  font-family:var(--sans);font-weight:500;
}
.obtn.prim{
  background:rgba(184,154,92,.15);border-color:rgba(184,154,92,.4);
  color:var(--dorado);
}
.obtn.prim:hover{background:rgba(184,154,92,.3)}
.obtn.back{
  background:transparent;border-color:rgba(180,175,165,.25);
  color:rgba(200,195,185,.6);
}
.obtn.back:hover{color:rgba(220,215,200,.85);border-color:rgba(180,175,165,.45)}
.ov-footer{
  display:flex;justify-content:center;align-items:center;
  gap:.8rem;padding:.8rem 1rem;
  border-top:1px solid rgba(184,154,92,.1);
  flex-shrink:0;
}


/* ══════════════════ AGE GATE ══════════════════ */
#age-gate{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:#07060a;
}
#age-gate.hidden{display:none}
.ag-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.18;
}
.ag{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:2.5rem 2rem;
  max-width:420px;width:92%;
}
.ag-logo{height:52px;margin-bottom:1.4rem;opacity:.9}
.ag-line{
  width:50px;height:1px;
  background:linear-gradient(to right,transparent,var(--dorado),transparent);
  margin-bottom:1.4rem;
}
.ag-txt{
  font-size:.82rem;line-height:1.75;
  color:rgba(220,215,205,.7);margin-bottom:1.8rem;
  font-family:var(--sans);
}
.ag-btns{display:flex;flex-direction:column;gap:.8rem;width:100%;margin-bottom:1.2rem}
.btn-si{
  padding:.75rem 1.5rem;border-radius:5px;
  background:rgba(184,154,92,.18);border:1px solid rgba(184,154,92,.4);
  color:var(--dorado);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:background .25s;
  font-family:var(--sans);
}
.btn-si:hover{background:rgba(184,154,92,.32)}
.btn-no{
  padding:.55rem 1.5rem;border-radius:5px;
  background:transparent;border:1px solid rgba(180,175,165,.2);
  color:rgba(180,175,165,.5);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;transition:color .25s;
  font-family:var(--sans);
}
.btn-no:hover{color:rgba(180,175,165,.75)}
.ag-legal{
  font-size:.6rem;color:rgba(180,175,165,.38);
  line-height:1.6;max-width:320px;
}


/* ══════════════════════════════════════════
   RESPONSIVE MÓVIL
   ══════════════════════════════════════════ */

/* ─── Tablet / móvil grande ≤900px ─── */
@media(max-width:900px){
  .shop-wrap{grid-template-columns:0 1fr 0}
  .shop-filters{display:none!important}
  .shop-cart{display:none!important}
}

/* ─── Móvil ≤600px ─── */
@media(max-width:600px){
  .pj-grid{grid-template-columns:1fr;max-width:94vw}
  .pj-card{height:160px}
  .fil-pilares{grid-template-columns:1fr}
  #fil-img,.fil-bg{max-height:220px}
  .mb-hero-img{max-height:200px}

  /* Stage y tarjeta de la tienda */
  #cf-stage{
    height:56vh!important;
    min-height:260px!important;
    perspective:700px!important;
  }
  .cf-card{
    width:84vw!important;
    max-width:340px!important;
    height:50vh!important;
    min-height:250px!important;
    max-height:340px!important;
  }
  .shop-buy{
    width:84vw!important;
    max-width:340px!important;
    box-sizing:border-box;
  }

  /* Topbar */
  #topbar{height:48px!important;padding:0 .8rem!important}
  .logo-sm{height:20px!important}

  /* Textos en tarjeta */
  .cf-nombre{font-size:clamp(.82rem,3.2vw,1rem)!important;line-height:1.3!important}
  .cf-pvp{font-size:.8rem!important}
  .cf-miprecio{font-size:.9rem!important}

  /* Flechas de navegación */
  .cf-arrow{width:32px!important;height:32px!important;font-size:1rem!important}
  .cf-arrow.left{left:.3rem!important}
  .cf-arrow.right{right:.3rem!important}

  /* shop-center sin padding extra */
  #shop-center{padding:.2rem 0!important}
  .ov-body{padding:.3rem 0!important}

  /* Menú rotativo */
  #menu-panel{width:90vw!important;padding:1rem .9rem!important}

  /* Modales */
  .me-box{padding:1.3rem 1.1rem!important}
  .mp-box{padding:1.2rem 1rem!important}
  .modal-box,.auth-box{padding:1.4rem 1.1rem!important}
}

/* ─── Móvil muy pequeño ≤380px ─── */
@media(max-width:380px){
  #cf-stage{height:50vh!important;min-height:230px!important}
  .cf-card{
    width:90vw!important;
    height:46vh!important;
    min-height:220px!important;
  }
  .shop-buy{width:90vw!important}
  .cf-nombre{font-size:.78rem!important}
  .cf-pvp{font-size:.75rem!important}
}


/* ══════════════════════════════════════════
   MODAL AUTH (login / registro)
   ══════════════════════════════════════════ */
#modal-auth{
  display:none;position:fixed;inset:0;z-index:1500;
  align-items:center;justify-content:center;
  background:rgba(5,4,8,.9);
  padding:1rem;
}
#modal-auth.show{display:flex}
.mbox{
  background:#14121a;
  border:1px solid rgba(184,154,92,.2);
  border-radius:10px;
  padding:2rem 2.2rem 1.8rem;
  max-width:380px;width:100%;
  position:relative;
  max-height:90vh;overflow-y:auto;
}
.mc{
  position:absolute;top:.7rem;right:.9rem;
  background:none;border:none;color:rgba(200,195,185,.4);
  font-size:1.1rem;cursor:pointer;line-height:1;padding:.2rem .4rem;
  transition:color .2s;
}
.mc:hover{color:var(--dorado)}
.mbox h2{
  font-family:var(--serif);font-size:1.15rem;
  color:var(--crema);margin-bottom:1.2rem;font-weight:400;
}
.mbox h2 em{font-style:italic;color:var(--dorado)}
.ftabs{display:flex;gap:1.2rem;margin-bottom:1.4rem;border-bottom:1px solid rgba(184,154,92,.12);padding-bottom:.6rem}
.ftab{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(200,190,178,.45);cursor:pointer;padding:.2rem 0;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.ftab.active,.ftab:hover{color:var(--dorado);border-bottom-color:var(--dorado)}
.fg{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.fg label{
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(200,190,178,.5);
}
.fg input{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(184,154,92,.2);
  border-radius:4px;padding:.55rem .75rem;
  color:var(--crema);font-size:.8rem;
  outline:none;transition:border-color .2s;
  font-family:var(--sans);
}
.fg input:focus{border-color:rgba(184,154,92,.55)}
.bprim{
  width:100%;padding:.65rem;border-radius:5px;
  background:rgba(184,154,92,.18);
  border:1px solid rgba(184,154,92,.4);
  color:var(--dorado);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:background .2s;
  font-family:var(--sans);margin-top:.3rem;
}
.bprim:hover{background:rgba(184,154,92,.32)}
.bprim:disabled{opacity:.5;cursor:default}
.ferr{
  display:none;background:rgba(200,60,60,.12);
  border:1px solid rgba(200,60,60,.3);border-radius:4px;
  color:#e08080;font-size:.72rem;padding:.45rem .7rem;
  margin-bottom:.7rem;line-height:1.5;
}
.fok{
  display:none;background:rgba(60,180,80,.1);
  border:1px solid rgba(60,180,80,.25);border-radius:4px;
  color:#80d890;font-size:.72rem;padding:.45rem .7rem;
  margin-bottom:.7rem;line-height:1.5;
}
.ferr.show,.fok.show{display:block}
.ftog{
  font-size:.68rem;color:rgba(200,190,178,.4);
  margin-top:.9rem;text-align:center;
}
.ftog a{color:rgba(184,154,92,.7);cursor:pointer;text-decoration:underline}
.ftog a:hover{color:var(--dorado)}


/* wrapper del modal auth = fondo oscuro */
.mwrap{
  display:none;position:fixed;inset:0;z-index:1500;
  align-items:center;justify-content:center;
  background:rgba(5,4,8,.9);padding:1rem;
}
.mwrap.show{display:flex}



/* ══ CARRITO v12 — PANEL FLEX + FOOTER FIJO ══════════════════════════════
   Estos estilos complementan al .shop-cart existente para garantizar
   que el footer siempre sea visible y la lista sea la que scrollea.
   ═══════════════════════════════════════════════════════════════════════ */

/* Forzar el panel carrito como columna flex con altura total */
.shop-cart {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Cabecera del carrito — no scrollea */
.sc-header {
    flex: 0 0 auto;
}

/* Lista de items — ES LA ÚNICA QUE SCROLLEA */
.sc-items {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
}
.sc-items::-webkit-scrollbar { width: 3px; }
.sc-items::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}

/* Footer del carrito — SIEMPRE visible, no scrollea */
.sc-footer {
    flex: 0 0 auto !important;
    overflow: hidden !important;
}

/* ── FORMA DE PAGO EN CARRITO ──────────────────────────────────────── */
.sc-forma-pago {
    margin: 0.5rem 0 0.6rem;
    padding: 0 0.25rem;
}
.sc-forma-pago label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(237,232,222,0.45);
    margin-bottom: 4px;
}
#select-forma-pago {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    color: rgba(237,232,222,0.9);
    font-size: 0.82rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(237,232,222,0.4)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 1.8rem;
}
#select-forma-pago:focus {
    outline: none;
    border-color: rgba(139,26,26,0.6);
}

/* ── BOTONES DEL CARRITO ──────────────────────────────────────────── */
.btn-ck {
    width: 100%;
    padding: 0.72rem;
    background: #8B1A1A;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.2s;
    margin-bottom: 0.45rem;
}
.btn-ck:hover:not(:disabled) { background: #a52020; }
.btn-ck:disabled { background: #444; cursor: not-allowed; opacity: 0.6; }

.btn-save {
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    color: rgba(237,232,222,0.45);
    border: 1px solid rgba(237,232,222,0.15);
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-save:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(237,232,222,0.8);
}

/* ── ITEMS DEL CARRITO ─────────────────────────────────────────────── */
.sc-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sc-row:last-child { border-bottom: none; }
.sc-row-img {
    width: 36px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.88;
}
.sc-row-info {
    flex: 1 1 auto;
    min-width: 0;
}
.sc-row-nombre {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(237,232,222,0.9);
}
.sc-row-precio {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--dorado2, #f0e6c8);
    margin-top: 1px;
}
.sc-qty {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.bq {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color: rgba(237,232,222,0.9);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.12s;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}
.bq:hover { background: rgba(255,255,255,0.18); }
.qn { min-width: 22px; text-align: center; font-size: 0.88rem; font-weight: 600; }
.qn-bot { font-size: 0.68rem; opacity: 0.55; display: block; }
.bdel {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(237,232,222,0.3);
    cursor: pointer;
    border-radius: 4px;
    margin-left: 1px;
    font-size: 0.85rem;
    transition: color 0.12s;
}
.bdel:hover { color: #ff6b6b; }

/* ══ MODAL CHECKOUT — overlay sobre la tienda ════════════════════════ */
.modal-checkout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-checkout-overlay.visible {
    display: flex;
}
.modal-checkout-box {
    background: #16141f;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 1.75rem;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal-checkout-box::-webkit-scrollbar { width: 3px; }
.modal-checkout-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
.modal-ck-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.modal-ck-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.modal-ck-cerrar {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s;
}
.modal-ck-cerrar:hover { color: #fff; }
.modal-ck-resumen {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 1.1rem;
    font-size: 0.84rem;
}
.modal-ck-resumen-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    color: rgba(237,232,222,0.75);
}
.modal-ck-resumen-total {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0 0;
    margin-top: 0.3rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-weight: 700;
    color: rgba(237,232,222,1);
    font-size: 0.95rem;
}
#stripe-error-msg {
    color: #ff6b6b;
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    border-radius: 5px;
    background: rgba(255,50,50,0.08);
    display: none;
}
.btn-confirmar-pago {
    width: 100%;
    padding: 0.8rem;
    background: #8B1A1A;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    transition: background 0.2s;
    letter-spacing: 0.02em;
}
.btn-confirmar-pago:hover:not(:disabled) { background: #a52020; }
.btn-confirmar-pago:disabled {
    background: #3a3a4a;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ══ FILTROS v12 — Pills + Slider ════════════════════════════════════ */
.filtros-panel-v12 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    align-items: flex-end;
    padding: 0.7rem 0.9rem;
    background: rgba(255,255,255,0.035);
    border-radius: 9px;
    margin-bottom: 0.9rem;
    border: 1px solid rgba(255,255,255,0.06);
}
.filtro-grupo-v12 {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 100px;
}
.filtro-label-v12 {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(237,232,222,0.4);
}
.filtro-pills-v12 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.filtro-pill-v12 {
    padding: 0.27rem 0.7rem;
    border-radius: 20px;
    border: 1px solid rgba(237,232,222,0.18);
    background: transparent;
    color: rgba(237,232,222,0.55);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.filtro-pill-v12:hover {
    border-color: rgba(237,232,222,0.45);
    color: rgba(237,232,222,0.9);
}
.filtro-pill-v12.activo {
    background: #8B1A1A;
    border-color: #8B1A1A;
    color: #fff;
    font-weight: 600;
}
.filtro-rango-v12 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.filtro-slider-v12 {
    width: 110px;
    accent-color: #8B1A1A;
    cursor: pointer;
    height: 3px;
}
.filtro-precio-txt-v12 {
    font-size: 0.77rem;
    color: rgba(237,232,222,0.65);
    white-space: nowrap;
    min-width: 75px;
}
.filtro-limpiar-v12 {
    background: none;
    border: none;
    color: rgba(237,232,222,0.28);
    font-size: 0.72rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    align-self: flex-end;
    font-family: inherit;
    transition: color 0.15s;
}
.filtro-limpiar-v12:hover { color: rgba(237,232,222,0.65); }

/* ══ COVERFLOW v12 — Flechas + Escala por distancia ══════════════════ */
.cf-flecha-v12 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139,26,26,0.72);
    border: 2px solid rgba(255,255,255,0.28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s, border-color 0.18s;
    backdrop-filter: blur(4px);
    font-size: 1.1rem;
    user-select: none;
}
.cf-flecha-v12:hover {
    background: rgba(139,26,26,0.95);
    border-color: rgba(255,255,255,0.65);
    transform: translateY(-50%) scale(1.08);
}
.cf-flecha-v12:active { transform: translateY(-50%) scale(0.94); }
.cf-flecha-izq-v12 { left: 0.8rem; }
.cf-flecha-der-v12 { right: 0.8rem; }

/* Clases de distancia para tarjetas */
.cf-card {
    transition: transform 0.32s cubic-bezier(0.25,0.46,0.45,0.94),
                opacity   0.32s ease,
                filter    0.32s ease !important;
    cursor: pointer;
}
.cf-activa   { transform: scale(1.0) !important; opacity: 1 !important; filter: none !important; z-index: 10; }
.cf-dist-1   { transform: scale(0.83) !important; opacity: 0.68 !important; filter: brightness(0.72) !important; }
.cf-dist-2   { transform: scale(0.68) !important; opacity: 0.42 !important; filter: brightness(0.52) !important; }
.cf-dist-3plus { transform: scale(0.55) !important; opacity: 0.18 !important; filter: brightness(0.35) !important; }