/* ==========================================================================
   Anteprima v2 (14/10/2026) — copia fedele del layout "SM Roofing" scelto
   dall'utente, con colori Edilcoop: arancio SM → rosso Edilcoop su chiaro e
   giallo su scuro, grigio ardesia SM → blu notte, verde solo per chiamare.
   Si carica DOPO style.css e riusa modulo, FAQ, barra fissa, cookie.
   ========================================================================== */

.v2 {
  --veil: rgba(14, 26, 43, 0.62);
  --on-red-muted: #f7e4e5;
  --text-2: #4a4f57;
  --card-shadow: 0 2px 4px rgba(14, 26, 43, 0.06), 0 12px 32px rgba(14, 26, 43, 0.12);
  --r: 6px;
}
.v2 ::selection { background: var(--yellow); color: var(--navy); }
/* Titoli in minuscolo come nel modello, Titillium */
.v2 h1, .v2 h2 { text-transform: none; letter-spacing: -0.005em; }
.v2 .btn { border-radius: var(--r); }
.v2-title { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); line-height: 1.12; margin: 0 0 var(--s-5); }
.v2-title--center { text-align: center; }

.v2-hero :focus-visible, .v2-why :focus-visible, .v2-nav :focus-visible, .v2-footer :focus-visible { outline-color: var(--yellow); }
.v2-top :focus-visible { outline-color: var(--navy); }

/* ==== Testata: logo + blocco telefono a due parti ==== */
.v2-top { background: var(--yellow); }
.v2-top__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 76px; padding-block: var(--s-2); }
.v2-top__logo { width: 132px; }
.v2-phone { display: inline-flex; align-items: stretch; min-height: 52px; text-decoration: none; border-radius: var(--r); overflow: hidden; box-shadow: 0 4px 12px rgba(14, 26, 43, 0.18); }
.v2-phone__tag { display: none; align-items: center; gap: var(--s-2); padding: 0 var(--s-5) 0 var(--s-3); background: var(--navy); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }
.v2-phone__tag .icon { width: 26px; height: 26px; color: var(--yellow); }
.v2-phone__num { display: flex; align-items: center; padding: 0 var(--s-4); background: var(--call); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color 0.15s ease; }
.v2-phone:hover .v2-phone__num { background: var(--call-dark); }
@media (min-width: 768px) {
  .v2-top__inner { min-height: 96px; }
  .v2-top__logo { width: 190px; }
  .v2-phone { min-height: 60px; }
  .v2-phone__tag { display: flex; }
  /* taglio obliquo tra le due parti, come nel modello */
  .v2-phone__num { margin-left: -14px; padding: 0 var(--s-5) 0 calc(var(--s-5) + 8px); font-size: 1.75rem; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
}
@media (max-width: 360px) { .v2-top__logo { width: 112px; } .v2-phone__num { font-size: 1.0625rem; padding-inline: var(--s-3); } }

/* ==== Menu blu notte, voci distribuite su tutta la larghezza ==== */
.v2-nav { display: none; background: var(--navy); }
@media (min-width: 1024px) {
  .v2-nav { display: block; position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 var(--navy-2), 0 6px 16px rgba(14, 26, 43, 0.22); }
  html:has(.v2-nav) { scroll-padding-top: 64px; }
}
.v2-nav__list { list-style: none; display: flex; justify-content: space-between; margin-block: 0; padding: 0; }
.v2-nav__list a { display: inline-flex; align-items: center; min-height: 52px; color: var(--white); font-size: 0.9375rem; font-weight: 700; text-decoration: none; transition: color 0.15s ease; }
.v2-nav__list a { position: relative; }
.v2-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
.v2-nav__list a:hover, .v2-nav__list a[aria-current="true"] { color: var(--yellow); }
.v2-nav__list a:hover::after, .v2-nav__list a[aria-current="true"]::after { transform: scaleX(1); }

/* ==== Apertura: foto con velo, modulo rosso a sinistra, titolo a destra, barra sotto ==== */
.v2-hero { position: relative; isolation: isolate; color: var(--white); background: var(--navy); }
.v2-hero__bg { position: absolute; inset: 0 0 44px; z-index: -2; width: 100%; height: calc(100% - 44px); object-fit: cover; object-position: 40% 60%; }
.v2-hero::before { content: ""; position: absolute; inset: 0 0 44px; z-index: -1; background: var(--veil); }
.v2-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; z-index: -1; background: var(--white); }
.v2-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "form"; gap: var(--s-6); padding-block: var(--s-6) var(--s-6); }
.v2-hero__copy { grid-area: copy; align-self: center; }
.v2-hero .v2-formcard { grid-area: form; }
.v2-hero h1 { margin: 0 0 var(--s-4); font-size: clamp(1.875rem, 1.15rem + 2.6vw, 3.25rem); line-height: 1.1; max-width: 16em; text-wrap: balance; }
.v2-hero__sub { margin: 0 0 var(--s-5); max-width: 34em; font-weight: 700; font-size: 1.125rem; line-height: 1.5; }
.v2-hero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); margin: 0 0 var(--s-2); font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; }
.v2-hero__price strong { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem); line-height: 1; color: var(--yellow); white-space: nowrap; }
.v2-hero__price sup { font-size: 0.4em; top: -1.1em; }
.v2-hero__note { margin: 0; max-width: 36em; font-size: 0.875rem; color: #d5dae2; }

/* Modulo su scheda rossa, compatto come "Request a callback" */
.v2-formcard { background: var(--red); color: var(--white); border-radius: var(--r); padding: var(--s-5); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); }
.v2-formcard .form-card__title { margin-bottom: var(--s-1); color: var(--white); font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; }
.v2-formcard .form-card__sub, .v2-formcard .field__opt, .v2-formcard .step legend { color: var(--on-red-muted); }
.v2-formcard .form-card__sub { margin-bottom: var(--s-4); }
.v2-formcard .step { gap: var(--s-3); }
.v2-formcard .step legend { margin-bottom: var(--s-2); font-size: 0.8125rem; }
.v2-formcard .field { gap: var(--s-1); }
.v2-formcard .field label { font-size: 0.9375rem; }
.v2-formcard .field input, .v2-formcard .field select, .v2-formcard .field textarea { min-height: 46px; padding: 0.5rem 0.75rem; border-color: transparent; border-radius: 3px; }
.v2-formcard :focus-visible,
.v2-formcard .field input:focus-visible, .v2-formcard .field select:focus-visible, .v2-formcard .field textarea:focus-visible { outline-color: var(--yellow); }
.v2-formcard .field [aria-invalid="true"] { border-color: var(--yellow); border-width: 3px; }
.v2-formcard .field__err { color: var(--yellow); }
.v2-formcard .field--check input { accent-color: var(--navy); }
.v2-formcard .field--check label { font-size: 0.875rem; }
/* pulsante blu notte a pillola, come "Call me back" */
.v2-formcard .btn--red { justify-self: start; width: auto; min-height: 48px; padding-inline: 1.75rem; background: var(--navy); color: var(--white); border-radius: 999px; font-size: 0.9375rem; }
.v2-formcard .btn--red:hover, .v2-formcard .btn--red:active, .v2-formcard .btn--red[disabled]:hover { background: var(--navy-2); }
.v2-formcard .btn--ghost { border-radius: 999px; }
.v2-formcard .btn--ghost:hover, .v2-formcard .btn--ghost:active { background: rgba(255, 255, 255, 0.12); }
.v2-formcard .step__actions .btn--red { flex: 0 1 auto; }
.v2-formcard .form-msg:not(:empty) { color: var(--navy); }

/* Barra di fiducia: blu notte, arrotondata, a cavallo tra foto e pagina */
.v2-hero__bar { position: relative; }
.v2-trust { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin: 0; padding: var(--s-4) var(--s-5); background: var(--navy); border-radius: var(--r); box-shadow: 0 10px 24px rgba(14, 26, 43, 0.25); }
.v2-trust li { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-head); font-weight: 700; font-size: 0.9375rem; line-height: 1.2; color: var(--white); }
.v2-trust .icon { width: 30px; height: 30px; color: var(--yellow); flex: none; }
.v2-trust li:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .v2-trust { display: flex; justify-content: space-between; padding: var(--s-5) var(--s-6); }
  .v2-trust li { font-size: 1rem; }
  .v2-trust .icon { width: 34px; height: 34px; }
}
@media (min-width: 1024px) {
  .v2-hero__inner { grid-template-columns: minmax(340px, 380px) minmax(0, 1fr); grid-template-areas: "form copy"; column-gap: clamp(48px, 6vw, 112px); padding-block: 56px 48px; }
}

/* ==== Chi siamo: testo a sinistra, foto a destra ==== */
.v2-about { padding-block: 64px; }
.v2-about__inner { display: grid; gap: var(--s-6); align-items: center; }
.v2-about h2 { margin-bottom: var(--s-2); font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); }
.v2-about__kicker { margin: 0 0 var(--s-4); font-family: var(--font-head); font-weight: 700; font-size: 1.3125rem; line-height: 1.3; color: var(--red); }
.v2-about__text p:not(.v2-about__kicker) { color: var(--text-2); }
.v2-about__text .btn { margin-top: var(--s-3); }
.v2-about__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); box-shadow: var(--card-shadow); }
@media (min-width: 960px) {
  .v2-about { padding-block: 104px; }
  .v2-about__inner { grid-template-columns: minmax(0, 1fr) 440px; gap: 96px; }
}

/* ==== Fascia "Preferisci telefonarci?": foto ponteggi + scheda bianca ==== */
.v2-touch { position: relative; isolation: isolate; padding-block: 64px; background: var(--navy); }
.v2-touch__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.v2-touch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(14, 26, 43, 0.35); }
.v2-touch__card { max-width: 520px; padding: var(--s-6); background: var(--white); color: var(--navy); border-radius: var(--r); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3); }
.v2-touch__icon { width: 36px; height: 36px; margin-bottom: var(--s-2); color: var(--red); }
.v2-touch h2 { margin-bottom: var(--s-2); font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); }
.v2-touch p { margin: 0 0 var(--s-3); color: var(--text-2); }
.v2-touch__num { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem); line-height: 1.05; color: var(--red); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-touch__num:hover { text-decoration: underline; text-underline-offset: 6px; }
@media (min-width: 960px) { .v2-touch { padding-block: 120px; } }

/* ==== Sezioni ==== */
.v2-sec { padding-block: 64px; }
.v2-sec--light { background: var(--light); }
@media (min-width: 960px) { .v2-sec { padding-block: 96px; } }

/* ==== I nostri lavori: 6 riquadri foto con bordo rosso e nome del lavoro ==== */
.v2-tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; }
@media (min-width: 960px) { .v2-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.v2-tile { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--navy); }
.v2-tile img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; }
.v2-tile::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(14, 26, 43, 0.85)); }
.v2-tile span { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 1; color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.2; }
@media (min-width: 960px) { .v2-tile span { left: var(--s-5); bottom: var(--s-4); font-size: 1.25rem; } }

/* ==== Perché sceglierci: foto scura, 4 schede bianche, "Chiama ora" ==== */
.v2-why { position: relative; isolation: isolate; padding-block: 64px; color: var(--white); background: var(--navy); }
.v2-why__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.v2-why::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(14, 26, 43, 0.78); }
.v2-why__grid { list-style: none; display: grid; gap: var(--s-4); margin: 0; padding: 0; }
@media (min-width: 640px) { .v2-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v2-why__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }
.v2-why__card { padding: var(--s-5) var(--s-4) var(--s-6); background: var(--white); color: var(--navy); border-radius: var(--r); text-align: center; }
.v2-why__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-3); border: 2px solid var(--red); border-radius: 50%; color: var(--red); }
.v2-why__icon .icon { width: 32px; height: 32px; }
.v2-why__card h3 { margin-bottom: var(--s-2); font-size: 1.25rem; color: var(--red); }
.v2-why__card p { margin: 0 auto; font-size: 0.9375rem; color: var(--text-2); }
.v2-why__call { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3) var(--s-4); margin: var(--s-6) auto 0; max-width: none; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.v2-pill-call { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 56px; padding: 0 1.75rem; background: var(--call); color: var(--white); border-radius: 999px; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color 0.15s ease; }
.v2-pill-call:hover { background: var(--call-dark); }
.v2-pill-call .icon { width: 0.9em; height: 0.9em; }
.v2-why__note { margin: var(--s-4) auto 0; text-align: center; font-size: 0.875rem; color: var(--on-dark-muted); }
@media (min-width: 960px) { .v2-why { padding-block: 104px; } }

/* ==== Recensioni Google: carosello con frecce, pausa e logo Google su ogni scheda ==== */
.v2-reviews { padding-block: 64px; background: var(--light); }
@media (min-width: 960px) { .v2-reviews { padding-block: 104px; } }
.v2-reviews__head { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--s-6); text-align: center; }
.v2-reviews__head .v2-title { margin-bottom: var(--s-3); font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); }
.v2-reviews__sub { margin: 0 auto; max-width: 34em; color: var(--text-2); }
.v2-gbadge { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-5) var(--s-2) var(--s-4); max-width: none; margin: 0 0 var(--s-4); background: var(--white); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--card-shadow); order: -1; }
.v2-gbadge img { width: 112px; }
.v2-gbadge span { font-size: 0.9375rem; line-height: 1.3; color: var(--text-2); }
.v2-gbadge strong { display: block; color: var(--navy); font-family: var(--font-head); font-size: 1.0625rem; }

.v2 .v2-carousel .rcards { display: flex; gap: var(--s-4); columns: auto; margin: 0; padding: 4px 2px 22px; max-width: none; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: none; }
.v2 .v2-carousel .rcards::-webkit-scrollbar { display: none; }
.v2 .v2-carousel .rcard { display: flex; flex-direction: column; flex: 0 0 86%; min-width: 0; width: auto; gap: var(--s-3); margin: 0; padding: var(--s-5); scroll-snap-align: start; break-inside: auto; border-top: 0; border-radius: var(--r); box-shadow: 0 1px 0 rgba(14, 26, 43, 0.08), 0 10px 24px rgba(14, 26, 43, 0.08); }
@media (min-width: 640px) { .v2 .v2-carousel .rcard { flex-basis: calc((100% - var(--s-4)) / 2); } }
@media (min-width: 1000px) { .v2 .v2-carousel .rcard { flex-basis: calc((100% - 2 * var(--s-4)) / 3); } }
.v2 .v2-carousel .rcard__head, .v2 .v2-carousel .rcard__stars { display: flex !important; }
.v2 .v2-carousel .rcard__text { display: block !important; }
.v2 .v2-carousel .rcard__text.is-clamped { display: -webkit-box !important; }
.v2 .v2-carousel .rcard__more:not([hidden]), .v2 .v2-carousel .rcard__shot:not([hidden]) { display: inline-flex !important; }
.v2 .v2-carousel .rcard__img { display: none !important; }
.v2 .v2-carousel .rcard__tag { margin-top: auto; padding: var(--s-3) 0 0; }
.v2 .rcard__avatar { border-radius: 50%; }
.v2 .rcard__g { width: 26px; height: 26px; flex: none; margin-left: auto; }
.v2-carousel__ctrl { display: flex; justify-content: center; gap: var(--s-3); }
.v2-carousel__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--navy); border-radius: var(--r); background: var(--white); color: var(--navy); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.v2-carousel__btn:hover { background: var(--navy); color: var(--white); }
.v2-carousel__btn--prev .icon { transform: scaleX(-1); }
.v2-carousel__btn .icon { width: 22px; height: 22px; }
.v2-carousel__btn[hidden] { display: none; }
.v2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-6); }
.v2-actions--center { justify-content: center; }
.v2-actions .btn--big { min-height: 60px; }
@media (max-width: 599px) { .v2-actions--center { flex-direction: column; align-items: stretch; } .v2-actions--center .btn { width: 100%; } }

/* ==== Come lavoriamo + modulo rosso ==== */
.v2-steps-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .v2-steps-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 96px; } }
.v2-badge { display: inline-block; margin: calc(-1 * var(--s-2)) 0 var(--s-5); padding: 0.5rem 1.125rem; background: var(--red); color: var(--white); border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.v2-steps { list-style: none; display: grid; gap: var(--s-5); margin: 0; padding: 0; }
.v2-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.v2-steps .icon { width: 48px; height: 48px; color: var(--red); }
.v2-steps h3 { margin: 0.25rem 0 0.25rem; font-size: 1.1875rem; }
.v2-steps p { margin: 0; color: var(--text-2); }
.v2-formcard--final { padding: var(--s-6); }
.v2-formcard--final .form-card__title { font-size: 1.625rem; text-transform: none; letter-spacing: 0; }

/* ==== Costi, zone, FAQ ==== */
.v2-costs { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .v2-costs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }
.v2-costs p { color: var(--text-2); }
.v2-box { margin-top: var(--s-4); padding: var(--s-5); background: var(--white); border-radius: var(--r); }
.v2-box h3 { margin-bottom: var(--s-2); font-size: 1.125rem; }
.v2-box p { margin: 0; }
.v2-costs__title { font-size: 1.25rem; }
.v2-costs .factors { margin: var(--s-3) 0 var(--s-5); }
.v2 .zone-grid .chips li { border-radius: var(--r); }
.v2 .zone-grid .btn { margin-top: var(--s-5); }
.v2 .faq h2 { margin-bottom: var(--s-4); }

/* ==== Piè di pagina a 4 colonne + barra rossa ==== */
.v2-footer { background: var(--navy); color: var(--on-dark-muted); font-size: 0.9375rem; line-height: 1.5; }
.v2-footer__grid { display: grid; gap: var(--s-6); padding-block: 56px 48px; }
@media (min-width: 640px) { .v2-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v2-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.v2-footer h2 { margin: 0 0 var(--s-3); font-size: 1.125rem; color: var(--white); }
.v2-footer p { margin: 0; max-width: none; }
.v2-footer a, .v2-footer .linkbtn { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--white); text-decoration: none; }
.v2-footer a:hover, .v2-footer .linkbtn:hover { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.v2-footer .linkbtn { text-decoration: none; }
.v2-footer__logo { width: 170px; margin-bottom: var(--s-4); padding: 0.625rem 0.75rem; background: var(--yellow); border-radius: var(--r); }
.v2-footer__dots, .v2-footer__links { list-style: none; margin: 0; padding: 0; }
.v2-footer__dots li { display: flex; align-items: center; gap: var(--s-2); padding-block: 0.2rem; color: var(--white); }
.v2-footer__dots li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; }
.v2-footer__bottom { margin: 0; max-width: none; padding: 0.875rem var(--gutter); background: var(--red); color: var(--white); font-size: 0.875rem; text-align: center; }

/* ==========================================================================
   ANIMAZIONI SOBRIE (22/10/2026)
   Solo movimenti brevi che accompagnano l'arrivo sulla pagina o un'azione.
   Restano fermi il titolo e la foto d'apertura (è ciò che Google misura per la
   velocità). Niente sezioni che salgono scorrendo, niente schede che si alzano,
   niente zoom sulle foto, niente numeri che contano: il cliente li ha fatti
   togliere il 18/09. Con "riduci movimento" attivo non parte niente.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .v2-hero__sub { animation: v2-sali 0.6s 0.05s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .v2-hero__price { animation: v2-sali 0.6s 0.17s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .v2-hero__note { animation: v2-dissolvi 0.6s 0.45s ease-out both; }
  .v2-hero .v2-formcard { animation: v2-sali 0.65s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .v2-trust li { animation: v2-dissolvi 0.5s ease-out both; }
  .v2-trust li:nth-child(1) { animation-delay: 0.45s; }
  .v2-trust li:nth-child(2) { animation-delay: 0.52s; }
  .v2-trust li:nth-child(3) { animation-delay: 0.59s; }
  .v2-trust li:nth-child(4) { animation-delay: 0.66s; }
  .v2-trust li:nth-child(5) { animation-delay: 0.73s; }

  /* il prezzo viene sottolineato una volta sola, poco dopo l'arrivo */
  .v2-hero__price strong { position: relative; }
  .v2-hero__price strong::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em; height: 0.07em; min-height: 3px; background: var(--yellow); transform-origin: left; animation: v2-traccia 0.7s 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  /* piccoli segnali di risposta: telefono in testata, campi del modulo, messaggio di invio */
  .v2-phone { transition: box-shadow 0.2s ease, transform 0.2s ease; }
  .v2-phone:hover { box-shadow: 0 8px 18px rgba(14, 26, 43, 0.26); transform: translateY(-1px); }
  .field input, .field select, .field textarea { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: 0 0 0 4px rgba(246, 215, 6, 0.35); }
  .form-msg:not(:empty) { animation: v2-sali 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes v2-sali { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v2-dissolvi { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2-traccia { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   ANIMAZIONI DI SEZIONE (22/10/2026, richieste dal cliente)
   Una volta sola quando la sezione entra nello schermo, brevi (0,5-0,75 s), tema cantiere:
   foto scoperte dall'alto verso il basso come un telo che scende, percorso dei passi come avanzamento lavori,
   righe dei costi tracciate come un metro. Si attivano solo se motion.js aggiunge .has-motion
   (mai con "riduci movimento"). Stato iniziale nascosto solo in questo blocco.
   ========================================================================== */
/* percorso dei 4 passi: linea di collegamento (visibile anche senza animazione) */
.v2-steps li { position: relative; }
.v2-steps li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 54px; bottom: -22px; width: 2px; background: var(--line); transform-origin: top; }
/* righe dei costi come righe di un metro */
.v2-costs .factors li { position: relative; border-top: 0; }
.v2-costs .factors li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left; }

@media (prefers-reduced-motion: no-preference) {
  .has-motion [data-mv="fade"] { opacity: 0; transform: translateY(12px); transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
  .has-motion [data-mv="fade"].in { opacity: 1; transform: none; }

  /* resta una striscia di 1px (trasparente) così il browser "vede" l'elemento e fa partire l'ingresso */
  .has-motion [data-mv="wipe"] { opacity: 0; clip-path: inset(0 0 calc(100% - 1px) 0); transition: clip-path 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease-out; transition-delay: calc(var(--i, 0) * 90ms); }
  .has-motion [data-mv="wipe"].in { opacity: 1; clip-path: inset(0); }
  .has-motion [data-mv="mappa"] { opacity: 0; clip-path: inset(0 calc(100% - 1px) 0 0); transition: clip-path 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease-out; }
  .has-motion [data-mv="mappa"].in { opacity: 1; clip-path: inset(0); }

  .has-motion [data-mv="passo"] .icon { transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); transition-delay: calc(var(--i, 0) * 120ms); }
  .has-motion [data-mv="passo"]:not(.in) .icon { transform: scale(0.7); }
  .has-motion [data-mv="passo"]::after { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 120ms + 0.25s); }
  .has-motion [data-mv="passo"]:not(.in)::after { transform: scaleY(0); }
  .has-motion [data-mv="passo"] > div { transition: opacity 0.5s ease-out; transition-delay: calc(var(--i, 0) * 120ms + 0.1s); }
  .has-motion [data-mv="passo"]:not(.in) > div { opacity: 0; }

  .has-motion [data-mv="metro"]::before { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
  .has-motion [data-mv="metro"]:not(.in)::before { transform: scaleX(0); }

  /* "Preferisci telefonarci?": la cornetta squilla una volta sola */
  .has-motion .v2-touch__card.in .v2-touch__icon { transform-origin: 50% 60%; animation: v2-squilla 0.8s 0.35s ease-in-out both; }
  /* icone dei vantaggi: spuntano appena la scheda compare */
  .has-motion [data-mv="fade"].v2-why__card .v2-why__icon { transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); transition-delay: calc(var(--i, 0) * 70ms + 0.15s); }
  .has-motion [data-mv="fade"].v2-why__card:not(.in) .v2-why__icon { transform: scale(0.75); }
}
@keyframes v2-squilla { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-16deg); } 30% { transform: rotate(14deg); } 45% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } 75% { transform: rotate(-5deg); } }
@media print { .has-motion [data-mv] { opacity: 1 !important; transform: none !important; clip-path: none !important; } }

/* ==== Apertura su telefono e tablet: foto nitida in alto (ritaglio 4:3), testo su blu pieno sotto ==== */
@media (max-width: 1023px) {
  .v2-hero__pic { display: block; }
  .v2-hero__bg { position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 50% 50%; }
  .v2-hero::before { display: none; }
  .v2-hero__inner { padding-block: var(--s-5) var(--s-6); }
  .v2-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem); }
  .v2-hero__sub { font-size: 1.1875rem; }
  .v2-hero__note { font-size: 0.9375rem; }
}

/* ==== Video dell'offerta (1:1) sotto l'apertura ==== */
.v2-spot { padding-block: 56px; background: var(--light, #f0eeee); }
.v2-spot__inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "media" "text"; gap: var(--s-5); }
.v2-spot__title { grid-area: title; margin: 0; font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); }
.v2-spot__media { grid-area: media; width: 100%; max-width: 560px; }
.v2-spot__frame { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fcd800; box-shadow: 0 2px 6px rgba(14, 26, 43, 0.08), 0 18px 44px rgba(14, 26, 43, 0.18); }
.v2-spot__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-spot__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--s-2); min-height: 60px; padding: 0 1.5rem 0 1.1rem; border: 0; border-radius: 999px; background: var(--navy); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 28px rgba(14, 26, 43, 0.35); }
.v2-spot__play .icon { width: 30px; height: 30px; }
.v2-spot__play:hover { background: var(--red); }
.v2-spot__bar { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); }
.v2-spot__btn { font-family: inherit; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; min-width: 48px; padding: 0 1rem; border: 0; border-radius: 999px; background: var(--navy); color: var(--white); font-weight: 700; font-size: 1rem; cursor: pointer; }
.v2-spot__btn--icon { padding: 0; justify-content: center; }
.v2-spot__btn--icon:has([data-spot-pause-label]:not([hidden])) { padding: 0 1.1rem 0 0.8rem; }
.v2-spot__btn .icon { width: 24px; height: 24px; flex: none; }
.v2-spot__btn:hover { background: var(--red); }
.v2-spot__text { grid-area: text; }
.v2-spot__lead { font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; line-height: 1.35; }
.v2-spot__lead strong { color: var(--red); white-space: nowrap; }
.v2-spot__lead sup { font-size: 0.5em; }
.v2-spot__text p { font-size: 1.125rem; line-height: 1.55; max-width: 32em; }
.v2-spot .v2-actions { margin-top: var(--s-5); }
.v2-spot__text .v2-spot__note { margin-top: var(--s-4); font-size: 0.9375rem; color: #4a5160; }
@media (min-width: 900px) {
  .v2-spot { padding-block: 72px; }
  .v2-spot__inner { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); grid-template-areas: "media title" "media text"; grid-template-rows: auto 1fr; column-gap: clamp(40px, 5vw, 80px); row-gap: var(--s-4); align-items: start; }
  .v2-spot__title { align-self: end; }
}