/* ============================================================================
   Prezzemolo Studio — landing ponte
   Dipende da tokens.css e fonts.css, in quest'ordine.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-normal);
  line-height: var(--lh-larga);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Un focus visibile e coerente ovunque. Il default del browser sparisce sotto
   i fondi colorati, e senza si naviga alla cieca da tastiera. */
:focus-visible {
  outline: 3px solid var(--viola);
  outline-offset: 3px;
  border-radius: 4px;
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--viola);
  color: var(--bianco);
  padding: var(--s-2) var(--s-3);
  z-index: 100;
}
.salta:focus { left: 0; }

.contenitore {
  width: min(100% - (var(--gutter) * 2), var(--contenitore));
  margin-inline: auto;
}

/* ── Elementi ricorrenti ──────────────────────────────────────────────────── */

.occhiello {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--viola-testo);
  margin: 0 0 var(--s-3);
}

.titolo-2 {
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: var(--lh-media);
  letter-spacing: var(--ls-stretta);
  margin: 0 0 var(--s-4);
}

/* Il titolo gigante è la firma tipografica ereditata: pesi mescolati sulla
   stessa riga — light per il connettivo, corsivo per la parola che porta il
   senso, bold per il soggetto. Non è decorazione: è come si legge il brand. */
.titolo-giga {
  font-size: var(--t-giga);
  font-weight: var(--w-light);
  line-height: var(--lh-stretta);
  letter-spacing: var(--ls-stretta);
  margin: 0 0 var(--s-4);
}
.titolo-giga strong { font-weight: var(--w-bold); }
.titolo-giga em     { font-style: italic; font-weight: var(--w-light); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  margin: 0 0 var(--s-4);
  max-width: 46ch;
}

.corpo { margin: 0 0 var(--s-3); max-width: 62ch; }
.corpo--tenue { color: var(--testo-tenue); font-size: var(--t-small); }

.sezione { padding-block: var(--s-7); }
.sezione--tenue { background: var(--bianco-sporco); }

.griglia-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 900px) {
  .griglia-2 { grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; }
  .griglia-2--stretta { gap: var(--s-5); }
}

/* ── Bottoni ──────────────────────────────────────────────────────────────
   Pillola outline trasparente, hover verde: firma del sito precedente.
   Il verde è usato su bordo e testo, mai come testo su bianco — a 1,70:1
   sarebbe illeggibile (vedi tokens.css).                                    */

.bottone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 15px 30px;
  border: var(--bordo);
  border-radius: var(--raggio-pill);
  background: transparent;
  color: var(--testo);
  font: inherit;
  font-size: 1.125rem;
  font-weight: var(--w-normal);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transizione), border-color var(--transizione),
              background-color var(--transizione);
}
.bottone:hover { color: var(--viola-testo); border-color: var(--viola); }

.bottone--piccolo { padding: 9px 20px; font-size: var(--t-small); }

.bottone--pieno {
  background: var(--viola-testo);   /* bianco sopra: 5,81:1. Il viola pieno
                                       darebbe 4,57:1 — passa AA per un
                                       margine che una revisione successiva
                                       eroderebbe senza accorgersene */
  border-color: var(--viola-testo);
  color: var(--bianco);
}
.bottone--pieno:hover {
  background: #5A4D82;
  border-color: #5A4D82;
  color: var(--bianco);
}
.bottone[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Il submit occupa tutta la colonna del modulo — su mobile è il bersaglio più
   facile da colpire col pollice — ma allora l'etichetta va centrata, altrimenti
   resta appesa a sinistra di una barra larga 500px. */
.modulo .bottone--pieno { justify-content: center; }

/* ── Testata ──────────────────────────────────────────────────────────────── */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bianco) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #ECECEC;
}
.testata__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-2);
}
/* Il lockup include la dicitura "CREATIVE & DIGITAL STUDIO" a un quinto
   dell'altezza: sotto i 160px di larghezza diventa una riga grigia illeggibile.
   160px è il minimo sotto cui non si scende. */
.testata__logo img { width: clamp(160px, 15vw, 215px); }
/* La navigazione era quattro link di testo nudi, e si vedeva. Maiuscoletto
   spaziato, dimensione piccola, e un filo che cresce da sinistra al passaggio:
   il dettaglio che distingue una testata finita da una messa lì. */
.testata__nav { display: none; gap: var(--s-4); }
.testata__nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo);
  padding-block: 6px;
  transition: color var(--transizione);
}
.testata__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--viola);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.testata__nav a:hover { color: var(--viola-testo); }
.testata__nav a:hover::after { transform: scaleX(1); }
@media (min-width: 860px) { .testata__nav { display: flex; } }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-block: var(--s-6) var(--s-5);
}
.hero__titolo {
  font-size: var(--t-hero);
  font-weight: var(--w-light);
  line-height: var(--lh-stretta);
  letter-spacing: var(--ls-stretta);
  margin: 0;
}
.hero__titolo strong { font-weight: var(--w-bold); }
.hero__titolo em     { font-style: italic; font-weight: var(--w-light); }

.hero__asterisco {
  width: clamp(38px, 5vw, 76px);
  margin: var(--s-3) 0 0 auto;
}

.hero__coda {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  margin-top: var(--s-4);
  max-width: 52ch;
}


/* ── Marquee ──────────────────────────────────────────────────────────────
   Testo reale nel DOM, non `content:` in CSS: la versione precedente ci aveva
   messo l'elenco dei servizi e nessun motore di ricerca lo vedeva.          */

.marquee {
  background: var(--viola);
  color: var(--bianco);
  overflow: hidden;
  padding-block: clamp(10px, 1.4vw, 20px);
  /* La fascia sta fra hero e lavori e deve appartenere a tutti e due. Sotto ha
     i --s-7 di padding della sezione Lavori, sopra aveva solo i --s-5 di coda
     dell'hero: si leggeva incollata all'hero. --s-6 pareggia le due distanze. */
  margin-top: var(--s-6);
}
.marquee__pista {
  display: flex;
  width: max-content;
  animation: scorri 32s linear infinite;
}
.marquee__gruppo {
  padding-right: 1.5rem;
  font-size: clamp(0.95rem, 0.6rem + 1.4vw, 2.4rem);
  font-weight: var(--w-light);
  white-space: nowrap;
}
/* L'asterisco e' il segno del marchio, servito come SVG. Prima era il
   carattere U+2733: su iOS nessun font del sistema lo copre in presentazione
   testo, la catena di fallback finisce su Apple Color Emoji e diventava una
   emoji a colori — che ignorava anche il `color: var(--verde)` qui sotto. */
.marquee__gruppo i { font-style: normal; color: var(--verde); padding-inline: 0.4em; }
.marquee__ast {
  /* `display: inline-block` non e' decorativo: il reset di riga 20 mette tutte
     le immagini a `display: block`, e dentro la pista il segno andava a capo
     da solo spezzando la fascia in una parola per riga. */
  display: inline-block;
  height: 0.72em;
  width: auto;
  margin-inline: 0.55em;
  vertical-align: -0.02em;
}

@keyframes scorri {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Servizi ──────────────────────────────────────────────────────────────── */

.servizi { list-style: none; margin: 0; padding: 0; }
.servizi li {
  padding-block: var(--s-3);
  border-top: 1px solid #E2E2E2;
}
.servizi li:last-child { border-bottom: 1px solid #E2E2E2; }
.servizi h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-media);
  margin: 0 0 var(--s-1);
}
.servizi p { margin: 0; color: var(--testo-tenue); max-width: 52ch; }

/* ── Lavori ───────────────────────────────────────────────────────────────── */

.lavori {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin-top: var(--s-5);
}
@media (min-width: 860px) {
  .lavori { grid-template-columns: 1fr 1fr; }
  .lavoro--largo { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-5); align-items: center; }
  /* Solo qui figura e testo stanno affiancati: il margine sotto l'immagine non
     serve. Sotto gli 860px il blocco torna in colonna e quel margine è l'unica
     cosa che separa l'immagine dal titolo. Fuori dalla media query il titolo di
     Aure toccava l'immagine su ogni telefono. */
  .lavoro--largo .lavoro__figura { margin-bottom: 0; }
}

.lavoro__figura {
  margin: 0 0 var(--s-3);
  border-radius: var(--raggio);
  overflow: hidden;
  background: #E9E9E9;
  aspect-ratio: 16 / 10;
  /* Filo interno, non un bordo: non entra nel box e segue il raggio. Serve
     perche' tre immagini su sette sono screenshot con gli angoli bassi bianchi
     (#FFF di A.M. Immobiliare e IMTE, #FAF8F2 di DNA) contro un fondo
     --bianco-sporco #FAFAFA: lo smusso c'era ma cadeva su una differenza di
     cinque livelli su 255, e la scheda si leggeva come un rettangolo. */
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.08);
}
.lavoro__figura img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.lavoro h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-media);
  margin: 0 0 var(--s-1);
}
.lavoro__cosa {
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--viola-testo);
  margin: 0 0 var(--s-2);
}
/* Il corpo del testo, non l'occhiello della disciplina e non il link.
   Un `p:last-child` qui sarebbe fragile: basta aggiungere un link in coda e
   lo stile salta sull'elemento sbagliato. */
.lavoro__testo > p:not(.lavoro__cosa):not(.lavoro__link) {
  margin: 0;
  color: var(--testo-tenue);
  max-width: 56ch;
}

.lavoro__link { margin: var(--s-2) 0 0; font-size: var(--t-small); font-weight: var(--w-bold); }
.lavoro__link a { color: var(--viola-testo); text-decoration: none; border-bottom: 1.5px solid transparent; transition: border-color var(--transizione); }
.lavoro__link a:hover { border-bottom-color: var(--viola); }

/* ── Metodo ───────────────────────────────────────────────────────────────
   Era a scaletta: quattro blocchi sfalsati, belli e altissimi, che costavano
   più di duemila pixel di scorrimento per dire quattro cose. Su una pagina che
   deve convertire, lo scorrimento è la valuta con cui il lettore paga.
   Ora sono quattro colonne numerate, leggibili in un colpo d'occhio.        */

.passi {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  counter-reset: passo;
}
@media (min-width: 720px)  { .passi { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (min-width: 1060px) { .passi { grid-template-columns: repeat(4, 1fr); } }

.passo { padding-top: var(--s-3); border-top: 3px solid var(--verde); }
.passo__numero {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--viola-testo);
  margin-bottom: var(--s-1);
}
.passo h3 {
  /* Più piccolo del --t-h3 pieno: a quattro colonne quello manda a capo
     "Costruiamo a vista" e sfalsa le linee di base di tutta la fila. */
  font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.6875rem);
  font-weight: var(--w-bold);
  line-height: var(--lh-media);
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}
.passo p { margin: 0; color: var(--testo-tenue); }


/* ── Fascia "chi siamo" ───────────────────────────────────────────────────
   Era una sezione a piena altezza; la personalità del brand vale una
   schermata, non tre.                                                       */

.fascia { padding-block: var(--s-6); }
.fascia__interno { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .fascia__interno { grid-template-columns: 1.1fr 1fr; gap: var(--s-6); align-items: end; }
}
.fascia .titolo-giga { margin: 0; }
.fascia__testo .lead { margin-bottom: var(--s-2); }
.fascia__testo .corpo { margin: 0; color: var(--testo-tenue); }

/* ── Obiezioni ────────────────────────────────────────────────────────────
   Aperte, non a fisarmonica: una risposta che rassicura dietro un clic non
   rassicura nessuno, perché quel clic non lo fa quasi mai nessuno.          */

.domande {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
@media (min-width: 820px)  { .domande { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (min-width: 1200px) { .domande { grid-template-columns: repeat(3, 1fr); } }

.domanda h3 {
  font-size: 1.25rem;
  font-weight: var(--w-bold);
  line-height: var(--lh-media);
  margin: 0 0 var(--s-2);
}
.domanda p { margin: 0; color: var(--testo-tenue); }

/* ── Contatti e modulo ────────────────────────────────────────────────────── */

.contatti__asterisco { width: clamp(38px, 4vw, 64px); margin-bottom: var(--s-3); }

.modulo { display: grid; gap: var(--s-3); }
.campo { display: grid; gap: 6px; }
.campo label { font-size: var(--t-small); font-weight: var(--w-bold); }
.campo__nota { font-weight: var(--w-normal); color: var(--testo-tenue); }

.campo input,
.campo textarea {
  font: inherit;
  padding: 13px 16px;
  border: 1.5px solid #8A8A8A;   /* 3,5:1 su bianco — WCAG 1.4.11 chiede 3:1
                                     sul contorno, che è l'unica cosa che
                                     rende visibile il perimetro del campo */
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--testo);
  width: 100%;
  transition: border-color var(--transizione);
}
.campo input:focus, .campo textarea:focus { border-color: var(--viola); }
.campo textarea { resize: vertical; min-height: 120px; }

/* Errore segnalato col colore E con il bordo E con un testo: il colore da solo
   non è un segnale accessibile. */
.campo--errore input,
.campo--errore textarea { border-color: #C0392B; border-width: 2px; }
.campo__errore { color: #A5281B; font-size: var(--t-small); margin: 0; }

.campo--consenso {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--s-2);
}
.campo--consenso input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--viola); }
.campo--consenso label { font-weight: var(--w-normal); font-size: var(--t-small); line-height: 1.5; }
/* Il campo consenso è una griglia a due colonne: senza questo, il messaggio
   d'errore si infila accanto alla casella invece di stare sotto. */
.campo--consenso .campo__errore { grid-column: 1 / -1; }

/* L'esca per i bot: fuori dallo schermo ma non `display:none`, che alcuni bot
   riconoscono e saltano. */
.esca {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.modulo__esito { margin: 0; font-size: var(--t-small); min-height: 1.5em; }
.modulo__esito--ok    { color: #1E7A4C; font-weight: var(--w-bold); }
.modulo__esito--ko    { color: #A5281B; font-weight: var(--w-bold); }

/* ── Piede ────────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid #E2E2E2;
  padding-block: var(--s-5);
}
.pie__alto {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--verde);
  margin-bottom: var(--s-4);
}
.pie__alto .occhiello { margin: 0; }

.pie__dati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-3);
  font-size: var(--t-small);
  color: var(--testo-tenue);
  line-height: 1.7;
}
.pie__dati p { margin: 0; }
.pie__dati strong { color: var(--testo); }
.pie__nota { display: inline-block; margin-top: 4px; }

/* Deve essere un <button>, non un <a>: non porta da nessuna parte, apre un
   pannello. Ma deve LEGGERSI come il link che sta sopra, altrimenti sembra un
   comando secondario — e la revoca dev'essere visibile quanto il consenso. */
.pie__preferenze {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pie__preferenze:hover { text-decoration-thickness: 2px; }
.pie__preferenze:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }


/* ══════════════════════════════════════════════════════════ INGRESSI ═════
   Percezione di cura, non effetto. Diciotto pixel e un'opacità, una volta
   sola. La curva è quasi tutta in decelerazione: entra deciso e si posa,
   che è il modo in cui si muovono le cose pesanti.                        */

/* ⚠️ SOLO MOVIMENTO, NIENTE DISSOLVENZA. Sembra una raffinatezza in meno; è
   una scelta obbligata, per due ragioni misurate:

   1. LARGEST CONTENTFUL PAINT. Un elemento che parte a `opacity: 0` per il
      browser non è ancora dipinto. Con la dissolvenza, l'immagine più grande
      della pagina risultava comparire a 3,2 secondi invece che a 2,0.
   2. CONTRASTO. Gli strumenti di verifica leggono il colore EFFETTIVO, e a
      metà dissolvenza il grigio #6B6B6B su bianco diventa #979797: 2,79:1
      invece di 5,33:1. Un audit eseguito nel momento sbagliato vede una
      pagina inaccessibile, e non ha del tutto torto — in quel frangente il
      testo è davvero meno leggibile.

   Il movimento da solo regge benissimo: è lo spostamento che si legge come
   cura, non la trasparenza. */
@keyframes entra {
  from { transform: translateY(26px); }
  to   { transform: none; }
}

/* L'HERO si anima in CSS puro, senza passare dal JavaScript: entrata.js è
   `defer` e girerebbe dopo il primo paint, con un lampo visibile proprio
   sulla schermata che conta di più. */
.hero .anima { animation: entra 900ms cubic-bezier(0.16, 0.84, 0.44, 1) both; }
.hero .occhiello       { animation-delay:  40ms; }
.hero .hero__titolo    { animation-delay: 120ms; }
.hero .hero__coda      { animation-delay: 260ms; }
.hero .hero__asterisco { animation-delay: 420ms; }

/* Tutto il resto: lo stato nascosto esiste SOLO se il JavaScript gira e ha
   aggiunto `js-anima`. Senza JS la pagina è semplicemente ferma e completa,
   invece che invisibile. */
.js-anima .anima {
  transform: translateY(26px);
  transition: transform 820ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.js-anima .anima.dentro { transform: none; }

/* Nelle griglie gli elementi entrano scalati di poco: in fila tutti insieme
   sembrerebbe un sipario, uno alla volta sembrerebbe lento. */
.js-anima .lavoro:nth-child(2n)   { transition-delay: 70ms; }
.js-anima .passo:nth-child(2)     { transition-delay: 60ms; }
.js-anima .passo:nth-child(3)     { transition-delay: 120ms; }
.js-anima .passo:nth-child(4)     { transition-delay: 180ms; }
.js-anima .domanda:nth-child(3n+2){ transition-delay: 60ms; }
.js-anima .domanda:nth-child(3n)  { transition-delay: 120ms; }

/* Le schede dei lavori si sollevano appena al passaggio: è il gesto che
   segnala "questa cosa si può aprire" senza scriverlo. */
.lavoro__figura img { transition: transform 600ms cubic-bezier(0.16, 0.84, 0.44, 1); }
.lavoro:hover .lavoro__figura img { transform: scale(1.03); }

/* ══════════════════════════════════════════════════════════ SOCIAL ═════ */

.social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid #E2E2E2;
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  text-decoration: none;
  color: var(--testo);
  transition: color var(--transizione);
}
.social a:hover { color: var(--viola-testo); }
.social svg { flex: none; }

/* ═══════════════════════════════════════════════════════════════ SOCI ═════
   Le facce dei due fondatori accanto alla frase sulle persone. È la prova
   più economica che dietro non c'è un centralino: costa due fotografie e
   toglie la domanda «ma chi siete?» prima che venga fatta.               */

.soci {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: var(--s-4) 0 0;
  padding: 0;
}
.soci li { display: flex; align-items: center; gap: var(--s-2); }
.soci img {
  width: clamp(64px, 8vw, 92px);
  height: auto;
  border-radius: 50%;
  background: var(--bianco);
}
.soci span { display: grid; font-size: var(--t-small); color: var(--testo-tenue); line-height: 1.45; }
.soci strong { color: var(--testo); font-weight: var(--w-bold); }