/* AvatarAllianz — tema brand condiviso (totem + backoffice).
   Portrait-locked, touch-first. Palette Allianz, font Inter locale. */

@font-face { font-family:Inter; font-weight:400; font-style:normal; font-display:swap;
  src:url("/static/fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family:Inter; font-weight:500; font-style:normal; font-display:swap;
  src:url("/static/fonts/Inter-Medium.ttf") format("truetype"); }
@font-face { font-family:Inter; font-weight:600; font-style:normal; font-display:swap;
  src:url("/static/fonts/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family:Inter; font-weight:700; font-style:normal; font-display:swap;
  src:url("/static/fonts/Inter-Bold.ttf") format("truetype"); }

:root{
  --az-blue:#003781;        /* Allianz deep blue */
  --az-blue-600:#2364B3;    /* azione primaria (dal Figma) */
  --az-blue-700:#1c5196;
  --az-blue-050:#eaf1fb;
  --az-bg:#f4f6fb;
  --az-surface:#ffffff;
  --az-ink:#15243d;
  --az-ink-soft:#5a6b85;
  --az-line:#dde4f0;
  --az-on-brand:#ffffff;
  --az-err:#d7263d;
  --az-ok:#1f9d55;

  --r-sm:12px; --r:18px; --r-lg:28px; --r-pill:999px;
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px;
  --shadow:0 8px 28px rgba(16,38,76,.12);
  --shadow-sm:0 2px 10px rgba(16,38,76,.08);
  --tap:64px;
  --maxw:760px;
}

*{box-sizing:border-box}
[x-cloak]{display:none!important}
html,body{margin:0;height:100%}
html{-webkit-text-size-adjust:100%}
body{
  /* Altezza EFFETTIVA banda carosello: quella configurata (--carousel-h, inline dal config)
     cap-ata al 10% del viewport → su mobile non mangia mezzo schermo. */
  --ch:min(var(--carousel-h,48px),10vh);
  font-family:Inter,system-ui,sans-serif;
  color:var(--az-ink); background:var(--az-bg);
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; user-select:none;
}
img,svg{display:block}
button{font-family:inherit}

/* ---- shell ---- */
.app{min-height:100dvh;display:flex;flex-direction:column;max-width:var(--maxw);margin:0 auto;width:100%}
.app__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.app__head img.logo{height:40px;width:auto}
.app__title{font-size:1.05rem;font-weight:600;color:var(--az-blue)}
.app__body{flex:1;padding:var(--sp-3) var(--sp-4) calc(var(--ch,48px) + 44px);display:flex;flex-direction:column}
/* #screen sopra lo SHELL (sfondo/leone/loghi); il carosello fisso sta ancora più in alto (z3) */
#screen{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column}
/* Form e recap vogliono lo sfondo CHIARO (leggibilità): lo shell resta visibile solo su home/menu */
#screen:has(form.flow),#screen:has(.recap){background:var(--az-bg)}

h1,h2{color:var(--az-blue);margin:0 0 var(--sp-3);font-weight:700;line-height:1.15}
h1{font-size:1.9rem;text-align:center}
h2{font-size:1.5rem}
.lead{color:var(--az-ink-soft);text-align:center;margin:0 0 var(--sp-4)}

/* ---- bottoni ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap);padding:0 var(--sp-5);border:none;border-radius:var(--r-pill);
  font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .06s ease,filter .15s ease}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--az-blue-600);color:var(--az-on-brand);box-shadow:var(--shadow-sm)}
.btn--primary:active{filter:brightness(.95)}
.btn--ghost{background:var(--az-blue-050);color:var(--az-blue);}
.btn--danger{background:transparent;color:var(--az-err);border:2px solid var(--az-err)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---- SHELL persistente: sfondo + avatar/leone + loghi + carosello (dietro #screen) ---- */
.stage{position:fixed;inset:0;z-index:0;background:var(--home-bg,var(--az-blue));overflow:hidden}
.stage__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:center;background-repeat:no-repeat}
.stage__lion{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 42%}
/* Avatar video (YouTube): centrato dove sta il leone, senza bordi né interazioni (il tap
   passa al pulsante invisibile della home). Dimensioni in % dal pannello (inline). */
.stage__video{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
  border:0;display:block;background:transparent;pointer-events:none}
video.stage__video{object-fit:contain}  /* mp4: scala nel box senza distorsioni */
/* Toggle video ⇄ avatar statico: al primo tocco il video sparisce e appare l'immagine */
.stage__video.is-off,.stage__lion.is-off,.stage__scrim.is-off{display:none}
.stage__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,55,129,.15) 0%,rgba(0,55,129,0) 35%,rgba(0,55,129,.75) 100%)}
/* Loghi in background (z1): sotto pulsantiera (#screen z2) e carosello (z3). La griglia si ferma
   SOPRA la banda carosello (padding-bottom) e ogni cella è flex + overflow:hidden → niente
   sovrapposizioni né sforamenti, anche su mobile. */
.stage__logos{position:fixed;inset:0;z-index:1;display:grid;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4) calc(var(--ch,48px) + 28px);pointer-events:none}
.logocell{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;justify-content:center;
  overflow:hidden;min-width:0;min-height:0}
.logocell--c1{justify-content:flex-start}
.logocell--c3{justify-content:flex-end}
.logocell--r1{align-items:flex-start}
.logocell--r3{align-items:flex-end}
/* Altezza dal pannello (inline); la cella con overflow:hidden fa comunque da limite */
.stage__logo-main{height:48px;max-width:100%;max-height:100%;object-fit:contain}
.logos__item{height:var(--lg-h,56px);max-width:100%;max-height:min(13vh,100%);object-fit:contain}
/* Carosello sempre visibile: banda fissa in basso, sopra il contenuto (z3).
   safe-area per iOS (home indicator). */
.stage__carousel{position:fixed;left:0;right:0;bottom:0;z-index:3;width:100%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;min-height:calc(var(--ch,48px) + 20px);overflow:hidden;white-space:nowrap;
  padding-bottom:env(safe-area-inset-bottom,0px);pointer-events:none}
.stage__track{display:inline-flex;align-items:center;width:200vw;
  animation:marquee var(--carousel-dur,22s) linear infinite}
/* Ogni gruppo è largo ESATTAMENTE un viewport (gli item si restringono per starci) e i due
   gruppi sono identici → -50% = un gruppo esatto, loop senza vuoti. Il layer animato resta
   piccolo (200vw × banda): Safari/iOS non lo scarta (strisce enormi in transform = banner
   che "spariscono" per superamento del limite texture del compositor). */
.stage__trackgroup{display:flex;align-items:center;justify-content:space-around;
  gap:var(--sp-4);padding:0 var(--sp-4);width:100vw;flex:none;overflow:hidden}
.stage__trackgroup img,.stage__trackgroup span{height:var(--ch,48px);width:auto;opacity:.85;
  min-width:0;object-fit:contain;font-weight:600;color:var(--az-ink-soft)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Carosello a gruppi: un gruppo centrato alla volta (transizione opacity via Alpine) */
.stage__carousel--groups{justify-content:center}
.cargroup{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:var(--sp-4);padding:0 var(--sp-3);overflow:hidden}
.cargroup__item{display:inline-flex;align-items:center;min-width:0}
.cargroup__item img{height:var(--ch,48px);max-width:40vw;object-fit:contain;opacity:.9}
.cargroup__item span{font-weight:600;color:var(--az-ink-soft);white-space:nowrap}

/* ---- HOME (solo CTA + tap; sfondo/leone/carosello sono nello shell) ---- */
.home{position:relative;flex:1;display:flex;flex-direction:column;min-height:100%}
.home__cta{position:relative;z-index:2;margin-top:auto;text-align:center;color:#fff;
  padding:0 var(--sp-5) calc(var(--ch,48px) + 44px)}
.home__cta h1{color:#fff;font-size:2.2rem}
.home__cta p{font-size:1.2rem;opacity:.9;margin:var(--sp-2) 0 0}
.home__pulse{display:inline-block;margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-6);
  border:2px solid rgba(255,255,255,.7);border-radius:var(--r-pill);font-weight:600;
  animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.home__tap{position:absolute;inset:0;z-index:3;background:transparent;border:none;cursor:pointer}
@media (prefers-reduced-motion:reduce){.home__pulse,.stage__track{animation:none}}

/* ---- MENU servizi (pannello trasparente sopra lo shell) ---- */
.menu .app__head,.menu .app__body{position:relative;z-index:1}
.menu .app__body{justify-content:center}  /* niente titolo "Servizi": bottoni centrati/alzati */
.menu__panel{background:color-mix(in srgb,var(--panel-bg,#ffffff) calc(var(--panel-opacity,0.12)*100%),transparent);
  border-radius:var(--r);padding:var(--sp-4)}

/* minmax(0,1fr): le colonne non possono MAI superare metà griglia (etichette lunghe incluse) */
.menu__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.svc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);
  min-width:0;min-height:clamp(110px,22vw,160px);padding:clamp(10px,3vw,24px);
  border:none;border-radius:var(--r);cursor:pointer;
  background:var(--btn-bg,var(--az-blue-600));color:var(--btn-text,#fff);
  box-shadow:var(--shadow-sm);transition:transform .06s ease}
.svc:active{transform:scale(.97)}
.svc--alt{background:var(--btn-bg-alt,var(--az-blue))}
/* Icone: gli SVG built-in sono inlinati con currentColor (ereditano il colore-testo del pulsante,
   quindi sempre visibili); le icone caricate sono <img> e mantengono i loro colori.
   Dimensioni fluide: su schermi stretti icone e testo si rimpiccioliscono senza sforare. */
.svc__icon{width:clamp(36px,9vw,64px);height:clamp(36px,9vw,64px);object-fit:contain}
svg.svc__icon{color:var(--btn-text,#fff)}
.svc span{font-size:clamp(.9rem,2.6vw,1.1rem);font-weight:600;text-align:center;line-height:1.2;
  overflow-wrap:anywhere}
/* Sotto i 400px non c'è spazio per due colonne ben proporzionate → colonna singola */
@media (max-width:400px){
  .menu__grid{grid-template-columns:1fr}
  .svc{flex-direction:row;justify-content:flex-start;gap:var(--sp-3);min-height:88px;text-align:left}
  .svc__icon{width:44px;height:44px;flex:none}
  .svc span{text-align:left;font-size:1rem}
}
.svc[disabled]{background:#e7ebf3;color:var(--az-ink-soft);box-shadow:none}
.menu__more{display:block;width:fit-content;margin:var(--sp-4) auto 0}
.flow__subtitle{text-align:center;color:var(--az-ink-soft);margin:-6px 0 var(--sp-4);font-size:1.05rem}

/* ---- FLOW (progress + form) ---- */
.steps{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin:0 0 var(--sp-4)}
.steps__dot{width:34px;height:34px;border-radius:var(--r-pill);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.95rem;background:var(--az-line);color:var(--az-ink-soft)}
.steps__dot[data-on="1"]{background:var(--az-blue-600);color:#fff}
.steps__bar{flex:0 1 32px;height:3px;background:var(--az-line);border-radius:2px}
.steps__bar[data-on="1"]{background:var(--az-blue-600)}

form.flow{display:flex;flex-direction:column;gap:var(--sp-4)}
fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-3)}
legend{font-size:1.2rem;font-weight:600;color:var(--az-blue);padding:0;margin-bottom:var(--sp-2)}
.field{display:flex;flex-direction:column;gap:var(--sp-1)}
.field>span{font-weight:500;color:var(--az-ink)}
.field input,.field select,.field textarea{
  padding:0 var(--sp-3);min-height:var(--tap);border:2px solid var(--az-line);border-radius:var(--r-sm);
  background:var(--az-surface);color:var(--az-ink);font-size:1.05rem;font-family:inherit;width:100%}
.field textarea{padding-top:var(--sp-3);min-height:120px;resize:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--az-blue-600)}
.field.check{flex-direction:row;align-items:center;gap:var(--sp-3)}
.consent{margin:var(--sp-3) 0}
.consent__panel{margin-top:var(--sp-2);max-height:40vh;overflow:auto;padding:var(--sp-3);
  border:1px solid var(--az-line);border-radius:var(--r-sm);background:var(--az-surface);font-size:.95rem}
.privacy{padding:var(--sp-4)}
.privacy h3{color:var(--az-blue);margin-bottom:var(--sp-2)}
.privacy__body{line-height:1.5}
.field.check input{width:28px;height:28px;min-height:0;accent-color:var(--az-blue-600)}
.field .err{color:var(--az-err);font-size:.9rem;font-style:normal}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:var(--az-err)}

/* Subito sotto l'ultimo campo (non a fondo pagina): con la tastiera virtuale resta visibile */
.nav{display:flex;gap:var(--sp-3);align-items:center}
.nav .spacer{flex:1}
.flow__cancel{align-self:center;margin-top:var(--sp-3);background:none;border:none;
  color:var(--az-ink-soft);font-size:1rem;cursor:pointer;text-decoration:underline}

/* ---- RECAP ---- */
.recap dl{background:var(--az-surface);border:1px solid var(--az-line);border-radius:var(--r);
  padding:var(--sp-4);box-shadow:var(--shadow-sm)}
.recap dt{color:var(--az-ink-soft);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.recap dd{margin:0 0 var(--sp-3);font-size:1.1rem;font-weight:500}
.recap dd:last-child{margin-bottom:0}
.recap__ok{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;
  margin:var(--sp-5) 0;color:var(--az-ok)}
.recap__ok .badge{width:72px;height:72px;border-radius:var(--r-pill);background:var(--az-ok);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:2.2rem}

/* ---- messaggi / overlay sessione ---- */
.msg{text-align:center;padding:var(--sp-6) var(--sp-4);color:var(--az-ink-soft)}
.overlay{position:fixed;inset:0;z-index:50;background:rgba(7,28,60,.6);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}
.overlay__card{background:var(--az-surface);border-radius:var(--r-lg);padding:var(--sp-5);
  max-width:420px;width:100%;text-align:center;box-shadow:var(--shadow)}
.overlay__card .row{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.overlay__card .row .btn{flex:1}

/* ---- back office Metis ---- */
.card{background:var(--az-surface);border:1px solid var(--az-line);border-radius:var(--r);
  padding:var(--sp-4);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-3);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.card>h3{width:100%;margin:0 0 var(--sp-2);color:var(--az-blue)}
.card .card{box-shadow:none;background:var(--az-bg)}
.alert{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);margin-bottom:var(--sp-3)}
.alert--error{background:#fdecee;color:var(--az-err);border:1px solid #f5c2c7}

/* ---- indicatore "sta parlando" (totem) ---- */
.speak{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:18px;
  padding:22px 26px 28px;color:#fff;
  background:linear-gradient(180deg,rgba(0,55,129,0),rgba(0,55,129,.96) 42%)}
.speak.is-on{display:flex}
.speak__bars{display:flex;align-items:center;gap:4px;height:44px;flex:0 0 auto}
.speak__bars i{display:block;width:5px;height:44px;background:#fff;border-radius:3px;
  transform:scaleY(.2);animation:eq 900ms ease-in-out infinite}
.speak__bars i:nth-child(1){animation-duration:780ms;animation-delay:-200ms}
.speak__bars i:nth-child(2){animation-duration:1180ms;animation-delay:-90ms}
.speak__bars i:nth-child(3){animation-duration:640ms;animation-delay:-300ms}
.speak__bars i:nth-child(4){animation-duration:1020ms;animation-delay:-50ms}
.speak__bars i:nth-child(5){animation-duration:860ms;animation-delay:-260ms}
.speak__bars i:nth-child(6){animation-duration:1240ms;animation-delay:-140ms}
.speak__bars i:nth-child(7){animation-duration:700ms;animation-delay:-330ms}
.speak__bars i:nth-child(8){animation-duration:980ms;animation-delay:-80ms}
.speak__bars i:nth-child(9){animation-duration:820ms;animation-delay:-220ms}
.speak__text{font-size:1.35rem;font-weight:600;line-height:1.3}
@keyframes eq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.speak__bars i{animation:none;transform:scaleY(.6)}}