/* ── Token bridge: theme.json (--wp--*) → nomes do design system ──
   Gerado na conversão do protótipo. Estruturais herdam do theme.json;
   as cores usam os valores do escopo [data-theme="dark"] do DS, pois esta
   página é imersiva e sempre escura, independente da variation do site. */
.ev-sangria{
  --font-body:var(--wp--preset--font-family--body);
  --font-display:var(--wp--preset--font-family--display);
  --font-editorial:var(--wp--preset--font-family--editorial);
  --text-xs:var(--wp--preset--font-size--xs);--text-sm:var(--wp--preset--font-size--sm);
  --text-base:var(--wp--preset--font-size--base);--text-lg:var(--wp--preset--font-size--lg);
  --text-xl:var(--wp--preset--font-size--xl);--text-2xl:var(--wp--preset--font-size--2xl);
  --text-3xl:var(--wp--preset--font-size--3xl);--text-4xl:var(--wp--preset--font-size--4xl);
  --text-5xl:var(--wp--preset--font-size--5xl);
  --space-2:var(--wp--preset--spacing--2);--space-3:var(--wp--preset--spacing--3);
  --space-4:var(--wp--preset--spacing--4);--space-5:var(--wp--preset--spacing--5);
  --space-6:var(--wp--preset--spacing--6);--space-8:var(--wp--preset--spacing--8);
  --space-10:var(--wp--preset--spacing--10);--space-12:var(--wp--preset--spacing--12);
  --space-16:var(--wp--preset--spacing--16);--space-20:var(--wp--preset--spacing--20);
  --space-gutter:var(--wp--preset--spacing--gutter);
  --radius-md:var(--wp--custom--radius--md);--radius-lg:var(--wp--custom--radius--lg);
  --radius-card:var(--wp--custom--radius--card);--radius-pill:var(--wp--custom--radius--pill);
  --shadow-lg:var(--wp--custom--shadow--lg);--shadow-xl:var(--wp--custom--shadow--xl);
  --motion-base:var(--wp--custom--motion--duration-base);
  --motion-slow:var(--wp--custom--motion--duration-slow);
  --motion-slower:var(--wp--custom--motion--duration-slower);
  --ease-standard:var(--wp--custom--motion--ease-standard);
  --ease-out:var(--wp--custom--motion--ease-out);
  --ease-spring:var(--wp--custom--motion--ease-spring);
  --tracking-wide:var(--wp--custom--tracking--wide);
  --tracking-widest:var(--wp--custom--tracking--widest);
  --tracking-tightest:var(--wp--custom--tracking--tightest);
  --leading-tight:var(--wp--custom--line-height--tight);
  --leading-snug:var(--wp--custom--line-height--snug);
  --leading-relaxed:var(--wp--custom--line-height--relaxed);
  --weight-semibold:var(--wp--custom--weight--semibold);
  --weight-bold:var(--wp--custom--weight--bold);
  --weight-extrabold:var(--wp--custom--weight--extrabold);
  --weight-black:var(--wp--custom--weight--black);
  --gradient-brand:var(--wp--preset--gradient--brand);
  --gradient-gem-full:var(--wp--preset--gradient--gem-full);
  /* camada de cor — escopo dark do DS */
  --color-dark:#0D1117;--color-bg:#0D1117;--color-text:#F4F5FA;
  --color-text-muted:rgba(244,245,250,.72);--color-text-faint:rgba(244,245,250,.5);
  --color-white:#161C2E;--color-secondary:#2E7DDC;
  --color-pink:#FF95B0;--color-pink-text:#FF95B0;--color-green:#5CE0B0;--color-green-text:#5CE0B0;
  --color-purple:#C79BFF;--color-border:rgba(255,255,255,.1);--color-border-md:rgba(255,255,255,.16);
  --color-ghost-border:rgba(255,255,255,.2);--color-surface-elevated-border:rgba(255,255,255,.12);
  --color-surface-pink:rgba(183,28,63,.16);
}
html { scroll-behavior: smooth; }
  .ev-sangria { background: var(--color-dark); color: var(--color-text); font-family: var(--font-body); overflow-x: hidden; }
  .wrap { max-width: 1100px; margin-inline: auto; padding-inline: var(--space-gutter); }
  a { color: inherit; }

  /* progress + act nav */
  #progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--gradient-brand);
    transform-origin: 0 50%; transform: scaleX(0); z-index: 50; }
  .actbar { position: fixed; right: 1.25rem; top: 50%; transform: translateY(-50%); z-index: 40;
    display: flex; flex-direction: column; gap: .6rem; }
  .actbar a { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); transition: all var(--motion-base) var(--ease-standard); }
  .actbar a:hover { background: #fff; transform: scale(1.3); }

  /* shared type */
  .kicker { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-faint); }
  .grad { background: var(--gradient-gem-full); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .display { font-family: var(--font-display); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tightest); line-height: var(--leading-tight); }

  [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--motion-slower) var(--ease-out), transform var(--motion-slower) var(--ease-out); }
  [data-reveal].in { opacity: 1; transform: none; }

  .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: var(--weight-semibold);
    border-radius: var(--radius-pill); padding: .95rem 1.75rem; font-size: var(--text-base); cursor: pointer; border: none;
    transition: transform var(--motion-base) var(--ease-spring), box-shadow var(--motion-base) var(--ease-standard); }
  .btn:hover { transform: translateY(-2px); }
  .btn--brand { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-lg); }
  .btn--solid { background: var(--color-white); color: var(--color-text); }
  .btn--ghost { background: transparent; border: 1.5px solid var(--color-ghost-border); color: #fff; }
  .btn--red { background: var(--color-pink); color: #fff; box-shadow: 0 12px 40px rgba(183,28,63,.35); }

  /* ACT 1 — home */
  .act { min-height: 100vh; display: flex; align-items: center; position: relative; }
  #act1 { background: radial-gradient(ellipse at 70% 20%, rgba(48,118,188,.18), transparent 55%), var(--color-dark);
    padding-block: clamp(4rem, 12vh, 8rem); }
  #act1 h1 { font-size: var(--text-5xl); max-width: 16ch; margin-block: var(--space-5); text-wrap: balance; }
  #act1 .sub { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 46ch; line-height: var(--leading-relaxed); }
  .painbox { margin-top: var(--space-8); max-width: 620px; }
  .painbox label { display: block; font-size: var(--text-sm); color: var(--color-text-faint); margin-bottom: var(--space-3); }
  .painfield { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  #pain { flex: 1; min-width: 260px; background: var(--color-white); border: 1.5px solid var(--color-border-md); color: var(--color-text);
    border-radius: var(--radius-pill); padding: .95rem 1.4rem; font-family: var(--font-body); font-size: var(--text-base); }
  #pain:focus { outline: none; border-color: var(--color-secondary); }
  .scrollcue { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-size: var(--text-xs); color: var(--color-text-faint);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; animation: bob 2.4s ease-in-out infinite; pointer-events: none; }
  @keyframes bob { 50% { transform: translate(-50%, 8px); } }
  /* reserve room so the cue never collides with the painbox on short viewports */
  @media (max-height: 720px) { .scrollcue { display: none; } }

  /* ACT 2 — scrollytelling */
  #act2 { position: relative; }
  .act2head { text-align: center; padding-top: var(--space-20); }
  .act2head h2 { font-size: var(--text-4xl); }
  .act2head p { color: var(--color-text-muted); margin-top: var(--space-2); }
  .scrolly { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
  .sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); }
  .gauge { --heat: var(--color-green); border: 1px solid var(--color-border-md); border-radius: var(--radius-card);
    padding: var(--space-8); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); }
  .gauge .lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-faint); }
  #counter { font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1; color: var(--heat); transition: color var(--motion-slow) var(--ease-standard); }
  .gauge[data-heat="hot"] #counter { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { text-shadow: 0 0 30px var(--heat); transform: scale(1.02); } }
  .gauge svg { width: 100%; height: 90px; margin-top: var(--space-4); }
  .sim { display: grid; gap: var(--space-4); }
  .sim .field { display: grid; gap: .35rem; }
  .sim .field .row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-text-muted); }
  .sim output { font-family: var(--font-display); font-weight: var(--weight-bold); color: #fff; }
  .sim input[type=range] { width: 100%; accent-color: var(--color-secondary); }

  .steps { display: flex; flex-direction: column; }
  .step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity var(--motion-slow) var(--ease-standard); }
  .step.is-active { opacity: 1; }
  .step .n { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-sm); color: var(--color-secondary); }
  .step h3 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-3xl); margin-block: var(--space-3); line-height: var(--leading-snug); }
  .step p { color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); max-width: 40ch; }
  .verdict { border: 1.5px solid var(--color-pink); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-5); background: var(--color-surface-pink); }
  .verdict .tag { color: var(--color-pink-text); font-weight: var(--weight-extrabold); }

  /* ACT 3 — barreira */
  #act3 { background: radial-gradient(ellipse at 30% 30%, rgba(105,44,144,.18), transparent 55%), var(--color-dark); padding-block: var(--space-20); }
  .gate { max-width: 560px; margin-inline: auto; text-align: center; }
  .gate h2 { font-size: var(--text-4xl); margin-block: var(--space-4); }
  .gate .copy { color: var(--color-text-muted); line-height: var(--leading-relaxed); }
  .card-form { margin-top: var(--space-8); background: var(--color-white); border: 1px solid var(--color-surface-elevated-border);
    border-radius: var(--radius-card); padding: var(--space-8); text-align: left; box-shadow: var(--shadow-xl); }
  .card-form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .card-form label { font-size: var(--text-sm); color: var(--color-text-muted); display: grid; gap: .35rem; }
  .card-form input { background: var(--color-bg); border: 1.5px solid var(--color-border-md); color: var(--color-text);
    border-radius: var(--radius-md); padding: .75rem .9rem; font-family: var(--font-body); font-size: var(--text-base); }
  .card-form input:focus { outline: none; border-color: var(--color-secondary); }
  .card-form .full { grid-column: 1 / -1; }
  .card-form .choice { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .55rem; }
  .card-form .choice .q { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-semibold); }
  .radios { display: flex; gap: 1.25rem; flex-wrap: wrap; }
  .radios label, .consent { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); color: var(--color-text); cursor: pointer; }
  .radios input, .consent input { accent-color: var(--color-secondary); width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
  .card-form .consent { display: flex; grid-column: 1 / -1; align-items: flex-start; gap: .5rem; line-height: var(--leading-relaxed); }
  #engine { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); color: var(--color-text-muted); }
  #engine[hidden] { display: none; }
  .spinner { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--color-secondary), var(--color-purple), var(--color-pink), var(--color-secondary));
    -webkit-mask: radial-gradient(circle 11px, transparent 98%, #000); mask: radial-gradient(circle 11px, transparent 98%, #000); animation: spin .9s linear infinite; }
  @keyframes spin { to { transform: rotate(1turn); } }
  #raiox-done { display: none; align-items: center; gap: var(--space-3); margin-top: var(--space-5);
    color: var(--color-green-text); font-weight: var(--weight-semibold); }
  #raiox-done:not([hidden]) { display: flex; }
  .lgpd { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-5); line-height: var(--leading-relaxed); }

  /* ACT 4 — sucesso */
  #act4 { padding-block: var(--space-20); }
  .success-top { text-align: center; max-width: 620px; margin-inline: auto; }
  .check { width: 76px; height: 76px; border-radius: 50%; background: var(--color-green); color: #06231a; display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; margin: 0 auto var(--space-5); box-shadow: 0 0 0 10px rgba(0,168,104,.15); }
  .success-top h2 { font-size: var(--text-4xl); }
  .success-top p { color: var(--color-text-muted); margin-top: var(--space-3); line-height: var(--leading-relaxed); }
  .cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-16); }
  .case { border: 1px solid var(--color-border-md); border-radius: var(--radius-card); padding: var(--space-8);
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,0)); }
  .case .big { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-4xl); }
  .case h3 { font-family: var(--font-display); margin-block: var(--space-2); }
  .case p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
  .closing { text-align: center; margin-top: var(--space-16); color: var(--color-text-muted); font-family: var(--font-editorial); font-style: italic; font-size: var(--text-xl); }

  @media (max-width: 820px) {
    .scrolly { grid-template-columns: 1fr; }
    .sticky { position: static; height: auto; margin-bottom: var(--space-8); }
    .step { min-height: auto; margin-bottom: var(--space-12); opacity: 1; }
    .card-form .grid, .cases { grid-template-columns: 1fr; }
    .actbar { display: none; }
  }