/* ============================================================
   spicca.ch — foglio di stile unico
   1. Token (colori, font, misure, durate): si cambia qui
   2. Base  3. Componenti  4. Sezioni  5. Movimento
   ============================================================ */

/* ---------- Font (ospitati sul server, niente Google Fonts) ---------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url("../assets/fonts/poppins-800.woff2") format("woff2")}

/* ---------- 1. Token ---------- */
:root{
  color-scheme:light;
  --c-nero:#1D1D1B;
  --c-bianco:#FFFFFF;
  --c-blu:#2D45E0;        /* blu Spicca, RGB 45/69/224 */
  --c-blu-luce:#5B6FF0;   /* solo per il gradiente dei bottoni */
  --c-blu-chiaro:#8D9CF5; /* accenti su fondo nero: il blu pieno lì ha poco contrasto */
  --c-grigio-su-nero:#A3A39E;   /* testo secondario su nero, contrasto 6,6:1 */
  --c-grigio-su-bianco:#5E5E5A; /* testo secondario su bianco, contrasto 6,4:1 */
  --c-linea-su-bianco:#E4E4E0;
  --c-linea-su-nero:#3A3A37;
  --c-carta:#F4F4F1;

  /* Gradiente blu che scorre: solo bottoni primari */
  --grad-nastro:linear-gradient(90deg,var(--c-blu) 0%,var(--c-blu-luce) 50%,var(--c-blu) 100%);
  --accento:var(--c-blu);
  --grad-ciclo:6s;

  --font:"Poppins","Helvetica Neue",Arial,sans-serif;
  --fs-display:clamp(3rem,min(13vw,15vh),10rem);
  --fs-h2:clamp(2.25rem,6vw,4.5rem);
  --fs-h3:clamp(1.625rem,4vw,3rem);
  --fs-lead:clamp(1.25rem,2.2vw,1.625rem);
  --fs-body:1.125rem;
  --fs-small:.9375rem;
  --fs-label:.8125rem;

  --gutter:clamp(16px,4vw,48px);
  --sezione:clamp(72px,12vw,160px);
  --max:1440px;
  --header-h:76px;
  --mobile-bar-h:0px;

  --ease:cubic-bezier(.2,.7,.1,1);
  --t-breve:200ms; --t-medio:450ms; --t-lungo:800ms;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bianco);color:var(--c-nero);font:400 var(--fs-body)/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-bottom:var(--mobile-bar-h)}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--c-blu);outline-offset:3px}
.nero :focus-visible,.blu :focus-visible{outline-color:var(--c-bianco)}
.salta{position:absolute;left:16px;top:-100px;z-index:100;background:var(--c-blu);color:var(--c-bianco);padding:12px 18px;font-weight:600;text-decoration:none}
.salta:focus{top:16px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sez{padding-block:var(--sezione)}
.nero{background:var(--c-nero);color:var(--c-bianco);--accento:var(--c-blu-chiaro)}
.blu{background:var(--c-blu);color:var(--c-bianco);--accento:var(--c-bianco)}
.chiaro{background:var(--c-bianco);color:var(--c-nero)}

.label{font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.h2{font-size:var(--fs-h2);font-weight:800;line-height:1;letter-spacing:-.03em;text-wrap:balance}
.h3{font-size:var(--fs-h3);font-weight:600;line-height:1.05;letter-spacing:-.02em}
.lead{font-size:var(--fs-lead);line-height:1.45;max-width:38ch}
.body{max-width:62ch}
.muted-n{color:var(--c-grigio-su-nero)}
.muted-b{color:var(--c-grigio-su-bianco)}

/* Etichette di sezione con segni a mano in stile fumetto (mai asterischi).
   Servizi e Contatti: ondina · Approccio: cerchietto · Progetti: freccia · Chi siamo: faccina */
.marca{display:flex;align-items:center;gap:12px}
.segno{position:relative;display:inline-flex;align-items:center;gap:8px;isolation:isolate}
.segno svg{max-width:none;overflow:visible}
.segno path{fill:none;stroke:var(--accento);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round}
.segno--onda svg{position:absolute;left:-2px;bottom:-12px;width:calc(100% + 4px);height:10px}
.segno--freccia svg{width:34px;height:28px;margin-top:-14px}
.segno--cerchio svg{position:absolute;left:-14px;top:-10px;width:calc(100% + 28px);height:calc(100% + 20px);z-index:-1}
.segno--faccina .faccina{display:inline-block;color:var(--accento);font-weight:800;font-size:1.3em;letter-spacing:0;line-height:1;transform:rotate(90deg)}

.testa{display:grid;gap:20px;margin-bottom:clamp(40px,6vw,72px)}

/* ---------- 3. Componenti ---------- */

/* Bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;font:600 1rem/1 var(--font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color var(--t-breve),color var(--t-breve),border-color var(--t-breve)}
.btn .freccia{transition:transform var(--t-breve) var(--ease)}
.btn:hover .freccia,.btn:focus-visible .freccia{transform:translateX(4px)}
/* Primario: gradiente blu che scorre in continuo, ciclo lento */
.btn--primario{color:var(--c-bianco);background-image:var(--grad-nastro);background-size:200% 100%;background-position:0% 0;animation:scorre var(--grad-ciclo) linear infinite}
.btn--secondario{background:transparent;color:inherit;border-color:currentColor}
.nero .btn--secondario:hover{background:var(--c-bianco);color:var(--c-nero);border-color:var(--c-bianco)}
.chiaro .btn--secondario:hover{background:var(--c-nero);color:var(--c-bianco);border-color:var(--c-nero)}
@keyframes scorre{from{background-position:0% 0}to{background-position:200% 0}}

/* Header */
.header{position:fixed;inset:0 0 auto;z-index:40;height:var(--header-h);background:var(--c-bianco);color:var(--c-nero);transition:box-shadow var(--t-medio)}
.header.scorso{box-shadow:0 1px 0 var(--c-linea-su-bianco)}
.header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:block;width:clamp(92px,10vw,120px)}
.logo svg{width:100%;height:auto}
.nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,36px);font-size:var(--fs-small);font-weight:600}
.nav a{text-decoration:none;padding-block:8px}
.nav a:hover{text-decoration:underline;text-decoration-color:var(--c-blu);text-decoration-thickness:2px;text-underline-offset:6px}
.nav .nav__tel{color:var(--c-grigio-su-bianco);font-weight:400}
.menu-btn{display:none;background:none;border:0;color:inherit;font:600 var(--fs-small) var(--font);min-height:44px;padding:0 4px;cursor:pointer;align-items:center;gap:10px}
.menu-btn i{position:relative;display:block;width:22px;height:2px;background:currentColor}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:transform var(--t-breve) var(--ease)}
.menu-btn i::before{top:-7px}.menu-btn i::after{top:7px}
.menu-aperto .menu-btn i{background:transparent}
.menu-aperto .menu-btn i::before{transform:translateY(7px) rotate(45deg)}
.menu-aperto .menu-btn i::after{transform:translateY(-7px) rotate(-45deg)}

/* Menu a tutto schermo (telefono) */
.menu{position:fixed;inset:var(--header-h) 0 0;z-index:39;background:var(--c-nero);color:var(--c-bianco);padding:32px var(--gutter);display:none;flex-direction:column;justify-content:space-between;overflow-y:auto}
.menu-aperto .menu{display:flex}
.menu ul{display:grid;gap:4px}
.menu ul a{display:block;font-size:clamp(2.25rem,11vw,3.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;text-decoration:none;padding-block:4px}
.menu-aperto .menu ul li{animation:entra var(--t-medio) var(--ease) both}
.menu-aperto .menu ul li:nth-child(2){animation-delay:50ms}
.menu-aperto .menu ul li:nth-child(3){animation-delay:100ms}
.menu-aperto .menu ul li:nth-child(4){animation-delay:150ms}
.menu__contatti{display:grid;gap:6px;margin-top:40px;font-size:var(--fs-small);color:var(--c-grigio-su-nero)}
.menu__contatti a{text-decoration:none}
body.menu-aperto{overflow:hidden}

@media (max-width:899px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
}

/* Barra di lettura */
.lettura{position:fixed;left:0;right:0;top:0;z-index:41;height:3px;background:var(--c-blu);transform-origin:left;transform:scaleX(0);pointer-events:none}

/* Barra fissa telefono: WhatsApp + Chiama */
.barra-mobile{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;grid-template-columns:1fr 1fr;gap:8px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--c-nero);transform:translateY(110%);transition:transform var(--t-medio) var(--ease)}
.barra-mobile .btn{min-height:48px;padding:12px 16px}
.barra-mobile .btn--secondario{color:var(--c-bianco)}
.barra-mobile.visibile{transform:none}
@media (max-width:899px){
  .barra-mobile{display:grid}
  :root{--mobile-bar-h:72px}
}

/* ---------- 4. Sezioni ---------- */

/* Hero */
.hero{padding-top:calc(var(--header-h) + clamp(40px,6vw,80px));padding-bottom:clamp(72px,10vw,128px)}
.hero__h1{font-size:clamp(.9375rem,1.4vw,1.0625rem);font-weight:600;color:var(--c-grigio-su-bianco);max-width:32ch;line-height:1.45}
.payoff{margin-top:20px;font-size:var(--fs-display);font-weight:800;line-height:.92;letter-spacing:-.045em}
.payoff > span{display:block}
.parola{display:inline-block}
/* "distinguiti" cerchiato a mano, come nel carosello */
.evidenza{position:relative;display:inline-block;isolation:isolate}
.cerchio{max-width:none;position:absolute;left:-6%;top:-6%;width:112%;height:128%;z-index:-1;overflow:visible;pointer-events:none}
.cerchio path{fill:none;stroke:var(--c-blu);stroke-width:clamp(5px,1.1vw,14px);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4000;stroke-dashoffset:0}
.hero__cta{margin-top:clamp(56px,6vw,72px);display:flex;flex-wrap:wrap;gap:12px}

/* Introduzione */
.intro .lead{font-size:clamp(1.625rem,3.6vw,3rem);font-weight:600;line-height:1.2;letter-spacing:-.02em;max-width:24ch}
.intro__griglia{display:grid;gap:28px}
@media (min-width:900px){.intro__griglia{grid-template-columns:3fr 9fr;align-items:start}}

/* Servizi: righe che si aprono sul posto */
.servizi{border-top:1px solid var(--c-linea-su-nero)}
.servizio{border-bottom:1px solid var(--c-linea-su-nero)}
.servizio summary{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:clamp(22px,3vw,34px) 0;cursor:pointer;list-style:none}
.servizio summary::-webkit-details-marker{display:none}
.servizio .h3,.servizio .gancio{transition:transform var(--t-medio) var(--ease)}
.servizio .gancio{grid-column:1/-1;grid-row:2;color:var(--c-grigio-su-nero);font-size:1rem;max-width:52ch}
.servizio .segno{grid-column:2;grid-row:1;align-self:center;position:relative;width:22px;height:22px}
.servizio .segno::before,.servizio .segno::after{content:"";position:absolute;left:0;top:10px;width:22px;height:2px;background:currentColor;transition:transform var(--t-medio) var(--ease)}
.servizio .segno::after{transform:rotate(90deg)}
.servizio[open] .segno::after{transform:rotate(0)}
.servizio__testo{padding:0 0 clamp(24px,3vw,36px);max-width:62ch;color:var(--c-bianco)}
@media (min-width:900px){
  .servizio summary{grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;align-items:center}
  .servizio .gancio{grid-column:2;grid-row:1}
  .servizio .segno{grid-column:3}
  .servizio__testo{margin-left:calc((100% - 70px) * 5 / 11 + 24px)}
}
@media (hover:hover) and (pointer:fine){
    .servizio summary:hover .h3,.servizio[open] .h3{transform:translateX(16px)}
}

/* Approccio */
.approccio__griglia{display:grid;gap:28px}
@media (min-width:900px){.approccio__griglia{grid-template-columns:5fr 7fr;align-items:start;column-gap:48px}}
.approccio p + p{margin-top:1em}

/* Progetti → Instagram */
.progetti{display:grid;gap:28px}
.progetti a.grande{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;text-decoration:none;display:inline-flex;gap:.4em;align-items:baseline;width:fit-content;border-bottom:3px solid var(--accento);padding-bottom:4px}
.progetti a.grande .freccia{transition:transform var(--t-medio) var(--ease)}
.progetti a.grande:hover .freccia{transform:translateX(8px)}

/* Team */
.team{display:grid;gap:clamp(32px,3vw,40px);grid-template-columns:1fr}
@media (min-width:560px){.team{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.team{grid-template-columns:repeat(3,1fr)}}
.persona{display:grid;gap:12px;align-content:start}
.foto{aspect-ratio:4/5;background:var(--c-carta);overflow:hidden;margin-bottom:8px}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-lungo) var(--ease)}
.foto--vuota{display:grid;place-items:center;text-align:center;padding:16px;font-size:var(--fs-small);color:var(--c-grigio-su-bianco);border:1px dashed #C9C9C4}
@media (hover:hover) and (pointer:fine){.persona:hover .foto img{transform:scale(1.04)}}
.persona .nome{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.persona .bio{color:var(--c-grigio-su-bianco);font-size:1rem}
.da-fornire{display:inline-block;background:var(--c-carta);border:1px dashed #C9C9C4;padding:2px 8px;font-size:var(--fs-small)}

/* CTA finale */
.cta-finale .h2{font-size:clamp(2.75rem,9vw,8rem);letter-spacing:-.045em;line-height:1.18}
.rialzo{display:inline-block;transform:translateY(-.38em)}
.contatti{margin-top:clamp(40px,6vw,64px);display:flex;flex-wrap:wrap;gap:12px}
.cta-finale .indirizzo{margin-top:32px;font-size:1rem}

/* Footer */
.footer{padding-block:clamp(48px,6vw,72px);border-top:1px solid var(--c-linea-su-nero);font-size:var(--fs-small)}
.footer__griglia{display:grid;gap:32px}
@media (min-width:760px){.footer__griglia{grid-template-columns:repeat(3,1fr)}}
.footer p,.footer li{line-height:1.7}
.footer address{font-style:normal;display:grid;gap:12px}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline;text-decoration-color:var(--c-blu-chiaro);text-underline-offset:4px}
.footer .logo{margin-bottom:20px}
.footer__base{margin-top:48px;padding-top:24px;border-top:1px solid var(--c-linea-su-nero);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:var(--c-grigio-su-nero)}
.footer__base ul{display:flex;flex-wrap:wrap;gap:8px 24px}

/* ---------- 5. Movimento ---------- */
@keyframes entra{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes segna{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes appare{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Ingresso del payoff */
.payoff .parola{animation:entra var(--t-lungo) var(--ease) both}
.payoff > span:nth-child(2) .parola{animation-delay:120ms}
.payoff > span:nth-child(3) .parola{animation-delay:240ms}
.cerchio path{animation:disegna 1400ms cubic-bezier(.4,0,.2,1) 650ms both}
@keyframes disegna{from{stroke-dashoffset:4000}to{stroke-dashoffset:0}}

/* Comparsa allo scroll: solo se JavaScript è attivo (classe .js su <html>) */
.js .rivela{opacity:0;transform:translateY(24px)}
.js .rivela.visibile{animation:appare var(--t-lungo) var(--ease) both}
@media (max-width:899px){
  .js .rivela{transform:none}
  .js .rivela.visibile{animation:appare var(--t-medio) ease both}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .rivela{opacity:1;transform:none}
}

/* Pagina 404 */
.pagina-404 .logo{margin-bottom:clamp(48px,8vw,96px)}
.pagina-404 .payoff{margin-bottom:clamp(28px,4vw,40px);font-size:clamp(2.75rem,min(11vw,14vh),8rem)}

/* Introduzione su blu pieno, come le slide di testo del carosello */
.intro.blu .lead{color:var(--c-bianco)}

/* Pagine legali (privacy, note legali) */
.legale{padding-top:calc(var(--header-h) + clamp(40px,6vw,80px));padding-bottom:var(--sezione)}
.legale h1{font-size:var(--fs-h2);font-weight:800;line-height:1;letter-spacing:-.03em;margin-bottom:clamp(32px,5vw,56px)}
.legale__testo{max-width:68ch}
.legale__testo h2{font-size:clamp(1.375rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:clamp(40px,5vw,56px) 0 14px;scroll-margin-top:calc(var(--header-h) + 16px)}
.legale__testo h3{font-size:1.125rem;font-weight:600;margin:28px 0 8px}
.legale__testo p,.legale__testo ul,.legale__testo address{margin:0 0 14px}
.legale__testo address{font-style:normal}
.legale__testo ul{padding-left:1.2em;list-style:disc}
.legale__testo li{margin-bottom:4px}
.legale__testo a{text-decoration-color:var(--c-blu);text-underline-offset:3px}
.legale__testo .lead{max-width:none;margin-bottom:24px}
.legale__testo .aggiornato,.legale__testo .base,.legale__testo .nota{color:var(--c-grigio-su-bianco);font-size:var(--fs-small)}
.tabella{overflow-x:auto;margin:8px 0 16px;border-top:1px solid var(--c-linea-su-bianco)}
.tabella table{border-collapse:collapse;width:100%;min-width:560px;font-size:1rem}
.tabella th,.tabella td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--c-linea-su-bianco)}
.tabella th{font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-grigio-su-bianco)}
.tabella code{font-size:.9375rem}