/* ╔══════════════════════════════════════╗
║ VERSION 6 · styles.css ║
╚══════════════════════════════════════╝ */
/* ═══════════════════════════════════════════════════════════
RESTAURANT LOS CAPORALES · Tradición desde 1992
Ciudad Valles, San Luis Potosí, México
Paleta: naranja oscuro / brasa sobre carbón
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
TEMAS
El tema oscuro vive en :root (es el look de la marca y el que
se muestra por defecto). El claro sólo redefine estas mismas
variables, así que todo el resto de la hoja funciona igual en
los dos. El atributo data-theme lo pone el script en .
═══════════════════════════════════════════════════════════ */
:root{
/* — Base — */
--ink: #0B0907; /* negro cálido, fondo principal */
--ink-2: #120E0B; /* fondo alterno de sección */
--ink-3: #1A1310; /* superficies elevadas */
--line: rgba(233, 206, 172, .13);
--line-strong:rgba(233, 206, 172, .26);
/* — Brasa (naranja oscuro) — */
--ember-deep: #7C2D12; /* rescoldo */
--ember: #C2410C; /* naranja oscuro principal */
--ember-lit: #E2600F; /* llama */
--amber: #E8A33D; /* filo dorado, hairlines */
/* — Texto — */
--cream: #F4ECE1;
--cream-soft: #DCCFBF;
--muted: #A2917F;
/* — Velo sobre fotos, barra fija y cajón móvil — */
--veil-rgb: 11, 9, 7;
/* — Matices y sombras que cambian con el tema — */
--tint: rgba(255,255,255,.022);
--marquee-mid: #1C120C;
--shadow-1: rgba(0,0,0,.9);
--shadow-2: rgba(0,0,0,.95);
--title-shadow: 0 24px 70px rgba(0,0,0,.6);
--hero-fall-1: #3A1608;
--hero-fall-2: #1A0D06;
--glow-a: .30; /* resplandor de brasa del hero */
--glow-b: .22; /* resplandor de la sección buffet */
--glow-c: .32; /* resplandor de la sección reservaciones */
--grain-op: .4;
--grain-blend: overlay;
/* Sin invert(): invertir volvía cian el pin rojo del negocio.
Se atenúa en cálido, el mapa queda oscuro y el pin sigue siendo pin. */
--map-filter: grayscale(.42) sepia(.28) contrast(1.06) brightness(.72);
--map-filter-hover: grayscale(.12) sepia(.10) contrast(1.02) brightness(.92);
/* — WhatsApp — */
--wa: #1FA855;
--wa-lit: #25D366;
/* — Tipografía — */
--display: "Cormorant Garamond", "Times New Roman", serif;
--sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* — Ritmo — */
--wrap: 1200px;
--gut: clamp(20px, 5vw, 56px);
--sec-y: clamp(80px, 11vw, 152px);
--r: 2px; /* radio: casi recto = editorial */
--ease: cubic-bezier(.22, .61, .36, 1);
}
/* ─── TEMA CLARO ───
Los naranjas se oscurecen: el #E2600F del tema oscuro sobre un fondo
claro se queda en 3:1 de contraste y no pasa accesibilidad para texto. */
[data-theme="light"]{
/* Crema de papel, no blanco. El tono base tira a beige amarillento
(matiz ~40°) para que el naranja de la marca caiga encima como
algo natural y no como una mancha sobre una hoja en blanco. */
--ink: #F5EBD7; /* crema principal */
--ink-2: #EEE2C9; /* secciones alternas, un paso más hondo */
--ink-3: #E9DCC4; /* superficies y estados hover */
--line: rgba(74, 45, 25, .16);
--line-strong:rgba(74, 45, 25, .30);
--ember-deep: #7C2D12;
--ember: #B33C08;
--ember-lit: #9E3506;
--amber: #8A5510; /* bronce: el dorado claro no se lee en claro */
--cream: #1B120B; /* ahora es el color de texto principal */
--cream-soft: #42311F;
--muted: #6B5A47;
--veil-rgb: 245, 235, 215; /* mismo crema, para que el velo sobre
las fotos funda con el fondo */
--tint: rgba(74,45,25,.03);
--marquee-mid: #E7DABE;
--shadow-1: rgba(74,45,25,.16);
--shadow-2: rgba(74,45,25,.22);
--title-shadow: 0 14px 44px rgba(245,235,215,.92);
--hero-fall-1: #EBD7B4;
--hero-fall-2: #F5EBD7;
--glow-a: .14;
--glow-b: .10;
--glow-c: .14;
--grain-op: .16;
--grain-blend: multiply;
--map-filter: grayscale(.18) sepia(.08) contrast(1.02);
--map-filter-hover: grayscale(0) sepia(0) contrast(1.03);
}
/* Transición suave al cambiar de tema (no en la primera carga) */
html.theme-ready body,
html.theme-ready .nav,
html.theme-ready .section,
html.theme-ready .footer,
html.theme-ready .spec,
html.theme-ready .social{
transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
/* ══ Reset ══ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; }
body{
margin:0;
background:var(--ink);
color:var(--cream-soft);
font-family:var(--sans);
font-size:16px;
line-height:1.7;
font-weight:300;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,svg,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }
ul,dl{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--ember); color:#fff; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
.skip{
position:absolute; left:-9999px; top:0; z-index:1100;
background:var(--ember); color:#fff; padding:14px 22px;
font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.skip:focus{ left:12px; top:12px; }
/* ══ Grano de película ══ */
.grain{
position:fixed; inset:-120px; z-index:9999; pointer-events:none;
opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
animation:grainShift 700ms steps(2) infinite;
}
@keyframes grainShift{
0%{ transform:translate(0,0) } 50%{ transform:translate(-3%, 2%) } 100%{ transform:translate(2%,-3%) }
}
/* ══ Layout ══ */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:820px; }
.section{ position:relative; padding-block:var(--sec-y); }
.grid-2{
display:grid; grid-template-columns:1fr 1fr;
gap:clamp(40px, 7vw, 96px); align-items:center;
}
/* ══ Tipografía compartida ══ */
.eyebrow{
font-size:11px; letter-spacing:.34em; text-transform:uppercase;
color:var(--amber); font-weight:500; margin-bottom:22px;
display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
content:""; width:34px; height:1px; flex:none;
background:linear-gradient(90deg, transparent, var(--amber));
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{
content:""; width:34px; height:1px; flex:none;
background:linear-gradient(270deg, transparent, var(--amber));
}
.h2{
font-family:var(--display);
font-size:clamp(34px, 5.2vw, 62px);
line-height:1.06; letter-spacing:-.015em;
color:var(--cream); font-weight:400;
}
.h2--center{ text-align:center; }
.h2 em{ font-style:italic; color:var(--ember-lit); }
.lede{
font-size:clamp(16px, 1.35vw, 18.5px); line-height:1.75;
color:var(--cream-soft); margin-top:24px; max-width:58ch;
}
.lede--center{ margin-inline:auto; text-align:center; }
.body{ margin-top:20px; color:var(--muted); max-width:56ch; }
.section__head{ margin-bottom:clamp(44px, 6vw, 76px); }
/* ══ Botones ══ */
.btn{
--pad-y:15px; --pad-x:30px;
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:var(--pad-y) var(--pad-x);
font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
border-radius:var(--r); overflow:hidden; isolation:isolate;
transition:color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn::before{
content:""; position:absolute; inset:0; z-index:-1;
transform:scaleY(0); transform-origin:bottom;
transition:transform .45s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn--lg{ --pad-y:19px; --pad-x:38px; font-size:12.5px; }
.btn--solid{
background:linear-gradient(135deg, var(--ember) 0%, var(--ember-deep) 100%);
color:#FFF3E8; box-shadow:0 10px 34px -14px rgba(226,96,15,.75);
}
.btn--solid::before{ background:linear-gradient(135deg, var(--ember-lit), var(--ember)); }
.btn--solid:hover::before{ transform:scaleY(1); }
.btn--solid:hover{ box-shadow:0 16px 44px -14px rgba(226,96,15,.9); }
.btn--outline{
border:1px solid var(--line-strong); color:var(--cream);
backdrop-filter:blur(6px);
}
.btn--outline::before{ background:var(--cream); }
.btn--outline:hover{ color:var(--ink); border-color:var(--cream); }
.btn--outline:hover::before{ transform:scaleY(1); }
.btn--ghost{
border:1px solid var(--ember); color:var(--ember-lit);
--pad-y:11px; --pad-x:22px; font-size:11px;
}
.btn--ghost::before{ background:var(--ember); }
.btn--ghost:hover{ color:#fff; }
.btn--ghost:hover::before{ transform:scaleY(1); }
.btn--wa{
background:linear-gradient(135deg, var(--wa-lit), var(--wa));
color:#04220F; box-shadow:0 12px 38px -14px rgba(37,211,102,.7);
}
.btn--wa::before{ background:#fff; }
.btn--wa:hover::before{ transform:scaleY(1); }
/* ═══════════════ NAV ═══════════════ */
.nav{
position:fixed; inset:0 0 auto 0; z-index:900;
/* Ojo: backdrop-filter NO se anima. Hacerlo obliga al navegador a
recalcular el desenfoque de todo lo que pasa por detrás en cada
cuadro del scroll, y en celular eso se ve como parpadeo. */
transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
border-bottom:1px solid transparent;
padding-block:10px;
}
.nav.is-stuck{
background:rgba(var(--veil-rgb), .82);
backdrop-filter:blur(18px) saturate(1.3);
border-bottom-color:var(--line);
padding-block:0;
}
.nav__inner{
max-width:var(--wrap); margin-inline:auto; padding:18px var(--gut);
display:flex; align-items:center; justify-content:space-between; gap:24px;
transition:padding .5s var(--ease);
}
.nav.is-stuck .nav__inner{ padding-block:12px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
width:34px; height:34px; flex:none; color:var(--ember-lit);
display:grid; place-items:center;
filter:drop-shadow(0 0 12px rgba(226,96,15,.5));
transition:transform .5s var(--ease);
}
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.08); }
.brand__mark svg{ width:100%; height:100%; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
font-family:var(--display); font-size:24px; letter-spacing:.06em;
color:var(--cream); font-weight:500; white-space:nowrap;
}
.brand__sub{
font-size:8.5px; letter-spacing:.34em; text-transform:uppercase;
color:var(--muted); margin-top:5px; white-space:nowrap;
}
.nav__links{ display:flex; align-items:center; gap:32px; }
.nav__links > a:not(.btn){
font-size:11.5px; letter-spacing:.19em; text-transform:uppercase;
color:var(--cream-soft); position:relative; padding-block:6px;
transition:color .35s var(--ease);
}
.nav__links > a:not(.btn)::after{
content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
background:var(--ember-lit); transform:scaleX(0); transform-origin:right;
transition:transform .4s var(--ease);
}
.nav__links > a:not(.btn):hover{ color:var(--cream); }
.nav__links > a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
.burger{ display:none; width:44px; height:44px; position:relative; }
.burger span{
position:absolute; left:11px; width:22px; height:1.5px; background:var(--cream);
transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
/* ═══════════════ INTERRUPTOR DE TEMA ═══════════════ */
.nav__actions{ display:flex; align-items:center; gap:10px; }
.switch{
padding:0; line-height:0; border-radius:99px; flex:none;
}
.switch__track{
position:relative; display:block;
width:62px; height:30px; border-radius:99px;
border:1px solid var(--line-strong);
background:rgba(var(--veil-rgb), .4);
transition:background .45s var(--ease), border-color .45s var(--ease);
}
.switch:hover .switch__track{ border-color:var(--ember); }
.switch__knob{
position:absolute; top:3px; left:3px; z-index:0;
width:22px; height:22px; border-radius:50%;
background:linear-gradient(135deg, var(--ember-lit), var(--ember));
box-shadow:0 3px 12px -2px rgba(194,65,12,.85);
/* oscuro = perilla a la derecha, sobre la luna */
transform:translateX(30px);
transition:transform .45s var(--ease), background .45s var(--ease);
}
[data-theme="light"] .switch__knob{ transform:translateX(0); }
.switch__icon{
position:absolute; top:50%; z-index:1; translate:0 -50%;
width:14px; height:14px;
transition:color .45s var(--ease);
}
.switch__icon svg{ width:100%; height:100%; }
.switch__icon--sun { left:8px; color:var(--muted); }
.switch__icon--moon{ right:8px; color:#FFF1E4; }
[data-theme="light"] .switch__icon--sun { color:#FFF1E4; }
[data-theme="light"] .switch__icon--moon{ color:var(--muted); }
@media (max-width: 1024px){
/* el interruptor queda siempre visible, no se esconde en el cajón */
.nav__actions{ z-index:3; position:relative; }
}
/* ═══════════════ HERO ═══════════════ */
.hero{
position:relative; min-height:100svh;
display:grid; place-items:center; text-align:center;
padding:140px var(--gut) 120px; overflow:hidden;
}
.hero__media{
position:absolute; inset:0;
/* Degradado de respaldo: si la foto no carga, la sección sigue viéndose bien */
background:
radial-gradient(120% 90% at 50% 0%, var(--hero-fall-1) 0%, transparent 62%),
linear-gradient(180deg, var(--hero-fall-2) 0%, var(--ink) 100%);
}
.hero__media::after{
content:""; position:absolute; inset:0;
/* Salón de Los Caporales con familias. Desenfoque suave: lo justo
para que el nombre y los botones se lean, sin perder las caras
ni el ambiente. El scale() extra evita que el borde difuminado
se asome. Sube o baja el blur() aquí para ajustarlo. */
background:url("img/salon-familias.jpg") center/cover no-repeat;
opacity:.6;
filter:blur(2px) saturate(.94) contrast(1.02) brightness(.97);
transform:scale(1.08);
animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{
from{ transform:scale(1.08) translate3d(0,0,0); }
to { transform:scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}
.hero__veil{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(var(--veil-rgb),.88) 0%, rgba(var(--veil-rgb),.46) 36%, rgba(var(--veil-rgb),.95) 100%),
radial-gradient(80% 60% at 50% 45%, transparent 0%, rgba(var(--veil-rgb),.64) 100%);
}
/* En claro el velo es blanco: si se deja tan denso como el negro, la foto
desaparece. Se afloja y la imagen se levanta un poco. */
[data-theme="light"] .hero__media::after{
opacity:.8;
filter:blur(2px) saturate(1) contrast(1.03) brightness(1.02);
}
[data-theme="light"] .hero__veil{
background:
linear-gradient(180deg, rgba(var(--veil-rgb),.80) 0%, rgba(var(--veil-rgb),.36) 36%, rgba(var(--veil-rgb),.93) 100%),
radial-gradient(80% 60% at 50% 45%, transparent 0%, rgba(var(--veil-rgb),.52) 100%);
}
.hero__ember{
position:absolute; left:50%; bottom:-30%; width:min(1000px, 130vw); aspect-ratio:1;
transform:translateX(-50%);
background:radial-gradient(circle, rgba(226,96,15,var(--glow-a)) 0%, rgba(194,65,12,calc(var(--glow-a) / 3)) 40%, transparent 68%);
filter:blur(24px);
animation:emberBreathe 8s ease-in-out infinite alternate;
}
@keyframes emberBreathe{ from{ opacity:.65; } to{ opacity:1; } }
.hero__content{ position:relative; z-index:2; max-width:940px; }
/* Emblema de la herradura sobre el nombre, como en el logotipo real */
.hero__mark{
display:block; margin:0 auto 26px;
width:clamp(56px, 7vw, 86px); aspect-ratio:1;
color:var(--ember-lit);
filter:drop-shadow(0 0 26px rgba(226,96,15,.55));
}
.hero__mark svg{ width:100%; height:100%; }
.hero__title{
font-family:var(--display); font-weight:300;
font-size:clamp(46px, 9.4vw, 122px);
line-height:.94; letter-spacing:-.025em; color:var(--cream);
text-shadow:var(--title-shadow);
}
.hero__title-sm{
display:block;
font-size:clamp(13px, 1.8vw, 20px); letter-spacing:.44em; text-transform:uppercase;
font-family:var(--sans); font-weight:400; color:var(--amber);
margin-bottom:18px; text-shadow:none;
}
.hero__claim{
margin-top:26px;
font-family:var(--display); font-style:italic; font-weight:300;
font-size:clamp(20px, 2.7vw, 32px); line-height:1.3;
color:var(--ember-lit);
}
.hero__lede{
margin:24px auto 0; max-width:60ch;
font-size:clamp(15px, 1.45vw, 17.5px); color:var(--cream-soft);
}
.hero__actions{
margin-top:44px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
/* Nota: se centra con inset+margin (no con translateX) para no chocar
con el transform que aplica la animación .reveal */
.hero__scroll{
position:absolute; inset:auto 0 34px 0; margin-inline:auto; width:max-content;
z-index:2; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hero__scroll-line{
width:1px; height:54px; background:linear-gradient(180deg, transparent, var(--amber));
position:relative; overflow:hidden;
}
.hero__scroll-line::after{
content:""; position:absolute; inset:0; background:var(--cream);
animation:scrollDrop 2.4s var(--ease) infinite;
}
@keyframes scrollDrop{
0%{ transform:translateY(-100%); }
60%,100%{ transform:translateY(100%); }
}
.hero__scroll-word{
font-size:9px; letter-spacing:.36em; text-transform:uppercase; color:var(--muted);
}
/* ═══════════════ MARQUEE ═══════════════ */
.marquee{
border-block:1px solid var(--line);
background:linear-gradient(90deg, var(--ink-2), var(--marquee-mid), var(--ink-2));
overflow:hidden; padding-block:18px;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
display:flex; align-items:center; gap:30px; width:max-content;
animation:slide 46s linear infinite;
}
.marquee__track span{
font-family:var(--display); font-size:clamp(19px, 2.2vw, 27px);
font-style:italic; color:var(--cream-soft); white-space:nowrap;
}
.marquee__track i{ color:var(--ember); font-size:9px; font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%); } }
/* ═══════════════ HISTORIA ═══════════════ */
.historia{ background:var(--ink); }
.historia__media{ position:relative; min-height:520px; }
.frame{ margin:0; position:relative; border-radius:var(--r); overflow:hidden; }
.frame::after{
content:""; position:absolute; inset:0; pointer-events:none;
box-shadow:inset 0 0 0 1px var(--line-strong);
}
.frame__img{
width:100%; height:100%;
background-color:#1B120C;
background-position:center; background-size:cover; background-repeat:no-repeat;
transition:transform 1.1s var(--ease), filter .7s var(--ease);
}
.frame:hover .frame__img{ transform:scale(1.05); }
.frame--tall{ aspect-ratio:3/4; box-shadow:0 40px 90px -40px var(--shadow-1); }
.frame--float{
position:absolute; right:-6%; bottom:-9%; width:52%; aspect-ratio:4/3;
box-shadow:0 30px 70px -28px var(--shadow-2);
border:6px solid var(--ink);
}
/* Sello "Desde 1992".
Va con flex y no con grid, y con aspect-ratio además del alto: si el
navegador no soporta alguna de las dos, la otra lo sostiene y el
círculo nunca sale ovalado ni a medias. El texto lleva nowrap para
que jamás se parta en dos renglones dentro del disco. */
.stamp{
position:absolute; left:-24px; top:26px;
width:92px; height:92px; aspect-ratio:1;
box-sizing:border-box; border-radius:50%;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
text-align:center; line-height:1;
background:radial-gradient(circle at 30% 25%, var(--ember-lit), var(--ember-deep));
color:#FFEEDC; box-shadow:0 14px 40px -12px rgba(226,96,15,.8);
border:1px solid rgba(255,220,180,.4);
overflow:hidden;
}
.stamp span,
.stamp strong{ display:block; white-space:nowrap; max-width:100%; }
.stamp span{
font-size:8.5px; letter-spacing:.26em; text-transform:uppercase;
opacity:.85; margin-bottom:3px; padding-left:.26em; /* compensa el espaciado final */
}
.stamp strong{ font-family:var(--display); font-size:28px; font-weight:500; line-height:1; }
.pillars{ margin-top:52px; display:grid; gap:2px; }
.pillars li{
display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
padding:22px 0; border-top:1px solid var(--line);
transition:padding-left .45s var(--ease);
}
.pillars li:last-child{ border-bottom:1px solid var(--line); }
.pillars li:hover{ padding-left:12px; }
.pillars__num{
font-family:var(--display); font-size:15px; color:var(--ember-lit);
letter-spacing:.1em; padding-top:4px;
}
.pillars h3{
font-family:var(--display); font-size:22px; color:var(--cream); letter-spacing:.01em;
}
.pillars p{ font-size:14.5px; color:var(--muted); margin-top:4px; }
/* ═══════════════ MENÚ / ESPECIALIDADES ═══════════════ */
.menu{ background:var(--ink-2); }
.menu::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(70% 50% at 50% 0%, rgba(194,65,12,.14), transparent 70%);
}
.menu .wrap{ position:relative; z-index:1; }
.specialties{
display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
background:var(--line); border:1px solid var(--line);
border-radius:var(--r); overflow:hidden;
}
.spec{
position:relative; background:var(--ink-2);
padding:clamp(30px, 3.6vw, 46px) clamp(24px, 2.8vw, 38px);
transition:background .5s var(--ease);
overflow:hidden;
}
.spec::before{
content:""; position:absolute; inset:auto 0 0 0; height:2px;
background:linear-gradient(90deg, var(--amber), var(--ember));
transform:scaleX(0); transform-origin:left;
transition:transform .55s var(--ease);
}
.spec:hover{ background:var(--ink-3); }
.spec:hover::before{ transform:scaleX(1); }
.spec__icon{
display:grid; place-items:center;
width:58px; height:58px; margin-bottom:24px;
border:1px solid var(--line-strong); border-radius:50%;
color:var(--ember-lit);
transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.spec__icon svg{ width:26px; height:26px; }
.spec:hover .spec__icon{
background:linear-gradient(135deg, var(--ember), var(--ember-deep));
color:#FFF1E4; border-color:transparent; transform:scale(1.06);
}
.spec h3{
font-family:var(--display); font-size:clamp(24px, 2.3vw, 30px);
color:var(--cream); line-height:1.2; margin-bottom:12px;
transition:color .4s var(--ease);
}
.spec:hover h3{ color:var(--ember-lit); }
.spec p{ font-size:14.5px; color:var(--muted); }
.menu__cta{
margin-top:clamp(52px, 6vw, 84px); text-align:center;
}
.menu__cta p{ font-family:var(--display); font-style:italic; font-size:22px; color:var(--cream-soft); }
.menu__cta-actions{ margin-top:26px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* ═══════════════ BUFFET ═══════════════ */
.buffet{ text-align:center; overflow:hidden; }
.buffet__bg{
position:absolute; inset:0;
background:
linear-gradient(180deg, var(--ink) 0%, rgba(var(--veil-rgb),.9) 42%, var(--ink) 100%),
radial-gradient(70% 90% at 50% 50%, rgba(226,96,15,var(--glow-b)), transparent 70%),
/* Foto real del buffet, versión editada sin los letreros del flyer.
Ya no hace falta desplazar el encuadre: se centra normal. */
url("img/buffet.jpg") center / cover no-repeat;
background-color:var(--ink-3);
}
.buffet__inner{ position:relative; z-index:1; }
.buffet__hours{
margin-top:28px;
font-family:var(--display); font-weight:300;
font-size:clamp(44px, 7.5vw, 92px); line-height:1; letter-spacing:-.02em;
background:linear-gradient(150deg, var(--amber), var(--ember-lit) 60%, var(--ember));
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.buffet__hours span{
font-size:.34em; font-style:italic; color:var(--muted);
-webkit-text-fill-color:var(--muted); margin-inline:.18em;
}
.buffet__actions{ margin-top:38px; display:flex; justify-content:center; }
/* ═══════════════ NÚMEROS ═══════════════ */
.numeros{ background:var(--ink); }
.stats{
display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
padding-block:clamp(38px, 4.6vw, 58px);
text-align:center;
}
.stat + .stat{ border-left:1px solid var(--line); }
.stat strong{
display:block; font-family:var(--display); font-weight:400;
font-size:clamp(36px, 4.4vw, 58px); line-height:1;
background:linear-gradient(160deg, var(--amber), var(--ember));
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Ojo: debe ser hijo directo. El número de años se marca como
34, y un `.stat span` suelto
también lo alcanzaba y lo encogía a tamaño de etiqueta. */
.stat > span{
display:block; margin-top:12px; font-size:10.5px;
letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
/* El número hereda el tamaño y el degradado del que lo contiene */
.stat strong span{ font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; }
/* ═══════════════ GALERÍA ═══════════════ */
.galeria{ background:var(--ink-2); }
/* 9 platillos: 3 filas de 4 columnas.
Las celdas .gcell--wide ocupan 2 columnas (2+1+1 por fila). */
.gallery{
display:grid; grid-template-columns:repeat(4, 1fr);
grid-auto-rows:clamp(180px, 19vw, 240px); gap:12px;
}
.gcell{
margin:0; position:relative; overflow:hidden; border-radius:var(--r);
cursor:zoom-in; background:var(--ink-3);
box-shadow:inset 0 0 0 1px var(--line);
}
.gcell--wide{ grid-column:span 2; }
.gcell--tall{ grid-row:span 2; }
.gcell .frame__img{ position:absolute; inset:0; }
.gcell::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 45%, rgba(11,9,7,.9) 100%);
opacity:.75; transition:opacity .5s var(--ease);
}
.gcell:hover::after{ opacity:1; }
.gcell:hover .frame__img{ transform:scale(1.07); }
.gcell figcaption{
position:absolute; left:20px; right:20px; bottom:18px; z-index:2;
font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
/* fijo: el degradado de abajo es oscuro en los dos temas */
color:#F4ECE1; opacity:0; transform:translateY(10px);
transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.gcell:hover figcaption{ opacity:1; transform:none; }
/* ═══════════════ REDES ═══════════════ */
.redes{ background:var(--ink); }
.socials{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.social{
position:relative; display:grid; grid-template-columns:auto 1fr auto;
align-items:center; gap:22px;
padding:28px 30px; border:1px solid var(--line); border-radius:var(--r);
background:linear-gradient(135deg, var(--tint), transparent);
overflow:hidden;
transition:border-color .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.social::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
background:linear-gradient(180deg, var(--amber), var(--ember));
transform:scaleY(0); transform-origin:top;
transition:transform .5s var(--ease);
}
.social:hover{
border-color:var(--line-strong); transform:translateY(-3px);
background:linear-gradient(135deg, rgba(226,96,15,.07), transparent 60%);
}
.social:hover::before{ transform:scaleY(1); }
.social__icon{
width:52px; height:52px; flex:none; display:grid; place-items:center;
border:1px solid var(--line-strong); border-radius:50%;
color:var(--ember-lit);
transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.social__icon svg{ width:22px; height:22px; }
.social:hover .social__icon{
background:linear-gradient(135deg, var(--ember), var(--ember-deep));
color:#FFF1E4; border-color:transparent;
}
.social__icon--wa{ color:var(--wa-lit); }
.social:hover .social__icon--wa{
background:linear-gradient(135deg, var(--wa-lit), var(--wa)); color:#04220F;
}
.social:hover .social__icon--wa ~ .social__body em{ color:var(--wa-lit); }
.social__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.social__body strong{
font-family:var(--display); font-size:24px; font-weight:500; color:var(--cream);
}
.social__body em{ font-style:normal; font-size:13px; color:var(--amber); letter-spacing:.04em; }
.social__body small{ font-size:12.5px; color:var(--muted); }
.social__arrow{
font-size:19px; color:var(--muted);
transition:transform .45s var(--ease), color .45s var(--ease);
}
.social:hover .social__arrow{ transform:translate(4px,-4px); color:var(--ember-lit); }
/* ═══════════════ RESERVACIONES ═══════════════ */
.reservar{ text-align:center; overflow:hidden; }
.reservar__bg{
position:absolute; inset:0;
background:
linear-gradient(180deg, var(--ink) 0%, rgba(26,13,6,.92) 48%, var(--ink) 100%),
radial-gradient(70% 80% at 50% 100%, rgba(226,96,15,var(--glow-c)), transparent 70%),
/* ⚠️ IDEAL: sustituir por una foto real del salón con mesas ocupadas. */
url("img/corte-parrilla.jpg") center/cover no-repeat;
background-color:var(--ink-3);
}
.reservar__inner{ position:relative; z-index:1; }
.reservar__tags{
margin-top:24px; display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center;
font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--cream-soft);
}
.reservar__tags i{ color:var(--ember); font-style:normal; }
.reservar__actions{ margin-top:42px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.reservar__fine{
margin-top:32px; font-size:12.5px; color:var(--muted);
max-width:52ch; margin-inline:auto;
}
/* ═══════════════ UBICACIÓN ═══════════════ */
.ubicacion{ background:var(--ink-2); }
.grid-2--map{ align-items:stretch; }
.info{ margin-top:44px; }
.info__row{
display:grid; grid-template-columns:110px 1fr; gap:24px;
padding:20px 0; border-top:1px solid var(--line);
}
.info__row:last-child{ border-bottom:1px solid var(--line); }
.info dt{
font-size:10px; letter-spacing:.24em; text-transform:uppercase;
color:var(--amber); padding-top:5px;
}
.info dd{ margin:0; color:var(--cream-soft); font-size:15px; line-height:1.75; }
.info dd em{ font-style:italic; color:var(--muted); font-size:14px; }
.info dd a{
border-bottom:1px solid var(--line-strong);
transition:color .35s var(--ease), border-color .35s var(--ease);
}
.info dd a:hover{ color:var(--ember-lit); border-color:var(--ember-lit); }
.info__hint{
display:inline-block; margin-left:8px;
font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
border:1px solid var(--line); border-radius:99px; padding:2px 9px;
vertical-align:middle; translate:0 -1px;
}
/* Referencia visual para llegar (punto de referencia local) */
.info__ref{
display:inline-flex; align-items:center; gap:8px; margin-top:14px;
font-size:12px; letter-spacing:.12em; text-transform:uppercase;
color:var(--amber); font-weight:500; line-height:1.4;
border:1px solid rgba(232,163,61,.32); border-radius:99px;
padding:7px 15px 7px 12px;
background:linear-gradient(135deg, rgba(226,96,15,.10), transparent 70%);
}
.info__ref svg{ width:15px; height:15px; flex:none; }
.ubicacion__actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
.ubicacion__map{ display:flex; }
.map{
position:relative; flex:1; min-height:480px; border-radius:var(--r);
overflow:hidden; box-shadow:0 40px 90px -44px var(--shadow-2);
}
.map::after{
content:""; position:absolute; inset:0; pointer-events:none;
box-shadow:inset 0 0 0 1px var(--line-strong), inset 0 0 90px rgba(var(--veil-rgb),.55);
}
.map iframe{
width:100%; height:100%; border:0; position:absolute; inset:0;
/* El mapa se integra al tono oscuro de la página */
filter:var(--map-filter);
transition:filter .6s var(--ease);
}
.map:hover iframe{ filter:var(--map-filter-hover); }
/* Tarjeta de la marca sobre el mapa: nombra el punto sin depender de
que se lea la etiqueta chica de Google. No captura el puntero, para
no estorbar al arrastrar el mapa; sólo el botón de Ruta sí. */
.map__card{
position:absolute; z-index:3;
left:clamp(10px, 2.5%, 18px); bottom:clamp(10px, 2.5%, 18px);
max-width:calc(100% - 36px);
display:flex; align-items:center; gap:12px;
padding:10px 12px;
border-radius:var(--r);
background:rgba(var(--veil-rgb), .92);
backdrop-filter:blur(14px) saturate(1.2);
box-shadow:0 16px 36px -20px var(--shadow-2), 0 0 0 1px var(--line-strong);
pointer-events:none;
}
.map__card-mark{ width:26px; height:26px; flex:none; color:var(--ember-lit); }
.map__card-mark svg{ width:100%; height:100%; }
.map__card-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.map__card-body strong{
font-family:var(--display); font-size:17px; font-weight:600;
color:var(--cream); line-height:1.15; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis;
}
.map__card-body small{
font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.map__card-link{
pointer-events:auto; flex:none;
display:inline-flex; align-items:center; gap:6px;
margin-left:2px; padding:9px 14px; border-radius:99px;
font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
color:#FFF1E4;
background:linear-gradient(135deg, var(--ember), var(--ember-deep));
box-shadow:0 8px 20px -10px rgba(194,65,12,.9);
transition:filter .35s var(--ease), transform .35s var(--ease);
}
.map__card-link svg{ width:13px; height:13px; }
.map__card-link:hover{ filter:brightness(1.12); transform:translateY(-1px); }
@media (max-width: 560px){
.map__card{ left:8px; right:8px; bottom:8px; max-width:none; padding:9px 10px; }
.map__card-body small{ display:none; }
.map__card-body strong{ font-size:15px; }
.map__card-link{ padding:8px 12px; }
}
/* ═══════════════ FOOTER ═══════════════ */
.footer{ background:var(--ink); border-top:1px solid var(--line); padding-top:clamp(56px, 6vw, 80px); }
.footer__top{
display:grid; grid-template-columns:1.5fr 1.3fr 1fr 1fr;
gap:clamp(30px, 4vw, 56px);
padding-bottom:clamp(44px, 5vw, 64px);
}
.footer__brand{ display:flex; align-items:flex-start; gap:14px; }
.footer__brand .brand__mark{ width:40px; height:40px; }
.footer__tagline{
font-family:var(--display); font-size:22px; color:var(--cream); line-height:1.2;
}
.footer__tagline span{
display:block; font-family:var(--sans); font-size:9.5px;
letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:10px;
}
.footer__h{
font-size:10px; letter-spacing:.26em; text-transform:uppercase;
color:var(--amber); margin-bottom:18px; font-weight:500;
}
.footer__addr, .footer__text{ font-size:14px; color:var(--muted); line-height:1.85; }
.footer__addr a{
color:var(--cream-soft);
transition:color .35s var(--ease);
}
.footer__addr a:hover{ color:var(--ember-lit); }
.footer__text strong{ color:var(--cream-soft); font-weight:500; }
.footer__nav{ display:flex; flex-direction:column; gap:11px; }
.footer__nav a{
font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
transition:color .35s var(--ease);
}
.footer__nav a:hover{ color:var(--ember-lit); }
.footer__social{ display:flex; gap:10px; margin-top:26px; }
.footer__social a{
width:42px; height:42px; display:grid; place-items:center;
border:1px solid var(--line); border-radius:50%; color:var(--cream-soft);
transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.footer__social svg{ width:18px; height:18px; }
.footer__social a:hover{
color:#FFF1E4; border-color:transparent; transform:translateY(-3px);
background:linear-gradient(135deg, var(--ember), var(--ember-deep));
}
.footer__legal{ border-top:1px solid var(--line); padding-block:26px 30px; }
.footer__legal-biz{
font-size:12px; color:var(--muted); line-height:1.85; max-width:100ch;
}
.footer__legal-biz strong{ color:var(--cream-soft); font-weight:600; }
.footer__legal-row{
display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;
margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
font-size:11.5px; color:var(--muted);
}
.footer__legal-row a{
border-bottom:1px solid var(--line-strong);
transition:color .35s var(--ease), border-color .35s var(--ease);
}
.footer__legal-row a:hover{ color:var(--ember-lit); border-color:var(--ember-lit); }
/* Crédito del desarrollador: segunda línea del copyright, no un bloque aparte.
Sin borde, sin centrar, sin versalitas y un punto más chico que la línea
de arriba — así se ve, pero cede la jerarquía al restaurante. */
.credit{
margin-top:5px;
font-size:10.5px; letter-spacing:.01em; text-transform:none;
color:var(--muted); opacity:.85;
}
.credit__link{ color:var(--cream-soft); font-weight:500; }
/* Los estilos de enlace sólo aparecen cuando ya hay una URL puesta */
.credit__link[href]{
border-bottom:1px solid var(--line-strong);
transition:color .35s var(--ease), border-color .35s var(--ease);
}
.credit__link[href]:hover{ color:var(--ember-lit); border-color:var(--ember-lit); }
/* ═══════════════ WHATSAPP FLOTANTE ═══════════════ */
.wa-float{
position:fixed; right:24px; bottom:24px; z-index:950;
display:flex; align-items:center; gap:0;
height:60px; padding:0 18px; border-radius:99px;
background:linear-gradient(135deg, var(--wa-lit), var(--wa));
color:#052E14;
box-shadow:0 14px 40px -12px rgba(37,211,102,.75), 0 4px 14px rgba(0,0,0,.4);
transition:transform .45s var(--ease), box-shadow .45s var(--ease), gap .45s var(--ease), padding .45s var(--ease);
}
.wa-float svg{ width:30px; height:30px; flex:none; position:relative; z-index:1; }
.wa-float__label{
font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
max-width:0; overflow:hidden; white-space:nowrap;
transition:max-width .5s var(--ease), margin-left .5s var(--ease);
position:relative; z-index:1;
}
.wa-float:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 20px 50px -12px rgba(37,211,102,.9); }
.wa-float:hover .wa-float__label{ max-width:120px; margin-left:12px; }
.wa-float__pulse{
position:absolute; inset:0; border-radius:99px;
box-shadow:0 0 0 0 rgba(37,211,102,.55);
animation:waPulse 2.6s var(--ease) infinite;
}
@keyframes waPulse{
0% { box-shadow:0 0 0 0 rgba(37,211,102,.55); }
70% { box-shadow:0 0 0 20px rgba(37,211,102,0); }
100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
/* ═══════════════ LIGHTBOX ═══════════════ */
.lightbox{
position:fixed; inset:0; z-index:1000;
display:grid; place-items:center; gap:18px; grid-auto-rows:min-content;
align-content:center;
background:rgba(6,4,3,.94); backdrop-filter:blur(10px); color:#F4ECE1;
padding:5vh 5vw; animation:fadeIn .35s var(--ease);
}
.lightbox[hidden]{ display:none; }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
/* Es un ![]()
, no un fondo: con max-width/max-height la foto se ajusta
sola a su proporción real. Verticales y horizontales se ven completas,
sin recorte, y el marco queda pegado al borde de la imagen. */
.lightbox__img{
max-width:min(1180px, 92vw);
max-height:min(78vh, 860px);
width:auto; height:auto;
object-fit:contain;
border-radius:var(--r);
box-shadow:0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(233,206,172,.22);
/* La entrada y el cambio de foto se hacen con transición, no con
animación: así el mismo efecto sirve al abrir y al pasar de una
imagen a otra. El script quita .is-swapping cuando la nueva ya
está decodificada, de modo que nunca se ve media foto. */
opacity:1; scale:1;
transition:opacity .3s var(--ease), scale .42s var(--ease);
}
.lightbox__img.is-swapping{ opacity:0; scale:.975; }
.lightbox__cap{
/* el lightbox es oscuro en los dos temas, por eso los colores van fijos */
display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#A2917F;
}
.lightbox__count{
padding-left:16px; border-left:1px solid rgba(233,206,172,.16);
font-variant-numeric:tabular-nums;
}
.lightbox__count b{ color:#E8A33D; font-weight:600; }
.lightbox__count[hidden]{ display:none; }
/* Flechas para recorrer la galería sin tener que cerrar */
.lightbox__nav{
position:absolute; top:50%; translate:0 -50%; z-index:2;
width:54px; aspect-ratio:1;
display:grid; place-items:center;
color:#F4ECE1;
border:1px solid rgba(233,206,172,.2); border-radius:50%;
background:rgba(6,4,3,.55); backdrop-filter:blur(8px);
transition:background .35s var(--ease), color .35s var(--ease),
border-color .35s var(--ease), transform .35s var(--ease);
}
.lightbox__nav svg{ width:22px; height:22px; }
.lightbox__nav--prev{ left:clamp(10px, 2.5vw, 36px); }
.lightbox__nav--next{ right:clamp(10px, 2.5vw, 36px); }
/* Se usa la propiedad `scale` y no `transform`, porque el centrado
vertical ya va en `translate` y un `transform` lo sobrescribiría. */
.lightbox__nav:hover{
background:linear-gradient(135deg, var(--ember-lit), var(--ember));
color:#FFF1E4; border-color:transparent; scale:1.06;
}
.lightbox__nav[hidden]{ display:none; }
@media (max-width: 640px){
.lightbox__nav{ width:44px; }
.lightbox__nav svg{ width:19px; height:19px; }
.lightbox__cap{ gap:10px; }
.lightbox__count{ padding-left:0; border-left:0; }
}
.lightbox__close{
position:absolute; top:20px; right:26px; width:48px; height:48px;
font-size:30px; line-height:1; color:#F4ECE1;
border:1px solid rgba(233,206,172,.2); border-radius:50%;
transition:background .35s var(--ease), transform .35s var(--ease);
}
.lightbox__close:hover{ background:var(--ember); transform:rotate(90deg); }
/* ═══════════════ REVEAL ═══════════════ */
.reveal{
opacity:0; transform:translateY(26px);
transition:opacity .9s var(--ease), transform .9s var(--ease);
transition-delay:calc(var(--d, 0) * 110ms);
will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }
/* ═══════════════ VISOR DEL MENÚ (menu.html) ═══════════════
Esta página no es una sección del sitio: es un visor a pantalla
completa. Sin encabezados, sin texto, sin miniaturas — la carta y
nada más. Va oscuro en los dos temas, como el visor de fotos:
el papel crema del menú resalta sobre el fondo. */
.viewer-page{ overflow:hidden; background:#0E0B08; }
.viewer{
position:fixed; inset:0; z-index:1;
/* svh = alto visible real: evita que la barra de URL del móvil
se coma el pie del visor */
height:100svh;
display:grid; grid-template-rows:auto 1fr auto;
background:
radial-gradient(120% 80% at 50% 0%, #1A110A 0%, #0E0B08 62%);
color:#E8D9C2;
}
/* ── Barra superior: identidad y salida, nada más ── */
.viewer__bar{
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:16px clamp(14px, 3vw, 28px);
/* En celulares con notch, la barra se baja lo necesario */
padding-top:max(16px, env(safe-area-inset-top));
padding-left:max(14px, env(safe-area-inset-left));
padding-right:max(14px, env(safe-area-inset-right));
border-bottom:1px solid rgba(233,206,172,.10);
}
.viewer__brand{
display:flex; align-items:center; gap:11px;
color:#E8D9C2;
transition:color .35s var(--ease);
}
.viewer__brand:hover{ color:#F5EBD7; }
.viewer__brand-mark{
width:26px; height:26px; flex:none; color:var(--ember-lit);
filter:drop-shadow(0 0 10px rgba(226,96,15,.45));
}
.viewer__brand-mark svg{ width:100%; height:100%; }
.viewer__brand-text{
font-family:var(--display); font-size:19px; font-weight:500; letter-spacing:.05em;
white-space:nowrap;
}
.viewer__close{
width:42px; height:42px; flex:none;
display:grid; place-items:center;
font-size:26px; line-height:1; color:#E8D9C2;
border:1px solid rgba(233,206,172,.2); border-radius:50%;
transition:background .35s var(--ease), color .35s var(--ease),
border-color .35s var(--ease), transform .4s var(--ease);
}
.viewer__close:hover{
background:linear-gradient(135deg, var(--ember-lit), var(--ember));
color:#FFF1E4; border-color:transparent; transform:rotate(90deg);
}
/* ── Escenario ── */
.viewer__stage{ position:relative; min-height:0; overflow:hidden; }
.viewer__track{
display:flex; height:100%; margin:0; padding:0; list-style:none;
transition:transform .5s var(--ease);
will-change:transform;
}
.vslide{
flex:0 0 100%; min-width:0; height:100%;
display:flex; align-items:center; justify-content:center;
padding:clamp(10px, 2vw, 26px);
overflow:hidden; overscroll-behavior:contain;
}
.vslide img{
display:block; width:auto; height:auto;
max-width:100%; max-height:100%;
object-fit:contain;
border-radius:2px;
box-shadow:0 30px 80px -34px rgba(0,0,0,.95);
cursor:zoom-in;
}
/* Acercar para leer la letra chica */
.vslide.is-zoomed{ align-items:flex-start; overflow-y:auto; }
.vslide.is-zoomed img{
max-height:none; width:100%; max-width:920px;
cursor:zoom-out;
}
/* ── Flechas ── */
.viewer__arrow{
position:absolute; top:50%; translate:0 -50%; z-index:3;
width:clamp(44px, 5vw, 56px); aspect-ratio:1;
display:grid; place-items:center;
border:1px solid rgba(233,206,172,.22); border-radius:50%;
color:#E8D9C2; background:rgba(14,11,8,.55);
backdrop-filter:blur(10px);
transition:background .35s var(--ease), color .35s var(--ease),
border-color .35s var(--ease), opacity .3s var(--ease);
}
.viewer__arrow svg{ width:22px; height:22px; }
.viewer__arrow--prev{ left:clamp(10px, 2vw, 26px); }
.viewer__arrow--next{ right:clamp(10px, 2vw, 26px); }
.viewer__arrow:hover{
background:linear-gradient(135deg, var(--ember), var(--ember-deep));
color:#FFF1E4; border-color:transparent;
}
.viewer__arrow[disabled]{ opacity:.22; pointer-events:none; }
/* ── Barra inferior: sólo dónde vas y cómo acercar ── */
.viewer__foot{
display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
padding:15px clamp(14px, 3vw, 28px);
/* Deja libre la barra de gestos de iPhone y Android */
padding-bottom:max(15px, env(safe-area-inset-bottom));
border-top:1px solid rgba(233,206,172,.10);
font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
color:#9C8B78;
}
.viewer__count{ font-variant-numeric:tabular-nums; }
.viewer__count b{ color:var(--amber); font-weight:600; }
.viewer__hint{
display:flex; align-items:center; gap:8px;
padding-left:18px; border-left:1px solid rgba(233,206,172,.14);
}
.viewer__hint svg{ width:14px; height:14px; color:var(--ember-lit); }
@media (max-width: 560px){
.viewer__brand-text{ font-size:16px; }
.viewer__hint{ padding-left:0; border-left:0; }
.viewer__foot{ gap:10px; }
}
/* ═══════════════ PÁGINA LEGAL (aviso de privacidad) ═══════════════ */
.legal{ padding-top:clamp(130px, 15vw, 180px); padding-bottom:var(--sec-y); }
.legal__head{ margin-bottom:clamp(40px, 5vw, 64px); }
.legal__updated{
margin-top:20px; font-size:11px; letter-spacing:.22em;
text-transform:uppercase; color:var(--muted);
}
.legal__body{ max-width:78ch; }
.legal__body h2{
font-family:var(--display); font-size:clamp(24px, 2.6vw, 32px);
color:var(--cream); line-height:1.25;
margin-top:56px; margin-bottom:18px;
padding-top:26px; border-top:1px solid var(--line);
}
.legal__body h2:first-of-type{ margin-top:0; border-top:0; padding-top:0; }
.legal__body h2 .legal__n{
display:inline-block; margin-right:14px;
font-family:var(--sans); font-size:12px; font-weight:600;
letter-spacing:.1em; color:var(--ember-lit); vertical-align:middle;
}
.legal__body p{ margin-bottom:16px; color:var(--cream-soft); font-size:15.5px; }
.legal__body ul{ margin:0 0 20px; display:grid; gap:9px; }
.legal__body li{
position:relative; padding-left:22px; font-size:15px; color:var(--muted);
}
.legal__body li::before{
content:"◆"; position:absolute; left:0; top:0;
font-size:7px; color:var(--ember); line-height:2.4;
}
.legal__body a{
color:var(--ember-lit); border-bottom:1px solid rgba(226,96,15,.4);
transition:border-color .35s var(--ease);
}
.legal__body a:hover{ border-color:var(--ember-lit); }
.legal__card{
margin:34px 0; padding:30px 32px;
border:1px solid var(--line); border-radius:var(--r);
background:linear-gradient(135deg, rgba(226,96,15,.06), transparent 60%);
}
.legal__card p{ margin-bottom:6px; font-size:15px; }
.legal__card p:last-child{ margin-bottom:0; }
.legal__back{ margin-top:64px; padding-top:34px; border-top:1px solid var(--line); }
/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1024px){
.nav__links{
position:fixed; inset:0 0 auto 0; top:0;
flex-direction:column; justify-content:center; gap:26px;
height:100vh; height:100svh; /* vh de respaldo si no hay svh */
padding:100px 32px 60px;
background:rgba(var(--veil-rgb),.97); backdrop-filter:blur(20px);
clip-path:circle(0% at calc(100% - 44px) 44px);
transition:clip-path .7s var(--ease);
pointer-events:none;
}
.nav__links.is-open{ clip-path:circle(150% at calc(100% - 44px) 44px); pointer-events:auto; }
.nav__links > a:not(.btn){ font-size:15px; letter-spacing:.24em; }
/* Altura constante en móvil. En escritorio la barra se encoge al
hacer scroll, pero en celular ese cambio de alto se sumaba al
vaivén de la barra del navegador y se veía tembloroso.
Aquí sólo cambia el fondo. */
.nav, .nav.is-stuck{ padding-block:0; }
.nav__inner, .nav.is-stuck .nav__inner{ padding-block:14px; }
/* Sin desenfoque de fondo en la barra: en móvil es lo que más
parpadea al hacer scroll. Un fondo casi opaco se ve igual de
bien y no le cuesta nada al teléfono. */
.nav.is-stuck{
backdrop-filter:none; -webkit-backdrop-filter:none;
background:rgba(var(--veil-rgb), .97);
}
.nav__links{ backdrop-filter:none; -webkit-backdrop-filter:none; }
.btn--outline{ backdrop-filter:none; -webkit-backdrop-filter:none; }
/* El grano deja de animarse: es una capa fija a pantalla completa
con mezcla de color, redibujada 1.4 veces por segundo. En
escritorio se lee como textura; en celular, como temblor.
Se queda la textura, se va el movimiento. */
.grain{ animation:none; opacity:calc(var(--grain-op) * .55); }
.nav__cta{ margin-top:14px; --pad-y:15px; --pad-x:34px; font-size:12px; }
.burger{ display:block; position:relative; z-index:2; }
.grid-2{ grid-template-columns:1fr; }
.historia__media{ min-height:auto; max-width:520px; margin-inline:auto; }
.frame--float{ right:-4%; width:48%; }
.specialties{ grid-template-columns:repeat(2, 1fr); }
.socials{ grid-template-columns:1fr; }
.gallery{ grid-auto-rows:180px; }
.map{ min-height:420px; }
.footer__top{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 720px){
.specialties{ grid-template-columns:1fr; }
.stats{ grid-template-columns:repeat(2, 1fr); gap:0; }
.stat{ padding-block:26px; }
.stat + .stat{ border-left:0; }
.stat:nth-child(even){ border-left:1px solid var(--line); }
.stat:nth-child(n+3){ border-top:1px solid var(--line); }
.gallery{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px; }
.gcell--wide{ grid-column:span 2; }
.gcell--tall{ grid-row:span 1; }
.info__row{ grid-template-columns:1fr; gap:8px; }
.hero__actions .btn{ width:100%; }
.reservar__actions .btn, .menu__cta-actions .btn, .buffet__actions .btn{ width:100%; }
.wa-float{
right:16px; height:56px; padding:0 15px;
bottom:max(16px, env(safe-area-inset-bottom));
}
.wa-float__label{ display:none; }
.footer__top{ grid-template-columns:1fr; }
.footer__legal-row{ justify-content:flex-start; }
/* El sello circular se oculta en celular: sobre la foto en pantalla
chica el degradado naranja se corta feo. El dato no se pierde —
"DESDE 1992" sigue escrito como encabezado de la sección.
¿Quitarlo también en escritorio? Mueve esta regla fuera del
@media, o cambia el .stamp de arriba a display:none. */
.stamp{ display:none; }
}
/* ── Celulares angostos (≤420px) ──
Con el interruptor de tema al lado del burger, la marca a tamaño
completo desbordaba la barra. Todo baja un escalón. */
@media (max-width: 420px){
.nav__inner{ gap:12px; }
.nav__actions{ gap:6px; }
.brand{ gap:10px; min-width:0; }
.brand__mark{ width:28px; height:28px; }
.brand__name{ font-size:19px; }
.brand__sub{ font-size:7.5px; letter-spacing:.24em; margin-top:4px; }
.switch__track{ width:54px; height:28px; }
.switch__knob{ width:20px; height:20px; transform:translateX(24px); }
[data-theme="light"] .switch__knob{ transform:translateX(0); }
.switch__icon{ width:12px; height:12px; }
.switch__icon--sun { left:7px; }
.switch__icon--moon{ right:7px; }
.burger{ width:40px; height:40px; }
.burger span{ left:9px; width:20px; }
}
/* ═══════════════ MOVIMIENTO REDUCIDO ═══════════════ */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important;
}
.reveal{ opacity:1; transform:none; }
.grain{ display:none; }
}
/* ═══════════════ IMPRESIÓN ═══════════════ */
@media print{
.nav, .wa-float, .grain, .hero__scroll, .marquee, .lightbox, .gallery{ display:none !important; }
body{ background:#fff; color:#111; }
.hero__media, .hero__veil, .hero__ember,
.buffet__bg, .reservar__bg{ display:none !important; }
.h2, .hero__title, .legal__body h2{ color:#111; }
.legal__body p, .legal__body li, .lede, .body{ color:#333; }
}