/* deepee PetGo — stile condiviso · direzione Frutiger Aero (glossy, luminoso, aqua/cielo) */
:root {
  /* Brand */
  --navy: #0C447C;
  --green: #0F6E56;
  --green-glow: #17A67B;
  --sky: #85B7EB;
  --lightblue: #85B7EB;      /* alias retrocompatibile */
  --sky-soft: #BFE0FF;
  --aqua: #1FB6C9;
  --bg: #E9F3FD;             /* tinta soft per fasce sezione (era sparita) */
  /* Superfici */
  --bg-top: #EAF6FF;
  --bg-mid: #F3FBFF;
  --glass: rgba(255,255,255,0.62);
  --glass-strong: rgba(255,255,255,0.82);
  --text: #16233A;
  --muted: #5B6E88;
  --border: rgba(12,68,124,0.12);
  --danger: #C0392B;
  --shadow-soft: 0 10px 30px rgba(12,68,124,0.10);
  --shadow-card: 0 14px 34px rgba(12,68,124,0.13);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text); line-height: 1.55;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(133,183,235,0.45), transparent 60%),
    radial-gradient(1000px 520px at 100% 0%, rgba(31,182,201,0.28), transparent 55%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 40%, #ffffff 100%);
  background-attachment: fixed;
}
a { color: var(--green); }
img { max-width: 100%; display: block; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Ticker banner in alto */
.ticker-banner {
  background: linear-gradient(90deg, var(--navy), #16688f 55%, var(--aqua));
  color: #fff; overflow: hidden; white-space: nowrap;
  position: sticky; top: 0; z-index: 101; font-size: 12px; font-weight: 700;
  letter-spacing: .2px; box-shadow: 0 2px 10px rgba(12,68,124,.25);
}
/* 26/10 (R-2610-cc027-111 punto 5): giro continuo. Le voci sono scritte quattro volte (le copie 2-4
   aria-hidden) e il nastro scorre di meta' della sua lunghezza: alla ripartenza la terza copia prende il
   posto della prima senza vuoto, con lo stesso spazio fra le voci (40 px per lato). Meta' nastro sono due
   giri di voci (circa 3090 px) e copre schermi fino a quella larghezza (NO di qa-sito-94 con due copie:
   vuoto di 361 px a 1920 px). 68 s: stessa velocita' su un percorso doppio. */
.ticker-banner .ticker-contenuto { display: inline-block; animation: scorri-ticker 68s linear infinite; }
.ticker-banner .ticker-contenuto span { padding: 8px 40px; display: inline-block; }
/* Icone disegnate (SVG, mai emoji: su Windows la bandiera emoji si legge «IT»). */
.ticker-banner .ticker-icona { display: inline-block; vertical-align: -2px; margin-right: 7px; }
@keyframes scorri-ticker { 0% { transform: translateX(0);} 100% { transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce) { .ticker-banner .ticker-contenuto { animation: none; padding-left: 12px; } }

/* Header — vetro smerigliato */
header.sito-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.6); box-shadow: var(--shadow-soft);
  position: sticky; top: 30px; z-index: 100;
}
header.sito-header img.logo { height: 50px; } /* 23/10 (R-2210-cc024-22 punto 12): logo v7.4 a striscia, 4:1 invece di 6:1; a 50 px e' largo 200 */
header.sito-header nav a {
  margin-left: 24px; text-decoration: none; color: var(--navy); font-weight: 700; font-size: 14px;
}
header.sito-header nav a:hover { color: var(--aqua); }
.nav-toggle { display: none; }

/* Footer */
footer.sito-footer {
  background: linear-gradient(180deg, #0C447C 0%, #0b3a67 60%, #0a3352 100%);
  color: #eaf3ff; padding: 44px 20px; margin-top: 70px; font-size: 13px;
}
footer.sito-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
footer.sito-footer a { color: #bcd8f5; text-decoration: none; }
footer.sito-footer a:hover { text-decoration: underline; color: #fff; }
footer.sito-footer .colonna { min-width: 160px; }
footer.sito-footer h4 { font-size: 13px; margin: 0 0 10px; color: #fff; letter-spacing:.3px; }
footer.sito-footer p { margin: 4px 0; }
footer.sito-footer .copyright { width: 100%; text-align: center; margin-top: 30px; opacity: .75; font-size: 12px; }

/* Bottoni glossy */
.btn {
  position: relative; display: inline-block; padding: 14px 30px; border-radius: 999px;
  font-weight: 800; text-decoration: none; cursor: pointer; border: none; font-size: 15px;
  letter-spacing: .2px; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  overflow: hidden;
}
.btn::before { /* riflesso glossy in alto */
  content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events: none;
}
.btn:hover { transform: translateY(-1px); filter: saturate(108%); }
.btn:active { transform: translateY(0); }
.btn-primario {
  background: linear-gradient(180deg, var(--green-glow), var(--green));
  color: #fff !important; box-shadow: 0 10px 22px rgba(15,110,86,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-secondario {
  background: var(--glass-strong); color: var(--navy) !important;
  border: 1px solid rgba(12,68,124,.25); box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-secondario::before { inset: 0 0 55% 0; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.btn:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }

/* Hero luminoso */
.hero { position: relative; padding: 72px 20px 64px; text-align: center; overflow: hidden;
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(180deg, rgba(191,224,255,.55), rgba(255,255,255,0)); }
.hero::after { /* orbo di luce ambientale */
  content:""; position:absolute; width:340px; height:340px; right:-80px; top:-120px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(31,182,201,.35), rgba(31,182,201,0) 70%); pointer-events:none;
}
.hero h1 { font-size: 40px; line-height: 1.1; margin: 0 0 14px; color: var(--navy); letter-spacing: -.5px; }
.hero p.tagline { font-size: 18px; color: var(--muted); margin: 0 0 28px; }
/* 24/10 (R-2310-cc025-35 punto 1): il tracker ritagliato, senza riquadro, posato sullo sfondo della
   hero. L'ombra a terra e' un'ellisse sfumata sotto l'immagine (::after); una seconda ombra leggera
   segue la sagoma (drop-shadow). Stesse proporzioni su telefono e computer: cambia solo la larghezza. */
.hero-tracker { position: relative; z-index: 1; width: min(460px, 80vw); margin: 34px auto 0; padding-bottom: 22px; }
.hero-tracker img { position: relative; z-index: 1; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 6px 10px rgba(12,40,80,.12)); }
.hero-tracker::after { content: ''; position: absolute; z-index: 0; left: 12%; right: 10%; bottom: 8px; height: 13%;
  background: radial-gradient(closest-side, rgba(12,40,80,.34), rgba(12,40,80,.16) 55%, rgba(12,40,80,0));
  filter: blur(5px); border-radius: 50%; }
/* 26/10 (R-2610-cc026-102): entrata morbida al caricamento e galleggiamento lento, con l'ombra a terra
   che si stringe e schiarisce quando il tracker sale. Solo transform e opacita' dell'ombra, mai opacita'
   dell'immagine: il tracker e' visibile dal primo fotogramma, il caricamento (LCP) non cambia.
   Con "riduci movimento" niente animazione. */
/* 26/10 (R-2610-cc027-111 punto 1, Andrea: «dovrebbe osare un pochino di piu'»): entrata piu' ampia,
   galleggiamento di 18 px con una lieve oscillazione (1,5 gradi), sempre morbido. */
.hero-tracker { animation: hero-entra 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero-tracker img { animation: hero-galleggia 5s ease-in-out 1.1s infinite; }
.hero-tracker::after { animation: hero-ombra 5s ease-in-out 1.1s infinite; }
@keyframes hero-entra { from { transform: translateY(40px) scale(.92); } to { transform: none; } }
@keyframes hero-galleggia { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-9px) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(0); } 75% { transform: translateY(-9px) rotate(1.5deg); } }
@keyframes hero-ombra { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.8); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .hero-tracker, .hero-tracker img, .hero-tracker::after { animation: none; } }

/* Sezioni */
section { padding: 56px 20px; }
section h2 { font-size: 28px; color: var(--navy); text-align: center; margin: 0 0 34px; letter-spacing: -.3px; }

/* Griglia feature — 3+3 bilanciata e centrata (niente più auto-fit sbilanciato) */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 960px; margin: 0 auto; }
.feature-card {
  text-align: center; padding: 26px 22px; border-radius: var(--radius);
  background: var(--glass-strong); border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(12,68,124,.18); }
.feature-card h3 { font-size: 16px; margin: 4px 0 6px; color: var(--navy); }
.feature-card p { font-size: 13.5px; color: var(--muted); margin: 0; }

/* Badge icona glossy (contiene un SVG bianco) */
.feature-card .icona {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--sky), var(--aqua));
  box-shadow: 0 8px 18px rgba(31,182,201,.4), inset 0 2px 3px rgba(255,255,255,.6);
}
.feature-card .icona svg { width: 28px; height: 28px; stroke: #fff; fill: none; }
.feature-card .icona.verde { background: linear-gradient(180deg, var(--green-glow), var(--green)); box-shadow: 0 8px 18px rgba(15,110,86,.38), inset 0 2px 3px rgba(255,255,255,.5); }

/* Card vetro generica riutilizzabile */
.glass-card {
  background: var(--glass-strong); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Pagine contenuto (legali, chi siamo) */
.contenuto-pagina { max-width: 760px; margin: 40px auto; padding: 28px 26px; }
.contenuto-pagina h1 { color: var(--navy); }
.contenuto-pagina h2 { font-size: 20px; color: var(--navy); margin-top: 32px; }

/* Torna su */
.torna-su {
  position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; z-index: 90;
  background: linear-gradient(180deg, var(--sky), var(--aqua)); color:#fff;
  box-shadow: 0 8px 20px rgba(31,182,201,.45), inset 0 1px 0 rgba(255,255,255,.5); border: none; cursor: pointer;
}
.torna-su.visibile { display: flex; }
.torna-su svg { width: 22px; height: 22px; stroke: #fff; fill: none; }

@media (max-width: 860px) { .feature-grid { grid-template-columns: repeat(2, 1fr); max-width: 520px; } }
@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 6px; cursor: pointer; color: var(--navy); }
  header.sito-header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(255,255,255,.6); box-shadow: var(--shadow-soft); padding: 6px 0; }
  header.sito-header nav a { margin: 0; padding: 14px 20px; border-top: 1px solid var(--border); }
  .nav-toggle-cb:checked ~ nav { display: flex; }
  .hero h1 { font-size: 30px; }
  .feature-grid { grid-template-columns: 1fr; max-width: 340px; }
}

.feature-card .icona svg.solido { fill:#fff; stroke:none; width:30px; height:30px; }

/* FAQ accordion (home) */
.faq-acc { max-width: 720px; margin: 0 auto; }
.faq-acc details { background: var(--glass-strong); border: 1px solid rgba(255,255,255,.7); border-radius: 14px; box-shadow: var(--shadow-soft); margin-bottom: 10px; overflow: hidden; }
.faq-acc summary { cursor: pointer; padding: 16px 18px; font-weight: 700; color: var(--navy); font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary::after { content: "+"; font-size: 22px; color: var(--aqua); font-weight: 400; line-height: 1; }
.faq-acc details[open] summary::after { content: "\2212"; }
.faq-acc details > p { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* 01/09/2026 — Le ancore finivano SOTTO le due barre appiccicate in cima.
   Misurato su un telefono da 390x844 arrivando dal link vero di prodotto.html
   (/termini#care): il titolo "5-bis. deepee Care" si fermava a 0-62 mentre
   il ticker occupa 0-35, e document.elementFromPoint sul titolo restituiva il
   ticker. Con l'intestazione visibile la fascia coperta arriva a 102.
   Chi clicca "Termini deepee Care" dalla pagina di acquisto atterra quindi con
   il titolo della clausola mezzo nascosto, e non e' un dettaglio estetico: e'
   il punto in cui deve capire dov'e' finito.
   114 = 102 della fascia piu' 12 di respiro. Vale per qualunque ancora del
   sito, perche' le due barre ci sono su tutte le pagine. */
:target,
h1[id], h2[id], h3[id] { scroll-margin-top: 114px; }

/* 01/10 (W13): modulo newsletter nel footer (assets/newsletter.js). Il footer
   e' blu scuro: testo chiaro, campo bianco, errori in un rosso leggibile qui. */
footer.sito-footer #newsletter-footer { width: 100%; max-width: 1100px; margin: 0 auto 30px; }
footer.sito-footer .nl-footer { max-width: 460px; }
footer.sito-footer .nl-footer p { color: #eaf3ff; }
footer.sito-footer .nl-riga { display: flex; gap: 8px; margin-top: 10px; }
footer.sito-footer .nl-riga input { flex: 1; min-width: 0; padding: 11px; border: 0; border-radius: 10px; font-size: 14px; }
footer.sito-footer .nl-consenso { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 12px; line-height: 1.5; color: #cfe2f7; }
footer.sito-footer .nl-consenso input { margin-top: 2px; flex-shrink: 0; }
footer.sito-footer .nl-conferma { margin-top: 10px; padding: 12px 14px; border: 1px solid #8fd3bd; border-radius: 10px; color: #eaf3ff; line-height: 1.6; }
footer.sito-footer .nl-esito { margin-top: 8px; font-size: 13px; }
footer.sito-footer .nl-errore { color: #ffb4a8; }

/* 22/10 (R-2210-cc024-5): il QR dell'app solo da schermo largo; dal telefono basta il pulsante. */
.qr-schermo-largo { display: none; margin-top: 18px; }
@media (min-width: 721px) { .qr-schermo-largo { display: block; } }

/* 22/10 (R-2210-cc024-18 punto 4b): la newsletter del pie' di pagina, centrata su tutte le pagine. */
footer.sito-footer .nl-footer { margin: 0 auto; text-align: center; }
footer.sito-footer .nl-consenso { text-align: left; }
/* 22/10 (punto 4c): le prime due card di "Perche' deepee PetGo", grandi. */
.feature-grande { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 960px; margin: 0 auto 22px; }
.feature-grande .feature-card { padding: 30px 26px; }
.feature-grande .feature-card h3 { font-size: 24px; line-height: 1.2; margin: 8px 0 10px; }
.feature-grande .feature-card p { font-size: 17px; line-height: 1.5; color: var(--text); }
@media (max-width: 720px) { .feature-grande { grid-template-columns: 1fr; max-width: 340px; } }
/* 26/10 (R-2610-cc027-111 punto 3): sul telefono le due card grandi hanno lo stesso testo delle altre. */
@media (max-width: 720px) {
  .feature-grande .feature-card { padding: 26px 22px; }
  .feature-grande .feature-card h3 { font-size: 16px; line-height: inherit; margin: 4px 0 6px; }
  .feature-grande .feature-card p { font-size: 13.5px; line-height: inherit; color: var(--muted); }
}
/* 22/10 (R-2210-cc024-19 punto 2): i due badge degli store in riquadri IDENTICI (146 x 43), immagine
   contenuta. Le proporzioni ufficiali sono diverse (App Store 2,99:1, Google Play 3,36:1) e non si
   deformano: escono con la stessa altezza, 43 px (il riquadro e' largo 3,4 volte l'altezza), e Google Play non e' mai piu' piccolo (regola Google).
   Del PNG di Google Play e' tolto solo il margine trasparente; lo spazio libero lo da' il gap. */
/* 23/10 (R-2310-cc024-41 punto 1d, Andrea: "i due pulsanti degli store della stessa larghezza"): stessa
   LARGHEZZA, 150 px, altezza dalle proporzioni ufficiali (App Store 50 px, Google Play 45 px), nessuna
   deformazione e nessuno sotto i minimi (Apple 40 px, Google 28 px). */
.badge-store { display: inline-flex; align-items: center; justify-content: center; width: 150px; height: auto; }
.badge-store img { display: block; width: 100%; height: auto; }
/* 23/10 (R-2210-cc024-22 punto 7b): le card dell'ultima riga, se non la riempiono, centrate.
   Griglia a 6 colonne, ogni card ne prende 2; con 5 card le ultime due partono dalla colonna 2. */
@media (min-width: 721px) {
  .feature-grid { grid-template-columns: repeat(6, 1fr); }
  .feature-grid > .feature-card { grid-column: span 2; }
  .feature-grid > .feature-card:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .feature-grid > .feature-card:nth-child(3n+1):nth-last-child(1) { grid-column: 3 / span 2; }
}

/* 23/10 (R-2310-cc024-41 punto 1h, Andrea: "HAI UN CODICE?" in maiuscolo): il maiuscolo vale per il
   codice scritto, il suggerimento resta in forma normale. */
.campo-codice::placeholder { text-transform: none; }

/* 23/10 (R-2310-cc024-44 punto 3, testo di Andrea alla lettera): il titoletto secondario sotto il titolo di una card, su riga a parte e piu' piccolo. */
.feature-card .titoletto-card { font-size: 17px; font-weight: 700; color: var(--green); margin: -4px 0 10px; line-height: 1.3; }
.feature-grande .feature-card p.titoletto-card { font-size: 17px; color: var(--green); }

/* ============================================================
   23/10 (R-2310-cc025-8 punto 4) — AREA PERSONALE
   ============================================================ */
/* Il sottomenu "Area personale" nella barra (assets/area-menu.js). Su schermo largo si apre al
   passaggio del mouse e al clic; nel menu del telefono si apre al tocco, dentro l'elenco. */
header.sito-header nav .menu-area { position: relative; display: inline-block; margin-left: 24px; }
.menu-area-voce { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--navy); font-weight: 700; font-size: 14px; }
.menu-area-voce:hover { color: var(--aqua); }
.menu-area-freccia { transition: transform .15s ease; }
.menu-area.aperta .menu-area-freccia { transform: rotate(180deg); }
.menu-area-tendina { display: none; position: absolute; right: 0; top: calc(100% + 12px); min-width: 220px; padding: 8px;
  background: rgba(255,255,255,.97); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); z-index: 120; }
.menu-area-tendina::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.menu-area.aperta .menu-area-tendina { display: block; }
@media (hover: hover) and (min-width: 641px) { .menu-area:hover .menu-area-tendina { display: block; } }
header.sito-header nav .menu-area-tendina a, .menu-area-esci { display: block; margin: 0; padding: 10px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; text-align: left; }
header.sito-header nav .menu-area-tendina a:hover, .menu-area-esci:hover { background: var(--bg); color: var(--navy); }
header.sito-header nav .menu-area-tendina a[aria-current="page"] { background: var(--bg); }
header.sito-header nav .menu-area-tendina a.secondaria { color: var(--muted); font-weight: 500; font-size: 13px; }
.menu-area-esci { width: 100%; background: none; border: none; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px;
  margin-top: 6px; cursor: pointer; font-family: inherit; color: var(--muted); }
@media (max-width: 640px) {
  header.sito-header nav .menu-area { display: block; margin: 0; border-top: 1px solid var(--border); }
  .menu-area-voce { width: 100%; justify-content: space-between; padding: 14px 20px; font-size: 14px; }
  .menu-area-tendina { position: static; min-width: 0; padding: 0 0 8px; background: none; border: none; box-shadow: none; }
  .menu-area-tendina::before { display: none; }
  header.sito-header nav .menu-area-tendina a, .menu-area-esci { padding: 11px 20px 11px 36px; border: none; border-radius: 0; }
  .menu-area-esci { border-top: none; margin: 0; }
}

/* L'occhio dentro i campi password (assets/occhio.js). */
.campo-occhio { position: relative; display: block; }
.campo-occhio input { padding-right: 46px !important; }
.campo-occhio .occhio { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 10px;
  color: var(--muted); cursor: pointer; padding: 0; }
.campo-occhio .occhio:hover { color: var(--navy); }
.campo-occhio .occhio:focus-visible { outline: 2px solid var(--aqua); outline-offset: 0; }
/* Il campo ha un margine sotto: l'occhio si centra sul campo, non sul campo piu' il margine. */
.campo-occhio { margin-bottom: 12px; }
.campo-occhio input { margin-bottom: 0 !important; }

/* Le pagine dell'area: menu laterale e contenuto. Sul telefono il menu laterale non c'e' (R-15, sotto). */
.area { max-width: 1020px; margin: 36px auto 0; padding: 0 16px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.area-menu { position: sticky; top: 124px; background: var(--glass-strong); border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); padding: 14px; }
.area-menu .area-chi { font-size: 12px; color: var(--muted); padding: 4px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; overflow-wrap: anywhere; }
.area-menu .area-chi strong { display: block; font-size: 15px; color: var(--navy); }
.area-menu nav a, .area-menu .area-esci { display: block; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; }
.area-menu nav a:hover { background: var(--bg); }
.area-menu nav a[aria-current="page"] { background: var(--navy); color: #fff; }
.area-menu nav a.secondaria { color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 8px; }
.area-menu nav a.secondaria[aria-current="page"] { background: var(--bg); color: var(--danger); }
.area-menu .area-esci { width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--border); border-radius: 0;
  margin-top: 8px; padding-top: 12px; cursor: pointer; font-family: inherit; color: var(--muted); }
.area-menu .area-esci:hover { color: var(--navy); }
.area-contenuto { background: var(--glass-strong); border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 32px 36px 36px; min-width: 0; }
.area-contenuto h1 { font-size: 26px; color: var(--navy); margin: 0 0 6px; letter-spacing: -.3px; text-align: center; }
.area-contenuto .area-sottotitolo { text-align: center; color: var(--muted); font-size: 14px; margin: 0 auto 26px; max-width: 460px; }
/* Un indirizzo email lungo dentro una frase va a capo invece di allargare la pagina (390 px, rilievo di rev54). */
.area-contenuto strong, .area-contenuto .area-riga > span:last-child, .area-contenuto .area-sottotitolo { overflow-wrap: anywhere; }
.area-contenuto h2 { font-size: 17px; color: var(--navy); margin: 26px 0 10px; }
.area-modulo { max-width: 400px; margin: 0 auto; }
.area-modulo label.campo, .accesso-box label.campo { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.area-modulo input[type="text"], .area-modulo input[type="email"], .area-modulo input[type="password"],
.accesso-box input[type="text"], .accesso-box input[type="email"], .accesso-box input[type="password"] {
  width: 100%; padding: 13px 14px; border: 1px solid rgba(12,68,124,.22); border-radius: 12px; margin-bottom: 14px; font-size: 15px;
  background: #fff; color: var(--text); font-family: inherit; }
.area-modulo input:focus, .accesso-box input:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(31,182,201,.18); }
.area-modulo input[readonly] { background: var(--bg); color: var(--muted); }
.area-azioni { text-align: center; margin-top: 10px; }
.area-azioni .btn { min-width: 220px; }
.area-nota { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.6; margin: 14px auto 0; max-width: 420px; }
.area-esito { font-size: 14px; text-align: center; margin: 14px auto 0; max-width: 420px; line-height: 1.5; min-height: 1px; }
.area-esito.errore { color: var(--danger); }
.area-esito.ok { color: var(--green); }
.area-esito.info { color: var(--muted); }
/* 24/10 (R-2310-cc025-38 punto 1e): il campo sbagliato di ogni modulo del sito (assets/campi.js).
   Vince sul focus azzurro: il campo col focus e' proprio quello da correggere. */
input.campo-errato, select.campo-errato, textarea.campo-errato,
input.campo-errato:focus, select.campo-errato:focus, textarea.campo-errato:focus {
  border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(192,57,43,.18) !important; outline: none; }
input[type="checkbox"].campo-errato { outline: 2px solid var(--danger); outline-offset: 2px; box-shadow: none !important; }
/* 24/10 (R-2310-cc025-38 punto 1a): con una sessione salvata account.html non mostra il modulo
   di accesso finche' non sa se la sessione vale; al suo posto un caricamento neutro. */
.area-attesa { display: none; }
html.area-in-attesa #zona-ingresso { display: none !important; }
html.area-in-attesa .area-attesa { display: flex; justify-content: center; align-items: center; min-height: 50vh; }
.area-attesa-giro { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(12,68,124,.15); border-top-color: var(--aqua);
  animation: area-giro .8s linear infinite; }
@keyframes area-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .area-attesa-giro { animation-duration: 2.4s; } }
.area-scheda { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.area-scheda h3 { margin: 0 0 8px; color: var(--navy); font-size: 16px; }
.area-riga { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; color: var(--muted); }
.area-riga > span:last-child { color: var(--text); text-align: right; overflow-wrap: anywhere; }
.area-vuoto { text-align: center; color: var(--muted); font-size: 14px; padding: 18px 0; }
.btn-piccolo { padding: 10px 20px; font-size: 14px; }
/* Il pulsante "stile link": piccolo, centrato, senza riempimento. Per le azioni che non si annullano. */
.btn-link { display: inline-block; background: none; border: none; padding: 8px 4px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--danger); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btn-link:disabled { opacity: .6; cursor: default; }
.btn-link.neutro { color: var(--muted); }
@media (max-width: 760px) {
  .area { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; }
  .area-contenuto { padding: 24px 18px 28px; }
  .area-contenuto h1 { font-size: 23px; }
}

/* 23/10 (R-2310-cc025-15): le schede dei tracker, prima nello stile di account.html, ora in /account/tracker. */
.device-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.device-card h3 { margin: 0 0 8px; color: var(--navy); }
.device-card .stato { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.stato-active { background: #F0F9F6; color: var(--green); }
.stato-cancelled, .stato-paused { background: #FDEDEA; color: var(--danger); }
.stato-claimed_no_sub, .stato-in_magazzino { background: #FFF3CD; color: #856404; }
.riga-dettaglio { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--muted); }

/* 23/10 (R-2310-cc025-15 punto 4, Andrea: "in versione mobile non mi piace menu con slider orizzontale
   sopra ... fai il menu di navigazione a path"): il percorso di navigazione, su telefono e computer, e la
   panoramica a riquadri. Sul telefono il menu laterale non c'e': resta il sottomenu della barra. */
.area-percorso { grid-column: 1 / -1; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.area-percorso a { color: var(--navy); font-weight: 600; text-decoration: none; }
.area-percorso a:hover { text-decoration: underline; }
.area-percorso .separatore { color: var(--muted); }
.area-percorso [aria-current="page"] { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.area.area-panoramica { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.area-riquadri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.area-riquadro { display: flex; align-items: center; gap: 16px; padding: 22px 20px; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  text-decoration: none; color: var(--text); box-shadow: var(--shadow-soft); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.area-riquadro:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: rgba(31,182,201,.45); }
.area-riquadro:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.area-riquadro-icona { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--sky-soft), var(--bg)); color: var(--navy); }
.area-riquadro-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.area-riquadro-testo strong { font-size: 16px; color: var(--navy); }
.area-riquadro-testo span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.area-riquadro-freccia { flex: 0 0 auto; color: var(--muted); }
.area-piede-panoramica { text-align: center; margin: 28px 0 0; font-size: 14px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.area-piede-panoramica a { color: var(--muted); }
@media (max-width: 760px) {
  .area-menu { display: none; }
  .area-riquadri { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .area-riquadro { padding: 18px 16px; }
}
/* 23/10 (R-2310-cc025-20): con "Gestisci account" i riquadri sono cinque: l'ultimo, da solo, al centro. */
@media (min-width: 761px) { .area-riquadri > .area-riquadro:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); } }

/* 23/10 (R-2310-cc025-24 punto 2): l'elenco della pagina /paesi-coperti, in colonne. */
.elenco-paesi { columns: 3 140px; column-gap: 28px; padding-left: 18px; margin: 18px 0 24px; font-size: 14px; line-height: 1.7; }
.elenco-paesi li { break-inside: avoid; }

/* 23/10 (R-2310-cc025-25): l'icona sopra il titolo di una sezione (lucchetto dell'antirimozione), come quelle delle
   schede; e i pulsanti medi affiancati sotto il testo di una sezione. */
.icona-titolo { width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--sky), var(--aqua)); box-shadow: 0 8px 18px rgba(31,182,201,.4), inset 0 2px 3px rgba(255,255,255,.6); }
.icona-titolo svg { width: 28px; height: 28px; stroke: #fff; fill: none; }
.pulsanti-sezione { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }

/* 23/10 (R-2310-cc025-26 punto 1): i passi di "Come funziona", numeri in cerchio collegati da una linea, senza
   riquadri. Su schermo largo in fila, sul telefono in colonna con la linea a sinistra. */
.passi { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.passi li { position: relative; text-align: center; padding: 0 6px; }
.passi li:not(:last-child)::after { content: ""; position: absolute; top: 31px; left: calc(50% + 44px); right: calc(-50% + 32px);
  height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--sky), var(--aqua)); }
.passo-numero { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #16688f, var(--navy));
  box-shadow: 0 8px 18px rgba(12,68,124,.3), inset 0 2px 3px rgba(255,255,255,.35); position: relative; z-index: 1; }
.passi h3 { font-size: 17px; color: var(--navy); margin: 0 0 6px; }
.passi p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.5; }
@media (max-width: 640px) {
  .passi { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .passi li { text-align: left; padding: 6px 0 0 80px; min-height: 64px; }
  .passo-numero { position: absolute; left: 0; top: 0; margin: 0; width: 56px; height: 56px; font-size: 24px; }
  .passi li:not(:last-child)::after { top: 60px; bottom: -22px; left: 27px; right: auto; width: 3px; height: auto;
    background: linear-gradient(180deg, var(--sky), var(--aqua)); }
}

/* 23/10 (R-2310-cc025-28 punto 1): un a capo che vale solo sul telefono. */
@media (min-width: 641px) { .a-capo-telefono { display: none; } }

/* 26/10 (R-2610-cc027-111 punto 2): l'elenco con le spunte sotto la hero. Un blocco unico centrato,
   spunte in colonna, testi a sinistra; su schermo largo due colonne, sul telefono una. */
.punti-chiave { list-style: none; margin: 0 auto; padding: 0; width: fit-content; max-width: 940px;
  display: grid; grid-template-columns: auto auto; gap: 10px 40px; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.punti-chiave li { display: flex; align-items: flex-start; gap: 8px; text-align: left; line-height: 1.4; }
.punti-chiave svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
@media (max-width: 640px) { .punti-chiave { grid-template-columns: auto; } }