/* Hispano · la madera oscura de su salón, el ámbar de su neón del centenario y el blanco de sus platos */
@font-face{ font-family:"Young Serif"; src:url("../fonts/young-serif-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Jost"; src:url("../fonts/jost-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

:root{
  --noche:#1a120d;
  --madera:#2a1c13;
  --madera-2:#3a2719;
  --ambar:#f2a33a;
  --ambar-osc:#9a5c12;
  --crema:#f4ece0;
  --crema-2:rgba(244,236,224,.72);
  --blanco:#fbf8f3;
  --tinta:#1f1712;
  --gris:#5f554d;
  --linea:rgba(244,236,224,.16);
  --linea-clara:rgba(31,23,18,.14);
  --serif:"Young Serif", Georgia, serif;
  --sans:"Jost", "Futura", "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(--noche); color:var(--crema); font:400 1.1rem/1.65 var(--sans); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--ambar); color:var(--noche); }
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(--serif); font-weight:400; line-height:1.05; letter-spacing:-.01em; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--ambar); outline-offset:4px; }

.marco{ position:relative; overflow:hidden; background:var(--madera); }
.marco img{ width:100%; height:100%; object-fit:cover; }
/* el porcentaje de margin se calcula sobre el ancho; 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:4px; font-weight:500; font-size:1rem; letter-spacing:.02em; }
.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:.95em 1.9em; border:1px solid var(--ambar); background:var(--ambar); color:var(--noche); font-weight:500; font-size:1rem; letter-spacing:.02em; border-radius:999px; transition:background .5s ease, color .5s ease, border-color .5s ease; }
.boton:hover{ background:var(--crema); border-color:var(--crema); }
.boton--linea{ background:transparent; color:var(--crema); border-color:rgba(244,236,224,.55); }
.boton--linea:hover{ background:var(--crema); color:var(--noche); }
.sol{ display:inline-block; width:.85em; height:.85em; margin-right:.5em; border-radius:50%; background:#fbb316; vertical-align:-.08em; }

/* ---------- precarga: el año corre de 1926 a 2026 y se convierte en el logo del centenario */
.contador{ display:none; }
.anima .contador{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--noche); }
.anima.ya-visto .contador{ display:none; }
.contador__anio{ grid-area:1/1; font-family:var(--serif); font-size:clamp(5rem, 18vw, 15rem); line-height:1; color:var(--ambar); font-variant-numeric:tabular-nums; text-shadow:0 0 40px rgba(242,163,58,.45); }
.contador__logo{ grid-area:1/1; width:min(62vw, 420px); height:auto; color:var(--crema); opacity:0; }
.contador__logo .logo__cien{ color:var(--ambar); }

/* ---------- 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); transition:transform .6s var(--ease), background .5s ease, box-shadow .5s ease; }
.nav.oculta{ transform:translateY(-100%); }
.nav.con-fondo{ background:var(--noche); box-shadow:0 1px 0 var(--linea); }
.nav__logo{ color:var(--crema); transition:opacity .6s ease; }
.nav__marca{ display:block; width:118px; height:auto; }
.nav.sobre-portada .nav__logo{ opacity:0; pointer-events:none; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(18px, 2.4vw, 36px); font-size:1rem; }
.nav__enlaces a{ position:relative; }
.nav__enlaces a:not(.nav__reservar)::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; 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:.5em 1.3em; border-radius:999px; background:var(--ambar); color:var(--noche); font-weight:500; transition:background .5s ease; }
.nav__reservar:hover{ background:var(--crema); }
.nav__abrir{ display:none; }

/* ---------- portada: su salón a media luz y el logo del centenario */
.portada{ position:relative; height:100svh; min-height:620px; overflow:hidden; }
.portada__foto{ position:absolute; inset:0; }
.portada__foto img{ width:100%; height:100%; object-fit:cover; }
.portada__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(26,18,13,.88), rgba(26,18,13,.55) 45%, rgba(26,18,13,.25)), linear-gradient(180deg, rgba(26,18,13,.5), rgba(26,18,13,0) 25%, rgba(26,18,13,0) 70%, rgba(26,18,13,.85)); }
.portada__texto{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(40px, 8vh, 90px); display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.portada__logo{ display:block; width:min(40vw, 470px); height:auto; color:var(--crema); }
.portada__logo .logo__cien{ color:var(--ambar); }
.portada__lado{ max-width:30ch; }
.portada__lema{ font-family:var(--serif); font-size:clamp(1.4rem, 2vw, 1.95rem); line-height:1.25; }
.portada__botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.portada__sol{ position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 16px); font-size:.95rem; color:var(--crema-2); }

/* ---------- 1926: la historia */
.historia{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); align-items:center; padding:var(--seccion) var(--gutter); }
.historia__texto{ grid-column:1 / 8; }
.historia__anio{ font-size:clamp(6rem, 17vw, 16rem); line-height:.85; color:var(--ambar); text-shadow:0 0 50px rgba(242,163,58,.3); }
.historia__relato{ max-width:34ch; margin-top:clamp(28px, 3.4vw, 48px); font-family:var(--serif); font-size:clamp(1.35rem, 2vw, 1.9rem); line-height:1.3; }
.historia__menu{ margin-top:22px; color:var(--crema-2); }
.historia__neon{ grid-column:9 / 13; aspect-ratio:9/16; max-height:80svh; justify-self:end; width:100%; }
.casas{ grid-column:1 / 13; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; margin-top:clamp(80px, 10vw, 150px); padding-top:30px; border-top:1px solid var(--linea); }
.casas li{ position:relative; display:flex; flex-direction:column; gap:4px; }
.casas li::before{ content:""; position:absolute; top:-36px; left:0; width:11px; height:11px; border-radius:50%; background:var(--madera-2); box-shadow:inset 0 0 0 1px var(--ambar); }
.casas li:last-child::before{ background:var(--ambar); box-shadow:0 0 18px rgba(242,163,58,.7); }
.casas__calle{ font-family:var(--serif); font-size:clamp(1.25rem, 1.8vw, 1.7rem); line-height:1.15; }
.casas__nota{ font-size:.95rem; color:var(--crema-2); }

/* ---------- la familia */
.familia{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); padding:0 var(--gutter) var(--seccion); }
.familia__foto{ grid-column:1 / 6; grid-row:1 / 3; aspect-ratio:4/5; }
.familia__texto{ grid-column:7 / 12; grid-row:1; align-self:end; }
.familia h2{ font-size:clamp(2.4rem, 5vw, 5rem); }
.familia__nombres{ margin-top:clamp(22px, 2.6vw, 34px); font-family:var(--serif); font-size:clamp(1.4rem, 2.1vw, 2rem); color:var(--ambar); }
.familia__texto p:last-child{ margin-top:10px; color:var(--crema-2); }
.familia__atun{ grid-column:9 / 13; grid-row:2; aspect-ratio:4/5; margin-top:clamp(40px, 6vw, 90px); }

/* ---------- la barra */
.barra{ position:relative; padding:0 var(--gutter) var(--seccion); }
.barra__foto{ aspect-ratio:16/8; }
.barra__texto{ position:relative; max-width:880px; margin:clamp(-120px, -9vw, -60px) 0 0 auto; padding:clamp(28px, 4vw, 56px); background:var(--noche); }
.barra h2{ font-size:clamp(2.2rem, 4.4vw, 4.4rem); }
.barra p{ margin-top:18px; color:var(--crema-2); }

/* ---------- la carta: sobre blanco, como sus fotos de platos */
.carta-seccion{ padding:var(--seccion) var(--gutter); background:var(--blanco); color:var(--tinta); }
.carta-seccion__cabeza{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(44px, 5vw, 80px); }
.carta-seccion h2{ font-size:clamp(3rem, 7vw, 7rem); }
.carta-seccion .enlace-linea{ color:var(--ambar-osc); }
.platos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(28px, 4vw, 64px) clamp(16px, 2.4vw, 40px); }
.plato:nth-child(3n+2){ transform:translateY(clamp(40px, 6vw, 100px)); }
.plato__foto{ aspect-ratio:2/3; overflow:hidden; background:#fff; margin-bottom:18px; }
.plato__foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.plato:hover .plato__foto img{ transform:scale(1.04); }
.plato h3{ font-size:clamp(1.25rem, 1.6vw, 1.55rem); line-height:1.2; }
.plato__precio{ margin-top:6px; color:var(--ambar-osc); font-weight:500; }

/* ---------- el salón */
.salon{ padding:var(--seccion) var(--gutter); }
.salon h2{ font-size:clamp(2.8rem, 6vw, 6rem); margin-bottom:clamp(40px, 5vw, 72px); }
.salon__mosaico{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 24px); }
.salon__a{ grid-column:1 / 9; aspect-ratio:3/2; }
.salon__b{ grid-column:9 / 13; aspect-ratio:3/4; align-self:end; }
.salon__c{ grid-column:3 / 10; aspect-ratio:3/2; }
.salon__datos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px 40px; margin-top:clamp(56px, 7vw, 100px); padding-top:28px; border-top:1px solid var(--linea); font-family:var(--serif); font-size:clamp(1.15rem, 1.5vw, 1.4rem); line-height:1.35; }
.salon__datos a{ color:var(--ambar); border-bottom:1px solid currentColor; }

/* ---------- reservar */
.reserva{ text-align:center; padding:clamp(100px, 13vw, 190px) var(--gutter); background:var(--ambar); color:var(--noche); }
.reserva h2{ font-size:clamp(4rem, 14vw, 13rem); line-height:.95; }
.reserva__enlace{ display:inline-block; transition:letter-spacing 1.2s var(--ease); }
.reserva__enlace:hover{ letter-spacing:.02em; }
.reserva p{ margin-top:clamp(18px, 2.4vw, 30px); font-size:1.25rem; }
.reserva p a{ border-bottom:1px solid currentColor; }

/* ---------- 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__datos{ grid-column:1 / 7; }
.visitanos__foto{ grid-column:8 / 13; aspect-ratio:4/5; }
.visitanos__dir{ font-family:var(--serif); font-size:clamp(2rem, 3.2vw, 3rem); line-height:1.12; margin-bottom:18px; }
.visitanos__datos > .enlace-linea{ color:var(--ambar); }
.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, .horario dd{ white-space:nowrap; }
.horario dd{ color:var(--crema-2); }
.visitanos__cocina{ margin:-12px 0 24px; font-size:.95rem; color:var(--crema-2); }
.visitanos__contacto{ display:flex; flex-direction:column; gap:4px; font-size:1.15rem; }

/* ---------- pie */
.pie{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(80px, 10vw, 130px) var(--gutter) clamp(40px, 5vw, 60px); border-top:1px solid var(--linea); }
.pie__marca{ width:clamp(180px, 18vw, 260px); height:auto; color:var(--crema); }
.pie__sol{ margin-top:26px; color:var(--crema-2); }
.pie__redes{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 32px; margin-top:clamp(40px, 5vw, 60px); color:var(--crema-2); }
.pie__redes a:hover{ color:var(--ambar); }

/* ---------- 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(--blanco); color:var(--tinta); padding:0; overflow:hidden; }
.carta[open]{ display:flex; flex-direction:column; }
.carta::backdrop{ background:rgba(26,18,13,.78); -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-clara); }
.carta__cabeza h2{ font-size:2.2rem; }
.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.5rem; margin-bottom:10px; color:var(--ambar-osc); }
.carta__grupo li{ display:flex; justify-content:space-between; gap:20px; padding:8px 0; border-bottom:1px solid var(--linea-clara); line-height:1.4; }
.carta__grupo li span:last-child{ white-space:nowrap; font-weight:500; }
.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(--ambar); color:var(--noche); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s, background .4s ease; }
.to-top:hover{ background:var(--crema); }
.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__sol{ opacity:0; }

/* ---------- tablet */
@media (max-width:1020px){
  .nav__enlaces a[href="#visitanos"]{ display:none; }
  .portada__logo{ width:min(46vw, 400px); }
  .platos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .plato:nth-child(3n+2){ transform:none; }
  .plato:nth-child(2n){ transform:translateY(clamp(30px, 5vw, 70px)); }
  .salon__datos{ grid-template-columns:1fr; }
}

/* ---------- móvil */
@media (max-width:760px){
  :root{ --nav-h:64px; }
  .nav__marca{ width:96px; }
  .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:var(--crema); 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:22px; background:var(--noche); font-family:var(--serif); font-size:2rem; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; }
  .nav__enlaces a[href="#visitanos"]{ display:block; }
  .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; font-family:var(--sans); font-size:1.05rem; padding:.8em 2.2em; }
  .nav.oculta.nav--abierta{ transform:none; }

  .portada__foto::after{ background:linear-gradient(180deg, rgba(26,18,13,.55), rgba(26,18,13,.2) 30%, rgba(26,18,13,.6) 55%, rgba(26,18,13,.95)); }
  .portada__texto{ flex-direction:column; align-items:flex-start; gap:26px; bottom:calc(32px + env(safe-area-inset-bottom)); }
  .portada__logo{ width:min(70vw, 300px); }
  .portada__botones .boton{ flex:1 1 auto; }
  .portada__sol{ left:var(--gutter); right:auto; }

  .historia, .familia, .visitanos{ display:block; }
  .historia__neon{ margin-top:48px; width:72%; margin-left:auto; max-height:none; }
  .casas{ display:block; padding:0 0 0 28px; border-top:0; border-left:1px solid var(--linea); margin-top:70px; }
  .casas li{ padding-bottom:26px; }
  .casas li::before{ top:8px; left:-34px; }
  .familia__texto{ margin-top:40px; }
  .familia__atun{ width:62%; margin-left:auto; }
  .barra__foto{ aspect-ratio:4/3; margin:0 calc(var(--gutter) * -1); }
  .barra__texto{ margin:0; padding:32px 0 0; background:transparent; }
  .carta-seccion__cabeza{ flex-direction:column; align-items:flex-start; }
  .platos{ gap:36px 12px; }
  .salon__mosaico{ grid-template-columns:1fr 1fr; gap:10px; }
  .salon__a{ grid-column:1 / 3; }
  .salon__b{ grid-column:1 / 2; }
  .salon__c{ grid-column:2 / 3; aspect-ratio:3/4; }
  .reserva h2{ font-size:clamp(3.6rem, 18vw, 5rem); }
  .visitanos__foto{ margin-top:48px; }
  .horario div{ font-size:.98rem; }
  .horario dt{ white-space:normal; }
  .horario dd{ font-size:.92rem; }
}

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