/* =========================================================
   LUMEN · BRAND v2
   Si carica dopo lo stile originale e lo sovrascrive.
   Bianco e nero, una voce serif, un solo segnale arancione
   dove decide una persona. Nessuna sezione cambiata.
   ========================================================= */

:root{
  --bg:#f4f4f3; --shell:#f4f4f3; --panel:#ecebe8; --box:#fcfcfb;
  --ink:#121212; --ink2:#4a4a48; --mute:#686865; --set:#a3a29e;
  --line:rgba(18,18,18,.10); --line2:rgba(18,18,18,.16); --wire:rgba(18,18,18,.22);
  /* l'ex oro diventa grafite: grafici e numeri non sono decisioni */
  --acc:#8d8c87; --acc-soft:rgba(141,140,135,.22);
  --signal:#e4471b; --signal-soft:rgba(228,71,27,.18);
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --r:6px;
}

/* ---------- base ---------- */
body{background-image:none;font-family:var(--sans)}
.shell{background:var(--shell);border-inline:0}
:focus-visible{outline-color:var(--signal)}

/* ---------- titoli: serif leggero, mai grassetto ---------- */
.h1,.h2,.brand,.stat b,.rd-copy h3,.duo b,.gapline,.field output,.big,.calc-out .mid,
.pain p:not(.kick),.led-foot strong,.dg-hi,.dg-num b,.svc-i h3,.steps h3,.span b,
.promises b,.faq-list summary,.choice h3,.cs-body h3,.cs-facts b,.giant,.mark{
  font-family:var(--display)!important;font-weight:400!important;
  font-variant-numeric:lining-nums tabular-nums;
}
.h1{font-size:clamp(44px,4.3vw,64px);line-height:1.02;letter-spacing:-.025em}
.h2{letter-spacing:-.025em;line-height:1.02}
.final .h2{letter-spacing:-.03em}
.stat b,.big,.duo b,.led-foot strong,.dg-num b{letter-spacing:-.03em}
.rd-copy h3,.svc-i h3,.steps h3,.choice h3,.cs-body h3,.span b,.calc-out .mid,.pain p:not(.kick){letter-spacing:-.015em;line-height:1.12}
.promises b,.gapline,.dg-hi,.faq-list summary{letter-spacing:-.01em}
.faq-list summary{font-size:22px}
.h2 .g,.h1 .set{color:var(--set)}

/* ---------- etichette: niente più maiuscoletto mono ---------- */
.kick,.stat .src,.rd-legend,.pick label,.tabs button,.tag,.tstrip,.calc-out .k,
.dg-todo h4,.dg-head .ex,.svc-i .meta-l,.first-tag,.span span,.steps .you span,
.choose,.choice .k,.rd-src summary,.rd-key li em,.fh,.foot-bot,.led-foot p,.prog-l,.bars{
  font-family:var(--sans)!important;text-transform:none!important;letter-spacing:.005em!important;
}
.kick{font-size:14px;color:var(--mute);margin-bottom:14px}
.stat .src{font-size:13px}
.rd-legend{font-size:13.5px}
.pick label,.calc-out .k,.dg-todo h4,.choice .k,.span span,.steps .you span{font-size:13.5px}
.choose{font-size:15px;color:var(--mute)}
.fh{font-size:14px;font-weight:500}
.foot-bot{font-size:13px}
.led-foot p{font-size:13px}
.st-n{font-family:var(--sans);letter-spacing:.02em}
.st-n span:first-child{font-family:var(--display);font-size:22px;letter-spacing:0}

/* ---------- logo a parola, nessuna tessera ---------- */
.brand{font-size:27px;letter-spacing:-.02em;gap:0}
.brand .mark{display:none}
.foot .brand{font-size:34px}
.dg-head .mark{width:32px;height:32px;font-size:19px}
.core .mark{width:44px;height:44px;font-size:26px}

/* ---------- pulsanti ---------- */
.btn{border-radius:var(--r);border:0;box-shadow:inset 0 0 0 1px var(--ink)}
.btn-p{background:var(--ink);color:#f4f4f3}
.btn-p:hover{background:#2a2a28}
.btn-s:hover{background:var(--ink);color:#f4f4f3}
/* l'unico arancione sempre visibile: la decisione di prenotare */
.nav-cta{background:var(--signal);color:#121212;padding:11px 16px;border-radius:var(--r);font-weight:500}
.nav-cta:hover{opacity:1;background:#cf3d14}
.nav-links a{font-weight:400}
.nav-links a::first-letter{color:var(--mute)}
.nav-in{background:rgba(244,244,243,.88);border-inline:0}

/* ---------- separatore: una riga, niente mirini ---------- */
.cut::before,.cut::after,.cut span{display:none}
.cut{background:var(--line)}

/* ---------- HERO: colori del testo sulla foto (foto e layout in HERO v3, in fondo) ---------- */
.hero{color:#f2f1ee}
.hero .h1 .pay{color:#f2f1ee}
.hero .h1 .set{color:rgba(242,241,238,.55)}
.hero .sub{color:rgba(242,241,238,.82)}
.hero .btn-p{background:#f2f1ee;color:#121212;box-shadow:none}
.hero .btn-p:hover{background:#fff}
.hero .lnk{color:#f2f1ee;border-color:rgba(242,241,238,.35)}
.hero .lnk:hover{border-color:#f2f1ee}
.hero .meta div{border-top-color:rgba(242,241,238,.22)}
.hero .meta dt{color:rgba(242,241,238,.6)}
.hero .meta dd{color:#f2f1ee}
.hero .led-note{color:rgba(242,241,238,.6)}

/* ---------- il registro resta mono: è la voce dell'assistente ---------- */
.led{border:0;border-radius:var(--r);background:rgba(252,252,251,.97);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden;color:var(--ink)}
.led-head{letter-spacing:.02em;text-transform:none;font-family:var(--mono);font-size:12.5px}
.led-cols{letter-spacing:.02em;text-transform:none;font-family:var(--sans);font-size:12.5px}

/* ---------- numeri ---------- */
.stats{border:0;gap:2px}
.stat{border:0;background:var(--box)}
.stat.dark{background:var(--ink)}
.bars i{border-radius:2px}
.bars i::after{border-radius:2px}

/* ---------- radar ---------- */
.rd-chart{border-right-color:var(--line)}
.rd .obs{fill:rgba(141,140,135,.28);stroke:#7a7975}
.rd .do{fill:#7a7975}
.rd-legend i.o{border-color:#7a7975;background:rgba(141,140,135,.28)}
.rd-copy{background:var(--box)}
.pick select{border-radius:var(--r);background-color:var(--panel);border-color:var(--line)}
.duo{border-color:var(--line);border-radius:var(--r)}
.duo div + div b{color:var(--ink2)}
.rd-key li em b{color:var(--ink)}

/* ---------- cornici: niente bordi, superfici morbide ---------- */
.frame-in{background:var(--panel);border:0;border-radius:var(--r)}
.calc{border-radius:var(--r);overflow:hidden}
.calc-out .btn{background:#f2f1ee;color:#121212;box-shadow:none}

/* ---------- demo per settore ---------- */
.tabs{border:0;background:var(--panel);border-radius:var(--r);padding:4px}
.tabs button{font-size:14px;border-radius:4px}
.tabs button[aria-selected="true"]{background:var(--ink);color:#f4f4f3}
.agent{border:0;border-radius:var(--r);box-shadow:0 1px 0 rgba(18,18,18,.06),0 18px 36px -28px rgba(18,18,18,.4)}
.agent.on{box-shadow:inset 0 0 0 1px var(--ink),0 18px 36px -28px rgba(18,18,18,.4)}
.tag{border-radius:4px;font-size:12px}
.tag i{display:none}
/* l'ultimo passo aspetta una persona: segnale */
.checks li.pending{color:var(--ink)}
.checks li.pending .bx{border-color:var(--signal);background:var(--signal-soft)}
@keyframes pulse{50%{box-shadow:0 0 0 6px var(--signal-soft)}}
.tstrip{border:0;border-radius:0 0 var(--r) var(--r);font-size:13.5px}
.tstrip s,.tstrip b{font-family:var(--display);font-size:18px}

/* ---------- hub e riepilogo del lunedì ---------- */
.node{border:0;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
.node:hover,.node.act{box-shadow:inset 0 0 0 1px var(--ink)}
.core{border:0;box-shadow:0 18px 40px -26px rgba(18,18,18,.5)}
.orbit{border-color:rgba(18,18,18,.22)}
.dg{border:0;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 rgba(18,18,18,.05),0 26px 50px -32px rgba(18,18,18,.5)}
.dg-num{border-color:var(--line);border-radius:var(--r)}
.dg-num div:last-child b{color:var(--ink)}
/* Firma, Chiama, Conferma: sono decisioni */
.dg-todo .go{background:var(--signal);color:#121212;border-radius:4px;font-weight:500}
.dg-todo .go:hover{background:#cf3d14}
.dg-todo li.ok .bx{background:var(--ink);border-color:var(--ink)}
.hub svg.wires path.run[data-g="out"]{stroke:var(--ink)}

/* ---------- strumenti ---------- */
.logos{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logo{border-right-color:var(--line);color:#8d8c87}

/* ---------- caso studio ---------- */
.cs{border:0;border-radius:var(--r);overflow:hidden;background:var(--box)}
.cs-img{border-right:0}
.cs-facts{border-top-color:var(--line)}

/* ---------- servizi e metodo ---------- */
.ico{stroke:var(--ink2)}
.svc-i .meta-l{color:var(--ink2);font-size:14px}
.first-tag{border-radius:4px;font-size:12.5px}
.span{border-top-color:var(--line)}
.promises{border:0;gap:2px}
.promises li{border:0;background:var(--box)}

/* ---------- FAQ ---------- */
.faq{border-radius:var(--r)}

/* ---------- CTA finale ---------- */
.choice{border:0;border-radius:var(--r);background:var(--box);box-shadow:0 1px 0 rgba(18,18,18,.05)}

/* ---------- footer: inchiostro ---------- */
.foot{background:#121212;color:#f2f1ee}
.foot .brand{color:#f2f1ee}
.foot-brand p,.foot nav a{color:rgba(242,241,238,.68)}
.foot nav a:hover{color:#f2f1ee}
.foot nav a .v{color:#f2f1ee;font-family:var(--sans)}
.fh{color:#f2f1ee}
.foot-bot{border-top-color:rgba(242,241,238,.14);color:rgba(242,241,238,.5)}
.foot-bot a:hover,.foot-bot .up{color:#f2f1ee}
.giant{-webkit-text-stroke:0;color:rgba(242,241,238,.07);letter-spacing:-.04em}

@media (max-width:560px){
  .h1{font-size:clamp(40px,11vw,56px);letter-spacing:-.02em}
  .hero{background-position:62% 40%}
  .nav-cta{padding:9px 12px}
}

/* logo C: "Lumen." con il punto finale; nell'icona il punto è arancione */
.brand::after{content:"."}
.giant::after{content:"."}
/* il segno nel sito è l'icona vera, non testo */
.mark{background:url(favicon.svg) center/cover no-repeat;border-radius:22%;color:transparent!important;overflow:hidden}

/* CTA: un solo stile per tutti i pulsanti di prenotazione e contatto.
   Arancione pieno, testo inchiostro, angoli 6px, senza "+" e senza freccia. */
.btn-p,.nav-cta,.nav-r .cta{background:var(--signal)!important;color:#121212!important;box-shadow:none!important;border:0!important;border-radius:var(--r)!important;font:500 16px/1 var(--sans)!important;letter-spacing:0!important;padding:15px 20px!important;opacity:1!important;transition:background .2s}
.btn-p:hover,.nav-cta:hover,.nav-r .cta:hover{background:#cf3d14!important}
.btn-p .arr{display:none}
.nav-cta,.nav-r .cta{font-size:15px!important;padding:11px 16px!important}

/* Tutto schermo: sfondi e foto da bordo a bordo, contenuti centrati entro 1280px */
:root{--gut:max(clamp(20px,5vw,88px),calc((100vw - 1280px) / 2))}
.shell,.nav-in{max-width:none!important;border-inline:0!important}

/* =========================================================
   HERO v3 · timone a sinistra, registro in striscia
   ========================================================= */
.hero{background:linear-gradient(270deg,rgba(10,10,10,.86) 0%,rgba(10,10,10,.74) 44%,rgba(10,10,10,.24) 60%,rgba(10,10,10,0) 76%),url(assets/brand/timone.jpg) left center/cover no-repeat #0c0c0c}
.hero .ln-note,.hero .led-note{color:rgba(242,241,238,.6)}

/* registro: base comune */
.led-cols,.led-row .n{display:none}
.led-rows{background-image:none}
.led-row .new{font-family:var(--mono)}

@media (min-width:1081px){
  .hero{grid-template-columns:minmax(0,41fr) minmax(0,59fr);grid-template-rows:auto auto auto;align-content:start;row-gap:0}
  .hero-copy{grid-column:2;grid-row:1}
  .hero-led{grid-column:2;grid-row:2;margin-top:44px}
  .hero > .meta{grid-column:2;grid-row:3;align-self:start;margin-top:28px;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .hero > .meta div{display:block;padding:12px 0 0}
  .hero > .meta dd{text-align:left;margin-top:4px}
  .h1{font-size:clamp(44px,3.9vw,60px)}
  .hero .sub{max-width:44ch}
  /* striscia larga e bassa: attività in colonne, totale a destra */
  .led{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .led-head{grid-column:1/-1;padding:12px 18px;font-size:12px}
  .led-rows{grid-column:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .led-row{display:grid;grid-template-columns:none;align-content:start;height:auto;gap:7px;padding:14px 16px;border-right:1px solid rgba(18,18,18,.08)}
  .led-row .what{font-size:14px;line-height:1.25}
  .led-row .old,.led-row .new{font-size:11.5px;white-space:nowrap}
  .led-foot{grid-column:2;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:14px 18px;border-top:0;background:#f1f0ed;min-width:150px}
  .led-foot strong{font-size:clamp(28px,2.4vw,36px)}
  .led-note{margin-top:12px}
}

@media (max-width:1080px){
  /* telefono e tablet: foto in alto ritagliata sul timone, testo sotto */
  .hero{background:linear-gradient(to bottom,rgba(12,12,12,.1) 0,rgba(12,12,12,0) 34vw,#0c0c0c calc(76px + 66vw)),url(assets/brand/timone.jpg) 8% 76px/auto 72vw no-repeat #0c0c0c;padding-top:calc(76px + 56vw)}
  .hero-led{margin-top:8px}
  .led{display:block}
  .led-head{padding:13px 16px}
  .led-rows{display:block}
  .led-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;height:auto;padding:13px 16px;border-bottom:1px solid rgba(18,18,18,.08)}
  .led-row .old{display:none}
  .led-row .what{grid-column:auto;font-size:14.5px}
  .led-row .new{font-size:12px;white-space:nowrap}
  .led-foot{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:14px 16px;border-top:0;background:#f1f0ed}
  .led-foot strong{font-size:32px}
}
@media (max-width:560px){
  .hero{padding-top:calc(76px + 58vw)}
}