/* =========================================================
   Studio Medico-Dentistico Marzano — stili di sito
   ========================================================= */

:root{
  --brand:#0E384C;
  --accent:#1E84B5;
  --cyan:#22A2BB;
  --ice:#EFF8FF;
  --muted:#527282;
  --amber:#FFA800;
}

html{scroll-behavior:smooth}

body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--muted);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:var(--accent);color:#fff}

img{max-width:100%}

/* ---------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------- */
.anim{opacity:0;transform:translate3d(0,40px,0);transition:opacity .8s ease,transform .8s ease}
.anim.in{opacity:1;transform:none}
.d1{transition-delay:.2s}
.d2{transition-delay:.4s}
.d3{transition-delay:.6s}
.d4{transition-delay:.8s}
.d5{transition-delay:1s}
.d6{transition-delay:1.2s}
.d7{transition-delay:1.4s}

/* ---------------------------------------------------------
   Eyebrow (occhiello)
   --------------------------------------------------------- */
.eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:14px;line-height:21px;font-weight:500;
  letter-spacing:2.8px;text-transform:uppercase;color:var(--accent);
}
.eyebrow::before{content:"+";font-weight:600;letter-spacing:0;font-size:16px;line-height:1}
.eyebrow-center{justify-content:center}
.eyebrow-right{justify-content:flex-end;flex-direction:row-reverse}
.eyebrow-right::before{margin-left:0}
.eyebrow-light{color:#fff}

/* ---------------------------------------------------------
   Bottoni
   --------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:7px 7px 7px 24px;border-radius:99px;
  background:var(--accent);color:#fff;
  font-size:14px;line-height:21px;font-weight:600;
  overflow:hidden;transition:background .5s ease-in-out,box-shadow .5s ease-in-out;
  box-shadow:0 10px 28px rgba(30,132,181,.22);
}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:0;
  background:var(--brand);transition:width .45s ease-in-out;z-index:0;border-radius:99px;
}
.btn:hover::after{width:100%}
.btn > *{position:relative;z-index:1}
.btn-ic{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:99px;
  background:#fff;color:var(--accent);transition:transform .4s ease-in-out,color .4s ease-in-out;
}
.btn:hover .btn-ic{transform:rotate(45deg)}
.btn-sm{padding:6px 6px 6px 20px;font-size:13px}
.btn-sm .btn-ic{width:32px;height:32px}

.btn-light{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:7px 7px 7px 24px;border-radius:99px;
  background:#fff;color:var(--brand);
  font-size:14px;line-height:21px;font-weight:600;
  overflow:hidden;transition:color .5s ease-in-out;
  box-shadow:0 10px 28px rgba(14,56,76,.18);
}
.btn-light::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:0;
  background:var(--accent);transition:width .45s ease-in-out;z-index:0;border-radius:99px;
}
.btn-light:hover::after{width:100%}
.btn-light:hover{color:#fff}
.btn-light > *{position:relative;z-index:1}
.btn-light .btn-ic{background:var(--accent);color:#fff;transition:transform .4s ease-in-out,background .4s ease-in-out,color .4s ease-in-out}
.btn-light:hover .btn-ic{background:#fff;color:var(--accent);transform:rotate(45deg)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;color:var(--accent);
  transition:color .3s ease-in-out;
}
.btn-ghost:hover{color:var(--brand)}

/* ---------------------------------------------------------
   Header sempre fisso in alto durante lo scroll
   (il wrapper dell'include è figlio diretto di <body>:
    rendendo sticky il wrapper l'header resta visibile
    per tutta la pagina, senza salti di layout)
   --------------------------------------------------------- */
[data-include="partials/header.html"]{
  position:sticky;top:0;z-index:50;
}
[data-include="partials/header.html"] > header{
  box-shadow:0 6px 24px rgba(14,56,76,.06);
  transition:box-shadow .45s ease-in-out,background-color .45s ease-in-out;
}

/* Stato compatto: appena si scrolla la barra si "ritira"
   (altezza + logo) con una transizione morbida */
[data-include="partials/header.html"] > header .hdr-bar,
[data-include="partials/header.html"] > header .hdr-logo{
  transition:height .45s cubic-bezier(.33,1,.68,1);
  will-change:height;
}
/* Sfondo pieno (non traslucido) anche da scrollati: il logo è "ritagliato"
   dal bianco con mix-blend-mode e su una barra semitrasparente il suo
   riquadro bianco tornerebbe visibile in trasparenza */
html.hdr-stuck [data-include="partials/header.html"] > header{
  box-shadow:0 10px 30px rgba(14,56,76,.12);
  background-color:var(--ice);
}
html.hdr-stuck [data-include="partials/header.html"] > header .hdr-bar{height:60px}
html.hdr-stuck [data-include="partials/header.html"] > header .hdr-logo{height:34px}
@media (min-width:1024px){
  html.hdr-stuck [data-include="partials/header.html"] > header .hdr-bar{height:74px}
  html.hdr-stuck [data-include="partials/header.html"] > header .hdr-logo{height:40px}
}
@media (prefers-reduced-motion: reduce){
  [data-include="partials/header.html"] > header .hdr-bar,
  [data-include="partials/header.html"] > header .hdr-logo{transition:none}
}

/* ---------------------------------------------------------
   Navigazione
   --------------------------------------------------------- */
.nav-link{
  position:relative;font-size:16px;line-height:25.6px;font-weight:500;color:var(--brand);
  transition:color .3s ease-in-out;
}
.nav-link:hover{color:var(--accent)}
.nav-link.active{color:var(--accent);font-weight:600}
.nav-link.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--accent);
}
.mnav-link.active::after{display:none}

.foot-link{
  font-size:16px;line-height:26px;color:rgba(255,255,255,.8);
  transition:color .3s ease-in-out;
}
.foot-link:hover{color:var(--cyan)}

/* ---------------------------------------------------------
   Card servizio
   --------------------------------------------------------- */
.svc{
  position:relative;isolation:isolate;overflow:hidden;
  background:#fff;border:1px solid var(--ice);border-radius:20px;padding:30px;
  box-shadow:0 14px 44px rgba(14,56,76,.06);
  transition:box-shadow .4s ease-in-out,transform .4s ease-in-out;
}
.svc::before{
  content:"";position:absolute;left:0;right:0;top:100%;height:100%;
  background:var(--accent);transition:top .45s ease-in-out;z-index:-1;
}
.svc:hover::before{top:0}
.svc:hover{box-shadow:0 22px 50px rgba(30,132,181,.25);transform:translateY(-4px)}
.svc-i{
  display:grid;place-items:center;width:58px;height:58px;border-radius:16px;
  background:var(--ice);color:var(--accent);
  transition:background .4s ease-in-out,color .4s ease-in-out;
}
.svc-t{color:var(--brand);transition:color .4s ease-in-out}
.svc-p{color:var(--muted);transition:color .4s ease-in-out}
.svc-m{color:var(--accent);transition:color .4s ease-in-out}
.svc:hover .svc-i{background:rgba(255,255,255,.18);color:#fff}
.svc:hover .svc-t,.svc:hover .svc-p,.svc:hover .svc-m{color:#fff}
.svc:hover .svc-dot{background:#fff;color:var(--accent)}
.svc-dot{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:99px;
  background:var(--accent);color:#fff;transition:background .4s ease-in-out,color .4s ease-in-out;
}

/* Griglia servizi: card della stessa altezza, testi e link allineati */
.svc-grid .svc{display:flex;flex-direction:column}
.svc-grid .svc-t{text-wrap:balance}
.svc-grid .svc-p{flex:1 1 auto}
.svc-grid .svc-m{
  width:100%;justify-content:space-between;padding-top:18px;
  border-top:1px solid var(--ice);
  transition:color .4s ease-in-out,border-color .4s ease-in-out;
}
.svc-grid .svc:hover .svc-m{border-color:rgba(255,255,255,.35)}

/* Testo sempre visibile: la card spiega il servizio senza clic */
.svc-grid .svc-p{display:block}
@media (min-width:1024px){
  .svc-grid .svc{padding:28px}
  .svc-grid .svc-t{min-height:2.6em}
}

/* Foto del servizio in evidenza: banda a tutta larghezza in testa alla card */
.svc-ph{
  display:block;flex:none;
  width:calc(100% + 60px);height:190px;margin:-30px -30px 22px;
  object-fit:cover;object-position:center;
  transition:transform .5s ease-in-out;
}
.svc:hover .svc-ph{transform:scale(1.06)}
@media (min-width:1024px){
  .svc-ph{width:calc(100% + 56px);height:200px;margin:-28px -28px 24px}
}

/* ---------------------------------------------------------
   Card informativa
   --------------------------------------------------------- */
.info-card{
  background:#fff;border:1px solid #E6EFF6;border-radius:16px;padding:28px;
  box-shadow:0 14px 44px rgba(14,56,76,.06);
  transition:box-shadow .4s ease-in-out,transform .4s ease-in-out;
}
.info-card:hover{box-shadow:0 22px 54px rgba(14,56,76,.12);transform:translateY(-4px)}
.info-ic{
  display:grid;place-items:center;width:52px;height:52px;border-radius:12px;
  background:var(--ice);color:var(--accent);
}

/* ---------------------------------------------------------
   Immagini
   --------------------------------------------------------- */
.zoom{overflow:hidden}
.zoom img{transition:transform .6s ease-in-out}
.zoom:hover img{transform:scale(1.08)}

/* Reveal "a tendina" allo scroll + luce diagonale al passaggio del mouse */
.image-anime,.image-reveal{position:relative;overflow:hidden}
.fx .image-anime::before,.fx .image-reveal::before{
  content:"";position:absolute;inset:-1px;z-index:1;background:#fff;pointer-events:none;
  transform:translateY(0);transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.fx .image-anime.in::before,.fx .image-reveal.in::before{transform:translateY(-101%)}
.image-anime::after{
  content:"";position:absolute;left:50%;top:50%;z-index:2;width:200%;height:0;
  background:rgba(255,255,255,.3);transform:translate(-50%,-50%) rotate(-45deg);pointer-events:none;
}
.image-anime:hover::after{height:250%;background:transparent;transition:all .6s linear}

.map-gray iframe{filter:grayscale(1);transition:filter .6s ease-in-out}
.map-gray:hover iframe{filter:grayscale(0)}

/* ---------------------------------------------------------
   Testi: reveal parola per parola
   --------------------------------------------------------- */
.text-anime .ta-w{display:inline-block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.text-anime .ta-i{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.22,1,.26,1)}
.text-anime.in .ta-i{transform:translateY(0)}

/* ---------------------------------------------------------
   Accordion
   --------------------------------------------------------- */
.acc-item{border-top:1px solid #E1EAF1}
.acc-item:last-child{border-bottom:1px solid #E1EAF1}
.acc-btn{display:flex;width:100%;align-items:center;gap:16px;padding:22px 0;text-align:left}
.acc-chev{transition:transform .35s ease-in-out;color:var(--accent)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .45s ease,opacity .45s ease;opacity:0}
.acc-item.open .acc-panel{max-height:420px;opacity:1}
.acc-item.open .acc-chev{transform:rotate(180deg)}
.acc-item.open .acc-title{color:var(--accent)}

/* ---------------------------------------------------------
   Animazioni in loop
   --------------------------------------------------------- */
@keyframes spin-slow{to{transform:rotate(360deg)}}
.spin{animation:spin-slow 30s linear infinite}

@keyframes twinkle{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.78);opacity:.6}}
.twinkle{animation:twinkle 3s ease-in-out infinite}

@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.pulse-dot{animation:pulse-dot 1.6s ease-in-out infinite}

/* ---------------------------------------------------------
   Feed Instagram (proporzione reale 4:5, mai ritagliata)
   --------------------------------------------------------- */
.ig-tile{position:relative;display:block;overflow:hidden;border-radius:20px;background:var(--ice);aspect-ratio:4/5}
.ig-tile img{width:100%;height:100%;object-fit:contain;transition:transform .6s ease-in-out}
.ig-tile:hover img{transform:scale(1.04)}
.ig-tile::after{
  content:"";position:absolute;inset:0;background:rgba(14,56,76,.42);
  opacity:0;transition:opacity .4s ease-in-out;
}
.ig-tile:hover::after{opacity:1}
.ig-badge{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  opacity:0;transform:translateY(10px);transition:opacity .4s ease-in-out,transform .4s ease-in-out;
}
.ig-tile:hover .ig-badge{opacity:1;transform:none}

/* ---------------------------------------------------------
   Logo scontornato (fondo bianco rimosso via blending)
   --------------------------------------------------------- */
.logo-cut{mix-blend-mode:multiply}
.logo-cut-dark{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}

/* ---------------------------------------------------------
   Dettagli decorativi
   --------------------------------------------------------- */
.ring-dotted{border:1px dashed rgba(30,132,181,.35)}
.hairline{height:1px;background:rgba(14,56,76,.1)}

/* ---------------------------------------------------------
   Accessibilità / motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .anim{opacity:1;transform:none}
  .fx .image-anime::before,.fx .image-reveal::before{display:none}
  .text-anime .ta-i{transform:none}
}