/* =========================================================
   Luca Dallago — Consulente Finanziario
   Design system ispirato a investimentocustodito.com
   Font: Funnel Display (display) + Manrope (testo)
   ========================================================= */

:root{
  /* Blu — estratti dal riferimento */
  --blu:#495BED;          /* accento primario  rgb(73,91,237)  */
  --blu-scuro:#1C4372;    /* navy profondo     rgb(28,67,114)  */
  --blu-medio:#465A94;    /* blu polvere       rgb(70,90,148)  */
  --blu-link:#0059B9;
  --blu-tint:rgba(34,67,114,.06);
  --blu-tint-2:rgba(73,91,237,.08);

  /* Neutri */
  --grigio:#818181;       /* colore testo dominante del riferimento */
  --grigio-scuro:#303030;
  --grigio-chiaro:#9d9d9d;
  --bordo:#e6e9f0;
  --bg:#ffffff;
  --bg-alt:#f4f6fa;

  --ff-display:"Funnel Display","Manrope",-apple-system,sans-serif;
  --ff-testo:"Manrope",-apple-system,sans-serif;

  --wrap:1180px;
  --wrap-stretto:860px;
  --r:14px;
  --ombra:0 18px 60px rgba(28,67,114,.10);
  --ombra-sm:0 6px 24px rgba(28,67,114,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--grigio);
  font-family:var(--ff-testo);font-size:17px;font-weight:400;line-height:1.85;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blu-link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blu);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap--stretto{max-width:var(--wrap-stretto)}
.centro{text-align:center}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{font-family:var(--ff-display);color:var(--blu);font-weight:300;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6vw,4.5rem);line-height:1.08}
h2{font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.14}
h3{font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.3;font-weight:400;color:var(--blu-scuro)}
h4{font-size:1.12rem;font-weight:600;color:var(--blu-scuro);line-height:1.4}
p{margin:0 0 1.35em}
strong,b{color:var(--grigio-scuro);font-weight:700}
em{font-style:italic}

.occhiello{
  display:block;font-family:var(--ff-testo);font-size:.82rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blu);margin:0 0 1.1rem;
}
.riga{width:64px;height:2px;background:var(--blu);border:0;margin:1.8rem 0 2.6rem}
.centro .riga,.riga--c{margin-left:auto;margin-right:auto}
.guida{font-size:1.16rem;line-height:1.8;color:var(--grigio)}
.piccolo{font-size:.92rem;line-height:1.7}
.nota{font-size:.84rem;line-height:1.65;color:var(--grigio-chiaro)}

/* ---------- Bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--ff-testo);font-size:.86rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:1.15em 2.4em;border-radius:999px;border:2px solid var(--blu);
  background:var(--blu);color:#fff;cursor:pointer;text-decoration:none;
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.btn:hover{background:var(--blu-scuro);border-color:var(--blu-scuro);color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 34px rgba(73,91,237,.28)}
.btn--vuoto{background:transparent;color:var(--blu)}
.btn--vuoto:hover{background:var(--blu);color:#fff}
.btn--chiaro{background:#fff;border-color:#fff;color:var(--blu-scuro)}
.btn--chiaro:hover{background:transparent;border-color:#fff;color:#fff}
.btn--sm{padding:.85em 1.7em;font-size:.78rem}

/* ---------- Barra superiore ---------- */
.topbar{background:var(--blu);color:#fff;font-size:.8rem;letter-spacing:.04em}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:40px}
.topbar a{color:#fff;opacity:.95;display:inline-flex;align-items:center;gap:.45em}
.topbar a:hover{opacity:1;text-decoration:none}
.topbar__social{display:flex;gap:1.1rem;align-items:center}
.topbar__social svg{width:15px;height:15px;fill:currentColor;display:block}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--bordo)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:88px}
.marchio{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.marchio:hover{text-decoration:none}
.marchio__segno{width:46px;height:46px;flex:0 0 46px}
.marchio__txt{display:flex;flex-direction:column;line-height:1.15}
.marchio__nome{font-family:var(--ff-display);font-size:1.16rem;font-weight:500;color:var(--blu-scuro);letter-spacing:.01em}
.marchio__sub{font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--grigio-chiaro);font-weight:600}

.nav{display:flex;align-items:center;gap:2rem}
.nav a{
  font-family:var(--ff-display);font-size:.95rem;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blu);text-decoration:none;position:relative;padding:.35em 0;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--blu);transition:right .28s ease}
.nav a:hover{text-decoration:none}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{font-weight:500}

.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px}
.burger span{display:block;height:2px;background:var(--blu);margin:5px 0;border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Sezioni ---------- */
.sez{padding:clamp(4.5rem,9vw,7.5rem) 0}
.sez--alt{background:var(--bg-alt)}
.sez--tint{background:var(--blu-tint)}
.sez--blu{background:var(--blu-scuro);color:rgba(255,255,255,.82)}
.sez--blu h2,.sez--blu h3,.sez--blu h4{color:#fff}
.sez--blu .occhiello{color:rgba(255,255,255,.72)}
.sez--blu .riga{background:rgba(255,255,255,.5)}
.sez--blu strong{color:#fff}
.sez--stretta{padding:clamp(3rem,6vw,5rem) 0}

/* ---------- Hero ---------- */
.hero{background:var(--bg-alt);padding:clamp(4rem,8vw,6.5rem) 0 clamp(3.5rem,7vw,5.5rem);text-align:center}
.hero h1{margin-bottom:0}
.hero__ruoli{font-family:var(--ff-display);font-size:clamp(1rem,2vw,1.28rem);color:var(--grigio);font-weight:300;margin-top:1.2rem}

/* ---------- Griglie ---------- */
.griglia{display:grid;gap:2.2rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.split--inv{grid-template-columns:1.15fr 1fr}

/* ---------- Ritratto duotone (come il riferimento) ---------- */
.ritratto{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(160deg,#cfe0f7 0%,#a9c4ee 55%,#7f9fdd 100%);aspect-ratio:4/5}
.ritratto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.ritratto::after{content:"";position:absolute;inset:0;background:var(--blu);mix-blend-mode:screen;opacity:.16;pointer-events:none}
.ritratto--vuoto{display:flex;align-items:center;justify-content:center}
.ritratto--vuoto .iniziali{font-family:var(--ff-display);font-size:clamp(4rem,9vw,7rem);font-weight:300;color:rgba(28,67,114,.34);letter-spacing:.04em}

/* ---------- Card ---------- */
.card{background:#fff;border:1px solid var(--bordo);border-radius:var(--r);padding:2.3rem 2rem;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--ombra);border-color:rgba(73,91,237,.3)}
.card h3,.card h4{margin-top:0}
.card p:last-child{margin-bottom:0}
.card__num{font-family:var(--ff-display);font-size:2.7rem;font-weight:300;color:rgba(73,91,237,.34);line-height:1;display:block;margin-bottom:1rem}
.card__ico{width:46px;height:46px;margin-bottom:1.3rem;color:var(--blu)}
.card__ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}
.sez--alt .card{background:#fff}
.sez--blu .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.sez--blu .card:hover{border-color:rgba(255,255,255,.4);box-shadow:none}

/* ---------- Numeri / metriche ---------- */
.metriche{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;text-align:center}
.metrica__n{font-family:var(--ff-display);font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:300;color:var(--blu);line-height:1;display:block}
.metrica__t{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--grigio-chiaro);margin-top:.7rem;display:block}
.sez--blu .metrica__n{color:#fff}
.sez--blu .metrica__t{color:rgba(255,255,255,.66)}

/* ---------- Timeline curriculum ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--blu),rgba(73,91,237,.12))}
.timeline li{position:relative;padding:0 0 2.3rem 3rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:2px;top:.55em;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--blu)}
.timeline .anno{display:block;font-family:var(--ff-display);font-size:1.02rem;font-weight:500;color:var(--blu);letter-spacing:.05em;margin-bottom:.25rem}
.timeline p{margin:0}

/* ---------- Elenchi ---------- */
.lista{list-style:none;margin:0 0 1.6rem;padding:0}
.lista li{position:relative;padding:0 0 .95rem 2rem;line-height:1.75}
.lista li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--blu);
}
.lista--check li::before{
  content:"";left:0;top:.42em;width:16px;height:16px;border-radius:0;background:none;
  border-left:2px solid var(--blu);border-bottom:2px solid var(--blu);
  transform:rotate(-45deg) scale(.78);
}
.sez--blu .lista li::before{background:rgba(255,255,255,.85)}
.sez--blu .lista--check li::before{background:none;border-color:#fff}

/* ---------- Citazione / testimonianza ---------- */
.quote{background:#fff;border-left:3px solid var(--blu);border-radius:0 var(--r) var(--r) 0;padding:2rem 2.2rem;box-shadow:var(--ombra-sm)}
.quote p{font-size:1.05rem;font-style:italic;color:var(--grigio-scuro);margin-bottom:1rem}
.quote cite{font-style:normal;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--blu)}

/* ---------- Accordion FAQ ---------- */
.faq{border-top:1px solid var(--bordo)}
.faq details{border-bottom:1px solid var(--bordo)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--ff-display);font-size:1.12rem;font-weight:400;color:var(--blu-scuro);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:2.05rem;width:11px;height:11px;
  border-right:2px solid var(--blu);border-bottom:2px solid var(--blu);
  transform:rotate(45deg);transition:transform .3s ease;
}
.faq details[open] summary::after{transform:rotate(225deg);top:2.3rem}
.faq details[open] summary{color:var(--blu)}
.faq__c{padding:0 2.5rem 1.7rem 0}
.faq__c p:last-child{margin-bottom:0}

/* ---------- CTA a tutta larghezza ---------- */
.cta{background:var(--blu);color:#fff;text-align:center;padding:clamp(3.6rem,7vw,5.6rem) 0}
.cta h2{color:#fff;margin-bottom:.35em}
.cta p{color:rgba(255,255,255,.9);max-width:640px;margin-left:auto;margin-right:auto}
.cta .riga{background:rgba(255,255,255,.55)}

/* ---------- Form ---------- */
.form{background:#fff;border:1px solid var(--bordo);border-radius:var(--r);padding:clamp(1.8rem,4vw,3rem);box-shadow:var(--ombra-sm)}
.campo{margin-bottom:1.6rem}
.campo>label,.campo .legenda{
  display:block;font-size:.85rem;font-weight:700;letter-spacing:.06em;color:var(--blu-scuro);
  margin-bottom:.6rem;line-height:1.5;
}
.campo .req{color:var(--blu)}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],
.campo input[type=number],.campo input[type=file],.campo select,.campo textarea{
  width:100%;font-family:var(--ff-testo);font-size:1rem;color:var(--grigio-scuro);
  padding:.95em 1.1em;border:1px solid var(--bordo);border-radius:10px;background:#fcfdff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--blu);box-shadow:0 0 0 3px rgba(73,91,237,.14);
}
.campo textarea{min-height:120px;resize:vertical;line-height:1.7}
.opzioni{display:grid;gap:.7rem}
.opzioni--2{grid-template-columns:repeat(2,1fr)}
.opz{
  display:flex;align-items:center;gap:.8rem;padding:.9em 1.15em;border:1px solid var(--bordo);
  border-radius:10px;cursor:pointer;background:#fcfdff;font-size:.97rem;line-height:1.45;
  transition:border-color .2s ease,background .2s ease;
}
.opz:hover{border-color:var(--blu);background:#fff}
.opz input{accent-color:var(--blu);width:18px;height:18px;flex:0 0 18px;margin:0}
.opz:has(input:checked){border-color:var(--blu);background:var(--blu-tint-2)}
.consenso{display:flex;gap:.85rem;align-items:flex-start;font-size:.87rem;line-height:1.6}
.consenso input{accent-color:var(--blu);width:18px;height:18px;flex:0 0 18px;margin-top:.22em}
.passo{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--blu);margin-bottom:.8rem}

/* ---------- Disclaimer / avviso ---------- */
.avviso{
  background:var(--blu-tint);border:1px solid rgba(28,67,114,.14);border-left:3px solid var(--blu-medio);
  border-radius:0 var(--r) var(--r) 0;padding:1.5rem 1.8rem;font-size:.9rem;line-height:1.75;
}
.avviso p:last-child{margin-bottom:0}
.avviso strong{color:var(--blu-scuro)}

/* ---------- Testo legale lungo ---------- */
.legale h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:2.8rem}
.legale h3{font-size:1.15rem;margin-top:2rem}
.legale ul{padding-left:1.3rem;margin-bottom:1.4rem}
.legale li{margin-bottom:.6rem}
.legale table{width:100%;border-collapse:collapse;margin-bottom:1.6rem;font-size:.92rem}
.legale th,.legale td{border:1px solid var(--bordo);padding:.75em .9em;text-align:left;vertical-align:top}
.legale th{background:var(--bg-alt);color:var(--blu-scuro);font-weight:700}

/* ---------- Footer ---------- */
.footer{background:var(--blu-scuro);color:rgba(255,255,255,.72);padding:clamp(3.5rem,6vw,5rem) 0 0;font-size:.94rem}
.footer a{color:rgba(255,255,255,.72)}
.footer a:hover{color:#fff;text-decoration:none}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.5rem;padding-bottom:3rem}
.footer h4{color:#fff;font-family:var(--ff-testo);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:1.3rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:.7rem;line-height:1.6}
.footer__marchio .marchio__nome{color:#fff}
.footer__marchio .marchio__sub{color:rgba(255,255,255,.55)}
.footer__social{display:flex;gap:1rem;margin-top:1.4rem}
.footer__social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.24);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .25s ease,border-color .25s ease}
.footer__social a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.footer__social svg{width:16px;height:16px;fill:currentColor;display:block}
.footer__legale{border-top:1px solid rgba(255,255,255,.14);padding:2.2rem 0;font-size:.8rem;line-height:1.8;color:rgba(255,255,255,.58)}
.copy-bar{
  border-top:1px solid rgba(255,255,255,.14);padding:1.3rem 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;
  font-size:.82rem;color:rgba(255,255,255,.66);
}
.credit{color:currentColor;opacity:.92}
.credit:hover{text-decoration:underline}
.cuore{color:#FF0031}

/* ---------- Animazioni ---------- */
/* invisibile SOLO se il JS gira davvero: senza .js su <html> il contenuto resta leggibile */
.js .rivela{opacity:0;transform:translateY(26px)}
.rivela.on{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  .rivela,.rivela.on,.js .rivela{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .burger{display:block}
  .nav{
    position:fixed;inset:0 0 auto;top:0;height:100dvh;background:#fff;flex-direction:column;
    justify-content:center;gap:1.9rem;transform:translateX(100%);transition:transform .35s ease;z-index:90;
  }
  .nav.aperto{transform:none}
  .nav a{font-size:1.35rem}
  .header__in{position:relative;z-index:100}
  .split,.split--inv{grid-template-columns:1fr}
  .split .ritratto{max-width:420px;margin:0 auto}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .opzioni--2{grid-template-columns:1fr}
  .topbar__in{justify-content:center}
  .topbar__area{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .card{padding:1.8rem 1.5rem}
  .btn{padding:1.05em 1.9em;font-size:.8rem}
}

/* ---------- Correzioni ---------- */
/* .nav a (0,2,0) batte .btn (0,1,0): senza questo il bottone in header è blu su blu */
.nav a.btn{color:#fff}
.nav a.btn::after{display:none}
.nav a.btn:hover{color:#fff}
.nav a.btn--vuoto{color:var(--blu)}
.nav a.btn--vuoto:hover{color:#fff}
/* stesso conflitto nel footer: .footer a impone il grigio chiaro sui bottoni */
.footer a.btn{color:#fff}
.cta a.btn--chiaro{color:var(--blu-scuro)}
.cta a.btn--chiaro:hover{color:#fff}

/* area di tocco delle icone social: 15px effettivi sono sotto la soglia WCAG 2.5.8.
   Padding negativo compensato dal margin: cresce l'area cliccabile, non l'aspetto. */
.topbar__social a{padding:.7rem;margin:-.7rem -.35rem;min-width:44px;min-height:44px;justify-content:center}
.topbar__social{gap:.4rem}

/* Menu mobile: .header ha z-index:60 e crea uno stacking context, quindi il burger
   finiva SOTTO il pannello del menu (z-index:90) e non si poteva più chiudere. */
@media (max-width:860px){
  .header{z-index:120}
  .nav{padding-top:88px}
  .burger[aria-expanded="true"]{position:relative;z-index:130}
}

/* honeypot antispam: fuori schermo ma non display:none (i bot ignorano i campi nascosti) */
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
p.avviso[role=alert]{border-left-color:#c0392b;background:rgba(192,57,43,.06);border-color:rgba(192,57,43,.2);color:#a5352a;margin-top:1.5rem}

/* foto di Luca: predefinite nel sito, sostituibili dal pannello (lo style inline vince su queste regole) */
.ritratto--foto{background-image:url('../img/luca-dallago.jpg');background-size:cover;background-position:center 18%}
/* ritratto ufficiale Fineco, usato dove serve il volto in primo piano */
.ritratto--ritratto{background-image:url('../img/luca-ritratto.jpg');background-size:cover;background-position:center top}
.ritratto.ha-foto .iniziali,.ritratto--foto .iniziali,.ritratto--ritratto .iniziali{display:none}
.ritratto.ha-foto::after,.ritratto--foto::after,.ritratto--ritratto::after{opacity:.10}