/* ============================================================
   CONECT OBRA — folha de estilo do blog
   Sistema visual v2 · Figtree (display) + Source Sans 3 (texto)
   Camila · Artes/Design · 2026-08-26
   ============================================================ */

:root{
  --verde-com:#14B88F;      /* verde de comunicação (MEMO-004 §2) */
  --verde-logo:#217261;     /* cor do logo — nunca repintar */
  --verde-texto:#1B5C4E;    /* verde escuro para texto sobre claro (contraste alto) */
  --menta:#53DAB2;
  --grafite:#0F201D;
  --cinza:#5A6B67;
  --cinza-claro:#9AA8A4;
  --areia:#F4F7F6;
  --linha:#E1E7EA;
  --ambar:#C87A16;          /* aviso — vermelho não entra em peça */
  --ambar-fundo:#FFF7EC;
  --ambar-linha:#F0DEC4;
  --branco:#fff;
  --max:720px;              /* medida de leitura */
  --max-larga:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--branco);
  color:var(--grafite);
  font:400 19px/1.65 "Source Sans 3",system-ui,-apple-system,Segoe UI,sans-serif;
  font-feature-settings:"tnum" 1;   /* algarismo tabular — ajuste do Lucas */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde-texto);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}

.wrap{width:100%;max-width:var(--max-larga);margin:0 auto;padding:0 24px}
.leitura{max-width:var(--max);margin-left:auto;margin-right:auto}

/* ---------- cabeçalho ---------- */
.topo{border-bottom:1px solid var(--linha);background:var(--branco);position:sticky;top:0;z-index:10}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:76px;min-width:0}
.topo .marca{min-width:0;flex-shrink:1}
.topo img{height:30px;width:auto}
.topo a.marca{display:flex;align-items:center;text-decoration:none}
.btn{
  display:inline-block;background:var(--verde-com);color:var(--grafite);
  font:600 16px/1 "Source Sans 3",sans-serif;text-decoration:none;
  padding:14px 22px;border-radius:999px;white-space:nowrap;
  transition:all .3s cubic-bezier(.4,0,.2,1);   /* easing do produto */
}
.btn:hover{background:#0FA37E;text-decoration:none}
.btn-grande{font-size:19px;padding:18px 30px}

/* ---------- índice do blog ---------- */
.hero{padding:64px 0 40px;border-bottom:1px solid var(--linha)}
.kicker{
  display:inline-block;font:600 14px/1 "Source Sans 3",sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grafite);
  background:var(--verde-com);padding:9px 16px;border-radius:999px;margin-bottom:22px;
}
h1{font:800 clamp(30px,7vw,60px)/1.09 Figtree,system-ui,sans-serif;letter-spacing:-.025em;overflow-wrap:break-word}
h1 em{font-style:normal;color:var(--verde-texto)}
.hero p{font-size:22px;color:var(--cinza);margin-top:18px;max-width:640px}

.lista{padding:48px 0 24px;display:grid;gap:34px}
.card{
  display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start;
  padding-bottom:34px;border-bottom:1px solid var(--linha);
}
.card:last-child{border-bottom:none}
.card img{border-radius:14px;background:var(--areia)}
.card h2{font:800 27px/1.25 Figtree,sans-serif;letter-spacing:-.02em;margin-bottom:10px}
.card h2 a{color:var(--grafite);text-decoration:none}
.card h2 a:hover{color:var(--verde-texto)}
.card p{color:var(--cinza);font-size:18px}
.card .tag{font:600 13px/1 "Source Sans 3",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-texto);display:block;margin-bottom:10px}

/* ---------- artigo ---------- */
.migalha{font-size:15px;color:var(--cinza-claro);padding:28px 0 0}
.migalha a{color:var(--cinza);text-decoration:none}
.migalha a:hover{text-decoration:underline}
article{padding:20px 0 64px}
article header{padding:14px 0 30px}
article h1{margin-bottom:16px}
.meta{font-size:16px;color:var(--cinza-claro)}
.capa{margin:14px 0 40px;border-radius:16px;overflow:hidden}
article h2{font:800 32px/1.25 Figtree,sans-serif;letter-spacing:-.02em;margin:46px 0 14px}
article h3{font:700 24px/1.3 Figtree,sans-serif;margin:34px 0 10px}
article p{margin-bottom:20px}
article ul,article ol{margin:0 0 22px 22px}
article li{margin-bottom:9px}
article strong{font-weight:600}

/* faixa de destaque para número com fonte */
.dado{
  background:var(--areia);border:1px solid var(--linha);border-radius:14px;
  padding:24px 26px;margin:30px 0;
}
.dado .valor{font:800 34px/1.1 Figtree,sans-serif;color:var(--verde-texto);letter-spacing:-.02em}
.dado .fonte{font-size:15px;color:var(--cinza);margin-top:8px}

/* bloco incluso / fica de fora — em HTML, não imagem (indexável) */
.blocos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px 0}
.bloco{border:1px solid var(--linha);border-radius:16px;padding:26px 24px;background:var(--branco)}
.bloco.fora{background:var(--ambar-fundo);border-color:var(--ambar-linha)}
.bloco h3{margin:0 0 4px;font-size:21px;display:flex;align-items:center;gap:10px}
.bloco .sub{font-size:15px;color:var(--cinza);margin-bottom:16px}
.bloco ul{list-style:none;margin:0}
.bloco li{position:relative;padding-left:22px;margin-bottom:11px;font-size:17px;color:#33444D}
.bloco li:before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:#9FD9C7}
.bloco.fora li:before{background:#EBC58A}
.pin{width:26px;height:26px;border-radius:50%;background:var(--verde-logo);flex:none;position:relative}
.pin:after{content:"";position:absolute;left:9px;top:6px;width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.bloco.fora .pin{background:var(--ambar)}
.bloco.fora .pin:after{left:11px;top:6px;width:4px;height:8px;border:none;background:#fff;transform:none;border-radius:2px;box-shadow:0 6px 0 #fff}

/* chamada final */
.cta{
  background:var(--areia);border:1px solid var(--linha);border-radius:20px;
  padding:38px 34px;margin:48px 0 0;text-align:center;
}
.cta h2{margin:0 0 10px;font-size:30px}
.cta p{color:var(--cinza);margin-bottom:24px}
.cta .nota{font-size:15px;color:var(--cinza-claro);margin:16px 0 0}

/* ---------- rodapé ---------- */
footer{border-top:1px solid var(--linha);margin-top:64px;padding:44px 0;background:var(--areia)}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
footer img{height:26px}
footer p{font-size:15px;color:var(--cinza-claro)}
footer nav{display:flex;gap:20px;font-size:16px}
footer nav a{color:var(--cinza);text-decoration:none}
footer nav a:hover{text-decoration:underline}

/* ---------- celular — a peça-chave vive aqui ---------- */
@media (max-width:760px){
  body{font-size:18px;overflow-x:hidden}
  /* as quebras forçadas do título são só para tela grande */
  h1 br{display:none}
  .wrap{padding:0 20px}
  article h2,.card h2,.cta h2{overflow-wrap:break-word}
  .topo .wrap{height:66px}
  .topo img{height:26px}
  .btn{padding:11px 15px;font-size:14px}
  .topo img{height:22px}
  .dado .valor{font-size:27px;overflow-wrap:break-word}
  .hero{padding:40px 0 30px}
  .hero p{font-size:19px}
  .card{grid-template-columns:1fr;gap:16px}
  .blocos{grid-template-columns:1fr;gap:16px}
  article h2{font-size:27px;margin-top:38px}
  .cta{padding:30px 22px}
  footer .wrap{flex-direction:column;align-items:flex-start}
}