/* ==========================================================================
   TRAMA — prova.xsyte.it
   Tavolozza unica (coolors), tinte piene, nessuna sfumatura.
   I colori «di servizio» sono le stesse tinte con trasparenza, mai grigi nuovi.
   ========================================================================== */

:root{
  --inchiostro:#1F1F1F;
  --carta:#F5F2EC;
  --bianco:#FFFFFF;
  --arancio:#E4572E;
  --blu:#2D4B73;
  --grigio:#B9B4AC;

  --testo-tenue:rgba(31,31,31,.64);
  --bordo:rgba(31,31,31,.14);

  --testata-h:72px;
  --lato:clamp(1.25rem, 4vw, 3rem);
  --largo:1180px;
}

/* ————— Scorrimento morbido (Lenis): NON è facoltativo ————— */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-scrolling iframe{ pointer-events:none; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.menu-aperto{ overflow:hidden; }

h1,h2,h3{
  font-family:"Archivo","Inter",system-ui,sans-serif;
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; }
img,svg{ max-width:100%; }
a{ color:inherit; }

.contenitore{ width:100%; max-width:var(--largo); margin-inline:auto; padding-inline:var(--lato); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--inchiostro); color:var(--carta); padding:.75rem 1rem;
}
.skip:focus{ left:0; }

/* ————————————————— PULSANTI ————————————————— */
.pulsante{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 1.5rem;
  font-weight:600; font-size:.98rem; text-decoration:none;
  border:2px solid transparent;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pulsante-arancio{ background:var(--arancio); color:var(--bianco); }
.pulsante-scuro{ background:var(--inchiostro); color:var(--carta); }
.pulsante-vuoto{ border-color:currentColor; }
@media (hover:hover){
  .pulsante-arancio:hover{ background:var(--inchiostro); }
  .pulsante-scuro:hover{ background:var(--arancio); color:var(--bianco); }
  .pulsante-vuoto:hover{ background:var(--inchiostro); color:var(--carta); border-color:var(--inchiostro); }
}
.pulsante:active{ transform:translateY(1px); }
.bottoniera{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ————————————————— TESTATA ————————————————— */
.testata{
  position:sticky; top:0; z-index:100;
  background:var(--carta);              /* niente backdrop-filter: taglierebbe il menu */
  border-bottom:1px solid var(--bordo);
}
.testata-riga{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:var(--testata-h);
}
.marchio{
  display:inline-flex; align-items:center; gap:.6rem;
  flex:none;                            /* l'SVG in un flex si azzererebbe */
  text-decoration:none; color:var(--inchiostro);
}
.marchio-segno{ flex:none; color:var(--arancio); }
.marchio-nome{
  font-family:"Archivo",sans-serif; font-weight:800;
  font-size:1.32rem; letter-spacing:.14em;
}
.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{ text-decoration:none; font-weight:500; font-size:.98rem; }
.nav a:not(.pulsante){ padding:.25rem 0; border-bottom:2px solid transparent; }
@media (hover:hover){ .nav a:not(.pulsante):hover{ border-bottom-color:var(--arancio); } }
.nav-cta{ min-height:44px; padding:0 1.15rem; }

.apri-menu{
  display:none;
  width:48px; height:48px; flex:none;
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
}
.apri-menu-barre, .apri-menu-barre::before, .apri-menu-barre::after{
  display:block; width:24px; height:2px; background:currentColor;
  transition:transform .22s ease, opacity .18s ease;
}
.apri-menu-barre{ margin:0 auto; position:relative; }
.apri-menu-barre::before, .apri-menu-barre::after{ content:""; position:absolute; left:0; }
.apri-menu-barre::before{ top:-7px; }
.apri-menu-barre::after{ top:7px; }
body.menu-aperto .apri-menu-barre{ background:transparent; }
body.menu-aperto .apri-menu-barre::before{ transform:translateY(7px) rotate(45deg); }
body.menu-aperto .apri-menu-barre::after{ transform:translateY(-7px) rotate(-45deg); }

/* ————————————————— APERTURA ————————————————— */
.apertura{ padding:clamp(3rem,7vh,5.5rem) 0 clamp(3.5rem,8vh,6rem); }
.apertura-griglia{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.apertura h1{
  /* legato anche all'altezza: su schermi larghi e bassi resterebbe enorme */
  font-size:clamp(2.4rem, min(1.1rem + 4.6vw, .6rem + 6.4vh), 4.6rem);
  margin-bottom:1.35rem;
}
.occhio{ font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--testo-tenue); max-width:46ch; }
.apertura .occhio{ margin-bottom:2rem; }
.minuto{ margin-top:1.4rem; font-size:.9rem; color:var(--testo-tenue); }

.apertura-figura{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.tee-grande{
  /* legata anche all'altezza: su un portatile largo e basso occuperebbe tutto */
  width:100%; max-width:min(420px,42vh); height:auto;
  fill:var(--tinta-attiva,#1F1F1F);
  transition:fill .3s ease;
}
.tinte{ display:flex; gap:.7rem; }
.tinta{
  width:44px; height:44px; padding:0; cursor:pointer;
  background:var(--t); border:2px solid transparent; outline-offset:3px;
  box-shadow:inset 0 0 0 2px var(--carta);
}
.tinta.attiva{ border-color:var(--inchiostro); }

/* ————————————————— SEZIONI ————————————————— */
.sezione{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
.sezione-scura{ background:var(--inchiostro); color:var(--carta); }
.sezione-scura .occhio{ color:rgba(245,242,236,.72); }

.testa-sezione{ max-width:36ch; margin-bottom:clamp(2rem,4vw,3.25rem); }
.testa-sezione h2, .stampa-griglia h2, .fascia-invito h2{
  font-size:clamp(1.85rem,1rem + 2.6vw,2.9rem);
}
.testa-sezione p{ margin-top:.9rem; color:var(--testo-tenue); }

/* Modelli */
.modelli{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.modello{
  background:var(--bianco); border:1px solid var(--bordo);
  padding:1.5rem 1.35rem 1.65rem;
  display:flex; flex-direction:column;
}
.modello-figura{ background:var(--carta); margin:-.35rem -.35rem 1.25rem; padding:1.1rem; }
.modello-figura svg{ display:block; width:100%; height:auto; fill:var(--tinta); }
.modello h3{ font-size:1.22rem; }
.modello p{ margin-top:.5rem; font-size:.95rem; color:var(--testo-tenue); }
.prezzo{
  margin-top:auto; padding-top:1rem;
  font-family:"Archivo",sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--inchiostro) !important;
}

/* Stampa */
.stampa-griglia{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.stampa-griglia h2 + .occhio{ margin-top:1.1rem; }
.stampa-griglia .pulsante{ margin-top:2rem; }
.tecniche{ list-style:none; margin:0; padding:0; display:grid; gap:1.4rem; }
.tecniche li{ display:flex; gap:1.1rem; align-items:flex-start; padding-bottom:1.4rem; border-bottom:1px solid rgba(245,242,236,.18); }
.tecniche li:last-child{ border-bottom:0; padding-bottom:0; }
.tecniche svg{
  flex:none; width:30px; height:30px;
  fill:none; stroke:var(--arancio); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.tecniche strong{ display:block; font-family:"Archivo",sans-serif; font-size:1.08rem; }
.tecniche span{ display:block; margin-top:.25rem; font-size:.95rem; color:rgba(245,242,236,.72); }

/* Come funziona */
.passi{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.passi li{ border-top:3px solid var(--inchiostro); padding-top:1.1rem; }
.numero{ font-family:"Archivo",sans-serif; font-weight:700; font-size:.95rem; color:var(--arancio); }
.passi h3{ margin-top:.5rem; font-size:1.25rem; }
.passi p{ margin-top:.55rem; color:var(--testo-tenue); font-size:.97rem; }

/* Invito finale */
.fascia-invito{ background:var(--arancio); color:var(--bianco); padding:clamp(3rem,6vw,4.5rem) 0; }
.fascia-invito-riga{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
.fascia-invito-testo p{ margin-top:.75rem; max-width:44ch; }
.fascia-invito .pulsante-vuoto{ color:var(--bianco); }
@media (hover:hover){
  .fascia-invito .pulsante-vuoto:hover{ background:var(--bianco); color:var(--arancio); border-color:var(--bianco); }
}

/* Piè di pagina */
.pie{ background:var(--inchiostro); color:var(--carta); padding:clamp(2.5rem,5vw,3.5rem) 0 2rem; }
.pie-riga{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; }
.pie-marchio p{ margin-top:.6rem; color:rgba(245,242,236,.66); font-size:.95rem; max-width:34ch; }
.pie-nav{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.pie-nav a{ text-decoration:none; font-size:.95rem; }
@media (hover:hover){ .pie-nav a:hover{ color:var(--arancio); } }
.pie-nota{
  max-width:var(--largo); margin:2.5rem auto 0; padding-inline:var(--lato);
  font-size:.82rem; color:rgba(245,242,236,.5);
}

/* ————————————————— COMPARSA ————————————————— */
.rivela{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rivela.dentro{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rivela{ opacity:1; transform:none; transition:none; }
  .pulsante,.tee-grande{ transition:none; }
}

/* ————————————————— TELEFONO / TABLET ————————————————— */
@media (max-width:900px){
  .apertura-griglia{ grid-template-columns:1fr; }
  .apertura-figura{ order:-1; }
  .tee-grande{ max-width:min(320px,62vw); }
  .modelli{ grid-template-columns:repeat(2,1fr); }
  .stampa-griglia{ grid-template-columns:1fr; }
  .passi{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  :root{ --testata-h:62px; }
  .apri-menu{ display:block; }

  .nav{
    position:fixed; inset:var(--testata-h) 0 0 0;
    display:flex; flex-direction:column;
    align-items:stretch; justify-content:flex-start;   /* mai center: in orizzontale sparirebbero le prime voci */
    gap:0;
    padding:1.25rem var(--lato) calc(2rem + env(safe-area-inset-bottom));
    overflow-y:auto;
    background:var(--carta);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }
  body.menu-aperto .nav{ transform:none; opacity:1; pointer-events:auto; }
  .nav a:not(.pulsante){
    display:flex; align-items:center; min-height:54px;
    font-size:1.15rem; font-family:"Archivo",sans-serif; font-weight:600;
    border-bottom:1px solid var(--bordo);
  }
  .nav-cta{ margin-top:1.5rem; width:100%; min-height:52px; }

  .bottoniera .pulsante{ width:100%; }
  .fascia-invito-riga{ display:block; }
  .fascia-invito .bottoniera{ margin-top:1.75rem; }
}

@media (max-width:520px){
  body{ font-size:16px; }
  .modelli{ gap:.85rem; }
  .modello{ padding:1.1rem 1rem 1.25rem; }
  .modello-figura{ margin:-.15rem -.15rem 1rem; padding:.7rem; }
  .modello h3{ font-size:1.08rem; }
  .modello p{ font-size:.9rem; }
}