/* Layout di legal.guidalperineo.com. Colori, tipi e spazi vengono da colors_and_type.css. */

/* Font in locale: queste pagine non chiamano nessun servizio esterno. Ovo non ha il corsivo, che è Cormorant. */
@font-face{font-family:'Ovo';src:url(ovo-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url(manrope-latin.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(cormorant-garamond-500-italic.woff2) format('woff2');font-style:italic;font-weight:500;font-display:swap}

:root{
  /* Il magenta pieno su fondo chiaro si ferma a 4,1:1: per i testi piccoli serve il 600. */
  --gp-fg-accent:var(--gp-magenta-600);
  --corsivo:'Cormorant Garamond',Georgia,serif;
  --margine:clamp(var(--gp-sp-4),5vw,var(--gp-sp-6));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gp-bg);color:var(--gp-charcoal-800);font:400 var(--gp-fs-body)/var(--gp-lh-loose) var(--gp-font-body)}
img,svg{display:block}
a{color:var(--gp-fg-accent);text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--gp-magenta-600);outline-offset:2px;border-radius:2px}
h1,h2,h3{margin:0;font-family:var(--gp-font-display);font-weight:400;color:var(--gp-fg-1)}
h1 em,h2 em{font-family:var(--corsivo);font-size:1.08em;color:var(--gp-magenta)}
code{font-family:var(--gp-font-mono);font-size:.92em}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

.contenitore{max-width:var(--gp-content-max);margin-inline:auto;padding-inline:var(--margine)}
.salta{position:absolute;left:-999px}
.salta:focus{left:var(--gp-sp-4);top:var(--gp-sp-2);z-index:2;padding:var(--gp-sp-2) var(--gp-sp-4);background:var(--gp-white);border-radius:var(--gp-radius-pill)}

/* Bozza: via la striscia e i <mark> quando la cliente ha confermato i dati. */
.bozza{margin:0;padding:var(--gp-sp-2) var(--margine);background:var(--gp-dusty-pink);font-size:var(--gp-fs-caption);line-height:var(--gp-lh-snug);text-align:center}
mark{padding:0 .2em;background:var(--gp-magenta-100);color:inherit;border-radius:4px}

/* ---------- Testata: la stessa del sito ---------- */
.testata{background:var(--gp-white);border-bottom:1px solid var(--gp-border)}
.testata .contenitore{display:flex;align-items:center;justify-content:space-between;gap:var(--gp-sp-5);padding-block:var(--gp-sp-2)}
.testata img{width:auto;height:64px}
.menu{display:flex;gap:var(--gp-sp-5);margin:0;padding:0;list-style:none}
.menu a{font-size:var(--gp-fs-body-sm);font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--gp-charcoal-600);text-decoration:none;transition:color var(--gp-duration) var(--gp-ease)}
.menu a:hover{color:var(--gp-fg-accent)}
.prenota .ic{width:16px;height:16px}

/* ---------- Apertura: come una lettera del Diario ---------- */
.apertura{padding-block:clamp(var(--gp-sp-7),7vw,var(--gp-sp-8)) var(--gp-sp-6)}
.apertura h1{margin-block:var(--gp-sp-3) var(--gp-sp-2);font-size:clamp(40px,7vw,var(--gp-fs-display))}
.sommario{margin:0 0 var(--gp-sp-5);font-family:var(--corsivo);font-style:italic;font-weight:500;font-size:clamp(21px,3vw,24px);line-height:var(--gp-lh-snug);color:var(--gp-fg-2)}
.attacco{max-width:62ch;margin:0 0 var(--gp-sp-3)}
.data{margin:0;font-size:var(--gp-fs-caption);font-style:italic;color:var(--gp-charcoal-600)}

.in-breve{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gp-sp-4);margin:0 0 var(--gp-sp-7);padding:0;list-style:none}
.tessera{padding:var(--gp-sp-5);background:var(--gp-surface);border:1px solid var(--gp-border);border-radius:var(--gp-radius-md);box-shadow:var(--gp-shadow-sm)}
.tessera span{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:var(--gp-sp-3);border-radius:var(--gp-radius-pill);background:var(--gp-magenta-050);color:var(--gp-magenta-600)}
.tessera h2{font-size:var(--gp-fs-h4);line-height:var(--gp-lh-snug)}
.tessera p{margin:var(--gp-sp-1) 0 0;font-size:var(--gp-fs-body-sm);line-height:var(--gp-lh-body);color:var(--gp-fg-2)}

/* ---------- Indice + foglio: la card bianca del modulo contatti ---------- */
.pagina{display:grid;gap:var(--gp-sp-6);padding-bottom:var(--gp-sp-8)}
.indice ol{display:grid;gap:var(--gp-sp-1);margin:var(--gp-sp-3) 0 0;padding:0;list-style:none;font-size:var(--gp-fs-body-sm);line-height:var(--gp-lh-body)}
.indice a{color:var(--gp-charcoal-600);text-decoration:none}
.indice a:hover{color:var(--gp-fg-accent)}
.foglio{min-width:0;padding:clamp(var(--gp-sp-5),5vw,var(--gp-sp-7));background:var(--gp-surface);border:1px solid var(--gp-border);border-radius:var(--gp-radius-lg);box-shadow:var(--gp-shadow-md)}
.foglio section{scroll-margin-top:var(--gp-sp-5)}
.foglio section+section{margin-top:var(--gp-sp-7);padding-top:var(--gp-sp-6);border-top:1px solid var(--gp-border)}
.foglio h2{margin-block:var(--gp-sp-1) var(--gp-sp-4);font-size:clamp(26px,3.4vw,var(--gp-fs-h2));line-height:var(--gp-lh-snug)}
.foglio p{margin:0 0 var(--gp-sp-4)}
.foglio p:last-child{margin-bottom:0}

/* Elenco etichetta + valore: la stessa etichetta delle tabelle */
.dati{display:grid;grid-template-columns:minmax(7.5em,auto) 1fr;gap:var(--gp-sp-2) var(--gp-sp-5);margin:0 0 var(--gp-sp-4)}
.dati:last-child{margin-bottom:0}
.dati dd{margin:0;line-height:var(--gp-lh-body)}
.dati dt,.tavola th,.tavola td::before{font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1.9;text-transform:uppercase;color:var(--gp-charcoal-600)}

.scheda{margin-top:var(--gp-sp-5);padding:var(--gp-sp-5);background:var(--gp-bg);border-radius:var(--gp-radius-md)}
.scheda h3{margin-bottom:var(--gp-sp-3);font-size:var(--gp-fs-h4);line-height:var(--gp-lh-snug)}
.scheda .dati{font-size:15px}
.foglio .nota{margin-top:var(--gp-sp-5);font-size:var(--gp-fs-body-sm);line-height:var(--gp-lh-body)}

.tavola{width:100%;margin-block:var(--gp-sp-4);border-collapse:collapse;font-size:var(--gp-fs-body-sm);line-height:var(--gp-lh-body)}
.tavola th{padding:0 var(--gp-sp-4) var(--gp-sp-2) 0;border-bottom:1px solid var(--gp-border-strong);text-align:left;vertical-align:bottom}
.tavola td{padding:var(--gp-sp-3) var(--gp-sp-4) var(--gp-sp-3) 0;border-bottom:1px solid var(--gp-border);vertical-align:top}
.tavola td:first-child{color:var(--gp-fg-1);font-weight:600}
.tavola th:last-child,.tavola td:last-child{padding-right:0}

/* ---------- Piede: fascia calda e barra magenta del sito ---------- */
.piede{background:var(--gp-surface-warm);color:var(--gp-charcoal)}
.colonne{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--gp-sp-6);padding-block:var(--gp-sp-7)}
.piede img{width:auto;height:96px;margin-bottom:var(--gp-sp-4)}
.piede p{max-width:34ch;margin:0;font-size:var(--gp-fs-body-sm);line-height:var(--gp-lh-body)}
.piede h2{margin-bottom:var(--gp-sp-3);font-family:var(--gp-font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gp-magenta-700)}
.piede ul{display:grid;gap:var(--gp-sp-2);margin:0;padding:0;list-style:none;font-size:var(--gp-fs-body-sm);line-height:var(--gp-lh-body)}
.piede a{color:inherit;text-decoration:none}
.piede a:hover{text-decoration:underline}
.colonne li:has(.ic){display:flex;align-items:center;gap:var(--gp-sp-2)}
.colonne .ic{color:var(--gp-magenta-700)}
.fondo{background:var(--gp-magenta-600);color:var(--gp-white);border-radius:var(--gp-radius-lg) var(--gp-radius-lg) 0 0}
.fondo .contenitore{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gp-sp-3) var(--gp-sp-6);padding-block:var(--gp-sp-5);font-size:var(--gp-fs-caption);line-height:var(--gp-lh-body)}
.fondo ul{display:flex;flex-wrap:wrap;gap:var(--gp-sp-2) var(--gp-sp-5);margin:0;padding:0;list-style:none}
.fondo a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sociali a{display:block;padding:2px}
.fondo a:focus-visible{outline-color:var(--gp-white)}

@media (min-width:1024px){
  .pagina{grid-template-columns:230px minmax(0,1fr);gap:var(--gp-sp-7);align-items:start}
  .indice{position:sticky;top:var(--gp-sp-5)}
}
@media (max-width:1023px){
  .testata nav{display:none}
  .indice ol{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));column-gap:var(--gp-sp-5)}
}
@media (max-width:719px){
  .colonne{grid-template-columns:1fr 1fr}
  .colonne>:first-child{grid-column:1/-1}
}
@media (max-width:639px){
  .tavola thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tavola tr{display:block;padding-block:var(--gp-sp-3);border-bottom:1px solid var(--gp-border)}
  .tavola td{display:grid;grid-template-columns:6.5em 1fr;gap:var(--gp-sp-3);padding:2px 0;border:0}
  .tavola td::before{content:attr(data-th)}
  .tavola code{overflow-wrap:anywhere}
  .tavola td:first-child{display:block;margin-bottom:var(--gp-sp-1);font-family:var(--gp-font-display);font-weight:400;font-size:18px}
  .tavola td:first-child::before{content:none}
}
@media (max-width:399px){
  .testata .contenitore{gap:var(--gp-sp-3)}
  .testata img{height:52px}
  .prenota{padding:10px var(--gp-sp-4)}
  .prenota .ic{display:none}
}
@media (max-width:559px){
  .dati{grid-template-columns:1fr;gap:0}
  .dati dd{margin-bottom:var(--gp-sp-3)}
  .dati dd:last-child{margin-bottom:0}
  .scheda{padding:var(--gp-sp-4)}
}