/*
* Ron Potosí storefront stylesheet.
*
* 00 is the design's fuentes.css (self-hosted fonts). 01-41 are the sections of the design's
* main.css, split without changes and imported in the original order because later sections
* override earlier ones; 42 and 43 are its lenis.css and loro-vuelo.css, loaded after it.
* Keep new rules in the module they belong to and never reorder; our own screens go after
* the design (44 onwards).
*//* Tipografías de respaldo y de apoyo, alojadas en el sitio (antes se pedían a Google Fonts). Subconjuntos latin y latin-ext. */
@font-face {
font-family: 'DM Serif Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/dm-serif-display-400-italica-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Serif Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/dm-serif-display-400-italica-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Serif Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/dm-serif-display-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Serif Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/dm-serif-display-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Freehand';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/freehand-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Great Vibes';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/great-vibes-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Great Vibes';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/great-vibes-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'League Spartan';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/google/league-spartan-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'League Spartan';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/google/league-spartan-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'League Spartan';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/google/league-spartan-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'League Spartan';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/google/league-spartan-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/assets/fonts/google/oswald-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/assets/fonts/google/oswald-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/google/oswald-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/google/oswald-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/google/oswald-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/google/oswald-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/google/oswald-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/google/oswald-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/google/playfair-display-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/google/playfair-display-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Questrial';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/questrial-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Questrial';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/questrial-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/source-serif-4-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/google/source-serif-4-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/google/source-serif-4-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/google/source-serif-4-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Ron Potosí · hoja de estilos principal
Tipografías: Silvex Editorial, Advercase y Moderat Condensed
Ji Group, 2026 */
@font-face { font-family: "Silvex Editorial"; src: url("/assets/fonts/SilvexEditorial-Thin.woff2") format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Silvex Editorial"; src: url("/assets/fonts/SilvexEditorial-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silvex Editorial"; src: url("/assets/fonts/SilvexEditorial-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Silvex Editorial"; src: url("/assets/fonts/SilvexEditorial-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Silvex Editorial"; src: url("/assets/fonts/SilvexEditorial-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
/* Advercase: archivos de prueba (sin acentos, licencia no comercial).
Pendiente: sustituirlos por la versión con licencia en /assets/fonts/ antes de publicar. */
@font-face { font-family: "Advercase"; src: url("/assets/fonts/advercase-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Advercase"; src: url("/assets/fonts/advercase-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Advercase"; src: url("/assets/fonts/advercase-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Advercase"; src: url("/assets/fonts/advercase-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Moderat Condensed"; src: url("/assets/fonts/Moderat-Condensed-Thin.woff2") format("woff2"); font-weight: 200; font-display: swap; }
:root {
--papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
--negro: #121110;
--negro-suave: #1d1b19;
--carbon: #26231f;
--oro: #c9a227;
--oro-claro: #e3c15c;
--oro-profundo: #9a7a1a;
--crema: #f3e8cc;
--crema-oscura: #eaddbc;
/* Paleta retro: sunshine, cream, carrot, forest, tomato, kiwi */
--verde-jade: #19532b; /* forest green: fondos verdes */
--verde-loro: #19532b; /* forest green: texto verde */
--verde-claro: #9abc04; /* kiwi */
--flame: #f86015; /* crisp carrot: línea deslizante, chevron, acentos */
--ambar: #d42518; /* tomato burst: texto de acento */
--turquesa: #19532b; /* forest green: ancla profunda (headers, banda) */
--niagara: #9abc04; /* kiwi */
--island: #9abc04; /* kiwi */
--coral: #d42518; /* tomato burst: CTA sólidos, Tienda */
--pink: #f86015;
--amarillo: #ffca26; /* sunshine: navbar sólida */
--hazelnut: #cfb095;
--gris-texto: #5c564d;
--serif: "Silvex Editorial", "Playfair Display", "Georgia", serif;
--cond: "Moderat", "Oswald", "Arial Narrow", sans-serif;
--vino: #8f2c1c;
--display: "Advercase", "DM Serif Display", "League Spartan", "Oswald", serif;
--moderat: "Moderat Condensed", "Oswald", sans-serif;
--script: "Great Vibes", cursive;
--texto: "Source Serif 4", "Georgia", serif;
--ancho: 1200px;
--transicion: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Sin scroll horizontal jamás: recorta lo que asome (bleeds, blobs)
sin crear scrollport; el sticky del mapa sigue funcionando. */
html, body { overflow-x: clip; }
body {
font-family: var(--texto);
background: var(--crema);
background-image: var(--papel);
background-size: 240px 240px;
color: var(--negro);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
/* ---------- Tipografía: display condensada bold ---------- */
h1, h2, h3, .display {
font-family: var(--display);
font-weight: 700;
line-height: 0.96;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.age-gate__caja h2 { font-family: var(--serif); font-weight: 700; line-height: 1.15; }
.etiqueta {
font-family: var(--cond);
text-transform: uppercase;
letter-spacing: 0.32em;
font-size: 0.78rem;
font-weight: 500;
color: #806410;
}
.seccion--oscura .etiqueta, .seccion--carbon .etiqueta, .hero .etiqueta, .age-gate .etiqueta { color: var(--oro); }
.script { font-family: var(--script); font-weight: 400; }
/* ---------- Botones: llenado líquido al hover ----------
Adaptado de Uiverse.io by cssbuttons-io (MIT) al sistema Ron Potosí. */
.btn {
--btn-fill: var(--amarillo);
--btn-texto-hover: var(--negro);
--btn-borde: var(--amarillo);
display: inline-block;
font-family: var(--cond);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.72rem;
padding: 11px 26px;
border: 2px solid var(--btn-borde);
border-radius: 12px;
color: var(--amarillo);
background: transparent;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
box-shadow: 3px 4px 0 -1px var(--btn-borde);
transition: color 0.25s ease-in, border-color 0.25s ease-in, box-shadow 0.25s ease-in, transform 0.15s ease;
}
.btn:active { transform: translate(2px, 3px); box-shadow: 0 0 0 -1px var(--btn-borde); }
.btn::before,
.btn::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 140%;
height: 180%;
transform: translateX(-50%) scaleY(1) scaleX(1.25);
border-radius: 50%;
z-index: -1;
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
background-color: rgba(18, 17, 16, 0.05);
}
.btn::after {
left: 55%;
top: 180%;
width: 160%;
height: 190%;
transform: translateX(-50%) scaleY(1) scaleX(1.45);
background-color: var(--btn-fill);
}
.btn:hover { color: var(--btn-texto-hover); border-color: var(--btn-fill); --btn-borde: var(--btn-fill); }
.btn:hover::before {
top: -35%;
background-color: var(--btn-fill);
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
.btn:hover::after {
top: -45%;
background-color: var(--btn-fill);
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
/* Variantes: cada una llena con su color */
.btn--solido { background: var(--amarillo); color: var(--negro); --btn-fill: var(--coral); --btn-texto-hover: #fff; --btn-borde: var(--amarillo); }
.btn--oscuro { color: var(--verde-jade); --btn-fill: var(--verde-jade); --btn-texto-hover: var(--crema); --btn-borde: var(--verde-jade); }
.btn--verde { color: var(--verde-jade); --btn-fill: var(--verde-jade); --btn-texto-hover: var(--crema); --btn-borde: var(--verde-jade); }
/* usada en cócteles y en la receta; no existía y heredaba el amarillo del botón base */
.btn--postal { color: var(--negro); --btn-fill: var(--negro); --btn-texto-hover: var(--crema); --btn-borde: var(--negro); }
/* sobre la foto oscura de experiencias el botón va en blanco, como los filetes y el titular */
.exp-pin__cta .btn { color: #fff; border-color: #fff; --btn-borde: #fff; --btn-fill: #fff; --btn-texto-hover: var(--verde-jade); }
/* Botones crema sobre fondos de color: llenan con crema y el texto pasa a negro */
.seccion--verde .btn, .seccion--turquesa .btn { --btn-fill: var(--crema); --btn-texto-hover: var(--negro); --btn-borde: var(--crema); color: var(--crema); border-color: var(--crema); }
/* sobre la foto oscura de "Encuentra" y en el panel de cata, el botón va en crema */
.prod-encuentra .btn, .cata-panel .btn { --btn-fill: var(--crema); --btn-texto-hover: var(--negro); --btn-borde: var(--crema); color: var(--crema); border-color: var(--crema); }
/* el botón sólido de "Encuentra Ron Potosí" conserva su texto oscuro sobre amarillo (el contorno crema de arriba es para botones de línea) */
.prod-encuentra .btn--solido { background: var(--amarillo); color: var(--negro); border-color: var(--amarillo); --btn-borde: var(--amarillo); --btn-fill: var(--coral); --btn-texto-hover: #fff; }
.prod-encuentra .btn--solido:hover { color: #fff; border-color: var(--coral); }
/* ---------- Header: invisible arriba, color animado al deslizar ---------- */
:root {
--papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); --nav-solida: var(--amarillo); } /* Primrose Yellow (Pantone) */
.header {
position: fixed;
inset: 0 0 auto 0;
z-index: 900;
background: transparent;
transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.35s ease;
}
.header.solido {
background: var(--nav-solida);
box-shadow: 0 2px 18px rgba(18, 17, 16, 0.16);
}
/* Con el mega abierto el header toma el mismo crema del panel y el texto pasa a oscuro,
para que los dos se lean como un solo bloque (clase submenu-open en el body). */
/* Mismo crema y mismo grano de papel que el panel. El grano va anclado a la ventana
(attachment fixed) en los dos, para que el patrón siga continuo de la barra al panel
y no se note la costura entre uno y otro. */
body.submenu-open .header {
background-color: var(--crema);
background-image: var(--papel);
background-size: 240px 240px;
background-attachment: fixed;
box-shadow: none;
}
.nav .mega { background-attachment: fixed; }
/* Sólo los rótulos del nav, no lo que va dentro del panel: el texto de las tarjetas
descansa sobre foto oscura y tiene que seguir en crema. */
body.submenu-open .header .nav > a,
body.submenu-open .header .nav .mega-toggle,
body.submenu-open .header .carrito-btn,
body.submenu-open .header .hamburguesa { color: var(--negro); text-shadow: none; }
body.submenu-open .header .nav .nav__tienda { background: var(--verde-jade); border-color: var(--verde-jade); color: var(--crema); }
body.submenu-open .header .nav__item--mega.abierto > .mega-toggle { color: var(--coral); }
/* hover de los rótulos con el panel abierto: el modo sólido los ponía en blanco sobre crema */
body.submenu-open .header .nav > a:hover,
body.submenu-open .header .nav .mega-toggle:hover { color: var(--coral); }
/* Color de las tarjetas blindado: ".header.solido .nav a" (texto negro) le ganaba a
".nav .mega__carta" en cuanto el header entraba en modo sólido al bajar. */
.header .nav .mega .mega__carta { color: #fff; } /* texto en blanco */
.header .nav .mega .mega__carta--color { color: #fff; }
.header .nav .mega .mega__carta--amarilla { color: #fff; } /* también la tarjeta amarilla */
.header .nav .mega .mega__carta:hover { color: #fff; }
.header .nav .mega .mega__carta--color:hover { color: #fff; }
.header .nav .mega .mega__carta--amarilla:hover { color: #fff; }
/* Logo en dos versiones: blanca arriba, negra sobre el color */
.header .logo-header--oscuro { display: none; }
.header.solido .logo-header--claro,
body.submenu-open .header .logo-header--claro { display: none; }
.header.solido .logo-header--oscuro,
body.submenu-open .header .logo-header--oscuro { display: block !important; }
.header__barra {
max-width: 1360px;
margin: 0 auto;
padding: 14px 28px 0;
height: 108px;
display: flex;
align-items: center;
gap: 32px;
transition: height 0.45s ease, padding 0.45s ease;
}
.header.solido .header__barra { height: 62px; padding-top: 0; }
.header__logo {
font-family: var(--serif);
font-size: 1.45rem;
font-weight: 700;
color: var(--oro-claro);
letter-spacing: 0.06em;
white-space: nowrap;
}
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; align-self: stretch; }
.nav a {
font-family: "Advercase", "DM Serif Display", serif;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
text-shadow: 0 1px 8px rgba(18, 17, 16, 0.35);
padding: 10px 14px;
transition: color var(--transicion);
}
.header.solido .nav a { color: var(--negro); text-shadow: none; }
.nav a:hover, .nav a.activo { color: var(--oro-claro); }
.header.solido .nav a:hover, .header.solido .nav a.activo { color: #fff; }
.nav .nav__tienda {
background: var(--verde-jade);
border: 1px solid var(--verde-jade);
color: var(--crema);
padding-top: 7px;
padding-bottom: 7px;
margin-left: 10px;
text-shadow: none;
}
.header.solido .nav .nav__tienda { background: var(--verde-jade); border-color: var(--verde-jade); color: var(--crema); }
.carrito-btn {
position: relative;
background: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 1.15rem;
padding: 8px;
}
.carrito-btn .badge {
position: absolute;
top: -7px; right: -4px;
background: var(--oro);
color: var(--negro);
font-family: var(--cond);
font-size: 0.68rem;
min-width: 17px;
height: 17px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.hamburguesa {
display: none;
background: none;
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
}
.header.solido .carrito-btn, .header.solido .hamburguesa { color: var(--negro); }
/* ---------- Mega menú ----------
Panel absoluto a todo lo ancho bajo el header, con opacity/visibility y transition .3s;
rejilla de 4 columnas con gap 20px y dos filas de 128px; tarjeta de radio 28px y padding 20px;
velo rgba(0,0,0,.45) sobre la foto y blur al abrir; botella absoluta con max-height 115%
para que sobresalga. Se abre con clic, no con hover. */
.nav__item--mega { position: static; align-self: stretch; display: flex; align-items: center; }
.mega-toggle {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: transparent;
border: 0;
padding: 0;
font: inherit;
color: inherit;
text-transform: inherit;
cursor: pointer;
}
.mega-toggle__icono { display: block; width: 11px; height: 7px; transition: 0.3s ease-in-out; }
.mega-toggle__icono path { fill: currentColor; transition: 0.3s ease-in-out; }
.nav__item--mega.abierto > .mega-toggle { color: var(--coral); }
.nav__item--mega.abierto .mega-toggle__icono { transform: rotate(180deg); }
.mega-toggle:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; border-radius: 1.75rem; }
.mega {
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 1;
background: var(--crema);
opacity: 0;
visibility: hidden;
transition: 0.3s ease-in-out;
padding: 3.875rem 0 3.75rem;
overflow-y: hidden;
/* sin box-shadow: su difuminado se asomaba 16px sobre la barra y marcaba una costura */
}
.nav__item--mega.abierto .mega { opacity: 1; visibility: visible; }
.mega__rejilla {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); /* minmax(0): con 1fr a secas los títulos largos ensanchaban su columna (mega de Cócteles) */
grid-template-rows: repeat(2, 128px);
gap: 20px 48px;
max-width: var(--ancho);
margin: 0 auto;
padding: 0 clamp(20px, 3.2vw, 40px);
}
/* La tarjeta no recorta: recorta la caja interna. Así la botella, que cuelga del enlace
y no de la caja, puede sobresalir por arriba (la imagen es hermana del recuadro, no hija). */
.nav .mega__carta {
grid-row: span 2;
position: relative;
display: block;
height: 100%;
color: var(--crema);
text-decoration: none;
}
.nav .mega__caja {
position: relative;
display: flex;
flex-direction: column;
border-radius: 28px;
padding: 20px;
overflow: hidden;
height: 100%;
background: inherit;
/* Contexto de apilamiento propio: sin esto, el velo de hover (z-index 3) competía con la
botella (z-index 2) y se le pintaba encima, aclarando sólo la parte de la botella que
queda dentro de la tarjeta. Eso era el "cuadro blanco" alrededor de la botella. */
isolation: isolate;
}
/* las tarjetas partidas ocupan una sola fila */
.nav .mega__carta--media { grid-row: span 1; }
.mega__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega__fondo-caja { position: absolute; inset: 0; overflow: hidden; }
.mega__fondo-caja::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
pointer-events: none;
z-index: 1;
}
.nav__item--mega.abierto .mega__carta--foto .mega__fondo { filter: blur(3.18px); }
/* la botella sale por arriba de la tarjeta: es lo que le da el truco visual */
.mega__botella {
position: absolute;
bottom: -10px;
right: -38px;
max-height: 88%;
max-width: 112px;
object-fit: contain;
z-index: 2;
}
/* recortes de cócteles: vasos más anchos y menos altos que las botellas */
.mega__botella--coctel { max-height: 78%; max-width: 132px; right: -30px; bottom: -8px; }
/* Experiencias: timbres en lugar de botella, girados como en las postales */
.mega__botella--timbre { max-height: 46%; max-width: 104px; right: -26px; bottom: 14px; transform: rotate(9deg); filter: drop-shadow(0 6px 12px rgba(18, 17, 16, 0.3)); }
.nav .mega__etiqueta {
position: relative;
z-index: 1;
font-family: var(--moderat);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(0.72rem, 0.95vw, 0.85rem);
letter-spacing: 0.1em;
line-height: normal;
margin-bottom: 1rem;
color: inherit;
}
.mega__titulo-caja {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.nav .mega__titulo {
font-family: var(--moderat);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(1.25rem, 2.2vw, 1.85rem); /* tope 1.85rem: "EXPERIENCIAS" cabe en una línea en la tarjeta de 176px */
line-height: 0.92;
color: inherit;
}
.mega__flecha { width: 30px; height: 30px; flex: none; }
.mega__flecha path { fill: currentColor; }
/* tarjetas partidas: misma disposición que las altas (título arriba a la izquierda, flecha abajo a la izquierda, 20px de padding) */
.mega__carta--media .mega__titulo-caja { flex-direction: column; justify-content: space-between; height: 100%; }
.mega__carta--media .mega__titulo { font-size: clamp(1.2rem, 2vw, 1.7rem); }
/* tarjetas sólidas, sin foto */
.nav .mega__carta--color .mega__caja { background: var(--coral); }
.nav .mega__carta--color { color: #fff; }
.nav .mega__carta--amarilla { color: #fff; }
.nav .mega__carta--amarilla .mega__caja { background: var(--amarillo); }
.nav .mega__carta--verde .mega__caja { background: var(--verde-jade); }
.mega__caja::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.1);
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 3;
pointer-events: none;
}
.mega__carta:hover .mega__caja::after { opacity: 1; }
/* pie del panel: redes sociales */
.mega__pie {
display: flex;
gap: 1.5rem;
align-items: center;
margin: 3.625rem auto 0;
max-width: var(--ancho);
padding: 0 clamp(20px, 3.2vw, 40px);
}
.mega__pie-titulo {
font-family: var(--moderat);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(1.6rem, 3.1vw, 2.55rem);
line-height: 0.95;
color: var(--negro);
}
.mega__pie-redes { display: flex; gap: 0.5rem; align-items: center; }
.nav .mega__pie-redes a {
width: 44px; height: 44px;
display: grid; place-items: center;
border: 0;
border-radius: 50%;
background: var(--verde-jade);
color: var(--crema);
padding: 0;
line-height: 0;
transition: background 0.3s ease-in-out;
}
.mega__pie-redes svg { width: 21px; height: 21px; display: block; }
.mega__pie-redes svg path { transition: 0.3s ease-in-out; }
.mega__pie-redes a:hover { border-color: var(--coral); }
.mega__pie-redes a:hover svg path { fill: var(--crema); }
/* íconos siempre crema: la regla de enlaces negros del encabezado sólido tiene más peso y los oscurecía */
.header .nav .mega__pie-redes a, .header.solido .nav .mega__pie-redes a { color: var(--crema); text-shadow: none; }
.header .nav .mega__pie-redes a:hover, .header.solido .nav .mega__pie-redes a:hover { background: var(--coral); color: var(--crema); }
@media (max-width: 1000px) {
.mega { padding: 2.25rem 0 2.5rem; }
.mega__rejilla { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 112px); gap: 12px; }
.mega__pie { margin-top: 2rem; }
.mega__botella { max-width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
.mega, .mega-toggle__icono, .mega__caja::after { transition: none; }
}
/* en móvil el panel no aplica: ahí manda el menú lateral */
@media (max-width: 960px) {
.mega { display: none; }
.nav__item--mega { align-self: auto; }
}
/* ---------- Hero ---------- */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
background:
radial-gradient(ellipse at 50% 120%, rgba(201, 162, 39, 0.22), transparent 55%),
radial-gradient(ellipse at 50% -20%, rgba(30, 110, 70, 0.18), transparent 60%),
var(--negro);
color: var(--crema);
overflow: hidden;
padding: 120px 24px 80px;
}
.hero__marco {
position: absolute;
inset: 22px;
border: 1px solid rgba(201, 162, 39, 0.35);
pointer-events: none;
}
.hero__contenido { position: relative; max-width: 900px; }
.hero .script { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--oro-claro); }
.hero h1 {
font-family: "Advercase", "DM Serif Display", "Playfair Display", serif;
font-weight: 400;
font-size: clamp(3.4rem, 10vw, 8.5rem);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--crema);
margin: 8px 0 18px;
}
.hero h1 em { font-style: italic; color: var(--crema); }
.hero p.lema {
font-family: var(--moderat);
font-weight: 200;
text-transform: uppercase;
letter-spacing: 0.42em;
font-size: clamp(0.7rem, 1.6vw, 0.95rem);
color: rgba(247, 242, 231, 0.85);
margin-bottom: 38px;
}
.hero__acciones { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
/* ---------- Secciones ---------- */
.seccion { padding: clamp(100px, 9vw, 150px) 0; position: relative; }
.seccion > .contenedor { position: relative; z-index: 1; }
/* Capa de blobs de gradiente flotantes (inyectada por /js/animaciones.js) */
.blobs-capa {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.blob {
position: absolute;
border-radius: 42% 58% 61% 39% / 45% 40% 60% 55%;
filter: blur(36px);
}
.seccion--animando .blob { will-change: transform; }
.seccion--oscura { background: var(--negro); color: var(--crema); }
.seccion--carbon { background: var(--negro-suave); color: var(--crema); }
.seccion--crema-oscura { background: var(--crema-oscura); }
.seccion--verde { background: var(--verde-loro); color: var(--crema); }
.seccion--turquesa { background: var(--turquesa); color: var(--crema); }
.seccion--amarilla { background: var(--amarillo); color: var(--negro); }
.seccion--blanca { background: #fff; }
.seccion--turquesa .etiqueta, .seccion--verde .etiqueta { color: rgba(247, 242, 231, 0.9); }
.seccion--amarilla .etiqueta { color: #6e5a10; }
.seccion--turquesa h2 em, .seccion--verde h2 em { font-style: normal; color: var(--amarillo); }
.mapa-caja .estado:hover { fill: var(--island) !important; }
.seccion--amarilla h2 em { font-style: normal; color: var(--verde-loro); }
.seccion--turquesa .seccion__cabeza p { color: rgba(247, 242, 231, 0.88); }
.seccion--amarilla .seccion__cabeza p { color: rgba(18, 17, 16, 0.72); }
.seccion--amarilla .cifra .numero { color: var(--negro); }
/* Tarjetas claras (versión juvenil sobre fondos claros) */
.tarjeta-producto.clara { background: #fff; border-color: rgba(18, 17, 16, 0.12); }
.tarjeta-producto.clara h3 { color: var(--negro); }
.tarjeta-producto.clara p { color: var(--gris-texto); }
.tarjeta-producto.clara h3 span { color: #806410; }
.tarjeta-producto.clara .categoria { color: var(--verde-loro); }
.seccion__cabeza { text-align: center; max-width: 760px; margin: 0 auto 72px; }
.seccion__cabeza h2 {
font-size: clamp(2.4rem, 5.5vw, 4rem);
margin: 10px 0 18px;
}
.seccion--oscura h2 em, .seccion--carbon h2 em { font-style: normal; color: var(--oro-claro); }
.seccion__cabeza p { color: var(--gris-texto); font-size: 1.05rem; }
.seccion--oscura .seccion__cabeza p,
.seccion--carbon .seccion__cabeza p,
.seccion--verde .seccion__cabeza p { color: rgba(247, 242, 231, 0.75); }
/* ---------- Hero estilo campaña (video, izquierda) ---------- */
.hero--izq { justify-content: flex-start; text-align: left; }
.hero--izq .hero__contenido { max-width: 660px; margin-left: max(6vw, 28px); }
.hero--izq h1 { font-size: clamp(2.4rem, 5.8vw, 4.5rem); font-weight: 400; }
.hero__bajada {
font-family: "Questrial", var(--cond), sans-serif;
font-weight: 500; color: rgba(247, 242, 231, 0.88); font-size: 1.08rem; max-width: 520px; margin-bottom: 34px; }
.hero__bajada--destacada {
font-family: "Advercase", "DM Serif Display", "Playfair Display", serif;
font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em;
font-size: clamp(1.3rem, 3vw, 2.1rem); line-height: 1.15;
color: var(--amarillo); max-width: none; margin-bottom: 14px; }
.hero--izq .hero__acciones { justify-content: flex-start; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Slideshow del hero: crossfade + zoom Ken Burns */
.hero__slides { position: absolute; inset: 0; overflow: hidden; }
.hero__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.6s ease;
animation: heroZoom 9s linear forwards;
animation-play-state: paused; /* al perder .activa se congela donde iba: nunca se regresa */
}
.hero__slide.activa { opacity: 1; animation-play-state: running; }
.hero__slide[src*="hero-4-lluvia"] { object-position: 72% center; }
@media (max-width: 820px) {
.hero__slide[src*="hero-4-lluvia"] { object-position: 76% center; }
}
@keyframes heroZoom {
from { transform: scale(1); }
to { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
.hero__slide.activa { animation: none; }
}
.hero__velo {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(18, 17, 16, 0.78), rgba(18, 17, 16, 0.22) 65%),
linear-gradient(rgba(18, 17, 16, 0.15), rgba(18, 17, 16, 0.55));
}
/* ---------- Mosaico de destacados (zoom al hover) ---------- */
.mosaico { display: grid; grid-template-columns: 1.15fr 1fr; grid-auto-rows: 320px; gap: 16px; }
.mosaico__celda { position: relative; overflow: hidden; display: block; }
.mosaico__celda--grande { grid-row: span 2; }
.mosaico__celda img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.mosaico__celda:hover img { transform: scale(1.07); }
.mosaico__texto {
position: absolute;
inset: auto 0 0 0;
padding: 30px 28px 26px;
background: linear-gradient(transparent, rgba(18, 17, 16, 0.85));
color: var(--crema);
}
.mosaico__kicker { font-family: var(--cond); font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--oro-claro); display: block; margin-bottom: 8px; }
.mosaico__texto h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); color: var(--crema); margin-bottom: 10px; }
.mosaico__cta { font-family: var(--cond); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro-claro); border-bottom: 1px solid rgba(227, 193, 92, 0.6); padding-bottom: 2px; }
/* ---------- Secciones divididas texto/foto ---------- */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.split h2 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin: 12px 0 20px; }
.split p { color: var(--gris-texto); margin-bottom: 26px; max-width: 480px; }
.split__foto { overflow: hidden; }
.split__foto img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block; }
.split__foto video { width: 100%; height: auto; max-height: 78vh; object-fit: contain; display: block; margin: 0 auto; }
.split__foto:hover img { transform: scale(1.05); }
/* Split con foto sangrada al borde derecho */
.split--bleed .split__foto { margin-right: calc(50% - 50vw); }
.split--bleed .split__foto img { min-height: 440px; }
/* ---------- Fila de botellas (zoom al pasar el mouse) ---------- */
.fila-botellas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 22px;
margin-top: 72px;
align-items: end;
position: relative;
}
.fila-botellas::before {
content: "";
position: absolute;
inset: -30px 0;
background: url("/assets/img/logos/ron-potosi-est-1938.webp") center/220px repeat-x;
opacity: 0.05;
pointer-events: none;
}
.botella { text-align: center; display: block; }
.botella img {
height: 300px;
object-fit: contain;
margin: 0 auto 16px;
filter: drop-shadow(0 22px 22px rgba(18, 17, 16, 0.18));
transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.botella:hover img { transform: scale(1.1) translateY(-8px); }
.botella .nombre { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--negro); }
.botella .anada { font-size: 0.78rem; color: var(--gris-texto); }
/* ---------- Redes sociales (collage) ---------- */
.collage { position: relative; min-height: 440px; }
.collage img { position: absolute; width: 64%; box-shadow: 0 26px 52px rgba(0, 0, 0, 0.3); }
.collage img:first-child { top: 0; left: 0; transform: rotate(-4deg); }
.collage img:last-child { bottom: 0; right: 0; transform: rotate(3deg); }
.hashtag { font-family: var(--serif); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--amarillo); margin-top: 20px; }
.redes-iconos { display: flex; gap: 18px; margin-top: 24px; }
.redes-iconos a { color: var(--crema); transition: color var(--transicion), transform var(--transicion); }
.redes-iconos a:hover { color: var(--amarillo); transform: translateY(-3px); }
@media (max-width: 960px) {
.mosaico { grid-template-columns: 1fr; grid-auto-rows: 260px; }
.mosaico__celda--grande { grid-row: auto; }
.split { grid-template-columns: 1fr; gap: 32px; }
.collage { min-height: 340px; }
.botella img { height: 230px; }
}
/* ---------- Grid de productos ---------- */
.grid-productos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 28px;
}
.tarjeta-producto {
background: linear-gradient(170deg, var(--carbon), var(--negro-suave));
border: 1px solid rgba(201, 162, 39, 0.25);
padding: 40px 28px 32px;
text-align: center;
transition: translate var(--transicion), border-color var(--transicion); /* translate y no transform: GSAP escribe transform y no se pisan */
display: flex;
flex-direction: column;
}
.tarjeta-producto:hover { translate: 0 -6px; border-color: var(--oro); }
.tarjeta-producto .categoria { /* verde-loro por contraste sobre blanco */
font-family: var(--cond);
font-size: 0.72rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--verde-claro);
margin-bottom: 10px;
}
.tarjeta-producto.clara .categoria { color: var(--verde-loro); }
.tarjeta-producto img {
height: 220px;
object-fit: contain;
margin: 0 auto 22px;
filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.5));
}
.tarjeta-producto h3 {
color: var(--crema);
text-transform: uppercase;
font-size: 1.25rem;
margin-bottom: 8px;
}
.tarjeta-producto h3 span { color: var(--oro-claro); display: block; }
.tarjeta-producto p { font-size: 0.9rem; color: rgba(247, 242, 231, 0.65); flex: 1; }
.tarjeta-producto .acciones { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tarjeta-producto .btn { padding: 11px 22px; font-size: 0.7rem; }
/* ---------- Ficha de producto (/rones/) ---------- */
.ficha {
display: grid;
grid-template-columns: 380px 1fr;
gap: 64px;
align-items: center;
padding: 72px 0;
border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}
.ficha:last-child { border-bottom: none; }
.ficha__visual {
background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.16), transparent 70%);
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
}
.ficha__visual img { max-height: 420px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); }
.ficha h3 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); text-transform: uppercase; color: var(--crema); margin: 8px 0 18px; }
.ficha h3 span { color: var(--oro-claro); }
.ficha .notas { display: grid; gap: 14px; margin: 26px 0 32px; }
.ficha .nota { display: grid; grid-template-columns: 110px 1fr; gap: 16px; font-size: 0.95rem; }
.ficha .nota dt {
font-family: var(--cond);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.7rem;
color: var(--oro);
padding-top: 3px;
}
.ficha .nota dd { color: rgba(247, 242, 231, 0.78); }
/* ---------- Cócteles ---------- */
.grid-cocteles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 26px;
}
.tarjeta-coctel {
background: var(--crema);
border: 1px solid rgba(18, 17, 16, 0.12);
overflow: hidden;
transition: translate var(--transicion), box-shadow var(--transicion);
}
.tarjeta-coctel:hover { translate: 0 -5px; box-shadow: 0 20px 40px rgba(18, 17, 16, 0.12); }
.tarjeta-coctel__cabeza {
background: linear-gradient(160deg, var(--verde-loro), #14512f);
color: var(--crema);
padding: 26px 24px 20px;
}
.tarjeta-coctel__cabeza.oro { background: linear-gradient(160deg, #7d6113, #5c470c); }
.tarjeta-coctel__cabeza.ambar { background: linear-gradient(160deg, #99490a, #6b3304); }
.tarjeta-coctel__cabeza .base {
font-family: var(--cond);
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
opacity: 0.85;
}
.tarjeta-coctel__cabeza h3 { text-transform: uppercase; font-size: 1.35rem; margin-top: 6px; }
.tarjeta-coctel__cuerpo { padding: 22px 24px 26px; }
/* el botón de la tarjeta sigue el color del texto de su tema: blanco en las oscuras, negro en las claras */
.t--forest .tarjeta-coctel__btn, .t--tomato .tarjeta-coctel__btn, .t--carrot .tarjeta-coctel__btn { color: #fff; --btn-borde: #fff; --btn-fill: #fff; --btn-texto-hover: var(--negro); }
.t--sunshine .tarjeta-coctel__btn { color: var(--negro); --btn-borde: var(--negro); --btn-fill: var(--negro); --btn-texto-hover: #fff; }
.t--kiwi .tarjeta-coctel__btn { color: #fff; --btn-borde: #fff; --btn-fill: #fff; --btn-texto-hover: var(--negro); }
/* al pasar el mouse el color del texto debe cambiar con el relleno; estas reglas tienen la misma especificidad que .btn:hover y van después */
.t--forest .tarjeta-coctel__btn:hover, .t--tomato .tarjeta-coctel__btn:hover, .t--carrot .tarjeta-coctel__btn:hover { color: var(--negro); }
.t--sunshine .tarjeta-coctel__btn:hover { color: #fff; }
.t--kiwi .tarjeta-coctel__btn:hover { color: var(--negro); }
/* sólo el amarillo va en negro; en los demás tonos todo el texto va claro */
.t--sunshine .tarjeta-coctel__cabeza, .t--sunshine .tarjeta-coctel__cabeza h3, .t--sunshine .tarjeta-coctel__cabeza .base { color: var(--negro); }
.t--kiwi .tarjeta-coctel__cabeza, .t--kiwi .tarjeta-coctel__cabeza h3, .t--kiwi .tarjeta-coctel__cabeza .base { color: #fff; }
.tarjeta-coctel__cuerpo ul { list-style: none; margin-bottom: 16px; }
.tarjeta-coctel__cuerpo li {
font-size: 0.9rem;
padding: 6px 0;
border-bottom: 1px dashed rgba(18, 17, 16, 0.15);
}
.tarjeta-coctel__cuerpo li:last-child { border-bottom: none; }
.tarjeta-coctel__cuerpo .prep { font-size: 0.88rem; color: var(--gris-texto); }
/* Slot de foto de cóctel: fondo de color hasta que llegue la fotografía real */
.tarjeta-coctel__foto {
height: 210px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.6rem;
position: relative;
overflow: hidden;
}
.tarjeta-coctel__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-coctel__foto .pendiente {
position: absolute;
bottom: 10px; right: 12px;
font-family: var(--cond);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.88);
}
.f-verde { background: radial-gradient(circle at 30% 25%, #2e9963, var(--verde-loro) 70%); }
.f-oro { background: radial-gradient(circle at 30% 25%, var(--oro-claro), var(--oro-profundo) 75%); }
.f-ambar { background: radial-gradient(circle at 30% 25%, #d97b2e, var(--ambar) 75%); }
.f-turquesa { background: radial-gradient(circle at 30% 25%, #2fb4c4, var(--turquesa) 75%); }
.f-coral { background: radial-gradient(circle at 30% 25%, #f07a5c, var(--coral) 75%); }
.f-amarillo { background: radial-gradient(circle at 30% 25%, #f8dd7a, var(--amarillo) 75%); }
/* ---------- Marca: logo en header y age gate ---------- */
.header__logo img.logo-header { height: 46px; width: auto; display: block; transition: height 0.45s ease; }
.header.solido .header__logo img.logo-header { height: 32px; }
.header__logo { display: flex; align-items: center; gap: 10px; }
.header__logo img.logo-header-loro { height: 46px; width: auto; display: block; object-fit: contain; filter: brightness(0) invert(1); transition: height 0.45s ease; }
.header.solido .header__logo img.logo-header-loro { height: 36px; }
.header.solido .header__logo img.logo-header-loro,
body.submenu-open .header .header__logo img.logo-header-loro { filter: brightness(0); }
.age-gate__caja img.logo-gate { width: 210px; margin: 0 auto 18px; }
/* ---------- Foto superior en tarjetas (experiencias) ---------- */
.tarjeta-producto .foto-card {
margin: -40px -28px 22px;
height: 190px;
overflow: hidden;
}
.tarjeta-producto .foto-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.tarjeta-producto:hover .foto-card img { transform: scale(1.05); }
/* ---------- Fotos en la línea de tiempo (historia) ---------- */
.hito__foto { margin: 16px 0 0; max-width: 460px; }
.hito__foto img { width: 100%; border: 1px solid rgba(201, 162, 39, 0.35); }
.hito__foto figcaption { font-family: var(--cond); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247, 242, 231, 0.6); margin-top: 8px; }
/* ---------- Timeline Historia ---------- */
.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 40px; }
.timeline::before {
content: "";
position: absolute;
left: 8px; top: 6px; bottom: 6px;
width: 1px;
background: linear-gradient(var(--oro), rgba(201, 162, 39, 0.15));
}
.hito { position: relative; padding-bottom: 52px; }
.hito::before {
content: "";
position: absolute;
left: -37px; top: 8px;
width: 11px; height: 11px;
border-radius: 50%;
background: var(--negro);
border: 2px solid var(--oro);
}
.hito .anio {
font-family: var(--serif);
font-size: 1.9rem;
font-weight: 700;
color: var(--oro-claro);
line-height: 1;
}
.hito h3 { color: var(--crema); text-transform: uppercase; font-size: 1.1rem; margin: 8px 0 10px; letter-spacing: 0.05em; }
.hito p { color: rgba(247, 242, 231, 0.72); font-size: 0.98rem; max-width: 640px; }
/* ---------- Tienda ---------- */
.filtros { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.filtro {
font-family: var(--cond);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.2em;
padding: 10px 22px;
border: 1px solid rgba(18, 17, 16, 0.3);
background: transparent;
cursor: pointer;
transition: all var(--transicion);
}
.filtro.activo { background: var(--negro); color: var(--oro-claro); border-color: var(--negro); }
.grid-tienda {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 26px;
}
.item-tienda {
background: #fff;
border: 1px solid rgba(18, 17, 16, 0.1);
padding: 28px 22px 24px;
text-align: center;
display: flex;
flex-direction: column;
transition: box-shadow var(--transicion);
}
.item-tienda:hover { box-shadow: 0 16px 36px rgba(18, 17, 16, 0.12); }
.item-tienda img { height: 180px; object-fit: contain; margin: 0 auto 18px; }
.item-tienda .sin-foto {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
background: var(--crema-oscura);
color: var(--gris-texto);
font-family: var(--cond);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 18px;
}
.item-tienda .tipo {
font-family: var(--cond);
font-size: 0.72rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--verde-loro);
}
.item-tienda h3 { font-size: 1.05rem; text-transform: uppercase; margin: 6px 0 4px; }
.item-tienda .presentacion { font-size: 0.82rem; color: var(--gris-texto); }
.item-tienda .precio {
font-family: var(--serif);
font-size: 1.35rem;
font-weight: 700;
color: var(--negro);
margin: 14px 0;
}
.item-tienda .btn { margin-top: auto; padding: 12px 20px; font-size: 0.7rem; }
/* ---------- Panel de carrito ---------- */
.panel-carrito {
position: fixed;
top: 0; right: -420px;
width: min(400px, 92vw);
height: 100vh;
background: var(--negro);
color: var(--crema);
z-index: 950;
padding: 28px;
display: flex;
flex-direction: column;
transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
}
.panel-carrito.abierto { right: 0; }
.panel-carrito h3 {
font-family: var(--cond);
letter-spacing: 0.26em;
text-transform: uppercase;
font-size: 0.9rem;
color: var(--oro-claro);
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.panel-carrito .cerrar { background: none; border: none; color: var(--crema); font-size: 1.3rem; cursor: pointer; }
.panel-carrito__items { flex: 1; overflow-y: auto; display: grid; gap: 16px; align-content: start; }
.item-carrito {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px;
border-bottom: 1px solid rgba(201, 162, 39, 0.2);
padding-bottom: 12px;
font-size: 0.9rem;
}
.item-carrito .nombre { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.08em; }
.item-carrito .controles { display: flex; gap: 10px; align-items: center; color: rgba(247, 242, 231, 0.7); }
.item-carrito button { background: none; border: 1px solid rgba(201, 162, 39, 0.4); color: var(--crema); width: 22px; height: 22px; cursor: pointer; }
.panel-carrito__pie { border-top: 1px solid rgba(201, 162, 39, 0.3); padding-top: 18px; }
.panel-carrito__pie .total { display: flex; justify-content: space-between; font-family: var(--serif); font-size: 1.2rem; margin-bottom: 16px; }
.panel-carrito .btn { width: 100%; text-align: center; }
.panel-carrito .aviso { font-size: 0.72rem; color: rgba(247, 242, 231, 0.68); margin-top: 12px; text-align: center; }
/* ---------- FAQ ---------- */
.faq-lista { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(18, 17, 16, 0.15); }
.faq-item summary {
font-family: var(--cond);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 1.1rem;
padding: 26px 8px;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-item summary::after { content: "+"; font-size: 1.9rem; font-weight: 300; color: var(--ambar); line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .respuesta { padding: 0 8px 24px; color: var(--gris-texto); }
/* FAQ: grupos de preguntas; todas viven en la pestaña FAQ */
.faq-grupo { max-width: 780px; margin: 0 auto; padding-top: 52px; }
.faq-grupo:first-child { padding-top: 0; }
.faq-grupo__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.05; margin: 8px 0 16px; }
.faq-item .respuesta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Pie de página ----------
Fondo a escala 1.15 que entra a 1 en 2s, elementos que suben 20px con fundido de .3s y
escalonado de 75ms por --delay, y flecha que aparece deslizándose 2rem al pasar el cursor. */
.pie {
position: relative;
z-index: 1;
overflow: hidden;
color: var(--crema);
background: var(--negro);
padding: clamp(46px, 5vw, 70px) 0 clamp(20px, 2.4vw, 32px);
isolation: isolate;
}
.pie__fondo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
filter: brightness(0.42) saturate(0.85);
}
/* velo cálido para que la crema tenga contraste sobre cualquier zona de la foto */
.pie::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(18, 17, 16, 0.72) 0%, rgba(18, 17, 16, 0.5) 42%, rgba(18, 17, 16, 0.86) 100%);
pointer-events: none;
}
.pie__caja {
max-width: 1680px;
margin: 0 auto;
padding: 0 clamp(20px, 3.2vw, 40px);
position: relative;
}
/* --- volver arriba --- */
.pie__arriba {
position: absolute;
top: 0;
right: clamp(20px, 3.2vw, 40px);
display: flex;
align-items: center;
gap: 0.625rem;
font-family: var(--moderat);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(1.6rem, 3.1vw, 2.55rem);
line-height: 1;
letter-spacing: 0.01em;
color: var(--crema);
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: color 0.3s ease-in-out;
}
.pie__arriba svg { width: 0.72em; height: 0.72em; opacity: 0; visibility: hidden; transition: 0.3s ease-in-out; }
.pie__arriba:hover svg { opacity: 1; visibility: visible; }
/* --- rejilla de menús --- */
.pie__rejilla {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 2.875rem;
width: fit-content;
margin-bottom: clamp(34px, 3.6vw, 48px);
position: relative;
z-index: 1;
}
.pie__menu { list-style: none; margin: 0; padding: 0; }
/* display:flex + width:fit-content es lo que hace que la flecha con right:0 caiga pegada al
texto y no al borde de la columna. */
.pie__menu li { position: relative; display: flex; width: fit-content; }
.pie__menu li:not(:last-child) { margin-bottom: 0.5rem; }
.pie__menu a {
display: inline-block;
font-family: var(--moderat);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(1.6rem, 3.1vw, 2.55rem);
line-height: 1;
letter-spacing: 0.01em;
color: var(--crema);
word-break: break-word;
}
.pie__menu li svg {
position: absolute;
right: 0;
top: 50%;
width: 0.62em;
height: 0.62em;
font-size: clamp(1.6rem, 3.1vw, 2.55rem);
opacity: 0;
visibility: hidden;
transform: translateY(-50%) rotate(90deg);
transition: 0.3s ease-in-out;
color: var(--amarillo);
}
.pie__menu li:hover svg { opacity: 1; visibility: visible; transform: translate(2rem, -50%) rotate(90deg); }
.pie__legal { list-style: none; margin: 0; padding: 0; }
.pie__legal li:not(:last-child) { margin-bottom: 0.5rem; }
.pie__legal a {
display: inline-block;
font-family: var(--cond);
font-size: 1rem;
line-height: 1.4;
color: rgba(243, 232, 204, 0.86);
word-break: break-word;
}
.pie__legal a:hover { text-decoration: underline; }
/* "Preferencias de cookies" abre el centro de preferencias, así que es botón, no enlace.
Se le da la misma pinta que a los demás renglones. */
.pie__legal-btn {
display: inline-block;
font-family: var(--cond);
font-size: 1rem;
line-height: 1.4;
color: rgba(243, 232, 204, 0.86);
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-align: left;
}
.pie__legal-btn:hover { text-decoration: underline; }
/* --- redes --- */
.pie__redes { display: flex; gap: 0.375rem; grid-column: 1 / -1; margin-top: 4px; }
.pie__redes a {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid rgba(243, 232, 204, 0.32);
border-radius: 50%;
color: var(--crema);
}
.pie__redes svg { width: 15px; height: 15px; }
.pie__redes svg path { transition: 0.3s ease-in-out; }
.pie__redes a:hover { border-color: var(--amarillo); }
.pie__redes a:hover svg path { fill: var(--amarillo); }
/* --- franja de relojes --- */
.pie__relojes {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: clamp(20px, 2.2vw, 30px);
position: relative;
z-index: 1;
}
.pie__reloj { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); }
.pie__hora,
.pie__lugar {
font-family: var(--moderat);
font-weight: 700;
font-size: clamp(2.4rem, 6.1vw, 5.6rem);
line-height: 1.12;
letter-spacing: 0.005em;
color: var(--crema);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pie__lugar { text-transform: uppercase; }
.pie__silueta { width: clamp(30px, 3.4vw, 50px); flex: none; line-height: 0; }
.pie__silueta svg { width: 100%; height: auto; display: block; }
.pie__silueta svg path { fill: var(--amarillo); }
.pie__sello { width: clamp(64px, 7vw, 104px); flex: none; }
.pie__sello img { width: 100%; height: auto; display: block; }
/* --- aviso legal y créditos --- */
.pie__creditos {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
font-family: var(--cond);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(243, 232, 204, 0.72);
position: relative;
z-index: 1;
border-top: 1px solid rgba(243, 232, 204, 0.16);
padding-top: clamp(14px, 1.6vw, 20px);
}
.pie__creditos strong { color: var(--amarillo); font-weight: 700; }
.pie__creditos-der { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.pie__firma {
color: rgba(243, 232, 204, 0.58);
text-decoration: none;
transition: color 0.3s ease-in-out;
white-space: nowrap;
}
.pie__firma strong { color: rgba(243, 232, 204, 0.58); font-weight: 700; transition: color 0.3s ease-in-out; }
.pie__firma:hover, .pie__firma:hover strong { color: var(--amarillo); }
/* --- animaciones de entrada --- */
.anima-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
transition-delay: var(--delay, 0ms);
}
.anima-item.is-visible { opacity: 1; transform: translateY(0); }
.anima-fondo {
transform: scale(1.15);
transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}
.anima-fondo.is-visible { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
.anima-item, .anima-fondo { opacity: 1; transform: none; transition: none; }
}
/* --- móvil --- */
@media (max-width: 860px) {
.pie__arriba { position: static; margin: 0 0 26px auto; }
.pie__rejilla { grid-template-columns: 1fr; gap: 26px; width: 100%; }
.pie__relojes { flex-direction: column; align-items: flex-start; gap: 14px; }
.pie__sello { order: -1; }
.pie__creditos { flex-direction: column; gap: 8px; }
}
/* ---------- Age gate: certificado con año de nacimiento ---------- */
.age-gate {
position: fixed;
inset: 0;
z-index: 1000;
overflow-y: auto;
background: var(--negro);
}
.age-gate[hidden] { display: none; }
.age-gate__fondo {
position: fixed;
inset: 0;
background: url("/assets/img/fotos/ron-potosi-anejo-botella-hero.webp") center/cover no-repeat;
filter: blur(12px) brightness(0.65);
transform: scale(1.08);
}
.age-gate__contenido {
position: relative;
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 56px 24px 40px;
text-align: center;
}
.age-gate__aviso {
font-family: var(--cond);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.85rem;
color: #fff;
max-width: 560px;
margin-bottom: 48px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.age-gate__caja {
position: relative;
width: min(560px, 100%);
background: var(--crema);
color: var(--negro);
padding: 74px 44px 46px;
clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.age-gate__sello {
position: absolute;
top: -52px;
left: 50%;
transform: translateX(-50%);
width: 104px;
height: 104px;
border-radius: 50%;
background: var(--negro);
border: 3px solid var(--oro);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.age-gate__sello img { width: 62px; }
.age-gate__lema {
font-family: var(--cond);
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 0.74rem;
color: var(--ambar);
margin-bottom: 12px;
}
.age-gate__ornamento { width: 180px; color: var(--negro); margin: 0 auto 26px; display: block; }
.age-gate__caja h2 {
font-size: clamp(1.7rem, 4.5vw, 2.4rem);
text-transform: uppercase;
line-height: 1.15;
margin-bottom: 26px;
}
.age-gate__label {
display: block;
font-family: var(--cond);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 0.8rem;
color: var(--gris-texto);
margin-bottom: 4px;
}
.age-gate__anio {
width: 100%;
border: none;
background: transparent;
font-family: var(--serif);
font-weight: 700;
font-size: clamp(3.4rem, 10vw, 4.6rem);
text-align: center;
color: var(--negro);
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
caret-color: var(--oro-profundo);
margin-bottom: 14px;
}
.age-gate__anio:focus { outline: none; box-shadow: none; border: none !important; }
.age-gate__anio::placeholder { color: rgba(18, 17, 16, 0.18); }
.age-gate__privacidad { font-size: 0.88rem; color: var(--gris-texto); margin-bottom: 24px; }
.age-gate__privacidad a { color: var(--negro); text-decoration: underline; text-underline-offset: 3px; }
.age-gate__enviar {
display: block;
width: min(320px, 100%);
margin: 0 auto;
font-family: var(--cond);
text-transform: uppercase;
letter-spacing: 0.26em;
font-size: 0.85rem;
padding: 17px 20px;
background: var(--oro);
border: none;
color: var(--negro);
cursor: pointer;
transition: background var(--transicion);
}
.age-gate__error { margin-top: 16px; font-size: 0.88rem; color: #a3271b; font-weight: 600; }
.age-gate__terminos { margin-top: 22px; font-size: 0.9rem; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.age-gate__terminos a { text-decoration: underline; text-underline-offset: 3px; }
.age-gate__pie {
margin-top: 40px;
max-width: 640px;
color: rgba(255, 255, 255, 0.85);
font-size: 0.78rem;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.age-gate__pie strong { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.22em; display: block; margin-bottom: 8px; }
.age-gate__pie a { text-decoration: underline; text-underline-offset: 3px; color: #fff; }
.age-gate__pie p { margin-top: 4px; }
/* ---------- Utilidades ---------- */
.dos-columnas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.cifra .numero { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; color: var(--oro-claro); }
.cifra .texto { font-family: var(--moderat); font-weight: 200; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; margin-top: 6px; }
.banda-legal {
background: var(--negro);
color: rgba(247, 242, 231, 0.6);
text-align: center;
font-family: var(--cond);
font-size: 0.68rem;
letter-spacing: 0.3em;
text-transform: uppercase;
padding: 10px 16px;
}
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.nav { display: none; }
.nav.abierto {
display: flex;
position: fixed;
inset: 108px 0 auto 0;
background: #fff;
flex-direction: column;
padding: 20px 28px 32px;
gap: 2px;
border-bottom: 1px solid rgba(18, 17, 16, 0.12);
box-shadow: 0 18px 30px rgba(18, 17, 16, 0.12);
}
.hamburguesa { display: block; margin-left: auto; }
.header__barra .carrito-btn { margin-left: 0; }
.ficha { grid-template-columns: 1fr; gap: 32px; }
.dos-columnas { grid-template-columns: 1fr; gap: 40px; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.cifras { grid-template-columns: 1fr; gap: 24px; }
}
/* ---------- Superficies del navegador (selección, scroll, foco, formularios) ---------- */
::selection { background: var(--oro); color: var(--negro); }
html { scrollbar-color: var(--oro-profundo) transparent; }
@media (hover: hover) and (pointer: fine) { ::-webkit-scrollbar { width: 12px; } }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(154, 122, 26, 0.65); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--oro-profundo); }
body { accent-color: var(--verde-loro); caret-color: var(--oro-profundo); }
:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; border-radius: 2px; }
.seccion--oscura :focus-visible, .header :focus-visible, .panel-carrito :focus-visible, .age-gate :focus-visible { outline-color: var(--oro-claro); }
input, textarea, select {
transition: border-color var(--transicion), box-shadow var(--transicion);
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--turquesa) !important;
box-shadow: 0 0 0 3px rgba(15, 142, 157, 0.16);
}
/* Cifras y precios con numerales tabulares */
.precio, .cifra .numero, .panel-carrito__pie .total, .item-carrito .controles { font-variant-numeric: tabular-nums; }
/* ---------- Sistema de iconos ---------- */
.ico { display: inline-block; vertical-align: middle; }
.carrito-btn .ico, .hamburguesa .ico { display: block; }
.icono-card {
width: 76px;
height: 76px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(201, 162, 39, 0.45);
border-radius: 50%;
color: var(--oro);
}
.tarjeta-producto.clara .icono-card { border-color: rgba(30, 110, 70, 0.35); color: var(--verde-loro); }
.icono-card--verde { border-color: rgba(30, 110, 70, 0.35); color: var(--verde-loro); }
.tarjeta-coctel__foto .ico { color: rgba(255, 255, 255, 0.92); filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
/* ---------- Llenado líquido: botón del navbar, filtros de tienda y age gate ---------- */
.nav__tienda, .filtro, .age-gate__enviar {
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.25s ease-in, border-color 0.25s ease-in;
}
.nav__tienda { --btn-fill: var(--amarillo); --btn-texto-hover: var(--negro); }
.filtro { --btn-fill: var(--negro); --btn-texto-hover: var(--oro-claro); }
.age-gate__enviar { --btn-fill: var(--negro); --btn-texto-hover: var(--oro-claro); }
.nav__tienda::before, .nav__tienda::after,
.filtro::before, .filtro::after,
.age-gate__enviar::before, .age-gate__enviar::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 140%;
height: 180%;
transform: translateX(-50%) scaleY(1) scaleX(1.25);
border-radius: 50%;
z-index: -1;
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
background-color: rgba(18, 17, 16, 0.05);
}
.nav__tienda::after, .filtro::after, .age-gate__enviar::after {
left: 55%;
top: 180%;
width: 160%;
height: 190%;
transform: translateX(-50%) scaleY(1) scaleX(1.45);
background-color: var(--btn-fill);
}
.nav__tienda:hover, .filtro:hover, .age-gate__enviar:hover {
color: var(--btn-texto-hover);
border-color: var(--btn-fill);
}
.nav__tienda:hover::before, .filtro:hover::before, .age-gate__enviar:hover::before {
top: -35%;
background-color: var(--btn-fill);
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
.nav__tienda:hover::after, .filtro:hover::after, .age-gate__enviar:hover::after {
top: -45%;
background-color: var(--btn-fill);
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
/* ---------- Mapa Dónde Comprar (sección del home) ---------- */
/* Estilos propios del mapa */
.mapa-layout { max-width: 860px; margin: 0 auto; }
.mapa-caja { position: relative; }
.mapa-caja svg { width: 100%; height: auto; display: block; }
.mapa-caja .estado {
fill: #e9e0ca;
stroke: rgba(18, 17, 16, 0.28);
stroke-width: 1;
cursor: pointer;
transition: fill 0.25s ease;
}
.mapa-caja .estado:hover { fill: var(--amarillo); }
.mapa-caja .estado.seleccionado:hover { fill: var(--turquesa); }
.mapa-caja .estado.con-puntos { fill: var(--oro-claro); }
.mapa-caja .estado.con-puntos:hover { fill: var(--oro); }
.mapa-caja .estado.casa { fill: var(--verde-jade); }
.mapa-caja .estado.casa:hover { fill: var(--verde-claro); }
.mapa-caja .estado.seleccionado { fill: var(--turquesa); stroke: var(--negro); stroke-width: 1.5; }
/* Tooltip que sigue el cursor sobre el mapa */
.mapa-tooltip {
position: absolute;
left: 0;
top: 0;
width: 280px;
transform: translate(-50%, -100%);
background: #fff;
border: 1px solid rgba(18, 17, 16, 0.14);
box-shadow: 0 18px 44px rgba(18, 17, 16, 0.2);
padding: 14px 18px 10px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 6;
}
.mapa-tooltip.visible { opacity: 1; }
.tip-estado { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1rem; color: var(--negro); border-bottom: 2px solid var(--flame); padding-bottom: 6px; }
.tip-punto { padding: 8px 0; border-top: 1px solid rgba(18, 17, 16, 0.08); }
.tip-punto:first-of-type { border-top: none; }
.tip-punto strong { display: block; font-family: var(--cond); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.76rem; color: var(--negro); }
.tip-punto em { display: block; font-style: normal; font-family: var(--cond); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--verde-loro); margin-top: 1px; }
.tip-punto span { display: block; color: var(--gris-texto); font-size: 0.74rem; line-height: 1.45; margin-top: 2px; }
.mapa-cta { text-align: center; margin-top: 28px; }
.punto-venta { border-bottom: 1px solid rgba(18, 17, 16, 0.12); padding: 14px 0; }
.punto-venta:last-child { border-bottom: none; }
.punto-venta .nombre { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; color: var(--negro); }
.punto-venta .tipo-pv { font-size: 0.72rem; font-family: var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--verde-loro); margin-top: 2px; }
.punto-venta .dir { font-size: 0.85rem; color: var(--gris-texto); margin-top: 4px; }
.punto-venta a.como-llegar { display: inline-block; font-family: var(--cond); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--turquesa); margin-top: 6px; border-bottom: 1px solid rgba(15, 142, 157, 0.5); }
.leyenda-mapa { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; font-family: var(--cond); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-texto); }
.leyenda-mapa span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; }
.leyenda-mapa .l-casa::before { background: var(--verde-loro); }
.leyenda-mapa .l-puntos::before { background: var(--oro-claro); }
.leyenda-mapa .l-nacional::before { background: #e9e0ca; border: 1px solid rgba(18, 17, 16, 0.28); }
/* ---------- Selector de país del mapa ---------- */
.pais-tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; }
.pais-tab {
font-family: var(--cond);
font-weight: 500;
font-size: 0.82rem;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 12px 30px;
border: 1px solid rgba(18, 17, 16, 0.25);
background: #fff;
cursor: pointer;
transition: background 0.25s ease, border-color 0.25s ease;
}
.pais-tab:hover { border-color: var(--amarillo); background: var(--crema); }
.pais-tab.activo { background: var(--amarillo); border-color: var(--amarillo); font-weight: 600; }
/* ---------- Carrusel de botellas: cuadros completos de color ---------- */
.carrusel-envoltura { position: relative; margin-top: 64px; }
.carrusel-botellas {
display: flex;
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin: 0 calc(50% - 50vw);
padding: 0 calc(50vw - 50%);
}
.carrusel-botellas::-webkit-scrollbar { display: none; }
.cuadro-botella {
flex: 0 0 min(360px, 78vw);
scroll-snap-align: center;
min-height: 480px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 24px 34px;
position: relative;
overflow: hidden;
transition: filter 0.25s ease;
}
.cuadro-botella:hover { filter: brightness(1.06); }
.cuadro-botella::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 4px;
background: rgba(18, 17, 16, 0.85);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cuadro-botella:hover::after { transform: scaleX(1); }
.cuadro-botella img { height: 300px; object-fit: contain; margin-bottom: 26px; filter: drop-shadow(0 18px 20px rgba(18, 17, 16, 0.22)); transition: transform 0.4s ease; }
.cuadro-botella:hover img { transform: scale(1.05); }
.cuadro-botella .nombre { font-family: var(--display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; color: var(--negro); }
.cuadro-botella .anada { font-family: var(--cond); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(18, 17, 16, 0.66); margin-top: 4px; }
.cb--caribe { background: var(--island); }
.cb--mango { background: var(--amarillo); }
.cb--coral { background: var(--coral); }
.cb--menta { background: var(--verde-claro); }
.cb--jade { background: var(--verde-jade); }
.carrusel-flecha {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 52px;
height: 52px;
border-radius: 50%;
border: none;
background: var(--crema);
color: var(--negro);
font-size: 1.8rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 8px 22px rgba(18, 17, 16, 0.22);
transition: background 0.25s ease;
}
.carrusel-flecha:hover { background: var(--amarillo); }
.carrusel-flecha--izq { left: 8px; }
.carrusel-flecha--der { right: 8px; }
/* ---------- Experiencias desarrolladas ---------- */
.exp-foto { overflow: hidden; margin: 0; }
.exp-foto img { width: 100%; height: 460px; object-fit: cover; transition: transform 0.6s ease; }
.exp-foto:hover img { transform: scale(1.04); }
.exp-titulo { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 10px 0 16px; }
.exp-lista { list-style: none; margin-top: 20px; }
.exp-lista li { padding: 9px 0 9px 26px; position: relative; font-size: 0.96rem; color: var(--gris-texto); border-bottom: 1px solid rgba(18, 17, 16, 0.08); }
.exp-lista li:last-child { border-bottom: none; }
.exp-lista li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 10px; height: 10px; background: var(--flame); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.exp-contacto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 36px; }
.exp-dato { background: rgba(255, 255, 255, 0.12); padding: 24px 22px; }
.exp-dato strong { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; margin-bottom: 8px; }
.exp-dato span { font-size: 0.88rem; line-height: 1.6; opacity: 0.9; }
@media (max-width: 860px) { .exp-contacto { grid-template-columns: 1fr; } .exp-foto img { height: 320px; } }
/* ---------- Historia · formato editorial ---------- */
.edit-hero { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--negro); }
.edit-hero .fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.5) contrast(0.95) brightness(0.72); }
.edit-hero::after { content: ""; position: absolute; inset: 0; background: rgba(32, 22, 10, 0.38); }
.edit-hero .contenido { position: relative; z-index: 2; color: #fff; padding: 150px 24px 70px; max-width: 1040px; }
.edit-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); color: #fff; margin: 16px 0 22px; }
.edit-hero .lectura { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.78rem; }
.edit-hero--natural .fondo { filter: brightness(0.68); }
.edit-hero--natural::after { background: rgba(10, 25, 18, 0.28); }
.edit-lista { list-style: none; max-width: 700px; margin: 0 auto; }
.edit-lista li { padding: 16px 0 16px 34px; border-bottom: 1px solid rgba(18, 17, 16, 0.1); position: relative; font-size: 1rem; line-height: 1.7; }
.edit-lista li::before { content: ""; position: absolute; left: 4px; top: 24px; width: 12px; height: 12px; background: var(--verde-jade); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.edit-lista li strong { color: var(--verde-loro); }
.barra-lectura { position: fixed; inset: 0 0 auto 0; z-index: 920; background: #fff; transform: translateY(-100%); transition: transform 0.35s ease; box-shadow: 0 2px 14px rgba(18, 17, 16, 0.1); }
.barra-lectura.visible { transform: translateY(0); }
body.leyendo .header { transform: translateY(-100%); }
.barra-lectura__int { max-width: 1360px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* botón para volver al inicio sin tener que subir hasta el menú */
.barra-lectura__inicio { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 16px; font-size: 0.66rem; } /* el botón de la casa (.btn .btn--postal), sólo más compacto para la barra */
.barra-lectura__inicio svg { flex: none; }
.barra-lectura .leyendo { min-width: 0; }
.barra-lectura .leyendo strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-lectura .leyendo small { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.62rem; color: var(--gris-texto); }
.barra-lectura .leyendo strong { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; color: var(--negro); }
.barra-lectura .compartir { display: flex; align-items: center; gap: 14px; }
.barra-lectura .compartir span { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.66rem; color: var(--gris-texto); }
.barra-lectura .compartir a { color: var(--negro); cursor: pointer; display: inline-flex; transition: color 0.2s ease; }
.barra-lectura .compartir a:hover { color: var(--flame); }
.barra-lectura .compartir a.copiado { color: var(--verde-loro); }
.barra-lectura__progreso { height: 3px; background: rgba(18, 17, 16, 0.08); }
.barra-lectura__progreso span { display: block; height: 100%; width: 100%; background: var(--flame); transform: scaleX(0); transform-origin: left center; } /* transform en vez de width: no reflowea en cada scroll */
.edit-cuerpo { background: #fdfbf7; padding-bottom: 40px; }
.edit-intro { max-width: 800px; margin: 0 auto; text-align: center; padding: 90px 24px 30px; }
.edit-intro h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
.edit-ornamento { display: block; width: 190px; margin: 30px auto 26px; color: var(--negro); }
.edit-intro p { font-size: 1.06rem; line-height: 1.95; }
.edit-bloque { max-width: 820px; margin: 0 auto; padding: 30px 24px; }
.edit-bloque .kicker { font-size: 1.02rem; margin-bottom: 12px; color: var(--ambar); }
.edit-bloque p { font-size: 1.04rem; line-height: 1.95; }
.edit-bloque a { color: var(--turquesa); border-bottom: 1px solid rgba(0, 75, 141, 0.4); }
.edit-foto-ancha { width: min(1560px, 96vw); margin: 44px auto; }
.edit-foto-ancha img { width: 100%; max-height: 70vh; object-fit: cover; }
.edit-foto { max-width: 700px; margin: 40px auto; padding: 0 24px; }
.edit-foto img { width: 100%; max-height: 60vh; object-fit: cover; }
.edit-foto figcaption, .edit-foto-ancha figcaption { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; color: var(--gris-texto); margin-top: 10px; }
.edit-cita { max-width: 940px; margin: 64px auto; padding: 0 24px; font-family: var(--display); font-weight: 700; text-transform: uppercase; color: var(--flame); font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -0.01em; }
.edit-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 960px; margin: 44px auto; padding: 0 24px; }
.edit-galeria img { width: 100%; height: 380px; object-fit: cover; }
.edit-galeria figcaption { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; color: var(--gris-texto); margin-top: 10px; }
@media (max-width: 720px) { .edit-galeria { grid-template-columns: 1fr; } }
.edit-relacionado { background: var(--crema-oscura); }
.edit-relacionado__titulo { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 10px 0 36px; }
.edit-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.edit-card { position: relative; overflow: hidden; aspect-ratio: 4 / 4.6; display: block; }
.edit-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.edit-card:hover img { transform: scale(1.05); }
.edit-card .texto { position: absolute; inset: auto 0 0 0; padding: 18px 18px 16px; background: linear-gradient(transparent, rgba(18, 17, 16, 0.85)); color: #fff; }
.edit-card small { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.64rem; color: var(--amarillo); }
.edit-card span { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; }
@media (max-width: 860px) {
.edit-cards { grid-template-columns: 1fr; }
.barra-lectura .leyendo strong { font-size: 0.7rem; }
.barra-lectura__int { gap: 12px; padding: 12px 16px; }
.barra-lectura__inicio { padding: 8px 12px; }
.barra-lectura__inicio span { display: none; } /* en celular sólo la flecha, para que quepa el título */
}
/* ---------- Doble contorno en todos los controles del sitio ---------- */
.pais-tab {
border: 2px solid rgba(18, 17, 16, 0.35);
border-radius: 12px;
box-shadow: 3px 4px 0 -1px rgba(18, 17, 16, 0.35);
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.pais-tab:hover { border-color: var(--amarillo); box-shadow: 3px 4px 0 -1px var(--amarillo); }
.pais-tab.activo { border-color: var(--amarillo); box-shadow: 3px 4px 0 -1px var(--ambar); }
.pais-tab:active { transform: translate(2px, 3px); box-shadow: 0 0 0 -1px transparent; }
.filtro {
border-width: 2px;
border-radius: 12px;
box-shadow: 3px 4px 0 -1px rgba(18, 17, 16, 0.3);
}
.filtro:hover { box-shadow: 3px 4px 0 -1px var(--negro); }
.filtro.activo { box-shadow: 3px 4px 0 -1px var(--negro); }
.filtro:active { transform: translate(2px, 3px); box-shadow: 0 0 0 -1px transparent; }
.nav .nav__tienda {
border-width: 2px;
border-radius: 10px;
box-shadow: 2px 3px 0 -1px var(--verde-jade);
}
.header.solido .nav .nav__tienda { box-shadow: 2px 3px 0 -1px var(--verde-jade); }
.age-gate__enviar {
border: 2px solid var(--oro);
border-radius: 12px;
box-shadow: 3px 4px 0 -1px var(--oro);
}
.age-gate__enviar:active { transform: translate(2px, 3px); box-shadow: 0 0 0 -1px transparent; }
.carrusel-flecha {
border: 2px solid var(--negro);
box-shadow: 3px 4px 0 -1px var(--negro);
}
.carrusel-flecha:hover { background: var(--amarillo); }
.carrusel-flecha:active { transform: translateY(-50%) translate(2px, 3px); box-shadow: 0 0 0 -1px transparent; }
.panel-carrito__pie .btn { width: 100%; }
/* ---------- Postales de experiencias (collage tropical) ---------- */
.postales {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px 22px;
padding-top: 18px;
}
.postal {
--rot: 0deg;
position: relative;
isolation: isolate;
width: 252px;
background: rgb(239, 221, 196);
border-radius: 4px;
padding: 20px;
box-shadow: 0 16px 36px rgba(18, 17, 16, 0.2);
transform: rotate(var(--rot));
text-align: left;
}
.postal:nth-child(even) { margin-top: 44px; }
.postal img { width: 100%; height: 232px; object-fit: cover; display: block; }
.postal__nombre { display: block; font-family: var(--script); font-size: 1.6rem; color: var(--negro); margin-top: 10px; line-height: 1.1; }
/* Estampillas con orilla perforada */
.postal__sello {
position: absolute;
top: -16px;
right: -14px;
z-index: 2;
width: 64px;
padding: 8px 6px 5px;
transform: rotate(8deg);
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
background-image: radial-gradient(circle at 4px 4px, transparent 3.2px, currentColor 3.4px);
background-size: 12px 12px;
background-position: -4px -4px;
box-shadow: 0 6px 14px rgba(18, 17, 16, 0.25);
}
.postal__sello--mango { color: var(--amarillo); }
.postal__sello--coral { color: var(--flame); }
.postal__sello--isla { color: var(--island); }
.postal__sello img { width: 34px !important; height: 34px !important; object-fit: contain; }
.postal__sello i { font-style: normal; font-family: var(--cond); font-size: 0.44rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--negro); white-space: nowrap; }
@media (max-width: 640px) {
.postal { width: min(78vw, 300px); }
.postal:nth-child(even) { margin-top: 0; }
}
/* ---------- Tipografías de las postales ---------- */
#postales h2 {
font-family: "Advercase", "DM Serif Display", "Playfair Display", serif;
font-weight: 400;
letter-spacing: -0.018em;
line-height: 0.98;
}
#postales .seccion__cabeza p { font-family: "Questrial", var(--cond), sans-serif; }
.postal__nombre {
font-family: "Advercase", "DM Serif Display", serif;
font-size: 22px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
display: block;
margin: 14px 0 8px;
color: var(--negro);
}
.postal__desc {
font-family: "Questrial", var(--cond), sans-serif;
font-size: 15px;
line-height: 1.28;
font-weight: 500;
color: rgba(0, 0, 0, 0.7);
margin: 0;
}
.postal__nota {
position: absolute;
left: 33px;
top: 58%;
transform: rotate(-5deg);
font-family: "Freehand", var(--script), cursive;
font-style: normal;
font-size: 26px;
line-height: 1.25;
color: #fff;
background: none;
padding: 0;
text-shadow: 0 1px 10px rgba(18, 17, 16, 0.5);
pointer-events: none;
z-index: 1;
}
.postal__nota--coral { transform: rotate(-5deg); }
/* ---------- Experiencias: bloque clavado + postales cruzando ---------- */
.exp-pin__alto { height: 380vh; position: relative; overflow: clip; }
.exp-pin__pantalla { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.exp-pin__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.exp-pin__pantalla::before { content: ""; position: absolute; inset: 0; background: rgba(18, 17, 16, 0.32); z-index: 1; }
.exp-pin__titulares {
position: relative;
z-index: 2;
height: 100%;
max-width: 1560px;
margin: 0 auto;
padding: 112px 32px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0;
color: #fff;
}
.exp-pin__titulares hr { border: none; border-top: 2px solid #fff; margin: 0; width: 100%; align-self: stretch; }
.exp-pin__titulares h2 {
font-family: "Advercase", "DM Serif Display", "Playfair Display", serif;
font-weight: 400;
text-transform: uppercase;
font-size: min(7.2vw, 11vh, 107px);
line-height: 1.25;
letter-spacing: 0;
text-align: center;
color: #fff;
margin: 0;
transform-origin: center;
}
.exp-pin__titulares h2 em { font-style: italic; font-family: inherit; }
.exp-grupo { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; align-self: center; width: fit-content; max-width: 92%; padding: 12px 0 36px; overflow: visible; }
.exp-grupo:first-of-type { padding-bottom: 40px; }
.exp-p {
font-family: "Questrial", var(--cond), sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.2;
color: #fff;
margin: 0;
width: 100%;
text-align: left;
overflow: hidden;
}
.exp-p--der { text-align: right; }
.exp-pin__cta { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; z-index: 2; }
@media (max-width: 820px) { .exp-pin__cta { bottom: 26px; } }
.exp-pin__tarjetas {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
will-change: transform;
}
.exp-pin__tarjetas .postal {
position: absolute;
left: 50%;
top: 50%;
width: min(336px, 33vw);
pointer-events: auto;
}
.exp-pin__tarjetas .postal > img:not(.postal__estampa) { height: min(252px, 24vw); }
.exp-pin__tarjetas .postal__nombre { font-size: 22px; }
.exp-pin__tarjetas .postal__desc { font-size: 15px; line-height: 1.25; }
@media (max-width: 820px) {
.exp-pin__titulares { padding: 112px 16px; gap: 12px; justify-content: center; }
.exp-pin__titulares hr { width: 100%; border-top-width: 2px; margin: 0; }
.exp-pin__titulares h2 { font-size: 35px; line-height: 1.25; text-align: left; }
.exp-grupo { width: 100%; max-width: 100%; align-self: stretch; padding: 0 0 12px; gap: 8px; }
.exp-grupo:first-of-type { padding-bottom: 16px; }
.exp-p, .exp-p--der { font-size: 15px; line-height: 1.2; margin: 0; max-width: 100%; text-align: left; }
.exp-pin__tarjetas .postal { width: min(346px, 92vw); padding: 16px; }
.exp-pin__tarjetas .postal > img:not(.postal__estampa) { height: min(310px, 68vw); }
.exp-pin__tarjetas .postal__nombre { font-size: 20px; margin: 12px 0 6px; }
.exp-pin__tarjetas .postal__desc { font-size: 14px; }
.postal__nota { font-size: 21px; left: 22px; }
.postal__estampa { width: 74px !important; top: -18px; right: -12px; }
}
/* Estampillas reales (PNG) sobre las postales */
.postal img.postal__estampa, .exp-pin__tarjetas .postal img.postal__estampa {
position: absolute;
top: -26px;
right: -22px;
width: 96px !important;
height: auto !important;
transform: rotate(9deg);
z-index: 2;
filter: drop-shadow(0 6px 12px rgba(18, 17, 16, 0.3));
pointer-events: none;
}
/* variantes de posición: que no caigan siempre en la misma esquina ni tapen el texto de abajo.
Misma especificidad que la regla base (.exp-pin__tarjetas .postal img.postal__estampa) para ganarle. */
.exp-pin__tarjetas .postal img.postal__estampa--izq { right: auto; left: -22px; transform: rotate(-9deg); }
.exp-pin__tarjetas .postal img.postal__estampa--der-baja { top: 118px; right: -30px; transform: rotate(6deg); }
.exp-pin__tarjetas .postal img.postal__estampa--izq-baja { top: 136px; right: auto; left: -26px; transform: rotate(-7deg); }
/* Grano provisional en las postales (hasta tener escaneos con textura horneada) */
.postal::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 220px 220px;
opacity: 0.11;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 4;
}
/* ---------- Título de contorno ---------- */
.hero-contorno { min-height: 100vh; }
.hero-contorno .fondo { filter: brightness(0.82); }
.hero-contorno::after { background: rgba(18, 17, 16, 0.18); }
.edit-hero h1.titulo-contorno, .titulo-contorno {
font-family: "Advercase", "DM Serif Display", "Playfair Display", serif;
font-weight: 400;
font-size: clamp(3.6rem, 14.5vw, 13.5rem);
line-height: 0.9;
text-transform: uppercase;
letter-spacing: 0.01em;
color: transparent;
-webkit-text-stroke: 2.5px #fff;
text-stroke: 2.5px #fff;
}
@media (max-width: 820px) {
.titulo-contorno { -webkit-text-stroke: 1.5px #fff; }
}
/* ---------- Tipografía del home en todos los héroes ---------- */
.edit-hero h1 {
font-family: "Advercase", "DM Serif Display", "Playfair Display", serif;
font-weight: 400;
letter-spacing: 0;
}
.hero-titulo {
font-family: "Advercase", "DM Serif Display", "Playfair Display", serif !important;
font-weight: 400 !important;
letter-spacing: 0;
}
.hero-titulo em { font-style: italic; }
.hero-titulo + p { font-family: "Questrial", var(--cond), sans-serif; font-weight: 500; }
/* ---------- Cócteles · mosaico ---------- */
.filtro-frase { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 8px; }
.filtro-frase__texto { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.35; color: var(--negro); max-width: 900px; }
.filtro-frase__texto > span { margin-right: 10px; }
.filtro-drop { display: inline-block; position: relative; margin-right: 10px; }
.filtro-frase__linea { display: block; } /* "cualquier destilado" baja a su propio renglón */
.filtro-drop__btn { font: inherit; color: var(--coral); background: none; border: none; cursor: pointer; text-transform: uppercase; padding: 0; }
.filtro-drop__btn i { font-style: normal; font-size: 0.7em; }
.filtro-drop__panel {
position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
background: #fff; box-shadow: 0 24px 50px rgba(18, 17, 16, 0.22); padding: 18px 26px;
display: none; min-width: 340px;
}
.filtro-drop.abierto .filtro-drop__panel { display: block; }
.filtro-drop__panel button {
display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.15rem;
padding: 7px 0; color: var(--negro);
}
.filtro-drop__panel button:hover, .filtro-drop__panel button.activo { color: var(--coral); }
.sello-suerte { position: relative; width: clamp(130px, 13vw, 190px); aspect-ratio: 1; flex: none; pointer-events: none; }
.sello-suerte svg { position: absolute; inset: 0; animation: giraSello 16s linear infinite; }
.sello-suerte text { font-family: var(--cond); font-size: 10.5px; letter-spacing: 0; fill: var(--negro); }
.sello-suerte .loro img { width: 38%; height: 38%; object-fit: contain; position: absolute; inset: 0; margin: auto; }
@keyframes giraSello { to { transform: rotate(360deg); } }
.grid-cocteles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 34px calc(50% - 50vw) 0; } /* cuatro por fila */
.tarjeta-coctel {
position: relative; display: flex; flex-direction: column;
min-height: 520px; padding: 28px 26px 0; overflow: hidden;
background: var(--crema-oscura); border: none; box-shadow: none; border-radius: 0; cursor: pointer;
}
.t--forest { background: var(--verde-jade); color: #fff; }
.t--tomato { background: var(--coral); color: #fff; }
.t--carrot { background: var(--flame); color: #fff; }
.t--sunshine { background: var(--amarillo); color: var(--negro); }
.t--kiwi { background: var(--verde-claro); color: #fff; }
.tarjeta-coctel__cabeza { position: relative; z-index: 2; order: -1; background: none !important; padding: 0; }
.tarjeta-coctel__cabeza.oro, .tarjeta-coctel__cabeza.ambar { background: none !important; }
.tarjeta-coctel__cabeza .base { font-family: var(--cond); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.66rem; opacity: 0.85; color: inherit; }
.tarjeta-coctel h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.25rem, 1.5vw, 1.7rem); line-height: 1.05; margin: 6px 0 0; color: inherit; }
.tarjeta-coctel__foto { order: 1; flex: 1; margin: 20px -26px 0; height: auto; position: relative; }
.tarjeta-coctel__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.35s ease; }
.tarjeta-coctel__cuerpo {
position: absolute; inset: 106px 26px 24px; z-index: 2; display: flex; flex-direction: column;
opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;
}
.tarjeta-coctel__cuerpo ul { list-style: none; margin: 0; padding: 0; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; line-height: 1.95; color: inherit; }
/* la receta vive en la página del cóctel; en la tarjeta sólo ingredientes y botón abajo */
.tarjeta-coctel__btn { margin-top: auto; align-self: flex-start; flex: 0 0 auto; }
.tarjeta-coctel__cuerpo ul { margin-bottom: 14px; }
.tarjeta-coctel:hover .tarjeta-coctel__foto img, .tarjeta-coctel.abierta .tarjeta-coctel__foto img { opacity: 0.1; }
.tarjeta-coctel:hover .tarjeta-coctel__cuerpo, .tarjeta-coctel.abierta .tarjeta-coctel__cuerpo { opacity: 1; visibility: visible; }
.tarjeta-coctel.elegida { outline: 6px solid var(--negro); outline-offset: -6px; }
@media (max-width: 1280px) { .grid-cocteles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1080px) { .grid-cocteles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
.grid-cocteles { grid-template-columns: 1fr; }
.filtro-frase { flex-direction: column; }
.tarjeta-coctel { min-height: 0; padding-bottom: 0; }
.tarjeta-coctel__cuerpo { position: static; inset: auto; opacity: 1; visibility: visible; display: none; padding: 18px 0 26px; }
.tarjeta-coctel.abierta .tarjeta-coctel__cuerpo { display: flex; }
.tarjeta-coctel.abierta .tarjeta-coctel__foto { display: none; }
}
.seccion:has(.grid-cocteles) { padding-bottom: 0; }
/* Banner merch */
.banner-merch { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; }
.banner-merch > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(0.6); }
.banner-merch__texto { position: relative; z-index: 2; color: #fff; max-width: var(--ancho); margin: 0 auto; padding: 70px 24px; width: 100%; }
.banner-merch__texto h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); margin: 10px 0 14px; }
.banner-merch__texto p { max-width: 460px; margin-bottom: 24px; }
/* FAQ teaser */
.faq-teaser { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.faq-teaser figure { margin: 0; }
.faq-teaser img { width: 100%; height: 560px; object-fit: cover; }
.faq-teaser h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin: 10px 0 26px; }
.faq-teaser details { border-top: 1px solid rgba(18, 17, 16, 0.18); padding: 16px 0; }
.faq-teaser summary { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; cursor: pointer; list-style: none; position: relative; padding-right: 30px; }
.faq-teaser summary::after { content: "+"; position: absolute; right: 2px; top: 0; color: var(--coral); font-size: 1.3rem; }
.faq-teaser details[open] summary::after { content: "−"; }
.faq-teaser details p { margin-top: 10px; color: var(--gris-texto); }
@media (max-width: 860px) { .faq-teaser { grid-template-columns: 1fr; } .faq-teaser img { height: 380px; } }
/* ---------- Detalle de cóctel ---------- */
.det-hero .contenido { text-align: left; max-width: var(--ancho); width: 100%; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.det-hero__contenido h1 { font-size: clamp(2.8rem, 6.5vw, 5.6rem); margin: 12px 0 18px; }
.det-hero__bajada { font-family: "Questrial", var(--cond), sans-serif; max-width: 520px; font-size: 1.05rem; line-height: 1.6; margin-bottom: 28px; }
.det-necesitas { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.det-necesitas h2 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 10px 0 22px; }
.det-ing-titulo { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.78rem; border-bottom: 2px solid var(--flame); display: inline-block; padding-bottom: 6px; margin-bottom: 18px; }
.det-ingredientes { list-style: none; }
.det-ingredientes li { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; padding: 9px 0; }
.det-porciones { display: flex; align-items: stretch; gap: 0; margin-top: 26px; }
.det-porciones .stepper { display: flex; align-items: center; gap: 14px; border: 2px solid var(--negro); border-radius: 12px 0 0 12px; padding: 0 18px; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; }
.det-porciones .stepper button { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--ambar); padding: 4px 6px; }
.det-porciones .stepper b { min-width: 18px; text-align: center; font-size: 1rem; }
.det-porciones .btn { border-radius: 0 12px 12px 0; }
.det-foto img { width: 100%; height: 560px; object-fit: cover; }
.det-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.det-paso { padding: 34px 28px 40px; min-height: 320px; }
.det-paso small { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.68rem; }
.det-paso h3 { font-family: "Advercase", "DM Serif Display", serif; font-weight: 400; text-transform: uppercase; font-size: 2rem; margin: 10px 0 14px; color: inherit; }
.det-paso p { font-size: 0.95rem; line-height: 1.6; color: inherit; }
.det-cata { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.det-cata h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 10px 0 18px; }
.det-cata--invertida { grid-template-columns: 1.1fr 1fr; }
.det-social { background: var(--verde-jade); color: var(--crema); padding: clamp(80px, 8vw, 120px) 0; }
.det-social__int { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.det-social h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); margin: 10px 0 14px; }
.det-social p { max-width: 420px; }
.det-social__iconos { display: flex; gap: 18px; margin: 22px 0; }
.det-social__iconos a { color: #fff; }
.det-social__iconos a:hover { color: var(--amarillo); }
.det-social__tag { font-family: var(--display); font-weight: 700; text-transform: uppercase; color: var(--amarillo); font-size: 1.4rem; letter-spacing: 0.04em; }
.det-social__foto { margin: 0; }
.det-social__foto img { width: min(430px, 90%); transform: rotate(4deg); border: 12px solid #fdfaf1; border-bottom-width: 52px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3); margin: 0 auto; display: block; }
@media (max-width: 900px) {
.det-necesitas, .det-cata, .det-cata--invertida, .det-social__int { grid-template-columns: 1fr; gap: 34px; }
.det-pasos { grid-template-columns: 1fr 1fr; }
.det-foto img { height: 380px; }
}
@media (max-width: 560px) { .det-pasos { grid-template-columns: 1fr; } .det-paso { min-height: 0; } }
/* Hero en video */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } .hero__slides { background: url("/assets/img/fotos/ron-potosi-huasteca-portada.webp") center/cover; } }
/* Tienda: texto siempre legible sobre el llenado amarillo */
.header .nav a.nav__tienda:hover { color: var(--negro); }
/* ---------- Banda "De venta en" (patrón PiFi) ---------- */
.banda-venta {
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(18, 17, 16, 0.07);
padding: 11px 16px;
margin-top: 54px;
display: flex;
align-items: center;
gap: 8px 14px;
flex-wrap: wrap;
}
.banda-venta__label { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.62rem; color: var(--gris-texto); flex: none; }
.banda-venta__logos { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; flex: 1; justify-content: space-evenly; }
.banda-venta__logos img { height: 24px; width: auto; }
.banda-venta__logos img[alt="Walmart"] { height: 17px; }
.banda-venta__logos img[alt="Soriana"] { height: 22px; }
.banda-venta__logos img[alt="Bodegas Alianza"] { height: 24px; }
.banda-venta__logos img[alt="HEB"] { height: 22px; }
.banda-venta__logos img[alt="La Comer"] { height: 20px; }
.banda-venta__logos img[alt="Bodega Aurrerá"] { height: 36px; }
.banda-venta__texto { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 0.86rem; color: #1a3c8f; }
@media (max-width: 720px) {
.banda-venta { padding: 14px 18px; gap: 10px 18px; justify-content: center; text-align: center; }
.banda-venta__logos { gap: 22px 28px; }
.banda-venta__logos img { height: 24px; }
.banda-venta__logos img[alt="Bodega Aurrerá"] { height: 36px; }
}
/* ---------- Lotería flotante (botella + cartas reales al aire) ---------- */
.lote-flota { overflow: visible; }
.lote-flota__escena {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 24px;
height: calc(100vh - 62px);
box-sizing: border-box;
padding: 10vh 10vw;
max-width: none;
margin: 0;
}
.lote-flota__texto { max-width: 470px; margin: 0 auto; text-align: center; }
.lf-ornamento { display: block; width: 120px; margin: 0 auto 20px; color: var(--flame); }
.lf-ornamento--abajo { margin: 28px auto 0; }
.lf-kicker { font-family: var(--cond); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: clamp(0.78rem, 0.95vw, 0.92rem); color: var(--vino); margin-bottom: 12px; }
.lote-flota__texto h2 { font-size: clamp(2.3rem, 3.8vw, 3.6rem); line-height: 1.0; margin-bottom: 20px; }
.lf-cuerpo { font-size: 1.02rem; line-height: 1.8; color: var(--gris-texto); margin-bottom: 16px; }
.lote-flota__texto .btn { margin-top: 10px; }
.lote-flota__cluster {
position: relative;
height: 100%;
--rx: clamp(148px, 38%, 268px);
--ry: clamp(150px, 34%, 236px);
}
/* El centrado va con `translate`, la propiedad independiente, NO con `transform`.
Con transform, GSAP lo leía y lo convertía a píxeles fijos (x: -95.34px en vez de -50%),
congelando la mitad del ancho del momento en que lo leyó. Cuando la imagen terminaba de
cargar o cambiaba el ancho, el centrado quedaba viejo y la botella se recorría.
Así GSAP se queda con `transform` para su escala y su parallax, sin tocar el centrado. */
.lote-flota__bwrap {
position: absolute; left: 50%; top: 50%;
translate: -50% -50%;
z-index: 6;
pointer-events: none;
}
/* Capa intermedia: es la única que GSAP anima (entrada y parallax). Así la de arriba
conserva su centrado y la imagen conserva su flotado de keyframes, sin pisarse. */
.lote-flota__banim { line-height: 0; }
/* sombra de piso: se queda quieta mientras la botella flota encima */
.lote-flota__bwrap::after {
content: "";
position: absolute;
left: 50%;
bottom: -18px;
width: 78%;
height: 26px;
translate: -50% 0;
background: radial-gradient(closest-side, rgba(18, 17, 16, 0.34), rgba(18, 17, 16, 0));
z-index: -1;
pointer-events: none;
}
.lote-flota__botella {
height: min(46vh, 452px); width: auto;
max-width: min(28vw, 266px);
animation: loteFlota 4.6s ease-in-out infinite alternate;
}
@keyframes loteFlota { from { transform: translateY(-8px); } to { transform: translateY(10px); } }
.lote-carta {
position: absolute;
left: calc(50% + var(--fx) * var(--rx));
top: calc(50% + var(--fy) * var(--ry));
translate: -50% -50%;
}
.lc-rot { display: block; transform: rotate(var(--rot)); transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1); }
.lote-carta:hover .lc-rot { transform: rotate(var(--rot)) scale(1.07); }
.lote-carta:hover { z-index: 9 !important; }
.lote-carta { cursor: default; }
.lc-flot {
display: block;
width: clamp(118px, 10.4vw, 178px);
filter: drop-shadow(0 22px 30px rgba(18, 17, 16, 0.25));
animation: loteFlota var(--dur, 3.4s) ease-in-out infinite alternate;
}
.lc-flot img { width: 100%; display: block; }
@media (max-width: 900px) {
.lote-flota__escena { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 62px); padding: 8vh 6vw; }
.lote-flota__texto { min-height: 0; }
.lote-flota__cluster {
height: 470px;
--rx: clamp(96px, 34%, 156px);
--ry: clamp(124px, 30%, 168px);
}
.lote-flota__botella { height: 230px; max-width: 148px; }
.lc-flot { width: 106px; }
}
@media (prefers-reduced-motion: reduce) {
.lote-flota__botella, .lc-flot { animation: none; }
}
/* ---------- Banda "De venta en" (patrón PiFi) ---------- */
.banda-venta {
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(18, 17, 16, 0.07);
padding: 11px 16px;
margin-top: 54px;
display: flex;
align-items: center;
gap: 8px 14px;
flex-wrap: wrap;
}
.banda-venta__label { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.62rem; color: var(--gris-texto); flex: none; }
.banda-venta__logos { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; flex: 1; justify-content: space-evenly; }
.banda-venta__logos img { height: 24px; width: auto; }
.banda-venta__logos img[alt="Walmart"] { height: 17px; }
.banda-venta__logos img[alt="Soriana"] { height: 22px; }
.banda-venta__logos img[alt="Bodegas Alianza"] { height: 24px; }
.banda-venta__logos img[alt="HEB"] { height: 22px; }
.banda-venta__logos img[alt="La Comer"] { height: 20px; }
.banda-venta__logos img[alt="Bodega Aurrerá"] { height: 36px; }
.banda-venta__texto { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 0.86rem; color: #1a3c8f; }
@media (max-width: 720px) {
.banda-venta { padding: 14px 18px; gap: 10px 18px; justify-content: center; text-align: center; }
.banda-venta__logos { gap: 22px 28px; }
.banda-venta__logos img { height: 24px; }
.banda-venta__logos img[alt="Bodega Aurrerá"] { height: 36px; }
}
/* ---------- Banda "De venta en" (patrón PiFi) ---------- */
.banda-venta {
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(18, 17, 16, 0.07);
padding: 11px 16px;
margin-top: 54px;
display: flex;
align-items: center;
gap: 8px 14px;
flex-wrap: wrap;
}
.banda-venta__label { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.62rem; color: var(--gris-texto); flex: none; }
.banda-venta__logos { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; flex: 1; justify-content: space-evenly; }
.banda-venta__logos img { height: 24px; width: auto; }
.banda-venta__logos img[alt="Walmart"] { height: 17px; }
.banda-venta__logos img[alt="Soriana"] { height: 22px; }
.banda-venta__logos img[alt="Bodegas Alianza"] { height: 24px; }
.banda-venta__logos img[alt="HEB"] { height: 22px; }
.banda-venta__logos img[alt="La Comer"] { height: 20px; }
.banda-venta__logos img[alt="Bodega Aurrerá"] { height: 36px; }
.banda-venta__texto { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 0.86rem; color: #1a3c8f; }
@media (max-width: 720px) {
.banda-venta { padding: 14px 18px; gap: 10px 18px; justify-content: center; text-align: center; }
.banda-venta__logos { gap: 22px 28px; }
.banda-venta__logos img { height: 24px; }
.banda-venta__logos img[alt="Bodega Aurrerá"] { height: 36px; }
}
/* Grano de papel en superficies de color */
.seccion--amarilla, .seccion--verde, .seccion--turquesa, .seccion--crema-oscura, .seccion--blanca,
.edit-cuerpo, .edit-relacionado, .mega, .det-social {
background-image: var(--papel);
background-size: 240px 240px;
}
/* ---------- Video polaroid del portafolio ---------- */
.split--video { align-items: center; }
.polaroid-video {
width: min(400px, 88%);
margin: 0 auto;
background: rgb(239, 221, 196);
border-radius: 4px;
padding: 16px 16px 18px;
transform: rotate(-3deg);
box-shadow: 0 28px 48px rgba(18, 17, 16, 0.24);
transition: transform 0.35s ease;
position: relative;
isolation: isolate;
}
.polaroid-video:hover { transform: rotate(0deg); }
.polaroid-video::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background-image: var(--papel); background-size: 220px;
mix-blend-mode: multiply; opacity: 0.9; pointer-events: none; z-index: 3;
}
.polaroid-video__marco { position: relative; overflow: hidden; }
.polaroid-video video { width: 100%; aspect-ratio: 3 / 3.5; object-fit: cover; display: block; }
.polaroid-video .postal__nota { top: auto; bottom: 14px; left: 16px; }
.polaroid-video figcaption {
font-family: "Advercase", "DM Serif Display", serif;
text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.03em;
text-align: center; color: #2b2118; margin-top: 14px;
}
@media (max-width: 900px) { .split--video { grid-template-columns: 1fr; } }
/* ---------- Moderat Condensed (del arte oficial de la casa) ---------- */
@font-face { font-family: "Moderat"; src: url("/assets/fonts/moderat-condensed-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Moderat"; src: url("/assets/fonts/moderat-condensed-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Moderat"; src: url("/assets/fonts/moderat-condensed-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* ---------- Página de botella ---------- */
/* Medidas base tomadas a 1512px de ancho de ventana */
.prod-kicker { font-family: var(--cond); font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vino); margin-bottom: 8px; }
.prod-kicker--flame { color: var(--vino); }
.prod-kicker--gris { color: var(--gris-texto); }
.btn.btn--sm { padding: 10px 24px; font-size: 0.75rem; }
.btn.btn--xs { padding: 7px 20px; font-size: 0.66rem; }
/* 1. Hero: banda corta (ref 528px + nav), kicker 16, titulo 40, botella contenida */
.prod-hero { text-align: center; padding: 112px 24px 0; background: #fcfbf7; background-image: var(--papel); background-size: 240px; }
.prod-hero h1 { font-size: 40px; line-height: 1.1; margin-top: 4px; }
.prod-hero__botella { display: block; height: 340px; width: auto; margin: 26px auto 0; filter: drop-shadow(0 26px 30px rgba(18, 17, 16, 0.28)); }
/* 1b. Hero con arte completo (lienzo 1920x850, botella y patrón horneados) */
.prod-hero--foto {
background-image: var(--hero);
background-color: #fff;
background-size: cover;
background-position: 50% 100%;
background-repeat: no-repeat;
height: 100vh;
height: 100svh;
padding: 124px 24px 0;
display: block;
}
.prod-hero--foto h1 { margin-top: 4px; }
.prod-hero--foto .prod-hero__botella { display: none; }
@media (max-width: 900px) {
.prod-hero--foto {
padding: 92px 16px 0;
background-size: auto 91%;
}
.prod-hero--foto .prod-kicker { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 6px; }
}
/* 2. Split 50/50: izq pad 120, contenido 516; der foto llena (ref 756x955) */
.prod-split { display: grid; grid-template-columns: 1fr 1fr; background: #fcfbf7; }
.prod-split__col { display: flex; align-items: center; justify-content: center; padding: 120px; }
.prod-split__texto { max-width: 516px; }
.prod-split__ave { width: 40px; margin-bottom: 19px; }
.prod-split__texto h2 { font-size: 40px; line-height: 1; margin: 0 0 30px; }
.prod-split__texto p { font-size: 16px; line-height: 24px; color: var(--gris-texto); text-align: justify; margin-bottom: 21px; }
.prod-presentacion { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px !important; color: var(--gris-texto); text-align: left !important; margin: 26px 0 22px !important; }
.prod-split__foto { margin: 0; min-height: 720px; position: relative; }
.prod-split__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 3. Cata: pad 120 0, botella 280, titulo 32, kicker dorado, tabla 3 col gap 20, texto 13 */
/* ---------- Cata: panel de color + botella al centro + notas ---------- */
.cata-panel {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
position: relative;
background: #fcfbf7;
background-image: var(--papel);
background-size: 240px;
}
.cata-panel__color {
background: var(--panel, var(--verde-jade));
color: var(--crema);
padding: clamp(60px, 7vw, 96px) clamp(28px, 5vw, 80px);
display: flex;
flex-direction: column;
justify-content: center;
}
.cata-panel__kicker { color: var(--amarillo); margin-bottom: 26px; }
.cata-panel__cifra { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 34px; } /* la etiqueta cierra al pie del número */
.cata-panel__cifra span {
font-family: "Advercase", "DM Serif Display", serif;
font-size: clamp(56px, 8vw, 104px); line-height: 0.85; color: #fff;
}
.cata-panel__cifra small {
font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.18em;
font-size: 12px; color: var(--amarillo); max-width: 10ch; line-height: 1.4; padding-bottom: 0.1em;
}
.cata-ficha { margin: 0; display: grid; gap: 15px; max-width: 34ch; }
.cata-ficha > div { display: grid; grid-template-columns: 11ch 1fr; gap: 14px; align-items: baseline;
border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: 13px; }
.cata-ficha dt { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.14em;
font-size: 10.5px; color: rgba(255, 255, 255, 0.62); }
.cata-ficha dd { margin: 0; font-size: 0.92rem; line-height: 1.4; color: #fff; }
/* la botella flota justo en la unión de los dos lados */
/* Sin filter: drop-shadow. En Safari ese filtro pinta la imagen en una capa aparte y,
sobre un fondo con grano de papel, deja ver un recuadro del tamaño de la botella
(comprobado quitándolo en la página real: el recuadro desaparece). La sombra va como
un óvalo de piso dibujado con degradado, que no usa filtros. */
.cata-panel__botella {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
height: min(78%, 480px); width: auto; z-index: 2;
pointer-events: none;
}
.cata-panel::after {
content: "";
position: absolute;
left: 50%;
top: calc(50% + min(39%, 240px));
width: min(250px, 34vw);
height: 30px;
translate: -50% -50%;
background: radial-gradient(closest-side, rgba(18, 17, 16, 0.42), rgba(18, 17, 16, 0));
z-index: 1;
pointer-events: none;
}
.cata-panel__notas {
padding: clamp(60px, 7vw, 96px) clamp(28px, 5vw, 80px);
padding-left: clamp(120px, 15vw, 220px);
display: flex; flex-direction: column; justify-content: center;
}
.cata-panel__notas h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; margin-bottom: 30px; }
.cata-nota { border-top: 2px solid var(--flame); padding-top: 12px; margin-bottom: 22px; max-width: 34ch; }
.cata-nota:last-child { margin-bottom: 0; }
.cata-nota h3 { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em;
font-size: 12px; margin: 0 0 6px; color: var(--negro); }
.cata-nota p { margin: 0; font-size: 0.97rem; line-height: 1.55; color: var(--gris-texto); }
/* Cómo disfrutarlo */
.cata-servir { padding: clamp(56px, 6vw, 84px) 24px; background: #f5f3ee;
background-image: var(--papel); background-size: 240px; text-align: center; }
.cata-servir h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: 44px; }
.cata-servir__fila { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; max-width: 940px; margin: 0 auto; }
.cata-servir__modo { flex: 1 1 240px; padding: 0 30px; border-left: 1px solid rgba(18, 17, 16, 0.14); }
.cata-servir__modo:first-child { border-left: none; }
.cata-servir__modo h4 { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.18em;
font-size: 12px; margin: 0 0 10px; color: var(--vino); }
.cata-servir__modo p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--gris-texto); }
@media (max-width: 900px) {
.cata-panel { grid-template-columns: 1fr; }
.cata-panel::after { display: none; }
.cata-panel__color { padding-bottom: 120px; }
.cata-panel__botella {
position: static; transform: none; justify-self: center;
height: 330px; margin: -90px auto 0;
}
.cata-panel__notas { padding: 34px 24px 60px; }
.cata-servir__modo { flex: 1 1 100%; border-left: none; border-top: 1px solid rgba(18, 17, 16, 0.14);
padding: 20px 10px 0; margin-top: 20px; }
.cata-servir__modo:first-child { border-top: none; margin-top: 0; padding-top: 0; }
}
.prod-cata { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 120px 0; background: #fcfbf7; background-image: var(--papel); background-size: 240px; }
.prod-cata__botella img { display: block; height: 280px; width: auto; margin: 0 auto; filter: drop-shadow(0 18px 22px rgba(18, 17, 16, 0.22)); }
.prod-cata__info { padding-right: 120px; }
.prod-cata__info h2 { font-size: 32px; line-height: 1; margin-bottom: 20px; }
.prod-cata__info .prod-kicker { margin-bottom: 30px; }
.prod-cata__tabla { display: grid; grid-template-columns: repeat(3, 219px); gap: 20px; }
.prod-cata__tabla h3 { font-family: var(--cond); letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; font-weight: 600; color: var(--negro); margin: 0; }
.prod-cata__tabla p { font-size: 13px; line-height: 1.5; color: var(--gris-texto); margin: 0; }
/* 4. Cocteleria: pad 60 arriba, titulo 32 centrado + kicker gris, card 373, foto 373x404, nombre 21 */
.prod-cocteles { padding: 60px 0 80px; background: #f5f3ee; background-image: var(--papel); background-size: 240px; text-align: center; }
.prod-cocteles h2 { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.prod-cocteles .prod-kicker { margin-bottom: 44px; }
.prod-cocteles__fila { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.prod-coctel { width: 373px; text-align: left; }
.prod-coctel img { width: 373px; height: 404px; object-fit: cover; display: block; }
.prod-coctel__nombre { display: block; font-family: var(--display); font-size: 21px; font-weight: 700; text-transform: uppercase; color: var(--gris-texto); margin: 28px 0 9px; }
.prod-coctel__sub { display: block; font-size: 16px; font-weight: 700; color: var(--negro); margin-bottom: 26px; }
.prod-coctel__nombre:hover, .prod-coctel__sub:hover { color: var(--coral); }
/* cócteles como recorte (mismo lenguaje que "Descubre más productos de la casa") */
.prod-coctel--recorte { width: 282px; text-align: center; }
.prod-coctel--recorte .prod-coctel__foto { display: flex; align-items: flex-end; justify-content: center; height: 185px; }
.prod-coctel--recorte img { width: auto; height: auto; max-width: 100%; max-height: 185px; object-fit: contain; transition: transform 0.3s ease; }
.prod-coctel--recorte:hover img { transform: translateY(-6px); }
.prod-coctel--recorte .prod-coctel__nombre { margin-top: 24px; }
/* vaso en las rocas: 153 px iguala la boca del Jungle Bird; se deja 10% más chico a pedido del cliente */
.prod-coctel--recorte img[src*="en-las-rocas"] { max-height: 111px; } /* conserva la proporción que se aprobó contra el Jungle Bird (60%) */
/* ajustes por bebida sobre la base de 185 px: la copa Old Cuban es ancha y la coupé del Hemingway alta */
.prod-coctel--recorte img[src*="hemingway-daiquiri"] { max-height: 167px; }
.prod-coctel--recorte img[src*="old-cuban"] { max-height: 111px; }
/* va al final del bloque de fichas para ganarle a la regla móvil de las fotos (.prod-coctel img a 373px) */
/* 5. Encuentra: pad 60 0 40, foto oscura, titulo 32 blanco IZQ (margen 160), columnas logo+boton */
.prod-encuentra { position: relative; padding: 150px 0; overflow: hidden; }
.prod-encuentra__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.3); }
.prod-encuentra__int { position: relative; z-index: 2; color: #fff; }
.prod-encuentra__int h2 { color: #fff; font-size: 32px; line-height: 1.15; margin: 0 0 14px 160px; }
.prod-encuentra__sub { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; line-height: 1.7; margin: 0 0 40px 160px; color: rgba(255, 255, 255, 0.9); }
.prod-encuentra__cta { display: inline-block; margin-left: 160px; }
/* 6. Descubre mas: pad 33 0 80, titulo 30 centrado, items 282, botella 139, textos 10-12 */
.prod-mas { padding: 33px 0 80px; background: #f5f3ee; background-image: var(--papel); background-size: 240px; text-align: center; }
.prod-mas h2 { font-size: 30px; line-height: 1.2; margin-bottom: 56px; }
.prod-mas__fila { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.prod-mas__item { width: 282px; }
.prod-mas__item img { display: block; height: 139px; width: auto; margin: 0 auto 20px; transition: transform 0.3s ease; }
.prod-mas__item:hover img { transform: translateY(-6px); }
.prod-mas__item small { display: block; font-family: var(--cond); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-texto); }
.prod-mas__item h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 2px 0 8px; }
.prod-mas__item p { font-size: 11px; line-height: 1.3; color: var(--negro); max-width: 215px; margin: 0 auto 14px; }
/* 7. Historias: pad 80 100 110, titulo 32 + sub 16 centrados, 4 cards 282, foto 282x135, caption 12 */
.prod-historias { padding: 80px 100px 110px; background: #fcfbf7; }
.prod-historias h2 { font-size: 32px; line-height: 1; text-align: center; margin-bottom: 20px; }
.prod-historias .prod-kicker { text-align: center; font-weight: 500; margin-bottom: 70px; }
.prod-historias__fila { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.prod-historia { width: 282px; display: flex; flex-direction: column; align-items: flex-start; }
.prod-historia img { width: 282px; height: 135px; object-fit: cover; display: block; margin-bottom: 15px; }
.prod-historia__titulo { font-family: var(--cond); letter-spacing: 0.04em; font-size: 13px; font-weight: 700; line-height: 1.4; text-transform: uppercase; color: var(--negro); margin-bottom: 16px; min-height: 50px; }
.prod-historia__titulo:hover { color: var(--coral); }
/* 8. Suscribete: form 508 + botellas (alto 194) + panel lema */
.prod-suscribe { display: flex; align-items: center; gap: 44px; padding: 70px 90px; background: #fcfbf7; background-image: var(--papel); background-size: 240px; }
.prod-suscribe__form { width: 508px; flex-shrink: 0; }
.prod-suscribe__form h2 { font-size: 32px; line-height: 1; margin-bottom: 7px; }
.prod-suscribe__form .prod-kicker { font-weight: 600; margin-bottom: 16px; }
.prod-form { display: grid; grid-template-columns: 249px 249px; gap: 10px; }
.prod-form input { height: 40px; border: 1px solid rgba(18, 17, 16, 0.25); border-radius: 3px; background: #fff; padding: 8px 16px; font-family: var(--cond); font-size: 15px; }
.prod-form input:focus { outline: 2px solid var(--flame); border-color: var(--flame); }
.prod-form .btn { justify-self: start; }
.prod-form__gracias { font-family: var(--display); font-weight: 700; text-transform: uppercase; color: var(--verde-loro); }
.prod-suscribe__botellas { display: flex; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.prod-suscribe__botellas img { height: 172px; width: auto; }
.prod-suscribe__panel { flex: 1; align-self: stretch; min-height: 194px; background: var(--verde-jade); background-image: var(--papel); display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; padding: 30px 56px; gap: 10px; }
.prod-suscribe__panel small { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; color: var(--amarillo); }
.prod-suscribe__panel span { font-family: var(--display); text-transform: uppercase; font-size: 28px; line-height: 1.1; color: var(--crema); }
@media (max-width: 1240px) {
.prod-split__col { padding: 70px 48px; }
.prod-cata__info { padding-right: 48px; }
.prod-cata__tabla { grid-template-columns: repeat(3, 1fr); }
.prod-historias { padding: 80px 40px 100px; }
.prod-suscribe { flex-wrap: wrap; padding: 60px 40px; }
}
@media (max-width: 900px) {
.prod-hero { padding-top: 96px; }
.prod-hero h1 { font-size: 32px; }
.prod-hero.prod-hero--foto h1 { font-size: clamp(17px, 4.9vw, 30px); white-space: nowrap; }
.prod-hero__botella { height: 280px; }
.prod-split { grid-template-columns: 1fr; }
.prod-split__col { padding: 60px 24px; }
.prod-split__foto { min-height: 380px; }
.prod-cata { grid-template-columns: 1fr; gap: 44px; padding: 70px 24px; }
.prod-cata__info { padding-right: 0; }
.prod-cata__tabla { grid-template-columns: 1fr; gap: 18px; }
.prod-cata__tabla h3 { margin-bottom: -12px; }
.prod-coctel, .prod-coctel img { width: min(373px, 100%); }
.prod-encuentra { padding: 90px 0; }
.prod-encuentra__int h2, .prod-encuentra__sub { margin-left: 24px; }
.prod-encuentra__cta { margin-left: 24px; }
.prod-historias { padding: 70px 24px 90px; }
.prod-suscribe { padding: 60px 24px; gap: 36px; }
.prod-suscribe__form { width: 100%; }
.prod-form { grid-template-columns: 1fr; }
.prod-form input { width: 100%; }
.prod-suscribe__botellas { width: 100%; justify-content: center; }
.prod-suscribe__panel { width: 100%; align-items: center; text-align: center; }
}
/* ---------- Colección de rones ---------- */
.col-hero { text-align: center; padding: 130px 24px 70px; background: #fcfbf7; background-image: var(--papel); background-size: 240px; }
.col-hero__logo { width: 76px; margin: 0 auto 22px; display: block; }
.col-hero h1 { font-size: 40px; line-height: 1.1; margin-bottom: 22px; color: var(--negro); }
.col-hero p { max-width: 700px; margin: 0 auto; font-size: 13px; line-height: 1.75; color: var(--gris-texto); }
.col-grid { padding: 20px 10px 90px; background: #fcfbf7; text-align: center; }
.col-grid h2 { font-size: 32px; line-height: 1; margin-bottom: 16px; color: var(--negro); }
.col-grid .prod-kicker { margin-bottom: 60px; }
.col-grid__fila { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px 20px; max-width: 1160px; margin: 0 auto; }
.col-grid__fila--centro { margin-top: 30px; }
.col-item { width: 356px; display: flex; flex-direction: column; align-items: center; }
.col-item > a img { height: 175px; width: auto; display: block; margin: 0 auto; transition: transform 0.3s ease; }
.col-item:hover > a img { transform: translateY(-6px); }
.col-item__pendiente { height: 175px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0.55; }
.col-item__pendiente img { width: 34px; }
.col-item__pendiente small { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 9px; color: var(--gris-texto); }
.col-item small { font-family: var(--cond); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-texto); margin-top: 19px; }
.col-item h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin: 2px 0 14px; color: var(--negro); }
.col-item p { font-size: 12px; line-height: 1.5; color: #7a7a7a; max-width: 249px; margin: 0 auto 20px; }
@media (max-width: 900px) {
.col-hero { padding: 110px 20px 50px; }
.col-hero h1 { font-size: 32px; }
.col-item { width: 46%; min-width: 250px; }
}
/* Tienda con el grid de colección */
.grid-tienda { display: flex; justify-content: center; flex-wrap: wrap; gap: 44px 20px; max-width: 1160px; margin: 40px auto 0; }
.grid-tienda .col-item { text-align: center; }
.col-item__foto { height: 175px; display: flex; align-items: flex-end; justify-content: center; }
.col-item__foto img { max-height: 175px; width: auto; max-width: 300px; display: block; transition: transform 0.3s ease; }
.col-item:hover .col-item__foto img { transform: translateY(-6px); }
.col-item__precio { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--negro); margin: -6px 0 16px; }
.col-item__precio span { font-family: var(--cond); font-size: 0.62rem; letter-spacing: 0.15em; color: var(--gris-texto); }
/* ---------- Portafolio: foto a media página con la polaroid encima ---------- */
.porta-seccion {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.porta-media { position: relative; min-height: min(86vh, 760px); }
.porta-media__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid-video--chica {
position: absolute;
left: 50%; top: clamp(30px, 4vw, 56px);
transform: translateX(-25%) rotate(-4deg);
width: min(15vw, 178px);
margin: 0;
z-index: 2;
box-shadow: 0 20px 38px rgba(18, 17, 16, 0.45);
}
.polaroid-video--chica:hover { transform: translateX(-25%) rotate(0deg); }
.polaroid-video--chica figcaption { font-size: 0.6rem; }
.polaroid-video--chica .postal__nota { font-size: 15px; bottom: 8px; left: 10px; }
.porta-texto { display: flex; align-items: center; justify-content: center; padding: clamp(60px, 6vw, 96px) clamp(28px, 5vw, 86px); }
.porta-texto .lote-flota__texto { min-height: 0; }
@media (max-width: 900px) {
.porta-seccion { grid-template-columns: 1fr; }
.porta-media { min-height: 520px; }
.polaroid-video--chica {
position: static; transform: rotate(-3deg);
width: min(62vw, 260px); margin: -90px auto 0; top: auto; left: auto;
}
.polaroid-video--chica:hover { transform: rotate(0deg); }
.polaroid-video--chica figcaption { font-size: 0.72rem; }
.porta-texto { padding-top: 120px; }
.polaroid-video--chica .postal__nota { font-size: 17px; }
.porta-texto { padding: 120px 24px 10px; }
}
/* ---------- Cinta continua de botellas (home) ---------- */
.botellas-cinta { padding: clamp(34px, 4vw, 58px) 0 clamp(46px, 4.5vw, 66px); text-align: center; overflow: hidden; }
.cinta { overflow: hidden; padding-top: 22px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.cinta__pista { display: flex; width: max-content; gap: clamp(64px, 7.4vw, 124px); align-items: flex-end;
animation: cintaCorre 58s linear infinite; }
@keyframes cintaCorre { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-33.3333%, 0, 0); } }
.cinta:hover .cinta__pista, .cinta:focus-within .cinta__pista { animation-play-state: paused; }
.cinta__botella { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 0 auto; }
.cinta__foto { position: relative; display: block; }
.cinta__foto::after {
content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
width: 108%; height: 18px; border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(18, 17, 16, 0.34) 0%, rgba(18, 17, 16, 0.13) 46%, rgba(18, 17, 16, 0) 72%);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.cinta__botella img { height: calc(var(--h, 1) * clamp(158px, 15.5vw, 222px)); width: auto; display: block;
position: relative; z-index: 1; transition: transform 0.35s ease; }
.cinta__botella:hover .cinta__foto::after { opacity: 0.55; transform: translateX(-50%) scale(0.9); }
.cinta__botella:hover img { transform: translateY(-9px); }
.cinta__botella small { font-family: var(--cond); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--gris-texto); margin-top: 16px; }
.cinta__nombre { font-family: var(--display); display: block; font-size: 14px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.03em; color: var(--negro); margin-top: 2px; }
.cinta__botella:hover .cinta__nombre { color: var(--vino); }
.botellas-cinta__cta { display: table; margin: 40px auto 0; }
@media (prefers-reduced-motion: reduce) {
.cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.cinta__pista { animation: none; }
}
/* ---------- Hero cortina ----------
El contenido del hero es fixed, pero el clip-path convierte al hero en su
contenedor, así queda recortado a su propia caja. El hero se queda quieto y
la sección siguiente sube y lo va tapando. Funciona en Safari. */
.hero--cortina {
z-index: 0;
height: 100vh;
height: 100svh;
min-height: 600px;
overflow: clip;
clip-path: inset(0);
}
.hero--cortina .hero-fix {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100vh;
height: 100svh;
min-height: 600px;
display: flex;
align-items: center;
justify-content: flex-start;
}
/* todo lo que viene después queda siempre por encima del hero */
/* Los hermanos del hero de cortina se levantan por encima de él. Se excluye el panel del
carrito: es un aside hermano, y ponerle position:relative le quitaba el fixed y lo tiraba
al final del documento. Ya trae z-index 950, así que no necesita el empujón. */
.hero--cortina ~ section,
.hero--cortina ~ footer,
.hero--cortina ~ aside:not(.panel-carrito) { position: relative; z-index: 2; }
/* la primera sección tapa con fondo sólido, si no se vería el hero detrás */
@media (prefers-reduced-motion: reduce) {
.hero--cortina { clip-path: none; height: auto; }
.hero--cortina .hero-fix { position: static; height: 100svh; }
}
/* ---------- Carrusel de cócteles con tarjeta que gira ---------- */
.carrusel-cocteles { gap: 0; }
.coctel-flip {
flex: 0 0 min(360px, 78vw);
scroll-snap-align: center;
height: 520px;
perspective: 1200px;
display: block;
}
.coctel-flip__int {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.coctel-flip:hover .coctel-flip__int,
.coctel-flip:focus-visible .coctel-flip__int { transform: rotateY(180deg); }
.coctel-flip__cara {
position: absolute; inset: 0;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
overflow: hidden;
}
.coctel-flip__frente img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coctel-flip__pie {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 120px 22px 26px; text-align: center;
background: linear-gradient(180deg,
rgba(18, 17, 16, 0) 0%,
rgba(18, 17, 16, 0.03) 22%,
rgba(18, 17, 16, 0.10) 38%,
rgba(18, 17, 16, 0.22) 52%,
rgba(18, 17, 16, 0.38) 65%,
rgba(18, 17, 16, 0.53) 78%,
rgba(18, 17, 16, 0.64) 100%);
}
.coctel-flip__pie .nombre { display: block; font-family: var(--display); font-weight: 700;
text-transform: uppercase; font-size: 1.35rem; color: #fff; letter-spacing: 0.01em;
text-shadow: 0 2px 16px rgba(18, 17, 16, 0.55); }
.coctel-flip__pie .base { display: block; font-family: var(--cond); text-transform: uppercase;
letter-spacing: 0.16em; font-size: 10.5px; color: rgba(255, 255, 255, 0.86); margin-top: 7px;
text-shadow: 0 1px 12px rgba(18, 17, 16, 0.6); }
.coctel-flip__atras {
transform: rotateY(180deg);
background: var(--cb-fondo, var(--verde-jade));
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px; padding: 34px 26px; text-align: center;
}
.coctel-flip__atras .grande {
font-family: var(--display); font-weight: 700; text-transform: uppercase;
font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; color: var(--cb-tinta, #fff);
text-wrap: balance;
}
.coctel-flip__atras .base { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em;
font-size: 11px; color: var(--cb-tinta, #fff); opacity: 0.78; }
.coctel-flip__atras .ver { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em;
font-size: 11px; color: var(--cb-tinta, #fff); border-bottom: 1.5px solid currentColor; padding-bottom: 4px; margin-top: 8px; }
/* colores de la cara de atrás, los mismos del carrusel anterior */
.coctel-flip.cb--caribe { --cb-fondo: #9abc04; --cb-tinta: #121110; }
.coctel-flip.cb--mango { --cb-fondo: #ffca26; --cb-tinta: #121110; }
.coctel-flip.cb--coral { --cb-fondo: #d42518; --cb-tinta: #fff; }
.coctel-flip.cb--menta { --cb-fondo: #19532b; --cb-tinta: #fff; }
.coctel-flip.cb--jade { --cb-fondo: #f86015; --cb-tinta: #121110; }
/* en táctil no hay cursor: la tarjeta no gira y el nombre se lee siempre */
@media (hover: none) {
.coctel-flip:hover .coctel-flip__int { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.coctel-flip__int { transition: none; }
}
@media (max-width: 720px) {
.coctel-flip { height: 440px; }
}
/* botón bajo el carrusel de cócteles, alineado con el inicio de la sección */
.carrusel-cta { display: inline-block; margin-top: 38px; }
/* arrastre del carrusel con el mouse */
.carrusel-botellas { cursor: grab; }
.carrusel-botellas.jalando { cursor: grabbing; scroll-behavior: auto; }
.carrusel-botellas img { -webkit-user-drag: none; user-select: none; }
.carrusel-botellas.jalando .coctel-flip__int { transform: none !important; }
/* ---------- Dónde comprar: panel + mapa a dos tercios ---------- */
.donde {
display: grid;
grid-template-columns: 1fr 2fr;
align-items: center;
gap: clamp(28px, 3.5vw, 64px);
height: calc(100vh - 62px);
padding: clamp(40px, 4.5vw, 72px) clamp(24px, 4vw, 70px);
position: relative;
}
.donde__panel { display: flex; flex-direction: column; justify-content: flex-start; max-width: 440px; height: 100%; min-height: 0; align-self: stretch; }
.donde h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.04; margin: 10px 0 16px; }
.donde__bajada { color: var(--gris-texto); font-size: 0.95rem; margin-bottom: 20px; max-width: 42ch; }
.donde .pais-tabs { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; margin-bottom: 20px; }
.donde .pais-tab {
font-size: 0.66rem;
letter-spacing: 0.1em;
padding: 9px 12px;
white-space: nowrap;
flex: 0 1 auto;
}
.donde__cta { display: table; margin-top: 22px; }
/* la lista de puntos, con el mismo tratamiento de las cartas del mega de rones */
.carta-venta {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
position: relative;
background: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") no-repeat top 12px right 14px / 22px auto, #faf3e0;
border: 2px solid #2b2118;
box-shadow: inset 0 0 0 5px #faf3e0, inset 0 0 0 6.5px #2b2118;
border-radius: 6px;
padding: 16px;
}
.carta-venta__marco { padding: 18px 16px 14px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.carta-venta__num {
font-family: "DM Serif Display", "Playfair Display", serif;
font-size: 0.9rem; color: #2b2118; margin: 0 0 6px; letter-spacing: 0.01em;
}
.carta-venta__estado {
font-family: var(--display); font-weight: 700; text-transform: uppercase;
font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.1; color: #2b2118;
border-bottom: 2px solid #2b2118; padding-bottom: 9px; margin: 0 0 12px;
}
/* min-height:0 es lo que permite que la ficha encoja y la lista scrollee dentro,
en vez de empujar el panel fuera de la sección cuando el estado trae muchos puntos */
.carta-venta__lista { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
/* el degradado avisa que la lista sigue cuando el estado trae más puntos de los que caben */
.carta-venta__marco { position: relative; }
.carta-venta__marco::after {
content: ""; position: absolute; left: 16px; right: 16px; bottom: 14px; height: 26px;
background: linear-gradient(to top, #faf3e0, rgba(250, 243, 224, 0)); pointer-events: none;
}
.cv-punto { padding: 9px 0; border-top: 1px solid rgba(43, 33, 24, 0.16); }
.cv-punto:first-child { border-top: none; padding-top: 0; }
.cv-punto strong { display: block; font-size: 0.86rem; line-height: 1.3; color: #2b2118; }
.cv-punto em { display: block; font-family: var(--cond); font-style: normal; text-transform: uppercase;
letter-spacing: 0.14em; font-size: 9.5px; color: var(--vino); margin: 3px 0 4px; }
.cv-punto span { display: block; font-size: 0.79rem; line-height: 1.45; color: rgba(43, 33, 24, 0.72); }
.cv-punto a { display: inline-block; font-family: var(--cond); text-transform: uppercase;
letter-spacing: 0.14em; font-size: 9.5px; color: var(--verde-jade); border-bottom: 1px solid currentColor; margin-top: 6px; }
.donde__mapa { display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0; padding-bottom: 86px; }
.donde__mapa .mapa-caja svg { max-height: min(calc(100vh - 300px), 700px); margin: 0 auto; display: block; }
.donde__mapa .banda-venta {
position: absolute;
right: clamp(24px, 4vw, 70px);
bottom: clamp(40px, 4.5vw, 72px);
margin: 0;
width: fit-content;
max-width: calc(66% - 40px);
}
@media (max-width: 1024px) {
.donde { display: flex; flex-direction: column; align-items: stretch; min-height: 0; height: auto; gap: 22px; }
.donde__panel { display: contents; }
.donde__mapa { order: 1; gap: 18px; }
.carta-venta { order: 2; }
.donde__cta { order: 3; margin-top: 0; }
.donde__mapa .mapa-caja svg { max-height: 46vh; }
.donde__mapa { padding-bottom: 0; }
.donde__mapa .banda-venta {
position: static;
width: 100%;
max-width: none;
margin: 0;
justify-content: center;
text-align: center;
}
.donde__mapa .banda-venta__logos { width: 100%; justify-content: space-evenly; gap: 10px 14px; }
.carta-venta { flex: none; }
/* sin alto fijo del panel, flex-basis 0 colapsaba la lista; aquí crece con tope y scrollea */
.carta-venta__lista { flex: 0 1 auto; max-height: 62vh; }
.donde h2 { margin-bottom: 10px; }
.donde .pais-tabs { margin-bottom: 4px; }
}
/* En celular los seis siguen en un renglón: más chicos y casi pegados. Suma ≈ 301 px de los 303 disponibles a 375 px */
@media (max-width: 700px) {
.donde__mapa .banda-venta { padding: 12px 12px; gap: 0; }
.donde__mapa .banda-venta__label { display: none; }
.donde__mapa .banda-venta__logos { flex-wrap: nowrap !important; gap: 4px; justify-content: space-between; width: 100%; }
.donde__mapa .banda-venta__logos img { flex: 0 0 auto; }
.donde__mapa .banda-venta__logos img[alt="Soriana"] { height: 15px; }
.donde__mapa .banda-venta__logos img[alt="Walmart"] { height: 12px; }
.donde__mapa .banda-venta__logos img[alt="Bodega Aurrerá"] { height: 24px; }
.donde__mapa .banda-venta__logos img[alt="Bodegas Alianza"] { height: 15px; }
.donde__mapa .banda-venta__logos img[alt="HEB"] { height: 14px; }
.donde__mapa .banda-venta__logos img[alt="La Comer"] { height: 13px; }
}
/* ---------- Consentimiento de cookies ----------
Componente portado del sistema de La Histórica / Dr. Angel Franco (Ji Group) y
retematizado a la paleta de Ron Potosí. Google arranca con Consent Mode v2 en denegado
y Meta con el consentimiento revocado; sólo al aceptar se actualizan.
Se extrajeron únicamente las reglas .cc-, sin arrastrar estilos del sitio de origen. */
/* con el menú abierto el banner estorba y además tapaba los últimos enlaces */
html.menu-abierto .cc-banner, html.carrito-abierto .cc-banner, html.buscador-abierto .cc-banner{color:var(--crema);opacity:0;pointer-events:none}
/* ══════════ consentimiento de cookies ══════════ */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--negro-suave);
border-top:1px solid rgba(243,232,204,.18);box-shadow:0 -18px 40px rgba(11,11,12,.10);
padding:clamp(14px,1.8vw,18px) clamp(20px,5vw,56px) calc(env(safe-area-inset-bottom) + clamp(14px,1.8vw,18px));
transform:translateY(105%);transition:transform .42s cubic-bezier(.22,1,.36,1)}
.cc-banner.visible{transform:none}
.cc-inner{max-width:var(--ancho);margin:0 auto;display:flex;align-items:center;
gap:clamp(18px,3vw,44px);flex-wrap:wrap}
.cc-text{flex:1 1 340px;min-width:0}
.cc-text strong{font-weight:500;color:var(--crema)}
.cc-text span{display:block;font-size:13.5px;line-height:1.6;color:rgba(243,232,204,.72);max-width:78ch}
.cc-text a{color:var(--crema);text-decoration:underline;text-underline-offset:2px}
.cc-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.cc-btn{font-family:var(--cond);font-weight:400;font-size:13px;border-radius:100px;
padding:12px 20px;cursor:pointer;border:1px solid transparent;transition:.22s;white-space:nowrap}
.cc-btn-txt{background:none;color:rgba(243,232,204,.72)}
.cc-btn-txt:hover{color:var(--crema)}
.cc-btn-linea{background:transparent;color:var(--crema);border-color:rgba(243,232,204,.45)}
.cc-btn-linea:hover{border-color:var(--amarillo);color:var(--amarillo)}
.cc-btn-solido{background:var(--amarillo);color:var(--negro);border-color:var(--amarillo)}
.cc-btn-solido:hover{background:var(--crema);border-color:var(--crema);color:var(--negro)}
.cc-modal{position:fixed;inset:0;z-index:970;background:rgba(11,11,12,.5);
display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;
transition:opacity .26s,visibility .26s}
.cc-modal.abierto{opacity:1;visibility:visible}
.cc-card{color:var(--crema);background:var(--negro-suave);border-radius:6px;width:min(560px,100%);
max-height:min(86svh,720px);overflow-y:auto;transform:translateY(12px);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.cc-modal.abierto .cc-card{transform:none}
.cc-card-head{padding:clamp(26px,4vw,34px) clamp(24px,4vw,34px) 0}
.cc-card-head .cc-et{font-family:var(--cond);font-weight:500;font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--oro);margin:0 0 10px}
.cc-card-head h3{font-family:var(--cond);font-weight:400;font-size:clamp(19px,2.4vw,23px);
letter-spacing:-.02em;color:var(--crema);margin:0}
.cc-card-body{padding:clamp(20px,3vw,26px) clamp(24px,4vw,34px)}
.cc-row{display:flex;align-items:center;gap:20px;padding:19px 0;border-bottom:1px solid rgba(243,232,204,.18)}
.cc-row:last-child{border-bottom:0}
.cc-row>div:first-child{flex:1 1 auto;min-width:0}
.cc-row h4{font-family:var(--cond);font-weight:500;font-size:14.5px;color:var(--crema);margin:0 0 5px}
.cc-row p{font-size:13px;line-height:1.6;color:rgba(243,232,204,.72);margin:0}
.cc-switch{flex:0 0 auto;position:relative;width:44px;height:26px}
.cc-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cc-switch input:disabled{cursor:default}
.cc-slider{position:absolute;inset:0;background:rgba(243,232,204,.28);border-radius:100px;transition:.25s;pointer-events:none}
.cc-slider:before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
background:#fff;border-radius:100px;transition:.25s cubic-bezier(.22,1,.36,1)}
.cc-switch input:checked+.cc-slider{background:var(--crema)}
.cc-switch input:checked+.cc-slider:before{transform:translateX(18px)}
.cc-switch input:disabled+.cc-slider{background:var(--crema);opacity:.4}
.cc-switch input:focus-visible+.cc-slider{outline:2px solid var(--oro);outline-offset:2px}
.cc-card-foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
padding:0 clamp(24px,4vw,34px) clamp(26px,4vw,34px)}
@media(max-width:620px){
.cc-actions{width:100%}
.cc-actions .cc-btn{flex:1 1 auto;justify-content:center}
.cc-card-foot .cc-btn{flex:1 1 auto}
}
.cc-card-head .cc-et{color:var(--amarillo)}
.cc-btn-linea{border-color:#767680}
.cc-slider{background:#767680}
/* el botón de aceptar quedaba cortado fuera de la tarjeta en pantallas cortas */
.cc-card-foot{position:sticky;bottom:0;background:var(--negro-suave);border-top:1px solid rgba(243,232,204,.18);padding-top:16px}
@media(prefers-reduced-motion:reduce){
.cc-banner{transition:none}
.cc-card{transform:none;transition:none}
}
@media(max-width:620px){
/* el detalle legal completo está en la política; en el aviso basta lo esencial */
.cc-banner .cc-larga{display:none}
.cc-actions{width:100%}
.cc-actions .cc-btn{flex:1 1 auto;justify-content:center}
}
/* ---------- Página de información legal ---------- */
.lg-cabeza { padding-bottom: 0; }
.lg-cabeza h1 { max-width: 20ch; }
.lg-intro { max-width: 62ch; color: var(--gris-texto); font-size: 1.02rem; margin-top: 14px; }
.lg-nota {
margin-top: 26px; max-width: 62ch; padding: 14px 18px;
border-left: 3px solid var(--coral); background: rgba(212, 37, 24, 0.06);
font-size: 0.92rem; color: var(--gris-texto);
}
.lg-nota strong { color: var(--coral); }
.lg-rejilla { display: grid; grid-template-columns: 220px 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.lg-indice { position: sticky; top: 92px; }
.lg-indice__t {
font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.18em;
font-size: 0.68rem; color: var(--gris-texto); margin-bottom: 12px;
}
.lg-indice ol { list-style: none; margin: 0; padding: 0; counter-reset: lg; }
.lg-indice li { counter-increment: lg; border-top: 1px solid rgba(18, 17, 16, 0.1); }
.lg-indice li:last-child { border-bottom: 1px solid rgba(18, 17, 16, 0.1); }
.lg-indice a {
display: block; padding: 9px 0; font-size: 0.9rem; line-height: 1.3;
color: var(--negro); transition: color 0.3s ease-in-out;
}
.lg-indice a::before {
content: counter(lg, decimal-leading-zero);
font-family: var(--cond); font-size: 0.68rem; color: var(--gris-texto); margin-right: 9px;
}
.lg-indice a:hover { color: var(--coral); }
.lg-doc { padding-bottom: clamp(34px, 4vw, 52px); scroll-margin-top: 88px; }
.lg-doc + .lg-doc { border-top: 1px solid rgba(18, 17, 16, 0.12); padding-top: clamp(30px, 3.6vw, 46px); }
.lg-fund {
font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.13em;
font-size: 0.64rem; color: var(--vino); margin-bottom: 8px;
}
.lg-doc h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 18px; }
.lg-bloque { margin-bottom: 20px; max-width: 66ch; }
.lg-bloque h3 {
font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.12em;
font-size: 0.74rem; color: var(--negro); margin-bottom: 6px;
}
.lg-bloque p { font-size: 0.96rem; line-height: 1.62; color: var(--gris-texto); margin-bottom: 10px; }
.lg-bloque p:last-child { margin-bottom: 0; }
.lg-bloque strong { color: var(--negro); }
/* Datos fiscales del proveedor (LFPC art. 76 BIS fr. III) */
.lg-datos { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 8px 18px; margin: 0 0 14px; font-size: 0.94rem; line-height: 1.5; }
.lg-datos dt { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; color: var(--negro); padding-top: 2px; }
.lg-datos dd { margin: 0; color: var(--gris-texto); }
@media (max-width: 640px) { .lg-datos { grid-template-columns: 1fr; gap: 2px; } .lg-datos dd { margin-bottom: 10px; } }
/* lo que todavía depende del cliente o del abogado se marca para que nadie lo publique así */
.lg-falta {
background: rgba(212, 37, 24, 0.1); color: var(--coral);
padding: 1px 6px; border-radius: 2px; font-weight: 600;
}
.lg-enlace {
background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
color: var(--verde-jade); border-bottom: 1px solid currentColor;
}
.lg-enlace:hover { color: var(--coral); }
.lg-pie-nota { font-size: 0.85rem; color: var(--gris-texto); border-top: 1px solid rgba(18, 17, 16, 0.12); padding-top: 18px; }
@media (max-width: 860px) {
.lg-rejilla { grid-template-columns: 1fr; }
.lg-indice { position: static; }
}
/* ---------- Promo "Desde 1938": carta que se voltea ----------
Grid 1fr 1fr desde 64rem, velo rgba(0,0,0,.2), carta hija de la mitad izquierda y absoluta
sobre el borde; flip rotateY(180deg) .7s cubic-bezier(.2,.7,.2,1) disparado 1400 ms después
de entrar en vista. */
.btn--blanco { color: #fff; --btn-fill: #fff; --btn-texto-hover: var(--negro); --btn-borde: #fff; }
.promo { position: relative; color: #fff; display: grid; grid-template-columns: 1fr; }
/* todas las secciones traen z-index:2 por la cortina del hero; la promo va un paso arriba para que la carta cuelgue sobre la siguiente sección */
.hero--cortina ~ section.promo { z-index: 3; }
.promo__interior { display: contents; }
.promo__izq { position: relative; padding: 3.5rem 0; overflow: initial; }
.promo__izq::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); }
.promo__fondo-izq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -1; }
.promo__contenido { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding: 0 3.4375rem; text-align: center; z-index: 1; }
.promo__titulo { font-size: 3.75rem; line-height: 0.9; letter-spacing: 0; color: #fff; text-wrap: balance; }
.promo__titulo .revela-palabra { display: inline-block; opacity: 0; transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.promo__titulo .revela-palabra.is-visible { opacity: 1; }
.promo__der { position: relative; display: flex; align-items: center; justify-content: center; padding: 20%; background-color: var(--vino); background-image: var(--papel); background-size: 240px 240px; }
.promo__imagen { width: 100%; max-width: 44.5rem; aspect-ratio: 712 / 474; object-fit: cover; display: block; opacity: 0; }
/* la carta (boleto) */
.promo__carta {
position: relative; width: 17.375rem; height: 23.125rem; margin: 2.5rem auto 0.5rem;
transform: rotate(-9deg); transform-origin: center; perspective: 62.5rem;
filter: drop-shadow(0 0.625rem 1.875rem rgba(0, 0, 0, 0.25)); z-index: 2;
}
.promo__carta-interior { height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.promo__carta--volteada .promo__carta-interior { transform: rotateY(180deg); }
.promo__carta-lado { backface-visibility: hidden; -webkit-backface-visibility: hidden; position: relative; }
.promo__carta-lado--frente { height: 100%; }
.promo__carta-lado--reverso { position: absolute; inset: 0; transform: rotateY(180deg); padding-bottom: 1.5rem; border-radius: 0.625rem; }
.promo__carta-mascara { position: absolute; inset: 0; z-index: -1; }
.promo__carta-mascara svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }
.promo__carta-mascara svg path { fill: var(--vino); }
.promo__carta-mascara svg:last-of-type { width: 95%; }
.promo__carta-mascara svg:last-of-type path { stroke: var(--crema); stroke-width: 1; }
.promo__carta-contenido { padding: 0.875rem 1.875rem; text-align: center; overflow: hidden; height: 100%; color: var(--crema); }
.promo__carta-kicker { font-family: var(--cond); font-size: 1rem; line-height: 1.4; border-bottom: 1px solid var(--crema); padding: 1rem 0; margin: 0; }
.promo__carta-titulo { font-size: 4.75rem; line-height: 90%; margin: 3rem 0 0; color: var(--crema); }
.promo__carta-lado--reverso .promo__carta-titulo { font-size: 2.25rem; line-height: 1; margin: 0; }
.promo__carta-sub { font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.3; margin: 0.9375rem 0; }
.promo__carta-marco { border-top: 1px solid var(--crema); border-bottom: 1px solid var(--crema); margin-top: 3rem; padding: 1.375rem 0; }
.promo__carta-marco .promo__carta-sub { margin: 0.5rem 0 0; }
.promo__carta-texto { padding: 1rem 0; }
.promo__carta-texto p { font-family: var(--cond); font-size: 1rem; line-height: 1.4; margin: 0; }
.promo__carta-btn { margin-top: 0.25rem; padding: 9px 18px; letter-spacing: 0.16em; font-size: 0.68rem; }
@media (min-width: 64rem) {
.promo { grid-template-columns: 1fr 1fr; }
/* carta más chica y más abajo para que el título se lea completo */
.promo__izq { padding-bottom: 20rem; }
.promo__carta {
position: absolute; right: 0; top: 83%; margin: 0; width: 19rem; height: 24rem;
transform: translate(50%, -50%) rotate(-9deg);
}
.promo__carta-titulo { font-size: 4rem; }
.promo__carta-btn { padding: 11px 26px; letter-spacing: 0.2em; font-size: 0.72rem; }
.promo__titulo { font-size: clamp(4.5rem, 7.3vw, 7.5rem); line-height: 1; } /* la carta tapa parte del título a propósito */
.promo__carta-lado--reverso .promo__carta-titulo { font-size: 3.25rem; line-height: 1; }
}
@media (prefers-reduced-motion: reduce) {
.promo__titulo .revela-palabra, .promo__imagen { opacity: 1 !important; transition: none; animation: none; }
.promo__carta-interior { transition: none; }
}
/* ---------- Collage "El ritmo de la Huasteca" ----------
Rejilla de 3 columnas, min-height 39.125rem; las fotos salen del centro hacia afuera
(izquierda desde translate(250px,30px) scale(.7), derecha desde translate(-250px,30px) scale(.7), 1100 ms,
cubic-bezier(.22,1,.36,1), 200/300 ms + 150 ms por foto); el texto sube 30px en 800 ms con 150 ms de escalón.
En móvil las fotos van absolutas alrededor del texto y sólo aparecen, sin recorrido. */
.ritmo { position: relative; width: 100%; height: 100%; background: #faf7f0; overflow: hidden; } /* más blanco que la crema de la casa */
/* ilustración de fondo con cover para no deformarla */
.ritmo__fondo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; }
/* velo crema encima del mapa para que no compita con el texto */
.ritmo::before { content: ""; position: absolute; inset: 0; background: rgba(250, 247, 240, 0.8); z-index: 1; pointer-events: none; }
.ritmo__rejilla { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); min-height: 39.125rem; overflow: hidden; padding-top: 11.625rem; padding-bottom: 9.75rem; }
.ritmo__col { position: relative; display: flex; flex-direction: column; align-items: center; }
.ritmo__cuadro { position: relative; display: flex; height: 100%; width: 100%; flex-shrink: 0; } /* sin flex-shrink las seis se repartían la columna en partes iguales en vez de tomar su max-height */
.ritmo__img { object-fit: contain; width: auto; height: auto; max-width: none; display: block; flex: 0 0 auto; } /* max-width:none: el img{max-width:100%} global la encogía al ancho de la columna en móvil */
/* móvil: cada foto se ancla alrededor del texto */
.ritmo__cuadro--1 { justify-content: flex-end; margin-bottom: 6.25rem; margin-right: -3.75rem; max-height: max(6.75rem, min(calc(4.14rem + 11.04vw), 15.625rem)); position: absolute; top: -9.5rem; }
.ritmo__cuadro--1 .ritmo__img { max-height: max(6.75rem, min(calc(4.14rem + 11.04vw), 12.625rem)); }
.ritmo__cuadro--2 { justify-content: flex-start; left: -20%; max-height: max(5.5625rem, min(calc(1.14rem + 22.11vw), 18.5625rem)); position: absolute; top: calc(50% - 5rem); }
.ritmo__cuadro--2 .ritmo__img { max-height: max(5.5625rem, min(calc(1.14rem + 22.11vw), 18.5625rem)); }
.ritmo__cuadro--3 { justify-content: flex-end; max-height: max(5.5625rem, min(calc(2rem + 17.81vw), 15.3125rem)); position: absolute; right: -3.25rem; top: calc(100% + 3.125rem); }
.ritmo__cuadro--3 .ritmo__img { max-height: max(5.5625rem, min(calc(2rem + 17.81vw), 15.3125rem)); }
.ritmo__cuadro--4 { justify-content: center; max-height: max(9.6875rem, min(calc(5.79rem + 19.49vw), 22.3125rem)); position: absolute; top: -11rem; width: max(6.875rem, min(calc(5.885rem + 4.95vw), 8.525rem)); }
.ritmo__cuadro--4 .ritmo__img { max-height: max(9.6875rem, min(calc(5.79rem + 19.49vw), 22.3125rem)); width: max(6.875rem, min(calc(5.885rem + 4.95vw), 8.525rem)); object-fit: cover; }
.ritmo__cuadro--5 { justify-content: flex-end; margin-top: -3.75rem; max-height: max(6.4375rem, min(calc(1.85rem + 22.94vw), 22.9375rem)); position: absolute; top: 80%; }
.ritmo__cuadro--5 .ritmo__img { max-height: max(6.4375rem, min(calc(1.85rem + 22.94vw), 9.9375rem)); }
.ritmo__cuadro--6 { margin-top: -1.25rem; max-height: max(4.625rem, min(calc(2.54rem + 10.43vw), 10.875rem)); position: absolute; right: 0; top: calc(100% + 4.875rem); }
.ritmo__cuadro--6 .ritmo__img { max-height: max(4.625rem, min(calc(2.54rem + 10.43vw), 10.875rem)); }
.ritmo__texto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6875rem; margin: auto; text-align: center; width: 60vw; }
.ritmo__titulo { margin: 0; font-size: clamp(1.9rem, 8.6vw, 3.75rem); line-height: 0.9; color: var(--negro); text-wrap: balance; } /* Advercase es muy ancha: 8.6vw para que EMBOTELLADO quepa en la columna */
.ritmo__cuerpo { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--negro); }
@media (min-width: 64rem) {
.ritmo__rejilla { padding: 0; }
.ritmo__col { align-items: flex-start; }
/* height:auto: el cuadro mide lo que mide su foto (tope max-height) y la fila crece con las columnas */
.ritmo__cuadro { height: auto; }
.ritmo__cuadro--1 { position: static; margin-top: -2.5rem; }
.ritmo__cuadro--1 .ritmo__img { max-height: max(6.75rem, min(calc(4.14rem + 13.04vw), 15.625rem)); }
.ritmo__cuadro--2 { position: static; margin-top: -8rem; }
.ritmo__cuadro--3 { position: static; justify-content: center; margin-top: 5.625rem; margin-bottom: 4.5rem; }
.ritmo__cuadro--4 { position: static; margin-top: 5rem; width: 100%; }
.ritmo__cuadro--4 .ritmo__img { width: auto; object-fit: contain; }
.ritmo__cuadro--5 { position: static; }
.ritmo__cuadro--5 .ritmo__img { max-height: max(6.4375rem, min(calc(1.85rem + 22.94vw), 22.9375rem)); }
.ritmo__cuadro--6 { position: static; margin-left: -10%; margin-top: 0; }
.ritmo__texto { gap: 3rem; width: auto; }
.ritmo__titulo { font-size: clamp(3.4rem, 5.4vw, 6rem); line-height: 1; } /* Advercase es muy ancha; se ajusta para caber en la columna */
}
@media (prefers-reduced-motion: reduce) {
.ritmo__cuadro, .ritmo__texto > * { opacity: 1 !important; transform: none !important; }
}
/* ---------- Página de cóctel ----------
Colores: --coral, --vino, #6e2115, --crema, #e6d9b6, --amarillo y --turquesa.
Breakpoint único: 64rem. .m-hide oculta en móvil y .d-hide en escritorio. */
@media (max-width: 63.9375rem) { .m-hide { display: none !important; } }
@media (min-width: 64rem) { .d-hide { display: none !important; } }
.voltear { display: inline-flex; transform: rotate(180deg); }
/* ---------- cocktail-hero ---------- */
.chero { --chero-fondo: var(--coral); --chero-texto: #fff; --chero-borde: #fff; color: var(--chero-texto); }
.chero--vino { --chero-fondo: var(--vino); } /* variante para los cócteles de Extra Añejo */
@media (min-width: 64rem) { .chero { align-items: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; } } /* minmax(0,…): con 1fr a secas el carrusel empujaba la columna */
@media (min-width: 64rem) { .chero__bloques { min-width: 0; } }
.chero__imagen-wrap { height: 41.125rem; position: relative; }
@media (min-width: 64rem) { .chero__imagen-wrap { height: 100vh; left: 0; position: fixed; top: 0; width: 50%; z-index: -1; } }
.chero__imagen-wrap::before { background-color: rgba(0, 0, 0, 0.2); content: ""; position: absolute; inset: 0; }
@media (min-width: 64rem) { .chero__imagen-wrap::before { display: none; } }
.chero__imagen { height: 100%; object-fit: cover; width: 100%; }
.chero__imagen-texto { bottom: 1.5rem; padding: 0 1.25rem; position: absolute; }
@media (min-width: 64rem) { .chero__bloques { grid-column-end: 3; position: relative; } }
.chero__contenido { background-color: var(--chero-fondo); padding: 2rem 1.25rem 0; }
@media (min-width: 64rem) { .chero__contenido { padding: 6.25rem 2rem 0; position: relative; } }
.chero__miga-liga { align-items: center; color: #fff; display: flex; gap: 0.5rem; line-height: 140%; margin-bottom: 1.25rem; text-decoration: none; font-family: var(--cond); font-size: 1rem; }
@media (min-width: 64rem) { .chero__miga-liga { gap: 0.875rem; line-height: 120%; } }
.chero__miga-liga svg { position: relative; top: -1px; flex: none; }
.chero__titulos { border-bottom: 1px solid var(--chero-borde); border-top: 1px solid var(--chero-borde); margin-bottom: 2rem; padding-bottom: 2.375rem; padding-top: 1.625rem; }
.chero__subtitulo { font-size: 2.5rem; line-height: 1; margin: 0 0 0.75rem; color: #fff; }
@media (min-width: 64rem) { .chero__subtitulo { font-size: 2.8125rem; line-height: 60px; } }
.chero__titulo { font-size: 4.6875rem; line-height: 0.8; color: #fff; margin: 0; word-break: break-word; }
@media (min-width: 64rem) { .chero__titulo { font-size: 7rem; } } /* Advercase es muy ancha; se reduce el tamaño */
.chero__texto { font-size: 1rem; line-height: 140%; margin: 0 0 1.25rem; font-family: var(--cond); }
@media (min-width: 64rem) { .chero__texto { margin-bottom: 4rem; } }
.chero__info { display: flex; flex-wrap: wrap; padding-bottom: 1.625rem; }
.chero__info-texto { border-left: 1px solid var(--chero-texto); padding: 0.625rem 0.5rem; font-family: var(--cond); font-size: 0.875rem; line-height: 18px; font-weight: 500; }
.chero__info-texto:last-child { border-right: 1px solid var(--chero-texto); }
.chero__foto-wrap { padding-bottom: 11.875rem; position: relative; }
@media (min-width: 64rem) { .chero__foto-wrap { padding-bottom: 24.875rem; } }
.chero__foto {
-webkit-mask-image: url("/assets/img/mascara-hero-coctel.svg"); mask-image: url("/assets/img/mascara-hero-coctel.svg");
-webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
max-height: 18.125rem; object-fit: cover; position: absolute; width: 100%; height: 18.125rem; z-index: 1; left: 0;
}
@media (min-width: 64rem) { .chero__foto { height: 33.75rem; max-height: none; } }
.chero__interior > :first-child { padding-top: 7.8rem; }
@media (min-width: 64rem) { .chero__interior > :first-child { padding-top: 12rem; } }
/* ---------- recipe-overview ---------- */
.receta { --receta-fondo: var(--crema); --receta-titulo: var(--coral); --receta-select-titulo: var(--negro); background-color: var(--receta-fondo); color: var(--negro); padding: 4.125rem 1.25rem 2.125rem; }
@media (min-width: 64rem) { .receta { --receta-titulo: var(--vino); padding-bottom: 4.125rem; padding-left: 2rem; padding-right: 2rem; } }
.receta__porciones { align-items: center; display: flex; gap: 0.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.receta__porciones-titulo { color: var(--receta-select-titulo); font-size: 1.25rem; line-height: 1.2; margin: 0; }
.receta__select { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10,30 L50,70 L90,30' fill='none' stroke='%23121110' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 0.625rem 0.75rem; border: 1px solid var(--negro); border-radius: 2rem; color: var(--negro); cursor: pointer; font-family: var(--cond); font-size: 0.875rem; font-weight: 500; padding: 0.625rem 2.25rem 0.425rem 0.875rem; width: fit-content; }
.receta__select:focus-visible { outline: 2px solid var(--vino); outline-offset: 3px; }
.receta__caja { border-top: 2px solid #e6d9b6; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-bottom: 2rem; padding-top: 2rem; }
.receta__caja--primera { border-top: 0; padding-top: 0; }
@media (min-width: 64rem) { .receta__caja--primera { border-top: 2px solid #e6d9b6; padding-top: 2rem; } }
.receta__caja--segunda { margin-bottom: 2rem; }
@media (min-width: 64rem) { .receta__caja--segunda { margin-bottom: 3.375rem; } }
.receta__caja-titulo { color: var(--receta-titulo); font-size: 3.75rem; line-height: 54px; margin: 0 0 1.5rem; word-break: break-word; }
@media (min-width: 64rem) { .receta__caja-titulo { font-size: 3.75rem; line-height: 85%; margin-bottom: 3.875rem; } } /* a mayor tamaño "INGREDIENTES" no cabe en la columna */
.receta__lista--rejilla { display: grid; grid-column-gap: 0.75rem; grid-template-columns: auto auto; margin-left: auto; align-items: start; }
@media (min-width: 64rem) { .receta__lista--rejilla { grid-column-gap: 1.75rem; } }
.receta__caja--segunda .receta__lista { display: flex; flex-direction: column; width: fit-content; list-style: none; margin: 0; padding: 0; gap: 1rem; }
@media (min-width: 64rem) { .receta__caja--segunda .receta__lista { flex-direction: row; gap: 1.25rem; justify-content: space-between; width: 100%; } }
.receta__item { display: flex; gap: 0.75rem; }
@media (min-width: 64rem) { .receta__item { gap: 1.75rem; } }
.receta__item-titulo { color: var(--receta-select-titulo); padding-top: 0.25rem; text-align: right; text-transform: uppercase; font-family: var(--cond); font-size: 0.875rem; font-weight: 500; line-height: 18px; flex: none; max-width: 7rem; }
.receta__item-contenido { color: var(--negro); font-family: var(--moderat); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.125rem; line-height: 1.2; } /* Moderat Condensada, como en las etiquetas del sitio */
@media (min-width: 64rem) { .receta__item-contenido { font-size: 1.25rem; line-height: 1.2; } }
.receta__media { max-width: 64rem; }
.receta__imagen { height: 100%; max-height: 30rem; object-fit: cover; object-position: center; width: 100%; }
/* ---------- recipe-steps ---------- */
.pasos { --pasos-fondo: var(--vino); --pasos-borde: #6e2115; background-color: var(--pasos-fondo); color: var(--crema); display: grid; grid-gap: 1.5rem; grid-template-columns: auto minmax(40%, 1fr); padding: 0 0 2rem 1.25rem; }
@media (min-width: 64rem) { .pasos { grid-gap: 2rem; padding: 0 0 3rem 2rem; } }
.pasos__titulo { font-size: 3.75rem; line-height: 54px; color: var(--crema); margin: 0; }
@media (min-width: 64rem) { .pasos__titulo { font-size: 4.25rem; line-height: 1; } } /* 4.25rem ocupa ~200px de ancho y deja ≥40% de la columna al texto */
.pasos__titulo--primero, .pasos__contenido--primero { margin-top: 2rem; }
.pasos__texto { font-family: var(--cond); font-size: 1.125rem; line-height: 1.25; margin: 0; color: var(--crema); }
@media (min-width: 64rem) { .pasos__texto { font-size: 1.375rem; line-height: 22px; font-weight: 500; grid-column-start: 2; padding-right: 2rem; } }
.pasos__linea { border-bottom: 1px solid var(--pasos-borde); grid-column: span 2; margin: 0; width: calc(100% - 1.25rem); }
@media (min-width: 64rem) { .pasos__linea { margin: 1rem 0; width: calc(100% - 2rem); } .pasos__linea--ultima { margin-bottom: 0; } }
.pasos__cierre { font-size: 3.75rem; line-height: 0.9; margin: 2.5rem 0 0; color: var(--crema); grid-column: 1 / -1; justify-self: start; } /* sin líneas, abajo a la izquierda, con el mismo padding que PASOS */
@media (min-width: 64rem) { .pasos__cierre { font-size: 7.5rem; margin: 3rem 0 0; } }
/* ---------- media ---------- */
.medio { max-height: 100vh; overflow: hidden; position: relative; }
.medio__imagen-wrap { overflow: hidden; }
.medio__imagen { height: 100%; max-height: 24.625rem; object-fit: cover; transform: scale(1.1); width: 100%; transition: transform 1s cubic-bezier(0.45, 0, 0.55, 1); display: block; }
@media (min-width: 64rem) { .medio__imagen { max-height: calc(100vh - 5.25rem); } }
.medio__imagen.is-visible { transform: scale(1); }
/* ---------- featured-products-carousel ---------- */
.rones-car { min-height: 36rem; padding: 3rem 0; position: relative; overflow: hidden; }
@media (min-width: 64rem) { .rones-car { min-height: 44rem; z-index: 0; } } /* botellas y botones en una sola pantalla */
.rones-car__interior { position: relative; z-index: 1; }
.rones-car__temas { height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 0; }
.rones-car__tema { height: 100%; width: 100%; background-image: var(--papel); background-size: 240px 240px; }
.rones-car__tema--blanco { background-color: #eaddbc; }
.rones-car__tema--anejo { background-color: var(--amarillo); }
.rones-car__tema--extra { background-color: var(--verde-jade); }
.rones-car__copy { margin-bottom: -4rem; text-align: center; padding: 0 1.25rem; }
.rones-car__sub { margin: 0 0 16px; font-size: 1.5rem; line-height: 1; color: var(--vino); }
@media (min-width: 64rem) { .rones-car__sub { font-size: 1.5rem; line-height: 1; } }
.rones-car__nombre { margin: 0 0 24px; font-size: 2.75rem; line-height: 0.9; color: var(--negro); text-align: center; word-break: break-word; }
@media (min-width: 64rem) { .rones-car__nombre { font-size: 3rem; } }
.rones-car--extra .rones-car__sub, .rones-car--extra .rones-car__nombre { color: var(--crema); }
.rones-car--anejo .rones-car__sub { color: var(--vino); }
.rones-car__slider { padding-top: 4rem; position: relative; z-index: 2; }
.rones-car__slider .swiper-wrapper { align-items: center; }
.rones-car__slide { align-items: center; display: flex; flex-direction: column; height: 17rem; justify-content: center; transition: opacity 0.35s ease; width: 33.33%; }
.rones-car--js .rones-car__slide { opacity: 0; } /* sólo se ocultan cuando el JS va a animarlas */
@media (min-width: 64rem) { .rones-car__slide { height: 22rem; width: 33.3%; } }
.rones-car__carta { align-items: center; display: flex; flex-direction: column; height: 12rem; position: relative; text-align: center; transition: transform 0.35s ease; width: 100%; z-index: 1; }
@media (min-width: 64rem) { .rones-car__carta { height: 16rem; } }
.rones-car__imagen { height: 100%; object-fit: contain; width: 100%; max-width: none; }
.swiper-slide-active .rones-car__carta { transform: scale(1.35); }
.swiper-slide-next .rones-car__carta, .swiper-slide-prev .rones-car__carta { transform: scale(1); }
.rones-car__slide--lejos-izq .rones-car__carta, .rones-car__slide--lejos-der .rones-car__carta { transform: scale(0.65); }
.rones-car__nav { display: flex; justify-content: center; margin-top: 2.5rem; position: relative; z-index: 5; align-items: center; }
/* botón principal relleno oscuro (el amarillo sólido se perdía sobre el fondo amarillo del Añejo) */
.rones-car__ctas .btn--solido { background: var(--negro); color: var(--crema); --btn-borde: var(--negro); --btn-fill: var(--vino); --btn-texto-hover: var(--crema); }
.rones-car--extra .rones-car__ctas .btn--postal { color: var(--crema); --btn-borde: var(--crema); --btn-fill: var(--crema); --btn-texto-hover: var(--negro); }
.rones-car__ctas { align-items: center; display: flex; flex-direction: column; gap: 0.5rem; margin: 0 2rem; }
@media (min-width: 64rem) { .rones-car__ctas { margin: 0 4rem; } }
.rones-car__boton { align-items: center; background: var(--amarillo); border: none; border-radius: 50%; color: var(--negro); cursor: pointer; display: flex; height: 2.75rem; justify-content: center; transition: transform 0.2s ease, background 0.2s ease; width: 2.75rem; flex: none; }
.rones-car--anejo .rones-car__boton { background: var(--vino); color: #fff; }
.rones-car--extra .rones-car__boton { background: var(--crema); color: var(--negro); }
.rones-car__boton:hover { transform: translateY(-0.0625rem); }
@keyframes rcIzqADer { 0% { opacity: 0; transform: translateX(-90%); } to { opacity: 1; transform: translateX(0); } }
@keyframes rcDerAIzq { 0% { opacity: 0; transform: translateX(90%); } to { opacity: 1; transform: translateX(0); } }
.rones-car--revelado .rones-car__slider .swiper-slide-next { animation: rcIzqADer 0.8s ease forwards; }
.rones-car--revelado .rones-car__slider .swiper-slide-prev { animation: rcDerAIzq 0.8s ease forwards; }
.rones-car--revelado .rones-car__slide--lejos-der { animation: rcIzqADer 0.8s ease forwards; }
.rones-car--revelado .rones-car__slide--lejos-izq { animation: rcDerAIzq 0.8s ease forwards; }
.rones-car--animado .rones-car__slide { opacity: 1; }
/* ---------- split-content ("¿Sabías que…?") ---------- */
.sabias { --sabias-fondo: var(--vino); --sabias-color: var(--vino); background-color: var(--sabias-fondo); overflow: hidden; padding: 3.125rem 2.5rem 3.875rem; position: relative; }
@media (min-width: 64rem) { .sabias { padding: min(21%, 9.5rem) min(22.9%, 10.3125rem); } }
.sabias__fotos { display: flex; }
.sabias__foto { height: 100%; max-height: 18.75rem; object-fit: cover; width: 50%; aspect-ratio: 196 / 245; }
.sabias__caja { background-color: #fff; padding: 1rem 1.5rem 1.75rem; position: relative; color: var(--negro); }
@media (min-width: 64rem) { .sabias__caja { padding-bottom: 2.5rem; padding-top: 2.5rem; } }
.sabias__fondo { height: 100%; left: 0; object-fit: cover; opacity: 0.3; position: absolute; top: 0; width: 100%; z-index: 0; }
.sabias__timbre { position: absolute; right: -0.8rem; top: -2.5rem; width: 6rem; height: auto; transform: rotate(8deg); z-index: 2; }
@media (min-width: 64rem) { .sabias__timbre { right: -2.5rem; width: 7.5rem; } }
.sabias__titulo { color: var(--sabias-color); margin: 0 0 1rem; font-size: 2.25rem; line-height: 36px; position: relative; z-index: 1; }
@media (min-width: 64rem) { .sabias__titulo { font-size: 3.75rem; line-height: 60px; margin-bottom: 1.5rem; } }
.sabias__texto { color: var(--negro); position: relative; z-index: 1; font-family: var(--cond); font-size: 1rem; line-height: 140%; margin: 0; }
/* ---------- Carrusel de cócteles ("Otras recetas") ---------- */
.giro { padding: 3.125rem 0 3.875rem; position: relative; background: #fff; overflow: hidden; }
.giro::before { content: ""; position: absolute; inset: 0; background-image: var(--papel); background-size: 240px 240px; opacity: 0.9; pointer-events: none; }
@media (min-width: 64rem) { .giro { padding: 6rem 0 6.875rem; } }
.giro__contenido { margin: 0 auto 2.875rem; max-width: 40rem; text-align: center; width: fit-content; padding: 0 1.25rem; position: relative; z-index: 1; }
@media (min-width: 64rem) { .giro__contenido { max-width: 50rem; } }
.giro__titulo { font-size: 3.75rem; line-height: 1; margin: 0 0 1.25rem; color: var(--vino); }
@media (min-width: 64rem) { .giro__titulo { font-size: 5.5rem; margin-bottom: 2rem; } } /* 5.5rem cabe en una línea en los 760px del contenido */
.giro__texto { font-family: var(--cond); font-size: 0.875rem; line-height: 110%; margin: 0; color: var(--negro); }
@media (min-width: 64rem) { .giro__texto { font-size: 1rem; line-height: 140%; } }
.giro__boton { margin: 0 auto; }
@media (min-width: 64rem) { .giro__boton { margin-top: 1.25rem; } }
.giro__salud { position: absolute; right: 58px; top: 232px; width: 207px; height: 206px; transform: rotate(11deg); display: grid; place-items: center; z-index: 1; }
.giro__salud svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.giro__salud-fondo { fill: var(--crema-oscura); stroke: var(--oro); stroke-width: 3; }
.giro__salud span { position: relative; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 2.6rem; color: var(--coral); line-height: 1; }
.giro__slider { padding: 2rem 0 4rem; overflow: hidden; }
@media (min-width: 64rem) { .giro__slider { padding: 4rem 0 6rem; } }
.giro__slider .swiper-slide { max-width: 14rem; transition: transform 0.3s ease-in-out; width: 14rem; }
@media (min-width: 64rem) { .giro__slider .swiper-slide { max-width: 20rem; width: 20rem; transform: scale(0.75); } }
.giro__slider .swiper-slide-active { transform: scale(1.15); }
@media (min-width: 64rem) { .giro__slider .swiper-slide-active { margin: 0 6rem; } }
.giro__liga { text-decoration: none; display: block; }
.giro__nav { align-items: center; display: flex; justify-content: center; margin: 0 auto; padding: 0 0.875rem; width: 100%; gap: 1rem; position: relative; z-index: 1; }
@media (min-width: 64rem) { .giro__nav { gap: 1.5rem; } }
.giro__boton-nav { align-items: center; background-color: var(--amarillo); border: none; border-radius: 50%; cursor: pointer; display: flex; height: 3rem; width: 3rem; justify-content: center; padding: 0; color: var(--negro); }
@media (min-width: 64rem) { .giro__boton-nav { background-color: var(--vino); color: #fff; } }
/* carta de cóctel (boleto) */
.carta-coctel { height: 12.875rem; margin: 0 auto; max-width: 10.25rem; position: relative; width: 100%; }
@media (min-width: 64rem) { .carta-coctel { height: 25rem; max-height: 25rem; max-width: 20rem; width: 100%; } }
.carta-coctel--der { transform: rotate(5deg); }
.carta-coctel--izq { transform: rotate(-2deg); }
@media (min-width: 64rem) { .carta-coctel--der { transform: rotate(5.2deg); } .carta-coctel--izq { transform: rotate(-13.12deg); } }
.carta-coctel__contenido { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 1.25rem 1rem; position: relative; text-align: center; z-index: 1; }
@media (min-width: 64rem) { .carta-coctel__contenido { padding: 2.5rem 2.25rem; } }
.carta-coctel__titulo { color: #fff; font-size: 1.375rem; line-height: 0.95; margin: 0; overflow-wrap: normal; word-break: normal; } /* que el nombre no se salga de la carta (Hemingway Daiquiri, Reserva 8 Derecho) */
@media (min-width: 64rem) { .carta-coctel__titulo { font-size: 2.6rem; line-height: 0.95; } .carta-coctel--der:hover .carta-coctel__reverso { transform: rotate(-10.96deg) translateX(-3.2rem); } .carta-coctel--izq:hover .carta-coctel__reverso { transform: rotate(18.88deg) translateX(-3.2rem); } }
.carta-coctel__imagen {
height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; object-fit: cover; max-width: none;
-webkit-mask-image: url("/assets/img/mascara-boleto.svg"); mask-image: url("/assets/img/mascara-boleto.svg");
-webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.carta-coctel__imagen--arriba { object-position: 50% 0; } /* Reserva 8: se muestra la parte alta de la foto para que el vaso baje y no choque con el título */
.carta-coctel__reverso { align-items: center; display: flex; height: 100%; left: 0; padding: 1.125rem; position: absolute; top: 0; transition: transform 0.3s ease-in-out; width: 100%; z-index: -1; }
.carta-coctel__reverso svg { height: 100%; width: 100%; }
.carta-coctel__reverso svg:first-child { left: 0; position: absolute; top: 0; }
.carta-coctel__reverso svg:last-of-type { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 90%; fill: none; }
@media (min-width: 64rem) { .carta-coctel__reverso svg:last-of-type { width: 95%; } }
.carta-coctel__reverso svg:last-of-type path { fill: none; stroke: #fff; stroke-width: 1.5; }
.carta-coctel--amarillo .carta-coctel__reverso svg:first-child path { fill: var(--amarillo); }
.carta-coctel--turquesa .carta-coctel__reverso svg:first-child path { fill: var(--turquesa); }
.carta-coctel--coral .carta-coctel__reverso svg:first-child path { fill: var(--coral); }
.carta-coctel__reverso-texto { color: #fff; position: relative; z-index: 1; font-family: var(--cond); font-size: 0.875rem; line-height: 18px; font-weight: 500; }
.carta-coctel__reverso-texto p { border-top: 1px solid #fff; font-weight: 400; margin: 0 0 0.4rem; padding-top: 0.5rem; }
.carta-coctel--amarillo .carta-coctel__reverso-texto { color: var(--negro); }
.carta-coctel--amarillo .carta-coctel__reverso-texto p { border-top-color: var(--negro); }
/* el reverso se asoma al activar */
.giro__slider .swiper-slide-active .carta-coctel--der .carta-coctel__reverso { transform: rotate(-10.75deg) translateX(-1.2rem); }
.giro__slider .swiper-slide-active .carta-coctel--izq .carta-coctel__reverso { transform: rotate(10.75deg) translateX(-1rem); }
@media (min-width: 64rem) {
.giro__slider .swiper-slide-active .carta-coctel--der .carta-coctel__reverso { transform: rotate(-10.96deg) translateX(-3.2rem); }
.giro__slider .swiper-slide-active .carta-coctel--izq .carta-coctel__reverso { transform: rotate(18.88deg) translateX(-3.2rem); }
}
@media (max-width: 63.9375rem) {
.carta-coctel__reverso-texto { display: block; font-size: 0.5rem; line-height: 130%; }
.carta-coctel--izq .carta-coctel__reverso, .carta-coctel--der .carta-coctel__reverso { padding: 0.5rem; transform: none; }
.giro__slider .carta-coctel--izq { transform: rotate(-3.33deg); }
.giro__slider .carta-coctel--der { transform: rotate(5.2deg); }
}
/* Cócteles: la foto del evento (DSC09745) se ancla arriba para que salgan las cinco copas y no la barra */
.hero-contorno .fondo { object-position: 50% 25%; }
/* ---------- Ficha de producto (/tienda/producto?p=…), genérica para ron y merch ----------
Galería · información · caja de compra; debajo, "Combínalo con", cata/cócteles (alcohol)
o cuidados (merch), detalles, opiniones y similares. */
.pdp { background: #fcfbf7; color: var(--negro); padding: 128px clamp(16px, 3.2vw, 40px) 96px; max-width: 1440px; margin: 0 auto; }
.pdp__cargando { min-height: 60vh; }
.pdp__vacio { min-height: 50vh; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; justify-content: center; }
.pdp__vacio h1 { font-size: clamp(2rem, 4vw, 3rem); }
.pdp__migas { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--cond); font-size: 0.85rem; color: var(--gris-texto); margin-bottom: 24px; }
.pdp__migas a { color: inherit; text-decoration: none; }
.pdp__migas a:hover { color: var(--vino); text-decoration: underline; }
.pdp__principal { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
/* 1024–1199: galería | información, con la caja de compra debajo de la información; ≥1200: tres columnas */
@media (min-width: 64rem) { .pdp__principal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; } .pdp__galeria { grid-row: span 2; } }
@media (min-width: 75rem) { .pdp__principal { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 300px; } .pdp__galeria { grid-row: auto; } }
/* galería */
.pdp__galeria { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 64rem) { .pdp__galeria { grid-template-columns: 64px minmax(0, 1fr); position: sticky; top: 120px; } }
.pdp__miniaturas { display: flex; flex-direction: row; gap: 8px; order: 2; overflow-x: auto; scrollbar-width: none; padding: 2px; } /* celular y tablet: fila de miniaturas debajo de la foto */
.pdp__miniaturas::-webkit-scrollbar { display: none; }
.pdp__visor { order: 1; }
@media (max-width: 63.9375rem) { .pdp__galeria .pdp__mini { width: 56px; height: 56px; flex: none; border-radius: 10px; } .pdp__visor .pdp__puntos { display: none; } }
@media (min-width: 64rem) { .pdp__miniaturas { flex-direction: column; gap: 10px; order: 0; overflow: visible; padding: 0; } .pdp__visor { order: 0; } }
.pdp__mini { width: 64px; height: 64px; padding: 4px; border: 1px solid rgba(18, 17, 16, 0.15); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.pdp__mini img { width: 100%; height: 100%; object-fit: contain; }
.pdp__mini:hover { border-color: var(--vino); }
.pdp__mini.activa { border-color: var(--vino); box-shadow: 0 0 0 2px var(--vino); }
.pdp__visor { position: relative; background: #fff; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; }
.pdp__carril { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pdp__carril::-webkit-scrollbar { display: none; }
.pdp__foto { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; overflow: hidden; display: grid; place-items: center; padding: 6%; }
.pdp__foto img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; max-width: none; }
.pdp__foto.zoom { cursor: zoom-in; }
.pdp__foto.zoom img { transform: scale(1.9); }
.pdp__puntos { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; }
@media (min-width: 64rem) { .pdp__puntos { display: none; } }
.pdp__puntos span { width: 7px; height: 7px; border-radius: 50%; background: rgba(18, 17, 16, 0.2); transition: background 0.2s, width 0.2s; }
.pdp__puntos span.activo { background: var(--vino); width: 18px; border-radius: 4px; }
.pdp__sin-foto { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--gris-texto); font-family: var(--cond); font-size: 0.8rem; background: var(--crema); }
.pdp__sin-foto img { width: 34%; max-width: 120px; opacity: 0.6; }
/* información */
.pdp__marca { font-family: var(--cond); font-size: 0.9rem; color: var(--vino); text-decoration: none; }
.pdp__marca:hover { text-decoration: underline; }
.pdp__titulo { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; margin: 8px 0 10px; text-wrap: balance; }
.pdp__titulo-var { color: var(--vino); }
.pdp__opiniones-mini { font-family: var(--cond); font-size: 0.85rem; color: var(--gris-texto); }
.pdp__sellos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pdp__sellos span { font-family: var(--cond); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 10px; border-radius: 99px; background: var(--crema); border: 1px solid rgba(18, 17, 16, 0.12); }
.pdp__linea { border: 0; border-top: 1px solid rgba(18, 17, 16, 0.12); margin: 18px 0; }
.pdp__precio { display: flex; align-items: flex-start; gap: 10px; }
.pdp__desc { color: var(--coral); font-family: var(--cond); font-size: 1.6rem; line-height: 1.2; }
.pdp__precio-num { font-family: var(--cond); font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--negro); }
.pdp__precio-num sup { font-size: 0.45em; vertical-align: 0.9em; margin: 0 1px; }
.pdp__precio-num--chico { font-size: 2rem; }
.pdp__anterior { font-family: var(--cond); font-size: 0.85rem; color: var(--gris-texto); margin: 6px 0 0; }
.pdp__impuestos { font-family: var(--cond); font-size: 0.8rem; color: var(--gris-texto); margin: 6px 0 14px; }
.pdp__resumen { font-size: 1rem; line-height: 1.5; margin: 0 0 18px; max-width: 60ch; }
.pdp__opcion-titulo { font-family: var(--cond); font-size: 0.95rem; margin: 0 0 10px; }
.pdp__opciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.pdp__var { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 10px 14px; border: 1px solid rgba(18, 17, 16, 0.2); border-radius: 16px; background: #fff; cursor: pointer; font-family: var(--cond); color: var(--negro); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.pdp__var img { height: 54px; width: auto; object-fit: contain; }
.pdp__var-nombre { font-size: 0.95rem; font-weight: 600; }
.pdp__var-precio { font-size: 0.8rem; color: var(--gris-texto); }
.pdp__var:hover { border-color: var(--vino); transform: translateY(-2px); }
.pdp__var.activa { border-color: var(--vino); box-shadow: 0 0 0 2px var(--vino); }
.pdp__var:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.pdp__atributos, .pdp__detalles { border-collapse: collapse; font-family: var(--cond); font-size: 0.95rem; width: 100%; }
.pdp__atributos th, .pdp__atributos td { text-align: left; padding: 5px 16px 5px 0; vertical-align: top; }
.pdp__atributos th { font-weight: 600; width: 38%; }
.pdp__h3 { font-family: var(--cond); font-weight: 700; text-transform: none; font-size: 1.15rem; letter-spacing: 0; margin: 0 0 10px; }
.pdp__bullets { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; font-size: 0.97rem; line-height: 1.5; }
/* caja de compra */
.pdp__compra { background: #fff; border: 1px solid rgba(18, 17, 16, 0.12); border-radius: 28px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 75rem) { .pdp__compra { position: sticky; top: 120px; } }
.pdp__entrega { font-family: var(--cond); font-size: 0.92rem; line-height: 1.4; margin: 0; }
.pdp__disponible { font-family: var(--cond); font-size: 1.15rem; color: var(--verde-jade); font-weight: 600; margin: 0; }
.pdp__cantidad { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--cond); font-size: 0.95rem; border: 1px solid rgba(18, 17, 16, 0.2); border-radius: 14px; padding: 8px 12px; }
.pdp__cantidad select { border: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.pdp__boton { width: 100%; text-align: center; }
.pdp__vendedor { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-family: var(--cond); font-size: 0.82rem; margin: 6px 0 0; }
.pdp__vendedor dt { color: var(--gris-texto); }
.pdp__vendedor dd { margin: 0; }
.pdp__vendedor a { color: var(--vino); }
.pdp__aviso-edad { font-family: var(--cond); font-size: 0.75rem; line-height: 1.4; color: var(--gris-texto); border-top: 1px solid rgba(18, 17, 16, 0.1); padding-top: 12px; margin: 0; }
/* navegación de secciones */
.pdp__secciones { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(18, 17, 16, 0.12); margin: 56px 0 0; padding-bottom: 12px; font-family: var(--cond); font-size: 0.95rem; white-space: nowrap; }
.pdp__secciones a { color: var(--negro); text-decoration: none; }
.pdp__secciones a:hover { color: var(--vino); }
/* bloques */
.pdp__bloque { padding: 48px 0 0; scroll-margin-top: 120px; }
.pdp__h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0 0 22px; }
.pdp__texto { max-width: 70ch; line-height: 1.55; }
.pdp__mas { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--cond); color: var(--vino); text-decoration: none; font-weight: 600; }
.pdp__mas svg, .pdp__coctel-ver svg { width: 14px; height: 14px; fill: currentColor; }
.pdp__combo-fila { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; } /* arriba: las fotos quedan a la misma altura aunque un nombre ocupe dos renglones */
.pdp__combo-item { display: grid; grid-template-rows: auto auto auto; gap: 6px; width: 180px; position: relative; cursor: pointer; font-family: var(--cond); font-size: 0.88rem; }
.pdp__combo-nombre { min-height: 2.8em; line-height: 1.4; } /* dos renglones reservados: los precios quedan alineados */
.pdp__combo-item input { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; accent-color: var(--vino); z-index: 1; }
.pdp__combo-foto { display: block; aspect-ratio: 1; background: #fff; border-radius: 20px; overflow: hidden; padding: 12px; border: 1px solid rgba(18, 17, 16, 0.08); }
.pdp__combo-foto img { width: 100%; height: 100%; object-fit: contain; }
.pdp__combo-precio { font-weight: 600; }
.pdp__combo-mas { font-family: var(--cond); font-size: 1.6rem; line-height: 1; color: var(--gris-texto); align-self: flex-start; margin-top: calc(90px - 0.8rem); } /* centrado con la foto de 180px */
.pdp__combo-total { display: flex; flex-direction: column; gap: 10px; margin-left: 12px; font-family: var(--cond); align-self: flex-start; margin-top: 50px; }
.pdp__combo-total p { margin: 0; font-size: 1.05rem; }
.pdp__cata-fila { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 48rem) { .pdp__cata-fila { grid-template-columns: repeat(3, 1fr); } }
.pdp__cata-item { background: var(--crema); border-radius: 24px; padding: 22px; }
.pdp__cata-item span { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; color: var(--vino); }
.pdp__cata-item p { margin: 8px 0 0; line-height: 1.5; }
.pdp__servir { margin: 18px 0 0; line-height: 1.5; max-width: 70ch; }
.pdp__cocteles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.pdp__coctel { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--negro); }
.pdp__coctel-foto { display: block; aspect-ratio: 4 / 5; background: var(--crema); border-radius: 24px; overflow: hidden; }
.pdp__coctel-foto img { width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.pdp__coctel:hover .pdp__coctel-foto img { transform: scale(1.06); }
.pdp__coctel-nombre { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; line-height: 1; }
.pdp__coctel-ver { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cond); font-size: 0.85rem; color: var(--vino); }
.pdp__detalles { max-width: 760px; }
.pdp__detalles tr { border-bottom: 1px solid rgba(18, 17, 16, 0.08); }
.pdp__detalles th { text-align: left; font-weight: 600; background: var(--crema); padding: 10px 14px; width: 38%; vertical-align: top; }
.pdp__detalles td { padding: 10px 14px; }
.pdp__leyenda { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em; margin: 20px 0 0; }
.pdp__opiniones-vacio { background: var(--crema); border-radius: 24px; padding: 24px; max-width: 760px; line-height: 1.5; }
.pdp__opiniones-vacio p { margin: 0 0 6px; }
.pdp__relacionados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 48rem) { .pdp__relacionados { grid-template-columns: repeat(4, 1fr); } }
.pdp__rel { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--negro); font-family: var(--cond); }
.pdp__rel-foto { display: block; aspect-ratio: 1; background: #fff; border: 1px solid rgba(18, 17, 16, 0.08); border-radius: 24px; padding: 16px; overflow: hidden; margin-bottom: 8px; }
.pdp__rel-foto img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.pdp__rel:hover .pdp__rel-foto img { transform: scale(1.05); }
.pdp__rel-marca { font-size: 0.75rem; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.08em; }
.pdp__rel-nombre { font-size: 1rem; font-weight: 600; }
.pdp__rel-precio { font-size: 0.95rem; }
/* barra fija de compra */
.pdp__barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid rgba(18, 17, 16, 0.12); box-shadow: 0 -8px 24px rgba(18, 17, 16, 0.08); transform: translateY(110%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--cond); }
.pdp__barra.visible { transform: translateY(0); }
.pdp__barra-foto { width: 40px; height: 40px; flex: none; }
.pdp__barra-foto img { width: 100%; height: 100%; object-fit: contain; }
.pdp__barra-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pdp__barra-precio { font-weight: 600; }
@media (min-width: 64rem) {
.pdp__barra { top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid rgba(18, 17, 16, 0.12); padding: 10px clamp(16px, 3.2vw, 40px); transform: translateY(-110%); z-index: 1001; }
.pdp__barra.visible { transform: translateY(0); }
}
@media (max-width: 63.9375rem) { .pdp { padding-bottom: 120px; } }
/* entrada: misma curva que el resto del sitio */
.pdp--lista .pdp__galeria, .pdp--lista .pdp__info, .pdp--lista .pdp__compra { animation: pdpEntra 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pdp--lista .pdp__info { animation-delay: 0.08s; }
.pdp--lista .pdp__compra { animation-delay: 0.16s; }
@keyframes pdpEntra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pdp--lista .pdp__galeria, .pdp--lista .pdp__info, .pdp--lista .pdp__compra { animation: none; } .pdp__foto img, .pdp__barra { transition: none; } }
/* tienda: la tarjeta entera abre la ficha */
.col-item--liga { text-decoration: none; color: inherit; cursor: pointer; }
.col-item--liga .col-item__precio > span:first-child { font-size: 0.7em; opacity: 0.7; }
/* celular: "Combínalo con" en una fila de tres, sin los "+" */
@media (max-width: 48rem) {
.pdp__combo-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pdp__combo-mas { display: none; }
.pdp__combo-item { width: auto; font-size: 0.78rem; }
.pdp__combo-foto { border-radius: 14px; padding: 8px; }
.pdp__combo-total { grid-column: 1 / -1; margin: 8px 0 0; }
.pdp__combo-nombre { min-height: 4.2em; }
}
/* ---------- Nuestros rones (/rones/) ----------
Grid 1fr 1fr y 100vh en escritorio, padding 7.75rem/5.3125rem, filtros con 6.375rem abajo,
títulos de grupo 2.8125rem con 2.25rem abajo, foto fija derecha 50%×100vh con fundido .3s,
botella fija abajo al centro scale(.8)→1 en .4s. La cabecera sólida de 108px suma 20px arriba. */
.pagina-rones { background: var(--crema-oscura); }
.rl { position: relative; }
@media (min-width: 64rem) { .rl { background-color: var(--crema-oscura); display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } }
.rl--cuadricula.rl { min-height: auto; }
.rl--precarga .rl__item { opacity: 0; transform: translateX(-10px); }
.rl--precarga .rl__foto-fija { opacity: 0; transform: translateY(40px); }
.rl__contenido { position: relative; }
.rl__contenedor { position: relative; z-index: 1; padding: 0 20px; }
@media (min-width: 64rem) { .rl__contenedor { padding: 0 40px; } }
.rl__fondo { position: absolute; inset: 0; z-index: 0; background-image: var(--papel); background-size: 240px 240px; }
.rl__grupo { position: relative; }
.rl__grupo--casa { background: var(--crema); padding: calc(108px + 1.25rem) 0 1.25rem; }
@media (min-width: 64rem) { .rl__grupo--casa { min-height: 100vh; padding: calc(108px + 1.25rem) 0 5.3125rem; } }
.rl__grupo--presentaciones { background: var(--crema-oscura); padding: 1.25rem 0; }
@media (min-width: 64rem) { .rl__grupo--presentaciones { min-height: 60vh; padding: 3.5rem 0; } }
.rl--cuadricula .rl__grupo { min-height: auto; }
.rl--cuadricula .rl__grupo--casa { padding-bottom: 1.25rem; }
.rl--cuadricula .rl__grupo--presentaciones { padding-top: 1.25rem; }
/* filtros */
.rl__filtros { align-items: center; display: flex; justify-content: space-between; margin-bottom: 2.875rem; position: relative; z-index: 1; }
@media (min-width: 64rem) { .rl__filtros { align-items: baseline; flex-direction: column; margin-bottom: 6.375rem; } }
.rl__vista { align-items: baseline; display: flex; gap: 0.5rem; }
@media (min-width: 64rem) { .rl__vista { margin-bottom: 0.625rem; } }
.rl__vista-label, .rl__filtrar { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; line-height: 1.25rem; color: var(--negro); }
@media (min-width: 64rem) { .rl__vista-label { font-size: 1.125rem; } }
.rl__vista-items { align-items: center; display: flex; gap: 0.375rem; justify-content: center; }
.rl__vista-item, .rl__filtrar { background: transparent; border: none; padding: 0; cursor: pointer; }
.rl__vista-item svg { opacity: 0.5; display: block; }
.rl__vista-item svg path { fill: var(--negro); }
.rl__vista-item--activa svg { opacity: 1; }
.rl__filtro { align-items: center; display: flex; gap: 0.5rem; margin-bottom: 0.625rem; }
.rl__filtro-label { font-family: var(--cond); font-size: 0.875rem; font-weight: 500; }
.rl__filtro-items { align-items: center; display: flex; gap: 0.375rem; flex-wrap: wrap; }
.rl__chip { display: inline-flex; align-items: center; justify-content: center; min-height: 29px; background: transparent; border: 1px solid var(--negro); border-radius: 2rem; cursor: pointer; font-family: var(--cond); font-size: 0.875rem; line-height: 1; padding: 0 0.75rem; white-space: nowrap; color: var(--negro); transition: background 0.2s, color 0.2s; } /* con padding fijo el texto en Moderat quedaba arriba; se centra con flex */
.rl__chip:hover { background: rgba(18, 17, 16, 0.08); }
.rl__chip--activo, .rl__chip--activo:hover { background: var(--negro); color: #fff; }
.rl__chip:focus-visible { outline: 1px solid var(--negro); outline-offset: 2px; }
.rl__grupo-titulo { color: var(--negro); font-size: 1.875rem; line-height: 1.875rem; margin: 0 0 1.25rem; position: relative; text-align: center; }
@media (min-width: 64rem) { .rl__grupo-titulo { font-size: 2.8125rem; line-height: 2.8125rem; margin-bottom: 2.25rem; text-align: left; } }
.rl--cuadricula .rl__grupo-titulo { display: block; }
.rl__vacio { font-family: var(--cond); font-size: 1.1rem; color: var(--gris-texto); position: relative; }
/* lista */
.rl__productos { position: relative; z-index: 1; }
.rl__item { margin-bottom: 0.5rem; position: relative; }
@media (min-width: 64rem) { .rl__item { margin-bottom: 1rem; width: fit-content; } }
.rl__liga { color: var(--negro); text-decoration: none; display: block; }
.rl__titulo-caja { align-items: center; display: flex; justify-content: center; gap: 0.5rem; }
@media (min-width: 64rem) { .rl__titulo-caja { display: inline-flex; justify-content: flex-start; } }
.rl__titulo { font-size: clamp(1.8rem, 8.5vw, 2.8rem); line-height: 0.95; margin: 0; text-align: center; color: inherit; transition: color 0.3s ease; }
@media (min-width: 64rem) { .rl__titulo { font-size: clamp(2.4rem, 3.6vw, 4.25rem); line-height: 0.95; text-align: left; white-space: nowrap; } } /* Advercase es muy ancha: se reduce para que ningún nombre se parta */
.rl__marca, .rl__botella-m, .rl__destacada-caja, .rl__flecha { display: none; }
.rl__medida { font-size: 0.42em; letter-spacing: 0.02em; white-space: nowrap; } /* el gramaje, más chico que el nombre y sin partirse ("200 ml" nunca queda a caballo) */
.rl--cuadricula .rl__medida { display: block; margin-top: 0.25em; } /* en cuadrícula, siempre en su propio renglón: así las tres tarjetas quedan iguales */
.rl__flecha-hover { display: none; }
@media (min-width: 64rem) {
.rl__flecha-hover { display: block; height: 3.125rem; width: 3.125rem; opacity: 0; transform: translateX(-2rem) rotate(90deg); transition: 0.3s ease; flex: none; }
.rl__flecha-hover path { fill: var(--negro); }
.rl__liga:hover { color: var(--vino); }
.rl__grupo--presentaciones .rl__liga:hover { color: var(--verde-jade); }
.rl__liga:hover .rl__flecha-hover { opacity: 1; transform: translateX(0) rotate(90deg); }
.rl__liga:hover .rl__flecha-hover path { fill: var(--vino); }
.rl__grupo--presentaciones .rl__liga:hover .rl__flecha-hover path { fill: var(--verde-jade); }
}
/* botella fija: sube desde abajo al centro de la pantalla */
.rl__botella { object-fit: contain; opacity: 0; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); display: none; } /* sólo opacidad: si también se transiciona transform, pelea con la animación de entrada y la botella parpadea */
@media (min-width: 64rem) {
.rl__botella { display: block; position: fixed; top: 50%; left: 50%; max-height: 62vh; width: auto; transform: translate(-50%, -50%) translateY(60vh) scale(0.85); transform-origin: 50% 50%; z-index: 4; pointer-events: none; } /* centrada en la sección; sube desde abajo al centro */
.rl__item:hover .rl__botella { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
.rl__item[data-tam="chica"] .rl__botella { max-height: 42vh; } /* las de 200 ml se ven chicas, como en la realidad */
.rl__item[data-tam="grande"] .rl__botella { max-height: 72vh; } /* la de 1.75 L, más grande */
}
/* foto fija derecha */
@media (min-width: 64rem) {
.rl__foto-fija { height: 100vh; position: fixed; right: 0; top: 0; width: 50%; z-index: 0; overflow: hidden; }
.rl__foto-fija img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; pointer-events: none; }
.rl__foto-prod { opacity: 0; }
.rl__foto-fija--oculta { display: none; }
}
.pagina-rones .pie { z-index: 5; } /* el pie tapa la foto fija al final de la página */
/* vista de cuadrícula */
.rl--cuadricula.rl { display: block; }
.rl--cuadricula .rl__contenedor { max-width: 1680px; margin: 0 auto; }
.rl--cuadricula .rl__productos { display: grid; gap: 20px 24px; grid-template-columns: repeat(1, minmax(10rem, 1fr)); }
@media (min-width: 23.4375rem) { .rl--cuadricula .rl__productos { grid-template-columns: repeat(2, minmax(9rem, 1fr)); } }
@media (min-width: 64rem) { .rl--cuadricula .rl__productos { grid-template-columns: repeat(3, minmax(13rem, 1fr)); gap: 20px 48px; } } /* misma separación que las tarjetas del mega menú */
@media (min-width: 90rem) { .rl--cuadricula .rl__productos { grid-template-columns: repeat(4, minmax(13rem, 1fr)); } }
.rl--cuadricula .rl__item { aspect-ratio: 1 / 1; margin-bottom: 0; padding: 0.75rem; width: auto; }
@media (min-width: 64rem) { .rl--cuadricula .rl__item { height: 100%; min-height: 20.3125rem; padding: 0; width: 100%; } .rl--cuadricula .rl__liga { height: 100%; padding: 1.25rem; } .rl--cuadricula .rl__botella-m { right: -32px; bottom: -12px; max-height: 70%; }
.rl--cuadricula .rl__item[data-tam="chica"] .rl__botella-m { max-height: 52%; max-width: 30%; }
.rl--cuadricula .rl__item[data-tam="grande"] .rl__botella-m { max-height: 82%; max-width: 42%; } }
.rl--cuadricula .rl__liga { position: absolute; inset: 0; padding: 0.75rem; z-index: 1; color: #fff; }
.rl--cuadricula .rl__marca { display: block; color: #fff; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; line-height: 1.1; margin-bottom: 0.5rem; }
@media (min-width: 64rem) { .rl--cuadricula .rl__marca { font-size: 1.5rem; } }
.rl--cuadricula .rl__titulo-caja { display: block; }
.rl--cuadricula .rl__titulo { color: #fff; font-size: 1.7rem; line-height: 0.95; text-align: left; white-space: normal; max-width: 58%; } /* en cuadrícula el nombre puede ocupar dos renglones, como en el mega, y deja el hueco de la botella */
@media (min-width: 64rem) { .rl--cuadricula .rl__titulo { font-size: 2.3rem; } }
.rl--cuadricula .rl__flecha-hover, .rl--cuadricula .rl__botella { display: none; }
.rl--cuadricula .rl__flecha { display: block; position: absolute; bottom: 0.75rem; left: 0.75rem; width: 24px; height: 24px; z-index: 2; pointer-events: none; }
@media (min-width: 64rem) { .rl--cuadricula .rl__flecha { bottom: 1.25rem; left: 1.25rem; width: 31px; height: 31px; } }
.rl--cuadricula .rl__flecha path { fill: #fff; }
.rl--cuadricula .rl__botella-m { display: block; position: absolute; bottom: -10px; right: -16px; max-height: 66%; max-width: 38%; width: auto; height: auto; object-fit: contain; z-index: 1; transform-origin: 50% 100%; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* como el mega: más chica y sobresaliendo de la tarjeta */
.rl--cuadricula .rl__item[data-tam="chica"] .rl__botella-m { max-height: 50%; max-width: 30%; }
.rl--cuadricula .rl__item[data-tam="grande"] .rl__botella-m { max-height: 78%; max-width: 42%; }
.rl--cuadricula .rl__item:hover .rl__botella-m { transform: scale(1.04); }
.rl--cuadricula .rl__destacada-caja { display: block; border-radius: 1rem; position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.rl--cuadricula .rl__destacada-caja::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); pointer-events: none; }
.rl--cuadricula .rl__destacada { display: block; filter: blur(3px); position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl--cuadricula .rl__foto-fija { display: none; }
/* celular: vista previa que sube desde abajo */
@media (max-width: 63.9375rem) {
.rl__vista-previa { position: fixed; left: 0; right: 0; bottom: 0; height: 21.875rem; z-index: 50; transform: translateY(100%); transition: transform 0.3s ease-in; display: block; }
.rl__vista-previa--activa { transform: translateY(0); }
.rl__previa-destacada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl__previa-botella { position: absolute; bottom: 5.25rem; left: 50%; max-height: calc(100% - 6.5rem); width: auto; object-fit: contain; transform: translateX(-50%); z-index: 1; } /* por encima del botón */
.rl__previa-boton { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; }
.rl__previa-cerrar { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); cursor: pointer; box-shadow: 0 4px 12px rgba(18, 17, 16, 0.18); }
.rl__previa-cerrar path { fill: var(--vino); }
.rl__item--activo .rl__titulo { color: var(--vino); }
}
@media (min-width: 64rem) { .rl__vista-previa { display: none !important; } }
/* celular: ventana de filtros */
@media (max-width: 63.9375rem) {
.rl__popup { display: none; position: fixed; inset: 0; z-index: 1000; background: var(--crema); background-image: var(--papel); background-size: 240px 240px; padding: 1rem 20px 1.5rem; overflow-y: auto; }
.rl--popup-activo .rl__popup { display: block; }
.rl__popup-cerrar { background: transparent; border: none; display: block; margin-left: auto; padding: 0; cursor: pointer; }
.rl__popup-cerrar path, .rl__popup-atras path { fill: var(--vino); }
.rl__popup-atras { align-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--vino); display: flex; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.25rem; gap: 0.5rem; text-transform: uppercase; margin-bottom: 2.75rem; }
.rl__popup-grupo { margin-bottom: 1.25rem; }
.rl__popup-titulo { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.25rem; margin-bottom: 1rem; text-transform: uppercase; }
.rl__radio-fila { align-items: center; display: flex; gap: 0.5rem; margin-bottom: 1rem; font-family: var(--cond); font-size: 0.95rem; }
.rl__radio { appearance: none; -webkit-appearance: none; width: 1.25rem; height: 1.25rem; border: 1px solid var(--gris-texto); border-radius: 0.25rem; margin: 0; cursor: pointer; flex: none; background: transparent center / 0.75rem no-repeat; }
.rl__radio:checked { background-color: var(--negro); border-color: var(--negro); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.rl__popup-aplicar { position: sticky; bottom: 0; margin-top: 2rem; }
}
@media (min-width: 64rem) { .rl__popup { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .rl__botella, .rl__flecha-hover, .rl__vista-previa, .rl__foto-fija img { transition: none; animation: none !important; } }
/* ---------- Menú móvil: los megamenús se vuelven acordeones con todas sus páginas ---------- */
@media (max-width: 960px) {
.nav.abierto { max-height: calc(100vh - 108px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nav__item--mega { flex-direction: column; align-items: stretch; }
.nav__item--mega > .mega-toggle { display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; }
.nav__item--mega.abierto .mega {
display: block; position: static; width: auto; opacity: 1; visibility: visible; transition: none;
background: none; background-attachment: scroll; padding: 2px 0 8px 14px; overflow: visible;
border-left: 2px solid var(--amarillo); margin: 0 0 8px 14px;
}
.nav .mega__rejilla { display: flex; flex-direction: column; gap: 0; }
.nav .mega__carta, .nav .mega__carta--color, .nav .mega__carta--amarilla, .nav .mega__carta--media {
position: static; display: block; height: auto; min-height: 0; padding: 8px 0 8px 12px; margin: 0;
background: none !important; color: var(--negro) !important; text-shadow: none; border: 0; border-radius: 0; box-shadow: none;
opacity: 1 !important; transform: none !important;
}
.nav .mega__carta::before, .nav .mega__carta::after, .nav .mega__botella, .nav .mega__fondo-caja, .nav .mega__pie { display: none !important; }
.nav .mega__caja { position: static; display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 0; min-height: 0; height: auto; background: none !important; border-radius: 0; }
.nav .mega__etiqueta { order: 2; margin: 0; font-size: 0.62rem; letter-spacing: 0.12em; opacity: 0.6; }
.nav .mega__titulo-caja, .mega__carta--media .mega__titulo-caja { order: 1; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: auto; }
.nav .mega__titulo, .mega__carta--media .mega__titulo { font-size: 0.95rem; line-height: 1.2; letter-spacing: 0.04em; }
.nav .mega__flecha { width: 10px; height: 10px; }
.nav .mega__carta:hover .mega__titulo { color: var(--coral); }
}
@media (max-width: 960px) {
/* enlaces del menú móvil siempre legibles sobre el panel blanco (si no, heredan el blanco del header transparente) */
.header .nav.abierto a { color: var(--negro); text-shadow: none; text-align: left; }
.header .nav.abierto > a, .header .nav.abierto .nav__item--mega > .mega-toggle { padding: 12px 0; border-bottom: 1px solid rgba(18, 17, 16, 0.08); }
.header .nav.abierto .nav__item--mega.abierto > .mega-toggle { color: var(--coral); border-bottom-color: transparent; }
.header .nav.abierto .nav__tienda { margin-top: 16px; align-self: flex-start; padding: 12px 26px; text-align: center; border-bottom: 0; background: var(--verde-jade); border-color: var(--verde-jade); color: var(--crema); }
}
/* ---------- Página 404 ---------- */
.p404__seccion { min-height: calc(100vh - 108px); display: flex; align-items: center; background: var(--crema); }
.p404__caja { text-align: center; max-width: 640px; }
.p404__loro { width: 120px; height: 120px; object-fit: contain; margin: 0 auto 18px; display: block; }
.p404__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; margin: 8px 0 18px; }
.p404__texto { color: var(--gris-texto); margin: 0 auto 26px; max-width: 46ch; }
.p404__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 26px; }
.p404__ayuda { font-size: 0.85rem; color: var(--gris-texto); }
.p404__ayuda a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Tokens de movimiento: tres duraciones y dos curvas ---------- */
:root {
--ease-salida: cubic-bezier(0.22, 1, 0.36, 1);
--ease-estado: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--dur-rapida: 180ms; --dur-media: 320ms; --dur-lenta: 700ms;
--t-rapida: var(--dur-rapida) var(--ease-estado);
--t-media: var(--dur-media) var(--ease-estado);
--t-lenta: var(--dur-lenta) var(--ease-salida);
}
@media (prefers-reduced-motion: reduce) {
:root { --dur-rapida: 1ms; --dur-media: 1ms; --dur-lenta: 1ms; }
.sello-suerte svg { animation: none; }
.medio__imagen { transform: none; transition: none; }
.rones-car--revelado .rones-car__slider .swiper-slide-next, .rones-car--revelado .rones-car__slider .swiper-slide-prev,
.rones-car--revelado .rones-car__slide--lejos-der, .rones-car--revelado .rones-car__slide--lejos-izq { animation: none; }
/* postales de Experiencias: sin GSAP se apilaban una sobre otra; aquí van en rejilla */
.exp-pin__alto { height: auto; }
.exp-pin__pantalla { position: static; height: auto; }
.exp-pin__tarjetas { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; padding: 24px; transform: none; }
.exp-pin__tarjetas .postal { position: static; width: 100%; transform: none; translate: none; }
}
/* hover sólo donde hay cursor; en pantallas táctiles la flecha de "Volver arriba" se ve siempre */
@media (hover: none) { .pie__arriba svg { opacity: 1; visibility: visible; } }
/* ---------- Ajustes responsive (celular y tableta) ---------- */
/* Portada · promo "Una historia que se bebe": el título en 60px no cabía en 360px y la rejilla (1fr) se ensanchaba
a 374px, con lo que el navegador del celular hacía zoom out y aparecía deslizamiento lateral. */
@media (max-width: 480px) {
.promo { grid-template-columns: minmax(0, 1fr); }
.promo__contenido { padding: 0 1.25rem; }
.promo__titulo { font-size: clamp(2.75rem, 15vw, 3.75rem); }
}
/* Portada · carta "Desde 1938": a 4.75rem medía 226px en una caja de 218px y se cortaba por la derecha */
@media (max-width: 63.9375rem) {
.promo__carta-titulo { font-size: 4.5rem; }
}
/* Portada · titulares de Experiencias: los
de escritorio partían las frases a media línea en celular
(se ocultan; en index.html se añadió un espacio antes de cada
para que las palabras no se peguen) */
@media (max-width: 820px) {
.exp-pin__titulares .exp-p br { display: none; }
}
/* Cócteles · banner "Equípate": el botón negro sobre la foto oscura (chamarra) no se leía; se rellena en celular/tablet */
@media (max-width: 63.9375rem) {
.banner-merch .btn--postal { background: var(--negro); color: var(--crema); }
}
/* Cócteles · rejilla de 2 columnas (721–1080px): con 7 tarjetas la última quedaba sola con un hueco vacío al lado */
@media (min-width: 721px) and (max-width: 1080px) {
.grid-cocteles > .tarjeta-coctel:last-child:nth-child(odd) { grid-column: 1 / -1; width: 50%; justify-self: center; }
}
/* Páginas de cóctel · "INGREDIENTES" a 60px no cabía en 335px y se partía en dos renglones; los pasos en dos columnas
dejaban ~165px para el texto y sin margen derecho */
@media (max-width: 480px) {
.receta__caja-titulo { font-size: min(3.75rem, calc((100vw - 2.5rem) / 6.9)); line-height: 0.95; } /* Advercase: "INGREDIENTES" mide ~6.7× el tamaño de fuente */
.pasos { grid-template-columns: minmax(0, 1fr); }
.pasos__linea { grid-column: 1 / -1; }
.pasos__contenido { padding-right: 1.25rem; }
.pasos__contenido--primero { margin-top: 0; }
}
/* Áreas táctiles: botones y enlaces por debajo de 40px en celular y tablet */
@media (max-width: 960px) {
.hamburguesa { padding: 9px; margin-right: -9px; }
.carrito-btn { padding: 9px; }
.panel-carrito .cerrar { padding: 8px 0 8px 14px; margin: -8px 0; }
.item-carrito button { width: 34px; height: 34px; }
.rl__vista-item { padding: 12px; margin: -12px 0; }
.rl__filtrar { padding: 10px 0; }
.filtro-drop__btn { padding: 4px 0; }
.barra-lectura .compartir a { padding: 11px; margin: -11px -3px; } /* área táctil 40px; el margen -3 deja 34px de caja + 14px de gap = sin traslape */
.pdp__secciones a { padding: 8px 0; }
.pie__menu a { padding: 4px 0; }
.pie__legal a, .pie__legal-btn { padding: 8px 0; }
.pie__arriba { padding: 8px 0; }
.nav.abierto .mega__carta, .nav.abierto .mega__carta--color, .nav.abierto .mega__carta--amarilla, .nav.abierto .mega__carta--media { padding-top: 11px; padding-bottom: 11px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; }
/* formularios: con menos de 16px iOS hace zoom al enfocar; la casilla de consentimiento medía 13px */
form input:not([type="checkbox"]):not([type="radio"]), form textarea, form select { font-size: max(1em, 16px); }
.consentimiento input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
}
/* Historia/Sostenibilidad · barra de lectura: con los iconos a 40px la fila "Compartir" (291px) empujaba el título a 0px
y el último icono quedaba 1px fuera del viewport en 375px; sin la palabra "Compartir" (los iconos ya tienen aria-label) cabe todo */
@media (max-width: 480px) {
.barra-lectura .compartir > span { display: none; }
}
/* Coctelería con recortes: en celular y tablet la tarjeta conserva su ancho y el recorte su proporción */
@media (max-width: 960px) {
.prod-cocteles .prod-coctel--recorte { width: min(282px, 100%); }
.prod-cocteles .prod-coctel--recorte img { width: auto; }
}
/* ---------- Ficha de ron · "Cómo disfrutarlo" (formas de tomarlo solo + cócteles, una sola sección) ---------- */
.prod-disfrutar { padding: 64px 0 72px; }
.prod-disfrutar .prod-kicker { margin-bottom: 26px; }
.prod-disfrutar__rituales { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 26px;
max-width: 900px; margin: 0 auto 46px; padding: 0 20px; font-size: 0.95rem; line-height: 1.5; color: var(--gris-texto); }
.prod-disfrutar__rituales b { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px;
font-weight: 700; color: var(--vino); margin-right: 8px; }
.prod-disfrutar__sep { width: 1px; height: 18px; background: rgba(18, 17, 16, 0.18); }
.prod-disfrutar .prod-coctel__sub { margin-bottom: 0; font-weight: 400; color: var(--gris-texto); }
.prod-coctel__flecha { display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: 0.05em; fill: currentColor; transition: transform 0.3s ease; }
.prod-coctel--recorte:hover .prod-coctel__flecha { transform: translateX(4px); }
.prod-coctel--recorte:hover .prod-coctel__nombre { color: var(--coral); }
@media (max-width: 720px) {
.prod-disfrutar__rituales { flex-direction: column; gap: 6px; }
.prod-disfrutar__sep { display: none; }
}
/* ---------- Ficha de ron · "Cómo disfrutarlo" con la carta del inicio (.promo) ----------
Foto con el título a la izquierda, cócteles en panel claro a la derecha; la carta (solo / en las rocas),
un poco más chica que la del inicio, monta la costura y se sale por abajo hacia la sección siguiente. */
.promo--disfrutar { position: relative; z-index: 3; }
.promo--disfrutar .promo__der--cocteles { padding: 4.5rem 2rem; background-color: #f5f3ee; } /* claro: los recortes tienen vidrio translúcido y sobre color se ensucian */
.promo--disfrutar .prod-cocteles__fila { display: flex; justify-content: center; align-items: flex-start; gap: 2rem; flex-wrap: wrap; } /* arriba: la caja de 185 px apoya los vasos en la misma línea y los títulos quedan parejos */
.promo--disfrutar .prod-coctel--recorte { width: 210px; }
.promo--disfrutar .prod-coctel__nombre { font-size: 18px; white-space: nowrap; color: var(--negro); }
/* misma jerarquía que "Descubre más productos": etiqueta chica, nombre y descripción corta */
.promo--disfrutar .prod-coctel__etiqueta { display: block; margin-top: 22px; font-family: var(--cond); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-texto); }
.promo--disfrutar .prod-coctel__nombre { margin: 4px 0 8px; }
.promo--disfrutar .prod-coctel__sub { font-size: 13px; line-height: 1.35; color: var(--negro); margin: 0 auto; max-width: 190px; font-weight: 400; }
.promo--disfrutar .prod-coctel--recorte:hover .prod-coctel__nombre,
.promo--disfrutar .prod-coctel__nombre:hover, .promo--disfrutar .prod-coctel__sub:hover { color: var(--vino); }
.promo--disfrutar .promo__carta-sub { font-size: 1rem; }
.promo--disfrutar .promo__carta-lado--reverso .promo__carta-marco { margin-top: 2.25rem; }
.promo--disfrutar .promo__carta-btn { margin-top: 1rem; }
.promo--disfrutar .promo__carta-texto { padding: 0.9rem 0 0; }
.promo--disfrutar .promo__carta-texto p { font-size: 0.92rem; }
/* frente: sólo el loro, en una tinta crema con grano, como el medallón impreso de una etiqueta antigua */
.promo__carta-contenido--sello { display: flex; align-items: center; justify-content: center; padding: 2.4rem 2rem; }
.promo__carta-loro {
display: block; width: 78%; aspect-ratio: 1; opacity: 0.94;
background-color: var(--crema); background-image: var(--papel), var(--papel); background-size: 120px 120px, 60px 60px; background-blend-mode: multiply;
-webkit-mask: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") center / contain no-repeat;
mask: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") center / contain no-repeat;
filter: drop-shadow(0 0 0.5px rgba(243, 232, 204, 0.6));
}
@media (min-width: 64rem) {
.promo--disfrutar .promo__izq { padding-top: 5rem; padding-bottom: 18rem; }
.promo--disfrutar .promo__titulo { font-size: clamp(3.5rem, 6vw, 6rem); }
.promo--disfrutar .promo__carta { width: 16.5rem; height: 21rem; top: 88%; }
.promo--disfrutar .promo__carta-titulo { font-size: 3.4rem; }
.promo--disfrutar .promo__carta-lado--reverso .promo__carta-titulo { font-size: 2.6rem; }
.promo--disfrutar .prod-cocteles__fila { flex-wrap: nowrap; }
.promo--disfrutar .promo__contenido { text-align: left; padding: 0 3.5rem; }
}
@media (max-width: 63.9375rem) {
.promo--disfrutar .promo__titulo { font-size: clamp(2.2rem, 10.5vw, 4.5rem); } /* "DISFRUTARLO" es una palabra larga: cabe en 360 px */
.promo--disfrutar .promo__contenido { text-align: left; padding: 0 1.5rem; }
.promo--disfrutar .promo__carta { width: 15rem; height: 19rem; }
.promo--disfrutar .promo__carta-titulo { font-size: 3rem; }
.promo--disfrutar .promo__carta-lado--reverso .promo__carta-titulo { font-size: 2.3rem; }
.promo--disfrutar .promo__der--cocteles { padding: 3rem 1rem; }
.promo--disfrutar .prod-cocteles__fila { flex-wrap: nowrap; gap: 1rem; }
.promo--disfrutar .prod-coctel--recorte { width: calc(50% - 0.5rem); }
.promo--disfrutar .prod-coctel--recorte .prod-coctel__foto { height: 150px; }
.promo--disfrutar .prod-coctel--recorte img { max-height: 150px; }
/* mismas proporciones que en escritorio (150/185) */
.promo--disfrutar .prod-coctel--recorte img[src*="en-las-rocas"] { max-height: 90px; }
.promo--disfrutar .prod-coctel--recorte img[src*="old-cuban"] { max-height: 90px; }
.promo--disfrutar .prod-coctel--recorte img[src*="hemingway-daiquiri"] { max-height: 135px; }
.promo--disfrutar .prod-coctel__nombre { font-size: 15px; white-space: normal; }
.promo--disfrutar .prod-coctel__sub { font-size: 13px; }
.promo--disfrutar .prod-coctel__flecha { display: none; } /* en dos columnas angostas brincaba de renglón; toda la bebida ya es liga */
}
/* ---------- Cócteles · "Equípate": foto a la izquierda, cinta infinita de souvenirs a la derecha ---------- */
.banner-merch--doble { display: grid; grid-template-columns: 1fr; min-height: 0; align-items: stretch; }
.banner-merch__foto { position: relative; display: flex; align-items: center; min-height: 460px; overflow: hidden; }
.banner-merch__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(0.55); }
.banner-merch--doble .banner-merch__texto { max-width: none; margin: 0; padding: 60px 3.5rem; }
.banner-merch__souvenirs { display: flex; flex-direction: column; justify-content: center; gap: 1.75rem; padding: 3.5rem 0; background: #f5f3ee; background-image: var(--papel); background-size: 240px; overflow: hidden; }
.banner-merch__souvenirs .etiqueta { text-align: center; color: var(--vino); }
.banner-merch--doble .banner-merch__texto .etiqueta { color: #fff; }
.merch-cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.merch-cinta__pista { display: flex; gap: 2.75rem; width: max-content; animation: merchCinta 38s linear infinite; }
.merch-cinta:hover .merch-cinta__pista { animation-play-state: paused; }
@keyframes merchCinta { to { transform: translateX(calc(-50% - 1.375rem)); } } /* se desplaza exactamente una copia de la lista: el ciclo no brinca */
.merch-cinta__item { display: flex; flex-direction: column; align-items: center; width: 150px; text-align: center; text-decoration: none; color: var(--negro); }
.merch-cinta__img { display: block; width: 130px; height: 130px; margin-bottom: 14px; transition: transform 0.3s ease; }
.merch-cinta__item:hover .merch-cinta__img { transform: translateY(-6px); }
.merch-cinta__img img { width: 100%; height: 100%; object-fit: contain; }
/* provisional mientras llegan los recortes: el loro de la casa en tinta vino */
.merch-cinta__img--pendiente { background-color: var(--vino); opacity: 0.85;
-webkit-mask: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") center / 78% no-repeat;
mask: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") center / 78% no-repeat; }
.merch-cinta__item small { font-family: var(--cond); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-texto); }
.merch-cinta__nombre { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 15px; line-height: 1.1; margin-top: 4px; }
.merch-cinta__item:hover .merch-cinta__nombre { color: var(--vino); }
@media (min-width: 64rem) {
.banner-merch--doble { grid-template-columns: 1fr 1fr; }
.banner-merch__foto { min-height: 540px; }
}
@media (max-width: 720px) {
.banner-merch--doble .banner-merch__texto { padding: 48px 1.5rem; }
.merch-cinta__item { width: 120px; }
.merch-cinta__img { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
.merch-cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.merch-cinta__pista { animation: none; padding: 0 1.5rem; }
}
/* ── Sello "Pícale al loro": a la izquierda del título y centrado en vertical ── */
.filtro-frase:has(.sello-suerte) { align-items: center; justify-content: flex-start; gap: clamp(1.5rem, 3vw, 3rem); }
.filtro-frase .sello-suerte { order: -1; pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 0; border-radius: 50%; transition: transform 0.3s ease; }
.filtro-frase .sello-suerte:hover { transform: scale(1.05); }
.filtro-frase .sello-suerte:focus-visible { outline: 2px solid var(--vino); outline-offset: 6px; }
@media (max-width: 720px) {
.filtro-frase:has(.sello-suerte) { align-items: flex-start; }
.filtro-frase .sello-suerte { order: 0; }
}
/* ── Carta de la suerte: lotería de la casa con el cóctel que te tocó ── */
.carta-suerte { border: 0; padding: 0; background: none; color: #fff; overflow: visible; max-width: calc(100vw - 32px); max-height: none; margin: auto; }
.carta-suerte::backdrop { background: rgba(18, 17, 16, 0.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.carta-suerte[open] { padding: 18px 18px 6px; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; animation: cartaEntra 0.35s ease both; }
@keyframes cartaEntra { from { opacity: 0; transform: translateY(24px); } }
.carta-suerte__cerrar { position: absolute; top: -16px; right: -16px; z-index: 5; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2px solid var(--negro); background: var(--amarillo); color: var(--negro); box-shadow: 3px 3px 0 var(--negro); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.carta-suerte__cerrar:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--negro); background: var(--coral); color: #fff; }
.carta-suerte__cerrar:focus { outline: none; }
.carta-suerte__cerrar:focus-visible { outline: none; background: var(--coral); color: #fff; }
.carta-suerte:focus, .carta-suerte:focus-visible { outline: none; }
.carta-suerte__aviso { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.8rem; margin: 0; color: var(--amarillo); }
.carta-suerte__escena { position: relative; perspective: 1400px; width: min(240px, 62vw); aspect-ratio: 5 / 7.4; max-height: 56vh; }
.carta-suerte__giro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
.carta-suerte__giro.volteada { transform: rotateY(0deg); }
.carta-suerte__escena { rotate: -4deg; margin-top: 14px; } /* ligeramente inclinada, como carta recién tirada */
.carta-suerte__cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.carta-suerte__cara--dorso { transform: rotateY(180deg); background: var(--vino); background-image: var(--papel); background-size: 160px; display: flex; align-items: center; justify-content: center; }
.carta-suerte__cara--dorso::before { content: ""; position: absolute; inset: 12px; border: 2px solid rgba(243, 232, 204, .55); border-radius: 6px; }
.carta-suerte__loro { display: block; width: 62%; aspect-ratio: 1; background: var(--crema);
-webkit-mask: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") center / contain no-repeat;
mask: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") center / contain no-repeat; }
.carta-suerte__cara--frente { background: #efe6d2; background-image: var(--papel), radial-gradient(ellipse at center, rgba(255,255,255,.35), rgba(120, 90, 50, .16)); background-size: 200px, 100% 100%; color: #3b2a1d; padding: 16px; }
.carta-suerte__cara--frente::before { content: ""; position: absolute; inset: 14px; border: 2px solid #3b2a1d; border-radius: 4px; pointer-events: none; }
.carta-suerte__num { position: absolute; top: 22px; left: 24px; font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.carta-suerte__vaso { position: absolute; left: 14px; right: 14px; top: 48px; bottom: 62px; display: flex; align-items: center; justify-content: center; }
.carta-suerte__vaso img { max-width: 76%; max-height: 92%; width: auto; height: auto; object-fit: contain; }
.carta-suerte__vaso img[data-vaso="hemingway-daiquiri"] { max-height: 83%; }
.carta-suerte__vaso img[data-vaso="old-cuban"], .carta-suerte__vaso img[data-vaso="reserva-8-derecho"] { max-height: 55%; }
.carta-suerte__nombre { position: absolute; left: 20px; right: 20px; bottom: 24px; margin: 0; text-align: center; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1rem, 4.2vw, 1.25rem); line-height: 1.05; color: #3b2a1d; text-wrap: balance; }
.carta-suerte__titulo { margin: -0.35rem 0 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 6vw, 2.5rem); line-height: 1; text-align: center; color: #fff; text-wrap: balance; }
.carta-suerte__horoscopo { max-width: 34ch; margin: 0.4rem 0 0.2rem; font-family: var(--serif); font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); text-wrap: pretty; }
.carta-suerte .carta-suerte__horoscopo { text-align: center; text-align-last: center; hyphens: manual; opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.6s ease; }
.carta-suerte .carta-suerte__horoscopo.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .carta-suerte .carta-suerte__horoscopo { opacity: 1; transform: none; transition: none; } }
.carta-suerte__ver.btn { background: var(--amarillo); color: var(--negro); border: 2px solid var(--negro); box-shadow: 4px 4px 0 var(--negro); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }
.carta-suerte__ver.btn::before, .carta-suerte__ver.btn::after { display: none; }
.carta-suerte__ver.btn:hover, .carta-suerte__ver.btn:focus-visible { background: var(--coral); color: #fff; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--negro); outline: none; }
.carta-suerte__acciones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
.carta-suerte__giro { transition: none; }
.carta-suerte[open] { animation: none; }
}
/* ── Celular: la copita recortada a la izquierda del título, sin crecer la franja; tamaños relativos como en las fichas ── */
.tarjeta-coctel__recorte { display: none; }
@media (max-width: 720px) {
.tarjeta-coctel { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; min-height: 0; padding: 20px 24px; }
.tarjeta-coctel__foto { display: none; }
.tarjeta-coctel__recorte { display: block; order: -2; flex: none; width: 44px; height: 56px; padding-bottom: 4px; box-sizing: border-box; object-fit: contain; object-position: center bottom; background: radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,.14) 55%, transparent) center bottom / 88% 9px no-repeat; pointer-events: none; }
.tarjeta-coctel__recorte[src*="hemingway-daiquiri"] { padding-top: 6px; }
.tarjeta-coctel__recorte[src*="mojito"], .tarjeta-coctel__recorte[src*="potosi-libre"] { background-size: 70% 9px; }
.tarjeta-coctel__recorte[src*="old-cuban"], .tarjeta-coctel__recorte[src*="en-las-rocas"] { padding-top: 20px; }
.tarjeta-coctel__cabeza { flex: 1; min-width: 0; }
.tarjeta-coctel__cuerpo { flex-basis: 100%; padding: 16px 0 6px; }
}
/* ── Sello: abanico de cartas boca abajo detrás del loro + brinco del loro ── */
.sello-suerte svg { z-index: 1; }
.sello-suerte .loro { position: absolute; left: 0; right: 0; top: var(--loro-y, 2%); height: 100%; z-index: 3; } /* cartas + loro ocupan de 20% a 69%: bajar el grupo 5.5% lo centra en el círculo */
.sello-cartas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sello-carta {
position: absolute; left: 50%; top: 57.9%; width: 29%; aspect-ratio: 5 / 7.4;
translate: -50% -70%; transform-origin: 50% 88%; rotate: var(--r);
border-radius: 3px; background: #efe6d2; background-image: var(--papel), radial-gradient(ellipse at center, rgba(255,255,255,.35), rgba(120, 90, 50, .16)); background-size: 80px, 100% 100%;
box-shadow: 0 0 0 1px rgba(59, 42, 29, .35), inset 0 0 0 3px #efe6d2, inset 0 0 0 4px #3b2a1d, 0 4px 8px rgba(18, 17, 16, .22); /* mismo crema y filete de la carta de lotería */
animation: selloBaraja 4.8s var(--d) ease-in-out infinite;
transition: rotate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes selloBaraja {
0%, 74%, 100% { rotate: var(--r); translate: -50% -70%; }
80% { rotate: calc(var(--r) * 1.7 + 4deg); translate: -50% -78%; }
86% { rotate: calc(var(--r) * 0.6 - 3deg); translate: -50% -70%; }
92% { rotate: calc(var(--r) * 1.15); translate: -50% -70%; }
}
.sello-suerte:hover .sello-carta, .sello-suerte:focus-visible .sello-carta { animation: none; rotate: calc(var(--r) * 1.7); translate: -50% -80%; }
.sello-suerte .loro img { animation: loroBrinco 5s ease-in-out infinite; }
@keyframes loroBrinco {
0%, 84%, 100% { translate: 0 0; }
88% { translate: 0 -14%; }
92% { translate: 0 0; }
95% { translate: 0 -5%; }
98% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.sello-carta, .sello-suerte .loro img { animation: none; }
}
/* ── Cócteles: sección del filtro en blanco, mismo aire arriba y abajo ── */
.seccion--filtro { --aire-filtro: clamp(48px, 6vw, 84px); background: #fff; padding-top: var(--aire-filtro); }
.seccion--filtro .blobs-capa { display: none; }
.seccion--filtro .filtro-frase { margin-bottom: 0; }
.seccion--filtro .grid-cocteles { margin-top: var(--aire-filtro); }
/* ── Filtro de destilado: botellita a la derecha de cada opción ── */
.filtro-drop__panel button { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 6px 0; }
.filtro-botellas { display: flex; align-items: flex-end; flex: none; height: 52px; }
.filtro-botellas img { height: 100%; width: auto; filter: drop-shadow(0 4px 4px rgba(18, 17, 16, .18)); transition: transform 0.25s ease; }
.filtro-botellas--trio img + img { margin-left: -10px; }
.filtro-drop__panel button:hover .filtro-botellas img { transform: translateY(-3px); }
.filtro-drop__panel button:not(:last-child) { border-bottom: 1px solid rgba(18, 17, 16, .08); }
/* ── Filtro: sello grande en el tercio izquierdo, frase en los dos tercios derechos; desplegable en serif ── */
.seccion--filtro .filtro-drop__btn { font-family: var(--serif); font-weight: 600; text-transform: none; letter-spacing: -0.01em; word-spacing: -0.14em; text-align: left; font-size: 1.12em; } /* Silvex trae el espacio muy ancho */
@media (min-width: 721px) {
.seccion--filtro .filtro-frase { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.seccion--filtro .filtro-frase .sello-suerte { width: min(82%, 300px); justify-self: center; }
.seccion--filtro .filtro-frase__texto { max-width: none; }
}
.sello-suerte .loro img { width: 44%; height: 44%; } /* loro más grande sobre las cartas café */
@media (max-width: 720px) {
.seccion--filtro .filtro-frase .sello-suerte { align-self: flex-end; } /* a la derecha, donde cae el pulgar */
}
/* Ficha de cóctel: más interlínea entre renglones del nombre ("POTOSÍ / LIBRE"); los acentos de Advercase chocaban */
.chero__titulo { line-height: 0.96; }
/* El nombre del cóctel escala con el ancho de su columna para que ninguna palabra se parta:
la más larga ("HEMINGWAY") mide 5.72 veces el tamaño de letra en Advercase → factor 0.165 con margen. */
.chero__titulo { word-break: normal; overflow-wrap: normal; hyphens: none; font-size: min(4.6875rem, calc((100vw - 2.5rem) * 0.165)); }
@media (min-width: 64rem) { .chero__titulo { font-size: min(7rem, calc((50vw - 4rem) * 0.165)); } }
/* ── Botones "de carta" en las fichas: relleno + borde negro 2px + sombra negra desplazada, como el pop-up del loro ── */
.rones-car__ctas .btn, .giro .btn.giro__boton {
border: 2px solid var(--negro); box-shadow: 4px 4px 0 var(--negro); color: var(--negro);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.rones-car__ctas .btn::before, .rones-car__ctas .btn::after, .giro .btn.giro__boton::before, .giro .btn.giro__boton::after { display: none; }
.rones-car__ctas .btn:hover, .rones-car__ctas .btn:focus-visible, .giro .btn.giro__boton:hover, .giro .btn.giro__boton:focus-visible {
background: var(--coral); color: #fff; border-color: var(--negro); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--negro); outline: none;
}
/* relleno según el fondo de cada ron: amarillo sobre crema y verde, crema sobre el amarillo del Añejo */
.rones-car__ctas .btn--solido, .giro .btn.giro__boton { background: var(--amarillo); }
.rones-car--anejo .rones-car__ctas .btn--solido { background: #fff8e8; }
.rones-car__ctas .btn--postal { background: transparent; }
.rones-car--extra .rones-car__ctas .btn--postal { background: var(--crema); color: var(--negro); }
/* flechas: círculos chicos con el mismo borde y sombra, pegados a los botones */
.rones-car__boton, .giro__boton-nav {
width: 2.5rem; height: 2.5rem; border: 2px solid var(--negro); box-shadow: 3px 3px 0 var(--negro);
background: var(--amarillo); color: var(--negro); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.rones-car--anejo .rones-car__boton { background: #fff8e8; color: var(--negro); }
.rones-car--extra .rones-car__boton { background: var(--amarillo); color: var(--negro); }
@media (min-width: 64rem) { .giro__boton-nav { background: var(--amarillo); color: var(--negro); } }
.rones-car__boton:hover, .giro__boton-nav:hover, .rones-car__boton:focus-visible, .giro__boton-nav:focus-visible {
background: var(--coral); color: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--negro); outline: none;
}
.rones-car__boton svg, .giro__boton-nav svg { width: 1.05rem; height: 1.05rem; }
.rones-car__ctas { margin: 0 1rem; gap: 0.75rem; }
@media (min-width: 64rem) { .rones-car__ctas { margin: 0 1.5rem; } }
.giro__nav { gap: 0.9rem; }
.giro__nav .giro__boton { margin: 0; } /* el margin auto empujaba las flechas a las orillas */
/* ¿Sabías que…?: 15% más chico y el "¿" colgado para que la S y la Q queden en la misma línea vertical */
.sabias__titulo { font-size: 1.9rem; line-height: 31px; padding-left: var(--sangria-abre, 0.42em); }
@media (min-width: 64rem) { .sabias__titulo { font-size: 3.19rem; line-height: 51px; } }
.sabias__abre { position: absolute; left: 0; top: 0; }
/* ── Ficha de cóctel, variante "recorte" (escritorio): fondo blanco y el vaso en PNG centrado con sombra de piso ── */
.chero__recorte { display: none; }
@media (min-width: 64rem) {
.chero--recorte .chero__imagen-wrap { background: #fff; }
.chero--recorte .chero__imagen { display: none; }
.chero--recorte .chero__recorte {
display: flex; align-items: flex-end; justify-content: center; position: absolute; left: 0; right: 0;
top: calc(80px + (100vh - 80px) / 2); translate: 0 -50%; height: 46vh;
}
.chero__recorte img { height: 100%; width: auto; max-width: 70%; object-fit: contain; position: relative; z-index: 1; }
.chero__recorte::after {
content: ""; position: absolute; bottom: -1.6vh; left: 50%; translate: -50% 0; width: 16vw; max-width: 280px; height: 3.4vh;
background: radial-gradient(closest-side, rgba(18, 17, 16, .5), rgba(18, 17, 16, .2) 55%, transparent); z-index: 0;
}
/* tamaños relativos como en las fichas de ron: copas y vasos bajos más chicos */
.chero__recorte[data-vaso="hemingway-daiquiri"] { height: 41.5vh; }
.chero__recorte[data-vaso="old-cuban"], .chero__recorte[data-vaso="reserva-8-derecho"] { height: 27.6vh; }
.chero__recorte[data-vaso="mojito"]::after, .chero__recorte[data-vaso="potosi-libre"]::after { width: 11vw; }
.chero__recorte[data-vaso="hemingway-daiquiri"]::after, .chero__recorte[data-vaso="mary-pickford"]::after { width: 10.5vw; }
}
/* ── Variante "recorte" en celular: fondo blanco, vaso centrado con sombra de piso y el nombre en el color de la ficha ── */
@media (max-width: 63.99rem) {
.chero--recorte .chero__imagen-wrap { height: auto; min-height: 100vh; min-height: 100svh; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: calc(var(--alto-header-movil, 64px) + 1.25rem) 0 1.25rem; } /* pantalla completa en blanco: vaso centrado arriba, ron y nombre abajo con el mismo margen que a la izquierda */
.chero--recorte .chero__imagen-wrap::before, .chero--recorte .chero__imagen { display: none; }
.chero--recorte .chero__recorte { display: flex; position: relative; align-items: flex-end; justify-content: center; width: 100%; height: 15rem; margin-block: auto; translate: 0 min(3vh, 1.75rem); } /* un poco abajo del centro */
.chero--recorte .chero__recorte img { height: 100%; width: auto; max-width: 70%; object-fit: contain; position: relative; z-index: 1; }
.chero--recorte .chero__recorte[data-vaso="hemingway-daiquiri"] img { height: 90%; }
.chero--recorte .chero__recorte[data-vaso="old-cuban"] img, .chero--recorte .chero__recorte[data-vaso="reserva-8-derecho"] img { height: 60%; }
.chero--recorte .chero__recorte::after { content: ""; position: absolute; bottom: -0.55rem; left: 50%; translate: -50% 0; width: 42vw; max-width: 220px; height: 1.1rem;
background: radial-gradient(closest-side, rgba(18, 17, 16, .5), rgba(18, 17, 16, .2) 55%, transparent); }
.chero--recorte .chero__recorte[data-vaso="mojito"]::after, .chero--recorte .chero__recorte[data-vaso="potosi-libre"]::after { width: 28vw; }
.chero--recorte .chero__recorte[data-vaso="hemingway-daiquiri"]::after, .chero--recorte .chero__recorte[data-vaso="mary-pickford"]::after { width: 26vw; }
.chero--recorte .chero__imagen-texto { position: static; width: 100%; padding: 2.25rem 1.25rem 0; }
.chero--recorte .chero__imagen-texto .chero__titulo { margin-bottom: 0; }
.chero--recorte .chero__imagen-texto .chero__subtitulo { color: var(--negro); }
.chero--recorte .chero__imagen-texto .chero__titulo { color: var(--chero-fondo); }
}
/* ── Sombra de contacto bajo cada vaso: centrada en el óvalo de la base y con su misma perspectiva.
Cada foto se tomó con otro ángulo, así que la profundidad del óvalo (--semi) y el ancho del pie (--pie) se midieron en cada PNG.
--alto = alto del vaso en pantalla (15rem en celular, 46vh en escritorio, × --f). ── */
.chero__recorte[data-vaso="potosi-libre"] { --pie: 0.31; --semi: 0.027; --cx: -0.014; --asp: 0.368; --f: 1; }
.chero__recorte[data-vaso="mojito"] { --pie: 0.335; --semi: 0.06; --cx: 0.004; --asp: 0.473; --f: 1; }
.chero__recorte[data-vaso="hemingway-daiquiri"] { --pie: 0.35; --semi: 0.07; --cx: 0.022; --asp: 0.547; --f: 0.9; }
.chero__recorte[data-vaso="old-cuban"] { --pie: 0.58; --semi: 0.085; --cx: -0.006; --asp: 0.966; --f: 0.6; }
.chero__recorte[data-vaso="jungle-bird"] { --pie: 0.33; --semi: 0.04; --cx: 0.003; --asp: 0.484; --f: 1; }
.chero__recorte[data-vaso="reserva-8-derecho"] { --pie: 0.62; --semi: 0.065; --cx: 0.004; --asp: 0.814; --f: 0.6; }
.chero__recorte[data-vaso="mary-pickford"] { --pie: 0.379; --semi: 0.06; --cx: -0.002; --asp: 0.556; --f: 1; }
.chero__recorte { --alto: calc(15rem * var(--f, 1)); }
@media (min-width: 64rem) { .chero__recorte { --alto: calc(46vh * var(--f, 1)); } }
.chero--recorte .chero__recorte::after, .chero__recorte::after {
width: calc(var(--alto) * var(--pie, .35) * 1.32) !important; max-width: none !important;
height: calc(var(--alto) * var(--semi, .05) * 2.9); min-height: 8px;
bottom: calc(var(--alto) * var(--semi, .05) * 0.8);
translate: calc(-50% + var(--alto) * var(--asp, .5) * var(--cx, 0)) 50%;
background: radial-gradient(closest-side, rgba(18, 17, 16, .55), rgba(18, 17, 16, .22) 55%, transparent); z-index: 0;
}
/* ── Foto redondeada de la ficha casi cuadrada: las tomas verticales conservan su aire (sin acercamientos) ── */
.chero__foto-wrap { padding-bottom: 15.75rem; }
.chero__foto { height: 22rem; max-height: none; }
@media (min-width: 64rem) { .chero__foto-wrap { padding-bottom: 31.125rem; } .chero__foto { height: 40rem; } }
.edit-cita__palabra { display: inline-block; } /* la cita se anima palabra por palabra (animaciones.js) */ /* ══ Botón "de carta" reutilizable: relleno + borde negro 2px + sombra negra desplazada ══ */
.btn.btn--carta { border: 2px solid var(--negro); box-shadow: 4px 4px 0 var(--negro); color: var(--negro); background: var(--amarillo);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }
.btn.btn--carta-crema { background: #fff8e8; }
.btn.btn--carta::before, .btn.btn--carta::after { display: none; }
.btn.btn--carta:hover, .btn.btn--carta:focus-visible { background: var(--coral); color: #fff; border-color: var(--negro); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--negro); outline: none; }
.hero__acciones { gap: 18px; }
/* globito del carrito: amarillo de la marca con borde negro (se lee sobre el menú amarillo y sobre foto) */
.carrito-btn .badge { background: var(--amarillo); color: var(--negro); border: 1.5px solid var(--negro); font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; top: -8px; right: -6px; }
/* ══ Carrito: papel crema, miniatura de cada botella, pantalla completa en celular ══ */
.carrito-velo { position: fixed; inset: 0; z-index: 940; background: rgba(18, 17, 16, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.carrito-velo.visible { opacity: 1; pointer-events: auto; }
html.carrito-abierto, html.carrito-abierto body { overflow: hidden; }
.panel-carrito {
right: 0; transform: translateX(105%); width: min(440px, 100vw); height: 100vh; height: 100dvh; padding: 0;
background: #f5f3ee; background-image: var(--papel); background-size: 240px; color: var(--negro);
transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.45s; visibility: hidden;
box-shadow: -24px 0 60px rgba(18, 17, 16, 0.28);
}
.panel-carrito.abierto { right: 0; transform: none; visibility: visible; }
.panel-carrito__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 24px) 26px 18px; border-bottom: 1px solid rgba(18, 17, 16, 0.12); }
.panel-carrito__etiqueta { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.7rem; color: var(--vino); margin: 0; }
.panel-carrito .panel-carrito__titulo { display: block; margin: 6px 0 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0; font-size: 2rem; line-height: 1; color: var(--negro); }
.panel-carrito__cuenta { font-family: var(--serif); font-weight: 400; text-transform: none; font-size: 1rem; color: var(--gris-texto); vertical-align: 0.35em; }
.panel-carrito__cerrar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid var(--negro); background: var(--amarillo); color: var(--negro); box-shadow: 3px 3px 0 var(--negro); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }
.panel-carrito__cerrar:hover, .panel-carrito__cerrar:focus-visible { background: var(--coral); color: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--negro); outline: none; }
.panel-carrito .panel-carrito__items { display: block; padding: 4px 26px; overscroll-behavior: contain; }
.panel-carrito .item-carrito { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(18, 17, 16, 0.1); font-size: 1rem; }
.item-carrito__foto { width: 72px; height: 92px; border-radius: 6px; background: #efe6d2; background-image: var(--papel); background-size: 120px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(59, 42, 29, 0.14); }
.item-carrito__foto { overflow: hidden; }
.item-carrito__foto img { height: 78px; width: auto; max-width: 56px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(18, 17, 16, 0.2)); }
.item-carrito__foto--loro::after { content: ""; width: 60%; aspect-ratio: 1; background: var(--vino); opacity: 0.85;
-webkit-mask: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") center / contain no-repeat; mask: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") center / contain no-repeat; }
.item-carrito__info { min-width: 0; display: flex; flex-direction: column; }
.item-carrito__nombre { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; }
.item-carrito__pres { font-family: var(--serif); font-size: 0.82rem; color: var(--gris-texto); margin-top: 3px; }
.item-carrito__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.item-carrito__paso { display: inline-flex; align-items: center; border: 1.5px solid var(--negro); border-radius: 99px; background: #fff8e8; }
.panel-carrito .item-carrito__paso button { width: 34px; height: 32px; border: 0; background: none; color: var(--negro); font-size: 1.05rem; cursor: pointer; border-radius: 99px; }
.panel-carrito .item-carrito__paso button:hover { background: var(--amarillo); }
.panel-carrito .item-carrito__paso button:disabled { opacity: 0.3; cursor: not-allowed; background: none; }
.item-carrito__n { min-width: 24px; text-align: center; font-family: var(--cond); font-weight: 700; font-variant-numeric: tabular-nums; }
.item-carrito__precio { font-family: var(--cond); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.panel-carrito .item-carrito__quitar { align-self: flex-start; margin-top: 8px; padding: 0; width: auto; height: auto; border: 0; background: none; color: var(--gris-texto); font-family: var(--serif); font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.panel-carrito .item-carrito__quitar:hover { color: var(--coral); }
.panel-carrito .panel-carrito__pie { border-top: 1px solid rgba(18, 17, 16, 0.14); padding: 18px 26px calc(env(safe-area-inset-bottom, 0px) + 20px); background: rgba(239, 230, 210, 0.55); }
.panel-carrito__fila { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.panel-carrito__nota { font-family: var(--serif); font-size: 0.8rem; color: var(--gris-texto); margin: 6px 0 16px; line-height: 1.5; }
.panel-carrito .panel-carrito__pagar { width: 100%; text-align: center; background: var(--amarillo); color: var(--negro); border: 2px solid var(--negro); box-shadow: 4px 4px 0 var(--negro); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }
.panel-carrito .panel-carrito__pagar::before, .panel-carrito .panel-carrito__pagar::after { display: none; }
.panel-carrito .panel-carrito__pagar:hover, .panel-carrito .panel-carrito__pagar:focus-visible { background: var(--coral); color: #fff; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--negro); outline: none; }
.panel-carrito__seguir { display: block; margin: 14px 0 4px; text-align: center; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; color: var(--negro); text-decoration: underline; text-underline-offset: 4px; }
.panel-carrito__dudas { margin-top: 12px; border-top: 1px dashed rgba(18, 17, 16, 0.2); padding-top: 10px; }
.panel-carrito__dudas summary { cursor: pointer; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem; color: var(--vino); list-style: none; display: flex; justify-content: space-between; }
.panel-carrito__dudas summary::-webkit-details-marker { display: none; }
.panel-carrito__dudas summary::after { content: "+"; font-size: 1rem; line-height: 0.8; }
.panel-carrito__dudas[open] summary::after { content: "−"; }
.panel-carrito__dudas ul { margin: 10px 0 8px; padding-left: 18px; font-family: var(--serif); font-size: 0.82rem; line-height: 1.55; color: var(--negro); }
.panel-carrito__dudas a { font-family: var(--serif); font-size: 0.82rem; color: var(--vino); text-decoration: underline; }
.panel-carrito__vacio { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 64px 0; text-align: center; font-family: var(--serif); font-size: 1.05rem; }
.panel-carrito__vacio p { margin: 0; }
.panel-carrito__vacio-loro { width: 96px; aspect-ratio: 1; background: var(--vino); opacity: 0.85;
-webkit-mask: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") center / contain no-repeat; mask: url("/assets/img/logos/loro-huasteco-ron-potosi-dorado.webp") center / contain no-repeat; }
@media (max-width: 720px) {
.panel-carrito { width: 100vw; box-shadow: none; }
.carrito-velo { display: none; }
.panel-carrito .panel-carrito__titulo { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .panel-carrito, .carrito-velo { transition: none; } }
.panel-carrito:focus { outline: none; }
/* ══ Preguntas frecuentes ══ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.faq-hero, .contacto-hero { background: #f5f3ee; background-image: var(--papel); background-size: 240px; padding: 170px 0 64px; border-bottom: 1px solid rgba(18, 17, 16, 0.1); }
.faq-hero .etiqueta, .contacto-hero .etiqueta { color: var(--vino); }
.faq-hero__titulo, .contacto-hero__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.8rem, 8vw, 6rem); line-height: 0.95; margin: 12px 0 16px; color: var(--negro); }
.faq-hero__titulo em { color: var(--coral); }
.faq-hero__bajada, .contacto-hero__bajada { font-family: var(--serif); font-size: 1.1rem; color: var(--gris-texto); max-width: 52ch; margin: 0; }
.faq-buscar { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 32px 0 20px; padding: 0 18px; background: #fff; border: 2px solid var(--negro); border-radius: 99px; box-shadow: 4px 4px 0 var(--negro); color: var(--negro); }
.faq-buscar input { flex: 1; min-width: 0; border: 0; background: none; padding: 15px 0; font-family: var(--serif); font-size: 1rem; color: var(--negro); outline: none; }
.faq-buscar:focus-within { box-shadow: 2px 2px 0 var(--negro); transform: translate(2px, 2px); }
.faq-temas { display: flex; flex-wrap: wrap; gap: 10px; }
.faq-temas a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1.5px solid var(--negro); border-radius: 99px; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: var(--negro); background: #fff8e8; transition: background 0.2s ease; }
.faq-temas a:hover { background: var(--amarillo); }
.faq-temas span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--negro); color: var(--crema); font-size: 0.66rem; letter-spacing: 0; }
.faq-cuerpo { background: #fff; padding: 24px 0 80px; }
.faq-bloque { display: grid; gap: 8px 48px; padding: 56px 0 8px; border-bottom: 1px solid rgba(18, 17, 16, 0.08); scroll-margin-top: 110px; }
.faq-bloque:last-of-type { border-bottom: 0; }
@media (min-width: 64rem) { .faq-bloque { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } .faq-bloque .faq-grupo { position: sticky; top: 120px; } }
.faq-bloque .faq-grupo { max-width: none; margin: 0; padding: 0; }
.faq-bloque .faq-grupo .etiqueta { color: var(--vino); }
.faq-bloque .faq-grupo__titulo { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 8px 0 0; }
.faq-bloque .faq-lista { max-width: none; margin: 0; }
.faq-bloque .faq-item { border-bottom: 1px solid rgba(18, 17, 16, 0.14); scroll-margin-top: 140px; }
.faq-bloque .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.02rem; color: var(--negro); cursor: pointer; list-style: none; transition: color 0.2s ease; }
.faq-bloque .faq-item summary::-webkit-details-marker { display: none; }
.faq-bloque .faq-item summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--negro); border-radius: 50%; font-family: var(--cond); font-size: 1.1rem; font-weight: 400; color: var(--negro); background: #fff8e8; transition: transform 0.3s ease, background 0.2s ease; }
.faq-bloque .faq-item summary:hover { color: var(--coral); }
.faq-bloque .faq-item summary:hover::after { background: var(--amarillo); }
.faq-bloque .faq-item[open] summary::after { content: "+"; transform: rotate(45deg); background: var(--amarillo); }
.faq-bloque .faq-item .respuesta { padding: 0 52px 24px 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.75; color: var(--gris-texto); }
.faq-bloque .faq-item[open] .respuesta { animation: faqAbre 0.35s ease both; }
@keyframes faqAbre { from { opacity: 0; transform: translateY(-6px); } }
.faq-bloque .faq-item .respuesta a { color: var(--vino); }
.faq-vacio { padding: 40px 0; font-family: var(--serif); font-size: 1.05rem; text-align: center; }
.faq-vacio a { color: var(--vino); text-decoration: underline; }
.faq-cta { background: var(--amarillo); background-image: var(--papel); background-size: 240px; padding: 72px 0; }
.faq-cta__int { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; }
.faq-cta .etiqueta { color: var(--negro); }
.faq-cta__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 0.95; margin: 8px 0 10px; }
.faq-cta__texto { font-family: var(--serif); font-size: 1.05rem; margin: 0; max-width: 46ch; }
.faq-cta__botones { display: flex; flex-wrap: wrap; gap: 16px; }
.faq-cta .btn--carta:not(.btn--carta-crema) { background: #fff8e8; }
.faq-cta .btn--carta-crema { background: var(--negro); color: var(--crema); }
/* ══ Contacto (página propia) ══ */
.contacto-cuerpo { background: #fff; padding: 64px 0 88px; }
.contacto-rejilla { display: grid; gap: 48px; }
@media (min-width: 64rem) { .contacto-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 72px; align-items: start; } }
.contacto-canales { display: grid; gap: 24px; }
.contacto-tarjeta { padding: 28px; border: 2px solid var(--negro); border-radius: 14px; box-shadow: 6px 6px 0 var(--negro); background: #efe6d2; background-image: var(--papel); background-size: 200px; }
.contacto-tarjeta__etiqueta { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.72rem; color: var(--vino); margin: 0; }
.contacto-tarjeta__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 2rem; line-height: 1; margin: 8px 0 14px; }
.contacto-tarjeta__dir { font-style: normal; font-family: var(--serif); font-size: 1.05rem; line-height: 1.65; margin-bottom: 20px; }
.contacto-directo { display: grid; gap: 12px; }
.contacto-dato { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; padding: 16px 20px; border: 1.5px solid var(--negro); border-radius: 12px; color: var(--negro); background: #fff; transition: background 0.2s ease, transform 0.2s ease; }
.contacto-dato:hover { background: var(--amarillo); transform: translateX(3px); }
.contacto-dato__etiqueta { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.68rem; color: var(--gris-texto); grid-column: 1; }
.contacto-dato__valor { font-family: var(--cond); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; grid-column: 1; overflow-wrap: anywhere; }
.contacto-dato svg { grid-column: 2; grid-row: 1 / span 2; }
.contacto-motivos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.contacto-motivos li { font-family: var(--serif); font-size: 0.98rem; line-height: 1.6; color: var(--gris-texto); padding-left: 18px; border-left: 3px solid var(--amarillo); }
.contacto-motivos strong { color: var(--negro); font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; }
.contacto-form { display: grid; gap: 18px; padding: 32px; border: 2px solid var(--negro); border-radius: 14px; background: #f5f3ee; background-image: var(--papel); background-size: 240px; }
.contacto-form__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 2.2rem; line-height: 1; margin: 0 0 4px; }
.contacto-par { display: grid; gap: 18px; }
@media (min-width: 40rem) { .contacto-par { grid-template-columns: 1fr 1fr; } }
.contacto-campo { display: grid; gap: 6px; }
.contacto-campo label { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--negro); }
.contacto-campo label span { text-transform: none; letter-spacing: 0; color: var(--gris-texto); }
.contacto-campo input, .contacto-campo select, .contacto-campo textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--negro); border-radius: 10px; background: #fff; font-family: var(--serif); font-size: 1rem; color: var(--negro); transition: box-shadow 0.2s ease; }
.contacto-campo textarea { resize: vertical; min-height: 130px; }
.contacto-campo select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10,30 L50,70 L90,30' fill='none' stroke='%23121110' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 11px 11px; padding-right: 36px; }
.contacto-campo input:focus, .contacto-campo select:focus, .contacto-campo textarea:focus { outline: none; box-shadow: 3px 3px 0 var(--negro); }
.contacto-campo.con-error input, .contacto-campo.con-error select, .contacto-campo.con-error textarea { border-color: var(--coral); box-shadow: 3px 3px 0 var(--coral); }
.contacto-form .consentimiento { font-family: var(--serif); font-size: 0.86rem; line-height: 1.5; color: var(--gris-texto); display: flex; gap: 10px; align-items: flex-start; }
.contacto-form .consentimiento.con-error { color: var(--coral); }
.contacto-form .consentimiento a { color: var(--vino); text-decoration: underline; }
.contacto-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contacto-form__enviar { justify-self: start; }
.contacto-form__estado { margin: 0; font-family: var(--serif); font-size: 0.95rem; min-height: 1.4em; }
.contacto-form__estado.es-ok { color: var(--verde-jade); }
.contacto-form__estado.es-error { color: var(--coral); }
.contacto-dudas { background: #f5f3ee; background-image: var(--papel); background-size: 240px; padding: 72px 0 88px; border-top: 1px solid rgba(18, 17, 16, 0.1); }
.contacto-dudas .etiqueta { color: var(--vino); }
.contacto-dudas__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1; margin: 8px 0 28px; }
.contacto-dudas__lista { display: grid; gap: 12px; }
@media (min-width: 48rem) { .contacto-dudas__lista { grid-template-columns: 1fr 1fr; } }
.contacto-dudas__lista a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border: 1.5px solid var(--negro); border-radius: 12px; background: #fff; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; color: var(--negro); transition: background 0.2s ease, transform 0.2s ease; }
.contacto-dudas__lista a:hover { background: var(--amarillo); transform: translateX(3px); }
.contacto-dudas__lista svg { flex: none; }
.contacto-dudas__todas { display: inline-block; margin-top: 24px; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.76rem; color: var(--negro); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 720px) {
.faq-hero, .contacto-hero { padding: 128px 0 44px; }
.faq-bloque .faq-item .respuesta { padding-right: 0; }
.contacto-form, .contacto-tarjeta { padding: 22px; }
}
.faq-cta .btn.btn--carta:hover, .faq-cta .btn.btn--carta:focus-visible { background: var(--coral); color: #fff; } /* el fondo crema/negro de la franja le ganaba al hover y el texto se perdía */
/* migas de pan (FAQ y Contacto) */
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; color: var(--gris-texto); }
.migas li + li::before { content: "/"; margin-right: 8px; color: rgba(18, 17, 16, 0.35); }
.migas a { color: var(--negro); text-decoration: underline; text-decoration-color: rgba(18, 17, 16, 0.3); text-underline-offset: 4px; transition: color 0.2s ease; }
.migas a:hover { color: var(--coral); }
.migas [aria-current] { color: var(--vino); }
/* respuestas del FAQ con la misma letra de las preguntas, en tipo oración */
.faq-bloque .faq-item .respuesta { font-family: var(--cond); font-weight: 400; font-size: 1.08rem; line-height: 1.6; letter-spacing: 0.01em; text-transform: none; color: #3d3a36; }
/* Contacto: preguntas que se despliegan en la misma página */
.contacto-dudas__lista { align-items: start; }
.contacto-duda { border: 1.5px solid var(--negro); border-radius: 12px; background: #fff; transition: background 0.2s ease; }
.contacto-duda__pregunta { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; color: var(--negro); cursor: pointer; list-style: none; }
.contacto-duda__pregunta::-webkit-details-marker { display: none; }
.contacto-duda__pregunta::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--negro); border-radius: 50%; background: #fff8e8; font-weight: 400; transition: transform 0.3s ease, background 0.2s ease; }
.contacto-duda:hover .contacto-duda__pregunta::after, .contacto-duda[open] .contacto-duda__pregunta::after { background: var(--amarillo); }
.contacto-duda[open] .contacto-duda__pregunta::after { transform: rotate(45deg); }
.contacto-duda__respuesta { padding: 0 20px 20px; font-family: var(--cond); font-size: 1.02rem; line-height: 1.6; color: #3d3a36; animation: faqAbre 0.35s ease both; }
.contacto-duda__respuesta a { color: var(--vino); text-decoration: underline; }
/* ══ Encabezado en celular: carrito a la derecha junto al menú, globito con aire ══ */
@media (max-width: 960px) {
.header__barra .carrito-btn { margin-left: auto; }
.header__barra .hamburguesa { margin-left: 2px; }
.carrito-btn .badge { top: 0; right: -1px; }
.nav.abierto { display: none; } /* el menú de celular vive en .menu-movil */
}
/* ══ Menú de celular a pantalla completa ══ */
.menu-movil { position: fixed; inset: 0; z-index: 980; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
background: #f5f3ee; background-image: var(--papel); background-size: 240px; color: var(--negro);
clip-path: circle(0 at var(--ox, 90%) var(--oy, 40px)); visibility: hidden;
transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.6s; }
.menu-movil.abierto { clip-path: circle(150% at var(--ox, 90%) var(--oy, 40px)); visibility: visible; transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s; }
.menu-movil.cerrando { visibility: visible; transition: clip-path 0.5s cubic-bezier(0.76, 0, 0.24, 1); }
html.menu-abierto, html.menu-abierto body { overflow: hidden; }
.menu-movil__cabeza { display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px 28px; min-height: 62px; border-bottom: 1px solid rgba(18, 17, 16, 0.1); }
.menu-movil__logo img { height: 34px; width: auto; display: block; }
.menu-movil__cerrar { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid var(--negro); background: var(--amarillo); color: var(--negro); box-shadow: 3px 3px 0 var(--negro); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }
.menu-movil__cerrar:hover, .menu-movil__cerrar:focus-visible { background: var(--coral); color: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--negro); outline: none; }
.menu-movil__cuerpo { flex: 1; padding: 12px 28px 20px; }
.menu-movil__lista { list-style: none; margin: 0; padding: 0; }
.menu-movil__item { border-bottom: 1px solid rgba(18, 17, 16, 0.12); overflow: hidden; }
.menu-movil__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-movil__enlace { display: block; flex: 1; padding: 14px 0 10px; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 9.5vw, 2.9rem); line-height: 0.95; color: var(--negro); transition: color 0.2s ease, transform 0.25s ease; }
.menu-movil__enlace:hover, .menu-movil__enlace:active { color: var(--coral); transform: translateX(4px); }
.menu-movil__enlace.actual { color: var(--coral); }
.menu-movil__abrir { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--negro); border-radius: 50%; background: #fff8e8; color: var(--negro); cursor: pointer; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease; }
.menu-movil__item.abierto .menu-movil__abrir { transform: rotate(45deg); background: var(--amarillo); }
.menu-movil__sub { list-style: none; margin: 0; padding: 4px 0 16px; display: grid; gap: 6px; }
.menu-movil__sublink { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 10px; color: var(--negro); transition: background 0.2s ease; }
.menu-movil__sublink:hover, .menu-movil__sublink.actual { background: rgba(255, 202, 38, 0.35); }
.menu-movil__mini { flex: none; display: grid; place-items: center; width: 44px; height: 52px; border-radius: 6px; background: #efe6d2; box-shadow: inset 0 0 0 1px rgba(59, 42, 29, 0.14); overflow: hidden; }
.menu-movil__mini img { height: 44px; width: auto; max-width: 40px; object-fit: contain; }
.menu-movil__mini--flecha { background: var(--amarillo); box-shadow: inset 0 0 0 1.5px var(--negro); }
.menu-movil__subtexto { display: flex; flex-direction: column; gap: 2px; }
.menu-movil__subtexto small { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.62rem; color: var(--vino); }
.menu-movil__subtexto span { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.02rem; }
.menu-movil__pie { padding: 20px 28px calc(env(safe-area-inset-bottom, 0px) + 24px); display: grid; gap: 18px; border-top: 1px solid rgba(18, 17, 16, 0.1); background: rgba(239, 230, 210, 0.55); }
.menu-movil__tienda.btn { width: 100%; justify-content: center; background: var(--verde-jade); color: var(--crema); }
.menu-movil__datos { display: flex; justify-content: space-between; align-items: center; }
.menu-movil__datos > a { font-family: var(--cond); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; color: var(--negro); }
.menu-movil__redes { display: flex; gap: 10px; }
.menu-movil__redes a { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--negro); border-radius: 50%; color: var(--negro); background: #fff8e8; transition: background 0.2s ease; }
.menu-movil__redes a:hover { background: var(--amarillo); }
.menu-movil__redes svg { width: 18px; height: 18px; }
.menu-movil__leyenda { margin: 0; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.64rem; color: var(--gris-texto); text-align: center; }
/* entrada escalonada: cada renglón sube desde su propia máscara */
.menu-movil .menu-movil__item, .menu-movil__pie, .menu-movil__cabeza { opacity: 0; transform: translateY(26px); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.menu-movil.abierto .menu-movil__cabeza { opacity: 1; transform: none; transition-delay: 0.15s; }
.menu-movil.abierto .menu-movil__item { opacity: 1; transform: none; }
.menu-movil.abierto .menu-movil__item:nth-child(1) { transition-delay: 0.22s; }
.menu-movil.abierto .menu-movil__item:nth-child(2) { transition-delay: 0.27s; }
.menu-movil.abierto .menu-movil__item:nth-child(3) { transition-delay: 0.32s; }
.menu-movil.abierto .menu-movil__item:nth-child(4) { transition-delay: 0.37s; }
.menu-movil.abierto .menu-movil__item:nth-child(5) { transition-delay: 0.42s; }
.menu-movil.abierto .menu-movil__item:nth-child(6) { transition-delay: 0.47s; }
.menu-movil.abierto .menu-movil__item:nth-child(7) { transition-delay: 0.52s; }
.menu-movil.abierto .menu-movil__item:nth-child(8) { transition-delay: 0.57s; }
.menu-movil.abierto .menu-movil__pie { opacity: 1; transform: none; transition-delay: 0.5s; }
.menu-movil.cerrando .menu-movil__item, .menu-movil.cerrando .menu-movil__pie, .menu-movil.cerrando .menu-movil__cabeza { transition-delay: 0s; transition-duration: 0.2s; }
@media (min-width: 961px) { .menu-movil { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
.menu-movil, .menu-movil.abierto, .menu-movil.cerrando { transition: none; }
.menu-movil .menu-movil__item, .menu-movil__pie, .menu-movil__cabeza { transition: none; opacity: 1; transform: none; }
}
.menu-movil__sub[hidden] { display: none; }
/* ══ Buscador del sitio ══ */
.buscar-btn { position: relative; background: none; border: none; color: #fff; cursor: pointer; padding: 8px; margin-left: 6px; }
.buscar-btn .ico { display: block; }
.header.solido .buscar-btn, body.submenu-open .header .buscar-btn { color: var(--negro); }
.buscar-btn:hover { color: var(--oro-claro); }
.header.solido .buscar-btn:hover { color: #fff; }
@media (max-width: 960px) { .header__barra .buscar-btn { margin-left: auto; padding: 9px; } .header__barra .buscar-btn ~ .carrito-btn { margin-left: 0; } }
html.buscador-abierto, html.buscador-abierto body { overflow: hidden; }
.buscador { position: fixed; inset: 0; z-index: 990; display: flex; justify-content: center; align-items: flex-start; padding: calc(env(safe-area-inset-top, 0px) + 8vh) 20px 24px; background: rgba(18, 17, 16, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; }
.buscador.abierto { opacity: 1; }
.buscador__caja { width: min(760px, 100%); max-height: calc(100dvh - 12vh); display: flex; flex-direction: column; padding: 22px; border: 2px solid var(--negro); border-radius: 18px; box-shadow: 8px 8px 0 var(--negro); background: #f5f3ee; background-image: var(--papel); background-size: 240px; transform: translateY(-18px) scale(0.98); transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.buscador.abierto .buscador__caja { transform: none; }
.buscador__fila { display: flex; gap: 12px; align-items: center; }
.buscador__campo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 18px; background: #fff; border: 2px solid var(--negro); border-radius: 99px; color: var(--negro); }
.buscador__campo input { flex: 1; min-width: 0; border: 0; background: none; padding: 15px 0; font-family: var(--cond); font-size: max(1.1rem, 16px); letter-spacing: 0.02em; color: var(--negro); outline: none; }
.buscador__campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscador__cerrar { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 2px solid var(--negro); background: var(--amarillo); color: var(--negro); box-shadow: 3px 3px 0 var(--negro); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }
.buscador__cerrar:hover, .buscador__cerrar:focus-visible { background: var(--coral); color: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--negro); outline: none; }
.buscador__sugerencias { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.buscador__sugerencias[hidden] { display: none; }
.buscador__etiqueta { width: 100%; margin: 0 0 2px; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.68rem; color: var(--vino); }
.buscador__chip { padding: 8px 14px; border: 1.5px solid var(--negro); border-radius: 99px; background: #fff8e8; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: var(--negro); cursor: pointer; transition: background 0.2s ease; }
.buscador__chip:hover { background: var(--amarillo); }
.buscador__estado { margin: 14px 0 6px; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; color: var(--gris-texto); }
.buscador__estado:empty { display: none; }
.buscador__lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 6px; }
.buscador__resultado { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; color: var(--negro); border: 1.5px solid transparent; transition: background 0.2s ease, border-color 0.2s ease; }
.buscador__resultado:hover, .buscador__resultado:focus-visible { background: #fff; border-color: var(--negro); outline: none; }
.buscador__mini { flex: none; display: grid; place-items: center; width: 48px; height: 56px; border-radius: 8px; background: #efe6d2; box-shadow: inset 0 0 0 1px rgba(59, 42, 29, 0.14); overflow: hidden; font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.buscador__mini img { height: 48px; width: auto; max-width: 44px; object-fit: contain; }
.buscador__mini--pregunta { background: var(--amarillo); box-shadow: inset 0 0 0 1.5px var(--negro); }
.buscador__mini--pagina { background: #fff8e8; box-shadow: inset 0 0 0 1.5px var(--negro); }
.buscador__texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.buscador__texto small { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.62rem; color: var(--vino); }
.buscador__texto strong { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.02rem; }
.buscador__texto span { font-family: var(--cond); font-size: 0.9rem; color: var(--gris-texto); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 720px) {
.buscador { padding: 0; background: #f5f3ee; }
.buscador__caja { width: 100%; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .buscador, .buscador__caja { transition: none; } }
.header.solido .carrito-btn .badge { top: -4px; } /* 4 px más abajo con la barra amarilla */
.buscador[hidden], .menu-movil[hidden] { display: none !important; } /* sin esto la capa invisible tapaba los clics de toda la página */ /* ══ Collage de redes: fotos más chicas, separadas y con proporción fija (no se enciman en celular) ══ */
.seccion--verde .collage { min-height: 0; aspect-ratio: 1.3 / 1; width: 100%; max-width: 640px; justify-self: center; }
.seccion--verde .collage img { width: 42%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border: 6px solid #f5f3ee; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3); }
.seccion--verde .collage img:first-child { top: 4%; left: 5%; bottom: auto; transform: rotate(-5deg); }
.seccion--verde .collage img:last-child { top: 18%; right: 5%; bottom: auto; left: auto; transform: rotate(4deg); }
@media (max-width: 900px) { .seccion--verde .collage { max-width: 440px; margin-top: 8px; } .seccion--verde .collage img { border-width: 4px; } }
.buscador__campo input:focus, .buscador__campo input:focus-visible, .faq-buscar input:focus, .faq-buscar input:focus-visible { outline: none; box-shadow: none; } /* el marco azul general se veía como líneas dentro del campo */
.buscador__campo:focus-within { box-shadow: 3px 3px 0 var(--negro); }
.buscar-btn:focus:not(:focus-visible), .hamburguesa:focus:not(:focus-visible), .carrito-btn:focus:not(:focus-visible) { outline: none; }
/* ══ Experiencias ══ */
.migas--claras ol { color: rgba(247, 242, 231, 0.75); }
.migas--claras a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.4); }
.migas--claras li + li::before { color: rgba(255, 255, 255, 0.45); }
.migas--claras [aria-current] { color: var(--amarillo); }
.exp-portada { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--negro); color: #fff; }
.exp-portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: scale(1.06); animation: expRespira 18s ease-in-out infinite alternate; }
@keyframes expRespira { to { transform: scale(1); } }
.exp-portada__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 17, 16, 0.55) 0%, rgba(18, 17, 16, 0.1) 35%, rgba(18, 17, 16, 0.72) 100%); }
.exp-portada__int { position: relative; z-index: 2; padding-top: 140px; padding-bottom: clamp(48px, 8vh, 96px); }
.exp-portada .etiqueta { color: var(--amarillo); }
.exp-portada__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(3.2rem, 11vw, 8.5rem); line-height: 0.88; margin: 14px 0 20px; color: #f7f2e7; }
.exp-portada__titulo em { color: var(--amarillo); }
.exp-portada__bajada { font-family: var(--serif); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.65; max-width: 52ch; color: rgba(247, 242, 231, 0.9); margin: 0 0 28px; }
.exp-portada__botones { display: flex; flex-wrap: wrap; gap: 16px; }
.exp-cifras { background: var(--amarillo); background-image: var(--papel); background-size: 240px; padding: 28px 0; border-bottom: 2px solid var(--negro); }
.exp-cifras__int { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.exp-cifras__int > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.exp-cifras strong { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; color: var(--negro); font-variant-numeric: tabular-nums; }
.exp-cifras span { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; color: var(--negro); }
.exp-recorrido { background: #fff; padding: 88px 0 40px; }
.exp-recorrido__cabeza .etiqueta, .exp-dia .etiqueta, .exp-planea .etiqueta { color: var(--vino); }
.exp-recorrido__titulo, .exp-dia__titulo, .exp-planea__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 5.5vw, 4.2rem); line-height: 0.95; margin: 10px 0 22px; }
.exp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.exp-chips a { padding: 8px 14px; border: 1.5px solid var(--negro); border-radius: 99px; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: var(--negro); background: #fff8e8; transition: background 0.2s ease; }
.exp-chips a:hover { background: var(--amarillo); }
.exp-escena { display: grid; gap: 40px; }
.exp-escena__marco { display: none; }
.exp-parada { scroll-margin-top: 110px; padding-bottom: 48px; border-bottom: 1px solid rgba(18, 17, 16, 0.12); }
.exp-parada + .exp-parada { padding-top: 8px; }
.exp-parada__foto { margin: 0 0 22px; border-radius: 16px; overflow: hidden; border: 2px solid var(--negro); box-shadow: 6px 6px 0 var(--negro); aspect-ratio: 4 / 5; max-height: 70vh; }
.exp-parada__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-parada__etiqueta { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.72rem; color: var(--vino); margin: 0; }
.exp-parada__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 0.95; margin: 8px 0 16px; }
.exp-parada__texto { font-family: var(--serif); font-size: 1.06rem; line-height: 1.8; color: var(--gris-texto); margin: 0 0 18px; }
.exp-parada__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.exp-parada__lista li { position: relative; padding-left: 22px; font-family: var(--cond); font-size: 1rem; letter-spacing: 0.02em; color: var(--negro); }
.exp-parada__lista li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; border-radius: 50%; background: var(--amarillo); border: 1.5px solid var(--negro); }
@media (min-width: 64rem) {
.exp-escena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.exp-escena__marco { display: block; position: sticky; top: 110px; height: calc(100vh - 150px); max-height: 760px; border-radius: 18px; overflow: hidden; border: 2px solid var(--negro); box-shadow: 8px 8px 0 var(--negro); background: #efe6d2; }
.exp-escena__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.exp-escena__foto.activa { opacity: 1; transform: none; }
.exp-parada__foto { display: none; }
.exp-parada { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: 0.35; transition: opacity 0.5s ease; }
.exp-parada.activa { opacity: 1; }
.exp-parada:last-child { border-bottom: 0; }
}
.exp-dia { background: #f5f3ee; background-image: var(--papel); background-size: 240px; padding: 88px 0; border-top: 1px solid rgba(18, 17, 16, 0.1); }
.exp-dia__linea { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: dia; }
@media (min-width: 48rem) { .exp-dia__linea { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.exp-dia__linea li { position: relative; padding: 22px; border: 2px solid var(--negro); border-radius: 14px; background: #fff; box-shadow: 5px 5px 0 var(--negro); }
.exp-dia__linea li:nth-child(odd) { background: #fff8e8; }
.exp-dia__hora { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--amarillo); border: 1.5px solid var(--negro); font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; }
.exp-dia__linea strong { display: block; margin: 14px 0 8px; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; line-height: 1; }
.exp-dia__linea p { margin: 0; font-family: var(--cond); font-size: 0.98rem; line-height: 1.55; color: #3d3a36; }
.exp-cerca { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; background: var(--negro); color: #fff; }
.exp-cerca__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp-cerca__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 17, 16, 0.78), rgba(18, 17, 16, 0.2) 70%); }
.exp-cerca__int { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; }
.exp-cerca .etiqueta { color: var(--amarillo); }
.exp-cerca__titulo { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 0.92; margin: 10px 0 18px; color: #f7f2e7; max-width: 12ch; }
.exp-cerca p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.7; max-width: 46ch; color: rgba(247, 242, 231, 0.9); }
.exp-planea { background: #fff; padding: 88px 0 96px; }
.exp-planea__texto { font-family: var(--serif); font-size: 1.06rem; color: var(--gris-texto); max-width: 56ch; margin: 0 0 36px; }
.exp-planea__rejilla { display: grid; gap: 24px; }
@media (min-width: 64rem) { .exp-planea__rejilla { grid-template-columns: repeat(3, 1fr); } }
.exp-planea .contacto-tarjeta__dir a { color: var(--negro); text-decoration: underline; text-underline-offset: 3px; }
.exp-planea__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 40px; }
.btn.exp-planea__whats { background: var(--verde-jade); color: var(--crema); }
.exp-planea__otro { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74rem; color: var(--negro); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 720px) {
.exp-portada__int { padding-top: 120px; }
.exp-cifras span { font-size: 0.6rem; letter-spacing: 0.1em; }
.exp-recorrido, .exp-dia, .exp-planea { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) { .exp-portada__foto { animation: none; transform: none; } .exp-escena__foto { transition: none; } }
/* ══ Experiencias: etiquetas en su letra, párrafos en Moderat, textos legibles sobre foto ══ */
.exp-portada .etiqueta, .exp-cerca .etiqueta { font-family: var(--cond); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--amarillo); margin: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.exp-portada__bajada, .exp-cerca p:not(.etiqueta), .exp-parada__texto, .exp-planea__texto, .contacto-tarjeta__dir { font-family: var(--cond); letter-spacing: 0.01em; word-spacing: normal; }
.exp-portada__bajada { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6; color: #f7f2e7; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.exp-cerca p:not(.etiqueta) { font-size: 1.1rem; line-height: 1.6; color: #f7f2e7; }
.exp-parada__texto { font-size: 1.08rem; line-height: 1.65; color: #3d3a36; }
.exp-portada__foto { object-position: center 55%; filter: saturate(0.9); }
.exp-portada__velo { background: linear-gradient(90deg, rgba(18, 17, 16, 0.78) 0%, rgba(18, 17, 16, 0.5) 45%, rgba(18, 17, 16, 0.12) 80%), linear-gradient(0deg, rgba(18, 17, 16, 0.6), transparent 45%); }
.exp-portada__int { display: flex; flex-direction: column; align-items: flex-start; }
.exp-portada .migas ol { margin-bottom: 18px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.exp-portada__titulo { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.exp-portada__titulo em { color: var(--amarillo); }
.exp-cerca__velo { background: linear-gradient(90deg, rgba(18, 17, 16, 0.82) 0%, rgba(18, 17, 16, 0.55) 45%, rgba(18, 17, 16, 0.15) 85%); }
@media (max-width: 720px) { .exp-portada__velo { background: linear-gradient(0deg, rgba(18, 17, 16, 0.85) 0%, rgba(18, 17, 16, 0.55) 55%, rgba(18, 17, 16, 0.3) 100%); } }
/* collage de redes: sin marco blanco, forma natural de cada foto, un poco encimadas */
.seccion--verde .collage { aspect-ratio: 1.18 / 1; }
.seccion--verde .collage img { width: 42%; aspect-ratio: auto; height: auto; object-fit: contain; border: 0; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35); }
.seccion--verde .collage img:first-child { top: 2%; left: 8%; z-index: 1; transform: rotate(-4deg); }
.seccion--verde .collage img:last-child { top: 15%; left: 44%; right: auto; z-index: 2; transform: rotate(3deg); }
/* portada de Experiencias: texto a la izquierda para dejar ver la destilería; un poco más de interlínea; etiqueta en blanco */
.exp-portada__int.contenedor { max-width: none; margin: 0; padding-left: clamp(20px, 5vw, 92px); padding-right: 20px; width: min(100%, 760px); }
.exp-portada__titulo { line-height: 0.98; }
.exp-portada .etiqueta { color: #f7f2e7; }
.exp-portada__int.contenedor { padding-left: max(20px, calc((100vw - 1360px) / 2 + 28px)); width: min(100%, calc(max(20px, (100vw - 1360px) / 2 + 28px) + 700px)); } /* alineado con el logo */
/* "Tu base para las cascadas": texto en la esquina inferior izquierda con el mismo aire a la izquierda y abajo; interlínea como la portada; etiqueta blanca */
.exp-cerca { align-items: flex-end; min-height: 80vh; }
.exp-cerca__int.contenedor { --aire: clamp(24px, 5vw, 72px); max-width: none; margin: 0; width: min(100%, 720px); padding: 0 20px var(--aire) var(--aire); }
.exp-cerca__titulo { line-height: 0.98; max-width: none; }
.exp-cerca .etiqueta { color: #f7f2e7; }
.exp-cerca__velo { background: linear-gradient(20deg, rgba(18, 17, 16, 0.85) 0%, rgba(18, 17, 16, 0.5) 40%, rgba(18, 17, 16, 0.08) 75%); }
/* "Un día en la casa": títulos más chicos */
.exp-dia__titulo { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.exp-dia__linea strong { font-size: 1.15rem; line-height: 1.05; }
/* tarjetas de "Planea tu visita" y Contacto: el botón "Cómo llegar" siempre abajo a la izquierda, al mismo nivel */
.contacto-tarjeta { display: flex; flex-direction: column; align-items: flex-start; }
.contacto-tarjeta__dir { flex: 1; }
.contacto-tarjeta > .btn { margin-top: auto; }
/* megamenú "La casa": tres tarjetas del mismo ancho que las de los otros menús */
.mega__rejilla--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: calc((var(--ancho) - 3 * 48px) * 0.75 + 2 * 48px); }
@media (max-width: 1100px) { .mega__rejilla--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nav .mega-toggle.activo { color: var(--oro-claro); }
.header.solido .nav .mega-toggle.activo { color: var(--coral); }
@media (min-width: 961px) { .nav .mega__rejilla--tres .mega__titulo { font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: 0.02em; } } /* "SOSTENIBILIDAD" cabe completa */ /* ══ Tienda: portada limpia y tarjetas con compra directa ══ */
.tienda-hero__titulo { font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: 0.95; margin: 6px 0 16px; }
.tienda-hero__nota { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; line-height: 1.9; color: var(--negro); margin: 0; }
.tienda-hero .migas ol { justify-content: center; }
.grid-tienda { gap: 56px 28px; }
.compra { padding: 24px 22px 22px; border: 2px solid var(--negro); border-radius: 16px; background: #fff; box-shadow: 5px 5px 0 var(--negro); }
.compra__liga { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; }
.compra__liga:hover h3 { color: var(--coral); }
.compra h3 { margin-bottom: 12px; transition: color 0.2s ease; }
.compra__variantes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
.compra__variante { padding: 7px 12px; border: 1.5px solid var(--negro); border-radius: 99px; background: #fff; font-family: var(--cond); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--negro); cursor: pointer; transition: background 0.2s ease; }
.compra__variante:hover { background: #fff8e8; }
.compra__variante.activa { background: var(--negro); color: var(--crema); }
.compra__unica { margin: 0 auto 16px !important; font-family: var(--cond); font-size: 0.82rem !important; letter-spacing: 0.04em; color: var(--gris-texto) !important; }
.compra__precio { margin: 0 0 16px; font-size: 1.35rem; }
.compra__fila { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.compra__paso { flex: none; display: inline-flex; align-items: center; border: 1.5px solid var(--negro); border-radius: 99px; background: #fff8e8; }
.compra__paso button { width: 34px; height: 38px; border: 0; background: none; font-size: 1.05rem; color: var(--negro); cursor: pointer; border-radius: 99px; }
.compra__paso button:hover:not(:disabled) { background: var(--amarillo); }
.compra__paso button:disabled { opacity: 0.3; cursor: not-allowed; }
.compra__n { min-width: 22px; text-align: center; font-family: var(--cond); font-weight: 700; font-variant-numeric: tabular-nums; }
.compra__agregar.btn { flex: 1; min-width: 0; padding: 11px 12px; font-size: 0.66rem; letter-spacing: 0.14em; white-space: nowrap; }
.compra__agregar.hecho { background: var(--verde-jade); color: var(--crema); }
.compra__detalle { margin-top: 14px; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.68rem; color: var(--negro); text-decoration: underline; text-underline-offset: 4px; }
.compra__detalle:hover { color: var(--coral); }
@media (max-width: 720px) { .grid-tienda .compra { width: 100%; max-width: 380px; min-width: 0; } }
.btn.btn--carta.compra__agregar.hecho, .btn.btn--carta.compra__agregar.hecho:hover { background: var(--verde-jade); color: var(--crema); }
/* tarjeta de tienda: la zona de foto ocupa todo el ancho arriba del título; fotos completas a sangre, recortes al centro; loro provisional chico */
.compra { padding-top: 0; overflow: hidden; }
.compra__visual { position: relative; display: block; margin: 0 -22px 18px; width: calc(100% + 44px); height: 280px; background: #f5f3ee; background-image: var(--papel); background-size: 200px; border-bottom: 2px solid var(--negro); overflow: hidden; }
.col-item.compra .compra__visual img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; max-width: none; max-height: none; transition: opacity 0.5s ease, transform 0.6s ease; }
.col-item.compra .compra__principal { object-fit: contain; padding: 26px 24px 18px; }
.col-item.compra .compra__visual--foto .compra__principal { object-fit: cover; padding: 0; }
.col-item.compra .compra__alterna { object-fit: contain; padding: 26px 24px 18px; background: #f5f3ee; opacity: 0; }
.col-item.compra .compra__alterna--foto { object-fit: cover; padding: 0; }
.col-item.compra .compra__alterna.visible { opacity: 1; }
.col-item.compra:hover .compra__principal { transform: scale(1.03); }
.compra__pendiente { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.col-item.compra .compra__pendiente img { position: static; width: 84px; height: 84px; padding: 0; object-fit: contain; opacity: 0.6; }
.compra__pendiente small { margin: 0; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.62rem; color: var(--gris-texto); }
.compra .compra__marca { margin-top: 2px; }
@media (max-width: 720px) { .compra__visual { height: 240px; } }
.compra .compra__liga { align-self: stretch; width: 100%; }
.compra { align-items: stretch; text-align: center; }
.compra .compra__variantes, .compra .compra__fila { justify-content: center; }
.compra .compra__detalle { align-self: center; }
/* Tienda: portada con foto de la familia de rones y menos aire sobre los filtros */
.tienda-hero--foto { position: relative; min-height: 64vh; min-height: 64svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--negro); text-align: center; }
.tienda-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.tienda-hero__velo { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(18, 17, 16, 0.55), rgba(18, 17, 16, 0.78) 75%); }
.tienda-hero__int { position: relative; z-index: 2; padding-top: 140px; padding-bottom: 64px; }
.tienda-hero--foto .tienda-hero__titulo { color: #f7f2e7; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4); }
.tienda-hero--foto .tienda-hero__titulo em { color: var(--amarillo); }
.tienda-hero--foto .tienda-hero__nota { color: #f7f2e7; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.tienda-catalogo { padding-top: 44px; }
.tienda-catalogo .grid-tienda { margin-top: 32px; }
@media (max-width: 720px) { .tienda-hero__int { padding-top: 120px; padding-bottom: 48px; } .tienda-catalogo { padding-top: 32px; } }
.tienda-hero__foto { object-position: center 50%; }
.tienda-hero__velo { background: radial-gradient(ellipse at center, rgba(18, 17, 16, 0.62), rgba(18, 17, 16, 0.8) 75%); }
/* ══ Tienda en celular: dos productos por renglón, tarjetas compactas ══ */
@media (max-width: 720px) {
.tienda-catalogo .filtros { flex-wrap: nowrap; gap: 6px; justify-content: center; }
.tienda-catalogo .filtro { padding: 9px 12px; font-size: 0.62rem; letter-spacing: 0.12em; }
.tienda-catalogo .grid-tienda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 24px; }
.grid-tienda .compra { width: auto; max-width: none; min-width: 0; padding: 0 10px 14px; border-radius: 12px; box-shadow: 3px 3px 0 var(--negro); }
.compra__visual { height: 170px; margin: 0 -10px 12px; width: calc(100% + 20px); }
.col-item.compra .compra__principal, .col-item.compra .compra__alterna { padding: 14px 12px 10px; }
.col-item.compra .compra__visual--foto .compra__principal, .col-item.compra .compra__alterna--foto { padding: 0; }
.col-item.compra .compra__pendiente img { width: 52px; height: 52px; }
.compra__pendiente small { font-size: 0.5rem; letter-spacing: 0.14em; }
.compra .compra__marca { font-size: 9px; margin-top: 0; }
.compra h3 { font-size: 14px; line-height: 1.1; margin: 2px 0 8px; }
.compra__variantes { gap: 4px; margin-bottom: 10px; }
.compra__variante { padding: 5px 7px; font-size: 0.6rem; letter-spacing: 0.02em; }
.compra__unica { font-size: 0.66rem !important; margin-bottom: 10px !important; line-height: 1.3 !important; }
.compra__precio { font-size: 1.05rem; margin-bottom: 10px; }
.compra__fila { flex-direction: column; gap: 8px; }
.compra__paso button { width: 32px; height: 32px; }
.compra__agregar.btn { width: 100%; padding: 9px 6px; font-size: 0.56rem; letter-spacing: 0.1em; min-height: 36px; }
.compra__detalle { margin-top: 10px; font-size: 0.56rem; }
}
/* Tienda en escritorio y tableta: tarjetas más chicas, 4 por renglón (3 en tableta) */
@media (min-width: 721px) {
.tienda-catalogo .grid-tienda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; max-width: 1180px; }
.grid-tienda .compra { width: auto; min-width: 0; padding: 0 16px 18px; }
.compra__visual { height: 230px; margin: 0 -16px 16px; width: calc(100% + 32px); }
.compra h3 { font-size: 16px; }
.compra__precio { font-size: 1.2rem; }
}
@media (min-width: 1100px) { .tienda-catalogo .grid-tienda { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 721px) and (max-width: 959px) { .tienda-catalogo .grid-tienda { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } }
/* celular: el globito del carrito baja para no pegarse al borde de la barra */
@media (max-width: 960px) { .header .carrito-btn .badge, .header.solido .carrito-btn .badge { top: 3px; right: -2px; } }
@media (min-width: 721px) { .compra__agregar.btn { font-size: 0.62rem; letter-spacing: 0.1em; padding: 11px 10px; } }
/* ══ "Más de Ron Potosí": tarjetas de la casa (borde y sombra negra), foto arriba, texto en franja, flecha ══ */
.edit-relacionado { background: #f5f3ee; background-image: var(--papel); background-size: 240px; padding: 88px 0 96px; border-top: 1px solid rgba(18, 17, 16, 0.1); }
.edit-relacionado .etiqueta { color: var(--vino); }
.edit-relacionado__titulo { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 0.95; margin: 10px 0 40px; }
.edit-cards { gap: 28px; }
.edit-card { aspect-ratio: auto; display: flex; flex-direction: column; overflow: visible; border: 2px solid var(--negro); border-radius: 16px; background: #fff; box-shadow: 6px 6px 0 var(--negro); color: var(--negro); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.edit-card img { flex: none; height: auto; aspect-ratio: 4 / 3.3; border-radius: 14px 14px 0 0; border-bottom: 2px solid var(--negro); }
.edit-card { isolation: isolate; }
.edit-card::before { content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 4 / 3.3; border-radius: 14px 14px 0 0; overflow: hidden; pointer-events: none; }
.edit-card .texto { position: relative; inset: auto; display: flex; flex-direction: column; gap: 6px; padding: 20px 64px 22px 22px; background: none; color: var(--negro); flex: 1; }
.edit-card small { color: var(--vino); }
.edit-card span { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.05; color: var(--negro); }
.edit-card .texto::after { content: ""; position: absolute; right: 18px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--negro); background: var(--amarillo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121110' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: background-color 0.2s ease, transform 0.25s ease; }
.edit-card:hover, .edit-card:focus-visible { transform: translate(-2px, -3px); box-shadow: 9px 10px 0 var(--negro); outline: none; }
.edit-card:hover img { transform: none; filter: saturate(1.08); }
.edit-card:hover .texto::after, .edit-card:focus-visible .texto::after { background-color: var(--coral); transform: translateX(3px); }
.edit-card:hover span { color: var(--coral); }
.edit-card img { transition: filter 0.3s ease; }
@media (max-width: 720px) {
.edit-relacionado { padding: 64px 0 72px; }
.edit-cards { display: flex; grid-template-columns: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.edit-cards::-webkit-scrollbar { display: none; }
.edit-card { flex: 0 0 78%; scroll-snap-align: start; box-shadow: 4px 4px 0 var(--negro); }
}
@media (max-width: 720px) { .edit-cards { scroll-padding-inline: 20px; } }
.carta-suerte .carta-suerte__horoscopo { font-family: var(--cond); font-size: 1.05rem; line-height: 1.55; letter-spacing: 0.01em; word-spacing: normal; color: #f7f2e7; } /* misma letra que las respuestas del FAQ */
.chero__subtitulo { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; } /* es : conserva el aspecto de título */
.prod-form__aviso { grid-column: 1 / -1; font-size: 0.8rem; text-align: left; }
.prod-form__estado { grid-column: 1 / -1; margin: 6px 0 0; font-family: var(--cond); font-size: 0.9rem; min-height: 1.2em; }
/* en celular el aviso de cookies no tapa la barra de compra ni la vista previa (usa --cc-alto de cookies.js) */
@media (max-width: 63.9375rem) { .pdp__barra, .rl__vista-previa { bottom: var(--cc-alto, 0px); } }
body { padding-bottom: var(--cc-alto, 0px); }
.prod-form .prod-form__aviso input { width: 18px; height: 18px; padding: 0; }
/* ══ Ajustes de maquetación ══ */
@media (max-width: 960px) {
.header__barra { gap: 10px; padding-inline: 16px; }
.header .nav { display: none; }
.header__logo { flex: none; }
.header__logo img.logo-header { object-fit: contain; }
}
@media (max-width: 1024px) {
.promo--disfrutar .promo__carta-lado--reverso .promo__carta-marco { margin-top: 1rem; }
.promo--disfrutar .promo__carta-lado--reverso .promo__carta-titulo { font-size: 2rem; }
}
#donde-comprar, #formContacto, #acerca, .faq-grupo, .faq-bloque, .exp-parada, [id^="faq-"] { scroll-margin-top: 90px; }
@media (max-width: 370px) { .donde__mapa .banda-venta__logos { flex-wrap: wrap !important; justify-content: center; gap: 10px 14px; } }
@media (max-width: 600px) {
.barra-lectura .leyendo small { white-space: nowrap; }
.barra-lectura .compartir a:nth-of-type(n+4) { display: none; }
}
@media (max-width: 400px) {
.pdp__barra-foto { display: none; }
.pdp__barra .btn { padding: 10px 16px; letter-spacing: 0.08em; }
}
@media (max-width: 359px) { #desde-1938 .promo__carta { width: calc(100% - 20px); margin-inline: auto; } }
/* accesibilidad: saltar al contenido, página actual legible sobre amarillo, paradas de experiencias legibles */
.saltar { position: fixed; left: 12px; top: 12px; z-index: 2000; padding: 10px 16px; border: 2px solid var(--negro); border-radius: 99px; background: var(--amarillo); color: var(--negro); font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; transform: translateY(-160%); transition: transform 0.2s ease; }
.saltar:focus { transform: none; outline: none; box-shadow: 3px 3px 0 var(--negro); }
#contenido:focus { outline: none; }
.header.solido .nav a.activo:not([class*="mega__"]), .header.solido .nav a[aria-current="page"]:not([class*="mega__"]) { color: var(--negro); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 64rem) { .exp-parada { opacity: 0.55; } }
html.carta-abierta, html.carta-abierta body { overflow: hidden; }
.compra__tope { margin: 6px 0 0; font-size: 0.8125rem; color: var(--vino); }
/* ---------- Aviso de edad como carta de lotería (misma carta que "Pícale al loro", 30-sep) ---------- */
.age-gate__aviso { font-size: 0.74rem; margin-bottom: 38px; max-width: 480px; }
.age-gate__caja {
width: min(420px, 100%);
padding: 58px 36px 34px;
clip-path: none; /* recortaba el sello del loro */
border-radius: 10px;
background: #efe6d2;
background-image: var(--papel), radial-gradient(ellipse at center, rgba(255,255,255,.35), rgba(120, 90, 50, .16));
background-size: 200px, 100% 100%;
color: #3b2a1d;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.age-gate__caja::before { content: ""; position: absolute; inset: 12px; border: 2px solid #3b2a1d; border-radius: 4px; pointer-events: none; }
.age-gate__caja > * { position: relative; }
.age-gate__sello { position: absolute; top: -40px; width: 80px; height: 80px; z-index: 2; border-width: 2px; }
.age-gate__sello img { width: 48px; }
.age-gate__lema { font-size: 0.66rem; letter-spacing: 0.22em; color: var(--vino); margin-bottom: 10px; }
.age-gate__ornamento { width: 140px; color: #3b2a1d; margin-bottom: 18px; }
.age-gate__caja h2 { font-family: var(--display); font-size: clamp(1.25rem, 3.6vw, 1.6rem); line-height: 1.05; color: #3b2a1d; margin-bottom: 14px; text-wrap: balance; }
.age-gate__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.age-gate__anio { font-size: clamp(2.6rem, 8vw, 3.3rem); color: #3b2a1d; margin-bottom: 8px; }
.age-gate__anio::placeholder { color: rgba(59, 42, 29, 0.2); }
.age-gate__privacidad { font-size: 0.8rem; color: rgba(59, 42, 29, 0.78); margin-bottom: 20px; }
.age-gate__privacidad a { color: #3b2a1d; }
.age-gate__enviar {
width: auto; min-width: 180px; padding: 13px 34px; font-size: 0.78rem; letter-spacing: 0.24em;
background: var(--amarillo); color: var(--negro);
border: 2px solid var(--negro); border-radius: 12px; box-shadow: 4px 4px 0 var(--negro);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.age-gate__enviar::before, .age-gate__enviar::after { display: none; }
.age-gate__enviar:hover, .age-gate__enviar:focus-visible { background: var(--coral); color: #fff; border-color: var(--negro); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--negro); outline: none; }
.age-gate__enviar:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--negro); }
.age-gate__error { margin-top: 12px; font-size: 0.8rem; color: var(--vino); }
.age-gate__terminos { margin-top: 18px; font-size: 0.82rem; }
.age-gate__pie { margin-top: 30px; font-size: 0.72rem; }
@media (max-width: 480px) {
.age-gate__contenido { padding: 44px 16px 28px; }
.age-gate__caja { padding: 52px 26px 28px; }
.age-gate__aviso { margin-bottom: 34px; }
}
.age-gate__aviso { margin-bottom: 60px; }
@media (max-width: 480px) { .age-gate__aviso { margin-bottom: 56px; } .age-gate__lema { letter-spacing: 0.12em; font-size: 0.62rem; } }
/* ---------- 404 ---------- */
.p404__loro { width: 96px; height: 96px; margin-bottom: 22px; }
.p404__titulo { font-size: clamp(3rem, 9vw, 5.5rem); margin: 0 0 14px; }
.p404__texto { margin-bottom: 30px; }
.p404__botones { gap: 14px; margin-bottom: 0; }
.p404__botones .btn { min-width: 150px; }
@media (max-width: 480px) { .p404__botones { display: grid; grid-template-columns: 1fr 1fr; } .p404__botones .btn { min-width: 0; } }
.p404__caja { max-width: 820px; }
.p404__botones .btn { white-space: nowrap; min-width: 0; padding-inline: 26px; }
@media (max-width: 480px) { .p404__botones .btn { padding-inline: 10px; letter-spacing: 0.14em; } }
/* botón Tienda: en la propia tienda conserva su texto blanco, sin subrayado */
.header .nav a.nav__tienda[aria-current="page"], .header.solido .nav a.nav__tienda[aria-current="page"],
.header .nav a.nav__tienda.activo, .header.solido .nav a.nav__tienda.activo { color: #fff; text-decoration: none; }
/* banda "De venta en": cadenas sin sucursal en el estado elegido */
.banda-venta__logos img { transition: opacity 0.3s ease, filter 0.3s ease; }
.banda-venta__logos img.apagada { opacity: 0.2; filter: grayscale(1); }
/* /rones/ · "Otras presentaciones": botella centrada en lo visible de la sección y sin salirse de ella */
@media (min-width: 64rem) {
.rl__grupo--presentaciones .rl__botella { top: var(--rl-cy, 50%); max-height: min(62vh, calc(var(--rl-alto, 100vh) * 0.9)); }
.rl__grupo--presentaciones .rl__item[data-tam="chica"] .rl__botella { max-height: min(42vh, calc(var(--rl-alto, 100vh) * 0.62)); }
.rl__grupo--presentaciones .rl__item[data-tam="grande"] .rl__botella { max-height: min(72vh, calc(var(--rl-alto, 100vh) * 0.94)); }
}
/* caja desplegable del filtro de cócteles: mismo lenguaje de carta que los botones (borde negro y sombra desplazada) */
.filtro-drop__panel { background: #fff8e8; border: 2px solid var(--negro); border-radius: 12px; box-shadow: 5px 5px 0 var(--negro); padding: 8px 22px; overflow: hidden; }
.filtro-drop__panel button { padding: 10px 0; transition: color 0.2s ease, transform 0.2s ease; }
.filtro-drop__panel button:not(:last-child) { border-bottom: 2px solid var(--negro); }
.filtro-drop__panel button:hover span:first-child, .filtro-drop__panel button:focus-visible span:first-child { transform: translateX(4px); }
.filtro-drop__panel button span:first-child { transition: transform 0.2s ease; }
.filtro-drop__panel button:focus-visible { outline: none; color: var(--coral); }
.sello-suerte text .sello-picale { fill: var(--coral); font-weight: 700; }
/* ficha de producto: la foto siempre completa dentro de su caja (antes la imagen tomaba su alto natural y se recortaba) */
.pdp__foto { position: relative; padding: 0; min-height: 0; }
.pdp__foto img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; transform: none !important; }
.pdp__foto.zoom { cursor: default; }
/* acceso a "Mi cuenta": icono en el encabezado de escritorio y liga en el menú de celular */
.cuenta-btn { display: inline-flex; padding: 8px; margin-left: 2px; color: #fff; transition: color 0.2s ease; }
.cuenta-btn .ico { display: block; }
.header.solido .cuenta-btn, body.submenu-open .header .cuenta-btn { color: var(--negro); }
.cuenta-btn:hover { color: var(--oro-claro); }
.header.solido .cuenta-btn:hover { color: #fff; }
.cuenta-btn[aria-current="page"] { color: var(--negro); }
.cuenta-btn:focus:not(:focus-visible) { outline: none; }
@media (max-width: 960px) { .header__barra .cuenta-btn { display: none; } }
.menu-movil__cuenta { display: block; margin: 14px 0 4px; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: inherit; text-decoration: underline; text-underline-offset: 5px; }
.panel-carrito__cuenta { margin: 10px 0 0; font-family: var(--cond); font-size: 0.9rem; text-align: center; }
.panel-carrito__cuenta a { text-decoration: underline; text-underline-offset: 3px; }
/* carta "cómo servirlo" de las fichas de ron: el reverso se acomoda en columna para que el botón nunca se corte */
.promo--disfrutar .promo__carta-lado--reverso { padding-bottom: 0; }
.promo--disfrutar .promo__carta-lado--reverso .promo__carta-contenido { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.5rem 1.6rem 1.7rem; }
.promo--disfrutar .promo__carta-lado--reverso .promo__carta-marco { margin-top: 0; padding: 0.7rem 0; width: 100%; }
.promo--disfrutar .promo__carta-lado--reverso .promo__carta-titulo { font-size: clamp(1.7rem, 2.3vw, 2.4rem); }
.promo--disfrutar .promo__carta-lado--reverso .promo__carta-sub { font-size: 0.92rem; margin-top: 0.35rem; }
.promo--disfrutar .promo__carta-texto { padding: 0.6rem 0 0; }
.promo--disfrutar .promo__carta-texto p { font-size: 0.92rem; line-height: 1.3; }
.promo--disfrutar .promo__carta-btn { margin-top: 0.7rem; flex: none; }
/* tienda: la rejilla se pinta con JS; se reserva alto para que el pie no brinque al cargar */
#gridTienda { min-height: 120vh; }
/* tienda: encuadre por producto. "lleno" = el recorte toca arriba y abajo (playeras, tote); "chico" = más aire (vasos, copa, posavasos) */
.col-item.compra .compra__visual--lleno .compra__principal, .col-item.compra .compra__visual--lleno .compra__alterna:not(.compra__alterna--foto) { padding: 0; object-fit: contain; object-position: center top; }
.col-item.compra .compra__visual--chico .compra__principal, .col-item.compra .compra__visual--chico .compra__alterna:not(.compra__alterna--foto) { padding: 54px 48px 46px; }
@media (max-width: 720px) {
.col-item.compra .compra__visual--lleno .compra__principal, .col-item.compra .compra__visual--lleno .compra__alterna:not(.compra__alterna--foto) { padding: 0; }
.col-item.compra .compra__visual--chico .compra__principal, .col-item.compra .compra__visual--chico .compra__alterna:not(.compra__alterna--foto) { padding: 30px 24px 26px; }
}
/* ══ Tienda · revisión de UX (1-oct): tamaños táctiles, aviso de tope, caja de compra más arriba en celular ══ */
@media (max-width: 720px) {
.compra__variante { padding: 7px 9px; font-size: 0.7rem; min-height: 32px; min-width: 36px; }
.compra__agregar.btn { font-size: 0.68rem; letter-spacing: 0.04em; min-height: 44px; }
.compra__detalle { font-size: 0.66rem; padding: 8px 0; margin-top: 4px; letter-spacing: 0.12em; }
}
@media (min-width: 721px) { .compra h3 { line-height: 1.1; } }
.compra__tope { width: 100%; text-align: center; }
.compra__tope:empty { display: none; }
.pdp__tope { text-align: left; margin: -4px 0 0; }
a.item-carrito__nombre { display: block; color: inherit; text-decoration: none; }
a.item-carrito__nombre:hover { color: var(--coral); }
.item-carrito__tope { margin: 6px 0 0; font-family: var(--serif); font-size: 0.8rem; color: var(--vino); }
.panel-carrito .item-carrito__quitar { padding: 8px 0; margin-top: 2px; }
.pdp__info--mas { border-top: 1px solid rgba(18, 17, 16, 0.12); padding-top: 24px; }
@media (min-width: 64rem) { .pdp__galeria { grid-row: span 3; } }
@media (min-width: 75rem) {
.pdp__principal { grid-template-rows: auto 1fr; }
.pdp__galeria { grid-column: 1; grid-row: 1 / span 2; }
.pdp__principal > .pdp__info { grid-column: 2; }
.pdp__compra { grid-column: 3; grid-row: 1 / span 2; }
.pdp__info--mas { border-top: 0; padding-top: 0; }
}
.pdp--lista .pdp__info--mas { animation-delay: 0.12s; }
.pdp__principal > .pdp__compra { order: 2; }
.pdp__principal > .pdp__info--mas { order: 3; }
@media (max-width: 74.9375rem) { .pdp__compra-precio { display: none; } } /* el precio ya va justo arriba de la caja */
.pdp__info--mas .pdp__h3 { margin-top: 22px; }
/*! Lenis 1.3.26 · CSS recomendado · MIT License · (c) 2024 darkroom.engineering */
html.lenis,
html.lenis body {
height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
.lenis.lenis-autoToggle {
transition-property: overflow;
transition-duration: 1ms;
transition-behavior: allow-discrete;
}
/* Ron Potosí · loro que vuela por la portada (lo arma y lo mueve /js/loro-vuelo.js)
Una sola capa sobre la página, en coordenadas del documento: la rama y el aro quedan pegados
a su sección, y el loro pasa a position: fixed mientras vuela para que el scroll no lo saque
de su banda en el cuarto inferior de la pantalla. */
.loro-vuelo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
/* los cuadros ocultos también ocupan lugar: ya crecido al tamaño del emblema, los del giro
asoman por la derecha y darían scroll horizontal. clip recorta sólo a los lados (el loro
que vuela es fixed y no le afecta) */
overflow-x: clip;
/* sobre el contenido; debajo del aviso de cookies (90), el header (900) y los paneles */
z-index: 80;
pointer-events: none;
}
/* Todas las capas miden 0×0 y su origen es el punto que se mueve: el cuerpo del loro,
el apoyo de la rama o el del aro. Escala, giro e inclinación se hacen alrededor de él. */
.loro-vuelo__ancla,
.loro-vuelo__ave,
.loro-vuelo__inclina,
.loro-vuelo__giro {
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
}
.loro-vuelo__ave { will-change: transform; }
.loro-vuelo__ave--fijo { position: fixed; }
/* entre una sección y otra el loro no está en pantalla */
.loro-vuelo__ave--fuera { display: none; }
/* Cada imagen trae su caja relativa a ese punto; el reset global (max-width: 100%) la aplastaría */
.loro-vuelo img { position: absolute; max-width: none; }
.loro-vuelo__cuadro { visibility: hidden; }
/* El emblema dorado se queda en el HTML (texto alternativo, móvil, sin JS);
sólo se vuelve transparente mientras el loro ocupa su lugar */
.loro-vuelo-destino img { opacity: 0; }
/* ---------- Checkout (/finalizar-compra) y confirmación ----------
New page, not part of the original design: the familiar two-column checkout (form on the
left, order summary on the right, logo bar instead of the site header) built from the
design's tokens, fonts and buttons. */
/* Logo bar (components/site/checkout-header) */
.checkout-barra { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--amarillo); border-bottom: 1px solid rgba(18, 17, 16, 0.12); }
@media (min-width: 64rem) {
.checkout-barra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 12px 0; }
.checkout-barra__columna { padding: 0 48px; }
.checkout-barra__contenido { max-width: 540px; margin-left: auto; }
.checkout-barra__contenido--resumen { display: flex; justify-content: flex-end; max-width: 420px; margin-left: 0; }
}
.checkout-barra__logo { display: inline-block; }
.checkout-barra__logo img { height: 52px; width: auto; }
.checkout-barra__bolsa { position: relative; display: inline-flex; padding: 8px; color: var(--negro); }
.checkout-barra__bolsa .badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--negro); color: #fff; font-family: var(--cond); font-size: 0.7rem; display: flex; align-items: center; justify-content: center; }
/* Layout: form, then the summary (shown first on phones, on the right from 64rem) */
.checkout { --linea: rgba(18, 17, 16, 0.12); --linea-fuerte: rgba(18, 17, 16, 0.24); --seleccion: #fff6da; display: grid; min-height: calc(100vh - 77px); }
.checkout [hidden] { display: none !important; }
.checkout__principal { padding: 32px 20px 40px; }
.checkout__resumen { order: -1; padding: 24px 20px; background: #fffdf7; border-bottom: 1px solid var(--linea); }
@media (min-width: 64rem) {
.checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.checkout__principal { padding: 40px 48px 48px; }
.checkout__principal-contenido { max-width: 540px; margin-left: auto; }
.checkout__resumen { order: 0; padding: 40px 48px; border-bottom: 0; border-left: 1px solid var(--linea); }
.checkout__resumen-contenido { max-width: 420px; position: sticky; top: 40px; }
}
.checkout__lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Sections */
.checkout__seccion + .checkout__seccion { margin-top: 34px; }
.checkout__titulo { font-family: var(--display); font-size: 1.75rem; line-height: 1.1; margin-bottom: 14px; color: var(--negro); }
.checkout__subtitulo { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; line-height: 1.3; margin-bottom: 12px; }
.checkout__subtitulo-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.checkout__enlace { background: none; border: 0; padding: 0; font-family: var(--texto); font-size: 0.9rem; color: var(--verde-jade); text-decoration: underline; cursor: pointer; }
.checkout__aviso { margin-bottom: 24px; padding: 14px 18px; border: 1px solid var(--coral); border-radius: 10px; color: var(--coral); background: #fff; font-family: var(--cond); font-size: 0.95rem; }
.checkout__nota { color: var(--gris-texto); font-size: 0.9rem; margin: -6px 0 14px; }
/* Fields with a floating label: placeholder=" " tells when the field is empty */
.campo { position: relative; display: block; }
.campo__control { width: 100%; height: 54px; padding: 15px 14px; border: 1px solid var(--linea-fuerte, rgba(18, 17, 16, 0.24)); border-radius: 10px; background: #fff; font-family: var(--texto); font-size: 1rem; line-height: 1.3; color: var(--negro); appearance: none; }
.campo__control:focus { box-shadow: 0 0 0 1px var(--turquesa); }
.campo__control:user-invalid { border-color: var(--ambar); }
textarea.campo__control { height: auto; min-height: 80px; padding-top: 26px; resize: vertical; }
.campo__etiqueta { position: absolute; left: 15px; top: 50%; max-width: calc(100% - 30px); transform: translateY(-50%); color: var(--gris-texto); font-size: 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: top 0.15s ease, font-size 0.15s ease, transform 0.15s ease; }
textarea.campo__control + .campo__etiqueta { top: 16px; transform: none; }
.campo__control:is(:focus, :not(:placeholder-shown)) { padding-top: 24px; padding-bottom: 6px; }
textarea.campo__control:is(:focus, :not(:placeholder-shown)) { padding-top: 26px; }
.campo__control:is(:focus, :not(:placeholder-shown)) + .campo__etiqueta,
.campo--lista .campo__etiqueta { top: 8px; transform: none; font-size: 0.74rem; }
.campo--lista .campo__control { padding-right: 38px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121110' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.checkout__campos { display: grid; gap: 12px; }
.checkout__fila-tres { display: grid; gap: 12px; }
@media (min-width: 40rem) {
.checkout__campos { grid-template-columns: 1fr 1fr; }
.checkout__campo--ancho { grid-column: 1 / -1; }
.checkout__fila-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Delivery or pickup, delivery options and stores: one bordered list of choices */
.checkout__modos { display: grid; margin-bottom: 14px; border: 1px solid var(--linea-fuerte); border-radius: 10px; background: #fff; overflow: hidden; }
.checkout__modo { display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; }
.checkout__modo span { flex: 1; }
.checkout__modo + .checkout__modo { border-top: 1px solid var(--linea); }
.checkout__opciones { display: grid; }
.checkout__opcion { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; padding: 16px; border: 1px solid var(--linea-fuerte); background: #fff; cursor: pointer; }
.checkout__opcion + .checkout__opcion { border-top: 0; }
.checkout__opcion:first-child { border-radius: 10px 10px 0 0; }
.checkout__opcion:last-child { border-radius: 0 0 10px 10px; }
.checkout__opcion:only-child { border-radius: 10px; }
.checkout__modo:has(input:checked),
.checkout__opcion:has(input:checked) { background: var(--seleccion); box-shadow: inset 0 0 0 1px var(--negro); }
.checkout__modo input,
.checkout__opcion input { width: 18px; height: 18px; accent-color: var(--verde-jade); }
.checkout__opcion input { grid-row: span 2; }
.checkout__opcion-nombre { font-weight: 600; }
.checkout__opcion-precio { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.checkout__opcion-detalle { grid-column: 2 / -1; color: var(--gris-texto); font-size: 0.88rem; }
.checkout__vacio { padding: 18px; border-radius: 10px; background: rgba(18, 17, 16, 0.06); color: var(--gris-texto); font-size: 0.95rem; text-align: center; }
/* Payment: Stripe's hosted page takes over after the button */
.checkout__pago-caja { border: 1px solid var(--linea-fuerte); border-radius: 10px; background: #fff; overflow: hidden; }
.checkout__pago-metodos { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; background: var(--seleccion); border-bottom: 1px solid var(--linea); }
.checkout__pago-caja > p:last-child { padding: 18px 20px; color: var(--gris-texto); font-size: 0.92rem; text-align: center; }
.checkout__pago { display: grid; gap: 16px; margin-top: 20px; }
.checkout__check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--gris-texto); cursor: pointer; }
.checkout__check input { margin-top: 4px; accent-color: var(--verde-jade); }
.checkout__pagar { width: 100%; padding: 18px 26px; font-size: 0.85rem; text-align: center; }
.checkout__pagar:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.checkout__pie { display: grid; gap: 10px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 0.82rem; color: var(--gris-texto); }
.checkout__pie nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.checkout__pie a { text-decoration: underline; }
.checkout__pie p { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--negro); }
/* Order summary */
.checkout .checkout__lineas { list-style: none; display: grid; gap: 16px; margin-bottom: 24px; }
.checkout__linea { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; font-size: 0.95rem; line-height: 1.35; }
.checkout__miniatura { position: relative; width: 64px; height: 64px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.checkout__miniatura img { width: 100%; height: 100%; padding: 4px; object-fit: contain; border-radius: inherit; }
.checkout__cantidad { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--negro); color: #fff; font-family: var(--cond); font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.checkout__linea-nombre small { display: block; color: var(--gris-texto); font-size: 0.82rem; }
.checkout__linea-precio { font-variant-numeric: tabular-nums; }
.checkout__cupon { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }
.checkout__cupon .btn { border-radius: 10px; padding: 0 20px; }
.checkout__cupon .btn:disabled { opacity: 0.55; cursor: wait; }
.checkout__cupon-error { margin-top: 8px; color: var(--ambar); font-size: 0.88rem; }
.checkout__cupon-aplicado { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 8px 6px 12px; border-radius: 8px; background: rgba(18, 17, 16, 0.07); font-family: var(--cond); font-weight: 600; letter-spacing: 0.06em; font-size: 0.85rem; }
.checkout__cupon-aplicado button { display: grid; place-items: center; padding: 2px; border: 0; background: none; color: var(--gris-texto); cursor: pointer; }
.checkout .checkout__totales { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 24px 0 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.checkout .checkout__totales dd { margin: 0; text-align: right; }
.checkout__pendiente { color: var(--gris-texto); font-size: 0.88rem; }
.checkout .checkout__totales .checkout__total { margin-top: 8px; font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--negro); }
.checkout .checkout__totales dd.checkout__total small { margin-right: 4px; font-family: var(--texto); font-weight: 400; font-size: 0.75rem; color: var(--gris-texto); }
.checkout__impuestos { margin-top: 2px; color: var(--gris-texto); font-size: 0.88rem; }
/* Order confirmation (/finalizar-compra/gracias) */
.confirmacion { max-width: 640px; margin: 0 auto; }
.confirmacion .checkout__resumen { background: #fff; border: 1px solid rgba(18, 17, 16, 0.12); border-radius: 28px; padding: 26px; display: grid; gap: 16px; }
.confirmacion .checkout__titulo { font-family: var(--cond); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 1.1rem; margin-bottom: 0; }
.confirmacion .checkout__lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.confirmacion .checkout__lineas li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; padding-bottom: 12px; border-bottom: 1px solid rgba(18, 17, 16, 0.1); }
.confirmacion .checkout__lineas small { display: block; color: var(--gris-texto); font-size: 0.8rem; }
.confirmacion .checkout__totales { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; font-variant-numeric: tabular-nums; }
.confirmacion .checkout__totales dt { color: var(--gris-texto); }
.confirmacion .checkout__totales dd { margin: 0; text-align: right; }
.confirmacion .checkout__totales .checkout__total { color: var(--negro); font-family: var(--serif); font-size: 1.25rem; padding-top: 10px; border-top: 1px solid rgba(18, 17, 16, 0.15); }
/* ---------- Scroll measuring ----------
Not part of the original design. Its base sets `html { scroll-behavior: smooth }`; while Lenis
runs (it adds `.lenis` to and smooths the scroll and the #anchors itself) that native
smoothing made every ScrollTrigger refresh measure from the wrong place: a refresh jumps the
scroll to measure and the jump was animated. After a resize, a font or a section growing (the
map's list on phones), the postcards, the lottery and the reveals started off. Without Lenis
(reduced motion) the native smoothing stays. `!important` because ScrollTrigger, having seen
`smooth` before Lenis started, writes it back inline on after every refresh. */
html.lenis { scroll-behavior: auto !important; }
/* ---------- Age gate: ya confirmado ----------
Not part of the original design. The gate is in every page's markup and core/age-gate.js used to
hide it only once the page's script ran, so a visitor who had already confirmed their age saw it
flash on every page. The layout's inline
script adds `.mayor-edad` to before the
first paint when the confirmation is stored, and the gate never shows. */
html.mayor-edad .age-gate { display: none; }
/* ---------- Age gate: legal dialogs ----------
Not part of the original design. The privacy notice and terms open over the gate, so a visitor
who has not confirmed their age can read them and nothing else of the site. */
.age-gate__legal {
width: min(720px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
margin: auto;
padding: clamp(28px, 4vw, 44px);
border: 0;
background: var(--crema);
color: var(--negro);
overflow-y: auto;
text-align: left;
}
.age-gate__legal::backdrop { background: rgba(0, 0, 0, 0.7); }
.age-gate__legal-cerrar {
position: sticky;
top: 0;
float: right;
background: none;
border: 0;
font-size: 2rem;
line-height: 1;
cursor: pointer;
color: var(--negro);
}
/* ---------- Opiniones de clientes ----------
Not part of the original design. The product page's approved reviews (in the design's empty
"Opiniones de clientes" block) and the review page the "delivered" email links to
(/califica-tu-compra): one slide per product, each with the contact page's form fields. */
.pdp__estrellas { color: var(--oro-profundo); letter-spacing: 0.08em; }
.pdp__opiniones-resumen { margin: 0 0 18px; font-family: var(--cond); font-size: 1rem; }
.pdp__opiniones-resumen .pdp__estrellas { font-size: 1.25rem; }
.pdp__opiniones-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 760px; }
.pdp__opinion { background: var(--crema); border-radius: 24px; padding: 20px 24px; line-height: 1.5; }
.pdp__opinion-cabeza { margin: 0 0 6px; font-family: var(--cond); font-size: 0.92rem; }
.pdp__opinion-cabeza span:last-child { color: var(--gris-texto); }
.pdp__opinion-texto { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
/* Review page */
.resenas { display: grid; gap: 22px; max-width: 980px; margin: 0 auto; }
.resenas [hidden] { display: none !important; }
.resenas__carril { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.resenas__carril::-webkit-scrollbar { display: none; }
.resenas__producto { flex: 0 0 100%; scroll-snap-align: start; display: grid; gap: 22px; align-items: start; padding: 4px 4px 8px; }
@media (min-width: 48rem) { .resenas__producto { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px; } }
.resenas__foto { aspect-ratio: 1; border: 2px solid var(--negro); border-radius: 14px; background: #fff; overflow: hidden; }
.resenas__foto img { width: 100%; height: 100%; object-fit: contain; }
.resenas__contador { margin: 0; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--gris-texto); }
.resenas__gracias { margin: 0; font-family: var(--serif); font-size: 1.05rem; color: var(--verde-jade); }
.resenas__form { display: grid; gap: 18px; }
/* Stars: radios hidden for screen readers' sake, their labels drawn as stars */
.resenas__estrellas { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.resenas__estrellas legend { width: 100%; margin-bottom: 6px; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--negro); }
.resenas__estrellas label { cursor: pointer; padding: 0 2px; font-size: 2.2rem; line-height: 1; color: #d9d2c0; transition: color 0.15s ease, transform 0.15s ease; }
.resenas__estrellas label.llena, .resenas__estrellas:has(label:hover) label { color: var(--oro); }
.resenas__estrellas label:hover ~ label { color: #d9d2c0; }
.resenas__estrellas label:hover { transform: scale(1.12); }
.resenas__estrellas input:focus-visible + label { outline: 2px solid var(--negro); outline-offset: 2px; border-radius: 4px; }
.resenas__estrellas.con-error legend { color: var(--coral); }
.resenas__controles { display: flex; align-items: center; justify-content: center; gap: 18px; }
.resenas__flecha { width: 46px; height: 46px; border: 2px solid var(--negro); border-radius: 50%; background: var(--amarillo); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 3px 3px 0 var(--negro); }
.resenas__flecha:hover { background: var(--negro); color: var(--crema); }
.resenas__posicion { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; min-width: 5em; text-align: center; }
.resenas__aviso { margin: 0; background: var(--crema); border-radius: 24px; padding: 20px 24px; font-family: var(--serif); line-height: 1.5; text-align: center; }
.resenas__seguir { justify-self: center; }