/* assets/marketing/pagine/tutorial.css — stili della sola pagina tutorial.html
   TF-MKT-REFACTOR-2026-10-06 (passo meccanico): i blocchi <style> della pagina, byte per
   byte e nello stesso ordine. I blocchi stavano nel <body>: il <link> e' in fondo al <head>,
   dopo ../nav.css, che era il primo foglio del <body>: l'ordine fra fogli non cambia. */

/* ═══ [1] blocco per <section class="tvd-hero"> ═══ */
.tvd-wrap{ position:relative; max-width:1290px; margin:0 auto; padding:0 20px; }

/* ── hero chiara, stile index ── */
.tvd-hero{ position:relative; overflow:hidden;
  background:linear-gradient(180deg,#fffbf5 0%,#fff 100%);
  padding:150px 0 72px; }
.tvd-hgrid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:48px; align-items:center; }
/* accento "cangiante": stessa firma gradiente della hero di index (TF-HERO-SEMPLICE-GC) */
.tvd-h1-accent{
  background:linear-gradient(120deg, #f59e0b 0%, #fb923c 45%, #ef4444 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; background-position:0% 50%;
  animation:tvdHeroGradient 8s ease-in-out infinite; font-style:normal; }
@keyframes tvdHeroGradient{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@media (prefers-reduced-motion: reduce){ .tvd-h1-accent{ animation:none; } }
/* eyebrow di solo testo, come la kvC-eyebrow di come-funziona (niente pill) */
.tvd-eyebrow{ margin:0 0 16px; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#b45309; }
.tvd-h1{ margin:0 0 20px; max-width:16ch; font-size:clamp(38px,4.8vw,58px); line-height:1.05;
  letter-spacing:-0.033em; font-weight:700; color:#0f172a; }
.tvd-sub{ margin:0 0 30px; max-width:48ch; font-size:17.5px; line-height:1.62; color:rgba(15,23,42,.62); }
.tvd-trust{ margin:16px 0 0; font-size:13.5px; color:rgba(15,23,42,.52); }
.tvd-trust b{ color:#0f172a; font-weight:650; }
.tvd-trust-dot{ margin:0 8px; color:rgba(15,23,42,.28); }
/* copertina "play": pannello ambra come la kvC-frame di come-funziona,
   ma al posto della modella il mockup con la grande icona Play (clic = passo 01) */
.tvd-hplay{ position:relative; display:block; overflow:hidden; border-radius:36px;
  background:#fff7ed; border:1px solid #fde68a; padding:clamp(26px,3.2vw,44px); }
.tvd-hplay-img{ display:block; width:100%; height:auto; }
.tvd-hplay-btn{ position:absolute; inset:0; margin:auto; width:104px; height:104px;
  display:flex; align-items:center; justify-content:center; border-radius:999px; color:#f59e0b;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 18px 42px -14px rgba(180,83,9,.35), 0 2px 6px rgba(15,23,42,.12);
  transition:transform .18s ease, background-color .18s ease; }
.tvd-hplay:hover .tvd-hplay-btn{ background:rgba(255,255,255,.88); }
.tvd-hplay-btn::before{ content:""; position:absolute; inset:-13px; border-radius:inherit;
  border:2px solid rgba(255,255,255,.7); animation:tvdPlayPulse 2.6s ease-out infinite; }
@keyframes tvdPlayPulse{ 0%{ transform:scale(.82); opacity:0 } 35%{ opacity:1 } 100%{ transform:scale(1.22); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .tvd-hplay-btn::before{ animation:none; opacity:.45; } }
.tvd-hplay:hover .tvd-hplay-btn{ transform:scale(1.06); }
.tvd-hplay-btn svg{ flex:none; width:38px; height:38px; margin-left:5px; }
/* ricerca per argomenti (nella banda dei passi, centrata sopra le card) */
.tvd-search{ position:relative; max-width:560px; margin:0 auto 18px; }
.tvd-search > svg{ position:absolute; left:16px; top:26px; transform:translateY(-50%);
  width:18px; height:18px; color:rgba(15,23,42,.35); pointer-events:none; }
.tvd-search input{ width:100%; padding:15px 16px 15px 46px; border-radius:999px;
  border:1px solid #e7e5e4; background:#fff; font:inherit; font-size:15px; color:#0f172a;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 10px 26px -18px rgba(15,23,42,.25);
  transition:border-color .15s, box-shadow .15s; }
.tvd-search input::placeholder{ color:rgba(15,23,42,.38); }
.tvd-search input:focus{ outline:none; border-color:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.14); }
.tvd-search ul{ position:absolute; z-index:30; top:calc(100% + 8px); left:0; right:0;
  margin:0; padding:6px; list-style:none; border-radius:16px; border:1px solid #eceae7;
  background:#fff; box-shadow:0 24px 50px -24px rgba(15,23,42,.35); }
.tvd-search li{ border-radius:11px; }
.tvd-search li a{ display:flex; align-items:center; gap:10px; padding:11px 12px;
  font-size:14px; color:#0f172a; border-radius:11px; }
.tvd-search li a:hover, .tvd-search li a:focus{ background:#fff7ed; outline:none; }
.tvd-search li a b{ flex:none; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#b45309; background:#fff7ed; border:1px solid #fde68a;
  border-radius:999px; padding:3px 8px; }
.tvd-search .vuoto{ padding:12px; font-size:13.5px; color:rgba(15,23,42,.45); }

/* ── i sei passi, card con icona (via i chip anonimi) ── */
.tvd-anchors{ background:#fff; border-bottom:1px solid #f4f1ec; padding:26px 0 30px; }
.tvd-dock-in{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.tvd-dl{ display:flex; flex-direction:column; gap:7px; padding:16px 15px 15px;
  border-radius:16px; border:1px solid #eceae7; background:#fff;
  transition:border-color .18s, box-shadow .18s, transform .18s; }
.tvd-dl:hover{ border-color:#fde68a; transform:translateY(-2px);
  box-shadow:0 14px 30px -18px rgba(180,83,9,.35); }
.tvd-dl-ic{ display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:11px; background:#fff7ed; border:1px solid #fde68a; margin-bottom:2px; }
.tvd-dl-ic svg{ flex:none; width:18px; height:18px; color:#b45309; }
.tvd-dl b{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(15,23,42,.38); font-variant-numeric:tabular-nums; }
.tvd-dl-t{ font-size:13.5px; font-weight:600; line-height:1.3; color:#0f172a; }

/* ── i sei passi: testo | foto alternati ── */
.tvd-acts{ background:#fff; padding:26px 0 10px; }
.tvd-act{ padding:64px 0; scroll-margin-top:110px; }
.tvd-scene{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px 76px; align-items:center; }
.tvd-act--flip .tvd-scene{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.tvd-act--flip .tvd-copy{ order:2; }
.tvd-n{ margin:0 0 13px; font-size:12px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#b45309; }
.tvd-h2{ margin:0 0 14px; max-width:22ch; font-size:clamp(25px,2.6vw,33px); line-height:1.14;
  letter-spacing:-0.024em; font-weight:700; color:#0f172a; }
.tvd-p{ margin:0 0 24px; max-width:52ch; font-size:16px; line-height:1.64; color:rgba(15,23,42,.62); }
.tvd-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.tvd-steps li{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:13px; align-items:start; }
.tvd-steps .sn{ display:flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:9px; background:#fff7ed; border:1px solid #fde68a; color:#b45309;
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.tvd-steps b{ display:block; font-size:15px; font-weight:650; color:#0f172a; margin-bottom:3px; }
.tvd-steps p{ margin:0; max-width:56ch; font-size:14.5px; line-height:1.6; color:rgba(15,23,42,.62); }
.tvd-ui{ display:inline-block; padding:1px 7px; border-radius:6px; border:1px solid #e4e4e7;
  background:#f7f7f8; font-size:.88em; font-weight:600; color:#3f3f46; white-space:nowrap; }
.tvd-note{ display:flex; gap:12px; margin-top:22px; padding:14px 16px; border-radius:13px;
  border:1px solid #fde68a; background:#fff7ed; }
.tvd-note svg{ flex:none; width:18px; height:18px; margin-top:1px; color:#b45309; }
.tvd-note p{ margin:0; font-size:14px; line-height:1.58; color:#78350f; }
.tvd-note b{ font-weight:650; }

/* ── le foto (mockup reali + screenshot, images/proto) ──
   formato UNICO: box a proporzione fissa, l'arte si centra dentro — ogni passo
   occupa lo stesso ingombro visivo. Dal 07/10/2026 (grafiche definitive) sono
   tutte MacBook 1.67; il box 29/20 resta, regge anche formati diversi */
.tvd-shot{ display:flex; align-items:center; justify-content:center; aspect-ratio:29/20; }
.tvd-img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; }

/* frecce-guida verso il basso: doppio chevron pulsante, come la hero della index */
.tvd-arrow{ display:flex; flex-direction:column; align-items:center; color:#f59e0b; }
.tvd-arrow svg{ flex:none; width:24px; height:24px; }
.tvd-arrow svg+svg{ margin-top:-15px; }
.tvd-arrow svg:first-child{ animation:tvdChev 2s ease-in-out infinite; }
.tvd-arrow svg:last-child{ animation:tvdChev 2s ease-in-out .3s infinite; }
@keyframes tvdChev{ 0%,100%{ opacity:.2; transform:translateY(0) } 50%{ opacity:.85; transform:translateY(4px) } }
@media (prefers-reduced-motion: reduce){ .tvd-arrow svg{ animation:none !important; opacity:.45; } }
.tvd-arrow--hero{ margin-top:34px; }
.tvd-arrow--sep{ margin:-16px 0; }

/* ── domande frequenti ── */
.tvd-faq{ background:#fafaf9; border-top:1px solid #f1f0ee; padding:76px 0; }
.tvd-faq-h{ margin:0 0 8px; font-size:clamp(25px,2.6vw,34px); line-height:1.15;
  letter-spacing:-0.024em; font-weight:700; color:#0f172a; }
.tvd-faq-s{ margin:0 0 32px; max-width:56ch; font-size:16px; line-height:1.6; color:rgba(15,23,42,.58); }
.tvd-qs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.tvd-q{ border:1px solid #e7e5e4; border-radius:15px; background:#fff; overflow:hidden; }
.tvd-q summary{ cursor:pointer; list-style:none; display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px; font-size:15.5px; font-weight:600; color:#0f172a; line-height:1.4; }
.tvd-q summary::-webkit-details-marker{ display:none; }
.tvd-q summary svg{ flex:none; width:18px; height:18px; margin-top:2px; color:#b45309; transition:transform .2s; }
.tvd-q[open] summary svg{ transform:rotate(45deg); }
.tvd-q div{ padding:0 18px 18px 48px; }
.tvd-q p{ margin:0; font-size:14.5px; line-height:1.65; color:rgba(15,23,42,.62); }

/* ── continua ── */
.tvd-next{ background:#fff; padding:60px 0 8px; }
.tvd-ngrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tvd-ncard{ display:block; border:1px solid #e7e5e4; border-radius:16px; padding:20px; background:#fff;
  transition:border-color .15s, box-shadow .15s; }
.tvd-ncard:hover{ border-color:#fde68a; box-shadow:0 14px 34px -24px rgba(180,83,9,.4); }
.tvd-ncard b{ display:block; font-size:15.5px; color:#0f172a; margin-bottom:6px; }
.tvd-ncard p{ margin:0 0 10px; font-size:13.5px; line-height:1.6; color:rgba(15,23,42,.58); }
.tvd-ncard span{ font-size:13.5px; font-weight:600; color:#b45309; }

@media (max-width:1023px){
  .tvd-hero{ padding:132px 0 56px; }
  /* TF-TUTORIAL-FLIP-MOBILE-2026-10-07: anche .tvd-act--flip .tvd-scene, che fuori dalla
     media query vale di piu' (due classi) e teneva i passi 02/04/06 su due colonne
     anche a 375: testo schiacciato e foto a 135 px invece di 296. */
  .tvd-hgrid, .tvd-scene, .tvd-act--flip .tvd-scene{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .tvd-act--flip .tvd-copy{ order:0; }
  .tvd-act{ padding:48px 0; scroll-margin-top:90px; }
  .tvd-dock-in{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tvd-qs, .tvd-ngrid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:639px){
  .tvd-hplay{ border-radius:26px; }
  .tvd-hplay-btn{ width:74px; height:74px; }
  .tvd-hplay-btn svg{ width:28px; height:28px; margin-left:4px; }
  .tvd-dock-in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tvd-act{ padding:40px 0; }
  .tvd-faq{ padding:56px 0; }
}

/* ═══ [2] blocco per <section class="tvd-video" id="video" aria-labelledby="h-video"> ═══ */
.tvd-video{ background:#fafaf9; padding:64px 0; border-top:1px solid #f0efed; }
.tvd-vsub{ margin:0 0 28px; max-width:52ch; font-size:16px; line-height:1.6; color:#57534e; }
.tvd-vgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; max-width:980px; }
.tvd-vcard{ display:block; border:1px solid #e7e5e4; border-radius:16px; background:#fff; overflow:hidden;
  text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
.tvd-vcard:hover{ border-color:#f59e0b; box-shadow:0 14px 34px -14px rgba(15,23,42,.18); transform:translateY(-2px); }
.tvd-vthumb{ display:block; position:relative; }
.tvd-vthumb img{ display:block; width:100%; height:auto; }
.tvd-vplay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.tvd-vplay span{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow:0 12px 30px -6px rgba(245,158,11,.6); transition:transform .15s; }
.tvd-vcard:hover .tvd-vplay span{ transform:scale(1.1); }
.tvd-vplay svg{ width:24px; height:24px; margin-left:3px; }
.tvd-vdur{ position:absolute; right:10px; bottom:10px; font-size:11px; font-weight:700; color:#fff;
  background:rgba(15,23,42,.82); padding:3px 9px; border-radius:7px; letter-spacing:.03em; }
.tvd-vcard b{ display:block; margin:16px 18px 6px; font-size:16.5px; font-weight:700; color:#0f172a; letter-spacing:-.01em; }
.tvd-vcard p{ margin:0 18px 18px; font-size:13.5px; line-height:1.55; color:#57534e; }
.tvd-vnext{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:26px; max-width:980px; }
.tvd-vnext-lab{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#a8a29e; margin-right:2px; }
.tvd-vpill{ display:inline-flex; align-items:center; padding:6px 14px; border:1px solid #e7e5e4; border-radius:999px;
  background:#fff; font-size:13px; font-weight:500; color:#78716c; }
.tvd-vnext-ch{ margin-left:auto; font-size:13.5px; font-weight:600; color:#b45309; text-decoration:none; }
.tvd-vnext-ch:hover{ color:#f59e0b; }