/* ==========================================================================
LICO LOS SANTOS — Design System
Licorera de vanguardia · dark luxury · gold accents
La fuente de Google Fonts se carga desde en el de cada
página (no con @import acá) a propósito: @import bloquea el render hasta
que termina de bajar en cascada (CSS → CSS de fonts → archivos de fuente),
mientras que un + preconnect deja que el navegador
arranque esa descarga en paralelo con este archivo.
========================================================================== */
:root{
/* Palette */
--bg: #0a0a0c;
--bg-alt: #100f13;
--surface: #17161b;
--surface-2: #1e1c22;
--surface-3: #26232b;
--border: rgba(244, 216, 149, 0.12);
--border-strong: rgba(244, 216, 149, 0.28);
--gold-50: #fbf3dd;
--gold-200: #f4d878;
--gold-400: #d9ae42;
--gold-500: #cc9e2f;
--gold-600: #b6862a;
--gold-700: #8f6820;
--text: #f6f3ec;
--text-dim: #c7c1b3;
--text-muted: #8b8579;
--text-faint: #5c584f;
--success: #4ec98d;
--danger: #e5605f;
--gradient-gold: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-500) 50%, var(--gold-700) 100%);
--gradient-dark: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0.85) 70%, rgba(10,10,12,1) 100%);
--gradient-radial: radial-gradient(circle at 50% 0%, rgba(217,174,66,0.14), transparent 60%);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
--shadow-md: 0 8px 24px rgba(0,0,0,0.45);
--shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
--shadow-gold: 0 8px 30px rgba(204, 158, 47, 0.25);
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-full: 999px;
--container: 1280px;
--header-h: 84px;
--ease: cubic-bezier(.22,1,.36,1);
--ease-soft: cubic-bezier(.4,0,.2,1);
}
/* ==========================================================================
Reset
========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol{ margin: 0; }
ul[class], ol[class]{ list-style: none; padding: 0; }
img, picture, svg{ display: block; max-width: 100%; }
input, button, textarea, select{ font: inherit; color: inherit; }
button{ cursor: pointer; }
a{ color: inherit; text-decoration: none; }
html, body{
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body{
min-height: 100vh;
background-image: var(--gradient-radial);
background-repeat: no-repeat;
}
body.no-scroll{ overflow: hidden; }
::selection{ background: var(--gold-500); color: #0a0a0c; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--gold-700); }
:focus-visible{ outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 4px; }
/* ==========================================================================
Splash de bienvenida (se muestra una sola vez por sesión, ~2s)
========================================================================== */
.splash{
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
background: var(--bg);
cursor: pointer;
transition: opacity .6s var(--ease-soft), visibility 0s linear .6s;
}
.splash::before{
content: "";
position: absolute; inset: 0;
background: var(--gradient-radial);
}
.splash-content{ position: relative; text-align: center; padding: 0 1.5rem; }
.splash-logo{
width: 72px; height: 72px; border-radius: 50%; margin: 0 auto;
box-shadow: 0 0 0 1px var(--border-strong), 0 0 46px rgba(217,174,66,.35);
opacity: 0; transform: scale(.55);
animation: splashLogoIn .7s var(--ease-soft) .1s forwards;
}
.splash-eyebrow{
margin-top: 1.15rem;
font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
color: var(--gold-200);
opacity: 0; transform: translateY(10px);
animation: splashTextIn .6s var(--ease-soft) .45s forwards;
}
.splash-title{
margin-top: .3rem;
font-size: clamp(1.7rem, 6vw, 2.75rem);
opacity: 0; transform: translateY(14px);
animation: splashTextIn .7s var(--ease-soft) .6s forwards;
}
.splash-title em{ font-style: italic; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.splash.splash-out{ opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-soft); }
@keyframes splashLogoIn{ to{ opacity: 1; transform: scale(1); } }
@keyframes splashTextIn{ to{ opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
.splash-logo, .splash-eyebrow, .splash-title{ animation: none; opacity: 1; transform: none; }
}
.container{
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.visually-hidden{
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Typography helpers */
.eyebrow{
display: inline-flex;
align-items: center;
gap: .6em;
font-family: var(--font-body);
font-weight: 700;
font-size: .72rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold-300, var(--gold-400));
}
.eyebrow::before{
content: '';
width: 28px; height: 1px;
background: var(--gold-400);
display: inline-block;
}
h1, h2, h3, .font-display{ font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.section-title{
font-size: clamp(1.9rem, 3.4vw, 2.8rem);
line-height: 1.1;
color: var(--text);
margin-top: .5rem;
}
.section-title em{
font-style: italic;
background: var(--gradient-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-sub{
color: var(--text-muted);
font-size: 1rem;
max-width: 56ch;
margin-top: .9rem;
line-height: 1.65;
}
.section-head{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* ==========================================================================
Buttons
========================================================================== */
.btn{
--btn-fg: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
padding: .95rem 1.9rem;
border-radius: var(--radius-full);
font-weight: 700;
font-size: .92rem;
letter-spacing: .01em;
border: 1px solid transparent;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, border-color .3s, color .3s;
white-space: nowrap;
will-change: transform;
}
.btn svg{ width: 18px; height: 18px; flex-shrink: 0; }
.btn:active{ transform: scale(.96); }
.btn-gold{
background: var(--gradient-gold);
color: #14110a;
box-shadow: var(--shadow-gold);
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px rgba(204,158,47,.38); }
.btn-outline{
background: transparent;
border-color: var(--border-strong);
color: var(--text);
backdrop-filter: blur(6px);
}
.btn-outline:hover{ border-color: var(--gold-400); color: var(--gold-200); transform: translateY(-2px); }
.btn-ghost{
background: rgba(255,255,255,0.04);
color: var(--text);
border-color: var(--border);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.08); }
.btn-whatsapp{
background: linear-gradient(135deg, #34d399, #16a34a);
color: #052e16;
box-shadow: 0 10px 30px rgba(22,163,74,.32);
}
.btn-whatsapp:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(22,163,74,.42); }
.btn-block{ width: 100%; }
.btn-sm{ padding: .6rem 1.1rem; font-size: .82rem; }
.btn[disabled]{ opacity: .5; pointer-events: none; }
.icon-btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
color: var(--text);
transition: all .3s var(--ease);
position: relative;
}
.icon-btn:hover{ background: rgba(255,255,255,0.09); border-color: var(--gold-400); color: var(--gold-200); }
.icon-btn svg{ width: 20px; height: 20px; flex-shrink: 0; }
/* ==========================================================================
Header
========================================================================== */
.site-header{
position: fixed;
inset-inline: 0;
top: 0;
z-index: 500;
height: var(--header-h);
display: flex;
align-items: center;
transition: background-color .4s var(--ease-soft), border-color .4s var(--ease-soft), height .3s var(--ease-soft), box-shadow .4s;
border-bottom: 1px solid transparent;
}
.site-header::before{
content: '';
position: absolute; inset: 0;
background: rgba(10,10,12,0.35);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
z-index: -1;
opacity: 0;
transition: opacity .4s;
}
.site-header.scrolled{ height: 70px; border-color: var(--border); box-shadow: var(--shadow-sm); }
.site-header.scrolled::before{ opacity: 1; background: rgba(10,10,12,0.72); }
.header-inner{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.brand{
display: flex;
align-items: center;
gap: .75rem;
flex-shrink: 0;
}
.brand img{
width: 46px; height: 46px;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-gold);
transition: transform .4s var(--ease);
}
.brand:hover img{ transform: rotate(-8deg) scale(1.05); }
.brand-word{
display: flex;
flex-direction: column;
line-height: 1;
}
.brand-word strong{
font-family: var(--font-display);
font-size: 1.18rem;
letter-spacing: .02em;
color: var(--text);
}
.brand-word span{
font-size: .62rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold-400);
margin-top: 3px;
font-weight: 700;
}
.main-nav{
display: flex;
align-items: center;
gap: clamp(1.25rem, 2vw, 2.25rem);
}
.main-nav a{
position: relative;
font-size: .88rem;
font-weight: 600;
color: var(--text-dim);
padding: .4rem 0;
transition: color .3s;
}
.main-nav a::after{
content: '';
position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--gradient-gold);
transform: scaleX(0);
transform-origin: right;
transition: transform .35s var(--ease);
}
.main-nav a:hover, .main-nav a.active{ color: var(--text); }
.main-nav a:hover::after, .main-nav a.active::after{ transform: scaleX(1); transform-origin: left; }
.header-actions{
display: flex;
align-items: center;
gap: .6rem;
flex-shrink: 0;
}
.cart-btn{ position: relative; }
.cart-count{
position: absolute;
top: -4px; right: -4px;
min-width: 20px; height: 20px;
border-radius: 50%;
background: var(--gradient-gold);
color: #14110a;
font-size: .68rem;
font-weight: 800;
display: flex; align-items: center; justify-content: center;
padding: 0 4px;
box-shadow: 0 0 0 3px var(--bg);
transform: scale(0);
transition: transform .3s var(--ease);
}
.cart-count.show{ transform: scale(1); }
.nav-toggle{
display: none;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
align-items: center; justify-content: center;
position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
content: '';
position: absolute;
width: 18px; height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform .3s var(--ease-soft), opacity .3s;
}
.nav-toggle span::before{ transform: translateY(-6px); }
.nav-toggle span::after{ transform: translateY(6px); }
.nav-toggle.open span{ background: transparent; }
.nav-toggle.open span::before{ transform: rotate(45deg); }
.nav-toggle.open span::after{ transform: rotate(-45deg); }
/* ==========================================================================
Hero Carousel
========================================================================== */
.hero{
position: relative;
height: 100svh;
min-height: 560px;
width: 100%;
overflow: hidden;
background: var(--bg);
}
.hero-slides{
position: absolute; inset: 0;
}
.hero-slide{
position: absolute; inset: 0;
opacity: 0;
transform: scale(1.08);
transition: opacity 1.4s var(--ease-soft), transform 7s linear;
pointer-events: none;
}
.hero-slide.active{
opacity: 1;
transform: scale(1);
pointer-events: auto;
z-index: 2;
}
.hero-slide img{
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
.hero-slide::after{
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,6,8,.55) 0%, rgba(6,6,8,.25) 32%, rgba(6,6,8,.55) 68%, rgba(6,6,8,.95) 100%),
linear-gradient(90deg, rgba(6,6,8,.55) 0%, rgba(6,6,8,.05) 45%, rgba(6,6,8,.55) 100%);
}
.hero-content{
position: relative;
z-index: 10;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 1.5rem;
padding-top: var(--header-h);
}
.hero-content .eyebrow{ justify-content: center; color: var(--gold-200); }
.hero-content .eyebrow::before, .hero-content .eyebrow::after{ content:''; width: 28px; height: 1px; background: var(--gold-400); }
.hero-title{
font-size: clamp(2.4rem, 6.6vw, 5.2rem);
line-height: 1.05;
max-width: 16ch;
margin-top: 1.1rem;
color: var(--text);
text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.hero-title em{
font-style: italic;
background: var(--gradient-gold);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-desc{
margin-top: 1.4rem;
max-width: 46ch;
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--text-dim);
line-height: 1.7;
}
.hero-actions{
margin-top: 2.4rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.hero-nav{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(10,10,12,0.35);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
transition: all .35s var(--ease);
color: var(--text);
}
.hero-nav svg{ width: 20px; height: 20px; }
.hero-nav:hover{ background: var(--gold-400); border-color: var(--gold-400); color: #14110a; transform: translateY(-50%) scale(1.08); }
.hero-prev{ left: clamp(.75rem, 3vw, 2.5rem); }
.hero-next{ right: clamp(.75rem, 3vw, 2.5rem); }
.hero-fullscreen{
position: absolute;
top: calc(var(--header-h) + clamp(.75rem, 2vw, 1.25rem));
right: clamp(.75rem, 3vw, 2.5rem);
z-index: 25;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(10,10,12,0.35);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
transition: all .35s var(--ease);
color: var(--text);
}
.hero-fullscreen svg{ width: 18px; height: 18px; }
.hero-fullscreen:hover{ background: var(--gold-400); border-color: var(--gold-400); color: #14110a; transform: scale(1.08); }
.hero-fullscreen .icon-exit{ display: none; }
.hero-fullscreen.is-fullscreen .icon-enter{ display: none; }
.hero-fullscreen.is-fullscreen .icon-exit{ display: block; }
.hero-controls{
position: absolute;
bottom: clamp(1.5rem, 4vw, 3rem);
left: 0; right: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
}
.hero-dot{
position: relative;
width: 44px; height: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.25);
overflow: hidden;
}
.hero-dot i{
position: absolute; inset: 0;
transform-origin: left;
transform: scaleX(0);
background: var(--gradient-gold);
border-radius: 999px;
}
.hero-dot.active i{ animation: hero-progress 4s linear forwards; }
.hero-dot.done i{ transform: scaleX(1); }
@keyframes hero-progress{ from{ transform: scaleX(0);} to{ transform: scaleX(1);} }
.hero-scroll{
position: absolute;
bottom: 5.2rem;
left: 50%;
transform: translateX(-50%);
z-index: 15;
display: flex; flex-direction: column; align-items: center; gap: .5rem;
color: var(--text-muted);
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
opacity: .8;
}
.hero-scroll .line{
width: 1px; height: 34px;
background: linear-gradient(var(--gold-400), transparent);
overflow: hidden;
position: relative;
}
.hero-scroll .line::after{
content:'';
position: absolute; top: -100%; left: 0; right: 0; height: 100%;
background: var(--gold-200);
animation: scroll-line 2.2s ease-in-out infinite;
}
@keyframes scroll-line{ 0%{ top: -100%;} 60%,100%{ top: 100%;} }
@media (max-width: 640px){
.hero-nav{ width: 42px; height: 42px; }
.hero-scroll{ display: none; }
.hero-fullscreen{ width: 38px; height: 38px; }
.hero-fullscreen svg{ width: 16px; height: 16px; }
}
/* ==========================================================================
Marquee strip
========================================================================== */
.marquee{
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--surface);
overflow: hidden;
padding: .9rem 0;
}
.marquee-track{
display: flex;
width: max-content;
gap: 3rem;
animation: marquee 28s linear infinite;
}
.marquee-track span{
display: inline-flex; align-items: center; gap: .6rem;
font-size: .82rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
}
.marquee-track span::before{ content:'◆'; color: var(--gold-400); font-size: .6rem; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
/* ==========================================================================
Sections generic
========================================================================== */
section{ position: relative; padding: clamp(4rem, 8vw, 7rem) 0; }
/* Categories — cada una con su propio color de identidad (mismo criterio
que el tinte de fondo de shop.html), para que la grilla se sienta viva
y moderna en vez de una lista plana de tarjetas iguales. */
.cat-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.15rem;
}
.cat-card{
--cat-c: 217,174,66; /* fallback: dorado de marca */
position: relative;
display: flex;
flex-direction: column;
gap: 1.1rem;
padding: 2rem 1.7rem 1.8rem;
border-radius: var(--radius-lg);
background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
border: 1px solid var(--border);
overflow: hidden;
isolation: isolate;
transition: transform .45s var(--ease), border-color .4s, box-shadow .45s;
}
.cat-card[data-cat="whisky"]{ --cat-c: 196,140,58; }
.cat-card[data-cat="ron"]{ --cat-c: 168,84,40; }
.cat-card[data-cat="vodka"]{ --cat-c: 120,175,215; }
.cat-card[data-cat="tequila"]{ --cat-c: 180,152,46; }
.cat-card[data-cat="ginebra"]{ --cat-c: 42,120,88; }
.cat-card[data-cat="vinos"]{ --cat-c: 147,51,110; }
.cat-card[data-cat="cervezas"]{ --cat-c: 214,175,60; }
.cat-card[data-cat="cognac-brandy"]{ --cat-c: 150,80,32; }
.cat-card[data-cat="champagne"]{ --cat-c: 224,190,155; }
.cat-card[data-cat="licores-cremas"]{ --cat-c: 168,48,84; }
/* Wash de color propio, siempre presente y más intenso al pasar el mouse */
.cat-card::before{
content: '';
position: absolute; inset: 0; z-index: -1;
background: radial-gradient(circle at 88% -15%, rgba(var(--cat-c),.22), transparent 58%);
opacity: .55;
transition: opacity .4s var(--ease);
}
.cat-card:hover::before{ opacity: 1; }
/* Barra de acento arriba, se despliega de izquierda a derecha al hover */
.cat-card::after{
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, rgba(var(--cat-c),1), rgba(var(--cat-c),.2));
transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--ease);
}
.cat-card:hover::after{ transform: scaleX(1); }
.cat-card:hover{
transform: translateY(-8px);
border-color: rgba(var(--cat-c),.55);
box-shadow: 0 24px 48px -12px rgba(var(--cat-c),.35), var(--shadow-md);
}
.cat-icon{
width: 58px; height: 58px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(var(--cat-c),.12);
border: 1px solid rgba(var(--cat-c),.4);
color: rgb(var(--cat-c));
box-shadow: 0 0 0 rgba(var(--cat-c),0);
transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease), color .4s;
}
.cat-card:hover .cat-icon{
background: radial-gradient(circle at 32% 30%, rgba(var(--cat-c),1), rgba(var(--cat-c),.75));
border-color: transparent;
color: #0d0c0e;
box-shadow: 0 8px 26px -4px rgba(var(--cat-c),.6);
transform: rotate(-6deg) scale(1.08);
}
.cat-icon svg{ width: 27px; height: 27px; }
.cat-name{ font-family: var(--font-display); font-size: 1.22rem; color: var(--text); transition: color .3s; }
.cat-card:hover .cat-name{ color: rgb(var(--cat-c)); }
.cat-count{
display: inline-flex; align-self: flex-start;
font-size: .72rem; font-weight: 700; letter-spacing: .03em;
color: var(--text-muted);
padding: .3rem .7rem;
border-radius: 999px;
background: rgba(255,255,255,.03);
border: 1px solid var(--border);
transition: border-color .35s, color .35s;
}
.cat-card:hover .cat-count{ border-color: rgba(var(--cat-c),.4); color: var(--text-dim); }
.cat-arrow{
margin-top: auto;
display: inline-flex; align-items: center; gap: .4rem;
font-size: .78rem; font-weight: 700; letter-spacing: .05em;
color: rgb(var(--cat-c));
opacity: 0; transform: translateX(-6px);
transition: all .35s var(--ease);
}
.cat-card:hover .cat-arrow{ opacity: 1; transform: translateX(0); }
.cat-arrow svg{ width: 15px; height: 15px; }
/* Trust / features */
.trust-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.5rem;
}
.trust-item{
display: flex;
gap: 1.1rem;
padding: 1.6rem;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
transition: border-color .3s, background .3s;
}
.trust-item:hover{ border-color: var(--border-strong); background: rgba(255,255,255,0.04); }
.trust-icon{
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(217,174,66,0.1);
color: var(--gold-200);
}
.trust-icon svg{ width: 24px; height: 24px; }
.trust-item h3{ font-family: var(--font-body); font-size: 1rem; font-weight: 800; color: var(--text); }
.trust-item p{ font-size: .86rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.55; }
/* Featured products (index teaser) */
.product-row{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.4rem;
}
.product-card{
display: flex;
flex-direction: column;
background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform .45s var(--ease), border-color .35s, box-shadow .45s;
position: relative;
animation: cardIn .5s var(--ease-soft) both;
}
.product-card:hover{ transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
@keyframes cardIn{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: translateY(0); } }
.shop-grid .product-card:nth-child(1){ animation-delay: .02s; }
.shop-grid .product-card:nth-child(2){ animation-delay: .06s; }
.shop-grid .product-card:nth-child(3){ animation-delay: .1s; }
.shop-grid .product-card:nth-child(4){ animation-delay: .14s; }
.shop-grid .product-card:nth-child(5){ animation-delay: .18s; }
.shop-grid .product-card:nth-child(6){ animation-delay: .22s; }
.shop-grid .product-card:nth-child(n+7){ animation-delay: .26s; }
@media (prefers-reduced-motion: reduce){
.product-card{ animation: none; }
}
.product-media{
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--surface-3);
}
.product-media img{
width: 100%; height: 100%;
object-fit: cover;
transition: transform .7s var(--ease);
}
.product-card:hover .product-media img{ transform: scale(1.08); }
.product-badge{
position: absolute; top: .75rem; left: .75rem;
padding: .3rem .7rem;
border-radius: 999px;
font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
background: rgba(10,10,12,.6);
border: 1px solid var(--border-strong);
color: var(--gold-200);
backdrop-filter: blur(6px);
}
.product-badge.low{ color: #ffb4b0; border-color: rgba(229,96,95,.4); }
/* Tag dinámico del comerciante (Nuevo, 2x1, Promo, etc.) — esquina opuesta
a los badges de stock/promo para que nunca choquen entre sí. */
.tag-badge{
position: absolute; top: .75rem; right: .75rem; z-index: 2;
padding: .3rem .7rem;
border-radius: 999px;
font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
background: linear-gradient(135deg, #8b7cf6 0%, #6d5bd0 60%, #4c3fa8 100%);
color: #fff;
box-shadow: 0 6px 18px rgba(109,91,208,.4);
}
.product-body{
padding: 1.15rem 1.2rem 1.3rem;
display: flex;
flex-direction: column;
gap: .5rem;
flex: 1;
}
.product-cat{ font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.product-name{ font-family: var(--font-display); font-size: 1.08rem; color: var(--text); line-height: 1.3; }
.product-desc{ font-size: .8rem; color: var(--text-muted); line-height: 1.5; flex: 1; }
.product-foot{
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
margin-top: .4rem;
}
.product-price{ font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--gold-200); }
.add-btn{
width: 42px; height: 42px;
border-radius: 50%;
background: rgba(217,174,66,0.1);
border: 1px solid var(--border-strong);
color: var(--gold-200);
display: flex; align-items: center; justify-content: center;
transition: all .3s var(--ease);
flex-shrink: 0;
}
.add-btn svg{ width: 19px; height: 19px; }
.add-btn:hover{ background: var(--gradient-gold); color: #14110a; transform: rotate(90deg); }
.add-btn.added{ background: var(--success); border-color: var(--success); color: #06281a; }
.qty-stepper{
display: none;
align-items: center;
gap: 0;
border: 1px solid var(--border-strong);
border-radius: 999px;
overflow: hidden;
flex-shrink: 0;
}
.qty-stepper.show{ display: flex; animation: stepperIn .35s var(--ease-soft) both; }
@keyframes stepperIn{ from{ opacity: 0; transform: scale(.75); } to{ opacity: 1; transform: scale(1); } }
.qty-stepper button{
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.03);
color: var(--text);
font-size: 1rem; font-weight: 700;
}
.qty-stepper button:hover{ background: rgba(217,174,66,0.15); color: var(--gold-200); }
.qty-stepper span{ width: 28px; text-align: center; font-weight: 800; font-size: .88rem; }
/* Combos */
.combos-section{ padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: .5rem; }
.combos-carousel{ position: relative; }
/* Máscara de desvanecido en los bordes: adelanta visualmente que hay más
tarjetas fuera de pantalla (a los costados) aunque todavía no se haya
scrolleado, para que el carrusel no se lea como una fila fija de tarjetas. */
.combos-grid{
display: flex;
gap: 1.4rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding: .3rem .1rem 1rem;
margin: -.3rem -.1rem -1rem;
cursor: grab;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.combos-grid::-webkit-scrollbar{ display: none; }
.combos-grid.dragging{ cursor: grabbing; scroll-snap-type: none; }
.combo-nav{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 46px; height: 46px;
border-radius: 50%;
background: rgba(10,10,12,.6);
border: 1px solid var(--border-strong);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
color: var(--text);
transition: all .3s var(--ease);
}
.combo-nav svg{ width: 19px; height: 19px; }
.combo-nav:hover{ background: var(--gradient-gold); border-color: transparent; color: #14110a; }
.combo-nav:disabled{ opacity: 0; pointer-events: none; }
.combo-prev{ left: -18px; }
.combo-next{ right: -18px; }
@media (max-width: 640px){
/* Debajo de este ancho ya no hay lugar para las flechas sin tapar
tarjetas — acá sí se navega con swipe/arrastre nativo (ver dragging
de mouse más abajo para quien no tenga pantalla táctil). */
.combo-nav{ display: none; }
.combo-card{ flex-basis: 78vw; } /* deja asomar la siguiente tarjeta como pista de que se puede seguir scrolleando */
}
.combo-card{
display: flex;
flex-direction: column;
flex: 0 0 clamp(260px, 30vw, 340px);
scroll-snap-align: start;
background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
transition: transform .45s var(--ease), box-shadow .45s var(--ease);
box-shadow: 0 0 0 1px rgba(217,174,66,0.08);
}
.combo-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(217,174,66,0.2); }
.combo-media{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
.combo-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.combo-card:hover .combo-media img{ transform: scale(1.06); }
/* Carrusel de imágenes del combo (imagen propia + la de cada producto que
lo compone) — ver comboCardHtml()/wireComboMediaCarousels() en shop.js.
Las slides se apilan una sobre otra y solo la ".active" es visible;
rota sola, con puntos abajo para saltar a una en particular. */
.combo-media-track{ position: absolute; inset: 0; }
.combo-media-slide{ position: absolute; inset: 0; opacity: 0; }
/* Dos clases > la especificidad de ".combo-media img" (línea de arriba) —
si no, ese "transition: transform .7s" (shorthand, no aditivo) pisaba
por completo la transición de opacity de acá y el crossfade quedaba
sin animar, saltando de una imagen a otra en seco. */
.combo-media .combo-media-slide{ transition: opacity .6s var(--ease), transform .7s var(--ease); }
.combo-media-slide.active{ opacity: 1; }
.combo-media-dots{
position: absolute; left: 0; right: 0; bottom: .7rem; z-index: 2;
display: flex; justify-content: center; gap: .35rem;
}
.combo-media-dot{
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
border: 1px solid rgba(0,0,0,0.15);
transition: all .3s var(--ease);
}
.combo-media-dot.active{ background: var(--gradient-gold); width: 16px; border-radius: 999px; border-color: transparent; }
.combo-badge{
position: absolute; top: .8rem; left: .8rem; z-index: 2;
padding: .35rem .8rem;
border-radius: 999px;
background: var(--gradient-gold);
color: #14110a;
font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
box-shadow: var(--shadow-gold);
}
/* Oferta/descuento/precio especial: más urgente que el "ahorrás" genérico */
.combo-badge-promo{
background: linear-gradient(135deg, #ff8a65 0%, var(--danger) 60%, #b23a39 100%);
color: #fff;
box-shadow: 0 8px 24px rgba(229,96,95,0.4);
}
.combo-body{ padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.combo-name{ font-family: var(--font-display); font-size: 1.25rem; color: var(--text); line-height: 1.3; }
.combo-desc{ font-size: .84rem; color: var(--text-muted); line-height: 1.55; }
.combo-valid-until{ font-size: .74rem; color: var(--gold-300, var(--gold-200)); font-weight: 700; margin-top: -.2rem; }
.combo-items{ display: flex; flex-direction: column; gap: .3rem; margin: .2rem 0; }
.combo-items li{ font-size: .8rem; color: var(--text-dim); position: relative; padding-left: 1.1rem; }
.combo-items li::before{ content: '•'; position: absolute; left: 0; color: var(--gold-400); }
.combo-foot{
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
padding-top: .8rem;
border-top: 1px dashed var(--border);
}
.combo-price{ display: flex; flex-direction: column; gap: .1rem; }
.combo-price-original{ font-size: .78rem; color: var(--text-faint); text-decoration: line-through; }
.combo-price-final{ font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--gold-200); }
/* ==========================================================================
Sorteos (index.html)
========================================================================== */
.sorteos-section{ padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.sorteos-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.4rem;
}
.sorteo-card{
display: flex;
flex-direction: column;
background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
transition: transform .45s var(--ease), box-shadow .45s var(--ease);
box-shadow: 0 0 0 1px rgba(217,62,148,0.1);
}
.sorteo-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(217,62,148,0.25); }
.sorteo-media{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
.sorteo-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.sorteo-card:hover .sorteo-media img{ transform: scale(1.06); }
.sorteo-badge{
position: absolute; top: .8rem; left: .8rem; z-index: 2;
padding: .35rem .8rem;
border-radius: 999px;
background: linear-gradient(135deg, #f472b6 0%, #d946ef 55%, #a21caf 100%);
color: #fff;
font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
box-shadow: 0 8px 24px rgba(217,70,239,.35);
}
.sorteo-body{ padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.sorteo-title{ font-family: var(--font-display); font-size: 1.25rem; color: var(--text); line-height: 1.3; }
.sorteo-prize{ font-size: .86rem; color: var(--text-dim); }
.sorteo-prize strong{ color: var(--gold-200); font-weight: 700; }
.sorteo-desc{ font-size: .84rem; color: var(--text-muted); line-height: 1.55; }
.sorteo-dates{ font-size: .76rem; color: var(--text-faint); font-weight: 700; letter-spacing: .02em; }
.sorteo-body .btn{ margin-top: auto; width: 100%; }
.sorteo-winner{
margin-top: auto;
padding: .7rem .9rem;
border-radius: var(--radius-sm);
background: rgba(217,174,66,0.12);
border: 1px solid rgba(217,174,66,0.35);
font-size: .86rem;
color: var(--text-dim);
text-align: center;
}
.sorteo-winner strong{ color: var(--gold-200); }
/* CTA banner */
.cta-banner{
position: relative;
border-radius: var(--radius-lg);
padding: clamp(2.5rem, 6vw, 4.5rem);
background: linear-gradient(135deg, #17140c 0%, #201a0e 60%, #171208 100%);
border: 1px solid var(--border-strong);
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.cta-banner::before{
content:'';
position: absolute; inset: -40% -10%;
background: radial-gradient(circle, rgba(217,174,66,0.18), transparent 60%);
animation: rotate-slow 18s linear infinite;
}
@keyframes rotate-slow{ from{ transform: rotate(0);} to{ transform: rotate(360deg);} }
.cta-banner > *{ position: relative; z-index: 1; }
.cta-banner h2{ font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 20ch; }
.cta-banner p{ color: var(--text-dim); margin-top: .9rem; max-width: 48ch; }
.cta-banner .btn{ margin-top: 1.8rem; }
/* ==========================================================================
Footer
========================================================================== */
.site-footer{
border-top: 1px solid var(--border);
background: var(--bg-alt);
padding-top: clamp(3rem, 6vw, 5rem);
}
.footer-grid{
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 2.5rem;
padding-bottom: 3rem;
border-bottom: 1px solid var(--border);
}
.footer-brand .brand{ margin-bottom: 1rem; }
.footer-brand p{ color: var(--text-muted); font-size: .88rem; line-height: 1.7; max-width: 34ch; }
.footer-social{ display: flex; gap: .6rem; margin-top: 1.4rem; }
.footer-col h4{ font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300, var(--gold-200)); margin-bottom: 1.1rem; font-weight: 800; }
.footer-col ul{ display: flex; flex-direction: column; gap: .7rem; }
.footer-col a{ font-size: .88rem; color: var(--text-muted); transition: color .25s; }
.footer-col a:hover{ color: var(--text); }
.footer-contact li{ display: flex; gap: .65rem; font-size: .86rem; color: var(--text-muted); align-items: flex-start; }
.footer-contact svg{ width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--gold-400); }
.footer-bottom{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 1.6rem 0;
font-size: .78rem;
color: var(--text-faint);
}
.footer-bottom .age-note{ display: flex; align-items: center; gap: .5rem; }
.footer-bottom strong{ color: var(--text-muted); }
/* ==========================================================================
Floating WhatsApp button
========================================================================== */
.wa-float{
position: fixed;
right: clamp(1rem, 3vw, 2rem);
bottom: clamp(1rem, 3vw, 2rem);
z-index: 400;
width: 60px; height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #34d399, #16a34a);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 30px rgba(22,163,74,.4);
color: #052e16;
transition: transform .3s var(--ease);
}
.wa-float svg{ width: 28px; height: 28px; }
.wa-float:hover{ transform: scale(1.08); }
.wa-float::before{
content: '';
position: absolute; inset: 0;
border-radius: 50%;
background: rgba(52,211,153,.5);
animation: wa-pulse 2.4s ease-out infinite;
z-index: -1;
}
@keyframes wa-pulse{
0%{ transform: scale(1); opacity: .6; }
100%{ transform: scale(1.9); opacity: 0; }
}
/* ==========================================================================
Chatbot flotante — misma esquina que el botón de WhatsApp (inferior
derecha), apilado justo arriba: WA (60px) + separación + este botón.
========================================================================== */
.chatbot-widget{
position: fixed;
right: clamp(1rem, 3vw, 2rem);
bottom: calc(clamp(1rem, 3vw, 2rem) + 60px + .9rem);
z-index: 450;
}
.chatbot-toggle{
position: relative;
width: 60px; height: 60px;
border-radius: 50%;
background: var(--gradient-gold);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 30px rgba(217,174,66,.35);
color: #14110a;
transition: transform .3s var(--ease);
}
.chatbot-toggle:hover{ transform: scale(1.08); }
.chatbot-toggle svg{ position: absolute; width: 26px; height: 26px; transition: opacity .2s, transform .2s; }
.chatbot-toggle-icon-close{ opacity: 0; transform: scale(.6) rotate(-45deg); }
.chatbot-widget.open .chatbot-toggle-icon-open{ opacity: 0; transform: scale(.6) rotate(45deg); }
.chatbot-widget.open .chatbot-toggle-icon-close{ opacity: 1; transform: none; }
.chatbot-panel{
position: absolute;
right: 0; bottom: calc(100% + 1rem);
width: min(360px, calc(100vw - 2.4rem));
height: min(480px, 70vh);
display: flex; flex-direction: column;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97);
transform-origin: bottom right;
transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft), visibility 0s .3s;
}
.chatbot-widget.open .chatbot-panel{
opacity: 1; visibility: visible; transform: none;
transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
}
.chatbot-panel-head{
display: flex; align-items: center; gap: .8rem;
padding: 1.1rem 1.3rem;
border-bottom: 1px solid var(--border);
background: rgba(217,174,66,0.05);
flex-shrink: 0;
}
.chatbot-avatar{
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
background: var(--gradient-gold);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
}
.chatbot-head-text{ display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.chatbot-head-text strong{ font-family: var(--font-display); font-size: 1rem; color: var(--text); }
.chatbot-head-text span{ font-size: .74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatbot-messages{
flex: 1; min-height: 0;
overflow-y: auto;
padding: 1.1rem;
display: flex; flex-direction: column; gap: .7rem;
}
.chatbot-bubble{ max-width: 86%; }
.chatbot-bubble p{
padding: .65rem .9rem;
border-radius: var(--radius-md);
font-size: .84rem;
line-height: 1.5;
white-space: pre-line;
}
.chatbot-bubble-bot{ align-self: flex-start; }
.chatbot-bubble-bot p{ background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); border-bottom-left-radius: 4px; }
.chatbot-bubble-user{ align-self: flex-end; }
.chatbot-bubble-user p{ background: rgba(217,174,66,0.14); border: 1px solid rgba(217,174,66,0.3); color: var(--text); border-bottom-right-radius: 4px; }
/* Menú de "preguntas rápidas" — un botón por FAQ, para tocar en vez de
escribir. Aparece después de cada turno del bot (bienvenida, respuesta
o fallback) y se reemplaza solo, nunca se acumulan varios menús. */
.chatbot-quick-replies{
display: flex; flex-wrap: wrap; gap: .45rem;
margin: .1rem 0 .3rem;
align-self: stretch;
}
.chatbot-quick-chip{
padding: .5rem .85rem;
border-radius: 999px;
border: 1px solid rgba(217,174,66,0.3);
background: rgba(217,174,66,0.06);
color: var(--gold-200);
font-size: .76rem;
font-weight: 600;
text-align: left;
transition: background .2s, border-color .2s, transform .2s;
}
.chatbot-quick-chip:hover{ background: rgba(217,174,66,0.14); border-color: rgba(217,174,66,0.5); transform: translateY(-1px); }
.chatbot-wa-btn{
display: inline-flex; align-items: center; gap: .5rem;
margin-top: .5rem;
padding: .55rem .9rem;
border-radius: 999px;
background: linear-gradient(135deg, #34d399, #16a34a);
color: #052e16;
font-size: .8rem;
font-weight: 700;
}
.chatbot-wa-btn svg{ width: 15px; height: 15px; }
/* Botón de acción configurado a mano en una FAQ (ej. "Ir a la tienda" →
shop.html cuando preguntan "cómo comprar") — dorado, para distinguirlo
del botón verde de WhatsApp que solo aparece en el fallback. */
.chatbot-cta-btn{
display: inline-flex; align-items: center; gap: .5rem;
margin-top: .5rem;
padding: .55rem .9rem;
border-radius: 999px;
background: var(--gradient-gold);
color: #14110a;
font-size: .8rem;
font-weight: 700;
transition: transform .2s;
}
.chatbot-cta-btn:hover{ transform: translateX(2px); }
.chatbot-cta-btn svg{ width: 15px; height: 15px; }
.chatbot-input-row{
display: flex; align-items: center; gap: .6rem;
padding: .9rem 1rem;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.chatbot-input-row input{
flex: 1; min-width: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: .65rem 1.1rem;
color: var(--text);
font-size: .84rem;
}
.chatbot-input-row input:focus{ outline: none; border-color: var(--gold-400); }
.chatbot-send{
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--gradient-gold);
color: #14110a;
display: flex; align-items: center; justify-content: center;
transition: transform .2s;
}
.chatbot-send:hover{ transform: scale(1.08); }
.chatbot-send svg{ width: 17px; height: 17px; }
@media (max-width: 480px){
.chatbot-panel{ width: calc(100vw - 2rem); }
}
/* ==========================================================================
Mobile nav overlay
========================================================================== */
.mobile-nav{
position: fixed; inset: 0;
z-index: 480;
background: rgba(8,8,10,0.98);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft), visibility 0s .35s;
}
.mobile-nav.open{
opacity: 1; visibility: visible; transform: translateY(0);
transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft), visibility 0s;
}
.mobile-nav a{
font-family: var(--font-display);
font-size: 1.7rem;
color: var(--text);
}
.mobile-nav a:hover{ color: var(--gold-300, var(--gold-200)); }
.mobile-nav .btn{ margin-top: 1rem; }
/* ==========================================================================
Responsive: header / nav
========================================================================== */
@media (max-width: 900px){
.main-nav{ display: none; }
.nav-toggle{ display: flex; }
.footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
.footer-grid{ grid-template-columns: 1fr; gap: 2rem; }
.footer-bottom{ flex-direction: column; align-items: flex-start; }
/* El botón flotante de WhatsApp queda fijo sobre la esquina inferior
derecha — sin este espacio reservado, la última línea del aviso de
edad mínima queda tapada detrás del botón en pantallas angostas. */
.footer-bottom .age-note{ padding-right: 4.5rem; }
}
@media (max-width: 480px){
.header-actions{ gap: .4rem; }
.header-actions > a.icon-btn{ display: none; } /* WhatsApp ya está en el menú móvil */
.brand img{ width: 38px; height: 38px; }
.brand-word strong{ font-size: 1.02rem; }
.brand-word span{ font-size: .56rem; }
.icon-btn, .nav-toggle{ width: 40px; height: 40px; }
}
/* ==========================================================================
Shop page specific
========================================================================== */
.shop-hero{
padding-top: calc(var(--header-h) + 3rem);
padding-bottom: 2.5rem;
text-align: center;
background: var(--gradient-radial);
border-bottom: 1px solid var(--border);
}
.breadcrumb{
display: flex; align-items: center; justify-content: center; gap: .5rem;
font-size: .8rem; color: var(--text-muted); margin-top: .8rem;
}
.breadcrumb a:hover{ color: var(--gold-200); }
.breadcrumb svg{ width: 13px; height: 13px; }
.shop-toolbar{
position: sticky;
top: var(--header-h);
z-index: 100;
background: rgba(10,10,12,0.85);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
padding: 1.1rem 0;
transition: top .3s;
}
.toolbar-inner{
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
justify-content: space-between;
}
.chip-carousel{ display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; }
.chip-row{
display: flex;
gap: .55rem;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: 2px;
flex: 1;
min-width: 0;
}
.chip-row::-webkit-scrollbar{ display: none; }
.chip-nav{
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
color: var(--text-dim);
transition: all .25s var(--ease);
}
.chip-nav svg{ width: 14px; height: 14px; }
.chip-nav:hover{ background: var(--gradient-gold); border-color: transparent; color: #14110a; }
.chip-nav:disabled{ opacity: 0; pointer-events: none; width: 0; margin: 0; border: none; }
@media (max-width: 640px){
.chip-nav{ display: none; } /* en mobile se navega con swipe nativo */
}
.chip{
flex-shrink: 0;
padding: .55rem 1.1rem;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.02);
font-size: .82rem;
font-weight: 700;
color: var(--text-dim);
transition: all .3s var(--ease);
white-space: nowrap;
}
.chip:hover{ border-color: var(--border-strong); color: var(--text); }
.chip.active{ background: var(--gradient-gold); border-color: transparent; color: #14110a; }
/* Selector de categoría: alternativa a la cinta de chips, solo para mobile
(ver media query más abajo) — con el pulgar es más simple tocar un
desplegable único que deslizar/buscar el chip correcto en una cinta. */
.category-select{
display: none;
width: 100%;
padding: .8rem 2.4rem .8rem 1.2rem;
border-radius: 999px;
border: none;
/* Dos capas separadas por coma: el chevron (imagen) arriba, el degradado
dorado abajo — un degradado no puede compartir capa con una imagen sin
comas, y hacerlo (background: ...) es una capa de
background inválida que el navegador descarta entera, dejando el
selector sin fondo. */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2314110a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1.1rem center no-repeat, var(--gradient-gold);
color: #14110a;
font-family: inherit;
font-size: .88rem;
font-weight: 800;
appearance: none;
-webkit-appearance: none;
}
.toolbar-tools{ display: flex; gap: .7rem; flex-shrink: 0; }
.search-box{
position: relative;
display: flex; align-items: center; gap: .5rem;
padding: .55rem .9rem;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.02);
min-width: 200px;
transition: border-color .3s var(--ease);
}
.search-box:focus-within{ border-color: var(--gold-400); }
.search-box svg{ width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.search-box input{
background: none; border: none; outline: none;
color: var(--text); font-size: .85rem; width: 100%;
}
.search-box input::placeholder{ color: var(--text-faint); }
.search-suggest{
position: absolute; top: calc(100% + .6rem); left: 0; right: 0;
background: var(--surface-2, #17161b);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md, 14px);
box-shadow: 0 20px 40px rgba(0,0,0,.45);
overflow: hidden;
z-index: 200;
display: none;
}
.search-suggest.open{ display: block; animation: suggestIn .25s var(--ease-soft) both; }
@keyframes suggestIn{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: translateY(0); } }
.search-suggest li + li{ border-top: 1px solid var(--border); }
.search-suggest button{
display: flex; align-items: center; gap: .7rem;
width: 100%; padding: .6rem .9rem;
background: none; border: none; text-align: left;
color: var(--text-dim); font-size: .84rem;
transition: background .2s var(--ease);
}
.search-suggest button:hover, .search-suggest button.active{ background: rgba(255,255,255,.05); color: var(--text); }
.search-suggest .sg-cat{ margin-left: auto; font-size: .7rem; color: var(--text-faint); flex-shrink: 0; }
.search-suggest .sg-price{ color: var(--gold-200); font-weight: 700; font-size: .78rem; flex-shrink: 0; }
.search-suggest .sg-empty{ padding: .8rem .9rem; font-size: .82rem; color: var(--text-faint); }
.sort-select{
padding: .55rem 1rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c7c1b3' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") right .9rem center no-repeat;
color: var(--text-dim);
font-size: .82rem;
font-weight: 600;
appearance: none;
padding-right: 2.2rem;
}
@media (max-width: 640px){
/* flex-wrap:wrap le queda pegado del layout de escritorio (línea de
arriba) — en un contenedor flex-direction:column, wrap hace que cada
"línea" tome el ancho de su propio contenido en vez de estirarse al
100% del padre, así que la cinta de categorías (con sus 10 chips sin
achicarse) terminaba calculando ~1100px de ancho en una pantalla de
375px, quedando cortada por el overflow-x:hidden de body. */
.toolbar-inner{ flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.chip-carousel{ display: none; } /* reemplazada por .category-select en mobile */
.category-select{ display: block; order: -1; } /* arriba de la búsqueda */
.toolbar-tools{ flex-wrap: wrap; }
.search-box{ flex: 1 1 100%; min-width: 0; }
/* min-width:0 es necesario para que el