/* Cosafina · su aro rojo de pincel (que aquí es la rosquilla de la marinera), el gris de su logo y el mostaza de sus sillas */
@font-face{ font-family:"Marcellus"; src:url("../fonts/marcellus-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Work Sans"; src:url("../fonts/work-sans-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

:root{
  --carbon:#222120;
  --carbon-2:#2d2b29;
  --crema:#f3eee6;
  --crema-2:rgba(243,238,230,.7);
  --rojo:#a3122a;
  --rojo-claro:#d23a4f;
  --mostaza:#d6a53a;
  --tinta:#222120;
  --tinta-2:#675f57;
  --linea:rgba(34,33,32,.14);
  --linea-oscura:rgba(243,238,230,.16);
  --serif:"Marcellus", Georgia, serif;
  --sans:"Work Sans", "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(--crema); color:var(--tinta); font:400 1.06rem/1.65 var(--sans); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--rojo); color:var(--crema); }
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; }
h2{ font-size:clamp(2.4rem, 4.8vw, 4.8rem); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--rojo); 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(--rojo); color:var(--crema); font-weight:600; letter-spacing:.03em; transition:background .4s ease, color .4s ease; }
.boton:hover{ background:var(--crema); color:var(--carbon); }
.enlace-linea{ border-bottom:1px solid currentColor; padding-bottom:2px; }

/* ---------- su logo: el aro en rojo, el nombre y RESTAURANTE en crema */
.logo{ display:block; width:100%; height:auto; overflow:visible; fill:var(--crema); }
.logo__aro{ fill:var(--rojo); }
.logo__nombre{ fill:var(--crema); }
.pincel{ stroke-dasharray:1 2; stroke-dashoffset:0; }
html.anima .pincel{ stroke-dashoffset:1; }
html:not(.anima) .logo__aro{ mask:none; }
html.anima .portada__logo .logo__restaurante{ opacity:0; }

/* ---------- 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(--crema); font-weight:500; transition:background .4s ease, opacity .8s ease; }
.nav.con-fondo{ background:var(--carbon); box-shadow:0 1px 0 var(--linea-oscura); }
.nav__logo{ display:block; width:132px; 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, 34px); }
.nav__enlaces a:not(.nav__reservar):hover{ color:var(--mostaza); }
.nav__reservar{ padding:.65em 1.4em; background:var(--rojo); color:var(--crema); font-weight:600; transition:background .4s ease, color .4s ease; }
.nav__reservar:hover{ background:var(--crema); color:var(--carbon); }
.nav__reservar--movil, .nav__abrir{ display:none; }
html.anima:not(.ya-visto) .nav:not(.lista){ opacity:0; }

/* ---------- portada: el salón y su logo en el centro (la precarga lo pinta ahí mismo) */
.portada{ position:relative; z-index:0; height:100svh; min-height:560px; overflow:hidden; background:var(--carbon); color:var(--crema); }
.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:radial-gradient(ellipse at center, rgba(34,33,32,.72), rgba(34,33,32,.45) 70%); }
.portada__velo{ position:absolute; inset:0; z-index:2; background:var(--carbon); pointer-events:none; }
html:not(.anima) .portada__velo, html.ya-visto .portada__velo{ display:none; }
.portada__centro{ position:absolute; z-index:3; left:50%; top:50%; width:min(62vw, 820px); transform:translate(-50%, -50%); }
.portada__pie{ position:absolute; z-index:3; left:var(--gutter); right:var(--gutter); bottom:clamp(22px, 4vh, 40px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; color:var(--crema-2); }
.portada__pie p:last-child{ text-align:right; }
html.anima .portada__pie{ opacity:0; }

/* ---------- sabores de la tierra: el aro es la rosquilla y se monta el aperitivo dentro */
.aperitivos{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(40px, 6vw, 100px); align-items:center; padding:var(--seccion) var(--gutter); }
.aperitivos__texto p{ max-width:28em; margin-top:clamp(20px, 2.4vw, 30px); font-size:1.15rem; color:var(--tinta-2); }
.aperitivos__botones{ display:grid; margin-top:clamp(30px, 3.4vw, 50px); border-top:1px solid var(--linea); }
.aperitivos__botones button{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:16px 4px; border-bottom:1px solid var(--linea); font-family:var(--serif); font-size:clamp(1.5rem, 2.2vw, 2.1rem); text-align:left; color:var(--tinta-2); transition:color .3s ease, padding .4s var(--ease); }
.aperitivos__botones button span:last-child{ font-family:var(--sans); font-size:1rem; font-weight:600; }
.aperitivos__botones button:hover{ color:var(--tinta); }
.aperitivos__botones button[aria-pressed="true"]{ color:var(--rojo); padding-left:18px; }
.rosquilla{ position:relative; aspect-ratio:1; width:min(100%, 640px); justify-self:center; }
.rosquilla__aro{ position:absolute; inset:0; width:100%; height:100%; fill:var(--rojo); }
.rosquilla__capas{ position:absolute; inset:24%; display:grid; place-items:center; }
.aperitivo{ grid-area:1 / 1; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.aperitivo li{ font-family:var(--serif); font-size:clamp(1.25rem, 2vw, 1.9rem); line-height:1.15; }
.aperitivo li:last-child{ color:var(--tinta-2); font-size:clamp(1rem, 1.4vw, 1.25rem); font-family:var(--sans); }
.js .aperitivo:not([data-activo]){ visibility:hidden; }
html:not(.js) .rosquilla{ display:none; }

/* ---------- nuestras creaciones */
.creaciones{ padding:0 var(--gutter) var(--seccion); }
.creaciones__lista{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(18px, 2vw, 30px); margin-top:clamp(36px, 4vw, 60px); }
.creacion .marco{ aspect-ratio:4/5; }
.creacion .marco img{ transition:transform 1.2s var(--ease); }
.creacion:hover .marco img{ transform:scale(1.05); }
.creacion figcaption{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; margin-top:14px; }
.creacion figcaption span:first-child{ font-family:var(--serif); font-size:1.25rem; line-height:1.25; }
.creacion figcaption span:last-child{ flex:none; font-weight:600; }
.creacion:nth-child(3n+2){ margin-top:clamp(40px, 6vw, 100px); }

/* ---------- la carta, por partes */
.carta{ padding:var(--seccion) var(--gutter); background:var(--carbon); color:var(--crema); }
.carta__pestanas{ display:flex; flex-wrap:wrap; gap:10px; margin:clamp(30px, 4vw, 50px) 0 clamp(26px, 3vw, 40px); }
.carta__pestanas button{ padding:.5em 1.2em; border:1px solid var(--linea-oscura); font-weight:500; transition:background .3s ease, color .3s ease, border-color .3s ease; }
.carta__pestanas button:hover{ border-color:var(--mostaza); }
.carta__pestanas [aria-selected="true"]{ background:var(--mostaza); border-color:var(--mostaza); color:var(--carbon); }
.carta__panel h3{ font-size:clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom:14px; }
.carta__panel ul{ columns:2; column-gap:clamp(40px, 6vw, 100px); }
.carta__panel li{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:14px 0; border-bottom:1px solid var(--linea-oscura); break-inside:avoid; }
.carta__panel li span:last-child{ flex:none; font-weight:600; color:var(--mostaza); }
.js .carta__panel:not([data-activo]){ display:none; }
html:not(.js) .carta__pestanas{ display:none; }
html:not(.js) .carta__panel + .carta__panel{ margin-top:50px; }
.carta__nota{ margin-top:30px; color:var(--crema-2); }

/* ---------- el local */
.local{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 4fr); gap:clamp(14px, 1.6vw, 24px); align-items:end; padding:var(--seccion) var(--gutter) 0; }
.local__mesa{ aspect-ratio:1; }
.local__arriba{ aspect-ratio:4/5; }
.local__texto{ grid-column:1 / -1; font-family:var(--serif); font-size:clamp(1.8rem, 3vw, 3rem); }

/* ---------- visítanos */
.visitanos{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(40px, 6vw, 100px); padding:var(--seccion) var(--gutter); }
.visitanos h2{ font-size:clamp(2.2rem, 4vw, 4rem); }
.visitanos h2 span{ display:block; margin-top:14px; font-family:var(--sans); font-size:1.05rem; color:var(--tinta-2); }
.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); }
.horario div:first-child{ border-top:1px solid var(--linea); }
.horario dt, .horario dd{ white-space:nowrap; }
.horario dd{ color:var(--tinta-2); }
.visitanos__botones{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-bottom:22px; }
.visitanos__tel{ font-size:1.2rem; font-weight:600; }
.visitanos .boton:hover{ background:var(--carbon); color:var(--crema); }

/* ---------- 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(--crema); }
.pie__logo{ width:min(320px, 70vw); }
.pie__redes{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 32px; color:var(--crema-2); }
.pie__redes a:hover{ color:var(--mostaza); }

/* 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(--rojo); color:var(--crema); 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){
  .aperitivos, .visitanos{ grid-template-columns:1fr; }
  .creaciones__lista{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .creacion:nth-child(3n+2){ margin-top:0; }
  .creacion:nth-child(even){ margin-top:clamp(30px, 5vw, 60px); }
  .carta__panel ul{ columns:1; }
}

/* ---------- 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:20px; background:var(--carbon); font-family:var(--serif); font-size:2.2rem; 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: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:104px; }

  .portada__centro{ width:88vw; }
  .portada__pie{ grid-template-columns:1fr; text-align:center; gap:12px; }
  .portada__pie p:last-child{ text-align:center; }
  .portada__pie .boton{ order:-1; }
  /* en móvil el aro va entre el texto y los botones, para ver lo que se monta mientras se elige */
  .aperitivos{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .aperitivos__texto{ display:contents; }
  .rosquilla{ order:1; width:min(62vw, 300px); align-self:center; margin:22px 0 4px; }
  .aperitivo li{ font-size:1.05rem; }
  .aperitivo li:last-child{ font-size:.85rem; }
  .aperitivos__botones{ order:2; margin-top:10px; }
  .aperitivos__botones button{ padding:12px 4px; }
  .creaciones__lista{ grid-template-columns:1fr; }
  .creacion:nth-child(even){ margin-top:0; }
  .local{ grid-template-columns:1fr; }
  .local__arriba{ width:80%; justify-self:end; }
  /* pestañas fijas bajo la nav: se cambia de parte sin volver a subir */
  .carta__pestanas{ position:sticky; top:var(--nav-h); z-index:5; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:28px calc(var(--gutter) * -1) 24px; padding:12px var(--gutter); background:var(--carbon); box-shadow:0 1px 0 var(--linea-oscura); }
  .carta__pestanas::-webkit-scrollbar{ display:none; }
  .carta__pestanas button{ flex:0 0 auto; }
  .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; }
}