/* Stili della pagina, dal prototipo (parodontologia.html) */
/* Racconto 3D */
.story{position:relative;background:#fff;transition:background .8s var(--ease)}
.js .story{height:560vh}
.story-pin{position:relative}
.js .story-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage-bg{position:absolute;inset:0;background:radial-gradient(60% 70% at 66% 52%,#FFFFFF 0%,#EEF6F8 58%,#E2EEF1 100%);transition:opacity .8s var(--ease)}
.stage-x{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease);background-color:#0B141B;background-image:linear-gradient(rgba(131,209,225,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(131,209,225,.07) 1px,transparent 1px);background-size:48px 48px}
.story.xr .stage-x{opacity:1}
.story-word{position:absolute;right:-1vw;bottom:-2vw;font:800 clamp(120px,19vw,320px)/.8 var(--display);letter-spacing:-.06em;color:rgba(14,116,144,.06);font-variation-settings:'wdth' 75;white-space:nowrap;pointer-events:none;transition:color .8s}
.story.xr .story-word{color:rgba(131,209,225,.07)}
.jaw{position:absolute;top:0;right:0;bottom:0;width:62%;cursor:grab}
.story.grabbing .jaw{cursor:grabbing}
.jaw canvas{width:100%!important;height:100%!important}
.jaw-fallback{display:none}
.story.nogl .jaw-fallback{display:block;position:absolute;inset:12% 6% 12% 0;border-radius:24px;overflow:hidden}
.story.nogl .jaw-fallback img{width:100%;height:100%;object-fit:cover}
.probe-label{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;display:flex;align-items:center;gap:10px;white-space:nowrap}
.probe-label::before{content:'';width:46px;height:1.5px;background:currentColor}
.probe-label span{display:inline-flex;flex-direction:column;background:var(--ink);color:#fff;border-radius:12px;padding:8px 12px;font:600 11px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase}
.probe-label b{font:800 26px/1 var(--display);letter-spacing:-.02em;text-transform:none;margin-top:4px;color:var(--azzurro);font-variation-settings:'wdth' 80}
.probe-label{color:var(--ink);margin-left:6px;margin-top:-6px}
.story.xr .probe-label{color:var(--azzurro)}

.story-text{position:relative;z-index:3;width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gut);height:100%}
.panel{max-width:500px;padding:140px 0 120px}
.js .panel{position:absolute;left:var(--gut);top:50%;margin-top:-6px;transform:translateY(-50%);padding:0;will-change:opacity,transform}
.js .panel[data-stage]{top:auto;bottom:max(19vh,150px)}
.js .panel[data-stage="0"]{bottom:auto;top:max(15vh,112px)}
.story.xr .panel{color:#fff}
.story.xr .panel .lead,.story.xr .panel p{color:#C2D1D7}
.story.xr .eyebrow{color:var(--azzurro)}
.crumb{display:flex;gap:10px;font-size:13px;color:var(--muted);margin-bottom:34px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--teal)}
.h1{font-size:clamp(42px,5vw,80px);letter-spacing:-.045em;line-height:.93;margin-top:20px}
.ph2{font-size:clamp(36px,4vw,60px);letter-spacing:-.04em;line-height:.95;margin:16px 0 20px}
.panel p{color:var(--muted);max-width:30em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.byline{display:flex;align-items:center;gap:12px;margin-top:32px;font-size:13px;line-height:1.5;color:var(--muted)}
.byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:60% 20%}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid #9DB9C1;background:rgba(255,255,255,.75);color:var(--ink);font:500 14px/1 var(--body);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-out{margin-top:14px;font-size:14px;min-height:22px}
.chip-out strong{color:var(--ink)}
.steps3{display:grid;gap:14px;margin-top:6px;counter-reset:s}
.steps3 li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;font-size:16px}
.steps3 li::before{counter-increment:s;content:'0' counter(s);font:800 30px/1 var(--display);font-variation-settings:'wdth' 75;color:var(--verde)}
.steps3 li.opt::before{color:#7C9BA5}
.steps3 b{color:var(--ink)}
.story-text .panel p+p{margin-top:12px}
.steps3.small li{font-size:15px;line-height:1.5}
.story.xr .steps3 b{color:#fff}
.opt-tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1.5px dashed #2F9C7E;border-radius:999px;padding:2px 8px;color:#14513F;vertical-align:2px}
.story.xr .opt-tag{color:var(--verde);border-color:var(--verde)}
.note{margin-top:16px;font-size:14px}
.js .panel .p0{font-size:clamp(16px,1.25vw,18px)}
.risk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:start}
.risk-list{margin-top:34px;border-top:1px solid var(--line)}
.risk-list li{padding:18px 0;border-bottom:1px solid var(--line);font-size:18px;color:var(--ink)}
.risk-note{padding:clamp(28px,3vw,44px);background:var(--mist);border-radius:22px}
.risk-note p:not(.eyebrow){margin-top:16px;line-height:1.7}
.sign{padding-top:28px;padding-bottom:28px;font-size:13px;color:var(--soft);border-top:1px solid var(--line)}
@media (max-width:900px){.risk{grid-template-columns:1fr}}
.js .panel{opacity:0;visibility:hidden}
.js .panel[data-stage="0"]{opacity:1;visibility:visible}
.js .story.nogl{height:auto}
.js .story.nogl .story-pin{position:relative;height:auto;overflow:visible}
.js .story.nogl .story-text{height:auto}
.js .story.nogl .panel{position:relative;inset:auto;transform:none;opacity:1;visibility:visible;padding:120px 0 24px;background:none;backdrop-filter:none}
.story.nogl .jaw{position:relative;width:100%;height:56vh;top:auto}
.story.nogl .jaw-fallback{inset:0 var(--gut)}

.story-ui{position:absolute;z-index:5;left:0;right:0;bottom:28px}
.story-ui .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pills{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(15,25,35,.08);position:relative}
.pills button{min-height:40px;padding:0 14px;border-radius:999px;border:0;background:transparent;font:600 13px/1 var(--body);color:var(--muted);cursor:pointer;transition:background .3s,color .3s}
.pills button[aria-current="step"]{background:var(--ink);color:#fff}
.story-bar{position:absolute;left:18px;right:18px;bottom:-9px;height:2px;background:rgba(15,25,35,.08);border-radius:2px;overflow:hidden}
.story-bar i{display:block;height:100%;background:var(--verde);transform-origin:left;transform:scaleX(0)}
.xbtn{min-height:50px;padding:0 18px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 14px/1 var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.xbtn[aria-pressed="true"]{background:var(--azzurro);border-color:var(--azzurro);color:var(--ink)}
.story.xr .xbtn{color:#fff;border-color:rgba(255,255,255,.5)}
.story.xr .xbtn[aria-pressed="true"]{color:var(--ink)}
.story.xr .pills{background:rgba(15,25,35,.7);border-color:rgba(255,255,255,.1)}
.story.xr .pills button{color:#C2D1D7}
.story.xr .pills button[aria-current="step"]{background:#fff;color:var(--ink)}
.hint{margin-left:auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.story.xr .hint{color:#8FA3AD}
.story:not(.gl) .story-ui{display:none}

/* Video che si allarga */
.expand{position:relative;height:230vh;background:var(--ink)}
.expand-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.expand .frame{position:relative;width:calc(58% + 42% * var(--p,0));height:calc(58% + 42% * var(--p,0));border-radius:calc(28px * (1 - var(--p,0)));overflow:hidden}
.expand .frame video,.expand .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.18 - .18 * var(--p,0)))}
.expand .frame::after{content:'';position:absolute;inset:0;background:rgba(15,25,35,.28)}
.expand-txt{position:absolute;z-index:3;left:0;right:0;bottom:9vh;color:#fff}
.expand-txt .h2-xl{max-width:11em}
.expand-txt p{color:#D8E4E8;max-width:30em;margin-top:22px;font-size:18px}

.tools{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:20px;margin-top:64px}
.tools figure{margin:0}
.tools .m{border-radius:20px;overflow:hidden;background:var(--ink)}
.tools .m video,.tools .m img{width:100%;height:100%;object-fit:cover}
.tools figure:first-child{grid-row:span 2}
.tools figure:first-child .m{height:100%;min-height:520px}
.tools figure:not(:first-child) .m{aspect-ratio:16/10}
.tools figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.tools figure:first-child{display:flex;flex-direction:column}
.tools figure:first-child .m{flex:1}

.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,96px)}

.cta-photo{position:relative;align-self:stretch;min-height:420px;border-radius:24px;overflow:hidden}
.cta-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 30%}

@media (max-width:1080px){
  .js .story{height:620vh}
  .jaw{width:100%;height:58%;top:64px}
  .story-bg-word{display:none}
  .js .panel,.js .panel[data-stage]{left:var(--gut);right:var(--gut);top:auto;bottom:96px;max-width:none;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:22px 22px 24px;border-radius:22px}
  .js .panel[data-stage="0"]{top:auto;bottom:96px}
  .story.xr .panel{background:rgba(15,25,35,.78)}
  .h1{font-size:clamp(34px,8vw,56px)}
  .ph2{font-size:clamp(28px,7vw,44px)}
  .crumb{margin-bottom:14px}
  .panel .ctas{margin-top:18px}
  .byline{display:none}
  .hint{display:none}
  .story-ui{bottom:auto;top:78px}
  .story-ui .wrap{justify-content:space-between}
  .pills{overflow-x:auto;max-width:calc(100vw - 2 * var(--gut) - 66px)}
  .pills button{padding:0 11px;font-size:12px;white-space:nowrap}
  .xbtn span{display:none}
  .xbtn{min-height:44px;width:44px;padding:0;justify-content:center}
  .tools{grid-template-columns:minmax(0,1fr)}
  .tools figure:first-child .m{min-height:300px}
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .expand .frame{width:calc(86% + 14% * var(--p,0));height:calc(60% + 40% * var(--p,0))}
  .panel p{font-size:15px}
  .chips{margin-top:12px}
  .chip{min-height:40px;font-size:13px;padding:0 12px}
}
@media (max-width:640px){ .panel .lead,.panel .note,.panel[data-stage="1"] .chips{display:none} .panel p{font-size:14px} .js .story .jaw{height:60%} .js .panel,.js .panel[data-stage]{bottom:84px} .cta-photo{min-height:300px} }