/* RodeAqui Design System — components.css (v0.1)
   Depende de tokens.css. Sem framework. Classes curtas, uma responsabilidade cada. */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:1.55;font-weight:var(--w-regular);-webkit-font-smoothing:antialiased;letter-spacing:-.005em;font-optical-sizing:auto}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3,h4{margin:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section-tight{padding-block:calc(var(--section) * .6)}
.dark{background:var(--night);color:var(--night-ink)}
.tone{background:var(--paper-2)}                       /* faixa suave, sem borda */
.panel{background:var(--paper-2);border-radius:var(--r-4);padding:clamp(24px,4vw,56px)}   /* seção-cartão (shopify/contaazul) */
.dark .panel{background:var(--night-2)}
.rule{border:0;border-top:1px solid var(--hair);margin:0}
.dark .rule{border-color:var(--night-hair)}
.grid-2{display:grid;gap:var(--s-6);grid-template-columns:1fr}
.grid-3{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media(min-width:760px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}}
.stack>*+*{margin-top:var(--s-5)}
.center{text-align:center}.center .lead,.center .h-display,.center .h1{margin-inline:auto}

/* ---------- tipografia ---------- */
.h-display{font-size:var(--t-display);line-height:1;letter-spacing:-.028em;font-weight:var(--w-display);text-wrap:balance;max-width:14ch}
.h1{font-size:var(--t-1);line-height:1.04;letter-spacing:-.024em;font-weight:var(--w-display);text-wrap:balance;max-width:18ch}
.h2{font-size:var(--t-2);line-height:1.1;letter-spacing:-.016em;font-weight:var(--w-display);text-wrap:balance}
.h3{font-size:var(--t-3);line-height:1.35;letter-spacing:-.008em;font-weight:var(--w-strong)}
.lead{font-size:var(--t-3);line-height:1.45;color:var(--ink-2);max-width:var(--measure);text-wrap:pretty}
.body{font-size:var(--t-body);color:var(--ink-2);max-width:var(--measure)}
.small{font-size:var(--t-small);line-height:1.45}
.caption{font-size:var(--t-caption);line-height:1.4;color:var(--ink-3)}
.eyebrow{font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:500}
.dark .lead,.dark .body{color:var(--night-ink-2)}
.dark .caption{color:var(--night-ink-2)}
.dark .eyebrow{color:var(--teal-glow)}
/* título de dois tons: a primeira frase em tinta, a continuação apagada (attio, linear) */
.h-tone em{font-style:normal;color:var(--ink-2)}
.dark .h-tone em{color:var(--night-ink-2)}
/* a frase de marca: uma vez por página, em teal */
.brand-phrase{color:var(--teal)}
.dark .brand-phrase{color:var(--teal-glow)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.big-num{font-size:clamp(44px,7vw,88px);line-height:.95;letter-spacing:-.035em;font-weight:var(--w-display)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-pill);font-size:var(--t-small);font-weight:var(--w-strong);letter-spacing:-.01em;white-space:nowrap;border:1px solid transparent;transition:background-color var(--d-xs) var(--e-ui),color var(--d-xs) var(--e-ui),border-color var(--d-xs) var(--e-ui)}
.btn-sm{height:36px;padding:0 14px;font-size:14px}
.btn-lg{height:52px;padding:0 26px;font-size:16px}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#242B2E}
.btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--hair-2)}
.btn-secondary:hover{background:var(--paper-2);border-color:rgba(11,15,16,.24)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{background:var(--paper-2);color:var(--ink)}
.dark .btn-primary{background:var(--night-ink);color:var(--night)}
.dark .btn-primary:hover{background:#DDE3E2}
.dark .btn-secondary{background:transparent;color:var(--night-ink);border-color:rgba(255,255,255,.18)}
.dark .btn-secondary:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32)}
.dark .btn-ghost{color:var(--night-ink-2)}.dark .btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--night-ink)}
.link{color:var(--teal);font-weight:var(--w-medium);border-bottom:1px solid transparent;transition:border-color var(--d-sm) var(--e-ui)}
.link:hover{border-color:currentColor}
.dark .link{color:var(--teal-glow)}
.arrow::after{content:"→";margin-left:.35em;display:inline-block;transition:transform var(--d-sm) var(--e-out)}
.arrow:hover::after{transform:translateX(3px)}

/* ---------- chips, tags ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-pill);font-size:13px;font-weight:var(--w-medium);background:var(--paper-2);color:var(--ink-2);border:1px solid var(--hair)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dark .chip{background:rgba(255,255,255,.05);color:var(--night-ink-2);border-color:var(--night-hair)}
.dark .chip[aria-pressed="true"],.dark .chip.is-on{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:var(--r-pill);letter-spacing:.02em}
.tag-ok{background:#E6F0E4;color:var(--pos)}.tag-warn{background:#F7EDDD;color:var(--warn)}.tag-bad{background:#F3E1DD;color:var(--neg)}
.dark .tag-ok{background:rgba(46,125,79,.22);color:#8FD3A7}.dark .tag-warn{background:rgba(138,90,18,.25);color:#E4B96E}.dark .tag-bad{background:rgba(179,64,43,.25);color:#F0A492}

/* ---------- cartões e molduras ---------- */
.card{background:var(--paper);border-radius:var(--r-3);box-shadow:var(--ring);padding:var(--s-5)}
.card-tone{background:var(--paper-2);box-shadow:none}
.dark .card{background:var(--night-2);box-shadow:0 0 0 1px var(--night-hair)}
/* moldura de produto: a tela real, cortada, com anel fino; opcionalmente sangrando a base da seção */
.frame{background:var(--paper);border-radius:var(--r-3);box-shadow:var(--ring),var(--shadow-frame);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-bottom:1px solid var(--hair);background:var(--paper)}
.frame-bar i{width:8px;height:8px;border-radius:50%;background:var(--paper-3)}
.frame-bar a.url:hover{color:var(--teal);text-decoration:underline}
.dark .frame-bar a.url:hover{color:var(--teal-glow)}
.frame-bar .url{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark .frame{background:var(--night-2);box-shadow:0 0 0 1px var(--night-hair),0 40px 120px -40px rgba(0,0,0,.8)}
.dark .frame-bar{background:var(--night-2);border-color:var(--night-hair)}
.dark .frame-bar i{background:rgba(255,255,255,.14)}
.bleed{margin-bottom:calc(var(--section) * -1);max-height:520px}       /* sangra a base da seção (linear, attio) */
.bleed .frame{border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:var(--ring)}
/* grade com linhas finas (attio: logos, recursos) */
.cells{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-3);overflow:hidden}
.cells>*{background:var(--paper);padding:var(--s-5)}
@media(min-width:760px){.cells{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.cells-6{grid-template-columns:repeat(6,1fr)}}
.dark .cells{background:var(--night-hair);border-color:var(--night-hair)}.dark .cells>*{background:var(--night)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:30;height:60px;display:flex;align-items:center;gap:var(--s-5);padding-inline:var(--gutter);background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hair);transition:background-color var(--d-md) var(--e-ui),color var(--d-md) var(--e-ui),border-color var(--d-md) var(--e-ui)}
/* barra sobre hero escuro: fixa, transparente no topo, noite translúcida ao rolar */
.nav-overlay{position:fixed;left:0;right:0}
.nav-overlay:not(.is-scrolled){background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav .logo{display:flex;align-items:center;gap:8px;font-weight:var(--w-strong);font-size:17px;letter-spacing:-.02em;margin-right:auto}
.nav .links{display:none;gap:var(--s-5);font-size:var(--t-small);font-weight:var(--w-medium);color:var(--ink-2)}
.nav .links a{transition:color var(--d-xs) var(--e-ui)}.nav .links a:hover{color:var(--ink)}
@media(min-width:900px){.nav .links{display:flex}}
.dark-nav{background:rgba(10,18,20,.78);border-color:var(--night-hair);color:var(--night-ink)}
.dark-nav .links{color:var(--night-ink-2)}.dark-nav .links a:hover{color:var(--night-ink)}

/* ---------- dados (dentro do produto) ---------- */
.kpi{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r-2);box-shadow:var(--ring)}
.kpi small{font-size:12px;color:var(--ink-3)}
.kpi b{font-family:var(--mono);font-weight:500;font-size:clamp(15px,2vw,22px);letter-spacing:-.02em;white-space:nowrap}
@media(max-width:560px){.kpi{padding:10px}.kpi small{font-size:11px}}
.kpi .pos{color:var(--pos)}.kpi .neg{color:var(--neg)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500;text-align:left;padding:8px 6px}
.tbl td{padding:9px 6px;border-top:1px solid var(--hair)}
.tbl .r{text-align:right}
.bars{display:flex;align-items:flex-end;gap:6px;height:96px}
.bars i{flex:1;background:var(--paper-3);border-radius:4px 4px 0 0;transform-origin:bottom;transition:transform var(--d-xl) var(--e-out)}
.bars i.hi{background:var(--teal)}
.dark .bars i{background:rgba(255,255,255,.08)}.dark .bars i.hi{background:var(--teal-glow)}

/* ---------- citação, prova ---------- */
.quote{font-size:var(--t-2);line-height:1.2;letter-spacing:-.016em;font-weight:var(--w-medium);text-wrap:balance}
.who{display:flex;align-items:center;gap:12px;font-size:var(--t-small);color:var(--ink-2)}
.who img,.who .ava{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--teal-soft);color:var(--teal-ink);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--w-strong)}
.stat b{display:block;font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.03em;font-weight:var(--w-display)}
.stat span{display:block;margin-top:6px;font-size:var(--t-small);color:var(--ink-2)}

/* ---------- foto com produto por cima (revolut) ---------- */
.photo{position:relative;border-radius:var(--r-4);overflow:hidden;aspect-ratio:4/5;background:var(--paper-3)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .float{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:var(--r-2);padding:12px 14px;box-shadow:var(--ring)}

/* ---------- movimento (estados iniciais; motion.js liga) ---------- */
.motion-on [data-enter]{opacity:0;transform:translateY(8px);filter:blur(6px);transition:opacity var(--d-xl) var(--e-out),transform var(--d-xl) var(--e-out),filter var(--d-xl) var(--e-out)}
.motion-on [data-enter].is-in{opacity:1;transform:none;filter:none}
.motion-on [data-reveal]{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--d-lg) var(--e-out),transform var(--d-lg) var(--e-out)}
.motion-on [data-reveal="stagger"]{opacity:1;transform:none;transition:none}
.motion-on [data-reveal="stagger"]>*{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--d-lg) var(--e-out),transform var(--d-lg) var(--e-out)}
.motion-on [data-reveal].is-in,.motion-on [data-reveal="stagger"].is-in>*{opacity:1;transform:none}
.motion-on [data-build] [data-row]{opacity:0;transform:translateY(3px);transition:opacity var(--d-md) var(--e-out),transform var(--d-md) var(--e-out)}
.motion-on [data-build].is-built [data-row]{opacity:1;transform:none}
.motion-on [data-build] .bars i{transform:scaleY(.15)}
.motion-on [data-build].is-built .bars i{transform:none}
/* loop ambiente permitido: lento, só dentro do produto */
@keyframes pulse-dot{0%,100%{opacity:.35}50%{opacity:1}}
.pulse{animation:pulse-dot 2.4s ease-in-out infinite}
.motion-off .pulse{animation:none}