/* MyPerfolio — folha de estilo única do site público.
 *
 * Substituiu base.css e blog.css: eram duas, e o cabeçalho e o rodapé
 * divergiam entre elas.
 *
 * Duas cores foram escurecidas em relação ao original. O critério é a norma de
 * acessibilidade (WCAG AA, 4.5:1 para texto corrido), e não gosto:
 *   --text-mute  #7C8AA0 -> #5A6B82   (3,50:1 -> 5,15:1)
 *   --gold       #C9A227 -> #8A6D12   (2,42:1 -> 5,42:1)
 * A primeira pinta dica de formulário e metadado de artigo; a segunda, os
 * destaques. Eram justamente os textos que ficavam ilegíveis.
 */
/* ==========================================================================
   MyPerfolio — folha de estilo do site
   Versão 2.0 · agosto de 2026
   Um único arquivo para todas as páginas: home, preços, FAQ, blog,
   artigos, cadastro e páginas legais.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* superfícies */
  --bg:              #FBFAF8;
  --surface:         #FFFFFF;
  --surface-2:       #F4F6F8;
  --ink:             #0A1628;
  --ink-2:           #0F2338;

  /* texto */
  --text:            #16202E;
  --text-soft:       #52627A;
  --text-mute:       #5A6B82;
  --text-on-dark:    #E9EFF6;
  --text-on-dark-2:  #C3D2E3;   /* corpo do rodape — 11,8:1 sobre --ink */
  --text-on-dark-3:  #A9BCD2;   /* linha legal do rodape — 9,3:1 sobre --ink */

  /* marca */
  --brand:           #0E7C5A;
  --brand-600:       #0A6349;
  --brand-300:       #34D399;
  --brand-tint:      #E8F5F0;

  --gold:            #8A6D12;
  --danger:          #C0392B;
  --danger-tint:     #FDEDEA;

  /* linhas */
  --line:            #E3E8EF;
  --line-soft:       #EEF2F6;
  --line-dark:       #23384F;

  /* forma */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10,22,40,.06), 0 1px 3px rgba(10,22,40,.04);
  --shadow:    0 4px 12px rgba(10,22,40,.06), 0 12px 32px rgba(10,22,40,.07);
  --shadow-lg: 0 8px 24px rgba(10,22,40,.10), 0 32px 64px rgba(10,22,40,.12);

  /* ritmo */
  --wrap: 1160px;
  --wrap-narrow: 760px;
  --gutter: 24px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-.021em;
  font-weight:700;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); letter-spacing:-.032em; }
h2{ font-size:clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem); letter-spacing:-.026em; }
h3{ font-size:1.18rem; letter-spacing:-.014em; }
h4{ font-size:1rem; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--brand-600); text-decoration:none; }
a:hover{ text-decoration:underline; }

/*
 * O negrito herda a cor de quem o contém. Fixá-lo em --ink (o azul quase preto)
 * funcionava no fundo claro e apagava o texto no fundo escuro: no cartão do
 * relatório anual, "Renda Variável", "Bens e Direitos" e as outras fichas
 * simplesmente sumiam — texto escuro sobre fundo escuro. Um destaque não pode
 * ser o que esconde a palavra.
 */
strong,b{ font-weight:650; color:inherit; }
small{ font-size:.85em; }
hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }

img,svg{ max-width:100%; height:auto; display:block; }

ul,ol{ margin:0 0 1.1em; padding-left:1.25em; }
li{ margin:.35em 0; }

:focus-visible{
  outline:3px solid var(--brand-300);
  outline-offset:2px;
  border-radius:4px;
}

.tabular{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.mono{ font-family:var(--mono); }
.nowrap{ white-space:nowrap; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- 3. Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:var(--wrap-narrow); }

.section{ padding:clamp(3.5rem, 2rem + 6vw, 6.5rem) 0; }
.section--tight{ padding:clamp(2.5rem, 1.5rem + 4vw, 4rem) 0; }
.section--alt{ background:var(--surface-2); }
.section--dark{ background:var(--ink); color:var(--text-on-dark); }
.section--dark h2,.section--dark h3{ color:#fff; }
.section--dark a{ color:var(--brand-300); }

.section-head{ max-width:44rem; margin-bottom:2.75rem; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head p{ font-size:1.08rem; color:var(--text-soft); margin-bottom:0; }
.section--dark .section-head p{ color:var(--text-on-dark-2); }

.eyebrow{
  display:inline-block;
  font-size:.735rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--brand-600);
  margin-bottom:.9rem;
}
.section--dark .eyebrow,.hero .eyebrow{ color:var(--brand-300); }

.grid{ display:grid; gap:1.25rem; }
/* impede que tabelas largas estourem a coluna do grid */
.grid > *{ min-width:0; }
@media (min-width:720px){
  .grid--2{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:960px){
  .grid--3{ grid-template-columns:repeat(3,1fr); }
  .grid--4{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:720px) and (max-width:959px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- 4. Cabeçalho ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,248,.86);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.site-header__inner{
  display:flex; align-items:center; gap:1.5rem;
  min-height:66px;
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand:hover{ text-decoration:none; }
/* A marca e o logotipo do produto, nao um icone generico: o site novo vinha
   com um desenho de barras improvisado, e trocar a marca nao estava em
   questao. O quadrado colorido sai — o SVG ja tem forma e cor proprias. */
.brand__mark{ width:34px; height:34px; flex:none; display:grid; place-items:center; }
.brand__mark img{ width:34px; height:34px; }
.brand__name{
  font-weight:750; font-size:1.16rem; letter-spacing:-.026em; color:var(--ink);
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:.35rem; }
.nav a{
  padding:.5rem .7rem; border-radius:var(--r-sm);
  font-size:.94rem; font-weight:550; color:var(--text-soft);
}
.nav a:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:650; }

/* o botão dentro da nav precisa vencer as regras de .nav a */
.nav a.btn{
  padding:.55rem 1rem;
  border-radius:var(--r-sm);
  font-size:.92rem; font-weight:650;
  white-space:nowrap;
}
.nav a.btn--primary,
.nav a.btn--primary:hover{
  color:#fff;
  background:linear-gradient(145deg,var(--brand) 0%, var(--brand-600) 100%);
}

/* ---------- 4b. Menu (telas estreitas) ---------- */
.menu{ display:none; margin-left:auto; position:relative; }

.menu > summary{
  list-style:none; cursor:pointer;
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:11px; box-shadow:var(--shadow-sm);
}
.menu > summary::-webkit-details-marker{ display:none; }
.menu > summary::marker{ content:""; }

.menu__bars,
.menu__bars::before,
.menu__bars::after{
  display:block; width:18px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .18s ease, background .18s ease, top .18s ease;
}
.menu__bars{ position:relative; }
.menu__bars::before,.menu__bars::after{ content:""; position:absolute; left:0; }
.menu__bars::before{ top:-6px; }
.menu__bars::after{ top:6px; }
.menu[open] .menu__bars{ background:transparent; }
.menu[open] .menu__bars::before{ top:0; transform:rotate(45deg); }
.menu[open] .menu__bars::after{ top:0; transform:rotate(-45deg); }

.menu__panel{
  position:absolute; right:0; top:calc(100% + 10px);
  min-width:230px; z-index:60;
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  padding:.5rem; display:grid; gap:.1rem;
}
.menu__panel a{
  padding:.7rem .8rem; border-radius:var(--r-sm);
  color:var(--text); font-weight:550; font-size:1rem;
}
.menu__panel a:hover{ background:var(--surface-2); text-decoration:none; }
.menu__panel a[aria-current="page"]{ color:var(--ink); font-weight:700; background:var(--surface-2); }
.menu__panel a.btn{ margin-top:.4rem; color:#fff; }
.menu__panel a.btn:hover{ background:linear-gradient(145deg,var(--brand) 0%, var(--brand-600) 100%); }

/*
 * Na tela estreita a barra some inteira e vira o menu sanduiche — menos o
 * ENTRAR, que fica ao lado dele.
 *
 * Entrar nao e navegacao: e o que o cliente que ja paga faz todo mes, e
 * escondê-lo atras de dois toques penaliza justamente quem ja comprou. O
 * "Criar conta" continua dentro do menu porque ele tambem esta em botao grande
 * no corpo de toda pagina — o visitante novo nao precisa procurar.
 */
@media (max-width:880px){
  .nav{ display:flex; margin-left:auto; gap:0; }
  .nav > *{ display:none; }
  /*
   * O botao precisa ser escondido por NOME, e nao pelo curinga acima.
   * ".btn{display:inline-flex}" mora mais abaixo nesta folha e tem a mesma
   * especificidade que ".nav > *", entao vencia por vir depois — o "Criar
   * conta" reaparecia cortado na beirada e empurrava o sanduiche para fora da
   * tela. Com a classe no seletor a conta muda e a regra pega.
   */
  .nav > a.btn{ display:none; }
  /* o seletor termina em app-web.html porque nos artigos o caminho e relativo
     ("../app-web.html"), e o link e o mesmo */
  .nav > a[href$="app-web.html"]{ display:inline-flex; padding:.5rem .55rem; }
  .menu{ display:block; margin-left:.15rem; }
}

/* ---------- 5. Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; flex-direction:column;
  padding:.85rem 1.5rem;
  border-radius:var(--r);
  border:1px solid transparent;
  font:inherit; font-weight:650; font-size:1rem;
  line-height:1.25; text-align:center;
  cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn small{
  /* .82 de opacidade deixava a segunda linha mais fraca que a primeira sem
     necessidade — ela diz o que se quer saber antes de clicar */
  font-weight:500; font-size:.775rem; opacity:.95; letter-spacing:.005em;
}

.btn--primary{
  background:linear-gradient(145deg,var(--brand) 0%, var(--brand-600) 100%);
  color:#fff; box-shadow:0 2px 6px rgba(14,124,90,.24), 0 10px 24px rgba(14,124,90,.20);
}
.btn--primary:hover{ box-shadow:0 4px 10px rgba(14,124,90,.28), 0 16px 34px rgba(14,124,90,.26); }

.btn--ghost{
  background:var(--surface); color:var(--ink);
  border-color:var(--line); box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{ border-color:#CBD5E1; }

/*
 * O botao secundario do fundo escuro. Era um vidro fosco — 7% de branco sobre
 * o azul do hero, com a borda em 22% — e sumia: no monitor do dono do site
 * "Criar minha conta" e "Ver a demonstracao" tinham a cor do proprio fundo.
 * Um botao que nao se ve nao e discreto, e um botao que nao existe. Agora tem
 * contorno cheio e fundo claro o bastante para ele se recortar do fundo,
 * continuando o SEGUNDO botao: o primario e verde, este e vazado.
 */
.btn--on-dark{
  background:rgba(255,255,255,.16); color:#fff;
  border:2px solid rgba(255,255,255,.85);
}
.btn--on-dark:hover{ background:rgba(255,255,255,.28); border-color:#fff; }

.btn--sm{ padding:.55rem 1rem; font-size:.92rem; border-radius:var(--r-sm); }
.btn--block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:stretch; }
.btn-row--center{ justify-content:center; }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(52,211,153,.20), transparent 62%),
    radial-gradient(760px 460px at 8% 108%, rgba(37,99,235,.16), transparent 60%),
    linear-gradient(168deg, #0B1B2E 0%, var(--ink) 46%, #07101D 100%);
  color:var(--text-on-dark);
  padding:clamp(3.25rem, 2rem + 6vw, 6rem) 0 clamp(3rem, 2rem + 5vw, 5.25rem);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(760px 460px at 50% 20%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(760px 460px at 50% 20%, #000 35%, transparent 78%);
}
.hero__inner{ position:relative; z-index:1; }
.hero h1{ color:#fff; max-width:17ch; }
.hero__lead{
  font-size:clamp(1.06rem, .98rem + .4vw, 1.24rem);
  color:var(--text-on-dark-2);
  max-width:56ch; margin-bottom:1.6rem;
}
.hero__trust{
  display:flex; flex-wrap:wrap; gap:.5rem .65rem;
  margin:0 0 1.9rem; padding:0; list-style:none;
}
.hero__trust li{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.855rem; font-weight:550; color:var(--text-on-dark);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-pill);
  padding:.34rem .8rem .34rem .62rem;
  margin:0;
}
.hero__trust svg{ width:14px; height:14px; flex:none; color:var(--brand-300); }
.hero__note{
  margin-top:1.15rem; font-size:.9rem; color:var(--text-on-dark-2);
}
.hero__note strong{ color:#fff; }

@media (min-width:1000px){
  .hero__grid{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px);
    gap:3.5rem; align-items:center;
  }
}

/* ---------- 7. Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.6rem 1.5rem;
  box-shadow:var(--shadow-sm);
}
.card h3{ margin-bottom:.45rem; }
.card p{ color:var(--text-soft); font-size:.975rem; }
.card--flat{ box-shadow:none; }
.card--pad-lg{ padding:2rem 1.85rem; }

.card__icon{
  width:40px; height:40px; border-radius:11px; margin-bottom:1rem;
  display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-600);
}
.card__icon svg{ width:20px; height:20px; }

.section--dark .card{
  background:rgba(255,255,255,.045);
  border-color:var(--line-dark);
  box-shadow:none;
}
.section--dark .card p{ color:var(--text-on-dark-2); }
.section--dark .card__icon{ background:rgba(52,211,153,.14); color:var(--brand-300); }

/* passos numerados */
.steps{ counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:1.25rem; }
@media (min-width:840px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.steps li{
  counter-increment:step; margin:0; position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:2.4rem 1.5rem 1.6rem;
  box-shadow:var(--shadow-sm);
}
.steps li::before{
  content:counter(step);
  position:absolute; top:1.5rem; left:1.5rem;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:#fff;
  font-size:.85rem; font-weight:700;
}
.steps h3{ margin:1.15rem 0 .4rem; }
.steps p{ color:var(--text-soft); font-size:.975rem; margin:0; }

/* lista de problemas */
.painlist{ list-style:none; padding:0; margin:0; display:grid; gap:.15rem; }
.painlist li{
  display:flex; gap:.85rem; align-items:flex-start;
  padding:.85rem 0; margin:0;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-soft);
}
.painlist li:last-child{ border-bottom:0; }
.painlist svg{ width:18px; height:18px; flex:none; margin-top:.3rem; color:var(--danger); opacity:.75; }

/* ---------- 8. Demonstrativo (o "cálculo aberto") ---------- */
.calc{
  background:var(--surface);
  /* o cartão é branco mesmo dentro de seções escuras: fixa a cor do texto */
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  font-variant-numeric:tabular-nums;
}
.calc__head{
  background:var(--ink);
  color:#fff;
  padding:.85rem 1.15rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.calc__title{ font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.calc__sub{ font-size:.75rem; color:var(--text-on-dark-2); letter-spacing:.04em; text-transform:uppercase; }
.calc__body{ padding:.5rem 1.15rem 1.15rem; }

.calc__row{
  display:grid; grid-template-columns:1fr auto;
  gap:.35rem 1rem; align-items:baseline;
  padding:.62rem 0;
  border-bottom:1px solid var(--line-soft);
}
.calc__row:last-child{ border-bottom:0; }
.calc__label{ font-weight:600; font-size:.95rem; color:var(--text); }
.calc__hint{
  grid-column:1/-1; font-size:.79rem; color:var(--text-mute);
  margin-top:-.12rem;
}
.calc__val{ font-weight:650; font-size:.98rem; }
.calc__val--neg{ color:var(--danger); }
.calc__val--pos{ color:var(--brand-600); }

.calc__row--sum{ border-top:1px solid var(--line); border-bottom:0; margin-top:.35rem; padding-top:.8rem; }
.calc__row--total{
  margin:.9rem -1.15rem -1.15rem; padding:1.05rem 1.15rem;
  background:var(--brand-tint); border-bottom:0;
  border-top:1px solid rgba(14,124,90,.18);
}
.calc__row--total .calc__label{ font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--brand-600); }
.calc__row--total .calc__val{ font-size:1.5rem; font-weight:750; color:var(--brand-600); letter-spacing:-.02em; }

.calc__caption{
  margin:.9rem 0 0; font-size:.82rem; color:var(--text-mute); text-align:center;
}

/* ---------- 9. Preço ---------- */
.price-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:2.25rem 1.9rem;
  text-align:center;
  max-width:520px; margin-inline:auto;
}
.price-card__amount{
  display:flex; align-items:baseline; justify-content:center; gap:.3rem;
  margin:.4rem 0 .1rem;
}
.price-card__cur{ font-size:1.35rem; font-weight:600; color:var(--text-soft); }
.price-card__num{
  font-size:clamp(3rem,2rem + 4vw,4.25rem); font-weight:750;
  letter-spacing:-.045em; color:var(--ink); line-height:1;
}
.price-card__per{ font-size:1rem; color:var(--text-soft); font-weight:550; }
.price-card__unit{ font-size:.95rem; color:var(--text-soft); margin-bottom:1.4rem; }

.price-list{ list-style:none; padding:0; margin:0 0 1.75rem; text-align:left; }
.price-list li{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.6rem 0; margin:0; font-size:.97rem;
  border-bottom:1px solid var(--line-soft);
}
.price-list li:last-child{ border-bottom:0; }
.price-list svg{ width:17px; height:17px; flex:none; margin-top:.32rem; color:var(--brand); }

.callout{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:var(--r);
  padding:1.1rem 1.25rem;
  font-size:.955rem;
}
.callout p{ margin-bottom:.6rem; }
.callout > strong:first-child{ display:block; margin-bottom:.15rem; }
.callout--warn{ border-left-color:var(--gold); }
.callout--info{ border-left-color:#2563EB; }

.example-box{
  background:var(--ink); color:var(--text-on-dark);
  border-radius:var(--r); padding:1.15rem 1.3rem;
  font-size:.95rem; font-variant-numeric:tabular-nums;
}
.example-box strong{ color:#fff; }
.example-box .example-box__eq{
  font-family:var(--mono); font-size:.9rem; color:var(--brand-300);
  display:block; margin-top:.5rem;
}

/* ---------- 10. FAQ / acordeão ---------- */
.faq{ display:grid; gap:.7rem; }
.faq details{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:1.05rem 3rem 1.05rem 1.3rem;
  font-weight:650; font-size:1.02rem; color:var(--ink);
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:1.3rem; top:1.35rem;
  width:9px; height:9px; border-right:2px solid var(--text-mute);
  border-bottom:2px solid var(--text-mute);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.55rem; }
.faq summary:hover{ background:var(--surface-2); }
.faq__body{ padding:0 1.3rem 1.25rem; color:var(--text-soft); font-size:.98rem; }
.faq__body p:first-child{ margin-top:0; }

/* ---------- 11. Blog ---------- */
.post-grid{ display:grid; gap:1.25rem; }
@media (min-width:720px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .post-grid{ grid-template-columns:repeat(3,1fr); } }

.post-card{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.5rem;
  box-shadow:var(--shadow-sm); text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover{
  text-decoration:none; transform:translateY(-2px);
  box-shadow:var(--shadow); border-color:#CBD5E1;
}
.post-card__meta{
  display:flex; align-items:center; gap:.55rem;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-600); font-weight:700; margin-bottom:.75rem;
}
.post-card__meta span{ color:var(--text-mute); font-weight:600; letter-spacing:.04em; }
.post-card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.post-card p{ color:var(--text-soft); font-size:.94rem; margin:0 0 1.1rem; }
.post-card__more{ margin-top:auto; font-weight:650; font-size:.92rem; color:var(--brand-600); }

/* ---------- 12. Artigo / texto corrido ---------- */
.prose{ max-width:70ch; font-size:1.06rem; }
.prose h2{ margin-top:2.4rem; font-size:1.6rem; }
.prose h3{ margin-top:1.9rem; font-size:1.18rem; }
.prose ul,.prose ol{ padding-left:1.35em; }
.prose li{ margin:.5em 0; }
.prose blockquote{
  margin:1.75rem 0; padding:.2rem 0 .2rem 1.25rem;
  border-left:3px solid var(--brand);
  color:var(--text-soft); font-style:italic;
}
.prose table{ width:100%; }
.prose code{
  font-family:var(--mono); font-size:.9em;
  background:var(--surface-2); border:1px solid var(--line);
  padding:.1em .38em; border-radius:5px;
}

.article-head{ padding:clamp(2.5rem,2rem + 3vw,4rem) 0 1.5rem; }
.article-head .eyebrow span{ color:var(--text-mute); font-weight:600; }
.article-head h1{ font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem); max-width:22ch; }
.article-head__lead{ font-size:1.12rem; color:var(--text-soft); max-width:60ch; }
/* Data do artigo. Existe na tela porque a marcacao do Google diz a mesma
   coisa: data que so o robo ve e data que o robo desconta — e o leitor
   tambem quer saber se o texto e de ontem ou de tres anos atras. */
.artigo-datas{ font-size:.86rem; color:var(--text-mute); margin:.4rem 0 0; }

/* ---------- 13. Tabelas ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.5rem 0; }
table{
  width:100%; border-collapse:collapse; font-size:.95rem;
  font-variant-numeric:tabular-nums;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
th,td{ padding:.7rem .85rem; text-align:left; border-bottom:1px solid var(--line-soft); }
th{
  background:var(--surface-2); font-weight:650; font-size:.82rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-soft);
}
tbody tr:last-child td{ border-bottom:0; }
td.num,th.num{ text-align:right; }

/* ---------- 14. Formulários ---------- */
.form-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:2rem 1.85rem; max-width:520px; margin-inline:auto;
}
.field{ margin-bottom:1.15rem; }
.field label{
  display:block; font-weight:600; font-size:.92rem;
  color:var(--ink); margin-bottom:.35rem;
}
.field .req{ color:var(--danger); }
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=tel],
.field select,
.field textarea{
  width:100%; padding:.7rem .85rem;
  font:inherit; font-size:1rem; color:var(--text);
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(14,124,90,.14);
}
.field .hint{ font-size:.83rem; color:var(--text-mute); margin:.4rem 0 0; }
.field--inline{ display:flex; gap:.6rem; align-items:flex-start; }
.field--inline input[type=checkbox]{ margin-top:.32rem; width:17px; height:17px; flex:none; accent-color:var(--brand); }
/* O olho da senha vem do assets/olho.js, que envolve o campo num .pwWrap.
   Ele e inline-block por padrao — para nao esticar num formulario de campos
   estreitos, como o do administrador. Nos formularios do site o campo ocupa a
   linha inteira, e o wrap precisa acompanhar, senao o olho fica no meio da
   linha em vez de na beirada do campo. */
.form-card .pwWrap{ width:100%; }
.form-divider{
  margin:1.6rem 0 1.2rem; padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-size:.9rem; color:var(--text-mute);
}

/* ---------- 15. Faixa de CTA ---------- */
.cta-band{
  background:
    radial-gradient(700px 340px at 80% 0%, rgba(52,211,153,.20), transparent 62%),
    linear-gradient(160deg, #0B1B2E, var(--ink));
  color:var(--text-on-dark);
  border-radius:var(--r-lg);
  padding:clamp(2.25rem,1.5rem + 3vw,3.5rem) clamp(1.5rem,1rem + 3vw,3rem);
  text-align:center;
}
.cta-band .eyebrow{ color:var(--brand-300); }
.cta-band h2{ color:#fff; max-width:24ch; margin-inline:auto; }
.cta-band p{ color:var(--text-on-dark-2); max-width:52ch; margin-inline:auto 0; margin:0 auto 1.75rem; }
/* A nota abaixo dos botoes. DISCRETA PELO TAMANHO E PELO LUGAR, e nao por cor
   fraca: fica nos 13px que sao o minimo do projeto e mantem o mesmo
   --text-on-dark-2 do paragrafo acima, 11,8:1 sobre o fundo. Apagar a cor para
   "nao chamar atencao" e justamente o que torna a letra pequena ilegivel. */
/* "p.cta-band__nota", e nao so a classe: ".cta-band p" e classe MAIS elemento e
   venceria a classe sozinha — a margem e a largura daqui seriam ignoradas. */
.cta-band p.cta-band__nota{ color:var(--text-on-dark-2); font-size:.8125rem;
  line-height:1.5; max-width:46ch; margin:1.25rem auto 0; }

/* ---------- 16. Rodapé ---------- */
.site-footer{
  background:var(--ink); color:var(--text-on-dark-2);
  padding:3rem 0 2rem; font-size:.93rem;
  margin-top:0;
}
.site-footer a{ color:var(--text-on-dark); }
.site-footer__grid{
  display:grid; gap:2rem; margin-bottom:2.25rem;
}
@media (min-width:760px){
  .site-footer__grid{ grid-template-columns:1.4fr 1fr 1fr; }
}
.site-footer h4{
  color:#fff; font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:.9rem;
}
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin:.45rem 0; }
.site-footer__legal{
  border-top:1px solid var(--line-dark);
  padding-top:1.5rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
  align-items:center; justify-content:space-between;
  /* --text-mute e cor para fundo CLARO. Usada aqui, sobre o azul do rodape,
     dava 3,33:1 — e piorou quando ela foi escurecida para atender a norma nas
     paginas claras. Cada fundo tem o seu tom. */
  font-size:.9rem; color:var(--text-on-dark-3);
}
.site-footer .brand__name{ color:#fff; }

/* A marca do WhatsApp como ela e: verde solido e glifo branco. Antes era um
   glifo verde-claro num circulo quase transparente — sobre o azul do rodape
   ficava apagado, e nao se reconhecia de relance o que era. */
.wa{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:#25D366;
  transition:filter .18s ease, transform .12s ease;
}
.wa:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.wa svg{ width:23px; height:23px; color:#fff; }

/* ---------- 17. Diversos ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--brand-tint); color:var(--brand-600);
  border-radius:var(--r-pill); padding:.28rem .7rem;
}
.badge--gold{ background:#FBF3D9; color:#8A6D0B; }
.badge--mute{ background:var(--surface-2); color:var(--text-soft); }

.note{ font-size:.88rem; color:var(--text-mute); }
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-1{ margin-top:.75rem; } .mt-2{ margin-top:1.5rem; } .mt-3{ margin-top:2.25rem; }
.mb-1{ margin-bottom:.75rem; } .mb-2{ margin-bottom:1.5rem; } .mb-3{ margin-bottom:2.25rem; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .btn:hover,.post-card:hover{ transform:none; }
}

@media print{
  .site-header,.site-footer,.cta-band,.btn{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
  .hero{ background:#fff; color:#000; }
  .hero h1{ color:#000; }
}

/* ============================================================
   VÍDEO — link, e não miniatura

   Nasceu como miniatura com capa e botão de play, e ele pediu só os links.
   Faz sentido: a legenda já diz "em vídeo", então a imagem repetia o que o
   texto dizia e cobrava a altura de um 16/9 — no alto da home, justo onde a
   altura decide se os botões ficam acima da dobra.

   Continua sendo link para o YouTube, e não player embutido: o player traz
   script do Google e grava cookie no visitante, e "O que o MyPerfólio não pede
   e não guarda" está na mesma página.
   ============================================================ */
ul.videos {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
ul.videos a,
.hero__video a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* a seta é o sinal de que o link sai do site — desenhada, não é arquivo */
ul.videos a::after,
.hero__video a::after {
  content: " ↗";
  text-decoration: none;
  display: inline-block;
}
.hero__video {
  margin: 14px 0 0;
}
.hero__video a {
  color: var(--brand-300);
}
.hero__video a:hover {
  color: #FFFFFF;
}

/* ============================================================
   AS MENSAGENS DO CADASTRO

   O JavaScript ja punha a classe: diz(texto, "erro") ou diz(texto, "ok").
   Faltava a metade de ca — .erro e .ok nunca existiram no CSS, e por isso todo
   aviso saia na cor do corpo do texto, logo abaixo do botao, com cara de mais
   uma linha da pagina.

   Foi assim que quem esquecia de marcar os Termos de Uso clicava em "Criar
   minha conta" e achava que nada acontecia: a frase estava la, invisivel de
   tao discreta.
   ============================================================ */
.erro {
  color: var(--danger);
  font-weight: 600;
  background: var(--danger-tint);
  border: 1px solid var(--danger);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.ok {
  color: var(--brand-600);
  font-weight: 600;
  background: var(--brand-tint);
  border: 1px solid var(--brand);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
/* sem mensagem, o paragrafo nao ocupa espaco nem desenha caixa */
#msg:empty { display: none; }