/* =========================================================
   TEMA "V4 · A COLORI VIVACI" — anteprima full-site
   Importa il foglio base e rivernicia le classi condivise:
   hero arancio a tutta fascia, bottoni "chunky", card con
   bordo colorato in basso, CTA verde, fasce energiche.
   NON è online: serve a confrontare l'attuale con la V4.
   ========================================================= */
@import url("styles.css");

:root{
  --v4-ink:#0f3556;
  --radius: 22px;
  --radius-lg: 28px;
}

/* ---------- Bottoni "chunky" (ombra piena in basso) ---------- */
.btn{
  border-radius:14px;
  border:0;
  font-weight:700;
  box-shadow:0 7px 0 rgba(8,29,47,.22);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 9px 0 rgba(8,29,47,.22); }
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(8,29,47,.22); }
.btn--primary{ background:var(--orange); color:#fff; box-shadow:0 7px 0 var(--orange-600); }
.btn--primary:hover{ background:var(--orange); box-shadow:0 9px 0 var(--orange-600); }
.btn--whatsapp{ background:var(--green); color:#fff; box-shadow:0 7px 0 #1f7d50; }
.btn--whatsapp:hover{ background:var(--green); box-shadow:0 9px 0 #1f7d50; }
.btn--ghost,.btn--light{ background:#fff; color:var(--navy); box-shadow:0 7px 0 rgba(8,29,47,.16); }
.header-cta .btn{ box-shadow:0 4px 0 rgba(8,29,47,.18); border-radius:12px; }
.header-cta .btn:hover{ transform:translateY(-1px); }

/* ---------- HERO: fascia arancio a tutta larghezza ---------- */
.hero{
  background:linear-gradient(120deg,var(--orange) 0%,#f08a3e 55%,var(--orange-600) 100%);
  color:#fff;
  border-bottom:5px solid var(--orange-600);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(rgba(255,255,255,.16) 2px,transparent 2.2px) 0 0/26px 26px;
  opacity:.7; pointer-events:none;
}
.hero-grid{ position:relative; z-index:1; }
.hero h1{ color:#fff; text-shadow:0 4px 0 rgba(0,0,0,.12); }
.hero p.lead{ color:#fff6ef; }
.hero .eyebrow{ background:#fff; color:var(--navy); border-color:#fff; box-shadow:0 5px 0 rgba(0,0,0,.12); }
.hero .hero-badge{ color:#fff; }
.hero .hero-badge svg{ color:#fff; }
/* immagine hero come le altre "card banner": box chiaro arrotondato, l'immagine
   lo riempie a tutta larghezza fino alla base (niente distacco). */
.hero .art-frame{
  background:linear-gradient(160deg,#fff 0%, var(--tint-sand) 100%);
  border:0; padding:0; border-radius:24px; overflow:hidden;
  box-shadow:0 18px 40px rgba(18,58,92,.22);
}
.hero .art-frame img{ filter:none; }
.hero .hero-pill{ box-shadow:0 8px 0 rgba(0,0,0,.14); border:0; }

/* ---------- HERO pagine interne: stessa fascia arancio ---------- */
.page-hero{
  background:linear-gradient(120deg,var(--orange) 0%,#f08a3e 55%,var(--orange-600) 100%);
  border-bottom:5px solid var(--orange-600);
  position:relative;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(rgba(255,255,255,.16) 2px,transparent 2.2px) 0 0/26px 26px;
  opacity:.7; pointer-events:none;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; text-shadow:0 4px 0 rgba(0,0,0,.12); }
.page-hero .lead{ color:#fff6ef; }
.page-hero .eyebrow{ background:#fff; color:var(--navy); border-color:#fff; box-shadow:0 5px 0 rgba(0,0,0,.12); }
.page-hero .breadcrumb,.page-hero .breadcrumb a{ color:#fff3e8; }

/* ---------- Card: morbide, bordo colorato in basso ---------- */
.card{
  border:0;
  border-bottom:6px solid var(--orange);
  border-radius:var(--radius);
  box-shadow:0 14px 30px rgba(18,58,92,.12);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(18,58,92,.18); }
.card-media{ border-bottom:0; }
/* card servizio: il bordo basso usa il colore della categoria */
.card.svc{ border:0; border-bottom:6px solid var(--svc); }
.card.svc .card-media{ border-bottom:0; }
.card.svc:hover{ box-shadow:0 22px 44px rgba(18,58,92,.18); }

/* link-card e step: morbidi e vivaci */
.link-card{ border:0; border-left:6px solid var(--orange); box-shadow:0 12px 26px rgba(18,58,92,.1); }
.link-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px rgba(18,58,92,.16); }
.step{ border:0; border-top:6px solid var(--orange); box-shadow:0 12px 26px rgba(18,58,92,.1); border-radius:var(--radius); }
.partner-card,.form-card{ border:0; box-shadow:0 14px 30px rgba(18,58,92,.12); }

/* ---------- Sezioni: più colore ---------- */
.section--cream{ background:var(--cream); }
/* alterna un tocco di colore: le sezioni "piane" restano bianche,
   la striscia fiducia e la CTA portano i colori forti */

/* ---------- Striscia fiducia: resta navy/arancio (in tema) ---------- */
.trust{ border-top:5px solid var(--orange); border-bottom:5px solid var(--orange); }

/* ---------- Fascia CTA: ARANCIO e COMPATTA (no spreco di spazio) ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--orange) 0%,var(--orange-600) 100%);
  border:0; box-shadow:0 14px 30px rgba(234,123,44,.28);
  padding:clamp(22px,3vw,34px) clamp(22px,4vw,40px);
}
.cta-band h2{ margin-bottom:6px; }
.cta-band p{ color:#fff6ef; margin-bottom:16px; }
.cta-band > *{ position:relative; z-index:1; }
/* la sezione che contiene SOLO una CTA: meno padding verticale */
.section:has(> .container > .cta-band){ padding-block:clamp(30px,4vw,52px); }

/* ---------- Mascotte / fumetto: bordo morbido ---------- */
.bubble{ border:0; box-shadow:0 14px 30px rgba(18,58,92,.12); }
.bubble--left::before{ display:none; }
.bubble--left::after{ display:none; }

/* ---------- Hero art-frame blob: mantiene la forma su fascia ---------- */
.hero .art-frame--blob{ border-radius:0; }

/* ---------- Eyebrow nelle sezioni chiare: pill arancio pieno ---------- */
.section .eyebrow{ background:var(--orange-100); }

/* ---------- Contrasto bottoni sulle fasce colorate ---------- */
/* arancio su arancio = invisibile -> bottone bianco su hero/page-hero */
.hero .btn--primary, .page-hero .btn--primary{
  background:#fff; color:var(--navy); box-shadow:0 7px 0 rgba(8,29,47,.18);
}
.hero .btn--primary:hover, .page-hero .btn--primary:hover{
  background:#fff; color:var(--navy); box-shadow:0 9px 0 rgba(8,29,47,.18);
}
.hero .btn--primary svg, .page-hero .btn--primary svg{ color:var(--orange); }
/* WhatsApp verde poco leggibile sulla CTA verde -> navy */
.cta-band .btn--whatsapp{ background:var(--navy); color:#fff; box-shadow:0 7px 0 #081d2f; }
.cta-band .btn--whatsapp:hover{ background:var(--navy); color:#fff; box-shadow:0 9px 0 #081d2f; }

/* ---------- Cornici immagini in stile V4 (interne) ---------- */
/* via bordo navy + ombra "fumetto" + il padding interno: l'immagine riempie
   il riquadro a tutta larghezza fino alla base (niente distacco/cornice).
   Si tiene la tinta dietro perché le illustrazioni sono trasparenti. */
.art-frame{ border:0; padding:0; box-shadow:0 18px 40px rgba(18,58,92,.14); }
.art-frame img{ filter:none; }
/* Chi siamo: il ritratto di Manu da "uovo" a box arrotondato come gli altri.
   Usa l'immagine ritagliata (manu-chisiamo) che riempie il box senza vuoti. */
.art-frame--blob{ border-radius:24px; }

/* ---------- Banner cookie in stile V4 ---------- */
.cookie-banner{ border:0; box-shadow:0 18px 40px rgba(18,58,92,.18); border-radius:18px; }

/* =========================================================
   RIFINITURE richieste (25 giu)
   ========================================================= */

/* 1) NAVBAR blu (navy) con testo chiaro e leggibile */
.site-header{ background:var(--navy); border-bottom:2px solid var(--navy-900); }
.brand, .brand b{ color:#fff; }
.brand img{ border-color:rgba(255,255,255,.35); }
.nav a{ color:#fff; }
.nav a:hover{ background:rgba(255,255,255,.12); }
.nav a.active{ color:#fff; background:rgba(255,255,255,.16); box-shadow:inset 0 -3px 0 var(--orange); }
.nav-toggle{ background:var(--orange); border-color:var(--orange); color:#fff; }
/* menu mobile aperto = pannello bianco -> testo scuro */
.nav.open{ background:#fff; }
.nav.open a{ color:var(--navy); }
.nav.open a:hover{ background:var(--cream); }
.nav.open a.active{ color:var(--orange-600); background:var(--orange-100); }

/* 2) VIA TUTTI I PUNTINI dagli sfondi */
.hero::before, .page-hero::before{ content:none !important; display:none !important; }
.cta-band::after{ content:none !important; display:none !important; }
.section--cream{ background-image:none !important; }

/* 3) CARD SERVIZI: via il mini-tag ridondante, nome del servizio COLORATO */
.card.svc .svc-tag{ display:none; }
.card.svc .card-body h3{ color:var(--svc); }

/* 4) IMMAGINE banner a tutta larghezza fino alla base (niente distacco/cornice),
   su TUTTE le card (servizi + guide). Le illustrazioni sono trasparenti:
   si tiene la tinta dietro, si toglie il padding. */
.card-media{ padding:0; border-bottom:0; }
.card-media img{ filter:none; }

/* =========================================================
   RIFINITURA GRAFICA (polish) — meno "template", più curato
   ========================================================= */
/* transizione pulita hero -> contenuto (via la riga dura) */
.hero, .page-hero{ border-bottom:0; }

/* titoli più curati: interlinea stretta, ombra morbida (non più "dura") */
.hero h1, .page-hero h1{ line-height:1.06; letter-spacing:-1.2px; text-shadow:0 2px 16px rgba(0,0,0,.16); }
.section-head h2{ line-height:1.12; letter-spacing:-.4px; }

/* accento sotto i titoli di sezione centrati (dettaglio "disegnato") */
.section-head.center h2{ position:relative; padding-bottom:20px; }
.section-head.center h2::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:60px; height:4px; border-radius:99px; background:var(--orange);
}

/* ===== V4 = FASCE COLORATE DEL BRAND (non un fondo piatto) =====
   Base calda "pesca" (tinta dell'arancio) per le sezioni-respiro;
   fasce bold navy/verde come accenti. Le card bianche risaltano ovunque. */
.section, .section--cream{ background:#fdeede; }            /* pesca caldo (orange-tint) */
.section{ padding-block:clamp(46px,5.5vw,82px); }
.section--navy{ background:var(--navy); }
.section--green{ background:linear-gradient(125deg,var(--green) 0%,#239a60 100%); }
.section--orange{ background:linear-gradient(120deg,var(--orange) 0%,#f08a3e 55%,var(--orange-600) 100%); }

/* testi su fasce bold (navy/verde/arancio): chiari */
.section--navy h1,.section--navy h2,.section--navy h3,
.section--green h1,.section--green h2,.section--green h3,
.section--orange h1,.section--orange h2,.section--orange h3{ color:#fff; }
.section--navy p,.section--green p{ color:#eef6f1; }
.section--orange p{ color:#fff6ef; }
.section--navy .eyebrow,.section--green .eyebrow{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
.section--orange .eyebrow{ color:var(--navy); background:#fff; border-color:#fff; }
/* card/bolle BIANCHE dentro fasce bold: titoli scuri, testo normale */
.section--navy .bubble h3, .section--navy .step h3, .section--navy .card h3, .section--navy .partner-card h3,
.section--green .bubble h3, .section--green .step h3, .section--green .card h3, .section--green .partner-card h3,
.section--orange .bubble h3, .section--orange .step h3, .section--orange .card h3, .section--orange .partner-card h3{ color:var(--navy); }
.section--navy .step p, .section--green .step p, .section--orange .step p,
.section--navy .bubble p, .section--green .bubble p, .section--orange .bubble p,
.section--navy .card p, .section--green .card p, .section--orange .card p,
.section--navy .partner-card p, .section--green .partner-card p, .section--orange .partner-card p{ color:var(--muted); }
/* testo diretto sulla fascia (liste check, span) leggibile su fasce bold */
.section--navy .checks span, .section--green .checks span, .section--orange .checks span,
.section--navy .checks li, .section--green .checks li, .section--orange .checks li{ color:#fff; }
/* …ma i check DENTRO le card bianche restano scuri (eccezione) */
.section--navy .card .checks span, .section--green .card .checks span, .section--orange .card .checks span,
.section--navy .card .checks li, .section--green .card .checks li, .section--orange .card .checks li{ color:var(--muted); }
/* spunta verde illeggibile sull'arancio → navy (icona in cerchietto bianco) */
.section--orange .checks svg{ color:var(--navy); background:#fff; border-radius:50%; padding:3px; box-sizing:border-box; width:24px; height:24px; }
/* zone-tag su fascia arancio: bianco pieno per staccare */
.section--orange .zone-tag{ background:#fff; border-color:#fff; }
.section-head{ margin-bottom:clamp(32px,4vw,46px); }

/* ombre card/elementi più morbide e uniformi */
.card{ box-shadow:0 16px 34px rgba(18,58,92,.10); }
.card:hover{ box-shadow:0 26px 50px rgba(18,58,92,.16); }
.link-card{ box-shadow:0 14px 30px rgba(18,58,92,.09); }
.bubble{ box-shadow:0 16px 36px rgba(18,58,92,.12); }

/* ===== Rifiniture (feedback 25 giu, 2) ===== */
/* divisore arancio tra le sezioni (come il piè di pagina) */
.section{ border-top:4px solid var(--orange); }

/* sezione Manu: usa più spazio e bolla più grande/proporzionata */
.section--navy .mascot-strip, .section--green .mascot-strip{ max-width:1040px; }
.mascot-strip .bubble{ padding:clamp(24px,3.4vw,40px); }
.mascot-strip .bubble h3{ font-size:clamp(1.35rem,2.6vw,1.95rem); margin-bottom:10px; }
.mascot-strip .bubble p{ font-size:1.05rem; line-height:1.6; }

/* "Come funziona": numero + azione sulla STESSA riga, descrizione sotto */
.step{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center; padding:20px 24px; }
.step::before{ margin-bottom:0; width:42px; height:42px; }
.step h3{ margin:0; }
.step p{ grid-column:1 / -1; margin-top:8px; }

/* ===== Card social colorate per network ===== */
.soc-fb{ background:#1877f2; border:0; }
.soc-ig{ background:linear-gradient(45deg,#feda75 0%,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5 100%); border:0; }
.soc-wa{ background:#25d366; border:0; }
.soc-fb .social-net b, .soc-ig .social-net b, .soc-wa .social-net b,
.soc-fb .social-net span, .soc-ig .social-net span, .soc-wa .social-net span{ color:#fff; }
/* icona social su pallino bianco, così non si confonde col fondo */
.soc-fb .social-net img, .soc-ig .social-net img, .soc-wa .social-net img{
  background:#fff; border-radius:50%; padding:5px; box-sizing:border-box;
}
.soc-fb .link-card-arrow, .soc-ig .link-card-arrow, .soc-wa .link-card-arrow{
  background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.45);
}
.soc-fb:hover, .soc-ig:hover, .soc-wa:hover{ filter:brightness(1.05); }

/* Scrollbar con colore FISSO del brand: non assume più i colori delle fasce
   (l'utente vedeva una "barra laterale" che cambiava tra arancio e blu). */
html{ scrollbar-color: var(--navy) #e7edf3; scrollbar-width: thin; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:#e7edf3; }
::-webkit-scrollbar-thumb{ background:var(--navy); border-radius:10px; border:3px solid #e7edf3; }
::-webkit-scrollbar-thumb:hover{ background:var(--navy-700); }

/* su mobile il ritratto di Manu (blob) non deve occupare tutto lo schermo */
@media (max-width:560px){
  .split-media.art-frame--blob{ max-width:230px !important; }
}

/* ---------- nota anteprima ---------- */
.v4-banner{
  background:var(--v4-ink); color:#fff; text-align:center;
  font-family:var(--font-head); font-weight:600; font-size:.92rem;
  padding:10px 16px;
}
.v4-banner a{ color:#ffd9b0; font-weight:700; }