/* ============================================================
   ESTILO.CSS — Landing Black Friday · Y Digital Company
   Parte 1: Design System (fontes, tokens, base, componentes)
   Parte 2: página, microinterações e motion
   ============================================================ */

/* ============================================================
   Y DIGITAL COMPANY — DESIGN SYSTEM (extraído do export original)
   Ordem: fontes → tokens (cor, tipo, espaço, efeitos) → base → componentes.
   Não editar valores de marca aqui; ajustes de página ficam em landing.css.
   ============================================================ */

/* ---------- Poppins (self-hosted, latin + latin-ext) ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/poppins-300-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/poppins-300-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/poppins-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/poppins-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/poppins-500-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/poppins-500-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/poppins-600-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/poppins-600-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/poppins-700-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/poppins-700-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- COLOR TOKENS ---------- */
:root {
  --ydc-blue:  #3242D5;
  --ydc-ink:   #0C0D0E;
  --ydc-mist:  #F8F8F8;
  --ydc-white: #FFFFFF;

  --blue-50:  #EEF0FC;
  --blue-100: #DCE0F8;
  --blue-200: #BAC2F1;
  --blue-300: #909BE8;
  --blue-400: #5F6EDE;
  --blue-500: #3242D5;
  --blue-600: #2A37B5;
  --blue-700: #232E96;
  --blue-800: #1B2370;
  --blue-900: #141A4F;

  --ink-900: #0C0D0E;
  --ink-800: #161719;
  --ink-700: #212327;
  --ink-600: #34373D;
  --ink-500: #4B4F56;

  --gray-50:  #F8F8F8;
  --gray-100: #F1F2F4;
  --gray-200: #E4E6EA;
  --gray-300: #D5D8DC;
  --gray-400: #ABB0B8;
  --gray-500: #80858F;
  --gray-600: #5C616B;
  --gray-700: #3F434B;
  --white:    #FFFFFF;

  --green-500: #1FA463;  --green-50: #E7F6EF;
  --red-500:   #E5484D;  --red-50:   #FCEBEC;
  --amber-500: #F0A12E;  --amber-50: #FDF3E3;

  --surface-page:    var(--white);
  --surface-subtle:  var(--gray-50);
  --surface-card:    var(--white);
  --surface-card-dark: var(--ink-800);
  --surface-inverse: var(--ink-900);
  --surface-brand:   var(--blue-500);

  --text-strong: var(--ink-900);
  --text-body:   #2A2D33;
  --text-muted:  var(--gray-600);
  --text-subtle: var(--gray-500);
  --text-brand:  var(--blue-500);
  --text-on-dark:       var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.64);
  --text-on-brand:      var(--white);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-inverse: rgba(255, 255, 255, 0.12);

  --primary:        var(--blue-500);
  --primary-hover:  var(--blue-600);
  --primary-active: var(--blue-700);
  --primary-subtle: var(--blue-50);
  --on-primary:     var(--white);
  --ring:           rgba(50, 66, 213, 0.35);

  --success: var(--green-500);  --success-subtle: var(--green-50);
  --danger:  var(--red-500);    --danger-subtle:  var(--red-50);
  --warning: var(--amber-500);  --warning-subtle: var(--amber-50);
}

/* ---------- TYPOGRAPHY TOKENS ---------- */
:root {
  --font-sans:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --fs-display: 64px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      24px;
  --fs-lg:      20px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-caption: 12px;

  --leading-tight:   1.1;
  --leading-heading: 1.2;
  --leading-snug:    1.35;
  --leading-body:    1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.12em;
}

/* ---------- SPACING TOKENS ---------- */
:root {
  --grid-base: 8px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-section: 96px;
  --container-max:    1200px;
  --container-narrow: 760px;
  --gutter:           24px;
}

/* ---------- EFFECTS TOKENS ---------- */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  --shadow-xs:         0 1px 2px rgba(12, 13, 14, 0.06);
  --shadow-sm:         0 1px 3px rgba(12, 13, 14, 0.08), 0 1px 2px rgba(12, 13, 14, 0.04);
  --shadow-md:         0 4px 12px rgba(12, 13, 14, 0.08);
  --shadow-lg:         0 8px 16px rgba(12, 13, 14, 0.16);
  --shadow-card:       0 2px 8px rgba(12, 13, 14, 0.06);
  --shadow-card-hover: 0 12px 24px rgba(12, 13, 14, 0.12);
  --shadow-brand:      0 8px 24px rgba(50, 66, 213, 0.28);
  --shadow-focus:      0 0 0 3px var(--ring);

  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-fast:   100ms;
  --dur-base:   150ms;
  --dur-slow:   250ms;
  --dur-reveal: 300ms;
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--blue-200); color: var(--ink-900); }

/* ---------- COMPONENT: Badge ---------- */
.ydc-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-sans);font-weight:var(--weight-medium);
  border-radius:var(--radius-pill);line-height:1;white-space:nowrap;
  border:1px solid transparent;
}
.ydc-badge--sm{padding:4px 10px;font-size:var(--fs-caption);}
.ydc-badge--md{padding:6px 12px;font-size:var(--fs-sm);}
.ydc-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.ydc-badge--brand{background:var(--primary-subtle);color:var(--blue-700);}

/* ---------- COMPONENT: Button ---------- */
.ydc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:var(--weight-semibold);
  border:1.5px solid transparent;border-radius:var(--radius-md);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background-color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.ydc-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.ydc-btn:active{transform:scale(0.97);}
.ydc-btn--full{width:100%;}
.ydc-btn--sm{height:36px;padding:0 16px;font-size:var(--fs-sm);}
.ydc-btn--md{height:44px;padding:0 24px;font-size:var(--fs-body);}
.ydc-btn--lg{height:52px;padding:0 32px;font-size:var(--fs-body);}
.ydc-btn--primary{background:var(--primary);color:var(--on-primary);}
.ydc-btn--primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-brand);}
.ydc-btn--primary:active{background:var(--primary-active);}

/* ---------- COMPONENT: Card ---------- */
.ydc-card{
  border-radius:var(--radius-lg);
  border:1px solid var(--border-subtle);
  background:var(--surface-card);
  box-shadow:var(--shadow-card);
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.ydc-card--pad-lg{padding:var(--space-xl);}
.ydc-card--subtle{background:var(--surface-subtle);border-color:var(--border-subtle);box-shadow:none;}
.ydc-card--dark{background:var(--surface-card-dark);border-color:var(--border-inverse);color:var(--text-on-dark);box-shadow:none;}

/* ---------- COMPONENT: Accordion ---------- */
.ydc-acc{font-family:var(--font-sans);border-top:1px solid var(--border-subtle);}
.ydc-acc__item{border-bottom:1px solid var(--border-subtle);}
.ydc-acc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 4px;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;
  font-size:var(--fs-lg);font-weight:var(--weight-medium);color:var(--text-strong);
  transition:color var(--dur-base) var(--ease-out);}
.ydc-acc__head:hover{color:var(--primary);}
.ydc-acc__head:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:6px;}
.ydc-acc__icon{flex:none;color:var(--text-muted);transition:transform var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);}
.ydc-acc__icon svg{display:block;width:20px;height:20px;}
.ydc-acc__item--open .ydc-acc__icon{transform:rotate(180deg);color:var(--primary);}
.ydc-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out);}
.ydc-acc__item--open .ydc-acc__panel{grid-template-rows:1fr;}
.ydc-acc__panel > div{overflow:hidden;}
.ydc-acc__body{padding:0 4px 22px;color:var(--text-muted);font-size:var(--fs-body);line-height:var(--leading-body);}


/* ============================================================
   LANDING BLACK FRIDAY — página + motion design
   Regras de ouro:
   • Só transform/opacity nas animações (sem layout thrash).
   • Estados ocultos existem APENAS sob html.motion (setado por JS
     quando não há prefers-reduced-motion). Sem JS = tudo visível.
   • Nada infinito. Cada revelação roda uma única vez por visita.
   ============================================================ */

:root {
  /* Curvas e tempos do motion (complementam os tokens do DS) */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);   /* saída longa e suave */
  --ease-soft:    cubic-bezier(0.25, 0.8, 0.25, 1);
  --dur-ui:       220ms;                             /* microinterações */
  --dur-enter:    650ms;                             /* revelações */
  --rise:         24px;                              /* deslocamento vertical */
}

/* ---------- Base da página (do <helmet> original) ---------- */
html { scroll-behavior: smooth; }
body { margin: 0; background: #0C0D0E; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; }

/* Correção: no original, `a:hover` (0,1,1) sobrescrevia a cor do botão
   (0,1,0) e o texto do CTA ficava azul sobre azul no hover. */
a.ydc-btn--primary:hover,
a.ydc-btn--primary:focus-visible { color: var(--on-primary); }

/* ---------- Responsivo: CTA do hero (desktop × mobile, quebra em 767px) ---------- */
.only-mobile { display: none; }
@media (max-width: 767px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: block; }
  .site-footer { padding-bottom: 104px !important; }
}

/* ============================================================
   MICROINTERAÇÕES
   ============================================================ */

/* CTAs de conversão: elevação leve + feedback ao toque */
.cta {
  transition:
    background-color var(--dur-ui) var(--ease-soft),
    box-shadow var(--dur-ui) var(--ease-soft),
    color var(--dur-ui) var(--ease-soft),
    transform var(--dur-ui) var(--ease-premium);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { transform: translateY(-2px); }
}
.cta:active { transform: translateY(0) scale(0.98); transition-duration: 90ms; }
/* Foco visível também sobre fundos escuros */
.cta:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
  box-shadow: var(--shadow-brand);
}

/* Cards de benefícios */
.benefit-card { transition: transform var(--dur-ui) var(--ease-premium), box-shadow var(--dur-ui) var(--ease-soft), border-color var(--dur-ui) var(--ease-soft), background-color var(--dur-ui) var(--ease-soft); }
.benefit-card .benefit-icon { transition: background-color var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft), transform var(--dur-ui) var(--ease-premium); }
@media (hover: hover) and (pointer: fine) {
  .benefit-card:hover {
    transform: translateY(-4px);
    background-color: var(--white);
    border-color: var(--blue-100);
    box-shadow: var(--shadow-card-hover);
  }
  .benefit-card:hover .benefit-icon { background: var(--primary); color: var(--white); transform: scale(1.04); }
}

/* Cards de bônus */
.bonus-card { transition: transform var(--dur-ui) var(--ease-premium), border-color var(--dur-ui) var(--ease-soft), box-shadow var(--dur-ui) var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .bonus-card:hover {
    transform: translateY(-3px);
    border-color: rgba(144, 155, 232, 0.32);
    box-shadow: var(--shadow-lg);
  }
}

/* Botão de play do vídeo */
.video-play-btn .play-disc { transition: transform var(--dur-ui) var(--ease-premium), box-shadow var(--dur-ui) var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .video-play-btn:hover .play-disc { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(50,66,213,0.22) !important; }
}
.video-play-btn:active .play-disc { transform: scale(0.97); }
.video-play-btn:focus-visible { outline: 2px solid var(--blue-300); outline-offset: -4px; }
.video-thumb { transition: opacity 320ms var(--ease-soft); }
.video-thumb.is-leaving { opacity: 0; pointer-events: none; }
.video-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,13,14,0) 48%, rgba(12,13,14,0.55) 72%, rgba(12,13,14,0.88) 100%);
}

/* FAQ: abertura suave + conteúdo que assenta */
.ydc-acc__panel { transition: grid-template-rows 360ms var(--ease-premium); }
.ydc-acc__icon { transition: transform 300ms var(--ease-premium), color var(--dur-ui) var(--ease-soft); }
.ydc-acc__body { transition: opacity 260ms var(--ease-soft), transform 360ms var(--ease-premium); }
.ydc-acc__item:not(.ydc-acc__item--open) .ydc-acc__body { opacity: 0; transform: translateY(-6px); }
.ydc-acc__item--open .ydc-acc__body { transition-delay: 60ms; }
/* Sem JS: todas as respostas abertas (conteúdo sempre acessível) */
html:not(.js) .ydc-acc__panel { grid-template-rows: 1fr; }
html:not(.js) .ydc-acc__body { opacity: 1; transform: none; }

/* Indicador de progresso de leitura */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  pointer-events: none; background: transparent;
}
.read-progress > span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* Barra fixa mobile: entra/sai deslizando (antes: montada/desmontada) */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta {
    display: flex;
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 380ms var(--ease-premium), visibility 0s linear 380ms;
  }
  .sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 420ms var(--ease-premium), visibility 0s;
  }
}

/* ============================================================
   PRIMEIRA DOBRA — sequência de entrada (CSS puro, sem esperar JS)
   Linha do tempo (ms): header 0 · badge 80 · H1 140→ (linhas a cada 90)
   · texto 380 · preço 480 · selos 560 · CTA 640 · vídeo 260
   Tudo concluído em ~1,2 s; o CTA é clicável desde o primeiro frame.
   ============================================================ */
@keyframes ydc-rise   { from { opacity: 0; transform: translate3d(0, var(--rise), 0); } to { opacity: 1; transform: none; } }
@keyframes ydc-rise-s { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes ydc-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ydc-pop    { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes ydc-slide-x{ from { opacity: 0; transform: translate3d(32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes ydc-ripple { 0% { box-shadow: 0 0 0 10px rgba(50,66,213,0.18), 0 0 0 10px rgba(50,66,213,0.35); } 100% { box-shadow: 0 0 0 10px rgba(50,66,213,0.18), 0 0 0 34px rgba(50,66,213,0); } }

.motion .hero-glow    { animation: ydc-fade 1400ms var(--ease-soft) both; }
.motion .hero-header  { animation: ydc-rise-s 400ms var(--ease-premium) 0ms both; }
.motion .hero-badge   { animation: ydc-rise-s 450ms var(--ease-premium) 80ms both; }
.motion .hero-lead    { animation: ydc-rise 600ms var(--ease-premium) 380ms both; }
.motion .hero-price   { transform-origin: 0 100%; animation: ydc-pop 600ms var(--ease-premium) 480ms both; }
.motion .hero-perks   { animation: ydc-rise 600ms var(--ease-premium) 560ms both; }
.motion .hero-cta     { animation: ydc-rise 520ms var(--ease-premium) 640ms both; }
.motion .hero-video   { animation: ydc-slide-x 800ms var(--ease-premium) 260ms both; }
.motion .hero-cta-m   { animation: ydc-rise 520ms var(--ease-premium) 520ms both; }
.motion .play-disc    { animation: ydc-ripple 1100ms var(--ease-soft) 1100ms 1 both; }
@media (max-width: 767px) {
  .motion .hero-video { animation-name: ydc-rise; }
}

/* H1 revelado por linhas. O JS (inline, logo após o H1) quebra em palavras,
   mede as linhas após a fonte carregar e aplica --l (índice da linha). */
.h1-w { display: inline-block; }
.motion .hero-h1:not(.h1-split) { animation: ydc-rise 700ms var(--ease-premium) 140ms both; }
.motion .hero-h1.h1-split .h1-w { opacity: 0; transform: translate3d(0, 20px, 0); }
.motion .hero-h1.h1-go .h1-w {
  animation: ydc-rise 700ms var(--ease-premium) both;
  animation-delay: calc(140ms + var(--l, 0) * var(--line-step, 90ms));
  --rise: 20px;
}
@media (max-width: 767px) { .hero-h1 { --line-step: 70ms; } }

/* ============================================================
   REVELAÇÃO NO SCROLL (IntersectionObserver em script.js)
   data-reveal            → sobe 24px + fade
   data-reveal="fade"     → só fade
   data-reveal="scale"    → fade + scale .96 → 1
   data-reveal="line"     → desenha a linha divisória (border-top)
   --d = atraso calculado (stagger) pelo JS
   ============================================================ */
.motion [data-reveal] {
  transition:
    opacity var(--dur-enter) var(--ease-soft),
    transform var(--dur-enter) var(--ease-premium);
  transition-delay: var(--d, 0ms);
}
.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, var(--rise), 0); }
.motion [data-reveal="fade"]:not(.is-in) { transform: none; }
.motion [data-reveal="scale"]:not(.is-in) { transform: scale(0.96); }
.motion [data-reveal="scale"] { transform-origin: 0 100%; }

/* Linhas divisórias que "se desenham" */
.motion [data-reveal="line"] { position: relative; border-top-color: transparent !important; opacity: 1 !important; transform: none !important; }
.motion [data-reveal="line"]::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--line-color, var(--border-subtle));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1000ms var(--ease-premium);
  transition-delay: var(--d, 0ms);
}
.motion [data-reveal="line"].is-in::before { transform: scaleX(1); }

/* Contador (+250) sem pular a largura */
.count-up { display: inline-block; }

/* Impressão / salvar como PDF: tudo visível, sem estados intermediários */
@media print {
  .motion [data-reveal], .motion .h1-w, .motion [class*="hero-"] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .read-progress, .sticky-cta { display: none !important; }
}

/* ============================================================
   MOVIMENTO REDUZIDO — conteúdo imediato, transições mínimas
   (html.motion nunca é aplicado nesse caso; aqui zeramos o resto)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .cta:hover, .benefit-card:hover, .bonus-card:hover { transform: none !important; }
}