/* =========================================================
   RITUAL TOUCH — stile del sito
   Colori, caratteri e misure principali sono in :root, qui sotto.
   ========================================================= */

/* ---------- Caratteri (ospitati sul sito, nessuna richiesta esterna) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-500-italic-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-medium-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Caratteri di ripiego con misure simili: evitano salti mentre i caratteri si caricano */
@font-face {
  font-family: "Cormorant Ripiego";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos");
  size-adjust: 97.97%;
  ascent-override: 94.32%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Ripiego";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 106.34%;
  ascent-override: 91.1%;
  descent-override: 22.68%;
  line-gap-override: 0%;
}

/* ---------- Colori e misure ---------- */
:root {
  --verde: #132a24;       /* verde bosco: fondo principale */
  --verde-2: #203b31;     /* verde secondario */
  --avorio: #f2ecdf;      /* avorio caldo: fondi chiari e testo su scuro */
  --beige: #e7dece;       /* beige naturale */
  --oro: #c9a66b;         /* oro tenue: solo accenti */
  --oro-chiaro: #d8b984;  /* oro al passaggio del mouse */
  --corallo: #f3b7a6;     /* messaggi di errore su fondo scuro */
  --tenue-chiaro: #4a5d55;/* testo secondario su fondo chiaro */

  --font-titoli: "Cormorant Garamond", "Cormorant Ripiego", "Times New Roman", serif;
  --font-testo: "Inter", "Inter Ripiego", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --margine: clamp(1.25rem, 0.5rem + 3.2vw, 3rem);
  --contenitore: 72rem;
  --misura: 37rem;
  --spazio-sezione: clamp(4.75rem, 2.75rem + 7vw, 9.5rem);
  --raggio: 6px;          /* campi del modulo */
  --raggio-grande: 10px;  /* riquadri: video, schede, modulo, foto */

  color-scheme: only light; /* evita che i browser scuriscano il sito da soli */
}

/* ---------- Temi delle sezioni ---------- */
.tema-scuro,
.tema-verde2 {
  --sfondo: var(--verde);
  --testo: var(--avorio);
  --tenue: rgba(242, 236, 223, 0.8);
  --focus: var(--oro);
  --linea: rgba(201, 166, 107, 0.5);
  background-color: var(--sfondo);
  color: var(--testo);
}
.tema-verde2 {
  --sfondo: var(--verde-2);
}
.tema-chiaro {
  --sfondo: var(--avorio);
  --testo: var(--verde);
  --tenue: var(--tenue-chiaro);
  --focus: var(--verde);
  --linea: rgba(19, 42, 36, 0.18);
  background-color: var(--sfondo);
  color: var(--testo);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background-color: var(--verde);
  color: var(--avorio);
  font-family: var(--font-testo);
  font-size: clamp(1.125rem, 1.08rem + 0.18vw, 1.1875rem);
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.pagina-chiara {
  background-color: var(--avorio);
  color: var(--verde);
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
p,
ul {
  margin: 0;
}
p {
  text-wrap: pretty; /* evita parole isolate a fine paragrafo */
}
a,
button,
input,
label {
  -webkit-tap-highlight-color: rgba(201, 166, 107, 0.18);
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.tema-scuro a,
.tema-verde2 a {
  text-decoration-color: var(--oro);
}
@media (hover: hover) {
  a:hover {
    text-decoration-thickness: 2px;
  }
}
:focus-visible {
  outline: 3px solid var(--focus, var(--oro));
  outline-offset: 3px;
  border-radius: 2px;
}
[tabindex="-1"]:focus {
  outline: none;
}
::selection {
  background: var(--oro);
  color: var(--verde);
}

/* ---------- Impaginazione ---------- */
.contenitore {
  width: min(100% - 2 * var(--margine), var(--contenitore));
  margin-inline: auto;
}
.sezione {
  padding-block: var(--spazio-sezione);
}
.misura {
  max-width: var(--misura);
}
.titolo-sezione {
  font-size: clamp(1.875rem, 1.45rem + 1.9vw, 3.125rem);
}
.titolo-sezione::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--oro);
}
.testo-introduzione {
  margin-top: 1.5rem;
  max-width: var(--misura);
}
.nota {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tenue);
}

/* ---------- Logo (simbolo + scritta) ---------- */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}
.logo__simbolo {
  width: auto;
  height: 3rem;
}
.logo__scritta {
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.24em;
  margin-right: -0.24em; /* compensa la spaziatura finale per centrare */
  text-transform: uppercase;
}
.logo--orizzontale {
  flex-direction: row;
  gap: 0.85rem;
}
.logo--orizzontale .logo__simbolo {
  height: 2.25rem;
}

/* ---------- Pulsanti ---------- */
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.8rem 2.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pulsante--oro {
  background-color: var(--oro);
  color: var(--verde);
}
@media (hover: hover) {
  .pulsante--oro:hover {
    background-color: var(--oro-chiaro);
  }
  .pulsante--contorno:hover {
    background-color: rgba(201, 166, 107, 0.14);
  }
}
.pulsante--oro:active {
  background-color: #bb9759;
}
.pulsante--contorno {
  background-color: transparent;
  border-color: var(--oro);
  color: var(--testo);
}
.pulsante[disabled],
.pulsante[disabled]:hover {
  background-color: transparent;
  border-color: rgba(201, 166, 107, 0.45);
  color: rgba(242, 236, 223, 0.6);
  cursor: not-allowed;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(1.75rem, 1rem + 3vh, 3rem) var(--margine) 1.75rem;
  text-align: center;
  background:
    radial-gradient(85% 55% at 50% 0%, rgba(201, 166, 107, 0.16) 0%, rgba(201, 166, 107, 0) 70%),
    var(--verde);
}
.hero__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  padding-bottom: 4vh; /* porta il blocco poco sopra il centro: più equilibrato */
}
.hero .logo__simbolo {
  height: clamp(3rem, 2.2rem + 2.5vw, 4.25rem);
}
.hero h1 {
  margin-top: clamp(1.75rem, 1rem + 4vh, 3.5rem);
  max-width: 28ch;
  font-size: clamp(2rem, 1.3rem + 3vw, 4.25rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.hero h1 .insieme {
  white-space: nowrap; /* tiene unite «per gli altri,» e «attenzioni: tu.» */
}
.hero h1 em {
  font-style: italic;
  color: var(--oro);
}
.hero__sottotitolo {
  margin-top: 1.25rem;
  text-wrap: balance;
  max-width: 34rem;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  color: var(--tenue);
}
.hero .pulsante {
  margin-top: 2rem;
}
.hero__payoff {
  margin-top: 2rem;
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--oro);
}
.hero__payoff::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1px;
  margin: 0 auto 0.9rem;
  background: var(--linea);
}

/* ---------- Video ---------- */
.video-sezione .contenitore {
  max-width: 58rem;
}
.video {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.video__cornice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 0.4rem + 1.6vw, 1.5rem);
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: var(--raggio-grande);
  overflow: hidden;
  font: inherit;
  color: var(--avorio);
  text-align: center;
  background-color: var(--verde);
  background-image: radial-gradient(75% 85% at 50% 42%, var(--verde-2) 0%, var(--verde) 72%);
  box-shadow:
    inset 0 0 0 1px rgba(201, 166, 107, 0.2),
    0 34px 64px -40px rgba(19, 42, 36, 0.5);
}
.video__cornice .logo__simbolo {
  height: clamp(2.5rem, 1.4rem + 4.5vw, 5rem);
}
.video__cornice .logo__scritta {
  font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 1.0625rem);
}
.video__provvisorio p {
  max-width: 25ch;
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: clamp(1.1875rem, 0.95rem + 1.2vw, 1.75rem);
  line-height: 1.3;
}
.video__provvisorio a {
  text-decoration-color: var(--oro);
}
.video__copertina {
  cursor: pointer;
  --focus: var(--verde);
}
.video__play {
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 2.8rem + 2.5vw, 4.75rem);
  height: clamp(3.5rem, 2.8rem + 2.5vw, 4.75rem);
  border: 1.5px solid var(--oro);
  border-radius: 50%;
  transition: background-color 0.25s ease;
}
.video__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.22rem;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent var(--avorio);
}
.video__copertina:focus-visible .video__play {
  background-color: rgba(201, 166, 107, 0.2);
}
@media (hover: hover) {
  .video__copertina:hover .video__play {
    background-color: rgba(201, 166, 107, 0.2);
  }
}
.video__iframe {
  display: block;
  padding: 0;
  background: #000;
}
.video--verticale .video__cornice {
  aspect-ratio: 9 / 16;
  max-width: 24rem;
  margin-inline: auto;
}
.video__nota {
  margin-top: 1.5rem;
  max-width: var(--misura);
}

/* ---------- Prima Cerchia ---------- */
.cerchia {
  background-image: radial-gradient(55% 45% at 80% 30%, rgba(201, 166, 107, 0.09) 0%, rgba(201, 166, 107, 0) 70%);
}
.cerchia__griglia {
  display: grid;
  gap: 2.75rem;
  align-items: start;
}
.beneficio {
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--oro);
}
.beneficio__testo {
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.6875rem);
  line-height: 1.35;
}
.beneficio .nota {
  margin-top: 0.85rem;
}
.modulo {
  display: grid;
  gap: 1.3rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid rgba(201, 166, 107, 0.28);
  border-radius: var(--raggio-grande);
  background-color: var(--verde-2);
}
.campo {
  display: grid;
  gap: 0.45rem;
}
.campo label {
  font-size: 1rem;
  font-weight: 500;
}
.campo .facoltativo {
  font-weight: 400;
  color: var(--tenue);
}
.campo input {
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.7rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--raggio);
  background-color: var(--avorio);
  color: var(--verde);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.3;
}
.campo input:focus {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
}
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--verde);
  -webkit-box-shadow: 0 0 0 100px var(--avorio) inset;
  box-shadow: 0 0 0 100px var(--avorio) inset;
  caret-color: var(--verde);
}
.campo input[aria-invalid="true"],
.consenso input[aria-invalid="true"] {
  border-color: var(--corallo);
}
.errore {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--corallo);
}
.consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.8rem;
  row-gap: 0.45rem;
  align-items: start;
}
.consenso input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.12rem 0 0;
  border: 1.5px solid rgba(242, 236, 223, 0.75);
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.consenso input::before {
  content: "";
  width: 0.75rem;
  height: 0.42rem;
  border-left: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  transform: translateY(-0.08rem) rotate(-45deg) scale(0);
  transition: transform 0.15s ease;
}
@media (hover: hover) {
  .consenso input:hover {
    border-color: var(--oro);
  }
}
.consenso input:checked {
  border-color: var(--oro);
  background-color: var(--oro);
}
.consenso input[aria-invalid="true"] {
  border-color: var(--corallo);
  border-width: 2px;
}
.consenso input:checked::before {
  transform: translateY(-0.08rem) rotate(-45deg) scale(1);
}
.consenso input:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
}
@media (forced-colors: active) {
  .consenso input {
    -webkit-appearance: auto;
    appearance: auto;
  }
}
.consenso label {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tenue);
  cursor: pointer;
}
.consenso .errore {
  grid-column: 2;
}
.modulo .pulsante {
  width: 100%;
  margin-top: 0.3rem;
}
.modulo__stato {
  font-size: 1rem;
  text-align: center;
  text-wrap: balance;
  color: var(--oro);
}
.modulo__rassicurazione {
  font-size: 1rem;
  text-align: center;
  text-wrap: balance;
  color: var(--tenue);
}

/* ---------- Perché Ritual Touch ---------- */
.modi {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.modo {
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  border-radius: var(--raggio-grande);
  background-color: var(--beige);
}
.modo h3 {
  font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);
  font-weight: 600;
}
.modo h3::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1px;
  margin-bottom: 1rem;
  background: var(--oro);
}
.modo p {
  margin-top: 0.75rem;
}
.frase-evidenza {
  max-width: 22ch;
  margin: clamp(4rem, 2.5rem + 5vw, 6.5rem) auto 0;
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  line-height: 1.18;
  text-align: center;
  text-wrap: balance;
}
.frase-evidenza::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 0 auto 1.75rem;
  background: var(--oro);
}
.perche .nota {
  max-width: 34rem;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0;
  text-align: center;
}

/* ---------- Chi è Andrea ---------- */
.andrea {
  background-image: radial-gradient(45% 40% at 50% 22%, rgba(201, 166, 107, 0.1) 0%, rgba(201, 166, 107, 0) 70%);
}
.andrea__griglia {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.andrea__foto {
  position: relative;
  width: min(100%, 21rem);
  margin: 0 auto;
}
.andrea__foto img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raggio-grande);
  background-color: var(--verde);
}
.andrea__foto::after {
  content: "";
  position: absolute;
  inset: 0.85rem -0.85rem -0.85rem 0.85rem;
  border: 1px solid var(--linea);
  border-radius: calc(var(--raggio-grande) + 2px);
  pointer-events: none;
}
.andrea__testo p {
  margin-top: 1.5rem;
  max-width: var(--misura);
}
.link-sobrio {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin-top: 1.25rem;
  font-weight: 500;
}

/* ---------- Piè di pagina ---------- */
.pie {
  padding: clamp(3.5rem, 2.5rem + 3vw, 5rem) 0 2.75rem;
  border-top: 1px solid rgba(201, 166, 107, 0.22);
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  color: var(--tenue);
}
.pie .logo {
  color: var(--avorio);
}
.pie .logo__simbolo {
  height: 2.5rem;
}
.pie__payoff {
  margin-top: 1rem;
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--avorio);
}
.pie__contatti {
  display: grid;
  gap: 0.3rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}
.pie__legale {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
}
.pie__link {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
}
.pie a {
  display: inline-block;
  padding-block: 0.3rem;
}

/* ---------- Pulsante fisso (solo smartphone) ---------- */
.cta-fissa {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(0.85rem + env(safe-area-inset-bottom));
  z-index: 50;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(160%);
  visibility: hidden;
  transition: transform 0.35s ease, visibility 0s linear 0.35s, background-color 0.2s ease;
}
.cta-fissa.visibile {
  transform: none;
  visibility: visible;
  transition: transform 0.35s ease, visibility 0s linear 0s, background-color 0.2s ease;
}
.cta-fissa:focus-visible {
  outline-color: var(--avorio);
}

/* ---------- Pagine di testo (privacy, cookie) ---------- */
.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--margine);
  border-bottom: 1px solid rgba(19, 42, 36, 0.12);
  --focus: var(--verde);
}
.testata__torna {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration-color: var(--oro);
}
.testata .logo__scritta {
  font-size: 0.875rem;
}
.legale {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  --focus: var(--verde);
}
.legale h1 {
  font-size: clamp(2.375rem, 1.8rem + 2.2vw, 3.375rem);
}
.legale h2 {
  margin-top: 2.25rem;
  font-family: var(--font-testo);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}
.legale p {
  max-width: 40rem;
  margin-top: 0.6rem;
}
.legale h1 + p {
  margin-top: 1.5rem;
}
.da-completare {
  padding: 0.05em 0.35em;
  border-radius: 3px;
  background-color: rgba(201, 166, 107, 0.4);
  color: inherit;
}

/* ---------- Pagina /grazie ---------- */
.grazie {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 3rem var(--margine);
  text-align: center;
  background:
    radial-gradient(85% 55% at 50% 0%, rgba(201, 166, 107, 0.16) 0%, rgba(201, 166, 107, 0) 70%),
    var(--verde);
}
.grazie h1 {
  margin-top: clamp(2rem, 1.5rem + 3vh, 3rem);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}
.grazie__testo {
  display: grid;
  gap: 0.6rem;
  max-width: 30rem;
  margin-top: 1.5rem;
  color: var(--tenue);
}
.grazie__firma {
  margin-top: 0.6rem;
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--avorio);
}
.grazie .pulsante {
  margin-top: 2.25rem;
}

/* ---------- Dissolvenze all'ingresso (disattivate con "riduci movimento") ---------- */
@media (prefers-reduced-motion: no-preference) {
  .dissolvenze [data-dissolvenza]:not(.visibile) {
    opacity: 0;
  }
  .dissolvenze [data-dissolvenza].visibile {
    transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Schermi più grandi ---------- */
@media (min-width: 48em) {
  .modi {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .cta-fissa {
    display: none;
  }
}
@media (min-width: 62em) {
  .cerchia__griglia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
  .cerchia__testo {
    position: sticky;
    top: 3rem;
  }
  .andrea__griglia {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 7vw, 7rem);
  }
  .andrea__foto {
    width: 100%;
    max-width: 24rem;
    margin: 0;
    justify-self: end;
  }
  .andrea {
    background-image: radial-gradient(35% 55% at 30% 50%, rgba(201, 166, 107, 0.1) 0%, rgba(201, 166, 107, 0) 70%);
  }
}
/* Telefoni molto piccoli o browser di Instagram con poco spazio in altezza */
@media (max-width: 47.99em) and (max-height: 540px) {
  .hero {
    padding-top: 1.25rem;
  }
  .hero .logo {
    gap: 0.5rem;
  }
  .hero .logo__simbolo {
    height: 2.25rem;
  }
  .hero h1 {
    margin-top: 1.25rem;
    font-size: 1.875rem;
  }
  .hero__sottotitolo {
    margin-top: 0.85rem;
  }
  .hero .pulsante {
    margin-top: 1.4rem;
  }
}
@media (max-width: 47.99em) {
  .pagina-principale .pie {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
  }
}