/* ==========================================================================
   DoloreAlPiede.it — Home (prototipo)
   Revisione premium v3: "medical tech premium" + editoriale + chiaro.
   Premium = chiarezza + gerarchia + interazione + contenuto utile, non
   vuoto. Il viewer 3D resta l'elemento distintivo; il resto della pagina
   deve rendere ovvio in pochi secondi cosa si può fare qui.
   ========================================================================== */
:root{
  --color-bg:#FFFFFF;
  --color-bg-secondary:#F7F8F7;
  --color-hover-subtle:#F7F9F8;

  --color-text:#171A18;
  --color-text-secondary:#69716D;

  --color-accent:#176E62;
  --color-accent-hover:#125A51;

  --color-border:#E9ECEA;

  --condition-teal:#176E62;
  --condition-blue:#416D86;
  --condition-coral:#C97965;
  --condition-purple:#76658C;
  --condition-gold:#A8864D;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:16px;

  --shadow-dropdown:0 16px 44px rgba(0,0,0,.08);
  --shadow-popover:0 18px 50px rgba(0,0,0,.08);

  --ease:cubic-bezier(.4,0,.2,1);
  --dur:200ms;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --container:1180px;
  /* container editoriale largo, condiviso da Hero / sezione video / Come
     funziona (solo ≥1181px): stesso asse sinistro e destro per i tre
     blocchi, più raccolto del pieno viewport. */
  --container-wide:1300px;

  /* scala spaziature: 8 16 24 32 48 64 96 128 */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms !important;}
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,blockquote{margin:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul,ol{list-style:none;margin:0;padding:0;}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px;
}

.skip-link{position:absolute;left:-999px;top:0;background:var(--color-text);color:#fff;padding:.7em 1.2em;border-radius:0 0 8px 0;z-index:200;}
.skip-link:focus{left:0;}

/* ---- etichetta riutilizzabile: kicker uppercase ---- */
.kicker{
  display:block;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-accent);
}

/* ==========================================================================
   Header
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:50;
  height:76px;
  background:var(--color-bg);
  border-bottom:1px solid #ECEFED;
  box-shadow:0 0 0 rgba(17,23,27,0);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav.is-scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:#ECEFED;
  box-shadow:0 4px 18px rgba(17,23,27,.035);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.is-scrolled{background:#FFFFFF;}
}
.nav-inner{
  position:relative;
  height:100%;
  max-width:var(--container);margin:0 auto;padding:0 var(--sp-4);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-5);
}
/* dagli stessi ~1181px in su, Hero e sezione video usano un container più
   largo (--container-wide) del container standard del sito: allineiamo
   qui SOLO il contenitore dell'header sullo stesso asse, senza toccare
   logo/menu/social/CTA (nessuna di queste regole viene modificata). */
@media (min-width:1181px){
  .nav-inner{max-width:var(--container-wide);}
}
@font-face{
  font-family:"Playfair Display";
  src:url("assets/fonts/playfair-display-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
.nav-logo,
.nav-logo:link,
.nav-logo:visited,
.nav-logo:hover,
.nav-logo:focus,
.nav-logo:active{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  grid-column:1;justify-self:start;
  text-decoration:none !important;
  text-decoration-line:none !important;
  text-decoration-color:transparent !important;
  color:inherit !important;
  background:none !important;
  outline:none !important;
  opacity:1;filter:none;transform:none;
  -webkit-tap-highlight-color:transparent;
}
.nav-logo *{text-decoration:none !important;}
.nav-logo-symbol{
  display:block;height:58px;width:auto;max-width:none;border:0;
  transform:translateY(1px);
  -webkit-user-drag:none;-webkit-touch-callout:none;
  user-select:none;pointer-events:none;
}
.nav-logo-wordmark{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:500;font-size:34px;letter-spacing:-0.015em;
  line-height:1;white-space:nowrap;
  user-select:none;pointer-events:none;
}
.nav-logo-dark{color:#232629;}
.nav-logo-teal{color:#0E5A5A;}
.nav-logo-dot{color:#C47A5A;}
.logo-accent{color:var(--color-accent);}

.nav-links{display:flex;align-items:center;gap:36px;font-size:15px;grid-column:2;justify-self:center;}
.nav-item{position:relative;display:flex;align-items:center;}
.nav-link{
  position:relative;
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 0;
  color:#303633;font-weight:500;font-size:15px;letter-spacing:-0.005em;white-space:nowrap;
  transition:color 175ms ease;
}
.nav-link:focus-visible{
  outline:2px solid rgba(23,110,98,.35);outline-offset:4px;border-radius:4px;
}
.nav-link::after{
  content:"";
  position:absolute;left:50%;bottom:1px;
  width:16px;height:1.25px;border-radius:1px;background:var(--color-accent);
  opacity:.85;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:transform 175ms ease;
}
.nav-link:hover,
.nav-link:focus-visible{color:var(--color-accent);}
.nav-link:hover::after,
.nav-link:focus-visible::after{transform:translateX(-50%) scaleX(1);}
.nav-link.is-active{font-weight:500;color:var(--color-accent);}
.nav-link.is-active::after{transform:translateX(-50%) scaleX(1);}
.nav-caret{width:11px;height:11px;color:var(--color-text-secondary);opacity:1;transition:transform 180ms ease;}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret{transform:rotate(180deg);}

/* ---- dropdown editoriale (Tipi di dolore / Quando serve un esperto) ---- */
.nav-dropdown{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(-3px);
  padding-top:9px; /* ponte invisibile: l'hover non si interrompe nel gap */
  min-width:350px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 130ms var(--ease), transform 130ms var(--ease), visibility 130ms;
  z-index:60;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity 170ms var(--ease), transform 170ms var(--ease), visibility 170ms;
}
.nav-dropdown-inner{
  background:#FFFFFF;border:1px solid #E9ECEA;border-radius:14px;
  box-shadow:0 18px 45px rgba(17,23,27,.075);
  padding:12px;display:flex;flex-direction:column;
}
.nav-dropdown-kicker{
  display:block;
  font-size:11px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;
  color:var(--color-accent);
  padding:4px 12px 10px;
}
.nav-dropdown-item{
  display:flex;flex-direction:column;gap:3px;
  padding:9px 12px;border-radius:8px;
  border-bottom:1px solid #F0F2F1;
  transition:background 140ms ease;
}
.nav-dropdown-item:last-child{border-bottom:none;}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible{background:rgba(23,110,98,.045);border-bottom-color:transparent;}
.nav-dropdown-item:focus-visible{outline:2px solid rgba(23,110,98,.35);outline-offset:2px;}
.nav-dropdown-item:hover .nav-dropdown-item-title,
.nav-dropdown-item:focus-visible .nav-dropdown-item-title{color:var(--color-accent);}
.nav-dropdown-item-title{font-size:14.5px;font-weight:600;color:var(--color-text);transition:color 140ms ease;}
.nav-dropdown-item-desc{font-size:13px;color:#626B66;line-height:1.4;}

/* ---- lato destro dell'header: social + separatore + CTA ---- */
.nav-side{display:flex;align-items:center;flex-shrink:0;grid-column:3;justify-self:end;}

.nav-social{display:none;align-items:center;gap:14px;margin-right:16px;}
.nav-social-link{
  display:flex;align-items:center;justify-content:center;
  width:19px;height:19px;color:#68706C;
  transition:color 160ms ease, transform 160ms ease;
}
.nav-social-link svg{width:18px;height:18px;}
.nav-social-link:hover{color:var(--color-accent);transform:translateY(-1px);}
.nav-social-link:focus-visible{
  outline:2px solid rgba(23,110,98,.35);outline-offset:3px;border-radius:4px;
}
/* ---- colori brand per icona, mantenuti anche in hover ---- */
.nav-social-link[aria-label*="Instagram"],
.nav-social-link[aria-label*="Instagram"]:hover{color:#E4405F;}
.nav-social-link[aria-label*="Facebook"],
.nav-social-link[aria-label*="Facebook"]:hover{color:#1877F2;}
.nav-social-link[aria-label*="TikTok"],
.nav-social-link[aria-label*="TikTok"]:hover{color:#000000;}
.nav-social-link[aria-label*="YouTube"],
.nav-social-link[aria-label*="YouTube"]:hover{color:#FF0000;}

.nav-divider{width:1px;height:20px;background:#E9ECEA;margin-right:16px;flex-shrink:0;}
@media (max-width:1180px){
  .nav-social,.nav-divider{display:none;}
}

/* ---- CTA header ---- */
.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:43px;padding:0 19px;border-radius:9px;
  border:1.25px solid var(--color-accent);color:var(--color-accent);
  font-size:14px;font-weight:600;white-space:nowrap;
  transition:background 180ms ease, color 180ms ease;
}
.nav-cta:hover{background:var(--color-accent);color:#FFFFFF;}
.nav-cta:focus-visible{
  outline:2px solid rgba(23,110,98,.35);outline-offset:3px;
}
.nav-cta-arrow{display:inline-block;width:14px;height:9px;transition:transform 180ms ease;}
.nav-cta:hover .nav-cta-arrow{transform:translateX(2px);}

/* ---- hamburger (mobile) ---- */
.nav-hamburger{
  display:none;
  width:44px;height:44px;flex-shrink:0;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  border-radius:var(--radius-sm);
  grid-column:3;justify-self:end;
}
.nav-hamburger span{display:block;width:20px;height:1.5px;background:var(--color-text);transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);}
.nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-menu{display:none;}

/* ==========================================================================
   Bottoni / link
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--radius-sm);font-size:.92rem;font-weight:600;transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);}
.btn-primary{background:var(--color-accent);color:#fff;}
.btn-primary:hover{background:var(--color-accent-hover);}
.btn-outline{background:transparent;border:1px solid var(--color-accent);color:var(--color-accent);}
.btn-outline:hover{background:rgba(23,110,98,.07);}

.text-link{font-size:.9rem;font-weight:600;color:var(--color-accent);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease);}
.text-link:hover{border-color:var(--color-accent);}

/* ==========================================================================
   Hero + Viewer 3D — poco spazio sopra, composizione unica, testo ~42%
   / viewer ~58%. Il viewer resta identico: qui si tocca solo layout.
   ========================================================================== */
.hero{padding:72px var(--sp-4) 28px;}
.hero-inner{
  max-width:var(--container);margin:0 auto;padding-left:27px;
  display:grid;grid-template-columns:.72fr 1fr;gap:var(--sp-6);align-items:center;
}
.hero-copy h1{
  margin-top:14px;
  font-size:clamp(2.75rem,5vw,4.375rem);
  line-height:1.05;letter-spacing:-.03em;font-weight:600;color:var(--color-text);
  text-wrap:balance;
}
.hero-copy h1 .hero-title-accent{color:var(--color-accent);}
.hero-sub{margin-top:var(--sp-3);font-size:1.05rem;line-height:1.65;color:var(--color-text-secondary);max-width:36ch;font-weight:400;}
.hero-cta-row{margin-top:var(--sp-5);display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;}

.hero-cta-primary{
  height:52px;padding:0 24px;font-size:.96rem;gap:9px;
  box-shadow:0 10px 24px -10px rgba(23,110,98,.4);
}
.hero-cta-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -10px rgba(23,110,98,.45);}
.hero-cta-primary-arrow{display:inline-block;transition:transform 180ms ease;}
.hero-cta-primary:hover .hero-cta-primary-arrow{transform:translateX(2px);}
.hero-cta-secondary{display:inline-flex;align-items:center;gap:6px;}
.hero-cta-secondary-arrow{display:inline-block;transition:transform 180ms ease;}
.hero-cta-secondary:hover .hero-cta-secondary-arrow{transform:translateX(3px);}
.hero-microstatement{
  margin-top:14px;font-size:12.5px;color:var(--color-text-secondary);
  letter-spacing:.01em;
}

.hero-viewer{position:relative;}
.viewer-frame{
  position:relative;z-index:1;
  width:100%;
  height:min(64vh,680px);
  min-height:420px;
  background:var(--color-bg);
}
.viewer-frame::before{
  content:"";
  position:absolute;inset:-9% -6%;
  background:radial-gradient(58% 58% at 50% 46%, rgba(23,110,98,.06), rgba(23,110,98,0) 72%);
  z-index:-1;pointer-events:none;
}
.viewer-frame iframe{
  display:block;width:100%;height:100%;border:0;background:var(--color-bg);
}

/* ---- hint di primo utilizzo: solo alla prima visita della sessione,
   scompare al primo click sul piede (message già esistente dal viewer)
   o dopo un breve timeout — gestito in script.js, nessuna modifica a
   /3d-interactive/ ---- */
.viewer-hint{
  position:absolute;left:50%;bottom:16px;z-index:5;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(255,255,255,.96);
  border:1px solid #E9ECEA;border-radius:10px;
  padding:9px 14px;
  text-align:center;white-space:nowrap;
  box-shadow:0 8px 24px rgba(17,23,27,.06);
  opacity:1;transition:opacity 170ms ease, transform 170ms ease;
  pointer-events:none;
}
.viewer-hint-title{font-size:13px;font-weight:600;color:var(--color-text);}
.viewer-hint-sub{font-size:11.5px;color:var(--color-text-secondary);}
.viewer-hint.is-hidden{opacity:0;transform:translateX(-50%) translateY(2px);}

/* ---- micro-guida viewer: icona + micro-etichetta + istruzione, niente card ---- */
.viewer-guide{
  margin-top:13px;padding-top:12px;
  border-top:1px solid #E9ECEA;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
}
.viewer-guide-step{display:flex;align-items:flex-start;gap:9px;flex:1;}
.viewer-guide-icon{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:#69716D;}
.viewer-guide-step--primary .viewer-guide-icon{color:var(--color-accent);}
.viewer-guide-text{display:flex;flex-direction:column;gap:3px;}
.viewer-guide-label{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text);
}
.viewer-guide-desc{font-size:12.5px;font-weight:500;color:#626B66;line-height:1.4;}
.viewer-guide-step--primary .viewer-guide-desc{color:var(--color-accent);font-weight:600;}
.viewer-guide-text-touch,.viewer-guide-text-mobile{display:none;}
@media (pointer:coarse){
  .viewer-guide-text-mouse{display:none;}
  .viewer-guide-text-touch{display:inline;}
}
@media (max-width:767px){
  .viewer-guide-text-mouse,.viewer-guide-text-touch{display:none;}
  .viewer-guide-text-mobile{display:inline;}
}

/* ---- popover contestuale ----
   Posizionato via JS (script.js) in base alle coordinate normalizzate
   ricevute dal viewer con postMessage {type:"foot-zone-selected", zone, x, y}.
   Su desktop appare vicino al punto cliccato con collision detection
   (flip automatico se sforerebbe il contenitore); su mobile diventa un
   bottom sheet. Nessun marker persistente sul piede. */
.zone-popover{
  position:absolute;z-index:20;
  width:390px;
  max-width:calc(100vw - 32px);
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity 180ms ease-out, transform 180ms ease-out;
}
.zone-popover.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.zone-popover.popover-side-right{transform:translateY(4px) translateX(-2px);}
.zone-popover.popover-side-right.is-open{transform:translateY(0) translateX(0);}
.zone-popover.popover-side-left{transform:translateY(4px) translateX(2px);}
.zone-popover.popover-side-left.is-open{transform:translateY(0) translateX(0);}

/* micro-caret: punta verso il lato del piede dove si trova il punto
   cliccato — solo un indizio visivo di direzione, nessun marker sul
   modello 3D */
.zone-popover-caret{
  position:absolute;top:42px;width:8px;height:8px;
  background:#FFFFFF;
  transform:rotate(45deg);
  display:none;
  z-index:1;
}
.zone-popover.popover-side-right .zone-popover-caret{
  display:block;left:-4px;
  border-left:1px solid rgba(23,26,24,.08);border-bottom:1px solid rgba(23,26,24,.08);
}
.zone-popover.popover-side-left .zone-popover-caret{
  display:block;right:-4px;
  border-right:1px solid rgba(23,26,24,.08);border-top:1px solid rgba(23,26,24,.08);
}

.zone-popover-content{
  position:relative;z-index:2;
  background:#FFFFFF;
  border:1px solid rgba(23,26,24,.08);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(17,23,27,.10);
  padding:28px 28px 24px;
}
.zone-popover-content.is-updating > *{opacity:.35;transition:opacity 130ms ease;}

.zone-popover-handle{display:none;}
.zone-popover-head{position:relative;}
.zone-popover-close{
  position:absolute;top:-4px;right:-4px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:#7C847F;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.zone-popover-close svg{width:13px;height:13px;}
.zone-popover-close:hover{background:rgba(23,26,24,.04);color:#171A18;}
.zone-popover-kicker{font-size:10.5px;font-weight:700;letter-spacing:.11em;margin-bottom:6px;}
.zone-popover h3{
  font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.18;color:#171A18;padding-right:24px;
  margin-top:0;margin-bottom:7px;
}
.zone-popover-desc{margin-top:0;font-size:13.5px;color:var(--color-text-secondary);line-height:1.5;max-width:35ch;}
.zone-popover-divider{margin:18px 0;border-top:1px solid #ECEFED;}
.zone-popover-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.085em;color:#7B827E;margin-bottom:11px;}

.zone-popover-list{display:flex;flex-direction:column;}
.zone-popover-row{
  display:block;
  position:relative;
  padding:13px 28px 14px 10px;margin:0;
  border-bottom:1px solid #ECEFED;
  border-left:2px solid rgba(23,110,98,.25);
  transition:background 160ms ease, border-left-color 160ms ease;
}
.zone-popover-list li:last-child .zone-popover-row{border-bottom:none;}
.zone-popover-row:hover,
.zone-popover-row:focus-visible{
  background:rgba(23,110,98,.025);
  border-left-color:var(--color-accent);
}
.zone-popover-row-body{display:block;}
.zone-popover-row-title{
  display:block;
  font-size:16px;font-weight:600;line-height:1.3;color:#171A18;
  margin-bottom:5px;
  transition:color 160ms ease;
}
.zone-popover-row:hover .zone-popover-row-title,
.zone-popover-row:focus-visible .zone-popover-row-title{color:var(--color-accent);}
.zone-popover-row-desc{
  display:block;
  margin-top:0;font-size:13px;color:var(--color-text-secondary);line-height:1.48;max-width:30ch;
}
.zone-popover-row-arrow{
  position:absolute;right:4px;top:16px;
  width:14px;height:14px;color:#9AA09C;
  transition:transform 160ms ease, color 160ms ease;
}
.zone-popover-row:hover .zone-popover-row-arrow,
.zone-popover-row:focus-visible .zone-popover-row-arrow{transform:translateX(2px);color:var(--color-accent);}

.zone-popover-cta{display:inline-flex;align-items:center;gap:6px;margin-top:17px;margin-bottom:16px;font-size:13.5px;}
.zone-popover-cta-arrow{width:13px;height:9px;transition:transform 180ms ease;}
.zone-popover-cta:hover .zone-popover-cta-arrow{transform:translateX(2px);}
.zone-popover-note{
  margin-top:0;padding-top:13px;padding-bottom:2px;border-top:1px solid #ECEFED;
  font-size:11.5px;color:#8A918D;line-height:1.4;
}

@media (max-width:767px){
  .zone-popover{
    position:fixed;
    left:0 !important;right:0;bottom:0;top:auto !important;
    width:auto;max-width:none;
  }
  .zone-popover-caret{display:none !important;}
  .zone-popover-content{
    border-radius:18px 18px 0 0;
    padding:24px 20px 28px;
    max-height:72vh;overflow-y:auto;
    box-shadow:0 -12px 36px rgba(17,23,27,.10);
  }
  .zone-popover-head{
    position:sticky;top:-24px;z-index:3;
    margin:-24px -20px 0;padding:24px 20px 12px;
    background:#FFFFFF;
  }
  .zone-popover-handle{
    display:block;
    width:34px;height:4px;border-radius:999px;background:#D8DDDA;
    margin:0 auto 16px;
  }
  .zone-popover-close{top:16px;right:-4px;}
  .zone-popover h3{font-size:21.5px;}
}

/* ==========================================================================
   Sezioni generiche
   ========================================================================== */
.section{padding:var(--sp-7) var(--sp-4);}
.section-alt{background:var(--color-bg-secondary);}
.section-inner{max-width:var(--container);margin:0 auto;padding-left:27px;}
.section h2{margin-top:var(--sp-1);font-size:clamp(1.6rem,2.4vw,2.05rem);letter-spacing:-.02em;font-weight:600;color:var(--color-text);}
.section-sub{margin-top:var(--sp-2);color:var(--color-text-secondary);font-size:1rem;max-width:56ch;}

/* ---- "Dove senti dolore?" — sezione funzionale primaria (dopo Hero
   + Esperienza reale): stesso container largo dell'Hero a ≥1181px,
   titolo con più presenza, indice editoriale con micro-descrizioni ---- */
#dove-senti-dolore h2{
  font-size:clamp(38px,3vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.03em;
}
#dove-senti-dolore .kicker{font-weight:700;letter-spacing:.10em;margin-bottom:13px;}
#dove-senti-dolore .section-sub{line-height:1.58;}
#dove-senti-dolore{padding-bottom:48px;}
.zone-index-intro-secondary{
  margin-top:6px;font-size:13px;color:#8A918D;line-height:1.4;max-width:56ch;
}
.zone-index-intro-micro{
  margin-top:10px;font-size:12.5px;color:#8A918D;line-height:1.4;
}
.zone-index{
  margin-top:var(--sp-5);
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--sp-5);
}
.zone-index-item{border-top:1px solid var(--color-border);transition:border-color 160ms ease;}
.zone-index-item:nth-child(n+4){border-top:1px solid var(--color-border);}
.zone-index-item:hover,
.zone-index-item:focus-within{border-top-color:rgba(23,26,24,.14);border-left-color:rgba(23,26,24,.14);}
@media (min-width:769px){
  .zone-index-item:nth-child(3n+2),
  .zone-index-item:nth-child(3n){border-left:1px solid rgba(23,26,24,.05);padding-left:var(--sp-4);margin-left:calc(var(--sp-4) * -1);}
}
.zone-index-btn{
  width:100%;display:flex;flex-direction:column;gap:4px;
  padding:26px 22px 30px;
  text-align:left;color:var(--color-text);
  transition:background 160ms ease;
}
.zone-index-btn:hover,
.zone-index-btn:focus-visible{background:rgba(23,110,98,.025);}
.zone-index-top{display:flex;align-items:center;justify-content:space-between;}
.zone-index-num{
  font-size:11px;font-weight:500;letter-spacing:.08em;color:#8A918D;font-variant-numeric:tabular-nums;
  transition:color var(--dur) var(--ease);
}
.zone-index-btn:hover .zone-index-num,
.zone-index-btn:focus-visible .zone-index-num{color:var(--color-accent);}
.zone-index-arrow{
  display:flex;width:15px;height:15px;color:#7F8883;
  transition:color 170ms ease, transform 170ms ease;
}
.zone-index-btn:hover .zone-index-arrow,
.zone-index-btn:focus-visible .zone-index-arrow{color:var(--color-accent);transform:translateX(3px);}
.zone-index-name{
  margin:0;font-size:21px;font-weight:600;line-height:1.25;letter-spacing:-.005em;color:#171A18;
  transition:color var(--dur) var(--ease);
}
.zone-index-btn:hover .zone-index-name,
.zone-index-btn:focus-visible .zone-index-name{color:var(--color-accent);}
.zone-index-desc{font-size:14px;color:#626A66;line-height:1.48;}

/* ---- "Dove senti dolore?" con 10 zone — layout 4+3+3 a desktop largo:
   griglia a 12 colonne, riga 1 = 4 elementi da 3/12 (25% ciascuno),
   righe 2 e 3 = 3 elementi da 4/12 (33% ciascuno). Tutte e tre le righe
   riempiono l'intera larghezza, nessun buco. Meno colonne = più spazio
   per titolo e descrizione rispetto al precedente 5×2. Sotto 1181px
   resta la griglia 3 colonne esistente (poi 2 colonne × 5 righe
   ≤1024px, 1 colonna ≤767px). ---- */
@media (min-width:1181px){
  .zone-index{grid-template-columns:repeat(12,1fr);}
  .zone-index-item:nth-child(-n+4){grid-column:span 3;}
  .zone-index-item:nth-child(n+5){grid-column:span 4;}
  .zone-index-item:nth-child(2),
  .zone-index-item:nth-child(3),
  .zone-index-item:nth-child(4),
  .zone-index-item:nth-child(6),
  .zone-index-item:nth-child(7),
  .zone-index-item:nth-child(9),
  .zone-index-item:nth-child(10){border-left:1px solid rgba(23,26,24,.05);padding-left:var(--sp-4);margin-left:calc(var(--sp-4) * -1);}
  /* item 5 (primo della riga 2) e item 8 (primo della riga 3) non devono
     ereditare il border-left della regola a 3 colonne più sotto
     (@media min-width:769px, pensata per la vecchia griglia a 3 col). */
  .zone-index-item:nth-child(5),
  .zone-index-item:nth-child(8){border-left:none;padding-left:0;margin-left:0;}
}
/* "Dove senti dolore" ora è seguita direttamente da "Problemi più
   comuni" (la sezione duplicata "La mia storia" è stata rimossa), e
   "Problemi più comuni" è a sua volta seguita direttamente da "Prodotti
   e soluzioni" ("Quando serve un esperto" è stata spostata in una
   pagina dedicata). Si ricalcola solo lo spazio tra le sezioni, senza
   toccarne il design interno. */
#problemi-comuni{padding-top:44px;padding-bottom:44px;}
#prodotti{padding-top:46px;}

/* ---- liste editoriali (problemi più comuni / prodotti) ---- */
.editorial-list{margin-top:var(--sp-5);display:grid;}
.editorial-list-2col{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-5);}
.editorial-list-3col{grid-template-columns:repeat(3,1fr);column-gap:var(--sp-5);}
.editorial-item{padding:var(--sp-4) 0;border-top:1px solid var(--color-border);}
.editorial-item .kicker{margin-bottom:var(--sp-1);}
.editorial-item h3{font-size:1.08rem;font-weight:600;letter-spacing:-.01em;color:var(--color-text);}
.editorial-item p{margin-top:var(--sp-1);font-size:.92rem;color:var(--color-text-secondary);line-height:1.65;}
.editorial-item .text-link{display:inline-flex;align-items:center;gap:5px;margin-top:var(--sp-2);}
/* freccia riutilizzabile per i link .editorial-item (Problemi più comuni,
   Prodotti, e la sezione "Da chi andare" della pagina Esperto) */
.editorial-item-link-arrow{display:inline-block;transition:transform 170ms ease;}
.text-link:hover .editorial-item-link-arrow{transform:translateX(3px);}

/* editorial-item interamente cliccabile (es. "Da chi andare" quando la
   voce porta a una pagina di approfondimento): il link avvolge tutto il
   contenuto, ".text-link" al suo interno resta uno <span> puramente
   visivo, lo stato hover è gestito dal link esterno. */
.editorial-item-cover{display:block;color:inherit;text-decoration:none;}
.editorial-item-cover:hover h3,
.editorial-item-cover:focus-visible h3{color:var(--color-accent);}
.editorial-item-cover:hover .text-link,
.editorial-item-cover:focus-visible .text-link{border-color:var(--color-accent);}
.editorial-item-cover:hover .editorial-item-link-arrow,
.editorial-item-cover:focus-visible .editorial-item-link-arrow{transform:translateX(3px);}
.editorial-item-cover:focus-visible{outline:2px solid rgba(23,110,98,.35);outline-offset:3px;border-radius:4px;}

/* ---- "Problemi più comuni" — gerarchia scoperta rispetto alle altre
   sezioni che riusano .editorial-item (es. "Prodotti e soluzioni"), per
   distinguere chiaramente ZONE (dove) da PROBLEMI (cosa). Solo 4
   problemi, gerarchia uniforme (nessun livello featured). ---- */
#problemi-comuni h2{
  font-size:clamp(34px,2.7vw,44px);font-weight:600;line-height:1.08;letter-spacing:-.025em;
}
#problemi-comuni .editorial-item .kicker{
  font-size:11.5px;font-weight:600;letter-spacing:.09em;color:#8A918D;
}
#problemi-comuni .editorial-item{padding:28px 0 32px;}
#problemi-comuni .editorial-item h3{font-size:20px;line-height:1.25;}
#problemi-comuni .editorial-item p{font-size:14px;line-height:1.5;}
#problemi-comuni .editorial-item .text-link{font-size:13px;}

/* CTA editoriale finale, non un bottone pieno */
.problems-see-all{
  display:inline-flex;align-items:center;gap:6px;margin-top:32px;padding-top:4px;
  font-size:14.5px;font-weight:600;color:var(--color-accent);
}
.problems-see-all-arrow{display:inline-block;transition:transform 180ms ease;}
.problems-see-all:hover .problems-see-all-arrow{transform:translateX(3px);}

/* ---- newsletter — sezione chiara, non blocco scuro ---- */
.newsletter{padding:var(--sp-7) var(--sp-4);border-top:1px solid var(--color-border);background:var(--color-bg);}
.newsletter-inner{max-width:var(--container);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap;}
.newsletter h2{margin-top:var(--sp-1);font-size:1.4rem;font-weight:600;color:var(--color-text);}
.newsletter-sub{margin-top:var(--sp-1);color:var(--color-text-secondary);font-size:.94rem;max-width:44ch;}
.newsletter-form-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);}
.newsletter-form{display:flex;gap:var(--sp-2);flex-wrap:wrap;}
.newsletter-form input{
  height:46px;padding:0 18px;border-radius:var(--radius-sm);border:1px solid var(--color-border);
  background:#FFFFFF;color:var(--color-text);font-size:.9rem;min-width:220px;
}
.newsletter-form input::placeholder{color:var(--color-text-secondary);}
.newsletter-privacy{font-size:12px;color:var(--color-text-secondary);max-width:38ch;}
.newsletter-consent{
  display:flex;align-items:flex-start;gap:8px;max-width:38ch;
  font-size:12px;line-height:1.5;color:var(--color-text-secondary);cursor:pointer;
}
.newsletter-consent input{margin-top:3px;flex-shrink:0;}
.newsletter-consent a{color:var(--color-accent);text-decoration:underline;}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{padding:var(--sp-6) var(--sp-4) var(--sp-3);background:var(--color-bg);border-top:1px solid var(--color-border);}
.footer-inner{max-width:var(--container);margin:0 auto;display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;}
.footer-logo{font-weight:600;font-size:.98rem;color:var(--color-text);}
.footer-brand p{margin-top:var(--sp-1);font-size:.86rem;color:var(--color-text-secondary);max-width:26ch;}
.footer-cols{display:flex;gap:var(--sp-5);flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:9px;}
.footer-col span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary);margin-bottom:2px;}
.footer-col a{font-size:13px;color:var(--color-text-secondary);transition:color var(--dur) var(--ease);}
.footer-col a:hover{color:var(--color-text);}
.footer-bottom{max-width:var(--container);margin:var(--sp-5) auto 0;padding-top:var(--sp-2);border-top:1px solid var(--color-border);display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;}
.footer-bottom p{font-size:12px;color:var(--color-text-secondary);}

/* ==========================================================================
   Responsive — verificato a 1440 / 1024 / 768 / 390
   ========================================================================== */
@media (max-width:1024px){
  .nav-logo-symbol{height:44px;}
  .nav-logo-wordmark{font-size:27px;}
  .nav-links{gap:20px;}
  .hero-inner{grid-template-columns:1fr;gap:var(--sp-5);padding-left:0;}
  .section-inner{padding-left:0;}
  .zone-index{grid-template-columns:repeat(2,1fr);}
  .zone-index-item:nth-child(3n+2),
  .zone-index-item:nth-child(3n){border-left:none;padding-left:0;margin-left:0;}
  /* "Problemi frequenti" passa a 1 colonna già da qui (768px compreso),
     distinto dalle zone che restano a 2 colonne in questo stesso range */
  #problemi-comuni .editorial-list{grid-template-columns:1fr;}
}
@media (max-width:767px){
  .nav-inner{display:flex;justify-content:space-between;gap:12px;}
  .nav-logo{gap:7px;}
  .nav-logo-symbol{height:35px;}
  .nav-logo-wordmark{font-size:22px;}
  .nav-links{display:none;}
  .nav-social,.nav-divider{display:none;}
  .nav-cta{height:38px;padding:0 14px;font-size:12.5px;gap:5px;}
  .nav-hamburger{display:flex;}
  .mobile-menu:not([hidden]){
    display:flex;flex-direction:column;
    position:absolute;top:76px;left:0;right:0;
    background:#FFFFFF;border-bottom:1px solid var(--color-border);
    padding:var(--sp-2) var(--sp-4) var(--sp-4);
    max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .mobile-menu-link{
    display:flex;align-items:center;min-height:56px;
    font-size:21px;font-weight:500;color:var(--color-text);
    border-bottom:1px solid var(--color-border);
  }
  .mobile-menu-group{border-bottom:1px solid var(--color-border);}
  .mobile-menu-toggle{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    min-height:56px;font-size:21px;font-weight:500;color:var(--color-text);
  }
  .mobile-menu-toggle-caret{width:9px;height:9px;transition:transform var(--dur) var(--ease);}
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-caret{transform:rotate(180deg);}
  .mobile-menu-sub{display:flex;flex-direction:column;padding:0 0 var(--sp-2) var(--sp-2);}
  .mobile-menu-sub a{min-height:44px;display:flex;align-items:center;font-size:.92rem;color:var(--color-text-secondary);}

  .mobile-menu-social{padding:var(--sp-3) 0 var(--sp-1);}
  .mobile-menu-social-label{
    display:block;font-size:.68rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.08em;color:var(--color-text-secondary);margin-bottom:var(--sp-2);
  }
  .mobile-menu-social-row{display:flex;align-items:center;gap:22px;}
  .mobile-menu-social-link{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:0 -11px;color:var(--color-text-secondary);
    transition:color 175ms ease;
  }
  .mobile-menu-social-link svg{width:20px;height:20px;}
  .mobile-menu-social-link:hover,
  .mobile-menu-social-link:active{color:var(--color-accent);}

  .hero{padding:var(--sp-5) var(--sp-3) var(--sp-3);}
  .section{padding:var(--sp-6) var(--sp-3);}
  .viewer-frame{height:52vh;min-height:360px;}
  .viewer-guide{gap:8px;}
  .viewer-guide-step{flex:1;flex-direction:column;align-items:center;text-align:center;gap:5px;}
  .viewer-guide-icon{margin-top:0;}
  .viewer-guide-text{align-items:center;}
  .hero-cta-row{flex-direction:column;align-items:flex-start;}
  .zone-index{grid-template-columns:1fr;}
  .editorial-list-2col,.editorial-list-3col{grid-template-columns:1fr;}
  .newsletter-inner{flex-direction:column;align-items:flex-start;}
  .footer-inner{flex-direction:column;}
}

/* ==========================================================================
   Refinement Hero — composizione, scala, spaziatura (solo layout).
   Blocchi additivi: nessuna regola esistente sopra è stata modificata.
   Il viewer 3D (camera/modello/materiali) resta identico: qui si sposta
   solo il CONTENITORE via grid/width/margin, mai transform sul canvas.
   768px e 390px non sono toccati da queste regole (min-width:901px).
   ========================================================================== */
@media (min-width:1181px){
  .hero{padding-top:36px;padding-bottom:16px;}
  .hero-inner{
    max-width:var(--container-wide);
    grid-template-columns:minmax(420px,.85fr) minmax(620px,1.35fr);
    gap:clamp(64px,6.2vw,100px);
    align-items:start;
  }
  /* il piede non si muove (stessa ancora a destra); è il blocco testuale
     a scendere, per condividere l'asse ottico col viewer */
  .hero-copy{justify-self:start;margin-top:64px;}
  .hero-copy .kicker{font-size:12px;font-weight:700;letter-spacing:.11em;margin-bottom:10px;}
  .hero-copy h1{
    margin-top:8px;
    max-width:11ch;
    font-size:clamp(58px,4.6vw,72px);
    font-weight:600;
    line-height:.98;
    letter-spacing:-.04em;
  }
  .hero-sub{margin-top:20px;font-size:16.5px;line-height:1.55;max-width:36ch;}
  .hero-cta-primary{height:45px;padding:0 21px;font-size:14.5px;}
  /* il wrapper (non il canvas) si ancora al margine destro della content
     area ed è nettamente più stretto della propria colonna: il piede
     resta centrato nel canvas (camera invariata), ma il canvas stesso
     si sposta molto più a destra e più in alto nella composizione */
  .hero-viewer{
    justify-self:end;
    margin-left:auto;
    margin-right:40px;
    width:min(100%,552px);
  }
  .viewer-frame{
    width:100%;
    height:min(51vh,551px);
    min-height:403px;
  }
  .viewer-guide{width:100%;margin-top:3px;padding-top:6px;}
}
@media (max-width:1180px) and (min-width:901px){
  .hero-inner{grid-template-columns:.72fr 1fr;}
  .hero-copy{margin-top:18px;}
  .viewer-frame{width:calc(100% - 7px);margin-left:auto;}
  .viewer-guide{width:calc(100% - 7px);margin-left:auto;}
}

/* ==========================================================================
   Esperienza reale — sezione video personale (placeholder), tra Hero e
   "Come funziona". Fondo bianco + hairline superiore, nessuna modifica
   alle sezioni esistenti sopra/sotto.
   ========================================================================== */
.video-story{padding:54px var(--sp-4) 32px;border-top:1px solid #EFF1EF;}
.video-story-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:start;
}
.video-story .kicker{letter-spacing:.10em;margin-bottom:11px;}
.video-story-title{
  margin-top:8px;max-width:13ch;
  font-size:clamp(34px,3vw,46px);font-weight:600;line-height:1.1;letter-spacing:-.03em;
  color:var(--color-text);text-wrap:balance;
}
.video-story-text{
  margin-top:22px;font-size:15.5px;line-height:1.6;color:var(--color-text-secondary);max-width:48ch;
}
.video-story-quote{
  margin-top:30px;padding-left:18px;border-left:2px solid var(--color-accent);
  font-size:19px;font-weight:500;line-height:1.4;color:var(--color-text);max-width:40ch;
}
.video-story-cta{display:inline-flex;align-items:center;gap:6px;margin-top:24px;font-size:14px;}
.video-story-cta-arrow{display:inline-block;transition:transform 180ms ease;}
.video-story-cta:hover .video-story-cta-arrow{transform:translateX(2px);}
.video-story-disclaimer{margin-top:14px;font-size:11.5px;color:#8A918D;line-height:1.4;max-width:40ch;}

/* ---- refinement desktop: colonne più larghe, griglia condivisa con
   Hero (stesso max-width, gutter e assi sx/dx) ---- */
@media (min-width:1181px){
  .video-story-inner,
  .video-story-social{max-width:var(--container-wide);}
  .video-story-inner{
    grid-template-columns:minmax(380px,1fr) minmax(420px,1fr);
    gap:52px;
  }
  .video-story-title{max-width:15ch;font-size:clamp(38px,3vw,46px);line-height:1.08;}
  .video-story-text{font-size:16px;}
  /* "Dove senti dolore" ora è la sezione funzionale successiva alla Home:
     stesso container largo di Hero/Esperienza reale e stesso ritmo di
     respiro dal rail social (solo container/padding-top, il design
     interno della sezione resta quello esistente). */
  #dove-senti-dolore .section-inner{max-width:var(--container-wide);}
  #dove-senti-dolore{padding-top:84px;}
  /* "I problemi più comuni", "Prodotti e soluzioni" e la newsletter
     restano sul container standard (nessuna modifica a colonne/larghezza
     card/gap): si sposta solo la posizione del contenitore, allineando
     il bordo sinistro alla stessa verticale di Hero/Dove senti dolore. */
  #problemi-comuni .section-inner,
  #prodotti .section-inner,
  .newsletter-inner{
    margin-left:calc((100% - var(--container-wide)) / 2);
    margin-right:auto;
  }
}
/* sotto i 1181px la sezione resta sul container standard del sito
   (invariato); qui si ricalcola solo il respiro dal rail social, per non
   ereditare il padding-top di 96px condiviso da tutte le .section */
@media (max-width:1180px){
  #dove-senti-dolore{padding-top:56px;}
}

.video-story-media{display:flex;flex-direction:column;}
.video-story-media-label{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#69716D;margin-bottom:8px;
}
.video-placeholder{
  position:relative;aspect-ratio:16/9;border-radius:18px;
  background:var(--color-bg-secondary);border:1px solid var(--color-border);
  box-shadow:0 18px 50px rgba(17,23,27,.06);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  width:100%;max-width:640px;margin-left:auto;margin-right:auto;
}
.video-placeholder:focus-visible{outline:2px solid rgba(23,110,98,.35);outline-offset:3px;}
.video-story-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:18px;}
.video-story-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:18px;}
.video-story-thumb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.12);border-radius:18px;}
.video-play-btn{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--color-accent);
  transition:transform 180ms ease;
}
.video-placeholder:hover .video-play-btn{transform:scale(1.03);}
.video-play-btn svg{width:22px;height:22px;}
.video-placeholder-note{margin-top:12px;font-size:12px;color:#8A918D;text-align:center;}

.video-story-social{
  margin-top:56px;padding-top:20px;padding-bottom:8px;border-top:1px solid #EFF1EF;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.video-story-social-label{font-size:13px;font-weight:500;color:#69716D;}
.video-story-social-row{display:flex;align-items:center;gap:28px;}
.video-story-social-link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:500;color:#69716D;
  transition:color 160ms ease;
}
.video-story-social-link svg{width:22px;height:22px;flex-shrink:0;}
.video-story-social-link:hover{color:var(--color-accent);}
.video-story-social-link:focus-visible{outline:2px solid rgba(23,110,98,.35);outline-offset:3px;border-radius:4px;}
/* ---- colori brand solo sull'icona (il testo resta grigio) ---- */
.video-story-social-link[aria-label*="Instagram"] svg{color:#E4405F;}
.video-story-social-link[aria-label*="Facebook"] svg{color:#1877F2;}
.video-story-social-link[aria-label*="TikTok"] svg{color:#000000;}
.video-story-social-link[aria-label*="YouTube"] svg{color:#FF0000;}

@media (max-width:1024px){
  .video-story-inner{grid-template-columns:1fr;gap:var(--sp-5);}
  .video-story-media{margin-top:var(--sp-2);}
}
@media (max-width:767px){
  .video-story{padding:var(--sp-5) var(--sp-3);}
  .video-story-title{font-size:clamp(30px,7vw,36px);max-width:15ch;}
  .video-placeholder{border-radius:14px;}
  .video-play-btn{width:52px;height:52px;}
  .video-story-social{margin-top:var(--sp-4);padding-top:var(--sp-3);}
  .video-story-social-row{flex-wrap:wrap;row-gap:10px;}
  .video-story-social-link{padding:10px 2px;min-height:44px;}
}

/* ==========================================================================
   Pagina "Quando serve un esperto" — riusa palette/typography/container/
   kicker/hairline/CTA/hover/spacing già definiti sopra; qui solo gli
   elementi nuovi propri di questa pagina (hero editoriale + checklist)
   più la gerarchia scoperta dei suoi 3 blocchi (Hero, Da chi andare,
   Attenzione, Prima della visita), per un refinement puramente
   tipografico/di spacing senza toccare struttura o contenuti.
   ========================================================================== */
.page-hero{padding-bottom:40px;}
.page-hero-title{
  margin-top:14px;
  font-size:clamp(42px,4vw,58px);font-weight:600;line-height:1.06;letter-spacing:-.035em;
  color:#171A18;text-wrap:balance;
}
.page-hero-sub{
  margin-top:22px;font-size:17px;line-height:1.6;color:#626A66;max-width:62ch;
}
.page-hero-note{
  margin-top:11px;font-size:12.5px;color:#8A918D;line-height:1.5;
}

/* ---- Da chi andare ---- */
#chi-andare{padding-top:48px;padding-bottom:16px;}
#chi-andare .kicker{letter-spacing:.10em;}
#chi-andare h2{
  font-size:clamp(32px,2.8vw,42px);font-weight:600;line-height:1.1;letter-spacing:-.025em;
}
#chi-andare .section-sub{font-size:16px;line-height:1.55;max-width:60ch;}
#chi-andare .editorial-item{padding:28px 0 30px;}
#chi-andare .editorial-item .kicker{
  font-size:11px;font-weight:500;letter-spacing:.08em;color:#8A918D;
}
#chi-andare .editorial-item h3{font-size:20px;line-height:1.25;}
#chi-andare .editorial-item p{font-size:14px;line-height:1.5;}
#chi-andare .editorial-item .text-link{font-size:13px;}

/* ---- Attenzione ---- */
#non-aspettare{
  padding-top:80px;padding-bottom:80px;
  background:var(--color-bg-secondary);
}
#non-aspettare h2{
  font-size:clamp(30px,2.5vw,40px);font-weight:600;line-height:1.12;
}
#non-aspettare .section-sub{font-size:16px;line-height:1.55;max-width:60ch;}
#non-aspettare .orient-list{max-width:850px;row-gap:11px;}
#non-aspettare .orient-list li{color:#626A66;}
#non-aspettare .orient-disclaimer{padding-top:20px;max-width:850px;}
/* 2 colonne (5 a sinistra + 4 a destra, ordine logico invariato) tramite
   grid-auto-flow:column con 5 righe esplicite: riempie prima l'intera
   colonna 1 (i 5 elementi), poi la colonna 2 (i restanti 4) — nessuna
   modifica all'HTML/ordine dei 9 segnali. */
@media (min-width:901px){
  #non-aspettare .orient-list{
    grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,auto);grid-auto-flow:column;
    column-gap:64px;
  }
}

/* ---- Prima della visita ---- */
#prima-della-visita{padding-top:16px;padding-bottom:88px;}
#prima-della-visita h2{
  font-size:clamp(30px,2.5vw,40px);font-weight:600;line-height:1.1;
}
#prima-della-visita .section-sub{font-size:16px;line-height:1.55;max-width:58ch;}
#prima-della-visita .orient-list-2col{max-width:880px;margin-top:30px;column-gap:70px;}

.orient-list{
  margin-top:var(--sp-5);display:grid;gap:14px;
}
.orient-list-2col{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-5);row-gap:14px;}
.orient-list li{
  position:relative;padding-left:20px;
  font-size:15px;line-height:1.5;color:var(--color-text);
}
.orient-list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:4px;height:4px;border-radius:50%;background:var(--color-accent);
}
.orient-disclaimer{
  margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid #E6EAE8;
  font-size:12.5px;color:#8A918D;line-height:1.5;max-width:70ch;
}
.orient-back-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:32px;font-size:14.5px;
}

@media (max-width:767px){
  .orient-list-2col{grid-template-columns:1fr;}
}

/* ==========================================================================
   Pagine professionista (Ortopedico / Podologo / Fisioterapista) — template
   editoriale condiviso. Riusano palette/typography/kicker/hairline/CTA già
   definiti sopra (incl. .page-hero-title/.page-hero-sub/.page-hero-note,
   .editorial-list/.editorial-item, .orient-disclaimer); qui il sistema di
   classi proprio del template: container più largo, alternanza Tipo A/Tipo
   B, griglie editoriali, esempio pratico, CTA finale, link incrociati.
   ========================================================================== */

/* container editoriale più largo, solo per queste pagine (body.pro-page) */
.pro-page .section-inner{max-width:1200px;}

/* ritmo verticale uniforme, leggermente ridotto: ogni sezione 44px/44px
   (seam = 88px tra sezioni adiacenti, dentro il nuovo target 80-96);
   l'hero fa eccezione (bloccato, non toccato) */
.professional-section{padding-top:44px;padding-bottom:44px;}
.professional-section--alt{background:var(--color-bg-secondary);}
.professional-hero{padding-top:80px;padding-bottom:80px;}
.professional-summary{padding-top:16px;}
/* "Trattamenti e strumenti" resta la sezione con più respiro sopra,
   deliberatamente più separata delle altre (seam ≈ 96px, al tetto del
   nuovo target) */
#trattamenti{padding-top:52px;}

.page-hero-title{max-width:780px;}
.page-hero-sub{font-size:17.5px;line-height:1.58;max-width:70ch;color:#555E59;}
.page-hero-note{font-size:14.5px;}

.professional-section h2{
  font-size:clamp(30px,2.5vw,40px);font-weight:600;line-height:1.1;letter-spacing:-.025em;color:#171A18;
}
.professional-intro{margin-top:14px;font-size:16px;line-height:1.55;color:#626A66;max-width:68ch;}
.professional-kicker{
  display:block;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8A918D;margin-bottom:8px;
}
/* micro-kicker per sotto-gruppi dentro una sezione (es. "Valutazione e
   diagnosi" / "Gestione conservativa" / "Eventuali procedure") */
.professional-group-kicker{
  margin-top:32px;margin-bottom:0;
  display:block;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8A918D;
}
.professional-group-kicker--first{margin-top:14px;}
.professional-intro--tight{margin-top:6px;}
/* Fisioterapista — maggiore stacco prima di "Terapie complementari",
   per separarlo nettamente dai pilastri (richiesto solo su questa voce) */
.professional-group-kicker--complementari{margin-top:72px;}
/* microcopy di chiusura sezione Trattamenti: leggermente più visibile,
   solo hairline superiore, non un box */
.professional-intro--closing{
  border-top:1px solid #E6EAE8;padding-top:26px;margin-top:22px;
}

/* "In breve" — 3 colonne editoriali, nessun link (solo informazione) */
.professional-summary .editorial-item{padding-top:20px;}
.professional-summary .editorial-item .kicker{font-size:11px;font-weight:600;letter-spacing:.09em;color:#8A918D;}
.professional-summary .editorial-item h3{font-size:19px;}
.professional-summary .editorial-item p{font-size:14.5px;line-height:1.5;margin-top:6px;color:#626A66;}

/* Tipo A — titolo/intro a sinistra, contenuto a destra (desktop largo) */
.professional-split{display:grid;gap:var(--sp-5);align-items:start;}
@media (min-width:1025px){
  .professional-split{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);column-gap:var(--sp-6);}
}
.professional-split-main .professional-grid,
.professional-split-main .professional-terms{margin-top:0;}

/* Griglia editoriale per liste "lunghe" (situazioni, azioni): 2 colonne,
   micro-marker teal, non sembra un elenco tecnico */
.professional-grid{
  margin-top:32px;display:grid;grid-template-columns:1fr;row-gap:14px;
}
.professional-grid li{
  position:relative;padding-left:20px;
  font-size:15px;line-height:1.45;color:var(--color-text);
}
.professional-grid li::before{
  content:"";position:absolute;left:0;top:7px;
  width:4px;height:4px;border-radius:50%;background:var(--color-accent);
}
@media (min-width:768px){
  .professional-grid{grid-template-columns:repeat(2,1fr);column-gap:64px;row-gap:15px;}
}

/* Griglia compatta per termini brevi (es. "Cosa valuta"): nessuna
   descrizione, lettura immediata, 3 colonne su desktop largo */
.professional-terms{
  margin-top:28px;display:grid;grid-template-columns:1fr;row-gap:11px;
}
.professional-terms li{
  position:relative;padding-left:18px;
  font-size:15px;font-weight:500;color:#303633;
}
.professional-terms li::before{
  content:"";position:absolute;left:0;top:8px;
  width:4px;height:4px;border-radius:50%;background:var(--color-accent);opacity:.7;
}
@media (min-width:768px){
  .professional-terms{grid-template-columns:repeat(2,1fr);column-gap:48px;}
}
@media (min-width:1025px){
  .professional-terms{grid-template-columns:repeat(3,1fr);}
}

/* "Cosa può fare" deve leggersi più rilevante di "Cosa valuta": più
   respiro tra introduzione e lista, voci a maggior contrasto */
#cosa-fa .professional-grid{margin-top:40px;}
#cosa-fa .professional-grid li{line-height:1.5;}

/* Trattamenti — griglia editoriale 2×N, nessun link cliccabile (per ora) */
.professional-treatment-grid{margin-top:32px;}
.professional-treatment-grid .editorial-item{
  padding:28px 0 32px;border-top:1px solid #E6EAE8;
}
.professional-treatment-grid .editorial-item .kicker{
  font-size:11px;font-weight:600;letter-spacing:.08em;color:#8A918D;
}
.professional-treatment-grid .editorial-item h3{font-size:20px;line-height:1.25;}
.professional-treatment-grid .editorial-item p{font-size:14.5px;line-height:1.55;color:#626A66;}
.professional-treatment-note{margin-top:8px;font-size:12.5px;color:#8A918D;line-height:1.5;}
/* Fisioterapista — la griglia "Trattamenti" qui è più densa (pilastri +
   complementari) delle altre pagine: card leggermente più compatte, solo
   su questa pagina (scoped via body.pro-page--fisio, non tocca
   Ortopedico/Podologo che condividono la stessa classe .editorial-item) */
.pro-page--fisio .professional-treatment-grid .editorial-item{padding:26px 0;}
.pro-page--fisio .professional-treatment-grid .editorial-item h3{font-size:19px;}

/* Ortopedico — "Trattamenti e strumenti" è la sezione più densa (4 fasi:
   valutazione, conservativo, procedure, chirurgia): scoped via
   body.pro-page--ortho, non tocca Fisioterapista/Podologo che condividono
   le stesse classi .professional-group-kicker/.editorial-item */
.pro-page--ortho .professional-group-kicker:not(.professional-group-kicker--first){margin-top:64px;}
.pro-page--ortho .professional-group-kicker.professional-group-kicker--chirurgia{margin-top:80px;}
/* "Valutazione clinica" fa da apertura della fase 1: occupa tutta la
   larghezza della griglia, titolo leggermente più evidente — nessuna card */
.pro-page--ortho .editorial-item--anchor{grid-column:1/-1;}
.pro-page--ortho .editorial-item--anchor h3{font-size:22px;}
/* micro-principi editoriali (nota sugli esami, nota sulla chirurgia):
   colonna leggermente più stretta, più respiro verticale, nessun box */
.pro-page--ortho .professional-intro--principle{max-width:60ch;margin-top:24px;margin-bottom:8px;}
/* frase-guida "Il percorso non parte necessariamente dalla chirurgia":
   leggermente più evidente del resto dell'introduzione, stesso testo */
.pro-page--ortho .professional-lead-phrase{display:block;font-weight:600;font-size:17px;color:#171A18;margin-bottom:6px;}
/* leggero distacco aggiuntivo tra "Chirurgia" e "Un esempio pratico" */
.pro-page--ortho #esempio{padding-top:64px;}
/* "Cosa valuta" leggermente più arioso, solo spacing */
.pro-page--ortho #cosa-valuta .professional-terms{row-gap:14px;}

/* ==========================================================================
   PAGINA "TUTTI I PROBLEMI" (tutti-i-problemi.html) — scoped via
   body.problems-page. Riusa .professional-*, .zone-index-* ed
   .editorial-item(-cover) già approvati; qui solo le regole realmente
   nuove: CTA della hero, numero grande di zona, griglia problemi 2 col
   solo da 1025px (diversa da .editorial-list-2col che parte da 768px),
   micro-nota di disambiguazione zone.
   ========================================================================== */
.problems-page .problems-hero-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px;
}
/* navigazione "Scegli una zona" — stessa griglia/hover di .zone-index
   (Home), solo tipografia più editoriale/testuale e padding leggermente
   più generoso: qui è un indice di link, non un selettore 3D */
.problems-page .zone-index-btn{padding:30px 22px 34px;}
.problems-page .zone-index-num{font-size:12px;}
.problems-page .zone-index-name{font-size:16px;font-weight:600;}
.problems-page .zone-index-arrow{width:13px;height:13px;opacity:.8;}
@media (min-width:768px) and (max-width:1180px){
  .problems-page .zone-index{grid-template-columns:repeat(2,1fr);}
}
.problems-page .problems-disclaimer{
  max-width:500px;margin-top:16px;margin-left:0;margin-right:auto;
  padding-top:16px;padding-bottom:24px;color:#8A918D;font-size:14px;
}
/* colonna zona più stretta (~27/73) e gap ridotto: i problemi devono
   percepirsi chiaramente come appartenenti alla zona a sinistra */
@media (min-width:1025px){
  .problems-page .professional-split{
    grid-template-columns:minmax(0,.27fr) minmax(0,.73fr);column-gap:44px;
  }
}
.problems-page .professional-split-aside h2{font-size:24px;}
.problems-page .professional-split-aside .problems-zone-num{
  display:block;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--color-accent);margin-bottom:4px;
}
.problems-page .professional-split-aside .professional-intro{font-size:14px;}
/* griglia problemi — righe più uniformi: titolo/descrizione/CTA di ogni
   voce si allineano su auto/1fr/auto, indipendentemente dalla lunghezza
   del testo del vicino nella stessa riga. Nessuna card, nessuna altezza
   fissa: solo distribuzione dello spazio disponibile nella riga. */
.problems-page .problem-list{grid-template-columns:1fr;row-gap:0;align-items:stretch;}
@media (min-width:1025px){
  .problems-page .problem-list{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-5);}
}
.problems-page .problem-list .editorial-item{
  display:flex;padding:16px 0;border-top-color:#EEF1EF;
}
.problems-page .problem-list .editorial-item-cover{
  display:grid;grid-template-rows:auto 1fr auto;width:100%;
}
/* prima riga (i primi due elementi, uno per colonna): parte a raso,
   senza hairline sopra, per allinearsi otticamente al numero/titolo
   della zona a sinistra. Solo da 1025px, dove la griglia è 2 colonne:
   sotto tale soglia (1 colonna) resta a raso solo il primissimo elemento. */
.problems-page .problem-list .editorial-item:first-child{
  padding-top:0;border-top:none;
}
@media (min-width:1025px){
  .problems-page .problem-list .editorial-item:nth-child(-n+2){
    padding-top:0;border-top:none;
  }
}
.problems-page .problem-list .editorial-item h3{font-size:15px;font-weight:600;margin-top:0;}
.problems-page .problem-list .editorial-item p{font-size:13.5px;margin-top:6px;}
.problems-page .problem-list .editorial-item .text-link{font-size:13px;margin-top:12px;align-self:end;}
/* link discreto di ritorno alla navigazione zone: utility navigation,
   non una CTA principale */
.problems-page .problems-back-to-top{
  display:inline-flex;align-items:center;gap:4px;margin-top:24px;margin-bottom:8px;
  font-size:12px;font-weight:600;color:var(--color-accent);transition:color 160ms ease;
}
.problems-page .problems-back-to-top:hover{
  color:var(--color-accent-hover);text-decoration:underline;transform:translateY(-1px);
}
/* ritmo verticale tra le sezioni (Hero esclusa, invariata) reso più
   uniforme e leggermente più compatto sull'intera pagina */
.problems-page .professional-section{padding-top:36px;padding-bottom:36px;}
/* più distacco tra l'ultima zona e "Non trovi il tuo dolore?" */
.problems-page #non-trovi{padding-top:52px;}
/* variante a piena larghezza (es. "Ortesi e plantari" nella pagina
   Podologo): occupa l'intera larghezza delle due colonne */
.professional-treatment-feature{
  margin-top:28px;padding-top:26px;border-top:1px solid var(--color-border);
}
.professional-treatment-feature h3{font-size:22px;font-weight:600;line-height:1.25;color:#171A18;}
.professional-treatment-feature p{margin-top:10px;font-size:15px;line-height:1.6;color:#626A66;max-width:68ch;}

/* Fisioterapista — pilastri del percorso (termini compatti) + rilievo
   speciale a "Esercizio terapeutico" come voce lead prima dei pilastri */
.professional-lead-treatment{margin-top:28px;padding-bottom:32px;border-bottom:1px solid var(--color-border);}
.professional-lead-treatment h3{font-size:22px;font-weight:600;line-height:1.25;color:#171A18;}
.professional-lead-treatment p{margin-top:10px;font-size:15px;line-height:1.6;color:#626A66;max-width:66ch;}
.professional-pillars{
  margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 28px;
}
.professional-pillars span{
  position:relative;padding-left:16px;font-size:13.5px;font-weight:500;color:#626A66;
}
.professional-pillars span::before{
  content:"";position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:var(--color-accent);
}

/* Esempio pratico — riga evidenziata ma discreta, niente box */
.professional-example{margin-top:28px;}
.professional-example-label{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--color-accent);
}
.professional-example-quote{
  margin-top:10px;padding-left:16px;border-left:2px solid var(--color-accent);
  font-size:19px;font-weight:500;line-height:1.4;color:var(--color-text);max-width:56ch;
}
.professional-example-path{
  margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:14.5px;color:#626A66;
}
.professional-example-path-arrow{color:#8A918D;}
@media (max-width:600px){
  .professional-example-path{flex-direction:column;align-items:flex-start;gap:6px;}
  .professional-example-path-arrow{display:none;}
  .professional-example-path span:not(:last-child)::after{content:"↓";display:block;color:#8A918D;margin-top:6px;}
}

/* CTA finale */
.professional-final{margin-top:var(--sp-3);}
.professional-final-primary{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:var(--color-accent);}
.professional-final-secondary{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;}

/* Altri professionisti — riga di link discreti */
.professional-related{
  margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid #E6EAE8;
  display:flex;align-items:center;flex-wrap:wrap;gap:24px;
}
.professional-related-label{font-size:12.5px;font-weight:600;color:#69716D;}
.professional-related-links{display:flex;align-items:center;flex-wrap:wrap;gap:20px;}
.professional-related-links a{font-size:13.5px;font-weight:500;color:#69716D;transition:color 160ms ease;}
.professional-related-links a:hover{color:var(--color-accent);}

@media (max-width:767px){
  .professional-final-primary{font-size:15px;}
  .professional-split{grid-template-columns:1fr;}
}

/* ==========================================================================
   PAGINA PATOLOGIA — TEMPLATE MASTER (problema-fascite-plantare.html e
   future pagine patologia). Scoped via body.problem-page. Riusa quasi
   interamente .professional-*/.editorial-*/.zone-index-* già approvati;
   qui solo ciò che è realmente nuovo: hero a due colonne con placeholder
   visivo, navigazione interna discreta, numero grande per gli esercizi
   e per "Dove fa male".
   ========================================================================== */
.problem-page .professional-hero .section-inner{max-width:1200px;}
.problem-hero-grid{display:grid;gap:var(--sp-6);align-items:start;}
@media (min-width:1025px){
  .problem-hero-grid{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);}
}
.problem-hero-text .page-hero-title{max-width:none;}
.problem-hero-intro{margin-top:20px;font-size:15.5px;line-height:1.65;color:#626A66;max-width:62ch;}
/* placeholder premium "Dove si sente": niente riquadro pieno — solo
   hairline superiore/inferiore + tinta appena percettibile, così non
   legge come "box tecnico" ma come una colonna editoriale a sé */
.problem-hero-visual{
  border-top:1px solid #E6EAE8;border-bottom:1px solid #E6EAE8;
  padding:28px 4px;background:#FAFBFA;
}
.problem-hero-visual-label{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8A918D;}
.problem-hero-visual-zones{margin-top:20px;display:flex;flex-direction:column;gap:16px;}
.problem-hero-visual-zone{display:flex;align-items:baseline;gap:10px;}
.problem-hero-visual-zone-num{font-size:13px;font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums;}
.problem-hero-visual-zone-name{font-size:15px;font-weight:600;color:#171A18;}
.problem-hero-visual-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:22px;padding-top:18px;
  border-top:1px solid #E6EAE8;font-size:13.5px;font-weight:600;color:var(--color-accent);
  transition:color 160ms ease;
}
.problem-hero-visual-cta:hover{color:var(--color-accent-hover);}
.problem-hero-visual-cta:hover .editorial-item-link-arrow{transform:translateX(3px);}
/* navigazione interna — deve leggersi subito come indice di pagina:
   voci e label leggermente più grandi, più respiro orizzontale */
.problem-page-nav{
  padding-top:22px;padding-bottom:22px;border-top:1px solid #E6EAE8;border-bottom:1px solid #E6EAE8;
}
.problem-page-nav-label{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8A918D;margin-bottom:14px;display:block;}
.problem-page-nav-links{display:flex;flex-wrap:wrap;gap:11px 28px;}
.problem-page-nav-links a{font-size:14px;font-weight:500;color:#4E5652;transition:color 160ms ease;}
.problem-page-nav-links a:hover{color:var(--color-accent);}
@media (max-width:600px){
  .problem-page-nav-links{flex-wrap:nowrap;overflow-x:auto;gap:22px;-webkit-overflow-scrolling:touch;}
  .problem-page-nav-links a{white-space:nowrap;}
}
/* "Dove fa male" — due zone in evidenza, stesso linguaggio del numero
   grande già usato in "Tutti i problemi", nessuna card */
.problem-zone-mini-list{margin-top:28px;display:flex;flex-wrap:wrap;gap:40px;}
.problem-zone-mini{display:flex;align-items:baseline;gap:12px;}
.problem-zone-mini-num{font-size:19px;font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums;}
.problem-zone-mini-name{font-size:17px;font-weight:600;color:#171A18;}
/* esercizi — stesso pattern .editorial-item, con numero grande al
   posto del kicker e una micro-nota di progressione */
.problem-exercise-num{
  display:block;font-size:22px;font-weight:600;color:var(--color-accent);
  font-variant-numeric:tabular-nums;margin-bottom:6px;
}
.problem-exercise-goal{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A918D;}
@media (max-width:767px){
  .problem-hero-visual{padding:26px 22px;}
}

/* -- anchor scroll: header sticky 76px + margine di rispetto -- */
.problem-page .professional-section[id]{scroll-margin-top:96px;}

/* -- "In breve": contrasto leggermente maggiore label→titolo, stessa
   dimensione (nessun ingrandimento) -- */
.problem-page .professional-summary .editorial-item .kicker{color:#6B7470;}
.problem-page .professional-summary .editorial-item h3{color:#171A18;}

/* -- ritmo macro-sezioni: base 48/48 (seam 96, dentro 88-112), con
   variazioni intenzionali dove il contenuto lo richiede -- */
.problem-page .professional-section{padding-top:48px;padding-bottom:48px;}
.problem-page .professional-summary{padding-top:20px;}
.problem-page #diagnosi-differenziale{padding-top:64px;padding-bottom:56px;background:#FAFBFA;}
.problem-page #trattamenti{padding-top:56px;}
.problem-page #esperienza{padding-top:32px;padding-bottom:32px;}

/* -- liste editoriali (sintomi, fattori, valutazione, red flags):
   respiro verticale leggermente maggiore, marker teal discreto già
   presente in .professional-grid/.professional-terms -- */
.problem-page .professional-grid li{line-height:1.55;}
.problem-page #come-si-presenta .professional-grid,
.problem-page #perche-puo-comparire .professional-grid,
.problem-page #quando-valutare .professional-grid{row-gap:16px;}

/* -- diagnosi differenziale: priorità editoriale leggermente maggiore
   (fondo appena percettibile, coerente con l'alternanza già in uso —
   nessun rosso, nessun alert) -- */
.problem-page #diagnosi-differenziale h2{max-width:46ch;}
.problem-page #diagnosi-differenziale .professional-final-primary{font-size:16.5px;}

/* -- "Cosa puoi fare": equilibrio tra colonne e maggiore distanza
   titolo→testo, per leggersi come concetti-chiave e non come lista -- */
.problem-page #cosa-puoi-fare .professional-treatment-grid .editorial-item{padding:26px 0 30px;}
.problem-page #cosa-puoi-fare .professional-treatment-grid .editorial-item h3{margin-bottom:4px;}
.problem-page #cosa-puoi-fare .professional-treatment-grid .editorial-item p{margin-top:8px;}

/* -- esercizi: micro-allineamento fra il numero e il resto del blocco -- */
.problem-page #esercizi .editorial-item{padding-top:28px;}

/* -- "Trattamenti e strumenti": gerarchia tra i 4 livelli tramite
   spaziatura crescente (nessun colore diverso, nessuna card) -- */
.problem-page #trattamenti .professional-group-kicker{margin-top:52px;}
.problem-page .professional-group-kicker--strumentali{margin-top:60px;}
.problem-page .professional-group-kicker--procedure{margin-top:68px;}
.problem-page .problem-modality-note{
  margin-top:14px;max-width:66ch;font-size:13px;line-height:1.55;color:#8A918D;
}

/* -- recupero: microfrase evidenziata, senza virgolette grafiche -- */
.problem-page .problem-recovery-text{max-width:650px;}
.problem-page .problem-recovery-highlight{
  margin-top:16px;font-size:17px;font-weight:600;color:#171A18;line-height:1.4;max-width:650px;
}
.problem-page .problem-recovery-highlight-tail{
  font-size:14.5px;font-weight:400;color:#626A66;
}

/* -- professionisti: hover premium leggermente più marcato sull'intero
   blocco cliccabile (hairline che si scurisce insieme al titolo) -- */
.problem-page #professionisti .editorial-item{transition:border-color 160ms ease;}
.problem-page #professionisti .editorial-item:has(.editorial-item-cover:hover),
.problem-page #professionisti .editorial-item:has(.editorial-item-cover:focus-visible){
  border-top-color:rgba(23,110,98,.35);
}

/* -- red flags: si distingue dalle liste puramente informative con un
   filo teal a sinistra, molto discreto — niente rosso, niente alert -- */
.problem-page #quando-valutare .section-inner{
  border-left:2px solid var(--color-accent);padding-left:26px;
}
@media (max-width:600px){
  .problem-page #quando-valutare .section-inner{padding-left:18px;}
}

/* -- esperienza reale: piccolo richiamo riconoscibile -- */
.problem-page .problem-experience-kicker{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8A918D;margin-bottom:10px;
}
.problem-page .problem-experience-text{margin-top:0;}

/* -- CTA finale: vera chiusura della pagina, tonalità e padding
   maggiori, CTA primaria come piccolo pulsante teal (coerente Home) -- */
.problem-page .problem-final-cta{
  padding-top:80px;padding-bottom:80px;background:#F7F9F8;
}
.problem-page .problem-final-cta h2{max-width:20ch;}
.problem-page .problem-final-cta-text{max-width:650px;}
.problem-page .problem-final-cta .professional-final{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:var(--sp-4);
}
.problem-page .problem-final-cta-secondary{margin-top:0;}

/* ==========================================================================
   Pagina "La mia storia" — riusa integralmente il sistema editoriale
   .pro-page/.professional-section/.kicker/.professional-intro esistente.
   Uniche due aggiunte: una timeline minimale (nessun componente simile
   esisteva già) e una variante con più respiro verticale per la sezione
   "Oggi" (stesso h2, solo dimensione/spaziatura maggiori).
   ========================================================================== */
.storia-hero-cta{display:inline-flex;margin-top:var(--sp-3);}

.storia-timeline{margin-top:var(--sp-4);display:flex;flex-direction:column;}
.storia-timeline-item{
  display:grid;grid-template-columns:170px 1fr;gap:24px;
  padding:16px 0;border-top:1px solid var(--color-border);
}
.storia-timeline-item:first-child{border-top:none;padding-top:0;}
.storia-timeline-date{
  font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--color-accent);
}
.storia-timeline-text{margin-top:0;font-size:15px;line-height:1.55;color:#626A66;}
@media (max-width:600px){
  .storia-timeline-item{grid-template-columns:1fr;gap:4px;}
}

.storia-statement{padding-top:88px;padding-bottom:88px;}
.storia-statement h2{
  margin-top:14px;
  font-size:clamp(32px,4.2vw,52px);font-weight:600;line-height:1.16;letter-spacing:-.02em;
  max-width:20ch;color:#171A18;text-wrap:balance;
}
.storia-statement .professional-intro:first-of-type{margin-top:var(--sp-4);}

/* -- "Cercare una risposta": frase di chiusura della timeline, più
   evidente ma minimale (stessa linea verticale teal già usata altrove,
   nessuna card/sfondo) -- */
.storia-emphasis{
  margin-top:30px;margin-bottom:6px;padding:1px 0 1px 18px;
  border-left:2px solid var(--color-accent);
  font-size:18px;line-height:1.5;color:var(--color-text);
}

/* -- "Il mio obiettivo": più respiro verticale, stesso testo/larghezza --
   (rifinitura: valore leggermente ridotto rispetto al round precedente,
   pagina più compatta) */
#obiettivo{padding-top:56px;padding-bottom:56px;}
#obiettivo .professional-intro{margin-top:24px;}

/* ==========================================================================
   Rifinitura layout "La mia storia" — SOLO questa pagina (.storia-page).
   Un'unica regola comune allarga la colonna editoriale (titoli, testo,
   timeline, blocco video) alla stessa larghezza, eliminando il bordo
   destro incoerente tra paragrafi stretti (68ch) e resto del contenuto
   già più largo. Non tocca .pro-page/.section-inner altrove nel sito
   (specificità identica, ma questa regola è scritta dopo: vince solo
   qui, dove il markup ha anche la classe .storia-page sul <body>).
   ========================================================================== */
.storia-page .section-inner{max-width:1200px;}
/* i paragrafi hanno un proprio max-width:68ch indipendente dal
   contenitore (regola sitewide). Da qui in poi il testo NON segue più
   la larghezza piena del container (1140px): resta volutamente più
   stretto per la leggibilità (misura di riga confortevole), mentre
   titoli, timeline e blocco video sfruttano il container intero. */
.storia-page .professional-intro,
.storia-page .orient-disclaimer{max-width:980px;}
/* l'H1 dell'hero ha un proprio max-width:780px (regola sitewide,
   pensata per le pagine professionista): via libera a respirare di più,
   ma resta più stretto del container per una composizione editoriale
   (non un titolo a piena larghezza). text-wrap:balance già presente. */
.storia-page .page-hero-title{max-width:980px;}
/* la griglia video sitewide usa minmax(380px)/minmax(560px): con
   container più stretti del solito i due minimi combinati (940px)
   possono superare lo spazio disponibile e causare overflow. Proporzioni
   39%/61% (dentro il range 38-40/60-62 richiesto), senza soglie minime
   fisse: a 1200px (gap 36px) il video occupa ~710px, il testo ~454px. */
@media (min-width:1181px){
  .storia-page .video-story-inner{grid-template-columns:39fr 61fr;gap:36px;}
}
/* titolo/testo della colonna sinistra: il vincolo sitewide (13ch/48ch,
   pensato per colonne più strette) li teneva compressi su molte righe
   nonostante la colonna qui sia più larga. Più respiro orizzontale,
   stessa gerarchia/font/colore (nessuna proprietà tipografica toccata),
   e gap verticale leggermente ridotto tra titolo e paragrafo. */
.storia-page .video-story-title{max-width:420px;}
.storia-page .video-story-text{max-width:420px;margin-top:16px;}
/* meno spazio vuoto tra il blocco video e la sezione successiva */
.storia-page .video-story{padding-bottom:20px;}

/* "Oggi": respiro leggermente ridotto rispetto al round precedente,
   pagina complessivamente meno lunga */
.storia-statement{padding-top:64px;padding-bottom:64px;}

/* ============ COOKIE CONSENT ============ */
.cookie-banner, .cookie-preferences{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:#FFFFFF;border-top:1px solid #EBEBEA;
  box-shadow:0 -8px 30px rgba(35,38,41,.08);
}
.cookie-banner-inner, .cookie-preferences-inner{
  max-width:1180px;margin:0 auto;padding:22px 32px;
}
.cookie-banner-inner{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cookie-banner-title{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:18px;color:#232629;margin-bottom:4px;}
.cookie-banner-desc{font-size:14px;line-height:1.55;color:#232629;max-width:62ch;}
.cookie-banner-desc a{color:#0E5A5A;text-decoration:underline;}
.cookie-banner-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;}
.cookie-btn{
  height:42px;padding:0 18px;border-radius:9px;font-size:14px;font-weight:600;
  white-space:nowrap;cursor:pointer;transition:background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.cookie-btn-text{background:none;border:none;color:#232629;text-decoration:underline;padding:0;height:auto;}
.cookie-btn-outline{background:transparent;border:1.25px solid #232629;color:#232629;}
.cookie-btn-outline:hover{background:#EBEBEA;}
.cookie-btn-primary{background:#0E5A5A;border:1.25px solid #0E5A5A;color:#FFFFFF;}
.cookie-btn-primary:hover{background:#0A4747;}

.cookie-preferences-inner{max-width:640px;}
.cookie-preferences-title{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:18px;color:#232629;margin-bottom:14px;}
.cookie-preferences-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 0;border-top:1px solid #EBEBEA;
}
.cookie-preferences-row:first-of-type{border-top:none;}
.cookie-preferences-row-title{font-weight:600;font-size:14.5px;color:#232629;}
.cookie-preferences-row-desc{font-size:13px;color:#5B615E;margin-top:2px;max-width:44ch;}
.cookie-preferences-locked{font-size:12.5px;font-weight:600;color:#0E5A5A;white-space:nowrap;}
.cookie-toggle{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer;}
.cookie-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.cookie-toggle-track{
  position:absolute;inset:0;background:#EBEBEA;border-radius:999px;transition:background 180ms ease;
}
.cookie-toggle-track::before{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 1px 3px rgba(35,38,41,.25);transition:transform 180ms ease;
}
.cookie-toggle input:checked + .cookie-toggle-track{background:#0E5A5A;}
.cookie-toggle input:checked + .cookie-toggle-track::before{transform:translateX(18px);}
.cookie-toggle input:focus-visible + .cookie-toggle-track{outline:2px solid rgba(23,110,98,.35);outline-offset:2px;}
.cookie-preferences-actions{margin-top:18px;}

@media (max-width:600px){
  .cookie-banner-inner, .cookie-preferences-inner{padding:18px 20px;}
  .cookie-banner-inner{flex-direction:column;align-items:stretch;gap:16px;}
  .cookie-banner-actions{justify-content:flex-start;}
}