/* ---------- guias do blog da Elixir Fragrância (11/10/2026) ----------
   Servido de /guias-img/guias.<hash>.css (cache de 1 ano; o nome muda quando o
   arquivo muda). Vem DEPOIS do /style.css do site, que dá o cabeçalho, o rodapé,
   o .btn, o .kicker e os tokens (--onix, --gold, --ivory, --grey, --t-*).

   Contrato da página de guia: Carrosseis-Redes-Sociais/guias/
   PESQUISA-VISUAL-ENSINO-08-10.md §2 — coluna de 68ch, corpo 18px no celular e
   19px no desktop, entrelinha 1,6; h2 24/30, h3 20/22; 2em acima do h2.
   Identidade da Elixir: fundo ônix, texto marfim, dourado só em destaque e link,
   títulos em Cinzel, linha-fina em Playfair itálico, raio 2px (o do .btn do site).

   A FOTO DE TOPO NÃO É CORTADA: o limite é pela LARGURA (747px = 420 × 16/9, a
   mesma altura máxima numa foto 16:9). Sem max-height, sem object-fit:cover — o
   defeito do piloto do MuralFreela, que cortava a parte de cima da foto no PC. */
.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}
/* o style.css do site estiliza TODO <nav> como a barra do topo (flex, space-between,
   padding): as navs dos guias (trilha, temas, relacionados) voltam a ser bloco */
.guia-pag nav{display:block;padding:0;margin:0;max-width:none}
.guia-pag{max-width:calc(68ch + 40px);margin:0 auto;padding:34px 20px 90px;overflow-wrap:break-word}
.guia-migalhas{font-size:var(--t-xs);color:var(--grey);letter-spacing:.05em;margin-bottom:14px}
.guia-migalhas a{color:var(--gold);display:inline-block;padding:13px 0}
.guia-titulo{font-family:Cinzel,serif;color:var(--gold);letter-spacing:.04em;font-size:1.75rem;line-height:1.25;margin:6px 0 12px}
.guia-linha-fina{font-family:'Playfair Display',serif;font-style:italic;color:var(--ivory);font-size:1.15rem;line-height:1.55;margin:0 0 12px}
.guia-autoria{font-size:var(--t-xs);color:var(--grey);letter-spacing:.04em;line-height:1.7;margin:0 0 26px}
.guia-autoria a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.guia{font-size:18px;line-height:1.6;color:var(--ivory)}
.guia-topo,.guia-diagrama,.guia-grafico{margin:0 0 1.5em}
.guia-topo img,.guia-diagrama img,.guia-grafico img{display:block;height:auto;border:1px solid rgba(201,162,39,.3);border-radius:2px}
.guia-topo img{width:100%;max-width:min(100%,747px);margin-inline:auto}
.guia-diagrama img,.guia-grafico img{width:100%;max-width:540px;margin:0 auto}
.guia figcaption{font-size:13px;color:var(--grey);margin-top:8px;text-align:center}
.guia figcaption a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.guia-resposta{border:1px solid rgba(201,162,39,.45);border-left:4px solid var(--gold);border-radius:2px;padding:18px 20px;margin:0 0 1.5em;background:radial-gradient(ellipse at 0 0,rgba(201,162,39,.1),transparent 70%)}
.guia-resposta-rotulo{font-family:Cinzel,serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.guia-resposta p{margin:0}
.guia-resposta p+p{margin-top:.6em}
.guia-sumario{border-top:1px solid rgba(201,162,39,.25);border-bottom:1px solid rgba(201,162,39,.25);margin:0 0 1.5em}
.guia-sumario summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-family:Cinzel,serif;letter-spacing:.08em;color:var(--gold)}
.guia-sumario ul{list-style:none;padding:0 0 14px;font-size:16px}
.guia-sumario li a{display:inline-block;padding:6px 0;color:var(--ivory);text-decoration:underline;text-decoration-color:rgba(201,162,39,.5);text-underline-offset:3px}
.guia-corpo h2{font-family:Cinzel,serif;font-size:24px;letter-spacing:.03em;line-height:1.3;color:var(--gold);margin:2em 0 .5em}
.guia-corpo h3{font-size:20px;font-weight:600;line-height:1.35;color:var(--ivory);margin:1.5em 0 .4em}
.guia-corpo p,.guia-corpo ul,.guia-corpo ol{margin:0 0 1em}
.guia-corpo ul,.guia-corpo ol{padding-left:1.4em}
.guia-corpo li+li{margin-top:.4em}
.guia-corpo li::marker{color:var(--gold)}
.guia-corpo strong{color:var(--ivory);font-weight:600}
.guia-corpo a,.guia-relacionados a,.guia-erro a,.guia-autor a,.guia-marca p a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.guia-corpo details{margin-top:.5em}
.guia-corpo summary{min-height:44px;display:inline-flex;align-items:center;cursor:pointer;font-weight:600;color:var(--gold)}
.guia-corpo .tabela{overflow-x:auto;margin:0 0 1.5em;border:1px solid rgba(201,162,39,.3);border-radius:2px}
.guia-corpo .tabela:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.guia-corpo table{border-collapse:collapse;width:100%;font-size:16px}
.guia-corpo caption{text-align:left;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--grey);padding:10px 12px}
.guia-corpo th,.guia-corpo td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid rgba(201,162,39,.2)}
.guia-corpo th{color:var(--gold);font-weight:600;border-bottom:1px solid rgba(201,162,39,.6)}
.guia-corpo td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.guia-corpo tbody tr:last-child td{border-bottom:0}
.guia-corpo .sobre-marca{display:block;border:1px solid rgba(201,162,39,.3);border-radius:2px;padding:16px 18px;margin:1.5em 0;font-size:16px;color:var(--grey)}
.guia-autor{display:flex;gap:16px;align-items:center;border-top:1px solid rgba(201,162,39,.25);margin-top:2.5em;padding-top:1.5em;font-size:16px;color:var(--grey)}
.guia-autor img{border-radius:50%;flex:none;border:1px solid rgba(201,162,39,.5)}
.guia-autor strong{color:var(--ivory);font-weight:600}
.guia-marca{border:1px solid var(--gold);border-radius:2px;padding:24px 20px;margin-top:1.5em;font-size:16px;background:radial-gradient(ellipse at 50% -30%,rgba(201,162,39,.12),transparent 65%)}
.guia-marca h2,.guia-relacionados h2{font-family:Cinzel,serif;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.guia-marca p{color:var(--ivory);line-height:1.7}
.guia-marca-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.guia-marca-acoes .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;text-align:center}
.guia-marca-acoes .btn.ghost{margin-left:0}
.guia-relacionados{margin-top:2em}
.guia-relacionados ul{list-style:none}
.guia-relacionados li{padding:12px 0;border-bottom:1px solid rgba(201,162,39,.2)}
.guia-relacionados li a{font-weight:600;display:inline-block;min-height:24px}
.guia-relacionados li p{color:var(--grey);font-size:15px;margin-top:4px}
.guia-erro{margin-top:2em;font-size:15px;color:var(--grey)}
/* ---- lista /blog e /blog/tema/<tema> ---- */
.guias-topo .kicker{display:block}
.guias-intro{color:var(--grey);font-size:var(--t-base);line-height:1.7;margin:0 0 22px}
.guias-temas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none}
.guias-temas a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid rgba(201,162,39,.45);border-radius:2px;font-size:13px;letter-spacing:.04em;color:var(--ivory)}
.guias-temas a:hover{border-color:var(--gold);background:rgba(201,162,39,.12)}
.guias-temas a[aria-current="page"]{background:var(--gold);color:var(--onix);border-color:var(--gold);font-weight:600}
.guias-lista{list-style:none;display:grid;gap:14px;margin:0 0 34px;padding:0}
.guias-lista li{border:1px solid rgba(201,162,39,.3);border-radius:2px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.guias-lista .tema{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.guias-lista h2,.guias-lista h3{font-family:Cinzel,serif;font-size:1.05rem;letter-spacing:.04em;line-height:1.35;margin:4px 0 6px}
.guias-lista h2 a,.guias-lista h3 a{color:var(--gold)}
.guias-lista h2 a:hover,.guias-lista h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.guias-lista p{color:var(--grey);font-size:15px;line-height:1.6}
.guias-secao{margin-top:40px}
.guias-secao h2{font-family:Cinzel,serif;color:var(--gold);letter-spacing:.08em;font-size:1.15rem;text-transform:uppercase;margin-bottom:10px}
.guias-titulos{list-style:none;padding:0;margin:0}
.guias-titulos li{border-bottom:1px solid rgba(201,162,39,.15)}
.guias-titulos a{display:block;padding:11px 0;min-height:44px;color:var(--ivory);font-size:16px;line-height:1.45}
.guias-titulos a:hover{color:var(--gold)}
.guias-vazio{color:var(--grey);font-size:var(--t-base);margin:20px 0 40px}
@media (min-width:760px){
  .guia{font-size:19px}
  .guia-titulo{font-size:2.2rem}
  .guia-corpo h2{font-size:30px}
  .guia-corpo h3{font-size:22px}
}