/* ============================================================
   Fondamenta · fondamenta.agency
   Stile del sito. I token (colori, tipografia, spazi, raggi,
   elevazione, movimento, firma) vengono dal Fondamenta Design
   System su Claude Design, sincronizzati a mano il 2026-08-26.
   Scostamenti dal design system: annotati con [SCOSTAMENTO].
   ============================================================ */

/* ---------- caratteri, ospitati in casa ---------- */
@font-face{
  font-family:'Space Grotesk';
  src:url('../assets/fonts/space-grotesk-var.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/inter-var.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('../assets/fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

/* ---------- token: colore (tema chiaro; il sito esce solo chiaro, scelta dichiarata) ---------- */
:root{
  --raw-neutral-0:#F2F1ED;
  --raw-neutral-1:#d1d0cc;
  --raw-neutral-2:#b4b2af;
  --raw-neutral-3:#989693;
  --raw-neutral-4:#7d7b78;
  --raw-neutral-5:#62605d;
  --raw-neutral-6:#484543;
  --raw-neutral-7:#2e2b29;
  --raw-neutral-8:#14110F;

  --raw-accent:#FF5A1F;
  --raw-accent-hover:#e04f1b;
  --raw-accent-active:#c74618;
  --raw-support:#8A8578;
  --raw-text-muted:#605d58;

  --color-surface-default:var(--raw-neutral-0);
  --color-surface-raised:#ffffff;
  --color-surface-inverse:var(--raw-neutral-8);
  --color-surface-sunken:var(--raw-neutral-1);

  --color-text-primary:var(--raw-neutral-8);
  --color-text-secondary:var(--raw-text-muted);
  --color-text-tertiary:var(--raw-support);
  --color-text-inverse:var(--raw-neutral-0);
  --color-text-inverse-secondary:var(--raw-neutral-2);

  --color-accent-default:var(--raw-accent);
  --color-accent-hover:var(--raw-accent-hover);
  --color-accent-active:var(--raw-accent-active);
  --color-accent-on-accent:var(--raw-neutral-0);

  --color-border-default:var(--raw-neutral-2);
  --color-border-strong:var(--raw-support);
  --color-border-inverse:var(--raw-neutral-6);
  --color-border-focus:var(--raw-accent);
}

/* ---------- token: tipografia ---------- */
:root{
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-accent:'Instrument Serif',Georgia,serif;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  /* [SCOSTAMENTO] caption portata da 13px a 14px: pavimento di leggibilita del metodo */
  --size-caption:0.875rem;
  --size-small:0.875rem;
  --size-body:1rem;
  --size-body-lg:clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --size-h4:clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --size-h3:clamp(1.75rem, 1.4rem + 1.7vw, 2.375rem);
  --size-h2:clamp(2.25rem, 1.7rem + 2.6vw, 3.1875rem);
  --size-h1:clamp(2.75rem, 1.9rem + 4vw, 4.1875rem);

  --leading-h1:1.05;
  --leading-h2:1.08;
  --leading-h3:1.12;
  --leading-h4:1.2;
  --leading-body-lg:1.5;
  --leading-body:1.6;
  --leading-small:1.5;
  --leading-caption:1.4;

  --tracking-h1:-0.02em;
  --tracking-h2:-0.015em;
  --tracking-h3:-0.01em;
  --tracking-eyebrow:0.08em;
  --tracking-button:0.01em;

  --size-eyebrow:var(--size-caption);
  --size-button-label:0.9375rem;
}

/* ---------- token: spaziatura ---------- */
:root{
  --space-3xs:0.25rem;
  --space-2xs:0.5rem;
  --space-xs:0.75rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2rem;
  --space-xl:3rem;
  --space-2xl:4rem;
  --space-3xl:6rem;
  --space-4xl:8rem;
  --section-spacing-y:clamp(var(--space-3xl), 6vw + 2rem, var(--space-4xl));
  --section-spacing-y-tight:clamp(var(--space-xl), 4vw + 1rem, var(--space-2xl));
}

/* ---------- token: layout, raggi, elevazione, movimento ---------- */
:root{
  --grid-gutter:clamp(1rem, 1.2vw + 0.5rem, 1.5rem);
  --page-margin:clamp(1.25rem, 4vw, 4rem);
  --content-max-width:90rem;
  --measure-max-width:74rem;
  --measure-text:38rem;
  --measure-text-narrow:30rem;

  --radius-control:2px;

  --elevation-flat-border:0 0 0 1px var(--color-border-default);

  --duration-fast:160ms;
  --duration-base:240ms;
  --duration-slow:400ms;
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-out:cubic-bezier(0,0,0.2,1);

  /* altezza barra: valore di riserva, il valore vero lo misura js/sito.js */
  --nav-h:4.25rem;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}

/* ---------- token: elemento firma, il segno del muratore ---------- */
.fnd-mark{position:relative;padding-left:1.25rem}
.fnd-mark::before{content:"";position:absolute;left:0;top:0.15em;width:2px;height:0.85em;background:var(--color-accent-default)}
.fnd-mark::after{content:"";position:absolute;left:0;top:calc(0.15em + 0.85em);width:0.5rem;height:2px;background:var(--color-accent-default)}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{background:var(--color-surface-default);scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 0.75rem)}
body{background:var(--color-surface-default);color:var(--color-text-primary);margin:0;font-family:var(--font-body);font-size:var(--size-body);line-height:var(--leading-body);text-wrap:pretty;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-medium);margin:0}
h1{font-size:var(--size-h1);line-height:var(--leading-h1);letter-spacing:var(--tracking-h1)}
h2{font-size:var(--size-h2);line-height:var(--leading-h2);letter-spacing:var(--tracking-h2)}
h3{font-size:var(--size-h4);line-height:var(--leading-h4)}
p{margin:0}
img{max-width:100%;display:block;height:auto}
a{color:var(--color-text-primary);text-decoration-color:var(--color-border-strong);text-underline-offset:0.15em}
button,input,select,textarea{font:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}
::selection{background:var(--color-accent-default);color:var(--color-accent-on-accent)}

/* [SCOSTAMENTO] hover dei link ad accento scuro, non ad accento pieno:
   2,76:1 non passa nemmeno come stato transitorio, il tono scuro si */
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--color-accent-active);text-decoration-color:var(--color-accent-active)}
}

.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.salta{position:absolute;left:var(--page-margin);top:-100%;z-index:60;background:var(--color-surface-inverse);color:var(--color-text-inverse);padding:0.75rem 1.25rem;border-radius:var(--radius-control);text-decoration:none}
.salta:focus-visible{top:0.5rem}

/* ---------- testi di ruolo ---------- */
.testo-grande{font-size:var(--size-body-lg);line-height:var(--leading-body-lg)}
.testo-piccolo{font-size:var(--size-small);line-height:var(--leading-small)}
.occhiello{font-family:var(--font-body);font-size:var(--size-eyebrow);line-height:1.2;letter-spacing:var(--tracking-eyebrow);font-weight:var(--weight-semibold);text-transform:uppercase;color:var(--color-text-secondary)}
.numero-accento{font-family:var(--font-accent);font-style:italic;font-weight:var(--weight-regular);color:var(--color-accent-active)}

/* ---------- bottoni ---------- */
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:44px;padding:0.7rem 1.375rem;font-family:var(--font-body);font-size:var(--size-button-label);letter-spacing:var(--tracking-button);font-weight:var(--weight-medium);border-radius:var(--radius-control);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.bottone:active{transform:scale(0.985) translateY(1px)}
.bottone-grande{padding:0.9rem 1.75rem}
.bottone-pieno{background:var(--color-text-primary);color:var(--color-text-inverse);border-color:var(--color-text-primary)}
/* [SCOSTAMENTO] etichetta in inchiostro invece che bianca: 5,7:1 misurati contro i 3,1 del bianco */
.bottone-accento{background:var(--color-accent-default);color:var(--color-text-primary);border-color:var(--color-accent-default)}
.bottone-linea{background:transparent;color:var(--color-text-primary);border-color:var(--color-border-strong)}
.bottone-testo{background:transparent;color:var(--color-text-primary);border-color:transparent;padding:0.35rem 0;text-decoration:underline;text-decoration-color:var(--color-border-strong);text-underline-offset:0.2em}
@media (hover:hover) and (pointer:fine){
  .bottone-pieno:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#fff}
  .bottone-accento:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:var(--color-text-primary)}
  .bottone-linea:hover{border-color:var(--color-accent-active);color:var(--color-accent-active)}
  .bottone-testo:hover{color:var(--color-accent-active);text-decoration-color:var(--color-accent-active)}
}

/* ---------- struttura di pagina ---------- */
.involucro{max-width:var(--content-max-width);margin:0 auto;padding-inline:var(--page-margin)}
.sezione{padding-block:var(--section-spacing-y)}
.sezione-stretta{padding-block:var(--section-spacing-y-tight)}

/* ---------- barra di navigazione ---------- */
.barra{position:sticky;top:0;z-index:50;background:var(--color-surface-default);border-bottom:1px solid var(--color-border-default)}
.barra-dentro{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding-block:1rem}
.marchio{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:1.15rem;line-height:1;color:var(--color-text-primary);text-decoration:none}
.marchio:hover{color:var(--color-text-primary)}
.marchio-testo{border-bottom:2px solid currentColor;padding-bottom:2px}
.barra-voci{display:flex;align-items:center;gap:clamp(0.9rem,2.5vw,2rem);list-style:none;margin:0;padding:0}
.barra-voci a{display:inline-flex;align-items:center;min-height:44px;margin-block:-0.5rem;font-size:var(--size-small);text-decoration:none;padding:0 0.15rem}
.barra .bottone{padding-block:0.55rem;min-height:44px}
/* sotto i 768px la barra alta tiene solo il marchio: voci e azione stanno
   nella barra del pollice, in fondo allo schermo (vedi .pollice) */

/* ---------- eroe ---------- */
.eroe{padding-block:clamp(var(--space-2xl),9vh,var(--space-4xl)) 0}
.eroe h1{margin-top:var(--space-sm);max-width:18ch}
.eroe-sotto{color:var(--color-text-secondary);margin-top:var(--space-md);max-width:var(--measure-text)}
.eroe-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);margin-top:var(--space-lg)}

/* ---------- il cronometro: il righello di cantiere che misura il tempo ---------- */
.cronometro{margin-top:clamp(var(--space-xl),6vh,var(--space-3xl));max-width:var(--measure-text)}
.cronometro-titolo{font-size:var(--size-small);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-text-secondary)}
.scala{position:relative;height:26px;margin-top:var(--space-sm)}
.scala-riga{position:absolute;left:0;right:0;bottom:0;height:14px;border-bottom:2px solid var(--color-text-primary);background:
  repeating-linear-gradient(to right, var(--color-border-default) 0 1px, transparent 1px 8px) left bottom/100% 6px no-repeat,
  repeating-linear-gradient(to right, var(--color-border-strong) 0 1px, transparent 1px 40px) left bottom/100% 12px no-repeat}
.segno{position:absolute;bottom:0;left:var(--x);width:2px;height:22px;background:var(--color-border-strong);transform:translateX(-1px)}
.segno.s-10{transform:translateX(-2px)}
/* la barra che riempie il righello mentre passano i dieci secondi: solo transform */
.corridore{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--color-accent-default);transform:scaleX(1);transform-origin:left}
.tacche{list-style:none;margin:var(--space-md) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2xs)}
.tacca{font-size:var(--size-small);line-height:1.45;color:var(--color-text-secondary)}
.cronometro-titolo{margin-bottom:0}
.tacca b{font-family:var(--font-display);font-weight:var(--weight-medium);color:var(--color-text-primary);font-variant-numeric:tabular-nums;margin-right:0.35rem}
.cronometro-esito{margin-top:var(--space-md);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h4);line-height:1.25;max-width:26ch}

/* Sul telefono la prima schermata utile e 599px (664 di viewport meno la barra
   del pollice, che COPRE quello che ci passa sotto). Qui si toglie tutto quello
   che e doppione, perche il cronometro entri sopra la piega. */
@media (max-width:47.9rem){
  .eroe-azioni{display:none}          /* l'azione vive nella barra del pollice */
  .cronometro-titolo{display:none}    /* lo dice gia l'h1 */
  .cronometro{margin-top:var(--space-lg)}
  .scala{margin-top:0}
  .tacche{margin-top:var(--space-2xs)}
}

/* ---------- intestazione di sezione ---------- */
.testa-sezione{max-width:var(--measure-text)}
.testa-sezione h2{margin-top:var(--space-xs)}
.testa-sezione .spiega{color:var(--color-text-secondary);margin-top:var(--space-sm)}

/* ---------- i tre esami: i dati di mercato come quote di rilievo ---------- */
.esami{list-style:none;margin:var(--space-xl) 0 0;padding:0}
.esame{display:grid;grid-template-columns:minmax(5.5rem,8rem) 1fr;gap:var(--space-sm) var(--grid-gutter);padding-block:var(--space-lg);border-top:1px solid var(--color-border-default)}
.esame:last-child{border-bottom:1px solid var(--color-border-default)}
.esame-numero{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(2.2rem,1.6rem + 2.2vw,3.2rem);line-height:0.95;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.esame-numero span{display:block;font-family:var(--font-body);font-size:var(--size-small);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-accent-active);margin-top:0.35rem}
.esame h3{margin:0}
.esame p{color:var(--color-text-secondary);margin-top:var(--space-2xs);max-width:var(--measure-text)}
.esame-fonte{font-size:var(--size-small);color:var(--color-text-secondary);margin-top:var(--space-xs)}
.esami-chiusa{margin-top:var(--space-xl);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h4);line-height:1.3;max-width:38ch}
@media (max-width:40rem){
  .esame{grid-template-columns:1fr;gap:var(--space-2xs)}
  .esame-numero span{display:inline;margin-left:0.15rem}
}

/* ---------- la barra del pollice: navigazione in basso su telefono ---------- */
.pollice{display:none}
@media (max-width:47.9rem){
  .pollice{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:var(--space-2xs);
    padding:0.5rem var(--page-margin);padding-bottom:calc(0.5rem + env(safe-area-inset-bottom,0px));
    background:var(--color-surface-default);border-top:1px solid var(--color-border-default)}
  .pollice a:not(.bottone){display:inline-flex;align-items:center;min-height:44px;padding:0 0.15rem;font-size:var(--size-small);text-decoration:none;color:var(--color-text-primary)}
  .pollice .bottone{padding-inline:1rem}
  /* spazio in fondo al documento: la barra non copre il piede, e un bersaglio
     all'ultimo schermo si libera da sotto (pattern landing di Linus, § 1) */
  html{scroll-padding-bottom:calc(4.25rem + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:calc(4.25rem + env(safe-area-inset-bottom,0px))}
  /* in alto resta solo il marchio: l'azione vive sotto, nella zona del pollice */
  .barra-voci,.barra-cta{display:none}
}

/* ---------- il metodo: intestazione + cantiere ---------- */
.sezione-metodo{padding-top:var(--section-spacing-y)}
.cantiere{margin-top:var(--space-2xl)}
.palco-dentro{display:grid;gap:var(--space-xl) var(--space-2xl);align-items:center;grid-template-columns:1fr;width:100%}
.palco-scena{display:flex;justify-content:center}
.edificio{width:min(100%,460px);height:auto;aspect-ratio:520/600;display:block}
.passi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-md)}
.passi li{display:grid;grid-template-columns:3.25rem 1fr;gap:var(--grid-gutter);align-items:start}
.passi .numero-accento{font-size:2.2rem;line-height:0.9}
.passi h3{font-size:var(--size-h4);margin:0}
.passi p{color:var(--color-text-secondary);margin-top:var(--space-3xs);max-width:var(--measure-text-narrow)}
.palco-firma{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h4);margin-top:var(--space-lg)}
@media (min-width:64rem){
  .palco-dentro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}

/* modalità scrub: si accende solo con JavaScript e senza reduced-motion */
@media (prefers-reduced-motion: no-preference){
  html.js .cantiere.scrub-on{height:340vh}
  html.js .cantiere.scrub-on .palco{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:clip}
  html.js .cantiere.scrub-on .strato{will-change:transform,opacity}
  html.js .cantiere.scrub-on .passi li{opacity:0.28;transition:opacity var(--duration-base) var(--ease-standard)}
  html.js .cantiere.scrub-on .passi li.fatto{opacity:0.55}
  html.js .cantiere.scrub-on .passi li.attivo{opacity:1}
  html.js .cantiere.scrub-on .palco-firma{opacity:0;transform:translateY(10px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}
  html.js .cantiere.scrub-on .palco-firma.vista{opacity:1;transform:none}
  @media (max-width:63.9rem){
    html.js .cantiere.scrub-on .edificio{width:min(88vw, calc(46vh * 0.866));height:auto;margin-inline:auto}
    html.js .cantiere.scrub-on .passi{position:relative;min-height:9rem}
    html.js .cantiere.scrub-on .passi li{position:absolute;inset:0;opacity:0}
    html.js .cantiere.scrub-on .passi li.fatto{opacity:0}
    html.js .cantiere.scrub-on .passi li.attivo{opacity:1}
    html.js .cantiere.scrub-on .palco-firma{margin-top:var(--space-sm)}
    html.js .cantiere.scrub-on .palco-dentro{gap:var(--space-lg)}
  }
}

/* ---------- la prova (modalità progetto) ---------- */
.prova-riga{display:grid;gap:var(--space-lg) var(--space-2xl);grid-template-columns:1fr}
.prova-testo{color:var(--color-text-secondary);max-width:var(--measure-text)}
.prova-azione{margin-top:var(--space-md)}
@media (min-width:64rem){
  .prova-riga{grid-template-columns:minmax(16rem,24rem) 1fr;align-items:start}
}

/* ---------- servizi ---------- */
.servizi-elenco{list-style:none;margin:var(--space-xl) 0 0;padding:0}
.servizio{display:grid;grid-template-columns:minmax(3.5rem,6rem) 1fr;gap:var(--space-sm) var(--grid-gutter);padding-block:var(--space-lg);border-top:1px solid var(--color-border-default)}
.servizio:last-child{border-bottom:1px solid var(--color-border-default)}
.servizio .numero-accento{font-size:1.75rem;line-height:1}
.servizio h3{margin:0}
.servizio p{color:var(--color-text-secondary);margin-top:var(--space-2xs);max-width:var(--measure-text)}
@media (max-width:40rem){
  .servizio{grid-template-columns:1fr}
}

/* ---------- prezzo ---------- */
.prezzo-riga{display:grid;gap:var(--space-lg) var(--space-2xl);grid-template-columns:1fr}
.prezzo-riga .testo-grande{color:var(--color-text-secondary);max-width:var(--measure-text)}
.prezzo-nota{color:var(--color-text-secondary);margin-top:var(--space-md);max-width:var(--measure-text)}
@media (min-width:64rem){
  .prezzo-riga{grid-template-columns:minmax(16rem,24rem) 1fr;align-items:start}
}

/* ---------- contatti ---------- */
.contatti{background:var(--color-surface-inverse);color:var(--color-text-inverse)}
.contatti .occhiello{color:var(--color-text-inverse-secondary)}
.contatti .fnd-mark::before,.contatti .fnd-mark::after{background:var(--color-accent-default)}
.contatti h2{max-width:14ch}
.contatti-spiega{color:var(--color-text-inverse-secondary);margin-top:var(--space-sm);max-width:var(--measure-text)}
.contatti-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg);margin-top:var(--space-lg)}
.recapito{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(1.25rem,1rem + 1.6vw,2rem);color:var(--color-text-inverse);text-decoration-color:var(--color-accent-default);text-underline-offset:0.2em;overflow-wrap:anywhere;padding:0.35rem 0}
@media (hover:hover) and (pointer:fine){
  .recapito:hover{color:var(--color-text-inverse);text-decoration-color:var(--color-accent-hover)}
}

/* ---------- piede ---------- */
.piede{background:var(--color-surface-inverse);color:var(--color-text-inverse);border-top:1px solid var(--color-border-inverse)}
.piede-dentro{padding-block:var(--space-2xl) var(--space-lg)}
.piede .marchio{color:var(--color-text-inverse);font-size:1.5rem}
.piede-colonne{display:flex;flex-wrap:wrap;gap:var(--space-xl) var(--space-2xl);margin-top:var(--space-xl)}
.piede-colonne .occhiello{color:var(--color-text-inverse-secondary)}
.piede-colonne ul{list-style:none;margin:0.5rem 0 0;padding:0;display:flex;flex-direction:column}
.piede-colonne a{color:var(--color-text-inverse);text-decoration:none;font-size:var(--size-small);display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover) and (pointer:fine){
  .piede-colonne a:hover{color:var(--color-text-inverse);text-decoration:underline;text-decoration-color:var(--color-accent-default)}
}
.piede-legale{margin-top:var(--space-2xl);padding-block:var(--space-md);border-top:1px solid var(--color-border-inverse);color:var(--color-text-inverse-secondary);font-size:var(--size-caption);display:flex;flex-wrap:wrap;gap:0.5rem var(--space-lg);justify-content:space-between}
.piede-legale a{color:var(--color-text-inverse-secondary);display:inline-flex;align-items:center;min-height:44px;margin-block:-0.75rem}

/* ---------- pagina non trovata e privacy ---------- */
.lotto{min-height:60vh;display:grid;align-content:center;padding-block:var(--space-3xl)}
.lotto h1{max-width:16ch;margin-top:var(--space-sm)}
.lotto p{color:var(--color-text-secondary);margin-top:var(--space-md);max-width:var(--measure-text)}
.lotto-azioni{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);margin-top:var(--space-lg);align-items:center}
.segno-grande{width:34px;height:96px;position:relative}
.segno-grande::before{content:"";position:absolute;left:0;top:0;width:6px;height:76px;background:var(--color-accent-default)}
.segno-grande::after{content:"";position:absolute;left:0;top:76px;width:30px;height:6px;background:var(--color-accent-default)}
.prosa{max-width:var(--measure-text)}
.prosa h1{font-size:var(--size-h2)}
.prosa h2{font-size:var(--size-h4);margin-top:var(--space-xl)}
.prosa p,.prosa li{color:var(--color-text-secondary);margin-top:var(--space-sm)}
.prosa ul{margin:var(--space-sm) 0 0;padding-left:1.25rem}
/* area toccabile dei link nel testo: si allarga col padding, il margine uguale
   e contrario non sposta nulla (SKILL 6.2) */
.prosa a{padding-block:0.75rem;margin-block:-0.75rem}

/* ============================================================
   Momenti di scena. Vivono solo con JavaScript (html.js):
   senza, ogni cosa e gia al suo posto, stato finale corretto.
   Con prefers-reduced-motion le durate sono azzerate in cima.
   ============================================================ */

/* eroe: il segno si traccia, le righe salgono in sequenza */
html.js .eroe .fnd-mark::before{transform-origin:top;animation:traccia-verticale 0.35s var(--ease-out) 0.1s both}
html.js .eroe .fnd-mark::after{transform-origin:left;animation:traccia-orizzontale 0.25s var(--ease-out) 0.42s both}
html.js .eroe-entra{opacity:0;transform:translateY(14px);animation:sale 0.6s var(--ease-out) both}
html.js .eroe .eroe-entra:nth-child(1){animation-delay:0.05s}
html.js .eroe .eroe-entra:nth-child(2){animation-delay:0.15s}
html.js .eroe .eroe-entra:nth-child(3){animation-delay:0.28s}
html.js .eroe .eroe-entra:nth-child(4){animation-delay:0.4s}
html.js .stadia{transform-origin:left;animation:traccia-orizzontale 0.9s var(--ease-out) 0.5s both}
@keyframes sale{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes traccia-verticale{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes traccia-orizzontale{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* il cronometro dei dieci secondi: parte quando l'eroe e a schermo.
   Stato di partenza acceso: senza JavaScript o con reduced-motion la scala
   e gia piena, le tacche leggibili e l'esito visibile. */
@media (prefers-reduced-motion: no-preference){
  html.js .cronometro .corridore{transform:scaleX(0)}
  html.js .cronometro.parte .corridore{transition:transform 10s linear;transform:scaleX(1)}
  html.js .cronometro .segno{opacity:0.35;transition:opacity var(--duration-fast) var(--ease-standard)}
  html.js .cronometro .segno.accesa{opacity:1;background:var(--color-accent-default)}
  html.js .cronometro .tacca{opacity:0.3;transition:opacity var(--duration-base) var(--ease-standard)}
  html.js .cronometro .tacca.accesa{opacity:1}
  html.js .cronometro-esito{opacity:0;transform:translateY(8px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}
  html.js .cronometro-esito.accesa{opacity:1;transform:none}

  /* su telefono lo spazio sopra la piega e poco: si mostra una tacca alla
     volta, quella che il tempo sta attraversando. Senza JS restano tutte. */
  @media (max-width:47.9rem){
    html.js .cronometro .tacche{position:relative;min-height:3.4rem}
    html.js .cronometro .tacca{position:absolute;inset:0;opacity:0}
    html.js .cronometro .tacca.accesa{opacity:0}
    html.js .cronometro .tacca.corrente{opacity:1}
  }
}

/* comparse morbide allo scorrimento, con rete di sicurezza a timer in js/sito.js */
html.js .rivela{opacity:0;transform:translateY(14px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out);transition-delay:var(--ritardo,0ms)}
html.js .rivela.vista{opacity:1;transform:none}


/* ---------- il menu della lingua ----------
   <details> nativo: si apre e si chiude anche senza JavaScript. La lingua
   corrente non e' un link ma uno <span>, cosi non c'e' un giro a vuoto.
   Il pavimento e' quello di tutto il sito: bersaglio 44px, testo 14px. */
.lingue{display:flex;align-items:center}
.lingue-menu{position:relative}
.lingue-scelta{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;
  min-height:44px;min-width:44px;padding:0 0.7rem;
  font-size:var(--size-small);font-weight:var(--weight-medium);letter-spacing:0.04em;
  color:var(--color-text-primary);background:transparent;
  border:1px solid var(--color-border-default);border-radius:var(--radius-control);
  cursor:pointer;list-style:none;user-select:none;
  transition:border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.lingue-scelta::-webkit-details-marker{display:none}
.lingue-scelta::marker{content:""}
.lingue-freccia{flex:none;transition:transform var(--duration-fast) var(--ease-standard)}
.lingue-menu[open] .lingue-freccia{transform:rotate(180deg)}
.lingue-menu[open] .lingue-scelta{border-color:var(--color-border-strong)}

.lingue-elenco{position:absolute;right:0;top:calc(100% + 0.4rem);z-index:5;
  min-width:11rem;margin:0;padding:0.3rem;list-style:none;
  background:var(--color-surface-raised);border:1px solid var(--color-border-default);
  border-radius:var(--radius-control);box-shadow:0 10px 30px rgba(20,17,15,0.14)}
.lingue-voce{display:flex;align-items:center;min-height:44px;padding:0 0.75rem;
  font-size:var(--size-small);line-height:var(--leading-small);
  color:var(--color-text-primary);text-decoration:none;border-radius:calc(var(--radius-control) - 2px);
  transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.lingue-corrente{color:var(--color-accent-active);font-weight:var(--weight-semibold);cursor:default}
@media (hover:hover) and (pointer:fine){
  .lingue-scelta:hover{border-color:var(--color-border-strong)}
  a.lingue-voce:hover{background:var(--color-surface-default);color:var(--color-accent-active)}
}

/* nel piede la lingua e' un elenco semplice, senza menu: si vede sempre */
.piede-colonne .occhiello + ul [aria-current]{color:var(--color-text-inverse);font-weight:var(--weight-semibold)}


/* ============================================================
   /anteprima · la landing dell'anteprima gratuita (2026-09-07)
   Stessi token, stessi componenti (.esami, .servizio, .prova-riga,
   .pollice). Le regole che NASCONDONO stanno in coda al blocco del
   loro elemento: una media query non aggiunge specificita'.
   ============================================================ */

/* ---------- eroe a due colonne: il testo e il telefono con l'anteprima ---------- */
.eroe-anteprima{padding-bottom:var(--space-xl)}
.eroe-griglia{display:grid;grid-template-columns:1fr;gap:var(--space-2xl) var(--space-2xl);align-items:center}
.eroe-anteprima h1{max-width:15ch}
.eroe-anteprima .eroe-sotto{max-width:var(--measure-text)}
.telefono{display:flex;justify-content:center}
.telefono-svg{width:min(100%,300px);height:auto;aspect-ratio:300/620;display:block}
@media (min-width:64rem){
  .eroe-griglia{grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr)}
  .telefono{justify-content:flex-end}
}
@media (max-width:47.9rem){
  .telefono-svg{width:min(100%,240px)}
}

/* la pagina dentro il telefono si costruisce all'apertura, strato dopo strato:
   e' l'anteprima che il visitatore ricevera'. Con reduced-motion o senza
   JavaScript e' gia' tutta al suo posto. */
html.js .telefono .strato{opacity:0;transform:translateY(18px);animation:sale 0.55s var(--ease-out) both}
html.js .telefono .strato:nth-of-type(1){animation-delay:0.35s}
html.js .telefono .strato:nth-of-type(2){animation-delay:0.5s}
html.js .telefono .strato:nth-of-type(3){animation-delay:0.65s}
html.js .telefono .strato:nth-of-type(4){animation-delay:0.8s}
html.js .telefono .strato:nth-of-type(5){animation-delay:0.95s}
html.js .telefono .strato:nth-of-type(6){animation-delay:1.15s}
html.js .telefono > svg > .strato:last-of-type{animation-delay:1.35s}

/* ---------- intestazioni con piu' di un paragrafo ---------- */
.testa-sezione .spiega + .spiega{margin-top:var(--space-sm)}

/* ---------- per chi non va bene ---------- */
.esclusi{list-style:none;margin:var(--space-xl) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-lg) var(--space-2xl)}
.esclusi li{position:relative;padding-left:1.25rem;max-width:var(--measure-text);color:var(--color-text-secondary)}
.esclusi li::before{content:"";position:absolute;left:0;top:0.7em;width:0.5rem;height:2px;background:var(--color-accent-default)}
.esclusi b{display:block;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h4);line-height:1.25;color:var(--color-text-primary);margin-bottom:var(--space-2xs)}
@media (min-width:64rem){
  .esclusi{grid-template-columns:1fr 1fr}
}

/* ---------- chi siamo ---------- */
.chi-testo p + p{margin-top:var(--space-md);color:var(--color-text-secondary);max-width:var(--measure-text)}
.chi-testo .testo-grande{color:var(--color-text-secondary);max-width:var(--measure-text)}
.chi-testo .chi-firma{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h4);line-height:1.3;color:var(--color-text-primary);max-width:30ch}

/* ---------- domande frequenti ---------- */
.domande{max-width:var(--measure-max-width);margin-top:var(--space-xl)}
.domanda{border-top:1px solid var(--color-border-default)}
.domanda:last-child{border-bottom:1px solid var(--color-border-default)}
.domanda summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:56px;padding-block:var(--space-sm);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h4);line-height:1.25;cursor:pointer;list-style:none}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary::marker{content:""}
.domanda-segno{flex:none;position:relative;width:22px;height:22px}
.domanda-segno::before,.domanda-segno::after{content:"";position:absolute;background:var(--color-accent-default)}
.domanda-segno::before{left:0;top:10px;width:22px;height:2px}
.domanda-segno::after{left:10px;top:0;width:2px;height:22px;transition:transform var(--duration-fast) var(--ease-standard)}
.domanda[open] .domanda-segno::after{transform:scaleY(0)}
.domanda p{color:var(--color-text-secondary);padding-bottom:var(--space-md);max-width:var(--measure-text)}
@media (hover:hover) and (pointer:fine){
  .domanda summary:hover{color:var(--color-accent-active)}
}

/* ---------- /anteprima: le correzioni del 2026-09-08 (Rocket) ---------- */
/* [SCOSTAMENTO] la parola in accento nel titolo: colore --color-accent-active,
   l'unico ammesso come testo dalla regola 3 del sito. Misurato, non stimato. */
.parola-accento{color:var(--color-accent-active);font-style:normal}
/* la riga di rassicurazione sotto la promessa: dice cosa NON succede */
.eroe-rassicura{margin-top:var(--space-sm);color:var(--color-text-secondary);max-width:var(--measure-text)}
/* «per chi non va bene» non finisce sul no */
.esclusi-chiusa{margin-top:var(--space-xl);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h4);line-height:1.3;max-width:38ch}

/* ---------- /anteprima: l'eroe con la foto e il caso (Rocket, 2026-09-08) ----------
   La regola «niente faccia» e' stata cambiata da Francesco l'8/9: nelle pagine vanno
   foto vere di lavoro, il testo continua a parlare come noi. */
.eroe-foto{position:relative;margin:0}
.eroe-foto img{width:100%;height:100%;max-height:540px;object-fit:cover;object-position:32% center;border-radius:3px}
.eroe-cartello{position:absolute;left:0;bottom:26px;background:var(--color-surface-inverse);color:var(--color-text-inverse);padding:14px 20px;max-width:16rem}
.eroe-cartello b{display:block;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h3);line-height:1;margin-bottom:.2rem}
.eroe-cartello span{display:block;font-size:var(--size-small);line-height:1.35;color:var(--color-text-inverse-secondary)}
.eroe-punti{list-style:none;margin:var(--space-md) 0 var(--space-lg);padding:0;max-width:var(--measure-text)}
.eroe-punti li{position:relative;padding-left:1.9rem;margin-block:.55em;line-height:1.45}
.eroe-punti li::before{content:"";position:absolute;left:0;top:.28em;width:1.15rem;height:1.15rem;background:var(--color-accent-default);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8.6-8.6 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8.6-8.6 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.eroe-rassicura{margin-top:var(--space-sm);color:var(--color-text-secondary);max-width:var(--measure-text)}
/* Su telefono l'azione vive nella barra del pollice, quindi la rassicurazione
   (che disinnesca il rischio) sale subito sotto la promessa e i punti scendono:
   misurato, altrimenti finiva a 711px su 599 utili. */
@media (max-width:47.9rem){
  .eroe-testo{display:flex;flex-direction:column}
  .eroe-rassicura{order:1;margin-top:var(--space-sm)}
  .eroe-punti{order:2;margin-block:var(--space-md) 0}
}
@media (min-width:48rem){
  .eroe-foto img{max-height:min(72vh,620px)}
  .eroe-cartello{left:-1.25rem}
}

/* il caso: due schermate affiancate, poi le misure */
/* [SCOSTAMENTO] la fascia del caso non usa surface-sunken: su quel grigio il testo
   secondario misura 4,25:1 (seconda uscita della lezione del 7/9). Questa tinta sta
   fra carta e sunken e porta lo stesso testo a 5,3:1, misurato. */
.sezione-caso,.sezione-chiara{background:#E9E7E2}

/* [FASCE] la pagina non puo' restare una colonna di testo su un fondo solo: fra il caso
   e i contatti c'erano 7230px senza un cambio di fondo. L'offerta («cosa ricevi») sta
   sul pieno scuro, «per chi non va bene» sulla stessa tinta chiara del caso. */
.sezione-scura{background:var(--color-surface-inverse);color:var(--color-text-inverse)}
.sezione-scura .occhiello{color:var(--color-text-inverse-secondary)}
.sezione-scura .fnd-mark::before,.sezione-scura .fnd-mark::after{background:var(--color-accent-default)}
.sezione-scura .testa-sezione .spiega{color:var(--color-text-inverse-secondary)}
.sezione-scura .servizio{border-top-color:var(--color-border-inverse)}
.sezione-scura .servizio:last-child{border-bottom-color:var(--color-border-inverse)}
.sezione-scura .servizio p{color:var(--color-text-inverse-secondary)}
.sezione-scura .numero-accento{color:var(--color-accent-default)}
.caso-schermi{display:grid;gap:var(--space-md);margin-top:var(--space-xl);align-items:end}
.schermo{position:relative;margin:0;border-radius:6px;overflow:hidden;background:var(--color-surface-inverse);box-shadow:0 20px 48px -28px rgba(20,17,15,.55)}
.schermo img{width:100%;display:block}
/* niente filtro sul «prima»: sbiadire la schermata vecchia sarebbe un pollice sulla
   bilancia, e questa pagina dice di misurare invece di promettere. */
.schermo-etichetta{position:absolute;top:.6rem;left:.6rem;z-index:2;background:var(--color-surface-inverse);color:var(--color-text-inverse);
  font-size:var(--size-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:.3rem .6rem;border-radius:2px}
.schermo-dopo .schermo-etichetta{background:var(--color-accent-default);color:var(--color-surface-inverse)}
.caso-misure{list-style:none;margin:var(--space-xl) 0 0;padding:0;max-width:44rem}
.caso-misure li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);padding-block:var(--space-sm);border-bottom:1px solid var(--color-border-default)}
.caso-misure li:first-child{border-top:1px solid var(--color-border-default)}
.caso-misure b{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-h4);white-space:nowrap;font-variant-numeric:tabular-nums}
.caso-misure s{color:var(--color-text-tertiary);margin-right:.5rem;font-weight:var(--weight-regular)}
.caso-misure em{font-style:normal;color:var(--color-accent-active)}
.caso-nota{margin-top:var(--space-md);font-size:var(--size-small);color:var(--color-text-secondary);max-width:var(--measure-text)}
@media (min-width:48rem){
  .caso-schermi{grid-template-columns:1fr 1.12fr;gap:var(--space-lg)}
  .schermo-prima{transform:translateY(1.5rem) scale(.94);opacity:.94}
}