/* Pagine interne, proposta v3 (2026-10-21): stesso linguaggio della home.
   Carica dopo style.css. Non tocca /check-up/. */

/* Testata: fondo blu notte, titolo grande in serif, occhiello arancio come i numeri di sezione. */
.hero-slim {
  background: var(--on-blu-notte);
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1rem, 5vw, 3.5rem);
}
.hero-slim > * { position: relative; z-index: 1; margin-left: 0; margin-right: 0; }

/* Stesso respiro della home: aloni sfocati in movimento e trama sottile di linee. */
.hero-slim {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  background-color: var(--on-blu-notte);
}
.hero-slim::before,
.hero-slim::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  will-change: transform;
}
.hero-slim::before {
  width: min(52vw, 700px);
  height: min(52vw, 700px);
  left: -14vw;
  top: -26vw;
  background: radial-gradient(circle, rgba(31,91,94,0.85) 0%, rgba(31,91,94,0) 66%);
  animation: v3p-drift-a 28s ease-in-out infinite alternate;
}
.hero-slim::after {
  width: min(40vw, 540px);
  height: min(40vw, 540px);
  right: -6vw;
  bottom: -24vw;
  background: radial-gradient(circle, rgba(232,148,90,0.36) 0%, rgba(232,148,90,0) 66%);
  animation: v3p-drift-b 34s ease-in-out infinite alternate;
}
@keyframes v3p-drift-a { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw, 6vw) scale(1.18); } }
@keyframes v3p-drift-b { from { transform: translate(0,0) scale(1); } to { transform: translate(-10vw, -5vw) scale(1.2); } }
@media (max-width: 700px) {
  .hero-slim::before, .hero-slim::after { filter: blur(40px); }
}
.hero-slim .section-label {
  display: block;
  margin-bottom: 1.1rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--on-arancio-chiaro) !important;
}
.hero-slim h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 600;
  max-width: 820px;
  margin-bottom: 1rem;
}
.hero-slim p {
  margin-left: 0;
  max-width: 620px;
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
  color: rgba(255,255,255,0.78);
}

/* Etichette di sezione: serif arancio con il filetto, come "01 ──" nella home. */
main .section .section-label,
main .section-alt .section-label,
main .section-grigio .section-label,
main .section-dark .section-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--on-arancio);
  margin-bottom: 0.9rem;
}
main .section-label::after {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  margin-left: 0.75rem;
  vertical-align: middle;
  background: var(--on-arancio);
}
main .divider-accent { display: none; }

.section-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.section-lead { font-size: clamp(1.02rem, 1.9vw, 1.15rem); }
.section { padding: clamp(3.5rem, 9vh, 6.5rem) clamp(1rem, 5vw, 3.5rem); }
.section-inner { max-width: 1140px; }

/* Numeri in serif, come nella home. */
.stat-value,
.service-price strong,
.loss-examples strong,
.loss-total strong,
.card-price strong {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.stat-value { font-size: clamp(2.2rem, 4.5vw, 3rem); color: var(--on-teal); }
.section-dark .stat-value { color: var(--on-arancio); }

/* Schede piu' leggere: meno cornice, piu' aria. */
.card { border-color: rgba(32,43,54,0.1); padding: 2rem; }
.card h3 { font-size: 1.25rem; }
.card-icon { background: transparent; border: 1px solid rgba(31,91,94,0.25); }

/* Riquadri "fa per te / come paghi": titoli in serif grandi. */
.fit-col h3, .pay-terms h3 { font-size: 1.35rem; }

/* Citazioni in serif corsivo grande, come "Chi c'e' dietro". */
.about-quote {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: var(--on-blu-notte);
}

/* Chiusura: come la home. */
.cta-banner h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.cta-banner .btn-primary { padding: 0.95rem 1.9rem; font-size: 1.05rem; }

@media (max-width: 700px) {
  .hero-slim h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* ── Testi centrati ──────────────────────────────────────── */
.hero-slim { text-align: center; padding-left: clamp(1rem, 5vw, 3.5rem); }
.hero-slim > * { margin-left: auto; margin-right: auto; }
.hero-slim p { margin-left: auto; margin-right: auto; }
main .section-inner > .section-label { display: block; text-align: center; }
main .section-inner > .section-label::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: middle;
  background: var(--on-arancio);
}
main .section-inner > .section-title { text-align: center; }
main .section-inner > .section-lead { margin-left: auto; margin-right: auto; text-align: center; }
main .section-inner > .result-disclaimer { text-align: center; }
.about-quote { text-align: center; }
.quote-author { justify-content: center; }

/* ── Login clienti: pulsante con icona, ben visibile ─────── */
.site-nav .nav-links a[href*="area-clienti"] {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.95rem 0.38rem 0.75rem;
  border: 1.5px solid rgba(244,196,155,0.75);
  border-radius: 999px;
  color: var(--on-arancio-chiaro);
  font-weight: 700;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.site-nav .nav-links a[href*="area-clienti"]::before,
.nav-mobile a[href*="area-clienti"]::before,
.nav-login-icon::before {
  content: "";
  flex: 0 0 1.05em;
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-nav .nav-links a[href*="area-clienti"]:hover {
  background: var(--on-arancio-chiaro);
  border-color: var(--on-arancio-chiaro);
  color: var(--on-blu-notte);
}
.nav-mobile a[href*="area-clienti"] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0;
  padding: 0.7rem 1rem;
  border: 1.5px solid rgba(244,196,155,0.75);
  border-radius: 10px;
  color: var(--on-arancio-chiaro);
  font-weight: 700;
}
/* Sotto i 980 px il menu e' un hamburger: il login resta visibile come icona accanto al CTA. */
.nav-login-icon { display: none; }
@media (max-width: 980px) {
  .nav-login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    border: 1.5px solid rgba(244,196,155,0.75);
    border-radius: 50%;
    color: var(--on-arancio-chiaro);
  }
  .nav-login-icon::before { width: 18px; height: 18px; flex-basis: 18px; }
  .nav-login-icon + .nav-cta { margin-left: 0; }
}
@media (max-width: 380px) { .nav-login-icon { display: none; } }

/* ── Contenuti centrati nella pagina, senza vuoto a destra ── */
.resource-list { margin-left: auto; margin-right: auto; }
main .section-inner > .article-card-link { display: block; text-align: center; margin-top: 1.5rem; }
.contact-grid { align-items: center; }

/* ══════════════════════════════════════════════════════════
   Sfondi delle sezioni: stesso linguaggio dell'eroe, senza rubargli la scena.
   Sezioni chiare: aloni di colore molto tenui e fermi, specchiati da una sezione all'altra.
   Sezioni scure e chiusura: aloni sfocati in lento movimento e trama di linee.
   Si usa solo background-image, cosi' i colori di base non cambiano.
   ══════════════════════════════════════════════════════════ */

/* Chiare: crema di base */
main .section:not(.section-dark):not(.section-alt):not(.section-grigio):not(.v3-section-loss):not(.v3-section-path):not(.v3-section-who):not(.v3-section-dark),
main .v3-section:not(.v3-section-dark):not(.v3-section-loss):not(.v3-section-path):not(.v3-section-who) {
  background-image:
    radial-gradient(52rem 26rem at 104% -6%, rgba(31,91,94,0.085), transparent 70%),
    radial-gradient(46rem 24rem at -6% 106%, rgba(232,148,90,0.12), transparent 70%);
}
main > section:nth-of-type(even):not(.section-dark):not(.section-alt):not(.section-grigio):not(.v3-section-loss):not(.v3-section-path):not(.v3-section-who):not(.v3-section-dark) {
  background-image:
    radial-gradient(52rem 26rem at -4% -6%, rgba(31,91,94,0.085), transparent 70%),
    radial-gradient(46rem 24rem at 106% 106%, rgba(232,148,90,0.12), transparent 70%);
}

/* Sabbia: aloni piu' caldi e una trama di puntini */
main .section-alt,
main .v3-section-path {
  background-image:
    radial-gradient(rgba(32,43,54,0.075) 1px, transparent 1.3px),
    radial-gradient(50rem 28rem at 0% 0%, rgba(255,255,255,0.55), transparent 70%),
    radial-gradient(46rem 26rem at 100% 100%, rgba(31,91,94,0.10), transparent 70%);
  background-size: 22px 22px, auto, auto;
}

/* Grigio chiaro: lavaggio teal e tratteggio */
main .section-grigio {
  background-image:
    repeating-linear-gradient(135deg, rgba(31,91,94,0.05) 0 1px, transparent 1px 16px),
    radial-gradient(50rem 26rem at 100% 0%, rgba(31,91,94,0.10), transparent 70%);
}

/* Perdita: rosato con tratteggio diagonale e un punto di luce */
main .v3-section-loss {
  background-image:
    repeating-linear-gradient(135deg, rgba(169,58,42,0.05) 0 1px, transparent 1px 16px),
    radial-gradient(46rem 26rem at 0% 0%, rgba(255,255,255,0.65), transparent 70%),
    radial-gradient(40rem 24rem at 100% 100%, rgba(169,58,42,0.10), transparent 70%);
}

/* Bianca ("Chi c'e' dietro"): lavaggio caldo da un lato e teal dall'altro */
main .v3-section-who {
  background-image:
    radial-gradient(48rem 26rem at 100% 0%, rgba(232,148,90,0.13), transparent 70%),
    radial-gradient(48rem 26rem at 0% 100%, rgba(31,91,94,0.09), transparent 70%);
}

/* Scure e chiusura: aloni in movimento + trama */
main .section-dark,
main .v3-section-dark,
.cta-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
}
main .section-dark > *,
main .v3-section-dark > *,
.cta-banner > * { position: relative; z-index: 1; }

main .section-dark::before, main .section-dark::after,
main .v3-section-dark::before, main .v3-section-dark::after,
.cta-banner::before, .cta-banner::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform;
}

main .section-dark::before, main .v3-section-dark::before {
  width: min(50vw, 680px); height: min(50vw, 680px);
  right: -10vw; top: -20vw;
  background: radial-gradient(circle, rgba(31,91,94,0.80) 0%, rgba(31,91,94,0) 66%);
  animation: v3s-drift-a 30s ease-in-out infinite alternate;
}
main .section-dark::after, main .v3-section-dark::after {
  width: min(40vw, 560px); height: min(40vw, 560px);
  left: -8vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(232,148,90,0.32) 0%, rgba(232,148,90,0) 66%);
  animation: v3s-drift-b 36s ease-in-out infinite alternate;
}

/* Chiusura teal: un alone chiaro caldo e uno piu' scuro */
.cta-banner::before {
  width: min(46vw, 620px); height: min(46vw, 620px);
  left: -8vw; top: -16vw;
  background: radial-gradient(circle, rgba(244,196,155,0.30) 0%, rgba(244,196,155,0) 66%);
  animation: v3s-drift-a 32s ease-in-out infinite alternate;
}
.cta-banner::after {
  width: min(44vw, 600px); height: min(44vw, 600px);
  right: -8vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(15,28,38,0.55) 0%, rgba(15,28,38,0) 66%);
  animation: v3s-drift-b 38s ease-in-out infinite alternate;
}

@keyframes v3s-drift-a { from { transform: translate(0,0) scale(1); } to { transform: translate(-7vw, 5vw) scale(1.2); } }
@keyframes v3s-drift-b { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw, -4vw) scale(1.18); } }

@media (max-width: 700px) {
  main .section-dark::before, main .section-dark::after,
  main .v3-section-dark::before, main .v3-section-dark::after,
  .cta-banner::before, .cta-banner::after { filter: blur(44px); }
}

/* Titoli bilanciati: niente parola sola nell'ultima riga. */
.v3 h1, .v3 h2, .section-title, .hero-slim h1, .cta-banner h2, .v3-signals h3, .v3-path h3 {
  text-wrap: balance;
}
.v3-head { max-width: 820px; }

/* ── Contatti: blocchi impilati e centrati, nessuna area vuota ── */
.contact-block {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: none;
  margin: 2.25rem 0 2rem;
}
.contact-block .contact-item { gap: 0.8rem; padding: 1.1rem 1.15rem; word-break: break-word; }
.contact-block .contact-item svg { flex: 0 0 22px; }
main .section-inner > .section-lead + .section-lead { margin-top: 0.9rem; }
.contact-block .contact-item { height: 100%; }
.contact-block .contact-item-featured {
  grid-column: 1 / -1;
  justify-content: center;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
  font-size: 1.05rem;
}
.next-steps {
  padding: 2rem clamp(1.25rem, 3vw, 2.5rem) 2.25rem;
  background: #fff;
  border: 1px solid rgba(31,91,94,0.14);
  border-top: 3px solid var(--on-teal);
  border-radius: var(--radius);
}
.next-steps h3 { margin-bottom: 1.5rem; text-align: center; font-size: 1.35rem; }
.next-steps-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
}
.next-step { text-align: center; }
.next-step .step-number {
  width: 36px; height: 36px; margin: 0 auto 0.75rem;
  font-size: 0.95rem; flex-shrink: 0;
}
.next-step h4 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.next-step p { font-size: 0.92rem; line-height: 1.55; margin: 0; }
main .section-inner > .contact-legal { text-align: center; margin-top: 1.75rem; }
@media (max-width: 900px) {
  .contact-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .contact-block { grid-template-columns: 1fr; }
  .next-steps-row { grid-template-columns: 1fr; }
}

/* Login su telefono: lucchetto + parola, cosi' si capisce a cosa serve. */
@media (max-width: 980px) {
  .nav-login-icon {
    width: auto;
    height: 34px;
    gap: 0.35rem;
    padding: 0 0.75rem 0 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
  }
  .nav-login-icon::before { width: 15px; height: 15px; flex-basis: 15px; }
  .nav-login-icon::after { content: "Login"; }
}

/* ── Guide: colonna di lettura centrata nella pagina ── */
.article-body { margin-left: auto; margin-right: auto; }
.article-body > .article-meta { display: block; text-align: center; }
.breadcrumb-nav { text-align: center; }
.section-inner.article-body { max-width: 720px; }

/* ── Stessa scala della home (servizi, chi siamo, risultati, contatti, risorse) ──
   Da 901 px di larghezza testi e spazi seguono l'altezza della finestra, così il
   carattere è lo stesso passando da una pagina all'altra: 16px da circa 710 px di
   altezza in su, fino a 11,5px sotto i 510 px. Le sezioni hanno l'altezza del loro
   contenuto, senza vuoti sopra e sotto, e si scorrono come sempre, senza aggancio. */
@media (min-width: 901px) {
  html:has(link[href*="pages-v3.css"]) { font-size: clamp(11.5px, min(2.25vh, 1.15vw), 16px); }
  main > .hero-slim { padding-top: clamp(1.5rem, 5vh, 4rem); padding-bottom: clamp(1.5rem, 5vh, 4rem); }
  main > .section {
    padding-top: clamp(2rem, 6vh, 4rem);
    padding-bottom: clamp(2rem, 6vh, 4rem);
  }
  main > .section > .section-inner { max-width: 1320px; margin-left: auto; margin-right: auto; }
  main > .section > .section-inner.article-body { max-width: 720px; }
  /* Chi siamo: testo e ritratto affiancati, con il ritratto che si adatta all'altezza dello schermo. */
  .about-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr); align-items: center; }
  .about-grid .founder-profile { grid-row: 1; align-self: center; }
  .about-grid .founder-profile-media { flex: none; height: clamp(260px, calc(100svh - var(--nav-h) - 17rem), 520px); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  html:has(link[href*="pages-v3.css"]) { font-size: clamp(11.5px, min(2.25vh, 1.3vw), 16px); }
}

/* Card dei servizi: le righe (titolo, descrizione, prezzo, elenco, pulsante) si
   allineano tra le tre card con una griglia condivisa, senza altezze minime fisse
   che lasciavano vuoti dentro le card. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .grid-3:has(> .service-card) { grid-auto-rows: auto; }
    .grid-3 > .service-card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 7;
      row-gap: 0;
      align-content: start;
    }
    .grid-3 > .service-card > * { min-width: 0; }
    .grid-3 > .service-card > .btn { grid-row: 7; margin-top: 0; align-self: end; justify-self: start; }
    .service-card h3,
    .service-card-desc,
    .service-price .price-note { min-height: 0; }
  }
}

/* Esempi di guadagno perso (Servizi): quattro schede in riga, due per riga fino a 1180 px. */
@media (min-width: 701px) and (max-width: 1180px) {
  .service-anchor-grid.loss-examples { grid-template-columns: repeat(2, 1fr); }
}

/* Aggancio dentro le sezioni lunghe di Servizi: oltre all'inizio della sezione, anche il riquadro
   del costo di non intervenire e le tre card dei prezzi, con un po' di aria sotto la barra.
   Solo con mouse o touchpad, come l'aggancio di style.css. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main > .section .service-anchor,
  main > .section .grid-3:has(> .service-card) {
    scroll-snap-align: start;
    scroll-margin-top: clamp(0.8rem, 2.5vh, 1.8rem);
  }
}

/* Griglie che non si allargano oltre lo schermo (2026-10-24). Le colonne "1fr" si allargavano
   per il contenuto più largo: a 320 px il totale "−114.000 € a stagione", che non va a capo,
   spingeva fuori a destra tutto il riquadro del costo di non intervenire; a 768 px la riga delle
   quattro schede sforava di 2 px. */
.service-anchor > *,
.service-anchor-grid > *,
.grid-4 > * { min-width: 0; }
@media (max-width: 480px) {
  .loss-examples .loss-total strong { white-space: normal; }
}

/* Guide Risorse (2026-10-25, indicazione della Direzione). Solo nelle guide, riconoscibili dal
   percorso "Home · Risorse" sopra il main. Etichette di sezione come quella in cima alla pagina
   (maiuscoletto sans, piccolo, arancio), con le lineette sempre ai lati anche se il testo va a
   capo; paragrafo d'apertura nello stesso font del resto del testo, solo più grande e più scuro. */
.breadcrumb-nav ~ main .section-inner > .section-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--on-arancio);
}
.breadcrumb-nav ~ main .section-inner > .section-label::before,
.breadcrumb-nav ~ main .section-inner > .section-label::after {
  content: "";
  flex: 0 0 2rem;
  width: 2rem;
  height: 1px;
  margin: 0;
  background: currentColor;
}
.breadcrumb-nav ~ main .article-lead {
  font-family: inherit;
  font-size: clamp(1.05rem, 2vw, 1.15rem);
  line-height: 1.65;
  color: var(--on-blu-notte);
}
/* Sul telefono l'etichetta può andare su due righe: niente lineette ai lati, una lineetta corta
   centrata sotto il testo. */
@media (max-width: 600px) {
  .breadcrumb-nav ~ main .section-inner > .section-label { display: block; }
  .breadcrumb-nav ~ main .section-inner > .section-label::before { display: none; }
  .breadcrumb-nav ~ main .section-inner > .section-label::after {
    display: block;
    width: 2rem;
    margin: 0.55rem auto 0;
  }
}