/* La Bodeguita de Javi Gracia · el negro y el oro de su marca, el papel crudo de sus cartas y el fuego de su parrilla */
@font-face{ font-family:"Lora"; src:url("../fonts/lora-normal-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lora"; src:url("../fonts/lora-italic-400.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Work Sans"; src:url("../fonts/work-sans-normal-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

:root{
  --negro:#151210;
  --negro-2:#211c18;
  --oro:#b8995a;
  --oro-osc:#7d6430;
  --crudo:#f3ede2;
  --crudo-2:#e8dfd0;
  --tinta:#1d1915;
  --gris:#5d554c;
  --brasa:#e2662a;
  --linea:rgba(29,25,21,.15);
  --linea-oscura:rgba(243,237,226,.16);
  --serif:"Lora", Georgia, serif;
  --sans:"Work Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter:clamp(20px, 4.5vw, 72px);
  --seccion:clamp(100px, 12vw, 190px);
  --nav-h:80px;
  --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(--crudo); color:var(--tinta); font:400 1.08rem/1.65 var(--sans); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--oro); color:var(--negro); }
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:500; line-height:1.08; letter-spacing:-.01em; }
em{ font-style:italic; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--oro); outline-offset:4px; }
.oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.marco{ position:relative; overflow:hidden; background:var(--crudo-2); margin:0; }
.marco img{ width:100%; height:100%; object-fit:cover; }
/* el desplazamiento del parallax 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; }
.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(--oro); background:var(--oro); color:var(--negro); font-weight:500; transition:background .5s ease, color .5s ease, border-color .5s ease; }
.boton:hover{ background:var(--crudo); border-color:var(--crudo); }
.boton--linea{ background:transparent; color:var(--crudo); border-color:rgba(243,237,226,.5); }
.boton--linea:hover{ background:var(--crudo); color:var(--negro); }

/* ---------- precarga: chispas de la brasa y el nombre */
.brasa{ display:none; }
.anima .brasa{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--negro); overflow:hidden; }
.anima.ya-visto .brasa{ display:none; }
.brasa__chispas{ position:absolute; inset:0; }
.brasa__chispas i{ position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%; background:var(--brasa); box-shadow:0 0 10px 2px rgba(226,102,42,.8); }
.brasa__nombre{ position:relative; display:flex; flex-direction:column; align-items:center; font-family:var(--serif); font-size:clamp(2.6rem, 7vw, 5.6rem); line-height:1; color:var(--crudo); }
.brasa__nombre em{ margin-top:.25em; font-size:.42em; color:var(--oro); }

/* ---------- 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(--crudo); transition:transform .6s var(--ease), background .5s ease, box-shadow .5s ease; }
.nav.oculta{ transform:translateY(-100%); }
.nav.con-fondo{ background:var(--negro); box-shadow:0 1px 0 var(--linea-oscura); }
.nav__logo{ display:flex; flex-direction:column; font-family:var(--serif); font-size:1.3rem; line-height:1; transition:opacity .6s ease; }
.nav__logo em{ font-size:.62em; color:var(--oro); margin-top:3px; }
.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:.98rem; }
.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:.55em 1.3em; background:var(--oro); color:var(--negro); font-weight:500; transition:background .5s ease; }
.nav__reservar:hover{ background:var(--crudo); }
.nav__abrir{ display:none; }

/* ---------- portada: el nombre en grande y, al lado, el fuego */
.portada{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); min-height:100svh; background:var(--negro); color:var(--crudo); }
.portada__texto{ display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav-h) + 40px) var(--gutter) 80px; }
.portada h1{ display:flex; flex-direction:column; font-size:clamp(3.6rem, 9vw, 9rem); line-height:.95; letter-spacing:-.025em; }
.portada h1 em{ margin-top:.18em; font-size:.42em; font-weight:400; letter-spacing:0; color:var(--oro); }
.portada__lema{ margin:clamp(28px, 3.4vw, 44px) 0 clamp(30px, 3.4vw, 44px); font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem, 1.9vw, 1.8rem); color:rgba(243,237,226,.85); }
.portada__botones{ display:flex; flex-wrap:wrap; gap:12px; }
.portada__foto{ background:var(--negro-2); }

/* ---------- la casa */
.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__foto{ grid-column:1 / 6; aspect-ratio:4/5; }
.historia__texto{ grid-column:7 / 12; }
.historia h2{ font-size:clamp(2.4rem, 4.6vw, 4.6rem); }
.historia p{ max-width:40ch; margin-top:clamp(18px, 2.2vw, 28px); font-size:1.15rem; color:var(--gris); }

/* ---------- huerta, mar y viñas */
.tierra{ padding:0 var(--gutter) var(--seccion); }
.tierra__frase{ font-family:var(--serif); font-size:clamp(2.4rem, 5.4vw, 5.4rem); line-height:1.05; max-width:16ch; margin-bottom:clamp(40px, 5vw, 72px); }
.tierra__frase em{ color:var(--oro-osc); }
.tierra__fotos{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 1.6vw, 24px); max-width:1100px; margin-left:auto; }
.tierra__fotos .marco{ aspect-ratio:4/5; }
.tierra__fotos .marco:last-child{ transform:translateY(clamp(30px, 6vw, 100px)); }

/* ---------- de la carta */
.platos-seccion{ padding:var(--seccion) var(--gutter); background:var(--negro); color:var(--crudo); }
.platos-seccion__cabeza{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(44px, 5vw, 76px); }
.platos-seccion h2{ font-size:clamp(2.8rem, 6vw, 6rem); }
.platos-seccion .enlace-linea{ color:var(--oro); }
.platos{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(30px, 4vw, 60px) clamp(14px, 2vw, 32px); }
.plato__foto{ aspect-ratio:4/5; overflow:hidden; background:var(--negro-2); margin-bottom:16px; }
.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.2rem, 1.5vw, 1.45rem); }
.plato__desc{ margin-top:4px; font-family:var(--serif); font-style:italic; color:rgba(243,237,226,.7); line-height:1.4; }
.plato__precio{ margin-top:6px; color:var(--oro); font-weight:500; }

/* ---------- menús */
.menus-seccion{ padding:var(--seccion) var(--gutter); }
.menus-seccion h2{ font-size:clamp(2.6rem, 5.4vw, 5.4rem); margin-bottom:clamp(36px, 4.4vw, 64px); }
.menus{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; border-top:1px solid var(--linea); }
.menu{ padding:28px clamp(16px, 2vw, 28px) 32px 0; border-bottom:1px solid var(--linea); }
.menu + .menu{ padding-left:clamp(16px, 2vw, 28px); border-left:1px solid var(--linea); }
.menu h3{ font-size:clamp(1.35rem, 1.8vw, 1.7rem); }
.menu__precio{ margin:8px 0 14px; font-family:var(--serif); font-size:clamp(1.8rem, 2.6vw, 2.5rem); color:var(--oro-osc); }
.menu p:last-child{ color:var(--gris); font-size:1rem; line-height:1.5; }
.menus-seccion__nota{ margin-top:24px; color:var(--gris); }

/* ---------- barra, salón y terraza */
.ambientes{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(18px, 2.6vw, 44px); align-items:end; padding:0 var(--gutter) var(--seccion); }
.ambiente .marco{ aspect-ratio:4/5; margin-bottom:22px; }
.ambiente:nth-child(3) .marco{ aspect-ratio:4/3; }
.ambiente h3{ font-size:clamp(1.8rem, 2.6vw, 2.6rem); }
.ambiente p{ margin-top:10px; color:var(--gris); max-width:34ch; }
.ambiente--terraza{ align-self:center; padding-left:clamp(0px, 2vw, 30px); border-left:1px solid var(--oro); }

/* ---------- reservar */
.reserva{ text-align:center; padding:clamp(100px, 13vw, 180px) var(--gutter); background:var(--oro); color:var(--negro); }
.reserva h2{ font-size:clamp(4rem, 13vw, 12rem); 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.2rem; }
.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); background:var(--negro); color:var(--crudo); }
.visitanos__datos{ grid-column:1 / 7; }
.visitanos__foto{ grid-column:8 / 13; aspect-ratio:4/5; background:var(--negro-2); }
.visitanos__dir{ font-size:clamp(2rem, 3.4vw, 3.2rem); line-height:1.12; }
.visitanos__barra{ margin:12px 0 18px; font-family:var(--serif); font-style:italic; color:rgba(243,237,226,.75); }
.visitanos__datos > .enlace-linea{ color:var(--oro); }
.horario{ margin:clamp(34px, 4vw, 52px) 0 26px; }
.horario div{ display:flex; justify-content:space-between; gap:24px; padding:12px 0; border-bottom:1px solid var(--linea-oscura); }
.horario div:first-child{ border-top:1px solid var(--linea-oscura); }
.horario dt{ font-weight:500; }
.horario dd{ white-space:nowrap; color:rgba(243,237,226,.75); }
.visitanos__contacto{ font-size:1.25rem; }

/* ---------- pie */
.pie{ display:flex; flex-direction:column; align-items:center; padding:clamp(70px, 9vw, 110px) var(--gutter) clamp(40px, 5vw, 56px); background:var(--negro); color:var(--crudo); border-top:1px solid var(--linea-oscura); }
.pie__logo{ display:flex; flex-direction:column; align-items:center; font-family:var(--serif); font-size:clamp(2rem, 3.4vw, 3rem); line-height:1; }
.pie__logo em{ margin-top:.25em; font-size:.45em; color:var(--oro); }
.pie__redes{ display:flex; gap:32px; margin-top:36px; color:rgba(243,237,226,.7); }
.pie__redes a:hover{ color:var(--oro); }

/* ---------- 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(--crudo); color:var(--tinta); padding:0; overflow:hidden; }
.carta[open]{ display:flex; flex-direction:column; }
.carta::backdrop{ background:rgba(21,18,16,.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); }
.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.45rem; margin-bottom:10px; color:var(--oro-osc); }
.carta__grupo li{ display:flex; justify-content:space-between; gap:20px; padding:8px 0; border-bottom:1px solid var(--linea); 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(--oro); color:var(--negro); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s, background .4s ease; }
.to-top:hover{ background:var(--crudo); }
.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__lema, .anima .portada__botones{ opacity:0; }

/* ---------- tablet */
@media (max-width:1020px){
  .platos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .menus{ grid-template-columns:1fr 1fr; }
  .menu:nth-child(3){ padding-left:0; border-left:0; }
}

/* ---------- móvil */
@media (max-width:760px){
  :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:1px; background:var(--crudo); 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(--negro); font-family:var(--serif); font-size:1.9rem; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; }
  .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{ display:flex; flex-direction:column; }
  .portada__texto{ padding:calc(var(--nav-h) + 30px) var(--gutter) 40px; }
  .portada__botones .boton{ flex:1 1 auto; }
  .portada__foto{ aspect-ratio:4/5; }

  .historia{ display:block; }
  .historia__texto{ margin-top:40px; }
  .tierra__fotos{ gap:10px; }
  .tierra__fotos .marco:last-child{ transform:translateY(28px); }
  .platos{ gap:30px 12px; }
  .platos-seccion__cabeza{ flex-direction:column; align-items:flex-start; }
  .menus{ grid-template-columns:1fr; }
  .menu, .menu + .menu{ padding:24px 0 26px; border-left:0; }
  .ambientes{ display:block; }
  .ambiente + .ambiente{ margin-top:48px; }
  .visitanos{ display:block; }
  .visitanos__foto{ margin-top:44px; }
  .reserva h2{ font-size:clamp(3.6rem, 18vw, 5rem); }
}

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