/* Taúlla · el rojo del molino y del pimentón, sus letras altas de la lata y la sala de 1925 */
@font-face{ font-family:"Antonio"; src:url("../fonts/antonio-400-700.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Archivo"; src:url("../fonts/archivo-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

:root{
  --pimenton:#b0301d;
  --pimenton-claro:#d4553c;
  --molino:#a23a32;
  --hueso:#f4ece0;
  --hueso-2:rgba(244,236,224,.7);
  --carbon:#1a1210;
  --carbon-2:#271c18;
  --tinta:#1a1210;
  --tinta-2:#6b5a50;
  --linea:rgba(26,18,16,.15);
  --linea-oscura:rgba(244,236,224,.16);
  --alta:"Antonio", "Arial Narrow", sans-serif;
  --sans:"Archivo", "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(--hueso); color:var(--tinta); font:400 1.06rem/1.65 var(--sans); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--pimenton); color:var(--hueso); }
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(--alta); font-weight:700; line-height:.98; text-transform:uppercase; letter-spacing:-.005em; }
h2{ font-size:clamp(2.6rem, 5.6vw, 5.8rem); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--pimenton); outline-offset:4px; }

.marco{ position:relative; overflow:hidden; background:var(--carbon-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(--pimenton); color:var(--hueso); font-weight:600; letter-spacing:.02em; transition:background .4s ease, color .4s ease; }
.boton:hover{ background:var(--hueso); color:var(--carbon); }
.enlace-linea{ border-bottom:1px solid currentColor; padding-bottom:2px; }

/* ---------- su logo */
.logo{ display:block; width:100%; height:auto; overflow:visible; fill:currentColor; }
.logo__letras{ fill:currentColor; }
.portada__logo{ width:100%; }
.logo__pimenton{ fill:var(--pimenton); }
html:not(.anima) .logo__pimenton, html.ya-visto .logo__pimenton{ display: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); color:var(--hueso); font-weight:500; transition:background .4s ease, color .4s ease, opacity .8s ease; }
.nav.con-fondo{ background:var(--carbon); box-shadow:0 1px 0 var(--linea-oscura); }
.nav__logo{ display:block; width:96px; transition:opacity .4s ease; }
.nav__marca{ width:100%; }
.nav.sobre-portada .nav__logo{ opacity:0; pointer-events:none; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(16px, 2.2vw, 32px); }
.nav__enlaces a:not(.nav__reservar):hover{ color:var(--pimenton-claro); }
.nav__reservar{ padding:.65em 1.4em; background:var(--pimenton); color:var(--hueso); font-weight:600; transition:background .4s ease, color .4s ease; }
.nav__reservar:hover{ background:var(--hueso); color:var(--carbon); }
.nav__reservar--movil, .nav__abrir{ display:none; }
html.anima:not(.ya-visto) .nav:not(.lista){ opacity:0; }

/* ---------- portada: la sala del molino y TAÚLLA de lado a lado (la precarga la llena de pimentón) */
.portada{ position:relative; z-index:0; height:100svh; min-height:560px; overflow:hidden; background:var(--carbon); color:var(--hueso); }
.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(rgba(26,18,16,.45), rgba(26,18,16,.1) 35%, rgba(26,18,16,.75)); }
.portada__velo{ position:absolute; inset:0; z-index:2; background:var(--hueso); pointer-events:none; }
html:not(.anima) .portada__velo, html.ya-visto .portada__velo{ display:none; }
.portada__marca{ position:absolute; z-index:3; left:var(--gutter); width:min(56vw, 860px, 120svh); bottom:clamp(90px, 14vh, 140px); }
html.anima:not(.ya-visto) .portada__marca{ color:var(--carbon); }
.portada__pie{ position:absolute; z-index:3; left:var(--gutter); right:var(--gutter); bottom:clamp(22px, 4vh, 40px); display:flex; align-items:center; justify-content:space-between; gap:20px; font-weight:500; }
html.anima .portada__pie{ opacity:0; }

/* ---------- el molino: la fachada se acerca hasta que estás dentro */
.molino__fijo{ position:relative; height:100svh; overflow:hidden; background:var(--carbon); color:var(--hueso); }
.molino__fuera, .molino__dentro{ position:absolute; inset:0; }
.molino__fuera img, .molino__dentro img{ width:100%; height:100%; object-fit:cover; }
.molino__fuera img{ object-position:50% 70%; }
.molino__dentro{ opacity:0; }
.molino__texto{ position:absolute; z-index:3; left:var(--gutter); right:var(--gutter); text-align:center; font-family:var(--alta); font-weight:700; text-transform:uppercase; font-size:clamp(2.2rem, 5vw, 5rem); line-height:1; text-shadow:0 2px 30px rgba(26,18,16,.5); }
.molino__texto--fuera{ top:calc(var(--nav-h) + 6vh); }
.molino__texto--dentro{ bottom:8vh; opacity:0; }
html:not(.anima) .molino__dentro{ display:none; }

/* ---------- Rodi Fernández */
.rodi{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 4fr) minmax(0, 3fr); gap:clamp(24px, 3vw, 48px); align-items:center; padding:var(--seccion) var(--gutter); background:var(--carbon); color:var(--hueso); }
.rodi__foto{ aspect-ratio:3/2; }
.rodi__texto h2{ font-size:clamp(2.4rem, 4.2vw, 4.4rem); }
.rodi__texto p{ margin-top:clamp(22px, 2.6vw, 34px); color:var(--hueso-2); }
.rodi__video{ aspect-ratio:3/4; overflow:hidden; background:var(--carbon-2); }
.rodi__video video{ width:100%; height:100%; object-fit:cover; }

/* ---------- platos: cuatro a sangre */
.platos{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); background:var(--carbon); }
.platos__foto{ aspect-ratio:1; }

/* ---------- menús y carta */
.menus{ padding:var(--seccion) var(--gutter); }
.menus__lista{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 2vw, 30px); margin-top:clamp(36px, 4vw, 60px); }
.menu{ padding:clamp(26px, 3vw, 44px); background:var(--pimenton); color:var(--hueso); }
.menu h3{ font-size:clamp(2.6rem, 4.6vw, 4.6rem); }
.menu__precio{ margin-top:6px; font-family:var(--alta); font-weight:700; font-size:clamp(1.8rem, 2.6vw, 2.6rem); }
.menu ul{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:22px; }
.menu ul li{ padding:.25em .8em; border:1px solid rgba(244,236,224,.45); font-size:.95rem; }
.menus__nota{ margin-top:18px; color:var(--tinta-2); }
.carta{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(30px, 4vw, 70px); margin-top:clamp(60px, 7vw, 110px); }
.carta__parte{ min-width:0; }
.carta h3{ font-size:clamp(2rem, 2.8vw, 2.8rem); margin-bottom:10px; }
.carta li{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:14px 0; border-bottom:1px solid var(--linea); }
.carta li span:first-child small{ display:block; margin-top:4px; font-size:.88rem; color:var(--tinta-2); }
.carta li span:last-child{ flex:none; font-weight:600; }

/* ---------- tienda */
.tienda{ padding:0 var(--gutter) var(--seccion); }
.tienda__lista{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2vw, 30px); margin:clamp(36px, 4vw, 60px) 0 30px; }
.tienda__lista figure{ aspect-ratio:4/5; margin-bottom:16px; }
.tienda__lista h3{ font-size:clamp(1.6rem, 2.2vw, 2.1rem); }
.tienda__lista p{ color:var(--tinta-2); }

/* ---------- visítanos */
.visitanos{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(40px, 6vw, 100px); padding:var(--seccion) var(--gutter); background:var(--molino); color:var(--hueso); }
.visitanos h2{ font-size:clamp(2.4rem, 4.4vw, 4.4rem); }
.visitanos h2 span{ display:block; margin-top:14px; font-family:var(--sans); font-size:1.05rem; font-weight:500; text-transform:none; }
.visitanos__datos{ min-width:0; }
.horario{ margin-bottom:clamp(28px, 3vw, 40px); }
.horario div{ display:flex; justify-content:space-between; gap:24px; padding:11px 0; border-bottom:1px solid var(--linea-oscura); }
.horario div:first-child{ border-top:1px solid var(--linea-oscura); }
.horario dt, .horario dd{ white-space:nowrap; }
.visitanos__botones{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-bottom:22px; }
.visitanos .boton{ background:var(--carbon); }
.visitanos .boton:hover{ background:var(--hueso); color:var(--carbon); }
.visitanos__tel{ font-size:1.2rem; font-weight:600; }

/* ---------- pie */
.pie{ display:flex; flex-direction:column; align-items:center; gap:30px; padding:clamp(70px, 8vw, 110px) var(--gutter) 60px; background:var(--carbon); color:var(--hueso); }
.pie__logo{ width:min(280px, 60vw); }
.pie__redes{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 32px; color:var(--hueso-2); }
.pie__redes a:hover{ color:var(--pimenton-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(--pimenton); color:var(--hueso); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s, background .4s ease; }
.to-top:hover{ background:var(--carbon); }
.to-top.is-visible{ opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s, background .4s ease; }

/* ---------- tablet */
@media (max-width:1020px){
  .rodi{ grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); }
  .rodi__texto{ grid-column:1 / -1; grid-row:1; }
  .platos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .carta{ grid-template-columns:1fr; }
  .visitanos{ grid-template-columns:1fr; }
}

/* ---------- 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:currentColor; 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:18px; background:var(--carbon); font-family:var(--alta); font-weight:700; text-transform:uppercase; font-size:2.4rem; 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-weight:600; text-transform:none; font-size:1.05rem; padding:.85em 2.2em; }
  .nav__reservar--movil{ display:inline-flex; margin-left:auto; position:relative; z-index:2; padding:.5em 1.1em; }
  .nav__logo{ width:80px; }

  .portada__marca{ width:auto; right:var(--gutter); bottom:200px; }
  .portada__pie{ flex-direction:column-reverse; align-items:stretch; text-align:center; gap:14px; }
  .molino__fuera img{ object-position:53% 70%; }
  .rodi{ display:block; }
  .rodi__texto{ margin-bottom:30px; }
  .rodi__video{ width:70%; margin:16px 0 0 auto; }
  .menus__lista, .tienda__lista{ grid-template-columns:1fr; }
  .tienda__lista li{ display:grid; grid-template-columns:40% 1fr; gap:4px 16px; align-items:center; }
  .tienda__lista figure{ grid-row:1 / 3; margin:0; }
  .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; }
}