/* Pagina Servizi — direzione «F · Pulita» (servizi.html, en/services.html · fase 2, 30.09.2026).
   Si carica dopo css/proposta.css (testata, .aperto, chiusura, piede). Regole solo per <body class="pagina-servizi">.
   L'idea: la sezione «Cosa posso fare per te» della home, aperta. Tre aree su cemento, ognuna con l'icona
   lineare accanto al nome; ogni servizio è un pannello carta con l'anteprima (solo forma), chi fa il lavoro,
   il nome, una riga e la riga con la freccia. Sul telefono le schede di un'area diventano un pannello a righe.
   Le vecchie schede (.scheda--alta, --larga, --scura, .parti, anteprime con testo) sono state tolte: non le usa nessuno. */

/* ───────── Testa: come la home. Occhiello, titolo stretto grande; sotto la riga e, a destra, la Diagnosi ───────── */
.servizi-testa { padding-top: clamp(40px, 5.5vw, 88px); }
.servizi-testa .telaio { align-items: end; }
.servizi-testa__occhiello { font-size: var(--t-grande); font-weight: 500; color: var(--grafite); }
.servizi-testa__titolo {
  margin-top: var(--s-4);
  font-size: var(--t-pagina);
  font-weight: 800;
  font-stretch: var(--stretto);
  line-height: 0.92;
  letter-spacing: var(--tracking-poster);
}
.servizi-testa__riga {
  grid-column: 1 / span 6;
  grid-row: 3;
  margin-top: var(--s-7);
  max-width: 34em;
  font-size: var(--t-grande);
  line-height: 1.5;
  color: var(--grafite);
  text-wrap: pretty;
}

/* la Diagnosi: la porta per chi non sa da dove partire. Un pannello carta con la riga e la freccia, come in home */
.servizi-diagnosi {
  grid-column: 8 / -1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-5) var(--s-1);
  border-radius: var(--r-pannello);
  background: var(--carta);
  color: var(--inchiostro);
  text-decoration: none;
}
.servizi-diagnosi__testo { font-size: var(--t-piccolo); line-height: 1.5; color: var(--grafite); }
.servizi-diagnosi__testo strong { display: block; margin-bottom: var(--s-1); font-size: var(--t-medio); font-weight: 650; color: var(--inchiostro); }
.servizi-diagnosi__vai {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 52px;
  margin-top: var(--s-4);
  font-size: var(--t-medio);
  font-weight: 650;
  box-shadow: inset 0 1px 0 var(--tratto-chiaro);
}
.servizi-diagnosi__vai > span { color: var(--grigio); transition: transform var(--d-media) var(--curva), color var(--d-breve); }
.servizi-diagnosi:hover .servizi-diagnosi__vai { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.servizi-diagnosi:hover .servizi-diagnosi__vai > span,
.servizi-diagnosi:focus-visible .servizi-diagnosi__vai > span { color: var(--inchiostro); transform: translateX(4px); }

/* ───────── Le tre aree: il nome con l'icona, la riga accanto, poi le schede ───────── */
.servizi-area { padding-top: var(--s-9); }
.servizi-testa + .servizi-area { padding-top: var(--sezione-spazio); }
.area-fascia { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); }
.area-fascia__nome {
  display: flex;
  align-items: baseline;   /* la riga accanto si allinea alla linea di base del nome, non all'icona */
  gap: var(--s-3);
  font-size: var(--t-h3);
  font-weight: 750;
  font-stretch: var(--semistretto);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
/* l'icona della home: tratto inchiostro 1.6 arrotondato, un dettaglio arancio */
.area__icona { flex: none; align-self: center; width: 34px; height: 34px; fill: none; stroke: var(--inchiostro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.area__icona .segno-accento { stroke: var(--accento); stroke-width: 2.2; }
.area__icona .segno-accento-pieno { fill: var(--accento); stroke: none; }
.area-fascia__riga { font-size: var(--t-medio); line-height: 1.4; color: var(--grafite); }

.esempi__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--s-5);
}

/* ───────── La scheda: un pannello carta. Anteprima dentro con raggio concentrico (20 − 8 = 12) ───────── */
.scheda {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-2);
  border-radius: var(--r-pannello);
  background: var(--carta);
  color: var(--inchiostro);
  text-decoration: none;
}
.vista {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--r-controllo);
  background: var(--superficie-2);
  container-type: size;
}
.scheda__corpo { display: flex; flex: 1; flex-direction: column; padding: var(--s-4) var(--s-4) 0; }
/* chi fa il lavoro: la sola etichetta della pagina */
.scheda__ricevi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.4;
  color: var(--grafite);
}
/* «Caso reale»: il tag comune (grotesk su tavolo, raggio 8) */
.scheda__reale {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px var(--s-2);
  border-radius: var(--r-piccolo);
  background: var(--superficie-3);
  color: var(--inchiostro);
  font-weight: 600;
}
.scheda__nome {
  margin-top: var(--s-2);
  font-size: var(--t-area);
  font-weight: 750;
  font-stretch: var(--semistretto);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.scheda__riga { margin-top: var(--s-2); font-size: var(--t-piccolo); line-height: 1.5; color: var(--grafite); text-wrap: pretty; }
/* la riga con la freccia, come le voci della home */
.scheda__vai {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 52px;
  margin-top: auto;
  padding-top: 0;
  font-size: var(--t-piccolo);
  font-weight: 650;
  box-shadow: inset 0 1px 0 var(--tratto-chiaro);
}
.scheda__corpo > .scheda__riga { margin-bottom: var(--s-4); }
.scheda__vai > span[aria-hidden] { color: var(--grigio); transition: transform var(--d-media) var(--curva), color var(--d-breve); }
.scheda:hover .scheda__vai { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.scheda:hover .scheda__vai > span[aria-hidden],
.scheda:focus-visible .scheda__vai > span[aria-hidden] { color: var(--inchiostro); transform: translateX(4px); }

/* ───────── Anteprime disegnate: la forma di quello che ricevi, senza testo né numeri ───────── */
.vista--disegno { display: grid; place-items: center; padding: var(--s-4) var(--s-5); }
.vista--disegno svg { width: 100%; height: 100%; }
.dis-carta { fill: var(--carta); stroke: var(--inchiostro); stroke-width: 1.5; rx: 3px; }
.dis-carta--tenue { stroke: var(--tratto); }
.dis-linea { fill: var(--tratto-chiaro); rx: 1px; }
.dis-linea-p { fill: var(--tratto); }
.dis-ink { fill: var(--inchiostro); rx: 1px; }
.dis-accento { fill: var(--accento); rx: 1px; }
.dis-freccia { fill: none; stroke: var(--grigio); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dis-filo { fill: none; stroke: var(--tratto-chiaro); stroke-width: 1.5; }

/* foto: la sedia del caso reale, prima e dopo, intere e alla stessa altezza */
.vista--foto { --ar-prima: 0.75; --ar-dopo: 1.3393; display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
.foto {
  position: relative;
  flex: none;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-carta);
  background: var(--superficie-3);
  aspect-ratio: var(--ar-prima);
  height: min(100cqh - 2 * var(--s-4), (100cqw - 2 * var(--s-4) - var(--s-2)) / 2.0893);
}
.foto--dopo { aspect-ratio: var(--ar-dopo); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Prima / Dopo: cartellini sobri, nessun arancio (il dato è la foto) */
.cartellino {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 1px 6px;
  border-radius: var(--r-carta);
  background: var(--carta);
  color: var(--inchiostro);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
}
.cartellino--dopo { background: var(--inchiostro); color: var(--su-inchiostro); }

/* Brand identity kit: marchio, colori, carattere (le etichette le ha chieste l'utente il 29.09.2026) */
.vista--kit { display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.kit-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-5); width: 100%; max-width: 320px; }
.kit-mini__righe { display: grid; gap: var(--s-3); }
.kit-mini__gruppo { display: grid; gap: 5px; }
.kit-mini__gruppo--marchio { justify-items: center; }
.kit-mini__eti { font-size: var(--t-micro); font-weight: 500; color: var(--grafite); }
.kit-mini__marchio { display: grid; justify-items: center; }
.kit-mini__segno {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-controllo);
  background: var(--inchiostro);
  color: var(--su-inchiostro);
  font-size: 2.25rem;
  font-weight: 800;
  font-stretch: var(--stretto);
}
.kit-mini__colori { display: flex; overflow: hidden; border-radius: var(--r-cella); box-shadow: inset 0 0 0 1px var(--tratto-chiaro); }
.kit-mini__colori li { flex: 1; height: 26px; }
.kit-mini__c1 { background: var(--inchiostro); }
.kit-mini__c2 { background: var(--carta); box-shadow: inset 0 1px 0 var(--tratto-chiaro), inset 0 -1px 0 var(--tratto-chiaro); }
.kit-mini__c3 { background: var(--tavolo); }
.kit-mini__c4 { background: var(--grigio); }
.kit-mini__c5 { background: var(--accento); }
.kit-mini__font span { font-size: 2rem; font-weight: 750; font-stretch: var(--semistretto); }

/* ───────── Dopo l'elenco: la porta aperta (.aperto in proposta.css), poi una riga, poi la chiusura ───────── */
.servizi-aperto { padding-top: var(--s-9); }
.servizi-fine { padding-top: var(--s-5); }
.servizi-fine__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tocco);
  font-size: var(--t-grande);
  font-weight: 650;
  color: var(--inchiostro);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--tratto);
  text-underline-offset: 6px;
}
.servizi-fine__link:hover { text-decoration-color: var(--inchiostro); }
.servizi-fine__link > span { display: inline-block; transition: transform var(--d-media) var(--curva); }
.servizi-fine__link:hover > span { transform: translateX(3px); }

/* ───────── Computer piccolo e tablet ───────── */
@media (max-width: 1150px) {
  .servizi-testa__riga { grid-column: 1 / span 6; }
  .servizi-diagnosi { grid-column: 7 / -1; }
}
@media (max-width: 900px) {
  .servizi-testa__riga,
  .servizi-diagnosi { grid-column: 1 / -1; grid-row: auto; }
  .servizi-diagnosi { margin-top: var(--s-5); }
  .esempi__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────── Telefono: un blocco per schermata. Niente anteprime (a questa misura non dicono nulla):
   ogni area è il suo nome e un pannello carta a righe, come le categorie in home ───────── */
@media (max-width: 700px) {
  .servizi-testa { padding-top: var(--s-6); }
  .servizi-testa__occhiello { font-size: var(--t-medio); }
  .servizi-testa__riga { margin-top: var(--s-5); font-size: var(--t-medio); }
  .servizi-diagnosi { padding: var(--s-4) var(--s-4) 0; }
  .servizi-diagnosi__vai { margin-top: var(--s-3); }

  .servizi-area { padding-top: var(--s-8); }
  .area-fascia { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .area-fascia__nome { font-size: 1.625rem; }
  .area__icona { width: 28px; height: 28px; }
  .area-fascia__riga { font-size: var(--t-piccolo); }

  .esempi__lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: var(--s-4);
    padding: 0 var(--s-4);
    border-radius: var(--r-pannello);
    background: var(--carta);
  }
  .esempi__lista > li + li { box-shadow: inset 0 1px 0 var(--tratto-chiaro); }
  .scheda { padding: var(--s-4) 0 0; border-radius: 0; background: transparent; }
  .vista { display: none; }
  .scheda__corpo { padding: 0; }
  .scheda__nome { margin-top: var(--s-1); font-size: 1.25rem; }
  .scheda__riga { margin-top: var(--s-1); }
  .scheda__corpo > .scheda__riga { margin-bottom: 0; }
  .scheda__vai { min-height: var(--tocco); box-shadow: none; }

  .servizi-aperto { padding-top: var(--s-8); }
  .servizi-fine__link { font-size: var(--t-medio); }
}

/* ───────── Ritocchi 30.09.2026 (richiesta dell'utente) ─────────
   1. La Diagnosi risalta: pannello inchiostro, «Diagnosi →» come bottone carta. Arancio resta solo a Prenota.
   2. Ogni area sta nel suo campo tavolo (raggio --r-campo): la testa della pagina resta sul cemento,
      le tre aree si leggono come tre blocchi separati; le schede carta ci poggiano sopra.
   3. Edit foto: una macchina fotografica disegnata, come le altre anteprime (niente foto vere). */
.servizi-diagnosi { background: var(--inchiostro); color: var(--su-inchiostro); padding: var(--s-6) var(--s-6) var(--s-5); }
.servizi-diagnosi__testo { color: var(--su-scuro-tenue, #C4C8C1); font-size: var(--t-medio); }
.servizi-diagnosi__testo strong { color: var(--su-inchiostro); font-size: var(--t-area, 1.5rem); font-weight: 800; font-stretch: var(--semistretto); letter-spacing: -0.015em; line-height: 1.1; margin-bottom: var(--s-2); }
.servizi-diagnosi__vai {
  align-self: flex-start; justify-content: flex-start; gap: var(--s-3);
  min-height: var(--tocco); margin-top: var(--s-5); padding: 0 var(--s-5);
  border-radius: var(--r-controllo); background: var(--carta); color: var(--inchiostro); box-shadow: none;
  transition: background var(--d-breve);
}
.servizi-diagnosi__vai > span { color: var(--inchiostro); }
.servizi-diagnosi:hover .servizi-diagnosi__vai { text-decoration: none; background: var(--tavolo); }
.servizi-diagnosi:focus-visible { outline-color: var(--inchiostro); }

.servizi-area { padding-top: var(--s-5); }
.servizi-testa + .servizi-area { padding-top: var(--s-9); }
.area-campo { padding: var(--s-6) var(--s-6) var(--s-6); border-radius: var(--r-campo); background: var(--tavolo); }
.area-campo .esempi__lista { margin-top: var(--s-5); }
.area-campo .vista { background: var(--fondo); }

.dis-lente { fill: var(--carta); stroke: var(--inchiostro); stroke-width: 1.5; }
.dis-lente-in { fill: var(--tratto-chiaro); }

@media (max-width: 700px) {
  .servizi-diagnosi { padding: var(--s-5) var(--s-4) var(--s-4); }
  .servizi-diagnosi__vai { margin-top: var(--s-4); }
  .servizi-area { padding-top: var(--s-4); }
  .servizi-testa + .servizi-area { padding-top: var(--s-8); }
  .area-campo { padding: var(--s-5) var(--s-3) var(--s-3); }
}

/* Ritocco 30.09.2026: il sottotitolo sta vicino al titolo, la Diagnosi è più compatta e gli sta accanto in alto */
.servizi-testa .telaio { align-items: start; }
.servizi-testa__riga { margin-top: var(--s-5); }
.servizi-diagnosi { margin-top: var(--s-5); padding: var(--s-5) var(--s-5) var(--s-4); }
.servizi-diagnosi__testo { font-size: var(--t-piccolo); }
.servizi-diagnosi__testo strong { font-size: var(--t-medio); font-weight: 750; margin-bottom: var(--s-1); }
.servizi-diagnosi__vai { margin-top: var(--s-4); min-height: 40px; padding: 0 var(--s-4); font-size: var(--t-piccolo); }
@media (max-width: 700px) {
  .servizi-diagnosi { padding: var(--s-4); }
}

/* Proposta 5 · Esempi: un campo solo, senza la fascia con il nome dell'area */
.area-campo--solo .esempi__lista { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .area-campo--solo .esempi__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .area-campo--solo .esempi__lista { grid-template-columns: minmax(0, 1fr); } }