/* Landing sitova.it. Palette porcellana/inchiostro con un solo accento
   viridiano; tipografia Instrument Sans a gerarchia di peso; dual-theme via
   token + prefers-color-scheme. Nessuna dipendenza dal CSS dei tenant. */

:root {
  --carta: #f4f3ef;          /* porcellana, appena calda */
  --carta-alta: #fcfbf9;
  --inchiostro: #182420;
  --bruma: #5d6e66;          /* grigio con bias verde */
  --linea: #dcdcd2;
  --viridiano: #0d5c4b;      /* unico accento */
  --viridiano-vivo: #0f6f5b;
  --salvia: #e5ece7;         /* superficie tinta */
  --scuro: #14231e;          /* cella scura del bento */
  --su-scuro: #e8efe9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --carta: #131917;
    --carta-alta: #1b2320;
    --inchiostro: #e7ece8;
    --bruma: #97a79e;
    --linea: #2a352f;
    --viridiano: #58b298;
    --viridiano-vivo: #6cc4a9;
    --salvia: #1c2723;
    --scuro: #22332c;
    --su-scuro: #e3ece6;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 17px/1.65 "Instrument Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer (§9.5 spec): il piede resta a fondo schermata anche sulle
     pagine corte, senza galleggiare a metà. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

.involucro { max-width: 1200px; margin: 0 auto; padding: 0 1.4rem; }

h1, h2, h3 { line-height: 1.08; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); font-weight: 600; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0; }

/* --- barra ---------------------------------------------------------- */
.barra { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--carta) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.barra__riga { display: flex; align-items: center; gap: 2rem; height: 68px; }
.marchio { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--inchiostro); text-decoration: none; }
.marchio__di { font-size: 0.72rem; font-weight: 500; color: var(--bruma); margin-left: 0.5rem; letter-spacing: 0.01em; }
.barra__nav { display: flex; gap: 1.5rem; margin-left: auto; }
.barra__nav a { color: var(--bruma); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.barra__nav a:hover { color: var(--inchiostro); }
@media (max-width: 719px) { .barra__nav { display: none; } .barra__riga { justify-content: space-between; } }

/* --- cta ------------------------------------------------------------ */
.cta { display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.95rem; border-radius: 10px; transition: transform 0.15s ease, background 0.15s ease; }
.cta:active { transform: translateY(1px); }
.cta--pieno { background: var(--viridiano); color: #f4faf7; padding: 0.6rem 1.15rem; }
.cta--pieno:hover { background: var(--viridiano-vivo); }
.cta--grande { padding: 0.85rem 1.6rem; font-size: 1.02rem; }
.cta--nudo { color: var(--viridiano); padding: 0.85rem 0.4rem; text-underline-offset: 4px; }
.cta--nudo:hover { text-decoration: underline; }
.cta:focus-visible, a:focus-visible { outline: 2px solid var(--viridiano); outline-offset: 3px; }

/* --- eroe ----------------------------------------------------------- */
.eroe { padding: 4.5rem 0 5.5rem; overflow: hidden; }
.eroe__griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: center; }
.eroe__sotto { color: var(--bruma); font-size: 1.13rem; max-width: 44ch; margin-top: 1.3rem; }
.eroe__azioni { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.1rem; flex-wrap: wrap; }
.eroe__visivo { position: relative; min-height: 380px; }
.eroe__shot { position: absolute; width: 78%; height: auto; border-radius: 12px; border: 1px solid var(--linea); box-shadow: 0 24px 60px -18px rgba(20, 40, 33, 0.35); }
.eroe__shot--dietro { top: 0; right: 0; width: 60%; transform: rotate(1.4deg); opacity: 0.85; }
.eroe__shot--davanti { bottom: 0; left: 0; width: 86%; transform: rotate(-1.2deg); }
@media (max-width: 899px) {
  .eroe { padding: 3rem 0 3.5rem; }
  .eroe__griglia { grid-template-columns: 1fr; }
  .eroe__visivo { min-height: 0; height: 300px; }
}

/* --- siti ----------------------------------------------------------- */
.siti { padding: 5.5rem 0; border-top: 1px solid var(--linea); }
.siti__nota { color: var(--bruma); max-width: 58ch; margin: 1rem 0 2.8rem; }
.sito { margin: 0; }
.sito a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sito a:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -20px rgba(20, 40, 33, 0.35); }
.sito img { display: block; width: 100%; height: auto; }
.sito figcaption { margin-top: 0.7rem; font-size: 0.92rem; color: var(--bruma); }
.sito figcaption strong { color: var(--inchiostro); font-weight: 600; margin-right: 0.5rem; }
.sito--grande { margin-bottom: 2.2rem; }
.siti__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
@media (max-width: 719px) { .siti__coppia { grid-template-columns: 1fr; } }

/* --- comprende (bento 5) -------------------------------------------- */
.comprende { padding: 5.5rem 0; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; margin-top: 2.6rem; }
.cella { background: var(--carta-alta); border: 1px solid var(--linea); border-radius: 12px; padding: 1.6rem 1.5rem; grid-column: span 2; }
.cella p { color: var(--bruma); font-size: 0.97rem; margin-top: 0.6rem; }
.cella--scura { background: var(--scuro); border-color: transparent; grid-column: span 4; }
.cella--scura h3 { color: var(--su-scuro); font-size: 1.35rem; }
.cella--scura p { color: color-mix(in srgb, var(--su-scuro) 72%, transparent); max-width: 52ch; }
.cella--tinta { background: var(--salvia); border-color: transparent; grid-column: span 4; }
.cella--larga { grid-column: span 6; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 1.5rem; align-items: baseline; }
@media (max-width: 899px) { .cella, .cella--scura, .cella--tinta, .cella--larga { grid-column: span 6; display: block; } }

/* --- metodo ---------------------------------------------------------- */
.metodo { padding: 5.5rem 0; border-top: 1px solid var(--linea); }
.passi { list-style: none; counter-reset: passo; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 2.4rem; }
.passo { counter-increment: passo; max-width: 460px; padding-left: 3.4rem; position: relative; }
.passo::before { content: counter(passo); position: absolute; left: 0; top: -0.15rem; font-size: 1.9rem; font-weight: 600; color: var(--viridiano); font-variant-numeric: tabular-nums; }
.passo p { color: var(--bruma); margin-top: 0.4rem; }
.passo--sfalsato { margin-left: clamp(0px, 18vw, 260px); }
@media (max-width: 719px) { .passo--sfalsato { margin-left: 0; } }

/* --- conformità ------------------------------------------------------ */
.conformita { background: var(--salvia); padding: 5rem 0; }
.conformita__interno { max-width: 820px; }
.conformita p { color: var(--bruma); margin-top: 1.2rem; font-size: 1.08rem; max-width: 62ch; }

/* --- finale ----------------------------------------------------------- */
.finale { padding: 6rem 0; text-align: center; }
.finale p { color: var(--bruma); max-width: 46ch; margin: 1.1rem auto 2.2rem; }

/* --- piede ------------------------------------------------------------ */
.piede { border-top: 1px solid var(--linea); padding: 2.2rem 0 2.8rem; }
.piede__riga { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--bruma); }
.piede a { color: var(--inchiostro); text-decoration: none; }
.piede a:hover { text-decoration: underline; }
.piede__nota { color: color-mix(in srgb, var(--bruma) 80%, transparent); }

/* --- reveal ----------------------------------------------------------- */
.rivela { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.rivela--tardi { transition-delay: 0.12s; }
.rivela--visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rivela { opacity: 1; transform: none; transition: none; } }

/* --- pagina funzionalità ---------------------------------------------- */
/* Testata di pagina: più compatta dell'eroe della home, stesso ritmo. */
.testata { padding: 4rem 0 3rem; }
.testata__interno { max-width: 780px; }  /* dentro l'involucro: parte dalla stessa colonna delle altre sezioni */
.testata__occhiello { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--viridiano); margin-bottom: 0.9rem; }
.testata__sotto { color: var(--bruma); font-size: 1.13rem; margin-top: 1.3rem; max-width: 62ch; }
.testata .cta--nudo { margin-top: 1.2rem; margin-left: -0.4rem; }

/* Aree: titolo a sinistra, elenco a destra. Il titolo resta agganciato
   mentre si scorre l'elenco, così si sa sempre di cosa si sta leggendo. */
.aree { padding: 1rem 0 5rem; }
.area { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2.6rem; padding: 2.8rem 0; border-top: 1px solid var(--linea); }
.area__testa { position: sticky; top: 92px; align-self: start; }
.area__testa p { color: var(--bruma); font-size: 0.98rem; margin-top: 0.8rem; max-width: 34ch; }
.area__testo { color: var(--bruma); font-size: 1.05rem; max-width: 62ch; }
.area__testo em { color: var(--inchiostro); font-style: normal; font-weight: 600; }
.area--rilievo { background: var(--salvia); border-top: none; border-radius: 14px; padding: 2.4rem 2.2rem; margin: 1.4rem 0; }
.area--rilievo .area__testa { position: static; }

.funzioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.funzioni li { color: var(--bruma); font-size: 1rem; padding-left: 1.4rem; position: relative; }
.funzioni li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--viridiano); }
.funzioni strong { color: var(--inchiostro); font-weight: 600; }

@media (max-width: 899px) {
  .area { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.2rem 0; }
  .area__testa { position: static; }
  .area--rilievo { padding: 1.8rem 1.4rem; }
}

/* --- listino ----------------------------------------------------------- */
.costi { padding: 5rem 0 5.5rem; border-top: 1px solid var(--linea); }
.costi__nota { color: var(--bruma); max-width: 62ch; margin: 1rem 0 2.8rem; }
.costi__piede { color: var(--bruma); font-size: 0.94rem; max-width: 62ch; margin-top: 2rem; }

.listino { border: 1px solid var(--linea); border-radius: 14px; padding: 1.8rem 1.8rem 1.4rem; margin-bottom: 1.4rem; background: var(--carta-alta); }
.listino--tinto { background: var(--salvia); border-color: transparent; }
.listino__titolo { font-size: 1.22rem; }
.listino__intro { color: var(--bruma); font-size: 0.97rem; margin-top: 0.5rem; max-width: 58ch; }

/* La tabella scorre da sola se lo spazio non basta: la pagina non scorre mai in orizzontale. */
.prezzi { width: 100%; border-collapse: collapse; margin-top: 1.4rem; display: block; overflow-x: auto; }
.prezzi tbody { display: table; width: 100%; }
.prezzi tr { border-top: 1px solid var(--linea); }
.prezzi tr:first-child { border-top: none; }
.prezzi th, .prezzi td { text-align: left; padding: 1rem 0.9rem 1rem 0; vertical-align: baseline; font-weight: 400; }
.prezzi th { color: var(--inchiostro); font-weight: 600; width: 12.5rem; }
.prezzi td { color: var(--bruma); font-size: 0.97rem; }
.prezzi__cifra { color: var(--inchiostro); font-weight: 600; font-size: 1.18rem; white-space: nowrap; text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.prezzi__cifra span { color: var(--bruma); font-weight: 500; font-size: 0.86rem; }
.listino--tinto .prezzi tr { border-color: color-mix(in srgb, var(--bruma) 26%, transparent); }

@media (max-width: 719px) {
  .listino { padding: 1.4rem 1.2rem 1rem; }
  .prezzi tbody, .prezzi tr, .prezzi th, .prezzi td { display: block; width: auto; }
  .prezzi tr { padding: 1rem 0; }
  .prezzi th, .prezzi td { padding: 0.2rem 0; }
  .prezzi__cifra { text-align: left; margin-top: 0.5rem; }
}

/* --- perso (404) ------------------------------------------------------ */
.perso { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(4rem, 10vw, 8rem); position: relative; overflow: hidden; }
.perso__griglia { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2.2rem, 5vw, 4.5rem); align-items: start; }
.perso__cifra { position: absolute; z-index: 0; top: -0.34em; right: -0.16em; margin: 0; pointer-events: none; user-select: none; font-size: clamp(8rem, 23vw, 16rem); font-weight: 600; line-height: 0.78; letter-spacing: -0.05em; color: color-mix(in srgb, var(--viridiano) 9%, transparent); }
.perso__testo, .perso__mappa { position: relative; z-index: 1; }
.perso__nota { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--viridiano); margin-bottom: 1rem; }
.perso__lead { color: var(--bruma); font-size: 1.1rem; max-width: 46ch; margin-top: 1.3rem; }
.perso__azioni { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.1rem; flex-wrap: wrap; }
.perso__mappa-titolo { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bruma); margin-bottom: 0.9rem; }
.perso__mappa ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.perso__mappa li { border-bottom: 1px solid var(--linea); }
.perso__mappa a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0.15rem; font-size: 0.98rem; font-weight: 500; color: var(--inchiostro); text-decoration: none; transition: padding-inline-start 0.18s ease, color 0.18s ease; }
.perso__mappa a:hover { padding-inline-start: 0.55rem; color: var(--viridiano); }
.perso__mappa a > span { color: var(--viridiano); transition: transform 0.18s ease; }
.perso__mappa a:hover > span { transform: translateX(4px); }
@media (max-width: 860px) { .perso__griglia { grid-template-columns: 1fr; } .perso__cifra { top: -0.28em; } }
@media (prefers-reduced-motion: reduce) { .perso__mappa a, .perso__mappa a > span { transition: none; } }