/* ============================================================
   SINOTTICA · Modulo «Una lente, tre distanze»
   Solo /servizi/lenti-progressive (caricato via head_extra).
   Riferimento di comportamento: asset/progressive-tre-distanze_14-10-2026
   (sezione.css/js dell'anteprima). Font, colori e bottoni del sito.
   Senza JS: controlli nascosti, tre didascalie in sequenza, tre zone visibili.
   ============================================================ */

.td-controls { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 640px; margin: 0 auto 26px; }
.td.is-js .td-controls { display: grid; }
.td-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 64px; padding: 10px 8px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--surface-card); color: var(--text-body); font-family: var(--font-body); cursor: pointer; text-align: center; }
.td-btn:hover { border-color: var(--teal-600); }
.td-btn:focus-visible, .td-pt:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; }
.td-btn__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 14px; color: var(--text-strong); }
.td-btn__sub { font-size: 13px; color: var(--text-muted); line-height: 1.3; }
/* stato attivo leggibile anche senza colore: bordo doppio + peso */
.td-btn[aria-pressed="true"] { border: 2px solid var(--teal-700); background: var(--teal-50); padding: 9px 7px; box-shadow: inset 0 0 0 1px var(--teal-700); }
.td-btn[aria-pressed="true"] .td-btn__sub { color: var(--text-body); font-weight: 700; }

.td-grid { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 40px); align-items: center; }
@media (min-width: 769px) { .td-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }

/* foto: rapporto 3:2 conservato, nessun ritaglio */
.td-photo { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: var(--stone-200); }
.td-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.td-tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 10px; border-radius: var(--radius-pill); background: rgba(30, 32, 37, .82); color: #fff; font-family: var(--font-body); font-size: 12px; line-height: 1.2; }
.td-pt { display: none; position: absolute; z-index: 2; width: 36px; height: 36px; margin: 0; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--ink-800); background: #fff; color: var(--ink-800); font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 2px 10px rgba(30, 32, 37, .35); }
.td.is-js .td-pt { display: grid; place-items: center; }
.td-pt[aria-pressed="true"] { width: 44px; height: 44px; border: 3px solid #fff; background: var(--teal-400); font-size: 17px; box-shadow: 0 0 0 3px var(--ink-800), 0 2px 12px rgba(30, 32, 37, .4); }

/* schema della lente (SVG inline: classi e data-zone dell'asset) */
.td-lens svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.td-lens .lens-edge { fill: none; stroke: #55776B; stroke-width: 2.2; }
.td-lens .channel-edge { fill: none; stroke: #538C7C; stroke-width: 1.2; stroke-dasharray: 3 6; opacity: .4; }
.td-lens .lens-zone { fill: url(#active-fade); opacity: .45; transition: opacity .25s ease; }
.td-lens .lens-dot { fill: #235D56; stroke: #fff; stroke-width: 2; opacity: .65; }
.td-lens .zone-label { font-family: var(--font-body); font-size: 19px; fill: #425F58; }
.td.is-js .lens-zone { opacity: 0; }
.td.is-js[data-distance="near"] .lens-zone[data-zone="near"],
.td.is-js[data-distance="middle"] .lens-zone[data-zone="middle"],
.td.is-js[data-distance="far"] .lens-zone[data-zone="far"] { opacity: 1; }
.td.is-js[data-distance="near"] .dot-near,
.td.is-js[data-distance="middle"] .dot-middle,
.td.is-js[data-distance="far"] .dot-far { opacity: 1; }
.td.is-js[data-distance="near"] .label-near,
.td.is-js[data-distance="middle"] .label-middle,
.td.is-js[data-distance="far"] .label-far { font-weight: 700; fill: var(--ink-800); }
.td-schema-note { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--text-muted); text-align: center; margin: 8px auto 0; max-width: 420px; }

.td-caps { margin-top: 22px; display: grid; gap: 16px; }
.td-cap { padding: 16px 18px; border-left: 3px solid var(--teal-600); background: var(--surface-card); border-radius: 0 12px 12px 0; }
.td-cap[hidden] { display: none; }
.td-cap h3 { font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--text-strong); margin: 0 0 6px; letter-spacing: 0; text-transform: none; }
.td-cap p { font-family: var(--font-body); font-size: 15px; line-height: 1.62; color: var(--text-body); margin: 0; }

/* Mobile: scena, lente e spiegazione più vicine (si riducono i vuoti, non gli elementi). */
@media (max-width: 768px) {
  .td-controls { margin-bottom: 18px; }
  .td-grid { gap: 14px; }
  .td-schema-note { margin-top: 4px; }
  .td-caps { margin-top: 12px; }
}

/* ============================================================
   Revisione 14/10/2026 (prompt definitivo): blocchi della pagina
   ============================================================ */

/* Introduzione: due schede scansionabili */
.lp-scelte { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
@media (min-width: 769px) { .lp-scelte { grid-template-columns: 1fr 1fr; } }
.lp-scelta { padding: clamp(24px, 3vw, 32px); text-align: left; }
.lp-scelta h3 { font-size: clamp(19px, 2.3vw, 22px); line-height: 1.15; margin: 0 0 12px; letter-spacing: var(--tracking-wide); }
.lp-scelta p, .lp-scelta li { font-family: var(--font-body); font-size: clamp(16px, 1.8vw, 17px); line-height: 1.6; color: var(--text-body); }
.lp-scelta p { margin: 0 0 10px; }
.lp-scelta ul { margin: 0; padding: 0 0 0 1.15em; display: grid; gap: 8px; }
.lp-scelta li::marker { color: var(--teal-600); }
.lp-scelta strong { font-weight: 600; color: var(--text-strong); }
.lp-scelta a { color: var(--teal-700); text-decoration: underline; }

/* Percorso 01–03 con immagine: mobile titolo → immagine → passaggi; desktop testo a sinistra, immagine a destra */
.lp-percorso { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr; gap: 26px;
  grid-template-areas: "head" "img" "steps"; }
.lp-percorso__head { grid-area: head; }
.lp-percorso__img { grid-area: img; margin: 0; }
.lp-steps { grid-area: steps; }
@media (min-width: 900px) {
  .lp-percorso { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: clamp(36px, 5vw, 64px); row-gap: 30px; align-items: start;
    grid-template-areas: "head img" "steps img"; }
}
.lp-percorso__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); background: var(--stone-200); }
.lp-percorso__img figcaption { font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--ink-600); margin-top: 10px; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.lp-step { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: start; padding-top: 20px; border-top: 1px solid var(--border-default); }
.lp-step:first-child { padding-top: 0; border-top: 0; }
.lp-step__num { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--teal-500); letter-spacing: .02em; }
.lp-step h3 { font-size: 18px; margin: 4px 0 8px; letter-spacing: var(--tracking-wide); }
.lp-step p { font-family: var(--font-body); font-size: clamp(16px, 1.6vw, 17px); line-height: 1.6; color: var(--ink-600); margin: 0; }

/* Marchi: tre celle uguali, centratura in ciascuna, dimensioni ottiche per logo */
.lp-loghi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 3vw, 28px); align-items: center; max-width: 560px; margin: 26px auto; }
.lp-logo { height: 76px; display: flex; align-items: center; justify-content: center; min-width: 0; }
.lp-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--lp-h); }
@media (max-width: 600px) {
  .lp-logo { height: 60px; }
  .lp-logo img { max-height: var(--lp-h-m); }
}

/* Assistenza: tre momenti, separatori leggeri */
.lp-momenti { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 760px; margin: 0 auto; }
@media (min-width: 900px) { .lp-momenti { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; max-width: none; } }
.lp-momento { padding: 20px 0; border-top: 1px solid var(--border-default); text-align: left; }
.lp-momento h3 { font-size: 18px; line-height: 1.2; margin: 0 0 8px; letter-spacing: var(--tracking-wide); }
.lp-momento p { font-family: var(--font-body); font-size: clamp(16px, 1.8vw, 17px); line-height: 1.62; color: var(--text-body); margin: 0; }

/* Barra mobile fissa (.sticky-bar, sotto 980px): il focus da tastiera non deve finire sotto la barra. */
@media (max-width: 979px) { html { scroll-padding-bottom: 96px; } }