/*
  Liquida.se — design system canônico.
  Fonte única da verdade para cor, tipografia, forma e componentes base.
  Toda página do projeto (LP, link na bio, termos, política, e qualquer
  página nova) deve puxar este arquivo em vez de redeclarar tokens/botões
  inline. Documentação visual em ./design-system.html (também publicada
  como artifact — mantenha as duas em sincronia quando um token mudar).
*/

:root{
  --ink:#101B2D;
  --ink-soft:#182642;
  --paper:#FFFFFF;
  --panel:#F5F7FA;
  --signal:#EF6C33;
  --signal-dark:#D2551E;
  --slate:#5C6474;
  --line:#E7EAEF;
  --line-dark:#26324A;
  --azure:#5B9BFF;
  --azure-dark:#2F6FE0;
  --eyebrow-dark:#FF9466;
}

/* ── Reset & base ─────────────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
a{color:var(--signal);text-decoration:none;}
a:hover{color:var(--ink);}
input,select,textarea,button{font-family:inherit;}
input::placeholder{color:#A7ACB8;}
h1,h2,h3{font-family:'Sora',sans-serif;margin:0;}

@keyframes lsFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ── Layout utilities ─────────────────────────────────────────────────── */
.wrap{max-width:1200px;margin:0 auto;padding-left:clamp(18px,4vw,48px);padding-right:clamp(18px,4vw,48px);}
.narrow{max-width:900px;}
.pad-lg{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px);}
section[data-screen-label]{scroll-margin-top:70px;}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Sora',sans-serif;font-weight:600;font-size:15.5px;padding:16px 30px;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s cubic-bezier(.16,1,.3,1),background .18s ease,color .18s ease,border-color .18s ease;}
.btn-primary{background:var(--signal);color:#fff;box-shadow:0 12px 26px rgba(239,108,51,0.32);}
.btn-primary:hover{background:var(--ink);color:#fff;transform:translateY(-2px) scale(1.015);box-shadow:0 16px 32px rgba(16,27,45,0.32);}
.btn-invert{background:#fff;color:var(--ink);}
.btn-invert:hover{background:var(--ink);color:#fff;transform:translateY(-2px) scale(1.015);box-shadow:0 14px 30px rgba(16,27,45,0.28);}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,0.4);}
.btn-outline:hover{background:#fff;color:var(--ink);}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 12px 26px rgba(16,27,45,0.22);}
.btn-dark:hover{background:var(--signal);color:#fff;transform:translateY(-2px) scale(1.015);box-shadow:0 16px 32px rgba(239,108,51,0.32);}
.btn-whatsapp{background:#25D366;color:#fff;box-shadow:0 12px 26px rgba(37,211,102,0.32);}
.btn-whatsapp:hover{background:#1DA851;color:#fff;transform:translateY(-2px) scale(1.015);box-shadow:0 16px 32px rgba(29,168,81,0.38);}
/* Seta do CTA desliza no hover — mesmo gesto de "↗" que sites de produto usam
   pra dar sensação de clique iminente, sem mexer no texto/estrutura do botão.
   Só a seta (.cta-arrow), não o ícone do WhatsApp nos botões btn-whatsapp. */
.cta-arrow{transition:transform .22s cubic-bezier(.16,1,.3,1);}
.btn:hover .cta-arrow{transform:translate(3px,-2px);}
.btn-block{width:100%;}
.btn-header-cta{padding:12px 20px;font-size:14px;}
@media (max-width:600px){
  .btn{white-space:normal;text-align:center;line-height:1.25;}
  .btn-header-cta{padding:10px 14px;font-size:12.5px;}
}

/* ── WhatsApp floating action button ─────────────────────────────────── */
.wa-wrap{position:fixed;right:24px;bottom:24px;z-index:85;display:flex;align-items:center;gap:10px;}
@media (max-width:600px){ .wa-wrap{bottom:16px;right:16px;} }
.wa-label{background:#25D366;color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:999px;box-shadow:0 10px 22px rgba(37,211,102,0.35);white-space:nowrap;opacity:0;transform:translateX(8px);animation:waLabelIn .4s ease 1.6s forwards;}
@media (max-width:420px){ .wa-label{display:none;} }
@keyframes waLabelIn{to{opacity:1;transform:none;}}
.wa-fab{position:relative;width:54px;height:54px;border-radius:999px;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(0,0,0,0.28);transition:transform .16s ease;flex:none;animation:waPulse 2.4s ease-out infinite;}
@keyframes waPulse{0%{box-shadow:0 12px 26px rgba(0,0,0,0.28),0 0 0 0 rgba(37,211,102,0.55);}70%{box-shadow:0 12px 26px rgba(0,0,0,0.28),0 0 0 16px rgba(37,211,102,0);}100%{box-shadow:0 12px 26px rgba(0,0,0,0.28),0 0 0 0 rgba(37,211,102,0);}}

/* ── Card, chip, blob, wave, form field ──────────────────────────────── */
.card{background:#fff;border-radius:20px;box-shadow:0 18px 40px rgba(16,27,45,0.07);border:1px solid var(--line);}
.card.on-dark{background:var(--ink-soft);border-color:var(--line-dark);}

.blob{border-radius:63% 37% 54% 46% / 45% 48% 52% 55%;}
.blob-alt{border-radius:42% 58% 65% 35% / 48% 42% 58% 52%;}

.chip{display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:var(--azure-dark);background:rgba(91,155,255,0.13);border:1px solid rgba(91,155,255,0.4);border-radius:999px;padding:7px 14px;}

.eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--signal);margin:0 0 12px;}
.eyebrow.on-dark{color:var(--eyebrow-dark);}

.field label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:var(--ink);}
.field input:not([type="checkbox"]),.field select{border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:15px;font-family:'Manrope',sans-serif;color:var(--ink);background:var(--panel);outline:none;appearance:none;transition:border-color .14s ease,box-shadow .14s ease;}
.field input[type="checkbox"]{appearance:auto;accent-color:var(--signal);cursor:pointer;}

.wave{display:block;width:100%;height:auto;position:relative;}
/* Deriva lenta e quase imperceptível — o único motivo ambiente da página,
   ecoando "estoque parado volta a se mover". Seções com .wave já têm
   overflow:hidden, então a amplitude pequena nunca deixa borda visível. */
.wave-idle{animation:waveDrift 9s ease-in-out infinite;}
.wave-idle.flipped{animation-name:waveDriftFlipped;}
@keyframes waveDrift{0%,100%{transform:translateX(0);}50%{transform:translateX(-10px);}}
@keyframes waveDriftFlipped{0%,100%{transform:scaleY(-1) translateX(0);}50%{transform:scaleY(-1) translateX(-10px);}}

/* Sequência de entrada da hero — a tese da página, orquestrada uma vez.
   Puramente CSS (sem JS mexendo em classList) — este projeto re-renderiza
   sozinho a cada poucos segundos (troca automática de aba de segmento) e
   qualquer classe adicionada por fora do próprio ciclo de render some no
   próximo re-render, então todo motivo daqui pra baixo evita depender de
   estado de JS externo: só :hover real e animation/transition/scroll-timeline
   nativos do CSS, que se reafirmam sozinhos a cada render. */
.hero-in{animation:lsFadeUp .7s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--in-delay,0s);}

/* ── Movimento entre dobras ───────────────────────────────────────────────
   Cada dobra surge ao entrar na tela — direção varia com o layout (coluna
   dupla entra dos dois lados, coluna única sobe) pra não ficar repetitivo.
   JS (no helmet) liga .is-in por posição de rolagem e se autorrepara a cada
   700ms — se o re-render automático do site apagar a classe, ela volta
   sozinha em menos de 1s. Suporte universal: só opacity/transform. */
.fold{opacity:0;transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1);}
.fold-up{transform:translateY(72px) scale(.96);}
.fold-left{transform:translateX(-64px);}
.fold-right{transform:translateX(64px);}
.fold.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .fold{opacity:1!important;transform:none!important;transition:none!important;}
}

/* Cartão com leve elevação ao passar o mouse — reservado a grids onde o
   item realmente convida ao toque (não em cartões só informativos). */
.tile-hover{transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s cubic-bezier(.16,1,.3,1);}
.tile-hover:hover{transform:translateY(-5px);box-shadow:0 26px 54px rgba(16,27,45,0.14);}
.tile-hover.on-dark:hover{box-shadow:0 26px 54px rgba(0,0,0,0.45);}

/* Item de "tipos de estoque" — troca o style-hover morto por :hover real. */
.tipo-item{transition:border-color .18s ease,background .18s ease,transform .18s ease;}
.tipo-item:hover{border-color:var(--signal);background:rgba(239,108,51,0.08);transform:translateX(4px);}

/* Aba de segmento — leve resposta ao hover além do estado ativo (JS/inline). */
.seg-tab{transition:transform .18s ease,border-color .18s ease;}
.seg-tab:hover{transform:translateY(-2px);}

/* Link de rodapé — troca o style-hover morto por :hover real. */
.footer-link{transition:color .18s ease;}
.footer-link:hover{color:var(--signal);}

@media (prefers-reduced-motion: reduce){
  .hero-in,.wave-idle{animation:none!important;}
  .tile-hover:hover,.seg-tab:hover{transform:none!important;}
}

/* ── Bio-link buttons (link.html, ou qualquer página tipo Linktree) ─────
   Diferente de .btn: retangular arredondado (16px) e sempre full-width,
   empilhado em lista — não pill inline. */
.link-btn{width:100%;border-radius:16px;padding:16px 24px;text-align:center;font-family:'Sora',sans-serif;font-weight:600;font-size:15px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;color:inherit;text-decoration:none;display:block;}
.link-btn.primary{background:var(--signal);color:#fff;box-shadow:0 12px 26px rgba(239,108,51,0.32);}
.link-btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(239,108,51,0.36);}
.link-btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line);}
.link-btn.secondary:hover{border-color:var(--signal);color:var(--signal);}
.link-btn.whatsapp{background:#25D366;color:#fff;box-shadow:0 12px 26px rgba(37,211,102,0.32);}
.link-btn.whatsapp:hover{background:#1DA851;color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px rgba(29,168,81,0.38);}

/* ── Content/legal page shell ────────────────────────────────────────── */
/* Padrão reutilizado por qualquer página "de apoio" (termos, política,
   futuras páginas institucionais): header fino com logo + volta, corpo de
   texto legível, rodapé escuro. */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,0.94);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);}
.site-header .wrap{padding-top:14px;padding-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.site-header img{height:26px;width:auto;display:block;}
.back-link{font-size:13.5px;font-weight:600;}

.legal-content{max-width:760px;margin:0 auto;padding-left:clamp(18px,4vw,48px);padding-right:clamp(18px,4vw,48px);}
.legal-main{padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(56px,7vw,88px);}
.legal-main h1{font-weight:700;font-size:clamp(28px,4vw,38px);line-height:1.15;letter-spacing:-0.02em;margin-bottom:6px;}
.legal-main .updated{font-size:13.5px;color:var(--slate);margin-bottom:36px;}
.legal-main h2{font-weight:700;font-size:19px;letter-spacing:-0.01em;margin-top:34px;margin-bottom:10px;}
.legal-main p,.legal-main li{font-size:15px;line-height:1.7;color:var(--slate);}
.legal-main ul,.legal-main ol{padding-left:22px;margin:10px 0;}
.legal-main li{margin-bottom:6px;}
.legal-main table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;}
.legal-main th,.legal-main td{text-align:left;padding:10px 12px;border:1px solid var(--line);vertical-align:top;}
.legal-main th{background:var(--panel);font-family:'Sora',sans-serif;font-size:13px;}
.disclaimer{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:13.5px;color:var(--slate);margin-bottom:32px;}

.site-footer{background:var(--ink);color:#9AA3B5;font-size:13.5px;}
.site-footer .wrap{padding-top:26px;padding-bottom:26px;}