/*
Theme Name: Tema 5 desenvolvido por Trek Mobi Connect
Theme URI: https://trekmobi.com
Author: Trek Mobi Connect
Description: Tema 05
Version: 0.1.0
Text Domain: tema-05
*/

:root {
  --violet-700:#333333; /* roxo */
  --violet-600:#7E56C6; /* roxo */
  --violet-500:#D9D9D9; /* roxo */
  --violet-50:#F2EDFA;  /* roxo claro */
  --green-500:#59C173;  /* ✅ verde correto (2 hifens, nome padronizado) */
  --bg:#ffffff;         /* fundo */
  --fg:#111111;         /* texto */
  --radius:12px;        /* raio */
  --space-2:.5rem;      /* 8px */
  --space-3:1rem;       /* 16px */
  --space-4:1.5rem;     /* 24px */
  --shadow-1:0 6px 24px rgba(0,0,0,.06); /* sombra */
  --wrap: 1600px;       /* largura máxima do site (alinha Hero e Recentes) */
  --page-pad:clamp(16px,3vw,32px); /* padding lateral responsivo */
}

/*  Reset / Base  */
*,*::before,*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; display: block; }

a { color: var(--violet-700); text-decoration: none; }

a:hover { color: var(--violet-600); }

.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;
}

.side-nav{ width: 180px !important; }

.site-footer .custom-logo{
  width:250px; height:65px; max-width:100% !important;
}

/*  Layout helpers  */
.container {                                  /* wrapper central do site */
  width: min(100%, var(--wrap));              /* nunca passa da largura máxima */
  margin-inline: auto;                        /* centraliza */
  padding-inline: var(--page-pad);            /* respiro lateral responsivo */
}
.section { padding: var(--space-5) 0; }

.section-title {
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--violet-700);
  text-align: center;
  margin: 0 0 var(--space-4);
}

.section-divider {
  height: 2px;
  background: var(--violet-50);
  border: 0;
  margin: var(--space-5) 0;
}

/* ===== Botão LEIA MAIS — exatamente como o print ===== */
.btn,                                    /* estilo base do botão */
.btn-leia-mais {                          /* aplica também à classe específica usada na hero */
  display: inline-flex;                   /* coloca texto e ícone lado a lado */
  align-items: center;                    /* alinha verticalmente no centro */
  gap: 12px;                              /* espaço entre o texto e a seta */
  padding: 12px 18px;                     /* área clicável interna */
  border: 0;                              /* sem borda */
  border-radius: 4px;                     /* cantos retos (leve arredondado) */
  font-weight: 700;                       /* texto em negrito */
  text-transform: uppercase;              /* caixa alta */
  letter-spacing: .02em;                  /* leve tracking */
  line-height: 1;                         /* altura de linha compacta */
  text-decoration: none;                  /* remove sublinhado */
}

.btn--primary,
.btn--primary:link,
.btn--primary:visited {                   /* garante branco em todos os estados de link */
  background: #000000;          /* ✅ fundo verde */
  color: #ffffff;                         /* ✅ texto branco */
}

.btn--primary:hover {                     /* estado hover */
  filter: brightness(.95);                /* leve escurecida no hover */
}

/* Ícone seta SEM bolinha — somente a seta branca */
.btn--primary > span {                    /* alvo o <span> da seta */
  color: #ffffff;                         /* ✅ seta branca */
  background: transparent;                /* sem fundo (remove a bolinha) */
  width: auto;                            /* sem largura fixa */
  height: auto;                           /* sem altura fixa */
  line-height: 1;                         /* alinha com o texto */
  display: inline-block;                  /* comportamento inline */
  border-radius: 0;                       /* garante sem círculo */
  padding: 0;                             /* sem preenchimento */
}

/* versão pequena (cards da direita) */
.btn--sm {                                /* botão compacto */
  padding: 8px 12px;                      /* reduzido */
  font-size: .875rem;                     /* fonte menor */
}

.post-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--violet-700);
}
.post-tag::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--violet-700);
  border-radius: 2px;
}

/*  Header  */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 2px solid var(--violet-50);
}

.header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.site-logo img { height: 44px; width: auto; }
.header-spacer { flex: 1; }

/* Search (header) */
.header-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid #F5F5F5;
  border-radius: 0;
  padding: 6px 10px;
  background: #F5F5F5;
  height: 33px;
  border-radius: 8px;
}

.header-search input {
  appearance: none;
  border: 0;
  outline: 0;
  background: #F5F5F5;
  min-width: 260px;
  font: inherit;
  color: var(--fg);
}

.header-search button {
  border: 0;
  background: #F5F5F5;
  color: var(--violet-700);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  line-height: 0;
}

/* Hamburger */
.hamburger {
  margin-left: 12px;
  inline-size: 32px;
  block-size: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 0;
}

.hamburger .bars {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: var(--violet-700); /* linha central */
}

.hamburger .bars::before,
.hamburger .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height:2px;
  background: var(--violet-700);
}

.hamburger .bars::before { top: -7px; } /* linha de cima */
.hamburger .bars::after  { top:  7px; } /* linha de baixo */

/* Primary nav (mobile dropdown simples) */
.primary-nav {
  display: none;
  padding-bottom: 1rem;
}

.primary-nav.is-open {
  display: block;
}

.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.primary-nav a {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--violet-50);
  border-radius: 10px;
}

.primary-nav a:hover {
  border-color: var(--violet-500);
  background: var(--violet-50);
}

@media (max-width: 768px){
  .site-header{
    border-bottom: 1px solid #f5f5f5; /* cinza claro */
    background:#fff;
  }

  .side-nav{ display:none; }

  /* Grid 3 colunas: [hamburguer] [logo central] [busca] */
  .header-row{
    display:grid;
    grid-template-columns: 32px 1fr 32px;
    align-items:center;
    gap: 0;
    padding: 12px 16px;
    width: 360px;
  }

  /* Esconde o spacer do desktop */
  .header-spacer{ display:none; }

  /* Hambúrguer à esquerda */
  .hamburger{
    order: 1;
    justify-self:start;
    inline-size:32px; block-size:32px;
    margin:0;
  }
  .hamburger .bars,
  .hamburger .bars::before,
  .hamburger .bars::after{ background:#000; } /* preto */

  /* Logo CENTRAL em "pill" */
  .site-logo{
    order: 2;
    justify-self:center;
    display:inline-grid;
    place-items:center;
    padding: 6px 18px;
    text-decoration:none;
  }
  .site-logo img{
    height:22px; width:auto; display:block;
  }
  .site-logo strong{
    font-size:16px; font-weight:800; color:#000; line-height:1;
  }

  /* Busca: mostrar só o ícone à direita */
  .header-search{
    order: 3;
    justify-self:end;
    padding:0;
    border:0;
    background:transparent;
    height:32px; width:32px;
  }
  /* Esconde o input no mobile, mantendo acessibilidade */
  .header-search input{ 
    display:none !important;
  }
  /* Deixa o botão como ícone circular (lupa) */
  .header-search button{
    display:grid; place-items:center;
    width:32px; height:32px;
    padding:0; margin:0;
    border:0;
    background:transparent;
    color:#000;              /* preto */
    line-height:0;
    cursor:pointer;
  }

  /* Dropdown do menu mobile */
  .primary-nav{
    padding: 8px 16px 16px;
  }
  .primary-nav ul{ gap:10px; }
  .primary-nav a{
    border:1px solid #d9d9d9;
    background:#fff;
    color:#000;
    border-radius:10px;
  }
  .primary-nav a:hover{
    border-color:#333;
    background:#f5f5f5;
  }
}

/* ===== CORES GERAIS (substitui roxos por preto/cinzas) ===== */
:root{
  --fg: #000;
}
.site-header,
.primary-nav a{ color:#000; }

/*  Cards de Post  */
.post-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-3);
  border: 1px solid var(--violet-50);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: #fff;
  box-shadow: var(--shadow-1);
}

.post-card:hover { border-color: var(--violet-500); }
.post-card__thumb { overflow: hidden; border-radius: calc(var(--radius) - 4px); }

.post-card__title {
  margin: 0 0 .35rem;
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
  color: #111;
}

.post-card__meta {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .5rem;
}

.post-card__excerpt { color: #333; }

/* Hero principal (grid: 2 colunas) */
/* ===== HERO (layout e estilos) ===== */
.container { max-width: 1600px; }                  /* alinhado ao pedido (tb afeta Recentes) */
.hero-layout {                                     /* grid geral da hero */
  display: grid;                                   /* ativa grid */
  grid-template-columns: 140px 775px 531px;        /* sidebar | destaque | direita (px do Figma) */
  gap: 32px;                                       /* espaçamento entre colunas */
  margin-top: 40px;                                /* distância do header */
}

/* Sidebar esquerda (menu) */
.side-nav {                             /* caixa do menu lateral */
  border: 1px solid var(--violet-500);  /* borda roxa */
  background: #fff;                     /* fundo branco */
  padding: 28px 16px;                   /* respiro interno */
}
.side-nav__list {                       /* lista vertical */
  list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; /* espaçamento entre itens */
}
.side-nav__list a {                     /* links do menu */
  color: var(--violet-700);             /* roxo forte */
  font-weight: 700;                     /* bold */
  text-transform: uppercase;            /* como no Figma */
  letter-spacing: .02em;                /* leve tracking */
  font-size: .85rem;                    /* tamanho pequeno */
}

/* Post destaque (centro) */
.hero-main {                            /* contêiner do destaque */
  border: 1px solid var(--violet-50);   /* borda suave */
  background: #fff;                     /* fundo branco */
  border-radius: var(--radius);         /* cantos suaves */
  overflow: hidden;                     /* evita vazamento da img */
}
.hero-main__inner { display: grid; grid-template-rows: auto 1fr; } /* img em cima, texto embaixo */
.hero-main__thumb img { width: 100%; height: auto; display: block; } /* destaca 775×480 → altura vira 480px */
.hero-main__content { padding: 18px 20px 22px; }  /* padding interno do texto */
.hero-main__title { font-size: 2.25rem; line-height: 1.15; margin: 10px 0 8px; } /* título grande */
.hero-main__excerpt { color: #333; margin: 0 0 14px; } /* resumo como no layout */

/* Coluna direita: 2 cards com borda verde */
.hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; } /* dois blocos empilhados */
.hero-side__card {                     /* card */
  border: 2px solid var(--violet-500);  /* borda verde, bem visível */
  background: #fff; padding: 14px;     /* respiro */
  border-radius: 6px;                  /* canto levemente arredondado */
}
.hero-side__thumb { display: block; border: 1px solid var(--violet-500); } /* moldura da imagem */
.hero-side__thumb img { width: 100%; height: auto; display: block; } /* cards 531×196 → altura vira 196px */
.hero-side__title { margin: 12px 0 10px; font-size: 1.05rem; line-height: 1.3; } /* título */
.btn--sm { padding: .45rem .75rem; font-size: .875rem; } /* botão menor */

/* Proporções visuais idênticas ao Figma (reforço) */
.hero-main__thumb { aspect-ratio: 775 / 480; } /* caixa no aspecto 775x480 */
.hero-side__thumb { aspect-ratio: 531 / 196; } /* caixa no aspecto 531x196 */
.hero-main__thumb img,
.hero-side__thumb img {
  width: 100%;           /* ocupa toda a caixa */
  height: 100%;          /* ocupa toda a caixa */
  object-fit: cover;     /* recorta sem distorcer */
}

/* Responsivo (empilhar em telas menores) */
@media (max-width: 1180px){
  .hero-layout { grid-template-columns: 120px 1fr 380px; gap: 24px; } /* ajusta larguras */
}
@media (max-width: 1024px){
  .hero-layout { grid-template-columns: 1fr; } /* empilha tudo */
  .hero-side { grid-template-rows: none; grid-template-columns: 1fr; } /* cards viram lista */
}
@media (max-width: 768px){
  .hero-main img {
    width: 320px;
    height: auto;
    margin: 0 auto;       /* centraliza a imagem */
    border-radius: var(--radius);
  }
  .hero-main__content {
    width: 340px;
    margin: 0 auto;       /* centraliza o conteúdo */
  }
}
/* ===== HERO SIDE – CARROSSEL MOBILE (scroll por arraste + centralizado + dica visual) ===== */
@media (max-width: 768px){
  .hero-side{
    display: flex !important;             /* override do grid no mobile */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;    /* suaviza no iOS */
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    gap: 12px;
    padding: 8px 16px;
    margin: 0 -16px;                      /* encosta nas bordas */
    position: relative;

    /* “fade” nas laterais para sugerir que há mais conteúdo */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);

    /* ocultar barra em navegadores que suportam */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .hero-side::-webkit-scrollbar{ display:none; }

  /* espaçadores laterais para o 1º e último slide ficarem centralizados */
  .hero-side::before,
  .hero-side::after{
    content: "";
    flex: 0 0 6%;                          /* metade do espaço que sobra (100% - 88%) / 2 */
  }

  /* cada slide ocupa ~88% para “aparecer a ponta” do próximo */
  .hero-side__card{
    flex: 0 0 88%;
    scroll-snap-align: center;             /* trava no centro */
    border-radius: 12px;
    transition: transform .22s ease, opacity .22s ease;
    transform-origin: center;
  }

  /* garantir imagens 100% e padding interno */
  .hero-side__thumb img{ width:100%; height:auto; display:block; }
  .hero-side__Content, .hero-side__content{ padding: 8px 12px 12px; }

  /* UX arraste no desktop/emulador (opcional, não interfere no touch) */
  .hero-side{ touch-action: pan-x; cursor: grab; }
  .hero-side.is-grabbing{ cursor: grabbing; }
  .hero-side a, .hero-side img{ user-select: none; -webkit-user-drag: none; }

  /* garantir que possíveis setas antigas não apareçam */
  .hs-arrow, .hs-prev, .hs-next{ display:none !important; }
}

/* === HERO ROTATOR (fade entre trios) === */
.hero-rotator{ position:relative; display:block; }

/* cada slide replica as 2 colunas (775px | 531px) */
.hero-rotator .hero-slide{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity .5s ease; will-change:opacity;

  display:grid;
  grid-template-columns:775px 531px;
  gap:32px;
}

/* o ativo “tira” do absolute para altura natural */
.hero-rotator .hero-slide.is-active{
  opacity:1; pointer-events:auto;
  position:relative;
}

/* rotator ocupa colunas 2–3 da grid mãe */
.hero-layout > .hero-rotator{ grid-column:2 / span 2; margin-left: 50px; }

/* Responsivo: quando a .hero-layout empilha, o slide vira 1 coluna */
@media (max-width:1024px){
  .hero-rotator .hero-slide{
    grid-template-columns:1fr;
    gap:24px;
  }
  .hero-layout > .hero-rotator {
    margin-left: 0px !important;
  }
}


/* ===== Postagens Recentes (Tema 05) ===== */
/* Ajustes pedidos: largura alinhada ao container (1600px), 
   altura 550px em desktop, margem-top 80px, imagens 316x236, 
   título #000 com 22px. */

.home-recent{
  margin-top: 80px;            /* somente topo = 80px */
  height: 550px;               /* altura da seção em desktop */
  display: grid;
  grid-template-rows: auto 1fr;/* título + grid */
}

.home-recent .card--recent{ align-items: flex-start; } /* sai do center */

.home-recent .card--recent .card__actions{
  width: 316px;              /* mesma largura da imagem */
  justify-content: flex-start !important; /* sai do center */
}

.home-recent .card--recent .post-tag--recent,
.home-recent .card--recent .card__title,
.home-recent .card--recent .card__actions{
  width: 316px !important;               /* mesma largura da imagem */
}

/* força o título a ficar à esquerda mesmo com a classe --center */
.home-recent .card--recent .card__title,
.home-recent .card--recent .card__title.card__title--center{
  text-align: left !important;
}

/* responsivo: quando a imagem vira 100%, os textos acompanham */
@media (max-width: 800px){
  .home-recent .card--recent{ align-items: stretch; }
  .home-recent .card--recent .post-tag--recent,
  .home-recent .card--recent .card__title,
  .home-recent .card--recent .card__actions{
    width: 100%;
  }
}

.section__title{
  text-align:center;
  font-weight:700;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  color:#333333; /* roxo principal */
  margin: 0 0 1.5rem;
}

.cards-grid--recent{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 2rem;
  align-items: stretch;        /* cards com alturas consistentes */
}

@media (max-width: 1024px){
  .home-recent{ height:auto; } /* libera altura em telas menores */
  .cards-grid--recent{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .cards-grid--recent{ grid-template-columns: 1fr; }
}

.card--recent{
  border:1px solid #D9D9D9;         /* borda roxa da identidade */
  padding: 1.25rem;
  background:#fff;
  transition: box-shadow .2s ease, transform .2s ease;
  align-items: flex-start;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.card--recent:hover{
  box-shadow: 0 10px 22px rgba(93,38,193,.12);
  transform: translateY(-2px);
}

/* Imagem com tamanho FIXO 316x236 */
.card__thumb{ 
  width:316px; 
  height:236px; 
  border-radius:6px; 
  overflow:hidden; 
  flex:0 0 auto; 
}
.card__thumb img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
}

.post-tag--recent{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font: 600 11px/1.2 Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#333333;
  margin-bottom:.75rem;
  align-self:flex-start;        /* alinha a etiqueta à esquerda do card */
}

/* “risco” (hífen grosso) antes do nome da categoria */
.post-tag--recent::before{
  content:"";
  display:inline-block;
  width:16px;
  height:6px;               /* mais “grosso” */
  background:#333333;
  border-radius:2px;
}

.card__title{ 
  margin: .25rem 0 1.0rem; 
  font-weight:700; 
  font-size:22px;           /* tamanho solicitado */
  text-align:center; 
}
.card__title a{ color:#000; text-decoration:none; } /* cor solicitada */
.card__title a:hover{ color:#333333; }

.card__actions{
  margin-top:auto;          /* botão no rodapé do card */
  display:flex;
  justify-content:center;   /* botão centralizado */
}

/* ===== RECENTES – CARROSSEL MOBILE + DOTS ===== */
@media (max-width: 768px){
  .cards-grid--recent{
    display: flex !important;          /* override do grid */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    gap: 12px;
    padding: 8px 16px;
    margin: 0 -16px;                   /* encosta nas bordas */
    -ms-overflow-style: none;
    scrollbar-width: none;

    /* fade lateral para sugerir slide */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .cards-grid--recent::-webkit-scrollbar{ display:none; }

  /* espaçadores p/ centralizar 1º e último */
  .cards-grid--recent::before,
  .cards-grid--recent::after{ content:""; flex:0 0 6%; }

  /* cada slide ~88% para “aparecer a ponta” do próximo */
  .cards-grid--recent .card--recent{
    flex: 0 0 88%;
    scroll-snap-align: center;
    border-radius: 12px;
    transition: transform .22s ease, opacity .22s ease; /* animação suave */
  }

  /* textos acompanham a largura no mobile */
  .home-recent .card--recent .post-tag--recent,
  .home-recent .card--recent .card__title,
  .home-recent .card--recent .card__actions{ width:100% !important; }

  /* dots */
  .recent-dots{
    display:flex; justify-content:center; gap:8px;
    margin:10px 0 0;
  }
  .recent-dot{
    width:8px; height:8px; border:0; border-radius:9999px;
    background:#d9d9d9; padding:0; cursor:pointer;
  }
  .recent-dot.is-active{
    background:#000; transform:scale(1.25);
  }
}


/* Botão já herda o padrão do tema; reforço do verde da identidade */
.btn--primary{
  background:#000000;
  color:#fff;
}
.btn--primary:hover{
  filter: brightness(0.95);
}
.btn--sm{ padding:.55rem 1.1rem; font-weight:600; }



/*  Newsletter  */
.newsletter {
  padding: var(--space-5) 0;
  border-top: 2px solid var(--violet-50);
  border-bottom: 2px solid var(--violet-50);
  background: #fff;
}

.newsletter__row {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: var(--space-4);
}

.newsletter__title {
  margin: 0 0 .25rem;
  color: var(--violet-700);
  font-weight: 700;
  font-size: 1.5rem;
}

.newsletter__desc { margin: 0; color: var(--muted); }
.newsletter-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
}

.newsletter-form input[type="email"] {
  border: 2px solid var(--violet-500);
  border-radius: 999px;
  padding: .65rem .9rem;
  outline: 0;
  font: inherit;
}

.newsletter-form button {
  border: 0;
  border-radius: 999px;
  padding: .7rem 1rem;
  font-weight: 700;
  background: var(--violet-700);
  color: #fff;
  cursor: pointer;
}

.newsletter-form button:hover { background: var(--violet-600); }

/* ===== Footer ===== */
.site-footer { margin-top: 40px; }

.footer__wrap{
  max-width: 1600px;
  margin: 0 auto;
}

.footer__grid{
  border-bottom: 1px solid #D9D9D9;
  padding: 36px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  column-gap: 40px;
}

/* === Coluna da marca (fixo à esquerda + largura do conteúdo) === */
.footer__brand{
  display: flex;
  flex-direction: column;
  align-items: center;        /* centraliza o texto em relação à logo */
  width: max-content;         /* a coluna encolhe para a largura da logo */
}

.footer__brand .site-logo,
.footer__brand .custom-logo-link{
  display: inline-block;
  line-height: 0;
  float: none !important;
}

.footer__brand .site-logo img{ height: 40px; width: 250px; display: block; }
.footer__brand .site-logo strong{ font-size: 28px; }

/* Texto abaixo da logo — agora centraliza sob a própria logo */
.footer__text{
  margin: 14px 0 0;
  max-width: 360px;           /* quebra agradável */
  text-align: center;
  line-height: 1.35;
  width: auto;                /* NÃO ocupar a coluna toda */
}

/* Colunas de menu */
.footer__col{ }
.footer__title{
  font-size: 38px;
  line-height: 1.15;
  color: #333333;
  margin: 0 0 16px 0;
}
.footer__menu{ list-style: none; margin: 0; padding: 0; }
.footer__menu li{ margin: 10px 0; }
.footer__menu a{ text-decoration: none; color: #111; }
.footer__menu a:hover{ text-decoration: underline; }

/* Copyright */
/* ===== Footer – barra final ===== */
.footer__copy{
  padding: 18px 0 26px;
}

.footer__copy-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer__legal{
  font-size: 14px;
  color: #444;
}

.footer__logo img{
  height: 35px;          /* ajuste fino da altura do mock */
  width: auto;
  display: block;
}

/* ===== Mobile ===== */
@media (max-width: 640px){
  /* Limita o conteúdo do footer a 360px e centraliza */
  .site-footer .footer__wrap{
    max-width: 360px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .footer__copy .footer__wrap{
    max-width: 360px; /* barra final também em 360px */
  }

  /* grade vira uma coluna */
  .footer__grid{
    grid-template-columns:1fr;
    row-gap:28px;
    padding:36px 0;
  }

  /* coluna da marca */
  .footer__brand{
    width:100%;
    align-items:center;
  }
  .footer__brand .site-logo img{ height:56px; }
  .footer__text{
    margin-top:14px;
    max-width:320px;
    text-align:center;
    line-height:1.4;
  }

  /* títulos */
  .footer__title{
    font-size:28px;
    line-height:1.2;
    color:#333333;
    text-align:center;
    margin:12px 0 16px;
  }

  /* Links Relevantes – lista centralizada */
  .footer__col:nth-of-type(2) .footer__menu{
    list-style:none; margin:0; padding:0;
    text-align:center;
  }
  .footer__col:nth-of-type(2) .footer__menu li{
    margin:12px 0;
  }
  .footer__menu a{ color:#111; text-decoration:none; }
  .footer__menu a:hover{ text-decoration:underline; }

  /* Categorias – grade 3 colunas centralizada dentro dos 360px */
  .footer__col:nth-of-type(3) .footer__menu{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px 28px;                 /* linhas x colunas */
    justify-items:center;
    list-style:none; margin:0; padding:0;
  }
  .footer__col:nth-of-type(3) .footer__menu li{
    margin:0;                      /* grid controla o espaçamento */
    text-align:center;
  }

  /* Bloco final */
  .footer__copy-row{
    flex-direction: column-reverse; /* logo acima, texto abaixo */
    align-items: center;
    text-align: center;
    gap: 30px;
  }
  .footer__logo img{ height:48px; margin-top: 20px; }
  .footer__legal{
    font-size:14px;
    color:#444;
  }
}

/* Telas muito pequenas: microajustes */
@media (max-width: 380px){
  .footer__col:nth-of-type(3) .footer__menu{ gap:12px 20px; }
  .footer__title{ font-size:26px; }
}


/* Se você também usa as classes com hífen no HTML, mantenha equivalentes: */
.footer-brand{ display:flex; flex-direction:column; align-items:center; width:max-content; }
.footer-text{ margin:14px 0 0; max-width:360px; text-align:center; line-height:1.35; width:auto; }


/* ===== Categoria em Destaque — layout com 3 colunas fixas ===== */
.home-cat{ margin-top:80px; }
.home-cat__title{
  color: var(--violet-700);
  font-weight:700;
  font-size:2rem;
  margin:0 0 16px;
}

/* 3 colunas: 591 | 490 | 490. Gap calculado p/ fechar ~1600px */
.home-cat__grid{
  display:grid;
  grid-template-columns: 591px 490px 490px;
  column-gap:14px;          /* entre colunas */
  row-gap:0;
  border:1px solid var(--violet-500);
  padding:20px;
}

/* como há só 2 filhos (esquerda/direita), a direita precisa ocupar 2 colunas */
.cat-right{ grid-column: 2 / span 2; }

/* === ESQUERDA (destaque) === */
.cat-left__card{ 
  display:flex; 
  flex-direction:column; 
  gap:14px; 
  min-height:516px;         /* altura total do bloco */
}
.cat-left__thumb{
  width:591px; 
  height:320px;             /* altura da foto dentro dos 516px (ajuste fino) */
  overflow:hidden; 
  border-radius:10px;
}
.cat-left__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Alinhar textos/botão pelo início da imagem (591px) */
.post-tag--cat,
.cat-left__title,
.cat-left__actions{ width:591px; }
.post-tag--cat{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--violet-700);
  text-transform:uppercase;
  font:600 11px/1.2 Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}
.post-tag--cat::before{ content:""; width:16px; height:6px; background:var(--violet-700); border-radius:2px; }
.cat-left__title{ margin:6px 0 10px; font-weight:700; font-size:22px; }
.cat-left__title a{ color:#000; text-decoration:none; }
.cat-left__title a:hover{ color:var(--violet-700); }
.cat-left__actions{ display:flex; justify-content:flex-start; }

/* === DIREITA (2 colunas x 3 linhas), cada linha = 1/3 de 516px === */
.cat-right{
  display:grid;
  grid-template-rows: repeat(3, 1fr); /* alturas iguais */
  row-gap:14px;
  height:516px;                        /* altura total do bloco direito */
}

/* cada linha possui 2 itens (490 | 490) e precisa ocupar toda a altura da linha */
/* === Lista da direita: divisor só ENTRE as linhas === */
.cat-list__row{
  position: relative;
  display: grid;
  grid-template-columns: 490px 490px;
  column-gap: 14px;
  height: 100%;
  align-items: center;
  padding: 0 0 16px;            /* apenas embaixo */
  border-top: 0 !important;     /* nada no topo */
}

/* remove qualquer before antigo */
.cat-list__row::before{ display: none !important; }

/* traço roxo no rodapé de cada linha */
.cat-list__row::after{
  content: "";
  position: absolute;
  left: 0px;                   /* ajuste para sangrar; use 0 se quiser dentro */
  right: 20px;
  bottom: 0;
  height: 1px;
  background: #D9D9D9;
}

/* a ÚLTIMA linha NÃO tem traço */
.cat-list__row:last-child::after{
  display: none;
}


/* Item (490px de largura): imagem 187x140 + texto */
.cat-list__item{
  display:grid;
  grid-template-columns: 187px 1fr;  /* imagem + conteúdo */
  column-gap:12px;
  align-items:center;
}

/* imagem fixa (combina com seu add_image_size 187x140) */
.cat-list__thumb{ width:187px; height:140px; overflow:hidden; border-radius:8px; }
.cat-list__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Conteúdo */
.cat-list__content{ display:flex; flex-direction:column; gap:6px; }
.cat-list__title{ margin:0; font-weight:700; font-size:18px; line-height:1.3; }
.cat-list__title a{ color:#000; text-decoration:none; }
.cat-list__title a:hover{ color:var(--violet-700); }
.cat-list__actions{ margin-top:6px; display:flex; justify-content:flex-start; }

/* evita quebrar a altura da linha por título gigante */
.cat-list__title a{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
}

.home-cat__grid{
  border: 0 !important;   /* estava 1px solid */
  padding: 0 !important;  /* remova o acolchoamento externo se não quiser respiro */
}

.cat-left__card{
  border: 1px solid var(--violet-500);
  border-radius: 4px;
  padding: 16px;          /* respiro interno para o conteúdo do card */
  background: #fff;
}

/* como agora o card tem padding, tudo dentro passa a usar 100% da largura do card */
.cat-left__thumb{ 
  width: 100% !important;   /* antes: 591px */
  height: 320px; 
  border-radius: 4px;
  overflow: hidden;
}
.post-tag--cat,
.cat-left__title,
.cat-left__actions{
  width: 100% !important;   /* antes: 591px */
}

/* ===== HOME – Seção de Categoria (MOBILE – fiel ao mock) ===== */
@media (max-width: 768px){

  /* Título da seção */
  .home-cat{ margin-top: 24px; }
  .home-cat__title{
    margin: 0 16px 12px;
    text-align:center;
    font-weight:700;
    font-size:20px;
    color:#333;
  }

  /* Grid vira coluna única, com a mesma largura das outras seções */
  .home-cat__grid{
    display:block !important;
    border:0 !important;
    padding:0 16px !important;  /* mesma “margem interna” das demais */
  }

  /* ===== CARD DESTAQUE (ESQUERDA) ===== */
  .cat-left__card{
    display:flex; flex-direction:column; gap:10px;
    border:1px solid #d9d9d9; border-radius:10px; background:#fff;
    padding:12px;
    min-height:auto;  /* remove altura fixa de desktop */
  }
  .cat-left__thumb{
    width:100% !important; height:180px; border-radius:8px; overflow:hidden;
  }
  .cat-left__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

  .post-tag--cat{
    display:inline-flex; align-items:center; gap:6px;
    font:600 10px/1.2 Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    color:#333; text-transform:uppercase;
  }
  .post-tag--cat::before{ content:""; width:14px; height:5px; background:#333; border-radius:2px; }

  .cat-left__title{ margin:4px 0 8px; font-weight:700; font-size:16px; line-height:1.25; }
  .cat-left__title a{ color:#000; text-decoration:none; }

  .cat-left__actions{ display:flex; justify-content:flex-start; }
  .cat-left__actions .btn{ width:auto; }              /* evita botão esticar */
  .cat-left__title,
  .cat-left__actions{ width:100% !important; }        /* zera largura fixa herdada */

  /* ===== LISTA (DIREITA) – vira feed empilhado ===== */
  .cat-right{
    display:block !important;
    height:auto !important;
    margin-top:12px;
  }

  /* Cada “linha” vira bloco com divisor inferior */
  .cat-list__row{
    display:block !important;
    height:auto !important;
    padding:12px 0;
    position:relative;
  }
  .cat-list__row::after{
    content:""; display:block;
    height:1px; background:#eaeaea;
    margin:12px 0 0;           /* espaço antes do traço */
  }
  .cat-list__row:last-child::after{ display:none; }

  /* Item compacto: thumb pequena + conteúdo */
  .cat-list__item{
    display:grid !important;
    column-gap:12px;
    align-items:start;                 /* alinha topo (evita “pular”) */
    padding:15px;
    border-bottom: 1px solid #f5f5f5;
  }

  .cat-list__thumb{
    width:150px; height:115px;
    border-radius:8px; overflow:hidden;
  }
  .cat-list__thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
  }


    .cat-list__content{
    display:flex; flex-direction:column; gap:6px;
    min-width:0; /* permite clamp do título */
  }

  .cat-list__title{ margin:0; font-weight:700; font-size:14px; line-height:1.3; }
  .cat-list__title a{ color:#000; text-decoration:none; }
  .cat-list__title a{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  }

  .cat-list__actions{ margin-top:4px; display:flex; justify-content:flex-start; }
  .cat-list__actions .btn{ width:auto; }              /* botão compacto */

  /* garante que nada herde larguras rígidas do desktop */
  .cat-list__content,
  .cat-list__actions,
  .cat-list__title{ width:100% !important; }
}

/* ===== Newsletter ===== */
.nl { padding: 28px 0; }
.nl__wrap{
  max-width:1600px;            /* largura total solicitada */
  margin:0 auto;
  padding: 0 24px;             /* respiro lateral */
  border-top:1px solid #D9D9D9;/* divisores (superior/inferior) */
  border-bottom:1px solid #D9D9D9;
}

.nl__grid{
  display:grid;
  grid-template-columns: 1fr 520px; /* cada lado em uma “ponta” */
  align-items:center;
  column-gap: 32px;
  min-height: 120px;
  margin: 80px 0px;
}

.nl__title{
  font-size:38px;              /* tamanho solicitado */
  line-height:1.15;
  color:#333333;               /* cor solicitada */
  margin: 0 0 10px 0;
}

.nl__desc{ margin:0; }

.nl__right{ justify-self:end; max-width: 520px; width:100%; }
.nl__form{
  display:flex;
  align-items:center;
  gap:10px;
}

.nl__input{
  flex:1;
  height:40px;
  padding:0 12px;
  border:1px solid #f5f5f5;
  border-radius:2px;
  font: inherit;
  background-color: #f5f5f5;
}

.nl__btn{
  height:40px;
  padding:0 14px;
  border:0;
  border-radius:2px;
  background:#333333;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.nl__consent{
  margin:10px 0 0 0;
  font-size:14px;
  line-height:1.35;
}

/* — Responsivo */
@media (max-width: 980px){
  .nl__grid{ grid-template-columns: 1fr; row-gap:16px; }
  .nl__right{ justify-self:start; max-width: none; }
  .nl__form{ width:100%; }
}

/* ====== CATEGORY – escopo ====== */
.cat-aside {
  width: 188px;
  margin-left: 45px;
}



/* Layout com menu lateral fixo à esquerda */
.cat-archive .cat-archive__layout{
  /* total = menu (260) + gap (24) + conteúdo (1380) */
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;  /* menu + conteúdo */
  column-gap: 24px;
  margin-top: 74px;                  /* distância do topo */
}

.cat-archive .cat-content{ max-width: 1350px; }

/* Aside/menu (igual Home) */
.cat-archive .cat-aside2{ margin-top: 28px; margin-left: 0px !important; }
.cat-archive .aside-menu ul{ list-style:none; margin:0; padding:0; }
.cat-archive .aside-menu li{ border:1px solid #D9D9D9; border-bottom:0; }
.cat-archive .aside-menu li:first-child{ border-top-left-radius:6px; border-top-right-radius:6px; }
.cat-archive .aside-menu li:last-child{ border-bottom:1px solid #d9d9d9; border-bottom-left-radius:6px; border-bottom-right-radius:6px; }
.cat-archive .aside-menu a{
  display:block; padding:18px 16px; text-decoration:none; color:#333333; font-weight:600; text-transform:uppercase; font-size:13px;
}
.cat-archive .aside-menu a:hover{ background:#F2EDFA; }

/* Título */
.cat-archive .archive-header{ margin: 28px 0 12px; }
.cat-archive .archive-title{ color:#333333; font:700 40px/1.1 Roboto, Arial, sans-serif; margin:0; }

/* ====== Dobra: destaque 700px + lista lateral ====== */
.cat-archive .fold__grid{
  display: grid;
  grid-template-columns: 700px 1fr;   /* 700 (destaque) + coluna lateral */
  column-gap: 24px;
  border: 0;
  padding: 0;
  background: transparent;
}

/* Coluna esquerda */
.cat-archive .fold-left{ width:700px; }

/* Card de destaque (consolidado) */
.cat-archive .card-feature{
  display:flex; 
  flex-direction:column; 
  gap:12px;
  width:100%;
  box-sizing:border-box;   /* inclui padding na largura */
  overflow:hidden;         /* corta qualquer sobra da imagem nas bordas */
  border:1px solid #F5F5F5;
  border-radius:8px;
  padding:16px;
  background:#fff;
}

/* Thumb do destaque — 100% do card */
.cat-archive .feature__thumb{
  width:100%;
  height:400px;
  border-radius:8px;
  overflow:hidden;
}
.cat-archive .feature__thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Tag de categoria (uso global na página) */
.cat-archive .post-tag--cat{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#333333; text-transform:uppercase; font:600 11px/1.2 Roboto, Arial, sans-serif;
}
.cat-archive .post-tag--cat::before{
  content:""; width:16px; height:6px; background:#333333; border-radius:2px;
}

/* Título do destaque */
.cat-archive .feature__title{ margin:6px 0 8px; font-weight:800; font-size:24px; line-height:1.25; }
.cat-archive .feature__title a{ color:#111; text-decoration:none; }
.cat-archive .feature__title a:hover{ color:#333333; }

/* Botões */
.cat-archive .btn{
  display:inline-flex !important;
  width:auto !important;
  flex:0 0 auto !important;
}
.cat-archive .cat-list__content .btn,
.cat-archive .card-feature .btn{
  align-self:flex-start;   /* grid/flex não estica */
}

/* Lateral (1 coluna com divisor entre itens) */
.cat-archive .fold-right{ display:flex; flex-direction:column; }
.cat-archive .fold-right .cat-list__item{
  display:grid; grid-template-columns:187px 1fr; column-gap:12px; align-items:center;
  padding: 0 0 16px 0; position:relative; margin-top: 10px;
  border:0; /* garante sem borda */
}
/* divisor roxo APENAS entre itens */
.cat-archive .fold-right .cat-list__item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#F5F5F5;
}
.cat-archive .fold-right .cat-list__item:last-child::after{ display:none; }

/* Item da lateral: thumb 187x140 + texto */
.cat-archive .cat-list__item{
  display:grid; grid-template-columns: 187px 1fr; column-gap:12px; align-items:center;
}
.cat-archive .cat-list__thumb{ width:187px; height:115px; overflow:hidden; border-radius:8px; }
.cat-archive .cat-list__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ====== Grade inferior (cards 12/página) ====== */
.cat-archive .archive-grid{
  margin-top:80px;
  display:grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colunas como no print */
  gap:18px;
}

/* Card com borda individual (roxa) — consolidado */
.cat-archive .post-card{
  border:1px solid #9B77DD;
  border-radius:6px;
  background:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* garante que a imagem não extrapole a borda */
}
.cat-archive .post-card__thumb img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
}
.cat-archive .post-card__body{
  padding:12px 12px 16px;
  display:flex; flex-direction:column; gap:8px;
}
.cat-archive .post-card__title{ font-weight:800; font-size:18px; margin:0; line-height:1.25; }
.cat-archive .post-card__title a{ color:#111; text-decoration:none; }
.cat-archive .post-card__title a:hover{ color:#333333; }

/* Botão alinhado ao conteúdo do card */
.cat-archive .post-card .btn{ align-self:flex-start; }

/* Divisor acima da paginação */
.cat-archive .archive-sep{
  margin:26px 0 18px; height:0px; background:#9B77DD; opacity:1;
}

/* Paginação completa (prev | números | next) */
.cat-archive .pagination-full{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin-bottom:40px;
}
.cat-archive .pag-prev{ justify-self:start; }
.cat-archive .pag-next{ justify-self:end; }
.cat-archive .pag-numbers{ text-align:center; }

.cat-archive .pag-btn{
  display:inline-block;
  padding:8px 14px;
  border:1px solid #9B77DD;
  border-radius:6px;
  text-decoration:none;
  color:#333333;
  font-weight:600;
}
.cat-archive .pag-btn:hover{ background:#333333; color:#fff; }
.cat-archive .pag-btn.is-disabled{ opacity:.4; cursor:not-allowed; }

.cat-archive .pag-numbers .page-numbers{
  display:inline-block; min-width:36px;
  padding:8px 10px; margin:0 4px; text-align:center;
  border:1px solid #9B77DD; border-radius:6px; text-decoration:none; color:#333333;
}
.cat-archive .pag-numbers .page-numbers.current,
.cat-archive .pag-numbers .page-numbers:hover{
  background:#333333; color:#fff; border-color:#333333;
}

/* (Opcional) suporte ao markup padrão .pagination, se existir no tema */
.cat-archive .pagination-wrap{ margin:26px 0 40px; display:flex; justify-content:center; }
.cat-archive .pagination .page-numbers{
  display:inline-block; min-width:36px; padding:8px 10px; margin:0 4px; text-align:center;
  border:1px solid #9B77DD; border-radius:6px; text-decoration:none; color:#333333;
}
.cat-archive .pagination .page-numbers.current,
.cat-archive .pagination .page-numbers:hover{ background:#333333; color:#fff; border-color:#333333; }

/* ====== Responsivo ====== */
@media (max-width:1200px){
  .cat-archive .cat-archive__layout{ grid-template-columns: 1fr; }
  .cat-archive .cat-aside{ order:-1; margin-bottom:18px; }
  .cat-archive .archive-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width:980px){
  .cat-archive .fold__grid{ grid-template-columns: 1fr; }
  .cat-archive .feature__thumb{ height:360px; }
  .cat-archive .archive-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width:640px){
  .cat-archive .archive-title{ font-size:32px; }
  .cat-archive .archive-grid{ grid-template-columns: 1fr; }
}

.cat-archive .cat-archive__layout > .archive-grid,
.cat-archive .cat-archive__layout > .archive-sep,
.cat-archive .cat-archive__layout > .pagination-full{
  grid-column: 1 / -1;                /* ocupa aside + conteúdo */
  justify-self: stretch;
  max-width: calc(1570px);
  margin: 0 auto;
  margin-top: 80px;
  padding: 0;
  display: grid;
  align-items: center;
}

.cat-archive .pag-prev{  justify-self: start; }
.cat-archive .pag-numbers{ justify-self: center; text-align: center; }
.cat-archive .pag-next{  justify-self: end; }

/* ===== SINGLE: layout fixo, container 1600, grid determinístico ===== */
body.single .cat-archive{
  max-width:1600px;
  margin:0 auto;
}

/* Grid com 5 trilhos: 188 | 24 | 680 | 136 | 544 */
body.single .cat-archive__layout{
  --gutter-share:136px;  /* espaço entre post e sidebar */
  --rail:56px;           /* largura da barra de compartilhamento */
  display:grid;
  grid-template-columns: 188px 24px 680px var(--gutter-share) 544px;
}

/* Travas explícitas de coluna p/ cada bloco */
body.single .cat-aside      { grid-column: 1; }
body.single .post-main      { grid-column: 3; width:680px; }
body.single .post-sidebar   { grid-column: 5; width:544px; margin-left: -60px; }

/* Post (já estava alinhado a 680 x 284) */
body.single .post-hero{ position:relative; width:680px; }
body.single .post-thumb{ width:680px; margin:0 0 16px; }
body.single .post-thumb img{
  width:680px; height:284px; object-fit:cover; display:block;
  border:1px solid var(--violet-500);
}
body.single .post-content{ width:680px; }

/* === Barra vertical de compartilhamento (56px) centralizada no gutter ===
   Fórmula: right = (rail - gutter)/2  → valor negativo "entra" no gutter */
body.single .post-share{
  position:absolute; top:-15px;
  right: calc( (var(--rail) - var(--gutter-share)) / 2 );
  width:var(--rail); /* 56px */
  display:flex; flex-direction:column; gap:20px;
  list-style:none; margin-left: 32px;
}

body.single .ps{
  width:var(--rail); height:var(--rail);
  display:grid; place-items:center; border-radius:50%;
  color:#fff; text-decoration:none; font-weight:700;
  background:#59C173;
}
body.single .ps--x{  background:#000; }
body.single .ps--ig{ background:#C13584; }
body.single .ps--wa{ background:#25D366; }
body.single .ps--fb{ background:#1877F2; }

/* ===== Sidebar — lista ===== */
body.single .post-sidebar .side-list--only .cat-list__item{
  display:flex; gap:16px; align-items:flex-start;
  border-bottom:1px solid #D9D9D9;
  padding:12px; margin-bottom:18px;
  width:544px; max-width:100%;
}
body.single .post-sidebar .side-list--only .cat-list__thumb img{
  width:187px; height:115px; object-fit:cover; display:block; border-radius:8px;
}
body.single .post-sidebar .side-list--only .cat-list__title--16{
  font-size:16px; line-height:1.35; margin:6px 0 10px;
}

/* ===== Responsividade ===== */
/* 1) Container estreitando: reduz o gutter do share e a sidebar levemente */
@media (max-width: 1500px){
  body.single .cat-archive__layout{
    --gutter-share:96px;            /* 96 entre post e sidebar */
    grid-template-columns: 188px 24px 680px var(--gutter-share) 480px;
  }
}

/* 2) Tablet largo: sidebar menor, gutter menor (share continua centralizado) */
@media (max-width: 1320px){
  body.single .cat-archive__layout{
    --gutter-share:72px;
    grid-template-columns: 188px 24px 680px var(--gutter-share) 420px;
  }
  body.single .post-sidebar .side-list--only .cat-list__item{ width:420px; }
}

/* 3) Tablet/phone: colapsa para uma coluna */
@media (max-width: 1100px){
  body.single .cat-archive{ padding:0 16px; }
  body.single .cat-archive__layout{
    grid-template-columns: 1fr;      /* empilha */
  }
  body.single .cat-aside,
  body.single .post-main,
  body.single .post-sidebar{
    grid-column: auto;
    width:100%;
  }
  body.single .post-hero,
  body.single .post-thumb,
  body.single .post-content{
    width:100%;
  }
  body.single .post-thumb img{
    width:100%; height:auto;
  }
  /* share vira linha abaixo da imagem */
  body.single .post-share{
    position:static; flex-direction:row; gap:10px; margin:8px 0 0;
    width:auto;
  }
  body.single .post-sidebar .side-list--only .cat-list__item{ width:100%; }
}

@media (max-width: 768px) {
  .post-thumb {
    display: none;
  }

  .post-share {
    display: none !important;
  }

  .post-meta{ display:flex; gap:8px; justify-content:center; margin-top: -40px; }
  .post-title{
    text-align:center;
    margin:8px auto 12px;
    padding-top: 15px;
    line-height:1.15;
    max-width: 26ch;   /* opcional: quebra melhor em 2–3 linhas */
  }
  /* garante o ADS alinhado abaixo do título */
  .post-title + .ads-block{ margin-left:auto; margin-right:auto; }
}

/* ===== ADS: 680 x 200 no desktop ===== */
body.single .ads-block{
  width:680px;
  height:200px;
  max-width:100%;              /* segurança caso algo reduza a coluna */
  background:#f5f5f5;          /* apenas placeholder visual; pode tirar */
  border:1px solid var(--violet-500);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#555;
  margin:16px 0;
  box-sizing:border-box;
}

/* Mobile/empilhado: ocupar a largura disponível */
@media (max-width:1100px){
  body.single .ads-block{
    width:100%;
    height:200px;              /* mantém a altura do mock; ajuste se quiser menor */
  }
}

/* ===== Bloco final do single: Share + Autor (largura 680) ===== */
body.single .post-end{
  width:680px; max-width:100%;
  display:grid; grid-template-columns: 120px 1fr; column-gap:16px;
  margin:24px 0 12px;
}

/* Coluna de share inferior (caixa com borda) */
body.single .post-end__share{
  align-self:stretch;
  border:1px solid #dcdcdc; border-radius:4px;
  padding:12px 0; box-sizing:border-box; justify-content: center;
}
body.single .post-end__rail{
  list-style:none; margin:0; padding:0 0 0 0;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
body.single .bps{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:50%; color:#fff; text-decoration:none; font-weight:700;
  background:#6b6b6b;   /* base cinza para o bloco inferior (como no mock) */
}
body.single .bps--x{  background:#000; }
body.single .bps--ig{ background:#C13584; }
body.single .bps--wa{ background:#25D366; }
body.single .bps--fb{ background:#1877F2; }

/* Card do autor */
body.single .post-author{
  border:1px solid #e6e6e6; border-radius:4px; background:#fff;
}
body.single .post-author__inner{
  display:grid; grid-template-columns: 160px 1fr; gap:20px;
  padding:20px;
}
body.single .post-author__avatar{ display:flex; align-items:center; justify-content:center; }
body.single .post-author__img{ width:140px; height:140px; border-radius:50%; object-fit:cover; }
body.single .post-author__kicker{ font-size:14px; color:#555; margin:0 0 6px; font-weight:700; }
body.single .post-author__name{ font-size:22px; margin:0 0 8px; }
body.single .post-author__name a{ color:inherit; text-decoration:none; }
body.single .post-author__bio{ margin:0; line-height:1.6; color:#444; }

/* Responsivo: empilhar share + autor */
@media (max-width:1100px){
  body.single .post-end{
    grid-template-columns: 1fr; row-gap:12px;
    width:100%;
  }
  body.single .post-end__share{ padding:10px; }
  body.single .post-end__rail{ flex-direction:row; justify-content:flex-start; gap:10px; }
  body.single .post-author__inner{ grid-template-columns: 96px 1fr; }
  body.single .post-author__img{ width:96px; height:96px; }
}

/* ===== VEJA TAMBÉM (full container 1600) ===== */
.t05-seealso{
  max-width:1600px;
  margin: 40px auto 24px;
  padding: 0 24px;
  margin-bottom: 80px;
}
.t05-seealso .sa-title{
  text-align:center;
  font-size:36px;
  line-height:1.2;
  margin: 0 0 24px;
}

/* Grid 4 colunas (376) com gap 32 */
.t05-seealso .sa-grid{
  display:grid;
  grid-template-columns: repeat(4, 376px);
  gap:32px;
  justify-content:center; /* centraliza dentro dos 1600px */
}

/* Card 376 x 473 */
.t05-seealso .sa-card{
  width:376px; height:410px;
  border:1px solid #d9d9d9;   /* leve borda */
  background:#fff;
  display:flex; flex-direction:column;
  box-sizing:border-box;
  overflow:hidden;
  transition: box-shadow .2s ease;
}
.t05-seealso .sa-card:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* Cabeçalho: categoria com “pílula” e detalhe */
.t05-seealso .sa-head{ padding:14px 16px 0; }
.t05-seealso .sa-cat{
  font-size:12px; font-weight:700; color:#6b6b6b;
  display:inline-flex; align-items:center; gap:8px;
}
.t05-seealso .sa-cat i{
  width:10px; height:4px; border-radius:4px; background:#6b42d8; display:inline-block;
}

/* Thumb ocupa a faixa central, com padding lateral (calc p/ 344px úteis) */
.t05-seealso .sa-thumb{ display:block; padding:12px 16px 0; }
.t05-seealso .sa-thumb img{
  width:344px; height: 236px;; object-fit:cover; display:block; border-radius:4px;
}

/* Corpo: título + botão */
.t05-seealso .sa-body{
  padding:12px 16px 16px;
  display:flex; flex-direction:column; gap:12px; margin-top:auto;
}
.t05-seealso .sa-title-post{
  font-size:18px; line-height:1.35; margin:0;
}
.t05-seealso .sa-title-post a{ color:inherit; text-decoration:none; }
.t05-seealso .sa-btn{
  align-self:flex-start;                  /* o botão fica à esquerda do card */
  display:flex;                           /* vira um flex container */
  justify-content:center;                 /* centraliza horizontalmente o texto/ícone */
  align-items:center;                     /* centraliza verticalmente */
  padding:8px 12px;
  width:100px;
  background:#000000;
  color:#fff;
  border-radius:6px;
  font-size:14px;
  font-weight: 600;
  text-decoration:none;
  text-align:center;                      /* redundante, mas ajuda se virar inline-block */
}
/* ===== Responsivo ===== */
@media (max-width: 1500px){
  .t05-seealso .sa-grid{ grid-template-columns: repeat(4, 1fr); }
  .t05-seealso .sa-card{ width:auto; }
  .t05-seealso .sa-thumb img{ width:100%; height:auto; }
}
@media (max-width: 1100px){
  .t05-seealso{ padding:0 16px; }
  .t05-seealso .sa-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .t05-seealso .sa-grid{ grid-template-columns: 1fr; }
}

/* ===== Páginas Legais (Política, Termos, etc.) ===== */
.legal-page { margin-top: 74px; }
.legal-page .legal__wrap{
  /* total = aside (260) + gap (24) + conteúdo (980) */
  width: 1600px;
  margin-bottom: 80px !important;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 980px;
  column-gap: 24px;
  align-items: start;
}

.legal__content {
  margin-left: 55px;
}

/* Menu lateral (TÓPICO 1...N) */
.legal-page .legal__aside{}
.legal-page .legal__toc{
  list-style: none;
  margin: 15px;
  padding: 0;
  border: 1px solid var(--violet-500);
  border-radius: 6px;
  overflow: hidden;
}
.legal-page .legal__toc li { border-bottom: 1px solid var(--violet-500); }
.legal-page .legal__toc li:last-child { border-bottom: 0; }
.legal-page .legal__toc a{
  display: block;
  padding: 16px 14px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  color: var(--violet-700);
  text-decoration: none;
}
.legal-page .legal__toc a:hover{ background: var(--violet-50); }

/* Cabeçalho da página */
.legal-page .legal__title{
  margin: 0 0 16px;
  font: 700 32px/1.2 Roboto, Arial, sans-serif;
  color: var(--violet-700);
}

/* Cartão do conteúdo (980px fixo) */
.legal-page .legal__card{
  border: 1px solid var(--violet-500);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--shadow-1);
  padding: 24px;
}

/* Intro (parágrafo inicial) */
.legal-page .legal__intro{
  margin: 0 0 18px;
  color: #222;
}

/* Títulos de seção (H2) — “1. Title” do mock */
.legal-page .legal__card h2{
  font: 700 22px/1.25 Roboto, Arial, sans-serif;
  margin: 18px 0 8px;
  color: #111;
}

/* Texto padrão */
.legal-page .legal__card p{ margin: 0 0 10px; color: #333; }

/* Divisor entre seções (linha suave como no mock) */
.legal-page .legal__sep{
  height: 1px;
  background: #e9e1ff;             /* roxo bem claro */
  border: 0;
  margin: 18px 0;
}

/* Compensa o scroll até as âncoras (header sticky) */
.legal-page [id^="topico-"]{
  scroll-margin-top: 90px;
}

/* Responsivo */
@media (max-width: 1100px){
  .legal-page .legal__wrap{
    grid-template-columns: 1fr;
    max-width: 980px;
    padding: 0 16px;
  }
  .legal-page .legal__aside{ order: -1; margin: 0 0 16px; }
  .legal-page .legal__card{ padding: 20px; }
  .legal-page .legal__title{ font-size: 28px; }
}

/* ===== Página de Contato ===== */
.contact-page { margin-top: 74px; }

.contact-page .contact__wrap{
  /* 186 (aside) + 55 (gap) + 1360 (conteúdo) = 1601px — mantém o layout do mock */
  max-width: calc(186px + 55px + 1360px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 186px 55px 1360px;
  align-items: start;
}

/* === Aside (lista TÓPICOS) === */
.contact-page .contact__aside{}
.contact-page .contact__toc{
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--violet-500);
  border-radius: 6px; overflow: hidden;
  background: #fff;
}
.contact-page .contact__toc li{ border-bottom:1px solid var(--violet-500); }
.contact-page .contact__toc li:last-child{ border-bottom:0; }
.contact-page .contact__toc a{
  display:block; padding:16px 14px;
  text-transform:uppercase; font-weight:700; font-size:13px;
  color: var(--violet-700); text-decoration:none;
}
.contact-page .contact__toc a:hover{ background: var(--violet-50); }

/* === Conteúdo (1360px) === */
.contact-page .contact__content{
  width: 1360px;
  margin-left: 55px;
}

/* Título “Entre em contato” */
.contact-page .contact__title{
  margin:0 0 16px;
  font:700 40px/1.1 Roboto, Arial, sans-serif;
  color:#111;
}

/* Cartão do texto (coluna esquerda – 700px) */
.contact-page .contact__grid{
  display:grid;
  grid-template-columns: 700px 1fr;    /* 700 + (1360 - 700 - 24) */
  column-gap: 24px;
}

.contact-page .contact__card{
  border:1px solid var(--violet-500);
  background:#fff;
  padding:20px;
  box-shadow: var(--shadow-1);
}
.contact-page .contact__card p{ margin:0 0 12px; color:#333; }
.contact-page .contact__card p strong{ color:#111; }

/* === Formulário (direita) === */
.contact-page .contact__form .field{
  margin-bottom:12px;
}
.contact-page .contact__form input,
.contact-page .contact__form textarea{
  width:100%;
  border:1px solid #e6e6e6;
  background:#fafafa;
  padding:12px 14px;
  font: 400 15px/1.3 Roboto, Arial, sans-serif;
  color:#111;
  outline:0;
}
.contact-page .contact__form textarea{ min-height:170px; resize: vertical; }

.contact-page .contact__submit{
  display:inline-block;
  padding:10px 18px;
  background:#000;
  color:#fff;
  border:0; border-radius:2px;
  font-weight:700; cursor:pointer;
}

/* Responsivo */
@media (max-width: 1200px){
  .contact-page .contact__wrap{
    grid-template-columns: 1fr;
    max-width: 1360px;
    padding: 0 16px;
  }
  .contact-page .contact__aside{ order:-1; margin-bottom:16px; }
}
@media (max-width: 900px){
  .contact-page .contact__grid{ grid-template-columns: 1fr; row-gap:18px; }
}

/* ===== Newsletter (ajustes mobile) ===== */
@media (max-width: 980px){
  .nl { padding: 24px 0; }

  .nl__grid{
    grid-template-columns: 1fr;
    row-gap: 16px;
    min-height: unset;
    margin: 40px 0;
  }

  /* Título e texto centralizados como no mock */
  .nl__left{ text-align: center; }
  .nl__title{
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 8px;
  }
  .nl__desc{
    font-size: 16px;
    line-height: 1.45;
    margin: 0;
  }

  /* Form em coluna, input 100%, botão abaixo centralizado */
  .nl__right{ justify-self: center; max-width: 520px; width: 100%; }
  .nl__form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .nl__input{
    width: 100%;
    height: 44px;
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
    border-radius: 2px;
  }
  .nl__btn{
    height: 44px;
    padding: 0 20px;           /* largura do botão conforme conteúdo */
    display: inline-block;
  }

  /* Consentimento centralizado e respirado como no mock */
  .nl__consent{
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
    margin-top: 8px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Extra – telas bem pequenas para manter proporção do mock */
@media (max-width: 480px){
  .nl__title{ font-size: 24px; }
  .nl__desc{ font-size: 15px; }
  .nl__btn{ padding: 0 18px; }
}

@media (max-width:768px){
  /* Share centralizado */
  .post-end__share{ display:flex; justify-content:center; }
  .post-end__rail{
    display:flex; justify-content:center; align-items:center;
    gap:12px; margin:0 auto; padding:10px 12px;
  }
  .post-end__rail li{ display:block; }
  .post-end__rail .bps{ display:grid; place-items:center; }

  /* Autor centralizado */
  .post-author{ margin:12px auto 0; }
  .post-author__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .post-author__avatar{ margin:0 auto; }
}

@media (max-width:768px){
  body.single .post-sidebar{ display:none !important; }
  body.single .cat-archive__layout{ grid-template-columns: 1fr !important; } /* estica o conteúdo */
}

@media (max-width: 768px){
  .t05i-mobile .custom-logo-link{
    width:150px;
  }
}

.t05i-desktop .custom-logo-link{
   width:200px;
}

/* === SINGLE > Sidebar (recomendados) — alinhamento consistente === */
body.single .post-sidebar .side-list--only .cat-list__item{
  display: flex;           
  align-items: center;     /* centraliza verticalmente */
  gap: 16px;
}

body.single .post-sidebar .side-list--only .cat-list__thumb{
  width: 187px;
  height: 115px;
  flex: 0 0 187px;         
  border-radius: 8px;
  overflow: hidden;
}
body.single .post-sidebar .side-list--only .cat-list__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.single .post-sidebar .side-list--only .cat-list__content{
  flex: 1;                             
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;                       
}

body.single .post-sidebar .side-list--only .cat-list__title--16{
  margin: 0;                            
  line-height: 1.3;
}
body.single .post-sidebar .side-list--only .cat-list__title--16 a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;                
  overflow: hidden;
}

body.single .post-sidebar .side-list--only .btn{
  align-self: flex-start;               
  margin-top: 6px;
}

/* ====== RECENTES — CARROSSEL (desktop: 4 por slide) ====== */
.recent-slider{ position:relative; }
.recent-viewport{ overflow:hidden; }
.recent-track{
  display:flex; transition: transform .35s ease; will-change: transform;
}
.recent-slide{
  min-width:100%;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 2rem;
}

.recent-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:1px solid #d9d9d9; border-radius:9999px;
  background:#fff; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.recent-prev{ left:-12px; }
.recent-next{ right:-12px; }
.recent-nav[disabled]{ opacity:.35; cursor:not-allowed; }

/* Dots do carrossel (desktop e mobile) */
.recent-dots{
  display:flex; justify-content:center; gap:8px; margin:12px 0 0;
}
.recent-dots button{
  width:8px; height:8px; border:0; border-radius:9999px; background:#d9d9d9; cursor:pointer;
}
.recent-dots button.is-active{ background:#000; transform:scale(1.25); }

/* Responsivo: mantém 2 colunas em tablet e 1 no mobile */
@media (max-width: 1024px){
  .recent-slide{ grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .recent-prev{ left:4px; } .recent-next{ right:4px; }
}
@media (max-width: 640px){
  .recent-slide{ grid-template-columns: 1fr; gap: 1rem; }
  .recent-nav{ display:none; } /* no mobile, use os dots p/ navegar */
}

/* Ajustes que você já usa nos cards (preservados) */
.home-recent{ margin-top:80px; display:grid; grid-template-rows:auto 1fr; }
.home-recent .card--recent{ align-items:flex-start; }
.home-recent .card--recent .card__actions{ width:316px; justify-content:flex-start !important; }
.home-recent .card--recent .post-tag--recent,
.home-recent .card--recent .card__title,
.home-recent .card--recent .card__actions{ width:316px !important; }
@media (max-width:800px){
  .home-recent .card--recent{ align-items:stretch; }
  .home-recent .card--recent .post-tag--recent,
  .home-recent .card--recent .card__title,
  .home-recent .card--recent .card__actions{ width:100% !important; }
}

@media (max-width: 640px){
  /* limita a largura dos elementos da seção e centraliza */
  .home-recent .section__title,
  .home-recent .recent-slider,
  .home-recent .recent-dots{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* evita “tela infinita” por overflow lateral */
  .home-recent{ overflow-x: hidden; }

  /* garante que o track não crie largura maior que a viewport */
  .recent-track{ display:flex; }
  .recent-slide{ flex: 0 0 100%; }   /* 1 slide = 100% da viewport */

  /* 1 card por slide (já estava), com altura justinha */
  .recent-slide{ grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }

  /* dots mais próximos do slider e centralizados */
  .recent-dots{ margin: 10px auto 0; }
}