/* Blog do Josepio - tema claro por padrao, escuro automatico (sistema) ou manual */
@font-face{font-family:Oswald;font-weight:500;font-style:normal;font-display:swap;src:url(/b/fonts/oswald-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Oswald;font-weight:600;font-style:normal;font-display:swap;src:url(/b/fonts/oswald-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:600;font-style:normal;font-display:swap;src:url(/b/fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:700;font-style:normal;font-display:swap;src:url(/b/fonts/montserrat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:400;font-style:normal;font-display:swap;src:url(/b/fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:700;font-style:normal;font-display:swap;src:url(/b/fonts/figtree-latin-700-normal.woff2) format("woff2")}

:root{--bg:#fff;--surface:#f5f3f0;--fg:#141414;--muted:#5f5b57;--line:#e4e0db;--ac:#c4001a;--show-c:block;--show-e:none;--inv-fg:#fff;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]){--bg:#0b0b0c;--surface:#141416;--fg:#f5f2ee;--muted:#a7a4a0;--line:#2f2f34;--ac:#ff6b7a;--show-c:none;--show-e:block;color-scheme:dark}}
:root[data-tema=escuro]{--bg:#0b0b0c;--surface:#141416;--fg:#f5f2ee;--muted:#a7a4a0;--line:#2f2f34;--ac:#ff6b7a;--show-c:none;--show-e:block;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:Oswald,Impact,"Arial Narrow",sans-serif;font-weight:600;text-transform:uppercase;line-height:1.08;margin:0}
.logo{display:block;height:auto}
.logo-c{display:var(--show-c)}.logo-e{display:var(--show-e)}
:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
.pular{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--bg);padding:10px 16px;z-index:100}
.pular:focus{left:8px;top:8px}
.rotulo{font-family:Montserrat,sans-serif;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ac)}
.meta{font-family:Montserrat,sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* topo */
.faixa-previa{background:#c4001a;color:#fff;text-align:center;font:700 13px Montserrat,sans-serif;padding:8px 12px;letter-spacing:.04em}
.topo{border-bottom:1px solid var(--line)}
.topo::before{content:"";display:block;height:4px;background:repeating-linear-gradient(115deg,#d6001c 0 14px,transparent 14px 34px)}
.topo-in{max-width:1320px;margin:0 auto;padding:14px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.marca{display:flex;align-items:center;gap:16px}
.marca .logo{width:auto;height:52px}
.marca-tag{padding-left:16px;border-left:1px solid var(--line);font:600 12px Montserrat,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.menu{display:flex;flex-wrap:wrap;gap:6px 20px;font:600 11.5px Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.menu a{padding:8px 0}.menu a:hover,.menu a[aria-current=page]{color:var(--fg)}
.topo-acoes{display:flex;align-items:center;gap:10px}
.btn-tema{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--fg);cursor:pointer;padding:0}
.btn-tema:hover{border-color:var(--fg)}
.btn-borda,.btn-cheio,.btn-vermelho{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;font:700 12px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.btn-borda{border:1px solid var(--fg)}.btn-borda:hover{background:var(--fg);color:var(--bg)}
.btn-cheio{background:var(--fg);color:var(--bg);border:1px solid var(--fg);min-height:48px}.btn-cheio:hover{opacity:.85}
.btn-vermelho{background:#d6001c;color:#fff;min-height:52px;padding:0 30px}.btn-vermelho:hover{background:#b30017}

/* destaque */
.hero{position:relative;display:block;overflow:hidden;background:#0b0b0c;color:#f5f2ee}
.hero-img{position:absolute;inset:0}.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.2),rgba(11,11,12,.6) 55%,rgba(11,11,12,.92))}
.hero-txt{position:relative;max-width:1320px;margin:0 auto;padding:0 32px 56px;min-height:620px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px}
.hero-rot{align-self:flex-start;font:700 12px Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding-bottom:6px;border-bottom:3px solid #d6001c}
.hero h1{font-size:clamp(38px,6.2vw,76px);line-height:1;max-width:16ch}
.hero p{margin:0;font-size:20px;line-height:1.55;max-width:58ch;color:#e6e3df}
.hero-meta{font:600 12px Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#cfccc8}
.hero:hover h1{text-decoration:underline;text-decoration-color:#d6001c;text-underline-offset:8px;text-decoration-thickness:3px}
.hero-sem{background:var(--surface);color:var(--fg);border-bottom:1px solid var(--line)}.hero-sem .hero-txt{min-height:300px;padding-top:56px;justify-content:center}.hero-sem p{color:var(--muted)}.hero-sem .hero-meta{color:var(--muted)}

.miolo{max-width:1320px;margin:0 auto;padding:56px 32px 0}
.titulo-sec{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 32px;padding-bottom:16px;border-bottom:2px solid var(--fg)}
.titulo-sec h1,.titulo-sec h2{font-size:34px}
.titulo-sec p{margin:0;color:var(--muted);font-size:16px}
.titulo-sec .rotulo{flex-basis:100%}
.titulo-linha{padding-bottom:14px;border-bottom:1px solid var(--line);font-size:32px;margin-bottom:24px}

/* cartoes */
.grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 28px;margin-top:40px}
.s7{grid-column:span 7}.s5{grid-column:span 5}.s4{grid-column:span 4}
.card{display:flex;flex-direction:column;gap:12px;min-width:0}
.card-img,.item-img{position:relative;overflow:hidden;background:var(--surface);aspect-ratio:16/10}
.s5 .card-img,.s4 .card-img{aspect-ratio:4/3}
.card-img img,.item-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.card:hover img,.item:hover img{transform:scale(1.04)}
.card-vazio{position:absolute;inset:0;background:repeating-linear-gradient(115deg,var(--line) 0 2px,transparent 2px 18px)}
.card h3{font-size:28px}.card:hover h3,.item:hover h3{text-decoration:underline;text-decoration-color:#d6001c;text-underline-offset:6px;text-decoration-thickness:3px}
.grade3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.grade3 .s4{grid-column:auto}

.faixa-cta{margin-top:80px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:36px 40px;background:var(--fg);color:var(--bg)}
.faixa-cta h2{flex:1 1 420px;font-size:36px}

/* lista + lateral */
.duas{display:flex;flex-wrap:wrap;gap:48px 56px;margin-top:64px;align-items:flex-start}
.coluna{flex:999 1 600px;min-width:0}
.coluna-topo{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:14px;border-bottom:2px solid var(--fg)}
.coluna-topo h2{font-size:32px}
.coluna-topo a{font:700 12px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.item{display:flex;flex-wrap:wrap;gap:20px 28px;padding:28px 0;border-bottom:1px solid var(--line)}
.item-img{flex:0 0 220px;aspect-ratio:4/3}
.item-txt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:10px}
.item h3{font-size:28px}.item-txt p{margin:0;color:var(--muted)}
.sobre p{color:var(--muted);margin:18px 0 0}.sobre a{text-decoration:underline;color:var(--fg)}
.lateral{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:24px}
.caixa{padding:28px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.caixa-forte{background:transparent;border-color:var(--fg)}
.caixa h2{font-size:24px}
.caixa address{font-style:normal;color:var(--muted)}.caixa address strong{color:var(--fg)}
.hoje-linha{margin:0;padding-top:12px;border-top:1px solid var(--line)}
.hoje-item{margin:0;font-family:Oswald,sans-serif;font-weight:500;font-size:20px;text-transform:uppercase;line-height:1.2}
.hoje-item span{display:block;font:600 11px Montserrat,sans-serif;letter-spacing:.1em;color:var(--muted)}
.link-forte{align-self:flex-start;padding-bottom:3px;border-bottom:2px solid #d6001c;font:700 12px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.tiles{display:flex;flex-direction:column;gap:12px}
.tile{display:flex;gap:16px;align-items:center;padding:18px;border:1px solid var(--line);background:var(--surface)}
.tile:hover{border-color:#d6001c}
.tile-n{flex:none;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid var(--fg);font:600 22px Oswald,sans-serif}
.tile strong{display:block;font:600 22px/1.1 Oswald,sans-serif;text-transform:uppercase}
.tile small{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--muted)}
.pag{display:flex;justify-content:space-between;align-items:center;padding:28px 0;font:700 12px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* materia */
.materia{max-width:820px;margin:0 auto;padding:36px 20px 0}
.migalhas{font:600 12px Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.migalhas a:hover{color:var(--fg)}
.materia-topo{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.materia h1{font-size:clamp(34px,5.4vw,56px)}
.resumo{margin:0;font-size:20px;line-height:1.55;color:var(--muted)}
.autoria{display:flex;flex-wrap:wrap;gap:6px 14px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:600 12px Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.autoria strong{color:var(--fg)}
.capa{margin:28px -20px 0}.capa img{display:block;width:100%;height:auto}
.texto{margin-top:28px;font-size:18px;line-height:1.75}
.texto p{margin:0 0 20px}.texto h2{font-size:30px;margin:36px 0 14px}.texto h3{font-size:24px;margin:28px 0 10px}
.texto ul{margin:0 0 20px;padding-left:22px}.texto li{margin:6px 0}
.texto a{text-decoration:underline;text-decoration-color:#d6001c;text-underline-offset:3px;text-decoration-thickness:2px}
.texto figure{margin:28px -20px}.texto figure img{display:block;width:100%;height:auto}
.texto figcaption{padding:8px 20px 0;font-size:14px;color:var(--muted)}
.texto blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:4px solid #d6001c;font-size:20px;color:var(--muted)}
.faq{margin-top:44px;padding:28px;background:var(--surface);border:1px solid var(--line)}
.faq h2{font-size:28px;margin-bottom:12px}
.faq-item{padding:16px 0;border-top:1px solid var(--line)}
.faq-item h3{font:500 20px Oswald,sans-serif;text-transform:uppercase;margin:0 0 6px}.faq-item p{margin:0;color:var(--muted)}
.materia-fim{max-width:820px;margin:40px auto 0;padding:0 20px}
.materia-fim .caixa{padding:32px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.vazio{text-align:left;padding-bottom:40px;display:flex;flex-direction:column;gap:16px}.vazio h1{font-size:48px}.vazio p{color:var(--muted);max-width:60ch;margin:0}.vazio a:not(.btn-borda){text-decoration:underline}

/* rodape */
.rodape{margin-top:88px;border-top:1px solid var(--line)}
.rodape-in{max-width:1320px;margin:0 auto;padding:40px 32px 20px;display:flex;flex-wrap:wrap;gap:28px 64px;justify-content:space-between;align-items:flex-start}
.rodape .logo{width:auto;height:45px}
.rodape address{font-style:normal;font-size:15px;line-height:1.6;color:var(--muted)}.rodape address strong,.rodape address a{color:var(--fg)}
.rodape nav{display:flex;flex-direction:column;gap:10px;font:600 12px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rodape nav a:hover{color:var(--fg)}
.rodape-fim{max-width:1320px;margin:0 auto;padding:0 32px 36px;font-size:13px;color:var(--muted)}

@media (max-width:900px){
  .topo-in{padding:12px 16px}.marca .logo{height:40px}.marca-tag{font-size:10px;padding-left:12px}
  .menu{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;gap:22px;padding-bottom:2px;-webkit-overflow-scrolling:touch}.menu a{white-space:nowrap;padding:10px 0}
  .btn-borda{padding:0 14px}
  .hero-txt{padding:0 16px 32px;min-height:520px}.hero p{font-size:17px}
  .miolo{padding:36px 16px 0}.titulo-sec h1,.titulo-sec h2{font-size:28px}
  .grade{gap:32px 20px;margin-top:28px}.s7,.s5,.s4{grid-column:1/-1}.card h3{font-size:25px}
  .grade3{grid-template-columns:1fr}
  .faixa-cta{padding:26px 20px;margin-top:56px}.faixa-cta h2{font-size:27px}
  .duas{margin-top:44px;gap:40px}
  .item-img{flex:1 1 100%}.item h3{font-size:24px}
  .rodape-in{padding:32px 16px 16px}.rodape-fim{padding:0 16px 28px}
  .materia{padding:24px 16px 0}.capa,.texto figure{margin-left:-16px;margin-right:-16px}.texto figcaption{padding-left:16px}.materia-fim{padding:0 16px}
  .texto{font-size:17px}.vazio h1{font-size:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.topo,.rodape,.lateral,.btn-tema{display:none}}