/* WellaNet — vetrina statica. Mobile first; i breakpoint aggiungono, non correggono. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("bricolage-grotesque-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* colore (contrasti su --abisso misurati: testo 15.3, tenue 9.9, ciano 10.7, brace 9.7, linea 3.5) */
  --abisso: #051f24;
  --teal: #0a2f35;
  --linea: #2f7c86;
  --ciano: #20e3e6;
  --brace: #ffb45a;
  --testo: #e8f5f5;
  --tenue: #a9cbce;

  /* spazi: scala 4-8-12-16-24-32-48-64-96 */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;

  /* tipo: rapporto 1.25 (terza maggiore) da 1rem */
  --t-1: 0.8rem;
  --t0: 1rem;
  --t1: 1.25rem;
  --t2: 1.5625rem;
  --t-lead: clamp(1.6rem, 1.1rem + 2.4vw, 3.1rem);
  --t-close: clamp(1.4rem, 1rem + 1.8vw, 2.4rem);

  --misura: 62ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(60rem 40rem at 85% -5%, rgba(32, 227, 230, 0.10), transparent 70%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(255, 140, 0, 0.07), transparent 70%),
    var(--abisso);
  color: var(--testo);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t0);
  line-height: 1.55;
  overflow-x: hidden;
}

/* lingua: IT di default, il JS imposta data-lang */
body[data-lang="it"] .en, body[data-lang="it"] .es,
body[data-lang="en"] .it, body[data-lang="en"] .es,
body[data-lang="es"] .it, body[data-lang="es"] .en { display: none; }

a { color: var(--ciano); text-underline-offset: 0.2em; }
a:hover { color: var(--testo); }

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

/* ---- testata: solo il selettore lingua ---- */
.testata {
  display: flex;
  justify-content: flex-end;
  padding: var(--s4) var(--s4) 0;
}

.lingue {
  display: inline-flex;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.lingue button {
  min-width: 2.75rem;
  min-height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tenue);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  touch-action: manipulation;
}

.lingue button:hover { color: var(--testo); }

.lingue button[aria-pressed="true"] {
  background: var(--ciano);
  color: var(--abisso);
}

/* ---- pagina ---- */
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--s5) var(--s4) var(--s8);
}

/* hero: la rete è il soggetto, il logo ne è il nodo centrale */
.hero {
  display: grid;
  gap: var(--s5);
  align-items: center;
}

.rete {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

.rete::before {                      /* alone dietro il logo */
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(32, 227, 230, 0.34), rgba(255, 140, 0, 0.10) 62%, transparent 100%);
}

.rete img { position: absolute; }

/* nascosto alla vista, presente per lettori di schermo e motori di ricerca */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vh + .lead { margin-top: 0; }

.rete .trama { inset: 0; width: 100%; height: 100%; }

.rete .logo {
  top: 50%;
  left: 50%;
  width: 40%;
  height: auto;
  transform: translate(-50%, -50%);
}

h1, .lead, .chiusura, .pilastri p { text-wrap: balance; }

h1 {                                 /* il nome resta titolo, ma il marchio lo porta il logo */
  font-size: var(--t2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ciano);
}

.lead {                              /* la frase di presentazione e' il primo piano */
  margin-top: var(--s4);
  max-width: 26ch;
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--testo);
}

/* tre pilastri: nodi collegati da una linea (verticale su mobile) */
.pilastri {
  position: relative;
  list-style: none;
  margin-top: var(--s8);
  display: grid;
  gap: var(--s6);
  padding-left: var(--s7);
}

.pilastri::before {                  /* la linea che unisce i nodi */
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 2px;
  background: linear-gradient(var(--ciano), var(--linea) 60%, var(--brace));
  opacity: 0.75;
}

.pilastri li { position: relative; }

.nodo {
  position: absolute;
  left: calc(-1 * var(--s7));
  top: -0.25rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--abisso);
  border: 2px solid var(--ciano);
  color: var(--brace);
}

.nodo svg { width: 1.25rem; height: 1.25rem; }

.pilastri p {
  font-size: var(--t1);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

.chiusura {
  margin-top: var(--s8);
  max-width: 28ch;
  font-size: var(--t-close);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--testo);
}

/* ---- piede ---- */
.piede {
  padding: var(--s5) var(--s4) var(--s6);
  border-top: 1px solid rgba(47, 124, 134, 0.45);
  font-size: 0.875rem;
  color: var(--tenue);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  justify-content: center;
}

.piede a {
  display: inline-block;
  padding: var(--s2) var(--s1);       /* area di tocco >= 24px */
  min-height: 2rem;
}

.piede { align-items: center; }

.piede .icona-mail {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
}

.piede .icona-mail svg { width: 1.25rem; height: 1.25rem; }

.piede .icona-mail:hover { border-color: var(--ciano); }

/* ---- da tablet in su ---- */
@media (min-width: 48em) {
  .testata { padding: var(--s5) var(--s6) 0; }
  main { padding: var(--s6) var(--s6) var(--s9); }
  .rete { width: min(100%, 28rem); margin-inline: 0; }
  .pilastri {
    margin-top: var(--s8);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s6);
    padding: var(--s7) 0 0;
  }
  .pilastri::before {
    left: 1.25rem;
    right: 0;
    top: 1.25rem;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--ciano), var(--linea) 55%, var(--brace));
  }
  .nodo { left: 0; top: calc(-1 * var(--s7)); }
  .piede { padding-inline: var(--s6); }
}

/* ---- desktop: testo a sinistra, rete a destra; pilastri in orizzontale ---- */
@media (min-width: 64em) {
  main { padding-top: var(--s7); }

  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s8);
  }

  .hero .rete { order: 2; width: min(100%, 34rem); margin-inline: 0 auto; }
  .hero .titolo { order: 1; }

  .pilastri { margin-top: var(--s9); gap: var(--s7); }

  .chiusura { margin-top: var(--s9); max-width: 34ch; }
}

@media (min-width: 90em) {
  main { max-width: 80rem; }
}

/* l'alone del logo respira; la rete si muove dentro il proprio SVG */
@media (prefers-reduced-motion: no-preference) {
  .rete::before { animation: respiro 6s ease-in-out infinite; }
}

@keyframes respiro {
  0%, 100% { opacity: 0.75; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ---- pagine interne (privacy) ---- */
.testata-interna { justify-content: space-between; align-items: center; }

.casa {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.75rem;
  color: var(--testo);
  font-weight: 700;
  font-size: var(--t1);
  text-decoration: none;
}

.casa img { width: 1.75rem; height: auto; }

.legale { max-width: 46rem; }

.legale h1 { font-size: var(--t-lead); color: var(--testo); }

.legale .intro {
  margin-top: var(--s4);
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--tenue);
  max-width: var(--misura);
}

.voce {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(47, 124, 134, 0.45);
  max-width: var(--misura);
}

.voce h2 {
  font-size: var(--t1);
  font-weight: 650;
  color: var(--ciano);
  margin-bottom: var(--s3);
}

.voce ul { padding-left: var(--s5); display: grid; gap: var(--s2); }

.voce p + p { margin-top: var(--s3); }

.aggiornato { margin-top: var(--s7); font-size: 0.875rem; color: var(--tenue); }