:root{
  --bianco:#FFFFFF; --avorio:#F6F1E7; --bordo:#E6DECE;
  --titolo:#1A1A18; --corpo:#4A4740;
  --ottone:#187C31; --navy:#3D6EA3; --rosso:#A4161A;
  --segnaposto:#8B8579;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --max:1140px; --gut:24px; --r:10px; --cor:6px; --fil:2px;
  --sez:48px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bianco);color:var(--corpo);
     font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
     min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;display:flex;flex-direction:column}
img{max-width:100%}

.w{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
section{padding-block:var(--sez)}
.sf-bianco-avorio{height:100px;background:linear-gradient(to bottom,#FFFFFF,#F6F1E7)}
.bg-av{background:var(--avorio)}

h1,h2,h3{font-family:var(--serif);color:var(--titolo);margin:0;text-wrap:balance;font-weight:600}
h1{font-size:52px;line-height:1.1;letter-spacing:-.01em}
h2{font-size:36px;line-height:1.15;letter-spacing:-.005em}
h3{font-size:21px;line-height:1.25}
p{margin:0}
.occhiello{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:.14em;
           text-transform:uppercase;color:var(--ottone);margin:0}
.lead{font-size:19px}
.testo{}

.btn{position:relative;display:inline-block;background:var(--navy);color:#fff;font-family:var(--sans);
     font-weight:600;font-size:17px;padding:16px 32px;border:0;border-radius:var(--r);
     text-decoration:none;transform:translateZ(0);
     transition:background 140ms ease-out, transform 140ms ease-out}
.btn::after{content:"";position:absolute;inset:var(--cor);pointer-events:none;
     border:var(--fil) solid rgba(255,255,255,.45);border-radius:calc(var(--r) - var(--cor))}
.btn:hover{background:#4B81B8;transform:scale(1.04)}
.btn:active{transform:scale(.99)}
.btn:focus-visible{outline:2px solid var(--ottone);outline-offset:3px}
.btn.sm{font-size:15px;padding:10px 20px}

/* barra alta */
html{scroll-padding-top:90px}
.barra{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--bordo);background:#fff}
.barra .w{display:flex;align-items:center;justify-content:space-between;
          padding-block:16px;gap:16px;flex-wrap:wrap}
.barra-solo-logo .w{justify-content:center}
.logo{display:block;height:34px;width:auto}

.nav{display:flex;align-items:center;gap:0;margin-inline:auto}
.nav a{padding-inline:24px;font-family:var(--sans);font-size:17px;font-weight:600;color:var(--corpo);
       text-decoration:none;transition:color 140ms ease-out}
.nav a:not(:first-child){border-left:var(--fil) solid var(--ottone)}
.nav a:first-child{padding-left:0}
.nav a:last-child{padding-right:0}
.nav a:hover,.nav a:focus-visible{color:var(--ottone)}
.nav a:focus-visible{outline:2px solid var(--ottone);outline-offset:3px}

.barra-azioni{display:flex;align-items:center;gap:8px}

.nav-toggle{display:none;position:relative;width:44px;height:44px;padding:0;
     background:transparent;border:0;flex:none;cursor:pointer}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
     content:"";position:absolute;left:50%;top:50%;width:22px;height:1.5px;
     background:var(--ottone);border-radius:1px;
     transform:translate(-50%,-50%);transition:transform 140ms ease-out,opacity 140ms ease-out}
.nav-toggle-bars::before{transform:translate(-50%,-50%) translateY(-7px)}
.nav-toggle-bars::after{transform:translate(-50%,-50%) translateY(7px)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translate(-50%,-50%) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translate(-50%,-50%) rotate(-45deg)}
.nav-toggle:focus-visible{outline:2px solid var(--ottone);outline-offset:2px}

.nav-mobile{max-height:0;overflow:hidden;background:var(--bianco);
     transition:max-height 260ms ease-out}
.nav-mobile.is-open{max-height:480px;border-bottom:1px solid var(--bordo)}
.nav-mobile .w{display:flex;flex-direction:column}
.nav-mobile a{display:block;padding:14px 0;font-family:var(--sans);font-size:16px;
     color:var(--titolo);text-decoration:none;border-top:1px solid var(--bordo)}
.nav-mobile a:first-child{border-top:0}
.nav-mobile a:hover,.nav-mobile a:focus-visible{color:var(--ottone)}
.nav-mobile a:focus-visible{outline:2px solid var(--ottone);outline-offset:-2px}

/* hero */
.hero{padding-block:80px 48px}
.hero .w{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
         gap:48px;align-items:center}
.hero .inner{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hero h1{margin-top:-8px}
.hero p.sub{font-size:19px;margin-top:8px}
.slot-video{border:1px dashed var(--bordo);border-radius:var(--r);background:var(--avorio);
            aspect-ratio:332/340;display:grid;place-items:center;text-align:center;padding:16px;color:var(--segnaposto);
            font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* video nascosto temporaneamente: testo centrato su colonna unica, hero alta quanto la piega */
.hero.no-video{min-height:70dvh;display:flex;align-items:center}
.hero.no-video .slot-video{display:none}
.hero.no-video .w{grid-template-columns:1fr}
.hero.no-video .inner{align-items:center;text-align:center}

/* blocchi generici */
.testa{display:flex;flex-direction:column;gap:12px;margin-bottom:36px}
.griglia3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (min-width:901px){.griglia3.griglia3-garanzia{grid-template-columns:1fr 1.3fr 1fr;align-items:start}}
.griglia4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.griglia2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.griglia2-perche .attr p{font-size:14.5px}
.card{position:relative;background:var(--bianco);padding:24px;display:flex;flex-direction:column;gap:10px;border-radius:var(--r);
      transition:transform 140ms ease-out, box-shadow 140ms ease-out}
.card::after,.passo::after,.attr::after{content:"";position:absolute;inset:var(--cor);pointer-events:none;
     border:var(--fil) solid var(--ottone);border-radius:calc(var(--r) - var(--cor))}
.card .cap{display:flex;align-items:center;gap:12px}
.card p{font-size:16px}
.card.evid{box-shadow:inset 0 0 0 2px var(--ottone)}
.card:hover,.card:focus-visible,.passo:hover,.passo:focus-visible,.attr:hover,.attr:focus-visible{
     transform:scale(1.02);box-shadow:inset 0 0 0 2px var(--ottone)}

.icona{width:32px;height:32px;color:var(--ottone);flex:none}
.passo{position:relative;background:var(--bianco);padding:24px;display:flex;flex-direction:column;gap:10px;border-radius:var(--r);aspect-ratio:4/4.4;
      transition:transform 140ms ease-out, box-shadow 140ms ease-out}
@media (max-width:900px){.passo{aspect-ratio:auto}}
.passo .n{font-family:var(--serif);font-size:15px;color:var(--ottone);font-weight:600;
          font-variant-numeric:tabular-nums}
.passo h3{position:relative;padding-bottom:12px}
.passo h3::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--ottone)}
.passo p{font-size:16px}

.attr{position:relative;background:var(--bianco);padding:24px;display:flex;gap:16px;align-items:flex-start;border-radius:var(--r);
      transition:transform 140ms ease-out, box-shadow 140ms ease-out}
.attr div{display:flex;flex-direction:column;gap:6px}
.attr p{font-size:16px}

.slot{border:1px dashed var(--bordo);border-radius:var(--r);background:var(--avorio);padding:24px var(--gut);
      text-align:center;color:var(--segnaposto);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.slot.chiaro{background:#FBF8F2}

.foto{position:relative;border-radius:var(--r);outline:var(--fil) solid var(--ottone);outline-offset:calc(var(--cor) * -1);aspect-ratio:1/1;background:var(--bordo);display:grid;place-items:center;
      color:var(--segnaposto);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.persona{display:flex;flex-direction:column;gap:12px}
.persona span{font-family:var(--serif);font-size:19px;color:var(--titolo)}

.attrib-riga{display:grid;grid-template-columns:47.5% 1fr;gap:40px}
.attrib-riga p{border-left:3px solid var(--ottone);padding-left:22px;color:var(--titolo);
     font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.22;
     padding-block:14px;
     background:linear-gradient(to right, rgba(24,124,49,.14) 0%, rgba(24,124,49,.05) 40%, rgba(24,124,49,0) 80%)}
@media (max-width:900px){.attrib-riga p{font-size:21px;padding-left:18px}}
@media (max-width:820px){.attrib-riga{grid-template-columns:1fr;gap:24px}}
.cta-riga{margin-top:40px;display:flex;justify-content:center}

.chiusura .w{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.chiusura .copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}

footer{background:var(--bianco);border-top:1px solid var(--bordo);font-size:15px}
footer .w{padding-block:36px 16px}

.f-top{display:grid;grid-template-columns:1.5fr 1fr 1.15fr 1.35fr;gap:32px;align-items:start}

.f-marchio .logo{height:42px}
.f-claim{margin:10px 0 16px;max-width:30ch}
.f-zona{display:flex;align-items:center;gap:8px;margin:0}

.f-occhiello{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
             color:var(--ottone);margin:0 0 12px}
.f-lista{display:flex;flex-direction:column;gap:9px}
.f-lista a{display:flex;align-items:center;gap:8px;color:var(--corpo);text-decoration:none;
           width:fit-content;transition:color 140ms ease-out}
.f-lista a:hover,.f-lista a:focus-visible{color:var(--ottone)}
.f-lista a:focus-visible{outline:2px solid var(--ottone);outline-offset:3px}
.f-ico{width:17px;height:17px;flex:none;color:var(--ottone)}

.f-invito{margin:0 0 14px}

.f-legale{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap;
          margin-top:2px;font-size:13.5px}
.f-legale a{color:var(--corpo);text-decoration:underline;text-underline-offset:3px}
.f-legale a:focus-visible{outline:2px solid var(--ottone);outline-offset:3px}

/* ——— movimento ——— */
@keyframes sali{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes apri{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.hero .inner > *{animation:sali 560ms cubic-bezier(.2,.7,.3,1) both}
.hero .inner > *:nth-child(1){animation-delay:60ms}
.hero .inner > *:nth-child(2){animation-delay:140ms}
.hero .inner > *:nth-child(3){animation-delay:220ms}
.hero .inner > *:nth-child(4){animation-delay:300ms}
.hero .slot-video{animation:apri 700ms cubic-bezier(.2,.7,.3,1) both;animation-delay:380ms}
.js .rivela{opacity:0}
.js .rivela.in{animation:sali 520ms cubic-bezier(.2,.7,.3,1) both}
.js .rivela.foto-in.in{animation:apri 640ms cubic-bezier(.2,.7,.3,1) both}
.js .rivela.in:nth-child(2){animation-delay:90ms}
.js .rivela.in:nth-child(3){animation-delay:180ms}
.js .rivela.in:nth-child(4){animation-delay:270ms}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .js .rivela{opacity:1}
  .btn:hover{transform:none}
  .card.in-vista,.passo.in-vista,.attr.in-vista{transform:none}
}
@media (max-width:900px){
  :root{--sez:32px}
  h1{font-size:36px} h2{font-size:27px} h3{font-size:19px}
  body{font-size:16px}
  .hero{padding-block:48px 32px}
  .griglia3,.griglia4,.griglia2,.chiusura .w,.hero .w{grid-template-columns:1fr}
  .lead,.hero p.sub{font-size:17px}
  .nav{display:none}
  .nav-toggle{display:block}
  .card.in-vista,.passo.in-vista,.attr.in-vista{transform:scale(1.02);box-shadow:inset 0 0 0 2px var(--ottone)}
  .f-top{grid-template-columns:1fr 1fr;gap:28px 20px}
  .f-marchio,.f-parliamone{grid-column:1 / -1}
}

/* blocchi esempio della perdita */
.conto-a{position:relative;background:var(--avorio);border-radius:var(--r);padding:20px 24px;margin-top:32px}
.conto-a::after{content:"";position:absolute;inset:var(--cor);pointer-events:none;
     border:var(--fil) solid var(--rosso);border-radius:calc(var(--r) - var(--cor))}
.catena{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0 8px;align-items:center;justify-items:center}
.catena .cella{text-align:center}
.cella .et{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
           color:var(--titolo);margin-bottom:4px;display:block}
.cella.finale .et{color:var(--rosso)}
.cella .val{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.1;color:var(--titolo);
            font-variant-numeric:tabular-nums}
.cella.finale .val{font-size:32px;color:var(--rosso)}
.segno{font-family:var(--serif);font-size:19px;color:var(--titolo);line-height:1;padding-top:16px;
       user-select:none}
.nota-a{margin-top:14px;font-size:15px;text-align:right}
.catena .rivela.in:nth-child(3){animation-delay:100ms}
.catena .rivela.in:nth-child(5){animation-delay:220ms}

.conto-b{position:relative;background:var(--bianco);border-radius:var(--r);padding:22px 20px}
.conto-b::after{content:"";position:absolute;inset:var(--cor);pointer-events:none;
     border:var(--fil) solid var(--ottone);border-radius:calc(var(--r) - var(--cor))}
.conto-b h3{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.25;color:var(--titolo);margin:0}
.righe{margin-top:14px}
.riga{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-block:10px;
      border-top:1px solid var(--bordo)}
.riga .et{font-size:15px;color:var(--corpo)}
.riga .val{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--titolo);
           font-variant-numeric:tabular-nums;white-space:nowrap}

.risultato{position:relative;background:var(--avorio);border-radius:var(--r);padding:16px 18px;margin-top:16px}
.risultato::after{content:"";position:absolute;inset:var(--cor);pointer-events:none;
     border:var(--fil) solid var(--rosso);border-radius:calc(var(--r) - var(--cor))}
.risultato .top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.risultato .top .et{font-size:15px;max-width:17ch;line-height:1.25}
.risultato .top .val{font-family:var(--serif);font-weight:600;font-size:44px;color:var(--rosso);
                     line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.risultato .giu{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;padding-top:12px;
                border-top:1px solid var(--bordo)}
.risultato .giu .et{font-size:13px;color:var(--corpo);display:block;margin-bottom:2px}
.risultato .giu .val{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--rosso);
                     font-variant-numeric:tabular-nums;line-height:1.1}
.nota-b{margin-top:12px;font-size:13px;line-height:1.45;color:#6E6A61}

@media (max-width:900px){
  .catena{grid-template-columns:1fr;gap:0}
  .catena .cella{padding-block:18px;border-top:1px solid var(--bordo);text-align:left}
  .catena .cella:first-child{border-top:0;padding-top:0}
  .segno{display:none}
  .cella.finale .val{font-size:27px}
  .risultato .top{flex-direction:column;align-items:flex-start;gap:8px}
  .risultato .top .et{max-width:none}
}

/* ——— pagina modulo ——— */
.btn.pieno{display:block;width:100%}

.modulo{background:var(--avorio)}
.modulo .w{display:grid;grid-template-columns:1fr 472px;gap:24px;align-items:start}

.colonna-testo{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.colonna-testo h1{font-size:44px;margin-top:-8px}
.colonna-testo h1::after{content:"";display:block;width:64px;height:var(--fil);background:var(--ottone);margin-top:24px}
.colonna-testo .lead{margin-top:-8px}

.whatsapp-cta{align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
.btn-whatsapp{display:inline-flex;align-items:center;gap:8px;background:rgba(37,211,102,.14);
     color:var(--titolo);font-family:var(--sans);font-weight:600;font-size:14px;
     padding:8px 16px;border:var(--fil) solid #25D366;border-radius:var(--r);
     text-decoration:none;transition:background 140ms ease-out}
.btn-whatsapp svg{width:19px;height:19px;flex:none;color:var(--titolo)}
.btn-whatsapp:hover{background:rgba(37,211,102,.24)}
.btn-whatsapp:focus-visible{outline:2px solid var(--ottone);outline-offset:3px}
.whatsapp-cta .nota-whatsapp{font-size:13px;color:var(--segnaposto);margin:0}

.form-card{position:relative;background:var(--bianco);border-radius:var(--r);
           padding:32px;display:flex;flex-direction:column;gap:16px}
.form-card::after{content:"";position:absolute;inset:var(--cor);pointer-events:none;
     border:var(--fil) solid var(--ottone);border-radius:calc(var(--r) - var(--cor))}

.campi-griglia{display:grid;grid-template-columns:1fr;gap:16px}

.campo{display:flex;flex-direction:column;gap:8px}
.campo.pieno{grid-column:1 / -1}
.campo label{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--titolo)}
.campo input,.campo select{width:100%;font-family:var(--sans);font-size:16px;color:var(--corpo);
     background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--r);padding:16px}
.campo input::placeholder{color:var(--segnaposto)}
.campo input:focus-visible,.campo select:focus-visible{outline:2px solid var(--ottone);outline-offset:2px;border-color:var(--ottone)}
.campo select{appearance:none;-webkit-appearance:none;padding-right:44px;
     background-repeat:no-repeat;background-position:right 16px center;background-size:16px;
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23187C31' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.campo select:invalid{color:var(--segnaposto)}

.errore-invio{font-size:14px;line-height:1.4;color:var(--corpo);margin:0}

.suggerimento-email{font-size:14px;line-height:1.4;color:var(--corpo);margin:0}
.suggerimento-email button{background:none;border:0;padding:0;margin:0;font:inherit;
     color:var(--ottone);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.suggerimento-email button:focus-visible{outline:2px solid var(--ottone);outline-offset:2px}

@media (max-width:900px){
  .modulo .w{grid-template-columns:1fr;gap:36px}
  .colonna-testo h1{font-size:36px}
}
@media (max-width:480px){
  .form-card{padding:24px}
}