/* Autocare — Proposta B, scura. Trasposizione delle slide interne del corporate profile di giugno 2026:
   fondo nero, card arrotondate con bordo tenue, icone tonde arancio, tag a pillola, capitoli numerati. */

:root {
  --ac-superficie: #0E0F11;
  --ac-superficie-2: #1F2226;
  --ac-superficie-3: #16181B;
  --ac-testo: #E8EAED;
  --ac-testo-2: #A9B0B8;
  --ac-bordo: rgba(255, 255, 255, .10);
  --ac-azzurro: #4FC3F7;

  color-scheme: dark;

  --bs-body-bg: #0E0F11;
  --bs-body-color: #E8EAED;
  --bs-body-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-line-height: 1.66;
  --bs-primary: #F68525;
  --bs-primary-rgb: 246, 133, 37;
  --bs-link-color: #F68525;
  --bs-link-color-rgb: 246, 133, 37;
  --bs-link-hover-color: #FFA452;
  --bs-link-hover-color-rgb: 255, 164, 82;
  --bs-border-color: rgba(255, 255, 255, .10);
  --bs-border-radius: 16px;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: #A9B0B8;
}

body { background: var(--ac-superficie); color: var(--ac-testo); }
::selection { background: var(--ac-arancio); color: var(--ac-su-arancio); }
:focus-visible { outline: 3px solid var(--ac-arancio); outline-offset: 2px; }

/* ---------- tipografia ---------- */
h1, h2, h3, h4 { color: #fff; letter-spacing: -.015em; line-height: 1.08; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { max-width: 70ch; }
.lede { font-size: 1.06rem; color: var(--ac-testo-2); }
.fs-7 { font-size: .875rem; }
.fs-8 { font-size: .8rem; }
.testo-2 { color: var(--ac-testo-2); }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- capitoli numerati ---------- */
.b-cap { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1rem; }
.b-cap__n {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .95rem; font-weight: 600;
  color: var(--ac-arancio); letter-spacing: .05em;
}
.b-cap__label {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; color: var(--ac-testo-2);
  letter-spacing: .12em; text-transform: uppercase;
}
.b-cap::before { content: ""; width: 34px; height: 1px; background: var(--ac-arancio); align-self: center; }

/* ---------- bottoni ---------- */
.btn { font-weight: 700; border-radius: 10px; padding: .7rem 1.35rem; }
.btn-arancio { background: var(--ac-arancio); border: 1px solid var(--ac-arancio); color: var(--ac-su-arancio); }
.btn-arancio:hover, .btn-arancio:focus { background: #FFA452; border-color: #FFA452; color: var(--ac-su-arancio); }
.btn-bordo { background: transparent; border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.btn-bordo:hover, .btn-bordo:focus { border-color: var(--ac-arancio); color: #fff; background: rgba(246, 133, 37, .08); }

/* ---------- sezioni ---------- */
.sez { padding: 5rem 0; }
.sez--stretta { padding: 3.25rem 0; }
.sez--alt { background: var(--ac-superficie-3); }
.sez--bordata { border-top: 1px solid var(--ac-bordo); }
@media (max-width: 767.98px) { .sez { padding: 3.25rem 0; } }

/* ---------- hero a tutta larghezza ---------- */
.b-hero { position: relative; min-height: 70vh; display: flex; align-items: flex-end; overflow: hidden; }
.b-hero__media { position: absolute; inset: 0; }
.b-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.b-hero__media img[src*="carro-attrezzi"] { object-position: 72% 50%; } /* su schermi stretti tiene in vista il carro attrezzi */
.b-hero__media img[src*="azienda-tecnico"] { object-position: 68% 20%; } /* testa sempre in vista, tecnico al centro su schermi stretti */
.b-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 15, 17, .96) 0%, rgba(14, 15, 17, .82) 45%, rgba(14, 15, 17, .25) 100%);
}
.b-hero__corpo { position: relative; z-index: 1; padding: 5rem 0 3.5rem; max-width: 720px; }
.b-hero__claim {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ac-arancio); margin-bottom: 1.1rem;
}
@media (max-width: 767.98px) {
  .b-hero { min-height: 62vh; }
  .b-hero::after { background: linear-gradient(180deg, rgba(14, 15, 17, .72) 0%, rgba(14, 15, 17, .94) 62%); }
  .b-hero__corpo { padding: 4rem 0 2.5rem; }
}

.b-hero__scena { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.b-hero__scena canvas { display: block; width: 100%; height: 100%; }
.b-hero.is-3d .b-hero__scena { opacity: 1; }
/* l'immagine è il primo frame del 3D: niente zoom d'ingresso, altrimenti al passaggio l'auto "salterebbe" */
.b-hero--3d .b-hero__media img { animation: none; }
@media (min-width: 768px) {
  /* l'auto sta a destra: lì il velo scuro serve meno */
  .b-hero--3d::after { background: linear-gradient(90deg, rgba(14, 15, 17, .96) 0%, rgba(14, 15, 17, .78) 35%, rgba(14, 15, 17, 0) 62%); }
}
@media (max-width: 767.98px) {
  /* nel frame l'auto sta a destra: su mobile la si inquadra lì (lo stesso ritaglio lo fa scena.js) */
  .b-hero--3d .b-hero__media img { object-position: 74% 50%; }
  /* velo più leggero del solito, altrimenti l'auto dietro il testo non si vede */
  .b-hero--3d::after { background: linear-gradient(180deg, rgba(14, 15, 17, .55) 0%, rgba(14, 15, 17, .62) 45%, rgba(14, 15, 17, .35) 70%, rgba(14, 15, 17, .7) 100%); }
}

/* ---------- entrata della hero (solo CSS: senza animazioni resta tutto visibile) ---------- */
@keyframes b-sale { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
@keyframes b-appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes b-assesta { from { transform: scale(1.08); } to { transform: none; } }
.b-hero__media img { animation: b-assesta 2.4s cubic-bezier(.2, .7, .2, 1) both; }
.b-hero__claim { animation: b-appare 1s ease-out .2s both; }
.b-hero h1 .parola {
  display: inline-block; animation: b-sale 1.2s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(.5s + var(--i, 0) * .15s);
}
.b-hero__corpo > .lede, .b-hero__corpo > .lede ~ * { animation: b-sale 1.3s cubic-bezier(.2, .7, .2, 1) 1.2s both; }

/* ---------- titoli che entrano allo scroll (.js-anim la mette head.php, .is-visibile main.js) ---------- */
.js-anim main h2, .js-anim main .b-cap, .js-anim .b-inter p {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.js-anim main .b-cap::before { transform: scaleX(0); transform-origin: left; transition: transform 1s ease-out .3s; }
.js-anim main .b-cap + h2 { transition-delay: .25s; }
.js-anim .b-inter p { transform: scale(.96); transition-duration: 1.5s; }
.js-anim main h2.is-visibile, .js-anim main .b-cap.is-visibile, .js-anim .b-inter p.is-visibile { opacity: 1; transform: none; }
.js-anim main .b-cap.is-visibile::before { transform: none; }

/* ---------- interstiziale con slogan ---------- */
.b-inter { position: relative; min-height: 340px; display: grid; place-items: center; overflow: hidden; text-align: center; }
.b-inter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-inter::after { content: ""; position: absolute; inset: 0; background: rgba(14, 15, 17, .68); }
.b-inter p {
  position: relative; z-index: 1; margin: 0 auto; padding: 2rem 1.25rem; max-width: 22ch;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem); font-weight: 800; text-transform: uppercase; color: #fff; letter-spacing: -.01em;
}

/* ---------- card ---------- */
.b-card {
  background: var(--ac-superficie-3); border: 1px solid var(--ac-bordo); border-radius: 18px;
  padding: 1.6rem; height: 100%; transition: border-color .18s ease, background-color .18s ease;
}
.b-card__head { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.b-card__head h3 { margin: 0; }
.b-card p { color: var(--ac-testo-2); font-size: .92rem; margin-bottom: 0; }
.b-card__tag { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
a.b-card { display: block; text-decoration: none; color: inherit; }
a.b-card:hover, a.b-card:focus-visible { border-color: var(--ac-arancio); background: #1A1D20; }
.b-card__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; font-weight: 700; color: var(--ac-arancio); font-size: .92rem; }
.b-card--media { padding: 0; overflow: hidden; }
.b-card--media img { width: 100%; height: auto; display: block; }
.b-card--media .b-card__corpo { padding: 1.5rem; }

/* ---------- management ---------- */
.b-persona { text-align: center; }
.b-persona__ritratto { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; }
.b-persona__segnaposto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--ac-superficie-3); border: 1px dashed var(--ac-bordo);
  font-size: 2.4rem; color: var(--ac-testo-2);
}

/* elenco */
.b-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.b-lista li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; color: var(--ac-testo); }
.b-lista i { color: var(--ac-arancio); margin-top: .3rem; font-size: .8rem; }

/* ---------- formati ---------- */
.b-formato { position: relative; background: var(--ac-superficie-3); border: 1px solid var(--ac-bordo); border-radius: 18px; padding: 1.5rem; height: 100%; }
.b-formato::before { content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 3px; border-radius: 3px; background: var(--fmt); }
.b-formato__logo { background: #fff; border-radius: 12px; padding: .9rem 1rem; display: inline-block; margin-bottom: 1rem; }
.b-formato__logo img { width: 170px; height: auto; display: block; }
.b-formato__mq { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; color: var(--ac-testo-2); display: block; margin-bottom: .5rem; }
.b-formato p { font-size: .92rem; color: var(--ac-testo-2); }

/* ---------- passi ---------- */
.b-passi { display: grid; gap: 1.1rem; }
.b-passo { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; align-items: start; padding-bottom: 1.1rem; border-bottom: 1px solid var(--ac-bordo); }
.b-passo:last-child { border-bottom: 0; padding-bottom: 0; }
.b-passo__n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.15rem; font-weight: 600; color: var(--ac-arancio); }
.b-passo h3 { margin-bottom: .2rem; }
.b-passo p { font-size: .92rem; color: var(--ac-testo-2); margin: 0; }

/* ---------- header ---------- */
/* ---------- barra di servizio ---------- */
.topbar { font-size: .78rem; border-bottom: 1px solid var(--ac-bordo); }
.topbar a { color: var(--ac-testo-2); text-decoration: none; }
.topbar a:hover { color: var(--ac-arancio); }

.site-header { position: sticky; top: 0; z-index: 1030; background: rgba(14, 15, 17, .92); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.site-header.is-scrolled { border-bottom-color: var(--ac-bordo); }
.site-logo { height: 32px; width: auto; display: block; }
.site-nav .nav-link { font-weight: 600; font-size: .88rem; color: #D2D6DA; padding: .5rem .55rem; border-radius: 8px; white-space: nowrap; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .07); }
.site-nav .nav-link.attivo { color: var(--ac-arancio); }
.navbar-toggler { color: #fff; border-color: rgba(255, 255, 255, .25); }
.navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }
.dropdown-menu { background: var(--ac-superficie-2); border-color: var(--ac-bordo); border-radius: 14px; padding: .4rem; }
.dropdown-item { color: #D2D6DA; border-radius: 10px; font-size: .92rem; font-weight: 600; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255, 255, 255, .07); color: #fff; }
.offcanvas { background: var(--ac-superficie-3); color: var(--ac-testo); z-index: 1075; }
.offcanvas-backdrop { z-index: 1065; }
.offcanvas .nav-link:not(.fs-7) { color: var(--ac-arancio); }
.btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ---------- breadcrumb ---------- */
.b-breadcrumb { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem; letter-spacing: .06em; color: var(--ac-testo-2); padding: .9rem 0; border-bottom: 1px solid var(--ac-bordo); text-transform: uppercase; }
.b-breadcrumb a { color: var(--ac-testo-2); text-decoration: none; }
.b-breadcrumb a:hover { color: var(--ac-arancio); }

/* ---------- footer ---------- */
.site-footer { background: var(--ac-superficie-3); border-top: 1px solid var(--ac-bordo); padding-top: 3.5rem; color: var(--ac-testo-2); }
.site-footer h2.site-footer__titolo { color: #fff; font-size: .92rem; margin-bottom: 1rem; }
.site-footer a { color: var(--ac-testo-2); text-decoration: none; }
.site-footer a:hover { color: var(--ac-arancio); }
.site-footer .btn-arancio, .site-footer .btn-arancio:hover { color: var(--ac-su-arancio); }
.site-footer__logo { width: 190px; height: auto; }
.site-footer__legale { border-top: 1px solid var(--ac-bordo); margin-top: 2.5rem; padding: 1.1rem 0 1.4rem; font-size: .78rem; }
.site-footer__claim { background: var(--ac-arancio); color: var(--ac-su-arancio); text-align: center; font-weight: 700; padding: .9rem 1rem; }

/* ---------- form ---------- */
.b-form { background: var(--ac-superficie-3); border: 1px solid var(--ac-bordo); border-radius: 18px; padding: 1.75rem; }
.form-label { font-size: .85rem; font-weight: 600; color: #fff; }
.form-control, .form-select {
  background: #121417; border-color: rgba(255, 255, 255, .16); color: var(--ac-testo);
  border-radius: 10px; padding: .65rem .85rem;
}
.form-control:focus, .form-select:focus { background: #121417; color: var(--ac-testo); border-color: var(--ac-arancio); box-shadow: 0 0 0 .2rem rgba(246, 133, 37, .25); }
.form-control::placeholder { color: #7B8288; }
.form-check-input { background-color: #121417; border-color: rgba(255, 255, 255, .3); }
.form-check-input:checked { background-color: var(--ac-arancio); border-color: var(--ac-arancio); }
.b-form-ok { background: rgba(246, 133, 37, .1); border: 1px solid var(--ac-arancio); border-radius: 18px; padding: 1.75rem; }

/* ---------- tabelle e accordion ---------- */
.table { --bs-table-color: var(--ac-testo); --bs-table-bg: transparent; --bs-table-border-color: var(--ac-bordo); }
.tabella-confronto { --sticky-bg: var(--ac-superficie); }
.tabella-confronto .si { color: #3FB57A; }
.tabella-confronto .no { color: #6B7178; }
.accordion {
  --bs-accordion-bg: transparent; --bs-accordion-color: var(--ac-testo); --bs-accordion-border-color: var(--ac-bordo);
  --bs-accordion-btn-color: #fff; --bs-accordion-active-color: #fff; --bs-accordion-active-bg: rgba(246, 133, 37, .12);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(246, 133, 37, .25);
  --bs-accordion-btn-icon-transform: rotate(-180deg);
}
.accordion-button::after { filter: invert(1) grayscale(1) brightness(2); }

/* schede dei formati: pulsanti che sono anche nav-link */
.nav-pills .nav-link.btn { color: #fff; }
.nav-pills .nav-link.btn.active { background: var(--ac-arancio); border-color: var(--ac-arancio); color: var(--ac-su-arancio); }

/* ---------- rete: mappa, elenco e regioni ---------- */
.mappa { position: relative; margin: 0; background: var(--ac-superficie-3); border: 1px solid var(--ac-bordo); border-radius: 18px; padding: 1rem; }
/* il box dell'SVG ha le proporzioni del viewBox: niente regioni tagliate ai lati quando la mappa è limitata in altezza */
.mappa__svg { 
  display: block;
   aspect-ratio: 1100 / 1412;
   height: auto;
   width: min(100%, calc(min(70vh, 680px) * 1100 / 1412));
   margin-inline: auto;
   overflow: hidden;
   touch-action: manipulation;
   background: #456184;
   border-radius: 12px;
 }
.mappa__regione {
  fill: color-mix(in srgb, var(--ac-arancio) calc(var(--liv) * 38%), var(--ac-superficie-2));
  stroke: var(--ac-superficie); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  transition: fill .2s, opacity .2s; cursor: pointer; outline: none;
}
.mappa__regione.is-vuota { fill: var(--ac-superficie-2); cursor: default; }
.mappa__regione:not(.is-vuota):hover, .mappa__regione:focus-visible { fill: color-mix(in srgb, var(--ac-arancio) 55%, var(--ac-superficie-2)); }
.mappa__regione:focus-visible { stroke: #fff; stroke-width: 2; }
.mappa.has-regione .mappa__regione:not(.is-attiva) { opacity: .35; }
.mappa__regione.is-attiva { stroke: var(--ac-arancio); stroke-width: 2; }
.mappa__punti circle {display: none!important; fill: var(--fmt); stroke: var(--ac-superficie); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .2s; }
.mappa__punti circle.is-nascosto { display: none; }
.mappa__punti circle.is-evidenziato { stroke: #fff; stroke-width: 2.5; }
.mappa__tip {
  position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
  background: #fff; color: var(--ac-nero); border-radius: 8px; padding: .35rem .6rem; font-size: .78rem; line-height: 1.35; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.mappa__tip strong { display: block; }
.mappa__reset { position: absolute; top: 1rem; left: 1rem; }
.mappa__legenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .75rem; font-size: .78rem; color: var(--ac-testo-2); }
.mappa__legenda i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--fmt); margin-right: .35rem; }

.rete-lista { display: grid; align-content: start; gap: .6rem; max-height: min(70vh, 760px); overflow-y: auto; overscroll-behavior: contain; padding-right: .35rem; scrollbar-width: thin; }
/* da desktop l'elenco è alto quanto la mappa e scorre al suo interno */
@media (min-width: 992px) {
  .rete-lista-col { position: relative; }
  .rete-lista { position: absolute; inset: 0 calc(var(--bs-gutter-x) * .5); max-height: none; }
}
.b-centro {
  position: relative; background: var(--ac-superficie-3); border: 1px solid var(--ac-bordo); border-radius: 14px; padding: .85rem 1rem .85rem 1.25rem;
  cursor: pointer; transition: border-color .2s, background .2s; outline: none;
}
.b-centro::before { content: ""; position: absolute; left: 0; top: .85rem; bottom: .85rem; width: 3px; border-radius: 3px; background: var(--fmt); }
.b-centro:hover, .b-centro:focus-visible, .b-centro.is-evidenziato { border-color: var(--ac-arancio); background: #1A1D20; }
.b-centro[hidden] { display: none; }
.b-centro__nome { font-size: .95rem; margin: 0 0 .15rem; }
.b-centro__indirizzo { font-size: .82rem; color: var(--ac-testo-2); margin: 0; }
.b-centro__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .45rem 0 0; }
.b-centro__formato { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem; color: var(--ac-testo-2); }
.b-centro__meta .pill { font-size: .72rem; }

.rete-regioni { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 0; }
.rete-regioni__voce {
  position: relative; overflow: hidden; width: 100%; display: flex; justify-content: space-between; gap: 1rem;
  background: var(--ac-superficie-3); color: var(--ac-testo); border: 1px solid var(--ac-bordo); border-radius: 12px; padding: .6rem .9rem; font-size: .88rem; text-align: left;
}
/* .rete-regioni__voce::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--liv) * 100%); background: var(--ac-arancio); } */
.rete-regioni__voce:hover, .rete-regioni__voce[aria-pressed="true"] { border-color: var(--ac-arancio); background: #1A1D20; }
.mappa__punti .mappa__io { fill: var(--ac-arancio); stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 6px rgba(246, 133, 37, .8)); }
[data-rete-vicino][aria-pressed="true"] { background: var(--ac-arancio); border-color: var(--ac-arancio); color: var(--ac-su-arancio); }
.b-centro__km:empty { display: none; }
.b-centro__km { color: var(--ac-arancio); font-size: .78rem; white-space: nowrap; }