/* ══════════════════════════════════════════════════════════
   NYI SRL — stile comune a tutte le pagine
   Caricato da index.html, prodotti.html, company.html,
   contatti.html e area-riservata.html.
   Il resto della grafica viene da Tailwind (CDN), configurato
   nel <head> di ogni pagina.
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Source Sans 3', sans-serif; color: #4A5568; }
h1, h2, h3, h4 { font-family: 'Inter', sans-serif; }

/* ─── Modale autocertificazione ─── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(27, 63, 122, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-overlay.hidden { display: none; }

/* Sfondi con fallback CSS + immagine */
.hero-img {
  background-size: cover;
  background-position: center;
  background-color: #1B3F7A;
}

/* ─── Copertina a tutto schermo ───
   Immagine scura, marchio al centro, molto spazio attorno. */
.copertina {
  /* la copertina passa sotto la barra trasparente, quindi occupa
     tutta l'altezza dello schermo */
  min-height: 100svh;
  background-color: #0A0E14;
  background-image:
    linear-gradient(180deg, rgba(10,14,20,.72) 0%, rgba(10,14,20,.35) 45%, rgba(10,14,20,.85) 100%),
    url('../img/copertina.jpg');
  background-size: cover;
  background-position: center;
}
@supports not (min-height: 100svh) {
  .copertina { min-height: 100vh; }
}

.marchio-copertina {
  width: min(74vw, 430px);
  filter: drop-shadow(0 2px 24px rgba(0,0,0,.55));
}
@media (min-width: 768px) {
  .marchio-copertina { width: min(52vw, 560px); }
}

.copertina-frase { letter-spacing: .01em; }

/* Fascia scura della Vision: stesso registro della copertina */
.sezione-scura {
  background-color: #0A0E14;
  background-image: linear-gradient(160deg, #0A0E14 0%, #121A26 55%, #0A0E14 100%);
}


/* Fade-in scroll */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }





/* ─── Area riservata: step ─── */
.step { display: none; }
.step.active { display: block; }


/* Card brand selezionabile */
.brand-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.brand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(27,63,122,0.18);
  border-color: #3A8FC8;
}

/* ─── Mappa mercati: punti + tooltip ─── */
.country-pin {
  position: absolute;
  width: 14px; height: 14px;
  padding: 0;
  background: #C9A96E;
  border: 2px solid #FFFFFF;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(27,63,122,0.35);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.country-pin:hover,
.country-pin:focus {
  outline: none;
  z-index: 3;
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow: 0 4px 12px rgba(27,63,122,0.45);
}
.country-pin.pin-hq     { width: 18px; height: 18px; background: #1B3F7A; z-index: 2; }
.country-pin.pin-branch { width: 16px; height: 16px; background: #3A8FC8; }

/* Alone pulsante sulla sede */
.country-pin.pin-hq::after {
  content: "";
  position: absolute; inset: -6px;
  border: 2px solid #1B3F7A;
  border-radius: 9999px;
  opacity: .55;
  animation: pin-pulse 2.6s ease-out infinite;
}
@keyframes pin-pulse {
  0%   { transform: scale(.65); opacity: .6; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Tooltip punto */
.pin-tip {
  position: absolute;
  bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  background: #1B3F7A; color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(27,63,122,0.25);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.pin-tip::after {
  content: "";
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1B3F7A;
}
.country-pin:hover .pin-tip,
.country-pin:focus .pin-tip { opacity: 1; }

/* Legenda mappa */
.legend-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 9999px; }
.legend-hq     { background: #1B3F7A; }
.legend-branch { background: #3A8FC8; }
.legend-market { background: #C9A96E; }

@media (prefers-reduced-motion: reduce) {
  .country-pin.pin-hq::after { animation: none; opacity: .3; }
  .fade-in { transition: none; }
}
/* ─── Sub-nav sticky (pagina prodotti) ─── */
.subnav { position: sticky; top: 64px; z-index: 40; }

/* ─── Foto prodotto ───
   Il riquadro è riempito per intero dalla stessa foto sfocata, con il
   prodotto intero e centrato sopra: niente rettangolo interno. */
/* La foto riempie tutto il riquadro.
   Prima stava al 74% dell'altezza, sfumata ai bordi, sopra una copia
   di sé sfocata: due livelli e molto fondo a vista. Ora è una sola
   immagine ritagliata a riempire. Le foto delle linee sono verticali
   898x1100, quindi su desktop il taglio è minimo. */
.product-photo {
  position: relative;
  overflow: hidden;
  background-color: #EFEAE2;
  background-image: var(--foto);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 320px;
}
/* Le foto delle linee sono 16:9 come il riquadro a questa altezza:
   così il ritaglio è quasi nullo e il soggetto si vede intero. */
@media (min-width: 1024px) {
  /* L'altezza segue la larghezza invece di essere fissa: il riquadro
     occupa metà pagina, quindi 28vw lo tiene sempre intorno al 16:9
     delle foto, su qualsiasi schermo. Il minimo in pixel serve ai
     portatili più stretti, dove 28vw sarebbe troppo poco.
     Classe raddoppiata perché lg:min-h-full di Tailwind ha la stessa
     specificità e altrimenti vincerebbe lui. */
  .product-photo.product-photo { min-height: max(320px, 28vw); }
}

/* ─── Area riservata: linguette e scelta del marchio ─── */
.tab-area { color: #4A5568; border-bottom: 3px solid transparent; margin-bottom: -1px;
            transition: color .2s ease, border-color .2s ease; }
.tab-area:hover { color: #1B3F7A; }
.tab-area.attiva { color: #1B3F7A; border-bottom-color: #C9A96E; }

.scelta-brand { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.scelta-brand:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27,63,122,.14); }
.scelta-brand:has(input:checked),
.scelta-brand.selezionata { border-color: #C9A96E; box-shadow: 0 0 0 3px rgba(201,169,110,.25); }
.scelta-brand:has(input:checked) .spunta,
.scelta-brand.selezionata .spunta { display: flex; }

/* Sottoscelta della linea SAMO (ortopedica o dentale) */
.scelta-linea.selezionata { border-color: #1B3F7A; background: #F0F3F7; }
.scelta-linea.selezionata .pallino {
  border-color: #1B3F7A;
  background: #1B3F7A;
  box-shadow: inset 0 0 0 3px #fff;
}
.scelta-brand:has(input:focus-visible) { outline: 2px solid #3A8FC8; outline-offset: 2px; }



/* ─── Testata trasparente sopra la copertina ───
   Solo in home: la barra non si vede finché si è in cima, poi compare
   scorrendo. Il logo si scambia con la versione bianca. */
.testata-trasparente {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.testata-trasparente nav a,
.testata-trasparente #menu-toggle { color: rgba(255,255,255,.88); }
.testata-trasparente nav a:hover { color: #fff; }
.testata-trasparente .lingua-attiva {
  color: #fff; border-color: rgba(255,255,255,.7); background-color: rgba(255,255,255,.12);
}
.testata-trasparente .lingua-altra {
  color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.3);
}

/* scambio dei due loghi */
.logo-chiaro { display: none; }
.testata-trasparente .logo-chiaro { display: block; }
.testata-trasparente .logo-scuro  { display: none; }

/* La copertina passa sotto la barra, che le sta sopra */
.copertina-sotto-testata { margin-top: -65px; padding-top: 65px; }


/* ══════ Pagina Ortho Capacity ══════ */

/* Apertura a tutto schermo */
.apertura {
  min-height: 86svh;
  background-color: #0A0E14;
  background-image:
    linear-gradient(180deg, rgba(10,14,20,.78) 0%, rgba(10,14,20,.45) 50%, rgba(10,14,20,.92) 100%),
    url('../img/crescita/sale.jpg');
  background-size: cover;
  background-position: center;
}
@supports not (min-height: 86svh) { .apertura { min-height: 86vh; } }

/* Blocchi immagine + testo a piena larghezza */
.leva-foto {
  min-height: 320px;
  background-size: cover;
  background-position: center;
  background-color: #0A0E14;
}
@media (min-width: 1024px) { .leva-foto { min-height: 520px; } }

/* Frase di posizionamento: maiuscolo serif, leggero, nero */
.frase-concetto {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: #14181F;
  font-size: clamp(0.95rem, 2.1vw, 1.75rem);
}
.frase-concetto .accento {
  font-weight: 500;
  color: #C9A96E;
}

/* Numeri grandi */
.numerone {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: .95;
}


/* ─── Filigrana ───
   Marchio molto chiaro dietro al testo: dà profondità senza rumore.
   Serve una sezione in position:relative con overflow nascosto. */
.con-filigrana { position: relative; overflow: hidden; }
.con-filigrana > * { position: relative; z-index: 1; }
.con-filigrana::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(135%, 1100px);
  aspect-ratio: 920 / 231;
  transform: translate(-50%, -50%);
  background: url('../img/logo/nyi-testata.png') center/contain no-repeat;
  opacity: .045;
  pointer-events: none;
}

/* ─── Testata di pagina con planisfero notturno ──────────────────────
   Usata nell'intestazione di Company. Stesso registro della copertina
   della home: banda alta, immagine sotto due veli scuri, testo bianco.
   L'immagine respira con un carrello lentissimo, così la pagina non
   sembra ferma appena si apre.                                      */
.intestazione-mondo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 70svh;
  background-color: #060A11;
}
@supports not (min-height: 70svh) {
  .intestazione-mondo { min-height: 70vh; }
}

/* Il planisfero. Sta su un livello suo perché deve muoversi senza
   trascinare con sé il velo scuro né il testo. */
.intestazione-mondo::before {
  content: "";
  position: absolute;
  inset: -6%;                       /* margine per il carrello */
  background: url('../img/mondo-notte.jpg') center / cover no-repeat;
  opacity: .85;
  transform-origin: 56% 42%;        /* Europa e Mediterraneo */
  animation: mondo-carrello 48s ease-in-out infinite alternate;
}

/* Velo: scurisce sopra e sotto, lascia respirare la fascia centrale
   dove si accendono le luci, e chiude i bordi con una vignettatura. */
.intestazione-mondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 68% at 50% 46%,
                    rgba(6,10,17,0) 0%, rgba(6,10,17,.55) 100%),
    linear-gradient(to bottom,
                    rgba(6,10,17,.70) 0%,
                    rgba(6,10,17,.14) 42%,
                    rgba(6,10,17,.92) 100%);
}

.intestazione-mondo > * {
  position: relative;
  z-index: 1;
}

@keyframes mondo-carrello {
  from { transform: scale(1)     translate3d(0, 0, 0); }
  to   { transform: scale(1.14)  translate3d(-1.5%, 1%, 0); }
}

/* Chi ha chiesto meno animazioni al sistema operativo vede
   l'immagine ferma. */
@media (prefers-reduced-motion: reduce) {
  .intestazione-mondo::before { animation: none; }
}

/* Il titolo entra da solo, una volta, senza dipendere da JavaScript. */
.testata-entra {
  animation: testata-salita 1.1s cubic-bezier(.22, .61, .36, 1) both;
}
.testata-entra-1 { animation-delay: .10s; }
.testata-entra-2 { animation-delay: .26s; }
.testata-entra-3 { animation-delay: .42s; }

@keyframes testata-salita {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .testata-entra { animation: none; }
}

/* Filetto oro sotto l'occhiello della testata */
.filetto-oro {
  display: block;
  width: 54px;
  height: 2px;
  margin: 1.25rem auto 1.5rem;
  background: linear-gradient(to right, transparent, #C9A96E, transparent);
}

/* ─── I tre livelli dell'Ortho Capacity System ───────────────────────
   A riposo sono identici e grigi: nessuno dei tre è «quello giusto»
   per partito preso. Quello che il visitatore punta si stacca dagli
   altri e si accende. Al tocco su telefono l'effetto non parte, quindi
   restano leggibili com'è giusto che siano.                         */

.livello {
  background: #F0F3F7;
  transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.livello .liv-nome   { color: rgba(74, 85, 104, .6); }
.livello .liv-numero { color: #4A5568; }
.livello .liv-sotto  { color: rgba(74, 85, 104, .7); }
.livello .liv-elenco { color: #4A5568; }
.livello .liv-prezzo { color: #2D3748; }
.livello .liv-azione {
  border: 2px solid #9AA3B0;
  color: #4A5568;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.livello .liv-badge { background: #9AA3B0; color: #fff; transition: background-color .35s ease; }

/* Il livello puntato esce dal gruppo */
.livello:hover,
.livello:focus-within {
  background: #1B3F7A;
  transform: translateY(-10px);
  box-shadow: 0 22px 48px rgba(27, 63, 122, .26);
}
.livello:hover .liv-nome,
.livello:focus-within .liv-nome   { color: rgba(255, 255, 255, .6); }
.livello:hover .liv-numero,
.livello:focus-within .liv-numero { color: #C9A96E; }
.livello:hover .liv-sotto,
.livello:focus-within .liv-sotto  { color: rgba(255, 255, 255, .6); }
.livello:hover .liv-elenco,
.livello:focus-within .liv-elenco { color: rgba(255, 255, 255, .88); }
.livello:hover .liv-prezzo,
.livello:focus-within .liv-prezzo { color: #fff; }
.livello:hover .liv-badge,
.livello:focus-within .liv-badge  { background: #C9A96E; }
.livello:hover .liv-azione,
.livello:focus-within .liv-azione {
  background: #fff;
  border-color: #fff;
  color: #1B3F7A;
}
.livello .liv-azione:hover { background: #C9A96E; border-color: #C9A96E; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .livello { transition: background-color .35s ease; }
  .livello:hover, .livello:focus-within { transform: none; }
}

/* ─── Icona casa nella testata ───────────────────────────────────────
   Riporta alla pagina di scelta fra Orthopedic Solutions e Private
   Equity. Sulla copertina della home la testata è trasparente, quindi
   l'icona deve passare da bianca a scura insieme al logo.          */

.icona-casa {
  color: #4A5568;
  transition: color .25s ease, background-color .25s ease;
}

/* Su schermo largo la casa esce dal contenitore centrato e si
   appoggia al bordo sinistro della finestra, sotto le frecce di
   navigazione del browser. Sotto i 1400px il contenitore tocca quasi
   i bordi, quindi resta accanto al logo per non accavallarsi. */
@media (min-width: 1400px) {
  .icona-casa {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.icona-casa:hover { color: #1B3F7A; background: #F0F3F7; }

.testata-trasparente .icona-casa { color: rgba(255, 255, 255, .8); }
.testata-trasparente .icona-casa:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}