/* Autocare — stili comuni alle proposte A e B.
   I colori di superficie arrivano dai temi: --ac-superficie, --ac-superficie-2, --ac-testo, --ac-testo-2, --ac-bordo. */
:root {
  --ac-arancio: #F68525;
  --ac-arancio-scuro: #D96E12;
  --ac-arancio-testo: #B5570A;
  --ac-su-arancio: #1E1C1D;
  --ac-nero: #0E0F11;
  --ac-grafite: #404143;
}

/* l'offcanvas del menu resta fuori schermo: senza questo allarga la pagina */
html, body { max-width: 100%; overflow-x: clip; }

body { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; }

.skip-link { position: absolute; z-index: 1080; margin: .5rem; }

/* ---------- numeri ---------- */
.stat-strip { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat-strip__item { border-radius: 14px; padding: 1.1rem 1.2rem; background: var(--ac-superficie-2); border: 1px solid var(--ac-bordo); }
.stat-strip__item:first-child { background: var(--ac-arancio); border-color: var(--ac-arancio); color: var(--ac-su-arancio); }
.stat-strip__item:first-child .stat-strip__nota { color: rgba(30, 28, 29, .92); }
.stat-strip__n { display: block; font-size: clamp(1.6rem, 3.6vw, 2.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.stat-strip__label { display: block; font-size: .84rem; font-weight: 600; letter-spacing: .03em; margin-top: .15rem; }
.stat-strip__nota { display: block; font-size: .74rem; color: var(--ac-testo-2); margin-top: .35rem; }

/* ---------- icona tonda dei titoli card ---------- */
.icon-circle {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--ac-arancio); color: var(--ac-su-arancio);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.icon-circle--sm { width: 34px; height: 34px; font-size: .85rem; }

/* ---------- tag a pillola ---------- */
.pill {
  display: inline-block; border-radius: 999px; padding: .3rem .8rem; font-size: .78rem;
  background: var(--ac-superficie-2); color: var(--ac-testo-2); border: 1px solid var(--ac-bordo);
}

/* ---------- formati: il colore arriva da --fmt ---------- */
.fmt-bar { width: 4px; border-radius: 4px; background: var(--fmt); align-self: stretch; flex: none; }
.fmt-name { color: var(--fmt-testo, var(--fmt)); font-weight: 800; }
.fmt-top { border-top: 4px solid var(--fmt); }
.formato-logo { width: 100%; max-width: 260px; height: auto; }

/* ---------- slider prima / dopo ---------- */
.compare { position: relative; --pos: 50%; border-radius: 14px; overflow: hidden; }
.compare img { display: block; width: 100%; height: auto; }
.compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__before img { height: 100%; object-fit: cover; }
.compare__range { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; width: calc(100% - 2rem); margin: 0; }
.compare__label {
  position: absolute; top: .75rem; padding: .25rem .6rem; border-radius: 6px;
  background: var(--ac-arancio); color: var(--ac-su-arancio); font-size: .72rem; font-weight: 700; letter-spacing: .08em;
}
.compare__label--prima { left: .75rem; }
.compare__label--dopo { right: .75rem; }

/* ---------- tabella di confronto ---------- */
.tabella-confronto { --sticky-bg: var(--ac-superficie); }
.tabella-confronto th[scope="row"] {
  position: sticky; left: 0; background: var(--sticky-bg); text-align: left; font-weight: 600;
}
.tabella-confronto td { text-align: center; }

/* ---------- switcher proposte (solo in revisione) ---------- */
.ab-switch {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 1070; display: flex; gap: 2px; padding: 3px;
  border-radius: 999px; background: rgba(14, 15, 17, .92); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
}
.ab-switch a { padding: .35rem .85rem; border-radius: 999px; color: #E8EAED; font-size: .78rem; text-decoration: none; }
.ab-switch a.is-active { background: var(--ac-arancio); color: var(--ac-su-arancio); font-weight: 700; }

/* ---------- barra fissa mobile ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1060; display: flex;
  border-top: 1px solid var(--ac-bordo); background: var(--ac-superficie);
}
.mobile-bar a { flex: 1; padding: .85rem .5rem; text-align: center; font-weight: 700; text-decoration: none; color: var(--ac-testo); }
.mobile-bar__cta { background: var(--ac-arancio); color: var(--ac-su-arancio) !important; }
@media (max-width: 991.98px) {
  body { padding-bottom: 58px; }
  .ab-switch { bottom: 70px; }
}

/* ---------- grafico grandine ---------- */
.chart { width: 100%; height: auto; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .82rem; margin-top: .75rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-nota { font-size: .8rem; color: var(--ac-testo-2); margin-top: .5rem; }
.chart-figure summary { font-size: .85rem; cursor: pointer; color: var(--ac-testo-2); }

/* ---------- pagina di scelta ---------- */
.scelta { max-width: 980px; margin: 0 auto; padding: 3rem 1rem 4rem; }
.scelta__logo { width: 240px; height: auto; margin-bottom: 2rem; }
.scelta__intro { max-width: 62ch; color: var(--ac-testo-2); }
.scelta__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 2rem; }
.scelta__card {
  display: block; text-decoration: none; color: inherit; border: 1px solid var(--ac-bordo);
  border-radius: 16px; overflow: hidden; background: var(--ac-superficie);
}
.scelta__card:hover { border-color: var(--ac-arancio); }
.scelta__card img { width: 100%; height: auto; display: block; }
.scelta__card strong { display: block; padding: 1rem 1.1rem .25rem; font-size: 1.05rem; }
.scelta__card span { display: block; padding: 0 1.1rem 1.1rem; font-size: .88rem; color: var(--ac-testo-2); }
.scelta__nota { margin-top: 2rem; font-size: .85rem; color: var(--ac-testo-2); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Campo trappola dei form (honeypot): fuori dallo schermo */
.campo-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }