/* La Niña Guindilla · el crema de su cartel, el ocre de sus letras y el rojo de la guindilla que deja caer la niña */
@font-face{ font-family:"Gelasio"; src:url("../fonts/gelasio-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Hanken Grotesk"; src:url("../fonts/hanken-grotesk-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

:root{
  --cartel:#f0d6ac;
  --crema:#f6e9d2;
  --ocre:#b8862b;
  --ocre-osc:#8a6216;
  --rojo:#b02b21;
  --verde:#4f7a2a;
  --tinta:#3a2418;
  --tinta-2:#6f5644;
  --linea:rgba(58,36,24,.16);
  --serif:"Gelasio", Georgia, serif;
  --sans:"Hanken Grotesk", "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.07rem/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:500; line-height:1.08; }
h2{ font-size:clamp(2.3rem, 4.4vw, 4.4rem); }
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(--cartel); }
.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; border-radius:999px; background:var(--rojo); color:var(--crema); font-weight:600; transition:background .4s ease, color .4s ease; }
.boton:hover{ background:var(--tinta); }
.enlace-linea{ border-bottom:1px solid currentColor; padding-bottom:2px; }

/* ---------- su cartel: la niña, las letras ocres y la guindilla */
.logo{ display:block; width:100%; height:auto; overflow:visible; }
.logo__la-nina, .logo__guindilla-txt{ fill:var(--ocre); }
.logo__guindilla{ fill:var(--rojo); }
.logo__rabito{ fill:none; stroke:var(--verde); stroke-width:5; stroke-linecap:round; }
.logo__nina{ -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 48%, #000 78%, transparent 100%); mask-image:radial-gradient(ellipse 72% 70% at 50% 48%, #000 78%, transparent 100%); }
html.anima:not(.ya-visto) .portada__logo .logo__nina, html.anima:not(.ya-visto) .portada__logo .logo__la-nina{ 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); font-weight:500; transition:background .4s ease, opacity .8s ease; }
.nav.con-fondo{ background:var(--crema); box-shadow:0 1px 0 var(--linea); }
.nav__logo{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.2rem; font-weight:600; transition:opacity .4s ease; }
.nav__guindilla{ width:18px; height:40px; }
.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(--rojo); }
.nav__reservar{ padding:.6em 1.4em; border-radius:999px; background:var(--rojo); color:var(--crema); font-weight:600; transition:background .4s ease; }
.nav__reservar:hover{ background:var(--tinta); }
.nav__reservar--movil, .nav__abrir{ display:none; }
html.anima:not(.ya-visto) .nav:not(.lista){ opacity:0; }

/* ---------- portada: su cartel en grande y la puerta roja */
.portada{ position:relative; z-index:0; min-height:100svh; display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(30px, 5vw, 80px); align-items:center; padding:calc(var(--nav-h) + 10px) var(--gutter) 40px; background:var(--cartel); }
.portada__cartel h1{ width:min(100%, calc((100svh - var(--nav-h) - 60px) * 660 / 795)); margin:0 auto; }
.portada__lado{ display:flex; flex-direction:column; gap:22px; }
.portada__puerta{ aspect-ratio:4/5; max-height:62svh; }
.portada__botones{ display:flex; flex-wrap:wrap; gap:14px; }
.portada__lema{ font-family:var(--serif); font-size:clamp(1.8rem, 2.8vw, 2.8rem); line-height:1.1; }
html.anima:not(.ya-visto) .portada__lado{ opacity:0; }

/* ---------- cuatro menús al año: el dial de las estaciones, con la guindilla de aguja */
.menus{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(40px, 6vw, 100px); align-items:start; padding:var(--seccion) var(--gutter); }
.menus__cabeza{ position:sticky; top:calc(var(--nav-h) + 30px); }
.menus__cabeza h2{ max-width:12ch; }
.dial{ position:relative; width:min(100%, 380px); aspect-ratio:1; margin-top:clamp(30px, 4vw, 54px); }
.dial__botones{ position:absolute; inset:0; }
.dial__aro{ position:absolute; inset:0; width:100%; height:100%; }
.dial__aro circle{ fill:none; stroke:var(--ocre); stroke-width:1.5; }
.dial__aro .dial__dentro{ stroke-dasharray:2 5; }
.dial__aguja{ position:absolute; left:50%; top:50%; width:13%; height:42%; transform-origin:50% 0; transform:translate(-50%, 0) rotate(var(--giro, 0deg)); transition:transform 1.1s cubic-bezier(.34,1.45,.5,1); }
.dial__estacion{ position:absolute; padding:.35em .9em; border-radius:999px; font-family:var(--serif); font-size:1.15rem; background:var(--crema); transition:background .3s ease, color .3s ease; }
.dial__estacion:hover{ color:var(--rojo); }
.dial__estacion[aria-pressed="true"]{ background:var(--rojo); color:var(--crema); }
.dial__estacion--primavera{ left:50%; top:0; transform:translate(-50%, -50%); }
.dial__estacion--verano{ left:100%; top:50%; transform:translate(-62%, -50%); }
.dial__estacion--otono{ left:50%; top:100%; transform:translate(-50%, -50%); }
.dial__estacion--invierno{ left:0; top:50%; transform:translate(-38%, -50%); }
.estacion{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 5fr); gap:clamp(24px, 3vw, 44px); align-items:start; }
.js .estacion:not([data-activo]){ display:none; }
html:not(.js) .estacion + .estacion{ margin-top:60px; }
html:not(.js) .dial{ display:none; }
.estacion__foto{ aspect-ratio:4/5; }
.estacion__texto{ min-width:0; }
.menus__estaciones{ min-width:0; }
.estacion h3{ font-size:clamp(1.8rem, 2.6vw, 2.5rem); }
.estacion__precio{ margin-top:6px; font-weight:600; color:var(--rojo); }
.estacion ol{ margin-top:22px; counter-reset:pase; }
.estacion li{ counter-increment:pase; display:grid; grid-template-columns:2.2em 1fr; gap:6px; padding:12px 0; border-bottom:1px solid var(--linea); }
.estacion li::before{ content:counter(pase); font-family:var(--serif); color:var(--ocre-osc); }

/* ---------- la casa */
.casa{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(14px, 1.6vw, 24px); padding:var(--seccion) var(--gutter); background:var(--cartel); }
.casa__texto{ grid-column:1 / 7; align-self:center; }
.casa__texto p{ max-width:30em; margin-top:clamp(22px, 2.6vw, 34px); font-size:1.15rem; color:var(--tinta-2); }
.casa__cocina{ grid-column:7 / 13; aspect-ratio:3/2; }
.casa__comedor{ grid-column:2 / 7; aspect-ratio:4/5; }
.casa__mesas{ grid-column:8 / 12; aspect-ratio:4/5; margin-top:clamp(40px, 6vw, 100px); }

/* ---------- 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; font-weight:500; 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{ margin-bottom:14px; }
.visitanos__nota{ margin-bottom:22px; color:var(--tinta-2); }

/* ---------- pie: su cartel entero */
.pie{ display:flex; flex-direction:column; align-items:center; gap:28px; padding:clamp(70px, 8vw, 110px) var(--gutter) 60px; background:var(--cartel); }
.pie__logo{ width:min(240px, 60vw); }
.pie__redes{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 32px; color:var(--tinta-2); }
.pie__redes a:hover{ color:var(--rojo); }

/* 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(--tinta); }
.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; padding-bottom:60px; }
  .portada__cartel h1{ width:min(76vw, 520px); }
  .portada__puerta{ max-height:none; width:min(100%, 520px); }
  .menus{ grid-template-columns:1fr; }
  .menus__cabeza{ position:static; }
  .dial{ margin-left:auto; margin-right:auto; }
  .casa__texto{ grid-column:1 / -1; }
  .casa__cocina{ grid-column:1 / -1; }
  .casa__comedor{ grid-column:1 / 7; }
  .casa__mesas{ grid-column:7 / 13; }
  .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:var(--tinta); 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(--crema); 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.2em; }
  .nav__logo span{ display:none; }

  .portada__cartel h1{ width:86vw; }
  .dial{ width:min(78vw, 320px); margin:40px auto 30px; }
  .estacion{ grid-template-columns:1fr; }
  .estacion__foto{ width:76%; }
  .casa{ display:block; }
  .casa__cocina, .casa__comedor, .casa__mesas{ margin-top:16px; }
  .casa__mesas{ width:78%; margin-left: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; }
}