@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-italic-latin.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-latin.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia"), local("Times New Roman");size-adjust:103%;ascent-override:95%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:"DM Sans Fallback";src:local("Segoe UI"), local("Arial"), local("Roboto");size-adjust:99%;ascent-override:99%;descent-override:31%;line-gap-override:0%}
:root{
  color-scheme:dark;
  --fondo:#F5EEE1; --fondo-rgb:245 238 225;
  --fondo-alt:#EDE2CF; --fondo-alt-rgb:237 226 207;
  --superficie:#FBF7EF; --superficie-rgb:251 247 239;
  --crema:#E6D6BA; --crema-rgb:230 214 186;
  --oliva:#3E4A2C; --oliva-rgb:62 74 44;
  --oliva-medio:#5D6B42; --oliva-medio-rgb:93 107 66;
  --oliva-claro:#A3AD84; --oliva-claro-rgb:163 173 132;
  --terracota:#C0643F; --terracota-rgb:192 100 63;
  --terracota-claro:#DE9A72; --terracota-claro-rgb:222 154 114;
  --terracota-texto:#9E4628; --terracota-texto-rgb:158 70 40;
  --vino:#6B1E2B; --vino-rgb:107 30 43;
  --vino-hondo:#4E1420; --vino-hondo-rgb:78 20 32;
  --oro:#C9A25A; --oro-rgb:201 162 90;
  --oro-claro:#E2C78F; --oro-claro-rgb:226 199 143;
  --texto:#2B2A20; --texto-rgb:43 42 32;
  --texto-suave:#5F5A47; --texto-suave-rgb:95 90 71;
  --oscuro:#232B1A; --oscuro-rgb:35 43 26;
  --oscuro-2:#2F3923; --oscuro-2-rgb:47 57 35;
  --sobre-oscuro:#F3EBDD; --sobre-oscuro-rgb:243 235 221;
  --linea:#DFD1B9; --linea-rgb:223 209 185;
  --exito:#5E8A4E; --exito-rgb:94 138 78;
  --error:#A33B32; --error-rgb:163 59 50;
  --estudio-fondo:#0F172A; --estudio-fondo-rgb:15 23 42;
  --estudio-texto:#F8FAFC; --estudio-texto-rgb:248 250 252;
  --estudio-acento:#D42E24; --estudio-acento-rgb:212 46 36;
  --font-titulos:"Fraunces","Fraunces Fallback",Georgia, 'Times New Roman', serif;
  --font-texto:"DM Sans","DM Sans Fallback",'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --radio:18px;
  --radio-sm:12px;
  --ancho-max:1440px;
}
/* ==========================================================================
   Estilos. Colores, fuentes y medidas: variables de arriba (se generan
   desde contenido.json). Aquí solo var(--…), ningún color escrito a mano.
   Movimiento: GSAP + ScrollTrigger + Lenis (script.js, se cargan al primer gesto); nada
   está oculto antes de que lleguen: lo que se anima, lo oculta GSAP fuera de la pantalla.
   ========================================================================== */

:root{
  --hdr-h:66px;
  --gut:clamp(20px, 4.6vw, 80px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sombra-1:0 1px 2px rgb(var(--texto-rgb) / .06), 0 12px 32px -16px rgb(var(--texto-rgb) / .22);
  --sombra-2:0 2px 6px rgb(var(--texto-rgb) / .07), 0 24px 52px -22px rgb(var(--texto-rgb) / .36);
  --sombra-3:0 6px 14px rgb(var(--texto-rgb) / .08), 0 40px 80px -28px rgb(var(--texto-rgb) / .45);
  --grano:url(grano.webp);
  --pat-lineas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M-3 15L15 -3M-3 3L3 -3M9 15L15 9' stroke='black' stroke-width='.8'/%3E%3C/svg%3E");
  --pat-puntos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='1.1'/%3E%3C/svg%3E");
  --pat-mantel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 7h28M0 21h28M7 0v28M21 0v28' stroke='black' stroke-width='3' opacity='.55'/%3E%3C/svg%3E");
  --pat-azulejo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 2l18 18-18 18L2 20Z M20 10l10 10-10 10-10-10Z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  --pat-ondas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 7c5 0 5-5 10-5s5 5 10 5 5-5 10-5 5 5 10 5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
}
@media (min-width:1080px){ :root{ --hdr-h:80px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--hdr-h) + 16px); }
html.ss{ scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-stopped{ overflow:clip; }
.lenis.lenis-smooth iframe{ pointer-events:none; }
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--font-texto); font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
@media (min-width:1080px){ body{ font-size:17px; } }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--font-titulos); font-weight:400; line-height:1.04; letter-spacing:-.015em; text-wrap:balance; }
::selection{ background:var(--terracota-claro); color:var(--texto); }
:focus-visible{ outline:2px solid var(--terracota-texto); outline-offset:3px; border-radius:6px; }
[hidden]{ display:none !important; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.i{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.wrap{ width:100%; max-width:calc(var(--ancho-max) + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut); }
.wrap--mid{ max-width:calc(1060px + 2 * var(--gut)); }
.wrap--text{ max-width:calc(780px + 2 * var(--gut)); }
.decor{ position:absolute; z-index:0; fill:none; stroke:var(--oro); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }

.skip{ position:absolute; left:12px; top:-80px; z-index:200; padding:12px 18px; border-radius:12px; background:var(--texto); color:var(--fondo); text-decoration:none; font-weight:500; }
.skip:focus{ top:12px; }
.demo-bar{
  position:relative; z-index:60; margin:0; padding:8px 16px; background:var(--vino-hondo); color:var(--sobre-oscuro);
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; text-align:center; line-height:1.4;
}

/* ---------- Botones y enlaces ---------- */
.btn{
  --h:52px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--h); padding:0 28px; border-radius:999px; border:1px solid transparent;
  font-family:var(--font-texto); font-size:15px; font-weight:500; letter-spacing:.02em; line-height:1.2;
  text-decoration:none; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent; overflow:hidden; isolation:isolate;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn .i{ width:18px; height:18px; }
.btn::after{ /* brillo cálido al pasar */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgb(var(--oro-claro-rgb) / .35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .8s var(--ease-out);
}
.btn:hover::after{ transform:translateX(120%); }
.btn--vino{ background:var(--vino); color:var(--sobre-oscuro); }
.btn--vino:hover{ background:var(--vino-hondo); box-shadow:0 14px 30px -14px rgb(var(--vino-rgb) / .8); transform:translateY(-2px); }
.btn--dark{ background:var(--oliva); color:var(--sobre-oscuro); }
.btn--dark:hover{ background:var(--oscuro); transform:translateY(-2px); }
.btn--line{ background:transparent; color:var(--texto); border-color:rgb(var(--texto-rgb) / .3); }
.btn--line:hover{ border-color:var(--texto); background:rgb(var(--superficie-rgb) / .7); }
.btn--glass{ background:rgb(var(--sobre-oscuro-rgb) / .08); color:var(--sobre-oscuro); border-color:rgb(var(--sobre-oscuro-rgb) / .45); }
.btn--glass:hover{ background:var(--sobre-oscuro); color:var(--oscuro); border-color:var(--sobre-oscuro); }
.btn--sm{ --h:46px; padding:0 20px; font-size:14px; }
.btn--lg{ --h:56px; padding:0 24px; font-size:15.5px; }
@media (min-width:600px){ .btn--lg{ --h:60px; padding:0 34px; } }
.btn--full{ width:100%; }
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline-offset:4px; border-radius:999px; }

.link{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:var(--texto);
}
.link .i{ width:16px; height:16px; transition:transform .35s var(--ease); }
.link:hover .i{ transform:translateX(5px); }
.link--light{ color:var(--oro-claro); }
.link--back .i{ order:-1; }
.link--back:hover .i{ transform:translateX(-4px); }

.ibtn{
  width:48px; height:48px; display:inline-grid; place-items:center; flex:none;
  border-radius:50%; border:1px solid rgb(var(--texto-rgb) / .28); background:transparent; color:var(--texto); cursor:pointer;
}
.ibtn .i{ width:18px; height:18px; }
.ibtn--light{ border-color:rgb(var(--sobre-oscuro-rgb) / .4); background:rgb(var(--oscuro-rgb) / .35); color:var(--sobre-oscuro); }

.chip{
  display:inline-flex; align-items:center; margin:18px 0 0; padding:6px 13px; border-radius:999px;
  border:1px dashed rgb(var(--texto-rgb) / .38); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-suave);
}
.chip--c{ display:table; margin:36px auto 0; }

.marco{ position:relative; background:var(--superficie); border-radius:var(--radio); box-shadow:var(--sombra-1); }
.marco::before{
  content:""; position:absolute; inset:9px; z-index:900; pointer-events:none;
  border:1px solid rgb(var(--terracota-rgb) / .35); border-radius:calc(var(--radio) - 6px);
}

/* ---------- Títulos de sección ---------- */
.over{
  display:flex; align-items:center; gap:14px; margin:0 0 20px;
  font-family:var(--font-texto); font-size:12px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--terracota-texto);
}
.over::before{ content:""; width:36px; height:1px; background:currentColor; flex:none; opacity:.7; }
.over--light{ color:var(--oro-claro); }
.sec{ position:relative; padding:clamp(88px, 11vw, 168px) 0; }
.sec--alt{ background:var(--grano), var(--fondo-alt); }
.sec__head{ position:relative; z-index:1; max-width:780px; margin-bottom:clamp(44px, 6vw, 84px); }
.sec__head--c{ margin-inline:auto; text-align:center; }
.sec__head--c .over{ justify-content:center; }
.sec__head--c .over::after{ content:""; width:36px; height:1px; background:currentColor; flex:none; opacity:.7; }
.sec__head--split{ max-width:none; display:grid; gap:28px; align-items:end; }
@media (min-width:960px){ .sec__head--split{ grid-template-columns:1fr auto; gap:64px; } }
.sec__t{ font-size:clamp(2.7rem, 1.2rem + 4.4vw, 5.4rem); font-weight:350; font-variation-settings:"opsz" 144; }
.sec__t em, .hero__t em{ font-style:italic; font-weight:400; color:var(--terracota-texto); }
.sec__p{ margin:22px 0 0; max-width:54ch; color:var(--texto-suave); font-size:1.0625rem; }
.sec__head--c .sec__p{ margin-inline:auto; }

/* Títulos que aparecen por palabras */
.split .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .1em .16em 0; margin:0 -.1em -.16em 0; }
.split .wi{ display:inline-block; }

/* ---------- Cabecera ---------- */
.hdr{
  position:sticky; top:0; z-index:50; height:var(--hdr-h); margin-bottom:calc(-1 * var(--hdr-h));
  color:var(--sobre-oscuro); transition:background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr.is-solid{ background:var(--fondo); color:var(--texto); /* opaco: los títulos no se transparentan por debajo */ box-shadow:0 1px 0 var(--linea), 0 10px 30px -22px rgb(var(--texto-rgb) / .4); }
.hdr__in{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo{ display:inline-flex; align-items:center; gap:11px; min-height:44px; text-decoration:none; color:inherit; }
.logo__mark{ width:34px; height:34px; }
.logo__disc{ fill:var(--terracota); }
.logo__rama{ fill:none; stroke:var(--superficie); stroke-width:1.2; stroke-linecap:round; }
.logo__hoja{ fill:var(--superficie); }
.logo__oliva{ fill:var(--oliva); }
.logo__txt{ font-family:var(--font-titulos); font-style:italic; font-size:28px; font-weight:450; letter-spacing:-.01em; line-height:1; }
.nav{ display:none; }
.nav__list{ display:flex; gap:clamp(18px, 2.2vw, 34px); margin:0; padding:0; list-style:none; }
.nav__list a{ position:relative; display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:500; letter-spacing:.04em; text-decoration:none; }
.nav__list a::after{ content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out); }
.nav__list a:hover::after, .nav__list a.is-on::after{ transform:scaleX(1); transform-origin:left; }
.hdr__end{ display:flex; align-items:center; gap:14px; }
.hdr__status{ display:none; }
.lang{ display:none; gap:2px; }
.lang__a{ display:inline-grid; place-items:center; min-width:36px; min-height:44px; font-size:12.5px; font-weight:500; letter-spacing:.12em; text-decoration:none; opacity:.72; }
.lang__a:hover{ opacity:1; }
.lang__a[aria-current]{ opacity:1; text-decoration:underline; text-decoration-color:var(--terracota); text-underline-offset:7px; text-decoration-thickness:1.5px; }
.hdr__cta{ display:none; }
.burger{ width:48px; height:48px; display:grid; place-content:center; gap:7px; padding:0; border:0; background:none; cursor:pointer; color:inherit; }
.burger span{ display:block; width:26px; height:1.5px; background:currentColor; transition:transform .4s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.25px) rotate(-45deg); }
html.menu-open .hdr{ background:var(--fondo); color:var(--texto); }
@media (min-width:600px){ .lang{ display:flex; } }
@media (min-width:1080px){
  .nav{ display:block; }
  .hdr__cta{ display:inline-flex; }
  .burger{ display:none; }
}
@media (min-width:1360px){ .hdr__status{ display:inline-flex; } }

.mnav{
  position:fixed; inset:0; z-index:45; padding:calc(var(--hdr-h) + 28px) var(--gut) calc(28px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; justify-content:space-between; background:var(--grano), var(--fondo);
  opacity:0; transform:translateY(-12px); transition:opacity .4s var(--ease), transform .45s var(--ease-out);
}
.mnav.is-open{ opacity:1; transform:none; }
.mnav__nav ul{ margin:0; padding:0; list-style:none; }
.mnav__nav a{ display:block; padding:8px 0; font-family:var(--font-titulos); font-size:clamp(2.1rem, 9vw, 3rem); line-height:1.15; text-decoration:none; }
.mnav__info{ margin:18px 0 0; font-size:14px; color:var(--texto-suave); }
html.menu-open{ overflow:hidden; }

/* ---------- Portada ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end;
  min-height:100svh; max-height:960px; padding:calc(var(--hdr-h) + 40px) 0 clamp(64px, 9vh, 120px);
  background:var(--oscuro); color:var(--sobre-oscuro);
}
@media (min-width:960px){ .hero{ align-items:center; min-height:max(100svh, 680px); } }
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__par{ position:absolute; inset:-8% 0; }
.hero__par > .foto, .hero__par > .ph, .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__video{ opacity:0; transition:opacity 1.2s var(--ease); }
.hero__video.is-on{ opacity:1; }
.hero__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgb(var(--oscuro-rgb) / .86) 0%, rgb(var(--oscuro-rgb) / .55) 45%, rgb(var(--oscuro-rgb) / .1) 80%),
    linear-gradient(0deg, rgb(var(--oscuro-rgb) / .7) 0%, transparent 40%);
}
@media (max-width:959px){ .hero__veil{ background:linear-gradient(0deg, rgb(var(--oscuro-rgb) / .94) 8%, rgb(var(--oscuro-rgb) / .62) 55%, rgb(var(--oscuro-rgb) / .3) 100%); } }
.hero__olivo{ width:clamp(240px, 30vw, 460px); height:auto; aspect-ratio:1; right:-3%; top:14%; stroke:var(--oro-claro); opacity:.55; }
@media (max-width:959px){ .hero__olivo{ right:-22%; top:10%; opacity:.35; } }
.hero__in{ position:relative; z-index:1; }
.hero__txt{ max-width:820px; }
.hero__live{ margin:0 0 26px; min-height:34px; }
.hero__t{ font-size:clamp(3.3rem, 1rem + 9vw, 6rem); font-weight:330; line-height:.98; letter-spacing:-.025em; font-variation-settings:"opsz" 144; }
.hero__t em{ color:var(--terracota-claro); font-weight:380; }
.letras .wd{ display:inline-block; white-space:nowrap; }
.letras .ch{ display:inline-block; }
.hero__p{ max-width:48ch; margin:28px 0 0; font-size:clamp(1.05rem, .98rem + .3vw, 1.2rem); color:rgb(var(--sobre-oscuro-rgb) / .88); }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.hero__pts{ display:flex; flex-wrap:wrap; gap:8px 26px; margin:34px 0 0; padding:0; list-style:none; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:rgb(var(--sobre-oscuro-rgb) / .8); }
.hero__pts li{ display:flex; align-items:center; gap:10px; }
.hero__pts li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--terracota-claro); }
.hero__pausa{ position:absolute; right:var(--gut); bottom:28px; z-index:2; }
.hero__scroll{
  position:absolute; left:50%; bottom:22px; z-index:1; display:none; flex-direction:column; align-items:center; gap:10px;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; color:rgb(var(--sobre-oscuro-rgb) / .75); translate:-50% 0;
}
.hero__scroll i{ display:block; width:1px; height:44px; background:currentColor; transform-origin:top; }
@media (min-width:960px) and (min-height:760px){ .hero__scroll{ display:flex; } }

/* Insignia «Abierto ahora» */
.status{
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:999px; background:var(--fondo-alt); color:var(--texto);
  font-family:var(--font-texto); font-size:12.5px; font-weight:500; letter-spacing:.04em; line-height:1.3;
}
.status--glass{ background:rgb(var(--oscuro-rgb) / .55); color:var(--sobre-oscuro); box-shadow:inset 0 0 0 1px rgb(var(--sobre-oscuro-rgb) / .22); }
.hdr .status{ background:rgb(var(--oscuro-rgb) / .35); color:inherit; box-shadow:inset 0 0 0 1px rgb(var(--sobre-oscuro-rgb) / .28); }
.hdr.is-solid .status{ background:var(--fondo-alt); box-shadow:none; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--texto-suave); flex:none; }
.dot.is-open{ background:var(--exito); }
.dot.is-closed{ background:var(--terracota); }

/* ---------- Cinta ---------- */
.cinta{ overflow:hidden; padding:20px 0; background:var(--grano), var(--oliva); color:var(--sobre-oscuro); }
.cinta__track{ display:flex; width:max-content; }
.cinta__grupo{ display:flex; align-items:center; gap:30px; margin:0; padding-right:30px; font-family:var(--font-titulos); font-style:italic; font-size:clamp(1.25rem, 1rem + 1vw, 1.9rem); white-space:nowrap; }
.cinta__sep{ width:20px; height:20px; fill:none; stroke:var(--oro-claro); stroke-width:1.4; }

/* ---------- Platos de la casa: cinta horizontal con la rueda ---------- */
.platos{ position:relative; background:var(--grano), radial-gradient(70% 60% at 85% 10%, rgb(var(--vino-rgb) / .45), transparent 70%), var(--oscuro); color:var(--sobre-oscuro); }
.platos__pin{ display:flex; flex-direction:column; justify-content:center; gap:clamp(26px, 4svh, 48px); padding:clamp(88px, 11svh, 130px) 0 clamp(56px, 8svh, 96px); }
.platos__head{ display:grid; gap:16px; align-items:end; }
@media (min-width:960px){ .platos__head{ grid-template-columns:1fr minmax(0, 420px); gap:64px; } .platos__head .sec__p{ margin:0 0 .5em; } }
.platos .sec__t em{ color:var(--terracota-claro); }
.platos .sec__p{ color:rgb(var(--sobre-oscuro-rgb) / .8); }
.platos__vp{ overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
.platos__vp::-webkit-scrollbar{ display:none; }
.platos__track{
  display:flex; gap:clamp(16px, 2vw, 28px); width:max-content; margin:0; list-style:none;
  padding:6px max(var(--gut), calc((100vw - var(--ancho-max)) / 2)) 10px;
}
.dish{ scroll-snap-align:center; width:min(78vw, 360px); perspective:1000px; }
@media (min-width:960px){ .dish{ width:clamp(320px, 27vw, 410px); } }
.dish__card{
  position:relative; height:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radio);
  background:var(--oscuro-2); box-shadow:inset 0 0 0 1px rgb(var(--oro-claro-rgb) / .16); transform-style:preserve-3d;
}
.dish__media{ position:relative; aspect-ratio:4 / 4.4; overflow:hidden; }

.dish__media > .foto, .dish__media > .ph{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); }
.dish__n{
  position:absolute; top:14px; left:18px; font-family:var(--font-titulos); font-size:56px; font-weight:300; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgb(var(--sobre-oscuro-rgb) / .8);
}
.dish__tag{ position:absolute; top:18px; right:16px; padding:6px 12px; border-radius:999px; background:rgb(var(--oscuro-rgb) / .7); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-claro); }
.dish__body{ display:flex; flex-direction:column; gap:8px; flex:1; padding:22px 22px 14px; }
.dish__t{ font-size:clamp(1.65rem, 1.3rem + 1vw, 2.15rem); font-weight:400; font-style:italic; }
.dish__p{ margin:0; font-size:15px; line-height:1.55; color:rgb(var(--sobre-oscuro-rgb) / .78); }
.dish__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:10px; border-top:1px solid rgb(var(--sobre-oscuro-rgb) / .14); }
.dish__precio{ font-family:var(--font-titulos); font-size:1.6rem; color:var(--oro-claro); }
.platos__bar{ display:flex; align-items:center; gap:22px; }
.platos__prog{ position:relative; flex:1; height:1px; background:rgb(var(--sobre-oscuro-rgb) / .2); overflow:hidden; }
.platos__prog i{ position:absolute; inset:0; background:var(--oro-claro); transform:scaleX(var(--p, .16)); transform-origin:left; }
.platos__count{ font-size:13px; letter-spacing:.14em; color:rgb(var(--sobre-oscuro-rgb) / .75); font-variant-numeric:tabular-nums; }
.platos__count b{ font-weight:500; color:var(--sobre-oscuro); }
/* ordenador (.mfull): la cinta la mueve la rueda (ScrollTrigger); en el teléfono — el dedo */
.mfull .platos__vp{ overflow:visible; scroll-snap-type:none; }
.mfull .platos{ overflow:hidden; }

/* ---------- La casa: bloques que cambian al bajar ---------- */
.casa__grid{ display:grid; gap:32px; }
.casa__media{ position:sticky; top:calc(var(--hdr-h) + 12px); z-index:1; }
.casa__frame{ position:relative; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--radio); background:var(--crema); box-shadow:var(--sombra-2); }
.casa__img{ position:absolute; inset:0; clip-path:inset(100% 0 0 0); transition:clip-path 1.1s var(--ease-out); }
.casa__img.is-on{ clip-path:inset(0 0 0 0); z-index:1; }
.casa__img.was-on{ clip-path:inset(0 0 0 0); }
.casa__img > .foto, .casa__img > .ph{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 1.6s var(--ease-out); }
.casa__img.is-on > *{ transform:none; }
.casa__num{ position:absolute; left:18px; bottom:16px; z-index:3; padding:6px 12px; border-radius:999px; background:rgb(var(--superficie-rgb) / .88); font-size:12px; letter-spacing:.14em; color:var(--texto-suave); font-variant-numeric:tabular-nums; }
.casa__num b{ color:var(--texto); font-weight:500; }
.casa__prog{ position:absolute; left:0; right:0; bottom:0; z-index:3; height:3px; background:rgb(var(--superficie-rgb) / .35); }
.casa__prog i{ position:absolute; inset:0; background:var(--terracota); transform:scaleX(var(--p, .33)); transform-origin:left; transition:transform .3s linear; }
.casa__steps{ margin:0; padding:0; list-style:none; }
.casa__step{ position:relative; display:grid; align-content:center; gap:14px; min-height:62svh; padding:24px 0 24px 22px; }
.casa__step::before{ content:""; position:absolute; left:0; top:50%; width:2px; height:0; background:var(--terracota); translate:0 -50%; transition:height .7s var(--ease-out); }
.casa__step.is-on::before{ height:min(70%, 260px); }
.casa__step .casa__t, .casa__step .casa__p{ color:var(--texto-suave); transition:color .6s var(--ease); }
.casa__step.is-on .casa__t{ color:var(--texto); }

.casa__k{ font-family:var(--font-titulos); font-size:15px; font-style:italic; color:var(--terracota-texto); }
.casa__t{ font-size:clamp(2rem, 1.4rem + 2vw, 3.2rem); font-weight:350; }
.casa__p{ margin:0; max-width:46ch; color:var(--texto-suave); font-size:1.0625rem; }
@media (max-width:959px){
  .casa__media{ top:calc(var(--hdr-h) + 8px); }
  .casa__frame{ aspect-ratio:16 / 10; }
  .casa__step{ min-height:56svh; }
}
@media (min-width:960px){
  .casa__grid{ grid-template-columns:1.05fr 1fr; gap:clamp(56px, 7vw, 120px); }
  .casa__media{ top:calc(var(--hdr-h) + 40px); align-self:start; }
  .casa__frame{ aspect-ratio:4 / 5; max-height:calc(100svh - var(--hdr-h) - 80px); margin-inline:auto; }
  .casa__step{ min-height:78svh; }
}

/* ---------- Cifras ---------- */
.cifras{ position:relative; overflow:hidden; padding:clamp(64px, 8vw, 110px) 0; background:var(--grano), var(--vino); color:var(--sobre-oscuro); }
.cifras__trigo{ width:320px; height:auto; aspect-ratio:1; left:-60px; top:-20px; stroke:var(--oro-claro); opacity:.3; }
.cifras__grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, 1fr); gap:44px 24px; }
@media (min-width:900px){ .cifras__grid{ grid-template-columns:repeat(4, 1fr); } }
.cifra{ border-top:1px solid rgb(var(--sobre-oscuro-rgb) / .22); padding-top:20px; }
.cifra__n{ margin:0; font-family:var(--font-titulos); font-size:clamp(2.9rem, 1.8rem + 3.4vw, 5rem); font-weight:300; line-height:1; color:var(--oro-claro); font-variant-numeric:tabular-nums; }
.cifra__suf{ font-size:.55em; margin-left:.06em; }
.cifra__t{ margin:12px 0 0; font-size:14.5px; color:rgb(var(--sobre-oscuro-rgb) / .86); }

/* ---------- La carta ---------- */
.carta{ overflow:hidden; }
.carta__tomate{ width:300px; height:auto; aspect-ratio:1; right:-70px; top:80px; stroke:var(--terracota); opacity:.35; }
.tabs{ position:relative; z-index:1; }
.tabs__list{
  position:relative; display:flex; justify-content:flex-start; gap:4px; margin:0 auto 34px; padding:6px; width:max-content; max-width:100%;
  overflow-x:auto; scrollbar-width:none; border-radius:999px; background:var(--superficie); box-shadow:var(--sombra-1);
}
.tabs__list::-webkit-scrollbar{ display:none; }
.tabs__tab{
  position:relative; z-index:1; flex:none; min-height:46px; padding:0 20px; border:0; border-radius:999px; background:none; cursor:pointer;
  font-family:var(--font-titulos); font-style:italic; font-size:1.15rem; color:var(--texto-suave); transition:color .35s var(--ease);
}
/* Pestaña activa: fondo oliva en la propia pestaña (sin calcular posiciones — fiable en Safari) */
.tabs__tab{ transition:color .35s var(--ease), background-color .35s var(--ease); }
.tabs.is-tabs .tabs__tab[aria-selected="true"]{ color:var(--sobre-oscuro); background:var(--oliva); }
.tabs:not(.is-tabs) .tabs__panel + .tabs__panel{ margin-top:48px; }
.tabs.is-tabs .tabs__panel:not(.is-on){ display:none; }
.tabs__box{ position:relative; padding:clamp(26px, 4vw, 52px); border-radius:var(--radio); background:var(--superficie); box-shadow:var(--sombra-1); }
.tabs__box::before{ content:""; position:absolute; inset:10px; border:1px solid rgb(var(--terracota-rgb) / .3); border-radius:calc(var(--radio) - 6px); pointer-events:none; }
.tabs__panel:focus-visible{ outline-offset:8px; }
.menu__sub{ margin:0 0 18px; font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--terracota-texto); }
.menu{ display:grid; margin:0; padding:0; list-style:none; }
@media (min-width:860px){ .menu{ grid-template-columns:1fr 1fr; column-gap:56px; } }
.menu__it{ padding:16px 0 18px; border-bottom:1px solid var(--linea); }
.menu__row{ display:flex; align-items:baseline; gap:10px; }
.menu__n{ display:flex; align-items:center; gap:8px; font-size:1.42rem; font-weight:400; line-height:1.2; }
.menu__ic{ width:17px; height:17px; }
.menu__ic--veg{ color:var(--oliva-medio); }
.menu__ic--pic{ color:var(--terracota-texto); }
.menu__dots{ flex:1; min-width:20px; border-bottom:1px dotted rgb(var(--texto-rgb) / .35); transform:translateY(-5px); }
.menu__pr{ display:flex; gap:14px; margin:0; font-family:var(--font-titulos); font-size:1.3rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.menu__pr small{ font-family:var(--font-texto); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave); }
.menu__d{ margin:6px 0 0; font-size:15px; color:var(--texto-suave); }
.carta__pie{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px; margin-top:26px; font-size:13.5px; color:var(--texto-suave); }
.carta__ley{ display:flex; gap:22px; margin:0; }
.carta__ley span{ display:inline-flex; align-items:center; gap:7px; }
.carta__nota{ margin:0; }

/* ---------- Opiniones ---------- */
.score{ display:flex; align-items:center; gap:18px; }
.score__n{ margin:0; font-family:var(--font-titulos); font-size:clamp(3.4rem, 2.4rem + 3vw, 5.2rem); font-weight:300; line-height:1; }
.score__t{ margin:6px 0 0; font-size:13.5px; color:var(--texto-suave); }
.stars{ display:flex; gap:3px; margin:0; color:var(--oro); }
.stars .i{ width:17px; height:17px; }
.stars .is-off{ color:var(--linea); }
.revs{ display:grid; gap:18px; margin:0; padding:0; list-style:none; }
@media (min-width:760px){ .revs{ grid-template-columns:repeat(6, 1fr); } .rev{ grid-column:span 3; } .rev:nth-child(n+3){ grid-column:span 2; } }
.rev{ perspective:1000px; }
.rev__card{
  height:100%; display:flex; flex-direction:column; gap:18px; margin:0; padding:30px 28px 24px; border-radius:var(--radio);
  background:var(--superficie); box-shadow:var(--sombra-1); transform-style:preserve-3d;
}
.rev:nth-child(-n+2) .rev__q{ font-size:clamp(1.3rem, 1.05rem + .8vw, 1.7rem); }
.rev__q{ flex:1; margin:0; font-family:var(--font-titulos); font-size:1.22rem; font-weight:350; line-height:1.4; }
.rev__q p{ margin:0; }
.rev__q p::before{ content:"“"; margin-right:.05em; color:var(--terracota); }
.rev__q p::after{ content:"”"; color:var(--terracota); }
.rev__by{ display:flex; align-items:center; gap:12px; font-size:14px; }
.rev__by strong{ display:block; font-weight:500; }
.rev__by small{ font-size:12.5px; color:var(--texto-suave); }
.rev__av{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--crema); font-family:var(--font-titulos); font-style:italic; font-size:20px; color:var(--terracota-texto); }

/* ---------- Reserva ---------- */
.reserva{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(88px, 11vw, 160px) 0; color:var(--sobre-oscuro); background:var(--oscuro); }
.reserva__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.reserva__par{ position:absolute; inset:-12% 0; }
.reserva__par > .foto, .reserva__par > .ph{ width:100%; height:100%; object-fit:cover; }
.reserva__veil{ position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgb(var(--oscuro-rgb) / .92) 10%, rgb(var(--oscuro-rgb) / .62) 60%, rgb(var(--oscuro-rgb) / .45)); }
.reserva__in{ display:grid; gap:44px; align-items:center; }
@media (min-width:960px){ .reserva__in{ grid-template-columns:1fr minmax(0, 520px); gap:clamp(56px, 7vw, 120px); } }
.reserva .sec__t em{ color:var(--terracota-claro); }
.reserva .sec__p{ color:rgb(var(--sobre-oscuro-rgb) / .86); }
.reserva__grupos{ display:flex; gap:12px; align-items:flex-start; max-width:46ch; margin:28px 0 0; font-size:14.5px; color:rgb(var(--sobre-oscuro-rgb) / .8); }
.reserva__grupos .i{ margin-top:3px; color:var(--oro-claro); }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:clamp(26px, 3.4vw, 40px); color:var(--texto); color-scheme:only light; } /* la ficha de reserva es clara: casillas y fecha del navegador, en claro */
.field{ display:grid; gap:7px; grid-column:span 2; min-width:0; }
@media (min-width:420px){ .field:not(.field--full){ grid-column:span 1; } }
.field label{ font-size:12.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-suave); }
.field abbr{ text-decoration:none; color:var(--terracota-texto); }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea{
  width:100%; min-height:50px; padding:12px 15px; border:1px solid var(--linea); border-radius:var(--radio-sm); background:var(--fondo);
  font-size:16px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:72px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--oliva-medio); box-shadow:0 0 0 3px rgb(var(--oliva-claro-rgb) / .4); }
.field.is-err input{ border-color:var(--error); }
.field__err{ margin:0; min-height:0; font-size:13px; color:var(--error); }
.field__err:empty{ display:none; }
.field--check{ grid-template-columns:auto 1fr; align-items:start; gap:4px 12px; }
.field--check input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--oliva); }
.field--check label{ font-size:13.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--texto-suave); }
.field--check label a{ color:var(--texto); }
.field--check .field__err{ grid-column:2; }
.pax{ display:flex; flex-wrap:wrap; gap:7px; }
.pax__op{ position:relative; }
.pax__op input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.pax__op span{
  display:grid; place-items:center; min-width:44px; height:44px; padding:0 10px; border:1px solid var(--linea); border-radius:999px; background:var(--fondo);
  font-weight:500; font-variant-numeric:tabular-nums; transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pax__op input:checked + span{ background:var(--oliva); border-color:var(--oliva); color:var(--sobre-oscuro); }
.pax__op input:focus-visible + span{ outline:2px solid var(--terracota-texto); outline-offset:2px; }
.form .btn{ grid-column:span 2; margin-top:4px; }

/* ---------- Contacto ---------- */
.contact{ display:grid; gap:52px; }
.clist{ display:grid; gap:20px; margin:30px 0 0; }
.clist__row{ display:grid; gap:4px; }
.clist dt{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--terracota-texto); }
.clist dt .i{ width:16px; height:16px; }
.clist dd{ margin:0; font-size:17px; }
.clist a{ text-decoration-color:rgb(var(--terracota-rgb) / .7); text-underline-offset:4px; }
.contact__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hours{ margin-top:46px; }
.hours__t{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; font-size:2rem; font-weight:350; }
.hours__tbl{ width:100%; margin-top:14px; border-collapse:collapse; font-size:15.5px; }
.hours__tbl th, .hours__tbl td{ padding:11px 0; border-bottom:1px solid var(--linea); }
.hours__tbl th{ font-weight:400; text-align:left; }
.hours__tbl td{ text-align:right; font-variant-numeric:tabular-nums; }
.hours__tbl tr.is-closed td{ color:var(--texto-suave); }
.hours__tbl tr.is-today th, .hours__tbl tr.is-today td{ font-weight:600; }
.hours__tbl tr.is-today th::before{ content:""; display:inline-block; width:6px; height:6px; margin:0 10px 2px 0; border-radius:50%; background:var(--terracota); vertical-align:middle; }
.contact__side{ display:grid; gap:36px; align-content:start; }
.llegar__t{ font-size:1.7rem; font-weight:350; }
.llegar__list{ display:grid; gap:14px; margin:16px 0 0; padding:0; list-style:none; }
.llegar__list li{ display:flex; gap:14px; align-items:flex-start; font-size:15px; color:var(--texto-suave); }
.llegar__list .i{ margin-top:2px; color:var(--terracota-texto); }
.llegar__list strong{ color:var(--texto); font-weight:500; }
.map{ position:relative; aspect-ratio:1 / .9; overflow:hidden; background:var(--fondo-alt); }
.map__ph{
  position:absolute; inset:0; z-index:0; display:grid; place-content:center; justify-items:center; gap:12px; padding:24px; text-align:center;
  font-size:14px; color:var(--texto-suave);
  background:linear-gradient(rgb(var(--linea-rgb) / .9) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgb(var(--linea-rgb) / .9) 1px, transparent 1px) 0 0 / 44px 44px, var(--fondo-alt);
}
.map__pin{ width:36px; height:36px; color:var(--terracota-texto); }
.map.is-ready .map__ph{ display:none; }
.map__note{ margin:12px 0 0; text-align:right; font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-suave); }
.map.leaflet-container{ background:var(--fondo-alt); font-family:var(--font-texto); }
.map .leaflet-tile-pane{ filter:grayscale(.85) sepia(.3) brightness(1.03) contrast(.92); }
.map .leaflet-control-attribution{ font-size:10.5px; background:rgb(var(--superficie-rgb) / .85); }
.map .leaflet-control-zoom a{ color:var(--texto); }
.map .leaflet-popup-content-wrapper{ border-radius:var(--radio-sm); box-shadow:var(--sombra-2); }
.map .leaflet-popup-content{ margin:12px 16px; font-size:14px; line-height:1.45; color:var(--texto); }
.map .leaflet-popup-content strong{ font-family:var(--font-titulos); font-style:italic; font-size:20px; font-weight:400; }
.pin{ position:relative; width:48px; height:56px; }
.pin::before{
  content:""; position:absolute; left:50%; top:4px; width:36px; height:36px; margin-left:-18px;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--vino); box-shadow:0 8px 16px -6px rgb(var(--texto-rgb) / .6);
}
.pin::after{ content:""; position:absolute; left:50%; top:16px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--oro-claro); }
@media (min-width:960px){ .contact{ grid-template-columns:1fr 1fr; gap:clamp(56px, 7vw, 120px); align-items:start; } }

/* ---------- Pie ---------- */
.ftr{ position:relative; overflow:hidden; padding:84px 0 32px; background:var(--grano), var(--oscuro); color:var(--sobre-oscuro); font-size:15px; }
.ftr__grid{ position:relative; z-index:1; display:grid; gap:40px; }
.logo--light{ color:var(--sobre-oscuro); }
.ftr__lema{ max-width:34ch; margin:16px 0 0; color:rgb(var(--sobre-oscuro-rgb) / .78); }
.ftr__h{ margin:0 0 12px; font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--oro-claro); }
.ftr__col p{ margin:0 0 8px; color:rgb(var(--sobre-oscuro-rgb) / .82); }
.ftr__links{ display:grid; margin:0; padding:0; list-style:none; }
.ftr__links a{ display:inline-flex; align-items:center; min-height:40px; text-decoration:none; color:rgb(var(--sobre-oscuro-rgb) / .86); }
.ftr__links a:hover, .ftr__legal a:hover, .ftr__bottom a:hover{ color:var(--sobre-oscuro); text-decoration:underline; text-underline-offset:4px; }
.ftr__big{
  margin:56px 0 0; text-align:center; white-space:nowrap; line-height:.8; user-select:none; pointer-events:none;
  font-family:var(--font-titulos); font-style:italic; font-weight:300; font-size:clamp(5.5rem, 24vw, 22rem); letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px rgb(var(--oro-claro-rgb) / .42);
}
.ftr__bottom{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 28px; margin-top:28px; padding-top:24px;
  border-top:1px solid rgb(var(--sobre-oscuro-rgb) / .14); font-size:13px; color:rgb(var(--sobre-oscuro-rgb) / .72);
}
.ftr__bottom p{ margin:0; }
.ftr__bottom a{ color:rgb(var(--sobre-oscuro-rgb) / .9); }
.ftr__legal{ display:flex; flex-wrap:wrap; gap:4px 18px; margin:0; padding:0; list-style:none; }
.ftr__legal a{ text-decoration:none; }
.ftr :focus-visible{ outline-color:var(--oro-claro); }
@media (min-width:800px){ .ftr__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
@media (max-width:1079px){ .ftr{ padding-bottom:calc(104px + env(safe-area-inset-bottom)); } }

/* ---------- Franja de Oskal Studio (solo en las demos) ---------- */
.oskal{ position:relative; padding:24px 0; background:var(--estudio-fondo); color:var(--estudio-texto); border-top:1px solid rgb(var(--estudio-texto-rgb) / .12); }
.oskal__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; }
.oskal__marca{ display:flex; flex-direction:column; gap:2px; margin:0; font-size:12px; letter-spacing:.06em; color:rgb(var(--estudio-texto-rgb) / .72); }
.oskal__marca a{ display:inline-flex; align-items:center; gap:8px; min-height:28px; font-size:15px; font-weight:600; letter-spacing:.04em; color:var(--estudio-texto); text-decoration:none; }
.oskal__marca a::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--estudio-acento); }
.oskal__t{ margin:0; font-size:clamp(1.1rem, .95rem + .6vw, 1.45rem); font-weight:500; letter-spacing:.01em; }
.oskal__sep{ margin:0 .3em; color:rgb(var(--estudio-texto-rgb) / .45); }
.oskal__p strong{ font-weight:600; }
.oskal__btn{ background:var(--estudio-acento); color:var(--estudio-texto); }
.oskal__btn::after{ display:none; }
.oskal__btn:hover{ box-shadow:0 12px 26px -12px rgb(0 0 0 / .6); transform:translateY(-2px); }
.oskal :focus-visible{ outline-color:var(--estudio-texto); }
.ftr:has(+ .oskal){ padding-bottom:32px; }
@media (max-width:1079px){ .oskal{ padding-bottom:calc(24px + env(safe-area-inset-bottom)); } .oskal__btn{ width:100%; } }

/* Botón fijo «Reservar mesa» (móvil) */
.bookbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgb(var(--fondo-rgb) / .97) 55%, rgb(var(--fondo-rgb) / 0));
  transform:translateY(120%); transition:transform .5s var(--ease-out); pointer-events:none;
}
.bookbar.is-on{ transform:none; }
.bookbar .btn{ pointer-events:auto; box-shadow:var(--sombra-2); }
@media (min-width:1080px){ .bookbar{ display:none; } }

/* ---------- Fotos de reserva (hasta tener las reales): degradado + trama + dibujo + grano ---------- */
.foto{ object-position:var(--pos-m, var(--pos, 50% 50%)); }
@media (min-width:960px){ .foto{ object-position:var(--pos, 50% 50%); } }
.ph{ position:relative; width:100%; height:100%; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.ph::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--trama-color, var(--superficie)); opacity:var(--trama-op, .16);
  -webkit-mask:var(--trama, var(--pat-lineas)) repeat; mask:var(--trama, var(--pat-lineas)) repeat;
}
.ph--tomate{
  --trama:var(--pat-mantel); --trama-op:.13;
  background:var(--grano), radial-gradient(60% 50% at 30% 22%, rgb(var(--terracota-claro-rgb) / .9), transparent 70%), linear-gradient(160deg, var(--terracota) 0%, var(--vino) 120%);
}
.ph--oliva{
  --trama:var(--pat-azulejo); --trama-op:.12; --trama-color:var(--oro-claro);
  background:var(--grano), radial-gradient(55% 45% at 70% 25%, rgb(var(--oliva-claro-rgb) / .7), transparent 70%), linear-gradient(165deg, var(--oliva-medio) 0%, var(--oscuro) 115%);
}
.ph--crema{
  --trama:var(--pat-puntos); --trama-op:.35; --trama-color:var(--terracota);
  background:var(--grano), radial-gradient(60% 50% at 35% 25%, rgb(var(--superficie-rgb) / .95), transparent 70%), linear-gradient(160deg, var(--fondo) 0%, var(--crema) 60%, var(--terracota-claro) 140%);
}
.ph--vino{
  --trama:var(--pat-ondas); --trama-op:.14; --trama-color:var(--oro-claro);
  background:var(--grano), radial-gradient(60% 50% at 70% 20%, rgb(var(--vino-rgb) / .9), transparent 70%), linear-gradient(165deg, var(--vino) 0%, var(--vino-hondo) 55%, var(--oscuro) 120%);
}
.ph--noche{
  --trama:var(--pat-azulejo); --trama-op:.07; --trama-color:var(--oro-claro);
  background:var(--grano),
    radial-gradient(38% 34% at 74% 42%, rgb(var(--terracota-rgb) / .55), transparent 70%),
    radial-gradient(30% 28% at 88% 78%, rgb(var(--oro-rgb) / .35), transparent 70%),
    linear-gradient(170deg, var(--oscuro-2) 0%, var(--oscuro) 70%);
}
.ph__m{ width:54%; max-width:340px; height:auto; aspect-ratio:1; fill:none; stroke:var(--motivo-color, rgb(var(--superficie-rgb) / .9)); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.ph--crema .ph__m{ --motivo-color:var(--terracota); }
.ph--noche .ph__m, .ph--oliva .ph__m, .ph--vino .ph__m{ --motivo-color:var(--oro-claro); }
.ph--h .ph__m{ width:40%; }
.ph__tag{
  position:absolute; left:16px; bottom:16px; padding:5px 11px; border-radius:999px; background:rgb(var(--superficie-rgb) / .85);
  font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-suave); white-space:nowrap;
}
.hero .ph__m{ position:absolute; right:14%; top:50%; translate:0 -50%; width:min(40vw, 520px); max-width:none; opacity:.6; }
.hero .ph__tag{ left:auto; right:var(--gut); bottom:auto; top:calc(var(--hdr-h) + 50px); }
@media (max-width:959px){ .hero .ph__m{ right:50%; translate:50% 0; top:14%; width:min(70vw, 360px); opacity:.4; } }
.dish .ph__tag{ left:auto; right:16px; bottom:16px; }
.reserva .ph__m{ position:absolute; right:8%; top:50%; translate:0 -50%; width:min(34vw, 420px); opacity:.35; }
.reserva .ph__tag{ left:auto; right:var(--gut); top:24px; bottom:auto; }
@media (max-width:959px){ .reserva .ph__m{ display:none; } }

/* ---------- Ventana de ejemplo (demo) ---------- */
.modal{ width:min(92vw, 470px); max-width:none; padding:0; border:0; background:transparent; color:var(--texto); }
.modal::backdrop{ background:rgb(var(--oscuro-rgb) / .62); }
.modal__box{ position:relative; padding:30px 24px 24px; border-radius:var(--radio); background:var(--superficie); box-shadow:var(--sombra-3); }
.modal__box::before{ content:""; position:absolute; inset:9px; border:1px solid rgb(var(--terracota-rgb) / .35); border-radius:calc(var(--radio) - 6px); pointer-events:none; }
.modal .over{ margin-bottom:12px; font-size:10.5px; }
.modal__t{ font-size:2rem; font-weight:350; }
.modal__p{ margin:12px 0 18px; color:var(--texto-suave); font-size:15px; }
.bubble{ position:relative; margin-left:10%; padding:14px 16px 28px; border-radius:18px 18px 4px 18px; background:var(--fondo-alt); font-size:15px; line-height:1.5; white-space:pre-line; overflow-wrap:anywhere; }
.bubble__txt{ margin:0; }
.bubble__meta{ position:absolute; right:12px; bottom:7px; display:flex; align-items:center; gap:3px; font-size:11px; color:var(--texto-suave); }
.bubble__meta .i{ width:14px; height:14px; color:var(--oliva-medio); }
.modal__note{ margin:14px 0 0; font-size:12.5px; color:var(--texto-suave); }
.modal__btns{ position:relative; display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.modal__btns .btn{ flex:1 1 auto; }

/* ---------- Legal ---------- */
.page-legal .hdr{ position:sticky; margin-bottom:0; }
.legal{ padding:clamp(40px, 7vw, 88px) 0 clamp(72px, 9vw, 120px); }
.legal__t{ margin:22px 0 0; font-size:clamp(2.4rem, 1.7rem + 3vw, 3.6rem); font-weight:350; }
.legal__toc{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:22px 0 0; }
.legal__toc a{ display:inline-flex; align-items:center; min-height:44px; font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--terracota-texto); text-decoration:none; }
.legal__demo{ margin:26px 0 0; padding:16px 20px; border-radius:var(--radio-sm); border:1px dashed rgb(var(--texto-rgb) / .3); color:var(--texto-suave); font-size:15px; }
.legal__sec{ margin-top:52px; padding-top:28px; border-top:1px solid var(--linea); }
.legal__sec h2{ font-size:2.1rem; font-weight:350; }
.legal__sec h3{ margin:28px 0 6px; font-family:var(--font-texto); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.legal__sec p, .legal__sec li{ color:var(--texto-suave); }
.legal__sec ul{ padding-left:20px; }
.legal__sec strong{ color:var(--texto); font-weight:500; }
.legal__upd{ margin-top:48px; font-size:13px; color:var(--texto-suave); }

/* ---------- Movimiento (todo se apaga con prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero__a{ animation:rise 1s var(--ease-out) both; animation-delay:calc(var(--d, 0) * 90ms + 80ms); }
  .letras .ch{ animation:char-in .9s var(--ease-out) both; animation-delay:calc(var(--i) * 34ms + 220ms); }
  .hero__scroll i{ animation:caer 2.4s var(--ease) infinite; }
  .cinta__track{ animation:marq 52s linear infinite; }
  .dot.is-open{ animation:pulse 2.6s ease-out infinite; }
  .modal[open] .modal__box{ animation:pop .45s var(--ease-out); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .hero__video{ display:none; }
}
/* opacity .01: el texto cuenta como pintado desde el primer momento (LCP rápido) */
@keyframes rise{ from{ opacity:.01; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes char-in{ from{ opacity:.01; transform:translateY(.42em) rotate(7deg); } to{ opacity:1; transform:none; } }
@keyframes caer{ 0%{ transform:scaleY(0); opacity:1; } 60%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }
@keyframes marq{ to{ transform:translateX(-50%); } }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgb(var(--exito-rgb) / .5); } 70%,100%{ box-shadow:0 0 0 9px rgb(var(--exito-rgb) / 0); } }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }

/* El pie no se calcula hasta acercarse (las secciones con ScrollTrigger sí: necesitan su altura real) */
.ftr{ content-visibility:auto; contain-intrinsic-size:auto 640px; }

/* ---------- Ajustes de composición ---------- */
.hero .ph__tag{ top:auto; bottom:28px; right:var(--gut); left:auto; }
@media (max-width:959px){ .hero .ph__tag{ top:calc(var(--hdr-h) + 14px); bottom:auto; left:auto; right:var(--gut); } }
.platos__pin{ padding-top:calc(var(--hdr-h) + clamp(18px, 4svh, 48px)); padding-bottom:clamp(28px, 5svh, 64px); gap:clamp(20px, 3.4svh, 40px); min-height:100svh; }
.platos .sec__t{ font-size:clamp(2.4rem, 1.2rem + 3.4vw, 4.4rem); }
.platos .over{ margin-bottom:14px; }
.dish__media{ aspect-ratio:auto; height:clamp(190px, 34svh, 400px); }
.dish__body{ padding:18px 22px 12px; }
.casa__num{ top:16px; bottom:auto; }
.cifras__trigo{ left:auto; right:-40px; top:auto; bottom:-60px; opacity:.22; }
.hdr .hdr__status{ display:none; }
@media (min-width:1360px){ .hdr .hdr__status{ display:inline-flex; } }
.logo__txt{ white-space:nowrap; }
.hero__par{ inset:0; }
.casa__media::after{ content:""; position:absolute; left:0; right:0; top:100%; height:56px; background:linear-gradient(var(--fondo), rgb(var(--fondo-rgb) / 0)); pointer-events:none; }
@media (max-width:599px){
  .dish__foot .link{ font-size:11px; letter-spacing:.1em; }
  .menu__n{ font-size:1.22rem; }
  .menu__pr{ font-size:1.15rem; }
  .logo__txt{ font-size:25px; }
}
.dish .ph__tag{ right:14%; }

/* ---------- Aparición de bloques (todos los dispositivos; script.js + IntersectionObserver) ----------
   Sube 20 px y se aclara en 0,7 s con frenada suave; empieza con el bloque aún un 15 % por debajo
   de la pantalla, una sola vez. Solo transform y opacity: el tamaño no cambia, los vecinos no se mueven. */
@media (prefers-reduced-motion:no-preference){
  .rv .reveal{ opacity:0; translate:0 20px; transition:opacity .7s var(--ease-out), translate .7s var(--ease-out); transition-delay:min(calc(var(--d, 0) * 70ms), 280ms); }
  .rv .reveal.is-in{ opacity:1; translate:0 0; }
  .rv .split .wi{ transform:translateY(105%); transition:transform .8s var(--ease-out); transition-delay:min(calc(var(--i) * 50ms), 400ms); }
  .rv .split.is-in .wi{ transform:none; }
  /* platos de la casa: entran uno a uno, 24 px de lado */
  .rv .platos__vp .dish{ opacity:0; translate:24px 0; transition:opacity .7s var(--ease-out), translate .7s var(--ease-out); transition-delay:min(calc(var(--d, 0) * 80ms), 400ms); }
  .rv .platos__vp.is-in .dish{ opacity:1; translate:0 0; }
  /* la carta: al cambiar de pestaña el panel se aclara y los platos entran uno a uno */
  .tabs.is-tabs .tabs__panel.is-on{ animation:panel-in .4s var(--ease-out) both; }
  .tabs.is-in .tabs__panel.is-on [data-mi]{ animation:mi-in .6s var(--ease-out) both; animation-delay:min(calc(var(--i) * 45ms), 360ms); }
}
@keyframes panel-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mi-in{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:none; } }
/* Teléfono y pantallas táctiles: títulos sin el efecto palabra a palabra, solo se aclaran y suben */
@media (prefers-reduced-motion:no-preference) and (max-width:900px), (prefers-reduced-motion:no-preference) and (pointer:coarse){
  .rv .split{ opacity:0; translate:0 20px; transition:opacity .7s var(--ease-out), translate .7s var(--ease-out); }
  .rv .split.is-in{ opacity:1; translate:0 0; }
  .rv .split .wi, .rv .split.is-in .wi{ transform:none; transition:none; }
}
/* Estado «abierto / cerrado»: el sitio se guarda desde el principio (sin saltos al rellenarlo) */
.is-wait{ visibility:hidden; }
/* Cifras que cuentan: ancho del número final reservado */
[data-count]{ display:inline-block; text-align:end; font-variant-numeric:tabular-nums; }

/* ---------- Teléfono y pantallas táctiles: sin fijar nada, desplazamiento nativo ----------
   Movimiento completo (cinta fijada que avanza con la rueda, foto fija en «La casa») — solo
   con ratón y ≥ 901 px; el mismo límite que fullMQ en script.js. */
.casa__foto{ display:none; }
@media (max-width:900px), (pointer:coarse){
  /* cinta de platos: se desliza con el dedo y se detiene en cada plato */
  .platos__pin{ min-height:0; padding:clamp(72px, 12vw, 112px) 0 clamp(44px, 8vw, 72px); gap:26px; }
  .platos__vp{ scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); }
  .dish{ scroll-snap-align:start; }
  .dish__media{ height:auto; aspect-ratio:4 / 3.5; }
  /* «La casa»: tres bloques uno debajo de otro, cada uno con su foto */
  .casa__media{ display:none; }
  .casa__grid{ display:block; }
  .casa__steps{ display:grid; gap:clamp(44px, 9vw, 72px); }
  .casa__step{ min-height:0; padding:0; gap:12px; }
  .casa__step::before{ display:none; }
  .casa__step .casa__t{ color:var(--texto); }
  .casa__foto{ display:block; position:relative; aspect-ratio:4 / 3; overflow:hidden; margin-bottom:8px; border-radius:var(--radio); background:var(--crema); box-shadow:var(--sombra-1); }
  .casa__foto > .foto, .casa__foto > .ph{ width:100%; height:100%; object-fit:cover; }
}
.oskal__plan{ font-weight:600; letter-spacing:.02em; }
/* Foto con recorte para el teléfono (<picture>): la imagen se coloca igual que una <img> suelta */
.foto-pic{ display:contents; }
.hero__par .foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- Portada: la foto «vive» (todo en CSS: no espera a GSAP) ----------
   .hero__par — parallax de ratón y de desplazamiento (script.js, solo ordenador)
   .hero__kb  — acercamiento lento (Ken Burns): ordenador 1 → 1,08 en 20 s; teléfono 1 → 1,04 en 25 s
   .hero__luces — 4 velas que parpadean (solo ordenador), colocadas sobre la foto como object-fit:cover */
.hero__kb{ position:absolute; inset:0; container-type:size; transform-origin:68% 50%; }
.hero__kb > .ph{ position:absolute; inset:0; }
.hero__luces{ display:none; }
.hero__words .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .08em .14em 0; margin:0 -.08em -.14em 0; }
.hero__words .wi{ display:inline-block; }
@media (prefers-reduced-motion:no-preference){
    .hero__kb{ animation:kb-m 25s ease-in-out infinite alternate; }
    /* opacity .01: el titular cuenta como pintado desde el primer momento (LCP) */
    .hero__words .wi{ animation:word-in 1s var(--ease-out) both; animation-delay:calc(var(--i) * 110ms + 200ms); }
    .hero__olivo{ stroke-dasharray:100; stroke-dashoffset:100; animation:draw 2.5s var(--ease) .5s forwards; }
}
@media (prefers-reduced-motion:no-preference) and (min-width:901px) and (hover:hover) and (pointer:fine){
    .hero__par{ inset:-4%; will-change:transform; }      /* margen para el parallax */
    .hero__kb{ animation:kb 20s ease-in-out infinite alternate; }
    .hero__luces{
        display:block; position:absolute; pointer-events:none;
        width:max(100cqw, 150cqh); aspect-ratio:3 / 2;
        left:calc((100cqw - max(100cqw, 150cqh)) * .68);
        top:calc((100cqh - max(100cqw, 150cqh) / 1.5) * .5);
    }
    .hero__luces i{
        position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); width:6%; aspect-ratio:1; translate:-50% -50%;
        border-radius:50%; mix-blend-mode:screen;
        background:radial-gradient(circle, rgb(255 205 130 / .62) 0%, rgb(255 160 70 / .26) 32%, transparent 68%);
        animation:vela var(--t, 2.4s) ease-in-out var(--dl, 0s) infinite;
    }
}
@keyframes kb{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
@keyframes kb-m{ from{ transform:scale(1); } to{ transform:scale(1.04); } }
@keyframes word-in{ from{ opacity:.01; transform:translateY(105%); } to{ opacity:1; transform:none; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes vela{ 0%,100%{ opacity:.55; scale:1; } 18%{ opacity:.95; scale:1.07; } 37%{ opacity:.62; scale:.96; } 58%{ opacity:1; scale:1.09; } 79%{ opacity:.7; scale:1; } }
/* Idiomas siempre visibles en la cabecera; en el teléfono, compactos junto al menú */
.lang{ display:flex; }
@media (max-width:599px){
    .hdr__end{ gap:4px; }
    .lang{ gap:0; }
    .lang__a{ min-width:30px; font-size:12px; letter-spacing:.06em; }
    .lang__a[aria-current]{ text-underline-offset:6px; }
    .burger{ width:44px; }
}
@media (max-width:374px){
    .logo__txt{ font-size:22px; }
    .logo__mark{ width:30px; height:30px; }
    .lang__a{ min-width:27px; font-size:11.5px; }
}
/* Franja oscura suave arriba de la portada: la cabecera transparente se lee sobre cualquier foto */
.hero__veil::before{ content:""; position:absolute; inset:0 0 auto; height:calc(var(--hdr-h) + 80px); background:linear-gradient(rgb(var(--oscuro-rgb) / .6), transparent); }

/* ---------- Animaciones sin fin: solo mientras se ven ----------
   script.js pone .is-quieto al bloque que está fuera de la pantalla: fuera de la vista no se anima nada
   (ni el acercamiento de la foto, ni la cinta, ni el pulso de «abierto»); al volver empiezan de nuevo. */
.is-quieto .hero__kb, .is-quieto .hero__scroll i, .is-quieto .hero__luces i, .cinta.is-quieto .cinta__track,
.is-quieto .dot.is-open, .is-quieto .dot.is-open::after{ animation:none !important; }

/* ---------- Teléfono y pantallas táctiles: el mismo aspecto, menos trabajo para la tarjeta gráfica ----------
   Sin grano, sombras cortas, sin 3D (la inclinación es solo con ratón), cinta de platos con «imán» suave,
   pulso de «abierto» con transform (no repinta la página), sin desenfoques. En el ordenador no cambia nada. */
@media (hover:none), (pointer:coarse){
  :root{
    --grano:none;
    --sombra-1:0 1px 2px rgb(var(--texto-rgb) / .07), 0 6px 14px -8px rgb(var(--texto-rgb) / .24);
    --sombra-2:0 2px 4px rgb(var(--texto-rgb) / .08), 0 10px 20px -10px rgb(var(--texto-rgb) / .32);
    --sombra-3:0 3px 8px rgb(var(--texto-rgb) / .1), 0 16px 28px -14px rgb(var(--texto-rgb) / .4);
  }
  .hdr.is-solid{ box-shadow:0 1px 0 var(--linea); }
  .bookbar .btn{ box-shadow:0 6px 16px -8px rgb(var(--texto-rgb) / .5); }
  .dish, .rev{ perspective:none; }
  .dish__card, .rev__card{ transform-style:flat; }
  .platos__vp{ scroll-snap-type:x proximity; }
  .dot.is-open{ position:relative; }
  @media (prefers-reduced-motion:no-preference){
    .dot.is-open{ animation:none; }
    .dot.is-open::after{ content:""; position:absolute; inset:0; border-radius:50%; background:rgb(var(--exito-rgb) / .5); animation:pulse-t 2.6s ease-out infinite; }
  }
}
@keyframes pulse-t{ 0%{ transform:scale(1); opacity:1; } 70%,100%{ transform:scale(3.25); opacity:0; } }