/* Restaurante Barahonda · su botella con raíces, el blanco y negro de sus reels y el mostaza de sus posts */
@font-face{ font-family:"Montserrat"; src:url("../fonts/montserrat-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Libre Caslon Display"; src:url("../fonts/caslon-display.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --negro:#11100e;
  --negro-2:#1b1916;
  --hueso:#f1ece3;
  --hueso-2:rgba(241,236,227,.66);
  --oro:#cf9e25;
  --oro-claro:#e2b84e;
  --tinta:#1a1815;
  --tinta-2:#625b51;
  --linea:rgba(241,236,227,.14);
  --linea-clara:rgba(26,24,21,.14);
  --serif:"Libre Caslon Display", "Times New Roman", serif;
  --sans:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --gutter:clamp(20px, 4.5vw, 72px);
  --seccion:clamp(100px, 12vw, 190px);
  --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); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{ background:var(--negro); color:var(--hueso); font:400 1.05rem/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{ list-style:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-.005em; }
h2{ font-size:clamp(2.3rem, 4.6vw, 4.6rem); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--oro); outline-offset:4px; }

.marco{ position:relative; overflow:hidden; background:var(--negro-2); }
.marco img{ width:100%; height:100%; object-fit:cover; }
.js [data-parallax]{ height:114%; will-change:transform; }

.boton{ display:inline-flex; align-items:center; justify-content:center; padding:.95em 2.1em; background:var(--oro); color:var(--negro); font-size:.82rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; transition:background .4s ease, color .4s ease; }
.boton:hover{ background:var(--hueso); }
.enlace-linea{ border-bottom:1px solid currentColor; padding-bottom:2px; }

/* ---------- su logo: la botella y las raíces en mostaza, BARAHONDA en hueso */
.logo{ display:block; width:100%; height:auto; overflow:visible; }
.logo__botella, .logo__raices, .raices__raiz{ fill:var(--oro); }
.logo__letras{ fill:var(--hueso); }
.logo__letra{ fill:var(--hueso); }
/* la pluma: cada rama de la raíz es un trazo de máscara que se va dibujando */
.pluma path{ stroke-dasharray:1 2; stroke-dashoffset:0; }
html.anima .pluma path{ stroke-dashoffset:1; visibility:hidden; }
html:not(.anima) .logo__raices, html:not(.anima) .raices__raiz{ mask:none; }

/* ---------- 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:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; transition:background .4s ease, opacity .8s ease; }
.nav.con-fondo{ background:var(--negro); box-shadow:0 1px 0 var(--linea); }
.nav__logo{ display:flex; align-items:center; gap:10px; font-size:.95rem; font-weight:600; letter-spacing:.32em; transition:opacity .4s ease; }
.nav__botella{ width:20px; height:36px; fill:var(--oro); }
.nav.sobre-portada .nav__logo{ opacity:0; pointer-events:none; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(16px, 2.2vw, 34px); }
.nav__enlaces a:not(.nav__reservar):hover{ color:var(--oro-claro); }
.nav__reservar{ padding:.8em 1.5em; background:var(--oro); color:var(--negro); font-weight:600; transition:background .4s ease; }
.nav__reservar:hover{ background:var(--hueso); }
.nav__reservar--movil, .nav__abrir{ display:none; }
html.anima:not(.ya-visto) .nav:not(.lista){ opacity:0; }

/* ---------- portada: el logo a la izquierda y su reel en blanco y negro a la derecha
   (la precarga escribe el logo en el centro de la pantalla y luego lo deja en su sitio) */
.portada{ position:relative; z-index:0; height:100svh; min-height:560px; display:grid; grid-template-columns:1fr min(calc(100svh * 9 / 16), 44vw); background:var(--negro); overflow:hidden; }
.portada__video{ grid-column:2; grid-row:1; position:relative; overflow:hidden; background:var(--negro-2); }
.portada__video video{ width:100%; height:100%; object-fit:cover; }
.portada__marca{ grid-column:1; grid-row:1; position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--nav-h) var(--gutter) 0; }
.portada__centro{ width:min(40vw, 640px); }
.portada__pie{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(24px, 4vh, 44px); display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--hueso-2); }
html.anima .portada__pie{ opacity:0; }
.portada__velo{ position:absolute; inset:0; z-index:2; background:var(--negro); pointer-events:none; }
html:not(.anima) .portada__velo, html.ya-visto .portada__velo{ display:none; }

/* ---------- la cocina */
.cocina{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(40px, 7vw, 120px); align-items:center; padding:var(--seccion) var(--gutter); background:var(--hueso); color:var(--tinta); }
.cocina__foto{ aspect-ratio:2/3; max-width:520px; }
.cocina__texto h2{ max-width:12ch; }
.cocina__texto p{ max-width:34em; margin-top:clamp(26px, 3vw, 40px); font-size:1.15rem; color:var(--tinta-2); }

/* ---------- raíces: las de su botella bajan hasta los platos */
.raices{ position:relative; background:var(--negro); padding-top:var(--seccion); }
.raices h2{ text-align:center; max-width:16ch; margin:0 auto; padding:0 var(--gutter); }
.raices__fijo{ height:100svh; display:grid; place-items:center; padding:calc(var(--nav-h) + 16px) var(--gutter) 20px; }
.raices__escena{ position:relative; width:min(100%, calc((100svh - var(--nav-h) - 36px) * 130 / 84)); aspect-ratio:130/84; }
.raices__dibujo{ position:absolute; inset:0; width:100%; height:100%; }
.plato{ position:absolute; width:17%; display:flex; flex-direction:column; gap:10px; }
.plato img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--negro-2); }
.plato figcaption{ font-size:.8rem; font-weight:500; letter-spacing:.04em; line-height:1.35; color:var(--hueso-2); }
.p-flor{ left:14.85%; top:25.95%; }
.p-queso{ left:29.38%; top:65.95%; }
.p-puerro{ left:59.15%; top:71.43%; }
.p-cigala{ left:82.92%; top:37.98%; }
.plato--izq{ transform:translate(calc(-100% - 8px), -45%); }
.plato--der{ transform:translate(8px, -45%); }
.plato--abajo{ transform:translate(-50%, 8px); }
html.anima .plato{ opacity:0; }

/* ---------- menús: Memoria y Tiempo, con sus pases contados */
.menus{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(40px, 7vw, 120px); align-items:center; padding:var(--seccion) var(--gutter); background:var(--hueso); color:var(--tinta); }
.menus__foto{ aspect-ratio:4/5; max-width:520px; }
.menus__texto{ min-width:0; }
.menus__foto video{ width:100%; height:100%; object-fit:cover; }
.menus__pestanas{ display:flex; gap:clamp(24px, 3vw, 48px); margin:clamp(30px, 4vw, 52px) 0 clamp(26px, 3vw, 40px); border-bottom:1px solid var(--linea-clara); }
.menus__pestanas button{ position:relative; padding-bottom:14px; font-family:var(--serif); font-size:clamp(1.9rem, 3vw, 2.8rem); line-height:1; color:var(--tinta-2); transition:color .4s ease; }
.menus__pestanas button::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--oro); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.menus__pestanas [aria-selected="true"]{ color:var(--tinta); }
.menus__pestanas [aria-selected="true"]::after{ transform:scaleX(1); }
.menu__precio{ font-family:var(--serif); font-size:clamp(3.4rem, 6vw, 5.6rem); line-height:1; }
.menu__pases{ display:grid; gap:14px; margin:clamp(24px, 3vw, 36px) 0; }
.pases{ display:grid; grid-template-columns:minmax(0, 15em) auto; align-items:center; gap:22px; font-size:.95rem; }
.pases__puntos{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.punto{ display:block; width:14px; height:14px; border-radius:50%; background:var(--tinta); }
.pases--0 .punto{ width:9px; height:9px; background:var(--oro); }
.pases--1 .punto{ background:var(--tinta); }
.pases--2 .punto{ background:none; border:2px solid var(--oro); }
.pases--3 .punto{ width:5px; height:5px; }
.menu__maridaje{ font-weight:500; }
.menus__nota{ margin-top:clamp(26px, 3vw, 38px); max-width:34em; font-size:.92rem; color:var(--tinta-2); }
/* sin JS se ven los dos menús seguidos; con JS, solo el de la pestaña */
.js .menu:not([data-activo]){ display:none; }
html:not(.js) .menus__pestanas{ display:none; }
html:not(.js) .menu + .menu{ margin-top:40px; }

/* ---------- la bodega: la cepa, la sala, el equipo y La Terrasse */
.bodega{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(14px, 1.6vw, 24px); padding:var(--seccion) var(--gutter); }
.bodega__cepa{ grid-column:1 / 5; grid-row:1 / 3; aspect-ratio:9/16; overflow:hidden; background:var(--negro-2); }
.bodega__cepa video{ width:100%; height:100%; object-fit:cover; }
.bodega__texto{ grid-column:6 / 13; grid-row:1; align-self:end; padding-bottom:clamp(20px, 3vw, 40px); }
.bodega__texto p{ max-width:30em; margin-top:22px; font-size:1.15rem; color:var(--hueso-2); }
.bodega__sala{ grid-column:6 / 13; grid-row:2; aspect-ratio:3/2; }
.bodega__equipo{ grid-column:1 / 8; grid-row:3; aspect-ratio:3/2; align-self:start; margin-top:clamp(40px, 6vw, 100px); }
.bodega__terrasse{ grid-column:9 / 13; grid-row:3; }
.bodega__terrasse .marco{ aspect-ratio:2/3; }
.bodega__terrasse figcaption{ margin-top:14px; font-size:.95rem; color:var(--hueso-2); }
.bodega__terrasse strong{ display:block; font-family:var(--serif); font-weight:400; font-size:1.7rem; color:var(--hueso); }

/* ---------- visítanos */
.visitanos{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(40px, 6vw, 100px); align-items:center; padding:var(--seccion) var(--gutter); background:var(--hueso); color:var(--tinta); }
.visitanos__datos{ min-width:0; }
.visitanos__foto img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.visitanos h2{ font-size:clamp(2rem, 3.4vw, 3.3rem); }
.visitanos h2 span{ display:block; margin-top:12px; font-family:var(--sans); font-size:1rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); }
.horario{ margin:clamp(28px, 3vw, 40px) 0; }
.horario div{ display:flex; justify-content:space-between; gap:24px; padding:11px 0; border-bottom:1px solid var(--linea-clara); }
.horario div:first-child{ border-top:1px solid var(--linea-clara); }
.horario dt, .horario dd{ white-space:nowrap; }
.horario dd{ color:var(--tinta-2); }
.visitanos__botones{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; margin-bottom:22px; }
.visitanos__tel{ font-size:1.2rem; font-weight:500; }
.visitanos .boton:hover{ background:var(--tinta); color:var(--hueso); }

/* ---------- pie: su logo entero */
.pie{ display:flex; flex-direction:column; align-items:center; gap:36px; padding:clamp(80px, 9vw, 130px) var(--gutter) 60px; }
.pie__logo{ width:min(300px, 70vw); }
.pie__redes{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 32px; font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--hueso-2); }
.pie__redes a:hover{ color:var(--oro-claro); }

/* 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(--hueso); }
.to-top.is-visible{ opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s, background .4s ease; }

/* ---------- tablet */
@media (max-width:1020px){
  .portada{ grid-template-columns:1fr; }
  .portada__video{ grid-column:1; }
  .portada__video::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(17,16,14,.55), rgba(17,16,14,.25) 40%, rgba(17,16,14,.8)); }
  .portada__centro{ width:min(70vw, 460px); }
  .cocina, .menus, .visitanos{ grid-template-columns:1fr; }
  .cocina__foto, .menus__foto{ width:min(100%, 420px); }
  /* los platos, debajo de las raíces, de dos en dos */
  .raices{ padding-bottom:var(--seccion); }
  .raices__fijo{ height:auto; display:block; padding:30px var(--gutter) 0; }
  .raices__escena{ width:100%; aspect-ratio:auto; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:30px 16px; }
  .raices__dibujo{ position:static; grid-column:1 / -1; height:auto; aspect-ratio:130/84; }
  .plato, .plato--izq, .plato--der, .plato--abajo{ position:static; width:auto; transform:none; }
  .plato figcaption{ font-size:.85rem; }
  .bodega{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .bodega__cepa{ grid-column:1 / 4; grid-row:1 / 3; }
  .bodega__texto{ grid-column:4 / 7; grid-row:1 / 3; align-self:center; }
  .bodega__sala{ grid-column:1 / -1; grid-row:3; }
  .bodega__equipo{ grid-column:1 / -1; grid-row:4; margin-top:0; }
  .bodega__terrasse{ grid-column:2 / 6; grid-row:5; margin-top:20px; }
}

/* ---------- móvil */
@media (max-width:760px){
  :root{ --nav-h:62px; }
  .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(--hueso); 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:22px; background:var(--negro); font-family:var(--serif); font-size:2.2rem; 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:.9rem; 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:.65em 1.1em; }
  .nav__logo span{ display:none; }

  .portada__centro{ width:min(82vw, 380px); }
  .portada__pie{ flex-direction:column-reverse; align-items:stretch; text-align:center; gap:16px; font-size:.7rem; }
  .bodega{ display:block; }
  .bodega__cepa{ width:62%; aspect-ratio:9/16; }
  .bodega__texto{ margin:34px 0 40px; padding:0; }
  .bodega__sala, .bodega__equipo{ margin-bottom:14px; }
  .bodega__terrasse{ width:78%; margin:34px 0 0 auto; }
  .pases{ grid-template-columns:1fr; gap:8px; }
  .horario div{ font-size:.95rem; }
  .horario dt{ white-space:normal; }
}

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