/* =============================================================
   HUMANO — Sistema de diseño web v8
   Mobile-first. Tokens únicos. Sin overrides encadenados.
   Paleta y tipografías según manual de marca provisorio.
   ============================================================= */

/* ---------- 1. TIPOGRAFÍAS ----------------------------------
   Cada familia declara DOS archivos en el mismo `src`: primero la
   tipografía de marca, después la interina de licencia abierta.
   Si el archivo de marca no está en el servidor, el navegador pasa
   solo al segundo. Cuando se suban los WOFF2 reales a esta misma
   carpeta, toman el control sin tocar una línea de código.

   Marca:    TT Travels · Sabon · MANIC
   Interina: Archivo · EB Garamond · Caveat   (todas OFL-1.1)
   Ver assets/fonts/README.md                                    */

@font-face{
  font-family:'Humano UI';
  src:url('../fonts/tt-travels-medium.woff2') format('woff2'),
      url('../fonts/interina-ui-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Humano UI';
  src:url('../fonts/tt-travels-bold.woff2') format('woff2'),
      url('../fonts/interina-ui-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Humano Serif';
  src:url('../fonts/sabon-regular.woff2') format('woff2'),
      url('../fonts/interina-serif-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Humano Serif';
  src:url('../fonts/sabon-italic.woff2') format('woff2'),
      url('../fonts/interina-serif-400i.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Humano Serif';
  src:url('../fonts/sabon-semibold.woff2') format('woff2'),
      url('../fonts/interina-serif-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Humano Hand';
  src:url('../fonts/manic-regular.woff2') format('woff2'),
      url('../fonts/interina-hand-600.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* Fallbacks con métricas medidas contra las fuentes reales (fontTools),
   no estimadas: evitan el salto de maquetado mientras cargan. */
@font-face{
  font-family:'Humano UI Fallback';
  src:local('Helvetica Neue'), local('Arial'), local('Roboto'), local('Liberation Sans');
  size-adjust:103.7%; ascent-override:85%; descent-override:20%; line-gap-override:0%;
}
@font-face{
  font-family:'Humano Serif Fallback';
  src:local('Georgia'), local('Times New Roman'), local('Noto Serif'), local('Liberation Serif');
  size-adjust:76.7%; ascent-override:131%; descent-override:39%; line-gap-override:0%;
}

/* ---------- 2. TOKENS --------------------------------------- */
:root{
  /* Paleta — manual de marca */
  --verde:#183B34;        /* Pantone 560 C  */
  --borgona:#671C31;      /* Pantone 7421 C */
  --coral:#F25442;        /* Pantone 2027 C */
  --crema:#F2E9D5;        /* Pantone 3599 C 35% */
  --negro:#191A18;
  --blanco:#fff;

  /* Roles semánticos. Nunca usar los tokens crudos en componentes. */
  --bg:var(--crema);
  --fg:var(--verde);
  --fg-soft:rgba(24,59,52,.72);
  --hairline:rgba(24,59,52,.16);
  --superficie:rgba(24,59,52,.045);
  --accent:var(--borgona);          /* acento legible sobre crema (9.7:1) */
  --manic-color:var(--borgona);
  --accent-graphic:var(--coral);    /* SOLO gráfico o sobre fondo oscuro  */

  /* Tipografía */
  --ui:'Humano UI','Humano UI Fallback','Helvetica Neue',Arial,sans-serif;
  --serif:'Humano Serif','Humano Serif Fallback',Georgia,'Times New Roman',serif;
  --hand:'Humano Hand','Humano Serif','Humano Serif Fallback',Georgia,serif;

  /* Escala fluida — techos deliberadamente más bajos que v7 para
     que el fallback no colapse y para que mobile respire.        */
  --t-display:clamp(3.15rem,11vw,7rem);
  --t-h1:clamp(2.7rem,8.6vw,5.3rem);
  --t-h2:clamp(2.2rem,6.2vw,3.9rem);
  --t-h3:clamp(1.45rem,3.4vw,2.05rem);
  --t-lead:clamp(1.22rem,2.8vw,1.65rem);
  --t-body:clamp(1.06rem,1.7vw,1.18rem);
  --t-small:.96rem;
  --t-eyebrow:.82rem;

  /* Espaciado — base 8 */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --seccion:clamp(56px,10vw,120px);

  --max:1320px;
  --gutter:clamp(20px,5vw,56px);
  --header-h:64px;
  --r-sm:12px;
  --r-md:20px;
  --r-lg:32px;
  --r-xl:44px;
  --r-pill:999px;
  --ease:cubic-bezier(.22,.75,.22,1);
}

@media (min-width:900px){ :root{ --header-h:76px; } }

/* Superficies oscuras: invierten los roles, no los componentes. */
.tema-verde,.hero,.footer{ --bg:var(--verde); --fg:var(--crema); --fg-soft:rgba(242,233,213,.74);
  --manic-color:var(--coral);
  --hairline:rgba(242,233,213,.2); --superficie:rgba(242,233,213,.07); --accent:var(--crema); }
.tema-borgona{ --manic-color:var(--crema); --bg:var(--borgona); --fg:var(--crema); --fg-soft:rgba(242,233,213,.74);
  --hairline:rgba(242,233,213,.2); --superficie:rgba(242,233,213,.08); --accent:var(--crema); }
.tema-negro{ --manic-color:var(--crema); --bg:var(--negro); --fg:var(--crema); --fg-soft:rgba(242,233,213,.72);
  --hairline:rgba(242,233,213,.2); --superficie:rgba(242,233,213,.07); --accent:var(--crema); }
.tema-verde,.tema-borgona,.tema-negro,.tema-crema{ background:var(--bg); color:var(--fg); }
.tema-crema{ --bg:var(--crema); --fg:var(--verde); }

/* ---------- 3. BASE ----------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--crema); scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--serif); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.nav-abierta{ overflow:hidden; }

/* Grano de marca. Decorativo, no interfiere con el puntero. */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
::selection{ background:var(--borgona); color:var(--crema); }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm); }
.tema-verde :focus-visible,.tema-borgona :focus-visible,.tema-negro :focus-visible,
.hero :focus-visible{ outline-color:var(--crema); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.saltar{
  position:absolute; left:var(--s2); top:-100px; z-index:200;
  background:var(--verde); color:var(--crema); padding:12px 18px;
  font-family:var(--ui); font-size:var(--t-small); transition:top .18s var(--ease);
}
.saltar:focus{ top:var(--s2); }

/* ---------- 4. TIPOGRAFÍA ----------------------------------- */
.display,.h1,.h2,.h3,h1,h2,h3{
  font-family:var(--ui); font-weight:700; margin:0;
  text-wrap:balance; hyphens:none;
}
.display{ font-size:var(--t-display); line-height:.92; letter-spacing:-.035em; }
.h1,h1{ font-size:var(--t-h1);   line-height:.96; letter-spacing:-.03em; }
.h2,h2{ font-size:var(--t-h2);   line-height:1;   letter-spacing:-.025em; }
.h3,h3{ font-size:var(--t-h3);   line-height:1.12;letter-spacing:-.02em; font-weight:700; }

p{ margin:0 0 1em; max-width:64ch; }
p:last-child{ margin-bottom:0; }
.lead{ font-size:var(--t-lead); line-height:1.38; max-width:44ch; font-weight:500; }
.small{ font-size:var(--t-small); line-height:1.5; color:var(--fg-soft); }

.eyebrow{
  display:block; font-family:var(--ui); font-weight:500;
  font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--fg-soft); margin-bottom:var(--s2);
}
.manic{
  font-family:var(--hand); font-size:clamp(1.5rem,3.8vw,2.3rem);
  line-height:1.05; color:var(--manic-color); display:block;
}

/* ---------- 5. LAYOUT --------------------------------------- */
.contenedor{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.seccion{ padding-block:var(--seccion); }
.seccion--ajustada{ padding-block:calc(var(--seccion) * .6); }

.grid{ display:grid; gap:var(--s4); }
@media (min-width:760px){
  .grid--2{ grid-template-columns:repeat(2,1fr); gap:var(--s5); }
  .grid--3{ grid-template-columns:repeat(3,1fr); gap:var(--s4); }
  .grid--editorial{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--s6); align-items:start; }
}
.borde-sup{ border-top:1px solid var(--hairline); padding-top:var(--s4); }

/* ---------- 6. BOTONES Y ENLACES ---------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:56px; padding:0 30px; border-radius:var(--r-pill);
  font-family:var(--ui); font-weight:700; font-size:1rem; letter-spacing:.005em;
  line-height:1; text-align:center; border:1.5px solid transparent;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--primario{ background:var(--verde); color:var(--crema); }
.btn--primario:hover{ background:var(--borgona); }
.tema-verde .btn--primario,.tema-borgona .btn--primario,.tema-negro .btn--primario,
.hero .btn--primario{ background:var(--crema); color:var(--verde); }
.tema-verde .btn--primario:hover,.tema-borgona .btn--primario:hover,.tema-negro .btn--primario:hover,
.hero .btn--primario:hover{ background:var(--coral); color:var(--negro); }
.btn--primario{ box-shadow:0 2px 14px rgba(24,59,52,.18); }
/* El secundario necesita relleno propio: un borde solo sobre foto o sobre
   color pleno se lee como texto, no como botón. */
.btn--secundario{
  border-color:currentColor; color:var(--fg);
  background:color-mix(in srgb, var(--fg) 12%, transparent);
  backdrop-filter:blur(6px);
}
.btn--secundario:hover{ background:var(--fg); color:var(--bg); }
@supports not (background:color-mix(in srgb, red 10%, transparent)){
  .btn--secundario{ background:rgba(255,255,255,.12); }
}
.btn--bloque{ width:100%; }
@media (min-width:560px){ .btn--bloque{ width:auto; } }

.acciones{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }

.enlace{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--ui); font-size:.92rem; font-weight:500;
  border-bottom:1.5px solid currentColor; padding-bottom:2px;
  min-height:44px; /* área táctil */
}
.enlace:hover{ color:var(--accent); }
/* Enlace dentro de una oración: sin caja ni alto mínimo, porque
   inline-flex le despega el subrayado del texto. El mínimo táctil
   de 44px no aplica a enlaces embebidos en un párrafo. */
.enlace-inline{
  color:inherit; text-decoration:underline;
  text-underline-offset:.18em; text-decoration-thickness:1.5px;
}
.enlace-inline:hover{ color:var(--accent); }
.externo::after{ content:"↗"; font-size:.85em; }

/* ---------- 7. HEADER Y NAVEGACIÓN -------------------------- */
.header{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb,var(--crema) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(24,59,52,.12);
}
@supports not (backdrop-filter:blur(4px)){ .header{ background:var(--crema); } }

.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  height:var(--header-h);
}
.header__marca{ display:flex; align-items:center; flex:0 0 auto; }
.header__marca img{ width:104px; }
@media (min-width:900px){ .header__marca img{ width:124px; } }

.nav-desktop{ display:none; }
@media (min-width:1180px){
  .nav-desktop{ display:flex; align-items:center; gap:clamp(14px,1.5vw,24px); }
  .nav-desktop a{
    font-family:var(--ui); font-weight:500; font-size:.85rem; white-space:nowrap;
    padding:6px 0; border-bottom:1.5px solid transparent;
  }
  .nav-desktop a:hover{ border-bottom-color:currentColor; }
  .nav-desktop a[aria-current="page"]{ border-bottom-color:var(--borgona); color:var(--borgona); }
}

.header__acciones{ display:flex; align-items:center; gap:var(--s2); }
.header__reservar{ display:none; }
@media (min-width:760px){ .header__reservar{ display:inline-flex; min-height:42px; padding:0 20px; font-size:.85rem; } }

.hamburguesa{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; align-items:center; margin-right:-10px;
}
@media (min-width:1180px){ .hamburguesa{ display:none; } }
.hamburguesa span{ display:block; width:22px; height:1.5px; background:currentColor; transition:transform .25s var(--ease),opacity .2s; }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav-mobile{
  position:fixed; inset:var(--header-h) 0 0; z-index:70;
  background:var(--verde); color:var(--crema);
  padding:var(--s5) var(--gutter) var(--s6);
  display:flex; flex-direction:column; gap:var(--s2);
  overflow-y:auto; transform:translateY(-8px); opacity:0;
  visibility:hidden; pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.nav-mobile.abierta{ opacity:1; transform:none; visibility:visible; pointer-events:auto; }
.nav-mobile a{ font-family:var(--ui); font-weight:700; font-size:clamp(1.7rem,7vw,2.3rem); letter-spacing:-.02em; padding:8px 0; }
.nav-mobile a[aria-current="page"]{ color:var(--coral); }
.nav-mobile .btn{ margin-top:var(--s3); }
.nav-mobile__pie{ margin-top:auto; padding-top:var(--s5); font-size:var(--t-small); color:rgba(242,233,213,.72); }
@media (min-width:1180px){ .nav-mobile{ display:none; } }

/* ---------- 9. TARJETAS Y BLOQUES --------------------------- */
.tarjeta{
  background:var(--superficie); border-radius:var(--r-lg);
  padding:clamp(26px,4vw,38px);
  display:flex; flex-direction:column; gap:var(--s2);
}
.tarjeta__num{ font-family:var(--ui); font-weight:700; font-size:.86rem; letter-spacing:.11em; color:var(--accent); }
.tarjeta p{ font-size:1rem; }

/* ---------- 10. CARTA --------------------------------------- */
.carta-tabs{
  position:sticky; top:var(--header-h); z-index:50;
  background:var(--crema); border-bottom:1px solid var(--hairline);
}
.carta-tabs__lista{
  display:flex; gap:var(--s1); overflow-x:auto; scrollbar-width:none;
  padding-block:var(--s2); -webkit-overflow-scrolling:touch;
}
.carta-tabs__lista::-webkit-scrollbar{ display:none; }
.carta-tab{
  flex:0 0 auto; padding:12px 24px; border-radius:var(--r-pill);
  font-family:var(--ui); font-weight:700; font-size:.98rem;
  border:1.5px solid var(--hairline); color:var(--fg-soft); white-space:nowrap;
}
.carta-tab[aria-selected="true"]{ background:var(--verde); border-color:var(--verde); color:var(--crema); }

.carta-panel[hidden]{ display:none; }
.carta-grupo{ padding-block:var(--s5); border-bottom:1px solid var(--hairline); }
.carta-grupo:last-child{ border-bottom:0; }
.carta-grupo__titulo{ font-family:var(--hand); font-size:clamp(1.9rem,5vw,2.8rem); color:var(--borgona); margin-bottom:var(--s1); }
.carta-grupo__nota{ font-size:var(--t-small); color:var(--fg-soft); margin-bottom:var(--s3); }

.carta-items{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
@media (min-width:840px){ .carta-items{ grid-template-columns:repeat(2,1fr); column-gap:var(--s6); } }

.plato{ display:grid; grid-template-columns:1fr auto; gap:var(--s2) var(--s3); align-items:baseline; }
.plato__nombre{ font-family:var(--serif); font-size:1.1rem; line-height:1.35; margin:0; }
.plato__precio{
  font-family:var(--ui); font-weight:700; font-size:1.05rem;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.plato__desc{ grid-column:1/-1; margin:2px 0 0; font-size:.88rem; line-height:1.45; color:var(--fg-soft); max-width:52ch; }
.plato__tag{
  display:inline-block; margin-left:.5em; padding:1px 7px; border-radius:999px;
  font-family:var(--ui); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--hairline); color:var(--fg-soft); vertical-align:middle;
}

/* ---------- 11. ACORDEÓN (FAQ) ------------------------------ */
.faq{ border-top:1px solid var(--hairline); }
.faq details{ border-bottom:1px solid var(--hairline); }
/* legacy */
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
  padding:var(--s3) 0; min-height:56px; cursor:pointer; list-style:none;
  font-family:var(--ui); font-weight:500; font-size:1.02rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; line-height:1; flex:0 0 auto; transition:transform .2s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > p{ padding-bottom:var(--s3); max-width:60ch; color:var(--fg-soft); }

/* ---------- 12. INFO PRÁCTICA ------------------------------- */
.datos{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.datos > li{ border-top:1px solid var(--hairline); padding-top:var(--s2); }
.datos dt,.datos__label{
  font-family:var(--ui); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-soft); margin-bottom:4px;
}
.horarios{ list-style:none; margin:0; padding:0; font-variant-numeric:tabular-nums; }
.horarios li{ display:flex; justify-content:space-between; gap:var(--s3); padding:7px 0; border-bottom:1px solid var(--hairline); }
.horarios li:last-child{ border-bottom:0; }
.horarios .hoy{ font-weight:600; color:var(--accent); }
.mapa{ width:100%; aspect-ratio:16/10; border:0; border-radius:var(--r-lg); filter:grayscale(1) contrast(.92); }
@media (min-width:760px){ .mapa{ aspect-ratio:16/7; } }

/* ---------- 14. FOOTER -------------------------------------- */
.footer{ background:var(--verde); color:var(--crema); padding-block:var(--s6) var(--s4); }
.footer a:hover{ color:var(--coral); }
.footer__grid{ display:grid; gap:var(--s5); }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.3fr 1fr 1fr; gap:var(--s5); } }
.footer__marca img{ width:132px; margin-bottom:var(--s3); }
.footer h2{ font-family:var(--ui); font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(242,233,213,.6); margin-bottom:var(--s2); }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:10px; }
.footer li a{ display:inline-block; min-height:32px; font-family:var(--ui); font-size:.95rem; }
.footer__legal{
  margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid rgba(242,233,213,.2);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between;
  font-size:.8rem; color:rgba(242,233,213,.6); font-family:var(--ui);
}

/* ---------- 15. UTILIDADES Y MOVIMIENTO --------------------- */
.aparece{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.aparece.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .aparece{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media print{
  .header,.nav-mobile,.cta-fija,.footer,.carta-tabs{ display:none !important; }
  .carta-panel[hidden]{ display:block !important; }
  body{ background:#fff; color:#000; }
  body::after{ display:none; }
  .carta-items{ grid-template-columns:repeat(2,1fr); }
}

/* =============================================================
   16. COMPONENTES v8.1 — logo, agenda, formas redondeadas
   ============================================================= */

/* Marca suelta: el isotipo como ancla gráfica de sección. */
.marca-suelta{ width:clamp(52px,6vw,72px); height:auto; margin-bottom:var(--s3); }

.header__marca img{ width:126px; }
@media (min-width:900px){ .header__marca img{ width:148px; } }

.nav-mobile__marca{ width:44px; height:auto; margin-bottom:var(--s3); }
.nav-mobile a[aria-current="page"]{ color:var(--coral); }

.footer__marca img{ width:104px; height:auto; margin-bottom:var(--s3); }
.footer address{ font-style:normal; }
.footer__nav{ display:flex; flex-direction:column; gap:10px; }
.footer__nav a{ font-family:var(--ui); font-weight:500; font-size:1rem; min-height:32px; }
.footer__nav a[aria-current="page"]{ text-decoration:underline; text-underline-offset:5px; }
.footer .small{ color:rgba(242,233,213,.74); }

/* Hero */
.hero__inner{ padding-block:var(--s6) var(--s6); }
.hero__isotipo{ width:clamp(64px,8vw,88px); height:auto; margin-bottom:var(--s4); }
.hero__titulo{ font-size:var(--t-display); line-height:.9; letter-spacing:-.035em; }
.hero .acciones{ margin-top:var(--s5); }

/* Sub-heros de página interna */
.subhero{ border-bottom-left-radius:var(--r-xl); border-bottom-right-radius:var(--r-xl); }
.pagina-hero{ padding-top:var(--s6); }
.pagina-hero .small{ margin-top:var(--s3); }
.pagina-404{ min-height:62vh; display:flex; align-items:center;
  border-bottom-left-radius:var(--r-xl); border-bottom-right-radius:var(--r-xl); }

/* Secciones de color: esquinas suaves en vez de bandas duras */
.seccion.tema-verde,.seccion.tema-borgona,.seccion.tema-negro{ border-radius:var(--r-xl); }
@media (max-width:759px){
  .seccion.tema-verde,.seccion.tema-borgona,.seccion.tema-negro{ border-radius:var(--r-lg); }
}

.grid--tarjetas{ margin-top:var(--s5); }
.galeria{ margin-top:var(--s5); }

/* Reservas */
.panel-reserva{
  background:var(--superficie); border-radius:var(--r-xl);
  padding:clamp(30px,5vw,58px);
}
.widget-reservas{ width:100%; min-height:820px; border:0; border-radius:var(--r-lg); }

/* Carta */
.carta-panel__intro{ padding-top:var(--s5); }
.carta-grupo__head{ display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s1); }
.carta-grupo__marca{ width:20px; height:auto; flex:0 0 auto; }
.carta-grupo__titulo{ font-family:var(--hand); font-size:clamp(2.1rem,5.4vw,3.1rem); color:var(--borgona); margin:0; }
.carta-items--simple{ grid-template-columns:1fr !important; }
.carta-tabs{ border-bottom:0; }
.carta-tabs__lista{ padding-block:var(--s3); }

/* Datos de contacto */
.datos{ margin-top:var(--s3); }
.datos > li{ border-top:1px solid var(--hairline); padding-top:var(--s2); }

/* =============================================================
   17. FOTOGRAFÍA, HERO Y COMPONENTES v8.2
   ============================================================= */

/* Cortes de línea intencionales: sólo cortan de tablet para arriba.
   En mobile el título fluye y `text-wrap:balance` lo equilibra solo. */
.br-md{ display:none; }
@media (min-width:760px){ .br-md{ display:inline; } }

p{ text-wrap:pretty; }

/* Todo <picture> se comporta como bloque de imagen */
picture{ display:block; }

/* ---------- HERO: copy y después la foto a sangre --------- */
.hero{ background:var(--verde); color:var(--crema); overflow:hidden;
  border-bottom-left-radius:var(--r-xl); border-bottom-right-radius:var(--r-xl); }
.hero__copy{ padding-block:clamp(48px,9vw,96px) clamp(36px,5vw,64px); }
.hero__isotipo{ width:clamp(58px,7.5vw,86px); height:auto; margin-bottom:var(--s4); }
.hero__titulo{ font-size:var(--t-display); line-height:.9; letter-spacing:-.035em; }
.hero__manic{ margin-top:var(--s2); }
.hero .lead{ margin-top:var(--s4); color:rgba(242,233,213,.88); max-width:46ch; }
.hero .acciones{ margin-top:var(--s5); }
.hero__media{ margin:0; }
.hero__foto img{ width:100%; height:clamp(260px,52vw,560px); object-fit:cover; display:block; }

/* ---------- Fotos en grilla y sueltas --------------------- */
.foto-suelta{ margin:0 0 var(--s4); }
.foto-suelta img{ width:100%; height:auto; border-radius:var(--r-lg); object-fit:cover; }

.foto-ancha{ margin:0; }
.foto-ancha__img img{ width:100%; height:clamp(220px,40vw,460px); object-fit:cover; border-radius:var(--r-xl); }

.galeria{ display:grid; gap:var(--s3); margin-top:var(--s5); }
@media (min-width:760px){ .galeria{ grid-template-columns:repeat(3,1fr); gap:var(--s4); } }
.galeria figure{ margin:0; min-width:0; }
.galeria img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-md); }
.galeria figcaption{
  font-family:var(--ui); font-weight:700; font-size:.78rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--fg-soft); margin-top:var(--s2);
}

/* ---------- Precio destacado ------------------------------ */
.precio-destacado{
  font-family:var(--ui); font-weight:700; line-height:1; letter-spacing:-.035em;
  font-size:clamp(2.4rem,6.5vw,3.6rem); color:var(--accent); margin:0 0 var(--s3);
}
.precio-destacado--grande{ font-size:clamp(2.9rem,8vw,4.6rem); }
.precio-destacado__unidad{
  display:block; margin-top:var(--s2);
  font-size:1rem; font-weight:500; letter-spacing:.02em; color:var(--fg-soft);
}

/* ---------- Eventos --------------------------------------- */

.icono{ flex:0 0 auto; }
.btn .icono{ margin-right:-.15em; }

/* ---------- Robustez mobile -------------------------------
   Palabras largas (nombres de platos, URLs) no deben empujar
   el layout; los hijos de grid necesitan min-width:0 o el
   contenido ancho rompe la columna en vez de encogerse.      */
.grid > *,.galeria > *,.eventos > *{ min-width:0; }
h1,h2,h3,.display,.h1,.h2,.h3{ overflow-wrap:break-word; }
.plato__nombre,.plato__desc,.evento p{ overflow-wrap:break-word; }
.contenedor{ overflow-x:clip; }

@media (max-width:759px){
  .grid--editorial{ gap:var(--s4); }
  .acciones .btn{ width:100%; }
  .acciones{ gap:12px; }
}

@media (min-width:560px){ .acciones .btn{ width:auto; } }

/* =============================================================
   18. ACCIONES FLOTANTES
   Grupo único abajo a la derecha para que los dos botones no
   compitan por el mismo lugar: la píldora de reserva aparece en
   mobile al pasar el hero, el WhatsApp está siempre.
   ============================================================= */
.flotantes{
  position:fixed; right:var(--s2); bottom:var(--s2); z-index:75;
  display:flex; align-items:center; gap:10px;
}
@media (min-width:760px){ .flotantes{ right:var(--s3); bottom:var(--s3); gap:12px; } }

.cta-fija{
  min-height:52px; padding:0 24px;
  box-shadow:0 6px 22px rgba(24,59,52,.3);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.96);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.cta-fija.visible{ opacity:1; visibility:visible; transform:none; }
@media (min-width:760px){ .cta-fija{ display:none; } }

.fab-wa{
  display:flex; align-items:center; justify-content:center;
  width:58px; height:58px; flex:0 0 auto;
  border-radius:var(--r-pill);
  background:var(--verde); color:var(--crema);
  box-shadow:0 6px 22px rgba(24,59,52,.32);
  transition:background-color .2s var(--ease),transform .14s var(--ease);
}
.fab-wa:hover{ background:var(--coral); color:var(--negro); }
.fab-wa:active{ transform:scale(.94); }
.fab-wa .icono{ width:28px; height:28px; }
@media (min-width:760px){ .fab-wa{ width:62px; height:62px; } }

/* Los flotantes tapan la esquina inferior derecha: el footer necesita
   aire para que su última línea no quede debajo del botón. */
.footer__legal{ padding-bottom:64px; }
@media (min-width:760px){ .footer__legal{ padding-bottom:0; padding-right:86px; } }

/* Foto de la sección cocina: sin lista al lado, gana altura */
.foto-suelta--alta img{ aspect-ratio:4/5; }

/* Bajada única de sección: al quedar sola necesita más cuerpo para
   sostener la columna frente al título grande de al lado. */
.lead--solo{
  font-size:clamp(1.32rem,3vw,1.95rem);
  line-height:1.32; max-width:34ch;
}

/* =============================================================
   19. AJUSTES v8.3
   ============================================================= */

/* ---------- Horarios: varios tramos --------------------------
   Martes abre más tarde que el resto, así que la tabla necesita
   una fila por tramo en lugar de un rango único.               */
.horario{ margin-top:var(--s3); }
.horario__lista{ list-style:none; margin:0; padding:0; }
.horario__tramo{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--s2) 0; border-bottom:1px solid var(--hairline);
}
.horario__tramo:first-child{ border-top:1px solid var(--hairline); }
.horario__dias{
  font-family:var(--ui); font-weight:700; font-size:.8rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-soft);
}
.horario__rango{
  font-family:var(--ui); font-weight:700; line-height:1; letter-spacing:-.03em;
  font-size:clamp(1.7rem,4.2vw,2.3rem); font-variant-numeric:tabular-nums;
}
.horario__hoy{
  font-family:var(--ui); font-weight:700; font-size:1rem; color:var(--accent);
  margin:var(--s3) 0 0; min-height:1.4em;
}
.horario .small{ margin-top:var(--s1); }

/* ---------- Alineación superior de las dos columnas ----------
   El título usa interlineado 1 y la bajada 1.38: sin compensar
   ese medio interlineado, la primera línea de la derecha queda
   unos píxeles más abajo que la mayúscula de la izquierda.     */
@media (min-width:760px){
  .grid--alineado > *:not(:first-child) > :first-child{ margin-top:-0.19em; }
}

/* ---------- Agenda sin fechas cargadas ---------------------- */

/* =============================================================
   20. PRENSA
   ============================================================= */
.notas{ display:grid; gap:var(--s3); }
@media (min-width:860px){
  .notas{ grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:var(--s4); }
  .notas--compacta{ grid-template-columns:1fr; gap:var(--s3); }
}

.nota{
  background:var(--superficie); border-radius:var(--r-lg);
  padding:clamp(24px,3.6vw,36px);
  display:flex; flex-direction:column; gap:var(--s1);
}
.nota__medio{
  font-family:var(--ui); font-weight:700; font-size:.82rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); margin:0;
}
.nota__seccion{ color:var(--fg-soft); font-weight:500; }
.nota__titulo{ margin:var(--s1) 0 0; font-size:clamp(1.18rem,2.4vw,1.5rem); line-height:1.2; }
.nota__bajada{ margin:var(--s2) 0 0; font-size:1rem; color:var(--fg-soft); }
.nota__pie{
  margin:var(--s2) 0 0; font-family:var(--ui); font-size:.88rem;
  color:var(--fg-soft); font-variant-numeric:tabular-nums;
}
.nota__enlace{
  align-self:flex-start; margin-top:var(--s3);
  display:inline-flex; align-items:center; gap:.4em; min-height:44px;
  font-family:var(--ui); font-weight:700; font-size:.95rem;
  border-bottom:1.5px solid currentColor; padding-bottom:2px;
}
.nota__enlace:hover{ color:var(--accent); }

/* En el home las notas van sobre verde: el título no compite con el h2 */
.notas--compacta .nota__titulo{ font-size:clamp(1.1rem,2vw,1.28rem); }
.notas--compacta .nota__bajada{ font-size:.95rem; }

/* ---------- Agenda con varios artistas ---------------------- */

/* Con dos fechas o más, la grilla las pone lado a lado */

/* =============================================================
   21. PORTADAS DE PRENSA Y CICLO
   ============================================================= */

/* ---------- Portada de nota -----------------------------------
   No usamos la foto del medio: es material con derechos ajenos y
   además rompería la paleta. La portada se arma con el sistema de
   marca, y la tinta rota para que dos notas vecinas no se repitan. */
.nota{ padding:0; overflow:hidden; }
.nota__cuerpo{ padding:clamp(24px,3.6vw,34px); display:flex; flex-direction:column; gap:var(--s1); flex:1; }
.nota__portada{
  position:relative; aspect-ratio:16/9; display:flex; align-items:flex-end;
  padding:clamp(18px,2.6vw,26px); overflow:hidden;
  background:var(--verde); color:var(--crema);
}
.nota__portada::after{
  content:""; position:absolute; right:-6%; top:-24%; width:52%; height:150%;
  background:currentColor; opacity:.13;
  -webkit-mask:url('../img/isotipo-verde.svg') no-repeat center/contain;
  mask:url('../img/isotipo-verde.svg') no-repeat center/contain;
}
.nota__portada-medio{
  position:relative; z-index:1; max-width:72%;
  font-family:var(--ui); font-weight:700; letter-spacing:-.03em; line-height:1;
  font-size:clamp(1.5rem,3.4vw,2.1rem);
}
.nota__portada--verde{ background:var(--verde); color:var(--crema); }
.nota__portada--borgona{ background:var(--borgona); color:var(--crema); }
.nota__portada--negro{ background:var(--negro); color:var(--crema); }
.nota__portada--coral{ background:var(--coral); color:var(--negro); }
@supports not (mask: url('')){ .nota__portada::after{ display:none; } }

/* ---------- Ciclo de los martes ------------------------------ */
@media (min-width:860px){ .ciclo{ grid-template-columns:1.05fr .95fr; gap:var(--s6); } }

/* =============================================================
   22. AGENDA — tarjetas de evento
   La fecha va en una columna propia: con varias fechas seguidas,
   es el dato que la gente escanea primero.
   ============================================================= */
.eventos{ display:grid; gap:var(--s3); margin-top:var(--s5); }
@media (min-width:760px){ .eventos{ gap:var(--s4); } }

.evento{
  background:var(--superficie); border-radius:var(--r-lg);
  padding:clamp(24px,3.6vw,38px);
  display:grid; gap:var(--s3);
}
@media (min-width:700px){
  .evento{ grid-template-columns:minmax(130px,160px) minmax(0,1fr); gap:var(--s5); align-items:start; }
}

/* La pieza de difusión va entera, en su 9:16 de stories. Es vertical y
   alta, así que nunca ocupa todo el ancho: va siempre en una columna
   propia, al lado del texto, que es lo que la mantiene a una altura
   parecida a la de la tarjeta. */
.evento__foto{
  display:block; border-radius:var(--r-md); overflow:hidden;
  background:var(--superficie); max-width:300px;
  /* Filo de 1px: hay piezas de fondo crema que, sin él, se funden con
     el de la tarjeta y quedan flotando sin borde. */
  box-shadow:inset 0 0 0 1px var(--hairline);
}
/* Sin aspect-ratio ni object-fit a propósito: la altura la define la
   proporción real del archivo (los atributos width/height del <img> la
   reservan antes de cargar). Fijar la proporción acá es lo que permitió
   que una pieza de otra medida se estirara en vez de verse entera. */
.evento__foto img{
  display:block; width:100%; height:auto;
}
/* Las reglas de abajo miran el ancho de la ventana, pero la misma tarjeta
   vive en dos anchos muy distintos: la agenda ocupa todo y el panel de la
   home, media columna. Por eso el reparto en columnas de la agenda se
   acota a .eventos y el panel usa el de acá, más angosto. */
@media (min-width:700px){
  .evento--con-foto{ grid-template-columns:minmax(0,190px) minmax(0,1fr); }
  .evento--con-foto .evento__foto{   grid-column:1; grid-row:1 / span 2; }
  .evento--con-foto .evento__cuando{ grid-column:2; grid-row:1; }
  .evento--con-foto .evento__cuerpo{ grid-column:2; grid-row:2; }
}
/* Entre 700 y 900 las tres columnas entran pero con poco aire:
   la pieza se achica y el gap baja un escalón. */
@media (min-width:700px) and (max-width:899px){
  .eventos .evento--con-foto{
    grid-template-columns:minmax(110px,130px) minmax(140px,180px) minmax(0,1fr);
    gap:var(--s4);
  }
  .eventos .evento--con-foto .evento__cuando{ grid-column:1; grid-row:1; }
  .eventos .evento--con-foto .evento__foto{   grid-column:2; grid-row:1; }
  .eventos .evento--con-foto .evento__cuerpo{ grid-column:3; grid-row:1; }
}
@media (min-width:900px){
  .eventos .evento--con-foto{ grid-template-columns:minmax(120px,150px) minmax(200px,260px) minmax(0,1fr); }
  .eventos .evento--con-foto .evento__cuando{ grid-column:1; grid-row:1; }
  .eventos .evento--con-foto .evento__foto{   grid-column:2; grid-row:1; }
  .eventos .evento--con-foto .evento__cuerpo{ grid-column:3; grid-row:1; }
}

.evento__cuando{ display:flex; flex-direction:column; gap:0; }
.evento__fecha{ display:flex; flex-direction:column; }
.evento__dia{
  font-family:var(--ui); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
/* Ficha de fecha: número grande + mes debajo. Cualquier fecha entra
   en la columna sin partirse, incluso "30 de septiembre". */
.evento__num{
  font-family:var(--ui); font-weight:700; line-height:.92; letter-spacing:-.04em;
  font-size:clamp(2.4rem,5.2vw,3.1rem); margin-top:2px;
}
.evento__mes{
  font-family:var(--ui); font-weight:500; font-size:1.02rem;
  line-height:1.1; margin-top:1px;
}
.evento__hora{
  font-family:var(--ui); font-weight:500; font-size:.95rem;
  color:var(--fg-soft); margin-top:10px; font-variant-numeric:tabular-nums;
}

.evento__cuerpo{ min-width:0; display:flex; flex-direction:column; gap:var(--s1); }
.evento__titulo{ margin:0; }
.evento__sub{
  margin:2px 0 0; font-family:var(--ui); font-weight:500;
  font-size:1rem; color:var(--accent);
}
.evento__bajada{ margin:var(--s2) 0 0; font-size:1rem; max-width:58ch; }
.evento__nota{ margin:var(--s2) 0 0; font-size:.9rem; color:var(--fg-soft); max-width:58ch; }

.evento__detalles{ list-style:none; margin:var(--s3) 0 0; padding:0; }
.evento__detalles li{
  display:flex; flex-wrap:wrap; gap:4px var(--s3); justify-content:space-between;
  padding:9px 0; border-bottom:1px solid var(--hairline); max-width:40ch;
}
.evento__detalles li:first-child{ border-top:1px solid var(--hairline); }
.evento__detalle-k{
  font-family:var(--ui); font-weight:700; font-size:.76rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--fg-soft);
}
.evento__detalle-v{ font-family:var(--ui); font-weight:500; font-size:.98rem; }

.evento__cta{ align-self:flex-start; margin-top:var(--s4); }

/* Agotado: sin botón, pero con el estado bien visible. */
.evento__agotado{
  align-self:flex-start; margin:var(--s4) 0 0;
  padding:10px 20px; border-radius:var(--r-pill);
  border:1.5px solid var(--hairline);
  font-family:var(--ui); font-weight:700; font-size:.88rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--fg-soft);
}
.evento--agotado{ opacity:.78; }
.evento--agotado:hover{ opacity:1; }
/* Salida para el que llegó tarde: la fecha que todavía tiene lugar. */
.evento__alternativa{
  margin:var(--s3) 0 0; font-family:var(--ui); font-size:.95rem;
  color:var(--fg-soft);
}

/* Variante sobre fondo de color (home) */
.evento--sobre-color{ background:rgba(242,233,213,.09); }
.evento__pie{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  align-items:center; justify-content:space-between; margin-top:var(--s3);
}
.evento__extra{ font-size:.95rem; color:var(--fg-soft); margin:0; }
.evento--vacio{ display:block; }
.evento--vacio .enlace{ margin-top:var(--s2); }