/* 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{
  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) var(--sp-6);display:flex;flex-direction:column}
#screen{min-height:100dvh;display:flex;flex-direction:column}

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}

/* ---- HOME (leone + carosello + tap-to-start) ---- */
.home{position:fixed;inset:0;max-width:none;background:var(--az-blue);overflow:hidden;
  display:flex;flex-direction:column}
.home__lion{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 42%;z-index:0}
.home__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,55,129,.15) 0%,rgba(0,55,129,0) 35%,rgba(0,55,129,.75) 100%)}
.home__brand{position:relative;z-index:2;padding:var(--sp-5) var(--sp-5) 0}
.home__brand img{height:48px}
.home__cta{position:relative;z-index:2;margin-top:auto;text-align:center;color:#fff;
  padding:0 var(--sp-5) var(--sp-6)}
.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__carousel{position:relative;z-index:2;background:rgba(255,255,255,.92);
  padding:var(--sp-2) 0;overflow:hidden;white-space:nowrap}
.home__track{display:inline-flex;align-items:center;gap:var(--sp-6);padding:0 var(--sp-5);
  animation:marquee 22s linear infinite}
.home__track img,.home__track span{height:34px;opacity:.8;font-weight:600;color:var(--az-ink-soft)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.home__tap{position:absolute;inset:0;z-index:3;background:transparent;border:none;cursor:pointer}
@media (prefers-reduced-motion:reduce){.home__pulse,.home__track{animation:none}}

/* ---- MENU servizi ---- */
.menu__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.svc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:160px;padding:var(--sp-4);border:none;border-radius:var(--r);cursor:pointer;
  background:var(--az-blue-600);color:#fff;box-shadow:var(--shadow-sm);transition:transform .06s ease}
.svc:active{transform:scale(.97)}
.svc--alt{background:var(--az-blue)}
.svc__icon{width:64px;height:64px;object-fit:contain}
.svc span{font-size:1.1rem;font-weight:600;text-align:center;line-height:1.2}
.svc[disabled]{background:#e7ebf3;color:var(--az-ink-soft);box-shadow:none}
.menu__more{margin:var(--sp-4) auto 0}

/* ---- 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);flex:1}
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)}
.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)}

.nav{display:flex;gap:var(--sp-3);align-items:center;margin-top:auto}
.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)}}