/*
  LIDA, Pereira. Shared design system for every page.

  Direction: MESA LARGA (restaurantes BRIEF section 2), variation "Noche en
  Cerritos": the room after dark, lit by its woven lamps.
  Type: Playfair Display (display) + Albert Sans (support).
  Hero: full-bleed room photograph, headline anchored bottom-left, one text link.
  Motion: candlelight. A slow warm vignette breathes on the hero, text fades in
  at reading pace, photos warm up as they enter.

  Mark: the owner's own logo, uploaded in their panel (the owner's request),
  in the header and the footer of every page and as the tab icon. It is shown
  as it is: never recoloured, redrawn or cropped, 48px in the header and 56px
  in the footer. The palette is the previous build's, kept exactly.

  Palette (RULES 11), read off their own storefront and room photos:
    --noche    the dark walnut of the lattice doors and ceiling beams, at night
    --crema    the cream walls, ceiling sails and chairs
    --azul     the dusty blue of the sofas, lightened to read as text on noche
    --fachada  the pale blue of the facade around the lattice doors (a panel)
    --ambar    the light of the woven lamps; only ever light, never text
  One accent at a time (the brief): the blue. The WhatsApp green is the
  engine's and is painted on every WhatsApp button over this theme.

  Mobile first: the base styles are the phone at 360 to 390px; min-width
  queries add the tablet (700), the desktop nav (960) and wide screens.
*/
:root{
  --noche:#17110C;
  --noche-2:#1F1711;
  --noche-3:#110C08;
  --crema:#F2EADC;
  --crema-2:#CBBDA8;
  --azul:#A9C4D0;
  --fachada:#B9CDD7;
  --tinta:#1B140E;
  --tinta-2:#3E3127;
  --ambar:233,178,102;
  --rule:rgba(242,234,220,.15);
  --rule-2:rgba(242,234,220,.28);
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Albert Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --g:clamp(16px,5vw,72px);
  --slow:cubic-bezier(.25,.1,.15,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--noche);scroll-padding-top:calc(var(--th,64px) + 20px)}
body{background:var(--noche);color:var(--crema);font:400 17px/1.6 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none}
address{font-style:normal}
figure{margin:0}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.008em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;color:var(--azul)}
p{text-wrap:pretty}
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--g)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:60}
.skip:focus{left:16px;top:16px;background:var(--crema);color:var(--tinta);padding:12px 16px}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
/* Category and dish names arrive in capitals; headings are sentence case. */
.sent{display:inline-block;text-transform:lowercase}
.sent::first-letter{text-transform:uppercase}
.label{font:600 12px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--azul)}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55}

/* the hairline text link: 44px tall to the thumb, the line stays under the words */
.hair{display:inline-block;padding:10px 0;line-height:24px;font-weight:500;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;background-origin:content-box;background-clip:content-box;
  transition:background-size .6s var(--slow)}
.hair::after{content:"\2192";display:inline-block;margin-left:.5em;transition:transform .5s var(--slow)}
.hair:hover::after{transform:translateX(5px)}
.hair.back::after{content:none}
.hair.back::before{content:"\2190";display:inline-block;margin-right:.5em}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 24px;border-radius:999px;border:1px solid var(--crema);
  font:600 16px/1.2 var(--body);letter-spacing:.01em;text-decoration:none;text-align:center;transition:transform .4s var(--slow),background-color .3s}
.btn:hover{transform:translateY(-2px)}

/* ---------- utility bar: open now, in Pereira's clock ---------- */
.util{background:var(--noche-3);border-bottom:1px solid var(--rule);font-size:14px;color:var(--crema-2)}
.util .wrap{display:flex;align-items:center;gap:0 18px;min-height:44px}
.status{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-weight:600;color:var(--crema);text-decoration:none}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#8C8174;flex:none}
.status.open::before{background:#8FC79A;box-shadow:0 0 0 4px rgba(143,199,154,.16)}
.today{display:none}
@media (min-width:700px){.today{display:inline}.today[hidden]{display:none}}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(23,17,12,.97);border-bottom:1px solid transparent;transition:border-color .5s}
.top.solid{border-bottom-color:var(--rule)}
.top .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;min-height:64px;position:relative}
/* the mark is their own logo, as uploaded in their panel (the owner's
   request): shown whole, never recoloured or cropped, 48px tall in the
   header, inside a link 48px tall to the thumb */
.mark{display:inline-flex;align-items:center;min-height:48px;min-width:48px;margin-right:auto;text-decoration:none;line-height:0}
.mark .logo{display:block;width:48px;height:48px;max-width:none;object-fit:contain;transition:opacity .4s}
.mark:hover .logo{opacity:.86}
.top .btn{min-height:44px;padding:8px 14px;font-size:15px}
/* The header's own WhatsApp button. With their online booking on, the engine
   points "Reservar" at the booking page, so WhatsApp keeps a button beside it:
   a green circle on the phone, the circle with its label from 700px. */
.top .wa-h{width:44px;padding:0}
.top .wa-h .wa-ico{width:22px;height:22px;margin:0}
.wa-h-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:700px){
  .top .wrap{gap:0 10px}
  .top .btn{padding:8px 16px}
  .top .wa-h{width:auto}
  .top .wa-h .wa-ico{width:1.2em;height:1.2em;margin-right:.45em}
  .wa-h-t{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
.menu-btn{display:none;align-items:center;gap:9px;min-height:44px;min-width:44px;padding:0 2px 0 8px;background:none;border:0;font:500 15px/1 var(--body);cursor:pointer}
.menu-btn .bars{position:relative;width:18px;height:11px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;top:50%;margin-top:-.75px;border-top:1.5px solid currentColor;transition:transform .3s}
.menu-btn[aria-expanded=true] .bars{border-color:transparent}
.menu-btn[aria-expanded=true] .bars::after{transform:rotate(45deg);box-shadow:0 0 0 0 currentColor}
.menu-btn[aria-expanded=true] .bars::before{content:"";position:absolute;left:0;right:0;top:50%;margin-top:-.75px;border-top:1.5px solid currentColor;transform:rotate(-45deg)}
.nav{order:3;width:100%}
.nav ul{display:flex;flex-wrap:wrap;gap:0 20px}
.nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:16px;color:var(--crema-2)}
.nav a[aria-current]{color:var(--crema)}
/* on the phone, with scripts, the nav folds behind the menu button */
.js .menu-btn{display:inline-flex}
.js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--noche);border-bottom:1px solid var(--rule);padding:10px var(--g) 32px}
.js .nav.open{display:block}
.js .nav ul{flex-direction:column}
.js .nav a{min-height:58px;font:400 30px/1.2 var(--display);color:var(--crema)}
.js .nav a[aria-current]{color:var(--azul);font-style:italic}
@media (min-width:960px){
  .top .wrap{flex-wrap:nowrap;gap:0 30px}
  .top .wa-h{margin-right:-18px}
  .mark{margin-right:0}
  .nav,.js .nav{display:block;order:0;position:static;width:auto;margin-left:auto;padding:0;border:0;background:none}
  .nav ul,.js .nav ul{flex-direction:row;gap:0 30px}
  .nav a,.js .nav a{min-height:44px;font:500 15px/1 var(--body);color:var(--crema-2);position:relative}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--slow)}
  .nav a:hover{color:var(--crema)}
  .nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
  .js .nav a[aria-current]{color:var(--crema);font-style:normal}
  .js .menu-btn{display:none}
}

/* ---------- home 1. hero: the room, full bleed, headline bottom left ---------- */
.hero{position:relative;display:grid;align-items:end;min-height:calc(100svh - var(--hh,108px));overflow:hidden;isolation:isolate;background:var(--noche)}
.hero-media{position:absolute;inset:0;z-index:-3}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:45% 50%}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(to top,rgba(17,12,8,.96) 0%,rgba(17,12,8,.88) 30%,rgba(17,12,8,.45) 56%,rgba(17,12,8,.06) 80%)}
.hero-glow{position:absolute;inset:-4%;z-index:-1;pointer-events:none;background:radial-gradient(80% 70% at 50% 40%,rgba(10,6,3,0) 52%,rgba(10,6,3,.7) 100%)}
.hero-glow::after{content:"";position:absolute;inset:0;background:radial-gradient(34% 26% at 56% 36%,rgba(var(--ambar),.26),rgba(var(--ambar),0) 72%);mix-blend-mode:screen}
.hero-copy{position:relative;padding-top:40px;padding-bottom:clamp(36px,7vh,92px)}
@media (min-width:700px){
  .hero-shade{background:linear-gradient(to top,rgba(17,12,8,.94) 0%,rgba(17,12,8,.7) 26%,rgba(17,12,8,.2) 55%,rgba(17,12,8,0) 78%),linear-gradient(to right,rgba(17,12,8,.72) 0%,rgba(17,12,8,.45) 38%,rgba(17,12,8,0) 68%)}
}
.hero h1{font-size:clamp(2.75rem,7.8vw,6.6rem);line-height:.98;letter-spacing:-.018em}
.hero h1 .ln{display:block}
/* the lead stays clear of the corner call and WhatsApp buttons on the phone */
.hero .lead{margin-top:18px;max-width:min(34ch,calc(100% - 60px));color:var(--crema)}
.hero .hair{margin-top:12px;font-size:17px}

/* ---------- home 2. reviews, right after the hero ---------- */
.resenas{padding:clamp(64px,10vw,128px) 0 clamp(56px,8vw,112px);
  --rv-card-bg:#F2EADC;--rv-card-fg:#1B140E;--rv-muted:#5A4A3B;--rv-line:rgba(27,20,14,.10);--rv-radius:3px;--rv-shadow:none;
  --rv-tilt:-1.2deg;--rv-speed:.8;--rv-quote-font:"Playfair Display",Georgia,serif}
.resenas-head{display:grid;gap:28px;margin-bottom:clamp(36px,5vw,64px)}
.resenas h2{font-size:clamp(2.3rem,5.6vw,4.4rem);max-width:13ch}
.rating{display:flex;align-items:center;gap:18px}
.rating-num{font:400 clamp(3.8rem,10vw,6.4rem)/.9 var(--display);letter-spacing:-.02em}
.rating-meta{display:grid;gap:8px;font-size:15px;line-height:1.4;color:var(--crema-2)}
.rating-meta .lb-stars{font-size:22px;color:var(--crema)}
.rating-src{display:inline-flex;align-items:center;gap:8px}
@media (min-width:860px){.resenas-head{grid-template-columns:1fr auto;align-items:end}}

/* ---------- home 3 and /carta. the index of the carta, the direction's signature ---------- */
.indice{padding:clamp(64px,10vw,140px) 0;background:var(--noche-2);border-block:1px solid var(--rule)}
.indice-grid{display:grid;gap:36px}
.indice-head h2{font-size:clamp(2.3rem,5.6vw,4.4rem)}
.indice-head p{margin-top:16px;color:var(--crema-2);max-width:34ch}
.indice-head .hair{margin-top:14px}
.toc{border-top:1px solid var(--rule);counter-reset:toc}
.toc li{counter-increment:toc;border-bottom:1px solid var(--rule)}
.toc a{display:flex;align-items:last baseline;gap:12px;min-height:60px;padding:14px 0;text-decoration:none}
.toc a::before{content:counter(toc,decimal-leading-zero);flex:none;width:2.3em;font:500 13px/1 var(--body);letter-spacing:.06em;color:var(--crema-2);font-variant-numeric:tabular-nums}
.toc-n{font:400 clamp(1.45rem,4.6vw,2.7rem)/1.14 var(--display);transition:transform .6s var(--slow),color .4s}
.toc-dots{flex:1 1 20px;min-width:14px;border-bottom:1px dotted var(--rule-2);transform-origin:left}
.toc-c{flex:none;font:600 15px/1 var(--body);font-variant-numeric:tabular-nums;color:var(--azul)}
@media (hover:hover){.toc a:hover .toc-n{transform:translateX(8px);font-style:italic;color:var(--azul)}}
@media (min-width:960px){
  .indice-grid{grid-template-columns:4fr 7fr;gap:clamp(48px,6vw,110px);align-items:start}
  .indice-head{position:sticky;top:calc(var(--th,64px) + 40px)}
  .toc a{min-height:76px}
}

/* ---------- home 4. three photographs from the table, rows that alternate ---------- */
.platos{padding:clamp(72px,10vw,150px) 0 clamp(24px,4vw,48px)}
.platos-head{margin-bottom:clamp(40px,6vw,88px)}
.platos-head h2{font-size:clamp(2.3rem,5.6vw,4.4rem);max-width:14ch}
.platos-head p{margin-top:16px;max-width:40ch;color:var(--crema-2)}
.plato{display:grid;gap:26px;margin-bottom:clamp(64px,10vw,120px)}
.plato-media{overflow:hidden;background:var(--noche-2)}
.plato-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.plato-media.sq img{aspect-ratio:1/1}
.plato-copy{padding-inline:var(--g)}
.plato-n{display:block;font:italic 400 clamp(3rem,7vw,5.6rem)/1 var(--display);color:var(--azul)}
.plato h3{font-size:clamp(2rem,4.2vw,3.4rem);margin-top:12px;max-width:12ch}
.plato p{margin-top:14px;max-width:32ch;font-size:18px;color:var(--crema-2)}
.plato .hair{margin-top:14px}
@media (min-width:860px){
  .plato{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;min-height:70vh;max-width:1320px;margin-inline:auto;padding-inline:var(--g);gap:0 24px}
  .plato-media{grid-column:1 / span 6}
  .plato-copy{grid-column:8 / span 5;padding:0}
  .plato:nth-of-type(even) .plato-media{grid-column:7 / span 6;order:2}
  .plato:nth-of-type(even) .plato-copy{grid-column:2 / span 5;order:1}
}

/* ---------- home 5. full-bleed pause on the room, one paragraph about the kitchen ---------- */
.pausa{position:relative;display:grid;align-items:end;min-height:150vw;overflow:hidden;isolation:isolate;background:var(--noche)}
.pausa img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.pausa::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(17,12,8,.97) 0%,rgba(17,12,8,.9) 40%,rgba(17,12,8,.25) 72%,rgba(17,12,8,0) 90%)}
.pausa-copy{padding-top:48px;padding-bottom:clamp(44px,7vw,100px)}
.pausa h2{max-width:14ch}
.pausa h2{font-size:clamp(2.2rem,5vw,4rem);margin-top:14px}
.pausa-copy p:not(.label){margin-top:16px;max-width:55ch;font-size:18px;color:var(--crema)}
@media (min-width:700px){.pausa{min-height:min(88svh,70vw)}}

/* ---------- home 6. groups and celebrations: a panel in the facade's blue ---------- */
.grupos{background:var(--fachada);color:var(--tinta);padding:clamp(64px,9vw,132px) 0}
.grupos-in{display:grid;gap:40px;align-items:center}
.grupos h2{font-size:clamp(2.3rem,5.4vw,4.2rem);max-width:12ch}
.grupos h2 em{color:inherit}
.grupos p{margin-top:16px;max-width:38ch;font-size:18px;color:var(--tinta-2)}
.grupos .btn{margin-top:28px}
.grupos-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cap{margin-top:12px;font-size:15px;line-height:1.45;color:var(--crema-2)}
.grupos .cap{color:var(--tinta-2)}
@media (min-width:860px){
  .grupos-in{grid-template-columns:5fr 6fr;gap:clamp(48px,7vw,120px)}
  .grupos-media{order:-1}
}

/* ---------- home 7. where the doors are ---------- */
.llegar{padding:clamp(72px,10vw,150px) 0}
.llegar-grid{display:grid;gap:40px}
.llegar-media img{width:100%;aspect-ratio:3/4;object-fit:cover}
.llegar h2{font-size:clamp(2.3rem,5.4vw,4.2rem);max-width:13ch}
.llegar address{margin-top:18px;max-width:30ch;font:400 clamp(1.3rem,2.6vw,1.8rem)/1.35 var(--display);color:var(--crema)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:18px}
.map{margin-top:28px;width:100%;min-height:300px;border:1px solid var(--rule);background:var(--noche-2)}
@media (min-width:860px){
  .llegar-grid{grid-template-columns:4fr 7fr;gap:clamp(48px,7vw,120px);align-items:start}
  .map{min-height:340px}
}

/* ---------- inner pages: the opening, lit by one lamp ---------- */
.cab{position:relative;overflow:hidden;isolation:isolate;padding:clamp(52px,9vw,128px) 0 clamp(44px,6vw,88px);border-bottom:1px solid var(--rule)}
.cab::before{content:"";position:absolute;z-index:-1;top:-30%;right:-25%;width:min(120vw,900px);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--ambar),.20),rgba(var(--ambar),.06) 55%,rgba(var(--ambar),0))}
.cab h1{font-size:clamp(2.8rem,8.4vw,6.4rem);max-width:15ch}
.cab .lead{margin-top:18px;max-width:40ch;color:var(--crema-2)}
.cab .acts{margin-top:26px}
.cab .volver{margin-bottom:10px}
.cab-meta{margin-top:14px;font-size:15px;color:var(--crema-2)}
.cab-meta b{font-weight:600;color:var(--azul);font-variant-numeric:tabular-nums}

/* ---------- menu-category: the pills and the two-column carta ---------- */
.pills{position:sticky;top:var(--th,64px);z-index:30;background:rgba(23,17,12,.97);border-bottom:1px solid var(--rule)}
.pills ul{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px var(--g);scroll-padding-inline:var(--g)}
.pills ul::-webkit-scrollbar{display:none}
.pills li{flex:none}
.pills a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--rule-2);border-radius:999px;white-space:nowrap;text-decoration:none;font-size:15px;color:var(--crema-2);transition:border-color .3s,color .3s}
.pills a:hover{border-color:var(--crema);color:var(--crema)}
.pills a[aria-current]{background:var(--crema);border-color:var(--crema);color:var(--tinta)}
@media (min-width:960px){
  .pills{position:static;background:none}
  .pills ul{flex-wrap:wrap;overflow:visible;max-width:1320px;margin-inline:auto;padding:18px var(--g)}
}
.cab-num{display:none}
@media (min-width:860px){
  .cab-num{display:block;position:absolute;right:var(--g);bottom:-.14em;z-index:-1;font:italic 400 clamp(12rem,24vw,22rem)/1 var(--display);color:rgba(169,196,208,.13);font-variant-numeric:lining-nums;pointer-events:none;user-select:none}
  .cab .wrap{position:relative}
}
.lista{padding:clamp(40px,6vw,88px) 0 clamp(56px,8vw,112px)}
.items{columns:1;column-gap:clamp(40px,6vw,96px);border-top:1px solid var(--rule)}
@media (min-width:900px){.items{columns:2;border-top:0}.items .item:first-child{border-top:1px solid var(--rule)}}
.item{break-inside:avoid;padding:18px 0;border-bottom:1px solid var(--rule)}
@media (min-width:900px){.item{padding:20px 0}}
.item-h{display:flex;align-items:last baseline;gap:10px}
.item-n{font:600 16px/1.35 var(--body);letter-spacing:.05em;text-transform:uppercase}
.item-u{margin-left:6px;font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--crema-2)}
.item-dots{flex:1 1 18px;min-width:12px;border-bottom:1px dotted var(--rule-2)}
.item-h:not(:has(.item-p)) .item-dots{visibility:hidden}
.item-p{flex:none;font:600 16px/1 var(--body);font-variant-numeric:tabular-nums;color:var(--azul);white-space:nowrap}
.item-d{margin-top:6px;max-width:52ch;font-size:16px;line-height:1.5;color:var(--crema-2)}
.nota{margin-top:28px;font-size:16px;color:var(--crema-2)}

/* ---------- /carta ---------- */
.carta-layout{display:grid;gap:44px;padding-block:clamp(40px,6vw,88px) clamp(56px,8vw,112px)}
.carta-aside img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (min-width:960px){
  .carta-layout{grid-template-columns:7fr 4fr;gap:clamp(56px,7vw,120px);align-items:start}
  .carta-aside{position:sticky;top:calc(var(--th,64px) + 36px)}
}

/* ---------- /reservas ---------- */
.reserva{padding:clamp(56px,8vw,120px) 0}
.reserva-grid{display:grid;gap:48px}
.reserva h2,.bloque h2{font-size:clamp(2.1rem,4.8vw,3.6rem);max-width:15ch}
.pasos{margin-top:28px;border-top:1px solid var(--rule);counter-reset:paso}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;padding:22px 0;border-bottom:1px solid var(--rule)}
.pasos li::before{content:counter(paso);grid-row:span 2;width:1.1em;font:italic 400 2.6rem/1 var(--display);color:var(--azul)}
.pasos b{font:400 1.45rem/1.25 var(--display)}
.pasos p{color:var(--crema-2)}
.chat{margin-top:34px;max-width:420px}
.chat .label{display:block;margin-bottom:12px}
.burbuja{position:relative;padding:16px 18px 22px;border-radius:14px 14px 4px 14px;background:var(--fachada);color:var(--tinta);font-size:17px;line-height:1.5}
.burbuja::after{content:"";position:absolute;right:-7px;bottom:0;border:8px solid transparent;border-left-color:var(--fachada);border-bottom-color:var(--fachada)}
.reserva-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (min-width:900px){.reserva-grid{grid-template-columns:6fr 5fr;gap:clamp(56px,7vw,120px);align-items:start}}

/* hours, wherever they are shown: a real table, today marked */
.horas{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums}
.horas caption{text-align:left;padding-bottom:12px}
.horas th,.horas td{padding:11px 0;border-bottom:1px solid var(--rule);text-align:left;font-weight:400;vertical-align:top}
.horas td{text-align:right;padding-left:16px;color:var(--crema-2)}
.horas tr.hoy th,.horas tr.hoy td{color:var(--azul);font-weight:600}
.cierre{margin-top:12px;font-size:16px;font-style:italic;color:var(--crema-2)}
.estado{margin-top:14px;font-weight:600}

/* ---------- /nosotros ---------- */
.bloque{padding:clamp(64px,9vw,132px) 0;border-top:1px solid var(--rule)}
.bloque-head{margin-bottom:clamp(32px,5vw,64px)}
.bloque-head p{margin-top:14px;max-width:44ch;color:var(--crema-2)}
.arbol{display:grid;gap:36px;align-items:center}
.arbol-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.arbol-copy p{margin-top:16px;max-width:40ch;font-size:18px;color:var(--crema-2)}
@media (min-width:860px){.arbol{grid-template-columns:5fr 6fr;gap:clamp(48px,7vw,120px)}}
.galeria{columns:2;column-gap:12px}
.galeria figure{break-inside:avoid;margin-bottom:22px}
.galeria img{width:100%;height:auto;object-fit:cover}
.galeria figcaption{margin-top:8px;font-size:14px;line-height:1.4;color:var(--crema-2)}
@media (min-width:760px){.galeria{columns:3;column-gap:22px}.galeria figcaption{font-size:15px}}
.atributos{display:flex;flex-wrap:wrap;gap:8px}
.atributos li{padding:8px 14px;border:1px solid var(--rule-2);border-radius:999px;font-size:15px;line-height:1.35;color:var(--crema-2)}
@media (min-width:760px){.atributos{gap:10px}}
.opiniones{display:grid;gap:16px}
.opinion{padding:24px;background:var(--noche-2);border:1px solid var(--rule)}
.opinion blockquote{margin-top:14px;font:400 1.2rem/1.5 var(--display);white-space:pre-line}
.opinion .quien{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:15px;color:var(--crema-2)}
.opinion .quien b{font-weight:600;color:var(--crema)}
.opinion .lb-stars{font-size:18px;color:var(--crema)}
@media (min-width:760px){.opiniones{grid-template-columns:1fr 1fr;gap:20px}}
.rating.chica .rating-num{font-size:clamp(3rem,7vw,4.6rem)}

/* ---------- /ubicacion ---------- */
.donde{padding:clamp(48px,7vw,104px) 0}
.donde-grid{display:grid;gap:44px}
.map.grande{margin-top:0;min-height:340px}
.donde-media img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (min-width:900px){
  .donde-grid{grid-template-columns:7fr 4fr;gap:clamp(48px,6vw,96px);align-items:start}
  .map.grande{min-height:520px}
}
.tel{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* ---------- footer: the last call, the hours, the door ---------- */
.pie{background:var(--noche-3);border-top:1px solid var(--rule)}
.pie-cta{display:grid;justify-items:start;gap:18px;padding-block:clamp(72px,10vw,150px) clamp(56px,7vw,100px)}
.pie-title{font-size:clamp(2.5rem,7vw,5.6rem);max-width:13ch}
.pie-cta p{max-width:40ch;color:var(--crema-2)}
.pie-cta .btn{margin-top:8px}
.pie-grid{display:grid;gap:44px;padding-block:52px;border-top:1px solid var(--rule)}
/* in the footer their logo is set at its largest, 56px: the sign over the door */
.pie .mark{margin:0 0 18px}
.pie .mark .logo{width:56px;height:56px}
.pie address{max-width:30ch;color:var(--crema-2)}
.pie-links{margin-top:10px}
.pie-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none;color:var(--crema)}
.pie-links a:hover{text-decoration:underline;text-underline-offset:5px}
.pie-fine{display:flex;flex-wrap:wrap;gap:6px 28px;padding-block:24px 128px;border-top:1px solid var(--rule);font-size:14px;color:var(--crema-2)}
@media (min-width:860px){.pie-grid{grid-template-columns:5fr 6fr 3fr;gap:clamp(40px,6vw,96px)}.pie-grid.dos{grid-template-columns:8fr 3fr}.pie-fine{padding-bottom:40px}}

/* ---------- the photographs' own treatment (the brief: warm, deep, a touch of contrast) ---------- */
.warm{filter:saturate(.93) contrast(1.05) sepia(.06)}

/* ---------- candlelight: only when motion is welcome, and only with scripts ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  /* the vignette breathes, the lamp flickers */
  .hero-glow{animation:breathe 9s ease-in-out infinite alternate}
  .hero-glow::after{animation:flicker 7.3s ease-in-out infinite}
  .cab::before{animation:breathe 10s ease-in-out infinite alternate}
  /* the room warms as the page loads */
  .js .hero-media img{transform:scale(1.06);filter:saturate(.3) brightness(.6) contrast(1);transition:transform 7s var(--slow),filter 3.4s var(--slow)}
  .js.lit .hero-media img{transform:scale(1);filter:saturate(.93) contrast(1.05) sepia(.06)}
  /* words arrive at reading pace */
  .js .fade{opacity:0;filter:blur(6px);transform:translateY(12px);transition:opacity 1.6s var(--slow),filter 1.6s var(--slow),transform 1.9s var(--slow);transition-delay:var(--d,0s)}
  .js.lit .fade{opacity:1;filter:none;transform:none}
  /* photos warm up as they enter */
  .js .warm{filter:saturate(.25) brightness(.64) contrast(1);transition:filter 2.8s var(--slow)}
  .js .warm.in{filter:saturate(.93) contrast(1.05) sepia(.06)}
  /* sections rise slowly into the light */
  .js [data-rv]{opacity:0;transform:translateY(18px);transition:opacity 1.4s var(--slow),transform 1.6s var(--slow)}
  .js [data-rv].in{opacity:1;transform:none}
  /* the index is read line by line, and each leader draws itself */
  .js .toc li{opacity:0;transform:translateX(-12px);transition:opacity 1.1s var(--slow),transform 1.3s var(--slow);transition-delay:calc(var(--i,0) * 80ms)}
  .js .toc.in li{opacity:1;transform:none}
  .js .toc .toc-dots{transform:scaleX(0);transition:transform 1.6s var(--slow);transition-delay:calc(var(--i,0) * 80ms + .35s)}
  .js .toc.in .toc-dots{transform:none}
  .js .items .item{opacity:0;transition:opacity 1.2s var(--slow);transition-delay:calc(var(--i,0) * 45ms)}
  .js .items.in .item{opacity:1}
}
@keyframes breathe{0%{opacity:.78;transform:scale(1)}100%{opacity:1;transform:scale(1.05)}}
@keyframes flicker{0%,100%{opacity:.72}14%{opacity:.95}27%{opacity:.8}41%{opacity:1}58%{opacity:.76}73%{opacity:.93}88%{opacity:.84}}

/* "Reservar mesa" leads the hero (Alberto, 2026-10-17): solid, in the page inverted. */
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:12px}
.hero-acts .hair{margin-top:0;font-size:17px}
.hero-book{background:var(--crema);color:var(--tinta);font-size:17px}

/* RULES.md 37 (2026-10-16): an inner page's first screen never leaves an empty half at 1280px and up. */
@media (min-width:1280px){
  .cab .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(48px,6vw,110px);align-items:end}
  .cab .wrap>h1{grid-column:1;grid-row:1/span 4;max-width:none}
  .cab .wrap>*:not(h1):not(.cab-num){grid-column:2}
  .cab .wrap>.lead,.cab .wrap>address{margin-top:0}
}