/* Aliases curtos sobre os tokens oficiais do kit (assets/tokens.css) */
:root{
  --vinho:var(--csj-vinho); --vinho-50:var(--csj-vinho-50); --vinho-100:var(--csj-vinho-100); --vinho-200:var(--csj-vinho-200); --vinho-400:var(--csj-vinho-400); --vinho-700:var(--csj-vinho-700); --vinho-800:var(--csj-vinho-800);
  --laranja:var(--csj-laranja); --laranja-a11y:var(--csj-laranja-a11y); --ocre:var(--csj-ocre); --ouro:var(--csj-ouro);
  --tinta:var(--csj-azul-noite); --ardosia:var(--csj-ardosia); --tinta-73:var(--csj-texto-meta);
  --branco:var(--csj-branco); --cinza-50:var(--csj-cinza-50); --borda:var(--csj-borda); --tag:var(--csj-tag); --erro:#B3261E;
  --narrow:var(--container-narrow); --form:var(--container-form);
  --spring:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--branco);color:var(--ardosia);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
a{color:inherit}
:focus-visible{outline:2px solid var(--vinho);outline-offset:3px}
h1,h2,h3{font-family:var(--font-display);color:var(--tinta);margin:0;text-wrap:balance}
h1{font-size:clamp(34px,5vw,52px);line-height:1.2;font-weight:700}
h2{font-size:clamp(26px,3.5vw,34px);line-height:1.35;font-weight:700}
h3{font-size:20px;line-height:1.4;font-weight:600}
p{margin:0}
.small{font-size:14px;line-height:1.5}
.skip{position:absolute;left:-9999px;top:8px;z-index:30;background:var(--vinho);color:var(--branco);padding:8px 16px;border-radius:var(--radius-pill)}
.skip:focus{left:16px}

/* ===== barra de progresso (scroll timeline) ===== */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:40;background:linear-gradient(90deg,var(--vinho),var(--laranja));transform-origin:0 50%;transform:scaleX(0)}

/* ===== header ===== */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--cinza-50)}
.header .wrap{display:flex;align-items:center;gap:24px;min-height:76px}
.brand{text-decoration:none;display:flex;align-items:center;gap:14px;line-height:1.1}
.brand img{height:52px;width:auto;display:block}
.brand .camp{font-family:var(--font-display);font-size:12px;color:var(--vinho);font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-left:1px solid var(--vinho-200);padding-left:14px;line-height:1.3}
.brand .camp small{display:block;font-family:var(--font-body);font-weight:500;font-size:10px;letter-spacing:.06em;color:var(--ardosia)}
.nav-links{display:flex;gap:2px;margin-inline:auto}
.nav-links a{text-decoration:none;padding:8px 14px;border-radius:var(--radius-pill);color:var(--ardosia);font-weight:500;transition:background var(--dur) var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="true"]{background:var(--vinho-50);color:var(--vinho)}
.nav-help{display:flex;align-items:center;gap:6px;text-decoration:none;font-size:14px;color:var(--ardosia)}
.nav-help b{font-family:var(--font-display);color:var(--vinho);font-weight:700;font-size:16px}

/* ===== botões ===== */
.btn{font-family:var(--font-body);font-weight:500;font-size:16px;background:var(--vinho);color:var(--branco);border:0;border-radius:var(--radius-pill);height:44px;padding:0 28px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:background var(--dur) var(--ease),transform 150ms var(--spring),box-shadow 150ms var(--spring)}
.btn:hover{background:var(--vinho-700)}
.btn[disabled]{opacity:.6;cursor:progress}
/* Pop Button (padrão spell-ui): relevo que afunda no clique */
.btn-pop{background:var(--laranja);color:var(--tinta);font-family:var(--font-display);font-weight:600;height:52px;padding:0 32px;box-shadow:0 5px 0 var(--laranja-a11y),0 8px 18px rgba(0,0,0,.18);transform:translateY(-2px)}
.btn-pop:hover{background:#F3A63E;transform:translateY(-3px);box-shadow:0 6px 0 var(--laranja-a11y),0 12px 22px rgba(0,0,0,.2)}
.btn-pop:active{transform:translateY(2px);box-shadow:0 1px 0 var(--laranja-a11y),0 2px 6px rgba(0,0,0,.15)}
.btn-ghost{background:transparent;color:var(--branco);border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{background:var(--branco);color:var(--vinho);border:1.5px solid var(--vinho-200)}
.btn-outline:hover{background:var(--vinho-50)}

/* ===== hero ===== */
.hero{background:var(--vinho);color:var(--branco);padding-block:var(--section-y);position:relative;overflow:clip;isolation:isolate}
.rays{position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;opacity:.9;
  background:
    radial-gradient(60% 50% at 78% 20%,rgba(255,204,41,.18),transparent 70%),
    radial-gradient(50% 40% at 15% 90%,rgba(235,149,35,.14),transparent 70%),
    conic-gradient(from 200deg at 80% 10%,transparent 0 12deg,rgba(255,255,255,.06) 14deg 16deg,transparent 18deg 30deg,rgba(255,255,255,.05) 32deg 33deg,transparent 35deg 52deg,rgba(255,255,255,.07) 54deg 57deg,transparent 59deg 360deg)}
.hero-wave{position:absolute;right:-6%;bottom:-8%;width:min(520px,60vw);z-index:-1;opacity:.35;pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;position:relative}
.hero-eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ouro);display:inline-flex;align-items:center;gap:10px}
.hero-eyebrow::before{content:"";width:28px;height:2px;background:var(--ouro)}
.hero h1{color:var(--branco);margin-top:18px}
.hero h1 .w{display:inline-block}
.hero .lead{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2.3vw,26px);line-height:1.4;color:#F2F2F2;margin-top:18px;max-width:32ch}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;align-items:center}

/* ===== card do teste + Animated Checkbox ===== */
.check{background:var(--branco);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:24px;display:grid;gap:12px;color:var(--ardosia)}
.check h2{font-size:24px}
.check fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;background:var(--vinho-50);border-radius:var(--radius-md);padding:14px 16px;cursor:pointer;border:1px solid transparent;transition:border-color var(--dur) var(--ease),transform 200ms var(--spring)}
.opt:hover{transform:translateX(3px)}
.opt:has(input:checked){border-color:var(--vinho-200)}
.opt input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;border-radius:var(--radius-sm);border:1.5px solid var(--borda);margin:2px 0 0;display:grid;place-items:center;background:var(--branco);cursor:pointer;transition:background 200ms,border-color 200ms}
.opt input:checked{background:var(--vinho);border-color:var(--vinho);animation:pop 260ms var(--spring)}
.opt svg{position:absolute;width:22px;height:22px;pointer-events:none;stroke:var(--branco);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset 260ms var(--spring) 60ms}
.opt .box{position:relative;flex:none;width:22px;height:22px;display:grid;place-items:center}
.opt input:checked ~ svg{stroke-dashoffset:0}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.opt b{font-weight:600;color:var(--tinta);display:block}
.opt span{font-size:14px;line-height:1.5}
.verdict{border-radius:var(--radius-md);padding:14px 16px;font-weight:600;color:var(--tinta);background:var(--cinza-50);min-height:52px;display:flex;align-items:center;gap:10px;transition:background var(--dur) var(--ease)}
.verdict[data-level="3"]{background:var(--laranja)}
.verdict a{color:inherit}
.check .small{color:var(--tinta-73)}

/* ===== seções ===== */
section{padding-block:var(--section-y);position:relative}
.sec-head{text-align:center;max-width:var(--narrow);margin:0 auto 48px}
.sec-head p{margin-top:12px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--branco);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:32px 28px;display:flex;flex-direction:column;gap:14px;transition:box-shadow var(--dur) var(--ease)}
.card:hover{box-shadow:var(--shadow-card-hover)}
.icon{width:64px;height:64px;border-radius:50%;background:var(--vinho-50);display:grid;place-items:center;color:var(--vinho)}
.icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card ul{margin:auto 0 0;padding:14px 0 0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--cinza-50)}
.card li{font-size:14px;background:var(--tag);border-radius:5px;padding:4px 10px;color:var(--tinta)}
.alt{background:var(--cinza-50)}

/* Tilt Card com spotlight (padrão spell-ui) */
.tilt{transform-style:preserve-3d;transform:perspective(1200px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) scale3d(var(--s,1),var(--s,1),1);transition:transform 200ms var(--ease),box-shadow var(--dur) var(--ease);position:relative;overflow:hidden}
.tilt::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(119,22,14,.10),transparent 60%);opacity:var(--glow,0);transition:opacity var(--dur) var(--ease)}

/* Highlighted Text (padrão spell-ui): fundo desliza por trás do texto */
.hl{background:linear-gradient(var(--hl-c,var(--laranja)),var(--hl-c,var(--laranja))) no-repeat 0 100%/0% 100%;padding:0 .12em;margin:0 -.12em;border-radius:4px;transition:background-size 700ms var(--spring) 150ms;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.in .hl,.hl.in{background-size:100% 100%}

/* ===== números ===== */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.num{padding:32px 28px;border-radius:var(--radius-md);background:var(--branco);box-shadow:var(--shadow-card);display:grid;gap:8px;position:relative;overflow:hidden}
.num::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--vinho)}
.num .k{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5vw,56px);line-height:1;color:var(--vinho);font-variant-numeric:tabular-nums}
.num .k small{font-size:.5em;color:var(--tinta)}
.num b{color:var(--tinta);font-weight:600}
.num .src{font-size:13px;color:var(--tinta-73)}
.bar{height:8px;border-radius:var(--radius-pill);background:var(--vinho-100);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,var(--vinho),var(--laranja));border-radius:inherit;transition:width 1.4s var(--spring) 200ms}
.in .bar i{width:var(--to)}

/* ===== como agir ===== */
.zig{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,80px);align-items:start}
.tabs{display:inline-flex;gap:4px;background:var(--branco);border-radius:var(--radius-pill);padding:4px;box-shadow:var(--shadow-card);margin:24px 0 8px;flex-wrap:wrap}
.tabs button{font-family:var(--font-body);font-size:14px;font-weight:500;border:0;background:transparent;color:var(--ardosia);padding:8px 18px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--dur),color var(--dur)}
.tabs button[aria-selected="true"]{background:var(--vinho);color:var(--branco)}
.steps{list-style:none;margin:0;padding:0;display:grid}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--vinho-200)}
.steps .n{width:36px;height:36px;border-radius:50%;background:var(--vinho);color:var(--branco);font-family:var(--font-display);font-weight:600;font-size:14px;display:grid;place-items:center}
.steps p{margin-top:4px;max-width:56ch}
.help{position:sticky;top:100px;background:var(--branco);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:24px;display:grid;gap:12px}
.help h3{font-size:22px}
.tel{display:flex;gap:16px;align-items:center;padding:14px;border-radius:var(--radius-md);background:var(--vinho-50);text-decoration:none;transition:transform 200ms var(--spring)}
.tel:hover{transform:translateX(3px)}
.tel .num{font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1;color:var(--vinho);min-width:3ch;font-variant-numeric:tabular-nums;padding:0;background:none;box-shadow:none;display:block;overflow:visible}
.tel .num::before{display:none}
.tel b{font-weight:600;color:var(--tinta);display:block}
.tel span{font-size:14px}

/* ===== compromisso (scrollytelling) ===== */
.pledge{background:var(--tinta);color:var(--branco);overflow:clip}
.pledge h2,.pledge h3{color:var(--branco)}
.pledge .sec-head p{color:#D7D6E6}
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px)}
.story-pin{position:sticky;top:110px;align-self:start}
.story-pin .big{font-family:var(--font-display);font-weight:700;font-size:clamp(56px,9vw,120px);line-height:.95;color:var(--laranja);font-variant-numeric:tabular-nums;transition:opacity var(--dur)}
.story-pin .big small{display:block;font-size:clamp(18px,2vw,24px);color:var(--branco);font-weight:600;margin-top:10px}
.gestos{display:grid;gap:clamp(24px,5vh,56px);padding-block:10vh}
.gesto{padding:28px;border-radius:var(--radius-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:grid;gap:12px;transition:background var(--dur),border-color var(--dur)}
.gesto.active{background:rgba(255,255,255,.12);border-color:var(--laranja)}
.gesto .tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--laranja)}
.gesto h3{font-size:clamp(22px,2.6vw,30px)}
.gesto p{color:#D7D6E6;max-width:48ch}
.gesto label{display:flex;gap:12px;align-items:center;cursor:pointer;font-weight:500;margin-top:6px}
.gesto .box{position:relative;width:24px;height:24px;flex:none}
.gesto input{appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:24px;height:24px;border-radius:var(--radius-sm);border:1.5px solid rgba(255,255,255,.6);background:transparent;cursor:pointer;margin:0;transition:background 200ms,border-color 200ms}
.gesto input:checked{background:var(--laranja);border-color:var(--laranja);animation:pop 260ms var(--spring)}
.gesto svg{position:absolute;inset:0;width:24px;height:24px;pointer-events:none;stroke:var(--tinta);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset 260ms var(--spring) 60ms}
.gesto input:checked ~ svg{stroke-dashoffset:0}
.pledge-out{margin-top:32px;background:var(--branco);color:var(--ardosia);border-radius:var(--radius-lg);padding:24px;display:grid;gap:14px;box-shadow:var(--shadow-raised)}
.pledge-out h3{color:var(--tinta);font-size:18px}
.pledge-out blockquote{margin:0;font-family:var(--font-display);font-size:18px;line-height:1.5;color:var(--tinta);border-left:4px solid var(--laranja);padding-left:14px}
.pledge-out .row{display:flex;gap:10px;flex-wrap:wrap}
.copied{font-size:14px;color:var(--vinho);font-weight:600}

/* Marquee (padrão spell-ui) */
.marquee{overflow:hidden;margin-top:56px;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;width:max-content;gap:0;animation:marquee 32s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2.4vw,26px);padding:0 28px;color:var(--branco);white-space:nowrap;display:inline-flex;align-items:center;gap:28px}
.marquee span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--laranja)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== lei ===== */
.lei{background:var(--vinho);color:var(--branco);padding-bottom:calc(var(--section-y) + 40px)}
.lei h2{color:var(--branco)}
.lei .sec-head p{color:#F2F2F2}
.lei::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:60px;background:var(--branco);clip-path:ellipse(60% 100% at 50% 100%)}
.leis{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1}
.leis .card{text-align:center;align-items:center}
.leis .k{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4vw,44px);line-height:1.1;color:var(--vinho);font-variant-numeric:tabular-nums}
.leis p{font-size:15px}
.leis a{font-size:13px;color:var(--vinho);font-weight:600}

/* ===== denúncia ===== */
.report{max-width:var(--form);margin-inline:auto}
.promise{list-style:none;margin:24px 0 32px;padding:0;display:grid;gap:10px}
.promise li{display:flex;gap:12px;align-items:flex-start}
.promise li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--vinho-50);margin-top:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%2377160E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form{display:grid;gap:20px}
.form fieldset{border:0;margin:0;padding:0}
.field{display:grid;gap:6px}
.field > label,.field > legend{font-size:16px;color:var(--ardosia);padding:0}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--tinta);background:var(--branco);border:1px solid var(--borda);border-radius:var(--radius-sm);height:48px;padding:0 20px;width:100%;min-width:0;transition:border-color 150ms,box-shadow 150ms}
.field textarea{height:auto;min-height:160px;padding:12px 20px;resize:vertical;line-height:1.6}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--ardosia) 50%),linear-gradient(135deg,var(--ardosia) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--vinho);outline-offset:0;border-color:var(--vinho)}
.field :user-invalid{border-color:var(--erro)}
.err{display:none;color:var(--erro);font-size:14px;font-weight:500}
.field:has(:user-invalid) .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-block;border-radius:var(--radius-pill);padding:8px 16px;background:var(--branco);font-size:14px;font-weight:500;border:1px solid var(--borda);color:var(--ardosia);transition:background var(--dur),color var(--dur),transform 150ms var(--spring)}
.chip:hover span{transform:translateY(-1px)}
.chip input:checked + span{background:var(--vinho);color:var(--branco);border-color:var(--vinho)}
.chip input:focus-visible + span{outline:2px solid var(--vinho);outline-offset:2px}
.count{justify-self:end;font-size:14px;color:var(--tinta-73);font-variant-numeric:tabular-nums}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%;height:48px;border-radius:var(--radius-sm)}
.form .small{text-align:center;color:var(--tinta-73)}
.status{border-radius:var(--radius-md);padding:16px 20px;display:grid;gap:6px}
.status.ok{background:var(--vinho-50);border:1px solid var(--vinho-200)}
.status.fail{background:#FBEDEC;border:1px solid #F0C4C0}
.status b{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--tinta)}
.status code{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:.06em;color:var(--vinho)}

/* ===== citação / referências / rodapé ===== */
.quote{background:linear-gradient(14deg,#F2F2F2 31%,#FFFFFF 100%);text-align:center}
.quote blockquote{margin:0 auto;max-width:var(--narrow);font-family:var(--font-display);font-size:clamp(22px,3vw,32px);line-height:1.5;color:var(--vinho)}
.quote cite{display:block;font-style:normal;font-size:14px;color:var(--vinho);margin-top:16px}
.refs{padding-block:48px;border-top:1px solid var(--cinza-50)}
.refs h2{font-size:18px;margin-bottom:12px}
.refs ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px}
.refs a{color:var(--vinho)}
footer{background:var(--vinho);color:var(--branco);padding-block:56px 40px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h3{color:var(--branco);font-family:var(--font-body);font-size:18px;font-weight:700;margin-bottom:12px}
footer p,footer li{color:#F3F3F3}
footer .brand img{height:118px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:#F3F3F3;text-decoration:none}
footer a:hover{text-decoration:underline}
.lema{font-family:var(--font-display);font-size:15px;margin-top:16px;max-width:36ch}
.copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);padding-top:20px;font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ===== CTA flutuante ===== */
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:25;box-shadow:0 8px 24px rgba(119,22,14,.35);transform:translateY(120%);opacity:0;transition:transform 400ms var(--spring),opacity 300ms}
.fab.show{transform:none;opacity:1}

/* ===== revelação por scroll ===== */
.reveal{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity 700ms var(--ease),transform 700ms var(--spring),filter 700ms var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal[data-d="1"]{transition-delay:100ms}.reveal[data-d="2"]{transition-delay:200ms}.reveal[data-d="3"]{transition-delay:300ms}
/* Words Stagger (padrão spell-ui) no H1 */
.hero h1 .w{opacity:0;transform:translateY(.4em);filter:blur(8px);animation:word 700ms var(--spring) forwards;animation-delay:calc(120ms + var(--i) * 70ms)}
@keyframes word{to{opacity:1;transform:none;filter:none}}

/* nativo: scroll-driven quando existe suporte */
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    .progress{animation:grow linear both;animation-timeline:scroll(root)}
    @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .hero-wave{animation:drift linear both;animation-timeline:scroll(root);animation-range:0 120vh}
    @keyframes drift{from{transform:translateY(0) rotate(0)}to{transform:translateY(-140px) rotate(-6deg)}}
    .rays{animation:rays-drift linear both;animation-timeline:scroll(root);animation-range:0 120vh}
    @keyframes rays-drift{to{transform:translateY(-60px)}}
    .leis .card{animation:rise auto var(--spring) both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .leis .card:nth-child(2){animation-range:entry 10% entry 70%}
    .leis .card:nth-child(3){animation-range:entry 20% entry 80%}
    @keyframes rise{from{opacity:0;transform:translateY(60px)}}
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .hero h1 .w{animation:none;opacity:1;transform:none;filter:none}
  .marquee .track{animation:none}
  .marquee{-webkit-mask:none;mask:none;overflow-x:auto}
  .tilt{transform:none!important}
  .in .hl,.hl.in{transition:none}
  .bar i{transition:none}
  .btn-pop,.opt,.tel,.chip span{transition:none}
}

@media (min-width:900px){ .hero .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} }
@media (max-width:1024px){ .nav-links{display:none} }
@media (max-width:900px){
  .cards3,.nums,.leis,.zig,.story{grid-template-columns:1fr}
  .help,.story-pin{position:static}
  footer .wrap{grid-template-columns:1fr}
  .story-pin .big{font-size:clamp(44px,12vw,72px)}
}
@media (max-width:640px){
  .nav-help,.brand .camp{display:none}
  .brand img{height:44px}
  .header .wrap .btn{margin-left:auto}
  .row2{grid-template-columns:1fr}
}

/* ===== revisão: alvos de toque, medida de linha, saída rápida ===== */
.tabs button{min-height:44px;padding:10px 18px}
.chip span{padding:11px 16px;min-height:44px;display:inline-flex;align-items:center}
.gesto label{min-height:44px;padding-block:8px}
.leis a{display:inline-block;padding:10px 4px;min-height:44px}
footer ul a{display:inline-block;padding:8px 0}
footer .copy a{padding:8px 0;display:inline-block}
.refs a{padding:6px 0;display:inline-block}
.steps p,.gesto p,.sec-head p,.promise li,.num b,.card p,footer p{max-width:72ch}
.req-note{color:var(--tinta-73);margin:0}
.exit{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:26;font:600 13px var(--font-body);background:var(--tinta);color:var(--branco);border:0;border-radius:var(--radius-pill);padding:0 16px;height:40px;cursor:pointer;box-shadow:0 6px 18px rgba(10,8,59,.35);display:inline-flex;align-items:center;gap:8px}
.exit::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--laranja)}
.exit:hover{background:#1B1856}
@media (max-width:640px){.exit{height:44px}}

/* ===== header: nada quebra linha ===== */
.header .wrap{gap:16px;flex-wrap:nowrap}
.nav-links{gap:0;flex-wrap:nowrap}
.nav-links a,.nav-help,.header .btn{white-space:nowrap}
.brand{flex:none}
@media (max-width:1280px){.brand .camp{display:none}}
@media (max-width:1180px){.nav-help{display:none}}
@media (max-width:1100px){.nav-links{display:none}}

/* ===== hero: vídeo de fundo em loop (atrás de tudo, overlay vinho da marca por cima) ===== */
.hero-media{position:absolute;inset:0;z-index:-3;overflow:hidden;background:var(--vinho)}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 900ms ease;filter:saturate(.9) contrast(1.05)}
.hero-media video.ready{opacity:1}
/* overlay: vinho 55% (assinatura do site do colégio) + reforço à esquerda, onde fica o texto */
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(119,22,14,.90) 0%,rgba(119,22,14,.78) 40%,rgba(119,22,14,.55) 100%),linear-gradient(180deg,rgba(119,22,14,.35) 0%,rgba(119,22,14,0) 30%,rgba(119,22,14,.45) 100%)}
.hero .rays{z-index:-2;mix-blend-mode:screen;opacity:.6}
.hero-wave{z-index:-1}
@media (max-width:900px){.hero-media::after{background:linear-gradient(180deg,rgba(119,22,14,.88) 0%,rgba(119,22,14,.70) 55%,rgba(119,22,14,.80) 100%)}}
@media (prefers-reduced-motion:reduce){.hero-media video{display:none}.hero-media{background:var(--vinho) url("video/poster.jpg") center/cover no-repeat}}

/* ===== primeira seção: só o vídeo, largura total ===== */
.hero-video{position:relative;height:clamp(380px,64vh,760px);overflow:clip;background:var(--vinho);isolation:isolate}
.hero-video .hero-media{z-index:0}
.hero-video .hero-media::after{background:linear-gradient(180deg,rgba(119,22,14,.18) 0%,rgba(119,22,14,0) 25%,rgba(119,22,14,0) 62%,var(--vinho) 100%)}
.hero-video video{filter:none}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--branco);opacity:.85}
.scroll-cue span{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.scroll-cue:hover{opacity:1}
@media (max-width:900px){.hero-video{height:clamp(420px,72svh,820px)}}
@media (prefers-reduced-motion:no-preference){.scroll-cue span{animation:cue 1.8s ease-in-out infinite}@keyframes cue{0%,100%{transform:rotate(45deg) translate(-2px,-2px)}50%{transform:rotate(45deg) translate(2px,2px)}}}
/* a faixa vinho com título e card continua igual, agora sem vídeo atrás */
.hero{padding-top:clamp(40px,6vw,72px)}
/* vídeo é claro (fundo branco): seção branca, só uma faixa fina de transição para o vinho */
.hero-video{background:#fff}
.hero-video .hero-media{background:#fff}
.hero-video .hero-media::after{background:linear-gradient(180deg,rgba(119,22,14,0) 86%,var(--vinho) 100%)}
.hero-video{border-top:1px solid var(--cinza-50)}
.scroll-cue{color:var(--vinho);bottom:22px}
@media (prefers-reduced-motion:reduce){.hero-video .hero-media{background:#fff url("video/poster.jpg") center/cover no-repeat}}