/* ============================================================
   BON FOC · Dirección A — "Brasa cinematográfica"
   Negro carbón, naranja de ascua, tipografía condensada pesada.
   La foto manda: va a sangre, sin marco y sin radio. El texto vive
   encima, en blanco, sobre degradados oscuros.
   Tokens escritos desde cero para esta dirección.
   ============================================================ */

:root{
  /* --- color --- */
  --carbon:#0A0908;          /* fondo base */
  --carbon-2:#121010;        /* superficie elevada */
  --carbon-3:#1B1817;        /* tarjetas */
  --humo:#F4EFE8;            /* tinta principal */
  --humo-2:rgba(244,239,232,.66);
  --humo-3:rgba(244,239,232,.40);
  --brasa:#E2571E;           /* acento: naranja de ascua */
  --brasa-alta:#F2A83B;      /* punta de llama, solo detalles */
  --linea:rgba(244,239,232,.13);

  --logo-fuego:var(--brasa);
  --logo-ff:"Anton", Impact, sans-serif;

  /* --- tipografía --- */
  --display:"Anton", Impact, "Arial Narrow", sans-serif;
  --texto:"Barlow", -apple-system, BlinkMacSystemFont, sans-serif;

  --t-hero:clamp(2.3rem, min(9.6vw, 13.5vh), 9.5rem);
  --t-h2:clamp(1.95rem, 5.2vw, 4.6rem);
  --t-h3:clamp(1.15rem, 1.7vw, 1.5rem);
  --t-lead:clamp(1.05rem, 1.45vw, 1.32rem);
  --t-body:clamp(1rem, 1.1vw, 1.08rem);
  --t-micro:.72rem;

  /* --- espacio --- */
  --ancho:1600px;
  --ancho-texto:62ch;
  --gutter:clamp(20px, 5vw, 72px);
  --seccion:clamp(66px, 8vw, 128px);

  --nav-alto:76px;            /* alto real de la cabecera fija */

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--carbon);
  color:var(--humo);
  font-family:var(--texto);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;                    /* corta los desbordes del parallax */
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  /* Anton es muy condensada y con caja alta las líneas se pegaban; 1.3 las
     separa lo justo para que respiren sin desarmar el bloque. */
  line-height:1.3;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
}
h1{ font-size:var(--t-hero); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.medida{ max-width:var(--ancho-texto); }

.seccion{ padding-block:var(--seccion); }
.seccion--fina{ padding-block:clamp(52px,6vw,92px); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--display);
  font-size:1.02rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.05rem 2.1rem;
  border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--fuego{ background:var(--brasa); color:#0A0908; }
.btn--fuego:hover{ background:var(--brasa-alta); }
.btn--linea{ border-color:rgba(244,239,232,.42); color:var(--humo); }
.btn--linea:hover{ border-color:var(--humo); background:rgba(244,239,232,.08); }

/* ---------- cabecera ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; gap:2rem;
  padding:1.1rem var(--gutter);
  transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.es-solida{ background:rgba(10,9,8,.93); backdrop-filter:blur(14px); border-bottom-color:var(--linea); padding-block:.8rem; }
.nav__logo{ width:146px; flex:none; display:block; }
.nav__logo img{ width:100%; height:auto; display:block; }
.nav__menu{ display:flex; gap:1.9rem; margin-left:auto; list-style:none; padding:0; }
.nav__menu a{
  text-decoration:none; font-size:.83rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--humo-2);
  padding-block:.35rem; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.nav__menu a:hover, .nav__menu a[aria-current]{ color:var(--humo); border-bottom-color:var(--brasa); }
.nav__tel{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--display); font-size:1rem; letter-spacing:.05em;
  text-decoration:none; background:var(--brasa); color:#0A0908; padding:.72rem 1.3rem;
}
.nav__tel:hover{ background:var(--brasa-alta); }
.nav__burger{ display:none; background:none; border:0; color:var(--humo); padding:.4rem; cursor:pointer; }

/* ---------- HERO: una sola escena, el fondo se releva solo ----------
   El titular y los botones NO se mueven; lo único que cambia es la
   fotografía de detrás, con fundido y un Ken Burns lento. */
.hero{
  position:relative;
  min-height:min(100dvh, 1040px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  /* la cabecera es fija: se le reserva su alto para que el titular nunca
     empiece por debajo de ella */
  padding-top:calc(var(--nav-alto) + clamp(12px, 2.5vh, 34px));
  padding-bottom:clamp(36px, 7vh, 110px);
}
.hero__fondo{ position:absolute; inset:0; }

.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.6s var(--ease);
  filter:saturate(1.04) contrast(1.04);
  will-change:opacity, transform;
}
.hero__img.es-activa{ opacity:1; animation:kenburns 9s linear forwards; }
@keyframes kenburns{ from{ transform:scale(1.02) } to{ transform:scale(1.11) } }

.hero__velo{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,9,8,.97) 0%, rgba(10,9,8,.86) 26%, rgba(10,9,8,.42) 58%, rgba(10,9,8,.66) 100%),
    linear-gradient(to right, rgba(10,9,8,.72) 0%, rgba(10,9,8,.18) 52%, transparent 78%),
    radial-gradient(120% 78% at 18% 100%, rgba(226,87,30,.18), transparent 62%);
}

.hero__contenido{
  position:relative; z-index:3;
  width:100%; max-width:var(--ancho); margin-inline:auto;
  padding-inline:var(--gutter);
}
.hero__h1{ margin-bottom:clamp(.9rem, 2.5vh, 1.6rem); max-width:15ch; }
.hero__h1 span{ display:block; }
.hero__h1 .acento{ color:var(--brasa); }
.hero__lead{ font-size:var(--t-lead); color:rgba(244,239,232,.86); max-width:52ch; margin-bottom:clamp(1.2rem, 3vh, 2.2rem); }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hero__pie{ margin-top:clamp(1rem, 2.5vh, 2rem); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--humo-2); }

/* ---------- intro ---------- */
.intro{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:center; }
.intro__txt p{ font-size:var(--t-lead); color:var(--humo-2); }
.intro__txt h2{ margin-bottom:1.6rem; }
.intro__media{ position:relative; }
.intro__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.intro__cta{ margin-top:2rem; }

/* ---------- método (lista numerada grande) ---------- */
.metodo__item{
  display:grid; grid-template-columns:auto minmax(0,.85fr) 1.35fr; gap:clamp(20px,3.4vw,52px);
  align-items:start;
  padding-block:clamp(30px,4vw,54px);
  border-top:1px solid var(--linea);
}
.metodo__item:last-child{ border-bottom:1px solid var(--linea); }
.metodo__n{ font-family:var(--display); font-size:clamp(1.4rem,2.4vw,2.1rem); color:var(--brasa); line-height:1; padding-top:.15em; }
.metodo__item h3{ font-size:clamp(1.5rem,2.6vw,2.3rem); }
.metodo__item p:not(.metodo__n){ color:var(--humo-2); }

/* ---------- banda parallax ---------- */
.banda{ position:relative; height:min(78vh,720px); overflow:hidden; }
.banda__media{ position:absolute; inset:-22% 0; will-change:transform; }
.banda__media img{ width:100%; height:100%; object-fit:cover; }
.banda__velo{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,9,8,.88) 0%, rgba(10,9,8,.42) 58%, rgba(10,9,8,.72) 100%); }
.banda__contenido{ position:relative; z-index:2; height:100%; display:flex; align-items:center; }
.banda__caja{ max-width:46ch; }
.banda__caja p:not(.banda__dato){ color:var(--humo-2); font-size:var(--t-lead); margin-top:1.4rem; }
.banda__dato{
  display:inline-block; margin-top:1.6rem; padding:.55rem 1.1rem;
  border:1px solid var(--brasa); color:var(--brasa-alta);
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
}

/* ---------- mallorquina ---------- */
.mallorca{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,6vw,88px); align-items:center; }
.mallorca__lista{ list-style:none; margin:2.2rem 0 0; padding:0; }
.mallorca__lista li{
  display:flex; align-items:baseline; gap:1rem;
  padding:.95rem 0; border-top:1px solid var(--linea);
  font-size:1.05rem;
}
.mallorca__lista li:last-child{ border-bottom:1px solid var(--linea); }
.mallorca__lista .punto{ flex:1; height:1px; background:var(--linea); }
.mallorca__lista .precio{ font-family:var(--display); color:var(--brasa); letter-spacing:.03em; }
.mallorca__fotos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mallorca__fotos img{ width:100%; aspect-ratio:1; object-fit:cover; }
.mallorca__fotos img:first-child{ grid-column:1/-1; aspect-ratio:16/9; }

/* ---------- el sitio ---------- */
.sitio{ background:var(--carbon-2); }
.sitio__cab{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:end; }
.sitio__cab p{ color:var(--humo-2); font-size:var(--t-lead); }
@media (max-width:860px){ .sitio__cab{ grid-template-columns:1fr; } }
.sitio__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); margin-top:clamp(32px,5vw,60px); border:1px solid var(--linea); }
.sitio__celda{ background:var(--carbon-2); padding:2.1rem 1.7rem; }
.sitio__celda h3{ color:var(--brasa); font-size:1.05rem; margin-bottom:.6rem; }
.sitio__celda p{ color:var(--humo-2); font-size:.96rem; }
.sitio__foto{ margin-top:clamp(32px,5vw,60px); }
.sitio__foto img{ width:100%; aspect-ratio:21/9; object-fit:cover; }

/* ---------- menú 35 ---------- */
.menu35{ display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,60px); align-items:end; }
.menu35__precio{ font-family:var(--display); font-size:clamp(4rem,10vw,9rem); color:var(--brasa); line-height:.8; }
.menu35 p:not(.menu35__precio){ color:var(--humo-2); font-size:var(--t-lead); max-width:56ch; margin-top:1.4rem; }

/* ---------- reseñas ---------- */
.resenas__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin-top:clamp(32px,5vw,56px); }
.resena{ background:var(--carbon-3); padding:2.1rem 1.9rem; border-top:2px solid var(--brasa); display:flex; flex-direction:column; margin:0; }
.resena__estrellas{ color:var(--brasa-alta); letter-spacing:.16em; font-size:.9rem; margin-bottom:1rem; }
.resena blockquote{ margin:0 0 1.3rem; font-size:1.06rem; line-height:1.6; }
.resena figcaption{ margin-top:auto; font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:var(--humo-2); }

/* ---------- celebraciones ---------- */
.celebra{ position:relative; overflow:hidden; }
.celebra__media{ position:absolute; inset:0; }
.celebra__media img{ width:100%; height:100%; object-fit:cover; }
.celebra__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,9,8,.94), rgba(10,9,8,.55)); }
.celebra__contenido{ position:relative; z-index:2; max-width:min(54%, 680px); }
/* el ch del h2 va con Anton, así que aquí manda el ancho del titular */
.celebra__contenido h2{ max-width:15ch; }
.celebra__contenido p{ color:var(--humo-2); font-size:var(--t-lead); max-width:42ch; margin:1.4rem 0 2rem; }

/* ---------- cierre ---------- */
.cierre{ text-align:center; background:var(--carbon-2); border-top:1px solid var(--linea); }
.cierre h2{ margin-bottom:1.3rem; }
.cierre p{ color:var(--humo-2); font-size:var(--t-lead); max-width:46ch; margin-inline:auto; margin-bottom:2.4rem; }

/* ---------- pie ---------- */
.pie{ background:var(--carbon); border-top:1px solid var(--linea); padding-block:clamp(48px,6vw,80px) 2rem; }
.pie__grid{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:clamp(28px,5vw,70px); }
.pie__logo{ width:190px; margin-bottom:1.4rem; }
.pie__logo img{ width:100%; height:auto; display:block; }
.pie p, .pie li{ color:var(--humo-2); font-size:.95rem; }
.pie h3{ font-size:.8rem; letter-spacing:.2em; color:var(--brasa); margin-bottom:1.1rem; }
.pie ul{ list-style:none; margin:0; padding:0; }
.pie__horario{ display:flex; justify-content:space-between; gap:1.5rem; padding:.42rem 0; border-bottom:1px solid var(--linea); font-size:.92rem; }
.pie__horario.es-cerrado span:last-child{ color:var(--humo-3); }
.pie__tel{ font-family:var(--display); font-size:1.6rem; color:var(--brasa); text-decoration:none; letter-spacing:.03em; }
.pie__legal{ margin-top:clamp(36px,5vw,64px); padding-top:1.6rem; border-top:1px solid var(--linea); display:flex; flex-wrap:wrap; gap:1.6rem; font-size:.8rem; color:var(--humo-3); }
.pie__legal a{ text-decoration:none; }
.pie__legal a:hover{ color:var(--humo); }

/* ---------- páginas legales ---------- */
.legal{ padding-top:clamp(140px,16vh,200px); padding-bottom:clamp(60px,8vw,110px); }
.legal__cuerpo{ max-width:74ch; }
.legal h1{ font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:1.6rem; }
.legal h2{ font-size:clamp(1.3rem,2.2vw,1.9rem); margin:2.6rem 0 .9rem; }
.legal h3{ font-size:1.05rem; margin:1.6rem 0 .5rem; color:var(--brasa); }
.legal p, .legal li{ color:var(--humo-2); }
.legal ul{ padding-left:1.2rem; margin:0 0 1.1em; }
.legal li{ margin-bottom:.4rem; }
.legal a{ color:var(--brasa-alta); }
.legal table{ width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.95rem; }
.legal th, .legal td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--linea); vertical-align:top; }
.legal th{ color:var(--humo); font-weight:600; }
.legal td{ color:var(--humo-2); }
.legal__pendiente{
  border:1px solid var(--brasa); background:rgba(226,87,30,.08);
  padding:1.1rem 1.3rem; margin:1.4rem 0; border-radius:0;
}
.legal__pendiente strong{ color:var(--brasa-alta); display:block; margin-bottom:.4rem; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; }
.legal__pendiente p{ margin:0; font-size:.95rem; }

/* ---------- aviso de cookies ---------- */
.cookies{
  /* a la derecha: a la izquierda tapaba los botones de reserva del hero */
  position:fixed; right:var(--gutter); bottom:var(--gutter); z-index:80;
  max-width:min(460px, calc(100vw - var(--gutter) * 2));
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  background:var(--carbon-2); border:1px solid var(--linea);
  padding:1.15rem 1.3rem;
  box-shadow:0 18px 48px rgba(0,0,0,.55);
}
.cookies[hidden]{ display:none; }
.cookies p{ flex:1 1 260px; margin:0; font-size:.9rem; color:var(--humo-2); line-height:1.5; }
.cookies a{ color:var(--brasa-alta); }
.cookies__ok{ font-size:.86rem; padding:.7rem 1.3rem; border:0; cursor:pointer; }
/* En pantallas estrechas el aviso deja de flotar y se acopla abajo, justo
   encima de la barra de llamada. Además el JS le suma su alto al padding del
   body mientras está visible, para que no tape nunca los botones del hero. */
@media (max-width:900px){
  /* El hero ocupa la pantalla entera, así que su contenido tiene que quedar por
     encima de las dos barras fijas del pie: la de llamar y, si está, el aviso
     de cookies (el JS publica su alto en --aviso-alto). */
  .hero{ padding-bottom:calc(clamp(20px,3.5vh,48px) + 62px + var(--aviso-alto, 0px)); }

  .cookies{
    left:0; right:0; bottom:62px; max-width:none;
    border-inline:0; border-bottom:0; box-shadow:none;
    padding:.9rem var(--gutter);
  }
  .cookies p{ font-size:.84rem; }
}

/* ---------- barra móvil de llamada ---------- */
.llamar-movil{ display:none; }

/* ---------- reveals ----------
   Se ocultan SOLO si hay JS (clase .js en <html>, la pone un script en línea
   del <head>). Sin esa guarda, un error de JS o el JS desactivado dejaban la
   página entera invisible. */
.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].es-visible{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.09s; }
[data-reveal-delay="2"]{ transition-delay:.18s; }
[data-reveal-delay="3"]{ transition-delay:.27s; }

/* ============================================================
   CARTA
   ============================================================ */
.carta-hero{ padding-top:clamp(140px,16vh,200px); padding-bottom:clamp(40px,5vw,70px); border-bottom:1px solid var(--linea); }
.carta-hero h1{ margin-bottom:1.2rem; }
.carta-hero p{ color:var(--humo-2); font-size:var(--t-lead); max-width:52ch; }
.carta-hero p a{ color:var(--brasa-alta); }
.carta-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,74px); align-items:center; }
.carta-hero__media{ margin:0; }
.carta-hero__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
@media (max-width:860px){
  .carta-hero__grid{ grid-template-columns:1fr; }
  .carta-hero__media{ display:none; }
}

.pills{
  position:sticky; top:0; z-index:50;
  background:rgba(10,9,8,.95); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.pills__pista{ display:flex; gap:.55rem; overflow-x:auto; padding:1rem var(--gutter); scrollbar-width:none; }
.pills__pista::-webkit-scrollbar{ display:none; }
.pill{
  flex:none; text-decoration:none; white-space:nowrap;
  font-family:var(--display); font-size:.92rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.62rem 1.25rem; border-radius:999px;
  border:1px solid var(--linea); color:var(--humo-2);
  transition:background .22s var(--ease), color .22s, border-color .22s;
}
.pill:hover{ border-color:var(--humo-3); color:var(--humo); }
.pill.es-activa{ background:var(--brasa); border-color:var(--brasa); color:#0A0908; }

/* La carta funciona por pestañas: cada pill ABRE su sección y oculta el
   resto. Solo se ocultan si hay JS (clase .js), para que sin JavaScript la
   carta siga viéndose entera y siga siendo rastreable. */
.carta-seccion{ padding-block:clamp(48px,6vw,90px); border-bottom:1px solid var(--linea); scroll-margin-top:120px; }
.js .carta-seccion{ display:none; }
.js .pills, .js .carta-seccion{ overflow-anchor:none; }
.js .carta-seccion.es-abierta{ display:block; animation:entra-seccion .45s var(--ease) both; }
@keyframes entra-seccion{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.carta-seccion__cab{ margin-bottom:clamp(26px,3.4vw,46px); }
.carta-seccion__cab p{ color:var(--humo-2); max-width:60ch; margin-top:.9rem; }

.platos{ column-count:2; column-gap:clamp(36px,5vw,80px); list-style:none; margin:0; padding:0; }
.plato{ display:flex; align-items:baseline; gap:.9rem; padding:.92rem 0; border-bottom:1px solid var(--linea); break-inside:avoid; }
.plato__nombre{ font-weight:600; }
.plato__nombre small{ display:block; font-weight:400; font-size:.86rem; color:var(--humo-3); letter-spacing:.01em; margin-top:.15rem; }
.plato__punto{ flex:1; height:1px; background:var(--linea); position:relative; top:-.28em; }
.plato__precio{ font-family:var(--display); letter-spacing:.03em; color:var(--brasa); white-space:nowrap; font-size:1.08rem; }
.plato__formato{
  display:block; font-family:var(--texto); font-style:normal;
  font-size:.64rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--humo-3); text-align:right; margin-top:.15rem;
}
.plato.es-destacado .plato__nombre::after{
  content:"Especialidad"; display:inline-block; margin-left:.7em; vertical-align:middle;
  font-family:var(--texto); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brasa-alta); border:1px solid rgba(226,87,30,.5); padding:.2em .55em; border-radius:999px;
}

.menu-cerrado{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); }
.menu-cerrado__grupo h3{ color:var(--brasa); margin-bottom:1rem; font-size:1.1rem; }
.menu-cerrado__grupo ul{ list-style:none; margin:0; padding:0; }
.menu-cerrado__grupo li{ padding:.62rem 0; border-bottom:1px solid var(--linea); }
.menu-cerrado__precio{
  margin-top:clamp(28px,4vw,48px); display:flex; align-items:baseline; gap:1.2rem;
  font-family:var(--display); font-size:clamp(2rem,4vw,3.2rem); color:var(--brasa);
}
.menu-cerrado__precio small{ font-family:var(--texto); font-size:.86rem; letter-spacing:.2em; text-transform:uppercase; color:var(--humo-3); }

.vinos__grupo{ margin-bottom:clamp(34px,4vw,58px); }
.vinos__grupo > h3{ color:var(--brasa); font-size:1.25rem; margin-bottom:1.2rem; padding-bottom:.7rem; border-bottom:1px solid var(--brasa); }
.vinos__lista{ column-count:2; column-gap:clamp(36px,5vw,80px); list-style:none; margin:0; padding:0; }
.vino{ padding:.85rem 0; border-bottom:1px solid var(--linea); display:flex; gap:1rem; align-items:baseline; break-inside:avoid; }
.vino__id{ flex:1; }
.vino__nombre{ font-weight:600; }
.vino__meta{ display:block; font-size:.82rem; color:var(--humo-3); margin-top:.15rem; }
.vino__precios{ font-family:var(--display); color:var(--brasa); white-space:nowrap; letter-spacing:.03em; }
.vino__precios em{ font-style:normal; color:var(--humo-3); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; display:block; text-align:right; }

.carta-nota{ padding-block:clamp(30px,4vw,50px); color:var(--humo-3); font-size:.9rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .sitio__grid{ grid-template-columns:repeat(2,1fr); }
  .resenas__grid{ grid-template-columns:1fr; }
  .pie__grid{ grid-template-columns:1fr 1fr; }
  .menu-cerrado{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  :root{ --nav-alto:64px; }
  .celebra__contenido{ max-width:none; }
  .celebra__contenido h2{ max-width:none; }
  .nav__menu{ display:none; }
  .nav__burger{ display:block; margin-left:auto; }
  .nav__tel{ padding:.6rem 1rem; font-size:.9rem; }
  .nav.es-abierta .nav__menu{
    display:flex; flex-direction:column; gap:1.4rem;
    position:fixed; inset:0; background:var(--carbon);
    align-items:center; justify-content:center; margin:0;
  }
  .nav.es-abierta .nav__menu a{ font-size:1.3rem; }

  .hero__pasos{ display:none; }
  .hero__h1{ max-width:none; }

  .intro, .mallorca, .menu35, .metodo__item{ grid-template-columns:1fr; }
  .metodo__item{ gap:.7rem; }
  .metodo__n{ padding-top:0; }
  .menu35__precio{ order:-1; }
  .platos, .vinos__lista{ column-count:1; }
  .pie__grid{ grid-template-columns:1fr; }
  .banda{ height:auto; padding-block:var(--seccion); }
  .banda__media{ inset:0; }
  .banda__velo{ background:rgba(10,9,8,.82); }

  body.con-aviso{ padding-bottom:calc(64px + var(--aviso-alto, 0px)); }

  .llamar-movil{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    align-items:center; justify-content:center; gap:.6em;
    background:var(--brasa); color:#0A0908; text-decoration:none;
    font-family:var(--display); font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase;
    padding:1rem; padding-bottom:calc(1rem + env(safe-area-inset-bottom));
  }
  body{ padding-bottom:64px; }
}

/* Móvil apaisado y portátiles muy bajos: el hero no tiene sitio para lucirse,
   así que se aprieta y se prescinde de la línea de horario. */
@media (max-height:520px){
  .hero{ padding-top:calc(var(--nav-alto) + 8px); padding-bottom:20px; min-height:0; }
  .hero__pie{ display:none; }
  .hero__lead{ margin-bottom:1rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero__escena img{ transform:none; }
}