/* Vacania Burger · propuesta (10-nov-2026). Negro, el rojo de su neón y el blanco de su logo.
   League Gothic (la gótica condensada de los carteles americanos de los años 20, como los nombres de su carta) + Libre Franklin. */
@font-face{ font-family:'League Gothic'; src:url(../fonts/league-gothic.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Libre Franklin'; src:url(../fonts/libre-franklin.woff2) format('woff2'); font-weight:100 900; font-display:swap; }

:root{
  --negro:#0d0c0c; --carbon:#161414; --rojo:#d71f26; --rojo-osc:#a5141a; --hueso:#f2ece3; --gris:rgba(242,236,227,.66); --linea:rgba(242,236,227,.14);
  --gotica:'League Gothic', 'Arial Narrow', sans-serif; --sans:'Libre Franklin', system-ui, sans-serif;
  --nav-h:72px; --gutter:clamp(18px, 4vw, 56px); --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--negro); color:var(--hueso); font-family:var(--sans); font-size:16px; line-height:1.55; overflow-x:clip; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
h2{ font-family:var(--gotica); text-transform:uppercase; font-size:clamp(3.4rem, 8vw, 7.6rem); line-height:.88; letter-spacing:.005em; }
p{ margin:0; }
::selection{ background:var(--rojo); color:#fff; }
:focus-visible{ outline:2px solid var(--rojo); outline-offset:3px; }

/* ---------- botones (el acabado de Almo) */
.boton{ display:inline-flex; align-items:center; justify-content:center; padding:1.05em 2.2em; border:1px solid var(--hueso); background:var(--hueso); color:var(--negro); font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; transition:background .5s ease, color .5s ease, border-color .5s ease; }
.boton:hover{ background:transparent; color:var(--hueso); }
.boton--rojo{ background:var(--rojo); border-color:var(--rojo); color:#fff; }
.boton--rojo:hover{ background:transparent; color:#fff; border-color:#fff; }
.boton--claro{ background:transparent; border-color:rgba(242,236,227,.7); color:var(--hueso); }
.boton--claro:hover{ background:var(--hueso); border-color:var(--hueso); color:var(--negro); }

/* ---------- logo */
.logo{ display:block; height:auto; fill:currentColor; }
.logo path{ fill-rule:evenodd; }
.toro{ display:block; fill:currentColor; }

/* ---------- entrada: el toro de su neón se dibuja en rojo, se enciende y viaja a la portada */
.entrada{ display:none; }
.anima.intro .entrada{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--negro); }
.entrada__logo{ width:min(62vw, 360px); color:var(--hueso); transform-origin:0 0; }
.entrada__logo .logo__relleno{ fill:var(--rojo); fill-opacity:0; }
.entrada__logo .logo__toro path{ fill:none; stroke:var(--rojo); stroke-width:3; stroke-linejoin:round; stroke-dasharray:1 1; stroke-dashoffset:1; }
.entrada__logo .logo__vacania, .entrada__logo .logo__burger{ clip-path:inset(0 100% 0 0); }
.anima.intro, .anima.intro body{ overflow:hidden; overscroll-behavior:none; }
.anima.intro body{ touch-action:none; }
.anima.intro .portada__marca, .anima.intro .nav{ opacity:0; }

/* ---------- nav: siempre a la vista, con Pedir fuera de la hamburguesa */
.nav{ position:fixed; inset:0 0 auto; z-index:80; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 var(--gutter); transition:background .5s ease, box-shadow .5s ease; }
.nav:not(.sobre-portada){ background:rgba(13,12,12,.94); box-shadow:0 1px 0 var(--linea); }
.nav.sobre-portada{ background:linear-gradient(rgba(0,0,0,.55), transparent); }
.nav__logo{ color:var(--hueso); transition:color .4s ease; }
.nav__logo:hover{ color:var(--rojo); }
.nav__toro{ width:68px; height:auto; }
.nav__enlaces{ display:flex; gap:clamp(18px, 2.6vw, 40px); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.nav__enlaces a{ position:relative; padding:6px 0; }
.nav__enlaces a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rojo); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.nav__enlaces a:hover::after{ transform:scaleX(1); }
.nav__acciones{ display:flex; align-items:center; gap:14px; }
.nav__pedir{ padding:.85em 1.8em; }
.nav__abrir{ display:none; width:44px; height:44px; border:0; background:none; color:var(--hueso); cursor:pointer; position:relative; }
.nav__abrir span{ position:absolute; left:10px; right:10px; height:2px; background:currentColor; transition:transform .4s var(--ease), top .4s var(--ease); }
.nav__abrir span:first-child{ top:17px; } .nav__abrir span:last-child{ top:25px; }
.nav--abierta .nav__abrir span:first-child{ top:21px; transform:rotate(45deg); }
.nav--abierta .nav__abrir span:last-child{ top:21px; transform:rotate(-45deg); }
.menu{ display:none; }

/* ---------- portada */
.portada{ position:relative; height:100svh; min-height:560px; overflow:hidden; background:#000; }
.portada__fotos, .portada__fotos picture{ position:absolute; inset:0; }
.portada__fotos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease; }
.portada__fotos img[data-activa]{ opacity:1; }
.portada::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,0) 62%), linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0) 40%); pointer-events:none; }
.portada__contenido{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:clamp(22px, 4vh, 40px); padding:calc(var(--nav-h) + 20px) var(--gutter) clamp(36px, 8vh, 80px); }
.portada__marca{ width:clamp(240px, 28vw, 440px); color:var(--hueso); }
.portada__logo{ width:100%; }
.portada__pie{ display:flex; flex-wrap:wrap; align-items:center; gap:22px 34px; }
.portada__lema{ font-family:var(--gotica); text-transform:uppercase; font-size:clamp(2.1rem, 3.6vw, 3.4rem); line-height:.95; }

/* ---------- la plancha (fijada, tres fotos) */
.plancha{ background:var(--negro); }
.plancha__fijo{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(28px, 5vw, 80px); align-items:center; min-height:100svh; padding:calc(var(--nav-h) + 24px) var(--gutter) 40px; }
.plancha h2{ color:var(--rojo); margin-bottom:clamp(26px, 5vh, 52px); }
.plancha__frases{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.plancha__frases li{ font-family:var(--gotica); text-transform:uppercase; font-size:clamp(1.8rem, 3.2vw, 3rem); line-height:1; color:rgba(242,236,227,.28); padding-left:22px; border-left:3px solid transparent; transition:color .5s ease, border-color .5s ease; }
.plancha__frases li[data-activa]{ color:var(--hueso); border-left-color:var(--rojo); }
.plancha__fotos{ position:relative; aspect-ratio:3/4; max-height:calc(100svh - var(--nav-h) - 64px); justify-self:center; width:100%; max-width:560px; overflow:hidden; background:#000; }
.plancha__fotos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.js .plancha__fotos img + img{ clip-path:inset(0 0 100% 0); }
html:not(.anima) .plancha__fotos img + img{ clip-path:none; }
html:not(.anima) .plancha__frases li{ color:var(--hueso); }

/* ---------- la carta */
.carta{ background:var(--hueso); color:var(--negro); padding:clamp(80px, 12vh, 140px) var(--gutter); }
.carta__cuerpo{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(30px, 6vw, 96px); max-width:1400px; margin:0 auto; }
.carta__lado{ position:relative; }
.carta__foto{ position:sticky; top:calc(var(--nav-h) + 24px); aspect-ratio:3/4; overflow:hidden; background:#000; }
.carta__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.carta__foto img[data-activa]{ opacity:1; }
.carta h2{ margin-bottom:30px; }
.carta__pestanas{ position:sticky; top:var(--nav-h); z-index:5; display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; background:var(--hueso); padding:12px 0; margin-bottom:12px; border-bottom:1px solid rgba(13,12,12,.14); }
.carta__pestanas::-webkit-scrollbar{ display:none; }
.carta__pestanas button{ flex:none; scroll-snap-align:start; border:1px solid transparent; background:none; padding:.75em 1.3em; font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(13,12,12,.6); cursor:pointer; transition:color .3s ease, border-color .3s ease, background .3s ease; }
.carta__pestanas button:hover{ color:var(--negro); }
.carta__pestanas button[aria-selected="true"]{ background:var(--negro); color:var(--hueso); }
.carta__panel h3{ font-family:var(--gotica); text-transform:uppercase; font-size:2rem; color:var(--rojo); margin:26px 0 6px; }
.js .carta__panel{ display:none; }
.js .carta__panel[data-activo]{ display:block; }
.js .carta__panel h3{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.carta__panel ul{ list-style:none; margin:0; padding:0; }
.carta__panel li{ padding:20px 0 22px; border-bottom:1px solid rgba(13,12,12,.13); }
.plato__fila{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.plato__fila h4{ font-family:var(--gotica); text-transform:uppercase; font-size:clamp(1.8rem, 2.6vw, 2.4rem); line-height:1; }
.plato__precio{ font-weight:700; font-size:1.05rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.carta__panel li p{ margin-top:6px; max-width:58ch; font-size:.95rem; color:rgba(13,12,12,.72); }
.carta__pie{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:34px; font-size:.95rem; color:rgba(13,12,12,.72); }

/* ---------- palmarés */
.palmares{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#000; }
.palmares__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.palmares::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 34%, rgba(0,0,0,0) 62%); }
.palmares__cuerpo{ position:relative; z-index:2; width:100%; padding:var(--nav-h) var(--gutter) clamp(40px, 8vh, 80px); }
.palmares h2{ margin-bottom:clamp(24px, 4vh, 40px); }
.palmares__lista{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:clamp(16px, 2vw, 30px); }
.palmares__lista li{ border-top:3px solid var(--rojo); padding-top:14px; display:flex; flex-direction:column; gap:6px; }
.palmares__lista b{ font-family:var(--gotica); font-weight:400; text-transform:uppercase; font-size:clamp(2rem, 2.8vw, 2.8rem); line-height:.95; }
.palmares__lista span{ font-size:.9rem; line-height:1.35; color:var(--gris); }
.palmares__lista em{ font-style:normal; font-weight:700; font-size:.9rem; color:var(--hueso); }

/* ---------- burger & rap */
.local{ padding:clamp(90px, 14vh, 160px) var(--gutter); background:var(--negro); }
.local__cabeza{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 40px; margin-bottom:clamp(30px, 6vh, 60px); }
.local__cabeza h2 span{ color:var(--rojo); }
.local__cabeza p{ max-width:34ch; font-size:1.05rem; color:var(--gris); }
.local__mosaico{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-rows:clamp(110px, 12vw, 190px); gap:clamp(8px, 1vw, 14px); }
.local__mosaico img{ width:100%; height:100%; object-fit:cover; }
.local__f1{ grid-column:1 / 5; grid-row:1 / 4; }
.local__f2{ grid-column:5 / 10; grid-row:1 / 3; }
.local__f3{ grid-column:5 / 10; grid-row:3 / 5; }
.local__f4{ grid-column:10 / 13; grid-row:1 / 3; }
.local__f5{ grid-column:10 / 13; grid-row:3 / 5; }
.local__mosaico .local__f1{ grid-row:1 / 5; }

/* ---------- documental */
.documental{ position:relative; min-height:78svh; display:flex; align-items:center; overflow:hidden; background:#000; }
.documental__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.documental__cuerpo{ position:relative; z-index:2; padding:var(--nav-h) var(--gutter); display:flex; flex-direction:column; align-items:flex-start; gap:30px; max-width:980px; }

/* ---------- visítanos */
.visitanos{ background:var(--rojo); color:#fff; padding:clamp(90px, 14vh, 150px) var(--gutter); min-height:calc(100svh - 230px); display:flex; align-items:center; }
.visitanos__cuerpo{ width:100%; }
.visitanos__cuerpo{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:30px clamp(30px, 6vw, 96px); align-items:start; }
.visitanos h2{ color:var(--negro); }
.visitanos__datos{ margin:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:30px 40px; }
.visitanos__datos dt{ font-weight:700; margin-bottom:6px; color:var(--negro); }
.visitanos__datos dd{ margin:0; font-size:1.1rem; line-height:1.45; }
.visitanos__datos a{ border-bottom:1px solid rgba(255,255,255,.55); }
.visitanos__botones{ grid-column:2; display:flex; flex-wrap:wrap; gap:14px; }
.visitanos .boton--rojo{ background:var(--negro); border-color:var(--negro); }
.visitanos .boton--rojo:hover{ background:transparent; border-color:#fff; }
.visitanos .boton--claro{ border-color:#fff; color:#fff; }
.visitanos .boton--claro:hover{ background:#fff; color:var(--rojo); }

/* ---------- pie */
.pie{ display:flex; flex-wrap:wrap; align-items:center; gap:30px 60px; padding:60px var(--gutter) 70px; background:var(--negro); color:var(--gris); font-size:.92rem; }
.pie__logo{ width:120px; color:var(--hueso); }
.pie__datos{ display:grid; gap:8px; }
.pie a{ color:var(--hueso); }
.pie a:hover{ color:var(--rojo); }
.pie__legal{ color:rgba(242,236,227,.45); }

/* ---------- subir */
.to-top{ position:fixed; right:18px; bottom:18px; z-index:70; width:46px; height:46px; border:0; border-radius:50%; display:grid; place-items:center; background:var(--rojo); color:#fff; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .4s ease, visibility .4s ease, transform .4s var(--ease); }
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }

/* ---------- móvil */
@media (max-width: 960px){
  .nav__enlaces{ display:none; }
  .nav__abrir{ display:block; }
  .nav__toro{ width:58px; }
  .menu{ display:flex; flex-direction:column; justify-content:center; gap:6px; position:fixed; inset:0; z-index:-1; padding:var(--nav-h) var(--gutter) 40px; background:var(--negro); opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s ease; }
  .menu > a{ font-family:var(--gotica); text-transform:uppercase; font-size:3.4rem; line-height:1.05; }
  .menu > a:hover{ color:var(--rojo); }
  .menu__datos{ margin-top:30px; color:var(--gris); font-size:.95rem; }
  .nav--abierta .menu{ opacity:1; visibility:visible; }
  .nav--abierta{ background:var(--negro); }
  .plancha__fijo{ grid-template-columns:minmax(0, 1fr); align-content:start; gap:22px; padding-top:calc(var(--nav-h) + 18px); }
  .plancha h2{ margin-bottom:16px; }
  .plancha__frases{ gap:10px; }
  .plancha__frases li{ font-size:1.55rem; padding-left:14px; }
  .plancha__fotos{ order:-1; aspect-ratio:4/3; max-height:46svh; max-width:none; }
  .carta__cuerpo{ grid-template-columns:minmax(0, 1fr); gap:26px; }
  .carta__foto{ position:relative; top:0; aspect-ratio:16/10; }
  .carta__lado{ order:-1; }
  .palmares__lista{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .palmares__lista li:last-child{ grid-column:1 / -1; }
  .palmares{ min-height:auto; padding-top:56vw; }
  .palmares__foto{ height:72vw; bottom:auto; }
  .palmares::after{ background:linear-gradient(0deg, #000 0%, #000 calc(100% - 72vw), rgba(0,0,0,.4) calc(100% - 30vw), rgba(0,0,0,0) 100%); }
  .local__mosaico{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:44vw; }
  .local__mosaico img{ grid-column:auto !important; grid-row:auto !important; }
  .local__mosaico .local__f1{ grid-row:span 2 !important; }
  .local__mosaico .local__f2{ grid-column:1 / -1 !important; order:3; }
  .visitanos__cuerpo{ grid-template-columns:minmax(0, 1fr); }
  .visitanos__botones{ grid-column:auto; }
  .visitanos__datos{ grid-template-columns:1fr; gap:22px; }
  .pie{ padding-bottom:96px; }
}
@media (max-width: 760px){
  :root{ --nav-h:64px; }
  .nav{ gap:10px; }
  .nav__pedir{ padding:.8em 1.4em; }
  .portada{ background:var(--negro); }
  .portada__fotos{ bottom:auto; height:62%; }
  .portada::after{ background:linear-gradient(0deg, var(--negro) 38%, rgba(13,12,12,0) 58%), linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 22%); }
  .portada__contenido{ justify-content:flex-end; align-items:center; text-align:center; gap:20px; }
  .portada__pie{ flex-direction:column; gap:18px; }
  .portada__marca{ width:min(56vw, 240px); }
  .portada__lema{ font-size:2.3rem; }
  .carta{ padding-top:70px; }
  .carta__pie{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
}