/* =====================================================================
   Odontekne — componenti condivisi da tutte le pagine.
   ===================================================================== */

/* ---------- Intestazione ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;gap:28px;min-height:var(--header-h);}
.brand{display:inline-flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;color:var(--ink);}
.brand img{width:44px;height:42px;object-fit:contain;}
.brand-text{display:flex;white-space:nowrap;flex-direction:column;line-height:1.15;}
.brand-text strong{font-weight:600;font-size:.98rem;letter-spacing:.16em;}
.brand-text span{font-size:.76rem;color:var(--ink-soft);}
.brand:hover{color:var(--ink);}
.nav-links{display:flex;align-self:stretch;gap:26px;}
.nav-links a{position:relative;display:flex;align-items:center;font-size:.95rem;font-weight:500;color:var(--ink);text-decoration:none;}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--action);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-smooth-out);}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--action);}
  .nav-links a:hover::after{transform:scaleX(1);}
  .nav-login:hover{color:var(--action);}
}
/* pagina attuale: un blocco rosso appoggiato sulla linea dell'intestazione */
.nav-links a[aria-current="page"]::after{height:4px;background:var(--red);transform:scaleX(1);}
.nav-links a[aria-current="page"]:hover{color:var(--ink);}
.nav-actions{display:flex;align-items:center;gap:20px;}
.nav-login{display:inline-flex;white-space:nowrap;align-items:center;gap:7px;font-size:.92rem;font-weight:500;color:var(--ink);text-decoration:none;}
.nav-login svg{width:16px;height:16px;}
.nav-login[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:9px;}
.menu-toggle{display:none;place-items:center;min-width:48px;height:48px;margin-right:-8px;padding:0 8px;border:0;background:transparent;color:var(--ink);-webkit-user-select:none;user-select:none;transition:transform var(--press-dur) var(--ease-smooth-out);}
.menu-toggle:active{transform:scale(var(--press-scale));}
.menu-toggle svg{grid-area:1 / 1;width:26px;height:26px;transition:opacity 200ms var(--ease-smooth-out),transform 200ms var(--ease-smooth-out),filter 200ms var(--ease-smooth-out);}
.menu-toggle .icon-close,.menu-toggle[aria-expanded="true"] .icon-open{opacity:0;transform:scale(.8);filter:blur(2px);}
.menu-toggle[aria-expanded="true"] .icon-close{opacity:1;transform:none;filter:none;}

/* Menu su telefono (ricetta "Menu dropdown"): un foglio sotto l'intestazione */
.mobile-menu{display:none;}
@media (max-width:1120px){
  .nav-links,.nav-actions .nav-login,.nav-actions .btn{display:none;}
  .menu-toggle{display:inline-grid;}
  .mobile-menu{display:block;position:absolute;left:0;right:0;top:100%;padding:4px var(--gutter) 24px;background:var(--paper);border-bottom:1px solid var(--ink);visibility:hidden;max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;}
  .mobile-menu.is-open,.mobile-menu.is-closing{visibility:visible;}
  .mobile-menu > a{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:1.45rem;line-height:1.2;color:var(--ink);text-decoration:none;}
  .mobile-menu > a[aria-current="page"]::before{content:"";width:12px;height:12px;background:var(--red);}
  .mobile-menu > a:active{color:var(--action);}
  .mobile-menu .mobile-menu-cta{display:grid;gap:10px;margin-top:20px;}
}
.t-dropdown{transform-origin:top right;transform:scale(var(--dropdown-pre-scale));opacity:0;pointer-events:none;transition:transform var(--dropdown-open-dur) var(--dropdown-ease),opacity var(--dropdown-open-dur) var(--dropdown-ease);will-change:transform,opacity;}
.t-dropdown.is-open{transform:scale(1);opacity:1;pointer-events:auto;}
.t-dropdown.is-closing{transform:scale(var(--dropdown-closing-scale));opacity:0;pointer-events:none;transition:transform var(--dropdown-close-dur) var(--dropdown-ease),opacity var(--dropdown-close-dur) var(--dropdown-ease);}

/* ---------- Pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 24px;border:1.5px solid transparent;border-radius:var(--radius);font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color var(--duration-quick) ease,color var(--duration-quick) ease,border-color var(--duration-quick) ease,transform var(--press-dur) var(--ease-smooth-out);}
.btn:active{transform:scale(var(--press-scale));}
.btn svg{width:18px;height:18px;flex:none;}
/* allineamento ottico: dal lato dell'icona il bordo sembra più largo */
.btn:has(> .icon-trail){padding-right:20px;}
.btn:has(> .icon-lead){padding-left:20px;}
.btn .icon-trail{transition:transform 200ms var(--ease-smooth-out);}
.btn-primary{background:var(--action);color:#fff;}
.btn-outline{border-color:var(--action);color:var(--action);background:transparent;}
.btn-primary:active{background:var(--action-hover);}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--action-hover);color:#fff;}
  .btn-outline:hover{background:var(--action);color:#fff;}
  .btn:hover .icon-trail{transform:translateX(2px);}
}
.btn-sm{min-height:42px;padding:9px 16px;font-size:.92rem;}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;}
@media (max-width:520px){.btn-row .btn{flex:1 1 100%;}}

/* Link con freccia (ricetta "Learn more hover") */
.t-learn{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;}
.t-learn-chevron{display:inline-flex;transform:translateX(0);transition:transform var(--learn-out) var(--learn-ease);}
.t-learn-chevron svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.t-learn-arm{transform-box:view-box;transform-origin:10px 8px;vector-effect:non-scaling-stroke;transition:transform var(--learn-out) var(--learn-ease);}
@media (hover:hover) and (pointer:fine){
  .t-learn:hover .t-learn-chevron{transform:translateX(var(--learn-shift));transition-duration:var(--learn-in);}
  .t-learn:hover .t-learn-arm{transition-duration:var(--learn-in);}
  .t-learn:hover .t-learn-arm-top{transform:rotate(var(--learn-spread));}
  .t-learn:hover .t-learn-arm-bot{transform:rotate(calc(var(--learn-spread) * -1));}
}

/* ---------- Blocchi della composizione ---------- */
.m{display:block;min-width:0;min-height:0;background:var(--white);}
.m-red,.tf-red{background:var(--red);}
.m-yellow,.tf-yellow{background:var(--yellow);}
.m-blue,.tf-blue{background:var(--blue);}

/* ---------- Testata delle pagine interne ---------- */
.page-hero{padding-block:clamp(48px,7vw,104px) clamp(40px,5vw,72px);}
.page-hero .eyebrow{display:flex;align-items:center;gap:12px;}
.page-hero .eyebrow::before{content:"";width:12px;height:12px;background:var(--accent);}
.page-hero:not(.page-hero--media) .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;}
.page-hero .eyebrow{grid-column:1 / -1;}
.page-hero h1{grid-column:1 / span 8;max-width:16ch;}
.page-hero .h1-wide{max-width:22ch;}
.page-hero .lead{grid-column:9 / -1;padding-bottom:.4em;}
.page-hero--media .lead{margin-top:24px;}
@media (max-width:900px){.page-hero h1,.page-hero .lead{grid-column:1 / -1;}.page-hero .lead{margin-top:24px;padding-bottom:0;}}
.page-hero .btn-row{margin-top:32px;}
/* la riga che chiude la testata, con il segmento colorato della pagina */
.page-hero .wrap::after{content:"";display:block;grid-column:1 / -1;height:8px;margin-top:clamp(40px,5vw,72px);background:linear-gradient(var(--accent),var(--accent)) left bottom / clamp(72px,12vw,160px) 8px no-repeat,linear-gradient(var(--ink),var(--ink)) left bottom / 100% 1px no-repeat;}

/* la riga si "disegna" da sinistra mentre il titolo compare */
@keyframes rv-line{from{clip-path:inset(0 100% 0 0);}}
.page-hero .wrap::after{animation:rv-line 900ms var(--ease-smooth-out) 250ms backwards;}

/* Titolo di sezione: etichetta a sinistra, titolo a destra, sotto una linea */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-top:22px;border-top:1px solid var(--ink);margin-bottom:clamp(36px,5vw,72px);}
.sec-head .eyebrow{grid-column:1 / span 3;margin:.7em 0 16px;}
.sec-head h2{grid-column:4 / -1;max-width:24ch;}
@media (max-width:900px){.sec-head .eyebrow,.sec-head h2{grid-column:1 / -1;}.sec-head .eyebrow{margin-top:0;}}

/* ---------- Fotografie ---------- */
.photo{position:relative;}
.photo img{width:100%;height:100%;object-fit:cover;background:var(--paper-2);}
img{transition:opacity 300ms ease-out;}
img.is-loading{opacity:0;}
.photo figcaption{margin-top:12px;max-width:60ch;font-size:.84rem;line-height:1.45;color:var(--ink-soft);}

/* ---------- Elenchi tecnici ---------- */
.inline-list{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-weight:500;}
.inline-list li{padding:2px 14px;border-left:1px solid var(--line);}
.inline-list li:first-child{padding-left:0;border-left:0;}
.spec-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink);}
.spec-list li{padding:12px 0;border-bottom:1px solid var(--line);font-weight:500;}

/* Riquadro ".STL": un blocco blu e un campo bianco */
.stl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--m-line);background:var(--ink);}
.stl-mark{display:flex;align-items:flex-end;padding:clamp(20px,3vw,32px) clamp(22px,3.4vw,44px);background:var(--blue);color:#fff;font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,1.5rem + 2.6vw,4rem);line-height:.9;letter-spacing:-.01em;}
.stl-text{padding:clamp(22px,3vw,36px);background:var(--white);}
.stl-text h2,.stl-text h3{font-size:var(--fs-h3);}
.stl-text p{margin-top:10px;color:var(--ink-soft);max-width:52ch;}
.stl-text .t-learn,.stl-text .inline-list{margin-top:18px;}
@media (max-width:560px){.stl{grid-template-columns:1fr;}.stl-mark{padding-block:18px;}}

/* ---------- Il dente nella composizione ---------- */
.tooth-frame{display:grid;gap:var(--m-line);background:var(--ink);grid-template-columns:18% minmax(0,1fr) 24%;grid-template-rows:2fr 3fr 1fr auto;grid-template-areas:"tooth tooth y" "tooth tooth w" "tooth tooth b" "r cap cap";}
.tf-tooth{grid-area:tooth;position:relative;aspect-ratio:4 / 5;background:var(--white);overflow:hidden;}
.tf-yellow{grid-area:y;}
.tf-w1{grid-area:w;}
.tf-blue{grid-area:b;}
.tf-red{grid-area:r;}
.tf-caption{grid-area:cap;display:flex;align-items:center;min-height:48px;padding:10px 16px;background:var(--white);font-size:.8rem;line-height:1.35;color:var(--ink-soft);}
.tf-caption:empty{padding:0;}
.logo3d-canvas{position:absolute;inset:0;}
/* il dente occupa più spazio nel suo campo (stesse proporzioni 4:5) */
.tf-tooth .logo3d-canvas{inset:-9%;}
.logo3d-poster{position:absolute;inset:6% 10% 4%;width:80%;height:90%;object-fit:contain;transition:opacity var(--duration-very-slow) var(--ease-in-out);}
.logo3d-gl{position:absolute;inset:0;width:100% !important;height:100% !important;opacity:0;touch-action:pan-y;cursor:grab;transition:opacity var(--duration-very-slow) var(--ease-in-out);}
.logo3d-gl.is-ready{opacity:1;}
.logo3d-gl.is-dragging{cursor:grabbing;}
.logo3d-canvas.is-live .logo3d-poster{opacity:0;}
.logo3d-fallback-img{position:absolute;inset:0;margin:auto;width:58%;height:auto;}
/* "trascina per ruotare" compare solo quando il modello 3D è attivo */
.tooth-hint{opacity:0;transition:opacity var(--duration-very-slow) var(--ease-in-out);}
.tooth-frame:has(.is-live) .tooth-hint{opacity:1;}

/* ---------- Chiusura con invito al preventivo ---------- */
.cta{padding-block:clamp(56px,7vw,104px);}
.cta-grid{display:grid;gap:var(--m-line);background:var(--ink);grid-template-columns:13% minmax(0,1fr) 15% 7%;grid-template-rows:3fr 2fr 44px;grid-template-areas:"main main red w1" "main main w2 blue" "yellow w3 w3 w3";}
.cta-main{grid-area:main;padding:clamp(28px,5vw,64px);background:var(--white);}
.cta-main h2{max-width:18ch;}
.cta-main p{margin-top:16px;max-width:52ch;color:var(--ink-soft);}
.cta-main .btn-row{margin-top:32px;}
.cta-grid .m-red{grid-area:red;}
.cta-grid .m-w1{grid-area:w1;}
.cta-grid .m-w2{grid-area:w2;}
.cta-grid .m-blue{grid-area:blue;}
.cta-grid .m-yellow{grid-area:yellow;}
.cta-grid .m-w3{grid-area:w3;}
@media (max-width:720px){
  .cta-grid{grid-template-columns:minmax(0,1fr) 18%;grid-template-rows:2fr 1fr 28px;grid-template-areas:"main red" "main w2" "w3 blue";}
  .cta-grid .m-w1,.cta-grid .m-yellow{display:none;}
}

/* ---------- Footer ---------- */
.site-footer{padding-top:clamp(56px,7vw,88px);background:var(--navy);color:var(--on-navy-soft);font-size:.95rem;}
.site-footer a{color:var(--on-navy);text-decoration:none;}
@media (hover:hover) and (pointer:fine){.site-footer a:hover{color:#fff;text-decoration:underline;}}
.footer-grid{display:grid;gap:40px;grid-template-columns:1.5fr 1fr 1fr 1fr;padding-bottom:56px;}
.footer-brand img{width:56px;height:53px;margin-bottom:20px;}
.footer-brand p{max-width:34ch;}
.footer-brand strong{font-weight:600;letter-spacing:.12em;color:var(--on-navy);}
.footer-col h2{margin-bottom:16px;font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy);}
.footer-col ul{display:grid;gap:9px;margin:0;padding:0;list-style:none;}
.footer-col address{display:grid;gap:9px;font-style:normal;}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:22px;border-top:1px solid rgba(255,255,255,.18);font-size:.85rem;}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:20px;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:32px;}}

/* Pulsante preventivo fisso su telefono (solo home) */
.sticky-cta{display:none;}
@media (max-width:720px){
  .has-sticky-cta .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--ink);transition:transform 250ms var(--ease-smooth-out),opacity 250ms var(--ease-smooth-out),visibility 0s;}
  /* con JavaScript resta nascosto finché serve (vedi main.js); esce più in fretta di come entra */
  .js .has-sticky-cta .sticky-cta:not(.is-visible){transform:translateY(100%);opacity:0;visibility:hidden;transition:transform 200ms var(--ease-smooth-out),opacity 200ms var(--ease-smooth-out),visibility 0s 200ms;}
  .has-sticky-cta .sticky-cta .btn{width:100%;}
  .has-sticky-cta .site-footer{padding-bottom:76px;}
}

/* ---------- Moduli ---------- */
.panel{padding:clamp(24px,3.4vw,44px);background:var(--white);border:1px solid var(--line);}
.form-grid{display:grid;gap:20px 22px;grid-template-columns:repeat(2,minmax(0,1fr));}
.form-grid .full{grid-column:1 / -1;}
@media (max-width:620px){.form-grid{grid-template-columns:1fr;}}
.field{display:grid;gap:7px;}
.field label{font-weight:600;font-size:.94rem;color:var(--ink);}
.field .optional{font-weight:400;color:var(--ink-soft);}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid #7F8A9C;border-radius:var(--radius);background:var(--white);color:var(--ink);font-size:1rem;transition:border-color var(--duration-quick) var(--ease-smooth-out);}
.field textarea{min-height:140px;resize:vertical;}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B2B45' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px;}
.field input::placeholder,.field textarea::placeholder{color:#6B7689;}
@media (hover:hover) and (pointer:fine){.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink);}}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--action);outline-offset:0;border-color:var(--action);}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#B3261E;}
.field-error{font-size:.86rem;color:#B3261E;transition:opacity 150ms var(--ease-smooth-out),transform 150ms var(--ease-smooth-out);}
/* il messaggio d'errore entra con una breve dissolvenza, non di colpo */
@starting-style{.field-error{opacity:0;transform:translateY(-3px);}}
.form-note{font-size:.9rem;color:var(--ink-soft);}
.form-note a{font-weight:500;}
.checkbox{display:inline-flex;align-items:center;gap:10px;font-size:.94rem;cursor:pointer;}
.checkbox input{width:20px;height:20px;accent-color:var(--action);}

/* ---------- Testi che compaiono in sequenza ----------
   All'apertura i blocchi .reveal già sullo schermo entrano uno dopo
   l'altro (solo CSS, nessun lampo): --i è il loro numero d'ordine.
   Quelli più in basso li prende main.js: aspettano (.rv-wait) e compaiono
   a gruppi, sfasati, quando ci si arriva scorrendo (.rv-show).
   Senza JavaScript e nell'editor di /admin il testo resta sempre visibile. */
@keyframes rv-in{from{opacity:0;transform:translateY(var(--rv-distance));filter:blur(var(--rv-blur));}}
.reveal{animation:rv-in var(--rv-dur) var(--ease-smooth-out) backwards;animation-delay:min(calc(var(--i,0) * var(--rv-stagger)),640ms);}
.reveal.rv-wait{animation:none;opacity:0;transform:translateY(var(--rv-distance));filter:blur(var(--rv-blur));}
.reveal.rv-show{animation:none;opacity:1;transform:none;filter:none;transition:opacity var(--rv-dur) var(--ease-smooth-out) var(--rv-delay,0ms),transform var(--rv-dur) var(--ease-smooth-out) var(--rv-delay,0ms),filter var(--rv-dur) var(--ease-smooth-out) var(--rv-delay,0ms);}
.reveal.rv-done{animation:none;}
/* la voce raggiunta con un link (#protesi-fissa…) è già ferma al suo posto */
.reveal:target,:target .reveal,.reveal:has(:target){animation:none;}
/* riduci movimento: solo una dissolvenza, niente spostamenti né sfocature */
@keyframes rv-fade{from{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation-name:rv-fade;}
  .reveal.rv-wait{transform:none;filter:none;}
  .reveal.rv-show{transition-property:opacity;}
  .page-hero .wrap::after,.catalog-item:target::before{animation:none !important;}
}
@media print{.reveal,.reveal.rv-wait{opacity:1 !important;transform:none !important;filter:none !important;animation:none !important;}}