/* ══════════════════════════════════════════════════════════════
BOLETO LICORERÍA — hoja de estilos
REGLA DE COLOR (Von Restorff):
el verde --wa se usa ÚNICAMENTE en elementos que abren
WhatsApp. Ningún otro botón, borde o texto puede ser verde.
══════════════════════════════════════════════════════════════ */
/* Azul y rojo salen del kit de marca, tal cual vienen en los SVG
oficiales: así el logo apoya sobre el fondo sin un salto de tono.
El crema se deja como estaba —el marfil de la marca (#fefcec) es casi
blanco y aclararía toda la chapa del hero, que no es lo que se pidió.
Medido: rojo de marca sobre crema da 4.80:1, por encima del 4.5 de AA. */
:root {
--marino: #000625;
--marino-2: #08103A;
--marino-3: #141E52;
--crema: #F7F1E3;
--crema-2: #E7DDC6;
--rojo: #CF2026;
--rojo-osc: #9C191D;
--wa: #25D366;
--wa-osc: #1BB854;
--tx-claro: #F7F1E3;
--tx-tenue: #9AA6CC;
--tx-oscuro: #0B1436;
--tx-gris: #59637E;
--display: 'Bodoni Moda',Georgia,serif;
--sans: 'Jost',system-ui,-apple-system,sans-serif;
--r: 12px;
--r-lg: 22px;
--max: 1180px;
--bar-h: 0px;
--tap: 48px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
html {
scroll-behavior: smooth;
scroll-padding-top: 96px
}
body {
background: var(--marino);
color: var(--tx-claro);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
padding-bottom: var(--bar-h)
}
img {
max-width: 100%;
display: block
}
ul {
list-style: none
}
button {
font-family: inherit;
font-size: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit
}
input {
font-family: inherit;
font-size: inherit
}
a {
color: inherit;
text-decoration: none
}
:focus-visible {
outline: 3px solid var(--rojo);
outline-offset: 3px;
border-radius: 6px
}
.wrap {
max-width: var(--max);
margin-inline: auto;
padding-inline: 20px
}
.skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--crema);
color: var(--tx-oscuro);
padding: 12px 20px;
border-radius: 0 0 8px 0
}
.skip:focus {
left: 0
}
.display {
font-family: var(--display);
font-weight: 700;
line-height: 1.02
}
.eyebrow {
font-size: .72rem;
font-weight: 500;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--tx-tenue)
}
.eyebrow--red {
color: var(--rojo)
}
.flourish {
width: min(340px,100%);
height: 16px;
color: var(--rojo);
margin: 18px 0
}
.flourish--sm {
width: min(240px,100%)
}
.flourish--c {
margin-inline: auto
}
/* ── Botones · Fitts ──────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: var(--tap);
padding: 14px 26px;
border-radius: 99px;
font-weight: 600;
font-size: .95rem;
letter-spacing: .03em;
white-space: nowrap;
transition: transform .16s,box-shadow .16s,background .16s
}
.btn--xl {
min-height: 58px;
padding: 17px 34px;
font-size: 1.04rem
}
.btn .i-wa {
width: 22px;
height: 22px;
flex-shrink: 0
}
.btn--wa {
background: var(--wa);
color: #06231A;
box-shadow: 0 8px 26px rgba(37,211,102,.3)
}
.btn--wa:hover {
background: var(--wa-osc);
transform: translateY(-2px);
box-shadow: 0 12px 34px rgba(37,211,102,.42)
}
.btn--line {
border: 1.5px solid var(--marino-3);
color: var(--tx-claro)
}
.btn--line:hover {
border-color: var(--rojo);
color: var(--rojo)
}
.btn--dark {
border-color: var(--crema-2);
color: var(--tx-oscuro)
}
.btn--dark:hover {
border-color: var(--rojo);
color: var(--rojo)
}
/* ── Franja ───────────────────────────────────────────────── */
.promobar {
background: var(--rojo-osc);
overflow: hidden;
white-space: nowrap;
padding: 5px 0
}
.promobar__t {
display: inline-block;
animation: slide 60s linear infinite;
font-size: .68rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(247,241,227,.88)
}
.promobar__t b {
font-weight: 400;
opacity: .5;
margin: 0 16px
}
@keyframes slide {
from {
transform: translateX(0)
}
to {
transform: translateX(-50%)
}
}
/* ── Nav ──────────────────────────────────────────────────── */
.nav {
position: sticky;
top: 0;
z-index: 60;
background: rgba(0,7,37,.93);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--marino-3)
}
.nav__in {
max-width: var(--max);
margin-inline: auto;
padding: 11px 20px;
display: flex;
align-items: center;
gap: 20px
}
.logo {
display: flex;
align-items: center;
gap: 11px;
flex-shrink: 0;
/* En el nav es un enlace: el sello mide 40, el dedo pide 44. */
min-height: 44px
}
.logo__txt {
font-family: var(--display);
font-weight: 700;
font-size: 1.1rem;
line-height: 1
}
.logo__txt small {
display: block;
margin-top: 3px;
font-family: var(--sans);
font-size: .6rem;
font-weight: 500;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--tx-tenue)
}
/* En escritorio el menú es una fila del nav; en móvil, un panel que
cuelga de la hamburguesa. Es el mismo marcado: solo cambia cómo se
coloca. Un segundo menú duplicado se desincroniza tarde o temprano. */
.nav__menu {
display: flex;
align-items: center;
gap: 22px;
margin-left: auto
}
.nav__links {
display: flex;
gap: 26px;
font-size: .88rem;
font-weight: 500
}
/* El texto mide 21 px de alto; el dedo necesita 44. Se crece el área
táctil con padding, no la tipografía: se ve igual, se acierta mejor. */
.nav__links a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--tx-tenue);
transition: color .18s
}
.nav__links a:hover {
color: var(--crema)
}
/* Buscador del nav · ocupa el sitio del sello "Abierto ahora".
Es el mismo componente que el del catálogo, más bajo: acá es un
atajo, no el buscador principal. Que se vean iguales es a propósito
— uno aprende una vez cómo se busca (Nielsen #4). */
.search--nav {
min-height: 40px;
max-width: 260px;
padding: 6px 16px;
margin-bottom: 0;
background: rgba(247,241,227,.07)
}
.search--nav input {
font-size: .88rem
}
/* ── Hamburguesa · solo móvil ─────────────────────────────── */
.burger {
display: none;
width: 44px;
height: 44px;
margin-left: auto;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 12px;
border: 1px solid rgba(247,241,227,.28);
background: rgba(247,241,227,.07);
color: var(--crema)
}
.burger__caja {
display: grid;
gap: 4px;
width: 20px
}
.burger__caja i {
display: block;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform .2s, opacity .2s
}
/* Abierto, las tres barras se vuelven una X: el mismo botón sirve
para cerrar y se ve que sirve, sin agregar un segundo control. */
.burger[aria-expanded="true"] .burger__caja i:nth-child(1) {
transform: translateY(6px) rotate(45deg)
}
.burger[aria-expanded="true"] .burger__caja i:nth-child(2) {
opacity: 0
}
.burger[aria-expanded="true"] .burger__caja i:nth-child(3) {
transform: translateY(-6px) rotate(-45deg)
}
/* ── Hero ─────────────────────────────────────────────────── */
.hero {
position: relative;
padding: 56px 0 60px
}
.hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 70% 55% at 50% 0%,rgba(200,16,46,.16),transparent 70%)
}
.hero .wrap {
position: relative
}
.cartel {
background: var(--crema);
color: var(--tx-oscuro);
border-radius: var(--r-lg);
padding: clamp(34px,5vw,62px);
box-shadow: 0 30px 70px rgba(0,0,0,.4);
max-width: 720px;
margin-inline: auto;
text-align: center;
}
.cartel .flourish {
margin-inline: auto
}
.cartel .eyebrow {
color: var(--tx-gris)
}
.cartel h1 {
font-size: clamp(3rem,8.4vw,5.6rem);
margin-top: 14px
}
.cartel__p {
color: var(--tx-gris);
font-size: 1.1rem;
max-width: 40ch;
margin: 0 auto 30px
}
.cartel__p b {
color: var(--tx-oscuro);
font-weight: 600
}
#relojHero {
font-variant-numeric: tabular-nums
}
.cartel__sub {
margin-top: 16px
}
/* Enlace deliberadamente discreto: no debe competir con el CTA verde
(Hick, un solo primario). Se le da el área táctil por padding para
no tener que agrandar la letra y romper esa jerarquía. */
.cartel__sub a {
display: inline-block;
padding: 11px 4px;
color: var(--tx-gris);
font-size: .92rem;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: var(--crema-2)
}
.cartel__sub a:hover {
color: var(--rojo);
text-decoration-color: var(--rojo)
}
/* ══════════════════════════════════════════════════════════════
ICONOS DE MARCA
Los tres del kit —carrito, hielo y acompañante— van donde
significan algo, no de adorno: el carrito en el resumen del
pedido, el hielo en la sección que habla del hielo y el
acompañante en la promoción, que es de eso.
Se pintan como máscara y no como ![]()
porque así heredan el
color del texto que acompañan: el mismo archivo sirve sobre la
chapa crema y sobre el fondo noche. Si el navegador no soporta
máscaras, el icono simplemente no se dibuja — no aparece un
cuadrado de color donde debería haber una silueta.
══════════════════════════════════════════════════════════════ */
.ico {
width: 22px;
height: 22px;
flex-shrink: 0;
display: inline-block
}
@supports (mask-image:url(a)) or (-webkit-mask-image:url(a)) {
.ico {
background: currentColor;
-webkit-mask: var(--ico) no-repeat center/contain;
mask: var(--ico) no-repeat center/contain
}
}
.ico--xl {
width: 48px;
height: 48px
}
.ico--carrito {
--ico: url(/assets/iconos/carrito.svg)
}
.ico--hielo {
--ico: url(/assets/iconos/hielo.svg)
}
.ico--acompanante {
--ico: url(/assets/iconos/acompanante.svg)
}
/* ── Secciones ────────────────────────────────────────────── */
.sec {
padding: 70px 0
}
.sec__head {
margin-bottom: 28px
}
/* Los carruseles van centrados, así que su encabezado también. */
.sec__head--c {
text-align: center
}
.sec__ico {
color: var(--tx-tenue);
margin: 0 auto 14px
}
/* La sección de promoción es la de los carruseles: el fondo se
diferencia apenas para separarla del hero sin pelearle. */
.sec--promo {
padding: 54px 0 60px;
background: rgba(8,16,58,.5);
border-block: 1px solid var(--marino-3)
}
.promo__pie {
text-align: center;
margin-top: 26px
}
.sec__h {
font-size: clamp(2.2rem,5vw,3.4rem);
margin-top: 10px
}
.sec__p {
color: var(--tx-tenue);
max-width: 54ch
}
/* ── Buscador y filtros ───────────────────────────────────── */
.search {
display: flex;
align-items: center;
gap: 11px;
min-height: var(--tap);
background: var(--marino-2);
border: 1px solid var(--marino-3);
border-radius: 99px;
padding: 10px 20px;
max-width: 400px;
margin-bottom: 18px;
transition: border-color .18s
}
.search:focus-within {
border-color: var(--rojo)
}
.search svg {
width: 18px;
height: 18px;
color: var(--tx-tenue);
flex-shrink: 0
}
.search input {
background: none;
border: none;
color: var(--tx-claro);
width: 100%;
font-size: .95rem
}
/* Antes acá había un `outline: none` a secas. Ganaba por
especificidad al :focus-visible global y dejaba el buscador sin
ninguna señal de foco: quien navega con teclado no sabía dónde
estaba parado. Se devuelve el indicador, ceñido al input. */
.search input:focus-visible {
outline: 3px solid var(--rojo);
outline-offset: 4px;
border-radius: 4px
}
.search input::placeholder {
color: var(--tx-tenue)
}
.chips {
display: flex;
gap: 9px;
flex-wrap: wrap;
margin-bottom: 14px
}
.chip {
min-height: 44px;
padding: 9px 18px;
border-radius: 99px;
font-size: .85rem;
font-weight: 500;
border: 1px solid var(--marino-3);
color: var(--tx-tenue);
transition: border-color .18s,color .18s,background .18s
}
.chip:hover {
color: var(--crema);
border-color: var(--tx-tenue)
}
.chip[aria-pressed="true"] {
background: var(--rojo);
border-color: var(--rojo);
color: var(--crema)
}
.count {
font-size: .82rem;
color: var(--tx-tenue);
margin-bottom: 20px
}
/* ── Grilla ───────────────────────────────────────────────── */
.grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 16px;
/* Filtrar acorta la página, y cuando la página se acorta el
navegador recorta el scroll al nuevo máximo: la vista se movía
sola mientras el cliente seguía escribiendo. Reservando alto, el
documento no se desploma entre una tecla y la siguiente.
Medido: 248 px de salto entre teclas, ahora ninguno. */
min-height: 60vh
}
/* Sin resultados no hay nada que estabilizar, y el alto reservado
empujaba el "No encontramos eso" al fondo de una pantalla vacía. */
.grid:empty {
min-height: 0
}
@media(max-width:1040px) {
.grid {
grid-template-columns: repeat(3,1fr)
}
}
@media(max-width:800px) {
.grid {
grid-template-columns: repeat(2,1fr);
gap: 12px
}
}
.card {
background: var(--crema);
color: var(--tx-oscuro);
border-radius: var(--r);
overflow: hidden;
display: flex;
flex-direction: column;
/* Para que al crecer se dibuje encima de las vecinas y no quede
recortada por las tarjetas que vienen después en el flujo. */
position: relative;
transition: transform .2s,box-shadow .2s
}
/* La tarjeta crece al apuntarla, detrás de una consulta de capacidad.
En táctil no hay hover: el estado se queda pegado tras el tap y la
tarjeta quedaría agrandada hasta que toques otra.
El 1.03 no es timidez. La tarjeta contiene el botón "Agregar", y al
escalar el botón se desplaza: si crece demasiado, el objetivo huye
del cursor mientras lo apuntas (Fitts) y el borde puede salirse de
debajo del puntero, encendiendo y apagando el hover en bucle. A
1.03 el desplazamiento es de unos 3 px: se percibe, no estorba. */
@media (hover:hover) and (pointer:fine) {
.card:hover {
transform: translateY(-4px) scale(1.03);
box-shadow: 0 18px 40px rgba(0,0,0,.32);
z-index: 2
}
/* Barrido de brillo. Da la sensación premium del vidrio sin ninguno
de sus costos: no hay backdrop-filter ni transparencia bajo el
texto, así que el contraste de la tarjeta sigue siendo el mismo
14:1 de siempre. Es un gradiente que se mueve — la GPU ya sabe
componer transform y opacity baratos.
pointer-events:none es obligatorio: sin eso la capa se traga los
clics del botón "Agregar" y la tarjeta deja de funcionar. */
.card::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
transform: translateX(-120%);
opacity: 0;
transition: transform .6s ease,opacity .2s
}
.card:hover::after {
transform: translateX(120%);
opacity: 1
}
}
/* El bloque global solo acorta la transición: el salto de escala
seguiría ocurriendo, de golpe. Para sensibilidad vestibular lo que
molesta es el cambio de tamaño, así que acá se anula entero y se
deja la sombra como única señal de foco. */
@media (prefers-reduced-motion:reduce) {
.card:hover {
transform: none;
box-shadow: 0 18px 40px rgba(0,0,0,.32)
}
.card::after, .card:hover::after {
display: none
}
}
.card[data-in="true"] {
box-shadow: 0 0 0 2px var(--rojo)
}
.card__img {
height: 150px;
position: relative;
overflow: hidden;
display: grid;
/* La fila se fija al alto de la caja. Sin esto es una fila implícita
"auto", y el max-height:86% de la foto se resuelve contra ella en vez
de contra los 150px: la foto estira la fila, la fila agranda el tope
de la foto, y el overflow:hidden termina cortando la botella por
abajo. Con la fila fijada, el 86% vuelve a significar 86% de 150. */
grid-template-rows: 100%;
place-items: center;
background: radial-gradient(circle at 50% 38%,#FFF,var(--crema) 72%);
border-bottom: 1px solid var(--crema-2);
}
/* Se contiene por ancho Y alto: con solo height la imagen se desborda
y tapa el cuerpo de la tarjeta.
96/92 y no 86/82: las fotos ya vienen normalizadas con su propio aire
—el producto ocupa el 86% del lienzo— así que el margen que agregaba el
CSS se sumaba al de la imagen y dejaba la botella en el 73% de la caja.
Con esto sube al 82% y sigue sobrando holgura para una foto que suban
por el panel sin pasar por tools/preparar_fotos.py. */
.card__foto {
max-width: 92%;
max-height: 96%;
width: auto;
height: auto;
object-fit: contain;
}
.bottle {
width: 42px;
height: 98px;
border-radius: 5px 5px 9px 9px;
position: relative;
box-shadow: inset -6px 0 12px rgba(0,0,0,.16)
}
.bottle::before {
content: '';
position: absolute;
top: -23px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 25px;
border-radius: 2px;
background: inherit
}
.bottle::after {
content: '';
position: absolute;
inset: 24px 5px auto 5px;
height: 34px;
border-radius: 2px;
background: rgba(255,255,255,.55)
}
.badge {
position: absolute;
top: 10px;
right: 10px;
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--marino);
color: var(--crema);
display: grid;
place-content: center;
text-align: center;
line-height: 1;
box-shadow: 0 6px 16px rgba(0,7,37,.35);
}
/* Anillo punteado: el recurso del catálogo impreso del cliente.
Conecta la web con el material que ya reparten. */
.badge::before {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
border: 1.5px dotted rgba(247,241,227,.5);
pointer-events: none;
}
.badge b {
font-family: var(--display);
font-weight: 700;
font-size: 1.28rem;
letter-spacing: -.035em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.badge b i {
font-style: normal;
font-size: .52em;
letter-spacing: -.01em;
vertical-align: baseline;
position: relative;
top: -.45em;
margin-left: .5px;
}
/* Solo los precios de 100 a más bajan de tamaño. El catálogo es en su
mayoría de dos dígitos: no tiene sentido castigar el caso común para
que entre la excepción. */
.badge--3d b {
font-size: 1.04rem;
letter-spacing: -.05em
}
.badge--3d b i {
font-size: .5em
}
.badge span {
display: block;
font-size: .46rem;
font-weight: 500;
letter-spacing: .14em;
margin-top: 1px;
opacity: .65
}
.card[data-mode="combo"] .badge {
background: var(--rojo)
}
.card[data-mode="combo"] .badge::before {
border-color: rgba(247,241,227,.6)
}
.flag {
position: absolute;
top: 12px;
left: 0;
background: var(--rojo);
color: var(--crema);
font-size: .58rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
padding: 4px 10px 4px 12px;
border-radius: 0 99px 99px 0
}
.flag--promo {
top: auto !important;
bottom: 10px;
background: var(--marino)
}
.card__body {
padding: 12px 13px 13px;
display: flex;
flex-direction: column;
gap: 2px;
flex: 1
}
.card__cat {
font-size: .6rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--rojo)
}
.card__name {
font-size: .95rem;
font-weight: 600;
line-height: 1.3
}
.card__vol {
font-size: .78rem;
color: var(--tx-gris)
}
.seg {
display: flex;
gap: 3px;
margin-top: 9px;
padding: 3px;
background: var(--crema-2);
border-radius: 9px
}
.seg button {
flex: 1;
min-height: 44px;
padding: 5px 4px;
border-radius: 7px;
font-size: .71rem;
font-weight: 600;
white-space: nowrap;
color: var(--tx-gris);
transition: background .16s,color .16s
}
.seg button[aria-pressed="true"] {
background: var(--marino);
color: var(--crema)
}
.card[data-mode="combo"] .seg button[aria-pressed="true"] {
background: var(--rojo)
}
.seg__note {
font-size: .68rem;
color: var(--tx-gris);
margin-top: 5px;
min-height: 1.2em;
line-height: 1.25
}
.card__f {
margin-top: auto;
padding-top: 10px
}
.add {
width: 100%;
min-height: 44px;
border-radius: 10px;
background: transparent;
color: var(--marino);
border: 1.5px solid var(--marino);
font-size: .84rem;
font-weight: 600;
transition: background .16s,color .16s;
}
.add:hover {
background: var(--marino);
color: var(--crema)
}
.add:hover {
background: var(--rojo)
}
.qty {
display: flex;
align-items: center;
gap: 4px;
background: var(--marino);
border-radius: 10px;
padding: 3px
}
.qty button {
width: 44px;
min-height: 44px;
border-radius: 8px;
color: var(--crema);
font-size: 1.25rem;
transition: background .16s
}
.qty button:hover {
background: rgba(255,255,255,.14)
}
.qty span {
flex: 1;
text-align: center;
font-weight: 600;
font-size: .92rem;
color: var(--crema);
font-variant-numeric: tabular-nums
}
/* Agotado · Nielsen #1 visibilidad + #5 prevención de errores.
No se oculta el producto: se muestra su estado y se ofrece salida. */
.card--out {
opacity: .62
}
.card--out .card__img {
filter: grayscale(1)
}
.card--out .badge {
background: var(--tx-gris)
}
.out-tag {
position: absolute;
inset: auto 0 0 0;
background: var(--marino);
color: var(--crema);
font-size: .62rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
text-align: center;
padding: 6px
}
.avisar {
width: 100%;
min-height: var(--tap);
border-radius: 10px;
border: 1.5px solid var(--crema-2);
color: var(--tx-gris);
font-size: .82rem;
font-weight: 600;
transition: border-color .16s,color .16s
}
.avisar:hover {
border-color: var(--rojo);
color: var(--rojo)
}
.empty {
text-align: center;
color: var(--tx-tenue);
padding: 50px 20px
}
/* ── Cierre y footer ──────────────────────────────────────── */
.close {
text-align: center;
padding: 86px 0
}
.close__ico {
color: var(--tx-tenue);
margin: 0 auto 18px
}
.close__h {
font-size: clamp(2rem,5.4vw,3.4rem);
margin-bottom: 14px
}
.close__p {
color: var(--tx-tenue);
margin: 0 auto 30px
}
.foot {
border-top: 1px solid var(--marino-3);
padding: 34px 0 44px
}
.foot__in {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 22px
}
.foot__soc {
display: flex;
gap: 22px;
font-size: .87rem;
font-weight: 500;
color: var(--tx-tenue);
flex-wrap: wrap
}
.foot__soc a {
transition: color .18s
}
.foot__soc a:hover {
color: var(--crema)
}
.legal {
font-size: .74rem;
line-height: 1.7;
color: #6C7899;
max-width: 74ch
}
.legal--c {
margin-top: 12px
}
/* ── Barra de pedido · zona del pulgar ────────────────────── */
.orderbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
background: rgba(0,3,14,.98);
backdrop-filter: blur(18px);
border-top: 1px solid var(--marino-3);
transform: translateY(105%);
transition: transform .3s cubic-bezier(.2,.8,.3,1)
}
.orderbar[data-on="true"] {
transform: translateY(0)
}
.orderbar__in {
max-width: var(--max);
margin-inline: auto;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 28px
}
.peek {
display: flex;
align-items: center;
gap: 12px;
min-height: var(--tap);
padding: 6px 14px 6px 4px;
border-radius: 12px;
transition: background .18s
}
.peek:hover {
background: rgba(255,255,255,.06)
}
.peek__sum {
display: flex;
flex-direction: column;
line-height: 1.25;
text-align: left
}
.peek__sum b {
font-family: var(--display);
font-weight: 700;
font-size: 1.5rem;
color: var(--crema);
font-variant-numeric: tabular-nums;
/* En 390 px el total se partía en dos renglones: "S/" arriba y
"45.00" abajo. El número que decide la compra no se corta. */
white-space: nowrap
}
.peek__sum span {
font-size: .7rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tx-tenue)
}
.peek::after {
content: 'Ver mensaje';
font-size: .76rem;
font-weight: 500;
color: var(--tx-tenue);
white-space: nowrap;
}
.orderbar[data-peek="true"] .peek::after {
content: 'Ocultar'
}
.peek svg {
width: 16px;
height: 16px;
color: var(--tx-tenue);
transition: transform .25s;
order: 2
}
.orderbar[data-peek="true"] .peek svg {
transform: rotate(180deg)
}
#barWa {
margin-left: auto;
box-shadow: 0 6px 28px rgba(37,211,102,.42)
}
.preview {
max-height: 0;
overflow: hidden;
transition: max-height .32s ease
}
.orderbar[data-peek="true"] .preview {
max-height: min(28vh,240px);
overflow-y: auto
}
.preview__in {
max-width: var(--max);
margin-inline: auto;
padding: 16px 20px 4px;
cursor: pointer
}
.preview__lbl {
font-size: .66rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tx-tenue);
margin-bottom: 10px
}
.bubble {
user-select: none;
-webkit-user-select: none;
background: #0F3B2E;
border: 1px solid rgba(37,211,102,.24);
border-radius: 14px 14px 14px 4px;
padding: 15px 18px;
max-width: 460px;
font-size: .87rem;
line-height: 1.7;
white-space: pre-wrap;
color: #DEF5E9;
font-variant-numeric: tabular-nums
}
/* ── Deshacer e instalar ──────────────────────────────────── */
.toast {
position: fixed;
left: 50%;
bottom: calc(var(--bar-h) + 20px);
z-index: 95;
transform: translate(-50%,20px);
opacity: 0;
pointer-events: none;
display: flex;
align-items: center;
gap: 14px;
background: var(--crema);
color: var(--tx-oscuro);
padding: 12px 12px 12px 18px;
border-radius: 14px; /* no 99px: el texto puede ir en 2 líneas */
box-shadow: 0 12px 34px rgba(0,0,0,.42);
font-size: .85rem;
font-weight: 500;
line-height: 1.3;
transition: opacity .22s,transform .22s;
width: max-content;
max-width: min(360px,calc(100vw - 28px));
}
.toast > span {
flex: 1;
min-width: 0
}
.toast[data-on="true"] {
opacity: 1;
transform: translate(-50%,0);
pointer-events: auto
}
/* Deshacer es la red de seguridad del pedido (Nielsen #3) y solo vive
4 segundos: es el peor momento para fallar el toque. */
.toast button {
min-height: 44px;
padding: 6px 16px;
border-radius: 99px;
background: var(--marino);
color: var(--crema);
font-size: .82rem;
font-weight: 600;
flex-shrink: 0
}
.toast button:hover {
background: var(--rojo)
}
.install {
position: fixed;
left: 16px;
right: 16px;
bottom: calc(var(--bar-h) + 16px);
z-index: 88;
max-width: 440px;
margin-inline: auto;
display: none;
align-items: center;
gap: 12px;
background: var(--crema);
color: var(--tx-oscuro);
padding: 12px 12px 12px 20px;
border-radius: 16px;
box-shadow: 0 14px 40px rgba(0,0,0,.45);
font-size: .88rem;
font-weight: 500
}
.install[data-on="true"] {
display: flex
}
.install span {
flex: 1;
line-height: 1.35
}
#installBtn {
min-height: 40px;
padding: 8px 18px;
border-radius: 99px;
background: var(--marino);
color: var(--crema);
font-size: .84rem;
font-weight: 600
}
#installBtn:hover {
background: var(--rojo)
}
#installNo {
min-width: 36px;
min-height: 36px;
border-radius: 50%;
color: var(--tx-gris);
font-size: .9rem
}
.float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 70;
width: 62px;
height: 62px;
border-radius: 50%;
background: var(--wa);
color: #06231A;
display: grid;
place-items: center;
box-shadow: 0 10px 30px rgba(37,211,102,.4);
transition: transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .2s
}
.float:hover {
box-shadow: 0 14px 38px rgba(37,211,102,.55)
}
.float svg {
width: 32px;
height: 32px
}
body[data-cart="on"] .float,
body[data-hero="true"] .float {
opacity: 0;
pointer-events: none;
transform: scale(.7)
}
/* En celular la chapa se comía el 40% del ancho y tapaba la botella.
Un precio no debe pesar más que el producto que describe. */
@media(max-width:800px) {
.card__img {
height: 120px
}
.badge {
width: 54px;
height: 54px;
top: 8px;
right: 8px
}
.badge::before {
inset: 4px;
border-width: 1px
}
.badge b {
font-size: 1.02rem
}
.badge--3d b {
font-size: .82rem
}
.badge span {
font-size: .42rem;
margin-top: 0
}
.bottle {
width: 34px;
height: 78px
}
.bottle::before {
top: -18px;
width: 11px;
height: 20px
}
.bottle::after {
inset: 19px 4px auto 4px;
height: 26px
}
.flag {
font-size: .54rem;
padding: 3px 8px 3px 9px;
top: 9px
}
.flag--promo {
top: auto !important;
bottom: 8px
}
.card__name {
font-size: .88rem
}
.card__vol {
font-size: .74rem
}
.card__body {
padding: 11px 11px 12px
}
}
@media(max-width:620px) {
.orderbar__in {
padding: 10px 14px;
gap: 8px
}
.peek {
padding: 6px 8px 6px 2px;
gap: 6px
}
.peek::after {
display: none
}
.peek svg {
width: 22px;
height: 22px
}
.peek__sum b {
font-size: 1.3rem
}
.orderbar[data-peek="true"] .preview {
max-height: min(34vh,200px)
}
/* La barra ya se lleva un buen pedazo de una pantalla chica. La fila
del distrito se compacta para que sume lo mínimo sin bajar de los
44 px de objetivo táctil. */
.distrito {
gap: 10px;
padding: 6px 14px
}
.distrito__lbl {
font-size: .62rem;
letter-spacing: .08em
}
.orderbar__in {
padding: 10px 16px;
gap: 14px
}
.peek__sum b {
font-size: 1.3rem
}
#barWa {
padding: 15px 20px;
font-size: .95rem
}
.float {
width: 56px;
height: 56px;
right: 14px;
bottom: 14px
}
.btn--xl {
width: 100%
}
}
@media(prefers-reduced-motion:reduce) {
*, *::before, *::after {
animation: none !important;
transition-duration: .01ms !important
}
html {
scroll-behavior: auto
}
}
/* ── Ícono de WhatsApp ─────────────────────────────────────────
Al reemplazar por el SVG oficial de Meta (ver assets/whatsapp-LEEME.txt)
el archivo trae su propio verde. Sobre el botón verde se usa la versión
blanca; acá se fuerza el tamaño y se evita que herede color. */
img.i-wa {
width: 22px;
height: 22px;
flex-shrink: 0
}
.float img.i-wa {
width: 32px;
height: 32px
}
/* ── Logo oficial ──────────────────────────────────────────────
El archivo trae su propio fondo marino. Como el token --marino
ahora es el mismo color del logo, el rectángulo se funde con el
nav y no hace falta recortarlo. */
/* El isotipo es cuadrado y trae sus propias dimensiones en el SVG: se
fija por alto y el ancho lo sigue. */
.logo__img {
height: 44px;
width: 44px;
flex-shrink: 0;
display: block
}
.foot .logo__img {
height: 40px;
width: 40px
}
@media(max-width:520px) {
.logo__img {
height: 38px;
width: 38px
}
}
/* ══════════════════════════════════════════════════════════════
ZONAS DE REPARTO
══════════════════════════════════════════════════════════════ */
.zonas {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 12px
}
@media(max-width:860px) {
.zonas {
grid-template-columns: 1fr
}
}
.zona {
display: flex;
align-items: center;
gap: 14px;
background: var(--marino);
border: 1px solid var(--marino-3);
border-radius: 12px;
padding: 16px 18px;
}
.zona__n {
font-size: .95rem;
font-weight: 600;
flex: 1;
min-width: 0
}
.zona__t {
display: block;
font-size: .76rem;
font-weight: 400;
color: var(--tx-tenue);
margin-top: 2px
}
.zona__c {
font-family: var(--display);
font-weight: 700;
font-size: 1.15rem;
color: var(--crema);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.zona__c--free {
font-family: var(--sans);
font-size: .7rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--crema);
background: var(--rojo);
padding: 5px 11px;
border-radius: 99px;
}
.zonas__nota {
margin-top: 16px;
font-size: .85rem;
color: var(--tx-tenue)
}
/* ══════════════════════════════════════════════════════════════
MÉTODOS DE PAGO
══════════════════════════════════════════════════════════════ */
.sec--pagos {
padding: 44px 0;
text-align: center
}
.eyebrow--c {
margin-bottom: 16px
}
.pagos {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center
}
.pago {
display: inline-flex;
align-items: center;
gap: 9px;
border: 1px solid var(--marino-3);
border-radius: 10px;
padding: 11px 18px;
font-size: .88rem;
font-weight: 500;
color: var(--tx-claro);
}
/* SLOT: reemplazar por los logos oficiales que entregue el cliente.
*/
.pago__logo {
height: 20px;
width: auto;
display: block
}
/* ══════════════════════════════════════════════════════════════
ANIMACIONES DE ENTRADA
Aparición suave al desplazar. Solo transform y opacity: no
provocan recálculo de diseño, así que no cuestan velocidad.
══════════════════════════════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
will-change: opacity, transform;
}
.reveal[data-visto="true"] {
opacity: 1;
transform: none;
will-change: auto
}
@media(prefers-reduced-motion:reduce) {
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important
}
}
/* ══════════════════════════════════════════════════════════════
LOGOTIPO DEL HERO
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
LOGO DEL HERO
El kit de marca trae el logo en azul y en marfil. Sobre la chapa
crema va el azul, apoyado directo sobre el fondo: es un vector con
transparencia, no necesita placa ni recuadro.
══════════════════════════════════════════════════════════════ */
/* Con el elemento delante: `.cartel h1` de arriba pesa más que una
clase sola y le devolvería su margen de titular de texto. */
.cartel h1.cartel__marca {
margin: 0 auto;
line-height: 0
}
.cartel__marca img {
width: 100%;
max-width: 400px;
height: auto;
margin-inline: auto;
/* El ancho y el alto van también en el HTML: la imagen manda el
alto del hero y sin reservarlo el titular salta al cargar. */
}
/* Si el archivo no carga, vuelve el titular de texto. */
.cartel__marca-txt {
display: block;
font-size: clamp(3rem,8.4vw,5.6rem)
}
/* ══════════════════════════════════════════════════════════════
CARRUSEL DE BANNERS
Desplazamiento nativo con anclaje: sin librerías, funciona con el
dedo y con teclado, y no bloquea el scroll de la página.
══════════════════════════════════════════════════════════════ */
.banners {
/* Las piezas del cliente son casi cuadradas (4:3). A todo el ancho
de la página un solo banner medía 885 px de alto y se comía la
pantalla entera: el cliente tenía que pasar dos banners a scroll
antes de ver un producto. Acotado, se lee como lo que es —un
afiche— y entran los dos con el catálogo asomando debajo. */
max-width: 560px;
margin-inline: auto
}
/* El segundo va pegado al primero. Solo la separación justa para que se
lean como dos pistas y no como una sola que se partió. */
.banners--abajo {
margin-top: 18px
}
.carrusel {
position: relative;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-radius: var(--r-lg);
}
.carrusel::-webkit-scrollbar {
display: none
}
.carrusel__pista {
display: flex
}
.banner {
flex: 0 0 100%;
scroll-snap-align: center;
display: block;
border-radius: var(--r-lg);
overflow: hidden;
}
.banner img {
width: 100%;
height: auto;
display: block
}
/* ── Flechas ──────────────────────────────────────────────────
El deslizamiento con el dedo ya funcionaba, pero en escritorio no
hay dedo y los puntos son un objetivo chico para "la siguiente".
Las flechas van sobre la foto, que es donde se las busca (Jakob),
y son marinas y no rojas ni verdes: el rojo es de la marca y el
verde está reservado para WhatsApp. */
.flecha {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(0,6,37,.72);
border: 1px solid rgba(247,241,227,.3);
color: var(--crema);
backdrop-filter: blur(6px);
transition: background .18s, opacity .18s;
z-index: 2
}
.flecha:hover {
background: rgba(0,6,37,.92)
}
/* En el extremo se apaga, no se quita: si desapareciera, la otra
flecha cambiaría de sitio y habría que volver a buscarla. */
.flecha:disabled {
opacity: .3;
cursor: default
}
.flecha svg {
width: 20px;
height: 20px
}
.flecha--ant {
left: 10px
}
.flecha--sig {
right: 10px
}
.carrusel__puntos {
display: flex;
justify-content: center;
margin-top: 4px
}
/* El punto que se ve mide 9 px; el que se toca, 44. Se separa el
dibujo del área táctil con un pseudoelemento: agrandar el círculo
habría convertido los puntos en botones y le habrían competido la
atención al banner, que es lo que hay que mirar. */
.punto {
width: 44px;
height: 44px;
padding: 0;
background: none;
display: grid;
place-items: center
}
.punto::before {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--marino-3);
transition: background .2s, transform .2s
}
.punto[aria-selected="true"]::before {
background: var(--rojo);
transform: scale(1.35)
}
/* ══════════════════════════════════════════════════════════════
SELECTOR DE DISTRITO
El costo de envío entra en el total antes de enviar el pedido:
el cliente no se entera del cargo recién por WhatsApp.
══════════════════════════════════════════════════════════════ */
/* Vive en la barra de pedido, fuera de la vista previa: el costo del
delivery entra en el total y el cliente tiene que poder verlo sin
desplegar nada. */
/* El fondo va a sangre y el contenido queda alineado con el resto de la
barra. Antes la caja medía `max-width: var(--max)` con fondo propio:
con la vista previa abierta se leía como su continuación, pero al
cerrarla quedaba un rectángulo más claro flotando dentro de la barra
negra, con dos bordes verticales que no coincidían con nada.
El relleno lateral reproduce el centrado del contenedor de al lado sin
necesitar un envoltorio extra: 20 px pegado a los bordes, y a partir
de --max lo que sobre repartido a los dos lados. */
.distrito {
display: flex;
align-items: center;
gap: 14px;
padding-block: 9px;
padding-inline: max(20px, calc((100% - var(--max)) / 2 + 20px));
background: rgba(247,241,227,.05);
border-bottom: 1px solid var(--marino-3);
}
/* Mientras no eligió, el total todavía no es el total. Se señala sin
bloquear el envío: Nielsen #1 sin quitarle el control (#3). */
.distrito[data-pendiente="true"] {
background: rgba(200,16,46,.10)
}
.distrito[data-pendiente="true"] .distrito__lbl {
color: var(--crema)
}
.distrito__lbl {
font-size: .7rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tx-tenue);
white-space: nowrap;
}
/* Un nombre de distrito no necesita 1180 px. Se le pone tope y en
escritorio queda del ancho de lo que tiene que mostrar; en móvil el
flex: 1 lo estira a lo que haya. */
.distrito select {
flex: 1;
max-width: 440px;
min-height: 40px;
min-width: 0;
background: var(--marino);
border: 1px solid var(--marino-3);
border-radius: 9px;
padding: 8px 11px;
color: var(--tx-claro);
font-family: var(--sans);
font-size: .9rem;
}
/* El borde de 1px que había como única señal de foco no alcanza:
es demasiado sutil para el control que define el total del pedido.
Vuelve el outline de 3px del resto del sitio. */
.distrito select:focus-visible {
outline: 3px solid var(--rojo);
outline-offset: 3px;
border-color: var(--rojo)
}
/* ══════════════════════════════════════════════════════════════
REDES SOCIALES
══════════════════════════════════════════════════════════════ */
.foot__soc a {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px
}
.i-soc {
width: 19px;
height: 19px;
flex-shrink: 0
}
/* SLOT: logos de pago. Cuando lleguen los archivos oficiales,
el JS los inserta como ![]()
*/
.pago__logo {
height: 20px;
width: auto;
display: block
}
.pago--img {
padding: 9px 16px
}
/* ══════════════════════════════════════════════════════════════
VERIFICACIÓN DE EDAD · Ley N° 28681
Requisito regulatorio del cliente. El contenido se rinde igual en
el HTML para que Google lo indexe: la pantalla la pone JavaScript.
══════════════════════════════════════════════════════════════ */
.edad {
position: fixed;
inset: 0;
z-index: 200;
display: none;
place-items: center;
padding: 24px;
background: rgba(0,7,37,.94);
backdrop-filter: blur(8px);
}
.edad[data-on="true"] {
display: grid
}
.edad__box {
background: var(--crema);
color: var(--tx-oscuro);
border-radius: 20px;
padding: clamp(28px,5vw,42px);
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.edad__logo {
height: 50px;
width: auto;
margin: 0 auto 20px;
display: block
}
.edad__box h2 {
font-size: clamp(1.45rem,4.4vw,1.9rem);
margin-bottom: 12px;
color: var(--tx-oscuro)
}
.edad__box p {
color: var(--tx-gris);
font-size: .9rem;
margin-bottom: 22px;
line-height: 1.55
}
.edad__btns {
display: flex;
flex-direction: column;
gap: 9px
}
.edad__btns .btn {
width: 100%
}
/* El verde sigue reservado a WhatsApp: acá manda el marino de marca. */
.btn--marino {
background: var(--marino);
color: var(--crema)
}
.btn--marino:hover {
background: var(--rojo);
transform: translateY(-2px)
}
.edad__legal {
font-size: .75rem !important;
color: var(--tx-gris);
margin: 16px 0 0 !important;
padding-top: 14px;
border-top: 1px solid var(--crema-2);
}
.edad__box--no h2 {
color: var(--rojo)
}
body[data-edad="pendiente"] {
overflow: hidden
}
/* ══════════════════════════════════════════════════════════════
AJUSTES DE MÓVIL
Van al final a propósito: estas reglas deben ganar sobre las
definiciones base, y en CSS con igual especificidad manda la
última. Ponerlas antes fue el error que desbordaba el nav.
══════════════════════════════════════════════════════════════ */
@media(max-width:860px) {
.nav__in {
gap: 14px
}
/* La barra queda con lo que pidió el cliente: logo y hamburguesa.
Todo lo demás baja al panel. */
.burger {
display: flex
}
/* El panel se posiciona contra el .nav, que ya es sticky y por eso
hace de referencia: cuelga del borde de abajo de la barra. */
.nav__menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 10px;
margin: 0;
padding: 12px 20px 18px;
/* Opaco, no traslúcido como el nav: detrás pasa el titular del
hero y con cualquier transparencia el contraste del menú deja
de ser el que se calculó (WCAG 1.4.3). */
background: var(--marino);
border-bottom: 1px solid var(--marino-3);
box-shadow: 0 18px 40px rgba(0,0,0,.45);
animation: bajaMenu .18s ease-out
}
/* El estado lo manda el propio botón: no hay una clase que pueda
quedar desfasada del aria-expanded que lee el lector de pantalla. */
.burger[aria-expanded="true"] + .nav__menu {
display: flex
}
/* El buscador primero: es lo que vino a reemplazar al sello y lo
que más se usa.
Estuvo escondido un tiempo porque escribir acá no mostraba nada:
el propio panel tapa la grilla. No era el sitio lo que estaba
mal, era lo que pasaba después. Ahora, a la primera letra, el
panel se cierra y el catálogo queda debajo con el cursor puesto
en su buscador — el mismo traspaso que en escritorio. */
.search--nav {
order: -1;
max-width: none;
min-height: 48px
}
.nav__links {
flex-direction: column;
gap: 0;
font-size: 1rem
}
.nav__links a {
min-height: 52px;
color: var(--crema)
}
/* Separador entre opciones, nunca colgando de la última. */
.nav__links a + a {
border-top: 1px solid var(--marino-3)
}
/* En móvil el cliente pidió solo el logo y el catálogo.
Va con el elemento delante: `.nav__links a` de arriba pesa más
que una clase sola y le devolvía el display:inline-flex. */
.nav__links a.nav__link--esc {
display: none
}
}
@keyframes bajaMenu {
from {
opacity: 0;
transform: translateY(-8px)
}
to {
opacity: 1;
transform: none
}
}
@media(prefers-reduced-motion:reduce) {
.nav__menu {
animation: none
}
}
/* Ninguna fila puede ensanchar la página: un desborde horizontal
infla el viewport y descoloca todo lo que esté fijo. */
html, body {
overflow-x: clip;
max-width: 100%
}
/* El pop-up de edad se dimensiona contra la pantalla real */
.edad {
padding: 16px;
overflow-x: hidden
}
.edad__box {
max-width: min(400px, calc(100vw - 32px));
box-sizing: border-box
}
/* Sin esto el texto largo del botón fuerza un ancho mínimo mayor
que la caja y la empuja fuera de pantalla. */
.edad__btns .btn {
white-space: normal;
padding-inline: 18px;
text-align: center
}
@media(max-width:420px) {
.edad__box {
padding: 26px 20px
}
.edad__box h2 {
font-size: 1.35rem
}
.edad__logo {
height: 42px
}
}