/* ============================================================
   ddv-extra.css — Migliorie grafiche v2
   Layer aggiuntivo: va caricato DOPO ddv.css.
   Non tocca nulla dell'originale, solo aggiunte e rifiniture.
   ============================================================ */

/* Ancore corrette sotto la nav sticky + selezione brand */
html{scroll-padding-top:96px}
::selection{background:var(--accent);color:var(--bg)}

/* Grana editoriale, quasi invisibile */
body::before{
  content:"";position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.045;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.6"/></svg>');
}

/* Bottoni: micro-movimento */
.btn{transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}

/* ===== Showreel in apertura ===== */
.reel{
  position:relative;margin:0 var(--pad) clamp(10px,1.2vw,18px);
  aspect-ratio:21/9;border-radius:14px;overflow:hidden;
  border:1px solid rgba(11,10,9,.18);
  background:linear-gradient(135deg,#171512 0%,#33291b 55%,#171512 100%);
}
@media (max-width:700px){.reel{aspect-ratio:16/9;border-radius:10px}}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,10,9,0) 55%,rgba(11,10,9,.5) 100%);
  pointer-events:none;
}
.reel .reel-tag{
  position:absolute;left:20px;bottom:16px;z-index:2;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#F2EFE9;opacity:.9;
}
.reel .reel-yt{
  position:absolute;right:20px;bottom:12px;z-index:2;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#F2EFE9;
  background:rgba(11,10,9,.5);border:1px solid rgba(242,239,233,.25);
  padding:8px 15px;border-radius:99px;
  transition:background .15s,color .15s,border-color .15s;
}
.reel .reel-yt:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.reel.hidden{display:none}
/* Solo per l'anteprima senza file video */
.reel .demo-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(242,239,233,.65);text-align:center;line-height:2;
}

/* ===== Numeri di sezione ===== */
.sec-num{
  display:block;font-family:ui-monospace,Menlo,monospace;font-size:12px;
  font-weight:400;letter-spacing:.16em;color:var(--accent);margin-bottom:12px;
}

/* ===== Servizi: riga che si accende ===== */
.srv{position:relative}
.srv::before{
  content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
  background:var(--accent);transition:width .4s cubic-bezier(.22,.8,.3,1);
}
.srv:hover::before{width:100%}
.srv:hover .srv-num{color:var(--ink)}

/* ===== Marquee: leggera inclinazione e pausa al passaggio ===== */
.strip{transform:rotate(-.6deg) scale(1.015);margin:8px 0}
.strip:hover .strip-inner{animation-play-state:paused}

/* ===== Ritratto: ombra piatta arancio ===== */
.bio image-slot{
  box-shadow:10px 10px 0 var(--accent);
  transition:transform .25s,box-shadow .25s;
}
.bio image-slot:hover{transform:translate(-3px,-3px);box-shadow:14px 14px 0 var(--accent)}

/* ===== Loghi clienti: da grigi a pieni ===== */
.logos .logo{filter:grayscale(1);transition:opacity .2s,filter .2s}
.logos .logo:hover{filter:grayscale(0)}

/* ===== Card formazione: filo superiore che si accende ===== */
.fcard{position:relative;overflow:hidden}
.fcard::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.8,.3,1);
}
.fcard:hover::after{transform:scaleX(1)}

/* ===== Accessibilità ===== */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none}
  .bio image-slot:hover{transform:none}
}

/* ============================================================
   v4 — Palette definitiva: crema, inchiostro, accento cremisi.
   Accento #B3271E (e la sua versione chiara #FF8075 sulle
   superfici scure). L'oro resta SOLO sulla copertina del libro,
   che è il brand della landing. Per cambiare accento in futuro
   basta toccare queste due variabili.
   ============================================================ */
:root{--accent:#B3271E;--accent-bright:#FF8075;--oro:#D4B452}

.btn.fill{background:var(--ink);color:var(--bg)}
.btn.fill:hover{background:var(--accent);color:var(--bg)}
.nav-cta:hover{background:var(--accent);color:var(--bg)}

.banner{background:var(--ink);color:var(--bg)}
.banner h2 em{font-style:normal;color:var(--accent-bright)}
.banner .btn{background:var(--accent-bright);color:var(--ink)}
.banner .btn:hover{background:var(--bg);color:var(--ink)}
.reel .reel-yt:hover{background:var(--accent-bright);color:var(--ink);border-color:var(--accent-bright)}

/* ===== Sezione libro ===== */
.libro{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,4.4vw,72px);align-items:center}
@media (max-width:820px){.libro{grid-template-columns:1fr}.libro-book{order:-1;justify-self:center}}
.libro-left{display:flex;flex-direction:column;gap:20px}
.libro-left h3{font-weight:900;font-size:clamp(26px,2.8vw,40px);line-height:1.06;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.libro-left h3 em{font-style:normal;color:var(--accent)}
.libro-left p{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--soft);max-width:640px}
.libro-book{perspective:1200px;padding:12px 34px 12px 0}
.mini-book{
  position:relative;width:220px;height:315px;
  transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(4deg);
  animation:bookfloat 5.5s ease-in-out infinite;
}
@keyframes bookfloat{0%,100%{transform:rotateY(-24deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(-21deg) rotateX(3deg) translateY(-12px)}}
.mini-cover{
  position:absolute;inset:0;border-radius:4px 10px 10px 4px;
  background:linear-gradient(150deg,#1c1a17 0%,#0b0a09 100%);
  border:1px solid rgba(212,180,82,.45);
  box-shadow:24px 38px 60px rgba(11,10,9,.3), inset 0 0 50px rgba(212,180,82,.05);
  padding:26px 20px;display:flex;flex-direction:column;
}
.mini-cover::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:1px;background:linear-gradient(rgba(212,180,82,.5),rgba(212,180,82,.08))}
.mini-eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:7.5px;letter-spacing:.26em;text-transform:uppercase;color:#8b8b86;margin-bottom:20px}
.mini-title{
  font-weight:900;font-size:22px;line-height:1.14;text-transform:uppercase;letter-spacing:-.01em;
  background:linear-gradient(160deg,#E8CD74 10%,var(--oro) 45%,#A8862E 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mini-title small{display:block;font-size:10.5px;font-weight:700;color:#d8d8d2;-webkit-text-fill-color:#d8d8d2;letter-spacing:.06em;margin-bottom:7px}
.mini-author{margin-top:auto;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#d8d8d2}
.mini-author span{color:var(--oro)}
.mini-pages{position:absolute;top:4px;bottom:4px;right:-8px;width:8px;background:repeating-linear-gradient(to bottom,#efece2 0 2px,#d9d5c8 2px 3px);border-radius:0 2px 2px 0;transform:translateZ(-12px)}
@media (prefers-reduced-motion:reduce){.mini-book{animation:none}}
.stores-note{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,10,9,.5);margin-top:4px}

/* ===== Selettore lingua IT|EN (come su innovationstories.film) ===== */
.lang-switch{
  display:inline-flex;align-items:center;flex-shrink:0;
  border:1px solid rgba(11,10,9,.28);border-radius:99px;overflow:hidden;
}
.lang-switch a{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 14px;color:var(--ink);opacity:.55;
  transition:opacity .15s,background .15s,color .15s;
}
.lang-switch a:hover{opacity:1;color:var(--ink)}
.lang-switch a.on{background:var(--ink);color:var(--bg);opacity:1}
@media (max-width:480px){.lang-switch a{padding:7px 11px;font-size:10.5px}}

/* ============================================================
   v5 — Hero definitiva: video in sovraimpressione.
   Video specchiato (volto a destra, pulito), testo a sinistra
   entro 720px, velatura più scura dietro le scritte e leggera
   sul viso. Se il video non carica resta il fondale scuro.
   ============================================================ */
.hero{position:relative;overflow:hidden;background:#12100E;color:#F2EFE9;padding-top:clamp(96px,12vw,180px);padding-bottom:clamp(96px,11vw,170px)}
.hero-bgv{position:absolute;inset:0;z-index:0}
.hero-bgv video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.hero-bgv::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,10,9,.62) 0%,rgba(11,10,9,.22) 58%,rgba(11,10,9,.12) 100%),linear-gradient(180deg,rgba(11,10,9,.3) 0%,rgba(11,10,9,.18) 40%,rgba(11,10,9,.62) 100%)}
.hero .hero-copy{position:relative;z-index:1;max-width:720px}
.hero .kicker{color:rgba(242,239,233,.85)}
.hero h1{color:#F2EFE9}
.hero h1 em{color:#FF4438}
.hero .hero-sub{color:rgba(242,239,233,.88)}
.hero .hero-sub strong{color:#fff}
.hero .btn.line{border-color:rgba(242,239,233,.55);color:#F2EFE9}
.hero .btn.line:hover{border-color:#F2EFE9;color:#F2EFE9}
@media (max-width:700px){.hero-bgv::after{background:linear-gradient(180deg,rgba(11,10,9,.66) 0%,rgba(11,10,9,.5) 45%,rgba(11,10,9,.75) 100%)}}

/* ============================================================
   v7 — Ottimizzazioni mobile
   - niente scroll orizzontale accidentale (marquee inclinato)
   - barra in alto sfoltita sul telefono: il CTA "Prenota" passa
     dentro il menu, restano logo + selettore lingua + panino
   - hero un filo più compatta e testo ben leggibile sul video
   ============================================================ */
html,body{overflow-x:hidden}

/* Il "Prenota" mobile vive solo nel menu a tendina del telefono */
.cta-mobile{display:none}

@media (max-width:700px){
  .nav-cta{display:none}
  .nav-burger{margin-left:auto}
  .nav.menu-open .nav-links .cta-mobile{
    display:block;color:var(--accent);font-weight:700;
  }
  /* hero: meno vuoto verticale, testo che respira */
  .hero{padding-top:clamp(72px,16vw,120px);padding-bottom:clamp(72px,16vw,120px)}
  .hero .hero-copy{max-width:100%}
  /* target di tocco comodi per il selettore lingua */
  .lang-switch a{padding:9px 14px}
}

/* schermi molto piccoli: titoli e spaziature più contenuti */
@media (max-width:400px){
  .hero{padding-top:64px;padding-bottom:64px}
  .sec-num{margin-bottom:8px}
}