/* Generato da 04-web/scripts/fuentes.py — SIL Open Font License 1.1 */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 800;font-display:swap;src:url("fuentes/fraunces.woff2") format("woff2");}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("fuentes/instrument-sans.woff2") format("woff2");}

/* ═══════════════════════════════════════════════════════════════════
   Noi Due Madrid — one pager
   Direzione: «edicola votiva della Sanità». Vedi DESIGN.md.
   Scuro di default: un ristorante si sceglie di sera.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── marca (stampa + schermo) ── */
  --piperno:#241E1B;
  --rosso:#A32718;
  --tufo:#E3C88D;
  --calce:#F6F1E7;
  --basilico:#3F5C43;

  /* ── varianti solo-schermo ──
     Rosso e Basilico su Piperno danno 2,2:1: inutilizzabili per testo.
     Questi sono ricalcolati e verificati (vedi DESIGN.md). */
  --rosso-luz:#E0705C;      /* 5,20:1 su Piperno */
  --basilico-luz:#7FB98A;   /* 7,21:1 su Piperno */
  --humo:#C9BDB0;           /* 8,92:1 */
  --humo-2:#B7A99A;         /* 7,17:1 */
  --piperno-2:#1A1614;      /* fondo più profondo, footer */
  --piperno-3:#332B27;      /* superfici sollevate su scuro */
  --linea:rgba(246,241,231,.14);
  --linea-clara:#DED4C1;    /* filetti su Calce */
  --tinta:#4A423C;          /* testo secondario su Calce, 9,2:1 */
  --tinta-2:#6B605A;        /* allergeni e note su Calce, 5,41:1 — la riga
                               allergeni è obbligo di legge, non può stare
                               sotto soglia: #7A6E66 dava 4,39:1 */

  /* ── tipografia ── */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --texto:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* ── cementina napoletana: stesso pattern della carta stampata ── */
  --cementina-tufo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23E3C88D' stroke-width='1.05'%3E%3Ccircle cx='0' cy='0' r='10'/%3E%3Ccircle cx='20' cy='0' r='10'/%3E%3Ccircle cx='0' cy='20' r='10'/%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/g%3E%3C/svg%3E");
  --cementina-rosso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23A32718' stroke-width='1' opacity='.45'%3E%3Ccircle cx='0' cy='0' r='10'/%3E%3Ccircle cx='20' cy='0' r='10'/%3E%3Ccircle cx='0' cy='20' r='10'/%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/g%3E%3C/svg%3E");

  /* ── ritmo ── */
  --ancho:1120px;
  --margen:clamp(20px,5vw,40px);
  --seccion:clamp(64px,10vw,132px);

  /* ── scala z semantica, mai valori arbitrari ── */
  --z-nav:10;
  --z-aviso:20;
  --z-dialogo-fondo:30;
  --z-dialogo:40;

  /* altezza della fascia di avviso, se c'è: la portada la scala dai suoi
     100svh, altrimenti spinge stato e bottoni fuori schermo */
  --alto-aviso:0px;

  /* ── curva unica: ease-out-quart ── */
  --salida:cubic-bezier(.25,1,.5,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--piperno);
  color:var(--calce);
  font-family:var(--texto);
  font-size:clamp(16px,.95rem + .2vw,17.5px);
  line-height:1.65;      /* testo chiaro su scuro: legge più leggero, serve aria */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto è obbligatorio: gli attributi width/height nell'HTML servono a
   riservare lo spazio ed evitare lo scivolamento del layout, ma senza questo
   l'altezza resta inchiodata al valore dell'attributo appena il CSS cambia
   solo la larghezza. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{
  font-family:var(--display);
  font-variation-settings:"SOFT" 45,"WONK" 1;
  margin:0;line-height:1.02;letter-spacing:-.022em;
  text-wrap:balance;
}
p{text-wrap:pretty}

.env{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--margen)}
.oculto-visual{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* salto al contenuto — la carta è ciò per cui la gente arriva */
.saltar{
  position:absolute;left:var(--margen);top:-100px;z-index:calc(var(--z-aviso) + 1);
  background:var(--tufo);color:var(--piperno);padding:12px 20px;border-radius:2px;
  font-weight:600;text-decoration:none;transition:top .18s var(--salida);
}
.saltar:focus-visible{top:12px}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--tufo);outline-offset:3px;border-radius:2px;
}
/* Sul fondo Calce il Tufo fa 1,4:1: l'anello di focus spariva proprio nella
   carta, dove si naviga di più da tastiera. Il Rosso fa 6,5:1 (WCAG 2.4.11). */
:where(.carta,.legal-pagina) :where(a,button,summary,[tabindex]):focus-visible{outline-color:var(--rosso)}

/* ═══ ESTADO — il componente che porta la pagina ═══════════════════ */

.estado{display:flex;align-items:flex-start;gap:12px}

.estado .punto{
  inline-size:11px;block-size:11px;border-radius:50%;flex:0 0 auto;
  margin-top:.52em;background:var(--humo-2);position:relative;
}
/* l'alone pulsa, non il pallino: il pallino resta della sua dimensione
   esatta e non fa ballare la riga di testo accanto */
.estado .punto::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid currentColor;color:inherit;opacity:0;
}
.estado[data-estado="abierto"] .punto{background:var(--basilico-luz);color:var(--basilico-luz)}
.estado[data-estado="cierra-pronto"] .punto{background:var(--tufo);color:var(--tufo)}
.estado[data-estado="cerrado"] .punto,
.estado[data-estado="excepcion"] .punto{background:var(--rosso-luz);color:var(--rosso-luz)}
.estado[data-estado="cerrado"] .punto::after,
.estado[data-estado="excepcion"] .punto::after{animation:latido 2.4s var(--salida) infinite}
.estado[data-estado="sin-datos"]{display:none}

@keyframes latido{
  0%{opacity:.85;transform:scale(.72)}
  70%,100%{opacity:0;transform:scale(1.9)}
}

.estado .titulo{
  font-family:var(--display);font-variation-settings:"SOFT" 30,"WONK" 0;
  font-weight:600;font-size:1.32rem;line-height:1.15;display:block;
}
.estado[data-estado="abierto"] .titulo{color:var(--basilico-luz)}
.estado[data-estado="cierra-pronto"] .titulo{color:var(--tufo)}
.estado[data-estado="cerrado"] .titulo,
.estado[data-estado="excepcion"] .titulo{color:var(--rosso-luz)}
.estado .detalle{display:block;color:var(--humo);font-size:.97rem;margin-top:1px}
.estado-tabla{margin-top:18px}
.estado .nota[hidden]{display:none}
.estado .nota{
  display:inline-block;margin-top:7px;font-size:.79rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--tufo);border:1px solid rgba(227,200,141,.42);
  padding:3px 9px;border-radius:2px;
}


/* ═══ PORTADA — imagen única a pantalla completa ══════════════════
   Niente banda superiore: l'apertura è la fotografia, come su Fratelli
   Figurato. Il contenuto sta ancorato in basso, dove sta l'occhio quando
   la foto ha già parlato. */

.portada{
  position:relative;isolation:isolate;
  min-block-size:calc(100svh - var(--alto-aviso));
  display:flex;align-items:flex-end;
  padding-block:clamp(28px,7vh,64px) clamp(34px,7vh,72px);
}
.portada .foto{
  position:absolute;inset:0;z-index:-2;
}
.portada .foto picture{display:block;inline-size:100%;block-size:100%}
.portada .foto img{inline-size:100%;block-size:100%;height:100%;object-fit:cover;object-position:center 42%}
/* il gradiente non è decorativo: senza, il testo su una foto di pizza
   passa da 12:1 a illeggibile appena cambia la foto */
.portada::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(178deg,rgba(36,30,27,.94) 0%,rgba(36,30,27,.74) 38%,rgba(36,30,27,.90) 74%,var(--piperno) 100%),
    linear-gradient(90deg,rgba(36,30,27,.72) 0%,rgba(36,30,27,.18) 62%);
}

.portada .env{inline-size:100%}
/* Il marchio è un lockup verticale (rapporto 0,712): l'altezza si ricava
   dalla larghezza, e su schermi bassi va contenuta o mangia la portada. */
.portada .marca{
  inline-size:clamp(104px,13vw,138px);aspect-ratio:.712;block-size:auto;
  color:#fff;margin-bottom:clamp(18px,3.5vh,30px);display:block;
}
.marca-pie{
  inline-size:78px;aspect-ratio:.712;block-size:auto;color:#fff;display:block;
}
.portada h1{
  font-size:clamp(2.5rem,8.4vw,5rem);font-weight:700;
  font-variation-settings:"SOFT" 55,"WONK" 1;
  max-inline-size:13ch;
}
.portada h1 em{font-style:normal;color:var(--tufo);display:block}
.portada .rotulo{
  display:inline-flex;align-items:center;gap:9px;margin:clamp(14px,2.4vh,20px) 0 0;
  font-size:.8rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tufo);
}
.portada .rotulo::before{
  content:"";inline-size:26px;block-size:2px;background:var(--rosso-luz);
}

/* Su schermi bassi (telefono in orizzontale, laptop 13") il blocco stato
   deve restare dentro i 100svh. Misurato: senza questi tagli finisce fuori. */
@media (max-height:760px){
  .portada .marca{inline-size:88px;margin-bottom:12px}
  .portada h1{font-size:clamp(2rem,5.2vh,2.7rem)}
  .portada .rotulo{margin-top:10px}
  .bloque-estado{margin-top:16px;padding:15px 17px}
  .bloque-estado .horario-hoy{margin-top:10px;padding-top:9px}
}

.bloque-estado{
  margin-top:clamp(28px,5vw,42px);
  background:rgba(26,22,20,.72);
  backdrop-filter:blur(14px) saturate(120%);
  border:1px solid var(--linea);
  border-radius:3px;padding:clamp(18px,3vw,22px) clamp(18px,3vw,24px);
  max-inline-size:31rem;
}
.bloque-estado .horario-hoy{
  margin:14px 0 0;padding-top:13px;border-top:1px solid var(--linea);
  font-size:.88rem;color:var(--humo-2);
}
.bloque-estado .horario-hoy b{color:var(--calce);font-weight:600}

/* ═══ BOTONES ═════════════════════════════════════════════════════ */

.acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,3.5vw,28px)}
.btn{
  --fondo:var(--rosso);--tinta-btn:var(--calce);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-block-size:52px;padding:0 24px;border:0;border-radius:2px;
  background:var(--fondo);color:var(--tinta-btn);
  font-family:var(--texto);font-size:1rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .22s var(--salida),background-color .22s var(--salida),border-color .22s var(--salida);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{inline-size:18px;block-size:18px;flex:0 0 auto}
.btn.fantasma{
  background:transparent;color:var(--calce);
  box-shadow:inset 0 0 0 1.5px rgba(246,241,231,.34);
}
.btn.fantasma:hover{box-shadow:inset 0 0 0 1.5px var(--tufo);color:var(--tufo)}
.btn.tufo{--fondo:var(--tufo);--tinta-btn:var(--piperno)}

/* ═══ PREMIO — l'unica fascia satura ══════════════════════════════ */

section.premio{
  background-color:var(--rosso);background-image:var(--cementina-tufo);
  background-size:78px 78px;
  padding-block:clamp(48px,7vw,76px);color:var(--calce);
}
section.premio .caja{
  background:var(--piperno);padding:clamp(28px,5vw,44px) clamp(24px,5vw,48px);
  max-inline-size:44rem;border-radius:3px;
}
/* Il sello di 50 Top Pizza è un quadrato rosso #E7302A, diverso dal nostro
   Rosso San Gennaro #A32718: due rossi accostati litigano, quindi vive solo
   sul pannello Piperno, mai sulla fascia rossa. */
section.premio .sello{
  inline-size:clamp(74px,9vw,94px);block-size:auto;border-radius:6px;
  margin-bottom:clamp(16px,2.4vw,22px);
}
section.premio h2{
  font-size:clamp(1.7rem,1.2rem + 2.4vw,2.9rem);font-weight:600;margin-top:14px;
}
section.premio h2 span{color:var(--tufo)}
section.premio p{color:var(--humo);margin:14px 0 0;max-inline-size:46ch}
section.premio .enlace{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  color:var(--tufo);font-weight:600;text-decoration:none;
  min-block-size:44px;                       /* WCAG 2.5.8 */
  box-shadow:inset 0 -1.5px 0 rgba(227,200,141,.4);
  transition:box-shadow .2s var(--salida);
}
section.premio .enlace:hover{box-shadow:inset 0 -1.5px 0 var(--tufo)}

/* ═══ CARTA — qui il fondo torna Calce: si legge, non si decide ═══ */

.carta{background:var(--calce);color:var(--piperno);position:relative}
.carta .cinta{
  block-size:14px;background-color:var(--rosso);
  background-image:var(--cementina-tufo);background-size:14px 14px;
}
.carta .encabezado{padding-block:clamp(44px,7vw,72px) clamp(20px,3vw,28px)}
.carta h2{
  font-size:clamp(2.4rem,1.6rem + 3.6vw,4.2rem);font-weight:700;
  font-variation-settings:"SOFT" 50,"WONK" 1;
}

/* ── índice: columna fija a la izquierda ─────────────────────────
   In pagina larga è una colonna che resta ferma mentre la sezione scorre.
   Su telefono diventa una tira orizzontale appiccicata in alto: una
   colonna laterale su 375px mangerebbe metà schermo. */
/* minmax(0,1fr), non la colonna auto: la tira dell'indice su telefono è
   larga quanto le sue cinque voci (≈440px) e la colonna auto la seguiva,
   allargando tutta la pagina a 482px su un telefono da 375. Così la tira
   scorre dentro sé stessa, come deve. */
.cuerpo-carta{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,64px)}
@media (min-width:900px){
  .cuerpo-carta{grid-template-columns:210px minmax(0,1fr);align-items:start}
}

.indice ul{list-style:none;margin:0;padding:0}
.indice button{
  inline-size:100%;text-align:left;cursor:pointer;
  border:1px solid transparent;background:none;border-radius:2px;
  font-family:var(--texto);font-size:.82rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);
  padding:15px 16px;min-block-size:46px;
  transition:color .18s var(--salida),border-color .18s var(--salida);
}
.indice button:hover{color:var(--rosso)}
/* Lo stile sta su una classe, non sul selettore d'attributo. Oltre a essere
   la separazione corretta — l'ARIA descrive, la classe colora — evita un
   caso reale visto in prova: cambiando `aria-current` via JS lo stile del
   primo bottone restava inchiodato al valore presente nell'HTML iniziale,
   e l'indice mostrava attiva una sezione che non lo era. */
.indice button.actual{color:var(--piperno);border-color:var(--tufo)}
.nota-indice{
  margin:22px 0 0;padding-top:16px;border-top:1px solid var(--linea-clara);
  font-size:.8rem;line-height:1.7;color:var(--tinta-2);font-style:italic;
}
.nota-indice span{font-style:normal;letter-spacing:.04em}

@media (min-width:900px){
  .indice{position:sticky;top:26px;border-right:1px solid var(--linea-clara);padding-right:18px}
  .indice li + li{border-top:1px solid var(--linea-clara)}
}
@media (max-width:899px){
  .indice{
    position:sticky;top:0;z-index:var(--z-nav);
    margin-inline:calc(-1 * var(--margen));padding-inline:var(--margen);
    background:rgba(246,241,231,.95);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--linea-clara);
  }
  .indice ul{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
  .indice ul::-webkit-scrollbar{display:none}
  .indice button{inline-size:auto;white-space:nowrap;padding:14px 12px;border-radius:0;
    border-width:0 0 2.5px}
  .indice button.actual{border-bottom-color:var(--rosso);color:var(--rosso)}
  .nota-indice{display:none}
}

/* ── panel de sección ────────────────────────────────────────────── */
.panel[hidden]{display:none}
.rotulo-seccion{
  font-family:var(--texto);font-size:.82rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--tinta-2);
  margin:0 0 clamp(18px,2.5vw,26px);padding-bottom:14px;
  border-bottom:1px solid var(--piperno);
  display:flex;align-items:baseline;gap:.5em;
}
.rotulo-seccion span{color:var(--piperno)}

.grupo{margin-bottom:clamp(22px,3vw,34px)}
.grupo>h4{
  font-family:var(--texto);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rosso);
  margin:0 0 14px;
}

/* Due colonne quando c'è spazio, senza breakpoint. `align-items:start`
   evita che una descrizione lunga allunghi la riga accanto. */
.columnas{
  display:grid;gap:0 clamp(30px,4vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  align-items:start;
}

/* ── plato ───────────────────────────────────────────────────────── */
.plato{
  padding:16px 0;border-bottom:1px solid var(--linea-clara);
  scroll-margin-top:96px;transition:background-color .3s var(--salida);
}
.cabeza{display:flex;align-items:baseline;gap:16px;justify-content:space-between}
.plato .nombre{
  font-family:var(--display);font-variation-settings:"SOFT" 25,"WONK" 0;
  font-weight:500;font-size:1.24rem;line-height:1.24;margin:0;
  font-variant-caps:small-caps;letter-spacing:.015em;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.plato .precio{
  flex:0 0 auto;font-family:var(--display);font-weight:500;font-size:1.1rem;
  color:var(--piperno);font-variant-numeric:tabular-nums;
}
.plato .precio small{
  font-family:var(--texto);font-size:.62rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-2);
}
.plato .desc{margin:7px 0 0;font-size:.95rem;line-height:1.55;color:var(--tinta);max-inline-size:48ch}
.plato .alg{
  margin:9px 0 0;font-size:.82rem;font-style:italic;color:var(--tinta-2);
}
.plato.apuntado{background:var(--tufo);box-shadow:0 0 0 12px var(--tufo);border-radius:1px}

.etiqueta{
  font-family:var(--texto);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-2);font-variant-caps:normal;
  border:1px solid var(--linea-clara);border-radius:2px;padding:4px 8px;
  white-space:nowrap;align-self:center;
}
/* Il riconoscimento non è un'etichetta come le altre: è pieno, non
   contornato, perché deve staccare dalla riga del piatto. Calce su Rosso
   fa 6,52:1. */
/* le stelle del menu engineering: in stampa hanno il fondo Tufo, qui lo
   stesso Tufo in un'etichetta. #4A3A1E su Tufo fa 6,7:1 */
.etiqueta.recomendado{background:var(--tufo);border-color:var(--tufo);color:#4A3A1E}
/* «Opción vegetariana / vegana»: si chiede ordinando, il piatto in carta non
   lo è. Il contorno tratteggiato lo distingue da «Vegetariano». */
.etiqueta.opcion{border-style:dashed}
.etiqueta.galardon{
  background:var(--rosso);border-color:var(--rosso);color:var(--calce);
  letter-spacing:.1em;
}


.pie-carta{
  margin-top:clamp(20px,3vw,30px);padding:clamp(20px,3vw,26px) 0 clamp(48px,7vw,76px);
  border-top:1px solid var(--linea-clara);font-size:.83rem;line-height:1.6;color:var(--tinta-2);
}
.pie-carta b{font-weight:600}


/* ═══ PREMIOS — la hornacina ══════════════════════════════════════
   Al posto di «Maria y Ciro». È l'immagine del DESIGN.md presa alla
   lettera: l'edicola votiva nel muro della Sanità, la nicchia illuminata.
   La cornice è la fascia a cementina della carta piegata ad arco; dentro,
   la pietra prende la luce della lampada dall'alto e i riconoscimenti ci
   stanno appesi come targhe. Un oggetto solo, non tre schede uguali. */

.galardones{padding-block:var(--seccion)}
.hornacina{
  --cornice:clamp(10px,1.3vw,14px);
  --volta:clamp(118px,21vw,210px);          /* freccia dell'arco */
  max-inline-size:62rem;margin-inline:auto;padding:var(--cornice);
  background-color:var(--rosso);background-image:var(--cementina-tufo);background-size:14px 14px;
  border-radius:50% 50% 5px 5px / var(--volta) var(--volta) 5px 5px;
}
.nicho{
  position:relative;isolation:isolate;overflow:hidden;
  background:#2B2420;                        /* la pietra in ombra, un tono sopra il Piperno */
  border-radius:50% 50% 2px 2px / calc(var(--volta) - var(--cornice)) calc(var(--volta) - var(--cornice)) 2px 2px;
  padding:clamp(68px,10vw,112px) clamp(20px,5vw,64px) clamp(40px,6vw,64px);
  text-align:center;
}
/* la lampada: luce calda dall'alto. Si accende quando la nicchia entra
   nello schermo; senza JS, o con il movimento ridotto, è già accesa. */
.nicho::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72% 58% at 50% 0,rgba(227,200,141,.2),rgba(227,200,141,.06) 52%,transparent 78%);
  transition:opacity 1.8s var(--salida) .35s;
}
.hornacina.por-revelar .nicho::before{opacity:0}

.galardones h2{font-size:clamp(1.9rem,1.25rem + 2.7vw,3.1rem);font-weight:700}
.placas{
  --lado:clamp(92px,10vw,120px);            /* lato della targa */
  list-style:none;margin:clamp(34px,5vw,56px) 0 0;padding:0;
  display:grid;gap:clamp(34px,6vw,44px);
}
@media (min-width:760px){ .placas{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)} }
.placas li{display:flex;flex-direction:column;align-items:center}

/* la targa: il logo dell'ente così com'è, su Calce, appeso alla pietra.
   Misure fisse ricavate dal lato, non percentuali: un padding in % si
   calcola sulla larghezza della colonna, e su telefono il logo spariva. */
.placa{
  inline-size:var(--lado);block-size:var(--lado);flex:none;
  display:grid;place-items:center;overflow:hidden;
  background:var(--calce);border-radius:4px;
  box-shadow:0 14px 26px -12px rgba(0,0,0,.75),0 2px 5px rgba(0,0,0,.35);
}
.placa img{inline-size:calc(var(--lado) * .76);block-size:calc(var(--lado) * .76);object-fit:contain}
/* solo in bozza: il posto del logo ufficiale che il cliente deve mandare */
.placa.vacia{background:none;box-shadow:none;border:1.5px dashed rgba(227,200,141,.42);padding:8px}
.placa.vacia span{display:flex;flex-direction:column;gap:5px}
.placa.vacia b{
  font-family:var(--display);font-variation-settings:"SOFT" 30,"WONK" 0;font-weight:600;
  font-size:.86rem;line-height:1.15;color:var(--tufo);
}
.placa.vacia small{font-weight:500;font-size:.7rem;line-height:1.25;color:var(--humo-2)}
/* in produzione, un riconoscimento ancora senza logo non mostra una targa
   finta: il testo scende dove starebbe, e la fila resta allineata */
.placas li>h3:first-child{margin-top:calc(var(--lado) + 20px)}

.placas h3{
  margin:20px 0 0;max-inline-size:18ch;
  font-variation-settings:"SOFT" 30,"WONK" 0;font-weight:600;
  font-size:clamp(1.15rem,1rem + .55vw,1.4rem);line-height:1.2;letter-spacing:-.01em;color:var(--calce);
}
.placas p{margin:7px 0 0;max-inline-size:28ch;text-wrap:balance;color:var(--humo);font-size:.95rem;line-height:1.45}
.placas p span{white-space:nowrap}         /* si va a capo solo sui «·» */

/* ═══ VISITARNOS ══════════════════════════════════════════════════ */

.visita{
  padding-block:var(--seccion);
  border-top:1px solid var(--linea);
}
.visita .rejilla{display:grid;gap:clamp(32px,5vw,60px)}
@media (min-width:860px){ .visita .rejilla{grid-template-columns:1fr 1fr} }
.visita h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,2.9rem);font-weight:700;margin-bottom:26px}
.visita h3{
  font-family:var(--texto);font-size:.78rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tufo);margin:0 0 13px;
}

.horarios{inline-size:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
.horarios th{text-align:left;font-weight:500;padding:9px 0;color:var(--humo);border-bottom:1px solid var(--linea)}
.horarios td{text-align:right;padding:9px 0;border-bottom:1px solid var(--linea)}
.horarios tr[data-hoy] th,.horarios tr[data-hoy] td{color:var(--tufo);font-weight:600}
.horarios .cerrado{color:var(--humo-2)}

.datos{font-style:normal;line-height:1.8;margin-top:8px}
/* inline-block + padding: porta il bersaglio a 27px, sopra i 24px minimi
   della WCAG 2.5.8, senza sfasciare l'impaginato dell'indirizzo */
.datos a{
  display:inline-block;padding-block:4px;color:var(--calce);
  text-decoration-color:rgba(246,241,231,.35);text-underline-offset:3px;
}
.datos a:hover{color:var(--tufo)}
.metro{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.metro span{
  font-size:.8rem;padding:4px 11px;border-radius:99px;
  background:var(--piperno-3);color:var(--humo);
}

.mapa{
  margin-top:22px;position:relative;aspect-ratio:16/11;border-radius:3px;overflow:hidden;
  background:var(--piperno-3);border:1px solid var(--linea);
}
.mapa iframe{inline-size:100%;block-size:100%;border:0;display:block}
/* la mappa parte al clic, non al caricamento: pagina più leggera su 4G e
   nessun iframe di terzi prima del consenso */
.mapa button{
  position:absolute;inset:0;inline-size:100%;border:0;cursor:pointer;
  background:var(--piperno-3);background-image:var(--cementina-rosso);background-size:34px 34px;
  color:var(--calce);font-family:var(--texto);font-size:.95rem;font-weight:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.mapa button small{font-weight:400;color:var(--humo-2);font-size:.8rem}

/* ═══ PIE ═════════════════════════════════════════════════════════ */

.pie{background:var(--piperno-2);padding-block:clamp(40px,6vw,60px);border-top:1px solid var(--linea)}
.pie .fila{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.pie img{inline-size:120px;opacity:.9}
.pie nav{display:flex;flex-wrap:wrap;gap:0 22px;font-size:.87rem;margin-block:-11px}
.pie nav a{display:inline-block;padding-block:11px;color:var(--humo-2);text-decoration:none}
.pie nav a:hover{color:var(--tufo)}
.pie .legal{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--linea);
  font-size:.79rem;color:var(--humo-2);line-height:1.9;max-inline-size:80ch;
}
.pie .legal a{display:inline-block;padding-block:5px;color:inherit}

/* ═══ AVISO TEMPORÁNEO ════════════════════════════════════════════
   Fascia in cima alla pagina. La accende il cliente dal pannello per un
   cambio di orario o una chiusura; qui serve anche a marcare le bozze. */

.aviso-barra{
  margin:0;padding:11px var(--margen);text-align:center;
  background:var(--tufo);color:#3A2A0E;
  font-size:.88rem;font-weight:600;letter-spacing:.01em;line-height:1.4;
}
/* La fascia di bozza è a righe: deve leggersi come «non è ancora vero»
   a colpo d'occhio, senza essere confusa con un avviso del locale. */
.aviso-barra.bozza{
  background:repeating-linear-gradient(-45deg,#2A211A,#2A211A 14px,#241E1B 14px,#241E1B 28px);
  color:var(--tufo);border-bottom:1px solid rgba(227,200,141,.3);
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
}

/* ═══ DIÁLOGO DE RESERVA ══════════════════════════════════════════ */

dialog{
  border:0;padding:0;background:transparent;max-inline-size:min(560px,94vw);
  inline-size:100%;color:var(--calce);
}
dialog::backdrop{background:rgba(15,12,11,.82);backdrop-filter:blur(4px)}
dialog .caja{
  background:var(--piperno);border:1px solid var(--linea);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;max-block-size:88vh;
}
dialog header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;border-bottom:1px solid var(--linea);
}
dialog h2{font-size:1.35rem;font-weight:600}
dialog .cerrar{
  background:none;border:0;color:var(--humo);cursor:pointer;font-size:1.6rem;
  line-height:1;min-inline-size:44px;min-block-size:44px;
}
dialog .cerrar:hover{color:var(--calce)}
dialog iframe{inline-size:100%;block-size:min(560px,64vh);border:0;background:var(--calce)}
dialog .alterna{padding:15px 20px;border-top:1px solid var(--linea);font-size:.88rem;color:var(--humo)}

/* ═══ MOTION ══════════════════════════════════════════════════════
   La rivelazione migliora un contenuto già visibile: se il JS non parte
   o la scheda è nascosta, la sezione resta comunque leggibile. */

.revela{transition:opacity .7s var(--salida),transform .7s var(--salida)}
.revela.por-revelar{opacity:0;transform:translateY(18px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .revela.por-revelar{opacity:1;transform:none}
  /* senza pulsazione lo stato «cerrado» resta comunque distinguibile:
     colore, testo e un anello fisso */
  .estado[data-estado="cerrado"] .punto::after,
  .estado[data-estado="excepcion"] .punto::after{opacity:.5;transform:scale(1.35)}
}

@media print{
  .aviso-barra,.indice,.saltar,.mapa,dialog{display:none !important}
  body{background:#fff;color:#000}
  .carta{background:#fff}
}

/* ═══ PÁGINAS LEGALES ═════════════════════════════════════════════
   Testo da leggere: fondo Calce, misura di riga contenuta. */

.legal-pagina{background:var(--calce);color:var(--piperno)}
.legal-cab{background:var(--piperno);padding-block:18px}
.legal-cab .marca-pie{inline-size:62px;color:#fff}
.legal-cuerpo{padding-block:clamp(36px,6vw,64px) clamp(56px,8vw,96px);max-inline-size:calc(68ch + 2 * var(--margen))}
.legal-cuerpo h1{font-size:clamp(2rem,1.5rem + 2vw,2.8rem);font-weight:700;margin-bottom:24px}
.legal-cuerpo h2{font-family:var(--display);font-variation-settings:"SOFT" 30,"WONK" 0;
  font-weight:600;font-size:1.2rem;margin:34px 0 8px;line-height:1.25}
.legal-cuerpo p,.legal-cuerpo li{color:var(--tinta);line-height:1.65}
.legal-cuerpo a{color:var(--rosso);text-underline-offset:3px}
.ficha{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:18px 0 6px;
  padding:16px 18px;background:#fff;border:1px solid var(--linea-clara);border-radius:2px;font-size:.94rem}
.ficha dt{font-weight:600;color:var(--piperno)}
.ficha dd{margin:0;color:var(--tinta)}
.legal-volver{margin-top:44px;padding-top:20px;border-top:1px solid var(--linea-clara)}
@media (max-width:520px){ .ficha{grid-template-columns:1fr;gap:2px} .ficha dd{margin-bottom:8px} }