/* =====================================================================
   Telaio comune: la stessa testata (logo + barra) e lo stesso piede di
   pagine.css, per le pagine che hanno uno stile proprio (contatti,
   privacy, voucher, area clienti, pagina 404, questionario siti).
   Le pagine con pagine.css hanno già queste regole: non includerlo lì.
   Colori dalle variabili della pagina, con valori di riserva.
   ===================================================================== */
.testata,.piede{font-family:var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);color:var(--ink,#1f1d1a);-webkit-font-smoothing:antialiased}
.testata *,.piede *{box-sizing:border-box}
.testata .giro,.piede .giro{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

.testata{border-bottom:1px solid var(--line,rgba(31,29,26,.15));font-size:15px;line-height:1.7}
.testata .giro{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap;padding-block:10px}
.testata .marchio{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:.04em;color:inherit}
.testata .marchio img{width:30px;height:30px;display:block}
.testata .marchio small{display:block;font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#5f5a52);line-height:1.5}
.testata .barra{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:13px}
.testata .barra a{text-decoration:none;padding:7px 10px;border-radius:6px;color:var(--muted,#5f5a52);border:0;line-height:1.7}
.testata .barra a:hover,.testata .barra a[aria-current]{color:var(--ink,#1f1d1a)}
.testata .fine{display:flex;align-items:center;gap:4px}
.testata .barra+.fine{margin-left:-16px}
.testata .fine a.forte{color:var(--bg,#f3f1ec);background:var(--ink,#1f1d1a);border-radius:999px;padding:8px 16px;font-weight:600;text-decoration:none;border:0;line-height:1.7;font-size:13px;white-space:nowrap}
.testata .fine .tema{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-size:13px;color:var(--muted,#5f5a52);cursor:pointer;padding:7px 8px;min-height:0;width:auto;border-radius:0}
.testata .fine .tema svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.testata .fine .tema span{display:none}
.testata .fine .tema:hover{color:var(--ink,#1f1d1a)}
/* tablet e telefono: riga 1 logo · luna · Scrivici; riga 2 le voci. Niente misure fisse: vale per ogni lingua (07/11/2026) */
@media (max-width:900px){
  .testata .giro{position:relative;column-gap:8px;row-gap:2px}
  .testata .marchio{flex:1 1 0;min-width:min-content}
  .testata .fine{order:1;margin-left:auto}
  .testata .barra+.fine{margin-left:auto}
  .testata .barra{order:2;margin-left:0;width:100%;justify-content:flex-end;flex-wrap:nowrap}
  .testata .barra>.lingue{position:static}
  .testata .lingue-menu{right:max(16px,env(safe-area-inset-right,0px));top:calc(100% - 4px)}
}
@media (max-width:700px){
  .testata .marchio small{text-wrap:balance}
  .testata .fine .tema{padding:7px 4px}
  .testata .fine a.forte{padding:5px 13px;font-size:12px}
  .testata .barra{justify-content:space-between;gap:8px}
  .testata .barra>a{padding:7px 0;white-space:nowrap}
  .testata .barra>.lingue summary{padding-inline:0}
}
@media (max-width:380px){.testata .barra{font-size:12px}}
@media (max-width:480px){.testata .marchio small{letter-spacing:.08em}}

.piede{border-top:1px solid var(--line,rgba(31,29,26,.15));padding-block:26px 34px;font-size:11.5px;line-height:1.7;color:var(--muted,#5f5a52)}
.piede .giro{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
.piede a{color:inherit}