/* L'Escaleta · Cocentaina. La escalera de su logo y el oliva de su favicon; Recia (su letra) y Epilogue (la de su web) */
@font-face{ font-family:"Recia"; src:url("../fonts/recia.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Epilogue"; src:url("../fonts/epilogue.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

:root{
  --papel:#f2efe7;
  --papel-2:#e8e4d8;
  --tinta:#1d1c1a;
  --tinta-2:#5c5950;
  --oliva:#929571;
  --oliva-osc:#4f543b;
  --oliva-claro:#c3c6a2;
  --noche:#1b1b19;
  --linea:rgba(29,28,26,.16);
  --linea-clara:rgba(242,239,231,.18);
  --g:1.5px;   /* el trazo de la escalera */
  --serif:"Recia", Georgia, "Times New Roman", serif;
  --sans:"Epilogue", "Helvetica Neue", Arial, sans-serif;
  --gutter:clamp(20px, 4.5vw, 72px);
  --seccion:clamp(96px, 11vw, 180px);
  --nav-h:78px;
  --ease:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--nav-h); scrollbar-gutter:stable; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{ background:var(--papel); color:var(--tinta); font:400 1.02rem/1.65 var(--sans); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--oliva); color:var(--papel); }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.06; letter-spacing:-.01em; font-variant-numeric:lining-nums; }
h2{ font-size:clamp(2.2rem, 4.4vw, 4.3rem); }
h3{ font-size:clamp(1.5rem, 2.2vw, 2rem); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--oliva); outline-offset:4px; }

/* botones con el acabado de Almo: cuadrados, filete de 1 px, mayúsculas espaciadas; al pasar se vacía el relleno */
.boton{ display:inline-flex; align-items:center; justify-content:center; padding:1.05em 2.2em; border:1px solid var(--tinta); background:var(--tinta); color:var(--papel); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; transition:background .5s ease, color .5s ease, border-color .5s ease; }
.boton:hover{ background:transparent; color:var(--tinta); }
.boton--linea{ background:transparent; color:var(--tinta); }
.boton--linea:hover{ background:var(--tinta); color:var(--papel); }
.boton--claro{ background:transparent; border-color:rgba(242,239,231,.7); color:var(--papel); }
.boton--claro:hover{ background:var(--papel); border-color:var(--papel); color:var(--tinta); }
.enlace-linea{ border-bottom:1px solid currentColor; padding-bottom:1px; transition:opacity .3s ease; }
.enlace-linea:hover{ opacity:.65; }

/* ---------- su logo: la escalera (trazos HTML, se dibujan con transform) y L'ESCALETA en vector */
.escalera{ position:relative; }
.tramo{ position:absolute; display:block; box-sizing:content-box; background:var(--tinta); will-change:transform; }
.tramo--h{ height:var(--g); margin:calc(var(--g) / -2) 0 0 calc(var(--g) / -2); padding-right:var(--g); transform-origin:0 50%; }
.tramo--v{ width:var(--g); margin-left:calc(var(--g) / -2); transform-origin:50% 0; }
.escalera--logo{ width:100%; aspect-ratio:975 / 456; }
.nombre{ display:block; width:100%; height:auto; overflow:visible; fill:var(--tinta); }
/* sellos oficiales 2026: dos estrellas MICHELIN y tres Soles Guía Repsol */
.sellos{ display:flex; align-items:flex-end; gap:calc(var(--sm, 78px) * .5); }
.sello{ display:block; width:auto; overflow:visible; }
.sello--michelin-2estrellas{ height:var(--sm, 78px); }
.sello--repsol-3soles{ height:var(--sr, 104px); }
.repsol__sol{ fill:#fcb300; }

/* ---------- precarga: en cada carga, unos 3,5 s; un clic, un toque, la rueda o una tecla la aceleran */
.pre{ display:none; position:fixed; inset:0; z-index:100; place-items:center; }
html.anima.intro .pre{ display:grid; }
html.anima.intro{ overflow:hidden; }
.pre__fondo{ position:absolute; inset:0; background:var(--papel); }
.pre__logo{ position:relative; width:min(46vw, 500px); --g:2px; }
.pre__firma{ margin-top:13%; display:flex; flex-direction:column; align-items:center; }
.pre__nombre{ width:88%; }
.pre .sellos{ margin-top:clamp(30px, 5vh, 54px); --sm:clamp(64px, 6.2vw, 92px); --sr:clamp(84px, 8.2vw, 122px); }
html.anima .pre .tramo--h{ transform:scaleX(0); }
html.anima .pre .tramo--v{ transform:scaleY(0); }
html.anima .pre .letra, html.anima .pre .sello__flor, html.anima .pre .sello__sol, html.anima .pre .sello__letras{ opacity:0; }

/* ---------- nav: siempre a la vista, con Reservar */
.nav{ position:fixed; inset:0 0 auto; z-index:80; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 var(--gutter); font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; transition:background .4s ease, box-shadow .4s ease; }
.nav.con-fondo{ background:var(--papel); box-shadow:0 1px 0 var(--linea); }
.nav__logo{ display:block; width:150px; transition:opacity .4s ease; }
.nav__nombre{ width:100%; }
.nav.sobre-portada .nav__logo{ opacity:0; pointer-events:none; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(14px, 2vw, 30px); }
.nav__enlaces a:not(.nav__reservar){ position:relative; padding:6px 0; }
.nav__enlaces a:not(.nav__reservar)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.nav__enlaces a:not(.nav__reservar):hover::after{ transform:scaleX(1); }
.nav__reservar{ padding:.85em 1.5em; border:1px solid var(--tinta); background:var(--tinta); color:var(--papel); font-weight:600; transition:background .5s ease, color .5s ease; }
.nav__reservar:hover{ background:transparent; color:var(--tinta); }
.nav__reservar--movil, .nav__abrir{ display:none; }
html.anima.intro .nav{ opacity:0; }

/* ---------- portada: la escalera de su logo cruza la pantalla y la casa queda debajo, en el semisótano */
.portada{ position:relative; z-index:0; height:100svh; min-height:600px; background:var(--papel); overflow:hidden; --y0:33%; --dy:12%; }
.portada__fotos{ position:absolute; inset:0; overflow:hidden; background:var(--papel-2);
  clip-path:polygon(0 var(--y0), 20% var(--y0), 20% calc(var(--y0) + var(--dy)), 40% calc(var(--y0) + var(--dy)), 40% calc(var(--y0) + 2 * var(--dy)), 60% calc(var(--y0) + 2 * var(--dy)), 60% calc(var(--y0) + 3 * var(--dy)), 80% calc(var(--y0) + 3 * var(--dy)), 80% calc(var(--y0) + 4 * var(--dy)), 100% calc(var(--y0) + 4 * var(--dy)), 100% 100%, 0 100%); }
.portada__capa{ position:absolute; inset:-6% 0; will-change:transform; }
.portada__capa picture{ position:absolute; inset:0; opacity:0; transition:opacity 1.8s ease; }
.portada__capa picture[data-activa]{ opacity:1; }
.portada__capa img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
.escalera--portada{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.escalera--portada .tramo--h{ left:calc(var(--i) * 20%); top:calc(var(--y0) + var(--i) * var(--dy)); width:20%; }
.escalera--portada .tramo--v{ left:calc((var(--i) + 1) * 20%); top:calc(var(--y0) + var(--i) * var(--dy)); height:var(--dy); }
.portada__firma{ position:absolute; z-index:3; right:var(--gutter); top:calc(var(--nav-h) + 4.5vh); width:min(34vw, 470px); display:flex; flex-direction:column; align-items:flex-start; }
.portada__nombre{ width:100%; }
.portada__marca{ width:100%; }
.sellos--portada{ margin-top:clamp(22px, 3.6vh, 40px); --sm:clamp(64px, 6.2vw, 92px); --sr:clamp(84px, 8.2vw, 122px); }
.portada__donde{ margin-top:clamp(18px, 3vh, 30px); font-size:.8rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); }
.portada__firma .boton{ margin-top:clamp(16px, 2.6vh, 26px); }
html.anima.intro .portada__fotos, html.anima.intro .escalera--portada .tramo, html.anima.intro .portada__nombre, html.anima.intro .sellos--portada,
html.anima.intro .portada__donde, html.anima.intro .portada__firma .boton{ opacity:0; }

/* ---------- la casa: la historia en peldaños, como la escalera del logo */
.casa{ padding:var(--seccion) var(--gutter); }
.casa__cabeza{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); grid-template-rows:auto 1fr; gap:22px clamp(30px, 5vw, 90px); }
.casa__cabeza h2{ max-width:17ch; }
.casa__cabeza p{ max-width:34em; font-size:1.12rem; color:var(--tinta-2); }
.casa__foto{ grid-column:2; grid-row:1 / span 2; align-self:end; aspect-ratio:1226 / 461; }
.peldanos{ position:relative; margin-top:clamp(56px, 7vw, 100px); --paso:12%; padding-bottom:var(--g); }
.peldano{ position:relative; padding:22px 0 46px calc((var(--i) + 1) * var(--paso) + clamp(18px, 2vw, 30px)); }
.peldano__huella, .peldano__tabica{ position:absolute; display:block; background:var(--tinta); will-change:transform; }
.peldano__huella{ top:0; left:calc(var(--i) * var(--paso) - var(--g) / 2); width:calc(var(--paso) + var(--g)); height:var(--g); transform-origin:0 50%; }
.peldano__tabica{ top:0; left:calc((var(--i) + 1) * var(--paso) - var(--g) / 2); width:var(--g); height:100%; transform-origin:50% 0; }
.peldanos::after{ content:""; position:absolute; bottom:0; left:calc(5 * var(--paso) - var(--g) / 2); width:calc(var(--paso) + var(--g)); height:var(--g); background:var(--tinta); transform:scaleX(var(--fin, 1)); transform-origin:0 50%; }
.peldano__texto{ display:grid; gap:4px; max-width:32em; }
.peldano__texto b{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem, 4vw, 3.6rem); line-height:1; }
.peldano__texto strong{ font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--oliva-osc); margin-top:6px; }
.peldano__texto span{ color:var(--tinta-2); }
.dos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(30px, 6vw, 110px); margin-top:clamp(90px, 10vw, 160px); }
.persona:nth-child(2){ margin-top:clamp(60px, 9vw, 140px); }
.persona__foto{ width:min(100%, 400px); aspect-ratio:532 / 691; margin-bottom:24px; }
.persona h3{ font-size:clamp(1.9rem, 3vw, 2.8rem); }
.persona__cargo{ margin:6px 0 12px; font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--oliva-osc); }
.persona p:last-child{ max-width:28em; color:var(--tinta-2); }
.premios{ margin-top:clamp(90px, 10vw, 150px); display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:30px; }
.premios__lista li{ display:grid; grid-template-columns:5.5em 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--linea); }
.premios__lista li:last-child{ border-bottom:1px solid var(--linea); }
.premios__lista b{ font-family:var(--serif); font-weight:400; font-size:1.35rem; line-height:1.2; }

/* fotos que se despliegan al bajar: una tapa del color del fondo se retira y la foto se asienta (variable --t, 0 a 1) */
.desp{ position:relative; overflow:hidden; background:var(--papel-2); }
.desp img{ width:100%; height:100%; object-fit:cover; }
.anima .desp::after{ content:""; position:absolute; inset:-1px; background:var(--tapa, var(--papel)); transform:translate3d(0, calc(var(--t, 0) * 101%), 0); }
.anima .desp img{ transform:scale(calc(1.14 - var(--t, 0) * .14)); }

/* ---------- cocina: los platos bajan escalones */
.cocina{ padding:0 var(--gutter) var(--seccion); }
.cocina__cabeza{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:30px; align-items:end; padding-top:clamp(40px, 5vw, 80px); border-top:1px solid var(--linea); }
.cocina__cabeza h2{ max-width:14ch; }
.cocina__cabeza p{ font-size:1.12rem; color:var(--tinta-2); max-width:24em; }
.platos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(18px, 2.4vw, 40px); margin-top:clamp(50px, 6vw, 90px); padding-bottom:var(--g); --sube:7vw; }
.plato:nth-child(3n + 2){ margin-top:var(--sube); }
.plato:nth-child(3n + 3){ margin-top:calc(var(--sube) * 2); }
.plato__foto{ aspect-ratio:4 / 5; }
.plato figcaption{ margin-top:12px; font-size:.92rem; color:var(--tinta-2); }
.mesa0{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); gap:clamp(28px, 4vw, 70px); align-items:end; margin-top:clamp(80px, 9vw, 140px); }
.mesa0__foto{ aspect-ratio:1108 / 652; }
.mesa0__texto h3{ font-size:clamp(2.2rem, 4vw, 3.6rem); font-variant-numeric:lining-nums; }
.menu__precio, .carta__precio, .regalo__precio, .horario__horas, .odisea__dias b, .bodega__cifra span{ font-variant-numeric:lining-nums; }
.mesa0__texto p{ margin:14px 0 20px; color:var(--tinta-2); max-width:26em; }
.mesa0__texto .enlace-linea{ font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }

/* ---------- menús y carta */
.menus{ padding:var(--seccion) var(--gutter); background:var(--papel-2); --tapa:var(--papel-2); }
.menus__cabeza{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 40px; }
.menus__cabeza p{ color:var(--tinta-2); font-size:1.08rem; }
.carta__pestanas{ display:flex; gap:clamp(18px, 2.6vw, 40px); margin-top:clamp(36px, 4vw, 56px); border-bottom:1px solid var(--linea); overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; background:var(--papel-2); }
.carta__pestanas::-webkit-scrollbar{ display:none; }
.carta__pestanas button{ flex:none; padding:14px 0 13px; font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); border-bottom:2px solid transparent; margin-bottom:-1px; scroll-snap-align:start; transition:color .3s ease, border-color .3s ease; }
.carta__pestanas button[aria-selected="true"]{ color:var(--tinta); border-color:var(--tinta); }
.carta__paneles{ padding-top:clamp(36px, 4vw, 60px); min-height:420px; }
.js .carta__panel:not([data-activo]){ display:none; }
.carta__panel--menus{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(30px, 5vw, 90px); }
.menu h3{ font-size:clamp(2.2rem, 3.6vw, 3.4rem); }
.menu__frase{ margin-top:6px; color:var(--tinta-2); }
.menu__pases{ font-size:.95rem; color:var(--tinta-2); }
.menu__precio{ margin-top:10px; font-family:var(--serif); font-size:clamp(2rem, 3vw, 2.8rem); line-height:1.1; }
.menu__vinos{ margin-top:4px; font-size:.95rem; }
/* cada menú es una escalera: un peldaño por pase; los postres, en oliva */
.esc{ position:relative; height:clamp(70px, 7vw, 100px); margin:26px 0 18px; }
.esc__p{ position:absolute; border-top:var(--g) solid var(--tinta); border-right:var(--g) solid var(--tinta); }
.esc__p--plato{ border-color:var(--tinta); }
.esc__p--postre{ border-color:var(--oliva); }
.anima .esc__p{ opacity:0; transform:translate3d(-10px, 0, 0); transition-property:opacity, transform; transition-duration:.45s, .6s; transition-timing-function:ease, var(--ease); }
.anima .esc.visto .esc__p{ opacity:1; transform:none; }
.snacks{ grid-column:1 / -1; padding-top:30px; border-top:1px solid var(--linea); }
.snacks h3{ font-size:1.5rem; }
.snacks ul{ columns:2; column-gap:40px; margin-top:12px; color:var(--tinta-2); }
.snacks li{ padding:4px 0; break-inside:avoid; }
.carta__titulo{ font-size:clamp(2rem, 3.2vw, 3rem); }
.carta__nota{ margin-top:6px; color:var(--tinta-2); }
.carta__lista{ margin-top:24px; columns:2; column-gap:clamp(30px, 5vw, 90px); }
.carta__lista li{ display:grid; grid-template-columns:1fr auto; gap:4px 20px; padding:14px 0; border-top:1px solid var(--linea); break-inside:avoid; }
.carta__plato{ min-width:0; }
.carta__precio{ font-family:var(--serif); font-size:1.2rem; white-space:nowrap; }
.carta__vino{ grid-column:1 / -1; font-size:.86rem; color:var(--tinta-2); }
.carta__notas{ margin-top:40px; display:grid; gap:8px; max-width:56em; font-size:.92rem; color:var(--tinta-2); }

/* ---------- bodega: en oscuro */
.bodega{ padding:var(--seccion) var(--gutter); background:var(--noche); color:var(--papel); --tapa:var(--noche); }
.bodega__cabeza{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:20px 40px; align-items:end; }
.bodega__cabeza h2{ max-width:14ch; grid-row:span 2; align-self:start; }
.bodega__cifra{ font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--oliva-claro); }
.bodega__cifra span{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(5rem, 13vw, 12rem); line-height:.9; letter-spacing:-.02em; text-transform:none; color:var(--papel); }
.bodega__cabeza > p:last-child{ color:rgba(242,239,231,.72); max-width:30em; }
.bodega__fotos{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap:clamp(16px, 2vw, 32px); align-items:start; margin-top:clamp(56px, 6vw, 90px); }
.bodega__pared{ aspect-ratio:1440 / 984; }
.bodega__cava{ aspect-ratio:536 / 612; margin-top:6vw; background:#262623; }
.bodega__alberto{ aspect-ratio:532 / 691; margin-top:12vw; background:#262623; }
.datos{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px 30px; margin-top:clamp(50px, 6vw, 80px); }
.datos dt{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--oliva-osc); margin-bottom:6px; }
.datos--oscuro dt{ color:var(--oliva-claro); }
.datos--oscuro > div{ padding-top:16px; border-top:1px solid var(--linea-clara); }
.odisea{ margin-top:clamp(80px, 9vw, 130px); display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:24px 40px; padding-top:40px; border-top:1px solid var(--linea-clara); }
.odisea__cabeza h3{ font-size:clamp(2.4rem, 4vw, 3.6rem); }
.odisea__cabeza p{ margin-top:6px; color:rgba(242,239,231,.72); }
.odisea__dias li{ display:grid; grid-template-columns:7.5em 8.5em minmax(0, 1fr) auto; gap:4px 20px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--linea-clara); }
.odisea__dias b{ font-family:var(--serif); font-weight:400; font-size:1.25rem; }
.odisea__hora{ color:rgba(242,239,231,.72); }
.odisea__dias strong{ font-weight:500; }
.odisea__dias strong + span{ grid-column:3; grid-row:2; font-size:.9rem; color:rgba(242,239,231,.72); }
.odisea__dias a{ grid-column:4; grid-row:1 / span 2; align-self:center; font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.odisea__nota{ grid-column:2; font-size:.9rem; color:rgba(242,239,231,.72); }

/* ---------- eventos: en el oliva de su marca */
.eventos{ padding:var(--seccion) var(--gutter); background:var(--oliva-osc); color:var(--papel); --tapa:var(--oliva-osc); }
.eventos__cabeza h2{ max-width:18ch; }
.eventos__cabeza p{ margin-top:18px; font-size:1.1rem; color:rgba(242,239,231,.78); }
.eventos__fotos{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(14px, 1.8vw, 28px); margin-top:clamp(50px, 6vw, 90px); align-items:start; }
.ev{ background:rgba(0,0,0,.12); }
.ev--salon{ grid-column:1 / 8; grid-row:1; aspect-ratio:4 / 3; }
.ev--mesa{ grid-column:9 / 13; grid-row:1 / span 2; aspect-ratio:2 / 3; margin-top:7vw; }
.ev--fuego{ grid-column:1 / 5; grid-row:2; aspect-ratio:3 / 2; margin-top:2vw; }
.ev--barca{ grid-column:5 / 9; grid-row:2; aspect-ratio:3 / 2; margin-top:7vw; }
.espacios{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px clamp(30px, 5vw, 90px); margin-top:clamp(70px, 8vw, 120px); }
.espacios h3{ font-size:clamp(1.6rem, 2.4vw, 2.2rem); margin-bottom:12px; }
.espacios li{ display:grid; gap:2px; padding:14px 0; border-top:1px solid var(--linea-clara); }
.espacios strong{ font-weight:600; }
.espacios em{ font-style:normal; font-weight:400; color:var(--oliva-claro); margin-left:6px; }
.espacios span{ color:rgba(242,239,231,.75); font-size:.95rem; }
.eventos__pie{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; margin-top:clamp(50px, 6vw, 80px); }
.eventos__pie p{ color:rgba(242,239,231,.8); }
.eventos__pie p a:hover{ color:var(--papel); text-decoration:underline; }

/* ---------- regala */
.regala{ padding:var(--seccion) var(--gutter); }
.regala__cabeza{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:12px 40px; }
.regala__cabeza p{ color:var(--tinta-2); font-size:1.1rem; }
.regalos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(30px, 4vw, 60px) clamp(18px, 2.4vw, 40px); margin-top:clamp(46px, 5vw, 80px); }
.regalo:nth-child(3n + 2){ margin-top:4vw; }
.regalo:nth-child(3n + 3){ margin-top:8vw; }
.regalo a{ display:block; }
.regalo__foto{ aspect-ratio:1; margin-bottom:16px; }
.regalo h3{ font-size:clamp(1.3rem, 1.8vw, 1.6rem); }
.regalo p{ margin-top:4px; color:var(--tinta-2); font-size:.95rem; }
.regalo__precio{ display:block; margin-top:8px; font-family:var(--serif); font-size:1.5rem; }
.regalo a:hover h3{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.regala__mas{ margin-top:clamp(50px, 6vw, 80px); display:grid; gap:10px; color:var(--tinta-2); font-size:.95rem; max-width:60em; }

/* ---------- visítanos */
.contacto{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(30px, 6vw, 110px); padding:var(--seccion) var(--gutter); border-top:1px solid var(--linea); }
.contacto__foto{ aspect-ratio:398 / 949; width:min(100%, 340px); }
.contacto__texto h2{ margin-bottom:10px; }
.contacto .datos{ grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:36px; }
.contacto .datos > div{ padding-top:14px; border-top:1px solid var(--linea); }
.horario-lista{ margin-top:40px; max-width:34em; }
.horario-lista li{ display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--linea); }
.horario-lista li:first-child{ border-top:1px solid var(--linea); }
.horario__horas{ font-family:var(--serif); font-size:1.15rem; text-align:right; }
.contacto__botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }

/* ---------- pie */
.pie{ display:grid; justify-items:center; gap:34px; padding:90px var(--gutter) 60px; background:var(--noche); color:var(--papel); text-align:center; }
.pie__nombre{ width:min(320px, 70vw); fill:var(--papel); }
.pie__sellos{ display:flex; align-items:flex-end; gap:30px; }
.pie__sellos .sello-mini{ display:block; width:auto; }
.pie__sellos .sello-mini--michelin-2estrellas{ height:52px; }
.pie__sellos .sello-mini--repsol-3soles{ height:70px; }
.pie__sellos .michelin__marca, .pie__sellos .repsol__texto{ fill:var(--papel); }
.pie__enlaces{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px; font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,239,231,.7); }
.pie__enlaces a:hover{ color:var(--papel); }

/* subir arriba (lo crea main.js) */
.to-top{ position:fixed; right:18px; bottom:18px; z-index:35; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--tinta); color:var(--papel); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s, background .4s ease; }
.to-top:hover{ background:var(--oliva-osc); }
.to-top.is-visible{ opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s, background .4s ease; }

/* ---------- tablet */
@media (max-width:1100px){
  .nav__enlaces{ gap:14px; }
  .nav__logo{ width:120px; }
}
@media (max-width:960px){
  :root{ --nav-h:64px; }
  .nav__abrir{ display:grid; gap:8px; width:44px; height:44px; place-content:center; position:relative; z-index:2; }
  .nav__abrir span{ display:block; width:26px; height:1.5px; background:var(--tinta); transition:transform .5s var(--ease); }
  .nav--abierta .nav__abrir span:first-child{ transform:translateY(4.75px) rotate(45deg); }
  .nav--abierta .nav__abrir span:last-child{ transform:translateY(-4.75px) rotate(-45deg); }
  .nav__enlaces{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:18px; background:var(--papel); font-family:var(--serif); font-size:2.1rem; letter-spacing:0; text-transform:none; opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s; }
  .nav--abierta .nav__enlaces{ opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s; }
  .nav.nav--abierta .nav__logo{ opacity:1; pointer-events:auto; position:relative; z-index:2; }
  .nav__enlaces .nav__reservar{ margin-top:14px; font-family:var(--sans); font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; padding:.9em 2.2em; }
  .nav__reservar--movil{ display:inline-flex; margin-left:auto; position:relative; z-index:2; padding:.7em 1.15em; font-size:.72rem; }
  .nav__logo{ width:118px; position:relative; z-index:2; }

  .portada{ --y0:52%; --dy:6.5%; }
  .portada__firma{ left:var(--gutter); right:var(--gutter); top:calc(var(--nav-h) + 3.5vh); width:auto; align-items:center; text-align:center; }
  .portada__nombre{ width:min(78vw, 400px); }
  .sellos--portada{ --sm:clamp(52px, 13vw, 70px); --sr:clamp(68px, 17vw, 92px); }
  .pre__logo{ width:min(76vw, 420px); }
  .pre .sellos{ --sm:clamp(52px, 13vw, 70px); --sr:clamp(68px, 17vw, 92px); }

  .peldanos{ --paso:8%; }
  .casa__cabeza{ grid-template-columns:1fr; grid-template-rows:auto; }
  .casa__foto{ grid-column:1; grid-row:auto; margin-top:18px; }
  .dos{ gap:24px; }
  .premios{ grid-template-columns:1fr; }
  .cocina__cabeza{ grid-template-columns:1fr; }
  .platos{ grid-template-columns:repeat(2, minmax(0, 1fr)); --sube:10vw; }
  .plato:nth-child(n){ margin-top:0; }
  .plato:nth-child(2n){ margin-top:var(--sube); }
  .mesa0{ grid-template-columns:1fr; }
  .carta__panel--menus{ grid-template-columns:1fr; }
  .carta__lista{ columns:1; }
  .carta__pestanas{ position:sticky; top:var(--nav-h); z-index:20; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding:0 var(--gutter); }
  .bodega__cabeza{ grid-template-columns:1fr; }
  .bodega__cabeza h2{ grid-row:auto; }
  .bodega__fotos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bodega__pared{ grid-column:1 / -1; }
  .bodega__cava{ margin-top:0; }
  .bodega__alberto{ margin-top:10vw; }
  .datos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .odisea{ grid-template-columns:1fr; }
  .odisea__nota{ grid-column:1; }
  .ev--salon{ grid-column:1 / -1; grid-row:1; }
  .ev--fuego{ grid-column:1 / 7; grid-row:2; margin-top:0; }
  .ev--mesa{ grid-column:7 / 13; grid-row:2 / span 2; margin-top:10vw; }
  .ev--barca{ grid-column:1 / 7; grid-row:3; margin-top:4vw; }
  .espacios{ grid-template-columns:1fr; }
  .regalos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .regalo:nth-child(n){ margin-top:0; }
  .regalo:nth-child(2n){ margin-top:8vw; }
  .contacto{ grid-template-columns:1fr; }
  .contacto__foto{ display:none; }
  .contacto .datos{ grid-template-columns:1fr; }
}

/* ---------- móvil */
@media (max-width:600px){
  .portada{ --y0:56%; --dy:6%; }
  .peldanos{ --paso:7%; }
  .peldano{ padding-bottom:36px; padding-left:calc((var(--i) + 1) * var(--paso) + 14px); }
  .dos{ grid-template-columns:1fr; gap:60px; }
  .persona:nth-child(2){ margin-top:0; }
  .persona__foto{ width:min(78%, 360px); }
  .persona:nth-child(2) .persona__foto{ margin-left:auto; }
  .premios__lista li{ grid-template-columns:4em 1fr; gap:12px; }
  .snacks ul{ columns:1; }
  /* en el móvil se ven todas las partes de la carta: la barra fija ocupa dos filas */
  .carta__pestanas{ flex-wrap:wrap; gap:0 18px; overflow:visible; }
  .carta__pestanas button{ padding:11px 0 10px; }
  .datos{ grid-template-columns:1fr; }
  .odisea__dias li{ grid-template-columns:1fr auto; }
  .odisea__dias b{ grid-column:1; }
  .odisea__hora{ grid-column:1; grid-row:2; }
  .odisea__dias strong{ grid-column:1; grid-row:3; }
  .odisea__dias strong + span{ grid-column:1; grid-row:4; }
  .odisea__dias a{ grid-column:2; grid-row:1 / span 4; }
  .regalos{ gap:30px 16px; }
  .regalo h3{ font-size:1.15rem; }
  .eventos__pie .boton{ width:100%; }
  .contacto__botones .boton{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}

/* generado por generar.py: no tocar */
.escalera--logo .tramo:nth-child(1){ left:0.718%; top:1.864%; width:19.641%; }
.escalera--logo .tramo:nth-child(2){ left:20.359%; top:1.864%; height:24.013%; }
.escalera--logo .tramo:nth-child(3){ left:20.359%; top:25.877%; width:19.744%; }
.escalera--logo .tramo:nth-child(4){ left:40.103%; top:25.877%; height:24.123%; }
.escalera--logo .tramo:nth-child(5){ left:40.103%; top:50.000%; width:19.744%; }
.escalera--logo .tramo:nth-child(6){ left:59.846%; top:50.000%; height:24.123%; }
.escalera--logo .tramo:nth-child(7){ left:59.846%; top:74.123%; width:19.744%; }
.escalera--logo .tramo:nth-child(8){ left:79.590%; top:74.123%; height:24.123%; }
.escalera--logo .tramo:nth-child(9){ left:79.590%; top:98.246%; width:19.692%; }
.escalera--portada .tramo:nth-child(1){ --i:0; }
.escalera--portada .tramo:nth-child(2){ --i:0; }
.escalera--portada .tramo:nth-child(3){ --i:1; }
.escalera--portada .tramo:nth-child(4){ --i:1; }
.escalera--portada .tramo:nth-child(5){ --i:2; }
.escalera--portada .tramo:nth-child(6){ --i:2; }
.escalera--portada .tramo:nth-child(7){ --i:3; }
.escalera--portada .tramo:nth-child(8){ --i:3; }
.escalera--portada .tramo:nth-child(9){ --i:4; }
.peldano:nth-child(1){ --i:0; }
.peldano:nth-child(2){ --i:1; }
.peldano:nth-child(3){ --i:2; }
.peldano:nth-child(4){ --i:3; }
.peldano:nth-child(5){ --i:4; }
.esc--9 .esc__p{ width:11.111%; height:11.111%; }
.esc--9 .esc__p:nth-child(1){ left:0.000%; top:0.000%; transition-delay:0ms; }
.esc--9 .esc__p:nth-child(2){ left:11.111%; top:11.111%; transition-delay:70ms; }
.esc--9 .esc__p:nth-child(3){ left:22.222%; top:22.222%; transition-delay:140ms; }
.esc--9 .esc__p:nth-child(4){ left:33.333%; top:33.333%; transition-delay:210ms; }
.esc--9 .esc__p:nth-child(5){ left:44.444%; top:44.444%; transition-delay:280ms; }
.esc--9 .esc__p:nth-child(6){ left:55.556%; top:55.556%; transition-delay:350ms; }
.esc--9 .esc__p:nth-child(7){ left:66.667%; top:66.667%; transition-delay:420ms; }
.esc--9 .esc__p:nth-child(8){ left:77.778%; top:77.778%; transition-delay:490ms; }
.esc--9 .esc__p:nth-child(9){ left:88.889%; top:88.889%; transition-delay:560ms; }
.esc--12 .esc__p{ width:8.333%; height:8.333%; }
.esc--12 .esc__p:nth-child(1){ left:0.000%; top:0.000%; transition-delay:0ms; }
.esc--12 .esc__p:nth-child(2){ left:8.333%; top:8.333%; transition-delay:70ms; }
.esc--12 .esc__p:nth-child(3){ left:16.667%; top:16.667%; transition-delay:140ms; }
.esc--12 .esc__p:nth-child(4){ left:25.000%; top:25.000%; transition-delay:210ms; }
.esc--12 .esc__p:nth-child(5){ left:33.333%; top:33.333%; transition-delay:280ms; }
.esc--12 .esc__p:nth-child(6){ left:41.667%; top:41.667%; transition-delay:350ms; }
.esc--12 .esc__p:nth-child(7){ left:50.000%; top:50.000%; transition-delay:420ms; }
.esc--12 .esc__p:nth-child(8){ left:58.333%; top:58.333%; transition-delay:490ms; }
.esc--12 .esc__p:nth-child(9){ left:66.667%; top:66.667%; transition-delay:560ms; }
.esc--12 .esc__p:nth-child(10){ left:75.000%; top:75.000%; transition-delay:630ms; }
.esc--12 .esc__p:nth-child(11){ left:83.333%; top:83.333%; transition-delay:700ms; }
.esc--12 .esc__p:nth-child(12){ left:91.667%; top:91.667%; transition-delay:770ms; }
/* fin */