/* ===================================================================
   Komfort House  Brand Bible (rev. 2026)
   Preto Profundo #0A0A0A  Off-White Quente #F4F1EC  Bronze #A0693A
   Greige #D8D2C7  Grafite #2B2825
   Display e citacao: Fraunces    Corpo, interface e dados: Instrument Sans
   REGRA DE UM ACENTO: o bronze aparece no maximo uma vez por peca, como
   pontuacao (filete, numero, label). Nunca campo de cor, nunca texto
   corrido  reprova WCAG AA sobre preto e sobre off-white.
   =================================================================== */
:root{
  --preto:#0A0A0A; --preto-2:#141210; --grafite:#2B2825;
  --offwhite:#F4F1EC; --gelo:#D8D2C7; --greige:#D8D2C7; --branco:#FCFAF7;
  --bronze:#A0693A;
  --terracota:#2B2825; --laranja:#2B2825; --terracota-fraco:#E7E2DA;
  --tinta:#2B2825; --tinta-2:#5F5952; --tinta-3:#8A837A;
  --linha:#D8D2C7; --linha-2:#E7E2DA;
  --raio:10px;
  --titulo:"Fraunces","Georgia",serif;
  --texto:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --sombra:0 1px 2px rgba(10,10,10,.04), 0 14px 32px -20px rgba(10,10,10,.32);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --offwhite:#0A0A0A; --branco:#141210; --gelo:#2A2521; --greige:#2A2521;
  --tinta:#F4F1EC; --tinta-2:#B3ABA1; --tinta-3:#867E74;
  --linha:#262220; --linha-2:#1C1917; --terracota-fraco:#1C1917;
  --terracota:#F4F1EC; --laranja:#F4F1EC;
}}
:root[data-theme="dark"]{
  --offwhite:#0A0A0A; --branco:#141210; --gelo:#2A2521; --greige:#2A2521;
  --tinta:#F4F1EC; --tinta-2:#B3ABA1; --tinta-3:#867E74;
  --linha:#262220; --linha-2:#1C1917; --terracota-fraco:#1C1917;
  --terracota:#F4F1EC; --laranja:#F4F1EC;
}
*{box-sizing:border-box}
body{margin:0;background:var(--offwhite);color:var(--tinta);font-family:var(--texto);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--titulo);font-weight:800;line-height:1.16;letter-spacing:-.02em}
p{margin:0}
.env{max-width:1120px;margin:0 auto;padding:0 22px}


/* ---------- topo preto ---------- */
.faixa-topo{background:var(--preto);color:#F0EDEB}
.ft1{display:flex;align-items:center;gap:22px;max-width:1120px;margin:0 auto;padding:14px 22px}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo img{height:34px;width:auto}
.logo .selo-blog{font-size:.62rem;font-weight:700;letter-spacing:.28em;color:#F0EDEB;
  padding-left:14px;margin-left:2px;position:relative;font-family:var(--texto)}
.logo .selo-blog::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:17px;background:var(--laranja);border-radius:2px}
.slogan{flex:1;text-align:center;font-style:italic;font-size:.85rem;color:#C8BFB8;
  display:flex;align-items:center;justify-content:center;gap:14px}
.slogan::before,.slogan::after{content:"";height:1px;width:48px;background:rgba(183,82,23,.55)}
.btn-terra{background:var(--laranja);color:#F0EDEB;font-weight:700;font-size:.82rem;
  padding:10px 19px;border-radius:999px;flex:none;white-space:nowrap}
.btn-terra:hover{background:var(--terracota)}
.ft2{border-top:1px solid rgba(240,237,235,.1)}
.ft2-in{display:flex;align-items:center;gap:24px;max-width:1120px;margin:0 auto;padding:11px 22px;flex-wrap:wrap}
.ft2 nav{display:flex;gap:22px;font-size:.83rem;color:#C8BFB8;flex:1;flex-wrap:wrap}
.ft2 nav a:hover{color:var(--laranja)}
.ft2 .bs{font-size:.83rem;color:var(--laranja);font-weight:600}

/* ---------- hero preto ---------- */
.hero{background:var(--preto);color:#F0EDEB;padding:56px 0 64px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-140px;top:-90px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle,rgba(162,78,1,.34),transparent 68%)}
.hero .env{position:relative;z-index:1}
.hero .olho{font-size:.69rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--laranja)}
.hero h1{font-size:clamp(1.95rem,4.3vw,2.95rem);margin-top:16px;max-width:19ch}
.hero h1 span{display:block;color:var(--laranja)}
.hero p{color:#B5ABA4;margin-top:18px;max-width:56ch;font-size:1rem}
.hero .acoes{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.hero .acoes .btn-terra{font-size:.88rem;padding:13px 24px}
.hero .acoes .txt{color:var(--laranja);font-weight:700;font-size:.88rem}

/* ---------- corpo claro ---------- */
.claro{background:var(--offwhite);padding:52px 0 10px}
h2.secao{font-size:1.6rem;margin-bottom:22px}

.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.card .foto{aspect-ratio:16/10}
.card .in{padding:16px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.chip{align-self:flex-start;background:var(--terracota-fraco);color:var(--terracota);font-size:.62rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:5px}
.card h3{font-size:1.02rem;line-height:1.32}
.card p{font-size:.85rem;color:var(--tinta-2);line-height:1.5}
.card .dt{margin-top:auto;padding-top:8px;font-size:.75rem;color:var(--tinta-3)}

.faixa-cta{margin:38px 0 0;background:var(--terracota-fraco);border:1px solid rgba(162,78,1,.3);
  border-radius:var(--raio);padding:24px 28px;display:flex;justify-content:space-between;
  align-items:center;gap:24px;flex-wrap:wrap}
.faixa-cta h3{font-size:1.1rem}
.faixa-cta p{font-size:.87rem;color:var(--tinta-2);margin-top:6px;max-width:54ch}
.btn-preto{background:var(--preto);color:#F0EDEB;font-weight:700;font-size:.84rem;
  padding:12px 22px;border-radius:8px;white-space:nowrap}
:root[data-theme="dark"] .btn-preto,html:not([data-theme="light"]) .btn-preto{background:var(--terracota)}

.blocos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bl{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:20px 22px 22px}
.bl.dest{border-color:var(--terracota)}
.bl h3{font-size:1rem}
.bl p{font-size:.83rem;color:var(--tinta-2);margin-top:7px;line-height:1.5}

.news{margin:44px 0 0;background:var(--preto);color:#F0EDEB;border-radius:var(--raio);padding:36px 38px}
.news h3{font-size:1.35rem}
.news p{color:#ABA19A;font-size:.9rem;margin-top:10px;max-width:52ch}
.news .campo{display:flex;gap:10px;margin-top:22px;max-width:440px}
.news input{flex:1;border:1px solid rgba(240,237,235,.2);background:var(--grafite);color:#F0EDEB;
  border-radius:7px;padding:12px 15px;font:inherit;font-size:.9rem}
.news button{border:0;background:var(--laranja);color:#F0EDEB;font:inherit;font-weight:700;
  padding:12px 24px;border-radius:7px;cursor:pointer}
.news small{display:block;margin-top:16px;font-size:.74rem;color:#7A706A;max-width:48ch}

footer.rod{background:var(--preto);color:#C8BFB8;margin-top:52px;padding:46px 0 26px;font-size:.86rem}
.rod-g{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.rod-g h4{font-size:.67rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--laranja);margin-bottom:14px;font-family:var(--texto)}
.rod-g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.rod-g ul a:hover{color:var(--laranja)}
.rod-logo img{height:44px;width:auto;margin-bottom:14px}
.rod-desc{color:#8E837C;margin:0 0 16px;max-width:34ch;font-size:.85rem}
.zap{border:1px solid rgba(240,237,235,.14);border-radius:8px;padding:11px 14px;margin-bottom:10px;max-width:300px}
.zap b{display:block;font-size:.84rem;color:#F0EDEB}
.zap span{display:block;font-size:.82rem;color:#C8BFB8;margin-top:2px}
.zap i{display:block;font-style:normal;font-size:.72rem;color:#7A706A;margin-top:3px}
.social{display:flex;gap:9px;margin-top:16px}
.social i{width:30px;height:30px;border:1px solid rgba(240,237,235,.18);border-radius:7px;
  display:grid;place-items:center;font-style:normal;font-size:.72rem;color:#C8BFB8}
.rod-fim{margin-top:34px;padding-top:20px;border-top:1px solid rgba(240,237,235,.1);
  font-size:.74rem;color:#7A706A;display:flex;flex-direction:column;gap:4px}

/* ---------- post ---------- */
.post-topo{background:var(--preto);color:#F0EDEB;padding:44px 0 48px}
.trilha{font-size:.78rem;color:#8E837C;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.post-topo .chip{background:rgba(183,82,23,.2);color:var(--laranja)}
.post-topo h1{font-size:clamp(1.75rem,3.7vw,2.55rem);margin-top:14px;max-width:22ch}
.post-topo .res{color:#B5ABA4;margin-top:16px;max-width:60ch;font-size:1rem}
.assin{display:flex;gap:12px;align-items:center;margin-top:24px}
.assin .av{width:42px;height:42px;border-radius:50%;background:var(--laranja);color:#F0EDEB;
  display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none;font-family:var(--titulo)}
.assin .n{font-weight:700;font-size:.88rem;color:#F0EDEB}
.assin .c{font-size:.78rem;color:#8E837C}
.capa{margin-top:-36px;position:relative;z-index:2}
.capa .foto{aspect-ratio:21/9;border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha)}

.corpo{display:grid;grid-template-columns:210px 1fr;gap:48px;padding:40px 0 0;align-items:start}
.sum{position:sticky;top:70px;font-size:.85rem}
.sum h4{font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:13px;font-family:var(--texto)}
.sum ul{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--linha);
  display:flex;flex-direction:column;gap:10px}
.sum a{color:var(--tinta-2)}
.sum li.on a{color:var(--terracota);font-weight:700}
.artigo{max-width:68ch;font-size:1.04rem;line-height:1.76}
.artigo h2{font-size:1.45rem;margin:2.2em 0 .55em;scroll-margin-top:90px}
.artigo h2:first-child{margin-top:0}
.artigo p{margin:0 0 1.1em}
.num{background:var(--branco);border:1px solid var(--linha);border-left:3px solid var(--terracota);
  border-radius:var(--raio);padding:18px 22px;margin:1.7em 0;font-size:.94rem;color:var(--tinta-2)}
.num b{display:block;font-family:var(--titulo);font-size:1.55rem;color:var(--tinta);margin-bottom:4px}
.rolagem{overflow-x:auto;margin:1.8em 0}
table.med{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;min-width:520px}
table.med th{background:var(--gelo);text-align:left;padding:12px 15px;font-size:.67rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta);font-weight:700}
table.med td{padding:13px 15px;border-top:1px solid var(--linha-2)}
table.med td:first-child{font-weight:700}

.prods-b{margin:2.6em 0;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:26px 28px}
.prods-b h3{font-size:1.1rem}
.prods-b .s{font-size:.83rem;color:var(--tinta-2);margin:5px 0 18px}
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prod{border:1px solid var(--linha);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.prod .foto{aspect-ratio:4/3}
.prod .in{padding:12px 14px 15px;display:flex;flex-direction:column;gap:4px}
.prod .n{font-weight:700;font-size:.85rem;line-height:1.3}
.prod .m{font-size:.76rem;color:var(--tinta-3)}
.prod .p{font-family:var(--titulo);font-weight:800;font-size:1rem;color:var(--terracota);margin-top:3px}

.faq{margin:2.6em 0}
.faq h2{font-size:1.45rem;margin-bottom:.7em}
.faq details{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:16px 20px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer;font-size:.96rem;list-style:none;display:flex;
  justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--terracota);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:11px;color:var(--tinta-2);font-size:.92rem}

.autor{display:grid;grid-template-columns:auto 1fr;gap:18px;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio);padding:24px 26px;margin:2.6em 0}
.autor .av{width:56px;height:56px;border-radius:50%;background:var(--terracota);color:#F0EDEB;
  display:grid;place-items:center;font-weight:800;font-size:1.1rem;font-family:var(--titulo)}
.autor .cg{color:var(--terracota);font-size:.79rem;font-weight:700;margin:3px 0 8px}
.autor p{font-size:.89rem;color:var(--tinta-2)}

@media(max-width:960px){
  .grade,.blocos,.prods{grid-template-columns:repeat(2,1fr)}
  .corpo{grid-template-columns:1fr;gap:0}
  .sum{position:static;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--linha)}
  .sum ul{border-left:0;padding-left:0;flex-direction:row;flex-wrap:wrap;gap:8px 18px}
  .rod-g{grid-template-columns:1fr 1fr}
  .slogan{display:none}
}
@media(max-width:620px){
  .grade,.blocos,.prods,.rod-g{grid-template-columns:1fr}
  .ft2 nav{gap:14px;font-size:.78rem}
  .news,.prods-b,.faixa-cta{padding:24px 20px}
  .capa{margin-top:-20px}
}


/* ---- itens que só existem no site publicado ---- */
.paginacao{display:flex;gap:9px;justify-content:center;padding:34px 0 10px;font-size:.88rem}
.paginacao a,.paginacao span{padding:9px 15px;border:1px solid var(--linha);border-radius:8px;background:var(--branco)}
.paginacao .atual{background:var(--terracota);color:#F0EDEB;border-color:var(--terracota)}
.vazio{padding:40px 0 60px;color:var(--tinta-2)}
.erro404{padding:80px 0 100px;text-align:center}
.erro404 h1{font-size:2rem}
.erro404 p{color:var(--tinta-2);margin:14px 0 26px}
.artigo ul,.artigo ol{margin:0 0 1.15em;padding-left:1.3em}
.artigo li{margin-bottom:.45em}
.artigo table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;margin:1.8em 0}
.artigo th{background:var(--gelo);text-align:left;padding:12px 15px;font-size:.67rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta);font-weight:700}
.artigo td{padding:13px 15px;border-top:1px solid var(--linha-2)}
.artigo img{border-radius:var(--raio);margin:1.6em 0}
.artigo a{color:var(--terracota);text-decoration:underline;text-underline-offset:3px}

/* Correcao 02/09/2026  as caixas de imagem tinham aspect-ratio mas nenhuma
   tinha object-fit. Resultado: o bitmap era ESTICADO para preencher a caixa.
   Pior: o <img> traz height="400" no HTML, o que anula o aspect-ratio, e como
   o .card e flex-column a imagem ainda era espremida quando o texto era maior.
   height:auto devolve o aspect-ratio, object-fit:cover recorta em vez de
   deformar, e flex:none impede o flex de achatar a foto. */
.card .foto,.capa .foto,.prod .foto{
  width:100%;height:auto;object-fit:cover;object-position:center;flex:none}

/* Menu de categorias no celular: em vez de quebrar em varias linhas,
   vira um trilho horizontal (carrossel) com fade na borda direita.
   "Buscar" fica fixo no canto, fora do trilho. */
@media(max-width:860px){
  .ft2-in{flex-wrap:nowrap;gap:14px}
  .ft2 nav{flex-wrap:nowrap;overflow-x:auto;min-width:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .ft2 nav::-webkit-scrollbar{display:none}
  .ft2 nav a{white-space:nowrap;scroll-snap-align:start}
  .ft2 .bs{flex:none;white-space:nowrap}
}

/* ===================================================================
   BRAND BIBLE  aplicacao
   =================================================================== */

/* 1. O UNICO acento bronze da pagina: o filete do lockup do logo. */
.logo .selo-blog::before{background:var(--bronze)}

/* 2. Botoes: off-white sobre escuro, preto sobre claro.
      O bronze nunca e campo de cor. */
.btn-terra{background:#F4F1EC;color:#0A0A0A}
.btn-terra:hover{background:#FFFFFF}
.claro .btn-terra,.faixa-cta .btn-terra{background:var(--preto);color:#F4F1EC}
.claro .btn-terra:hover,.faixa-cta .btn-terra:hover{background:var(--grafite)}
.btn-preto{background:var(--preto);color:#F4F1EC}
:root[data-theme="dark"] .btn-preto,html:not([data-theme="light"]) .btn-preto{background:#F4F1EC;color:#0A0A0A}

/* 3. Chip de categoria: versalete em neutro, sem campo de cor. */
.chip{background:transparent;color:var(--tinta-2);border:1px solid var(--linha);
  font-family:var(--texto);letter-spacing:.13em}

/* 4. Hero: segunda linha em greige. Texto sobre escuro e sempre off-white. */
.hero h1 span{color:var(--gelo)}
.hero .olho{color:var(--gelo);opacity:.85}
.hero .acoes .txt{color:#F4F1EC;text-decoration:underline;text-underline-offset:4px}
.hero::after{background:radial-gradient(circle,rgba(160,105,58,.16),transparent 68%)}

/* 5. Navegacao e rodape: nada de acento. */
.ft2 .bs{color:var(--gelo)}
.ft2 nav a:hover{color:#F4F1EC}
.rod-g h4{color:var(--gelo)}
.rod-g ul a:hover{color:#F4F1EC}
.slogan::before,.slogan::after{background:rgba(160,105,58,.5)}

/* 6. Faixa de CTA e paginacao: superficie neutra. */
.faixa-cta{background:var(--branco);border-color:var(--linha)}
.paginacao .atual{background:var(--preto);color:#F4F1EC;border-color:var(--preto)}

/* 7. Links do artigo: sublinhado em cor de texto  bronze reprova AA. */
.artigo a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--linha)}
.artigo a:hover{text-decoration-color:var(--tinta)}
.bl.dest{border-color:var(--grafite)}

/* 8. Fraunces so em display; dados e ficha tecnica em Instrument Sans. */
.artigo th,.artigo td,.chip,.dt,.paginacao{font-family:var(--texto)}
.artigo td,.artigo th{font-variant-numeric:tabular-nums}

/* RITMO DE SECOES  preto profundo e off-white alternados. */
.escuro{background:var(--preto);color:#F4F1EC;padding:52px 0}
.escuro h2.secao,.escuro h3{color:#F4F1EC}
.escuro p{color:#B3ABA1}
.escuro .faixa-cta{background:transparent;border-color:rgba(244,241,236,.18);margin:0}
.escuro .btn-preto{background:#F4F1EC;color:#0A0A0A}
.escuro .btn-preto:hover{background:#FFFFFF}
.escuro .bl{background:rgba(244,241,236,.05);border-color:rgba(244,241,236,.14)}
.escuro .bl.dest{border-color:rgba(244,241,236,.42)}
.escuro .bl p{color:#B3ABA1}
.escuro .news{background:transparent;padding:0;margin:0}
.escuro .news input{background:rgba(244,241,236,.06);border-color:rgba(244,241,236,.22);color:#F4F1EC}
.news button{background:#F4F1EC;color:#0A0A0A}
.news button:hover{background:#FFFFFF}
.claro{padding:52px 0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .escuro{background:#16130F}}
:root[data-theme="dark"] .escuro{background:#16130F}