/* ============================================================================
   SITE — Studio Giorgino, Lecce
   ----------------------------------------------------------------------------
   Impianto `manifesto` con respiro `compatto` e forma `spigolo`: tipografia
   grande sui titoli, ma sotto ogni titolo la pagina resta densa. Nessun
   raggio, filetti da un pixel, superfici piatte.

   La palette viene dal marchio (rosso #9a1b1f): l'accento sta sui titoli,
   sugli occhielli e sui pulsanti; il corpo del testo resta neutro. È la
   regola che tiene vuoto `corpo_saturo` nel controllo di leggibilità.
   ========================================================================= */

/* ——— Impostazioni generali ——————————————————————————————————————————————— */

body {
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-weight: 600;
}

::selection {
  background: var(--accento);
  color: var(--su-accento);
}

/* Il grigio del template era pensato per famiglie diverse: con Figtree 400
   su bianco il testo lungo regge meglio a peso pieno. */
.testo-lungo p + p {
  margin-top: 0.9em;
}

.sommario {
  color: var(--testo-tenue);
  font-size: var(--t-h4);
  line-height: 1.6;
}

/* `.u-nota` in base.css usa color-mix() per lo sfondo: il misuratore di
   leggibilità legge quel valore come `color(srgb …)` e lo scambia per un
   fondo scuro, segnalando un falso sotto-soglia. Stesso aspetto, tinta
   piatta, misura corretta. */
.u-nota {
  background: #e8eaee;
  color: var(--testo);
  margin-top: var(--spazio-blocco);
}

.su-scuro .u-nota {
  background: #262a31;
  color: var(--su-scuro);
}

/* ——— Occhielli di sezione ———————————————————————————————————————————————
   L'accento è qui, dove è grande e distanziato: non nel corpo del testo. */

.occhiello {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-titoli);
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accento);
}

.occhiello__num {
  padding: 0.15rem 0.45rem;
  border: var(--bordo-spessore) solid var(--accento);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.occhiello--chiaro {
  color: var(--accento-chiaro);
}

.occhiello--chiaro .occhiello__num {
  border-color: var(--accento-chiaro);
}

/* ——— Pulsanti — larghi quanto il testo, mai quanto la colonna ——————————— */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.7rem 1.4rem;
  border: var(--bordo-spessore) solid var(--accento);
  border-radius: var(--raggio-interattivo);
  font-family: var(--font-titoli);
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--durata-breve) var(--curva),
              color var(--durata-breve) var(--curva),
              border-color var(--durata-breve) var(--curva);
}

.bottone--pieno {
  background: var(--accento);
  color: var(--su-accento);
}

.bottone--pieno:hover {
  background: var(--accento-scuro);
  border-color: var(--accento-scuro);
}

.bottone--vuoto {
  background: transparent;
  color: var(--accento);
}

.bottone--vuoto:hover {
  background: var(--accento);
  color: var(--su-accento);
}

.su-scuro .bottone--vuoto {
  color: var(--su-scuro);
  border-color: var(--su-scuro);
}

/* ——— Intestazione ————————————————————————————————————————————————————————
   Sticky, tinta piena (niente backdrop-filter: creerebbe un containing block
   e il menu mobile è volutamente fuori dall'header). */

[data-sito-header] {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fondo);
  border-bottom: var(--bordo-spessore) solid var(--bordo-tenue);
}

.intestazione {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
}

.marchio {
  display: block;
  flex-shrink: 0;
  margin-right: auto;
}

.marchio img {
  width: 200px;
  height: auto;
}

.menu {
  display: none;
  gap: 1.35rem;
}

.menu a {
  position: relative;
  padding-block: 0.35rem;
  font-family: var(--font-titoli);
  font-size: var(--t-piccolo);
  font-weight: 500;
  text-decoration: none;
  color: var(--testo);
}

/* Il filetto sotto la voce cresce da sinistra: è l'unica micro-interazione
   dell'header, e riprende i filetti rossi che il loro sito usa sotto i
   titoli di sezione. */
.menu a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--accento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--durata-breve) var(--curva);
}

.menu a:hover::after,
.menu a:focus-visible::after {
  transform: scaleX(1);
}

.intestazione__cta {
  display: none;
}

.apri-menu {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--bordo-spessore) solid var(--bordo);
  flex-shrink: 0;
}

.apri-menu__barre,
.apri-menu__barre::before,
.apri-menu__barre::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--testo);
}

.apri-menu__barre {
  position: relative;
}

.apri-menu__barre::before,
.apri-menu__barre::after {
  content: '';
  position: absolute;
  left: 0;
}

.apri-menu__barre::before { top: -6px; }
.apri-menu__barre::after  { top: 6px; }

/* ——— Menu mobile a tutto schermo ——————————————————————————————————————— */

#menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  align-content: center;
  padding: var(--gronda);
  background: var(--scuro);
  color: var(--su-scuro);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--durata) var(--curva),
              visibility var(--durata) var(--curva);
}

.menu-aperto #menu-mobile {
  opacity: 1;
  visibility: visible;
}

.menu-aperto {
  overflow: hidden;
}

#menu-mobile ul {
  display: grid;
  gap: 0.4rem;
}

#menu-mobile a {
  display: block;
  padding-block: 0.55rem;
  border-bottom: var(--bordo-spessore) solid #3a3f47;
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  font-weight: 500;
  text-decoration: none;
  color: var(--su-scuro);
}

.menu-aperto .apri-menu__barre {
  background: transparent;
}

/* ——— 1 · Apertura tipografica ————————————————————————————————————————————
   Nessuna immagine: il titolo È l'immagine. La coda (sottotitolo + numeri)
   è la riga di contesto che la scala `media` richiede. */

.apertura {
  padding-block: clamp(3rem, 2rem + 7vw, 7rem) var(--spazio-sezione);
  border-bottom: var(--bordo-spessore) solid var(--bordo-tenue);
}

.apertura__claim {
  max-width: 20ch;
  margin-bottom: clamp(1.75rem, 1rem + 3vw, 3rem);
  font-size: var(--t-h1);
  font-weight: 600;
  text-wrap: balance;
}

.apertura__coda {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-top: var(--bordo-spessore) solid var(--bordo);
}

.apertura__sottotitolo {
  max-width: 46rem;
  font-size: var(--t-h4);
  line-height: 1.62;
  color: var(--testo-tenue);
}

.numeri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.numeri__voce {
  padding: 0.9rem 0.9rem 1rem;
  border: var(--bordo-spessore) solid var(--bordo-tenue);
  border-top: 2px solid var(--accento);
}

.numeri dt {
  font-size: var(--t-piccolo);
  line-height: 1.35;
  color: var(--testo-tenue);
}

.numeri dd {
  margin: 0.35rem 0 0;
  font-family: var(--font-titoli);
  line-height: 1;
  color: var(--accento);
}

.numeri__cifra {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.numeri__piu {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  font-weight: 500;
}

.apertura__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Il filo rosso che si allunga con lo scroll: unico dettaglio grafico
   dell'apertura, come chiede l'asse `solo-tipografia`. */
.apertura__filo {
  margin-top: clamp(1.75rem, 1rem + 3vw, 3rem);
  height: 3px;
  background: var(--bordo-tenue);
}

.apertura__filo span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accento);
  transform: scaleX(0);
  transform-origin: left;
}

/* Senza JS o con movimento ridotto il filo resta pieno, non a zero. */
html:not(.js-movimento) .apertura__filo span {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .apertura__filo span {
    transform: scaleX(1) !important;
  }
}

/* ——— Sezioni e fasce —————————————————————————————————————————————————— */

.fascia-alt {
  background: var(--fondo-alt);
  border-block: var(--bordo-spessore) solid var(--bordo-tenue);
}

.pannello-scuro {
  background: var(--scuro);
}

.due-colonne {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: start;
}

/* Testata di sezione: titolo a sinistra, riga di contesto a destra. Con
   l'impianto `manifesto` un h2 grande da solo lascia mezza riga vuota sul
   desktop — visto a schermo. Qui quello spazio lo occupa il contenuto. */
.testata {
  display: grid;
  gap: 0.75rem;
  margin-bottom: var(--spazio-blocco);
}

.testata h2 {
  margin-bottom: 0;
}

/* Il seguito del testo dello studio, sotto la foto e su tutta la larghezza:
   tenerlo nella colonna di sinistra lasciava mezza pagina bianca a destra
   sotto l'immagine — visto a schermo sul primo scatto. */
.testo-doppio {
  display: grid;
  gap: 0.9rem;
  margin-top: var(--spazio-blocco);
  padding-top: var(--spazio-blocco);
  border-top: var(--bordo-spessore) solid var(--bordo-tenue);
}

.testo-doppio p {
  color: var(--testo-tenue);
}

.figura {
  margin: 0;
  border: var(--bordo-spessore) solid var(--bordo-tenue);
}

.figura img {
  width: 100%;
  height: auto;
}

.figura figcaption {
  padding: 0.7rem 0.9rem;
  border-top: var(--bordo-spessore) solid var(--bordo-tenue);
  font-size: var(--t-piccolo);
  line-height: 1.5;
  color: var(--testo-tenue);
}

/* ——— Griglie di schede ——————————————————————————————————————————————————
   Superfici piatte con filetto d'accento in testa: la forma `spigolo` non
   ammette raggi né ombre, quindi la gerarchia la fa il bordo. */

.griglia-3,
.griglia-4 {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--spazio-blocco);
}

.scheda {
  padding: 1.15rem 1.15rem 1.35rem;
  background: var(--fondo);
  border: var(--bordo-spessore) solid var(--bordo-tenue);
  border-top: 2px solid var(--accento);
  transition: border-color var(--durata-breve) var(--curva),
              transform var(--durata-breve) var(--curva);
}

.scheda:hover {
  border-color: var(--bordo);
  border-top-color: var(--accento-scuro);
  transform: translateY(-2px);
}

.scheda h3 {
  margin-bottom: 0.5rem;
  font-size: var(--t-h4);
}

.scheda p {
  font-size: var(--t-piccolo);
  line-height: 1.7;
  color: var(--testo-tenue);
}

/* ——— 4 · Le nove aree ————————————————————————————————————————————————————
   Sul loro sito questo contenuto sta nel retro di una flip-box che si apre
   solo con l'hover del mouse: invisibile sul telefono e per i motori. Qui è
   un <details>, che si apre col dito e da tastiera, e il testo resta nel
   DOM anche da chiuso. */

.aree {
  display: grid;
  margin-top: var(--spazio-blocco);
  border-top: var(--bordo-spessore) solid var(--bordo);
}

.area {
  border-bottom: var(--bordo-spessore) solid var(--bordo-tenue);
}

.area summary {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1rem 0.25rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--durata-breve) var(--curva),
              padding-inline var(--durata-breve) var(--curva);
}

.area summary::-webkit-details-marker {
  display: none;
}

.area summary:hover {
  background: var(--fondo-alt);
  padding-inline: 0.7rem;
}

.area__num {
  flex-shrink: 0;
  font-family: var(--font-titoli);
  font-size: var(--t-piccolo);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--accento);
}

.area__nome {
  flex: 1;
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--interlinea-titoli);
}

.area__conta {
  flex-shrink: 0;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}

/* La croce che diventa meno: segnale di stato, non decorazione. */
.area summary::after {
  content: '';
  flex-shrink: 0;
  align-self: center;
  width: 0.85rem;
  height: 0.85rem;
  background:
    linear-gradient(var(--accento), var(--accento)) center/100% 2px no-repeat,
    linear-gradient(var(--accento), var(--accento)) center/2px 100% no-repeat;
  transition: transform var(--durata) var(--curva);
}

.area details[open] summary::after {
  transform: rotate(45deg);
  background:
    linear-gradient(var(--accento), var(--accento)) center/100% 2px no-repeat;
}

.area__corpo {
  padding: 0 0.25rem 1.4rem;
}

.area__corpo > p {
  max-width: var(--larghezza-lettura);
  margin-bottom: 0.9rem;
  color: var(--testo-tenue);
}

.prestazioni {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.prestazioni li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-piccolo);
  line-height: 1.65;
}

.prestazioni li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 2px;
  background: var(--accento);
}

/* ——— 5 · I quattro passi ————————————————————————————————————————————————
   Il filo verticale si riempie con lo scroll (ScrollTrigger `scrub`): è la
   metafora giusta per un percorso in quattro tappe, e non è decorazione
   applicata a caso. */

.passi-guscio {
  position: relative;
  margin-top: var(--spazio-blocco);
  padding-left: 3.25rem;
}

.passi__filo {
  position: absolute;
  left: 1.24rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: var(--bordo-tenue);
}

.passi__filo span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accento);
  transform: scaleY(0);
  transform-origin: top;
}

html:not(.js-movimento) .passi__filo span {
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .passi__filo span {
    transform: scaleY(1) !important;
  }
}

.passi {
  display: grid;
  gap: 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passo {
  position: relative;
}

.passo__num {
  position: absolute;
  left: -3.25rem;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--fondo-alt);
  border: 2px solid var(--accento);
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1;
  color: var(--accento);
}

.passo__testo h3 {
  margin-bottom: 0.4rem;
  font-size: var(--t-h4);
  padding-top: 0.35rem;
}

.passo__testo p {
  max-width: 44rem;
  font-size: var(--t-piccolo);
  line-height: 1.72;
  color: var(--testo-tenue);
}

/* ——— 6 · Pannello scuro —————————————————————————————————————————————————
   `.su-scuro` (pavimento) porta inchiostro, inchiostro tenue e anello di
   focus. Qui si aggiunge solo il fondo e l'elenco. */

.elenco-nudo {
  display: grid;
  gap: 0;
  border-top: var(--bordo-spessore) solid #3a3f47;
}

.elenco-nudo li {
  padding: 0.7rem 0 0.7rem 1.4rem;
  position: relative;
  border-bottom: var(--bordo-spessore) solid #3a3f47;
  font-size: var(--t-piccolo);
  line-height: 1.55;
}

.elenco-nudo li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.25em;
  width: 0.6rem;
  height: 2px;
  background: var(--accento-chiaro);
}

/* ——— 7 · La visione ————————————————————————————————————————————————————— */

.visione {
  border-bottom: var(--bordo-spessore) solid var(--bordo-tenue);
}

/* L'immagine è più alta del suo riquadro (124% contro 100%, agganciata a
   -12%): è il margine di manovra che serve alla parallasse per scorrere
   senza scoprire mai una fascia vuota sopra o sotto. */
.visione__foto {
  position: relative;
  overflow: hidden;
  height: clamp(9rem, 22vw, 15rem);
}

.visione__foto img {
  position: absolute;
  inset-inline: 0;
  top: -12%;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center 62%;
  will-change: transform;
}

.visione__testo {
  padding-block: var(--spazio-sezione);
}

.visione__testo h2 {
  max-width: 22ch;
  color: var(--accento);
}

/* ——— 10 · Contatti ——————————————————————————————————————————————————————— */

.contatti {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  margin-top: var(--spazio-blocco);
  align-items: start;
}

.scheda-contatti {
  font-style: normal;
  border-top: 2px solid var(--accento);
}

.scheda-contatti__riga {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.5rem 1rem;
  padding: 0.8rem 0;
  border-bottom: var(--bordo-spessore) solid var(--bordo-tenue);
  font-size: var(--t-piccolo);
  line-height: 1.6;
}

.scheda-contatti__et {
  font-family: var(--font-titoli);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accento);
}

.scheda-contatti a {
  color: var(--testo);
  text-decoration-color: var(--accento);
}

.contatti__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--spazio-blocco);
}

.contatti__mappa {
  border: var(--bordo-spessore) solid var(--bordo-tenue);
  line-height: 0;
}

.contatti__mappa iframe {
  display: block;
  width: 100%;
  height: clamp(16rem, 40vw, 24rem);
  border: 0;
}

/* ——— Domande frequenti ————————————————————————————————————————————————— */

.domande {
  display: grid;
  margin-top: var(--spazio-blocco);
  border-top: var(--bordo-spessore) solid var(--bordo);
}

.domande > li {
  border-bottom: var(--bordo-spessore) solid var(--bordo-tenue);
}

.domande summary {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.95rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: var(--interlinea-titoli);
  transition: background var(--durata-breve) var(--curva),
              padding-inline var(--durata-breve) var(--curva);
}

.domande summary::-webkit-details-marker {
  display: none;
}

.domande summary:hover {
  background: var(--fondo-alt);
  padding-inline: 0.7rem;
}

.domande summary::after {
  content: '';
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
  width: 0.85rem;
  height: 0.85rem;
  background:
    linear-gradient(var(--accento), var(--accento)) center/100% 2px no-repeat,
    linear-gradient(var(--accento), var(--accento)) center/2px 100% no-repeat;
  transition: transform var(--durata) var(--curva);
}

.domande details[open] summary::after {
  transform: rotate(45deg);
  background:
    linear-gradient(var(--accento), var(--accento)) center/100% 2px no-repeat;
}

.domande .area__corpo p {
  max-width: var(--larghezza-lettura);
  font-size: var(--t-piccolo);
  line-height: 1.72;
  color: var(--testo-tenue);
}

.domande .area__corpo a {
  color: var(--testo);
  text-decoration-color: var(--accento);
}

/* ——— Piede pagina ———————————————————————————————————————————————————————
   Il loro piede è rosso pieno con il logo in negativo: quell'identità resta,
   ed è il posto giusto per il logo bianco che hanno già disegnato. */

.pie {
  padding-top: var(--spazio-sezione);
  background: var(--accento);
  /* Sul rosso il tenue standard fa 4,41:1: qui serve un grigio più chiaro. */
  --su-scuro-tenue: #dfe2e7;
}

.pie__griglia {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  padding-bottom: var(--spazio-blocco);
}

.pie img {
  width: 230px;
  height: auto;
}

.pie__riga {
  margin-top: 0.9rem;
  max-width: 26rem;
  font-size: var(--t-piccolo);
  line-height: 1.65;
  color: var(--testo-tenue);
}

.pie__nap {
  font-style: normal;
  font-size: var(--t-piccolo);
  line-height: 1.9;
}

.pie__menu {
  display: grid;
  gap: 0.3rem;
  font-size: var(--t-piccolo);
}

.pie a {
  color: var(--su-scuro);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.pie__menu a {
  text-decoration: none;
}

.pie__menu a:hover {
  text-decoration: underline;
}

.pie__coda {
  padding-block: 1rem;
  border-top: var(--bordo-spessore) solid rgba(255, 255, 255, 0.28);
}

.pie__coda p {
  color: var(--su-scuro-tenue);
  line-height: 1.6;
}

/* ——— Barra telefono fissa (solo mobile) ————————————————————————————————
   Sul loro sito il numero compare solo in fondo alla pagina, in grigio
   chiaro. Qui è sempre a portata di pollice. */

.barra-telefono {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.85rem 1rem;
  background: var(--accento);
  color: var(--su-accento);
  font-family: var(--font-titoli);
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
}

body {
  padding-bottom: 3.25rem;
}

.menu-aperto .barra-telefono {
  display: none;
}

/* ——— Sotto i 640px ——————————————————————————————————————————————————————
   A 375px il titolo di un'area («Area revisione nella Pubblica
   Amministrazione») e l'etichetta «10 prestazioni» si contendono la stessa
   riga e restano tre parole per rigo. Su schermo stretto la testata va su
   due righe: numero, conteggio e croce sopra, titolo per intero sotto. */

@media (max-width: 39.99em) {
  .area summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 0.7rem;
    row-gap: 0.35rem;
  }

  .area__num,
  .area__conta {
    grid-row: 1;
  }

  .area summary::after {
    grid-row: 1;
    grid-column: 3;
  }

  .area__nome {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: var(--t-h4);
  }

  /* Tre colonne dentro 375px: con il padding pieno «Prestazioni» andava a
     sbattere contro il bordo della sua scatola. */
  .numeri {
    gap: 0.5rem;
  }

  .numeri__voce {
    padding: 0.7rem 0.6rem 0.8rem;
  }

  .scheda-contatti__riga {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* ——— 640px —————————————————————————————————————————————————————————————— */

@media (min-width: 40em) {
  .numeri {
    max-width: 34rem;
  }

  .griglia-3,
  .griglia-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contatti {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }

  .pie__griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ——— 64em: desktop —————————————————————————————————————————————————————— */

@media (min-width: 64em) {
  body {
    padding-bottom: 0;
  }

  .barra-telefono {
    display: none;
  }

  .apri-menu {
    display: none;
  }

  .menu {
    display: flex;
  }

  .intestazione__cta {
    display: inline-flex;
    margin-left: 1.5rem;
  }

  .marchio img {
    width: 240px;
  }

  .apertura__coda {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }

  .numeri {
    max-width: none;
  }

  .testata {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: end;
  }

  .due-colonne {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .testo-doppio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }

  .passi {
    gap: 1.75rem;
  }

  .passo__testo p {
    max-width: 52rem;
  }

  .due-colonne--stretta {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  .griglia-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .griglia-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .prestazioni {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .area__corpo {
    padding-bottom: 1.75rem;
  }

  .pie__griglia {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  }
}