/* ==========================================================================
   Transcript — design system
   Autor: Transcript
   Ordem: tokens → base → componentes → seções → estados → responsivo
   ========================================================================== */

/* ------------------------------- 1. TOKENS ------------------------------- */
:root{
  --brand-500:#6366f1;
  --brand-600:#4f46e5;
  --brand-700:#4338ca;
  --cyan-500:#06b6d4;
  --cyan-600:#0891b2;
  --grad-brand:linear-gradient(120deg,#4f46e5 0%,#6366f1 42%,#06b6d4 100%);
  --grad-brand-soft:linear-gradient(120deg,rgba(79,70,229,.12),rgba(6,182,212,.12));

  --ink-900:#0b1020;
  --ink-800:#141a2e;
  --ink-700:#1f2740;
  --ink-600:#334155;
  --ink-500:#475569;
  --ink-400:#64748b;
  --ink-300:#94a3b8;

  --page:#ffffff;
  --soft:#f7f8fb;
  --soft-2:#eef1f7;
  --card:#ffffff;
  --line:#e5e8f0;
  --line-strong:#d4dae7;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 2px 8px rgba(16,24,40,.06);
  --shadow:0 12px 32px -12px rgba(16,24,40,.18);
  --shadow-lg:0 28px 60px -24px rgba(16,24,40,.28);
  --shadow-brand:0 16px 40px -16px rgba(79,70,229,.55);

  --font-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Faixa de destaque (IA) e CTA: claras, com tinta suave de marca
     em vez de fundo preto. Em telas de destaque sobre fundo claro. */
  --destaque:#f6f7fe;
  --destaque-grad:linear-gradient(170deg,#f2f4fe 0%,#edf0fd 46%,#e6ecfb 100%);
  --destaque-borda:rgba(99,102,241,.18);
  --destaque-texto:var(--ink-600);
  --grad-cta:linear-gradient(118deg,#4f46e5 0%,#5b53e8 38%,#0e9fc4 100%);
  --grad-cta-suave:linear-gradient(115deg,rgba(79,70,229,.12),rgba(14,159,196,.14));
  --transicao-traco:rgba(79,70,229,.10);

  /* Cor de fundo para os divisores em onda entre as seções */
  --transicao-hero:#ffffff;
  --transicao-suave:#f7f8fb;

  --nav-h:72px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

[data-bs-theme="dark"]{
  --ink-900:#f8fafc;
  --ink-800:#eef2f7;
  --ink-700:#dbe3ee;
  --ink-600:#c3cddc;
  --ink-500:#9aa8bd;
  --ink-400:#8b9ab0;
  --ink-300:#7b8aa0;

  --page:#080b14;
  --soft:#0d1220;
  --soft-2:#111827;
  --card:#0f1521;
  --line:#1d2637;
  --line-strong:#2a3549;

  --shadow:0 14px 36px -14px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -28px rgba(0,0,0,.85);

  /* No tema escuro a faixa de destaque volta a ser escura, um tom acima do fundo */
  --destaque:#0c1120;
  --destaque-grad:
    radial-gradient(1000px 460px at 8% 0%,rgba(99,102,241,.22),transparent 58%),
    radial-gradient(880px 420px at 96% 100%,rgba(6,182,212,.18),transparent 60%),
    linear-gradient(180deg,#0c1120 0%,#0a0f1c 100%);
  --destaque-borda:rgba(255,255,255,.09);
  --destaque-texto:#94a3b8;
  --transicao-hero:#080b14;
  --transicao-suave:#0d1220;
  --grad-cta-suave:linear-gradient(115deg,rgba(99,102,241,.18),rgba(14,159,196,.16));
  --transicao-traco:rgba(255,255,255,.10);
}

/* -------------------------------- 2. BASE -------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  color:var(--ink-600);
  background:var(--page);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--font-display);
  color:var(--ink-900);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.18;
  margin-bottom:.6rem;
}

p{margin-bottom:1rem}
/* e-mails e URLs longos nunca devem estourar a largura da tela */
.legal-content a,.footer-about a{overflow-wrap:anywhere}
a{color:var(--brand-600);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--brand-700)}
img,svg{max-width:100%}
strong{color:var(--ink-800);font-weight:600}

::selection{background:rgba(99,102,241,.22)}

.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{flex:none;color:currentColor;display:inline-block;vertical-align:middle}

.skip-link{
  position:absolute;left:16px;top:-60px;z-index:2000;
  background:var(--brand-600);color:#fff;padding:.6rem 1rem;border-radius:var(--radius-sm);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:16px;color:#fff}

:focus-visible{outline:3px solid rgba(99,102,241,.55);outline-offset:2px;border-radius:6px}

.container{max-width:1180px}

/* --- Correção de grid -------------------------------------------------------
   O .row do Bootstrap usa margens negativas iguais ao padding da coluna. Como
   os containers têm padding responsivo, a linha ficava alguns pixels mais larga
   que o container e gerava estouro horizontal (scroll lateral) em telas
   pequenas. Zera-se a margem e mantém-se o respiro no padding das colunas,
   o que preserva o espaçamento sem estourar a largura. */
.row{margin-left:0;margin-right:0}
.row > *{min-width:0}

/* ------------------------------ 3. TIPOGRAFIA ---------------------------- */
.eyebrow{
  font-family:var(--font-display);
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-600);margin-bottom:.65rem;
}

.section-title{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.6rem)}
.section-sub{font-size:1.05rem;color:var(--ink-500);max-width:640px;margin:0 auto}
.section-head{margin-bottom:3rem}
.section-head .section-sub{margin-top:.5rem}

.text-gradient{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ------------------------------- 4. BOTÕES ------------------------------- */
.btn{
  font-family:var(--font-display);
  font-weight:700;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn:active{transform:translateY(0) scale(.985)}

.btn-lg{padding:.85rem 1.6rem;font-size:1.02rem}
.btn-sm{padding:.5rem 1.05rem;font-size:.9rem}

.btn-brand{
  background:var(--grad-brand);color:#fff;
  box-shadow:var(--shadow-brand);
  background-size:150% 150%;
}
.btn-brand:hover{color:#fff;transform:translateY(-2px);box-shadow:0 22px 44px -18px rgba(79,70,229,.65);background-position:100% 50%}

.btn-outline-soft{
  background:var(--card);color:var(--ink-800);border-color:var(--line-strong);
  box-shadow:var(--shadow-xs);
}
.btn-outline-soft:hover{color:var(--brand-600);border-color:var(--brand-500);transform:translateY(-2px);box-shadow:var(--shadow-sm)}

.btn-icon{
  width:40px;height:40px;padding:0;border-radius:50%;
  background:var(--card);border:1px solid var(--line);
  color:var(--ink-600);
}
.btn-icon:hover{color:var(--brand-600);border-color:var(--brand-500)}

.link-brand{font-family:var(--font-display);font-weight:700;display:inline-flex;align-items:center;gap:.4rem}
.link-brand:hover{gap:.65rem}

/* -------------------------------- 5. NAVBAR ------------------------------ */
.site-header{position:relative;z-index:1030}

.navbar-transparent{
  padding:.85rem 0;
  background:transparent;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s var(--ease);
}
.navbar-transparent.is-scrolled{
  background:color-mix(in srgb,var(--page) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(16,24,40,.5);
}

.brand-mark{border-radius:11px;box-shadow:0 6px 16px -8px rgba(79,70,229,.7)}
.brand-word{
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;
  letter-spacing:-.03em;color:var(--ink-900);
}

.navbar .nav-link{
  font-family:var(--font-display);font-weight:600;font-size:.96rem;
  color:var(--ink-600);padding:.5rem .9rem;border-radius:var(--radius-pill);
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--brand-600);background:var(--soft-2)}
.navbar .nav-link.active{color:var(--brand-600);background:var(--grad-brand-soft)}
.navbar-toggler{border:1px solid var(--line);border-radius:12px;padding:.35rem .5rem;color:var(--ink-700)}
.navbar-toggler:focus{box-shadow:none}

@media (max-width:991.98px){
  .navbar-collapse{
    margin-top:.75rem;padding:1rem;border-radius:var(--radius-lg);
    background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  }
  .navbar .nav-link{padding:.6rem .75rem;border-radius:var(--radius-sm)}
}

#botaoTema .ico-moon{display:none}
#botaoTema .ico-sun{display:block}
[data-bs-theme="dark"] #botaoTema .ico-moon{display:block}
[data-bs-theme="dark"] #botaoTema .ico-sun{display:none}

/* --------------------------------- 6. HERO ------------------------------- */
.hero{
  position:relative;
  padding:calc(var(--nav-h) + 3.5rem) 0 4.5rem;
  background:
    radial-gradient(1100px 460px at 12% -10%,rgba(99,102,241,.16),transparent 60%),
    radial-gradient(900px 420px at 92% 8%,rgba(6,182,212,.14),transparent 62%),
    var(--page);
  overflow:hidden;
}
.hero-glow{
  position:absolute;inset:auto -12% -55% 42%;height:60%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(99,102,241,.28),transparent 72%);
  filter:blur(30px);opacity:.85;animation:flutuar 12s ease-in-out infinite;
}

.badge-pill{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-size:.85rem;font-weight:700;
  color:var(--ink-700);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.4rem .9rem;box-shadow:var(--shadow-xs);
}
.badge-pill .dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:pulsar 2.4s ease-in-out infinite;
}

.hero-title{
  font-size:clamp(2.05rem,1.1rem + 4vw,3.7rem);
  font-weight:800;letter-spacing:-.035em;margin:.4rem 0 1.1rem;
}
.hero-sub{font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);color:var(--ink-500);max-width:34rem;margin-inline:auto}
@media (min-width:992px){.hero-sub{margin-inline:0}}

.hero-points{
  list-style:none;padding:0;margin:1.75rem 0 0;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:center;
}
@media (min-width:992px){.hero-points{justify-content:flex-start}}
.hero-points li{display:flex;align-items:center;gap:.45rem;font-size:.94rem;font-weight:500;color:var(--ink-600)}
.hero-points .ico{color:#10b981}

/* --------------------------- 7. MOCKUP DE CELULAR ------------------------ */
.phone-wrap{position:relative;max-width:350px;margin:0 auto;padding:1rem 0}
.phone{
  position:relative;border-radius:44px;padding:12px;
  background:linear-gradient(160deg,#252d4a,#0b1020 58%,#1b2340);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.07) inset;
}
.phone-notch{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:96px;height:22px;border-radius:var(--radius-pill);background:#0b1020;z-index:2;
}
.phone-screen{
  border-radius:34px;background:var(--card);padding:2.35rem 1rem 1rem;
  display:flex;flex-direction:column;gap:.7rem;overflow:hidden;
}
.app-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-bottom:.15rem}
.app-bar-title{font-family:var(--font-display);font-size:.82rem;font-weight:700;color:var(--ink-900)}
.app-bar-time{font-size:.7rem;color:var(--ink-300);font-variant-numeric:tabular-nums}

.app-player{
  display:flex;align-items:center;gap:.6rem;
  background:var(--soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:.5rem .65rem;
}
.player-btn{
  width:34px;height:34px;flex:none;border-radius:50%;border:0;
  background:var(--grad-brand);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 18px -10px rgba(79,70,229,.9);cursor:pointer;
}
.player-btn .ico-pause{display:none}
.player-btn.is-playing .ico-play{display:none}
.player-btn.is-playing .ico-pause{display:block}
.player-time{font-size:.7rem;color:var(--ink-400);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

.waveform{flex:1;height:26px;display:flex;align-items:center;gap:2px;min-width:0}
.waveform i{
  flex:1;height:var(--h,40%);border-radius:2px;
  background:linear-gradient(180deg,var(--brand-500),var(--cyan-500));
  opacity:.5;transform-origin:center;
}
.phone-wrap.is-playing .waveform i{animation:pulsar-onda 1s ease-in-out infinite;animation-delay:var(--d,0s);opacity:1}

.app-block{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:.65rem .75rem}
.app-block-ai{background:var(--grad-brand-soft);border-color:rgba(99,102,241,.28)}
.app-label{
  display:flex;align-items:center;gap:.35rem;margin:0 0 .3rem;
  font-family:var(--font-display);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand-600);
}
.app-text{margin:0;font-size:.79rem;line-height:1.55;color:var(--ink-600)}
.speaker{font-weight:700;color:var(--ink-900)}
.app-tasks{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.task-chip{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.68rem;font-weight:600;color:var(--ink-700);
  background:var(--card);border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);padding:.22rem .55rem;
}
.task-chip .ico{color:var(--brand-600)}
.app-cta{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.72rem;font-weight:700;color:#fff;
  background:var(--grad-brand);border-radius:var(--radius);padding:.5rem;
}

.float-card{
  position:absolute;display:flex;align-items:center;gap:.55rem;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:.55rem .75rem;
  box-shadow:var(--shadow);
}
.float-card strong{display:block;font-family:var(--font-display);font-size:.8rem;color:var(--ink-900)}
.float-card small{font-size:.7rem;color:var(--ink-400)}
.float-card .ico{color:var(--brand-600)}
/* Card flutuante único: ancorado no canto superior esquerdo da moldura,
   onde não existe texto da tela (fica sobre a borda do aparelho). */
.float-card-1{top:-9%;left:-13%;animation:flutuar 7s ease-in-out infinite}
@media (max-width:1399.98px){
  .float-card-1{left:-9%}
}
@media (max-width:1199.98px){
  .float-card-1{left:-4%;top:-8%}
}
.float-card-dentro{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.68rem;color:var(--ink-400);margin:0;
}
.float-card-dentro .ico{color:var(--brand-600)}
@media (max-width:575.98px){
  .float-card{display:none}
}

/* ---------------------------- 8. FAIXA DE CONFIANÇA ---------------------- */
.trust-bar{border-block:1px solid var(--line);background:var(--soft);padding:1.15rem 0}
.trust-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem 1.5rem;
}
.trust-grid li{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.9rem;color:var(--ink-500);text-align:left;
}
@media (max-width:575.98px){
  .trust-grid li{font-size:.86rem;align-items:flex-start}
  .trust-grid .ico{margin-top:.15rem}
}
.trust-grid .ico{color:var(--brand-600)}
.trust-grid strong{color:var(--ink-900);font-weight:600}
@media (max-width:767.98px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid li{justify-content:flex-start;text-align:left}
}

/* ------------------------------- 9. SEÇÕES ------------------------------- */
.section{padding:5.5rem 0}
.section-soft{background:var(--soft)}

/* Faixa de destaque (bloco de IA): clara, com tinta suave de marca,
   para não pesar a página com um bloco preto. */
.faixa-ia{
  position:relative;
  background:var(--destaque-grad);
  color:var(--destaque-texto);
  overflow:hidden;
}
.faixa-ia .section-title{color:var(--ink-900)}
.faixa-ia .section-sub{color:var(--ink-500)}
.faixa-ia .eyebrow{color:var(--brand-600)}

/* Cards de passo */
.card-step{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.8rem 1.5rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card-step:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.step-num{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  font-family:var(--font-display);font-weight:800;color:#fff;background:var(--grad-brand);
  margin-bottom:1rem;box-shadow:var(--shadow-brand);
}
.card-step h3{margin-bottom:.4rem}
.card-step p{margin:0;color:var(--ink-500);font-size:.96rem}
.step-ico{position:absolute;top:1.7rem;right:1.5rem;color:var(--line-strong)}

/* Grid de recursos */
.card-feature{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.6rem 1.4rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(99,102,241,.35)}
.feature-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--grad-brand-soft);color:var(--brand-600);margin-bottom:1rem;
  border:1px solid rgba(99,102,241,.18);
}
.feature-ico-light{background:#fff;color:var(--brand-600);border-color:var(--destaque-borda);box-shadow:var(--shadow-xs)}
.card-feature h3,.card-ai h3{font-size:1.06rem;margin-bottom:.4rem}
.card-feature p,.card-ai p{margin:0;font-size:.94rem;color:var(--ink-500)}

/* Cards de IA (na faixa de destaque clara) */
.card-ai{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.5rem 1.3rem;
  box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card-ai:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(99,102,241,.35)}
.card-ai h3{color:var(--ink-900)}
.card-ai p{color:var(--ink-500)}

/* Cards de uso */
.card-use{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.2rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card-use:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-use .ico{color:var(--brand-600);margin-bottom:.7rem}
.card-use h3{font-size:1rem;margin-bottom:.3rem}
.card-use p{margin:0;font-size:.9rem;color:var(--ink-500)}

/* --------------------------- 10. COMPARATIVO IA -------------------------- */
.compare{margin-top:3.5rem}
.compare-col{
  height:100%;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.6rem 1.5rem;box-shadow:var(--shadow-xs);
}
/* resultado em destaque: cartão com a marca aplicada */
.compare-col-result{
  background:linear-gradient(140deg,rgba(79,70,229,.07),rgba(6,182,212,.09)),var(--card);
  border-color:rgba(99,102,241,.32);
  box-shadow:0 20px 46px -30px rgba(79,70,229,.5);
}
.compare-label{
  display:flex;align-items:center;gap:.4rem;margin-bottom:1.1rem;
  font-family:var(--font-display);font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);
}
.compare-label-ai{color:var(--brand-600)}
.compare-player{
  display:flex;align-items:center;gap:.75rem;
  background:var(--soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:.75rem .9rem;
}
.compare-time{font-family:var(--font-display);font-weight:700;color:var(--ink-900);font-size:.85rem;font-variant-numeric:tabular-nums}
.compare-size{font-size:.72rem;color:var(--ink-400);white-space:nowrap}
.compare-wave{flex:1;display:flex;align-items:center;gap:2px;height:30px;min-width:0}
.compare-wave i{flex:1;height:var(--h,50%);border-radius:2px;background:rgba(148,163,184,.6)}
.compare-note{margin:1rem 0 0;font-size:.92rem;color:var(--ink-500)}

.result-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.result-list > li{font-size:.94rem;color:var(--ink-600);line-height:1.55}
.result-tag{
  display:inline-block;margin-right:.5rem;padding:.1rem .5rem;border-radius:6px;
  font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(99,102,241,.14);color:var(--brand-700);vertical-align:1px;
}
.result-sublist{list-style:none;margin:.45rem 0 0;padding:0 0 0 .1rem;display:flex;flex-direction:column;gap:.3rem}
.result-sublist li{position:relative;padding-left:1.15rem;font-size:.9rem;color:var(--ink-500)}
.result-sublist li::before{
  content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:2px;
  background:var(--grad-brand);
}

/* -------------------------------- 11. PLANOS ----------------------------- */
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:1.9rem 1.7rem;box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan-pro{border-color:rgba(99,102,241,.45);box-shadow:0 24px 60px -30px rgba(79,70,229,.55)}
.plan-badge{
  position:absolute;top:-13px;left:1.7rem;
  font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--grad-brand);border-radius:var(--radius-pill);padding:.3rem .8rem;
  box-shadow:var(--shadow-brand);
}
.plan-name{font-size:1.35rem;margin-bottom:.25rem}
.plan-desc{font-size:.93rem;color:var(--ink-500);margin-bottom:1rem}
.plan-price{display:flex;align-items:baseline;gap:.55rem;margin-bottom:1.2rem}
.price-value{font-family:var(--font-display);font-size:2.1rem;font-weight:800;color:var(--ink-900);letter-spacing:-.03em}
.price-period{font-size:.85rem;color:var(--ink-400)}
.plan-list{list-style:none;margin:1.6rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.7rem}
.plan-list li{display:flex;gap:.6rem;font-size:.94rem;color:var(--ink-600);line-height:1.5}
.plan-list .ico{margin-top:.18rem}
.plan-list .on .ico{color:#10b981}
.plan-list .off{color:var(--ink-400)}
.plan-list .off .ico{color:var(--ink-300)}
.plans-note{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:2.5rem 0 0;font-size:.9rem;color:var(--ink-400);text-align:center;
}
.plans-note .ico{color:var(--brand-600)}

/* --------------------------------- 12. FAQ ------------------------------- */
.faq .accordion-item{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius)!important;margin-bottom:.75rem;overflow:hidden;
}
.faq .accordion-button{
  font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink-900);
  background:transparent;padding:1.1rem 1.25rem;box-shadow:none;
}
.faq .accordion-button:not(.collapsed){background:var(--grad-brand-soft);color:var(--brand-700)}
.faq .accordion-button:focus{box-shadow:none;border-color:transparent}
.faq .accordion-button::after{background-size:1rem;width:1rem;height:1rem}
.faq .accordion-body{padding:0 1.25rem 1.2rem;font-size:.96rem;color:var(--ink-500)}

/* -------------------------------- 13. CTA -------------------------------- */
.cta{padding-bottom:6rem}
/* Cartão final: claro, com a marca aplicada em gradiente e a ação em destaque.
   Mantém a identidade sem bloco escuro e com contraste de texto acessível. */
.cta-box{
  position:relative;overflow:hidden;
  border-radius:var(--radius-xl);padding:3rem 2.4rem;
  background:var(--grad-cta-suave),var(--card);
  border:1px solid rgba(99,102,241,.28);
  box-shadow:0 30px 60px -40px rgba(79,70,229,.55);
}
.cta-box .section-title{color:var(--ink-900)}
.cta-box .eyebrow{color:var(--brand-600)}
.cta-box .cta-sub{color:var(--ink-500)}
.cta-box::after{
  content:"";position:absolute;inset:-40% -10% auto auto;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(99,102,241,.16),transparent 70%);pointer-events:none;
}
.btn-store{
  display:inline-flex;align-items:center;gap:.7rem;
  /* Cor fixa (e não var(--ink-900)): o badge da loja é escuro nos dois temas.
     No tema escuro --ink-900 vira quase branco e o texto do botão sumiria. */
  background:#0b1020;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
  padding:.7rem 1.2rem;box-shadow:0 18px 34px -20px rgba(11,16,32,.9);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease);
}
.btn-store:hover{color:#fff;transform:translateY(-2px);box-shadow:0 24px 42px -22px rgba(11,16,32,.95)}
.btn-store small{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72);line-height:1.2}
/* Especificidade explícita: a regra global de <strong> deixaria o nome
   "Google Play" escuro sobre o botão escuro. */
.btn-store strong{display:block;font-family:var(--font-display);font-size:1.05rem;line-height:1.25;color:#fff}
.btn-store small{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:rgba(255,255,255,.72)}
.btn-store .ico{color:#fff}
.cta-list{list-style:none;margin:0;padding:0 0 0 .5rem;display:flex;flex-direction:column;gap:.7rem}
.cta-list li{display:flex;gap:.55rem;align-items:flex-start;color:var(--ink-700);font-size:.95rem}
.cta-list .ico{color:#0d9488;margin-top:.15rem}

/* ------------------------------- 14. RODAPÉ ------------------------------ */
.site-footer{background:var(--soft);padding:3.5rem 0 1.5rem}
.footer-top{padding-bottom:2.5rem}
.footer-about{font-size:.92rem;color:var(--ink-500);max-width:32rem}
.footer-title{
  font-family:var(--font-display);font-size:.82rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-900);margin-bottom:.9rem;
}
.footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.footer-list a{font-size:.93rem;color:var(--ink-500)}
.footer-list a:hover{color:var(--brand-600)}
.footer-note{font-size:.8rem;color:var(--ink-400);margin:.9rem 0 0}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding-top:1.5rem;font-size:.86rem;color:var(--ink-400);
}
.footer-made{color:var(--ink-300)}

/* ------------------------------ 15. COMPONENTES -------------------------- */
.to-top{
  position:fixed;right:18px;bottom:18px;z-index:1040;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink-700);box-shadow:var(--shadow);
  display:grid;place-items:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.to-top .ico{transform:rotate(180deg)}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--brand-600);border-color:var(--brand-500)}

/* -------------------- 16. TRANSIÇÕES ENTRE SEÇÕES (ONDAS) ---------------- */
/* Em vez de uma linha reta entre blocos de cor diferente, uma curva suave,
   que dá movimento à leitura. O SVG é decorativo e usa preserveAspectRatio
   "none" para acompanhar qualquer largura sem distorcer o traço. */
.transicao{
  position:relative;z-index:1;
  line-height:0;margin-bottom:-1px;
  pointer-events:none;
}
.transicao svg{display:block;width:100%;height:clamp(52px,7vw,112px)}
.transicao path{
  fill:var(--cor-transicao,var(--page));
  /* traço sutil: separa a curva do fundo e dá sensação de relevo */
  stroke:var(--transicao-traco);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}

/* Curva interna: mesma forma, cor suave, cria profundidade sem peso */
.transicao-clara path{fill:#fff}

/* ------------------------------ 17. ANIMAÇÕES ---------------------------- */
/* O estado inicial escondido depende de .js-anim no <html>: sem JS, todo o
   conteúdo permanece visível (nunca fica em branco). */
.js-anim .anim-up{opacity:0;transform:translateY(18px)}
.js-anim .anim-up.is-visible{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-anim .anim-up.is-visible:nth-child(2){transition-delay:.07s}
.js-anim .anim-up.is-visible:nth-child(3){transition-delay:.14s}
.js-anim .anim-up.is-visible:nth-child(4){transition-delay:.2s}

@keyframes flutuar{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulsar{0%,100%{box-shadow:0 0 0 4px rgba(34,197,94,.2)}50%{box-shadow:0 0 0 8px rgba(34,197,94,.06)}}
@keyframes pulsar-onda{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.18)}}

/* Flutuação contínua e lenta do mockup: dá a sensação de que a tela
   respira, sem chamar mais atenção que o próprio conteúdo. */
@keyframes flutuar-suave{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
.phone-float{
  position:relative;
  animation:flutuar-suave 9s ease-in-out infinite;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .phone-float{animation:none}
}

/* --------------------------- 18. ACESSIBILIDADE -------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .anim-up{opacity:1;transform:none}
}

/* Dark mode: superfícies que precisam de ajuste fino */
[data-bs-theme="dark"] .hero{
  background:
    radial-gradient(1100px 460px at 12% -10%,rgba(99,102,241,.24),transparent 60%),
    radial-gradient(900px 420px at 92% 8%,rgba(6,182,212,.18),transparent 62%),
    var(--page);
}
[data-bs-theme="dark"] .btn-outline-soft{background:rgba(255,255,255,.04)}
[data-bs-theme="dark"] .phone{background:linear-gradient(160deg,#1b2237,#05070f 58%,#151c30)}
[data-bs-theme="dark"] .accordion-button::after{filter:invert(1) grayscale(1) brightness(1.6)}
[data-bs-theme="dark"] .feature-ico-light{background:rgba(255,255,255,.06)}
[data-bs-theme="dark"] .result-tag{background:rgba(129,140,248,.18);color:#c7d2fe}
[data-bs-theme="dark"] .cta-list .ico{color:#6ee7b7}

/* ------------------------------- 19. RESPONSIVO -------------------------- */
@media (max-width:991.98px){
  .section{padding:4rem 0}
  .section-head{margin-bottom:2.25rem}
  .cta-box{padding:2.25rem 1.5rem}
  .hero{padding-top:calc(var(--nav-h) + 2.25rem)}
}
@media (max-width:575.98px){
  .plan{padding:1.5rem 1.25rem}
  .compare-col{padding:1.25rem 1.1rem}
  .hero-points{gap:.5rem 1rem}

  /* Mockup proporcional a telas pequenas */
  .phone-wrap{max-width:300px}
  .phone{border-radius:38px;padding:10px}
  .phone-notch{top:17px;width:82px;height:19px}
  .phone-screen{border-radius:29px;padding:2rem .8rem .85rem;gap:.6rem}
  .app-bar-title{font-size:.76rem}
  .app-text{font-size:.75rem}
  .app-label{font-size:.64rem}
  .task-chip{font-size:.64rem}
  .app-cta{font-size:.68rem}
  .float-card-dentro{font-size:.64rem}
}

/* --------------------------- 20. IMPRESSÃO ------------------------------- */
@media print{
  .site-header,.to-top,.btn,.phone-wrap,.float-card{display:none!important}
  body{color:#000}
  .section{padding:1rem 0;break-inside:avoid}
}

/* ==========================================================================
   21. PÁGINAS LEGAIS (privacidade, termos, exclusão de conta)
   Estilos adicionais; reaproveitam os tokens deste arquivo.
   ========================================================================== */
.legal-hero{
  padding:calc(var(--nav-h) + 2.5rem) 0 2.5rem;
  background:
    radial-gradient(800px 300px at 10% -20%,rgba(99,102,241,.14),transparent 60%),
    var(--soft);
  border-bottom:1px solid var(--line);
}
.legal-hero .section-title{max-width:22ch}
/* A barra das páginas legais é sticky (ocupa lugar no fluxo), então o hero não
   precisa reservar a altura do menu fixo do site. */
.legal-nav + main .legal-hero{padding-top:2.5rem}
.legal-meta{font-size:.86rem;color:var(--ink-400);display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0}
.legal-nav{
  padding:.9rem 0;background:var(--page);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:1020;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.legal-back{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-weight:700;font-size:.94rem}
.legal-back .ico{transform:rotate(180deg)}
.legal-body{padding:3rem 0 4rem}
.legal-toc{
  position:sticky;top:96px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.3rem 1.2rem;
}
.legal-toc h2{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);margin-bottom:.8rem}
.legal-toc ol{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.45rem}
.legal-toc a{font-size:.9rem;color:var(--ink-500)}
.legal-toc a:hover{color:var(--brand-600)}
.legal-content{max-width:46rem}
.legal-content h2{
  font-size:1.3rem;margin:2.4rem 0 .8rem;padding-top:.4rem;scroll-margin-top:96px;
}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-size:1.03rem;margin:1.5rem 0 .5rem;color:var(--ink-800)}
.legal-content p,.legal-content li{font-size:.98rem;color:var(--ink-600)}
.legal-content ul,.legal-content ol{padding-left:1.25rem;display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.legal-content a{text-decoration:underline;text-underline-offset:2px}
.legal-callout{
  display:flex;gap:.8rem;background:var(--grad-brand-soft);
  border:1px solid rgba(99,102,241,.25);border-radius:var(--radius);
  padding:1.1rem 1.2rem;margin:1.5rem 0;
}
.legal-callout .ico{color:var(--brand-600);margin-top:.15rem}
.legal-callout p{margin:0;font-size:.95rem;color:var(--ink-700)}
/* Em telas pequenas a tabela vira lista de cartões com rótulo (data-label),
   o que evita colunas espremidas e leitura desconfortável. */
.legal-table{width:100%;max-width:100%;border-collapse:collapse;margin:1rem 0;font-size:.94rem}
.legal-table caption{caption-side:top;text-align:left}
.legal-table thead{display:none}
.legal-table tr{
  display:block;padding:.35rem 0 1rem;border-bottom:1px solid var(--line-strong);
}
.legal-table tr:last-child{border-bottom:0}
.legal-table td{
  display:block;border:0;padding:.3rem 0;vertical-align:top;
  overflow-wrap:anywhere;
}
.legal-table td::before{
  content:attr(data-label);
  display:block;
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);
  margin-bottom:.15rem;
}

@media (min-width:640px){
  .legal-table{
    display:table;table-layout:fixed;font-size:.94rem;
    border-collapse:collapse;
  }
  .legal-table thead{display:table-header-group}
  .legal-table tbody{display:table-row-group}
  .legal-table tr{display:table-row;padding:0;border-bottom:0}
  .legal-table th,.legal-table td{
    display:table-cell;padding:.7rem .8rem;
    border-bottom:1px solid var(--line);vertical-align:top;
  }
  .legal-table td::before{display:none}
  .legal-table th{
    font-family:var(--font-display);font-size:.82rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-400);
  }
}
.legal-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.legal-steps{counter-reset:passo;list-style:none;padding:0}
.legal-steps > li{
  counter-increment:passo;position:relative;padding-left:3rem;margin-bottom:1.1rem;
}
.legal-steps > li::before{
  content:counter(passo);position:absolute;left:0;top:-.1rem;
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  font-family:var(--font-display);font-weight:800;font-size:.9rem;color:#fff;background:var(--grad-brand);
}
.legal-steps strong{display:block;color:var(--ink-900);font-family:var(--font-display)}
@media (max-width:991.98px){
  .legal-toc{position:static;margin-bottom:2rem}
  .legal-body{padding:2rem 0 3rem}
}

/* ==========================================================================
   22. SELETOR DE IDIOMA
   Mesmo componente na navbar do site e na barra das páginas legais.
   ========================================================================== */
.nav-idiomas{
  display:inline-flex;align-items:center;gap:.12rem;padding:.2rem;flex:none;
  border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card);
}
.nav-idiomas a{
  padding:.32rem .58rem;border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:700;font-size:.76rem;
  letter-spacing:.03em;line-height:1;color:var(--ink-500);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.nav-idiomas a:hover,.nav-idiomas a:focus{color:var(--ink-900);background:var(--soft-2)}
.nav-idiomas a[aria-current="true"]{background:var(--grad-brand);color:#fff}
.nav-idiomas a[aria-current="true"]:hover{color:#fff}
@media (max-width:400px){
  .nav-idiomas a{padding:.3rem .44rem;font-size:.72rem}
}
.legal-nav .nav-idiomas{background:var(--soft-2)}
/* Em telas estreitas a barra legal não cabe com o rótulo: fica só a seta
   (o aria-label do link mantém o sentido para leitores de tela). */
@media (max-width:575.98px){
  .legal-back-texto{display:none}
  .legal-nav .container{gap:.4rem}
}

/* ==========================================================================
   23. BLOG E MATÉRIAS (/blog e /blog/{slug})
   Reaproveita os tokens do site. O conteúdo da matéria vem da LLMO e chega
   como HTML sem classes: a tipografia abaixo é o que dá forma a ele.
   ========================================================================== */
.artigo-hero{
  padding:calc(var(--nav-h) + 3rem) 0 2.5rem;
  background:
    radial-gradient(900px 340px at 8% -20%,rgba(99,102,241,.15),transparent 62%),
    radial-gradient(800px 320px at 96% 0%,rgba(6,182,212,.12),transparent 64%),
    var(--soft);
  border-bottom:1px solid var(--line);
}
.artigo-trilha ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:.35rem;padding:0;margin:0 0 1rem;font-size:.85rem;color:var(--ink-400);
}
.artigo-trilha li+li::before{content:"›";margin-right:.35rem;color:var(--ink-300)}
.artigo-trilha a{color:var(--ink-500)}
.artigo-trilha a:hover{color:var(--brand-600)}
.artigo-trilha li:last-child{color:var(--ink-400);overflow-wrap:anywhere}
.artigo-titulo{font-size:clamp(1.85rem,1.2rem + 2.6vw,2.85rem);max-width:30ch}
.artigo-resumo{font-size:1.08rem;color:var(--ink-500);max-width:62ch}
.artigo-meta{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:.88rem;color:var(--ink-400);margin:0;
}
.artigo-ponto{color:var(--ink-300)}

/* Banner de download: fica logo acima do texto, sem competir com o título. */
.app-banner{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  background:var(--grad-brand-soft);border:1px solid var(--destaque-borda);
  border-radius:var(--radius-lg);padding:1.1rem 1.3rem;margin-top:2.5rem;
}
.app-banner-marca{flex:none;border-radius:12px;box-shadow:0 6px 16px -8px rgba(79,70,229,.7)}
.app-banner-texto{flex:1 1 260px;display:flex;flex-direction:column;gap:.2rem}
.app-banner-texto strong{font-family:var(--font-display);color:var(--ink-900);font-size:1.02rem}
.app-banner-texto span{font-size:.92rem;color:var(--ink-500)}
.btn-store-sm{padding:.55rem 1rem;flex:none}
.btn-store-sm strong{font-size:.98rem}
.btn-store-sm small{font-size:.62rem}

.artigo-corpo{padding:3rem 0 1rem}
.artigo-conteudo{max-width:46rem}
.artigo-conteudo h2{
  font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem);
  margin:2.6rem 0 .9rem;scroll-margin-top:96px;
}
.artigo-conteudo h3{font-size:1.16rem;margin:1.9rem 0 .6rem;color:var(--ink-800)}
.artigo-conteudo h4{font-size:1.02rem;margin:1.4rem 0 .5rem}
.artigo-conteudo p,.artigo-conteudo li{font-size:1.02rem;color:var(--ink-600)}
.artigo-conteudo ul,.artigo-conteudo ol{
  padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem;
}
.artigo-conteudo a{text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.artigo-conteudo img{border-radius:var(--radius);height:auto}
.artigo-conteudo figure{margin:1.8rem 0}
.artigo-conteudo figcaption{font-size:.85rem;color:var(--ink-400);margin-top:.5rem}
.artigo-conteudo blockquote{
  margin:1.8rem 0;padding:1rem 1.2rem;border-left:3px solid var(--brand-500);
  background:var(--soft);border-radius:0 var(--radius) var(--radius) 0;color:var(--ink-600);
}
.artigo-conteudo blockquote p:last-child{margin-bottom:0}
.artigo-conteudo table{
  width:100%;max-width:100%;border-collapse:collapse;margin:1.5rem 0;
  font-size:.95rem;display:block;overflow-x:auto;
}
.artigo-conteudo th,.artigo-conteudo td{border:1px solid var(--line);padding:.6rem .75rem;text-align:left}
.artigo-conteudo th{background:var(--soft-2);font-family:var(--font-display);color:var(--ink-800)}
.artigo-conteudo hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.artigo-conteudo code{background:var(--soft-2);padding:.1rem .35rem;border-radius:6px;font-size:.92em}
.artigo-conteudo > *:first-child{margin-top:0}

.artigo-faq{background:var(--soft);border-top:1px solid var(--line)}
.faq-lista{max-width:46rem}
.faq-item{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1.1rem;margin-bottom:.7rem;
}
.faq-item summary{
  font-family:var(--font-display);font-weight:700;color:var(--ink-900);
  cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;margin-left:1rem;color:var(--brand-600);font-weight:800}
.faq-item[open] summary::after{content:"–"}
.faq-resposta{margin-top:.6rem;color:var(--ink-500);font-size:.97rem}

.artigo-cta{padding-top:3.5rem}
.artigo-relacionados{background:var(--soft);border-top:1px solid var(--line)}

.blog-hero{padding-bottom:2.75rem}
.blog-lista{padding:3.5rem 0 1rem}
/* auto-fill (e não auto-fit) mantém as colunas mesmo com um cartão só, e o
   1fr faz a grade ocupar a largura inteira do container. */
.blog-grid{
  display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));
}
.blog-grid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))}
.blog-card{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.4rem 1.5rem;box-shadow:var(--shadow-xs);
  transition:transform .22s var(--ease),box-shadow .25s var(--ease),border-color .2s var(--ease);
}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--line-strong)}
.blog-card-link{color:inherit}
.blog-card-titulo{font-size:1.12rem;margin-bottom:.5rem;transition:color .2s var(--ease)}
.blog-card:hover .blog-card-titulo{color:var(--brand-600)}
.blog-card-resumo{font-size:.94rem;color:var(--ink-500);margin-bottom:1rem}
.blog-card-meta{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem;color:var(--ink-400);margin:auto 0 0}
.blog-vazio{color:var(--ink-400);max-width:46rem}

@media (max-width:575.98px){
  .app-banner{align-items:flex-start}
  .app-banner .btn-store-sm{width:100%;justify-content:center}
  .artigo-hero{padding-top:calc(var(--nav-h) + 2rem)}
}

@media print{
  .app-banner,.artigo-trilha,.artigo-relacionados{display:none!important}
}

/* Classes que a LLMO usa no HTML da matéria (conteúdo sem classes nossas). */
.artigo-conteudo .gancho{font-size:1.1rem;color:var(--ink-700)}
.artigo-conteudo .resposta-direta{
  background:var(--grad-brand-soft);border:1px solid rgba(99,102,241,.25);
  border-radius:var(--radius);padding:1.1rem 1.2rem;margin:1.5rem 0;
  color:var(--ink-700);
}
/* O hero já mostra data e tempo de leitura; estas duas linhas são o mesmo dado. */
.artigo-conteudo .meta-editorial,
.artigo-conteudo .tempo-leitura{display:none}
.artigo-conteudo > article > *:first-child{margin-top:0}
/* No celular a trilha fica só com "Início › Blog": o título já é o <h1>. */
@media (max-width:575.98px){
  .artigo-trilha li:last-child{display:none}
}

/* Links internos no fim da matéria: dão continuidade a quem chegou do
   buscador e espalham autoridade entre as páginas do site. */
.artigo-interno{
  max-width:46rem;margin:2.5rem auto 0;padding:1.3rem 1.4rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
}
.artigo-interno-titulo{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:.9rem;
}
.artigo-interno-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.artigo-interno-lista a{
  display:inline-flex;align-items:center;
  padding:.45rem .9rem;border-radius:var(--radius-pill);
  background:var(--soft-2);color:var(--ink-700);
  font-family:var(--font-display);font-weight:600;font-size:.9rem;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.artigo-interno-lista a:hover{color:var(--brand-600);background:var(--grad-brand-soft)}

/* Imagem de capa da matéria: a mesma do og:image e do JSON-LD. Fica na
   largura da coluna de texto para não competir com o hero. */
.artigo-capa{
  max-width:46rem;margin:2.5rem auto 0;padding:0 0;
}
.artigo-capa img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius-lg);border:1px solid var(--line);
  background:var(--soft-2);box-shadow:var(--shadow-sm);
}
.artigo-capa figcaption{
  margin-top:.6rem;font-size:.85rem;color:var(--ink-400);
}
@media (max-width:575.98px){
  .artigo-capa{margin-top:1.75rem;padding:0 .75rem}
}

/* A primeira coluna das tabelas virou cabeçalho de linha (th scope="row"):
   aqui ela não deve parecer um cabeçalho de coluna. */
.artigo-conteudo th[scope="row"]{
  background:transparent;font-family:var(--font-body);font-weight:600;
  color:var(--ink-800);text-align:left;
}

/* ==========================================================================
   24. AUTOR
   Mesmo autor em todas as matérias: a caixa no fim do texto e a linha de
   apoio no hero. Os dados vêm de api/app/servicos/autor.py.
   ========================================================================== */
.artigo-meta-autor{display:inline-flex;align-items:center;gap:.45rem}
.artigo-meta-autor img{
  width:24px;height:24px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);background:var(--soft-2);
}
.artigo-meta-autor a{color:var(--ink-600);font-weight:600}
.artigo-meta-autor a:hover{color:var(--brand-600)}

.autor-caixa{
  display:flex;gap:1.2rem;align-items:flex-start;
  max-width:46rem;margin:2.5rem auto 0;padding:1.4rem 1.5rem;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);
}
.autor-foto{
  flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line-strong);background:var(--soft-2);
}
.autor-nome{
  font-size:1.1rem;margin-bottom:.2rem;display:flex;align-items:center;
  gap:.5rem;flex-wrap:wrap;
}
.autor-cargo{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand-600);
  background:var(--grad-brand-soft);border:1px solid var(--destaque-borda);
  border-radius:var(--radius-pill);padding:.2rem .6rem;
}
.autor-bio{font-size:.95rem;color:var(--ink-500);margin-bottom:.8rem}
.autor-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  padding:.4rem .85rem;border-radius:var(--radius-pill);
  background:var(--soft-2);color:var(--ink-700);
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.autor-link:hover{color:var(--brand-600);background:var(--grad-brand-soft)}
@media (max-width:575.98px){
  .autor-caixa{flex-direction:column;align-items:center;text-align:center;padding:1.5rem 1.25rem}
  .autor-nome{justify-content:center}
}

/* ==========================================================================
   25. LISTAGEM DO BLOG: destaque, contagem e paginação
   ========================================================================== */
.blog-contagem{
  font-family:var(--font-display);font-size:.85rem;font-weight:600;
  letter-spacing:.02em;color:var(--ink-400);margin:.35rem 0 0;
}

/* O título estica e cobre o cartão: um link só, o cartão inteiro clicável. */
.blog-card{position:relative}
.blog-card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.blog-card-acao{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--brand-600);
}
.blog-card-acao .ico{transition:transform .2s var(--ease)}
.blog-card:hover .blog-card-acao .ico{transform:translateX(3px)}

/* O primeiro cartão da página 1 ocupa a linha inteira: vira uma faixa de
   destaque sem deixar buraco na grade. */
@media (min-width:768px){
  .blog-card-destaque{grid-column:1/-1;padding:1.9rem 2.1rem}
  .blog-card-destaque .blog-card-titulo{font-size:1.5rem;max-width:34ch}
  .blog-card-destaque .blog-card-resumo{font-size:1.02rem;max-width:72ch}
}

.blog-paginacao{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.4rem;margin-top:2.75rem;
}
.blog-paginacao a,.blog-paginacao > span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 .85rem;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--card);color:var(--ink-600);
  font-family:var(--font-display);font-weight:700;font-size:.92rem;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.blog-paginacao a:hover{color:var(--brand-600);border-color:var(--brand-500)}
.blog-paginacao .pag-seta{min-width:auto;gap:.35rem}
.blog-paginacao .pag-numero.is-atual{
  background:var(--grad-brand);border-color:transparent;color:#fff;
}
.blog-paginacao .pag-vazio,
.blog-paginacao .is-off{border:0;background:transparent;color:var(--ink-300);min-width:auto}
@media (max-width:575.98px){
  .blog-paginacao > a,.blog-paginacao > span{min-width:38px;height:38px;padding:0 .6rem}
  .blog-paginacao .pag-seta{font-size:.85rem}
}