/* =========================================================
   TELLES SOFÁ CLEAN · BLOG
   Mesmo sistema visual da página principal:
   Refero DESIGN.md "Calendly, navy ink on cool marble" (base),
   "Square" (fotografia em moldura) e "Airbnb" (cards de foto).
   Só design: nenhum seletor depende de texto, URL ou meta tag.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --ink:#08313A; --signal:#0154A1; --signal-hover:#013476;
  --slate:#3F626B; --mist:#93B2C0;
  --cloud:#F5F9FC; --paper:#fff; --pebble:#EEF5F9;
  --hairline:#D6E6EE; --cobalt:#0154A1; --badge:#E2F1FB;
  --navy:#013476; --azul:#3F9EDC; --ciano:#41CBF3; --ice:#E6F8FE;
  --sh-card:rgba(1,52,118,.04) 0 4px 5px,rgba(1,52,118,.03) 0 8px 15px,rgba(1,52,118,.08) 0 30px 50px;
  --sh-link:rgba(1,52,118,.04) 0 4px 5px,rgba(1,52,118,.03) 0 4px 10px,rgba(1,52,118,.05) 0 10px 20px;
  --sh-btn:rgba(1,52,118,.04) 0 4px 5px,rgba(1,52,118,.03) 0 8px 15px,rgba(1,52,118,.06) 0 15px 30px;
  --r-card:24px; --r-product:16px; --r-btn:8px;
  --font:'Manrope',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --out:cubic-bezier(.23,1,.32,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--cloud);color:var(--slate);font-family:var(--font);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--signal);text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:var(--badge);color:var(--ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-btn);z-index:99;text-decoration:none}
.skip:focus{left:12px;top:12px}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:24px}

/* ---------- Header: barra sticky de 64px, vidro claro, igual à página ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(248,249,251,.86);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--hairline)}
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.topo>a:first-child{display:flex;align-items:center}
.topo img{display:block;height:44px;width:auto;content:url('/assets/logo/logo-colorida.png')}

/* ---------- Botões: 18/600, raio 8, azul só na ação ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--signal);color:#fff;font-family:var(--font);font-weight:600;font-size:18px;line-height:1.6;text-decoration:none;border-radius:var(--r-btn);padding:10px 20px;box-shadow:var(--sh-btn);transition:transform .16s var(--out),background-color .2s var(--out)}
.bt:active{transform:scale(.97)}
.bt-sm{font-size:16px;padding:8px 16px;background:var(--ink);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .bt:hover{background:var(--signal-hover)}
  .bt-sm:hover{background:#0e406a}
}

/* ---------- Menu de 3 riscos (opcional: só aparece se o trecho do header for colado nas páginas) ---------- */
.topo-acoes{display:flex;align-items:center;gap:10px}
.menu{position:relative}
.menu summary{list-style:none;width:44px;height:44px;border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:24px;height:24px}
@media (hover:hover) and (pointer:fine){.menu summary:hover{background:var(--pebble)}}
.menu nav{position:absolute;right:0;top:calc(100% + 10px);width:min(86vw,320px);max-height:calc(100dvh - 90px);overflow-y:auto;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-product);box-shadow:var(--sh-card);padding:10px;display:flex;flex-direction:column;transform-origin:top right;animation:abrir .22s var(--out)}
@keyframes abrir{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.menu nav a{display:block;padding:11px 12px;border-radius:10px;color:var(--ink);font-weight:600;font-size:16px;text-decoration:none}
@media (hover:hover) and (pointer:fine){.menu nav a:hover{background:var(--pebble)}}
.menu nav small{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);padding:12px 12px 4px}
.menu nav a.wpp{margin-top:8px;background:var(--signal);color:#fff;text-align:center}

/* ---------- Trilha de navegação ---------- */
.crumbs{font-size:14px;font-weight:500;color:var(--mist);margin:28px 0 0}
.crumbs a{color:var(--slate);text-decoration:none}
@media (hover:hover){.crumbs a:hover{color:var(--signal)}}

/* ---------- Tipografia: Manrope 700 nos títulos, navy em todo título ---------- */
h1,h2,h3{font-family:var(--font);color:var(--ink);line-height:1.2;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(36px,5.6vw,64px);font-weight:700;line-height:1.1;margin:18px 0 18px}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;margin:56px 0 14px}
h3{font-size:18px;font-weight:600;line-height:1.4;margin:0 0 6px}
p{text-wrap:pretty}

/* ---------- Topo do blog (hero centrado, como a página) ---------- */
.hero{padding:56px 0 24px;text-align:center}
.hero h1{margin-inline:auto;max-width:16ch}
.hero p{max-width:620px;margin:0 auto;font-size:clamp(17px,1.5vw,20px);line-height:1.55}

/* ---------- Grupos de artigos: faixas alternadas de cor, de ponta a ponta ---------- */
.grupo{position:relative;margin-top:56px;padding:64px 0}
.grupo:nth-of-type(odd){background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
.grupo:nth-of-type(even){background:var(--ice);box-shadow:0 0 0 100vmax var(--ice);clip-path:inset(0 -100vmax)}
.grupo+.grupo{margin-top:0}
.grupo>h2{margin:0;text-align:center}
.grupo>p{margin:10px auto 0;text-align:center;max-width:560px;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:40px}

/* ---------- Card: foto em moldura, texto abaixo (Airbnb), card branco com sombra (Calendly) ---------- */
.card{display:flex;flex-direction:column;background:var(--paper);border:0;border-radius:var(--r-card);padding:10px;overflow:hidden;text-decoration:none;color:var(--slate);min-width:0;box-shadow:var(--sh-link);transition:transform .35s var(--out),box-shadow .35s var(--out)}
.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:var(--pebble);transition:transform .7s var(--out)}
.card>div{padding:16px 10px 12px;display:flex;flex-direction:column;gap:6px}
.card strong{display:block;font-family:var(--font);font-size:19px;font-weight:700;line-height:1.3;color:var(--ink);margin:4px 0 0}
.card span:not(.tag){display:block;font-size:15px;line-height:1.55}
.card>div::after{content:"Ler artigo →";margin-top:8px;font-size:14px;font-weight:600;color:var(--signal)}
.card:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
  .card:hover img{transform:scale(1.03)}
}
.grupo:nth-of-type(odd) .card{box-shadow:var(--sh-card)}

/* ---------- Tag (pill badge do Calendly) ---------- */
.tag{display:inline-flex;align-self:flex-start;align-items:center;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--cobalt);background:var(--badge);padding:4px 10px;border-radius:9999px;text-decoration:none;line-height:1.5}

/* ---------- Artigo ---------- */
article{padding-bottom:32px}
.art{max-width:760px;margin-inline:auto}
.art>.tag{margin-top:28px}
.meta{font-size:14px;font-weight:500;color:var(--slate);margin:0 0 28px;display:flex;flex-wrap:wrap;gap:6px 18px}
.meta span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--mist);margin-right:18px;vertical-align:middle;position:relative;top:-1px}
.capa{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-card);margin:0 0 36px;background:var(--pebble);box-shadow:var(--sh-card)}
article p{margin:16px 0}
article ul{padding-left:0;margin:16px 0;list-style:none;display:grid;gap:10px}
article li{position:relative;padding-left:30px;margin:0}
article li::before{content:"";position:absolute;left:4px;top:.62em;width:14px;height:14px;border-radius:50%;border:1.75px solid var(--azul);box-sizing:border-box}
article li::after{content:"";position:absolute;left:8px;top:calc(.62em + 4px);width:6px;height:3px;border-left:1.75px solid var(--azul);border-bottom:1.75px solid var(--azul);transform:rotate(-45deg)}
article b,article strong{color:var(--ink);font-weight:600}

/* Resposta rápida: card branco com filete azul, como o widget da página */
.resp{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-product);padding:22px 24px;margin:0 0 12px;box-shadow:var(--sh-link);position:relative;overflow:hidden}
.resp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--azul)}
.resp b{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt);margin-bottom:8px}
.resp p{margin:0;color:var(--ink);font-size:17px}

/* Perguntas frequentes: linhas com divisor, como o FAQ da página */
.faq{margin-top:8px;display:block;border-top:1px solid var(--hairline)}
.faq div{background:none;border:0;border-bottom:1px solid var(--hairline);border-radius:0;padding:20px 0}
.faq h3{font-size:18px;margin-bottom:6px}
.faq p{margin:0}

/* Chamada: a faixa navy que fecha a página */
.cta{margin:56px 0 0;background:var(--navy);position:relative;overflow:hidden;color:#fff;border-radius:var(--r-card);padding:40px 36px;box-shadow:var(--sh-card)}
.cta h2{color:#fff;margin:0 0 10px}
.cta p{margin:0 0 22px;color:#BFD9E6;font-size:18px}
.cta .bt{background:var(--ciano);color:var(--ink);box-shadow:none}
.cta::after{content:"";position:absolute;right:-50px;bottom:-50px;width:200px;height:200px;background:url(/assets/logo/logo-simbolo.png) center/contain no-repeat;opacity:.1;pointer-events:none}
.cta>*{position:relative;z-index:1}

/* Leia também */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:20px}
.rel .card strong{font-size:17px}

/* ---------- Rodapé: cloud, títulos 12/600 caixa alta, igual à página ---------- */
footer.rod{margin-top:80px;background:var(--ink);color:#BFD9E6;font-size:14px;line-height:1.7}
footer.rod .wrap{padding-block:56px 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
footer.rod b{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ciano);margin-bottom:12px}
footer.rod a{color:#fff;font-weight:500;text-decoration:none}
@media (hover:hover){footer.rod a:hover{color:var(--ciano)}}

/* ---------- Entradas no scroll (mesmas da página: sobe e sai do desfoque).
   Só CSS, só onde o navegador suporta; fora disso tudo aparece normal. ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .card,.grupo>h2,.grupo>p,.resp,.capa,.cta,.faq div,article h2{
      animation:surgir linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
  }
}
@keyframes surgir{from{opacity:0;transform:translateY(28px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.hero h1,.hero p,.art>h1,.art>.tag,.meta{animation:topo .9s var(--out) both}
.hero p,.meta{animation-delay:.12s}
@keyframes topo{from{opacity:0;transform:translateY(16px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* ---------- Responsivo ---------- */
@media (max-width:720px){
  .wrap{padding-inline:16px}
  body{font-size:16.5px}
  .topo img{height:40px}
  .bt-sm{font-size:15px;padding:8px 14px}
  .hero{padding-top:32px}
  .grupo{padding:48px 0;margin-top:40px}
  .grid{grid-template-columns:1fr;gap:16px;margin-top:28px}
  .card{border-radius:20px;padding:8px}
  .card img{border-radius:14px}
  .card>div{padding:14px 8px 10px}
  .art>.tag{margin-top:20px}
  h2{margin-top:44px}
  .capa{border-radius:18px;margin-bottom:28px}
  .resp{padding:18px 20px}
  .cta{padding:30px 22px;text-align:center}
  .cta .bt{width:100%;white-space:normal}
  .meta{flex-direction:column;gap:2px}
  .meta span+span::before{display:none}
  footer.rod .wrap{text-align:center;gap:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}