/* geosit — sito vetrina. Tutti i colori stanno qui sotto come variabili:
   nessun colore scritto dentro un componente, cosi' i due temi restano
   allineati. Niente stati :hover che schiariscono i fondi, per scelta. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../font/plus-jakarta-sans-latin.woff2) format('woff2');
}

:root {
  color-scheme: light;
  --fondo: #F4F7F5;
  --superficie: #FFFFFF;
  --tinta: #E7EFEA;
  --testo: #0E1A14;
  --testo-2: #4A5B52;
  --bordo: rgba(14, 26, 20, 0.09);
  --ombra: 0 1px 2px rgba(14, 26, 20, 0.05), 0 12px 32px rgba(14, 26, 20, 0.08);
  --accento: #1E8A52;
  --accento-testo: #187344;
  --su-accento: #FFFFFF;
  --icona-alto: #5B9BF0;
  --icona-basso: #1668E3;
  --icona-ombra: rgba(22, 104, 227, 0.32);
  --accento-ombra: rgba(30, 138, 82, 0.32);
  --verde: #1E8A52;
  --verde-vivo: #00C853;
  --nastro-a: #146B3E;
  --nastro-b: #1E8A52;
  --testata: rgba(244, 247, 245, 0.82);
  --interruttore: rgba(14, 26, 20, 0.06);
  --interruttore-on: #FFFFFF;
  /* Sopra le foto il testo e' sempre chiaro, in tutti e due i temi. */
  --su-foto: #FFFFFF;
  --su-foto-2: rgba(255, 255, 255, 0.82);
  --velo-foto: rgba(4, 14, 9, 0.86);
  --velo-foto-2: rgba(4, 14, 9, 0.45);
  --velo-foto-3: rgba(4, 14, 9, 0.62);
  --vetro-scuro: rgba(6, 16, 11, 0.5);
  --vetro: rgba(255, 255, 255, 0.12);
  --vetro-bordo: rgba(255, 255, 255, 0.22);
  --foto-verde-alto: #DDFBE8;
  --foto-verde-basso: #74DD9F;
  --telaio-a: #2B3136;
  --telaio-b: #0B0D0F;
  --telaio-bordo: #50575E;
  --schermo-nero: #000000;
  --email-fondo: #FFFFFF;
  --email-testo: #0E1A14;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #0B1210;
    --superficie: #131D19;
    --tinta: #0F1915;
    --testo: #ECF3EF;
    --testo-2: #A3B3AA;
    --bordo: rgba(236, 243, 239, 0.09);
    --ombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --accento-testo: #7BE0A0;
    --icona-alto: #8DBBFA;
    --icona-basso: #3D88F5;
    --icona-ombra: rgba(61, 136, 245, 0.30);
    --accento-ombra: rgba(47, 168, 102, 0.30);
    --verde: #4CC77F;
    --testata: rgba(11, 18, 16, 0.8);
    --interruttore: rgba(236, 243, 239, 0.08);
    --interruttore-on: #26332D;
    --email-fondo: #ECF3EF;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0B1210;
  --superficie: #131D19;
  --tinta: #0F1915;
  --testo: #ECF3EF;
  --testo-2: #A3B3AA;
  --bordo: rgba(236, 243, 239, 0.09);
  --ombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --accento-testo: #7BE0A0;
  --icona-alto: #8DBBFA;
  --icona-basso: #3D88F5;
  --icona-ombra: rgba(61, 136, 245, 0.30);
  --accento-ombra: rgba(47, 168, 102, 0.30);
  --verde: #4CC77F;
  --testata: rgba(11, 18, 16, 0.8);
  --interruttore: rgba(236, 243, 239, 0.08);
  --interruttore-on: #26332D;
  --email-fondo: #ECF3EF;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: var(--accento-testo); }
h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 3px solid var(--icona-alto); outline-offset: 3px; border-radius: 8px; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--superficie); color: var(--testo); padding: 10px 16px; border-radius: 12px; }
.salta:focus { top: 12px; }

.contenitore { width: min(100% - 32px, 1200px); margin-inline: auto; }

.parola { font-weight: 800; letter-spacing: -0.03em; color: var(--testo); }
.geo {
  background: linear-gradient(180deg, var(--icona-alto), var(--icona-basso));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- testata ---------- */

.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: var(--testata);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--bordo);
}
.testata-dentro {
  width: min(100% - 32px, 1200px); margin-inline: auto;
  height: 64px; display: flex; align-items: center; gap: 24px;
}
.marchio { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 26px; line-height: 1; }
.marchio img { width: 26px; height: auto; }
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { color: var(--testo); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.tema {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--interruttore);
}
.menu + .tema { margin-left: 0; }
.tema button {
  width: 36px; height: 34px; border: 0; border-radius: 999px; background: transparent;
  display: inline-grid; place-items: center; cursor: pointer; color: var(--testo-2); font-size: 18px;
}
.tema button[aria-pressed="true"] { background: var(--interruttore-on); color: var(--testo); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }

@media (max-width: 880px) {
  .menu { display: none; }
  .tema { margin-left: auto; }
}

/* ---------- pulsanti ---------- */

.coppia {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  width: min(100%, 580px); margin-top: 36px;
}
.coppia.centrata { margin-inline: auto; margin-top: 48px; }
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 20px; border-radius: 999px;
  font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; cursor: pointer;
}
.pulsante svg { font-size: 24px; }
.pulsante.pieno { background: var(--accento); color: var(--su-accento); box-shadow: 0 10px 24px var(--accento-ombra); }
.pulsante.pieno svg { background: var(--su-accento); border-radius: 8px; padding: 3px; font-size: 28px; }
.pulsante.vetro { background: var(--vetro); color: var(--su-foto); border-color: var(--vetro-bordo); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pulsante.bordo { background: transparent; color: var(--accento-testo); border-color: currentColor; }

@media (max-width: 600px) {
  .coppia { grid-template-columns: 1fr; }
}

/* ---------- apertura ---------- */

.apertura {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(100svh, 980px);
  padding: 120px 0 72px;
  color: var(--su-foto);
  display: flex; align-items: center;
}
.apertura-foto, .apertura-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.apertura-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--velo-foto) 0%, var(--velo-foto-2) 62%, transparent 100%),
    linear-gradient(0deg, var(--velo-foto) 0%, transparent 40%);
}
.apertura-dentro {
  width: min(100% - 32px, 1200px); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 32px; align-items: center;
}
.titolone {
  margin-top: 0;
  font-size: clamp(2.8rem, 13vw, 6.6rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 0.98;
}
.titolone .riga { display: block; }
@media (min-width: 901px) { .titolone { font-size: clamp(4rem, 7.2vw, 6.6rem); } }
/* La parola che ruota: lo spazio sotto tiene intere le discendenti (g, p) dentro la sfumatura,
   l'ombra la stacca dalla foto. */
.ruota { display: grid !important; margin-bottom: -0.12em; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)); }
.parola-ruota {
  grid-area: 1 / 1; white-space: nowrap; padding-bottom: 0.2em;
  background: linear-gradient(180deg, var(--foto-verde-alto), var(--foto-verde-basso));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(0.35em);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .8, .2, 1);
}
.parola-ruota.attiva { opacity: 1; transform: none; }
.parola-ruota.esce { opacity: 0; transform: translateY(-0.35em); }
.sottotitolo { margin-top: 28px; max-width: 40ch; font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem); color: var(--su-foto-2); }
.nota-prova { margin-top: 16px; font-size: 15px; color: var(--su-foto-2); }

.apertura-telefoni { position: relative; height: clamp(520px, 50vw, 680px); }
.apertura-telefoni .telefono { position: absolute; }
.telefono-davanti { --w: clamp(230px, 21vw, 300px); right: 18%; top: 0; transform: rotate(-4deg); z-index: 2; }
.telefono-dietro { --w: clamp(200px, 18vw, 260px); right: -4%; top: 12%; transform: rotate(7deg); opacity: 0.95; }

@media (max-width: 900px) {
  .apertura { padding: 104px 0 56px; min-height: 0; }
  .apertura-dentro { grid-template-columns: 1fr; gap: 48px; }
  .apertura-telefoni { height: 470px; }
  .telefono-davanti { --w: 200px; left: calc(50% - 150px); right: auto; top: 0; }
  .telefono-dietro { --w: 180px; left: calc(50% - 10px); right: auto; top: 40px; }
}

/* ---------- telefono disegnato ---------- */

.telefono {
  --w: 260px;
  position: relative; width: var(--w); flex: none;
  padding: calc(var(--w) * 0.034);
  border-radius: calc(var(--w) * 0.155);
  background: linear-gradient(145deg, var(--telaio-a), var(--telaio-b));
  box-shadow:
    inset 0 0 0 1.5px var(--telaio-bordo),
    inset 0 0 0 4px var(--telaio-b),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 30px 60px -12px rgba(0, 0, 0, 0.45);
}
/* I tasti sul fianco destro: volume e accensione. */
.telefono::before, .telefono::after {
  content: ""; position: absolute; right: calc(var(--w) * -0.012);
  width: calc(var(--w) * 0.014); border-radius: 0 3px 3px 0; background: var(--telaio-bordo);
}
.telefono::before { top: 18%; height: 12%; }
.telefono::after { top: 34%; height: 7%; }
.schermo {
  position: relative; overflow: hidden; background: var(--schermo-nero);
  border-radius: calc(var(--w) * 0.12);
  aspect-ratio: 540 / 1200;
}
.schermo img { width: 100%; height: 100%; object-fit: cover; }
/* La fotocamera a goccia, al centro in alto. */
.schermo::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--w) * 0.022);
  width: calc(var(--w) * 0.04); height: calc(var(--w) * 0.04); transform: translateX(-50%);
  border-radius: 50%; background: var(--schermo-nero); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.06);
}

/* ---------- nastro ---------- */

.nastro {
  display: flex; overflow: hidden;
  background: linear-gradient(90deg, var(--nastro-a), var(--nastro-b));
  color: var(--su-accento);
  padding: 18px 0;
}
.nastro-giro { display: flex; flex: none; animation: nastro 46s linear infinite; }
.nastro-giro li { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 700; font-size: 17px; padding-right: 36px; }
.nastro-giro li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-vivo); margin-right: 36px; }
@keyframes nastro { to { transform: translateX(-100%); } }

/* ---------- sezioni ---------- */

.sezione { padding: clamp(72px, 9vw, 128px) 0; }
.sezione-tinta { background: var(--tinta); }
.etichetta {
  font-size: 14px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--verde);
}
.etichetta.chiara { color: var(--verde-vivo); }
.titolo-sezione {
  margin-top: 14px;
  font-size: clamp(2rem, 4.2vw + 0.6rem, 4rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.04;
  text-wrap: balance;
}
.titolo-sezione.chiaro { color: var(--su-foto); }
.intro { margin-top: 20px; max-width: 58ch; color: var(--testo-2); font-size: 1.1rem; }

.icona-app {
  display: inline-grid; place-items: center;
  width: 60px; height: 60px; border-radius: 28%;
  background: linear-gradient(180deg, var(--icona-alto), var(--icona-basso));
  color: #FFFFFF; font-size: 32px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 18px var(--icona-ombra);
}

.carta {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 28px;
  padding: 30px; box-shadow: var(--ombra);
}
.carta h3 { margin-top: 22px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.carta p { margin-top: 10px; color: var(--testo-2); }

.griglia-funzioni {
  margin-top: 56px; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* ---------- carosello ---------- */

.carosello { margin-top: 56px; }
.carosello-pista {
  --bordo-pagina: max(16px, calc((100% - 1200px) / 2));
  display: flex; gap: 32px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--bordo-pagina);
  padding: 12px var(--bordo-pagina) 36px;
  scrollbar-width: none;
}
.carosello-pista::-webkit-scrollbar { display: none; }
.vetrina { margin: 0; flex: none; scroll-snap-align: start; width: clamp(230px, 64vw, 280px); }
.vetrina .telefono { --w: clamp(230px, 64vw, 280px); }
.vetrina figcaption { margin-top: 22px; color: var(--testo-2); font-size: 15px; }
.vetrina figcaption strong { display: block; color: var(--testo); font-size: 1.1rem; margin-bottom: 4px; }

.carosello-comandi { display: flex; align-items: center; gap: 12px; }
.tondo {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--bordo);
  background: var(--superficie); color: var(--testo); box-shadow: var(--ombra);
  display: inline-grid; place-items: center; cursor: pointer; font-size: 22px; flex: none;
}
.tondo:disabled { opacity: 0.4; cursor: default; }
.puntini { display: flex; gap: 2px; margin-inline: auto; flex-wrap: wrap; justify-content: center; }
.puntini button {
  width: 26px; height: 26px; border: 0; background: transparent; padding: 0; cursor: pointer;
  display: inline-grid; place-items: center;
}
.puntini button::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--testo-2); opacity: 0.35; transition: width 0.3s; }
.puntini button[aria-current="true"]::before { width: 22px; background: var(--accento); opacity: 1; }
#prec { order: 0; }
.puntini { order: 1; }
#pausa { order: 2; }
#succ { order: 3; }

/* ---------- tre tempi ---------- */

.tre-tempi { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tre-tempi li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tre-tempi .telefono { --w: clamp(180px, 20vw, 250px); }
.numero {
  margin-top: 28px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: var(--accento); color: var(--su-accento);
}
.numero.verde { background: var(--verde-vivo); color: #04240F; }
.tre-tempi h3 { margin-top: 14px; font-size: 1.3rem; font-weight: 800; }
.tre-tempi p { margin-top: 6px; color: var(--testo-2); max-width: 26ch; }

@media (max-width: 760px) {
  .tre-tempi { grid-template-columns: 1fr; gap: 28px; }
  .tre-tempi li {
    display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    column-gap: 20px; text-align: left; align-items: start;
  }
  .tre-tempi .telefono { --w: 120px; grid-row: 1 / 4; }
  .numero { margin-top: 18px; }
}

/* ---------- bande fotografiche ---------- */

.banda, .contatti { position: relative; overflow: hidden; isolation: isolate; color: var(--su-foto); }
.banda { padding: clamp(80px, 10vw, 140px) 0; }
.banda-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.banda-velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--velo-foto) 0%, var(--velo-foto-3) 50%, var(--velo-foto) 100%); }
.griglia-chi {
  margin-top: 56px; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.vetro-carta {
  padding: 30px; border-radius: 28px;
  background: var(--vetro-scuro); border: 1px solid var(--vetro-bordo);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.vetro-carta h3 { margin-top: 22px; font-size: 1.3rem; font-weight: 800; }
.vetro-carta p { margin-top: 10px; color: var(--su-foto-2); }

/* ---------- passi ---------- */

.passi {
  margin-top: 56px; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  counter-reset: passo;
}
.passo { display: block; margin-top: 22px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-2); }
.passi .carta h3 { margin-top: 6px; }

/* ---------- contatti ---------- */

.contatti { padding: clamp(96px, 12vw, 160px) 0; text-align: center; }
.contatti-dentro { display: flex; flex-direction: column; align-items: center; }
.contatti-segno { width: 96px; height: auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4)); }
.contatti .titolo-sezione { margin-top: 20px; }
.contatti-testo { margin-top: 16px; font-size: 1.15rem; color: var(--su-foto-2); max-width: 44ch; }
.email {
  margin-top: 36px; display: inline-flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 30px; border-radius: 999px; max-width: 100%;
  background: var(--email-fondo); color: var(--email-testo);
  font-weight: 800; font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.4rem); text-decoration: none; white-space: nowrap;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.email svg { font-size: 26px; color: var(--accento); }
.firma { margin-top: 28px; font-style: italic; color: var(--su-foto-2); }

/* ---------- piede ---------- */

.piede { padding: 48px 0 56px; border-top: 1px solid var(--bordo); font-size: 14px; color: var(--testo-2); }
.piede-dentro { display: grid; gap: 16px; }
.piede-marchio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.piede-marchio img { width: 22px; height: auto; }
.piede-marchio .parola { font-size: 22px; line-height: 1; }
.piede-di { margin-left: 6px; }
.piede-crediti { max-width: 90ch; }
.piede a { color: var(--testo-2); }

/* ---------- movimento ridotto ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nastro { padding: 14px 16px; }
  .nastro-giro { animation: none; flex-wrap: wrap; flex: 1 1 auto; row-gap: 6px; justify-content: center; }
  .nastro-giro[aria-hidden="true"] { display: none; }
  .parola-ruota { transition: none; }
}

/* Sul telefono i comandi del carosello stanno su una riga sola. */
@media (max-width: 480px) {
  .carosello-comandi { gap: 8px; }
  .tondo { width: 44px; height: 44px; font-size: 20px; }
  .puntini { flex-wrap: nowrap; gap: 0; }
  .puntini button { width: 20px; }
  .puntini button[aria-current="true"]::before { width: 16px; }
}