/* =============================================================
   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); }
.acciones--centrado{ justify-content:center; 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) ------------------------------ */

/* ---------- 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); }
/* El h1 y la bajada se tocaban: con una bajada larga no se nota, pero con
   una de cuatro palabras queda pegada al titular. */
.subhero .lead{ margin-top:var(--s3); }
.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; }
/* La fecha de algo que ya ocurrió baja de tono. Va en la tarjeta y no
   en el contenedor para que siga funcionando si una fecha pasada
   aparece fuera del bloque de archivo. */
.evento--pasado .evento__dia,
.evento--pasado .evento__num,
.evento--pasado .evento__mes,
.evento--pasado .evento__hora{ color:var(--fg-soft); }

/* ---- Fechas que ya pasaron ----
   Se muestran, pero un escalón por debajo de lo que viene: sin fondo
   propio, con la ficha de fecha más chica y la imagen reducida. La
   jerarquía la hace el tamaño, no el color, para que sigan legibles. */
.evento__pasado{
  align-self:flex-start; margin:var(--s3) 0 0;
  font-family:var(--ui); font-weight:700; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-soft);
}
.seccion--archivo{ padding-top:0; }
.eventos--archivo{ gap:var(--s2); margin-top:var(--s4); }
.eventos--archivo .evento{
  background:transparent; border-top:1px solid var(--hairline);
  border-radius:0; padding:var(--s4) 0;
}
.eventos--archivo .evento__num{ font-size:clamp(1.7rem,3.4vw,2.1rem); }
.eventos--archivo .evento__titulo{ font-size:clamp(1.25rem,2.4vw,1.6rem); }
.eventos--archivo .evento__foto{ max-width:168px; }
@media (min-width:700px){
  .eventos--archivo .evento--con-foto{ grid-template-columns:minmax(0,120px) minmax(0,1fr); }
}
@media (min-width:900px){
  .eventos--archivo .evento--con-foto{
    grid-template-columns:minmax(100px,120px) minmax(120px,150px) minmax(0,1fr);
  }
}
/* 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); }

/* ===========================================================
   23. GALERÍA DE ESPACIOS
   Grilla editorial de 12 columnas. Cada pieza declara su span en
   el HTML (12 para la apertura, 7 para las apaisadas, 5 para las
   verticales) y las filas cierran siempre en 12. Dejar que la
   proporción de cada archivo decida el ancho es lo que desalinea
   una galería: acá el ancho es una decisión, no una consecuencia.
   =========================================================== */
.espacios{
  display:grid; gap:var(--s5) var(--s4);
  margin-top:var(--s5);
}
@media (min-width:860px){
  .espacios{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:clamp(48px,6vw,88px) var(--s4);
  }
  .espacios__pieza--12{ grid-column:span 12; }
  .espacios__pieza--7 { grid-column:span 7;  }
  .espacios__pieza--5 { grid-column:span 5;  }
  .espacios__nota     { grid-column:span 12; }
}

/* La vertical y la apaisada de una misma fila nunca miden lo mismo de
   alto. En vez de dejar el desnivel al pie, la pieza se estira a la
   altura de la fila y la foto se apoya abajo: así el filete y el
   epígrafe de las dos arrancan en la misma línea y la fila se lee
   como una fila. El aire sobrante queda arriba, que es donde no molesta. */
.espacios__pieza{
  margin:0; display:grid; grid-template-rows:1fr auto; gap:var(--s3);
}
.espacios__foto{ align-self:end;
  display:block; border-radius:var(--r-md); overflow:hidden;
  background:var(--superficie); box-shadow:inset 0 0 0 1px var(--hairline);
}
/* Sin aspect-ratio ni object-fit: la altura sale de la proporción del
   archivo y los atributos width/height la reservan antes de cargar.
   Fijarla acá es lo que estira una foto de otra medida. */
.espacios__foto img{ display:block; width:100%; height:auto; }

/* El pie arranca con un filete del ancho de la foto. Es lo que ata las
   seis piezas entre sí: sin eso cada epígrafe flota por su cuenta. */
.espacios__pie{
  display:flex; flex-direction:column; gap:var(--s1);
  padding-top:var(--s2); border-top:1px solid var(--hairline);
}
.espacios__titulo{ margin:0; }
.espacios__pie p{ margin:0; color:var(--fg-soft); max-width:52ch; }
.espacios__pieza--12 .espacios__pie p{ max-width:64ch; }

/* El bloque de grupos cierra la galería a todo el ancho. Como banda
   ancha y baja no compite con las fotos: si se estira en alto, queda
   medio vacío de verde. */
.espacios__nota{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2);
  padding:clamp(28px,4vw,52px);
  border-radius:var(--r-md);
  background:var(--bg); color:var(--fg);   /* los toma de .tema-verde */
}
@media (min-width:860px){
  .espacios__nota{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:var(--s5); column-gap:clamp(32px,5vw,80px);
  }
  .espacios__nota .btn{ flex:0 0 auto; }
}
.espacios__nota h2{
  margin:0; max-width:16ch;
  font-size:clamp(1.7rem,2.4vw,2.4rem); line-height:1.08;
}
.espacios__nota p { margin:0; color:var(--fg-soft); max-width:42ch; }
.espacios__nota-texto{ display:flex; flex-direction:column; gap:var(--s2); }
.espacios__nota .eyebrow{ display:block; }

/* ===========================================================
   24. PREGUNTAS FRECUENTES
   Acordeón con <details>: abre y cierra sin JavaScript, y el
   buscador de Google lee igual el texto aunque esté plegado.
   =========================================================== */
.faq{ display:grid; gap:var(--s5); }
/* El ancho máximo va en la lista, no en el contenedor: el contenedor
   está centrado, y limitarlo ahí corre todo el bloque a la derecha y lo
   desalinea del título de la página. */
.faq__bloque{ display:grid; gap:var(--s3); }
@media (min-width:900px){
  .faq__bloque{
    grid-template-columns:minmax(180px,240px) minmax(0,1fr);
    gap:var(--s5); align-items:start;
  }
  .faq__tema{ position:sticky; top:96px; }
}
.faq__tema{
  margin:0; font-family:var(--ui); font-weight:700;
  letter-spacing:-.01em; color:var(--acento-fuerte, var(--fg));
}
.faq__lista{ border-top:1px solid var(--hairline); }
.faq__item{ border-bottom:1px solid var(--hairline); }

.faq__p{
  display:flex; align-items:baseline; gap:var(--s3);
  padding:var(--s3) 0; cursor:pointer; list-style:none;
  font-family:var(--ui); font-weight:600;
  font-size:clamp(1.02rem,1.6vw,1.14rem); line-height:1.35;
  min-height:44px;
}
.faq__p::-webkit-details-marker{ display:none; }
/* El signo se dibuja con texto, no con un icono: hereda el color del
   tema y no hay que mantener un SVG por variante. */
.faq__p::after{
  content:"+"; margin-left:auto; flex:none;
  font-weight:400; font-size:1.5em; line-height:1;
  color:var(--fg-soft); transition:transform .18s ease;
}
.faq__item[open] .faq__p::after{ content:"\2013"; }
.faq__p:hover{ color:var(--accent); }
.faq__p:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.faq__r{ padding:0 0 var(--s3); max-width:62ch; }
.faq__r p{ margin:0; color:var(--fg-soft); }

@media (prefers-reduced-motion:no-preference){
  .faq__item[open] .faq__r{ animation:faq-abre .18s ease both; }
  @keyframes faq-abre{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
}