/* ==========================================================================
   Alessandro Cannarile — siti su misura per chi ospita
   Bianco pieno, testo quasi nero e un arancio bruciato che fa il lavoro
   importante: titoli in corsivo, etichette e soprattutto i pulsanti, che
   devono vedersi da lontano. Un accento solo, niente colori regionali.
   ========================================================================== */

:root {
  --carta: #ffffff;           /* fondo */
  --carta-ombra: #f4f4f2;     /* superfici e riquadri */
  --filo: #e7e7e3;            /* linee sottili */
  --filo-forte: #cfcfc9;
  --bordo-controllo: #79796f; /* bordi di pulsanti e campi: almeno 3:1 sul fondo */
  --inchiostro: #111111;      /* testo */
  --inchiostro-tenue: #55554e;
  --accento: #b93d0c;         /* arancio bruciato: corsivi, occhielli, icone */
  --accento-scuro: #93300a;
  --accento-velo: #fdece3;
  --azione: #b93d0c;          /* pulsanti */
  --azione-scuro: #93300a;
  --su-azione: #ffffff;
  --cornice: #0a0a0a;         /* il bordo dei telefoni */
  --barra-browser: #eeeeea;
  --indirizzo: #ffffff;
  --indirizzo-testo: #5a5a52;
  --blocco-fondo: #111111;    /* il riquadro di chiusura */
  --blocco-testo: #f6f4f0;
  --blocco-tenue: #bdbbb4;
  --blocco-accento: #ff9f6b;
  --blocco-su-accento: #241002;
  --blocco-filo: rgba(255, 255, 255, 0.45);
  --ombra: 17 17 17;
  --segno: var(--inchiostro);

  --serif: "Castoro", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --margine: clamp(20px, 5vw, 48px);
  --larghezza: 1200px;
  --sezione: clamp(80px, 11vw, 148px);
  --raggio: 10px;
  color-scheme: light;
}

/* La notte: nero caldo e arancio piu' chiaro, perche' quello scuro su fondo
   scuro non si leggerebbe. Non e' un'inversione automatica. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --carta: #121110;
    --carta-ombra: #1c1a18;
    --filo: #2c2926;
    --filo-forte: #3e3a36;
    --bordo-controllo: #85807a;
    --inchiostro: #f5f3ef;
    --inchiostro-tenue: #aaa59e;
    --accento: #ff8a52;
    --accento-scuro: #ffa778;
    --accento-velo: #26160f;
    --azione: #ff8a52;
    --azione-scuro: #ffa778;
    --su-azione: #20100a;
    --cornice: #050505;
    --barra-browser: #232120;
    --indirizzo: #2d2b29;
    --indirizzo-testo: #c6c2bb;
    --blocco-fondo: #1c1a18;
    --blocco-testo: #f5f3ef;
    --blocco-tenue: #bcb7b0;
    --blocco-accento: #ff9f6b;
    --blocco-su-accento: #241002;
    --blocco-filo: rgba(255, 255, 255, 0.45);
    --ombra: 0 0 0;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --carta: #121110;
  --carta-ombra: #1c1a18;
  --filo: #2c2926;
  --filo-forte: #3e3a36;
  --bordo-controllo: #85807a;
  --inchiostro: #f5f3ef;
  --inchiostro-tenue: #aaa59e;
  --accento: #ff8a52;
  --accento-scuro: #ffa778;
  --accento-velo: #26160f;
  --azione: #ff8a52;
  --azione-scuro: #ffa778;
  --su-azione: #20100a;
  --cornice: #050505;
  --barra-browser: #232120;
  --indirizzo: #2d2b29;
  --indirizzo-testo: #c6c2bb;
  --blocco-fondo: #1c1a18;
  --blocco-testo: #f5f3ef;
  --blocco-tenue: #bcb7b0;
  --blocco-accento: #ff9f6b;
  --blocco-su-accento: #241002;
  --blocco-filo: rgba(255, 255, 255, 0.45);
  --ombra: 0 0 0;
  color-scheme: dark;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

img {
  height: auto;
}

a {
  color: var(--accento);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accento-scuro);
}

:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

p,
li,
dd {
  text-wrap: pretty;
}

em {
  font-style: italic;
}

.visivo-nascosto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.salta {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--inchiostro);
  color: var(--carta);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
}

.salta:focus {
  transform: none;
  color: var(--carta);
}

.definizioni {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

/* Dentro i disegni ripetuti il colore si scrive con le variabili: si risolvono
   sulla radice, quindi il motivo cambia colore insieme al tema. */
.tratto {
  fill: none;
  stroke: var(--segno);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tratto-pieno {
  fill: var(--segno);
}

/* ---------- Etichette e testi ricorrenti ---------- */

.occhiello {
  display: block;
  margin-bottom: 18px;
  text-wrap: balance;
  color: var(--accento);
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.titolo-sezione {
  font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem);
  line-height: 1.06;
  max-width: 22ch;
}

/* La seconda metà del titolo, in corsivo, va sempre a capo: spezzata a metà
   riga ("Quattro passi. Il / rischio…") perdeva il ritmo. */
.titolo-sezione em {
  display: block;
  color: var(--accento);
}

.introduzione {
  max-width: 58ch;
  margin-top: 22px;
  color: var(--inchiostro-tenue);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

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

.sezione + .sezione {
  border-top: 1px solid var(--filo);
}

/* ---------- Pulsanti ---------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.8em 1.35em;
  border: 0;
  border-radius: 8px;
  background: var(--azione);
  color: var(--su-azione);
  font: 600 1rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 2px rgb(var(--ombra) / 0.16), 0 6px 18px -8px rgb(var(--ombra) / 0.45);
}

.bottone:hover {
  background: var(--azione-scuro);
  color: var(--su-azione);
}

.bottone:active {
  transform: translateY(1px);
}

.bottone svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
}

.bottone--grande {
  min-height: 56px;
  padding: 0.95em 1.6em;
  font-size: 1.0625rem;
}

.bottone--chiaro {
  background: transparent;
  color: var(--inchiostro);
  box-shadow: inset 0 0 0 1.5px var(--bordo-controllo);
}

.bottone--chiaro:hover {
  background: var(--carta-ombra);
  color: var(--inchiostro);
}

.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 48px;
  color: var(--inchiostro);
  font-weight: 600;
  text-decoration: none;
}

.link-freccia svg {
  width: 1.1em;
  height: 1.1em;
  transition: transform 0.2s ease;
}

.link-freccia:hover {
  color: var(--accento);
}

.link-freccia:hover svg {
  transform: translateY(2px);
}

/* ---------- Testata ---------- */

.testata {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--carta) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.testata.staccata {
  border-bottom-color: var(--filo);
}

.testata__riga {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--inchiostro);
  text-decoration: none;
}

.marchio:hover {
  color: var(--inchiostro);
}

/* Il marchio è il nome per esteso. Il monogramma è solo il suo fermacarte:
   un quadrato d'inchiostro che regge anche a 16 px, nella scheda del browser. */
.monogramma {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--inchiostro);
  color: var(--carta);
  font: 400 0.9375rem/1 var(--serif);
  letter-spacing: 0.04em;
  text-indent: 0.04em;
}

.marchio__nome {
  display: block;
  font: 400 1.5rem/1.05 var(--serif);
  letter-spacing: -0.01em;
}

.marchio__nome span {
  white-space: nowrap;
}

.marchio__cosa {
  display: none;
  padding-left: 12px;
  border-left: 1px solid var(--filo-forte);
  color: var(--inchiostro-tenue);
  font: 500 0.8125rem/1.25 var(--sans);
}

.navigazione {
  display: none;
}

.navigazione ul {
  display: flex;
  gap: 28px;
  padding: 0;
  list-style: none;
}

.navigazione a {
  color: var(--inchiostro-tenue);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
}

.navigazione a:hover {
  color: var(--inchiostro);
}

.lingua {
  color: var(--inchiostro-tenue);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 12px 4px;
}

.lingua:hover {
  color: var(--accento);
}

.testata .bottone {
  flex: none;
  min-height: 44px;
  padding: 0.6em 1.05em;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* Sui telefoni stretti la testata deve stare in 320 px: si stringono gli spazi,
   il pulsante perde l'icona e, sotto i 360, la lingua passa solo nel piede. */
@media (max-width: 420px) {
  .testata__riga {
    gap: 12px;
  }

  .marchio__nome {
    max-width: 6.5em;
    font-size: 1.0625rem;
  }

  .monogramma {
    width: 30px;
    height: 30px;
    font-size: 0.875rem;
  }

  .testata .bottone {
    padding: 0.55em 0.9em;
  }

  .testata .bottone svg {
    display: none;
  }
}

@media (max-width: 359px) {
  .testata .lingua {
    display: none;
  }
}

@media (min-width: 720px) {
  .marchio__cosa {
    display: block;
  }
}

@media (min-width: 1000px) {
  .navigazione {
    display: block;
  }
}

/* ---------- Apertura ---------- */

.apertura {
  padding-block: clamp(36px, 6vw, 88px) clamp(72px, 9vw, 128px);
}

/* Il titolo è la tesi della pagina: sul computer corre a tutta larghezza, e sotto
   si affiancano la promessa con il pulsante e i siti veri. */
.apertura__griglia {
  display: grid;
  grid-template-areas: "titolo" "testo" "vetrina";
  gap: 26px;
}

.apertura__titolo {
  grid-area: titolo;
}

.apertura__testo {
  grid-area: testo;
}

.apertura__vetrina {
  grid-area: vetrina;
  margin-top: 30px;
}

.apertura h1 {
  font-size: clamp(2.65rem, 1.3rem + 4.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
}

.apertura h1 em {
  display: block;
  color: var(--accento);
}

.apertura__testo .introduzione {
  margin-top: 0;
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 32px;
}

/* Sul telefono il pulsante principale prende tutta la riga: è il gesto che conta. */
@media (max-width: 480px) {
  .apertura .azioni .bottone {
    width: 100%;
    padding-inline: 1em;
  }
}

.garanzie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
  color: var(--inchiostro-tenue);
  font-size: 0.9375rem;
  font-weight: 500;
}

.garanzie li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.garanzie svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accento);
}

@media (min-width: 1000px) {
  .apertura__griglia {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "titolo titolo" "testo vetrina";
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 56px;
    align-items: start;
  }

  .apertura__vetrina {
    margin-top: 0;
  }

  .apertura__testo {
    padding-top: 8px;
  }
}

/* ---------- Vetrina: il sito vero dentro un computer e un telefono ---------- */

.vetrina {
  position: relative;
  padding-bottom: 9%;
  margin-right: 2%;
}

.vetrina .browser {
  width: 88%;
}

.vetrina .telefono {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: 27%;
}

.vetrina__didascalia {
  margin-top: 22px;
  max-width: 44ch;
  color: var(--inchiostro-tenue);
  font-size: 0.875rem;
  line-height: 1.5;
}

.browser {
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--barra-browser);
  box-shadow:
    0 0 0 1px rgb(var(--ombra) / 0.1),
    0 2px 4px rgb(var(--ombra) / 0.06),
    0 18px 40px -12px rgb(var(--ombra) / 0.3),
    0 40px 80px -40px rgb(var(--ombra) / 0.35);
}

.browser__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 11px;
}

.browser__barra > i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--filo-forte);
}

.browser__indirizzo {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline: auto;
  padding: 2px 14px;
  border-radius: 99px;
  background: var(--indirizzo);
  color: var(--indirizzo-testo);
  font: 500 0.6875rem/1.4 var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser__barra::after {
  content: "";
  flex: none;
  width: 34px;
}

.browser picture {
  display: block;
}

.browser img {
  width: 100%;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top;
  background: var(--carta-ombra);
}

.telefono {
  padding: 3.4%;
  border-radius: 15% / 7%;
  background: var(--cornice);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.06) inset,
    0 2px 6px rgb(var(--ombra) / 0.18),
    0 22px 44px -14px rgb(var(--ombra) / 0.45);
}

.telefono__schermo {
  position: relative;
  overflow: hidden;
  border-radius: 12.5% / 5.8%;
  background: var(--carta-ombra);
}

.telefono img {
  width: 100%;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
}

@media (prefers-reduced-motion: no-preference) {
  .apertura .vetrina .browser {
    animation: sale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .apertura .vetrina .telefono {
    animation: sale 0.9s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

/* Parte da fermo e visibile: si sposta di poco, non compare dal nulla. */
@keyframes sale {
  from {
    transform: translateY(18px);
  }
}

/* ---------- Il segno di ogni sito ---------- */

.segno {
  height: 40px;
  overflow: hidden;
  opacity: 0.3;
}

.segno svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 700px) {
  .segno {
    height: 52px;
  }
}

/* ---------- I lavori ---------- */

.lavori__elenco {
  display: grid;
  gap: clamp(96px, 12vw, 160px);
  margin-top: clamp(56px, 7vw, 96px);
}

.lavoro__corpo {
  display: grid;
  gap: 40px;
  margin-top: 28px;
}

.lavoro .vetrina {
  padding-bottom: 12%;
}

.lavoro__testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lavoro__dove {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--inchiostro-tenue);
  font-size: 0.875rem;
  font-weight: 500;
}

.cartellino {
  padding: 3px 10px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px var(--filo-forte);
  color: var(--inchiostro-tenue);
  font: 600 0.6875rem/1.5 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cartellino--vivo {
  box-shadow: none;
  background: var(--accento-velo);
  color: var(--accento);
}

.lavoro h3 {
  margin-top: 14px;
  font-size: clamp(2rem, 1.45rem + 2vw, 2.9rem);
  line-height: 1.05;
}

.lavoro__tipo {
  margin-top: 8px;
  color: var(--accento);
  font: italic 400 1.25rem/1.35 var(--serif);
}

.lavoro__racconto {
  margin-top: 18px;
  max-width: 52ch;
}

.fatti {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
  max-width: 50ch;
}

.fatti li {
  position: relative;
  padding-left: 26px;
  color: var(--inchiostro-tenue);
  font-size: 1rem;
  line-height: 1.5;
}

.fatti li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 12px;
  height: 1.5px;
  background: var(--accento);
}

.fatti strong {
  color: var(--inchiostro);
  font-weight: 600;
}

.lavoro__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.lavoro__attesa {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--inchiostro-tenue);
  font-size: 0.9375rem;
  font-style: italic;
}

.dentro {
  display: none;
  width: 100%;
  margin-top: 40px;
}

.dentro figcaption {
  margin-top: 12px;
  color: var(--inchiostro-tenue);
  font-size: 0.875rem;
  line-height: 1.5;
}

.dentro .browser__barra {
  height: 22px;
}

.dentro .browser__barra > i {
  width: 7px;
  height: 7px;
}

@media (min-width: 700px) {
  .dentro {
    display: block;
    max-width: 520px;
  }
}

@media (min-width: 1000px) {
  .lavoro__corpo {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(48px, 5vw, 80px);
    align-items: start;
  }

  .lavoro:nth-child(even) .lavoro__corpo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .lavoro:nth-child(even) .vetrina {
    order: 2;
  }

  .lavoro .vetrina {
    margin-top: 8px;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lavoro .vetrina .telefono,
  .lavoro .vetrina .browser {
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .lavoro .vetrina:hover .telefono {
    transform: translateY(-8px);
  }

  .lavoro .vetrina:hover .browser {
    transform: translateY(-3px);
  }
}

/* ---------- Il segno: la vetrina dei disegni ---------- */

.segni {
  display: grid;
  gap: 16px;
  margin-top: 48px;
  padding: 0;
  list-style: none;
}

.segni li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: var(--raggio);
  background: var(--carta-ombra);
}

.segni .segno {
  height: 64px;
  opacity: 0.55;
}

.segni h3 {
  font-size: 1.4rem;
  line-height: 1.15;
}

.segni p {
  margin-top: 4px;
  color: var(--inchiostro-tenue);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.segni .segni__vostro {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--filo-forte);
  border: 0;
}

.segni__vostro .segni__punto {
  display: flex;
  align-items: flex-end;
  height: 64px;
  color: var(--accento);
  font: italic 400 3.2rem/1 var(--serif);
}

@media (max-width: 639px) {
  .segni li {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 18px;
  }

  .segni .segno,
  .segni__vostro .segni__punto {
    flex: none;
    width: 96px;
    height: 56px;
  }

  .segni__vostro .segni__punto {
    justify-content: center;
    align-items: center;
  }

  .segni h3 {
    font-size: 1.25rem;
  }
}

@media (min-width: 640px) {
  .segni {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .segni {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- In ogni sito ---------- */

.dotazioni {
  display: grid;
  gap: 40px 32px;
  margin-top: 56px;
  padding: 0;
  list-style: none;
}

.dotazioni li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--filo-forte);
}

.dotazioni svg {
  width: 28px;
  height: 28px;
  margin-bottom: 6px;
  color: var(--accento);
}

.dotazioni h3 {
  font: 600 1.0625rem/1.35 var(--sans);
  letter-spacing: 0;
}

.dotazioni p {
  color: var(--inchiostro-tenue);
  font-size: 0.975rem;
  line-height: 1.55;
}

@media (max-width: 619px) {
  .dotazioni {
    gap: 0;
    margin-top: 40px;
  }

  .dotazioni li {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    padding-block: 20px;
  }

  .dotazioni svg {
    grid-row: span 2;
    margin: 0;
  }
}

@media (min-width: 620px) {
  .dotazioni {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .dotazioni {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Come funziona ---------- */

.passi {
  display: grid;
  gap: 0;
  margin-top: 56px;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passi li {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 18px;
  padding-bottom: 36px;
  counter-increment: passo;
}

.passi li::before {
  content: counter(passo);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--carta);
  box-shadow: inset 0 0 0 1.5px var(--accento);
  color: var(--accento);
  font: italic 400 1.75rem/1 var(--serif);
}

/* Il filo che lega i passi: sul telefono scende, sul computer corre in orizzontale. */
.passi li::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 1.5px;
  background: var(--filo-forte);
}

.passi li:last-child {
  padding-bottom: 0;
}

.passi li:last-child::after {
  display: none;
}

.passi h3 {
  align-self: end;
  padding-top: 6px;
  font-size: 1.5rem;
  line-height: 1.2;
}

.passi p {
  color: var(--inchiostro-tenue);
  max-width: 40ch;
}

.passi {
  position: relative;
  z-index: 0;
}

@media (min-width: 1000px) {
  .passi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }

  .passi li {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 0;
  }

  .passi li::before {
    grid-row: auto;
    margin-bottom: 8px;
  }

  .passi li::after {
    left: 64px;
    right: -32px;
    top: 28px;
    bottom: auto;
    width: auto;
    height: 1.5px;
  }

  .passi h3 {
    padding-top: 0;
  }
}

.promessa {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 56px;
  padding: 24px 26px;
  border-radius: var(--raggio);
  background: var(--accento-velo);
  max-width: 760px;
}

.promessa svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--accento);
}

.promessa p {
  color: var(--inchiostro);
  font: 400 1.25rem/1.45 var(--serif);
}

/* ---------- Chi sono ---------- */

.chi__griglia {
  display: grid;
  gap: 56px;
}

.chi__testo p + p {
  margin-top: 18px;
}

.chi__testo .titolo-sezione {
  margin-bottom: 26px;
}

.chi__testo p {
  max-width: 58ch;
}

.chi__laterale {
  display: grid;
  gap: 32px;
  align-content: start;
}

.nota-laterale {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--raggio);
  background: var(--carta-ombra);
}

.nota-laterale svg {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  color: var(--accento);
}

.nota-laterale p {
  color: var(--inchiostro);
  font: italic 400 1.125rem/1.45 var(--serif);
}

.primo-sito {
  display: grid;
  gap: 14px;
}

.primo-sito .browser__barra {
  height: 22px;
}

.primo-sito p {
  color: var(--inchiostro-tenue);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 960px) {
  .chi__griglia {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 80px;
  }
}

/* ---------- Domande ---------- */

.domande__griglia {
  display: grid;
  gap: 40px;
}

.domande__elenco {
  border-bottom: 1px solid var(--filo);
}

.domanda {
  border-top: 1px solid var(--filo);
}

.domanda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding-block: 16px;
  font: 400 1.3125rem/1.3 var(--serif);
  list-style: none;
  cursor: pointer;
}

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

.domanda summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--accento), var(--accento)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--accento), var(--accento)) center / 1.5px 14px no-repeat;
  transition: transform 0.25s ease;
}

.domanda[open] summary::after {
  transform: rotate(45deg);
}

.domanda summary:hover {
  color: var(--accento);
}

.domanda p {
  max-width: 62ch;
  padding-bottom: 24px;
  color: var(--inchiostro-tenue);
}

@media (min-width: 960px) {
  .domande__griglia {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 80px;
  }

  .domande__intro {
    position: sticky;
    top: 110px;
    align-self: start;
  }
}

/* ---------- Chiusura ---------- */

.chiusura {
  padding-block: clamp(24px, 4vw, 48px) var(--sezione);
}

.chiusura__riquadro {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 6vw, 80px) clamp(22px, 6vw, 80px);
  border-radius: 18px;
  background: var(--blocco-fondo);
  color: var(--blocco-testo);
}

/* Su computer il riquadro si divide: a sinistra l'invito e il modulo, a destra la
   garanzia, che prima lasciava mezza pagina vuota. Sul telefono resta una colonna. */
@media (min-width: 900px) {
  .chiusura__riquadro {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}

.garanzia {
  display: none;
  padding: 26px 28px;
  border: 1px solid var(--blocco-filo);
  border-radius: 14px;
}

.garanzia__promessa {
  color: var(--blocco-testo);
  font: italic 400 1.1875rem/1.45 var(--serif);
}

.garanzia ul {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
  color: var(--blocco-tenue);
  font-size: 0.9375rem;
}

.garanzia li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.garanzia svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--blocco-accento);
}

@media (min-width: 900px) {
  .garanzia {
    display: block;
  }
}

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

.chiusura h2 {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem);
  line-height: 1.04;
  max-width: 16ch;
}

.chiusura h2 em {
  color: var(--blocco-accento);
}

.chiusura__testo {
  max-width: 50ch;
  margin-top: 22px;
  color: var(--blocco-tenue);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

.modulo {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin-top: 36px;
}

.modulo label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.modulo label span {
  color: var(--blocco-tenue);
  font-weight: 400;
}

.modulo__riga {
  display: grid;
  gap: 12px;
}

.modulo input {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1.5px solid var(--blocco-filo);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.06);
  color: var(--blocco-testo);
  font: 400 1.0625rem/1.2 var(--sans);
}

.modulo input::placeholder {
  color: var(--blocco-tenue);
  opacity: 0.8;
}

.modulo input:focus-visible {
  outline: 3px solid var(--blocco-accento);
  outline-offset: 2px;
  border-color: transparent;
}

.chiusura .bottone {
  background: var(--blocco-accento);
  color: var(--blocco-su-accento);
  box-shadow: none;
}

.chiusura .bottone:hover {
  background: var(--blocco-testo);
  color: var(--blocco-su-accento);
}

.chiusura :focus-visible {
  outline-color: var(--blocco-accento);
}

.modulo__nota {
  color: var(--blocco-tenue);
  font-size: 0.875rem;
}

.altri-canali {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.altri-canali a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--blocco-testo);
  font-weight: 500;
  text-decoration: none;
}

.altri-canali a:hover {
  color: var(--blocco-accento);
}

.altri-canali svg {
  width: 20px;
  height: 20px;
}

/* Campo e pulsante affiancati solo quando c'è davvero spazio: fra i 900 e i 1180
   il riquadro è già diviso in due colonne e il campo diventerebbe una fessura. */
@media (min-width: 640px) and (max-width: 899px) {
  .modulo__riga {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 1180px) {
  .modulo__riga {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ---------- Piede ---------- */

.piede {
  padding-block: 48px calc(48px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--filo);
  color: var(--inchiostro-tenue);
  font-size: 0.9375rem;
}

.piede__griglia {
  display: grid;
  gap: 28px;
}

.piede .marchio {
  margin-right: 0;
}

.piede__cosa {
  margin-top: 10px;
  max-width: 38ch;
}

.piede ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  padding: 0;
  list-style: none;
}

.piede ul a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--inchiostro);
  font-weight: 500;
  text-decoration: none;
}

.piede ul a:hover {
  color: var(--accento);
}

.piede__note {
  font-size: 0.8125rem;
  line-height: 1.6;
}

@media (min-width: 860px) {
  .piede__griglia {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .piede__note {
    grid-column: 1 / -1;
  }
}

/* ---------- La barra sul telefono ---------- */

.barra-telefono {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px var(--margine) calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--carta) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--filo);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.35s;
}

.barra-telefono.visibile {
  transform: none;
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}

.barra-telefono .bottone {
  width: 100%;
}

@media (min-width: 900px) {
  .barra-telefono {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}