/* Maralba Restaurante by Fran Martínez · propuesta (nov-2026)
   Lino de sus cortinas, tinta y el azul de su vajilla. Marcellus (de la familia de su «MARALBA») y EB Garamond. */
@font-face{ font-family:'Marcellus'; src:url(../fonts/marcellus-400.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'EB Garamond'; src:url(../fonts/garamond-400.woff2) format('woff2'); font-weight:400 500; font-display:swap; }

:root{
  --lino:#f3eee6; --papel:#faf7f2; --tinta:#1d1b18; --tinta-2:#5d574e; --mar:#2b4866; --noche:#121a22;
  --filete:rgba(29,27,24,.16); --filete-claro:rgba(243,238,230,.28);
  --display:'Marcellus', 'Trajan Pro', Georgia, serif; --texto:'EB Garamond', Garamond, Georgia, serif;
  --nav-h:76px; --lado:clamp(16px, 4.5vw, 64px);
  --fw:clamp(118px, 13vw, 190px);   /* ancho del símbolo en la firma */
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:var(--nav-h); overflow-x:clip; }
body{ margin:0; background:var(--lino); color:var(--tinta); font-family:var(--texto); font-size:1.18rem; line-height:1.55; overflow-x:clip; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; line-height:1.08; letter-spacing:.005em; }
h2{ font-size:clamp(2.3rem, 4.6vw, 4.4rem); }
p{ margin:0; }
figure{ margin:0; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- botones (acabado de Almo: cuadrados, filete de 1 px, mayúsculas espaciadas) */
.boton{ display:inline-flex; align-items:center; justify-content:center; padding:1.05em 2.2em; border:1px solid var(--tinta); background:var(--tinta); color:var(--lino);
  font-family:var(--display); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; line-height:1; white-space:nowrap;
  transition:background .5s ease, color .5s ease, border-color .5s ease; }
.boton:hover{ background:transparent; color:var(--tinta); }
.boton--claro{ background:transparent; border-color:rgba(243,238,230,.75); color:var(--lino); }
.boton--claro:hover{ background:var(--lino); border-color:var(--lino); color:var(--tinta); }
.boton--linea{ background:transparent; color:var(--tinta); }
.boton--linea:hover{ background:var(--tinta); color:var(--lino); }
.boton--nav{ padding:.85em 1.5em; font-size:.74rem; }

/* ---------- firma (logo trazado de su web) y sellos */
.firma{ display:flex; flex-direction:column; align-items:center; margin:0; color:inherit; font-size:0; }
.simbolo{ position:relative; display:block; width:var(--fw); aspect-ratio:442/432; }
.simbolo__suelo{ position:absolute; inset:0; overflow:hidden; }
.simbolo__capa{ position:absolute; inset:0; width:100%; height:100%; fill:currentColor; }
.firma__nombre{ display:block; width:calc(var(--fw) * 1.278); margin-top:calc(var(--fw) * .066); }
.firma__by{ display:block; width:calc(var(--fw) * .86); margin-top:calc(var(--fw) * .054); }
.firma__letras{ display:block; width:100%; height:auto; fill:currentColor; }
.sellos{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(26px, 3vw, 44px); margin-top:clamp(26px, 4vh, 44px); }
.sello{ display:block; height:clamp(70px, 7vw, 102px); width:auto; overflow:visible; }
.sello--michelin{ height:clamp(48px, 4.7vw, 68px); }
.sellos .michelin__marca, .sellos .repsol__texto{ fill:var(--lino); }
.grupo{ display:flex; flex-direction:column; align-items:center; color:var(--lino); }

/* ---------- precarga: en cada carga, 3–4 s; se acelera con un clic, un toque, la rueda o una tecla */
.entrada{ display:none; }
.anima .entrada{ display:block; position:fixed; inset:0; z-index:100; }
.vuelta .entrada{ display:none; }
.entrada__fondo{ position:absolute; inset:0; background:var(--noche); opacity:.999; }
.entrada__marca{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.entrada .grupo{ will-change:transform; }
.intro{ overflow:hidden; }
.intro body{ overflow:hidden; }
.intro .nav, .intro .portada__grupo, .intro .portada__pie{ opacity:0; }
/* estado inicial de las piezas mientras se dibujan (solo con animación) */
.anima .entrada .simbolo__tierra{ transform:translate3d(0,101%,0); }
.anima .entrada .simbolo__ola{ opacity:0; }
.anima .entrada .firma__nombre, .anima .entrada .firma__by{ opacity:0; }
.anima .entrada .sello{ opacity:0; }

/* ---------- nav: siempre a la vista, con Reservar */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 var(--lado); background:var(--lino); color:var(--tinta); border-bottom:1px solid var(--filete); transition:background-color .45s ease, color .45s ease, border-color .45s ease; }
.nav.sobre-portada{ background:transparent; color:var(--lino); border-color:transparent; }
.nav__logo{ display:flex; align-items:center; gap:14px; text-decoration:none; flex:none; }
.nav__simbolo{ width:34px; height:auto; fill:currentColor; }
.nav__nombre{ width:118px; height:auto; fill:currentColor; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(16px, 2.2vw, 34px); }
.nav__enlaces > a:not(.boton){ text-decoration:none; font-size:1.06rem; letter-spacing:.02em; position:relative; padding:6px 0; }
.nav__enlaces > a:not(.boton)::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .45s ease; }
.nav__enlaces > a:not(.boton):hover::after{ transform:scaleX(1); }
.nav.sobre-portada .boton--nav{ background:transparent; border-color:rgba(243,238,230,.75); color:var(--lino); }
.nav.sobre-portada .boton--nav:hover{ background:var(--lino); color:var(--tinta); }
.nav__reservar--movil, .nav__abrir{ display:none; }

/* ---------- portada */
.portada{ position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:var(--noche); color:var(--lino); }
.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.8s ease; transform:scale(1.04); }
.portada__fotos img[data-activa]{ opacity:1; animation:acerca 9s linear both; }
@keyframes acerca{ from{ transform:scale(1.04); } to{ transform:scale(1.11); } }
.portada.pausa .portada__fotos img{ animation-play-state:paused; }
.portada__velo{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 46%, rgba(12,17,22,.7) 0%, rgba(12,17,22,.48) 55%, rgba(12,17,22,.58) 100%); }
.portada__marca{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--nav-h) var(--lado) 0; }
.portada__pie{ margin-top:clamp(28px, 4.6vh, 48px); }

/* ---------- cocina manchega con balcones al Mediterráneo: las olas del logo llegan a la A */
.cocina{ position:relative; padding-bottom:clamp(70px, 11vh, 130px); overflow:hidden; overflow:clip; }
.cocina__fijo{ min-height:100vh; display:grid; grid-template-columns:1fr minmax(220px, 27vw) 1fr; grid-template-rows:auto 1fr; align-items:center; column-gap:4.5vw;
  padding:calc(var(--nav-h) + 5vh) var(--lado) 4vh; }
.cocina__titulo{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; gap:4vw; font-size:clamp(2.1rem, 4.2vw, 4.3rem); }
.cocina__t{ display:block; }
.cocina__t--mar{ text-align:right; }
.cocina__foto{ width:min(24vw, 370px); aspect-ratio:3/4; overflow:hidden; }
.cocina__foto img{ width:100%; height:100%; object-fit:cover; }
.cocina__foto--tierra{ justify-self:end; }
.cocina__foto--mar{ justify-self:start; }
.cocina__centro{ display:flex; justify-content:center; color:var(--tinta); }
.cocina__simbolo{ --fw:min(27vw, 52vh); }
.cocina__simbolo .simbolo__ola{ fill:var(--mar); }
.cocina__linea{ max-width:30ch; margin:clamp(24px, 4vh, 50px) auto 0; padding:0 var(--lado); text-align:center; font-size:clamp(1.35rem, 2vw, 1.75rem); line-height:1.4; color:var(--tinta); }

/* ---------- menús, como carta de imprenta */
.menus{ --claro-2:rgba(243,238,230,.66); padding:clamp(80px, 13vh, 150px) var(--lado); text-align:center; background:var(--noche); color:var(--lino); }
.menus > h2{ margin-bottom:clamp(40px, 7vh, 80px); }
.menus__pestanas{ display:none; }
.menus__lista{ display:grid; grid-template-columns:repeat(3, 1fr); max-width:1240px; margin:0 auto; }
.menu{ padding:8px clamp(18px, 3vw, 48px) 0; display:flex; flex-direction:column; align-items:center; }
.menu + .menu{ border-left:1px solid var(--filete-claro); }
.menu__nombre{ font-size:clamp(1.8rem, 2.5vw, 2.4rem); min-height:2.3em; display:flex; align-items:flex-end; justify-content:center; }
.menu__lema{ margin-top:14px; max-width:24ch; color:var(--claro-2); font-size:1.12rem; line-height:1.45; min-height:4.35em; }
.menu__ola{ width:38px; height:auto; fill:#8eaecb; margin:22px auto 20px; }
.menu__pases{ list-style:none; padding:0; margin:0 0 26px; font-size:1.16rem; line-height:1.5; flex:1; }
.menu__pases li{ padding:7px 0; }
.menu__precio{ font-size:1rem; color:var(--claro-2); }
.menu__precio span{ display:block; font-family:var(--display); font-size:clamp(2.4rem, 3.4vw, 3.1rem); color:var(--lino); line-height:1.1; }
.menu__vinos{ margin-top:10px; font-size:1.05rem; color:var(--claro-2); }
.menu__vinos span{ color:var(--lino); font-family:var(--display); }
.menus__notas{ max-width:64ch; margin:clamp(50px, 8vh, 90px) auto 36px; color:var(--claro-2); font-size:1.04rem; line-height:1.55; }
.menus__notas p + p{ margin-top:6px; }

/* ---------- Fran y Cristina */
.equipo{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); grid-template-rows:auto auto; column-gap:clamp(30px, 6vw, 110px); row-gap:clamp(40px, 6vh, 70px);
  padding:clamp(90px, 14vh, 160px) var(--lado); max-width:1440px; margin:0 auto; align-items:start; }
.equipo__foto{ grid-row:1 / span 2; }
.equipo__texto{ align-self:end; max-width:34rem; }
.equipo__fecha{ margin-top:22px; font-family:var(--display); font-size:clamp(1.25rem, 1.7vw, 1.55rem); }
.equipo__texto > p:not(.equipo__fecha){ margin-top:14px; font-size:1.3rem; line-height:1.45; color:var(--tinta-2); }
.equipo__personas{ margin:34px 0 0; display:grid; gap:18px; }
.equipo__personas div{ border-top:1px solid var(--filete); padding-top:14px; }
.equipo__personas dt{ font-family:var(--display); font-size:1.5rem; }
.equipo__personas dd{ margin:4px 0 0; color:var(--tinta-2); font-size:1.12rem; }
.equipo__bodega{ width:min(100%, 34rem); }

/* ---------- regala */
.regala{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); align-items:center; gap:clamp(30px, 5vw, 80px); padding:0 var(--lado) clamp(90px, 14vh, 160px); max-width:1440px; margin:0 auto; }
.regala__texto{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; }

/* ---------- visítanos */
.visitanos{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(30px, 6vw, 110px); padding:clamp(90px, 14vh, 160px) var(--lado); background:var(--papel); border-top:1px solid var(--filete); }
.visitanos__foto{ max-width:560px; justify-self:end; width:100%; }
.visitanos__datos{ max-width:36rem; align-self:center; }
.visitanos__dir{ margin-top:22px; font-family:var(--display); font-size:clamp(1.3rem, 1.8vw, 1.6rem); line-height:1.35; }
.visitanos__dir a{ text-decoration:none; }
.horario{ margin:30px 0 0; }
.horario-lista{ list-style:none; margin:0; padding:0; }
.horario-lista li{ display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-top:1px solid var(--filete); }
.horario-lista li:last-child{ border-bottom:1px solid var(--filete); }
.horario-lista span:first-child{ font-family:var(--display); font-size:1.08rem; padding-top:2px; }
.horario-lista span:last-child{ color:var(--tinta-2); text-align:right; }
.regala__foto{ width:100%; }
.visitanos__nota{ margin-top:18px; font-size:1.05rem; color:var(--tinta-2); }
.visitanos__contacto{ margin-top:22px; display:flex; flex-wrap:wrap; gap:6px 26px; font-size:1.18rem; }
.visitanos__contacto a{ text-decoration-thickness:1px; text-underline-offset:4px; }
.visitanos__botones{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- pie */
.pie{ background:var(--noche); color:var(--lino); padding:clamp(60px, 10vh, 100px) var(--lado) 40px; display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center; }
.pie__logo{ display:flex; flex-direction:column; align-items:center; gap:16px; text-decoration:none; }
.pie__simbolo{ width:64px; height:auto; fill:currentColor; }
.pie__nombre{ width:150px; height:auto; fill:currentColor; }
.pie__redes{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center; }
.pie__redes a{ text-decoration:none; border-bottom:1px solid var(--filete-claro); padding-bottom:2px; }
.pie__legal{ font-size:.95rem; opacity:.6; }

/* ---------- fotos que se despliegan al bajar: una tapa del color del fondo se retira (variable --t, atada al scroll) */
.desp{ position:relative; overflow:hidden; }
.desp img{ width:100%; height:auto; }
.anima .desp::after{ content:''; position:absolute; inset:-1px; background:var(--tapa, var(--lino)); transform:translate3d(0, calc(var(--t, 0) * -101%), 0); pointer-events:none; }
.anima .desp img{ transform:scale(calc(1.14 - .14 * var(--t, 0))); }
.visitanos .desp{ --tapa:var(--papel); }

/* ---------- botón de subir */
.to-top{ position:fixed; right:18px; bottom:18px; z-index:40; width:46px; height:46px; border-radius:50%; border:0; background:var(--tinta); color:var(--lino); display:grid; place-items:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translate3d(0,10px,0); transition:opacity .4s ease, transform .4s ease, visibility 0s linear .4s; }
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; transition:opacity .4s ease, transform .4s ease, visibility 0s; }

/* ---------- tablet y móvil */
@media (max-width: 960px){
  :root{ --nav-h:64px; --fw:clamp(112px, 30vw, 160px); }
  body{ font-size:1.12rem; }
  .nav{ gap:12px; }
  .nav__nombre{ width:96px; }
  .nav__simbolo{ width:28px; }
  .nav__enlaces{ position:fixed; inset:0; z-index:-1; flex-direction:column; justify-content:center; gap:22px; background:var(--noche); color:var(--lino);
    opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s; }
  .nav__enlaces > a:not(.boton){ font-family:var(--display); font-size:2rem; }
  .nav--abierta .nav__enlaces{ opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s; }
  .nav--abierta{ color:var(--lino); background:transparent; border-color:transparent; }
  .nav__reservar{ display:none; }
  .nav__reservar--movil{ display:inline-flex; margin-left:auto; }
  .nav--abierta .nav__reservar--movil{ background:transparent; border-color:rgba(243,238,230,.75); color:var(--lino); }
  .nav__abrir{ display:block; width:40px; height:40px; border:0; background:none; color:inherit; position:relative; cursor:pointer; padding:0; margin-right:-8px; }
  .nav__abrir span{ position:absolute; left:9px; right:9px; height:1px; background:currentColor; transition:transform .35s ease; }
  .nav__abrir span:first-child{ top:16px; } .nav__abrir span:last-child{ top:23px; }
  .nav--abierta .nav__abrir span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .nav--abierta .nav__abrir span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

  .cocina__fijo{ min-height:0; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; column-gap:14px; row-gap:34px; padding:clamp(80px, 12vh, 120px) var(--lado) 0; }
  .cocina__titulo{ flex-direction:column; align-items:flex-start; gap:4px; font-size:clamp(2rem, 8.4vw, 3.2rem); }
  .cocina__t--mar{ text-align:left; }
  .cocina__centro{ grid-column:1 / -1; grid-row:2; }
  .cocina__simbolo{ --fw:min(58vw, 300px); }
  .cocina__foto{ width:100%; grid-row:3; }
  .cocina__foto--tierra{ grid-column:1; } .cocina__foto--mar{ grid-column:2; }

  .menus__pestanas{ display:flex; position:sticky; top:var(--nav-h); z-index:5; justify-content:center; gap:4px; margin:0 calc(var(--lado) * -1) 28px; padding:10px var(--lado);
    background:var(--noche); border-bottom:1px solid var(--filete-claro); overflow-x:auto; scrollbar-width:none; }
  .menus__pestanas::-webkit-scrollbar{ display:none; }
  .menus__pestanas button{ flex:none; border:0; background:none; font-family:var(--display); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--claro-2);
    padding:12px 14px; border-bottom:1px solid transparent; cursor:pointer; }
  .menus__pestanas button[aria-selected="true"]{ color:var(--lino); border-color:var(--lino); }
  .menus > h2{ margin-bottom:28px; }
  .menus__lista{ grid-template-columns:1fr; }
  .js .menu{ display:none; }
  .js .menu[data-activo]{ display:flex; }
  .menu + .menu{ border-left:0; }
  .menu__nombre, .menu__lema{ min-height:0; }

  .equipo{ grid-template-columns:1fr; grid-template-rows:none; }
  .equipo__foto{ grid-row:auto; }
  .equipo__bodega{ width:100%; }
  .regala{ grid-template-columns:1fr; }
  .visitanos{ grid-template-columns:1fr; }
  .visitanos__foto{ justify-self:stretch; max-width:none; }
}
@media (max-width: 520px){
  .nav__nombre{ display:none; }
  .sello{ height:58px; } .sello--michelin{ height:50px; }
  .horario-lista li{ flex-direction:column; gap:2px; }
  .horario-lista span:last-child{ text-align:left; }
  .visitanos__botones .boton{ flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce){
  .portada__fotos img[data-activa]{ animation:none; }
}
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.to-top{ box-shadow:0 0 0 1px rgba(243,238,230,.32); }
.sello__flor, .sello__letras, .repsol__sol{ transform-box:fill-box; }