/* OnTime Traveller — landing su Web4MCV. Classi prefissate .ott-, base modern.css. 4 novembre 2026. */
:root {
  --ott-orange: #F16522;      /* arancio del logo: solo grafica, mai testo */
  --ott-ink: #A63F0C;         /* testo arancio: 6,3:1 su bianco */
  --ott-bar: #C2410C;         /* barre: 4,3:1 sul binario */
  --ott-sand: #C9A97E;        /* sentiero del logo: solo decorazione */
  --ott-soft: #FDF4EE;
  --ott-track: #EEF2F6;
}

.ott-page .ott-dot { background: linear-gradient(135deg, var(--ott-orange), var(--ott-sand)); box-shadow: 0 0 0 6px rgba(241,101,34,.12); }
.ott-page .nav a:hover, .ott-page .nav a:focus-visible { color: var(--ott-ink); }
.ott-section h2 { margin: .9rem 0 .8rem; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -.02em; }
.ott-section h3 { margin: 0 0 .5rem; font-size: 1.15rem; line-height: 1.3; }
.ott-soft { background: linear-gradient(180deg, rgba(253,244,238,.85), rgba(253,244,238,.55)); }
.ott-kicker { margin: 0 0 .35rem; color: var(--ott-ink); font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ott-note-line { margin: 1.5rem 0 0; color: var(--muted); font-weight: 600; }

/* Hero */
.ott-hero-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; align-items: center; }
.ott-hero-copy::after { background: radial-gradient(circle, rgba(241,101,34,.16), transparent 65%); }
.ott-hero-copy h1 { color: var(--text); }
.ott-signed { margin: 1.4rem 0 0; padding: 0 0 0 1.1rem; border-left: 3px solid var(--ott-orange); max-width: 60ch; position: relative; z-index: 1; }
.ott-signed p { margin: 0 0 .4rem; }
.ott-signed footer { color: var(--ott-ink); font-weight: 700; }
.ott-hero-copy .hero-actions { position: relative; z-index: 1; }
.ott-hero-mark { margin: 0; display: grid; justify-items: center; gap: .9rem; order: -1; }
.ott-hero-mark img { width: clamp(120px, 34vw, 160px); height: auto; filter: drop-shadow(0 18px 30px rgba(241,101,34,.25)); }
.ott-hero-mark figcaption { font-weight: 800; color: var(--ott-ink); letter-spacing: .02em; }

/* Griglie e schede */
.ott-grid-2, .ott-grid-3, .ott-grid-4 { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
.ott-card { padding: 1.5rem; border-radius: var(--radius-lg); }
.ott-card p:last-child { margin-bottom: 0; }
.ott-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1rem; background: var(--ott-soft); border: 1px solid rgba(241,101,34,.25); }
.ott-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--ott-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ott-split .section-title { margin-bottom: 1.6rem; }

/* Viaggio agentico: due agenti, il viaggiatore al centro */
.ott-agentic { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(253,244,238,.7)); }
.ott-agents { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; align-items: stretch; }
.ott-agent { padding: 1.6rem; border-radius: var(--radius-lg); }
.ott-agent h3 { font-size: 1.3rem; }
.ott-agent-list { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.ott-agent-list li { position: relative; padding-left: 1.3rem; }
.ott-agent-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ott-orange); }
.ott-agent-center { display: grid; justify-items: center; align-content: center; gap: .4rem; padding: .5rem 0; }
.ott-agent-flow { width: 90px; height: 60px; transform: rotate(90deg); }
.ott-agent-flow path { fill: none; stroke: var(--ott-sand); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 10; }
.ott-agent-you { margin: 0; display: grid; justify-items: center; width: 8.5rem; height: 8.5rem; place-content: center; border-radius: 50%; background: var(--ott-ink); color: #fff; text-align: center; box-shadow: 0 0 0 10px rgba(241,101,34,.14), var(--shadow); }
.ott-agent-you strong { font-size: 1.7rem; line-height: 1.1; }
.ott-agent-you span { font-size: .9rem; }
.ott-fluid { margin-top: 2rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--radius-xl); background: var(--surface-solid); border: 1px solid rgba(241,101,34,.3); box-shadow: var(--shadow); }
.ott-fluid h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 .6rem; }
.ott-fluid > p { max-width: 68ch; color: var(--muted); font-size: 1.08rem; }
.ott-fluid-points { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
.ott-fluid-points li { display: grid; gap: .25rem; padding: 1rem 1.1rem; border-radius: var(--radius-md); background: var(--ott-soft); }
.ott-fluid-points strong { color: var(--ott-ink); }

/* Prima, durante, dopo */
.ott-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; position: relative; }
.ott-steps li { position: relative; padding: 1.4rem 1.4rem 1.4rem 4.6rem; background: var(--surface); border: 1px solid rgba(195,210,230,.78); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ott-steps li p { margin: 0; }
.ott-step-num { position: absolute; left: 1.2rem; top: 1.3rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ott-ink); color: #fff; font-weight: 800; }

/* Demo dell'itinerario */
.ott-demo { display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; align-items: start; }
.ott-phone { justify-self: center; width: min(300px, 100%); padding: 14px; border-radius: 36px; background: #0f172a; box-shadow: var(--shadow); }
.ott-map { display: block; width: 100%; height: auto; }
.ott-map-bg { fill: #F6F1E8; }
.ott-map-road { fill: none; stroke: #fff; stroke-width: 14; }
.ott-map-road-thin { stroke-width: 8; }
.ott-map-park { fill: #DCEBD5; }
.ott-map-route { fill: none; stroke: var(--ott-sand); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 12; }
.ott-map-near circle { fill: #fff; stroke: #475569; stroke-width: 3; }
.ott-map-stop circle { fill: var(--ott-ink); stroke: #fff; stroke-width: 3; transition: r .2s ease, fill .2s ease; }
.ott-map-stop text { fill: #fff; font: 800 16px/1 system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.ott-map-stop.is-active circle { fill: var(--ott-orange); r: 21; }
.ott-js .ott-map-stop { cursor: pointer; }
.ott-map-user circle:first-child { fill: rgba(47,109,246,.2); }
.ott-map-user circle:last-child { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.ott-map-bar { fill: rgba(255,255,255,.94); }
.ott-map-bar-text { fill: #0f172a; font: 700 14px/1 system-ui, sans-serif; }
.ott-demo-panel { min-width: 0; }
.ott-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.ott-tabs[hidden] { display: none; }
.ott-tabs button { min-height: 48px; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.ott-tabs button[aria-selected="true"] { background: var(--ott-ink); border-color: var(--ott-ink); color: #fff; }
.ott-tabs button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.ott-stop { padding: 1.5rem; margin-bottom: 1rem; background: var(--surface-solid); border: 1px solid rgba(195,210,230,.78); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ott-stop:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.ott-stop h3 { font-size: 1.4rem; }
.ott-stop h4 { margin: 1.2rem 0 .5rem; font-size: 1rem; }
.ott-address { color: var(--muted); }
.ott-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 1rem 0 0; }
.ott-facts div { padding: .8rem 1rem; border-radius: 14px; background: var(--ott-soft); }
.ott-facts dt { font-size: .85rem; color: var(--muted); }
.ott-facts dd { margin: .15rem 0 0; font-weight: 800; }
.ott-near-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ott-near-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.ott-near-list span { color: var(--ott-ink); font-weight: 700; white-space: nowrap; }
.ott-legend { list-style: none; margin: 1.2rem 0 .8rem; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.ott-legend li { display: flex; align-items: center; gap: .7rem; }
.ott-legend span { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.ott-legend-stop { background: var(--ott-ink); }
.ott-legend-user { background: var(--blue); box-shadow: 0 0 0 4px rgba(47,109,246,.2); }
.ott-legend-near { background: #fff; border: 3px solid #475569; }

/* Validazione: barre orizzontali, una sola serie */
.ott-bars-figure { margin: 0; padding: 1.5rem; background: var(--surface-solid); border: 1px solid rgba(195,210,230,.78); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ott-bars-caption { margin-bottom: 1rem; color: var(--muted); font-size: .9rem; font-weight: 700; }
.ott-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.ott-bars li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .35rem 1rem; align-items: end; }
.ott-bar-label { font-size: .98rem; }
.ott-bar-value { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.ott-bar-track { grid-column: 1 / -1; height: 12px; border-radius: 4px; background: var(--ott-track); overflow: hidden; }
.ott-bar-fill { display: block; height: 100%; width: var(--v); border-radius: 0 4px 4px 0; background: var(--ott-bar); }
.ott-js .ott-bars:not(.is-visible) .ott-bar-fill { width: 0; }
.ott-bars.is-visible .ott-bar-fill { transition: width .9s cubic-bezier(.2,.7,.2,1); }
.ott-details { margin-top: 1rem; }
.ott-details summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.ott-details summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.ott-details table { width: 100%; border-collapse: collapse; margin-top: .5rem; background: #fff; }
.ott-details caption { text-align: left; padding: .5rem 0; color: var(--muted); }
.ott-details th, .ott-details td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ott-details td:last-child, .ott-details th:last-child { text-align: right; white-space: nowrap; }
.ott-context { margin-top: 2rem; padding: 1.4rem 1.5rem; border-left: 3px solid var(--ott-sand); background: rgba(255,255,255,.7); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.ott-context h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.ott-context blockquote { margin: 0 0 .6rem; font-style: italic; }
.ott-context .small-muted { margin: 0; }

/* Futuro */
.ott-future { overflow: hidden; }
.ott-future-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .35; }
.ott-future-path path { fill: none; stroke: var(--ott-sand); stroke-width: 3; stroke-dasharray: 2 14; stroke-linecap: round; }
.ott-future .container { position: relative; }
.ott-future h2 { color: #fff; }
.ott-eyebrow-dark { background: rgba(255,255,255,.08); border-color: rgba(195,210,230,.28); color: #e2e8f0; }
.ott-future-card { padding: 1.6rem; border-radius: var(--radius-lg); }
.ott-future-card h3 { color: #fff; margin: 0 0 .5rem; font-size: 1.2rem; }
.ott-future-card p { margin: 0; }
.ott-tag { display: inline-block; margin-bottom: 1rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgba(241,101,34,.6); color: #FDBA8C; font-size: .8rem; font-weight: 800; letter-spacing: .03em; }
.ott-icon-dark { display: grid; background: rgba(241,101,34,.14); border-color: rgba(241,101,34,.4); }
.ott-icon-dark svg { stroke: #FDBA8C; }
.ott-future-chips { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.ott-future-note { margin: 1.4rem 0 0; color: rgba(226,232,240,.88); font-size: .95rem; }

/* Valore del tempo */
.ott-time { background: linear-gradient(180deg, rgba(253,244,238,.95), rgba(253,244,238,.65)); }
.ott-time-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; align-items: center; }
.ott-time .lead { color: var(--muted); font-size: 1.12rem; }
.ott-quote { margin: 0; }
.ott-quote blockquote { font-size: 1.05rem; line-height: 1.6; letter-spacing: 0; }
.ott-quote figcaption { margin-top: .9rem; color: var(--muted); font-size: .92rem; }

/* Storia */
.ott-timeline { list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--ott-sand); display: grid; gap: 2rem; max-width: 760px; }
.ott-timeline li { position: relative; }
.ott-timeline li::before { content: ""; position: absolute; left: calc(-1.6rem - 8px); top: .35rem; width: 14px; height: 14px; border-radius: 50%; background: var(--ott-ink); box-shadow: 0 0 0 5px var(--ott-soft); }
.ott-timeline time, .ott-time-label { display: block; color: var(--ott-ink); font-weight: 800; margin-bottom: .2rem; }
.ott-time-label time { display: inline; margin: 0; }
.ott-timeline h3 { margin: 0 0 .35rem; }
.ott-timeline p { margin: 0; }

.ott-ghost-dark { color: #fff; border-color: rgba(195,210,230,.4); }

@media (min-width: 700px) {
  .ott-grid-2, .ott-grid-3, .ott-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ott-grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ott-steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ott-steps li { padding: 4.4rem 1.4rem 1.4rem; }
  .ott-step-num { top: 1.3rem; }
  .ott-demo { grid-template-columns: minmax(0,300px) minmax(0,1fr); }
  .ott-fluid-points { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 900px) {
  .ott-agents { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 1.5rem; }
  .ott-agent-flow { transform: none; width: 120px; }
}
@media (min-width: 1041px) {
  .ott-hero-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,.8fr); }
  .ott-hero-mark { order: 0; }
  .ott-hero-mark img { width: min(300px, 100%); }
  .ott-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ott-grid-3 > :last-child:nth-child(odd) { grid-column: auto; }
  .ott-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .ott-time-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); }
  .ott-demo { gap: 3rem; }
}
@media (max-width: 520px) {
  .ott-card, .ott-stop, .ott-bars-figure { padding: 1.2rem; }
  .ott-hero-copy .hero-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ott-bar-fill, .ott-map-stop circle { transition: none; }
  .ott-js .ott-bars:not(.is-visible) .ott-bar-fill { width: var(--v); }
}
@media print {
  .ott-future { background: #fff; color: #000; }
  .ott-future h2, .ott-future-card h3 { color: #000; }
  .ott-phone { box-shadow: none; }
}

/* Menu laterale a icone, come nella home Web4MCV: stile e script condivisi, accento OnTime Traveller. */
.ott-page .section-rail-link { --section-accent: #A63F0C; }
.ott-page .section-rail-link[data-section-link="futuro"] { --section-accent: #1e3a5f; }
.ott-page .section-rail-link[data-section-link="contatti"] { --section-accent: #245acb; }

/* Intestazione: marchio OnTime Traveller, «by Web4MCV» piccolo. Lo sfondino Web4MCV
   (--ott-web4-bg) è usato solo qui e sulla voce di menu Web4MCV, per riconoscere il sito principale. */
.ott-page { --ott-web4-bg: #E8F0FE; --ott-web4-line: #B9CDF5; --ott-web4-ink: #1E3A8A; }
.ott-brand-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; }
.ott-brand { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; }
.ott-brand-logo { width: 54px; height: 54px; flex: none; filter: drop-shadow(0 6px 12px rgba(241,101,34,.25)); }
.ott-brand-name { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--text); white-space: nowrap; }
.ott-brand:focus-visible, .ott-by:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 12px; }
.ott-web4-chip { background: var(--ott-web4-bg); border: 1px solid var(--ott-web4-line); color: var(--ott-web4-ink); }
.ott-by { display: inline-flex; align-items: center; gap: .4rem; margin-left: calc(54px + .7rem); padding: .3rem .7rem .3rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1; }
.ott-by img { width: auto; height: 15px; }
.ott-by:hover { border-color: var(--ott-web4-ink); }
.ott-page .nav a.ott-nav-web4 { padding: .45rem .9rem; border-radius: 999px; color: var(--ott-web4-ink); }
.ott-page .nav a.ott-nav-web4:hover, .ott-page .nav a.ott-nav-web4:focus-visible { color: var(--ott-web4-ink); border-color: var(--ott-web4-ink); }
@media (max-width: 1040px) {
  .topbar.nav-ready .ott-brand-wrap { flex: 1; }
  .ott-brand-logo { width: 42px; height: 42px; }
  .ott-by { margin-left: calc(42px + .7rem); }
  .ott-page .topbar.nav-ready .nav a.ott-nav-web4 { padding: .65rem .8rem; border-radius: 10px; }
}
@media (max-width: 420px) {
  .ott-brand-name { font-size: 1.05rem; white-space: normal; }
  .ott-by img { height: 13px; }
}