/* ============================================================
   LE MORITA — hoja de estilos
   Paleta de marca: B07908 · 022B3B · C0ECCD · DDD0D2
   Tipografía de marca: Playfair Display
   ============================================================ */

:root{
  --gold:#B07908;
  --navy:#022B3B;
  --mint:#C0ECCD;
  --mint-foto:#CFEBD5;   /* el verde exacto del fondo del flat-lay */
  --rose:#DDD0D2;
  --blush:#F1E3E1;

  --cream:#F8F5F0;
  --taupe:#C0B4AA;
  --ink:#0B1D26;
  --muted:#5C6B72;

  --display:"Playfair Display", "Times New Roman", serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  --script:"Parisienne", "Snell Roundhand", cursive;

  --nav-h:66px;
  --pad:clamp(1.25rem, 5vw, 5.5rem);
  --maxw:1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  /* el fondo del cuerpo es el color del vídeo: al deslizarse hacia abajo
     no aparece ningún hueco claro por encima */
  background:var(--navy);
  color:var(--navy);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.display{
  font-family:var(--display);
  text-wrap:balance;
  font-weight:400;
  letter-spacing:.06em;
  line-height:1.16;
  text-transform:uppercase;
}
.script{
  font-family:var(--script);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--gold);
}
.eyebrow{
  font-size:.72rem;
  letter-spacing:.34em;
  color:var(--gold);
  font-weight:400;
}
.lead{ color:var(--muted); max-width:52ch; }

/* ---------- botones ---------- */
.btn{
  display:inline-block;
  padding:.95rem 2.1rem;
  background:var(--navy);
  color:var(--cream);
  font-size:.74rem;
  letter-spacing:.22em;
  font-weight:400;
  border:1px solid var(--navy);
  transition:background .35s ease, color .35s ease, transform .35s ease;
}
.btn:hover{ background:transparent; color:var(--navy); transform:translateY(-2px); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn--gold:hover{ background:transparent; color:var(--gold); }
.btn--ghost{ background:transparent; border-color:rgba(248,245,240,.5); color:var(--cream); }
.btn--ghost:hover{ background:var(--cream); color:var(--navy); border-color:var(--cream); }
.btn--pill{
  background:#fff; color:var(--gold); border:2px solid var(--gold);
  border-radius:999px; padding:.9rem 2.4rem;
}
.btn--pill:hover{ background:var(--gold); color:#fff; }
.btn--nav{
  padding:.62rem 1.7rem;
  font-size:.66rem;
  letter-spacing:.2em;
  border-radius:999px;
  line-height:1;
}
.btn--outline{ background:transparent; color:var(--navy); border-color:rgba(2,43,59,.35); }
.btn--outline:hover{ background:var(--navy); color:var(--cream); border-color:var(--navy); }
.nav__links a.btn{
  /* `.nav__links a` pisaba el padding del botón y lo dejaba sin aire */
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1.6rem .66rem; color:var(--cream);
}
.nav__links a.btn:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* ============================================================
   EL GIRO — intro en vídeo anclada, avanza con el scroll
   ============================================================ */
.intro{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:var(--navy);
}
.intro__video{
  width:100%; height:100%;
  object-fit:cover;
}
/* Secuencia de fotogramas: el sustituto del vídeo en vertical. Oculta por
   defecto; sólo entra en juego en la media query de móvil de más abajo.
   Es un lienzo y no un <img> porque cambiar el src de una imagen deja el
   hueco en blanco mientras se decodifica el AVIF, y eso era el parpadeo.
   Pintar con drawImage no borra lo que ya había. El recorte lo hace
   main.js, que en un lienzo no vale object-fit.                          */
.intro__frames{
  display:none;
  position:absolute; inset:0;
  width:100%; height:100%;
  background:var(--navy);
}
.intro__grain{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 74%, rgba(2,43,59,.32) 100%);
  pointer-events:none;
}
.intro__scroll{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  padding:.7rem 1.5rem .55rem;
  border-radius:999px;
  background:rgba(2,43,59,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:rgba(255,255,255,.92);
  font-size:.66rem; letter-spacing:.36em; text-transform:uppercase;
  animation:floaty 2.4s ease-in-out infinite;
}
.intro__scroll svg{ width:20px; height:34px; fill:none; stroke:currentColor; stroke-width:1.2; }
@keyframes floaty{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,10px);} }

/* El contenido se levanta por encima del vídeo.
   Los primeros 100vh de scroll sirven para que el vídeo se reproduzca entero
   (queda anclado); a partir de ahí la sección del local empieza a subir.   */
.site{
  position:relative;
  z-index:2;
  margin-top:200vh;
  background:var(--cream);
  box-shadow:0 -40px 80px rgba(2,43,59,.28);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  transform:translateY(calc(-100% - 90px));   /* incluye el logo que sobresale */
  transition:transform .5s cubic-bezier(.22,.8,.3,1);
}
.nav.is-visible{ transform:none; }
.nav__bar{
  position:relative;
  height:var(--nav-h);
  background:var(--cream);
  border-bottom:1px solid rgba(176,121,8,.45);
  display:flex; align-items:center;
  padding:0 var(--pad);
}
.nav__menu{ display:flex; width:100%; justify-content:space-between; align-items:center; }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.4rem); }
.nav__links--left{ padding-right:90px; }
.nav__links--right{ padding-left:90px; }
.nav__links a{
  font-size:.7rem; letter-spacing:.2em; color:var(--navy);
  transition:color .3s ease;
  position:relative; padding:.35rem 0; white-space:nowrap;
}
.nav__links a:not(.btn):not(.nav__ig)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .35s ease;
}
.nav__links a:not(.btn):not(.nav__ig):hover{ color:var(--gold); }
.nav__links a:not(.btn):not(.nav__ig):hover::after{ width:100%; }

.nav__logo{
  /* la barra es baja, pero el logo mantiene su tamaño y sobresale redondo */
  position:absolute; left:50%; top:7px; transform:translateX(-50%);
  width:54px; padding:14px;
  background:var(--cream);
  border:1px solid rgba(176,121,8,.55);
  border-radius:50%;
  box-sizing:content-box;
}
.nav__logo img{ width:100%; transition:transform .6s ease; }
.nav__logo:hover img{ transform:rotate(8deg); }

.nav__social{ display:flex; align-items:center; gap:.9rem; }
.nav__ig{ display:inline-flex; padding:0 !important; }
.nav__ig svg{
  width:22px; height:22px; fill:none; stroke:var(--navy); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .3s ease;
}
.nav__ig:hover svg{ stroke:var(--gold); }

.nav__burger{
  display:none;
  width:34px; height:26px; padding:0; border:0; background:none; cursor:pointer;
}
.nav__burger span{
  display:block; height:1.4px; background:var(--navy); margin:7px 0;
  transition:transform .3s ease, opacity .3s ease;
}
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(8.4px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-8.4px) rotate(-45deg); }

/* ============================================================
   BIENVENIDA
   ============================================================ */
.welcome{ position:relative; padding:clamp(3rem,7vw,5.5rem) 0 clamp(5rem,10vw,9rem); overflow:hidden; }
.welcome__band{
  position:absolute; left:0; right:0; top:0;
  height:clamp(380px,50vw,660px);
  background:var(--rose);
}
.welcome__inner{
  position:relative;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.welcome__media{
  position:relative;
  align-self:start;                 /* la foto baja y asoma por debajo de la banda */
  padding:clamp(2rem,4vw,3.4rem) 0 0;
}
.welcome__plate{
  position:absolute; left:-2%; top:0; width:78%; height:62%;
  background:var(--mint);
}
.welcome__arch{
  position:relative;
  width:min(78%,420px); margin-left:8%;
  aspect-ratio:3/4.35;
  border-radius:999px 999px 8px 8px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(2,43,59,.18);
}
.welcome__arch img{ width:100%; height:100%; object-fit:cover; }
.welcome__text .script{ font-size:clamp(2rem,3.6vw,2.9rem); line-height:1; }
.welcome__text h1{ font-size:clamp(1.7rem,3.3vw,2.85rem); margin:1.1rem 0 1.4rem; }
.welcome__text .lead{ margin-bottom:2.2rem; }

/* ============================================================
   CALMA (buda)
   ============================================================ */
.calma{
  background:var(--cream);
  padding:clamp(3.5rem,8vw,6.5rem) 0;
  overflow:hidden;
}
.calma__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 0 0 var(--pad);
  display:grid; grid-template-columns:1fr minmax(260px,430px);
  gap:clamp(2rem,6vw,5rem); align-items:center;
}
.calma__text{ order:1; max-width:56ch; }
.calma__text h2{ font-size:clamp(1.7rem,3.2vw,2.7rem); margin:1rem 0 1.3rem; }
.calma__text .lead{ color:var(--muted); }
.calma__chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.calma__chips li{
  border:1px solid rgba(2,43,59,.22);
  border-radius:999px;
  padding:.42rem 1.05rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
/* la foto va al borde derecho de la pantalla */
.calma__media{ order:2; }
.calma__media img{
  width:100%;
  height:clamp(380px,50vw,620px);
  object-fit:cover;
  object-position:center 38%;
}

/* ============================================================
   MARQUEE sobre el flat-lay
   ============================================================ */
.marquee{
  position:relative;
  background:var(--mint-foto);
  overflow:hidden;
}
.marquee__rows{ padding:clamp(1.4rem,3vw,2.4rem) 0 clamp(1rem,2.2vw,1.8rem); background:var(--navy); }
.marquee__photo{ margin:clamp(1.5rem,4vw,3rem) auto 0; line-height:0; max-width:min(920px, 88%); }
.marquee__photo img{
  width:100%; height:auto;
  /* los bordes se funden con el verde de la sección: no se ve el recuadro */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-composite:intersect;
}

.marquee__cta{
  text-align:center;
  padding:clamp(1.5rem,4vw,2.6rem) var(--pad) clamp(3rem,6vw,4.5rem);
}
.marquee__cta-title{
  font-family:var(--display);
  color:var(--gold);
  font-size:clamp(1.1rem,2.4vw,1.7rem);
  letter-spacing:.14em;
}
.marquee__cta-sub{
  font-size:.74rem; letter-spacing:.3em; color:var(--navy); margin:.35rem 0 1.4rem;
}
.marquee__row{ position:relative; overflow:hidden; padding:.35rem 0; }
.marquee__row + .marquee__row{ margin-top:clamp(.6rem,2vw,1.6rem); }
.marquee__track{
  display:flex; align-items:center; gap:0;
  width:max-content;
  will-change:transform;
}
.outline{
  font-family:'Tanker', var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2.6rem,7.5vw,6.2rem);
  line-height:1.05;
  padding:.12em 0;
  margin-right:2.4rem;
  color:transparent;
  -webkit-text-stroke:1.6px var(--cream);
  white-space:nowrap;
}
.outline--solid{ -webkit-text-stroke:1.6px var(--gold); }
.dot{ color:var(--gold); font-size:clamp(.9rem,2vw,1.4rem); margin-right:2.4rem; }

/* ============================================================
   PLATOS DESTACADOS
   ============================================================ */
.destacados{ background:#fff; padding:clamp(4rem,8vw,6rem) var(--pad) clamp(1rem,3vw,2rem); max-width:var(--maxw); margin:0 auto; }
.destacados__head{ text-align:center; margin-bottom:2.8rem; }
.destacados__head .script{ font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1; color:var(--taupe); }
.destacados__head h2{ font-size:clamp(1.4rem,2.8vw,2.2rem); margin-top:.5rem; }
.destacados__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.destacado-card{
  display:flex; flex-direction:column; align-items:center;
  background:var(--card-bg,var(--cream));
  border-radius:28px;
  padding:1.3rem 1.2rem 1.6rem;
  text-align:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
.destacado-card:hover{ transform:translateY(-6px); box-shadow:0 18px 30px -18px rgba(2,43,59,.35); }
.destacado-card__photo{
  width:100%; aspect-ratio:3/4; overflow:hidden;
  border-radius:999px 999px 18px 18px;
  margin-bottom:1.2rem;
}
.destacado-card__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.destacado-card:hover .destacado-card__photo img{ transform:scale(1.06); }
.destacado-card__name{ font-family:var(--display); font-size:.95rem; letter-spacing:.02em; text-transform:uppercase; color:var(--navy); margin-bottom:.4rem; }
.destacado-card__price{ font-family:var(--display); color:var(--gold); font-size:1.05rem; letter-spacing:.03em; }
.destacados__cta{ text-align:center; padding:clamp(2rem,4vw,3rem) 0 clamp(2rem,4vw,3rem); }

/* ============================================================
   LA CARTA
   ============================================================ */
.carta{ padding:clamp(4rem,8vw,7rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.carta__head{ text-align:center; margin-bottom:2.6rem; }
.carta__head .script{ font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1; }
.carta__head h2{ font-size:clamp(1.5rem,3vw,2.4rem); margin:.6rem 0 1rem; }
.carta__head .lead{ margin:0 auto; max-width:44ch; text-wrap:balance; }

.carta__tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.tab{
  font-family:var(--sans); font-weight:300;
  font-size:.7rem; letter-spacing:.2em;
  padding:.6rem 1.3rem;
  border:1px solid rgba(2,43,59,.22);
  border-radius:999px;
  background:transparent; color:var(--navy);
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.tab:hover{ border-color:var(--gold); color:var(--gold); }
.tab.is-active{ background:var(--navy); border-color:var(--navy); color:var(--cream); }

.carta__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
  gap:clamp(1.2rem,2.4vw,2.2rem);
}
.carta__more{ display:flex; justify-content:center; margin-top:clamp(2rem,4vw,3rem); }
.carta__more.is-done{ display:none; }
.dish{ transition:opacity .4s ease, transform .4s ease; }
.dish.is-hidden{ display:none; }
.dish__img{ overflow:hidden; background:var(--rose); }
.dish__img img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
}
.dish:hover .dish__img img{ transform:scale(1.05); }
.dish h4{
  font-family:var(--display); font-size:1.08rem; letter-spacing:.02em;
  margin:1rem 0 .35rem;
}
.dish p{ font-size:.9rem; color:var(--muted); line-height:1.55; }

/* ============================================================
   CELEBRACIONES
   ============================================================ */
.celebra{ background:var(--rose); padding:clamp(4rem,8vw,7rem) 0; }
.celebra__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.celebra__text h2{ font-size:clamp(1.7rem,3.2vw,2.7rem); margin:1rem 0 1.3rem; }
.celebra__text .lead{ color:rgba(11,29,38,.7); margin-bottom:2rem; }
.celebra__imgs{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.celebra__imgs img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.celebra__imgs img:first-child{ margin-top:2.5rem; }

/* ============================================================
   EL LUGAR
   ============================================================ */
.lugar{ padding:clamp(4rem,8vw,7rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.lugar__head{ text-align:center; margin-bottom:2.6rem; }
.lugar__head .script{ font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1; }
.lugar__head h2{ font-size:clamp(1.4rem,2.8vw,2.2rem); margin-top:.5rem; }
.lugar__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.lugar__grid figure{ margin:0; overflow:hidden; }
.lugar__grid img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
}
.lugar__grid figure:hover img{ transform:scale(1.06); }

/* ============================================================
   CATÁLOGO (promo)
   ============================================================ */
.catalogo-promo{ background:#fff; padding:clamp(3rem,6vw,4.5rem) var(--pad); text-align:center; }
.catalogo-promo__inner{ max-width:480px; margin:0 auto; }
.catalogo-promo__inner h2{ font-size:clamp(1.5rem,3vw,2.3rem); margin:.6rem 0 1.1rem; text-wrap:balance; }
.catalogo-promo__inner .lead{ color:rgba(11,29,38,.7); margin-bottom:1.8rem; text-wrap:pretty; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--navy); color:var(--cream); padding:clamp(4rem,8vw,6rem) var(--pad) 2.5rem; }
.footer__top{ text-align:center; max-width:640px; margin:0 auto clamp(3rem,6vw,4.5rem); }
.footer__logo{ width:150px; margin:0 auto 1.6rem; }
.footer__top h2{ font-size:clamp(1.6rem,3vw,2.4rem); }
.footer__top .lead{ color:rgba(248,245,240,.68); margin:1rem auto 2rem; }
.footer__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.footer__cols{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
  border-top:1px solid rgba(248,245,240,.16);
  border-bottom:1px solid rgba(248,245,240,.16);
  padding:2.6rem 0;
}
.footer__cols h5{
  font-family:var(--sans); font-weight:400; font-size:.7rem; letter-spacing:.28em;
  color:var(--gold); margin:0 0 .9rem;
}
.footer__cols p{ font-size:.92rem; color:rgba(248,245,240,.75); line-height:1.9; }
.footer__cols a:hover{ color:var(--gold); }
.footer__bottom{
  max-width:var(--maxw); margin:0 auto; padding-top:2.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.footer__bottom img{ width:230px; opacity:.9; }
.footer__bottom small{ font-size:.72rem; letter-spacing:.08em; color:rgba(248,245,240,.5); }
.footer__credit a{ color:rgba(248,245,240,.75); border-bottom:1px solid rgba(176,121,8,.6); transition:color .3s ease; }
.footer__credit a:hover{ color:var(--gold); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   PÁGINA /menu — carta completa con precios
   ============================================================ */
.nav--static{ position:relative; transform:none; }
.nav--static .nav__bar{ box-shadow:0 1px 0 rgba(2,43,59,.06); }

.carta-page{ padding:clamp(4rem,8vw,6rem) var(--pad) 0; max-width:var(--maxw); margin:0 auto; }
.carta-page__head{ text-align:center; margin-bottom:2.2rem; }
.carta-page__head .script{ font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1; }
.carta-page__head h1{ font-size:clamp(1.7rem,3.4vw,2.7rem); margin:.6rem 0 1rem; }
.carta-page__head .lead{ margin:0 auto; max-width:48ch; text-wrap:balance; }

.carta-cats{ padding-bottom:clamp(4rem,8vw,6rem); }

.carta-cat{ padding-top:clamp(3rem,6vw,4.5rem); scroll-margin-top:calc(var(--nav-h) + 1.2rem); }
.carta-cat + .carta-cat{ border-top:1px solid rgba(2,43,59,.1); }
.carta-cat.is-hidden{ display:none; }

.carta-page__banner{ margin:0 0 clamp(2rem,4vw,3rem); line-height:0; overflow:hidden; border-radius:18px; }
.carta-page__banner img{ width:100%; height:clamp(140px,22vw,220px); object-fit:cover; }

.carta-cat__title{ text-align:center; font-size:clamp(1.3rem,2.6vw,2rem); margin-bottom:1.8rem; }


/* ---------- tarjetas de menú ---------- */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:2.6rem 1.6rem;
}
.menu-cat__sub{
  grid-column:1/-1;
  text-align:center;
  font-family:var(--sans); font-weight:400;
  font-size:.72rem; letter-spacing:.28em; color:var(--gold);
  margin:.8rem 0 -.6rem;
}
.menu-cat__sub:first-child{ margin-top:0; }
.menu-cat__note{
  grid-column:1/-1;
  text-align:center;
  font-size:.82rem; color:var(--muted); margin-top:-1.2rem;
}

.menu-card{
  position:relative;
  background:#fff;
  border-radius:20px;
  padding:3.6rem 1.2rem 1.5rem;
  text-align:center;
  box-shadow:0 16px 32px rgba(2,43,59,.09);
}
.menu-card__photo{
  position:absolute; left:50%; top:0; transform:translate(-50%,-42%);
  width:98px; height:98px; border-radius:50%;
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 10px 20px rgba(2,43,59,.2);
  background:var(--cream);
}
.menu-card__photo img{ width:100%; height:100%; object-fit:cover; }
.menu-card__photo--placeholder{
  display:flex; align-items:center; justify-content:center;
  border:2px dashed rgba(176,121,8,.5);
  background:var(--cream);
}
.menu-card__photo--placeholder img{ width:38%; height:38%; object-fit:contain; opacity:.55; }
.menu-card__name{ font-family:var(--display); font-size:1rem; letter-spacing:.01em; margin:0 0 .4rem; }
.menu-card__desc{ font-size:.82rem; color:var(--muted); line-height:1.5; }
.menu-card__soon{ display:block; font-family:var(--script); color:var(--taupe); font-size:1rem; margin-top:.15rem; }
.menu-card__price{ margin-top:.9rem; font-family:var(--display); color:var(--gold); font-size:1.02rem; letter-spacing:.03em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav__links--left{ padding-right:96px; }
  .nav__links--right{ padding-left:96px; }
  .nav__links a{ font-size:.64rem; letter-spacing:.14em; }
  .lugar__grid{ grid-template-columns:repeat(2,1fr); }
  .destacados__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px){
  :root{ --nav-h:58px; }
  .nav__burger{ display:block; }
  .nav__bar{ justify-content:space-between; }
  .nav__logo{ width:44px; padding:11px; top:6px; transform:translateX(-50%); }
  .nav__social{ gap:1.4rem; }
  .nav__menu{
    position:fixed; inset:var(--nav-h) 0 0;
    background:var(--cream);
    flex-direction:column; justify-content:center; gap:2.4rem;
    transform:translateY(-14px);
    opacity:0; pointer-events:none;
    transition:opacity .35s ease, transform .35s ease;
  }
  .nav.is-open .nav__menu{ opacity:1; transform:none; pointer-events:auto; }
  .nav__links{ flex-direction:column; gap:1.6rem; padding:0 !important; }
  .nav__links a{ font-size:.9rem; letter-spacing:.24em; }

  .welcome__inner,
  .calma__inner,
  .celebra__inner{ grid-template-columns:1fr; }
  .calma__inner{ padding:0 var(--pad); }
  .calma__media{ order:0; }
  .calma__media img{ height:clamp(320px,80vw,460px); }
  .welcome__band{ height:clamp(280px,74vw,420px); }
  .welcome__arch{ width:min(88%,340px); margin:0 auto; }
  .welcome__plate{ width:70%; }
  .welcome__text{ text-align:center; }
  .welcome__text .lead{ margin-left:auto; margin-right:auto; }
  .celebra__imgs img:first-child{ margin-top:0; }
  .footer__cols{ grid-template-columns:repeat(2,1fr); }
  .footer__bottom{ justify-content:center; text-align:center; }
  .menu-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:2.2rem 1rem; }
}

/* En vertical no se usa el vídeo. El hero es apaisado (16:9) y el logotipo va
   escrito a lo ancho: recortarlo para llenar una pantalla de móvil se comía el
   74% del ancho —sólo se leía "RITA"— y encajarlo entero dejaba una franja de
   210 px perdida en medio de la pantalla. Encima, rebobinar un H.264 con un
   fotograma clave por segundo obliga al teléfono a decodificar hasta 24
   fotogramas de 1080p por cada movimiento del dedo, que es de donde venían los
   tirones.

   En su lugar se usa una secuencia de 36 imágenes verticales (AVIF, 408 KB en
   total: menos que el propio vídeo) que se van cambiando con el scroll. No hay
   decodificación de vídeo ni búsquedas de fotograma, así que va fino en
   cualquier teléfono. Lo monta y lo gobierna main.js.                      */
@media (max-width:860px) and (orientation:portrait){
  .intro__video{ display:none; }
  .intro__frames{ display:block; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .lugar__grid{ grid-template-columns:1fr; }
  .destacados__grid{ grid-template-columns:repeat(2,1fr); gap:1.1rem; }
  .footer__cols{ grid-template-columns:1fr; text-align:center; }
  .carta__grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}