/* =========================================================
Tequila Cocina · white & pink, refined
========================================================= */
:root{
/* Whites */
--white: #FFFFFF;
--ivory: #FFFBF6;
--cream: #FBF1E4;
--sand: #F5E6CE;
/* Rosa Mexicano · the real Mexican pink */
--rosa: #EC107F; /* primary brand pink */
--rosa-deep: #B8095E; /* hover / darker */
--rosa-bright: #FF2EA0; /* highlight */
--rosa-soft: #FFD4E5; /* soft wash */
--rosa-blush: #FFEFF5; /* lightest background tint */
--bougainvillea:#D6336C;
--hibiscus: #A6173E;
/* Gold & noche */
--gold: #D4AF37;
--gold-bright: #F4D35E;
--gold-deep: #8A6E18;
--noche: #170A10;
--noche-2: #2A1320;
--plum: #3A1828;
/* Supporting Mexican accents (decorative, not primary) */
--chili: #D03A2A;
--chili-deep: #9B2417;
--terracotta: #C75B33;
--marigold: #E8A33D;
--mustard: #D8902A;
--jade: #2C7A4C;
--turquoise: #1F8F8A;
--cobalt: #1F4E8C;
--lime: #94B33C;
/* legacy aliases */
--rose-50: #FFEFF5;
--rose-100: #FFD4E5;
--rose-200: #FFB0CF;
--rose-300: #FF6FA8;
--rose-500: #EC107F;
--rose-700: #B8095E;
--ink: #1A0A12;
--muted: #7A5A6A;
--line: rgba(58, 24, 40, 0.12);
--shadow-sm: 0 2px 14px rgba(58, 24, 40, 0.08);
--shadow-md: 0 20px 60px -20px rgba(58, 24, 40, 0.22);
--shadow-lg: 0 40px 80px -30px rgba(58, 24, 40, 0.32);
--shadow-rosa: 0 24px 60px -20px rgba(236, 16, 127, 0.45);
--shadow-gold: 0 20px 50px -16px rgba(212, 175, 55, 0.45);
--serif: 'Fraunces', 'Times New Roman', serif;
--display: 'Yeseva One', 'Fraunces', serif;
--condensed: 'Bebas Neue', 'Inter', sans-serif;
--sans: 'Inter', system-ui, -apple-system, sans-serif;
--script: 'Caveat', cursive;
--container: 1200px;
--radius: 18px;
/* tequila shot cursor */
--taco-cursor: url("data:image/svg+xml;utf8,") 8 28, auto;
}
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin: 0;
font-family: var(--sans);
font-weight: 400;
font-size: 16px;
line-height: 1.65;
color: var(--ink);
background: var(--ivory);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
cursor: var(--taco-cursor);
/* `clip` instead of `hidden` so we don't accidentally create a scroll container
(which breaks position: sticky on descendants like .menu-toolbar). */
overflow-x: clip;
-webkit-tap-highlight-color: transparent; /* remove blue tap flash on mobile */
}
@supports not (overflow-x: clip){
body{ overflow-x: hidden; }
}
a, button, .menu-tab, .nav-toggle, .chat-launcher, .g-tile, .pillar, .team-card{
cursor: var(--taco-cursor);
}
input, textarea, select, [contenteditable]{
cursor: text;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
/* ----- typography ----- */
h1,h2,h3,h4{
font-family: var(--serif);
font-weight: 600;
font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
color: var(--plum);
letter-spacing: -0.005em;
margin: 0 0 0.4em;
}
h1{ font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1.02; font-weight: 700; }
h2{ font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.06; }
h3{ font-size: 1.55rem; line-height: 1.2; font-weight: 600; }
h4{ font-size: 1.2rem; line-height: 1.25; font-weight: 600; }
em{ font-style: italic; color: var(--chili); font-weight: 500; }
.script{ font-family: var(--script); font-style: normal; color: var(--chili); font-size: 1.5em; line-height: 1; font-weight: 700; }
p{ margin: 0 0 1em; color: var(--ink); }
.lead{ font-size: 1.125rem; color: #4f3f44; }
.eyebrow{
font-family: var(--sans);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.28em;
font-size: 0.72rem;
color: var(--rose-500);
margin: 0 0 1.2rem;
}
.muted{ color: var(--muted); font-size: 0.92rem; }
.container{
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 28px;
}
.section{ padding: clamp(72px, 10vw, 140px) 0; position: relative; }
@media (max-width: 720px){
.reserve-section.section{ padding: 40px 0 60px; }
}
/* ----- buttons ----- */
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 28px;
border-radius: 999px;
font-family: var(--sans);
font-weight: 500;
font-size: 0.86rem;
letter-spacing: 0.16em;
text-transform: uppercase;
border: 1px solid transparent;
transition: all .35s ease;
cursor: pointer;
}
.btn-primary{
background: linear-gradient(135deg, var(--rosa) 0%, var(--rosa-deep) 100%);
color: #fff;
box-shadow: var(--shadow-rosa);
position: relative;
}
.btn-primary::before{
content: '';
position: absolute; inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--gold-bright), transparent 50%, var(--rosa-bright));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.8;
}
.btn-primary:hover{
transform: translateY(-2px);
box-shadow: 0 30px 60px -14px rgba(236, 16, 127, 0.6);
}
/* LUXE buttons (used in hero + FIFA section) */
.btn-luxe{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
font-family: var(--sans);
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.22em;
text-transform: uppercase;
border-radius: 999px;
transition: all .4s cubic-bezier(.2,.7,.2,1);
overflow: hidden;
z-index: 1;
cursor: var(--taco-cursor);
}
.btn-luxe > span{ position: relative; z-index: 2; }
.btn-luxe::before{
content: '';
position: absolute; inset: 0;
border-radius: inherit;
transition: transform .5s ease, opacity .4s ease;
z-index: 1;
}
.btn-luxe-primary{
color: #fff;
background: linear-gradient(135deg, var(--rosa) 0%, var(--rosa-deep) 100%);
box-shadow: 0 18px 40px -14px rgba(236,16,127,0.55), inset 0 0 0 1px rgba(255,255,255,0.18);
}
.btn-luxe-primary::before{
background: linear-gradient(135deg, var(--rosa-bright), var(--rosa));
opacity: 0;
}
.btn-luxe-primary:hover{
transform: translateY(-3px);
box-shadow: 0 26px 50px -14px rgba(236,16,127,0.7), inset 0 0 0 1px rgba(255,255,255,0.3);
}
.btn-luxe-primary:hover::before{ opacity: 1; }
.btn-luxe-gold{
color: var(--noche);
background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 60%, #B98E1A 100%);
box-shadow: var(--shadow-gold), inset 0 0 0 1px rgba(255,255,255,0.4);
font-weight: 700;
}
.btn-luxe-gold::before{
background: linear-gradient(135deg, #FFF1A8, var(--gold-bright));
opacity: 0;
}
.btn-luxe-gold:hover{
transform: translateY(-3px);
box-shadow: 0 28px 60px -14px rgba(212,175,55,0.65);
}
.btn-luxe-gold:hover::before{ opacity: 1; }
.btn-luxe-ghost{
color: var(--ivory);
background: transparent;
border: 1px solid rgba(255,255,255,0.4);
backdrop-filter: blur(8px);
}
.btn-luxe-ghost:hover{
background: rgba(255,255,255,0.1);
border-color: var(--gold);
color: var(--gold-bright);
transform: translateY(-3px);
}
.btn-luxe.btn-block{ width: 100%; }
.btn-ghost{
background: transparent;
color: var(--plum);
border: 1px solid var(--rose-200);
}
.btn-ghost:hover{
background: var(--rose-50);
border-color: var(--rose-300);
}
.btn-block{ width: 100%; }
/* =========================================================
NAV
========================================================= */
.nav{
position: fixed; top: 0; left: 0; right: 0;
z-index: 50;
padding: 22px 0;
transition: all .35s ease;
background: transparent;
}
.nav.scrolled{
background: rgba(58, 24, 40, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.nav-inner{
max-width: var(--container);
margin: 0 auto;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand{
display: inline-flex;
align-items: center;
gap: 14px;
color: #fff;
transition: color .35s ease;
}
.nav.scrolled .brand{ color: #fff; }
/* refined agave logo lockup */
.brand{
align-items: center;
gap: 12px;
}
.brand-mark-svg{
width: 42px;
height: 42px;
flex-shrink: 0;
transition: transform .4s ease;
}
.brand:hover .brand-mark-svg{ transform: rotate(-8deg); }
.brand-name{
display: flex;
flex-direction: column;
line-height: 0.95;
font-family: var(--display);
letter-spacing: 0.04em;
text-transform: none;
position: relative;
padding-left: 2px;
}
.brand-line-top, .brand-line-bot{
font-size: 1.15rem;
font-weight: 400;
text-transform: none;
color: currentColor;
}
.brand-line-top{ margin-bottom: 4px; }
.brand-line-bot{
position: relative;
padding-top: 4px;
}
.brand-line-bot::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 1px;
background: var(--rosa);
}
/* large variant used in footer */
.brand-mark-svg.large{ width: 64px; height: 64px; }
/* legacy fallback (old "T·C" mark — kept for footer if it lingers) */
.brand-mark{
font-family: var(--display);
font-weight: 400;
font-size: 1.4rem;
letter-spacing: 0.04em;
border: 1px solid currentColor;
width: 42px; height: 42px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
}
.brand-mark.large{ width: 64px; height: 64px; font-size: 1.8rem; }
.brand-dot{ color: var(--rosa); padding: 0 2px; }
/* active state for nav reserve CTA (current-page indicator) */
.nav-cta.active{
background: var(--plum);
border: 1px solid var(--gold);
box-shadow: inset 0 0 0 2px rgba(212,175,55,0.3), 0 8px 18px -6px rgba(58,24,40,0.4);
}
.nav-cta.active:hover{
background: var(--noche);
}
@media (max-width: 720px){
.brand-mark-svg{ width: 34px; height: 34px; }
.brand-line-top, .brand-line-bot{ font-size: 0.78rem; letter-spacing: 0.14em; }
}
@media (max-width: 420px){
.brand-name{ display: none; }
}
.nav-links{
display: flex;
gap: 34px;
align-items: center;
}
.nav-links a{
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #fff;
position: relative;
padding: 6px 0;
transition: color .25s ease;
}
.nav.scrolled .nav-links a{ color: #fff; }
.nav-links a:not(.nav-cta)::after{
content: '';
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1px;
background: var(--rose-300);
transition: width .35s ease;
}
.nav-links a:not(.nav-cta):hover::after{ width: 100%; }
.nav-cta{
background: var(--rosa);
color: #fff !important;
padding: 11px 22px !important;
border-radius: 999px;
letter-spacing: 0.18em !important;
transition: all .3s ease;
box-shadow: 0 8px 18px -8px rgba(236,16,127,0.6);
}
.nav-cta:hover{ background: var(--rosa-deep); transform: translateY(-1px); }
.brand-dot{ color: var(--rosa) !important; }
.nav-toggle{
display: none;
width: 38px; height: 38px;
background: transparent;
border: 0;
flex-direction: column;
gap: 5px;
align-items: center;
justify-content: center;
}
.nav-toggle span{
width: 22px; height: 1.5px;
background: #fff;
transition: all .3s ease;
}
.nav.scrolled .nav-toggle span{ background: #fff; }
/* =========================================================
HERO · cinematic noche
========================================================= */
.hero{
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
color: var(--ivory);
padding: 140px 20px 100px;
background: var(--noche);
}
.hero-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
filter: saturate(1.05) contrast(1.05);
}
.hero-bg{
position: absolute; inset: 0;
z-index: 1;
background:
radial-gradient(ellipse at 50% 60%, rgba(236,16,127,0.10), transparent 55%),
radial-gradient(ellipse at 12% 80%, rgba(212,175,55,0.08), transparent 50%),
radial-gradient(ellipse at 88% 18%, rgba(236,16,127,0.10), transparent 55%),
linear-gradient(180deg, rgba(23,10,16,0.18) 0%, rgba(58,24,40,0.22) 50%, rgba(23,10,16,0.45) 100%);
transform: scale(1.04);
animation: heroBreath 16s ease-in-out infinite alternate;
}
/* soft veil on top of video — light enough that the room reads through */
.hero-veil{
position: absolute; inset: 0;
z-index: 1;
background:
radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(23,10,16,0.20) 90%),
linear-gradient(180deg, rgba(23,10,16,0.16) 0%, transparent 25%, transparent 70%, rgba(23,10,16,0.38) 100%);
pointer-events: none;
}
/* ornate flourishes flanking title */
.hero-flourish{
position: absolute;
top: 50%;
width: clamp(80px, 10vw, 140px);
height: clamp(220px, 30vw, 380px);
transform: translateY(-50%);
z-index: 3;
opacity: 0.7;
pointer-events: none;
animation: flourishGlow 5s ease-in-out infinite alternate;
filter: drop-shadow(0 0 16px rgba(212,175,55,0.4));
}
.hero-flourish-left{ left: clamp(20px, 4vw, 80px); }
.hero-flourish-right{ right: clamp(20px, 4vw, 80px); }
@keyframes flourishGlow{
from{ opacity: 0.55; filter: drop-shadow(0 0 14px rgba(212,175,55,0.3)); }
to { opacity: 0.85; filter: drop-shadow(0 0 22px rgba(212,175,55,0.55)); }
}
@media (max-width: 900px){
.hero-flourish{ display: none; }
}
@keyframes heroBreath{
from{ transform: scale(1); }
to { transform: scale(1.07); }
}
/* spotlights and stars */
.hero-spotlight{
position: absolute; inset: 0;
pointer-events: none;
z-index: 2;
background:
radial-gradient(circle at 12% 22%, rgba(255,255,255,0.6) 0 1px, transparent 2px),
radial-gradient(circle at 78% 15%, rgba(255,255,255,0.5) 0 1px, transparent 2px),
radial-gradient(circle at 65% 80%, rgba(255,255,255,0.4) 0 1px, transparent 2px),
radial-gradient(circle at 30% 88%, rgba(244,211,94,0.5) 0 1px, transparent 2px),
radial-gradient(circle at 50% 45%, rgba(255,255,255,0.4) 0 1px, transparent 2px),
radial-gradient(circle at 18% 50%, rgba(244,211,94,0.4) 0 1px, transparent 2px),
radial-gradient(circle at 82% 60%, rgba(255,255,255,0.4) 0 1px, transparent 2px);
animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{
from{ opacity: 0.6; }
to{ opacity: 1; }
}
/* floating papel picado strings */
.picado-strings{
position: absolute;
top: 0; left: -10%;
right: -10%;
height: 70px;
pointer-events: none;
z-index: 4;
}
.picado-string{
display: flex;
gap: 0;
width: 120%;
justify-content: space-between;
padding: 0 20px;
transform: translateY(-4px);
}
.picado-string::before{
content: '';
position: absolute;
top: 0;
left: 0; right: 0;
height: 1px;
background: rgba(255,255,255,0.4);
z-index: 1;
transform: translateY(2px);
}
.flag{
width: 56px;
height: 60px;
position: relative;
display: inline-block;
transform-origin: top center;
animation: flagSway 3.5s ease-in-out infinite alternate;
clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}
.flag:nth-child(odd){ animation-duration: 4.2s; animation-direction: alternate-reverse; }
.flag:nth-child(3n){ animation-duration: 5s; }
.flag-rosa{ background: var(--rosa); }
.flag-white{ background: var(--white); }
.flag-gold{ background: var(--gold); }
.flag::before{
content: '';
position: absolute;
inset: 6px;
background:
radial-gradient(circle at 30% 30%, transparent 4px, currentColor 4px 5px, transparent 5px),
radial-gradient(circle at 70% 50%, transparent 3px, currentColor 3px 4px, transparent 4px),
radial-gradient(circle at 50% 70%, transparent 5px, currentColor 5px 6px, transparent 6px);
opacity: 0.35;
color: var(--noche);
}
.flag-white::before{ color: var(--rosa); opacity: 0.6; }
.flag-gold::before{ color: var(--noche); opacity: 0.5; }
@keyframes flagSway{
0% { transform: rotate(-3deg) translateY(0); }
100% { transform: rotate(3deg) translateY(2px); }
}
/* gold confetti (now subtle, fewer particles) */
.confetti{
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
.confetti span{
position: absolute;
top: -10%;
width: 4px;
height: 6px;
opacity: 0;
border-radius: 1px;
animation: fall linear infinite;
filter: blur(0.3px);
}
.confetti span:nth-child(1){ left: 8%; background: var(--gold); animation-duration: 14s; animation-delay: 0s; }
.confetti span:nth-child(2){ left: 22%; background: var(--gold-bright);animation-duration: 16s; animation-delay: 3s; }
.confetti span:nth-child(3){ left: 38%; background: var(--gold); animation-duration: 13s; animation-delay: 5s; }
.confetti span:nth-child(4){ left: 55%; background: var(--rosa-bright);animation-duration: 15s; animation-delay: 1.5s; }
.confetti span:nth-child(5){ left: 68%; background: var(--gold-bright);animation-duration: 14s; animation-delay: 7s; }
.confetti span:nth-child(6){ left: 82%; background: var(--gold); animation-duration: 17s; animation-delay: 2s; }
.confetti span:nth-child(7){ left: 92%; background: var(--rosa); animation-duration: 13s; animation-delay: 9s; }
.confetti span:nth-child(8){ left: 14%; background: var(--gold-bright);animation-duration: 16s; animation-delay: 11s; }
@keyframes fall{
0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}
.hero-content{
position: relative;
z-index: 5;
max-width: 1100px;
color: var(--ivory);
padding: 0 20px;
}
/* "Bienvenidos" gold ribbon */
.hero-bienvenidos{
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 0 0 26px;
color: var(--gold-bright);
}
.hero-bienvenidos .script{
font-size: 2.2rem;
color: var(--gold-bright);
letter-spacing: 0.04em;
filter: drop-shadow(0 2px 8px rgba(212,175,55,0.4));
}
.bv-line{
width: 80px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold));
}
.bv-line:last-child{
background: linear-gradient(270deg, transparent, var(--gold));
}
/* MEGA hero typography */
.hero-mega{
font-family: var(--display);
font-weight: 400;
line-height: 0.92;
margin: 0 0 28px;
color: var(--white);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
letter-spacing: -0.01em;
}
.mega-line{
font-size: clamp(3.6rem, 13vw, 11rem);
background: linear-gradient(180deg,
#FFEFC8 0%,
var(--gold-bright) 35%,
var(--gold) 60%,
#8A6E18 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:
0 0 40px rgba(212,175,55,0.25),
0 6px 14px rgba(0,0,0,0.55);
filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55));
position: relative;
animation: megaIn 1s cubic-bezier(.2,.7,.2,1) both;
}
.mega-cocina{ animation-delay: 0.25s; }
@keyframes megaIn{
from{ opacity: 0; transform: translateY(40px) scale(0.92); letter-spacing: 0.3em; }
to { opacity: 1; transform: translateY(0) scale(1); letter-spacing: -0.01em; }
}
.mega-amp{
font-family: var(--script);
font-size: clamp(2.2rem, 5vw, 4.5rem);
color: var(--rosa-bright);
margin: -10px 0;
filter: drop-shadow(0 2px 12px rgba(236,16,127,0.55));
animation: megaIn 1s ease 0.6s both;
}
.hero-tagline{
font-family: var(--sans);
font-size: clamp(0.85rem, 1.4vw, 1rem);
text-transform: uppercase;
letter-spacing: 0.36em;
margin: 0 auto 42px;
color: rgba(255,251,246,0.85);
animation: megaIn 1s ease 0.8s both;
}
.rosa-bold{
color: var(--rosa-bright);
font-weight: 600;
letter-spacing: 0.32em;
}
.hero-cta{
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 42px;
animation: megaIn 1s ease 1s both;
}
.hero-meta{
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 0.74rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ivory);
padding: 14px 26px;
border: 1px solid var(--gold);
border-radius: 999px;
background: rgba(23,10,16,0.45);
backdrop-filter: blur(10px);
animation: megaIn 1s ease 1.2s both;
}
.hero-meta .dot{ color: var(--gold-bright); }
/* luxe scroll cue */
.scroll-cue-luxe{
position: absolute;
bottom: 36px; left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--gold);
}
.scroll-dot{
width: 10px; height: 10px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 12px var(--gold-bright);
animation: bobble 2s ease-in-out infinite;
}
@keyframes bobble{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
.scroll-text{
font-family: var(--script);
font-size: 1.2rem;
color: var(--gold-bright);
letter-spacing: 0.06em;
}
.scroll-cue{
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--ivory);
}
.scroll-line{
width: 1px;
height: 50px;
background: linear-gradient(to bottom, transparent, var(--marigold));
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
.scroll-label{
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
}
/* papel picado */
.papel-picado{
position: absolute;
bottom: 0; left: 0;
width: 100%;
height: 56px;
color: var(--chili);
filter: drop-shadow(0 4px 6px rgba(155,36,23,0.18));
z-index: 3;
pointer-events: none;
}
.papel-picado:nth-of-type(n){
/* alternating colors via background not possible on single svg, ok */
}
/* sarape stripe band */
.sarape{
height: 18px;
background:
repeating-linear-gradient(90deg,
var(--rosa) 0 20px,
var(--gold) 20 34px,
var(--white) 34 40px,
var(--rosa-bright) 40 58px,
var(--gold-bright) 58 72px,
var(--white) 72 78px,
var(--rosa-deep) 78 96px,
var(--gold) 96 110px);
border-top: 2px solid var(--noche);
border-bottom: 2px solid var(--noche);
position: relative;
}
.sarape::before, .sarape::after{
content: '';
position: absolute;
left: 0; right: 0;
height: 2px;
background: repeating-linear-gradient(90deg, var(--noche) 0 6px, transparent 6px 10px);
}
.sarape::before{ top: 5px; }
.sarape::after{ bottom: 5px; }
/* talavera divider strip */
.talavera-divider{
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
padding: 36px 20px;
background: var(--ivory);
}
.talavera-divider .tile{
width: 28px; height: 28px;
transform: rotate(45deg);
background:
conic-gradient(from 0deg,
var(--chili) 0 25%,
var(--marigold) 25% 50%,
var(--turquoise) 50% 75%,
var(--rose-500) 75% 100%);
border-radius: 4px;
position: relative;
box-shadow: 0 4px 12px rgba(155,36,23,0.18);
}
.talavera-divider .tile::after{
content: '';
position: absolute;
inset: 6px;
background: var(--ivory);
border-radius: 2px;
}
.talavera-divider .tile::before{
content: '';
position: absolute;
inset: 10px;
background: var(--chili);
border-radius: 50%;
z-index: 1;
}
.talavera-divider .tile-line{
flex: 0 1 220px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--rose-200) 30%, var(--marigold) 50%, var(--rose-200) 70%, transparent);
}
/* =========================================================
MARQUEE
========================================================= */
.marquee{
background: linear-gradient(90deg, var(--noche) 0%, var(--plum) 50%, var(--noche) 100%);
color: var(--ivory);
padding: 22px 0;
overflow: hidden;
border-top: 2px solid var(--gold);
border-bottom: 2px solid var(--gold);
position: relative;
}
.marquee::before,
.marquee::after{
content: '';
position: absolute;
left: 0; right: 0;
height: 4px;
background:
repeating-linear-gradient(90deg,
var(--gold) 0 12px,
var(--rosa) 12px 24px,
var(--white) 24px 30px,
var(--rosa-bright) 30px 46px);
opacity: 0.65;
}
.marquee::before{ top: 2px; }
.marquee::after{ bottom: 2px; }
.marquee-track{
display: flex;
gap: 56px;
white-space: nowrap;
animation: marquee 36s linear infinite;
font-family: var(--serif);
font-style: italic;
font-size: 1.3rem;
letter-spacing: 0.04em;
}
.marquee-track span{ color: var(--rosa-soft); }
.marquee-track span:nth-child(odd){ color: var(--gold-bright); }
.marquee-track span:nth-child(3n){ color: var(--white); }
@keyframes marquee{
from{ transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* =========================================================
STORY
========================================================= */
.story{ background: var(--ivory); }
.two-col{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.story-text .signature{ margin-top: 30px; font-size: 1.4rem; }
.story-art{
position: relative;
height: 560px;
}
.art-card{
position: absolute;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.art-card-1{
top: 0; left: 0;
width: 65%; height: 70%;
background:
linear-gradient(135deg, rgba(232,163,61,0.25), rgba(58,24,32,0.55)),
radial-gradient(circle at 30% 30%, #E8A33D, #C75B33 50%, #9B2417 100%);
}
.art-card-1::after{
content: '';
position: absolute; inset: 0;
background:
/* talavera tile dots */
radial-gradient(circle at 25% 25%, var(--cobalt) 0 8px, transparent 8px),
radial-gradient(circle at 75% 75%, var(--cobalt) 0 8px, transparent 8px),
radial-gradient(circle at 75% 25%, var(--marigold) 0 6px, transparent 6px),
radial-gradient(circle at 25% 75%, var(--marigold) 0 6px, transparent 6px),
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0 20%, transparent 20%);
opacity: 0.6;
mix-blend-mode: overlay;
}
.art-card-2{
bottom: 0; right: 0;
width: 60%; height: 60%;
background:
/* talavera-inspired tile pattern in cream + cobalt + chili */
repeating-conic-gradient(from 45deg,
var(--ivory) 0deg 30deg,
var(--cream) 30deg 60deg,
var(--ivory) 60deg 90deg),
var(--ivory);
border: 1px solid var(--line);
}
.art-card-2::after{
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 30%, var(--cobalt) 0 8px, transparent 9px),
radial-gradient(circle at 70% 30%, var(--chili) 0 6px, transparent 7px),
radial-gradient(circle at 30% 70%, var(--chili) 0 6px, transparent 7px),
radial-gradient(circle at 70% 70%, var(--cobalt) 0 8px, transparent 9px),
radial-gradient(circle at 50% 50%, var(--marigold) 0 14px, transparent 15px);
opacity: 0.8;
}
.art-badge{
position: absolute;
top: 42%; left: 50%;
transform: translate(-50%, -50%);
width: 130px; height: 130px;
border-radius: 50%;
background: var(--ivory);
color: var(--plum);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
z-index: 2;
border: 2px solid var(--marigold);
}
.art-badge .script{ font-size: 1.6rem; line-height: 1; color: var(--chili); }
.art-badge strong{ font-family: var(--serif); font-size: 1.7rem; font-weight: 600; margin-top: 4px; color: var(--plum); }
/* =========================================================
PILLARS
========================================================= */
.pillars{
background:
linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
padding-top: 0;
}
.pillar-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.pillar{
position: relative;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 40px 4px 8px;
text-align: left;
transition: border-color .4s ease;
box-shadow: none;
}
.pillar:hover{
border-top-color: var(--gold);
transform: none;
box-shadow: none;
}
.pillar-num{
display: block;
font-family: var(--display);
font-size: 0.78rem;
letter-spacing: 0.3em;
color: var(--gold-deep);
margin-bottom: 24px;
}
.pillar h3{
font-family: var(--display);
font-size: 1.7rem;
line-height: 1.15;
margin: 0 0 12px;
color: var(--plum);
font-weight: 400;
}
.pillar p{
color: var(--muted);
font-size: 0.98rem;
line-height: 1.55;
margin: 0;
max-width: 36ch;
}
/* =========================================================
MENU
========================================================= */
.menu-section{
background:
radial-gradient(circle at 10% 0%, rgba(236,16,127,0.10), transparent 40%),
radial-gradient(circle at 90% 100%, rgba(212,175,55,0.10), transparent 40%),
var(--rosa-blush);
position: relative;
/* `clip` instead of `hidden` so .menu-toolbar inside can still use position: sticky */
overflow: clip;
}
@supports not (overflow: clip){
.menu-section{ overflow: hidden; }
}
.menu-section::before{
content: '';
position: absolute;
top: -1px; left: 0; right: 0; height: 60px;
background: linear-gradient(180deg, var(--ivory), transparent);
pointer-events: none;
}
/* tile motif corners */
.menu-section::after{
content: '';
position: absolute;
top: 80px; right: -40px;
width: 200px; height: 200px;
border-radius: 50%;
background:
repeating-conic-gradient(from 0deg,
transparent 0deg 22deg,
var(--marigold) 22deg 23deg,
transparent 23deg 45deg);
opacity: 0.18;
pointer-events: none;
}
.section-head{ text-align: center; max-width: 720px; margin: 0 auto 60px; }
.menu-tabs{
display: flex;
justify-content: center;
gap: 6px;
margin-bottom: 50px;
flex-wrap: wrap;
background: #fff;
padding: 8px;
border-radius: 999px;
width: fit-content;
margin-left: auto;
margin-right: auto;
border: 1px solid var(--rose-100);
box-shadow: var(--shadow-sm);
}
.menu-tab{
border: 0;
background: transparent;
padding: 12px 26px;
border-radius: 999px;
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
transition: all .3s ease;
}
.menu-tab:hover{ color: var(--plum); }
.menu-tab.active{
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
color: #fff;
box-shadow: 0 8px 20px -8px rgba(236,16,127,0.6);
}
.menu-panels{ position: relative; }
.menu-panel{ display: none; animation: fadeUp .55s ease both; }
.menu-panel.active{ display: block; }
.menu-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px 64px;
max-width: 980px;
margin: 0 auto;
}
.dish{ position: relative; }
.dish-head{
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 6px;
}
.dish-head h4{
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dish-head::after{
content: '';
flex: 1;
border-bottom: 1px dotted var(--rose-200);
position: relative;
top: -4px;
}
.dish-head .price{
font-family: var(--serif);
font-size: 1.25rem;
color: var(--rosa);
white-space: nowrap;
font-weight: 600;
}
.dish-head .price::before{
content: '$';
font-size: 0.75em;
color: var(--gold);
margin-right: 1px;
vertical-align: super;
}
.dish p{
color: var(--muted);
font-size: 0.95rem;
margin: 0;
font-style: italic;
}
.menu-foot{
text-align: center;
margin-top: 60px;
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
}
/* =========================================================
CELEBRATION CHIPS (booking form)
========================================================= */
.celebration-field{
margin-bottom: 16px;
}
.celebration-label{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--plum);
margin: 0 0 12px;
}
.celebration-label .muted{
font-weight: 400;
text-transform: none;
letter-spacing: 0.02em;
font-size: 0.78rem;
color: var(--muted);
}
.celebration-emoji{
font-size: 1.1rem;
line-height: 1;
}
.celebration-options{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.celebrate-chip{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px 12px;
background: #fff;
border: 1.5px solid var(--line);
border-radius: 14px;
cursor: var(--taco-cursor);
transition: all .25s ease;
user-select: none;
}
.celebrate-chip:hover{
border-color: var(--rosa-200);
background: var(--rosa-blush);
transform: translateY(-2px);
}
.celebrate-chip input{
position: absolute;
inset: 0;
opacity: 0;
cursor: var(--taco-cursor);
}
.celebrate-chip.is-checked{
border-color: var(--rosa);
background: linear-gradient(135deg, rgba(236,16,127,0.08), rgba(236,16,127,0.02));
box-shadow: 0 0 0 3px rgba(236,16,127,0.15);
}
.celebrate-chip.is-checked::after{
content: '✓';
position: absolute;
top: 8px;
right: 10px;
width: 18px;
height: 18px;
background: var(--rosa);
color: #fff;
border-radius: 50%;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.chip-icon{
font-size: 1.7rem;
line-height: 1;
margin-bottom: 6px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}
.chip-label{
font-family: var(--display);
font-size: 0.98rem;
color: var(--plum);
line-height: 1.1;
}
.chip-extra{
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--muted);
margin-top: 4px;
}
/* premium mariachi tier */
.celebrate-premium .chip-extra{
color: var(--gold-deep);
font-weight: 600;
}
.celebrate-premium.is-checked{
border-color: var(--gold);
background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(212,175,55,0.02));
box-shadow: 0 0 0 3px rgba(212,175,55,0.22);
}
.celebrate-premium.is-checked::after{
background: var(--gold-deep);
}
@media (max-width: 720px){
.celebration-options{
grid-template-columns: 1fr;
gap: 8px;
}
.celebrate-chip{
flex-direction: row;
text-align: left;
padding: 12px 14px;
gap: 12px;
}
.chip-icon{ font-size: 1.5rem; margin: 0; }
.chip-label{ font-size: 0.95rem; }
.chip-extra{ margin: 0; flex: 1; text-align: right; }
}
/* =========================================================
PROMO CODE FIELD (booking form) — collapsible
========================================================= */
.promo-block{
margin-bottom: 14px;
}
.promo-toggle{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--plum);
font-family: var(--sans);
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.02em;
cursor: var(--taco-cursor);
transition: all .25s ease;
}
.promo-toggle:hover{
border-color: var(--gold);
color: var(--plum);
background: rgba(212,175,55,0.06);
}
.promo-toggle-icon{ font-size: 1.05rem; line-height: 1; }
.promo-toggle-chev{
margin-left: 2px;
font-size: 1.1rem;
font-weight: 400;
color: var(--muted);
line-height: 1;
transition: transform .3s ease;
display: inline-block;
}
.promo-toggle[aria-expanded="true"] .promo-toggle-chev{
transform: rotate(45deg);
}
.promo-panel{
margin-top: 14px;
animation: panelOpen .3s ease;
}
@keyframes panelOpen{
from{ opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.promo-input-wrap{
position: relative;
}
.promo-prefix{
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 1.1rem;
line-height: 1;
pointer-events: none;
z-index: 1;
}
.promo-input-wrap input{
padding-left: 44px !important;
padding-right: 44px !important;
font-family: var(--display);
font-size: 1.05rem !important;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.promo-input-wrap input::placeholder{
text-transform: none;
letter-spacing: 0;
font-family: var(--sans);
font-size: 0.9rem;
color: var(--muted);
}
.promo-status{
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%) scale(0);
width: 24px;
height: 24px;
border-radius: 50%;
background: #4caf50;
color: #fff;
font-size: 0.78rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: transform .35s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
.promo-input-wrap.valid .promo-status{
transform: translateY(-50%) scale(1);
}
.promo-input-wrap.valid input{
border-color: #4caf50 !important;
box-shadow: 0 0 0 4px rgba(76,175,80,0.16) !important;
}
.promo-feedback{
margin: 8px 0 0;
font-size: 0.85rem;
min-height: 1.1em;
color: #2e7d32;
font-weight: 500;
font-family: var(--sans);
opacity: 0;
transform: translateY(-4px);
transition: opacity .25s ease, transform .25s ease;
}
.promo-feedback.show{
opacity: 1;
transform: translateY(0);
}
/* =========================================================
FULL-VIEWPORT PIÑATA EXPLOSION
========================================================= */
.boom-layer{
position: fixed;
inset: 0;
pointer-events: none;
z-index: 80;
overflow: hidden;
}
.boom-piece{
position: absolute;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%);
animation: boomFly var(--d, 1.8s) cubic-bezier(.2,.7,.3,1) forwards;
--dx: 0px;
--dy: 0px;
--dr: 360deg;
filter: drop-shadow(0 6px 14px rgba(23,10,16,0.35));
}
@keyframes boomFly{
0% { transform: translate(-50%, -50%) scale(0.3) rotate(0); opacity: 0; }
10% { transform: translate(-50%, -50%) scale(1.3) rotate(20deg); opacity: 1; }
90% { opacity: 1; }
100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.85) rotate(var(--dr)); opacity: 0; }
}
/* screen flash radiating from piñata center */
.screen-flash{
position: fixed;
inset: 0;
z-index: 79;
pointer-events: none;
background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),
rgba(244,211,94,0.6) 0%,
rgba(236,16,127,0.4) 25%,
rgba(236,16,127,0.15) 45%,
transparent 65%);
animation: flashFade 0.8s ease-out forwards;
}
@keyframes flashFade{
0% { opacity: 0; }
18% { opacity: 1; }
100% { opacity: 0; }
}
/* radiating gold rays from the impact */
.boom-rays{
position: fixed;
pointer-events: none;
z-index: 78;
width: 6px;
height: 6px;
transform: translate(-50%, -50%);
}
.boom-rays span{
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 80px;
background: linear-gradient(180deg, rgba(244,211,94,1) 0%, rgba(236,16,127,0.6) 50%, transparent 100%);
transform-origin: top center;
border-radius: 4px;
opacity: 0;
animation: rayBurst 0.95s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes rayBurst{
0% { transform: translate(-50%, 0) rotate(var(--a)) scaleY(0); opacity: 0; }
15% { opacity: 1; }
100% { transform: translate(-50%, 0) rotate(var(--a)) scaleY(4) translateY(-60px); opacity: 0; }
}
/* screen shake on break */
@keyframes screenShake{
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-7px, -3px); }
20% { transform: translate(7px, 3px); }
30% { transform: translate(-6px, 2px); }
40% { transform: translate(6px, -2px); }
50% { transform: translate(-4px, 3px); }
60% { transform: translate(4px, -3px); }
70% { transform: translate(-2px, 1px); }
80% { transform: translate(2px, -1px); }
90% { transform: translate(-1px, 0); }
}
body.boom-shake{ animation: screenShake 0.7s ease; }
/* =========================================================
BOOKING — Channel chooser, time pills, open-now, mobile bar
========================================================= */
.page-hero-slim{ min-height: 44vh; }
@media (max-width: 720px){
.page-hero-slim{ min-height: 38vh; padding-top: 90px; padding-bottom: 30px; }
.page-hero-slim .page-title{ font-size: clamp(2.2rem, 9vw, 3.4rem); }
.open-now{ font-size: 0.7rem; letter-spacing: 0.18em; padding: 7px 14px; gap: 8px; }
}
.open-now{
display: inline-flex;
align-items: center;
gap: 10px;
margin: 18px auto 0;
padding: 8px 18px;
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
border-radius: 999px;
background: rgba(23,10,16,0.5);
border: 1px solid rgba(244,211,94,0.4);
color: var(--ivory);
backdrop-filter: blur(8px);
}
.open-now.open { color: #6FCF5C; border-color: rgba(111,207,92,0.5); }
.open-now.closed { color: var(--rosa-bright); border-color: rgba(255,46,160,0.5); }
.channel-section{
background: var(--ivory);
padding: 60px 0 20px;
}
.channel-prompt{
text-align: center;
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 26px;
}
.channel-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 880px;
margin: 0 auto;
}
.channel-card{
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 28px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: center;
color: var(--plum);
box-shadow: var(--shadow-sm);
transition: all .3s ease;
min-height: 130px;
justify-content: center;
}
.channel-card:hover{
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--rosa-200);
}
.channel-icon{
font-size: 1.9rem;
margin-bottom: 6px;
line-height: 1;
}
.channel-card strong{
font-family: var(--display);
font-size: 1.2rem;
font-weight: 400;
}
.channel-card span:not(.channel-icon){
color: var(--muted);
font-size: 0.85rem;
}
.channel-card.primary{
background: linear-gradient(135deg, var(--rosa) 0%, var(--rosa-deep) 100%);
color: #fff;
border-color: var(--rosa-deep);
box-shadow: 0 14px 30px -10px rgba(236,16,127,0.55);
}
.channel-card.primary strong{ color: #fff; }
.channel-card.primary span:not(.channel-icon){ color: rgba(255,255,255,0.85); }
/* Time pills (tappable replacement for time dropdown) */
.time-pills{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.time-pill{
flex: 1 1 0;
min-width: 70px;
min-height: 50px;
padding: 12px 8px;
background: #fff;
border: 1.5px solid var(--line);
border-radius: 12px;
font-family: var(--display);
font-size: 1rem;
color: var(--plum);
transition: all .2s ease;
cursor: var(--taco-cursor);
}
.time-pill:hover{
border-color: var(--rosa-200);
background: var(--rosa-blush);
}
.time-pill.active{
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
border-color: var(--rosa-deep);
color: #fff;
box-shadow: 0 8px 20px -6px rgba(236,16,127,0.5);
}
/* Sticky mobile action bar (only on small screens) */
.mobile-action-bar{
display: none;
position: fixed;
bottom: 0;
left: 0; right: 0;
z-index: 55;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
box-shadow: 0 -8px 24px rgba(58,24,40,0.08);
padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
gap: 6px;
box-sizing: border-box;
}
.mab-btn{
flex: 1 1 0;
min-width: 0; /* allow shrink */
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 4px;
border-radius: 12px;
background: #fff;
color: var(--plum);
border: 1px solid var(--line);
text-decoration: none;
overflow: hidden;
}
.mab-icon{ font-size: 1.25rem; line-height: 1; }
.mab-label{
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.mab-primary{
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
color: #fff;
border-color: var(--rosa-deep);
box-shadow: 0 8px 18px -6px rgba(236,16,127,0.5);
}
/* very narrow screens: hide labels, show only icons */
@media (max-width: 360px){
.mab-btn{ padding: 12px 4px; }
.mab-icon{ font-size: 1.5rem; }
.mab-label{ display: none; }
}
/* mobile booking-specific adjustments */
@media (max-width: 720px){
/* tighter side gutters for narrow phones */
.container{ padding: 0 18px; }
.channel-section{ padding: 32px 0 8px; }
.channel-grid{
grid-template-columns: 1fr;
gap: 8px;
}
.channel-card{
flex-direction: row;
min-height: 58px;
padding: 12px 16px;
text-align: left;
gap: 12px;
}
.channel-icon{ font-size: 1.4rem; margin: 0; }
.channel-card strong{ font-size: 0.95rem; }
.channel-card span:not(.channel-icon){ font-size: 0.78rem; }
/* booking form/visit card: stack with less padding */
.reserve-section .two-col{ gap: 32px; }
.reserve-form{ margin-top: 18px; }
.field-row{ gap: 10px; }
.field{ margin-bottom: 12px; }
.visit-card{ padding: 26px 22px; }
.visit-card h3{ font-size: 1.6rem; margin-bottom: 14px; padding-bottom: 14px; }
.mobile-action-bar{ display: flex; }
body{ padding-bottom: 78px; }
/* keep iOS-safe font size, but make the field box itself compact */
.field input,
.field select,
.field textarea{
font-size: 16px !important;
padding: 9px 11px;
min-height: 42px;
}
.field textarea{ min-height: 56px; }
.time-pill{ min-height: 42px; font-size: 1rem; }
.reserve-form .btn{ min-height: 48px; }
.reserve-form .btn-block{ font-size: 0.82rem; }
/* compact vertical spacing */
.reserve-form .field{ margin-bottom: 8px; }
.reserve-form .field-row{ gap: 8px; margin-bottom: 8px; }
.reserve-form .field label{
font-size: 0.62rem;
letter-spacing: 0.16em;
margin-bottom: 3px;
}
body.page-booking .reserve-form,
.reserve-section .reserve-text > .reserve-form{
padding: 14px 12px 16px;
}
/* celebration chips: shorter, lighter */
.celebration-field{ margin-top: 4px; margin-bottom: 8px; }
.celebration-label{ font-size: 0.84rem; margin-bottom: 6px; }
.celebrate-chip{ padding: 7px 10px; gap: 8px; }
.chip-icon{ font-size: 1.1rem; }
.chip-label{ font-size: 0.84rem; }
.chip-extra{ font-size: 0.66rem; }
/* promo block tighter */
.promo-toggle{ padding: 9px 11px; font-size: 0.8rem; }
.promo-panel{ margin-top: 6px; }
}
/* MOBILE: redesign each field as a single tappable iOS-list row
(label left, value right, hairline divider, native picker on tap). */
@media (max-width: 720px){
/* unstack the paired rows so each field is its own row */
.reserve-form .field-row{
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
margin: 0 !important;
}
.reserve-form,
.reserve-form .field,
.reserve-form .field input,
.reserve-form .field select,
.reserve-form .field textarea{
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* the form card itself becomes a tight rounded list container */
body.page-booking .reserve-form,
.reserve-section .reserve-text > .reserve-form{
padding: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 12px 32px -22px rgba(58,24,40,0.15);
overflow: hidden;
}
/* step header / indicator get their own padding outside the rows */
.rf-indicator{ margin: 14px 14px 12px !important; }
.rf-step-title{ margin: 0 16px 6px !important; }
.rf-step-hint{ margin-left: 6px !important; }
/* fix overflow caused by long mailto link in lead paragraph */
.reserve-section .reserve-text > .lead,
.reserve-section .reserve-text > .lead a{
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
}
/* the lead is already covered above; on phones we don't need it at all,
the page hero + channel cards already tell the user what to do */
.reserve-section .reserve-text > .lead{ display: none; }
/* compact channel-chooser cards so the page hero + cards don't push the form down */
.channel-card{ min-height: 48px !important; padding: 8px 14px !important; }
.channel-card strong{ font-size: 0.9rem !important; }
.channel-card span:not(.channel-icon){ font-size: 0.72rem !important; }
.channel-icon{ font-size: 1.1rem !important; }
/* dramatically tighter rows: label tiny on top, input ~38px tall, total ~56px per field */
.reserve-form .field{
margin-bottom: 6px !important;
}
.reserve-form .field label{
font-size: 0.6rem !important;
letter-spacing: 0.1em !important;
margin-bottom: 2px !important;
color: var(--muted);
}
.reserve-form .field input,
.reserve-form .field select{
font-size: 16px !important;
padding: 7px 10px !important;
min-height: 38px !important;
border-radius: 8px !important;
}
.reserve-form .field textarea{
font-size: 16px !important;
padding: 8px 10px !important;
min-height: 48px !important;
border-radius: 8px !important;
}
/* compact form card, step indicator, title */
body.page-booking .reserve-form,
.reserve-section .reserve-text > .reserve-form{
padding: 10px 12px 12px !important;
border-radius: 14px !important;
}
.rf-indicator{ margin: 0 0 8px !important; }
.rf-indicator li{ font-size: 0.6rem !important; }
.rf-indicator li span{ width: 18px !important; height: 18px !important; font-size: 0.7rem !important; }
.rf-step-title{ font-size: 1.1rem !important; margin: 0 0 8px !important; }
.rf-step-hint{ font-size: 0.62rem !important; }
.rf-nav{ margin-top: 6px !important; }
.rf-back{ padding: 9px 12px !important; font-size: 0.78rem !important; }
.reserve-form .btn{ min-height: 42px !important; font-size: 0.8rem !important; }
/* nav buttons sit BELOW the card, full-width pink Next */
.rf-nav{
padding: 14px 0 0;
}
/* hide the soft inner padding of step that we used to have */
.rf-step{ padding: 0 !important; }
}
/* =========================================================
BOOKING FORM · MOBILE WIZARD (3 steps)
Desktop ignores the .rf-step wrappers entirely.
========================================================= */
.rf-indicator,
.rf-step-title,
.rf-step-hint,
.rf-back,
.rf-next{ display: none; } /* hidden on desktop */
.rf-step{ display: contents; } /* desktop: wrappers vanish, fields flow naturally */
.rf-nav{ display: contents; }
.rf-submit{ display: block; }
@media (max-width: 720px){
/* turn the wrappers back on */
.rf-step{ display: none; }
.rf-step.is-active{ display: block; animation: rfFade .3s ease both; }
@keyframes rfFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.rf-nav{
display: flex;
gap: 8px;
align-items: center;
margin-top: 4px;
}
.rf-back{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 14px;
background: transparent;
color: var(--plum);
border: 1px solid var(--line);
border-radius: 12px;
font-family: var(--sans);
font-weight: 600;
font-size: 0.82rem;
flex: 0 0 auto;
cursor: pointer;
}
.rf-back[hidden]{ display: none !important; }
.rf-next{ display: block; flex: 1; }
.rf-submit{ display: none; flex: 1; }
/* on the last step, hide Next and show Submit */
.rf-step.is-active[data-step="3"] ~ .rf-nav .rf-next{ display: none; }
.rf-step.is-active[data-step="3"] ~ .rf-nav .rf-submit{ display: block; }
/* step indicator: small pills across the top of the form card */
.rf-indicator{
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.rf-indicator li{
display: flex;
align-items: center;
gap: 6px;
font-family: var(--sans);
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
flex: 1;
min-width: 0;
}
.rf-indicator li::after{
content: "";
flex: 1;
height: 2px;
background: var(--line);
border-radius: 2px;
margin-left: 2px;
}
.rf-indicator li:last-child::after{ display: none; }
.rf-indicator li span{
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--rose-100, #f7d4e2);
color: var(--rosa-deep);
font-weight: 700;
font-size: 0.78rem;
flex-shrink: 0;
}
.rf-indicator li.is-active{ color: var(--plum); }
.rf-indicator li.is-active span{
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
color: #fff;
box-shadow: 0 4px 12px -4px rgba(236,16,127,0.6);
}
.rf-indicator li.is-done span{
background: var(--rosa-deep);
color: #fff;
}
.rf-indicator li b{
font-weight: 700;
/* hide labels on the narrowest phones to keep dots clean */
}
/* step title above the fields */
.rf-step-title{
display: block;
font-family: var(--display);
font-size: 1.35rem;
line-height: 1.15;
color: var(--plum);
margin: 0 0 12px;
}
.rf-step-hint{
display: inline;
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin-left: 8px;
vertical-align: middle;
}
}
@media (max-width: 380px){
.rf-indicator li b{ display: none; }
.rf-step-title{ font-size: 1.2rem; }
}
/* very narrow phones (iPhone SE original, etc.) */
@media (max-width: 380px){
.container{ padding: 0 14px; }
.channel-card{ padding: 10px 14px; }
.visit-card{ padding: 22px 18px; }
/* stack paired form fields on tiny phones — 2-up is too cramped under 380px */
.reserve-form .field-row{
grid-template-columns: 1fr;
gap: 0;
}
}
/* =========================================================
STICKY MOBILE BOOK BAR (single pink CTA, every page except booking)
========================================================= */
.mobile-book-bar{
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 55;
padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
color: #fff;
text-align: center;
text-decoration: none;
font-family: var(--sans);
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.18em;
text-transform: uppercase;
box-shadow: 0 -10px 28px rgba(184,9,94,0.32);
border-top: 1px solid rgba(255,255,255,0.18);
}
.mobile-book-bar:hover,
.mobile-book-bar:focus-visible{
color: #fff;
filter: brightness(1.05);
}
@media (max-width: 720px){
.mobile-book-bar{ display: block; }
body:has(.mobile-book-bar){ padding-bottom: 70px; }
/* push chat launcher above the book bar */
.mobile-book-bar ~ .chat-launcher{
bottom: calc(78px + env(safe-area-inset-bottom));
right: 14px;
width: 50px;
height: 50px;
}
.mobile-book-bar ~ .chat-launcher .chat-launcher-icon{
font-size: 1.5rem;
}
}
/* =========================================================
BOOKING · mobile chat launcher must sit above action bar
========================================================= */
@media (max-width: 720px){
body.page-booking .chat-launcher,
.mobile-action-bar ~ .chat-launcher{
bottom: calc(82px + env(safe-area-inset-bottom));
right: 14px;
width: 50px;
height: 50px;
}
body.page-booking .chat-launcher .chat-launcher-icon,
.mobile-action-bar ~ .chat-launcher .chat-launcher-icon{
font-size: 1.5rem;
}
/* booking form gets a soft card frame on mobile so it feels intentional */
body.page-booking .reserve-form,
.reserve-section .reserve-text > .reserve-form{
background: #fff;
border: 1px solid var(--rose-100);
border-radius: 18px;
padding: 22px 18px 24px;
box-shadow: 0 12px 32px -18px rgba(58,24,40,0.18);
}
/* On mobile the page hero + channel chooser already prompt the user.
Hide the redundant section header and let the form card lead. */
.reserve-section .reserve-text > .eyebrow,
.reserve-section .reserve-text > h2{
display: none;
}
.reserve-section .reserve-text > .lead{
font-size: 0.92rem;
line-height: 1.5;
margin: 0 0 16px;
text-align: center;
color: var(--muted);
}
.reserve-section.section{ padding: 24px 0 60px; }
}
/* =========================================================
CTA STRIP (home page)
========================================================= */
.cta-strip{
padding: 80px 0 100px;
background:
radial-gradient(circle at 20% 50%, rgba(236,16,127,0.08), transparent 50%),
radial-gradient(circle at 80% 50%, rgba(212,175,55,0.08), transparent 50%),
var(--ivory);
}
.cta-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.cta-card{
position: relative;
display: block;
padding: 44px 32px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: center;
transition: all .4s cubic-bezier(.2,.7,.2,1);
overflow: hidden;
color: inherit;
box-shadow: var(--shadow-sm);
}
.cta-card::before{
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--rosa), var(--gold-bright), var(--rosa));
background-size: 200% 100%;
transition: background-position .6s ease;
}
.cta-card:hover{
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: var(--rosa-200);
}
.cta-card:hover::before{ background-position: 100% 0; }
.cta-icon{
font-size: 2.4rem;
display: inline-block;
line-height: 1;
margin-bottom: 14px;
}
.cta-card h3{
font-family: var(--display);
font-size: 1.7rem;
margin: 0 0 8px;
color: var(--plum);
}
.cta-card p{
color: var(--muted);
margin: 0 0 18px;
font-size: 0.95rem;
}
.cta-arrow{
display: inline-block;
font-size: 1.2rem;
color: var(--rosa);
transition: transform .3s ease;
}
.cta-card:hover .cta-arrow{ transform: translateX(6px); }
@media (max-width: 720px){
.cta-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
LIVE NIGHTS (events page)
========================================================= */
.live-nights{
background: linear-gradient(180deg, var(--ivory), var(--cream));
}
.nights-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
max-width: 980px;
margin: 0 auto;
}
.night-card{
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 30px 30px 30px 96px;
box-shadow: var(--shadow-sm);
transition: all .35s ease;
}
.night-card:hover{
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--rosa-200);
}
.night-day{
position: absolute;
top: 30px; left: 24px;
width: 54px; height: 54px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--condensed);
font-size: 1rem;
letter-spacing: 0.08em;
box-shadow: 0 8px 18px -6px rgba(236,16,127,0.5);
border: 2px solid var(--gold);
}
.night-card h3{
font-family: var(--display);
font-size: 1.4rem;
margin: 0 0 4px;
color: var(--plum);
}
.night-when{
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rosa);
margin: 0 0 12px;
}
.night-card p:not(.night-when){
color: var(--muted);
margin: 0;
font-size: 0.95rem;
}
@media (max-width: 720px){
.nights-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
MAP (booking page)
========================================================= */
.map-section{
padding: 0 0 100px;
background: var(--ivory);
text-align: center;
}
.map-frame{
display: block;
width: 100%;
height: 420px;
border: 0;
border-radius: var(--radius);
margin: 0 0 22px;
box-shadow: var(--shadow-md);
filter: saturate(0.95);
}
.map-cta{ margin: 0 auto; }
/* =========================================================
PAGE HERO (non-home pages)
========================================================= */
.page-hero{
position: relative;
min-height: 56vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 160px 20px 80px;
background: var(--noche);
color: var(--ivory);
overflow: hidden;
isolation: isolate;
}
.page-hero-bg{
position: absolute; inset: 0;
z-index: -1;
background:
radial-gradient(ellipse at 50% 60%, rgba(236,16,127,0.28), transparent 55%),
radial-gradient(ellipse at 18% 18%, rgba(212,175,55,0.16), transparent 50%),
radial-gradient(ellipse at 82% 80%, rgba(255,46,160,0.20), transparent 55%),
linear-gradient(180deg, var(--noche) 0%, var(--noche-2) 50%, var(--plum) 100%);
}
.page-hero-content{
position: relative;
z-index: 2;
max-width: 900px;
}
.page-eyebrow{
font-family: var(--sans);
font-size: 0.74rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--gold-bright);
margin: 0 0 18px;
}
.page-title{
font-family: var(--display);
font-size: clamp(3rem, 8vw, 6.5rem);
line-height: 1;
margin: 0 0 18px;
background: linear-gradient(180deg,
#FFEFC8 0%,
var(--gold-bright) 35%,
var(--gold) 60%,
#8A6E18 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 8px 24px rgba(212,175,55,0.4));
}
.page-sub{
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1rem, 1.6vw, 1.25rem);
color: rgba(255,239,200,0.92);
letter-spacing: 0.02em;
margin: 0;
text-shadow: 0 2px 18px rgba(23,10,16,0.6);
}
/* nav active state */
.nav-links a.active{
color: var(--gold) !important;
}
.nav-links a.active::after{
width: 100% !important;
background: var(--gold) !important;
}
.nav.scrolled .nav-links a.active{
color: var(--rosa) !important;
}
.nav.scrolled .nav-links a.active::after{
background: var(--rosa) !important;
}
/* Piñata extras: prize teaser, sparkles, fine print, welcome-back */
.pinata-tease{
margin: 14px auto 0;
font-size: 0.95rem;
color: var(--plum);
background: linear-gradient(90deg, transparent, rgba(212,175,55,0.18), transparent);
padding: 10px 22px;
border-radius: 999px;
display: inline-block;
}
.pinata-tease strong{ color: var(--rosa-deep); }
.tease-gift{ font-size: 1.1em; vertical-align: -2px; margin-right: 6px; }
.stage-sparkle{
position: absolute;
font-size: 1.6rem;
pointer-events: none;
opacity: 0.85;
animation: stageFloat 3s ease-in-out infinite;
filter: drop-shadow(0 4px 8px rgba(58,24,40,0.2));
}
.sparkle-1{ top: 18%; left: 18%; animation-delay: 0s; }
.sparkle-2{ top: 30%; left: 8%; animation-delay: 0.6s; }
.sparkle-3{ top: 60%; left: 14%; animation-delay: 1.2s; }
.sparkle-4{ top: 22%; right: 18%; animation-delay: 0.4s; }
.sparkle-5{ top: 40%; right: 8%; animation-delay: 1s; }
.sparkle-6{ top: 64%; right: 16%; animation-delay: 1.6s; }
@keyframes stageFloat{
0%, 100% { transform: translateY(0) rotate(-5deg); opacity: 0.6; }
50% { transform: translateY(-10px) rotate(5deg); opacity: 1; }
}
@media (max-width: 900px){
.stage-sparkle{ display: none; }
}
.prize-fine{
margin: 22px 0 0;
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--muted);
line-height: 1.5;
}
.pinata-welcome-back{
display: none;
max-width: 560px;
margin: 30px auto 0;
padding: 50px 40px;
background: linear-gradient(180deg, #fff 0%, var(--rosa-blush) 100%);
border: 2px solid var(--gold);
border-radius: var(--radius);
box-shadow: 0 30px 70px -20px rgba(236,16,127,0.4);
text-align: center;
}
.pinata-welcome-back.show{ display: block; }
.pinata-welcome-back h3{ font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--rosa-deep); }
.pinata-welcome-back .prize-text{ color: var(--muted); margin-bottom: 24px; }
/* =========================================================
FULL MENU PAGE (menu.html)
========================================================= */
.menu-specials{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 50px;
}
.ms-card{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 14px;
background: linear-gradient(180deg, #fff, var(--cream));
border: 1px solid var(--line);
border-radius: 14px;
}
.ms-day{
font-family: var(--sans);
font-size: 0.66rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.ms-icon{ font-size: 1.6rem; line-height: 1; margin-bottom: 8px; }
.ms-card strong{
font-family: var(--display);
font-size: 1.05rem;
color: var(--plum);
line-height: 1.15;
margin-bottom: 6px;
}
.ms-price{
font-family: var(--serif);
font-style: italic;
font-size: 0.85rem;
color: var(--rosa-deep);
}
.ms-feature{
background: linear-gradient(180deg, var(--noche), var(--plum));
border-color: var(--gold);
box-shadow: 0 14px 30px -10px rgba(58,24,40,0.4);
}
.ms-feature .ms-day{ color: var(--gold-bright); }
.ms-feature strong{ color: var(--ivory); }
.ms-feature .ms-price{ color: var(--gold-bright); }
/* =========================================================
ROUNDUP DISH (hero photo + flavour list — used for Meat Tacos, Shots)
========================================================= */
.dish-roundup{
display: grid;
grid-template-columns: minmax(280px, 1fr) 1.6fr;
gap: 28px;
background: linear-gradient(180deg, #fff, var(--cream));
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
padding: 0;
margin-top: 14px;
}
.dish-roundup > .dish-img{
width: 100%;
height: 100%;
object-fit: cover;
min-height: 280px;
display: block;
}
.dish-roundup > .dish-body{
padding: 22px 26px;
}
.dish-roundup-lead{
margin: 0 0 14px;
font-family: var(--serif);
font-style: italic;
color: var(--muted);
font-size: 0.95rem;
}
.dish-roundup-list{
list-style: none;
padding: 0;
margin: 0;
columns: 2;
column-gap: 28px;
}
.dish-roundup-list li{
break-inside: avoid;
padding: 8px 0;
font-family: var(--serif);
font-size: 0.94rem;
color: var(--ink);
line-height: 1.45;
}
.dish-roundup-list strong{
display: inline;
font-family: var(--display);
font-size: 1.02rem;
color: var(--plum);
margin-right: 4px;
}
.dish-roundup-list .tag-new{ vertical-align: 1px; }
/* priced variant for Shots: name + price on one line, ingredients below */
.dish-roundup-list-priced li{
display: block;
border-bottom: 1px dashed var(--line);
}
.dish-roundup-list-priced li:last-child{ border-bottom: none; }
.dish-roundup-list-priced strong{ display: inline-block; }
.dish-roundup-list-priced .price{
float: right;
margin-left: 12px;
}
.dish-roundup-list-priced p{
display: block;
clear: both;
margin: 4px 0 0;
font-size: 0.88rem;
color: var(--muted);
font-style: italic;
}
@media (max-width: 820px){
.dish-roundup{ grid-template-columns: 1fr; }
.dish-roundup > .dish-img{ min-height: 240px; max-height: 340px; }
.dish-roundup-list{ columns: 1; }
}
/* =========================================================
SEATING PREFERENCE (booking.html step 4)
========================================================= */
.seat-pref-lead{
margin: -6px 0 14px;
font-family: var(--serif);
font-style: italic;
color: var(--muted);
font-size: 0.95rem;
}
.seat-pref-status{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 16px;
margin-bottom: 14px;
background: var(--cream);
border: 1px dashed var(--rosa);
border-radius: 10px;
min-height: 44px;
}
.seat-pref-selected{
font-family: var(--sans);
font-size: 0.92rem;
color: var(--plum);
}
.seat-pref-selected.has-pick{ color: var(--rosa-deep); font-weight: 600; }
.seat-pref-clear{
background: transparent;
border: 1px solid var(--rosa);
color: var(--rosa-deep);
padding: 4px 12px;
border-radius: 999px;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
.seat-pref-clear:hover{ background: var(--rosa); color: #fff; }
.seat-pref-svg-wrap{
border: 1px solid var(--line);
border-radius: 14px;
background: linear-gradient(180deg, #fff, var(--cream));
padding: 10px;
overflow: hidden;
}
.success-pref-block{
margin: 28px 0 22px;
padding: 22px 0 0;
border-top: 1px dashed var(--rosa);
text-align: left;
}
.success-pref-title{
font-family: var(--display);
font-size: 1.25rem;
color: var(--plum);
margin: 0 0 6px;
}
.success-pref-sub{
margin: 0 0 14px;
font-family: var(--serif);
font-style: italic;
color: var(--muted);
font-size: 0.92rem;
}
.success-pref{
margin: 14px 0;
padding: 12px 16px;
background: rgba(236,16,127,0.08);
border-left: 3px solid var(--rosa);
border-radius: 6px;
font-family: var(--serif);
font-size: 0.95rem;
color: var(--plum);
}
#seatPrefPlan{ display: block; width: 100%; height: auto; max-height: 560px; }
/* preference table glyphs — reuse the same color language */
#seatPrefTables .tbl{ cursor: pointer; }
#seatPrefTables .tbl rect,
#seatPrefTables .tbl circle{
fill: #FFFBF6;
stroke: var(--plum);
stroke-width: 1.6;
transition: fill 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
}
#seatPrefTables .tbl-label{
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
fill: var(--plum);
pointer-events: none;
}
#seatPrefTables .tbl-seats{
font-family: 'Inter', sans-serif;
font-size: 10px;
fill: var(--muted);
pointer-events: none;
}
#seatPrefTables .tbl:hover rect,
#seatPrefTables .tbl:hover circle{
fill: #FBE9A0;
stroke-width: 2.4;
}
#seatPrefTables .tbl-picked rect,
#seatPrefTables .tbl-picked circle{
fill: #F1C6D2;
stroke: var(--rosa-deep);
stroke-width: 3;
filter: drop-shadow(0 0 8px rgba(236,16,127,0.35));
}
#seatPrefTables .tbl-toosmall{ cursor: not-allowed; pointer-events: none; }
#seatPrefTables .tbl-toosmall rect,
#seatPrefTables .tbl-toosmall circle{
fill: #E5E0DC !important;
stroke: #B8AEA7 !important;
opacity: 0.55;
}
#seatPrefTables .tbl-toosmall .tbl-label,
#seatPrefTables .tbl-toosmall .tbl-seats{ opacity: 0.5; }
.seat-pref-hint{
margin: -6px 0 12px;
font-size: 0.85rem;
font-style: italic;
}
.seat-pref-hint:empty{ display: none; }
/* =========================================================
LIVE TABLE BOOKING (booking-table.html — experimental)
========================================================= */
.floor-section{ padding-top: 30px; }
.floor-toolbar{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 24px;
margin-bottom: 18px;
padding: 16px 20px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 14px;
}
.floor-date-pick{ display: flex; align-items: center; gap: 10px; }
.floor-date-pick strong{
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--plum);
}
.floor-date-pick input[type=date]{
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--sans);
font-size: 0.95rem;
background: #fff;
}
.floor-legend{ display: flex; flex-wrap: wrap; gap: 14px; flex: 1; }
.lg-chip{
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--sans);
font-size: 0.78rem;
color: var(--plum);
}
.lg-dot{
width: 10px; height: 10px; border-radius: 3px;
display: inline-block;
border: 1px solid rgba(0,0,0,0.1);
}
.lg-free .lg-dot{ background: #C7E8C0; border-color: #6AAE5B; }
.lg-partial .lg-dot{ background: #F4D35E; border-color: #BFA133; }
.lg-booked .lg-dot{ background: #E8B5C5; border-color: #B8095E; }
.lg-blocked .lg-dot{ background: #888; border-color: #444; }
.floor-note{ margin: 0; flex-basis: 100%; font-size: 0.85rem; }
.floor-wrap{
margin-bottom: 24px;
border: 1px solid var(--line);
border-radius: 18px;
background: linear-gradient(180deg, #fff, var(--cream));
padding: 14px;
overflow: hidden;
}
#floorPlan{
display: block;
width: 100%;
height: auto;
max-height: 720px;
}
/* table glyphs */
.tbl{ cursor: pointer; transition: opacity 0.15s ease; }
.tbl rect, .tbl circle{
stroke-width: 1.8;
transition: fill 0.2s ease, stroke 0.2s ease, transform 0.15s ease;
}
.tbl .tbl-label{
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
fill: var(--plum);
letter-spacing: 1px;
pointer-events: none;
}
.tbl .tbl-seats{
font-family: 'Inter', sans-serif;
font-size: 10px;
fill: var(--muted);
pointer-events: none;
}
.tbl-free rect, .tbl-free circle{
fill: #DFF1D9;
stroke: #6AAE5B;
}
.tbl-partial rect, .tbl-partial circle{
fill: #FBE9A0;
stroke: #BFA133;
}
.tbl-booked rect, .tbl-booked circle{
fill: #F1C6D2;
stroke: #B8095E;
}
.tbl-blocked rect, .tbl-blocked circle{
fill: #BBB;
stroke: #555;
opacity: 0.7;
}
.tbl:hover rect, .tbl:hover circle{
stroke-width: 3;
filter: drop-shadow(0 2px 6px rgba(58,24,40,0.25));
}
.tbl-selected rect, .tbl-selected circle{
stroke: #EC107F !important;
stroke-width: 3.5;
filter: drop-shadow(0 0 10px rgba(236,16,127,0.45));
}
.tbl:focus{ outline: none; }
.tbl:focus rect, .tbl:focus circle{
stroke-width: 3.5;
}
/* table panel (slot picker) */
.table-panel{
background: linear-gradient(180deg, var(--noche), var(--plum));
color: var(--ivory);
border: 1px solid var(--gold);
border-radius: 16px;
padding: 22px 24px;
margin-bottom: 22px;
box-shadow: 0 18px 36px -14px rgba(58,24,40,0.4);
}
.tp-head{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 18px;
}
.tp-eyebrow{
margin: 0;
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-bright);
}
.tp-title{
font-family: var(--display);
font-size: clamp(1.4rem, 2.6vw, 1.8rem);
color: var(--ivory);
margin: 4px 0 2px;
}
.tp-meta{
margin: 0;
font-family: var(--serif);
font-size: 0.95rem;
color: rgba(255,251,246,0.78);
}
.tp-close{
background: transparent;
border: 1px solid rgba(244,211,94,0.45);
color: var(--gold-bright);
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
line-height: 1;
}
.tp-close:hover{ background: rgba(244,211,94,0.12); }
.tp-section-label{
margin: 0 0 10px;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-bright);
}
.tp-slots{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
.tp-slot-group{
grid-column: 1 / -1;
margin: 14px 0 0;
font-family: var(--sans);
font-size: 0.68rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-bright);
border-top: 1px dashed rgba(244,211,94,0.25);
padding-top: 12px;
}
.tp-slot-group:first-child{ margin-top: 0; border-top: none; padding-top: 0; }
.tp-slot{
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 12px;
background: rgba(255,251,246,0.07);
border: 1px solid rgba(244,211,94,0.35);
border-radius: 12px;
color: var(--ivory);
font-family: var(--serif);
font-size: 1.05rem;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.tp-slot:hover:not(:disabled){
background: rgba(244,211,94,0.18);
border-color: var(--gold-bright);
}
.tp-slot em{
font-style: normal;
font-family: var(--sans);
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,251,246,0.55);
}
.tp-slot.is-taken{
cursor: not-allowed;
opacity: 0.45;
background: transparent;
border-style: dashed;
}
/* booking form (table flow) */
.table-form-wrap{ margin-bottom: 30px; }
.table-reserve-form{ padding: 26px 24px; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; }
.tbf-summary{
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 18px;
padding: 12px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
}
.tbf-badge{
font-family: var(--display);
font-size: 1.05rem;
color: var(--plum);
}
.tbf-edit{
background: transparent;
border: 1px solid var(--rosa);
color: var(--rosa-deep);
padding: 6px 14px;
border-radius: 999px;
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
.tbf-edit:hover{ background: var(--rosa); color: #fff; }
.tbf-confirm{
margin: 16px 0 0;
padding: 14px 16px;
background: #DFF1D9;
border: 1px solid #6AAE5B;
border-radius: 10px;
color: #2E5A23;
font-family: var(--serif);
font-size: 0.98rem;
}
.floor-disclaimer{
font-size: 0.82rem;
font-style: italic;
text-align: center;
margin: 24px auto 0;
max-width: 640px;
}
@media (max-width: 640px){
.floor-toolbar{ padding: 14px 16px; }
.table-panel{ padding: 18px; }
.tp-slots{ grid-template-columns: 1fr 1fr; }
}
/* HAPPY HOUR SCHEDULE */
.happy-hour{
margin: 0 0 50px;
padding: 24px 26px;
background: linear-gradient(180deg, var(--noche), var(--plum));
border: 1px solid var(--gold);
border-radius: 18px;
color: var(--ivory);
box-shadow: 0 18px 36px -14px rgba(58,24,40,0.4);
}
.hh-head{
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.hh-eyebrow{
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-bright);
}
.hh-title{
font-family: var(--display);
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
color: var(--ivory);
margin: 0;
}
.hh-windows{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.hh-window{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 14px 16px;
background: rgba(255, 251, 246, 0.06);
border: 1px solid rgba(244, 211, 94, 0.25);
border-radius: 12px;
}
.hh-when{
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-bright);
}
.hh-time{
font-family: var(--serif);
font-size: 1.02rem;
color: var(--ivory);
}
.hh-window-accent{
background: linear-gradient(135deg, rgba(244,211,94,0.18), rgba(244,211,94,0.05));
border-color: rgba(244, 211, 94, 0.55);
}
.hh-extra{
margin: 16px 0 0;
font-family: var(--serif);
font-style: italic;
font-size: 0.92rem;
color: rgba(255, 251, 246, 0.85);
}
.hh-extra strong{
font-style: normal;
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-bright);
margin-right: 8px;
}
@media (max-width: 860px){
.hh-windows{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
.hh-windows{ grid-template-columns: 1fr; }
.happy-hour{ padding: 20px 18px; }
}
/* STICKY MENU TOOLBAR */
.menu-toolbar{
position: sticky;
top: 76px; /* below site nav */
z-index: 30;
margin: 0 -28px 40px; /* full-bleed within container */
padding: 14px 28px 12px;
background: rgba(255, 251, 246, 0.94);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
background 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}
/* applied via IntersectionObserver when the toolbar locks at the top */
.menu-toolbar.is-stuck{
padding: 10px 28px 8px;
background: rgba(255, 251, 246, 0.85);
border-bottom-color: transparent;
box-shadow:
0 6px 20px -8px rgba(58, 24, 40, 0.18),
0 2px 4px -1px rgba(58, 24, 40, 0.08);
}
.menu-toolbar.is-stuck .menu-tools{
margin-bottom: 8px;
transition: margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toolbar.is-stuck .menu-search input{
height: 38px;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toolbar.is-stuck .mf-chip{
padding-top: 6px;
padding-bottom: 6px;
transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toolbar.is-stuck .menu-jump{
padding-top: 2px;
padding-bottom: 2px;
transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toolbar .menu-tools,
.menu-toolbar .menu-search input,
.menu-toolbar .mf-chip,
.menu-toolbar .menu-jump{
transition: margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-tools{
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
flex-wrap: wrap;
}
/* search input */
.menu-search{
position: relative;
flex: 1 1 240px;
min-width: 220px;
display: flex;
align-items: center;
}
.menu-search svg{
position: absolute;
left: 14px;
color: var(--muted);
pointer-events: none;
}
.menu-search input{
width: 100%;
height: 44px;
padding: 0 38px 0 42px;
font-family: var(--sans);
font-size: 0.95rem;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink);
outline: none;
transition: all .25s ease;
}
.menu-search input:focus{
border-color: var(--rosa-200);
box-shadow: 0 0 0 4px rgba(236,16,127,0.12);
}
.menu-search-clear{
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border: 0;
background: var(--line);
color: var(--plum);
border-radius: 50%;
font-size: 0.7rem;
display: none;
align-items: center;
justify-content: center;
}
.menu-search-clear:hover{ background: var(--rosa); color: #fff; }
.menu-toolbar.has-query .menu-search-clear{ display: inline-flex; }
/* filter chips */
.menu-filters{
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.mf-chip{
font-family: var(--sans);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.06em;
padding: 9px 14px;
background: #fff;
color: var(--plum);
border: 1px solid var(--line);
border-radius: 999px;
transition: all .25s ease;
white-space: nowrap;
}
.mf-chip:hover{ border-color: var(--rosa-200); background: var(--rosa-blush); }
.mf-chip.active{
background: var(--rosa);
color: #fff;
border-color: var(--rosa);
box-shadow: 0 4px 12px -2px rgba(236,16,127,0.4);
}
/* horizontal-scrolling jump nav */
.menu-jump{
display: flex;
gap: 4px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0 -28px;
padding: 0 28px 4px;
}
.menu-jump::-webkit-scrollbar{ display: none; }
.menu-jump a{
font-family: var(--sans);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
padding: 10px 14px;
border-radius: 8px;
transition: all .2s ease;
white-space: nowrap;
scroll-snap-align: start;
border-bottom: 2px solid transparent;
}
.menu-jump a:hover{ color: var(--plum); }
.menu-jump a.active{
color: var(--rosa);
border-bottom-color: var(--rosa);
background: rgba(236,16,127,0.05);
}
/* empty-state when search returns nothing */
.menu-empty{
text-align: center;
margin: 16px 0 0;
padding: 12px;
background: var(--rosa-blush);
border-radius: 10px;
font-size: 0.9rem;
color: var(--plum);
}
.menu-empty strong{ display: block; margin-bottom: 4px; }
.menu-empty a{
color: var(--rosa-deep);
text-decoration: underline;
font-weight: 600;
}
/* hide categories with no matches */
.menu-cat.hidden{ display: none; }
.menu-subcat.hidden{ display: none; }
.dish.hidden{ display: none; }
/* category section */
.menu-cat{
margin-bottom: 70px;
scroll-margin-top: 110px;
}
.cat-heading{
font-family: var(--display);
font-size: clamp(1.7rem, 3vw, 2.4rem);
color: var(--plum);
margin: 0 0 4px;
display: inline-flex;
align-items: baseline;
gap: 10px;
padding-bottom: 8px;
border-bottom: 2px solid var(--rosa);
}
.cat-heading em{ font-style: italic; color: var(--rosa); }
.cat-heading-spaced{ margin-top: 50px; }
.cat-emoji{ font-size: 0.7em; }
.cat-sub{
font-family: var(--sans);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--muted);
margin: 8px 0 24px;
}
.menu-grid-single{ grid-template-columns: 1fr !important; max-width: 720px; }
/* dish styling additions */
.dish-feature{
background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(236,16,127,0.04));
padding: 18px 22px;
border-radius: 12px;
border: 1px solid rgba(212,175,55,0.25);
}
.tag-rec{
display: inline-block;
margin-left: 8px;
font-family: var(--sans);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
background: rgba(212,175,55,0.18);
padding: 3px 8px;
border-radius: 999px;
vertical-align: 3px;
}
.tag-new{
display: inline-block;
margin-left: 8px;
font-family: var(--sans);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(135deg, var(--rosa-bright), var(--rosa));
padding: 3px 8px;
border-radius: 999px;
vertical-align: 3px;
box-shadow: 0 0 8px rgba(255,46,160,0.35);
}
.tag-veg{
display: inline-block;
margin-left: 6px;
font-family: var(--sans);
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--jade);
background: rgba(76,139,90,0.12);
padding: 2px 6px;
border-radius: 4px;
vertical-align: 3px;
}
.dish-options{
margin-top: 10px !important;
padding: 12px 14px;
background: rgba(58,24,40,0.04);
border-radius: 8px;
font-size: 0.88rem !important;
font-style: normal !important;
line-height: 1.7;
color: var(--ink) !important;
}
.dish-options strong{
font-family: var(--sans);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--plum);
margin-right: 4px;
}
.dish-options em{
font-style: normal;
color: var(--rosa-deep);
font-weight: 600;
}
/* add-ons list */
.addons-list{
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 36px;
font-family: var(--serif);
font-size: 1rem;
}
.addons-list li{
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 8px 0;
border-bottom: 1px dotted var(--line);
}
.ao-price{
font-family: var(--display);
color: var(--rosa);
font-size: 1.05rem;
}
.menu-fine{
text-align: center;
margin: 16px auto 0;
max-width: 720px;
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.02em;
line-height: 1.6;
}
@media (max-width: 720px){
.menu-specials{ grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-toolbar{
top: 64px;
margin: 0 -18px 28px;
padding: 10px 18px 8px;
}
.menu-tools{ gap: 10px; margin-bottom: 10px; }
.menu-search{ flex: 1 1 100%; min-width: 0; }
.menu-search input{ height: 46px; font-size: 16px; }
.menu-filters{
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0 -18px;
padding: 4px 18px;
width: calc(100% + 36px);
-webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
}
.menu-filters::-webkit-scrollbar{ display: none; }
.mf-chip{ padding: 8px 12px; font-size: 0.72rem; flex-shrink: 0; }
.menu-jump{
margin: 0 -18px;
padding: 0 18px 4px;
-webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
}
.menu-jump a{ padding: 9px 11px; font-size: 0.7rem; letter-spacing: 0.1em; flex-shrink: 0; }
.menu-jump::-webkit-scrollbar{ display: none; }
/* === GLOBAL SAFETY NET — nothing should overflow the viewport === */
html, body{ overflow-x: hidden; }
img, video, iframe{ max-width: 100%; height: auto; }
p, h1, h2, h3, h4, h5, li, td, dd, dt, span, a, strong, em{
overflow-wrap: anywhere;
word-break: break-word;
}
/* legal pages with long emails / URLs */
.legal-wrap a, .legal-wrap{ overflow-wrap: anywhere; word-break: break-word; }
/* footer copy and footer delivery row often have long links */
.footer-copy, .footer-delivery{ overflow-wrap: anywhere; word-break: break-word; }
/* contacto cards */
.contacto-card strong, .contacto-card-meta{ overflow-wrap: anywhere; }
.cat-heading{ font-size: 1.4rem; }
.menu-cat{ scroll-margin-top: 200px; margin-bottom: 50px; }
.addons-list{ grid-template-columns: 1fr; gap: 0; }
.dish-options{ font-size: 0.84rem !important; }
}
@media (max-width: 480px){
.menu-specials{ grid-template-columns: 1fr; }
.menu-search input{ padding: 0 36px 0 38px; }
}
/* =========================================================
MENU PREVIEW (home page)
========================================================= */
.menu-preview{
position: relative;
padding: 100px 0 120px;
background:
radial-gradient(circle at 20% 0%, rgba(236,16,127,0.06), transparent 45%),
radial-gradient(circle at 80% 100%, rgba(212,175,55,0.07), transparent 45%),
var(--ivory);
overflow: hidden;
}
/* Chef's picks row */
.chef-picks{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 70px;
}
.pick-card{
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 28px 26px 24px;
box-shadow: var(--shadow-sm);
transition: all .35s ease;
display: flex;
flex-direction: column;
}
.pick-card:hover{
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: var(--rosa-200);
}
.pick-badge{
display: inline-block;
align-self: flex-start;
font-family: var(--sans);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
background: rgba(212,175,55,0.14);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 14px;
}
.pick-card h3{
font-family: var(--display);
font-size: 1.5rem;
line-height: 1.1;
margin: 0 0 10px;
color: var(--plum);
}
.pick-card p{
flex: 1;
color: var(--muted);
font-size: 0.94rem;
line-height: 1.5;
margin: 0 0 18px;
}
.pick-foot{
display: flex;
align-items: baseline;
justify-content: space-between;
border-top: 1px dotted var(--line);
padding-top: 14px;
}
.pick-price{
font-family: var(--display);
font-size: 1.4rem;
color: var(--rosa-deep);
}
.pick-tag{
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
.pick-feature{
background: linear-gradient(180deg, #fff 0%, var(--rosa-blush) 100%);
border-color: var(--rosa-200);
}
.pick-feature .pick-badge{
background: var(--rosa);
color: #fff;
}
.pick-feature h3{ color: var(--rosa-deep); }
/* Taco teaser (three columns) */
.taco-teaser{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
padding: 36px 30px;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-sm);
margin-bottom: 70px;
position: relative;
}
.taco-teaser::before{
content: '🌮';
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
background: #fff;
font-size: 1.8rem;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.tt-col h4{
font-family: var(--display);
font-size: 1.15rem;
color: var(--plum);
margin: 0 0 4px;
letter-spacing: 0.01em;
}
.tt-sub{
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rosa);
margin: 0 0 14px;
font-weight: 600;
}
.tt-list{
list-style: none;
margin: 0;
padding: 0;
font-family: var(--serif);
font-size: 0.98rem;
line-height: 1.65;
color: var(--ink);
}
.tt-list li{
border-bottom: 1px dotted var(--line);
padding: 4px 0;
}
.tt-list li:last-child{ border-bottom: 0; }
.tt-veg{
display: inline-block;
margin-left: 4px;
font-family: var(--sans);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--jade);
background: rgba(76,139,90,0.12);
padding: 1px 6px;
border-radius: 4px;
vertical-align: 2px;
}
/* Daily deals strip */
.daily-deals{
margin-bottom: 60px;
}
.dd-title{
text-align: center;
font-family: var(--display);
font-size: 1.5rem;
color: var(--plum);
margin: 0 0 24px;
}
.dd-grid{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.dd-card{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 22px 16px;
background: linear-gradient(180deg, #fff, var(--cream));
border: 1px solid var(--line);
border-radius: 14px;
transition: all .3s ease;
}
.dd-card:hover{
transform: translateY(-4px);
border-color: var(--rosa-200);
box-shadow: var(--shadow-sm);
}
.dd-day{
font-family: var(--sans);
font-size: 0.68rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.dd-icon{
font-size: 1.9rem;
line-height: 1;
margin-bottom: 10px;
}
.dd-card strong{
font-family: var(--display);
font-size: 1.1rem;
color: var(--plum);
line-height: 1.15;
margin-bottom: 8px;
}
.dd-price{
font-family: var(--serif);
font-style: italic;
font-size: 0.88rem;
color: var(--rosa-deep);
}
.dd-feature{
background: linear-gradient(180deg, var(--noche), var(--plum));
border-color: var(--gold);
box-shadow: 0 14px 30px -10px rgba(58,24,40,0.4);
}
.dd-feature .dd-day{ color: var(--gold-bright); }
.dd-feature strong{ color: var(--ivory); }
.dd-feature .dd-price{ color: var(--gold-bright); }
.dd-feature:hover{ transform: translateY(-6px); }
/* Menu CTA */
.menu-cta{
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
@media (max-width: 960px){
.chef-picks{ grid-template-columns: 1fr; gap: 14px; }
.taco-teaser{ grid-template-columns: 1fr; gap: 22px; padding: 30px 22px; }
.dd-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
.dd-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
REVIEWS STRIP
========================================================= */
.reviews-strip{
background:
radial-gradient(circle at 10% 50%, rgba(236,16,127,0.05), transparent 50%),
radial-gradient(circle at 90% 50%, rgba(212,175,55,0.05), transparent 50%),
var(--ivory);
padding: 64px 0;
border-bottom: 1px solid var(--line);
}
.reviews-grid{
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr;
gap: 48px;
align-items: center;
}
/* Left: Google rating block */
.rs-left{
display: flex;
align-items: center;
gap: 20px;
padding: 24px 28px;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: var(--shadow-sm);
}
.rs-google{
width: 48px;
height: 48px;
flex-shrink: 0;
}
.rs-rating{
line-height: 1.2;
}
.rs-stars{
display: inline-flex;
gap: 2px;
color: var(--gold);
font-size: 1.1rem;
letter-spacing: 0.06em;
margin-bottom: 4px;
}
.rs-stars .half{
position: relative;
color: transparent;
background: linear-gradient(90deg, var(--gold) 50%, var(--line) 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.rs-score{
font-family: var(--display);
font-size: 1.05rem;
color: var(--plum);
}
.rs-score strong{
font-size: 1.5rem;
color: var(--plum);
}
.rs-score span{
color: var(--muted);
font-family: var(--sans);
font-size: 0.86rem;
}
.rs-source{
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin-top: 4px;
}
.rs-source strong{ color: var(--plum); }
/* Right: quote cards */
.rs-quotes{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.rs-quote{
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px 22px 18px;
box-shadow: var(--shadow-sm);
position: relative;
}
.rs-quote::before{
content: '"';
position: absolute;
top: 0;
left: 16px;
font-family: var(--display);
font-size: 4rem;
color: var(--rosa);
opacity: 0.16;
line-height: 1;
}
.rs-quote-stars{
color: var(--gold);
font-size: 0.85rem;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.rs-quote p{
font-family: var(--serif);
font-size: 0.98rem;
line-height: 1.5;
font-style: italic;
color: var(--ink);
margin: 0 0 12px;
}
.rs-quote footer{
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rosa);
font-weight: 600;
}
@media (max-width: 960px){
.reviews-grid{ grid-template-columns: 1fr; gap: 24px; }
.rs-quotes{ grid-template-columns: 1fr 1fr; gap: 12px; }
.rs-left{ justify-content: center; }
}
@media (max-width: 640px){
.reviews-strip{ padding: 40px 0; }
.rs-quotes{ grid-template-columns: 1fr; }
.rs-quote{ padding: 18px 18px 14px; }
.rs-quote p{ font-size: 0.94rem; }
}
/* =========================================================
PIÑATA GAME
========================================================= */
.pinata-section{
position: relative;
padding: 100px 0 120px;
background:
radial-gradient(circle at 20% 10%, rgba(236,16,127,0.10), transparent 45%),
radial-gradient(circle at 80% 90%, rgba(212,175,55,0.12), transparent 45%),
repeating-linear-gradient(45deg,
transparent 0 40px,
rgba(236,16,127,0.025) 40px 41px),
var(--ivory);
overflow: hidden;
text-align: center;
/* piñata stick cursor (overrides site cursor inside this section) */
--stick-cursor: url("data:image/svg+xml;utf8,") 30 4, crosshair;
cursor: var(--stick-cursor);
}
.pinata-section *,
.pinata-section a,
.pinata-section button,
.pinata-section .pinata,
.pinata-section .pinata-art,
.pinata-section .pinata-img,
.pinata-section .pinata-svg,
.pinata-section .chip,
.pinata-section .btn-luxe{
cursor: var(--stick-cursor) !important;
}
.pinata-head{
max-width: 720px;
margin: 0 auto 30px;
}
.pinata-title{
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
margin: 0 0 12px;
}
.pinata-sub{
font-size: 1.15rem;
color: var(--muted);
margin: 0;
}
.pinata-sub .script{
font-size: 1.6rem;
color: var(--rosa);
display: inline-block;
margin-left: 6px;
}
.pinata-stage{
position: relative;
height: 480px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 60px;
}
.pinata-rope{
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 70px;
transform: translateX(-50%);
background:
repeating-linear-gradient(180deg,
var(--noche) 0 4px,
rgba(212,175,55,0.6) 4px 7px);
transform-origin: top center;
animation: ropeSway 3.5s ease-in-out infinite;
}
.pinata{
position: relative;
width: 340px;
height: 340px;
background: transparent;
border: 0;
padding: 0;
cursor: var(--taco-cursor);
filter: drop-shadow(0 24px 40px rgba(58,24,40,0.25));
transition: transform .2s ease;
z-index: 2;
}
.pinata:hover{ transform: scale(1.02); }
.pinata:active{ transform: scale(0.98); }
.pinata-art{
position: relative;
width: 100%;
height: 100%;
transform-origin: 50% -20%;
animation: pinataSwing 3.5s ease-in-out infinite;
}
.pinata-img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 2;
display: block; /* shown by default; JS hides it only on error */
}
.pinata.no-img .pinata-img{ display: none; }
.pinata-svg{
width: 100%;
height: 100%;
display: none; /* only shown as fallback when image fails */
}
.pinata.no-img .pinata-svg{ display: block; }
@keyframes pinataSwing{
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
@keyframes ropeSway{
0%, 100% { transform: translateX(-50%) rotate(-1deg); }
50% { transform: translateX(-50%) rotate(1deg); }
}
.pinata.hit .pinata-art{
animation: pinataShake 0.55s cubic-bezier(.36,.07,.19,.97);
}
@keyframes pinataShake{
0% { transform: rotate(0) translateY(0); }
15% { transform: rotate(-18deg) translateY(-2px); }
30% { transform: rotate(14deg) translateY(3px); }
45% { transform: rotate(-10deg) translateY(-1px); }
60% { transform: rotate(7deg); }
75% { transform: rotate(-4deg); }
100% { transform: rotate(0); }
}
.pinata.broken .pinata-art{
animation: pinataBurst 1.2s cubic-bezier(.36,.07,.19,.97) forwards;
}
.pinata.broken .pinata-cracks{
animation: cracksAppear 0.4s ease forwards;
}
@keyframes cracksAppear{
from{ opacity: 0; }
to { opacity: 1; }
}
@keyframes pinataBurst{
0% { transform: rotate(0) scale(1); opacity: 1; }
20% { transform: rotate(-15deg) scale(1.15); opacity: 1; }
40% { transform: rotate(20deg) scale(1.25); opacity: 1; }
60% { transform: rotate(-25deg) scale(1.1); opacity: 0.9; }
100% { transform: rotate(40deg) scale(0.55) translateY(80px); opacity: 0; }
}
/* taunting message */
.pinata-message{
margin-top: 24px;
font-family: var(--display);
text-align: center;
z-index: 3;
}
.pinata-message strong{
display: block;
font-size: 1.6rem;
color: var(--rosa);
font-weight: 400;
}
.pinata-message span{
font-family: var(--sans);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--muted);
}
.pinata-message.pop{
animation: msgPop 0.5s ease;
}
@keyframes msgPop{
0% { transform: scale(0.85) rotate(-3deg); opacity: 0.5; }
60% { transform: scale(1.08) rotate(2deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* hit meter */
.pinata-meter{
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 22px;
padding: 10px 18px;
background: var(--white);
border: 1px solid var(--rose-100);
border-radius: 999px;
box-shadow: var(--shadow-sm);
}
.meter-track{
width: 140px;
height: 6px;
background: var(--rosa-soft);
border-radius: 99px;
overflow: hidden;
}
.meter-fill{
width: 0%;
height: 100%;
background: linear-gradient(90deg, var(--rosa), var(--gold));
border-radius: 99px;
transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.meter-text{
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--plum);
}
.meter-text em{
font-style: normal;
color: var(--rosa);
margin: 0 2px;
}
/* candy spawn */
.candy{
position: absolute;
top: 45%;
left: 50%;
font-size: 2rem;
pointer-events: none;
animation: candyFall 1.6s cubic-bezier(.45,0,.55,1) forwards;
z-index: 4;
--dx: 0px;
--dr: 360deg;
filter: drop-shadow(0 4px 6px rgba(58,24,40,0.2));
}
@keyframes candyFall{
0% { transform: translate(-50%, 0) rotate(0); opacity: 1; }
100% { transform: translate(calc(-50% + var(--dx)), 350px) rotate(var(--dr)); opacity: 0; }
}
/* prize reveal */
.pinata-prize{
display: none;
max-width: 560px;
margin: 30px auto 0;
padding: 50px 40px;
background: linear-gradient(180deg, #fff 0%, var(--rosa-blush) 100%);
border: 2px solid var(--gold);
border-radius: var(--radius);
box-shadow: 0 30px 70px -20px rgba(236,16,127,0.4);
opacity: 0;
transform: translateY(20px) scale(0.96);
position: relative;
overflow: hidden;
}
.pinata-prize.show{
display: block;
animation: prizeIn 0.7s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes prizeIn{
to { opacity: 1; transform: translateY(0) scale(1); }
}
.prize-stars{
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: 14px;
font-size: 1.6rem;
}
.prize-stars span{
display: inline-block;
animation: starBounce 1.4s ease-in-out infinite;
}
.prize-stars span:nth-child(2){ animation-delay: 0.15s; }
.prize-stars span:nth-child(3){ animation-delay: 0.3s; }
.prize-stars span:nth-child(4){ animation-delay: 0.45s; }
.prize-stars span:nth-child(5){ animation-delay: 0.6s; }
@keyframes starBounce{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.prize-title{
font-size: clamp(1.8rem, 3vw, 2.6rem);
margin: 4px 0 10px;
color: var(--rosa-deep);
}
.prize-text{
color: var(--muted);
font-size: 1rem;
margin: 0 0 24px;
}
.prize-text code{
background: var(--gold-bright);
color: var(--noche);
font-family: var(--condensed);
font-size: 1.1em;
letter-spacing: 0.18em;
padding: 3px 10px;
border-radius: 6px;
}
@media (max-width: 640px){
.pinata{ width: 280px; height: 280px; }
.pinata-stage{ height: 420px; padding-top: 50px; }
.pinata-prize{ padding: 36px 24px; }
}
/* =========================================================
GALLERY
========================================================= */
.gallery-section{ background: var(--ivory); }
.gallery-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 240px 240px;
gap: 14px;
}
.g-tile{
border-radius: var(--radius);
overflow: hidden;
position: relative;
transition: transform .6s ease;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.g-tile::after{
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(23,10,16,0.45));
opacity: 0;
transition: opacity .4s ease;
z-index: 1;
}
.g-tile:hover{ transform: scale(1.02); }
.g-tile:hover::after{ opacity: 1; }
.g-illust{
width: 70%;
height: 70%;
position: relative;
z-index: 2;
transition: transform .5s ease;
filter: drop-shadow(0 6px 18px rgba(23,10,16,0.35));
}
.g-tile:hover .g-illust{ transform: scale(1.06) rotate(-2deg); }
.g-label{
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%) translateY(8px);
font-family: var(--display);
font-size: 1.1rem;
letter-spacing: 0.04em;
color: var(--white);
text-shadow: 0 2px 12px rgba(23,10,16,0.6);
opacity: 0;
transition: all .4s ease;
z-index: 3;
white-space: nowrap;
}
.g-tile:hover .g-label{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.g-1 .g-illust{ width: 50%; height: 50%; }
.g-1{
grid-column: span 2; grid-row: span 2;
background:
linear-gradient(135deg, rgba(232,163,61,0.3), rgba(155,36,23,0.55)),
radial-gradient(circle at 30% 30%, #F4E5CE, #E8A33D 50%, #C75B33 100%);
}
.g-2{
background:
linear-gradient(180deg, rgba(255,255,255,0.2), rgba(31,143,138,0.4)),
radial-gradient(circle at 60% 50%, #C7E8E5, #1F8F8A 70%, #1F4E8C);
}
.g-3{
background:
linear-gradient(160deg, rgba(155,36,23,0.5), rgba(232,163,61,0.25)),
radial-gradient(circle at 30% 70%, #9B2417, #D03A2A 60%, #E8A33D);
}
.g-4{
background:
linear-gradient(180deg, rgba(255,255,255,0.2), rgba(232,163,61,0.45)),
radial-gradient(circle at 70% 30%, #FFF6E7, #F6D89E 50%, #E8A33D);
}
.g-5{
background:
linear-gradient(135deg, rgba(31,78,140,0.35), rgba(31,143,138,0.4)),
radial-gradient(circle at 40% 60%, #C7E8E5, #1F8F8A 60%, #1F4E8C);
}
.g-6{
background:
linear-gradient(180deg, rgba(58,24,32,0.5), rgba(199,91,51,0.3)),
radial-gradient(circle at 60% 40%, #C75B33, #9B2417 70%, #3A1820);
}
/* =========================================================
TEAM
========================================================= */
.team-section{
background:
radial-gradient(circle at 0% 50%, rgba(31,143,138,0.08), transparent 40%),
radial-gradient(circle at 100% 0%, rgba(232,163,61,0.12), transparent 40%),
linear-gradient(180deg, var(--ivory), var(--cream));
position: relative;
overflow: hidden;
}
.team-section::before{
content: '';
position: absolute;
bottom: 40px; left: -60px;
width: 220px; height: 220px;
border-radius: 50%;
background:
repeating-conic-gradient(from 22deg,
transparent 0deg 30deg,
var(--chili) 30deg 31deg,
transparent 31deg 60deg);
opacity: 0.12;
pointer-events: none;
}
.team-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.team-card{
background: #fff;
border: 1px solid var(--rose-100);
border-radius: var(--radius);
padding: 30px;
text-align: center;
box-shadow: var(--shadow-sm);
transition: all .4s ease;
}
.team-card:hover{
transform: translateY(-6px);
box-shadow: var(--shadow-md);
}
.team-portrait{
position: relative;
width: 180px;
height: 180px;
margin: 0 auto 22px;
}
.team-wreath{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
filter: drop-shadow(0 6px 14px rgba(58,24,40,0.18));
animation: wreathSpin 30s linear infinite;
}
@keyframes wreathSpin{
from{ transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.team-photo{
position: absolute;
inset: 22px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 0 0 2px var(--gold), 0 14px 30px -10px rgba(58,24,40,0.3);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.team-initial{
font-family: var(--display);
font-size: 3.6rem;
color: var(--white);
text-shadow: 0 4px 14px rgba(23,10,16,0.45);
line-height: 1;
}
.team-photo-1{
background:
linear-gradient(135deg, rgba(232,163,61,0.3), rgba(155,36,23,0.45)),
radial-gradient(circle at 50% 40%, #F4E5CE, #E8A33D 60%, #C75B33 95%);
}
.team-photo-2{
background:
linear-gradient(135deg, rgba(31,78,140,0.4), rgba(31,143,138,0.35)),
radial-gradient(circle at 50% 40%, #C7E8E5, #1F8F8A 60%, #1F4E8C 95%);
}
.team-photo-3{
background:
linear-gradient(135deg, rgba(199,91,51,0.3), rgba(155,36,23,0.4)),
radial-gradient(circle at 50% 40%, #FFE2C9, #C75B33 60%, #9B2417 95%);
}
.team-card h3{ margin: 0 0 4px; }
.team-card .role{
color: var(--chili);
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.74rem;
margin: 0 0 14px;
position: relative;
display: inline-block;
padding: 0 14px;
}
.team-card .role::before,
.team-card .role::after{
content: '✦';
color: var(--marigold);
font-size: 0.8em;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.team-card .role::before{ left: 0; }
.team-card .role::after{ right: 0; }
.team-card p:not(.role){ color: var(--muted); margin: 0; }
/* =========================================================
RESERVE / VISIT
========================================================= */
.reserve-section{
background:
radial-gradient(ellipse at 80% 20%, rgba(232,163,61,0.18), transparent 50%),
radial-gradient(ellipse at 10% 90%, rgba(31,143,138,0.08), transparent 50%),
linear-gradient(180deg, var(--cream), var(--ivory));
}
.reserve-form{ margin-top: 28px; }
.field-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.field{ display: flex; flex-direction: column; margin-bottom: 14px; }
.field label{
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.field input,
.field select,
.field textarea{
font-family: var(--sans);
font-size: 0.98rem;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
color: var(--ink);
transition: all .25s ease;
outline: none;
resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
border-color: var(--marigold);
box-shadow: 0 0 0 4px rgba(232,163,61,0.22);
}
.field input.error,
.field select.error{
border-color: var(--chili);
box-shadow: 0 0 0 4px rgba(208,58,42,0.18);
}
.reserve-error{
margin: 14px 0 0;
color: var(--chili);
font-size: 0.9rem;
min-height: 1.2em;
}
/* success card replaces form on submit */
.reserve-form.hidden{ display: none; }
.reserve-success{
display: none;
background: linear-gradient(135deg, var(--ivory), var(--cream));
border: 2px solid var(--marigold);
border-radius: var(--radius);
padding: 42px 32px;
text-align: center;
box-shadow: var(--shadow-md);
animation: fadeUp .55s ease both;
}
.reserve-success.show{ display: block; }
.reserve-success .success-icon{
font-size: 3.6rem;
line-height: 1;
margin-bottom: 16px;
display: inline-block;
animation: tacoSpin .9s ease;
}
@keyframes tacoSpin{
0% { transform: scale(0) rotate(-180deg); }
60% { transform: scale(1.2) rotate(20deg); }
100% { transform: scale(1) rotate(0); }
}
.reserve-success h3{
margin-bottom: 14px;
color: var(--chili);
font-size: 2rem;
}
.reserve-success p{
color: var(--ink);
font-size: 1.05rem;
margin-bottom: 12px;
}
.reserve-success strong{
color: var(--plum);
font-weight: 600;
background: rgba(232,163,61,0.18);
padding: 1px 6px;
border-radius: 4px;
}
.reserve-success .btn{ margin-top: 18px; }
/* compact post-submit banner that replaces the big gracias header */
.success-banner{
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
margin-bottom: 22px;
background: linear-gradient(135deg, rgba(106,174,91,0.14), rgba(106,174,91,0.04));
border: 1px solid #6AAE5B;
border-radius: 12px;
text-align: left;
}
.success-banner-check{
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
background: #6AAE5B;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
}
.success-banner-text{
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.success-banner-text strong{
background: transparent;
padding: 0;
font-family: var(--display);
font-size: 1.1rem;
color: var(--plum);
line-height: 1.3;
}
.success-banner-text > span{
font-family: var(--serif);
font-size: 0.93rem;
color: var(--muted);
line-height: 1.5;
}
.success-banner-body{
font-style: italic;
color: var(--ink) !important;
}
.success-banner-meta{
font-size: 0.85rem !important;
letter-spacing: 0.04em;
color: var(--rosa-deep) !important;
font-style: normal !important;
}
.reserve-success .success-pref-title{
text-align: left;
margin: 0 0 4px;
}
.reserve-success .success-pref-sub{
text-align: left;
margin: 0 0 14px;
}
.success-foot{
margin-top: 24px;
font-size: 0.88rem;
}
.success-pref-cta{
margin: 18px 0 8px;
padding: 14px 18px;
background: var(--cream);
border: 1px dashed var(--rosa);
border-radius: 10px;
font-family: var(--serif);
font-size: 1rem;
color: var(--plum);
text-align: left;
}
.success-pref-cta strong{ background: transparent; padding: 0; color: var(--rosa-deep); }
/* right column swap: hide map info, show floor plan picker */
.visit-pref[hidden]{ display: none; }
.visit-pref h3{
margin: 0 0 6px;
font-family: var(--display);
font-size: 1.35rem;
color: var(--plum);
}
.visit-pref .success-pref-sub{ text-align: left; }
/* after submit: give the picker more breathing room (desktop only — on mobile we stack) */
@media (min-width: 961px){
.reserve-section .two-col.is-success{
grid-template-columns: 1fr 1.4fr;
align-items: start;
}
}
/* send-preference action + sent confirmation */
.seat-pref-actions[hidden],
.seat-pref-sent[hidden]{ display: none !important; }
.seat-pref-actions{
margin-top: 14px;
display: flex;
justify-content: flex-end;
}
.seat-pref-actions .btn{ min-width: 220px; }
.seat-pref-sent{
margin-top: 14px;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(106,174,91,0.14), rgba(106,174,91,0.04));
border: 1px solid #6AAE5B;
border-radius: 12px;
}
.seat-pref-sent-icon{
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #6AAE5B;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.seat-pref-sent-text{ flex: 1; display: flex; flex-direction: column; gap: 2px; }
.seat-pref-sent-text strong{ color: var(--plum); font-family: var(--display); font-size: 1rem; }
.seat-pref-sent-text span{ font-family: var(--serif); font-size: 0.9rem; color: var(--muted); }
.seat-pref-change{
background: transparent;
border: 1px solid var(--rosa);
color: var(--rosa-deep);
padding: 6px 14px;
border-radius: 999px;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
.seat-pref-change:hover{ background: var(--rosa); color: #fff; }
/* once sent, lock the floor plan from further picks */
#seatPrefTables.seat-pref-locked .tbl:not(.tbl-picked){ pointer-events: none; opacity: 0.5; }
/* ---------- MOBILE: stack everything untereinander ---------- */
@media (max-width: 640px){
/* success banner: icon above text, full width */
.success-banner{
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 16px;
}
.success-banner-check{ flex: 0 0 32px; width: 32px; height: 32px; }
.success-banner-text strong{ font-size: 1rem; }
.success-banner-text > span{ font-size: 0.88rem; }
/* call-to-action pink box */
.success-pref-cta{
padding: 12px 14px;
font-size: 0.92rem;
}
/* status row: stack the "Your pick:" line above the Clear button */
.seat-pref-status{
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 12px 14px;
}
.seat-pref-clear{ align-self: flex-start; }
/* Send-my-preference button: full width on phone */
.seat-pref-actions{ justify-content: stretch; }
.seat-pref-actions .btn{ min-width: 0; width: 100%; }
/* "Preference sent" confirmation: stack icon, text, Change button */
.seat-pref-sent{
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 14px;
}
.seat-pref-sent-icon{ flex: 0 0 32px; }
.seat-pref-change{ align-self: flex-start; }
/* right-column wrapper on mobile gets a bit more breathing room */
.visit-pref{ padding-top: 8px; }
/* floor plan fits the viewport, no horizontal scroll */
.seat-pref-svg-wrap{
overflow: hidden;
padding: 8px;
background: linear-gradient(180deg, #fff, var(--cream));
}
#seatPrefPlan{
width: 100%;
min-width: 0;
max-height: none;
display: block;
}
/* labels enlarged in SVG units so they stay readable when the SVG shrinks to ~340px */
#seatPrefTables .tbl-label{ font-size: 34px; }
#seatPrefTables .tbl-seats{ font-size: 18px; }
/* hide the small bar-stool circles' invisible labels (already small=true) — no change needed */
/* preference message highlight box */
.success-pref{
margin: 12px 0;
padding: 10px 14px;
font-size: 0.9rem;
}
}
.visit-card{
background: #fff;
border: 1px solid var(--rose-100);
border-radius: var(--radius);
padding: 42px 38px;
box-shadow: var(--shadow-md);
}
.visit-card h3{
font-size: 2rem;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.visit-card h4{
font-size: 0.78rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--rose-500);
font-family: var(--sans);
font-weight: 500;
margin: 26px 0 12px;
}
.address{ font-family: var(--serif); font-size: 1.2rem; color: var(--plum); margin-bottom: 6px; line-height: 1.45; }
.hours ul{
list-style: none;
padding: 0; margin: 0;
}
.hours li{
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dotted var(--line);
font-size: 0.95rem;
}
.hours li:last-child{ border-bottom: 0; }
.hours li span:first-child{ color: var(--plum); font-weight: 500; }
.hours li span:last-child{ color: var(--muted); }
.contact p{ margin: 0; font-family: var(--serif); font-size: 1.15rem; color: var(--plum); }
.socials{
margin-top: 24px;
display: flex;
gap: 20px;
}
.socials a{
font-size: 0.74rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--rose-500);
border-bottom: 1px solid transparent;
padding-bottom: 4px;
transition: all .25s ease;
}
.socials a:hover{ color: var(--rose-700); border-color: var(--rose-300); }
/* =========================================================
FOOTER
========================================================= */
.footer{
background: var(--plum);
color: var(--rose-100);
padding: 70px 0 40px;
position: relative;
}
.footer::before{
content: '';
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, -50%);
width: 80px; height: 80px;
background: var(--ivory);
border-radius: 50%;
border: 1px solid var(--rose-100);
box-shadow: var(--shadow-sm);
display: none; /* decorative, hidden but reserved */
}
.footer-inner{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 28px;
}
.footer-brand{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer-brand .brand-mark-svg{ color: #fff; }
.footer-brand .brand-mark-svg.large{ width: 72px; height: 72px; }
.footer-tag{ color: var(--rose-200); font-size: 1.6rem; margin: 0; }
.footer-nav{
display: flex; gap: 32px; flex-wrap: wrap; justify-content: center;
}
.footer-nav a{
font-size: 0.74rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--rose-100);
transition: color .25s ease;
}
.footer-nav a:hover{ color: #fff; }
.footer-copy{
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(252,217,225,0.6);
margin: 0;
padding-top: 24px;
border-top: 1px solid rgba(252,217,225,0.12);
width: 100%;
max-width: 480px;
}
/* =========================================================
REVEAL ANIMATIONS
========================================================= */
/* Opacity-only fade-in. No transform — a transformed ancestor breaks native
date/time pickers (Firefox closes them, Safari mispositions them). */
.reveal{
opacity: 0;
transition: opacity .9s ease;
}
.reveal.in{ opacity: 1; }
@keyframes fadeUp{
from{ opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 960px){
.two-col{ grid-template-columns: 1fr; gap: 48px; }
.story-art{ height: 460px; }
.pillar-grid{ grid-template-columns: 1fr; }
.team-grid{ grid-template-columns: 1fr; }
.gallery-grid{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 200px 200px 200px;
}
.g-1{ grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 720px){
.nav-toggle{ display: flex; }
.nav-links{
position: absolute;
top: 100%;
left: 0; right: 0;
background: var(--ivory);
flex-direction: column;
align-items: stretch;
padding: 18px 28px 28px;
gap: 0;
transform: translateY(-12px);
opacity: 0;
pointer-events: none;
transition: all .35s ease;
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.nav-links.open{
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.nav-links a{
color: var(--plum) !important;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.nav-links a:last-child{ border-bottom: 0; }
.nav-cta{
margin-top: 12px;
text-align: center;
}
.menu-grid{ grid-template-columns: 1fr; gap: 30px; }
.field-row{ grid-template-columns: 1fr; }
.brand-name{ display: none; }
.marquee-track{ font-size: 1rem; gap: 36px; }
.gallery-grid{
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 180px);
}
.g-1{ grid-column: span 1; }
}
/* =========================================================
CHAT LAUNCHER · static, confident, restrained
========================================================= */
.chat-launcher{
position: fixed;
bottom: 22px;
right: 22px;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px 12px 16px;
border: 1px solid rgba(232,163,61,0.35);
border-radius: 999px;
background: var(--plum);
color: var(--ivory);
font-family: var(--sans);
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
box-shadow: 0 12px 30px -14px rgba(23,10,16,0.5);
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
cursor: pointer;
}
.chat-launcher:hover{
transform: translateY(-2px);
background: var(--noche);
box-shadow: 0 18px 36px -14px rgba(23,10,16,0.55);
}
.chat-launcher.hidden{
opacity: 0;
pointer-events: none;
transform: translateY(12px);
}
.chat-launcher-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.chat-launcher-icon svg{
width: 18px;
height: 18px;
stroke: currentColor;
}
.chat-launcher-label{
line-height: 1;
}
.chat-panel{
position: fixed;
bottom: 24px;
right: 24px;
width: 380px;
max-width: calc(100vw - 32px);
height: 560px;
max-height: calc(100vh - 48px);
z-index: 70;
background: var(--ivory);
border-radius: 22px;
border: 1px solid var(--line);
box-shadow: 0 40px 80px -20px rgba(58,24,32,0.35);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(20px) scale(0.96);
opacity: 0;
pointer-events: none;
transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.chat-panel.open{
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
.chat-header{
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: linear-gradient(135deg, var(--chili), var(--chili-deep) 60%, var(--plum));
color: var(--ivory);
position: relative;
}
.chat-header::after{
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 4px;
background: repeating-linear-gradient(90deg,
var(--marigold) 0 8px,
var(--ivory) 8 12px,
var(--cobalt) 12 20px,
var(--ivory) 20 24px,
var(--jade) 24 32px,
var(--ivory) 32 36px);
}
.chat-avatar{
width: 44px; height: 44px;
border-radius: 50%;
background: var(--marigold);
color: var(--plum);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-weight: 700;
font-size: 1.3rem;
flex-shrink: 0;
border: 2px solid var(--ivory);
}
.chat-who{ flex: 1; line-height: 1.2; }
.chat-who strong{
display: block;
font-family: var(--serif);
font-size: 1.15rem;
font-weight: 600;
}
.chat-status{
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
letter-spacing: 0.08em;
opacity: 0.9;
}
.dot-online{
width: 7px; height: 7px;
background: #6FCF5C;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(111,207,92,0.3);
}
.chat-close{
background: rgba(255,255,255,0.15);
border: 0;
color: var(--ivory);
width: 32px; height: 32px;
border-radius: 50%;
font-size: 0.9rem;
transition: background .2s ease;
}
.chat-close:hover{ background: rgba(255,255,255,0.3); }
.chat-body{
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
background:
radial-gradient(circle at 0% 0%, rgba(232,163,61,0.08), transparent 50%),
radial-gradient(circle at 100% 100%, rgba(31,143,138,0.06), transparent 50%),
var(--ivory);
scroll-behavior: smooth;
}
.chat-body::-webkit-scrollbar{ width: 6px; }
.chat-body::-webkit-scrollbar-track{ background: transparent; }
.chat-body::-webkit-scrollbar-thumb{ background: var(--rose-100); border-radius: 3px; }
.msg{
max-width: 82%;
padding: 10px 14px;
border-radius: 16px;
font-size: 0.94rem;
line-height: 1.45;
animation: msgIn .35s ease both;
word-wrap: break-word;
}
@keyframes msgIn{
from{ opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.msg-bot{
align-self: flex-start;
background: #fff;
color: var(--ink);
border: 1px solid var(--line);
border-bottom-left-radius: 4px;
}
.msg-user{
align-self: flex-end;
background: linear-gradient(135deg, var(--chili), var(--chili-deep));
color: #fff;
border-bottom-right-radius: 4px;
}
.msg a.msg-cta{
display: inline-block;
margin-top: 8px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chili);
padding: 6px 12px;
border: 1px solid var(--marigold);
border-radius: 999px;
background: rgba(232,163,61,0.12);
transition: all .25s ease;
}
.msg a.msg-cta:hover{
background: var(--marigold);
color: var(--plum);
}
.msg.typing{
display: inline-flex;
gap: 4px;
align-items: center;
padding: 14px 16px;
}
.msg.typing span{
width: 6px; height: 6px;
background: var(--chili);
border-radius: 50%;
animation: typingDot 1.2s ease-in-out infinite;
}
.msg.typing span:nth-child(2){ animation-delay: 0.15s; }
.msg.typing span:nth-child(3){ animation-delay: 0.3s; }
@keyframes typingDot{
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-4px); opacity: 1; }
}
.chat-quick{
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 16px 12px;
background: var(--ivory);
border-top: 1px solid var(--line);
padding-top: 12px;
}
.chip{
background: var(--cream);
color: var(--plum);
border: 1px solid var(--line);
padding: 7px 12px;
border-radius: 999px;
font-size: 0.78rem;
font-family: var(--sans);
font-weight: 500;
cursor: var(--taco-cursor);
transition: all .25s ease;
}
.chip:hover{
background: var(--marigold);
border-color: var(--marigold);
color: var(--plum);
transform: translateY(-1px);
}
.chat-input{
display: flex;
gap: 8px;
padding: 12px 14px 14px;
background: var(--ivory);
border-top: 1px solid var(--line);
}
.chat-input input{
flex: 1;
font-family: var(--sans);
font-size: 0.95rem;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
outline: none;
transition: all .25s ease;
}
.chat-input input:focus{
border-color: var(--marigold);
box-shadow: 0 0 0 4px rgba(232,163,61,0.2);
}
.chat-input button{
width: 42px; height: 42px;
border-radius: 50%;
border: 0;
background: linear-gradient(135deg, var(--chili), var(--chili-deep));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .25s ease;
box-shadow: 0 6px 14px -4px rgba(208,58,42,0.5);
}
.chat-input button:hover{
transform: translateY(-1px);
box-shadow: 0 10px 20px -4px rgba(208,58,42,0.6);
}
@media (max-width: 480px){
.chat-panel{
width: 100vw;
height: 100vh;
max-height: 100vh;
bottom: 0;
right: 0;
border-radius: 0;
}
.chat-launcher{
bottom: 18px;
right: 18px;
width: 56px;
height: 56px;
}
.chat-launcher-label{ display: none; }
}
/* =========================================================
FIFA · PASAPORTE 2026
========================================================= */
.fifa{
position: relative;
padding: 120px 0 100px;
background: var(--noche);
color: var(--ivory);
overflow: hidden;
isolation: isolate;
}
.fifa-bg{
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 110%, rgba(236,16,127,0.4), transparent 50%),
radial-gradient(ellipse at 20% 30%, rgba(212,175,55,0.18), transparent 45%),
radial-gradient(ellipse at 80% 20%, rgba(236,16,127,0.22), transparent 45%),
linear-gradient(180deg, var(--noche) 0%, var(--noche-2) 40%, var(--noche) 100%);
z-index: -2;
}
.fifa-stadium{
position: absolute;
inset: 0;
background:
/* stadium lights */
radial-gradient(circle at 10% 0%, rgba(212,175,55,0.18) 0 60px, transparent 80px),
radial-gradient(circle at 30% 0%, rgba(212,175,55,0.14) 0 50px, transparent 80px),
radial-gradient(circle at 50% 0%, rgba(212,175,55,0.20) 0 70px, transparent 100px),
radial-gradient(circle at 70% 0%, rgba(212,175,55,0.14) 0 50px, transparent 80px),
radial-gradient(circle at 90% 0%, rgba(212,175,55,0.18) 0 60px, transparent 80px),
/* field stripes hint at bottom */
linear-gradient(180deg, transparent 70%, rgba(44,122,76,0.12) 100%);
z-index: -1;
}
.fifa-confetti{
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.fifa-confetti span{
position: absolute;
top: -10%;
width: 6px;
height: 10px;
opacity: 0;
animation: fall linear infinite;
}
.fifa-confetti span:nth-child(1){ left: 8%; background: var(--gold); animation-duration: 12s; animation-delay: 0s; }
.fifa-confetti span:nth-child(2){ left: 18%; background: var(--rosa); animation-duration: 14s; animation-delay: 2s; }
.fifa-confetti span:nth-child(3){ left: 28%; background: var(--gold-bright);animation-duration: 11s; animation-delay: 1s; }
.fifa-confetti span:nth-child(4){ left: 38%; background: var(--white); animation-duration: 13s; animation-delay: 3s; }
.fifa-confetti span:nth-child(5){ left: 48%; background: var(--gold); animation-duration: 12s; animation-delay: 4s; }
.fifa-confetti span:nth-child(6){ left: 58%; background: var(--rosa-bright);animation-duration: 14s; animation-delay: 1.5s;}
.fifa-confetti span:nth-child(7){ left: 68%; background: var(--gold-bright);animation-duration: 12s; animation-delay: 5s; }
.fifa-confetti span:nth-child(8){ left: 78%; background: var(--rosa); animation-duration: 13s; animation-delay: 2.5s;}
.fifa-confetti span:nth-child(9){ left: 88%; background: var(--white); animation-duration: 11s; animation-delay: 6s; }
.fifa-confetti span:nth-child(10){left: 14%; background: var(--rosa-bright);animation-duration: 14s; animation-delay: 4.5s;}
.fifa-confetti span:nth-child(11){left: 73%; background: var(--gold); animation-duration: 12s; animation-delay: 7s; }
.fifa-confetti span:nth-child(12){left: 92%; background: var(--rosa); animation-duration: 13s; animation-delay: 0.5s;}
.picado-fifa{ top: 0; }
.fifa-inner{
position: relative;
z-index: 2;
text-align: center;
}
.fifa-kicker{
display: inline-flex;
align-items: center;
gap: 18px;
margin: 30px 0 22px;
color: var(--gold-bright);
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.34em;
text-transform: uppercase;
}
.kicker-line{
width: 60px; height: 1px;
background: var(--gold);
}
.fifa-title{
font-family: var(--display);
margin: 0 0 30px;
line-height: 0.88;
letter-spacing: -0.01em;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.fifa-pasaporte{
font-size: clamp(3rem, 11vw, 9rem);
background: linear-gradient(180deg,
#FFEFC8 0%,
var(--gold-bright) 35%,
var(--gold) 60%,
#8A6E18 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 10px 26px rgba(212,175,55,0.5));
text-shadow: 0 0 50px rgba(212,175,55,0.4);
}
.fifa-2026{
font-family: var(--condensed);
font-size: clamp(4rem, 16vw, 13rem);
line-height: 0.9;
letter-spacing: 0.04em;
background: linear-gradient(180deg, #FFF 0%, var(--rosa-bright) 50%, var(--rosa-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 12px 28px rgba(236,16,127,0.5));
margin-top: -10px;
}
.fifa-sub{
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.1rem, 2vw, 1.5rem);
max-width: 700px;
margin: 0 auto 70px;
color: rgba(255,251,246,0.92);
font-weight: 400;
}
/* mechanic 3 steps */
.fifa-mechanic{
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 20px;
align-items: stretch;
max-width: 1000px;
margin: 0 auto 70px;
}
.mech-step{
background: rgba(255,255,255,0.05);
border: 1px solid rgba(212,175,55,0.4);
border-radius: 18px;
padding: 36px 26px;
position: relative;
backdrop-filter: blur(6px);
}
.mech-step h4{
color: var(--white);
font-family: var(--display);
font-size: 1.6rem;
font-weight: 400;
margin: 14px 0 10px;
}
.mech-step p{
color: rgba(255,251,246,0.78);
font-size: 0.95rem;
margin: 0;
}
.mech-num{
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rosa) 0%, var(--rosa-deep) 100%);
color: #fff;
font-family: var(--display);
font-size: 1.4rem;
box-shadow: 0 10px 24px -8px rgba(236,16,127,0.6);
border: 2px solid var(--gold);
}
.mech-arrow{
display: flex;
align-items: center;
color: var(--gold);
font-size: 1.8rem;
font-weight: 200;
}
/* perks grid */
.fifa-perks{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
max-width: 900px;
margin: 0 auto 80px;
text-align: left;
}
.perk{
display: flex;
gap: 16px;
align-items: flex-start;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-left: 3px solid var(--rosa);
border-radius: 14px;
padding: 18px 22px;
transition: all .3s ease;
}
.perk:hover{
border-left-color: var(--gold-bright);
background: rgba(236,16,127,0.06);
transform: translateX(4px);
}
.perk-icon{
font-size: 1.8rem;
line-height: 1;
}
.perk strong{
display: block;
font-family: var(--serif);
font-weight: 600;
font-size: 1.05rem;
color: var(--white);
margin-bottom: 4px;
}
.perk span{
color: rgba(255,251,246,0.72);
font-size: 0.88rem;
line-height: 1.5;
}
/* ticket card with signup form */
.fifa-ticket{
max-width: 880px;
margin: 0 auto;
}
.ticket-card{
display: grid;
grid-template-columns: 240px 1fr;
background: linear-gradient(135deg, #FFF 0%, #FFF5E6 100%);
color: var(--noche);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 40px 80px -30px rgba(212,175,55,0.5), 0 30px 60px -20px rgba(236,16,127,0.4);
position: relative;
}
.ticket-card::before{
content: '';
position: absolute;
top: 50%; left: 240px;
transform: translate(-50%, -50%);
width: 32px; height: 32px;
background: var(--noche);
border-radius: 50%;
z-index: 1;
}
.ticket-stub{
background: linear-gradient(180deg, var(--rosa-deep) 0%, var(--noche) 100%);
color: var(--ivory);
padding: 40px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
border-right: 2px dashed rgba(212,175,55,0.5);
}
.ticket-stub::after{
content: '';
position: absolute;
top: 0; bottom: 0;
right: -8px;
width: 16px;
background:
radial-gradient(circle at 8px 8px, var(--noche) 0 6px, transparent 7px);
background-size: 16px 16px;
}
.ticket-tag{
font-family: var(--display);
font-size: 1.4rem;
letter-spacing: 0.04em;
color: var(--gold-bright);
}
.ticket-year{
font-family: var(--condensed);
font-size: 3.4rem;
line-height: 1;
color: var(--white);
letter-spacing: 0.05em;
}
.ticket-trophy{
font-size: 3rem;
filter: drop-shadow(0 4px 12px rgba(212,175,55,0.6));
}
.ticket-body{
padding: 38px 36px;
}
.ticket-body h3{
font-family: var(--display);
font-size: 1.8rem;
color: var(--rosa-deep);
margin: 0 0 8px;
font-weight: 400;
}
.ticket-lead{
color: var(--muted);
font-size: 0.95rem;
margin: 0 0 22px;
}
.fifa-form .field{ margin-bottom: 10px; }
.fifa-form .field-row{ margin-bottom: 0; }
.fifa-form label{ color: var(--muted); }
.fifa-form input{
border-color: rgba(58,24,40,0.12);
background: #fff;
}
.fifa-form input:focus{
border-color: var(--rosa);
box-shadow: 0 0 0 4px rgba(236,16,127,0.18);
}
.fifa-form .btn-luxe{ margin-top: 14px; }
.fifa-error{
margin: 12px 0 0;
color: var(--rosa-deep);
font-size: 0.88rem;
min-height: 1.2em;
}
.fifa-form.hidden{ display: none; }
.fifa-success{
display: none;
text-align: center;
animation: fadeUp .5s ease both;
}
.fifa-success.show{ display: block; }
.success-trophy{
font-size: 4rem;
margin-bottom: 14px;
animation: tacoSpin 0.9s ease;
}
.fifa-success h4{
color: var(--rosa-deep);
font-family: var(--display);
font-size: 1.6rem;
margin: 0 0 12px;
font-weight: 400;
}
.fifa-success p{ color: var(--muted); margin: 0; }
.fifa-fine{
margin: 50px auto 0;
max-width: 700px;
font-size: 0.78rem;
color: rgba(255,251,246,0.5);
letter-spacing: 0.06em;
}
@media (max-width: 960px){
.fifa-mechanic{
grid-template-columns: 1fr;
max-width: 480px;
}
.mech-arrow{ transform: rotate(90deg); justify-content: center; }
.fifa-perks{ grid-template-columns: 1fr; }
.ticket-card{
grid-template-columns: 1fr;
}
.ticket-card::before{
top: 200px;
left: 50%;
}
.ticket-stub{
padding: 30px;
flex-direction: row;
border-right: 0;
border-bottom: 2px dashed rgba(212,175,55,0.5);
}
.ticket-stub::after{
top: auto; bottom: -8px;
right: 0; left: 0;
width: 100%; height: 16px;
background:
radial-gradient(circle at 8px 8px, var(--noche) 0 6px, transparent 7px);
background-size: 16px 16px;
}
}
/* =========================================================
MARIACHI AUDIO TOGGLE
========================================================= */
.mariachi-toggle{
position: fixed;
bottom: 24px;
left: 24px;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px 12px 14px;
border-radius: 999px;
background: linear-gradient(135deg, var(--noche), var(--plum));
color: var(--gold-bright);
border: 1px solid var(--gold);
cursor: var(--taco-cursor);
font-family: var(--sans);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
box-shadow: 0 18px 40px -16px rgba(212,175,55,0.5);
transition: all .35s ease;
}
.mariachi-toggle:hover{
transform: translateY(-2px);
border-color: var(--gold-bright);
color: var(--white);
}
.mariachi-icon{
width: 30px; height: 30px;
border-radius: 50%;
background: var(--gold);
color: var(--noche);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.mariachi-toggle.playing .mariachi-icon{
background: var(--rosa);
color: var(--white);
animation: musicPulse 1s ease-in-out infinite;
}
@keyframes musicPulse{
0%, 100% { box-shadow: 0 0 0 0 rgba(236,16,127,0.6); }
50% { box-shadow: 0 0 0 8px rgba(236,16,127,0); }
}
.mariachi-toggle.playing .mariachi-label::after{ content: ' · Playing'; color: var(--rosa-bright); }
@media (max-width: 720px){
.mariachi-toggle{
padding: 10px 12px;
}
.mariachi-label{ display: none; }
}
/* =========================================================
MENU PAGE: cocktails subheading + placeholder note
========================================================= */
.cat-subheading{
font-family: var(--display);
font-size: 1.15rem;
color: var(--rosa-deep);
margin: 28px 0 12px;
letter-spacing: 0.02em;
display: inline-block;
padding-bottom: 4px;
border-bottom: 1px dotted var(--rosa-200);
}
.menu-placeholder-note{
color: var(--gold-deep) !important;
font-style: italic;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
}
/* =========================================================
BOOKING: Google Map + Get Directions button
========================================================= */
.visit-map{
margin: -42px -38px 18px;
border-radius: var(--radius) var(--radius) 0 0;
overflow: hidden;
border-bottom: 1px solid var(--line);
background: var(--cream);
}
.visit-map iframe{
filter: saturate(0.95);
}
.visit-directions{
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 9px 16px;
background: var(--rosa-blush);
border: 1px solid var(--rosa-200);
border-radius: 999px;
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--rosa-deep);
transition: all .25s ease;
}
.visit-directions:hover{
background: var(--rosa);
color: #fff;
border-color: var(--rosa);
}
@media (max-width: 720px){
.visit-map{ margin: -26px -22px 14px; height: 180px; }
.visit-map iframe{ height: 180px !important; }
}
/* =========================================================
CATERING PAGE
========================================================= */
.catering-section{
background:
radial-gradient(circle at 10% 0%, rgba(236,16,127,0.06), transparent 45%),
radial-gradient(circle at 90% 100%, rgba(212,175,55,0.08), transparent 45%),
var(--ivory);
}
.cat-options{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 1080px;
margin: 0 auto;
}
.cat-option{
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 32px 28px 26px;
box-shadow: var(--shadow-sm);
transition: all .35s ease;
display: flex;
flex-direction: column;
}
.cat-option:hover{
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--rosa-200);
}
.cat-feature{
background: linear-gradient(180deg, #fff, var(--rosa-blush));
border-color: var(--rosa-200);
box-shadow: 0 24px 50px -20px rgba(236,16,127,0.32);
}
.cat-icon{
font-size: 2.4rem;
line-height: 1;
margin-bottom: 14px;
}
.cat-tag{
position: absolute;
top: 16px;
right: 16px;
font-family: var(--sans);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-deep);
background: rgba(212,175,55,0.18);
padding: 4px 10px;
border-radius: 999px;
}
.cat-option h3{
font-family: var(--display);
font-size: 1.55rem;
margin: 0 0 10px;
color: var(--plum);
}
.cat-option > p{
flex: 1;
color: var(--muted);
margin: 0 0 14px;
font-size: 0.96rem;
}
.cat-option ul{
list-style: none;
margin: 0 0 20px;
padding: 0;
}
.cat-option ul li{
padding: 4px 0;
font-family: var(--sans);
font-size: 0.86rem;
color: var(--ink);
position: relative;
padding-left: 20px;
}
.cat-option ul li::before{
content: '·';
position: absolute;
left: 6px;
color: var(--rosa);
font-weight: 700;
font-size: 1.1rem;
}
.cat-price{
font-family: var(--display);
font-size: 1.3rem;
color: var(--rosa-deep);
padding-top: 14px;
border-top: 1px dotted var(--line);
}
/* How It Works */
.how-it-works{
background: var(--cream);
}
.hiw-steps{
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 14px;
align-items: stretch;
max-width: 1080px;
margin: 0 auto;
}
.hiw-step{
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 28px 26px;
box-shadow: var(--shadow-sm);
position: relative;
}
.hiw-num{
display: block;
font-family: var(--display);
font-size: 2rem;
color: var(--rosa);
margin-bottom: 8px;
letter-spacing: 0.04em;
}
.hiw-step h3{
font-family: var(--display);
font-size: 1.3rem;
margin: 0 0 8px;
color: var(--plum);
}
.hiw-step p{
color: var(--muted);
font-size: 0.94rem;
margin: 0;
}
.hiw-arrow{
display: flex;
align-items: center;
font-family: var(--display);
font-size: 1.8rem;
color: var(--rosa);
}
/* Quote form layout */
.quote-section{
background: var(--ivory);
}
.quote-grid{
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
.quote-intro h2{ margin-bottom: 14px; }
.quote-intro .lead{ margin-bottom: 22px; }
.quote-intro a{ color: var(--rosa); border-bottom: 1px solid var(--rosa-200); }
.quote-perks{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.quote-perks span{
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--plum);
background: var(--rosa-blush);
padding: 8px 14px;
border-radius: 999px;
}
.quote-form{
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 32px;
box-shadow: var(--shadow-md);
}
.quote-form.hidden{ display: none; }
@media (max-width: 900px){
.cat-options{ grid-template-columns: 1fr; }
.hiw-steps{
grid-template-columns: 1fr;
}
.hiw-arrow{
justify-content: center;
transform: rotate(90deg);
margin: -4px 0;
}
.quote-grid{ grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px){
.quote-form{ padding: 24px 20px; }
.hiw-step{ padding: 22px 20px; }
}
/* =========================================================
COOKIE CONSENT BANNER
========================================================= */
.cookie-banner{
position: fixed;
bottom: 16px;
left: 50%;
transform: translate(-50%, calc(100% + 30px));
z-index: 90;
max-width: 540px;
width: calc(100% - 32px);
background: var(--noche);
color: var(--ivory);
border: 1px solid var(--gold);
border-radius: 16px;
box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.cookie-banner.show{
transform: translate(-50%, 0);
}
.cookie-inner{
padding: 18px 20px;
}
.cookie-inner p{
margin: 0 0 12px;
font-family: var(--sans);
font-size: 0.86rem;
line-height: 1.55;
color: rgba(255,251,246,0.9);
}
.cookie-inner strong{
color: var(--gold-bright);
font-weight: 600;
margin-right: 4px;
}
.cookie-actions{
display: flex;
align-items: center;
gap: 14px;
}
.cookie-accept{
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
color: #fff;
border: 0;
padding: 10px 22px;
border-radius: 999px;
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: var(--taco-cursor);
box-shadow: 0 8px 18px -6px rgba(236,16,127,0.5);
}
.cookie-accept:hover{ transform: translateY(-1px); }
.cookie-learn{
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: rgba(255,251,246,0.6);
text-decoration: underline;
}
.cookie-learn:hover{ color: var(--gold-bright); }
.cookie-info{
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255,251,246,0.15);
}
.cookie-info p{
font-size: 0.78rem;
color: rgba(255,251,246,0.75);
margin: 0;
}
.cookie-info a{
color: var(--gold-bright);
text-decoration: underline;
}
@media (max-width: 720px){
.cookie-banner{
bottom: 96px; /* clear sticky mobile action bar on booking */
width: calc(100% - 16px);
}
}
/* =========================================================
CATERING BUILDER · Multi-step Configurator
========================================================= */
.cat-builder{
background:
radial-gradient(circle at 0% 0%, rgba(236,16,127,0.05), transparent 45%),
radial-gradient(circle at 100% 100%, rgba(212,175,55,0.05), transparent 45%),
var(--ivory);
}
/* Progress bar */
.cb-progress{
max-width: 720px;
margin: 0 auto 50px;
position: relative;
}
.cb-progress-track{
position: absolute;
top: 22px;
left: 12%;
right: 12%;
height: 2px;
background: var(--line);
z-index: 1;
}
.cb-progress-fill{
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--rosa), var(--gold));
transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.cb-step-list{
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
z-index: 2;
}
.cb-step-item{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.cb-step-num{
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-size: 1.1rem;
color: var(--muted);
transition: all .35s ease;
}
.cb-step-label{
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
transition: color .35s ease;
}
.cb-step-item.active .cb-step-num{
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
color: #fff;
border-color: var(--rosa);
box-shadow: 0 8px 18px -6px rgba(236,16,127,0.5);
transform: scale(1.05);
}
.cb-step-item.active .cb-step-label{
color: var(--rosa);
font-weight: 600;
}
.cb-step-item.done .cb-step-num{
background: var(--gold);
border-color: var(--gold);
color: var(--noche);
}
.cb-step-item.done .cb-step-num::after{ content: '✓'; }
.cb-step-item.done .cb-step-num > * { display: none; }
/* Form panels */
.cb-form{
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
padding: 40px 40px 0;
box-shadow: var(--shadow-md);
overflow: hidden;
}
.cb-panel{
display: none;
animation: cbFade .35s ease;
}
.cb-panel.active{ display: block; }
@keyframes cbFade{
from{ opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
.cb-h{
font-family: var(--display);
font-size: 1.8rem;
margin: 0 0 6px;
color: var(--plum);
}
.cb-help{
font-family: var(--serif);
font-style: italic;
color: var(--muted);
margin: 0 0 28px;
}
/* Fields */
.cb-field{ margin-bottom: 22px; }
.cb-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.cb-label{
display: block;
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--plum);
margin-bottom: 10px;
}
.cb-label-value{
color: var(--rosa);
font-size: 1rem;
font-family: var(--display);
letter-spacing: 0;
margin-left: 8px;
}
.cb-hint{
font-size: 0.78rem;
color: var(--muted);
margin: 6px 0 0;
}
.cb-field input[type="text"],
.cb-field input[type="email"],
.cb-field input[type="tel"],
.cb-field input[type="date"],
.cb-field select,
.cb-field textarea{
width: 100%;
font-family: var(--sans);
font-size: 1rem;
padding: 14px 16px;
background: var(--ivory);
border: 1.5px solid var(--line);
border-radius: 12px;
color: var(--ink);
transition: all .25s ease;
}
.cb-field input:focus,
.cb-field select:focus,
.cb-field textarea:focus{
border-color: var(--rosa);
box-shadow: 0 0 0 4px rgba(236,16,127,0.12);
outline: none;
background: #fff;
}
/* Range slider */
.cb-range{
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 6px;
background: var(--rosa-soft);
border-radius: 999px;
outline: none;
}
.cb-range::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
cursor: var(--taco-cursor);
box-shadow: 0 4px 12px -2px rgba(236,16,127,0.5);
}
.cb-range::-moz-range-thumb{
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
border: 0;
cursor: var(--taco-cursor);
}
.cb-range-marks{
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 0.72rem;
color: var(--muted);
font-family: var(--sans);
font-weight: 500;
letter-spacing: 0.06em;
}
/* Card grids (event type, service type) */
.cb-grid-4{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.cb-grid-3{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.cb-card{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 22px 14px 18px;
background: #fff;
border: 1.5px solid var(--line);
border-radius: 14px;
cursor: var(--taco-cursor);
transition: all .25s ease;
}
.cb-card:hover{
border-color: var(--rosa-200);
background: var(--rosa-blush);
transform: translateY(-2px);
}
.cb-card.active{
border-color: var(--rosa);
background: linear-gradient(135deg, rgba(236,16,127,0.08), rgba(236,16,127,0.02));
box-shadow: 0 0 0 3px rgba(236,16,127,0.15);
}
.cb-card .cb-icon{
font-size: 1.8rem;
line-height: 1;
margin-bottom: 10px;
}
.cb-card strong{
font-family: var(--display);
font-size: 1rem;
color: var(--plum);
margin-bottom: 4px;
line-height: 1.1;
}
.cb-card .cb-desc{
font-size: 0.74rem;
color: var(--muted);
font-family: var(--sans);
}
.cb-card-sm{ padding: 16px 12px; }
.cb-card-sm .cb-icon{ font-size: 1.5rem; margin-bottom: 6px; }
/* Packages */
.cb-packages{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.cb-pkg{
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 26px 24px 22px;
background: #fff;
border: 1.5px solid var(--line);
border-radius: 16px;
cursor: var(--taco-cursor);
transition: all .3s ease;
}
.cb-pkg:hover{
transform: translateY(-3px);
border-color: var(--rosa-200);
box-shadow: var(--shadow-sm);
}
.cb-pkg.active{
border-color: var(--rosa);
background: linear-gradient(180deg, #fff, var(--rosa-blush));
box-shadow: 0 0 0 3px rgba(236,16,127,0.18), 0 14px 30px -10px rgba(236,16,127,0.3);
}
.cb-pkg-feature{
background: linear-gradient(180deg, #fff, var(--cream));
border-color: var(--rosa-200);
}
.cb-pkg-tag{
position: absolute;
top: 14px;
right: 14px;
font-family: var(--sans);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-deep);
background: rgba(212,175,55,0.18);
padding: 4px 10px;
border-radius: 999px;
}
.cb-pkg-icon{
font-size: 2.2rem;
line-height: 1;
margin-bottom: 12px;
}
.cb-pkg h4{
font-family: var(--display);
font-size: 1.35rem;
margin: 0 0 8px;
color: var(--plum);
}
.cb-pkg p{
flex: 1;
font-size: 0.92rem;
color: var(--muted);
margin: 0 0 16px;
line-height: 1.5;
}
.cb-pkg-foot{
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
padding-top: 12px;
border-top: 1px dotted var(--line);
}
.cb-pkg-price{
font-family: var(--display);
font-size: 1.35rem;
color: var(--rosa-deep);
}
.cb-pkg-price em{
font-style: normal;
font-size: 0.86rem;
color: var(--muted);
font-family: var(--sans);
}
.cb-pkg-min{
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
/* Add-ons */
.cb-addons{
display: grid;
gap: 10px;
}
.cb-addon{
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
padding: 18px 22px;
background: #fff;
border: 1.5px solid var(--line);
border-radius: 12px;
cursor: var(--taco-cursor);
transition: all .2s ease;
}
.cb-addon:hover{
border-color: var(--rosa-200);
background: var(--rosa-blush);
}
.cb-addon input[type="checkbox"]{
width: 22px;
height: 22px;
accent-color: var(--rosa);
cursor: var(--taco-cursor);
}
.cb-addon-body strong{
display: block;
font-family: var(--display);
font-size: 1.05rem;
color: var(--plum);
margin-bottom: 2px;
}
.cb-addon-body span{
font-size: 0.86rem;
color: var(--muted);
}
.cb-addon-badge{
display: inline-block;
margin-left: 6px;
font-family: var(--sans);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--gold-deep);
background: rgba(212,175,55,0.18);
padding: 2px 6px;
border-radius: 999px;
vertical-align: 2px;
}
.cb-addon-price{
font-family: var(--display);
font-size: 1rem;
color: var(--rosa-deep);
white-space: nowrap;
}
.cb-addon:has(input:checked){
border-color: var(--rosa);
background: linear-gradient(135deg, rgba(236,16,127,0.06), rgba(236,16,127,0.02));
box-shadow: 0 0 0 2px rgba(236,16,127,0.12);
}
.cb-addon-feature{ background: linear-gradient(180deg, #fff, var(--cream)); }
.cb-disclaimer{
margin-top: 24px;
padding: 14px 18px;
background: rgba(212,175,55,0.08);
border-left: 3px solid var(--gold);
border-radius: 8px;
font-size: 0.86rem;
color: var(--plum);
font-style: italic;
}
/* Summary on step 4 */
.cb-summary{
background: linear-gradient(135deg, var(--rosa-blush), var(--cream));
border: 1px dashed var(--rosa-200);
border-radius: 14px;
padding: 22px 24px;
margin-bottom: 28px;
}
.cb-summary h4{
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rosa-deep);
margin: 0 0 14px;
}
.cb-sum-row{
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px dotted rgba(58,24,40,0.12);
font-family: var(--serif);
font-size: 0.95rem;
}
.cb-sum-row:last-child{ border-bottom: 0; }
.cb-sum-row strong{ color: var(--plum); }
.cb-sum-row span{ color: var(--rosa-deep); font-family: var(--display); }
.cb-sum-total{
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 14px;
padding-top: 14px;
border-top: 2px solid var(--rosa-200);
}
.cb-sum-total strong{ font-family: var(--display); font-size: 1.2rem; color: var(--plum); }
.cb-sum-total span{
font-family: var(--display);
font-size: 1.6rem;
color: var(--rosa-deep);
}
/* Sticky bottom bar */
.cb-bar{
position: sticky;
bottom: 0;
margin: 40px -40px 0;
padding: 18px 40px;
background: rgba(255,251,246,0.96);
backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
z-index: 10;
}
.cb-estimate{
display: flex;
flex-direction: column;
line-height: 1.1;
}
.cb-est-label{
font-family: var(--sans);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
.cb-est-amount{
font-family: var(--display);
font-size: 1.8rem;
color: var(--rosa-deep);
line-height: 1;
}
.cb-est-note{
font-family: var(--serif);
font-style: italic;
font-size: 0.76rem;
color: var(--muted);
margin-top: 4px;
}
.cb-actions{
display: flex;
align-items: center;
gap: 10px;
}
.cb-back{
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--plum);
background: transparent;
border: 1px solid var(--line);
padding: 12px 22px;
border-radius: 999px;
cursor: var(--taco-cursor);
transition: all .25s ease;
}
.cb-back:hover{ border-color: var(--rosa); color: var(--rosa); }
.cb-back[disabled]{ opacity: 0.4; pointer-events: none; }
.cb-next, .cb-submit{
padding: 14px 28px;
}
.cb-error{
margin: 14px 0 0;
padding: 0 40px;
color: var(--rosa);
font-size: 0.88rem;
min-height: 1.2em;
}
/* Success state */
.cb-done{
display: none;
text-align: center;
background: linear-gradient(180deg, #fff, var(--rosa-blush));
border: 2px solid var(--gold);
border-radius: 22px;
padding: 60px 40px;
max-width: 720px;
margin: 0 auto;
box-shadow: var(--shadow-md);
}
.cb-done.show{ display: block; }
.cb-done-icon{
font-size: 4rem;
line-height: 1;
margin-bottom: 16px;
animation: tacoSpin 0.9s ease;
}
.cb-done h3{ font-size: 2rem; margin-bottom: 14px; color: var(--rosa-deep); }
.cb-done p{ font-size: 1.05rem; color: var(--ink); margin: 0 0 12px; }
.cb-done strong{
color: var(--plum);
background: rgba(212,175,55,0.18);
padding: 1px 8px;
border-radius: 4px;
}
.cb-done a{ color: var(--rosa); border-bottom: 1px solid var(--rosa-200); }
.cb-done .btn{ margin-top: 22px; }
/* Hide all duplicate quote-section/perks/etc styles that may exist below */
.quote-section, .quote-grid, .quote-form, .quote-intro, .quote-perks{ display: none !important; }
/* Mobile */
@media (max-width: 720px){
.cb-form{ padding: 24px 18px 0; border-radius: 16px; }
.cb-step-label{ display: none; }
.cb-step-num{ width: 36px; height: 36px; font-size: 0.9rem; }
.cb-progress-track{ top: 18px; }
.cb-row{ grid-template-columns: 1fr; gap: 12px; }
.cb-grid-4{ grid-template-columns: 1fr 1fr; }
.cb-grid-3{ grid-template-columns: 1fr; }
.cb-packages{ grid-template-columns: 1fr; }
.cb-pkg{ padding: 20px 18px; }
.cb-addon{
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
}
.cb-addon-price{ grid-column: 1 / -1; text-align: right; padding-top: 4px; }
.cb-bar{
flex-direction: column;
align-items: stretch;
gap: 12px;
margin: 28px -18px 0;
padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
}
.cb-actions{ width: 100%; justify-content: space-between; }
.cb-actions .btn-luxe, .cb-actions .cb-back{ flex: 1; padding: 12px 14px; font-size: 0.74rem; }
.cb-est-amount{ font-size: 1.5rem; }
.cb-h{ font-size: 1.4rem; }
.cb-done{ padding: 40px 24px; }
.cb-done h3{ font-size: 1.5rem; }
}
/* =========================================================
CATERING PAGE · lift floating UI above the sticky wizard bar on mobile
========================================================= */
@media (max-width: 720px){
body.page-catering .chat-launcher{
bottom: calc(140px + env(safe-area-inset-bottom));
}
body.page-catering .mariachi-toggle{
bottom: calc(140px + env(safe-area-inset-bottom));
}
body.page-catering .cookie-banner{
bottom: calc(180px + env(safe-area-inset-bottom));
}
}
/* =========================================================
MODERN MEXICAN · PHOTOGRAPHY INTEGRATION
Real food + room photography across the site.
========================================================= */
/* Story art — replace decorative gradients with real photos */
.story-art .art-card{
background: var(--noche);
}
.story-art .art-card img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story-art .art-card-1::after,
.story-art .art-card-2::after{
display: none;
}
.story-art .art-card-1{
border: 1px solid rgba(212,175,55,0.25);
}
.story-art .art-card-2{
border: 4px solid var(--ivory);
box-shadow: 0 18px 48px rgba(23,10,16,0.32);
}
/* Chef's Picks · photo card layout */
.pick-card{
padding: 0;
overflow: hidden;
}
.pick-photo{
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--cream);
}
.pick-photo img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.pick-card:hover .pick-photo img{
transform: scale(1.05);
}
.pick-photo::after{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(23,10,16,0.32));
pointer-events: none;
}
.pick-body{
padding: 24px 26px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.pick-body > p{
flex: 1;
color: var(--muted);
font-size: 0.94rem;
line-height: 1.5;
margin: 0 0 18px;
}
.pick-feature .pick-photo::after{
background: linear-gradient(180deg, transparent 50%, rgba(236,16,127,0.35));
}
/* Gallery · real photography in tiles */
.g-tile{
background: var(--noche);
}
.g-photo{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
filter: saturate(1.05) contrast(1.03);
}
.g-tile::before{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(23,10,16,0) 40%, rgba(23,10,16,0.55) 100%);
z-index: 1;
transition: background .4s ease;
pointer-events: none;
}
.g-tile:hover .g-photo{
transform: scale(1.06);
filter: saturate(1.15) contrast(1.06);
}
.g-tile:hover::before{
background: linear-gradient(180deg, rgba(23,10,16,0.05) 0%, rgba(23,10,16,0.7) 100%);
}
.g-tile::after{
display: none;
}
.g-tile .g-label{
opacity: 1;
transform: translateX(-50%) translateY(0);
bottom: 20px;
font-family: var(--display);
font-size: 1.1rem;
letter-spacing: 0.06em;
color: var(--ivory);
text-shadow: 0 2px 14px rgba(23,10,16,0.85);
z-index: 3;
}
.g-tile .g-label::before{
content: '';
display: block;
width: 28px;
height: 1px;
background: var(--gold-bright);
margin: 0 auto 8px;
}
.g-1 .g-label{
font-size: 1.4rem;
letter-spacing: 0.08em;
}
/* Page hero · photographic backdrop variant (light enough that the food shows
through, dark enough at top + bottom that gold title and serif sub read) */
.page-hero-photo{
background: var(--noche);
}
.page-hero-photo .page-hero-bg{
background:
linear-gradient(180deg,
rgba(58,24,40,0.82) 0%,
rgba(58,24,40,0.55) 38%,
rgba(184,9,94,0.40) 62%,
rgba(58,24,40,0.88) 100%),
var(--hero-photo) var(--hero-pos, center) / cover no-repeat;
filter: saturate(1.05);
}
.page-hero-photo .page-hero-bg::after{
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 55%, rgba(236,16,127,0.18) 0%, transparent 60%),
radial-gradient(ellipse at 50% 100%, transparent 0%, rgba(58,24,40,0.45) 95%);
pointer-events: none;
mix-blend-mode: normal;
}
/* compact hero — tighter on tall pages so the photo doesn't dominate */
.page-hero-photo{
min-height: 48vh;
padding: 140px 20px 60px;
}
/* Menu dish · photo variant */
.dish-photo{
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
gap: 18px;
align-items: center;
padding: 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow-sm);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
min-width: 0;
}
.dish-photo:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--rosa-200);
}
.dish-photo .dish-img{
width: 110px;
height: 110px;
object-fit: cover;
border-radius: 10px;
display: block;
box-shadow: 0 6px 18px rgba(23,10,16,0.18);
}
.dish-photo .dish-body{
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
/* allow title to wrap inside compact photo card */
.dish-photo .dish-head{
flex-wrap: wrap;
row-gap: 4px;
}
.dish-photo .dish-head h4{
white-space: normal;
overflow: visible;
text-overflow: clip;
font-size: 1.1rem;
line-height: 1.2;
}
.dish-photo .dish-head::after,
.dish-photo .dish-head::before{
content: none !important;
display: none !important;
border: 0 !important;
flex: 0 !important;
width: 0 !important;
}
.dish-photo .dish-head .price{
margin-left: auto;
flex-shrink: 0;
}
.dish-photo .tag-rec{
display: inline-block;
margin-left: 6px;
}
.dish-photo p{
font-size: 0.9rem;
line-height: 1.45;
}
.dish-photo.dish-feature{
background: linear-gradient(180deg, #fff 0%, var(--rosa-blush) 100%);
border-color: var(--rosa-200);
}
@media (max-width: 640px){
.dish-photo{
grid-template-columns: 90px minmax(0, 1fr);
gap: 12px;
padding: 12px;
}
.dish-photo .dish-img{
width: 90px;
height: 90px;
}
.dish-photo .dish-head h4{ font-size: 1rem; }
}
/* Responsive tweaks for new photo layouts */
@media (max-width: 900px){
.pick-photo{ aspect-ratio: 16 / 10; }
}
@media (max-width: 640px){
.pick-body{ padding: 20px 20px; }
.g-tile .g-label{
font-size: 0.95rem;
}
.g-1 .g-label{ font-size: 1.1rem; }
}
/* =========================================================
MOBILE AUDIT FIXES · cross-page polish for 320–414px phones
========================================================= */
/* ---- 1. Hero CTA buttons stack full-width on narrow phones ---- */
@media (max-width: 480px){
.hero-cta{
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.hero-cta .btn-luxe{
width: 100%;
justify-content: center;
}
.hero-meta{
flex-wrap: wrap;
justify-content: center;
padding: 12px 18px;
font-size: 0.66rem;
letter-spacing: 0.2em;
}
}
/* ---- 2. Menu toolbar · search above filters so neither crushes the other ---- */
@media (max-width: 720px){
.menu-tools{
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.menu-search{
flex: 1 1 auto;
min-width: 0;
width: 100%;
}
.menu-search input{
height: 46px;
font-size: 16px;
}
}
/* ---- 3. Menu jump nav · visual hint that it scrolls horizontally ---- */
@media (max-width: 720px){
.menu-toolbar{
position: relative;
}
.menu-jump{
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
}
.menu-jump a{
scroll-snap-align: start;
white-space: nowrap;
}
}
/* ---- 4. Piñata prize / welcome-back cards fit narrow phones ---- */
@media (max-width: 480px){
.pinata-prize,
.pinata-welcome-back{
padding: 30px 20px;
max-width: 100%;
border-radius: 18px;
}
.prize-title{ font-size: 1.7rem; }
.prize-text{ font-size: 0.95rem; }
.prize-fine{ font-size: 0.74rem; line-height: 1.45; }
.prize-stars{ font-size: 1.3rem; gap: 10px; }
}
/* ---- 6. Celebration chips · keep helper text on its own line ---- */
@media (max-width: 720px){
.celebrate-chip .chip-extra{
white-space: normal;
flex: 1;
text-align: right;
font-size: 0.7rem;
line-height: 1.3;
}
}
@media (max-width: 380px){
.celebrate-chip{
flex-direction: row;
flex-wrap: wrap;
text-align: left;
padding: 12px 14px;
gap: 10px;
row-gap: 4px;
}
.celebrate-chip .chip-icon{ flex: 0 0 auto; }
.celebrate-chip .chip-label{ flex: 1 1 auto; }
.celebrate-chip .chip-extra{
flex-basis: 100%;
margin-left: 38px;
text-align: left;
}
}
/* ---- 7. Page hero photo · better crop on portrait phones ---- */
@media (max-width: 720px){
.page-hero{
min-height: 44vh;
padding-top: 120px;
padding-bottom: 50px;
}
.page-hero-photo{
min-height: 40vh;
padding-top: 110px;
padding-bottom: 40px;
}
.page-hero-photo .page-hero-bg{
background-size: cover;
}
.page-hero-photo .page-hero-bg::after{
background: radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(23,10,16,0.38) 90%);
}
.page-title{ font-size: clamp(2.4rem, 11vw, 3.6rem); }
.page-sub{ font-size: 1rem; }
.page-eyebrow{ font-size: 0.66rem; letter-spacing: 0.3em; }
}
/* ---- 8. Brand logo · smoother sizing between 720 and 420 viewports ---- */
@media (max-width: 720px){
.brand-mark-svg{ width: 30px; height: 30px; }
.brand-name{ font-size: 0.95rem; }
}
@media (max-width: 420px){
.brand-mark-svg{ width: 26px; height: 26px; }
.brand-name{ display: none; }
}
/* ---- 9. Global mobile guards · prevent unwanted horizontal scroll ---- */
@media (max-width: 720px){
html, body{ overflow-x: hidden; }
.container{ max-width: 100%; }
/* iframes inside maps / sections should never overflow */
iframe{ max-width: 100%; }
/* sarape stripe height tame on mobile */
.sarape{ height: 18px; }
/* marquee text smaller so it reads */
.marquee-track > span{ font-size: 0.78rem; padding: 0 18px; }
}
/* ---- 10. Modern Mexican photo cards · gallery 2-column on mobile, with proper sizing ---- */
@media (max-width: 720px){
.gallery-grid{
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 180px);
gap: 10px;
}
.g-1{
grid-column: span 2;
grid-row: span 1;
}
.g-tile .g-label{
font-size: 0.9rem;
bottom: 14px;
}
.g-1 .g-label{ font-size: 1.05rem; }
}
/* ---- 11. Story art · keep photos legible at narrow widths ---- */
@media (max-width: 720px){
.story-art{ height: 380px; }
.art-card-1{ width: 75%; height: 65%; }
.art-card-2{ width: 65%; height: 55%; }
.art-badge{ width: 100px; height: 100px; }
.art-badge .script{ font-size: 1.25rem; }
.art-badge strong{ font-size: 1.3rem; }
}
/* ---- 12. Chef's picks · stack to single column with full-bleed photos ---- */
@media (max-width: 720px){
.chef-picks{ grid-template-columns: 1fr; gap: 16px; }
.pick-photo{ aspect-ratio: 16 / 9; }
}
/* ---- 13. Sticky nav · keep usable at very narrow widths ---- */
@media (max-width: 380px){
.nav-inner{ padding: 10px 12px; }
}
/* =========================================================
INLINE SVG ICONS · replacement for emoji icons across the site
========================================================= */
.ico{
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.125em;
fill: none;
stroke: currentColor;
flex-shrink: 0;
}
/* size each icon slot so SVGs sit cleanly in their containers */
.dd-icon .ico,
.ms-icon .ico,
.cta-icon .ico,
.channel-icon .ico,
.chip-icon .ico,
.perk-icon .ico,
.cat-icon .ico,
.cb-icon .ico,
.cb-pkg-icon .ico{
width: 1.6rem;
height: 1.6rem;
display: block;
margin: 0 auto;
color: var(--rosa-deep);
}
.cta-icon .ico,
.perk-icon .ico{ width: 1.8rem; height: 1.8rem; }
.channel-icon .ico{
width: 1.9rem;
height: 1.9rem;
color: var(--plum);
}
.channel-card.primary .channel-icon .ico{ color: #fff; }
.chip-icon .ico{
width: 1.45rem;
height: 1.45rem;
color: var(--rosa);
}
.celebrate-premium .chip-icon .ico{ color: var(--gold-deep); }
.mab-icon .ico{
width: 1.3rem;
height: 1.3rem;
color: var(--plum);
}
.mab-primary .mab-icon .ico{ color: #fff; }
.ticket-trophy .ico,
.success-trophy .ico{
width: 3rem;
height: 3rem;
color: var(--gold-deep);
filter: drop-shadow(0 4px 12px rgba(212,175,55,0.45));
}
.success-icon .ico,
.cb-done-icon .ico{
width: 3rem;
height: 3rem;
color: var(--rosa-deep);
}
/* daily-deal & menu-special icons: subtle dark stroke against light card */
.dd-icon .ico,
.ms-icon .ico{
color: var(--plum);
opacity: 0.85;
}
.dd-feature .dd-icon .ico,
.ms-feature .ms-icon .ico{
color: var(--rosa-deep);
opacity: 1;
}
/* =========================================================
MUNDIAL 2026 · HOMEPAGE PROMO
Photographic backdrop, large countdown, three numbered cards.
========================================================= */
.mundial-promo{
position: relative;
padding: 110px 0 120px;
overflow: hidden;
color: var(--ivory);
background: var(--noche);
isolation: isolate;
}
.mundial-bg{
position: absolute; inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(23,10,16,0.78) 0%, rgba(23,10,16,0.68) 40%, rgba(23,10,16,0.9) 100%),
radial-gradient(ellipse at 50% 30%, rgba(236,16,127,0.18), transparent 55%),
var(--mundial-photo) center / cover no-repeat;
filter: saturate(1.05);
}
.mundial-inner{
position: relative;
text-align: center;
}
.mundial-eyebrow{
color: var(--gold-bright);
margin: 0 0 18px;
}
.mundial-title{
font-family: var(--display);
font-size: clamp(2.6rem, 6vw, 4.6rem);
line-height: 1.02;
margin: 0 0 16px;
background: linear-gradient(180deg, #FFEFC8 0%, var(--gold-bright) 45%, var(--gold) 70%, #8A6E18 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 8px 24px rgba(212,175,55,0.25));
}
.mundial-sub{
font-family: var(--serif);
font-size: 1.05rem;
color: rgba(255,255,255,0.85);
max-width: 620px;
margin: 0 auto 32px;
line-height: 1.5;
}
/* Countdown */
.countdown{
display: inline-flex;
align-items: center;
gap: 14px;
padding: 22px 28px;
border: 1px solid rgba(232,163,61,0.4);
border-radius: 18px;
background: rgba(23,10,16,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
margin: 0 0 50px;
box-shadow: 0 20px 60px -24px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.cd-unit{
display: flex;
flex-direction: column;
align-items: center;
min-width: 64px;
}
.cd-num{
font-family: var(--display);
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1;
color: var(--ivory);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.cd-label{
margin-top: 8px;
font-family: var(--sans);
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-bright);
}
.cd-sep{
font-family: var(--display);
font-size: clamp(1.6rem, 4vw, 2.4rem);
color: rgba(232,163,61,0.55);
align-self: flex-start;
margin-top: 4px;
user-select: none;
}
/* Three cards */
.mundial-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 0 0 44px;
text-align: left;
}
.mundial-card{
background: rgba(255,255,255,0.04);
border: 1px solid rgba(232,163,61,0.22);
border-radius: 16px;
padding: 28px 26px 26px;
transition: transform .35s ease, border-color .35s ease, background .35s ease;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.mundial-card:hover{
transform: translateY(-4px);
border-color: var(--gold-bright);
background: rgba(255,255,255,0.07);
}
.mundial-num{
display: block;
font-family: var(--display);
font-size: 0.74rem;
letter-spacing: 0.3em;
color: var(--gold-bright);
margin-bottom: 18px;
}
.mundial-card h3{
font-family: var(--display);
font-size: 1.5rem;
line-height: 1.15;
color: var(--ivory);
margin: 0 0 10px;
font-weight: 400;
}
.mundial-card p{
color: rgba(255,255,255,0.78);
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
}
.mundial-card-feature{
background: linear-gradient(135deg, rgba(236,16,127,0.18), rgba(232,163,61,0.08));
border-color: rgba(236,16,127,0.45);
}
.mundial-card-feature h3{ color: #fff; }
.mundial-card-feature:hover{
border-color: var(--rosa-bright);
background: linear-gradient(135deg, rgba(236,16,127,0.24), rgba(232,163,61,0.12));
}
.mundial-cta{
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* Mobile */
@media (max-width: 720px){
.mundial-promo{ padding: 70px 0 80px; }
.countdown{
flex-wrap: wrap;
gap: 8px;
padding: 16px 14px;
width: 100%;
max-width: 360px;
justify-content: center;
}
.cd-unit{ min-width: 56px; }
.cd-sep{ display: none; }
.mundial-grid{
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 32px;
}
.mundial-cta{ flex-direction: column; align-items: stretch; max-width: 340px; margin: 0 auto; }
.mundial-cta .btn-luxe{ width: 100%; justify-content: center; }
}
/* =========================================================
EVENTS PAGE · WHAT'S ON GRID (refined photo cards)
========================================================= */
.events-on{
background:
radial-gradient(ellipse at 0% 0%, rgba(232,163,61,0.06), transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(236,16,127,0.04), transparent 50%),
linear-gradient(180deg, var(--cream), var(--ivory));
padding-top: 90px;
padding-bottom: 90px;
}
.events-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 40px;
}
.event-card{
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.event-card:hover{
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--rosa-200);
}
.event-photo{
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.event-photo img{
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.event-card:hover .event-photo img{ transform: scale(1.05); }
.event-photo::after{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(23,10,16,0.25));
pointer-events: none;
}
.event-body{
padding: 22px 24px 26px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.event-tag{
align-self: flex-start;
font-family: var(--sans);
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
background: rgba(212,175,55,0.12);
padding: 5px 11px;
border-radius: 999px;
font-weight: 600;
}
.event-tag-hot{
color: #fff;
background: linear-gradient(135deg, var(--rosa), var(--rosa-deep));
}
.event-body h3{
font-family: var(--display);
font-size: 1.45rem;
line-height: 1.15;
color: var(--plum);
margin: 0;
font-weight: 400;
}
.event-body p{
color: var(--muted);
font-size: 0.96rem;
line-height: 1.55;
margin: 0;
flex: 1;
}
.event-link{
align-self: flex-start;
margin-top: 4px;
font-family: var(--sans);
font-size: 0.85rem;
letter-spacing: 0.04em;
font-weight: 600;
color: var(--rosa-deep);
text-decoration: none;
transition: gap .25s ease, color .25s ease;
}
.event-link:hover{ color: var(--rosa); }
.event-link span{ display: inline-block; transition: transform .25s ease; }
.event-link:hover span{ transform: translateX(4px); }
/* Featured card · same size as siblings, just visually emphasised */
.event-card-feature{
border: 1px solid var(--rosa-200);
background: linear-gradient(180deg, #fff 0%, var(--rosa-blush) 100%);
box-shadow: 0 18px 40px -22px rgba(236,16,127,0.35);
}
.event-card-feature:hover{
border-color: var(--rosa);
box-shadow: 0 26px 50px -22px rgba(236,16,127,0.45);
}
.event-card-feature .event-body h3{
color: var(--rosa-deep);
}
@media (max-width: 960px){
.events-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
.events-grid{ grid-template-columns: 1fr; gap: 16px; }
}
/* =========================================================
PASAPORTE 2026 · refined editorial replacement
========================================================= */
.pasaporte{
position: relative;
padding: 100px 0 110px;
background: var(--ivory);
text-align: center;
isolation: isolate;
}
.pasaporte::before{
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: var(--gold);
}
.pasaporte-head{
max-width: 720px;
margin: 0 auto 40px;
}
.pasaporte-title{
font-family: var(--display);
font-size: clamp(2.2rem, 5vw, 3.6rem);
color: var(--plum);
margin: 8px 0 16px;
line-height: 1.05;
font-weight: 400;
}
.pasaporte-title em{
font-style: italic;
color: var(--rosa-deep);
}
.pasaporte .lead{
font-size: 1.02rem;
color: var(--muted);
line-height: 1.6;
}
/* Light variant of countdown for ivory background */
.countdown-light{
background: #fff;
border-color: var(--line);
box-shadow: var(--shadow-sm);
}
.countdown-light .cd-num{ color: var(--plum); }
.countdown-light .cd-label{ color: var(--gold-deep); }
.countdown-light .cd-sep{ color: rgba(212,175,55,0.5); }
.pasaporte-mechanic{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 920px;
margin: 60px auto 70px;
text-align: left;
}
.pmech-step{
padding: 28px 26px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
box-shadow: var(--shadow-sm);
}
.pmech-num{
display: block;
font-family: var(--display);
font-size: 0.74rem;
letter-spacing: 0.3em;
color: var(--gold-deep);
margin-bottom: 14px;
}
.pmech-step h4{
font-family: var(--display);
font-size: 1.35rem;
margin: 0 0 8px;
color: var(--plum);
font-weight: 400;
}
.pmech-step p{
color: var(--muted);
font-size: 0.94rem;
line-height: 1.55;
margin: 0;
}
.pasaporte-perks-head{
max-width: 640px;
margin: 0 auto 32px;
text-align: center;
}
.pasaporte-perks-head .eyebrow{
margin: 0 0 10px;
}
.pasaporte-perks-head h3{
font-family: var(--display);
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--plum);
font-weight: 400;
margin: 0;
letter-spacing: -0.005em;
}
.pasaporte-perks-head h3::after{
content: '';
display: block;
width: 40px;
height: 1px;
background: var(--gold);
margin: 16px auto 0;
}
.pasaporte-perks{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
max-width: 920px;
margin: 0 auto 70px;
text-align: left;
}
.pperk{
position: relative;
display: grid;
grid-template-columns: 60px 1fr;
gap: 20px;
align-items: flex-start;
padding: 26px 28px;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pperk::before{
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--gold) 0%, var(--rosa-deep) 100%);
opacity: 0;
transition: opacity .35s ease;
}
.pperk:hover{
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: rgba(212,175,55,0.45);
}
.pperk:hover::before{ opacity: 1; }
.pperk:hover .pperk-icon{
background: linear-gradient(135deg, rgba(212,175,55,0.28), rgba(236,16,127,0.10));
border-color: rgba(212,175,55,0.55);
}
.pperk-icon{
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.04));
color: var(--gold-deep);
border: 1px solid rgba(212,175,55,0.30);
flex-shrink: 0;
transition: background .35s ease, border-color .35s ease;
}
.pperk-icon .ico{ width: 28px; height: 28px; }
.pperk-body{
min-width: 0;
}
.pperk-tag{
display: inline-block;
font-family: var(--display);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
background: rgba(212,175,55,0.10);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.pperk h5{
font-family: var(--display);
font-size: 1.18rem;
margin: 0 0 8px;
color: var(--plum);
font-weight: 500;
line-height: 1.25;
}
.pperk p{
color: var(--muted);
font-size: 0.93rem;
line-height: 1.55;
margin: 0;
}
.pasaporte-form-wrap{
max-width: 720px;
margin: 0 auto;
text-align: left;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 36px 36px 32px;
box-shadow: var(--shadow-md);
}
.pasaporte-form-text{
margin-bottom: 22px;
text-align: center;
}
.pasaporte-form-text h3{
font-family: var(--display);
font-size: 1.8rem;
color: var(--rosa-deep);
margin: 0 0 8px;
font-weight: 400;
}
.pasaporte-form-text p{
color: var(--muted);
font-size: 0.96rem;
line-height: 1.5;
margin: 0;
}
.pasaporte-fine{
margin-top: 28px;
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.02em;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 720px){
.pasaporte{ padding: 70px 0 80px; }
.pasaporte-mechanic{ grid-template-columns: 1fr; gap: 14px; margin: 40px auto 50px; }
.pasaporte-perks{ grid-template-columns: 1fr; gap: 22px; margin-bottom: 50px; }
.pasaporte-form-wrap{ padding: 26px 22px; }
.pasaporte-form-text h3{ font-size: 1.5rem; }
}
/* =========================================================
EVENTS PAGE HERO · papel picado banner + refined treatment
========================================================= */
.page-hero-events{
min-height: 64vh;
padding-top: 150px;
padding-bottom: 70px;
}
.page-hero-events .page-hero-bg{
background:
linear-gradient(180deg,
rgba(23,10,16,0.45) 0%,
rgba(23,10,16,0.20) 35%,
rgba(23,10,16,0.20) 55%,
rgba(23,10,16,0.65) 100%),
var(--hero-photo) var(--hero-pos, center) / cover no-repeat;
}
.page-hero-events .page-title{
font-size: clamp(2.6rem, 7vw, 5.4rem);
line-height: 1.02;
}
.page-hero-events .page-sub{
margin-top: 14px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.page-hero-cta{
display: inline-flex;
gap: 14px;
margin-top: 28px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 600px){
.page-hero-cta{
width: 100%;
flex-direction: column;
align-items: stretch;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.page-hero-cta .btn-luxe{ width: 100%; justify-content: center; }
}
.papel-strip{
position: absolute;
top: 70px;
left: 0; right: 0;
z-index: 1;
height: 56px;
pointer-events: none;
overflow: hidden;
}
.papel-strip svg{
width: 100%;
height: 100%;
display: block;
}
.papel-strip .papel-flags > g{
transform-origin: 0 0;
animation: papelSway 7s ease-in-out infinite alternate;
}
.papel-strip .papel-flags > g:nth-child(2n) { animation-delay: -1.2s; animation-duration: 6s; }
.papel-strip .papel-flags > g:nth-child(3n) { animation-delay: -2.4s; animation-duration: 8s; }
.papel-strip .papel-flags > g:nth-child(4n) { animation-delay: -0.6s; animation-duration: 6.5s; }
@keyframes papelSway{
0% { transform: rotate(-2deg); }
100% { transform: rotate(2deg); }
}
@media (max-width: 720px){
.page-hero-events{ min-height: 46vh; padding-top: 120px; }
.papel-strip{ top: 60px; height: 40px; }
.papel-strip svg{ transform: scale(0.85); transform-origin: center top; }
}
/* =========================================================
LEGAL PAGES · privacy, terms, accessibility, pasaporte rules
========================================================= */
.page-hero-legal{
min-height: 38vh;
padding-top: 150px;
padding-bottom: 50px;
text-align: center;
overflow: hidden;
}
.page-hero-legal .page-hero-bg{
background:
radial-gradient(ellipse at 20% 0%, rgba(236,16,127,0.18), transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(212,175,55,0.18), transparent 55%),
linear-gradient(180deg, #2a1220 0%, var(--plum) 100%);
}
.page-hero-legal .page-hero-content{
position: relative;
z-index: 2;
}
.page-hero-legal .page-eyebrow{
color: var(--gold-bright);
}
.page-hero-legal .page-title{
color: #fff;
}
.page-hero-legal .page-sub{
color: var(--rose-100);
max-width: 560px;
margin: 12px auto 0;
}
.legal-section{
background: var(--ivory);
padding: 70px 0 100px;
}
.legal-wrap{
max-width: 760px;
text-align: left;
color: var(--plum);
font-size: 1rem;
line-height: 1.75;
}
.legal-meta{
font-size: 0.82rem;
letter-spacing: 0.02em;
color: var(--gold-deep);
background: rgba(212,175,55,0.10);
border-left: 3px solid var(--gold);
padding: 12px 18px;
border-radius: 4px;
margin: 0 0 32px;
}
.legal-intro{
font-size: 1.12rem;
line-height: 1.7;
color: var(--plum);
margin: 0 0 40px;
}
.legal-wrap h2{
font-family: var(--display);
font-size: 1.45rem;
font-weight: 500;
color: var(--plum);
margin: 48px 0 14px;
line-height: 1.25;
letter-spacing: -0.005em;
}
.legal-wrap h2::before{
content: '';
display: block;
width: 28px;
height: 1px;
background: var(--gold);
margin-bottom: 14px;
}
.legal-wrap h3{
font-family: var(--display);
font-size: 1.15rem;
font-weight: 500;
color: var(--plum);
margin: 28px 0 10px;
}
.legal-wrap p{
margin: 0 0 16px;
color: var(--plum);
}
.legal-wrap ul,
.legal-wrap ol{
margin: 0 0 20px;
padding-left: 22px;
}
.legal-wrap li{
margin-bottom: 10px;
color: var(--plum);
}
.legal-wrap li::marker{
color: var(--gold);
}
.legal-wrap a{
color: var(--rosa-deep);
text-decoration: underline;
text-decoration-color: rgba(184,9,94,0.35);
text-underline-offset: 3px;
transition: color .2s ease, text-decoration-color .2s ease;
}
.legal-wrap a:hover{
color: var(--rosa);
text-decoration-color: var(--rosa);
}
.legal-wrap strong{
color: var(--plum);
font-weight: 600;
}
.legal-wrap em{
font-style: italic;
color: var(--plum);
}
.legal-note{
margin-top: 48px;
padding: 18px 22px;
background: rgba(58,24,40,0.04);
border: 1px dashed rgba(58,24,40,0.25);
border-radius: 8px;
font-size: 0.88rem;
line-height: 1.55;
color: var(--muted);
}
/* Secondary legal nav inside footer */
.footer-legal{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 18px;
margin-top: -8px;
}
.footer-legal a{
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rose-200);
opacity: 0.75;
transition: opacity .2s ease, color .2s ease;
}
.footer-legal a:hover{
opacity: 1;
color: #fff;
}
@media (max-width: 720px){
.page-hero-legal{ min-height: 32vh; padding-top: 110px; padding-bottom: 36px; }
.legal-section{ padding: 50px 0 70px; }
.legal-wrap{ font-size: 0.96rem; line-height: 1.7; }
.legal-intro{ font-size: 1.02rem; }
.legal-wrap h2{ font-size: 1.25rem; margin-top: 38px; }
.footer-legal{ gap: 6px 14px; }
.footer-legal a{ font-size: 0.64rem; letter-spacing: 0.18em; }
}
/* =========================================================
COPA DEL MUNDO 2026 · neon section + dedicated page
========================================================= */
/* ---- Nav link: animated neon Copa marker ---- */
.nav-links .nav-copa{
position: relative;
color: var(--rosa-bright) !important;
font-weight: 500;
text-shadow: 0 0 8px rgba(236,16,127,0.45);
animation: copaPulse 2.4s ease-in-out infinite;
}
.nav-links .nav-copa::before{
content: '●';
display: inline-block;
font-size: 0.5em;
margin-right: 6px;
vertical-align: middle;
color: var(--rosa-bright);
filter: drop-shadow(0 0 6px rgba(236,16,127,0.7));
}
@keyframes copaPulse{
0%, 100%{ text-shadow: 0 0 8px rgba(236,16,127,0.45); }
50% { text-shadow: 0 0 14px rgba(255,46,160,0.85), 0 0 28px rgba(236,16,127,0.45); }
}
.nav.scrolled .nav-links .nav-copa{
color: var(--rosa-bright) !important;
}
/* ---- Home page Copa banner ---- */
.copa-banner{
position: relative;
background:
radial-gradient(ellipse at 15% 20%, rgba(236,16,127,0.22), transparent 55%),
radial-gradient(ellipse at 85% 80%, rgba(212,175,55,0.16), transparent 55%),
linear-gradient(135deg, #1a0810 0%, var(--plum) 50%, #2a1220 100%);
padding: 70px 0 80px;
overflow: hidden;
isolation: isolate;
}
.copa-banner-grain{
position: absolute; inset: 0;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
mix-blend-mode: overlay;
pointer-events: none;
}
.copa-banner-inner{
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 50px;
align-items: center;
position: relative;
z-index: 2;
}
.copa-banner-text{ color: var(--rose-100); }
.copa-banner-eyebrow{
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--display);
font-size: 0.74rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-bright);
margin: 0 0 18px;
}
.dot-pulse{
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rosa-bright);
box-shadow: 0 0 12px var(--rosa-bright);
animation: copaDotPulse 1.6s ease-in-out infinite;
}
@keyframes copaDotPulse{
0%,100%{ transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.6; }
}
.copa-banner-title{
font-family: 'Bebas Neue', var(--display);
font-size: clamp(2.4rem, 6vw, 4.6rem);
line-height: 0.95;
font-weight: 400;
color: #fff;
letter-spacing: 0.02em;
margin: 0 0 18px;
}
.copa-banner-title span{ display: block; }
.copa-banner-glow{
color: var(--rosa-bright);
text-shadow:
0 0 10px rgba(255,46,160,0.85),
0 0 26px rgba(236,16,127,0.55),
0 0 50px rgba(255,0,170,0.35);
animation: copaGlow 3s ease-in-out infinite;
}
@keyframes copaGlow{
0%,100%{ text-shadow: 0 0 10px rgba(255,46,160,0.85), 0 0 26px rgba(236,16,127,0.55), 0 0 50px rgba(255,0,170,0.35); }
50% { text-shadow: 0 0 16px rgba(255,46,160,1), 0 0 38px rgba(236,16,127,0.75), 0 0 70px rgba(255,0,170,0.55); }
}
.copa-banner-sub{
font-size: 1.04rem;
line-height: 1.65;
max-width: 540px;
color: var(--rose-100);
margin: 0 0 22px;
}
.copa-banner-meta{
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin: 0 0 28px;
font-size: 0.86rem;
color: var(--rose-200);
}
.copa-banner-meta-item{
padding: 6px 12px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
background: rgba(255,255,255,0.03);
}
.copa-banner-meta-item strong{ color: var(--gold-bright); font-weight: 500; }
.copa-banner-ctas{ display: flex; flex-wrap: wrap; gap: 12px; }
.copa-banner-side{
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.copa-banner-flags{
display: flex;
gap: 14px;
font-size: 2.4rem;
filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
}
.cflag{ display: inline-block; animation: cflagWave 3s ease-in-out infinite; }
.cflag:nth-child(2){ animation-delay: -1s; }
.cflag:nth-child(3){ animation-delay: -2s; }
@keyframes cflagWave{
0%,100%{ transform: translateY(0) rotate(-4deg); }
50% { transform: translateY(-6px) rotate(4deg); }
}
.copa-banner-countdown{
display: flex;
align-items: center;
gap: 6px;
padding: 14px 18px;
border-radius: 14px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.08);
}
.copa-banner-countdown .cd-num{ color: var(--rosa-bright); font-family: 'Bebas Neue', var(--display); font-size: 2rem; }
.copa-banner-countdown .cd-label{ color: var(--rose-200); font-size: 0.62rem; letter-spacing: 0.2em; }
.copa-banner-countdown .cd-sep{ color: rgba(255,46,160,0.5); font-size: 1.6rem; padding: 0 2px; }
.copa-banner-cd-label{
font-family: var(--display);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-bright);
margin: 0;
}
@media (max-width: 860px){
.copa-banner-inner{ grid-template-columns: 1fr; gap: 30px; }
.copa-banner-side{ order: -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 22px; }
.copa-banner-flags{ font-size: 2rem; }
}
@media (max-width: 520px){
.copa-banner{ padding: 50px 0 60px; }
.copa-banner-meta-item{ font-size: 0.78rem; padding: 5px 10px; }
}
/* =========================================================
COPA PAGE · hero, experience, calendar, menu, reserve
========================================================= */
.page-copa{ background: #0a0408; }
.page-copa .nav{ background: transparent; }
.page-copa .footer{ position: relative; z-index: 2; }
.copa-hero{
position: relative;
min-height: 80vh;
padding: 160px 0 100px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
isolation: isolate;
}
.copa-hero-bg{
position: absolute; inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 30%, rgba(236,16,127,0.30), transparent 60%),
radial-gradient(ellipse 70% 50% at 20% 80%, rgba(255,0,170,0.18), transparent 60%),
radial-gradient(ellipse 70% 50% at 80% 80%, rgba(212,175,55,0.16), transparent 60%),
linear-gradient(180deg, #1a0810 0%, #0a0408 100%);
z-index: -1;
}
.copa-hero-grain{
position: absolute; inset: 0;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
mix-blend-mode: overlay;
pointer-events: none;
z-index: -1;
}
.copa-hero-flags{
position: absolute;
top: 14%;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 22px;
font-size: 2.4rem;
filter: drop-shadow(0 12px 24px rgba(0,0,0,0.6));
z-index: 1;
pointer-events: none;
}
.copa-hero-inner{
position: relative;
z-index: 2;
max-width: 880px;
}
.copa-eyebrow{
display: inline-block;
font-family: var(--display);
font-size: 0.78rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--gold-bright);
background: rgba(212,175,55,0.10);
border: 1px solid rgba(212,175,55,0.30);
padding: 8px 16px;
border-radius: 999px;
margin: 0 0 26px;
}
.copa-title{
font-family: 'Bebas Neue', var(--display);
font-size: clamp(3.4rem, 10vw, 7rem);
line-height: 0.92;
font-weight: 400;
color: #fff;
margin: 0 0 28px;
letter-spacing: 0.02em;
}
.copa-title-line{ display: block; }
.copa-title-glow{
color: var(--rosa-bright);
text-shadow:
0 0 12px rgba(255,46,160,0.9),
0 0 30px rgba(236,16,127,0.6),
0 0 60px rgba(255,0,170,0.4);
animation: copaGlow 3s ease-in-out infinite;
}
.copa-sub{
font-size: clamp(1.02rem, 1.6vw, 1.18rem);
line-height: 1.6;
color: var(--rose-100);
max-width: 640px;
margin: 0 auto 32px;
}
.copa-hero-ctas{
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
margin: 0 0 32px;
}
.copa-apertura{
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--display);
font-size: 0.86rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rose-200);
padding: 10px 18px;
border-radius: 999px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,46,160,0.3);
}
.copa-apertura strong{ color: var(--rosa-bright); font-weight: 500; }
.copa-apertura-dot{
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rosa-bright);
box-shadow: 0 0 10px var(--rosa-bright);
animation: copaDotPulse 1.6s ease-in-out infinite;
}
/* Experience grid */
.copa-experience{
padding: 90px 0 70px;
background: linear-gradient(180deg, #0a0408 0%, #14080f 100%);
color: var(--rose-100);
}
.copa-section-head{
max-width: 720px;
margin: 0 auto 48px;
text-align: center;
}
.copa-section-head .eyebrow{
color: var(--gold-bright);
margin: 0 0 12px;
}
.copa-section-head h2{
font-family: var(--display);
font-size: clamp(2rem, 4.2vw, 2.8rem);
font-weight: 400;
color: #fff;
margin: 0 0 14px;
line-height: 1.15;
letter-spacing: -0.005em;
}
.copa-lead{
color: var(--rose-100);
font-size: 1.02rem;
line-height: 1.65;
margin: 0;
}
.copa-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1080px;
margin: 0 auto;
}
.copa-card{
position: relative;
padding: 28px 26px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.copa-card:hover{
transform: translateY(-4px);
background: rgba(236,16,127,0.06);
border-color: rgba(236,16,127,0.35);
}
.copa-card-num{
display: inline-block;
font-family: 'Bebas Neue', var(--display);
font-size: 1.4rem;
letter-spacing: 0.1em;
color: var(--rosa-bright);
text-shadow: 0 0 10px rgba(255,46,160,0.4);
margin: 0 0 12px;
}
.copa-card h3{
font-family: var(--display);
font-size: 1.2rem;
color: #fff;
margin: 0 0 8px;
font-weight: 500;
line-height: 1.25;
}
.copa-card p{
color: var(--rose-200);
font-size: 0.92rem;
line-height: 1.55;
margin: 0;
}
@media (max-width: 860px){
.copa-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
.copa-grid{ grid-template-columns: 1fr; }
}
/* Calendar */
.copa-calendar{
padding: 90px 0 90px;
background: linear-gradient(180deg, #14080f 0%, #0a0408 100%);
color: var(--rose-100);
}
.copa-fixtures{
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 920px;
display: flex;
flex-direction: column;
gap: 14px;
}
.copa-fixture{
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 24px;
align-items: center;
padding: 22px 26px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.copa-fixture:hover{
background: rgba(236,16,127,0.05);
border-color: rgba(236,16,127,0.30);
transform: translateX(4px);
}
.copa-fixture-feature{
background: linear-gradient(135deg, rgba(236,16,127,0.10), rgba(255,0,170,0.04));
border-color: rgba(236,16,127,0.45);
box-shadow: 0 0 24px rgba(255,46,160,0.18) inset;
}
.copa-fix-date{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 14px 8px;
border-radius: 10px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.08);
text-align: center;
}
.copa-fix-day{
font-family: var(--display);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-bright);
}
.copa-fix-num{
font-family: 'Bebas Neue', var(--display);
font-size: 2.6rem;
line-height: 1;
color: #fff;
margin: 4px 0 2px;
}
.copa-fix-month{
font-family: var(--display);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rose-200);
}
.copa-fix-body{ min-width: 0; }
.copa-fix-tag{
display: inline-block;
font-family: var(--display);
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
margin: 0 0 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
color: var(--rose-200);
}
.copa-fix-tag.tag-mx{ color: #FFD4E5; background: rgba(236,16,127,0.18); border-color: rgba(236,16,127,0.45); }
.copa-fix-tag.tag-ca{ color: #FFE0CC; background: rgba(255,80,80,0.15); border-color: rgba(255,80,80,0.4); }
.copa-fix-tag.tag-co{ color: #FFF1B8; background: rgba(212,175,55,0.18); border-color: rgba(212,175,55,0.45); }
.copa-fix-tag.tag-r16{ color: #fff; background: rgba(255,46,160,0.18); border-color: rgba(255,46,160,0.45); }
.copa-fix-tag.tag-apertura{ color: #fff; background: rgba(255,46,160,0.30); border-color: rgba(255,46,160,0.7); text-shadow: 0 0 6px rgba(255,46,160,0.6); }
.copa-fix-body h3{
font-family: var(--display);
font-size: 1.18rem;
font-weight: 500;
color: #fff;
margin: 0 0 6px;
line-height: 1.25;
}
.copa-fix-body p{
color: var(--rose-200);
font-size: 0.92rem;
line-height: 1.55;
margin: 0;
}
.copa-fix-cta{ flex-shrink: 0; }
.copa-fix-note{
max-width: 720px;
margin: 36px auto 0;
text-align: center;
font-size: 0.86rem;
color: var(--rose-200);
line-height: 1.55;
}
.copa-fix-note a{ color: var(--rosa-bright); }
@media (max-width: 720px){
.copa-fixture{ grid-template-columns: 80px 1fr; gap: 16px; padding: 18px; }
.copa-fix-cta{ grid-column: 1 / -1; margin-top: 6px; }
.copa-fix-num{ font-size: 2.1rem; }
}
/* Copa menu callout */
.copa-menu-cta{
padding: 80px 0;
background:
radial-gradient(ellipse at 80% 20%, rgba(212,175,55,0.10), transparent 55%),
linear-gradient(180deg, #0a0408 0%, #14080f 100%);
color: var(--rose-100);
}
.copa-menu-inner{
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 50px;
align-items: center;
}
.copa-menu-text .eyebrow{ color: var(--gold-bright); margin: 0 0 12px; }
.copa-menu-text h2{
font-family: var(--display);
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 400;
color: #fff;
margin: 0 0 14px;
line-height: 1.2;
letter-spacing: -0.005em;
}
.copa-menu-text p{
color: var(--rose-100);
line-height: 1.6;
margin: 0 0 22px;
}
.copa-menu-actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.copa-menu-side{
display: flex;
flex-direction: column;
gap: 14px;
}
.copa-menu-stat{
display: flex;
align-items: baseline;
gap: 16px;
padding: 18px 22px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
}
.copa-stat-num{
font-family: 'Bebas Neue', var(--display);
font-size: 2.6rem;
color: var(--rosa-bright);
line-height: 1;
text-shadow: 0 0 10px rgba(255,46,160,0.4);
flex-shrink: 0;
}
.copa-stat-label{
font-family: var(--display);
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--rose-200);
}
@media (max-width: 760px){
.copa-menu-inner{ grid-template-columns: 1fr; gap: 30px; }
}
/* Reservations strip */
.copa-reserve{
padding: 70px 0;
background: linear-gradient(135deg, #1a0810 0%, var(--plum) 100%);
color: var(--rose-100);
text-align: center;
}
.copa-reserve-eyebrow{
font-family: var(--display);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-bright);
margin: 0 0 14px;
}
.copa-reserve-title{
font-family: var(--display);
font-size: clamp(1.7rem, 3.4vw, 2.6rem);
font-weight: 400;
color: #fff;
margin: 0 0 14px;
line-height: 1.2;
}
.copa-reserve-sub{
color: var(--rose-100);
font-size: 1.02rem;
line-height: 1.6;
max-width: 600px;
margin: 0 auto 28px;
}
.copa-reserve-actions{
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
/* Pasaporte cross-link */
.copa-pasaporte-link{
padding: 60px 0 80px;
background: #0a0408;
text-align: center;
}
.copa-px-inner{
max-width: 640px;
padding: 32px 30px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(212,175,55,0.30);
border-radius: 18px;
color: var(--rose-100);
}
.copa-px-inner .eyebrow{ color: var(--gold-bright); margin: 0 0 10px; }
.copa-px-inner h3{
font-family: var(--display);
font-size: 1.4rem;
color: #fff;
font-weight: 500;
margin: 0 0 12px;
line-height: 1.3;
}
.copa-px-inner p{
color: var(--rose-200);
font-size: 0.94rem;
line-height: 1.6;
margin: 0 0 22px;
}
/* =========================================================
FOOTER · delivery row + cantina tagline
========================================================= */
.footer-cantina{
margin: 0;
font-family: var(--display);
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-bright);
}
.footer-delivery{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px 12px;
margin: -4px auto 4px;
font-size: 0.78rem;
color: var(--rose-200);
letter-spacing: 0.04em;
}
.footer-delivery-label{
color: var(--rose-100);
font-family: var(--display);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-right: 4px;
}
.footer-delivery a{
color: var(--rose-100);
border-bottom: 1px solid rgba(255,255,255,0.18);
padding-bottom: 1px;
transition: color .2s ease, border-color .2s ease;
}
.footer-delivery a:hover{ color: var(--rosa-bright); border-color: var(--rosa-bright); }
.footer-delivery-sep{ color: rgba(255,255,255,0.25); }
.footer-copy a{ color: var(--rose-100); border-bottom: 1px dotted rgba(255,255,255,0.25); transition: color .2s ease; }
.footer-copy a:hover{ color: var(--rosa-bright); }
/* =========================================================
MENU PAGE · PDF download buttons
========================================================= */
.menu-downloads{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 22px;
}
@media (max-width: 720px){
.copa-hero{ min-height: 70vh; padding: 130px 0 70px; }
.copa-hero-flags{ font-size: 1.8rem; top: 12%; gap: 14px; }
.copa-experience, .copa-calendar{ padding: 60px 0; }
.copa-menu-cta{ padding: 60px 0; }
.copa-reserve{ padding: 50px 0; }
.copa-pasaporte-link{ padding: 40px 0 60px; }
}
/* Neon rosa CTA used on Copa surfaces */
.btn-luxe-rosa{
color: #fff;
background: linear-gradient(135deg, var(--rosa-bright) 0%, var(--rosa) 60%, var(--rosa-deep) 100%);
box-shadow:
0 0 18px rgba(255,46,160,0.45),
0 22px 44px -14px rgba(255,46,160,0.6),
inset 0 0 0 1px rgba(255,255,255,0.22);
}
.btn-luxe-rosa::before{
background: linear-gradient(135deg, #FF66BD, var(--rosa-bright));
opacity: 0;
}
.btn-luxe-rosa:hover{
transform: translateY(-3px);
box-shadow:
0 0 26px rgba(255,46,160,0.7),
0 30px 56px -14px rgba(255,46,160,0.75),
inset 0 0 0 1px rgba(255,255,255,0.35);
}
.btn-luxe-rosa:hover::before{ opacity: 1; }
/* =========================================================
GALERÍA · Instagram feed grid (home page)
========================================================= */
.gallery-section{
padding: 80px 0 90px;
background: var(--ivory);
}
.gallery-head{
text-align: center;
max-width: 720px;
margin: 0 auto 40px;
}
.gallery-eyebrow{
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--rosa-deep);
}
.gallery-eyebrow .ig-glyph{
width: 16px; height: 16px;
color: var(--rosa-deep);
}
.gallery-head h2{
font-family: var(--display);
font-size: clamp(1.8rem, 3.6vw, 2.6rem);
color: var(--plum);
font-weight: 400;
margin: 8px 0 10px;
line-height: 1.2;
}
.gallery-head h2 em{ font-style: italic; color: var(--rosa-deep); }
.gallery-head .lead{
color: var(--muted);
font-size: 1.02rem;
line-height: 1.6;
margin: 0;
}
.gallery-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 240px;
gap: 12px;
max-width: 980px;
margin: 0 auto 40px;
}
.ig-tile{
position: relative;
display: block;
overflow: hidden;
border-radius: 12px;
background: var(--plum);
box-shadow: var(--shadow-sm);
transition: transform .35s ease, box-shadow .35s ease;
}
.ig-tile:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.ig-tile-feature{
grid-row: span 2;
grid-column: span 1;
}
.ig-tile img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.ig-tile:hover img{ transform: scale(1.06); }
.ig-tile-overlay{
position: absolute; inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 14px 16px;
background: linear-gradient(180deg, transparent 40%, rgba(23,10,16,0.85) 100%);
color: #fff;
opacity: 0;
transition: opacity .35s ease;
}
.ig-tile:hover .ig-tile-overlay,
.ig-tile:focus-visible .ig-tile-overlay{ opacity: 1; }
.ig-tile-icon{
position: absolute;
top: 12px; right: 12px;
width: 22px; height: 22px;
color: #fff;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.ig-tile-caption{
font-size: 0.88rem;
line-height: 1.4;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.gallery-foot{
text-align: center;
margin-top: 4px;
}
.gallery-foot-hint{
margin: 14px 0 0;
font-size: 0.82rem;
color: var(--muted);
letter-spacing: 0.02em;
}
@media (max-width: 760px){
.gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; gap: 10px; }
.ig-tile-feature{ grid-row: span 1; grid-column: span 2; grid-auto-rows: 280px; }
}
@media (max-width: 420px){
.gallery-section{ padding: 60px 0 70px; }
.gallery-grid{ grid-template-columns: 1fr; grid-auto-rows: 240px; }
.ig-tile-feature{ grid-column: span 1; }
}
/* =========================================================
CONTACTO PAGE
========================================================= */
.page-hero-contacto{
min-height: 38vh;
padding-top: 150px;
padding-bottom: 50px;
text-align: center;
}
.page-hero-contacto .page-hero-bg{
background:
radial-gradient(ellipse at 30% 0%, rgba(236,16,127,0.18), transparent 55%),
radial-gradient(ellipse at 90% 100%, rgba(212,175,55,0.16), transparent 55%),
linear-gradient(180deg, #2a1220 0%, var(--plum) 100%);
}
.page-hero-contacto .page-eyebrow{ color: var(--gold-bright); }
.page-hero-contacto .page-title{ color: #fff; }
.page-hero-contacto .page-sub{ color: var(--rose-100); max-width: 560px; margin: 12px auto 12px; }
.contacto-quick{
padding: 60px 0 20px;
background: var(--ivory);
}
.contacto-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 1080px;
margin: 0 auto;
}
.contacto-card{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 24px 24px 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: var(--shadow-sm);
color: var(--plum);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.contacto-card:hover{
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: rgba(212,175,55,0.45);
}
.contacto-card-primary{
background: linear-gradient(135deg, rgba(236,16,127,0.06), rgba(212,175,55,0.06));
border-color: rgba(236,16,127,0.30);
}
.contacto-card-primary:hover{ border-color: rgba(236,16,127,0.55); }
.contacto-card-ig{
background: linear-gradient(135deg, rgba(236,16,127,0.08), rgba(212,175,55,0.05));
border-color: rgba(236,16,127,0.30);
}
.contacto-icon{
width: 44px; height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(212,175,55,0.14);
color: var(--gold-deep);
margin-bottom: 6px;
}
.contacto-icon .ico{ width: 22px; height: 22px; }
.contacto-card-label{
font-family: var(--display);
font-size: 0.68rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-deep);
}
.contacto-card strong{
font-family: var(--display);
font-size: 1.18rem;
font-weight: 500;
color: var(--plum);
margin: 2px 0 2px;
line-height: 1.25;
}
.contacto-card-meta{
font-size: 0.88rem;
color: var(--muted);
}
.contacto-card-link{
font-family: var(--display);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rosa-deep);
margin-top: 8px;
}
@media (max-width: 860px){
.contacto-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
.contacto-grid{ grid-template-columns: 1fr; }
}
.contacto-detail{
padding: 60px 0 80px;
background: var(--ivory);
}
.contacto-detail-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
max-width: 1080px;
}
.contacto-block{
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 32px 30px;
box-shadow: var(--shadow-sm);
}
.contacto-block .eyebrow{ color: var(--gold-deep); margin: 0 0 10px; }
.contacto-block h2{
font-family: var(--display);
font-size: 1.6rem;
color: var(--plum);
font-weight: 400;
margin: 0 0 18px;
line-height: 1.25;
}
.contacto-block-wide{ grid-column: 1 / -1; }
.contacto-block-note{
margin: 16px 0 0;
font-size: 0.86rem;
color: var(--muted);
line-height: 1.55;
}
.hours-list{
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--line);
}
.hours-list li{
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--line);
color: var(--plum);
font-size: 0.96rem;
}
.hours-list li > span:first-child{
font-family: var(--display);
font-size: 0.82rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.hours-list li > span:last-child{
font-variant-numeric: tabular-nums;
}
.hours-list .hours-late > span:last-child{
color: var(--rosa-deep);
font-weight: 500;
}
.delivery-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 4px;
}
.delivery-card{
display: flex;
flex-direction: column;
gap: 4px;
padding: 18px 18px 16px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--ivory);
color: var(--plum);
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.delivery-card:hover{
transform: translateY(-3px);
border-color: rgba(236,16,127,0.45);
box-shadow: var(--shadow-sm);
}
.delivery-name{
font-family: var(--display);
font-size: 1.05rem;
font-weight: 500;
color: var(--plum);
}
.delivery-meta{
font-size: 0.84rem;
color: var(--muted);
}
.delivery-cta{
font-family: var(--display);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rosa-deep);
margin-top: 6px;
}
.contacto-map-intro{
color: var(--muted);
line-height: 1.6;
margin: 0 0 18px;
}
.contacto-map{
width: 100%;
height: 360px;
border: 0;
border-radius: 12px;
display: block;
filter: saturate(1.05);
}
.contacto-map-actions{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
@media (max-width: 760px){
.contacto-detail-grid{ grid-template-columns: 1fr; gap: 18px; }
.delivery-grid{ grid-template-columns: 1fr; }
.contacto-map{ height: 280px; }
}
/* Team */
.contacto-team{
padding: 70px 0 90px;
background: linear-gradient(180deg, var(--ivory) 0%, #FFF1F6 100%);
}
.contacto-team-head{
max-width: 640px;
margin: 0 auto 36px;
text-align: center;
}
.contacto-team-head .eyebrow{ color: var(--rosa-deep); margin: 0 0 10px; }
.contacto-team-head h2{
font-family: var(--display);
font-size: clamp(1.7rem, 3vw, 2.2rem);
color: var(--plum);
font-weight: 400;
margin: 0;
}
.contacto-team-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
max-width: 1000px;
margin: 0 auto;
}
.team-card{
padding: 24px 24px 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow-sm);
}
.team-role{
display: inline-block;
font-family: var(--display);
font-size: 0.66rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-deep);
background: rgba(212,175,55,0.10);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
.team-card h3{
font-family: var(--display);
font-size: 1.2rem;
font-weight: 500;
color: var(--plum);
margin: 0 0 8px;
line-height: 1.25;
}
.team-card p{
color: var(--muted);
font-size: 0.92rem;
line-height: 1.55;
margin: 0;
}
.team-card p a{ color: var(--rosa-deep); border-bottom: 1px solid rgba(184,9,94,0.35); }
.team-card p a:hover{ color: var(--rosa); border-color: var(--rosa); }
.team-card-room{
background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(236,16,127,0.04));
border-color: rgba(212,175,55,0.35);
}
@media (max-width: 760px){
.contacto-team-grid{ grid-template-columns: 1fr; }
}
/* Menu-downloads area sits on ivory; the ghost button needs a light-bg variant.
Override the default ghost (which is designed for dark heroes) so the secondary
download button reads cleanly. */
.menu-downloads{
align-items: center;
}
.menu-downloads .btn-luxe-ghost{
color: var(--plum);
background: rgba(236,16,127,0.04);
border: 1px solid var(--rosa);
backdrop-filter: none;
}
.menu-downloads .btn-luxe-ghost:hover{
background: rgba(236,16,127,0.10);
border-color: var(--rosa-deep);
color: var(--rosa-deep);
transform: translateY(-3px);
}
/* =========================================================
MENU · spirits/beer/wine/NA lists with multi-column pricing
Used in the Cócteles & Bebidas section to mirror Menu_Bebidas.pdf
========================================================= */
.spirits-list{
list-style: none;
margin: 8px 0 0;
padding: 0;
border-top: 1px solid var(--line);
}
.spirits-list li{
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0 18px;
align-items: baseline;
padding: 10px 0;
border-bottom: 1px solid var(--line);
color: var(--plum);
font-size: 0.96rem;
}
.spirits-list-single li{
grid-template-columns: 1fr auto;
}
.spirits-list-plain li{
grid-template-columns: 1fr;
}
.spirits-list li > span:first-child{
font-weight: 500;
color: var(--plum);
}
.spirits-list .sp-price{
font-variant-numeric: tabular-nums;
color: var(--rosa-deep);
font-weight: 500;
min-width: 48px;
text-align: right;
}
/* Dual price for shots & sangria (1oz / 2oz inline) */
.price.price-dual{
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
line-height: 1.05;
}
.price.price-dual .p-oz{
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.02em;
font-weight: 500;
color: var(--rosa-deep);
font-variant-numeric: tabular-nums;
}
/* Beer two-column layout (Bottles+Buckets / Draught+Pitchers) */
.beer-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 8px;
}
.beer-head{
font-family: var(--display);
font-size: 0.82rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-deep);
margin: 0 0 4px;
}
.beer-head-spaced{ margin-top: 22px; }
@media (max-width: 600px){
.beer-grid{ grid-template-columns: 1fr; gap: 14px; }
.spirits-list li{ font-size: 0.92rem; }
}
/* Section banner image used inside menu subcategories
(e.g. anchor photo above a long list like Meat Tacos) */
.cat-banner{
margin: 8px 0 24px;
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-sm);
aspect-ratio: 16 / 7;
}
.cat-banner img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease;
}
.cat-banner:hover img{ transform: scale(1.03); }
@media (max-width: 600px){
.cat-banner{ aspect-ratio: 16 / 9; }
}