/* ==========================================================================
   LISTA SÌ — prova "homepage + sezioni a tutto schermo" (usato da index.html)
   Si aggiunge a style.css: 0 Barre a colori invertiti · 1 Pannello · 2 Contenuti nel pannello
   ========================================================================== */

/* 0 ─────────────────────  BARRE A COLORI INVERTITI  ───────────────────── */
/* La barra di navigazione è blu sopra le parti bianche della pagina e bianca
   sopra quelle blu. La classe .su-blu la mette pannello.js, guardando cosa c'è
   sotto la barra mentre scorri (homepage) o quale sezione è aperta (pannello). */
.header{
  background:rgba(20,84,174,.96);
  transition:background-color .5s ease, border-color .5s ease, box-shadow .25s ease;
}
.header.is-scrolled{ border-bottom-color:rgba(255,255,255,.14); box-shadow:0 4px 20px rgba(16,23,42,.12); }
.header .brand img{ filter:brightness(0) invert(1); transition:filter .5s ease; }
.header .hamburger span{ background:#fff; transition:transform .3s ease, opacity .2s ease, background-color .5s ease; }

.header.su-blu{ background:rgba(255,255,255,.92); }
.header.su-blu.is-scrolled{ border-bottom-color:var(--riga); box-shadow:0 4px 20px rgba(16,23,42,.05); }
.header.su-blu .brand img{ filter:none; }
.header.su-blu .hamburger span{ background:var(--blu); }

@media (min-width:900px){
  .header .nav a{ color:#fff; transition:color .5s ease, background-color .5s ease; }
  .header .nav a:hover{ background:rgba(255,255,255,.14); }
  .header .nav__cta{ background:#fff; color:var(--blu) !important; }
  .header .nav__cta:hover{ background:var(--blu-chiaro) !important; }

  .header.su-blu .nav a{ color:var(--nero); }
  .header.su-blu .nav a:hover{ background:var(--blu-chiaro); }
  .header.su-blu .nav__cta{ background:var(--blu); color:#fff !important; }
  .header.su-blu .nav__cta:hover{ background:var(--blu-scuro) !important; }
}

/* ─────────────────────  FONDO PAGINA: CHI SIAMO + FOOTER  ───────────────── */
.capisaldi{
  margin:28px 0 0; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#A9C8F2;
}
.capisaldi + .check-list{ margin-top:14px; }

/* Telefono: "Chi siamo" + footer devono stare esattamente nello schermo sotto la barra,
   così scorrendo fino in fondo il blu parte proprio dalla barra (50/50, come su computer).
   Testi e spazi si adattano all'altezza del telefono (svh = schermo con le barre del browser visibili). */
@media (max-width:899px){
  #chi-siamo{ padding:3.2vh 0; padding:3.2svh 0; }
  #chi-siamo .eyebrow{ font-size:clamp(.62rem, 1.6svh, .75rem); margin-bottom:.4em; }
  #chi-siamo .section__title{ font-size:clamp(1.35rem, 4.4svh, 2rem); margin-bottom:.35em; }
  #chi-siamo .prose p{ font-size:clamp(.8rem, 2.25svh, 1.02rem); line-height:1.5; margin:0; }
  #chi-siamo .capisaldi{ margin-top:clamp(12px, 2.6svh, 28px); font-size:clamp(.6rem, 1.5svh, .75rem); }
  #chi-siamo .check-list{ margin:clamp(6px, 1.4svh, 14px) 0 clamp(14px, 3svh, 28px); gap:clamp(6px, 1.3svh, 12px); }
  #chi-siamo .check-list li{ font-size:clamp(.8rem, 2.2svh, 1rem); line-height:1.45; padding-left:30px; }
  #chi-siamo .check-list li::before{ width:20px; height:20px; }
  #chi-siamo .btn{ padding:clamp(.6rem, 1.6svh, .95rem) 1.4rem; font-size:clamp(.85rem, 2.1svh, 1rem); }
  #chi-siamo .center{ margin:0; }

}
/* Footer basso, su una riga. "Chi siamo" + footer riempiono esattamente lo
   schermo sotto la barra: scorrendo fino in fondo, il bianco della prima
   schermata finisce proprio sotto la barra e non si va oltre. */
:root{ --barra-h:68px; --footer-h:64px; }
@media (min-width:900px){ :root{ --barra-h:80px; --footer-h:72px; } }
/* le ancore (es. "scorri") si fermano esattamente sotto la barra */
html{ scroll-padding-top:var(--barra-h); }

#chi-siamo{
  min-height:calc(100vh - var(--barra-h) - var(--footer-h));
  min-height:calc(100svh - var(--barra-h) - var(--footer-h));
  /* Sul telefono, in fondo alla pagina Safari tiene le sue barre ridotte: lo schermo è alto 100lvh.
     lvh non cambia mentre scorri, quindi niente salti, e in fondo il blu parte esattamente dalla barra. */
  min-height:calc(100lvh - var(--barra-h) - var(--footer-h));
  display:flex; flex-direction:column; justify-content:center;
}
#chi-siamo > .container{ width:100%; }

.footer{ padding:0; }
.footer__inner{
  display:flex; align-items:center; gap:12px; text-align:left;
  height:var(--footer-h);
}
.footer__brand{ display:flex; align-items:center; gap:12px; }
.footer__brand img{ height:32px; margin:0; }
.footer__motto{ display:none; font-size:.95rem; }
.footer__social{ margin-left:auto; gap:8px; }
/* Instagram: icona + nome del profilo, in una pillola */
.footer .footer__social a{
  width:auto; height:40px; display:inline-flex; flex-wrap:nowrap; align-items:center; gap:8px;
  padding:0 14px 0 10px; border-radius:999px; white-space:nowrap;
}
.footer__social a:hover{ text-decoration:none; }
.footer__handle{ font-size:.9rem; font-weight:700; letter-spacing:-.01em; }
/* Email: sul telefono solo l'icona (non c'è spazio), da 1100px anche l'indirizzo */
.footer__mail{ display:none; }
.footer__social a:has(.footer__mail){ padding:0; width:40px; justify-content:center; }
@media (min-width:1100px){
  .footer__mail{ display:inline; }
  .footer__social a:has(.footer__mail){ width:auto; padding:0 14px 0 10px; }
}

/* Note legali nel footer: piccole, al centro della riga; sul telefono resta solo "Privacy" */
.footer__legal{ margin:0; font-size:.78rem; color:#8A93A6; white-space:nowrap; }
.footer__legal a{ color:#B9C2D4; text-decoration:underline; text-underline-offset:2px; }
.footer__legal a:hover{ color:#fff; }
.footer__ufficiale{ display:none; }
@media (min-width:1100px){ .footer__ufficiale{ display:inline; } .footer__legal{ margin-left:24px; } }

/* Campo anti-spam: fuori dallo schermo, mai visibile */
.campo-trappola{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Avviso privacy sotto il form */
.form__privacy{ margin:0; font-size:.8rem; line-height:1.5; color:var(--grigio); }
.form__privacy a{ text-decoration:underline; text-underline-offset:2px; }
.footer__cta{ font-size:.9rem; padding:.5rem 1.1rem; white-space:nowrap; }

@media (min-width:600px){ .footer__motto{ display:block; } }
@media (min-width:900px){
  #chi-siamo{ padding:40px 0; }
}

/* ─────────────────────────────  HOMEPAGE (HERO)  ────────────────────────── */
/* Testo a sinistra, polaroid dei candidati a destra. Sul telefono uno sotto l'altro. */
.hero{ text-align:left; padding:28px 0 72px; }
.hero__grid{ position:relative; z-index:1; display:grid; gap:28px; align-items:center; }

.hero__pill{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin:0 0 18px;
  padding:.45rem .85rem .45rem .7rem; border-radius:999px;
  background:var(--blu-chiaro); color:var(--blu-scuro); font-size:.78rem; font-weight:500;
}
.hero__pill strong{ font-weight:800; }
.hero__dot{
  width:9px; height:9px; border-radius:50%; background:var(--blu); flex:none;
  box-shadow:0 0 0 0 rgba(20,84,174,.5); animation:pulsa 2s ease-out infinite;
}
@keyframes pulsa{ 70%{ box-shadow:0 0 0 9px rgba(20,84,174,0); } 100%{ box-shadow:0 0 0 0 rgba(20,84,174,0); } }
.hero__mancano{ color:var(--blu); font-weight:700; }
.hero__mancano:not(:empty)::before{ content:"·"; margin-right:8px; color:var(--blu-bordo); }

.hero .hero__motto{ font-size:clamp(2.6rem, 11vw, 5.6rem); line-height:.98; letter-spacing:-.035em; margin:0 0 20px; }
.hero .hero__sub{ font-size:1.12rem; max-width:34ch; margin:0 0 26px; }

/* "Conosci gli 8 candidati": facce sovrapposte + freccia, unico invito all'azione */
.hero__squadra{
  display:inline-flex; align-items:center; gap:14px; max-width:100%;
  padding:10px 16px 10px 10px; border-radius:999px; background:#fff; color:var(--nero);
  border:1px solid var(--riga); box-shadow:var(--ombra);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hero__squadra:hover{ text-decoration:none; transform:translateY(-2px); box-shadow:var(--ombra-f); border-color:var(--blu-bordo); }
.hero__facce{ display:flex; flex:none; }
.hero__facce img{
  width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid #fff;
  background:var(--blu-chiaro); margin-left:-12px;
}
.hero__facce img:first-child{ margin-left:0; }
.hero__facce img:nth-child(n+6){ display:none; }          /* sul telefono ne bastano 5 */
.hero__squadra-testo{ display:grid; line-height:1.25; min-width:0; }
.hero__squadra-testo strong{ font-size:1rem; }
.hero__squadra-testo span{ font-size:.82rem; color:var(--grigio); display:none; }
.hero__freccia{
  flex:none; width:22px; height:22px; fill:none; stroke:var(--blu); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease;
}
.hero__squadra:hover .hero__freccia{ transform:translateX(4px); }

/* Polaroid */
.hero__foto{ position:relative; height:330px; width:86%; max-width:340px; margin:14px auto 0; }
.hero__polaroid{
  position:absolute; top:0; width:54%; padding:8px 8px 0; background:#fff; border-radius:6px;
  box-shadow:0 18px 40px rgba(16,23,42,.18), 0 2px 6px rgba(16,23,42,.08);
  color:var(--nero); text-align:center;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.hero__polaroid img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%; border-radius:3px; }
.hero__polaroid span{ display:block; padding:9px 4px 11px; font-size:.82rem; font-weight:700; letter-spacing:-.01em; }
.hero__polaroid:hover{ text-decoration:none; z-index:3; box-shadow:0 26px 60px rgba(16,23,42,.25); }
.hero__polaroid--sx{ left:-6%; top:44px; transform:rotate(-11deg); }
.hero__polaroid--dx{ right:-6%; top:34px; transform:rotate(10deg); }
.hero__polaroid--centro{ left:23%; z-index:2; transform:rotate(-1.5deg); }
.hero__polaroid--sx:hover{ transform:rotate(-7deg) translateY(-8px); }
.hero__polaroid--dx:hover{ transform:rotate(6deg) translateY(-8px); }
.hero__polaroid--centro:hover{ transform:rotate(0) translateY(-8px); }
.hero__adesivo{
  position:absolute; z-index:4; left:-4%; top:-10px; width:78px; height:78px;
  display:grid; place-content:center; border-radius:50%; background:var(--blu);
  border:4px solid #fff; box-shadow:0 10px 24px rgba(20,84,174,.35); transform:rotate(-12deg);
  pointer-events:none;
}
.hero__adesivo img{ width:50px; height:auto; filter:brightness(0) invert(1); }

@media (min-width:600px){
  .hero__pill{ font-size:.85rem; }
  .hero__squadra-testo span{ display:block; }
  .hero__facce img:nth-child(n+6){ display:block; }
  .hero__foto{ height:400px; max-width:420px; }
}
@media (min-width:900px){
  .hero{ padding:40px 0 96px; }
  .hero__grid{ grid-template-columns:1.15fr .85fr; gap:56px; }
  .hero__foto{ height:470px; max-width:440px; margin:0 0 0 auto; }
  .hero .hero__sub{ font-size:1.3rem; }
  .hero__adesivo{ width:96px; height:96px; }
  .hero__adesivo img{ width:62px; }
}

/* ─────────────────────  HOMEPAGE "MANIFESTO" (index.html)  ────────────────── */
/* Solo introduzione e bellezza: il motto enorme e l'aquila. Le funzioni stanno nel menu.
   (La versione con polaroid e date è in index-hero-polaroid.html.) */
.hero--manifesto{ text-align:left; justify-content:center; align-items:stretch; padding:40px 0 96px; }
.hero--manifesto .hero__inner{ position:relative; z-index:1; width:100%; }

.hero__occhiello{
  margin:0 0 18px; font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blu);
}
.hero--manifesto .hero__motto{
  font-size:clamp(3.1rem, 15vw, 7.8rem); line-height:.92; letter-spacing:-.045em; font-weight:800;
  margin:0 0 26px;
}
.hero__riga{ display:block; }
.hero--manifesto .hero__sub{ font-size:clamp(1.1rem, 2.2vw, 1.4rem); max-width:30ch; margin:0; color:var(--grigio); }

/* Aquila: grande, tagliata dal bordo destro, con un cerchio azzurro dietro */
.hero__aquila{
  position:absolute; z-index:0; pointer-events:none;
  right:-18%; top:6%; width:min(78vw, 820px); aspect-ratio:1;
  display:grid; place-items:center;
}
.hero__aquila::before{
  content:""; position:absolute; inset:8%; border-radius:50%; background:var(--blu-chiaro);
}
.hero__aquila img{
  position:relative; width:78%; height:auto; opacity:.95;
  transform:rotate(-6deg); animation:aquila-entra 1.2s .2s cubic-bezier(.22,1,.36,1) both, aquila-vola 7s 1.4s ease-in-out infinite;
}
@keyframes aquila-entra{ from{ opacity:0; transform:translate(60px, 30px) rotate(-14deg) scale(.92); } }
@keyframes aquila-vola{ 50%{ transform:translateY(-12px) rotate(-4deg); } }

/* Telefono: l'aquila sta in alto a destra, dietro al testo, più leggera */
@media (max-width:899px){
  .hero--manifesto{ justify-content:flex-end; }
  .hero__aquila{ right:-24%; top:-4%; width:min(96vw, 38svh); }
  .hero--manifesto{ padding-bottom:80px; }
  .hero__occhiello{ letter-spacing:.1em; font-size:.72rem; }
  .hero__aquila img{ opacity:.9; }
  .hero__aquila::before{ opacity:.7; }
}
@media (min-width:900px){
  /* testo e aquila non si toccano mai: il titolo cresce con lo schermo, l'aquila resta a destra */
  .hero__aquila{ right:-12%; top:50%; width:min(60vw, 820px); margin-top:calc(min(60vw, 820px) / -2); }
  .hero--manifesto .hero__motto{ max-width:9ch; font-size:min(7.8rem, 7vw); }
}

/* 1 ──────────────────────────────  PANNELLO  ───────────────────────────── */
body.panel-open{ overflow:hidden; }

.panel{ position:fixed; inset:0; z-index:300; display:flex; }
.panel[hidden], .panel__page[hidden]{ display:none !important; }   /* vince anche sulle regole con #id */

.panel__sheet{
  position:relative; display:flex; flex-direction:column;
  width:100%; height:100%; background:#fff;
  opacity:0; transform:translateY(24px);
  transition:opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
  outline:none;
}
.panel.is-open .panel__sheet{ opacity:1; transform:none; }

.panel__top{
  flex:none; display:flex; align-items:center; gap:8px;
  padding:10px 10px 10px 16px; border-bottom:1px solid transparent; background:var(--blu);
  padding-top:calc(10px + env(safe-area-inset-top, 0px));
  transition:background-color .5s ease, border-color .5s ease;
}
/* Logo: riporta alla homepage (chiude). Su telefono lascia spazio alle schede */
.panel__brand{
  display:none; flex:none; align-items:center; gap:8px;
  background:none; border:0; padding:4px; cursor:pointer;
}
.panel__brand img{ filter:brightness(0) invert(1); transition:filter .5s ease; }
.panel__brand img:first-child{ height:32px; width:auto; }
.panel__brand img:last-child{ height:16px; width:auto; }
.panel__tabs{
  flex:1; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent);
          mask-image:linear-gradient(90deg, #000 85%, transparent);
}
.panel__tabs::-webkit-scrollbar{ display:none; }
.panel__tab{
  flex:none; padding:.55rem 1rem; border-radius:999px;
  font-weight:700; font-size:.9rem; color:rgba(255,255,255,.82); white-space:nowrap;
  transition:color .5s ease, background-color .5s ease;
}
.panel__tab:hover{ text-decoration:none; color:#fff; background:rgba(255,255,255,.14); }
.panel__tab[aria-current="page"]{ background:#fff; color:var(--blu); }

.panel__close{
  flex:none; width:44px; height:44px; display:grid; place-content:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; cursor:pointer;
  transition:color .5s ease, background-color .5s ease;
}
.panel__close:hover{ background:rgba(255,255,255,.26); }

/* Sezione blu aperta (Come si vota): barra bianca */
.panel.su-blu .panel__top{ background:#fff; border-bottom-color:var(--riga); }
.panel.su-blu .panel__brand img{ filter:none; }
.panel.su-blu .panel__tab{ color:var(--grigio); }
.panel.su-blu .panel__tab:hover{ color:var(--blu); background:var(--blu-chiaro); }
.panel.su-blu .panel__tab[aria-current="page"]{ background:var(--blu); color:#fff; }
.panel.su-blu .panel__close{ background:var(--blu-chiaro); color:var(--blu); }
.panel.su-blu .panel__close:hover{ background:var(--blu-bordo); }
.panel__close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }

.panel__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

@media (min-width:600px){
  .panel__tabs{ -webkit-mask-image:none; mask-image:none; }
}
@media (min-width:900px){
  .panel__top{ padding:12px max(20px, calc((100vw - var(--max)) / 2 + 20px)); }
  .panel__brand{ display:flex; }
  .panel__tabs{ justify-content:center; }
}

/* Frecce ai lati per passare da una sezione all'altra (computer).
   Blu sulle sezioni chiare, bianche trasparenti sulle sezioni blu. */
.panel__freccia{
  position:absolute; top:50%; z-index:2; display:none;
  width:56px; height:56px; place-content:center; border-radius:50%; cursor:pointer;
  border:1px solid transparent; background:var(--blu); color:#fff;
  box-shadow:0 8px 24px rgba(20,84,174,.28);
  transform:translateY(-50%);
  transition:background-color .5s ease, color .5s ease, border-color .5s ease, transform .2s ease, box-shadow .2s ease;
}
.panel__freccia--prev{ left:max(20px, calc((100vw - var(--max)) / 4 - 28px)); }
.panel__freccia--next{ right:max(20px, calc((100vw - var(--max)) / 4 - 28px)); }
.panel__freccia:hover{ background:var(--blu-scuro); }
.panel__freccia--prev:hover{ transform:translate(-3px, -50%); }
.panel__freccia--next:hover{ transform:translate(3px, -50%); }
.panel__freccia svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.panel.su-blu .panel__freccia{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); color:#fff; box-shadow:none;
}
.panel.su-blu .panel__freccia:hover{ background:rgba(255,255,255,.26); }
.panel__freccia[hidden]{ display:none !important; }

/* Solo dove c'è spazio ai lati del contenuto: sul telefono si useranno altri comandi */
@media (min-width:1260px){
  .panel__freccia{ display:grid; }
}

/* 2 ───────────────────────  CONTENUTI NEL PANNELLO  ────────────────────── */
/* A tutto schermo le sezioni usano il layout normale; la sezione riempie lo schermo */
/* sezione + footer riempiono esattamente lo schermo, come in homepage */
.panel .section{ min-height:calc(100% - var(--footer-h)); padding-top:40px; }
.panel .ballot{ top:24px; }   /* sticky dentro allo schermo che scorre */

@media (min-width:900px){
  .panel .section{ padding-top:72px; }
}

/* Programma su sfondo blu: le card restano bianche col testo scuro */
.section--blu .card{ color:var(--nero); border-color:transparent; }
.section--blu .card:hover{ border-color:var(--blu-bordo); }

/* Proponi un'idea: due paragrafi d'introduzione vicini */
#idee .section__lead{ margin-bottom:1rem; }
#idee .section__lead + .section__lead{ margin-bottom:2rem; }
#idee .section__lead strong{ color:var(--nero); }

/* Candidati: tutti uguali, la capolista ha solo bordo blu e etichetta */
.candidate{ position:relative; }
.candidate:hover{ border-color:var(--blu-bordo); }
.candidate:has(.badge){ border:2px solid var(--blu); }
.candidate .badge{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  margin:0; font-size:.62rem; white-space:nowrap;
}
.candidate__btn{
  font:inherit; color:inherit; letter-spacing:inherit; text-align:inherit;
  background:none; border:0; padding:0; cursor:pointer;
}
/* tutto il riquadro è cliccabile */
.candidate__btn::after{ content:""; position:absolute; inset:0; border-radius:var(--r); }
.candidate__btn:focus-visible{ outline:none; }
.candidate:has(.candidate__btn:focus-visible){ outline:3px solid var(--blu); outline-offset:3px; }

/* Scheda in grande del candidato: foto grande + presentazione.
   Telefono: foto sopra e testo sotto. Da 720px: foto a sinistra, testo a destra. */
.profile{
  border:0; padding:0; background:transparent; overflow:visible;
  width:min(880px, calc(100% - 24px)); max-height:calc(100% - 24px);
}
.profile::backdrop{
  background:rgba(16,23,42,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.profile[open]{ animation:profile-in .4s cubic-bezier(.22,1,.36,1); }
@keyframes profile-in{ from{ opacity:0; transform:translateY(18px) scale(.97); } }

.profile__card{
  position:relative; display:grid; grid-template-rows:auto 1fr;
  /* altezza fissa uguale per tutti i candidati: le frecce restano sempre in fondo, nello stesso punto */
  height:min(760px, calc(100vh - 24px)); height:min(760px, calc(100dvh - 24px)); overflow:hidden;
  background:#fff; border-radius:24px; box-shadow:0 30px 80px rgba(16,23,42,.35);
}
.profile__photo{
  position:relative; height:min(44vh, 380px); background:var(--blu-chiaro); overflow:hidden;
}
.profile__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }   /* telefono: il viso resta al centro della striscia */
.profile__photo .profile__faccia--retro{ object-position:50% 12%; }   /* telefono: testa e nome sulla maglia */

/* Fronte/retro: la foto ruota come una carta */
.profile__photo{ perspective:1400px; }
.profile__flip{
  position:absolute; inset:0; cursor:pointer;
  transform-style:preserve-3d; transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.profile__flip.is-retro{ transform:rotateY(180deg); }
.profile__faccia{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.profile__faccia--retro{ transform:rotateY(180deg); }
.profile__gira{
  position:absolute; left:14px; bottom:14px; z-index:2;
  width:44px; height:44px; display:grid; place-content:center; padding:0;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--blu); font:inherit; font-weight:700; font-size:.85rem;
  box-shadow:0 6px 18px rgba(16,23,42,.22); transition:transform .2s ease;
}
.profile__gira:hover{ transform:rotate(-30deg); }
.profile__gira[aria-pressed="true"] svg{ transform:scaleX(-1); }
.profile__gira svg{ width:20px; height:20px; transition:transform .3s ease; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.profile__gira[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){ .profile__flip{ transition:none; } }
/* senza foto: iniziali grandi su fondo blu */
.profile__initials{
  display:grid; place-content:center; width:100%; height:100%;
  background:var(--blu); color:#fff; font-size:4.5rem; font-weight:800; letter-spacing:.02em;
}
.profile__text{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:24px 24px 30px;
}
.profile__close{
  position:absolute; top:12px; right:12px; z-index:1;
  width:42px; height:42px; display:grid; place-content:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--blu); cursor:pointer;
  box-shadow:0 4px 14px rgba(16,23,42,.15);
}
.profile__close:hover{ background:#fff; }
.profile__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.profile .badge{ margin:0 0 4px; }
.profile .badge[hidden]{ display:none; }
.profile__name{ font-size:clamp(1.6rem, 5vw, 2.2rem); margin:0; }
.profile .candidate__class{ margin:0 0 .6rem; font-size:.95rem; }
.profile__bio{ color:var(--grigio); font-size:1.05rem; max-width:48ch; }
.profile__bio p:last-child{ margin:0; }
.profile__bio--vuota{ font-style:italic; }
/* Prima riga della presentazione: le tre qualità, in evidenza */
.profile__bio .bio__qualita{
  color:var(--blu); font-weight:800; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:.7rem;
}
.profile__bio p{ margin:0 0 .7rem; }
.profile__bio strong{ color:var(--nero); }
/* se la presentazione non ci sta, sfuma in fondo: si capisce che si può scorrere */
.profile__bio.is-lunga{
  -webkit-mask-image:linear-gradient(#000 calc(100% - 36px), transparent);
          mask-image:linear-gradient(#000 calc(100% - 36px), transparent);
  padding-bottom:24px;
}

/* Avanti / indietro tra i candidati */
.profile__nav{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:22px; }
/* se la presentazione è lunga scorre lei, le frecce restano ferme */
.profile__text{ min-height:0; }
.profile__text > .profile__bio{ margin-bottom:4px; min-height:0; overflow:auto; }
.profile__arrow{
  width:44px; height:44px; display:grid; place-content:center;
  border:0; border-radius:50%; background:var(--blu); color:#fff; cursor:pointer;
  transition:background .2s ease, opacity .2s ease;
}
.profile__arrow:hover{ background:var(--blu-scuro); }
.profile__arrow:disabled{ background:var(--blu-chiaro); color:var(--blu-bordo); cursor:default; }
.profile__arrow svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.profile__count{ min-width:4.5em; text-align:center; font-weight:700; font-size:.9rem; color:var(--grigio); font-variant-numeric:tabular-nums; }
.profile__card.is-cambio .profile__photo > *,
.profile__card.is-cambio .profile__text > :not(.profile__nav){ animation:profile-cambio .35s ease; }
@keyframes profile-cambio{ from{ opacity:0; } }

@media (min-width:720px){
  .profile__card{ grid-template-columns:minmax(280px, 5fr) 6fr; grid-template-rows:none; height:min(640px, calc(100vh - 24px)); }
  .profile__bio{ font-size:.98rem; line-height:1.6; }
  .profile__photo{ height:auto; min-height:100%; }
  .profile__photo img, .profile__initials{ position:absolute; inset:0; }
  .profile__photo img, .profile__photo .profile__faccia--retro{ object-position:50% 40%; }
  .profile__text{ padding:64px 48px 40px; }
}

/* Scheda elettorale: disegnata come quella vera (tabella a tre colonne) */
/* Scheda dritta. Prima era inclinata: per rimetterla com'era basta togliere questa riga
   (in style.css c'è transform:rotate(-1.5deg) su .ballot__paper). */
.ballot__paper.scheda{ transform:none; }
.scheda{ font-family:"Times New Roman", Times, Georgia, serif; color:#222; padding:16px 14px 14px; }
.scheda__titolo{
  margin:0 0 10px; text-align:center; font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.3;
}
.scheda__titolo span{ display:block; font-weight:400; font-size:.7rem; }
.scheda__tabella{ width:100%; border-collapse:collapse; font-size:.68rem; line-height:1.35; }
.scheda__tabella th, .scheda__tabella td{ border:1.5px solid #333; padding:5px 6px; vertical-align:middle; }
.scheda__tabella th{ font-size:.58rem; text-transform:uppercase; font-weight:700; text-align:center; }
.scheda__tabella th:first-child{ width:15%; }
.scheda__tabella th:nth-child(2){ width:24%; }
.scheda__n{ text-align:center; font-weight:700; font-size:.8rem; }
.scheda__nome{ text-align:center; font-weight:700; font-size:.9rem; color:var(--blu); }
.scheda__altra td{ color:#999; height:30px; }
.scheda__riga{ display:block; height:5px; border-radius:3px; background:#ddd; margin:2px auto; width:80%; }
.scheda__riga--corta{ width:55%; }
.scheda__candidati{ list-style:none; margin:0; padding:0; }
.scheda__candidati li{ display:flex; gap:8px; align-items:center; }
.scheda__num{ position:relative; display:inline-block; min-width:1.1em; text-align:center; font-weight:700; }
.scheda__segno{ position:relative; display:inline-block; padding:0 4px; }
/* la croce a penna, che si disegna quando la scheda entra in vista */
.scheda__x{
  position:absolute; left:50%; top:50%; width:1.7em; height:1.7em; transform:translate(-50%,-50%);
  fill:none; stroke:var(--blu); stroke-width:2; stroke-linecap:round; overflow:visible; opacity:.8;
  stroke-dasharray:23; stroke-dashoffset:23;
}
.scheda__segno .scheda__x{ width:2.2em; height:2.2em; }
.ballot.is-visible .scheda__x{ animation:draw-check .6s .3s ease forwards; }
.ballot.is-visible .scheda__num .scheda__x{ animation-delay:.9s; }
@media (min-width:600px){ .scheda__tabella{ font-size:.74rem; } }

/* Avviso: quando il voto non vale */
.vote-warning{
  margin-top:36px; padding:22px 22px 20px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
  border-left:5px solid #fff; border-radius:var(--r);
}
.vote-warning h3{ margin:0 0 .6rem; }
.vote-warning ul{ list-style:none; margin:0 0 .9rem; padding:0; display:grid; gap:8px; }
.vote-warning li{ position:relative; padding-left:32px; color:#E3EDFB; }
.vote-warning li::before{
  content:"✕"; position:absolute; left:0; top:1px;
  width:22px; height:22px; border-radius:50%; display:grid; place-content:center;
  background:#fff; color:#D92D20; font-weight:800; font-size:.72rem;
}
.vote-warning strong{ color:#fff; }
.vote-warning p{ margin:0; color:#D9E6FA; font-size:.95rem; }
@media (min-width:900px){ .vote-warning{ margin-top:48px; padding:26px 30px 24px; } }

/* Le sezioni a tutto schermo non scorrono su computer: ognuna sta in una schermata, footer compreso */

/* L'aquila del logo come icona di ogni punto del programma */
.card__icon--aquila img{ width:28px; height:auto; display:block; }
@media (min-width:900px){ #programma .card__icon--aquila img{ width:26px; } }

/* Programma: card compatte (icona accanto al titolo), 4 per riga su due righe */
.card--idea{
  display:block; color:#fff !important; background:transparent !important;
  border:2px dashed rgba(255,255,255,.55) !important; box-shadow:none;
}
.card--idea:hover{ text-decoration:none; border-style:solid !important; background:rgba(255,255,255,.08) !important; }
.card--idea p{ color:#D9E6FA !important; }
.card--idea .card__icon{ background:#fff; }
@media (min-width:900px){
  #programma{ padding:28px 0 24px; }   /* titolo alla stessa altezza delle altre sezioni */
  #programma .section__lead{ max-width:72ch; margin-bottom:1.4rem; }
  #programma .cards{ gap:14px; }
  #programma .card{
    display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; align-content:start;
    padding:18px 18px 20px;
  }
  #programma .card__icon{ margin:0; width:40px; height:40px; border-radius:11px; }
  #programma .card h3{ margin:0; font-size:1rem; line-height:1.25; }
  #programma .card p{ grid-column:1 / -1; margin-top:10px; font-size:.88rem; line-height:1.5; }
}

/* Proponi un'idea: introduzione a sinistra, form a destra */
@media (min-width:900px){
  #idee{ padding:28px 0 24px; }
  #idee > .container{
    max-width:var(--max); display:grid; grid-template-columns:1fr 1.1fr; column-gap:64px; align-items:start;
    grid-template-rows:auto auto auto 1fr;   /* il testo a sinistra resta compatto in alto */
  }
  #idee > .container > :not(form){ grid-column:1; }
  #idee .form{ grid-column:2; grid-row:1 / span 4; margin-top:8px; }
  #idee .field textarea{ min-height:110px; }
}

/* Candidati: più compatti su computer */
@media (min-width:900px){
  #candidati{ padding:28px 0 24px; }
  #candidati .section__lead{ margin-bottom:1.6rem; max-width:62ch; }
  #candidati .candidates{ gap:14px; }
  #candidati .candidate{ padding:22px 12px 16px; gap:8px; }
}

/* Come si vota in una schermata (computer): titolo e data in alto,
   sotto due colonne: passaggi + avviso a sinistra, scheda a destra */
@media (min-width:900px){
  #come-si-vota{ padding:28px 0 16px; }   /* titolo alla stessa altezza delle altre sezioni */
  #come-si-vota > .container{
    display:grid; grid-template-columns:1.25fr 1fr; column-gap:56px;
    grid-template-areas:
      "eye  data"
      "tit  data"
      "pas  sch"
      "avv  sch";
    grid-template-rows:auto auto auto 1fr;
    align-items:start;
  }
  #come-si-vota .eyebrow{ grid-area:eye; align-self:start; }
  #come-si-vota .section__title{ grid-area:tit; font-size:2.4rem; margin:0; }
  /* data e conto alla rovescia su una riga sola, accanto al titolo */
  #come-si-vota .vote-date{
    grid-area:data; align-self:end; margin:0; padding:14px 16px; min-width:0;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; text-align:left;
  }
  #come-si-vota .vote-date__day{ font-size:1.35rem; margin:.1rem 0 0; }
  #come-si-vota .vote-date__time{ margin:0; font-size:.9rem; }
  #come-si-vota .countdown{ flex:none; max-width:none; grid-template-columns:repeat(4, 48px); gap:5px; }
  #come-si-vota .countdown__unit{ padding:6px 2px; text-align:center; border-radius:10px; }
  #come-si-vota .countdown__unit span{ font-size:1.3rem; }
  #come-si-vota .countdown__unit small{ font-size:.55rem; }

  #come-si-vota .vote-layout{ display:contents; }
  #come-si-vota .steps{ grid-area:pas; margin:20px 0 0; }
  #come-si-vota .steps li{ padding-bottom:12px; }
  #come-si-vota .steps li:last-child{ padding-bottom:0; }
  #come-si-vota .steps h3{ margin-top:.35rem; }

  #come-si-vota .ballot{ grid-area:sch; position:static; margin-top:20px; }

  #come-si-vota .vote-warning{ grid-area:avv; margin-top:16px; padding:14px 22px; }
  #come-si-vota .vote-warning ul{ gap:6px; margin-bottom:.6rem; }
}

/* Schermi da computer bassi (portatili): tutto un po' più stretto per stare in una schermata.
   Sta dopo le altre regole apposta, così le sovrascrive. */
@media (min-width:900px) and (max-height:860px){
  .panel .section__title{ font-size:2.1rem; }
  #candidati .avatar{ width:56px; height:56px; }
  #candidati .candidate{ padding:18px 12px 12px; }
  #come-si-vota .section__title{ font-size:2.1rem; }
  #come-si-vota .steps li{ padding-bottom:8px; }
  #come-si-vota .steps h3{ font-size:1rem; margin-top:.3rem; }
  #come-si-vota .steps p{ font-size:.92rem; line-height:1.45; }
  #come-si-vota .vote-warning{ padding:12px 20px; margin-top:12px; }
  #come-si-vota .vote-warning li{ font-size:.92rem; }
  /* la frase riassuntiva ripete i passaggi: sui portatili bassi la togliamo per stare in una schermata */
  #come-si-vota .vote-warning p{ display:none; }
  #come-si-vota .vote-warning ul{ margin-bottom:0; }
  #come-si-vota .steps{ margin-top:8px; }
  #come-si-vota .ballot{ margin-top:8px; }
  #come-si-vota .ballot figcaption{ margin-top:10px; }
}

@media (prefers-reduced-motion: reduce){
  .panel__sheet{ opacity:1; transform:none; }
  .scheda__x{ stroke-dashoffset:0; }
}

/* Telefoni stretti: footer più compatto, così ci stanno email, Instagram e "Vota Lista Sì" */
@media (max-width:399px){
  .footer__inner{ gap:8px; }
  .footer__brand img{ height:26px; }
  .footer__social{ gap:6px; }
  .footer .footer__social a{ padding:0 10px 0 8px; gap:6px; }
  .footer__social a:has(.footer__mail){ width:36px; padding:0; }
  .footer__handle{ font-size:.82rem; }
  .footer__cta{ font-size:.8rem; padding:.5rem .8rem; }
}