/* OmniaVision — la pagina di lancio, 15/09/2026
   Regola che governa tutto: niente centrato. Il vuoto non si riempie, si organizza. */

.lancio {
  --colonna: clamp(1.5rem, 6vw, 6rem);   /* il margine sinistro da cui tutto si allinea */
}

.lancio .misura { max-width: 74rem; margin-inline: auto; padding-inline: var(--colonna); }

/* entrata sobria, e ferma del tutto per chi non vuole movimento */
@media (prefers-reduced-motion: no-preference) {
  .lancio section > *, .lancio .volto, .lancio .studi-elenco li {
    animation: sale .7s cubic-bezier(.22,.61,.36,1) both;
  }
  .lancio .volto:nth-child(2) { animation-delay: .09s; }
  .lancio .volto:nth-child(3) { animation-delay: .18s; }
  .lancio .studi-elenco li:nth-child(2) { animation-delay: .07s; }
  .lancio .studi-elenco li:nth-child(3) { animation-delay: .14s; }
}
@keyframes sale {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- prima schermata */
.apre {
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 8vw, 6rem);
  /* il bagliore del marchio, ripreso come luce di fondo */
  background:
    radial-gradient(42rem 30rem at 78% 8%, rgba(240, 204, 67, .13), transparent 62%),
    var(--carta);
}
.apre-griglia {
  max-width: 74rem; margin-inline: auto; padding-inline: var(--colonna);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.apre-marchio { width: min(19rem, 70%); margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

.lancio h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  margin: 0 0 1.5rem;
  font-weight: 400;
}
.lancio h1 .oro { color: var(--oro-scuro); }

.apre-frase {
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--inchiostro-80);
  max-width: 30rem;
  margin: 0 0 2.25rem;
}

.apre-citta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  font-size: .9rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 600; color: var(--inchiostro);
}
.apre-citta li { position: relative; padding-top: .9rem; }
.apre-citta li::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 2.2rem; height: 2px; background: var(--oro-scuro);
}

/* la teca del video: fondo scuro come quinta, il video ci sta dentro */
/* gli anelli della lente, ripresi dal marchio: geometria, non decorazione */
.apre-video { position: relative; }
.apre-video::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34rem; height: 34rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(37, 57, 99, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 4rem rgba(240, 204, 67, .05),
    0 0 0 8rem rgba(240, 204, 67, .028),
    inset 0 0 0 1px rgba(240, 204, 67, .10);
  pointer-events: none;
  z-index: 0;
}
.apre-video > * { position: relative; z-index: 1; }

.video-teca {
  background: var(--inchiostro);
  padding: clamp(.5rem, 1vw, .75rem);
  max-width: 21rem;
  margin-inline: auto;
  box-shadow: 0 1.5rem 3.5rem rgba(37, 57, 99, .22);
  line-height: 0;
}
.video-teca video { width: 100%; height: auto; display: block; }
.video-nota {
  text-align: center;
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--inchiostro-60); font-weight: 600;
  margin: 1.1rem 0 0;
}

/* ---------------------------------------------------- titoli di sezione */
.lancio .etichetta {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--oro-scuro); margin: 0 0 1rem;
}
.lancio .etichetta.oro { color: var(--oro); }
.lancio h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.75rem, 3.1vw, 2.7rem);
  line-height: 1.2; margin: 0 0 1.5rem;
}

/* ---------------------------------------------------- i tre volti */
.tre-medici { padding-block: clamp(3rem, 7vw, 5.5rem); }
.schiera {
  max-width: 74rem; margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-inline: var(--colonna);
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.volto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  background: var(--carta-scura);
}
.volto.alzato { transform: translateY(2.25rem); }
.volto h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  margin: 1.1rem 0 0; letter-spacing: 0;
}
.volto h3::after {
  content: ""; display: block; width: 2.6rem; height: 2px;
  background: var(--oro-scuro); margin-top: .7rem;
}
.volto .citta {
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--inchiostro-60); margin: .7rem 0 .5rem;
}
.volto .albo {
  font-size: .84rem; line-height: 1.5; color: var(--inchiostro-60); margin: 0;
}

/* ---------------------------------------------------- la fascia scura, una sola */
.fascia {
  background: var(--inchiostro); color: var(--carta);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background-image: radial-gradient(38rem 26rem at 12% 0%, rgba(240,204,67,.12), transparent 62%);
}
.fascia h2 { color: var(--carta); }
.fascia p {
  color: rgba(247, 244, 238, .86);
  max-width: 34rem; font-size: 1.05rem; line-height: 1.7;
}

/* ---------------------------------------------------- gli studi */
.dove { padding-block: clamp(3rem, 7vw, 5.5rem); }
.studi-elenco {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; padding-inline: var(--colonna);
  max-width: 74rem;
  border-top: 1px solid var(--carta-scura);
}
.studi-elenco li {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.25rem; align-items: baseline;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--carta-scura);
}
.studi-elenco .num {
  font-family: var(--display); font-size: 1.6rem;
  color: var(--oro-scuro); line-height: 1;
}
.studi-elenco h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 .3rem; letter-spacing: 0;
}
.studi-elenco .chi {
  font-size: .82rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 600; color: var(--inchiostro-60); margin: 0 0 .5rem;
}
.studi-elenco .indirizzo { margin: 0; font-size: 1.02rem; }
.studi-elenco .in-arrivo { color: var(--inchiostro-60); font-style: italic; }

.coda {
  max-width: 74rem; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  padding-inline: var(--colonna);
  font-size: .95rem; color: var(--inchiostro-60);
}
.coda > span { display: block; max-width: 46rem; }

/* ---------------------------------------------------- piede */
.piede-lancio {
  background: var(--inchiostro); color: rgba(247, 244, 238, .78);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.piede-marchio { width: min(14rem, 60%); margin-bottom: 1.75rem; }
.piede-riga {
  font-family: var(--display); font-size: 1.15rem;
  color: var(--carta); margin: 0 0 .75rem;
}
.piede-nota { font-size: .92rem; max-width: 34rem; margin: 0 0 1.75rem; }
.piede-lancio .versione { color: rgba(247, 244, 238, .5); font-size: .8rem; margin: 0; }

/* ---------------------------------------------------- schermi stretti */
@media (max-width: 899px) {
  .apre-griglia { grid-template-columns: 1fr; gap: 2.5rem; }
  .apre-marchio { width: min(16rem, 62%); }
  /* gli anelli della lente, ripresi dal marchio: geometria, non decorazione */
.apre-video { position: relative; }
.apre-video::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34rem; height: 34rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(37, 57, 99, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 4rem rgba(240, 204, 67, .05),
    0 0 0 8rem rgba(240, 204, 67, .028),
    inset 0 0 0 1px rgba(240, 204, 67, .10);
  pointer-events: none;
  z-index: 0;
}
.apre-video > * { position: relative; z-index: 1; }

.video-teca { max-width: 19rem; }
  .schiera { grid-template-columns: 1fr; gap: 2.5rem; }
  .volto.alzato { transform: none; }         /* lo sfalsamento ha senso solo in riga */
  .volto img { max-width: 20rem; }
  .studi-elenco li { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
}

.studi-elenco .telefono { margin: .45rem 0 0; font-size: 1.05rem; }
.studi-elenco .telefono a {
  font-variant-numeric: tabular-nums;
  text-decoration-color: var(--oro-scuro);
  text-underline-offset: .3em;
}
.studi-elenco .telefono a:hover { color: var(--oro-scuro); }

/* la copertura regionale: è il posizionamento che i tre rivendicano nel video,
   quindi non sta in fondo in corpo piccolo */
.apre-regione {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--carta-scura);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--inchiostro-80);
  max-width: 28rem;
}
.apre-regione strong { color: var(--inchiostro); font-weight: 600; }

/* ============================================================
   TELEFONO — rifatto il 15/09/2026 guardando la pagina a 375px
   ============================================================ */
@media (max-width: 599px) {
  /* i ritorni a capo scelti per il desktop spezzano male in colonna stretta */
  .solo-largo { display: none; }

  /* il titolo può crescere: su telefono è l'unica cosa che si vede per prima */
  .lancio h1 { font-size: clamp(2.1rem, 11vw, 2.9rem); line-height: 1.12; }
  .apre { padding-block: 2rem 2.5rem; }
  .apre-marchio { width: min(13.5rem, 58%); margin-bottom: 1.5rem; }
  .apre-frase { font-size: 1.02rem; margin-bottom: 1.75rem; }

  /* le città: una riga sola, senza andare a capo a metà elenco */
  .apre-citta {
    gap: .55rem 1.15rem;
    font-size: .76rem;
    letter-spacing: .1em;
  }
  .apre-citta li { padding-top: .7rem; }
  .apre-citta li::before { width: 1.5rem; }

  /* il video resta protagonista ma lascia respirare */
  .video-teca { max-width: min(17rem, 78vw); }
  .apre-video::before { width: 22rem; height: 22rem; }
  .video-nota { font-size: .76rem; letter-spacing: .08em; }

  /* i ritratti erano quasi a tutto schermo: due per riga, il volto si legge lo stesso */
  .schiera {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }
  .volto img { max-width: none; }
  .volto:last-child { grid-column: 1 / -1; max-width: calc(50% - .5rem); }
  .volto h3 { font-size: 1.1rem; margin-top: .85rem; }
  .volto h3::after { width: 2rem; margin-top: .55rem; }
  .volto .citta { font-size: .72rem; margin: .55rem 0 .4rem; }
  .volto .albo { font-size: .78rem; }

  /* sezioni più compatte: meno vuoto, stesso ritmo */
  .tre-medici, .dove { padding-block: 2.5rem; }
  .fascia { padding-block: 3rem; }
  .fascia p { font-size: 1rem; }

  /* gli studi: il numero non serve a tutta larghezza */
  .studi-elenco li { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .85rem; }
  .studi-elenco .num { font-size: 1.15rem; }
  .studi-elenco h3 { font-size: 1.35rem; }

  /* i telefoni si toccano col pollice: area di tocco piena */
  .studi-elenco .telefono a {
    display: inline-block;
    padding-block: .35rem;
    min-height: 44px;
    line-height: 1.9;
  }

  .piede-marchio { width: min(11rem, 52%); }
  .piede-riga { font-size: 1.02rem; }
}

/* Gli anelli decorativi sono più larghi dello schermo del telefono: senza questo
   la pagina scorre in orizzontale e il testo sembra tagliato a destra. */
.lancio { overflow-x: hidden; }
.apre, .apre-video { overflow-x: clip; }