/* ==========================================================================
   BLOG — KIT PRESENTE DE CASAMENTO (Nuru Brasil)
   Design system derivado da identidade da landing page principal:
   tema escuro premium (#1a0a0a), acento bordô + dourado metálico,
   tipografia editorial romântica. Motivo de assinatura: "selo de cera"
   e "fita" — referência direta à embalagem premium do produto.
   ========================================================================== */

/* -------------------------- 1. DESIGN TOKENS --------------------------- */
:root{
  /* Cor — superfícies */
  --cor-fundo: #000; 
  /* --cor-fundo: #140a0a;            /* fundo principal (void) */
  --cor-fundo-2: #1c1010;          /* superfície elevada (cards, header) */
  --cor-fundo-3: #271515;          /* superfície hover / destaque */
  --cor-linha: rgba(201,168,106,.16); /* hairline dourado translúcido */
  --cor-linha-forte: rgba(201,168,106,.32);

  /* Cor — marca */
  --bordo: #7c1f2e;                 /* vermelho-bordô — cor primária */
  --bordo-clara: #c23b4a;           /* bordô vivo — links, hover, CTA */
  --bordo-escura: #4a1019;          /* bordô profundo — sombras, gradientes */
  --dourado: #C9A663;               /* dourado metálico — acento premium */
  --dourado-claro: #e6d3a8;         /* dourado claro — destaques, ícones */
  --gold: #97825B;
  --gold-clara: #C9A663;

  /* Cor — texto */
  --creme: #f4ece3;                 /* texto principal sobre fundo escuro */
  --creme-suave: #c7b9b2;           /* texto secundário / legendas */
  --creme-fraco: #8f7f78;           /* texto terciário / metadados */
  --tinta: #120808;                 /* texto sobre superfícies claras */

  /* Tipografia */
  --fonte-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --fonte-corpo: "Outfit", "Segoe UI", system-ui, sans-serif;
  --fonte-utilitaria: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* Escala tipográfica fluida */
  --t-eyebrow: clamp(.72rem, .68rem + .1vw, .8rem);
  --t-corpo: clamp(1rem, .97rem + .15vw, 1.125rem);
  --t-lead: clamp(1.125rem, 1.05rem + .3vw, 1.375rem);
  --t-h3: clamp(1.3rem, 1.15rem + .6vw, 1.65rem);
  --t-h2: clamp(1.65rem, 1.4rem + 1vw, 2.3rem);
  --t-h1: clamp(2.1rem, 1.7rem + 2.2vw, 3.6rem);
  --t-display: clamp(2.6rem, 2rem + 3.2vw, 4rem);

  /* Espaçamento */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;
  --s-9: 6.5rem; --s-10: 9rem;

  /* Layout */
  --largura-conteudo: 42rem;
  --largura-pagina: 75rem;
  --raio: 6px;
  --raio-grande: 14px;

  /* Movimento */
  --rapido: 180ms cubic-bezier(.4,0,.2,1);
  --medio: 420ms cubic-bezier(.16,1,.3,1);
  --lento: 700ms cubic-bezier(.16,1,.3,1);

  /* Sombra */
  --sombra-card: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.65);
  --sombra-brilho: 0 0 0 1px var(--cor-linha-forte), 0 22px 48px -20px rgba(151, 130, 91, 0.45);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ----------------------------- 2. RESET --------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--cor-fundo);
  color: var(--creme);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(60rem 40rem at 85% -10%, rgba(151, 130, 91, 0.22), transparent 60%),
    radial-gradient(50rem 35rem at -10% 30%, rgba(201,166,99,.08), transparent 55%);
    /*radial-gradient(60rem 40rem at 85% -10%, rgba(124,31,46,.22), transparent 60%),*/
    /*radial-gradient(50rem 35rem at -10% 30%, rgba(201,168,106,.08), transparent 55%);*/
  background-attachment: fixed;
}
img{ max-width: 100%; height: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul,ol{ margin: 0; padding: 0; }
button{ font: inherit; }
h1,h2,h3,h4{ font-family: var(--fonte-display); font-weight: 600; line-height: 1.15; margin: 0; color: #fff; }
p{ margin: 0; }
table{ border-collapse: collapse; width: 100%; }

.envolto{ width: min(100% - 3rem, var(--largura-pagina)); margin-inline: auto; }
.envolto{ width: min(calc(100% - 3rem), var(--largura-pagina)); }

/* Acessibilidade: skip-link + foco visível */
.pular-link{
  position: absolute; left: -999px; top: auto;
  background: var(--dourado); color: var(--tinta);
  padding: .6rem 1rem; border-radius: var(--raio); font-weight: 600; z-index: 200;
}
.pular-link:focus{ left: var(--s-4); top: var(--s-4); }
:focus-visible{ outline: 2px solid var(--dourado-claro); outline-offset: 3px; border-radius: 3px; }

/* ------------------------- 3. BARRA DE PROGRESSO ------------------------ */
.barra-progresso{
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--cor-fundo), var(--dourado));
  z-index: 300; transition: width 120ms linear;
}

/* ------------------------------ 4. HEADER -------------------------------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(0, 0, 0,.82);
  backdrop-filter: saturate(140%) blur(14px);
  /*border-bottom: 1px solid var(--cor-linha);*/
  border-bottom: 1px solid #000;
  border-image: linear-gradient(90deg, rgba(0, 0, 0, 9), #D2AE6D, rgba(0, 0, 0, 9)) 1;
  transition: all 0.3s ease;
}
.header-interno{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); padding: var(--s-4) 0;
}
.marca{
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: .02em;
  font-size: 1.05rem; color: var(--creme);
}
.marca .selo-mini{ width: 30px; height: 30px; flex-shrink: 0; }
.marca strong{ color: var(--dourado-claro); }

.nav-principal{ display: flex; align-items: center; gap: var(--s-6); }
.nav-lista{ display: flex; gap: var(--s-5); list-style: none; }
.nav-lista a{
  position: relative; font-size: .94rem; color: var(--creme-suave);
  padding: .3rem 0; transition: color var(--rapido);
}
.nav-lista a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--dourado); transition: right var(--medio);
}
.nav-lista a:hover, .nav-lista a:focus-visible, .nav-lista a[aria-current="page"]{ color: var(--creme); }
.nav-lista a:hover::after, .nav-lista a:focus-visible::after, .nav-lista a[aria-current="page"]::after{ right: 0; }

/* ============================================
   BUTTONS
   ============================================ */
.botao-premium {
    /* Fundo escuro com leve degradê acetinado */
    background: linear-gradient(
        180deg,
        #2b2325 0%,
        #171214 100%
    );

    /* Texto */
    color: var(--gold-brown) !important;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    
    /* Formato */
    padding: 05px 26px;
    border-radius: 50px;

    /* Comportamento */
    cursor: pointer;
    display: inline-block;
    position: relative;
    overflow: hidden;

    /* Borda dourada metálica */
    border: 2px solid transparent;

    background-image:
        linear-gradient(
            #2b2325,
            #171214
        ),
        linear-gradient(
            135deg,
            #a67c1e 0%,
            #f3e5ab 35%,
            #d4af37 50%,
            #f3e5ab 65%,
            #a67c1e 100%
        );

    background-origin: border-box;
    background-clip: padding-box, border-box;

    /* Sombra */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;

    z-index: 1;
}

/* Faixa de brilho */
.botao-premium::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;

    width: 50%;
    height: 100%;

    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0)
    );

    transform: skewX(-25deg);
    transition: left 0.8s ease;

    z-index: -1;
}

/* Hover */
.botao-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.25);
    filter: brightness(1.08);
}

/* Movimento do brilho */
.botao-premium:hover::before {
    left: 125%;
}

.botao-premium a {
    text-decoration: none;
    color: var(--gold-brown);
}

.btn{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fonte-utilitaria); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .75rem 1.3rem; border-radius: var(--raio);
  border: 1px solid transparent; cursor: pointer; transition: transform var(--rapido), box-shadow var(--rapido), background var(--rapido);
}
.btn-primario{ background: linear-gradient(135deg, var(--bordo-clara), var(--bordo)); color: #fff; box-shadow: var(--sombra-card); }
.btn-primario:hover{ transform: translateY(-2px); box-shadow: var(--sombra-brilho); }
.btn-fantasma{ border-color: var(--cor-linha-forte); color: var(--creme-suave); }
.btn-fantasma:hover{ border-color: var(--dourado); color: var(--creme); }

.menu-toggle{
  display: none; background: none; border: 1px solid var(--cor-linha-forte);
  color: var(--creme); border-radius: var(--raio); padding: .5rem .65rem;
}

@media (max-width: 860px){
  .nav-lista{ display: none; }
  .menu-toggle{ display: inline-flex; }
  .header-interno .btn-primario{ display: none; }
  .nav-principal.menu-aberto .nav-lista{
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cor-fundo-2); border-bottom: 1px solid var(--cor-linha);
    padding: var(--s-5) var(--s-5); gap: var(--s-4);
  }
}

/* ----------------------------- 5. BREADCRUMB ----------------------------- */
.trilha{
  font-family: var(--fonte-utilitaria); font-size: .75rem; letter-spacing: .03em;
  color: var(--creme-fraco); padding: var(--s-5) 0 0;
}
.trilha ol{ display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.trilha li:not(:last-child)::after{ content: "/"; margin-left: .4rem; color: var(--cor-linha-forte); }
.trilha a{ color: var(--creme-fraco); transition: color var(--rapido); }
.trilha a:hover{ color: var(--dourado-claro); }
.trilha [aria-current]{ color: var(--creme-suave); }

/* ------------------------------ 6. SELO/TAG ------------------------------ */
.selo{
  --tam: 1px;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fonte-utilitaria); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta); background: var(--dourado-claro);
  padding: .4rem .8rem .4rem .65rem;
  clip-path: polygon(6% 0%,94% 0%,100% 50%,94% 100%,6% 100%,0% 50%);
}
.selo--contorno{ background: transparent; color: var(--dourado-claro); border: 1px solid var(--cor-linha-forte); clip-path: none; border-radius: 999px; }
.selo svg{ width: 12px; height: 12px; }

/* --------------------------- 7. DIVISOR-FITA ----------------------------- */
.fita-divisora{ display: block; width: 100%; height: 18px; margin: var(--s-8) 0; opacity: .55; }
.fita-divisora path{ stroke: var(--dourado); stroke-width: 1; fill: none; }

/* ------------------------------- 8. HERO --------------------------------- */
.hero-blog{ padding: var(--s-9) 0 var(--s-7); position: relative; overflow: hidden; }
.hero-blog .eyebrow, .eyebrow{
  font-family: var(--fonte-utilitaria); font-size: var(--t-eyebrow); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dourado-claro); display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before{ content: ""; width: 26px; height: 1px; background: var(--dourado); }
.hero-blog h1{ font-size: var(--t-display); max-width: 16ch; margin-top: var(--s-4); }
/*.hero-blog h1 em{ font-style: italic; color: var(--dourado-claro); }*/

.hero-blog h1 em {
    line-height: 1.2;
     background: linear-gradient(
        to bottom,
        #9F8F6C 0%,    /* Topo */
        #C9A663 50%,   /* Meio */
        #97825B 100%   /* Base */
    );

    /* Aplica o gradiente somente no texto */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Compatibilidade adicional */
    background-clip: text;
    color: transparent;}



.hero-blog .descricao{ max-width: 38rem; color: var(--creme-suave); font-size: var(--t-lead); margin-top: var(--s-5); }

/* ------------------------------ 9. CARDS --------------------------------- */
.grade-artigos{ display: grid; gap: var(--s-6); grid-template-columns: repeat(3, 1fr); margin-top: var(--s-7); }
.grade-artigos--destaque{ grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 980px){ .grade-artigos, .grade-artigos--destaque{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 660px){ .grade-artigos, .grade-artigos--destaque{ grid-template-columns: 1fr; } }

.cartao-artigo{
  background: linear-gradient(165deg, var(--cor-fundo-2), var(--cor-fundo));
  border: 1px solid var(--cor-linha); border-radius: var(--raio-grande);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--medio), box-shadow var(--medio), border-color var(--medio);
  opacity: 0; transform: translateY(18px);
}
.cartao-artigo.visivel{ opacity: 1; transform: none; }
.cartao-artigo:hover{ transform: translateY(-6px); box-shadow: var(--sombra-brilho); border-color: var(--cor-linha-forte); }
.cartao-artigo .capa{ position: relative; aspect-ratio: 16/10; overflow: hidden; }
.cartao-artigo .capa img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--lento); }
.cartao-artigo:hover .capa img{ transform: scale(1.06); }
.cartao-artigo--destaque .capa{ aspect-ratio: 16/9; }
.cartao-artigo .corpo{ padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.cartao-artigo .meta{ display: flex; gap: .8rem; align-items: center; font-family: var(--fonte-utilitaria); font-size: .72rem; color: var(--creme-fraco); text-transform: uppercase; letter-spacing: .04em; }
.cartao-artigo h3{ font-size: var(--t-h3); }
.cartao-artigo--destaque h3{ font-size: var(--t-h2); }
.cartao-artigo a.titulo-link{ color: var(--creme); transition: color var(--rapido); }
.cartao-artigo a.titulo-link:hover{ color: var(--dourado-claro); }
.cartao-artigo .resumo{ color: var(--creme-suave); font-size: .96rem; }
.cartao-artigo .leia-mais{ margin-top: auto; font-family: var(--fonte-utilitaria); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--dourado-claro); display: inline-flex; align-items: center; gap: .4rem; }
.cartao-artigo .leia-mais svg{ width: 14px; height: 14px; transition: transform var(--rapido); }
.cartao-artigo:hover .leia-mais svg{ transform: translateX(3px); }

/* Placeholder de imagem (sem foto real) */
.img-placeholder{
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, var(--cor-fundo-3) 0 14px, var(--cor-fundo-2) 14px 28px);
}

/* ----------------------------- 10. ARTIGO -------------------------------- */
.capa-artigo{ margin-top: var(--s-5); border-radius: var(--raio-grande); overflow: hidden; aspect-ratio: 16/8; border: 1px solid var(--cor-linha); }
.cabecalho-artigo{ padding-top: var(--s-7); max-width: 48rem; }
.cabecalho-artigo h1{ font-size: var(--t-h1); margin-top: var(--s-4); }
.cabecalho-artigo .resumo{ font-size: var(--t-lead); color: var(--creme-suave); margin-top: var(--s-4); }
.meta-artigo{
  display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid var(--cor-linha);
  font-family: var(--fonte-utilitaria); font-size: .78rem; color: var(--creme-fraco); text-transform: uppercase; letter-spacing: .04em;
}
.meta-artigo span{ display: inline-flex; align-items: center; gap: .45rem; }

.layout-artigo{ display: grid; grid-template-columns: minmax(0,1fr) 16rem; gap: var(--s-8); margin-top: var(--s-8); align-items: start; }
@media (max-width: 980px){ .layout-artigo{ grid-template-columns: 1fr; } }

.corpo-artigo{ max-width: var(--largura-conteudo); font-size: var(--t-corpo); color: var(--creme-suave); }
.corpo-artigo > * + *{ margin-top: var(--s-5); }
.corpo-artigo h2{ font-size: var(--t-h2); color: var(--creme); margin-top: var(--s-8); scroll-margin-top: 6rem; }
.corpo-artigo h3{ font-size: var(--t-h3); color: var(--creme); margin-top: var(--s-7); scroll-margin-top: 6rem; }
.corpo-artigo p{ }
.corpo-artigo ul, .corpo-artigo ol{ padding-left: 1.3rem; display: grid; gap: .6rem; }
.corpo-artigo li::marker{ color: var(--dourado-claro); }
.corpo-artigo a{ color: var(--dourado-claro); text-decoration: underline; text-decoration-color: var(--cor-linha-forte); text-underline-offset: 3px; }
.corpo-artigo a:hover{ text-decoration-color: var(--dourado-claro); }
.corpo-artigo strong{ color: var(--creme); }
.corpo-artigo figure{ margin: 0; }
.corpo-artigo figcaption{ font-family: var(--fonte-utilitaria); font-size: .78rem; color: var(--creme-fraco); margin-top: .6rem; text-align: center; }
.corpo-artigo table{ font-size: .92rem; border: 1px solid var(--cor-linha); border-radius: var(--raio); overflow: hidden; }
.corpo-artigo th, .corpo-artigo td{ padding: .75rem .9rem; border-bottom: 1px solid var(--cor-linha); text-align: left; }
.corpo-artigo thead th{ background: var(--cor-fundo-2); color: var(--dourado-claro); font-family: var(--fonte-utilitaria); text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; }
.corpo-artigo tbody tr:last-child td{ border-bottom: none; }
.corpo-artigo tbody tr:hover{ background: rgba(201,168,106,.06); }

.citacao{
  position: relative; font-family: var(--fonte-display); font-style: italic;
  font-size: var(--t-lead); color: var(--creme); padding-left: var(--s-6);
  border-left: 2px solid var(--dourado);
}

.caixa-destaque{
  background: linear-gradient(160deg, var(--cor-fundo-2), var(--cor-fundo-3));
  border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-grande);
  padding: var(--s-6); display: grid; gap: .6rem;
}
.caixa-destaque h4{ font-size: 1.05rem; color: var(--dourado-claro); }
.caixa-destaque p{ color: var(--creme-suave); font-size: .96rem; }

/* Tabela de conteúdo (sumário) */
.sumario{
  position: sticky; top: 6rem; background: var(--cor-fundo-2);
  border: 1px solid var(--cor-linha); border-radius: var(--raio-grande);
  padding: var(--s-5);
}
.sumario .eyebrow{ margin-bottom: var(--s-3); }
.sumario ol{ list-style: none; display: grid; gap: .55rem; counter-reset: sumario; }
.sumario li{ counter-increment: sumario; font-size: .88rem; }
.sumario a{
  color: var(--creme-suave); display: flex; gap: .55rem; transition: color var(--rapido);
}
.sumario a::before{
  content: counter(sumario, decimal-leading-zero); font-family: var(--fonte-utilitaria);
  color: var(--dourado); font-size: .76rem; padding-top: .1rem;
}
.sumario a:hover, .sumario a.ativo{ color: var(--dourado-claro); }
.caixa-cta-lateral{ margin-top: var(--s-6); }

/* --------------------------- 11. CTA DE PRODUTO -------------------------- */
.cta-produto{
  margin-top: var(--s-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7);
  align-items: center; background: linear-gradient(135deg, var(--bordo-escura), var(--cor-fundo-2));
  border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-grande);
  padding: var(--s-7); position: relative; overflow: hidden;
}
.cta-produto::after{
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 22rem; height: 22rem;
  background: radial-gradient(circle, rgba(201,168,106,.18), transparent 70%); pointer-events: none;
}
@media (max-width: 760px){ .cta-produto{ grid-template-columns: 1fr; } }
.cta-produto h3{ font-size: var(--t-h2); }
.cta-produto p{ color: var(--creme-suave); margin-top: var(--s-3); }
.cta-produto .precos{ display: flex; align-items: baseline; gap: .6rem; margin-top: var(--s-4); }
.cta-produto .preco-antigo{ text-decoration: line-through; color: var(--creme-fraco); font-family: var(--fonte-utilitaria); }
.cta-produto .preco-atual{ font-family: var(--fonte-display); font-size: 1.8rem; color: var(--dourado-claro); }
.cta-produto .capa-mini{ aspect-ratio: 4/5; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--cor-linha-forte); }

/* ------------------------------- 12. FAQ ---------------------------------- */
.faq{ display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.faq-item{ border: 1px solid var(--cor-linha); border-radius: var(--raio); overflow: hidden; background: var(--cor-fundo-2); }
.faq-pergunta{
  width: 100%; text-align: left; background: none; border: none; color: var(--creme);
  padding: var(--s-4) var(--s-5); display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-4); cursor: pointer; font-family: var(--fonte-corpo); font-weight: 600; font-size: 1rem;
}
.faq-pergunta .icone-mais{ flex-shrink: 0; width: 18px; height: 18px; position: relative; }
.faq-pergunta .icone-mais::before, .faq-pergunta .icone-mais::after{
  content: ""; position: absolute; background: var(--dourado-claro); transition: transform var(--rapido);
}
.faq-pergunta .icone-mais::before{ width: 100%; height: 1.5px; top: 50%; left: 0; transform: translateY(-50%); }
.faq-pergunta .icone-mais::after{ width: 1.5px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.faq-item[open] .icone-mais::after{ transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-resposta{ padding: 0 var(--s-5) var(--s-5); color: var(--creme-suave); }
.faq-item summary{ list-style: none; }
.faq-item summary::-webkit-details-marker{ display: none; }

/* --------------------------- 13. AUTOR / RELACIONADOS --------------------- */
.bloco-autor{
  margin-top: var(--s-8); display: flex; gap: var(--s-5); align-items: flex-start;
  border-top: 1px solid var(--cor-linha); padding-top: var(--s-6);
}
.avatar-autor{
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(145deg, var(--bordo-clara), var(--bordo-escura));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-display); color: var(--dourado-claro); font-size: 1.2rem; border: 1px solid var(--cor-linha-forte);
}
.bloco-autor h4{ font-size: 1rem; }
.bloco-autor p{ color: var(--creme-fraco); font-size: .9rem; margin-top: .3rem; }

.secao-relacionados{ margin-top: var(--s-9); }
.secao-relacionados .titulo-secao{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.titulo-secao h2{ font-size: var(--t-h2); }
.titulo-secao a{ font-family: var(--fonte-utilitaria); font-size: .8rem; color: var(--dourado-claro); text-transform: uppercase; letter-spacing: .05em; /*white-space: nowrap;*/ }

/* ------------------------------ 14. NEWSLETTER --------------------------- */
.newsletter{
  margin-top: var(--s-9); padding: var(--s-8) var(--s-7); text-align: center;
  background: radial-gradient(60rem 30rem at 50% -40%, rgba(124,31,46,.35), transparent 70%), var(--cor-fundo-2);
  border-radius: var(--raio-grande); border: 1px solid var(--cor-linha);
}
.newsletter h2{ font-size: var(--t-h2); max-width: 28ch; margin-inline: auto; }
.newsletter p{ color: var(--creme-suave); max-width: 34rem; margin: var(--s-4) auto 0; }
.form-newsletter{ display: flex; gap: .8rem; max-width: 26rem; margin: var(--s-6) auto 0; flex-wrap: wrap; justify-content: center; }
.form-newsletter input{
  flex: 1; min-width: 12rem; background: var(--cor-fundo); border: 1px solid var(--cor-linha-forte);
  color: var(--creme); padding: .8rem 1rem; border-radius: var(--raio); font-family: var(--fonte-corpo);
}
.form-newsletter input::placeholder{ color: var(--creme-fraco); }
.aviso-newsletter{ font-size: .78rem; color: var(--creme-fraco); margin-top: var(--s-3); }

/* -------------------------------- 15. FOOTER ------------------------------ */
.site-footer{ margin-top: var(--s-10); border-top: 1px solid var(--cor-linha); padding: var(--s-8) 0 var(--s-6); }
.grade-footer{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-7); }
@media (max-width: 860px){ .grade-footer{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .grade-footer{ grid-template-columns: 1fr; } }
.grade-footer h5{ font-family: var(--fonte-utilitaria); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dourado-claro); margin-bottom: var(--s-4); }
.grade-footer ul{ display: grid; gap: .6rem; list-style: none; }
.grade-footer a{ color: var(--creme-suave); font-size: .92rem; transition: color var(--rapido); }
.grade-footer a:hover{ color: var(--dourado-claro); }
.grade-footer p{ color: var(--creme-suave); font-size: .92rem; }
.rodape-base{
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--cor-linha);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
  font-size: .8rem; color: var(--creme-fraco);
}
.rodape-base a{ color: var(--creme-fraco); }
.rodape-base a:hover{ color: var(--dourado-claro); }
.selos-pagamento{ display: flex; gap: .8rem; flex-wrap: wrap; font-size: .85rem; color: var(--creme-fraco); margin-top: var(--s-3); }

/* ---------------------------- 16. BOTÃO VOLTAR TOPO ----------------------- */
.btn-topo{
  position: fixed; right: var(--s-5); bottom: var(--s-5); width: 46px; height: 46px;
  border-radius: 50%; background: var(--cor-fundo-2); border: 1px solid var(--cor-linha-forte);
  color: var(--dourado-claro); display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity var(--medio), transform var(--medio); z-index: 90;
}
.btn-topo.visivel{ opacity: 1; pointer-events: auto; transform: none; }
.btn-topo:hover{ border-color: var(--dourado); }

/* ------------------------------- 17. UTILITÁRIOS -------------------------- */
.somente-leitor{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.centro{ text-align: center; }
.secao{ padding-block: var(--s-9); }
.secao--compacta{ padding-block: var(--s-7); }
.animar-entrada{ opacity: 0; transform: translateY(18px); transition: opacity var(--lento), transform var(--lento); }
.animar-entrada.visivel{ opacity: 1; transform: none; }

/* Lista de capacidades / grade de itens com selo */
.lista-marcada{ list-style: none; display: grid; gap: .7rem; }
.lista-marcada li{ display: flex; gap: .65rem; align-items: flex-start; }
.lista-marcada svg{ flex-shrink: 0; margin-top: .2rem; width: 16px; height: 16px; color: var(--dourado); }

/* ------------------------ 18. NAV. ENTRE ARTIGOS -------------------------- */
.navegacao-artigos{
  margin-top: var(--s-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
}
.navegacao-artigos a{
  border: 1px solid var(--cor-linha); border-radius: var(--raio-grande); padding: var(--s-5);
  display: flex; flex-direction: column; gap: .35rem; transition: border-color var(--rapido), transform var(--rapido);
}
.navegacao-artigos a:hover{ border-color: var(--dourado); transform: translateY(-2px); }
.navegacao-artigos .rotulo{ font-family: var(--fonte-utilitaria); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--creme-fraco); display: flex; align-items: center; gap: .4rem; }
.navegacao-artigos .titulo-nav{ color: var(--creme); font-family: var(--fonte-display); font-size: 1.05rem; }
.navegacao-artigos .seguinte{ text-align: right; align-items: flex-end; }
@media (max-width: 660px){ .navegacao-artigos{ grid-template-columns: 1fr; } }

/* -------------------------- 19. FILTRO DE CATEGORIAS ----------------------- */
.filtro-categorias{ display: flex; gap: .6rem; flex-wrap: wrap; margin-top: var(--s-6); }
.filtro-categorias button{
  background: transparent; border: 1px solid var(--cor-linha-forte); color: var(--creme-suave);
  padding: .55rem 1.1rem; border-radius: 999px; font-size: .85rem; cursor: pointer;
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}
.filtro-categorias button:hover{ border-color: var(--dourado); color: var(--creme); }
.filtro-categorias button[aria-pressed="true"]{
  background: linear-gradient(135deg, var(--gold-clara), var(--gold)); color: #2A2420; border-color: transparent;
}
.cartao-artigo.oculto{ display: none; }

@media print{
  .site-header, .site-footer, .btn-topo, .barra-progresso, .sumario, .cta-produto, .newsletter{ display: none; }
}