/* BonAmb · propuesta de AutomatIA (10-nov-2026)
   El papel de su temporada 2026 (Caleidoscopio), la tinta de su logo y los rosetones de línea de sus menús.
   Marcellus (titulares: capitales con remate abierto, como las letras de su logo) + Spectral (texto). */
@font-face{ font-family:"Marcellus"; src:url("../fonts/marcellus-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Spectral"; src:url("../fonts/spectral-300.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face{ font-family:"Spectral"; src:url("../fonts/spectral-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Spectral"; src:url("../fonts/spectral-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

:root{
  --papel:#f3e7db; --papel-2:#eadac9; --tinta:#1d1a17; --tinta-2:#5b5248; --linea:rgba(29,26,23,.16);
  --noche:#13110e; --crema:#f3e7db; --crema-2:rgba(243,231,219,.66);
  --agua:#2a8ea6; --oro:#c99a3c;
  --titulo:"Marcellus", "Times New Roman", serif; --texto:"Spectral", Georgia, serif;
  --gutter:clamp(18px, 4.4vw, 64px); --nav-h:74px; --ease:cubic-bezier(.22,.8,.2,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
body{ margin:0; background:var(--papel); color:var(--tinta); font-family:var(--texto); font-weight:300; font-size:clamp(17px, 1.12vw, 19px); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--titulo); font-weight:400; line-height:1.05; margin:0; letter-spacing:.01em; }
h2{ font-size:clamp(2.6rem, 6.4vw, 6.2rem); }
h3{ font-size:clamp(1.5rem, 2.2vw, 2.1rem); }
p{ margin:0; }
figure{ margin:0; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
/* ganchos de la animación (los mueve main.js) */
.portada__firma, .camino__col, .michelin__marca{ transform-box:fill-box; }
.enlace{ background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom:2px; transition:background-size .5s var(--ease); }
.enlace:hover{ background-size:0 1px; background-position:100% 100%; }

/* ---------- botones: el acabado de Almo (cuadrados, filete de 1 px, mayúsculas espaciadas; al pasar, se vacían) */
.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-family:var(--texto); font-weight:500; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; line-height:1; 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:var(--crema); border-color:var(--crema); color:var(--noche); }
.boton--claro:hover{ background:transparent; color:var(--crema); }

/* ---------- logo y sellos */
.logo{ display:block; fill:currentColor; overflow:visible; }
.firma{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(24px, 3.6vh, 44px); width:clamp(260px, 33vw, 520px); }
.firma__logo{ width:100%; height:auto; }
.firma__sellos{ display:flex; align-items:flex-end; gap:clamp(22px, 2.6vw, 36px); }
.sello{ display:block; height:auto; overflow:visible; }
.sello--michelin{ width:clamp(124px, 10.4vw, 172px); }
.sello--repsol{ width:clamp(82px, 6.8vw, 112px); }

/* ---------- rosetones de línea (sus dibujos de temporada) */
.rosa{ display:block; overflow:visible; }
.rosa g{ stroke-linecap:round; stroke-linejoin:round; }

/* ---------- entrada: el rosetón se dibuja girando, las pinceladas del árbol caen en su sitio como los cristales de un caleidoscopio,
   salen BON AMB y los sellos, y todo baja a la portada. En cada carga; un clic, toque, rueda o tecla la acelera. */
.entrada{ display:none; }
.anima .entrada{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; pointer-events:none; }
.entrada__fondo{ position:absolute; inset:0; background:var(--papel); opacity:.999; will-change:opacity; }
.rosa--entrada{ position:absolute; left:50%; top:50%; width:min(118vmin, 980px); height:auto; margin:calc(min(118vmin, 980px) / -2) 0 0 calc(min(118vmin, 980px) / -2); opacity:.55; }
.rosa--entrada path, .rosa--entrada circle{ stroke-dasharray:1 1; stroke-dashoffset:1; }
.entrada__firma{ position:relative; transform-origin:0 0; will-change:transform; }
.entrada__firma .logo__letras{ opacity:0; }
.entrada__firma .sello__flor, .entrada__firma .repsol__sol, .entrada__firma .sello__letras, .entrada__firma .repsol__texto{ opacity:0; }
.anima.intro .portada__titulo .firma, .anima.intro .nav{ opacity:0; }
.anima.intro body{ overflow:hidden; }

/* ---------- nav: siempre a la vista, con Reservar fuera de la hamburguesa */
.nav{ position:fixed; inset:0 0 auto; z-index:80; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 var(--gutter); background:var(--papel); box-shadow:0 1px 0 var(--linea); }
.nav__logo{ display:flex; align-items:center; gap:12px; font-family:var(--titulo); font-size:1.32rem; letter-spacing:.06em; }
.nav__arbol{ width:46px; height:auto; fill:var(--tinta); }
.nav__enlaces{ display:flex; gap:clamp(14px, 1.9vw, 34px); font-size:.98rem; font-weight:400; }
.nav__enlaces a{ position:relative; padding:6px 0; }
.nav__enlaces a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.nav__enlaces a:hover::after{ transform:scaleX(1); }
.nav__acciones{ display:flex; align-items:center; gap:12px; }
.nav__reservar{ padding:.95em 1.7em; }
.nav__abrir{ display:none; width:44px; height:44px; border:0; background:none; color:var(--tinta); cursor:pointer; position:relative; }
.nav__abrir span{ position:absolute; left:10px; right:10px; height:1.5px; background:currentColor; transition:transform .4s var(--ease), top .4s var(--ease); }
.nav__abrir span:first-child{ top:17px; } .nav__abrir span:last-child{ top:26px; }
.nav--abierta .nav__abrir span:first-child{ top:21.5px; transform:rotate(45deg); }
.nav--abierta .nav__abrir span:last-child{ top:21.5px; transform:rotate(-45deg); }
.menu{ display:none; }

/* ---------- portada: logo y sellos a la izquierda; a la derecha la lente del caleidoscopio con sus platos */
.portada{ position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); align-items:center; gap:clamp(24px, 4vw, 70px); padding:calc(var(--nav-h) + 4vh) var(--gutter) 6vh; overflow:clip; }
.portada__texto{ position:relative; z-index:2; display:flex; flex-direction:column; gap:clamp(34px, 6vh, 64px); }
.portada__titulo{ font-size:inherit; }
.portada__pie{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.portada__lugar{ color:var(--tinta-2); font-size:.98rem; letter-spacing:.04em; }
.portada__lente{ position:relative; justify-self:center; width:min(72vh, 42vw); aspect-ratio:1; }
.rosa--portada{ position:absolute; inset:-13%; width:126%; height:126%; opacity:.6; will-change:transform; }
.lente{ position:absolute; inset:0; border-radius:50%; overflow:hidden; background:var(--papel-2); transform:translateZ(0); }
.lente img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease; }
.lente img[data-activa]{ opacity:1; }

/* ---------- caleidoscopio (noche): cada plato aparece primero como cristales que giran y, al bajar, se ordena en el plato */
.kal{ position:relative; background:var(--noche); color:var(--crema); overflow:clip; }
.kal__fijo{ position:relative; min-height:100vh; display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); align-items:center; gap:clamp(24px, 4vw, 64px); padding:calc(var(--nav-h) + 4vh) var(--gutter) 6vh; }
.kal__cabeza{ display:flex; flex-direction:column; gap:26px; max-width:560px; }
.kal__cabeza h2{ font-size:clamp(2.7rem, 6.2vw, 6.4rem); }
.kal__lema{ font-size:clamp(1.15rem, 1.6vw, 1.45rem); line-height:1.5; color:var(--crema); }
.kal__temporada{ color:var(--crema-2); font-size:.98rem; }
.kal__escena{ position:relative; justify-self:center; width:min(70vh, 40vw); aspect-ratio:1; }
.rosa--kal{ position:absolute; inset:-11%; width:122%; height:122%; opacity:.5; will-change:transform; }
.kal__plato{ position:absolute; inset:0; }
.kal__lente{ position:absolute; inset:0; border-radius:50%; overflow:hidden; background:#000; transform:translateZ(0); }
.kal__lienzo{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.kal__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; will-change:opacity, transform; }
.kal__plato figcaption{ position:absolute; left:50%; top:calc(100% + 4.2vh); width:min(110%, 520px); transform:translateX(-50%); text-align:center; color:var(--crema-2); font-size:1rem; line-height:1.45; opacity:0; }
/* en táctil (móvil y tablet): un plato debajo de otro, sin fijar nada (la clase la pone el <head>) */
.tactil .kal__fijo{ align-items:start; }
.tactil .kal__escena{ width:min(100%, 560px); aspect-ratio:auto; display:grid; gap:clamp(110px, 18vh, 170px); padding-bottom:80px; }
.tactil .kal__plato{ position:relative; aspect-ratio:1; }
.tactil .rosa--kal{ display:none; }
.tactil .kal__plato figcaption{ opacity:1; top:calc(100% + 22px); }
@media (min-width: 961px){ .tactil .kal__cabeza{ position:sticky; top:calc(var(--nav-h) + 8vh); } }
/* sin animación: cada plato, quieto y en su foto */
html:not(.anima) .kal__escena{ width:auto; aspect-ratio:auto; display:grid; gap:56px; }
html:not(.anima) .kal__plato{ position:relative; aspect-ratio:1; margin-bottom:60px; }
html:not(.anima) .kal__foto, html:not(.anima) .kal__plato figcaption{ opacity:1; }
html:not(.anima) .rosa--kal{ display:none; }

/* ---------- menús */
.menus{ padding:clamp(90px, 14vh, 160px) var(--gutter); text-align:center; }
.menus h2{ margin-bottom:clamp(40px, 7vh, 80px); }
.menus__lista{ display:grid; grid-template-columns:repeat(2, minmax(0, 420px)); justify-content:center; gap:clamp(40px, 8vw, 140px); }
.menu-t{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.rosa--menu{ width:clamp(200px, 22vw, 300px); height:auto; margin-bottom:22px; will-change:transform; }
.menu-t h3{ font-size:clamp(2rem, 3.4vw, 3.2rem); }
.menu-t__precio{ font-family:var(--titulo); font-size:clamp(1.6rem, 2.4vw, 2.2rem); }
.menu-t__pases{ color:var(--tinta-2); }
.menus__nota{ margin:clamp(40px, 6vh, 64px) auto 30px; color:var(--tinta-2); }
.menus__botones{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

/* ---------- la casa */
.casa{ padding:clamp(70px, 10vh, 120px) var(--gutter) clamp(70px, 10vh, 120px); background:var(--papel-2); }
.casa__cabeza{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px clamp(24px, 5vw, 80px); align-items:end; margin-bottom:clamp(36px, 6vh, 64px); }
.casa__cabeza h2{ grid-row:span 2; }
.casa__cabeza p{ font-size:clamp(1.12rem, 1.5vw, 1.35rem); max-width:520px; }
.casa__dato{ color:var(--tinta-2); font-size:1rem !important; }
.casa__mosaico{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(10px, 1.4vw, 20px); }
.casa__f{ position:relative; overflow:hidden; }
.casa__f img{ width:100%; height:100%; object-fit:cover; }
.casa__f--montgo{ grid-column:1 / 9; grid-row:1; aspect-ratio:16 / 9; }
.casa__f--palmeras{ grid-column:9 / 13; grid-row:1 / 3; }
.casa__f--puerta{ grid-column:1 / 5; grid-row:2; aspect-ratio:4 / 3; }
.casa__f--sala{ grid-column:5 / 9; grid-row:2; aspect-ratio:4 / 3; }

.noche{ height:min(86vh, 760px); overflow:hidden; position:relative; background:var(--noche); }
.noche__foto{ position:absolute; inset:-12% 0; will-change:transform; }
.noche__foto img{ width:100%; height:100%; object-fit:cover; }

/* ---------- equipo */
.equipo{ padding:clamp(90px, 14vh, 150px) var(--gutter); display:grid; gap:clamp(70px, 12vh, 130px); }
.persona{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(28px, 6vw, 100px); align-items:center; }
.persona--der{ grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); }
.persona--der .persona__foto{ order:2; }
.persona__foto{ position:relative; overflow:hidden; aspect-ratio:3 / 4; max-width:520px; width:100%; }
.persona--der .persona__foto{ justify-self:end; }
.persona__foto img{ width:100%; height:100%; object-fit:cover; }
.persona__texto{ display:flex; flex-direction:column; gap:14px; max-width:520px; }
.persona__texto h3{ font-size:clamp(2.4rem, 4.6vw, 4.4rem); }
.persona__cargo{ color:var(--tinta-2); }
.persona__texto p:last-child{ font-size:clamp(1.08rem, 1.4vw, 1.28rem); }

/* ---------- trayectoria y temporadas */
.camino{ padding:clamp(80px, 12vh, 130px) var(--gutter); background:var(--noche); color:var(--crema); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(50px, 8vw, 140px); }
.camino h2{ font-size:clamp(2.2rem, 4.4vw, 4.2rem); margin-bottom:clamp(28px, 5vh, 50px); }
.hitos{ list-style:none; margin:0; padding:0; }
.hitos li{ display:grid; grid-template-columns:5.2rem 1fr; gap:18px; padding:16px 0; border-top:1px solid rgba(243,231,219,.16); }
.hitos li:last-child{ border-bottom:1px solid rgba(243,231,219,.16); }
.hitos span{ font-family:var(--titulo); font-size:1.3rem; line-height:1.3; color:var(--oro); }
.hitos--temporadas li{ font-family:var(--titulo); font-size:clamp(1.25rem, 1.8vw, 1.6rem); line-height:1.3; }
.hitos--temporadas span{ color:var(--agua); filter:brightness(1.35); }

/* ---------- bodega */
.bodega{ padding:clamp(90px, 14vh, 150px) var(--gutter); display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(30px, 5vw, 90px); align-items:start; }
.bodega__foto{ position:relative; overflow:hidden; aspect-ratio:3 / 2; }
.bodega__foto img{ width:100%; height:100%; object-fit:cover; }
.bodega__texto{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.bodega__texto > p{ font-size:clamp(1.08rem, 1.4vw, 1.28rem); }
.bodega__texto h3{ margin-top:18px; }
.bodega__sumilleria{ position:relative; overflow:hidden; width:min(100%, 340px); aspect-ratio:4 / 5; margin-top:18px; }
.bodega__sumilleria img{ width:100%; height:100%; object-fit:cover; }

/* ---------- experiencias */
.exp{ position:relative; min-height:100vh; display:grid; align-items:end; padding:clamp(80px, 12vh, 140px) var(--gutter); color:var(--crema); overflow:hidden; background:var(--noche); }
.exp__foto{ position:absolute; inset:-10% 0; will-change:transform; }
.exp__foto img{ width:100%; height:100%; object-fit:cover; }
.exp__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,17,14,.05) 10%, rgba(19,17,14,.78) 75%); }
.exp__caja{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(28px, 4vh, 44px); }
.exp__lista{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 4vw, 70px); width:100%; }
.exp__lista li{ display:flex; flex-direction:column; gap:10px; padding-top:18px; border-top:1px solid rgba(243,231,219,.4); }
.exp__lista h3{ font-size:clamp(1.4rem, 2vw, 1.9rem); }
.exp__lista p{ color:var(--crema-2); }
.icono{ width:44px; height:auto; color:var(--crema); }
.exp .boton{ background:var(--crema); border-color:var(--crema); color:var(--noche); }
.exp .boton:hover{ background:transparent; color:var(--crema); }

/* ---------- bono regalo */
.regalar{ padding:clamp(90px, 14vh, 150px) var(--gutter); display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:24px clamp(30px, 6vw, 110px); align-items:start; }
.regalar__cabeza{ display:flex; flex-direction:column; gap:18px; grid-row:span 2; }
.regalar__cabeza p{ color:var(--tinta-2); }
.bonos{ list-style:none; margin:0; padding:0; }
.bonos li{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:20px 0; border-top:1px solid var(--linea); font-size:clamp(1.1rem, 1.5vw, 1.32rem); }
.bonos li:last-child{ border-bottom:1px solid var(--linea); }
.bonos b{ font-family:var(--titulo); font-weight:400; white-space:nowrap; }
.regalar > .boton{ justify-self:start; grid-column:2; }

/* ---------- Casa Pepa */
.pepa{ padding:0 var(--gutter) clamp(90px, 14vh, 150px); display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(30px, 5vw, 90px); align-items:center; }
.pepa__foto{ position:relative; overflow:hidden; aspect-ratio:4 / 3; }
.pepa__foto img{ width:100%; height:100%; object-fit:cover; }
.pepa__texto{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.pepa__texto p{ font-size:clamp(1.08rem, 1.4vw, 1.28rem); }

/* ---------- visítanos */
.visitanos{ padding:clamp(90px, 14vh, 150px) var(--gutter) clamp(70px, 10vh, 110px); background:var(--papel-2); }
.visitanos h2{ margin-bottom:clamp(36px, 6vh, 64px); }
.visitanos__rejilla{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(30px, 4vw, 70px); }
.visitanos__bloque{ display:flex; flex-direction:column; gap:12px; padding-top:20px; border-top:1px solid var(--linea); }
.visitanos__bloque h3{ font-size:1.6rem; margin-bottom:4px; }
.horario-lista{ list-style:none; margin:0; padding:0; }
.horario-lista li{ display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--linea); }
.horario-lista li span:last-child{ text-align:right; }
.visitanos__nota{ color:var(--tinta-2); font-size:.95rem; line-height:1.5; }
.visitanos__botones{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(40px, 6vh, 64px); }
.visitanos__logo{ width:min(420px, 70vw); height:auto; margin:clamp(70px, 12vh, 120px) auto 0; color:var(--tinta); }

.pie{ padding:40px var(--gutter) 46px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; background:var(--noche); color:var(--crema-2); font-size:.92rem; }
.pie__arbol{ width:40px; height:auto; fill:var(--crema); }
.pie__redes{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-left:auto; }
.pie__redes a:hover{ color:var(--crema); }

.to-top{ position:fixed; right:18px; bottom:18px; z-index:70; width:46px; height:46px; border:1px solid var(--tinta); border-radius:50%; display:grid; place-items:center; background:var(--papel); color:var(--tinta); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .4s ease, visibility .4s ease, transform .4s var(--ease), background .4s ease, color .4s ease; }
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--tinta); color:var(--papel); }

/* ---------- fotos que se despliegan al bajar: una tapa del color del fondo se retira y la foto se asienta (variable --t con scrub) */
.desp{ position:relative; overflow:hidden; }
.anima .desp::after{ content:""; position:absolute; inset:-1px; z-index:2; background:var(--tapa, var(--papel)); transform:translate3d(0, calc(var(--t, 0) * 101%), 0); pointer-events:none; }
.anima .desp > img{ transform:scale(calc(1.12 - var(--t, 0) * .12)); }
.anima .casa .desp{ --tapa:var(--papel-2); }

/* ---------- tablet y móvil */
@media (max-width: 1180px){
  .nav__enlaces{ display:none; }
  .nav__abrir{ display:block; }
  .menu{ display:flex; flex-direction:column; justify-content:center; gap:4px; position:fixed; inset:0; z-index:-1; padding:var(--nav-h) var(--gutter) 40px; background:var(--papel); opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s ease; }
  .menu > a{ font-family:var(--titulo); font-size:clamp(2rem, 7.4vw, 3rem); line-height:1.2; }
  .menu__datos{ margin-top:26px; color:var(--tinta-2); font-size:1rem; }
  .nav--abierta .menu{ opacity:1; visibility:visible; }
}
@media (max-width: 960px){
  :root{ --nav-h:64px; }
  .nav__logo span{ display:none; }
  .nav__arbol{ width:42px; }
  .portada{ grid-template-columns:1fr; align-content:start; gap:36px; padding-top:calc(var(--nav-h) + 30px); }
  .portada__texto{ align-items:center; text-align:center; gap:30px; }
  .firma{ align-items:center; width:min(78vw, 360px); }
  .portada__pie{ align-items:center; }
  .portada__lente{ width:min(80vw, 520px); grid-row:2; }
  .portada__texto{ grid-row:1; }
  .kal__fijo{ grid-template-columns:1fr; padding-top:clamp(80px, 12vh, 120px); gap:50px; }
  .menus__lista{ grid-template-columns:1fr; gap:70px; }
  .casa__cabeza{ grid-template-columns:1fr; }
  .casa__cabeza h2{ grid-row:auto; }
  .casa__mosaico{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .casa__f--montgo{ grid-column:1 / 3; grid-row:auto; }
  .casa__f--palmeras{ grid-column:1; grid-row:auto; aspect-ratio:4 / 5; }
  .casa__f--puerta{ grid-column:2; grid-row:auto; aspect-ratio:4 / 5; }
  .casa__f--sala{ grid-column:1 / 3; grid-row:auto; }
  .noche{ height:60vh; }
  .persona, .persona--der{ grid-template-columns:1fr; gap:26px; }
  .persona--der .persona__foto{ order:0; justify-self:start; }
  .persona__foto{ max-width:440px; }
  .camino{ grid-template-columns:1fr; gap:60px; }
  .bodega{ grid-template-columns:1fr; }
  .exp{ min-height:auto; padding-top:52vh; }
  .exp__lista{ grid-template-columns:1fr; gap:26px; }
  .regalar{ grid-template-columns:1fr; }
  .regalar__cabeza{ grid-row:auto; }
  .regalar > .boton{ grid-column:1; }
  .pepa{ grid-template-columns:1fr; }
  .visitanos__rejilla{ grid-template-columns:1fr; }
  .pie__redes{ margin-left:0; }
}
@media (max-width: 520px){
  body{ font-size:17px; }
  .nav{ gap:8px; }
  .nav__reservar{ padding:.9em 1.25em; }
  .sello--michelin{ width:116px; }
  .sello--repsol{ width:76px; }
  .bonos li{ flex-direction:column; gap:4px; }
  .boton{ padding:1.05em 1.7em; }
}
@media (prefers-reduced-motion: reduce){
  .lente img{ transition:none; }
}