/* ============================================================
   DIAGNOSTICA TODISCO — SKIN CINEMATOGRAFICA (pagine interne)
   Si aggiunge DOPO style.css e riveste ogni componente con
   l'identità della home: petrolio, avorio, acqua, Marcellus.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Archivo:wght@300;400;500;600&display=swap');

:root{
  --c-nero:#04101A;
  --c-fondo:#071722;
  --c-avorio:#F3EFE6;
  --c-avorio-70:rgba(243,239,230,.72);
  --c-avorio-55:rgba(243,239,230,.55);
  --c-acqua:#2BD4C0;
  --c-acqua-ink:#7FE7DB;
  --c-hairline:rgba(243,239,230,.16);
  --c-vetro:rgba(243,239,230,.045);
  --c-vetro-2:rgba(243,239,230,.07);
}

/* ---------- Base ---------- */
body{
  background:var(--c-nero);
  color:var(--c-avorio);
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:300;
}
body::after{ /* grana cinematografica leggera */
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
::selection{background:rgba(43,212,192,.35);color:#fff}
h1,h2,h3,h4{font-family:'Marcellus',serif;font-weight:400;color:var(--c-avorio);letter-spacing:.005em}
a{color:var(--c-acqua-ink)}
a:hover{color:var(--c-acqua)}
:focus-visible{outline:2.5px solid var(--c-acqua)}
.lead{color:var(--c-avorio-70)}
p{color:inherit}

.eyebrow{color:var(--c-acqua)}
.eyebrow::before{background:var(--c-acqua)}

/* ---------- Bottoni ---------- */
.btn-solid{background:var(--c-acqua);color:var(--c-nero)}
.btn-solid:hover{background:#43E4D1;color:var(--c-nero);box-shadow:0 14px 38px rgba(43,212,192,.3)}
.btn-acqua{background:var(--c-acqua);color:var(--c-nero)}
.btn-acqua:hover{background:#43E4D1;color:var(--c-nero);box-shadow:0 14px 38px rgba(43,212,192,.3)}
.btn-ghost{border-color:var(--c-hairline);color:var(--c-avorio);background:transparent}
.btn-ghost:hover{border-color:var(--c-acqua);color:var(--c-acqua)}

/* ---------- Header ---------- */
.site-header{background:rgba(4,16,26,.72);border-bottom:1px solid var(--c-hairline)}
.brand,.brand-text,.brand-text strong{color:var(--c-avorio)}
.brand .logo-mark{color:var(--c-avorio)}
.brand .logo-mark .rosa-acqua{color:var(--c-acqua)}
.brand-text small{color:var(--c-avorio-55)}
.site-nav>a{color:var(--c-avorio-70)}
.site-nav>a:hover{color:var(--c-acqua)}
.site-nav>a[aria-current="page"]{color:var(--c-acqua);border-bottom-color:var(--c-acqua)}
.nav-toggle{background:transparent;border-color:var(--c-hairline);color:var(--c-avorio)}
@media (max-width:920px){
  .site-nav{background:#0A1A28;border-bottom:1px solid var(--c-hairline);box-shadow:0 24px 60px rgba(0,0,0,.5)}
  .site-nav>a{border-bottom:1px solid rgba(243,239,230,.08)}
  .site-nav>a[aria-current="page"]{background:rgba(43,212,192,.1)}
}

/* ---------- Hero interne ---------- */
.pagina-hero,.hero{
  background:
    radial-gradient(900px 460px at 88% -20%, rgba(43,212,192,.12), transparent 60%),
    linear-gradient(180deg,#0A1E2E,var(--c-nero));
  border-bottom:1px solid var(--c-hairline);
}
.hero h1 .accent,.pagina-hero .accent{color:var(--c-acqua)}
.hero-proof{color:var(--c-avorio-55)}
.hero-proof b{color:var(--c-avorio)}

/* ---------- Ricerca esami ---------- */
.search-exam{background:rgba(4,16,26,.55);border-color:var(--c-hairline);box-shadow:none}
.search-exam:focus-within{border-color:var(--c-acqua)}
.search-exam input{color:var(--c-avorio)}
.search-exam input::placeholder{color:var(--c-avorio-55)}
.search-hints a{color:var(--c-avorio-70);border-color:var(--c-hairline);background:var(--c-vetro)}
.search-hints a:hover{border-color:var(--c-acqua);color:var(--c-acqua)}

/* ---------- Sezioni ---------- */
.section-alt{background:var(--c-fondo);border-block:1px solid var(--c-hairline)}
.section-navy .lead{color:#B9CCD6}

/* ---------- Card & vetri ---------- */
.card,.tech-card,.medico,.review,.pannello,.scheda-rapida,.faq details,.slot-card,.fondi span{
  background:var(--c-vetro);
  border-color:var(--c-hairline);
  backdrop-filter:blur(8px);
}
.card:hover,.medico:hover{border-color:rgba(43,212,192,.45);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.card h3,.medico h3,.review blockquote,.slot-card .slot{color:var(--c-avorio)}
.card p,.medico p{color:var(--c-avorio-55)}
.card .icona{background:rgba(43,212,192,.12);color:var(--c-acqua)}
.card .prezzo{color:var(--c-avorio)}
.card .link{color:var(--c-acqua)}
.card .meta{border-top-color:var(--c-hairline)}
.tech-card::after{border-color:rgba(43,212,192,.18)}
.tech-card .sigla{color:var(--c-acqua)}
.tech-specs li{background:rgba(4,16,26,.5);border-color:var(--c-hairline);color:var(--c-avorio-70)}
.medico .ruolo{color:var(--c-acqua)}
.medico .albo{color:var(--c-avorio-55)}
.review cite{color:var(--c-avorio-55)}
.fondi span{color:var(--c-avorio)}
.fondi span small{color:var(--c-avorio-55)}
.slot-card .tag{color:var(--c-acqua)}
.slot-card .nota{color:var(--c-avorio-55)}

/* ---------- Logistica ---------- */
.check-list li::before{
  background:rgba(43,212,192,.14) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232BD4C0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-10"/></svg>') center/13px no-repeat;
}

/* ---------- FAQ ---------- */
.faq details[open]{border-color:var(--c-acqua)}
.faq summary{color:var(--c-avorio)}
.faq summary::after{color:var(--c-acqua)}
.faq details p{color:var(--c-avorio-55)}

/* ---------- Scheda rapida esame ---------- */
.scheda-rapida{box-shadow:0 24px 60px rgba(0,0,0,.4)}
.scheda-rapida .riga{border-bottom-color:var(--c-hairline)}
.scheda-rapida dt{color:var(--c-avorio-55)}
.scheda-rapida dd{color:var(--c-avorio)}
.scheda-rapida .micro{color:var(--c-avorio-55)}

/* ---------- Passi ---------- */
.passi li::before{background:transparent;border-color:var(--c-acqua);color:var(--c-acqua)}
.passi p{color:var(--c-avorio-55)}

/* ---------- Wizard prenotazione ---------- */
.wizard-steps span{background:var(--c-vetro);border-color:var(--c-hairline);color:var(--c-avorio-55)}
.wizard-steps span.attivo{border-color:var(--c-acqua);color:var(--c-acqua);background:rgba(43,212,192,.12)}
.wizard-steps span.fatto{border-color:var(--c-avorio-70);color:var(--c-avorio-70)}
.scelta label{border-color:var(--c-hairline);background:var(--c-vetro)}
.scelta label b{color:var(--c-avorio)}
.scelta label small{color:var(--c-avorio-55)}
.scelta label .p{color:var(--c-acqua)}
.scelta input:checked+label{border-color:var(--c-acqua);background:rgba(43,212,192,.12)}
.giorno h3 .badge-48{color:var(--c-acqua);background:rgba(43,212,192,.12)}
.orari button{background:var(--c-vetro);border-color:var(--c-hairline);color:var(--c-avorio)}
.orari button:hover{border-color:var(--c-acqua)}
.orari button.sel{border-color:var(--c-acqua);background:rgba(43,212,192,.14);color:var(--c-acqua)}
.campo label{color:var(--c-avorio)}
.campo input,.campo textarea,.campo select{background:rgba(4,16,26,.55);border-color:var(--c-hairline);color:var(--c-avorio)}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--c-acqua);background:rgba(4,16,26,.75)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--c-avorio-55)}
.consenso{color:var(--c-avorio-55)}
.consenso input{accent-color:var(--c-acqua)}
.riepilogo{background:rgba(43,212,192,.1);border-color:var(--c-acqua);color:var(--c-avorio)}
.riepilogo b{color:var(--c-avorio)}
.conferma .codice{background:rgba(4,16,26,.6);border-color:var(--c-acqua);color:var(--c-avorio)}

/* ---------- Tabelle ---------- */
.tabella{background:var(--c-vetro);box-shadow:none}
.tabella th{background:rgba(43,212,192,.1);color:var(--c-avorio)}
.tabella th,.tabella td{border-bottom-color:var(--c-hairline)}
.tabella td{color:var(--c-avorio-70)}
.tabella td.mono{color:var(--c-avorio)}

/* ---------- Note e footer ---------- */
.nota-info{color:var(--c-avorio-55);border-left-color:var(--c-acqua)}
.site-footer{border-top:1px solid var(--c-hairline)}

@media (prefers-reduced-motion:reduce){ body::after{display:none} }


/* ============ HERO CON VIDEO (pagine interne) ============ */
.pagina-hero.hero-media{position:relative;overflow:hidden}
.pagina-hero.hero-media>.wrap{position:relative;z-index:2}
.hero-media-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover}
.hero-media-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.05) brightness(.9)}
.hero-media-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,16,26,.66),rgba(4,16,26,.8) 55%,#04101A 97%),radial-gradient(120% 90% at 82% 8%,rgba(43,212,192,.15),transparent 60%)}
@media (prefers-reduced-motion: reduce){.hero-media-bg video{display:none}}

/* foto nella scheda rapida degli esami */
.scheda-foto{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin:0 0 1.05rem;border:1px solid rgba(243,239,230,.14);display:block}

/* ritratti dell'equipe */
.ritratto{width:78px;height:78px;border-radius:50%;object-fit:cover;border:2px solid rgba(43,212,192,.55);display:block;margin-bottom:.9rem}


/* voce Demo — pelle scura */
.nav-demo-pannello{background:rgba(8,26,40,.97);border-color:rgba(243,239,230,.16);box-shadow:0 20px 48px rgba(0,0,0,.55)}
.nav-demo-pannello a:hover{background:rgba(43,212,192,.13)}