/* Almo · el azul de su logotipo, la madera clara de sus listones y la loza blanca de sus platos */
@font-face{ font-family:"Bodoni Moda"; src:url("../fonts/bodoni-moda-normal-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Bodoni Moda"; src:url("../fonts/bodoni-moda-italic-400.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Raleway"; src:url("../fonts/raleway-normal-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

:root{
  --crema:#f5f0e8;
  --papel:#ebe3d6;
  --tinta:#16202e;
  --gris:#5b6270;
  --azul:#022849;
  --azul-2:#0b3560;
  --madera:#c9a37b;
  --madera-osc:#8d6239;
  --linea:rgba(2,40,73,.16);
  --linea-clara:rgba(245,240,232,.24);
  --display:"Bodoni Moda", "Didot", Georgia, serif;
  --sans:"Raleway", "Helvetica Neue", Arial, sans-serif;
  --gutter:clamp(20px, 4.5vw, 72px);
  --seccion:clamp(110px, 13vw, 210px);
  --nav-h:84px;
  --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; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{ background:var(--crema); color:var(--tinta); font:400 1.06rem/1.7 var(--sans); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--azul); color:#fff; }
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.04; letter-spacing:-.01em; }
em{ font-style:italic; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:1px solid var(--madera-osc); outline-offset:4px; }

.marco{ position:relative; overflow:hidden; background:var(--papel); }
.marco img{ width:100%; height:100%; object-fit:cover; }
/* el porcentaje de margin se calcula sobre el ancho: en panorámicas se pasaba; el desplazamiento lo pone main.js con yPercent */
.js .marco [data-parallax]{ height:116%; will-change:transform; }

.enlace-linea{ position:relative; display:inline-block; padding-bottom:5px; font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; }
.enlace-linea::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform-origin:right; transition:transform .7s var(--ease); }
.enlace-linea:hover::after{ transform:scaleX(0); }
.boton{ display:inline-flex; align-items:center; justify-content:center; padding:1.05em 2.2em; border:1px solid var(--azul); background:var(--azul); color:#fff; font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; transition:background .5s ease, color .5s ease, border-color .5s ease; }
.boton:hover{ background:transparent; color:var(--azul); }
.boton--claro{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
.boton--claro:hover{ background:#fff; border-color:#fff; color:var(--azul); }

/* ---------- precarga: los listones de madera de su sala; «Almo» aparece y los listones se abren */
.listones{ display:none; }
.anima .listones{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; }
.anima.ya-visto .listones{ display:none; }
.listones__madera{ position:absolute; inset:0; display:flex; }
/* cada listón con su sombra a la derecha, como la pared de la sala */
.listones__madera i{ flex:1; background:linear-gradient(90deg, #b88f66, #cfa982 35%, #c79e74 70%, #9c7550 96%, #6e4e30); transform-origin:50% 0; }
.listones__almo{ position:relative; width:min(46vw, 420px); height:auto; color:var(--azul); }

/* ---------- nav */
.nav{ position:fixed; inset:0 0 auto; z-index:80; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); color:var(--azul); transition:transform .6s var(--ease), background .5s ease, box-shadow .5s ease, color .5s ease; }
/* la nav no se esconde nunca: Reservar siempre a mano */
.nav.con-fondo{ background:var(--crema); box-shadow:0 1px 0 var(--linea); }
.nav.sobre-portada{ color:#fff; }
.nav__logo{ transition:opacity .6s ease; }
.nav__marca{ display:block; width:132px; height:auto; }
.nav.sobre-portada .nav__logo{ opacity:0; pointer-events:none; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(18px, 2.4vw, 38px); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; }
.nav__enlaces a{ position:relative; }
.nav__enlaces a:not(.nav__reservar)::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.nav__enlaces a:not(.nav__reservar):hover::after{ transform:scaleX(1); }
.nav__reservar{ padding:.95em 1.5em; border:1px solid currentColor; transition:background .5s ease, color .5s ease; }
.nav__reservar:hover{ background:var(--azul); border-color:var(--azul); color:#fff; }
.nav.sobre-portada .nav__reservar:hover{ background:#fff; border-color:#fff; color:var(--azul); }
.nav__abrir{ display:none; }
.nav__reservar--movil{ display:none; }

/* ---------- portada: su vídeo a sangre y el logotipo en blanco */
.portada{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--azul); color:#fff; }
.portada__video{ position:absolute; inset:0; }
.portada__video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portada__video::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,20,38,.45), rgba(2,20,38,0) 26%, rgba(2,20,38,0) 46%, rgba(2,20,38,.72)); pointer-events:none; }
.portada__texto{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(36px, 7vh, 76px); display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.portada__logo{ display:block; width:min(58vw, 820px); height:auto; color:#fff; }
.portada__lado{ display:flex; flex-direction:column; align-items:flex-start; gap:28px; padding-bottom:.6%; }
.portada__lema{ font-family:var(--display); font-style:italic; font-size:clamp(1.4rem, 2vw, 2rem); line-height:1.25; }
.portada__sellos{ position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 22px); }
/* los sellos oficiales de las guías, en su versión en negativo sobre lo oscuro (el sol de Repsol no cambia) */
.sellos{ display:flex; align-items:flex-end; gap:clamp(18px, 2vw, 28px); }
.sellos .sello{ display:block; width:auto; height:clamp(50px, 4.4vw, 66px); }
.sellos .sello--michelin-estrella{ margin-bottom:2px; }   /* su línea base con la del texto de Repsol */
.sellos .sello--repsol-2soles{ height:clamp(58px, 5vw, 76px); }
.sellos .michelin__marca, .sellos .repsol__texto{ fill:var(--crema); }

/* ---------- la elegancia no se decora */
.elegancia{ padding:var(--seccion) 0 0; text-align:center; }
.elegancia__frase{ padding:0 var(--gutter); font-family:var(--display); font-size:clamp(2.6rem, 6.6vw, 6.6rem); line-height:1.02; letter-spacing:-.02em; color:var(--azul); }
.elegancia__frase em{ color:var(--madera-osc); }
.elegancia__pie{ max-width:44ch; margin:clamp(26px, 3vw, 40px) auto 0; padding:0 var(--gutter); color:var(--gris); }
.elegancia__foto{ margin-top:clamp(70px, 9vw, 140px); aspect-ratio:2000/768; }

/* ---------- menú degustación: los pases, uno debajo de otro, y algunas fotos a los lados */
.degustacion{ position:relative; padding:var(--seccion) var(--gutter); text-align:center; }
.degustacion__cabeza{ margin-bottom:clamp(56px, 7vw, 110px); }
.degustacion h2{ font-size:clamp(2.8rem, 6vw, 6rem); color:var(--azul); }
.degustacion__precio{ margin-top:14px; font-family:var(--display); font-style:italic; font-size:clamp(1.5rem, 2.2vw, 2.2rem); color:var(--madera-osc); }
.pases{ position:relative; max-width:1240px; margin:0 auto; }
.pase{ position:relative; padding:clamp(12px, 1.4vw, 20px) 0; font-family:var(--display); font-size:clamp(1.35rem, 2.3vw, 2.3rem); line-height:1.2; color:var(--azul); }
.pase + .pase::before{ content:""; position:absolute; left:50%; top:0; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--madera); transform:translateY(-50%); }
.pase__foto{ position:absolute; top:50%; width:clamp(150px, 17vw, 260px); aspect-ratio:3/4; overflow:hidden; background:var(--papel); transform:translateY(-50%); }
.pase__foto img{ width:100%; height:100%; object-fit:cover; }
.pase__foto--izq{ left:0; }
.pase__foto--der{ right:0; }
.degustacion__nota{ max-width:48ch; margin:clamp(56px, 7vw, 100px) auto 0; color:var(--gris); }
.degustacion__reservar{ margin-top:32px; }

/* ---------- a la carta */
.carta-seccion{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); align-items:center; padding:0 var(--gutter) var(--seccion); }
.carta-seccion__foto{ grid-column:1 / 7; aspect-ratio:4/5; }
.carta-seccion__texto{ grid-column:8 / 12; }
.carta-seccion h2{ font-size:clamp(2.6rem, 5.4vw, 5.4rem); color:var(--azul); }
.carta-seccion p{ margin:clamp(22px, 2.6vw, 34px) 0 clamp(28px, 3vw, 40px); font-family:var(--display); font-style:italic; font-size:clamp(1.3rem, 1.8vw, 1.7rem); line-height:1.35; color:var(--tinta); }
.carta-seccion .enlace-linea{ color:var(--azul); }

/* ---------- Juan Guillamón */
.juan{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); padding:var(--seccion) var(--gutter); background:var(--azul); color:var(--crema); }
.juan__foto{ grid-column:1 / 6; aspect-ratio:3/4; background:var(--azul-2); }
.juan__texto{ grid-column:7 / 13; align-self:center; }
.juan h2{ font-size:clamp(2.8rem, 6vw, 6rem); }
.juan__cita{ margin-top:clamp(28px, 3.4vw, 48px); max-width:22ch; font-family:var(--display); font-style:italic; font-size:clamp(1.5rem, 2.4vw, 2.4rem); line-height:1.25; color:var(--madera); }
.camino{ grid-column:1 / 13; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:18px; margin-top:clamp(70px, 9vw, 130px); padding-top:30px; border-top:1px solid var(--linea-clara); position:relative; }
.camino li{ position:relative; display:flex; flex-direction:column; gap:6px; }
.camino li::before{ content:""; position:absolute; top:-35px; left:0; width:9px; height:9px; border-radius:50%; background:var(--madera); }
.camino__sitio{ font-family:var(--display); font-size:clamp(1.05rem, 1.4vw, 1.4rem); line-height:1.15; }
.camino__casa{ font-size:.86rem; line-height:1.4; color:rgba(245,240,232,.72); }

/* ---------- la sala */
.sala{ padding:var(--seccion) var(--gutter) 0; }
.sala h2{ max-width:14ch; font-size:clamp(2.6rem, 5.4vw, 5.4rem); color:var(--azul); margin-bottom:clamp(40px, 5vw, 72px); }
.sala__tira{ aspect-ratio:2000/768; }
.sala__par{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 1.6vw, 24px); margin-top:clamp(12px, 1.6vw, 24px); }
.sala__par .marco{ aspect-ratio:2000/768; }

/* ---------- el equipo */
.equipo{ padding:var(--seccion) var(--gutter); text-align:center; }
.equipo__foto{ aspect-ratio:3/2; max-width:1300px; margin:0 auto; }
.equipo h2{ margin-top:clamp(36px, 4vw, 56px); font-size:clamp(2.2rem, 4vw, 3.8rem); color:var(--azul); }
.equipo p{ margin-top:12px; color:var(--gris); }

/* ---------- eventos */
.eventos{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); align-items:center; padding:var(--seccion) var(--gutter); background:var(--papel); }
.eventos__texto{ grid-column:1 / 6; }
.eventos h2{ font-size:clamp(2.4rem, 4.6vw, 4.6rem); color:var(--azul); }
.eventos h2 em{ color:var(--madera-osc); }
.eventos p{ margin:clamp(20px, 2.4vw, 30px) 0 28px; font-size:1.1rem; color:var(--gris); }
.eventos .enlace-linea{ color:var(--azul); }
.eventos__fotos{ grid-column:7 / 13; display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 1.6vw, 24px); }
.eventos__fotos .marco{ aspect-ratio:4/5; }
.eventos__fotos .marco:last-child{ transform:translateY(clamp(30px, 5vw, 80px)); }

/* ---------- regala */
.regala{ padding:var(--seccion) var(--gutter); text-align:center; }
.regala h2{ font-size:clamp(2.4rem, 4.6vw, 4.6rem); color:var(--azul); }
.regala p{ max-width:38ch; margin:18px auto 34px; color:var(--gris); }

/* ---------- reservar */
.reserva{ background:var(--azul); color:#fff; text-align:center; padding:clamp(100px, 13vw, 190px) var(--gutter); }
.reserva h2{ font-style:italic; font-size:clamp(2.8rem, 8vw, 8rem); line-height:1; letter-spacing:-.02em; }
.reserva p{ margin-top:clamp(30px, 3.6vw, 48px); }
.reserva .reserva__nota{ max-width:44ch; margin:28px auto 0; font-size:.92rem; color:rgba(245,240,232,.72); }

/* ---------- visítanos */
.visitanos{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); align-items:center; padding:var(--seccion) var(--gutter); }
.visitanos__foto{ grid-column:2 / 6; aspect-ratio:4/5; }
.visitanos__datos{ grid-column:7 / 12; }
.visitanos__dir{ font-family:var(--display); font-size:clamp(2rem, 3.2vw, 3rem); line-height:1.1; color:var(--azul); margin-bottom:18px; }
.visitanos__datos > .enlace-linea{ color:var(--azul); }
.horario{ margin:clamp(36px, 4vw, 56px) 0 28px; }
.horario div{ display:flex; justify-content:space-between; gap:24px; padding:12px 0; border-bottom:1px solid var(--linea); }
.horario div:first-child{ border-top:1px solid var(--linea); }
.horario dt{ font-weight:600; }
.horario dt, .horario dd{ white-space:nowrap; }
.horario dd{ color:var(--gris); }
.visitanos__contacto{ display:flex; flex-direction:column; gap:4px; font-weight:600; color:var(--azul); }

/* ---------- pie */
.pie{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(80px, 10vw, 130px) var(--gutter) clamp(40px, 5vw, 60px); background:var(--tinta); color:var(--crema); }
.pie__logo{ width:clamp(220px, 24vw, 340px); height:auto; color:var(--crema); }
.pie__sellos{ justify-content:center; margin-top:32px; }
.pie__redes{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 32px; margin-top:clamp(44px, 5vw, 64px); font-size:.9rem; color:rgba(245,240,232,.72); }
.pie__redes a:hover{ color:#fff; }

/* ---------- la carta (ventana) */
.carta{ position:fixed; inset:0; margin:auto; width:min(800px, calc(100vw - 24px)); height:min(88vh, 1000px); max-width:none; max-height:none; border:0; background:var(--crema); color:var(--tinta); padding:0; overflow:hidden; }
.carta[open]{ display:flex; flex-direction:column; }
.carta::backdrop{ background:rgba(2,20,38,.7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.carta__cabeza{ display:flex; justify-content:space-between; align-items:center; padding:22px clamp(22px, 4vw, 44px); border-bottom:1px solid var(--linea); }
.carta__cabeza h2{ font-size:2.2rem; color:var(--azul); }
.carta__cerrar{ position:relative; width:44px; height:44px; }
.carta__cerrar span{ position:absolute; left:10px; right:10px; top:50%; height:1px; background:currentColor; transform:rotate(45deg); }
.carta__cerrar span + span{ transform:rotate(-45deg); }
.carta__cuerpo{ overflow-y:auto; overscroll-behavior:contain; padding:10px clamp(22px, 4vw, 44px) 40px; }
.carta__grupo{ padding:28px 0 8px; }
.carta__grupo h3{ font-size:1.6rem; font-style:italic; margin-bottom:10px; color:var(--madera-osc); }
.carta__grupo li{ display:flex; justify-content:space-between; gap:20px; padding:9px 0; border-bottom:1px solid var(--linea); line-height:1.45; }
.carta__grupo li span:last-child{ white-space:nowrap; font-weight:600; color:var(--azul); }
.carta__nota{ margin-top:28px; font-size:.95rem; color:var(--gris); }

/* 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(--azul); color:#fff; opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s, background .4s ease; }
.to-top:hover{ background:var(--madera-osc); }
.to-top.is-visible{ opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s, background .4s ease; }

/* estados de partida: solo con .anima (GSAP y sin «reducir movimiento») */
.anima [data-revela]{ opacity:0; transform:translateY(26px); }
.anima [data-cortina]{ clip-path:inset(100% 0 0 0); }
.anima .portada__lado, .anima .portada__sellos{ opacity:0; }
.anima .pase > span{ opacity:.35; }

/* ---------- tablet */
@media (max-width:1020px){
  .nav__enlaces a[href="#sala"]{ display:none; }
  .pase__foto{ width:clamp(120px, 15vw, 170px); }
  .camino{ grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:56px; }
  .eventos__texto{ grid-column:1 / 7; }
  .eventos__fotos{ grid-column:7 / 13; }
  .visitanos__foto{ grid-column:1 / 6; }
}

/* ---------- móvil */
@media (max-width:760px){
  :root{ --nav-h:64px; }
  .nav__marca{ width:112px; }
  .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:1px; background:currentColor; transition:transform .5s var(--ease); }
  .nav--abierta .nav__abrir span:first-child{ transform:translateY(4.5px) rotate(45deg); }
  .nav--abierta .nav__abrir span:last-child{ transform:translateY(-4.5px) rotate(-45deg); }
  .nav__enlaces{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:24px; background:var(--crema); color:var(--azul); font-size:.95rem; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; }
  .nav__enlaces a[href="#sala"]{ display:block; }
  .nav--abierta{ color:var(--azul) !important; }
  .nav--abierta .nav__enlaces{ opacity:1; visibility:visible; transition:opacity .5s ease, visibility 0s; }
  .nav.nav--abierta .nav__logo{ opacity:1; pointer-events:auto; position:relative; z-index:2; }
  .nav__enlaces a:not(.nav__reservar)::after{ display:none; }
  .nav__reservar{ margin-top:16px; padding:1.1em 2.4em; }
  .nav__reservar--movil{ display:block; margin:0 12px 0 auto; padding:.8em 1.2em; font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
  .nav--abierta .nav__reservar--movil{ visibility:hidden; }

  .portada__texto{ flex-direction:column; align-items:flex-start; gap:26px; bottom:calc(36px + env(safe-area-inset-bottom)); }
  .portada__logo{ width:100%; }
  .portada__sellos{ right:auto; left:var(--gutter); top:calc(var(--nav-h) + 10px); }
  .sellos .sello{ height:48px; }
  .sellos .sello--repsol-2soles{ height:58px; }

  .elegancia__foto{ aspect-ratio:4/3; }

  .pase__foto{ position:relative; top:auto; left:auto; right:auto; transform:none; width:56vw; margin:22px auto 22px; }
  .pase__foto--der{ margin-left:auto; margin-right:6vw; }
  .pase__foto--izq{ margin-left:6vw; margin-right:auto; }

  .carta-seccion, .juan, .eventos, .visitanos{ display:block; }
  .carta-seccion__texto, .juan__texto, .visitanos__datos{ margin-top:40px; }
  .camino{ display:block; margin-top:60px; padding:0 0 0 28px; border-top:0; border-left:1px solid var(--linea-clara); }
  .camino li{ padding:0 0 26px; }
  .camino li::before{ top:8px; left:-33px; }
  .sala__tira, .sala__par .marco{ aspect-ratio:4/3; }
  .sala__par{ grid-template-columns:1fr; }
  .eventos__fotos{ margin-top:44px; gap:10px; }
  .eventos__fotos .marco:last-child{ transform:translateY(28px); }
  .visitanos__foto{ margin-bottom:8px; }
  .horario div{ font-size:.95rem; }
  .horario dd{ white-space:normal; text-align:right; }
}

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