/*
Theme Name: Caipora
Theme URI: https://caipora.org
Description: Tema filho do TheGem para a Revista Caipora. Customizações da reforma do site vivem aqui, para não se perderem quando o TheGem for atualizado.
Author: Revista Caipora
Template: thegem-elementor
Version: 1.0.0
Text Domain: caipora
*/

/* ---------------------------------------------------------------------------
   Fonte
   Zilla Slab servida do próprio domínio: é a mesma dos cartões do Assobio
   (serviço carta), então capa e cartão falam a mesma língua. Servir daqui, e
   não do Google, evita expor quem lê a Caipora a um terceiro.
   --------------------------------------------------------------------------- */

@font-face {
    font-family: 'Zilla Slab';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fontes/zillaslab-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Zilla Slab';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fontes/zillaslab-400-latinext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+A720-A7FF;
}
@font-face {
    font-family: 'Zilla Slab';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fontes/zillaslab-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Zilla Slab';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fontes/zillaslab-500-latinext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+A720-A7FF;
}
@font-face {
    font-family: 'Zilla Slab';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fontes/zillaslab-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Zilla Slab';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fontes/zillaslab-700-latinext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   Paleta oficial da Caipora
   O papel de cada cor não é gosto: vem de contraste medido. Os números em
   comentário são a razão sobre o fundo indicado (WCAG). Antes de usar um par
   novo, medir — não deduzir.
   --------------------------------------------------------------------------- */

:root {
    --cai-verde-noite: #022312;
    --cai-verde-cartao: #274c3b;
    --cai-verde-inst: #08844e;
    --cai-verde-vivo: #29b16f;
    --cai-menta: #bff1cc;
    --cai-musgo: #507758;
    --cai-vinho: #8c1b39;
    --cai-vinho-escuro: #5e0722;
    --cai-osso: #f8f5f4;
    /* Cinza esverdeado da identidade, o mesmo dos cartões do Assobio. Serve
       para texto secundário sobre o escuro: o musgo daria 3,3:1 sobre o
       verde-noite e reprovaria em corpo pequeno; este dá 8,0:1. */
    --cai-cinza: #9abaa6;

    --cai-titulo: 'Zilla Slab', Georgia, 'Times New Roman', serif;
    /* A redação pediu a família em todo o site. A variável de interface
       continua existindo porque marca a intenção — é o texto funcional, de
       corpo menor — e permite voltar a separar as duas famílias num só lugar. */
    --cai-interface: 'Zilla Slab', Georgia, 'Times New Roman', serif;

    --cai-medida: 68ch;
    --cai-respiro: clamp(1.4rem, 2.6vw, 2.4rem);
}

/* ---------------------------------------------------------------------------
   Escopos
   .caipora-escuro  capa, rodapé, faixas de destaque
   .caipora-claro   leitura longa
   Nenhuma cor é aplicada globalmente ao body: o tema pai controla o resto do
   site, e sobrescrever tudo de uma vez quebraria telas que ainda não revisamos.
   --------------------------------------------------------------------------- */

.caipora-escuro {
    background-color: var(--cai-verde-noite);
    color: var(--cai-osso); /* 15,47 */
}

.caipora-escuro a {
    color: var(--cai-menta); /* 13,32 */
}

.caipora-escuro a:hover,
.caipora-escuro a:focus-visible {
    color: var(--cai-verde-vivo); /* 6,08 */
}

/* Musgo dá só 3,29 sobre o verde-noite: serve para fio e moldura, nunca para
   texto pequeno. Texto secundário sobre escuro usa menta rebaixada. */
.caipora-escuro .caipora-secundario {
    color: var(--cai-menta);
    opacity: 0.78;
}

.caipora-claro {
    background-color: var(--cai-osso);
    color: var(--cai-verde-noite); /* 15,47 */
}

.caipora-claro a {
    color: var(--cai-vinho-escuro); /* 12,66 */
}

.caipora-claro a:hover,
.caipora-claro a:focus-visible {
    color: var(--cai-vinho); /* 8,31 */
}

.caipora-claro .caipora-secundario {
    color: var(--cai-musgo); /* 4,70 */
}

/* ---------------------------------------------------------------------------
   Grafismo
   --------------------------------------------------------------------------- */

.caipora-faixa {
    display: block;
    width: 100%;
    height: 24px;
    color: var(--cai-menta);
}

.caipora-faixa--divisor {
    height: 18px;
    margin: var(--cai-respiro) 0;
}

.caipora-grafismo__lente {
    fill: var(--cai-vinho);
}

.caipora-claro .caipora-faixa {
    color: var(--cai-verde-inst);
}

.caipora-ponta {
    width: 0.6em;
    height: 0.7em;
    flex: none;
    color: var(--cai-verde-vivo);
}

/* ---------------------------------------------------------------------------
   Etiquetas
   Assobio: preenchimento verde-vivo com texto verde-noite (6,08) — a mesma
   combinação dos cartões que o serviço carta gera.
   Editoria: preenchimento vinho com texto osso (8,31).
   --------------------------------------------------------------------------- */

.caipora-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--cai-interface);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3em 0.7em;
    text-decoration: none;
}

.caipora-etiqueta--assobio {
    background-color: var(--cai-verde-vivo);
    color: var(--cai-verde-noite);
}

.caipora-etiqueta--editoria {
    background-color: var(--cai-vinho);
    color: var(--cai-osso);
}

.caipora-escuro a.caipora-etiqueta--assobio:hover,
.caipora-escuro a.caipora-etiqueta--editoria:hover {
    color: var(--cai-osso);
    background-color: var(--cai-vinho-escuro);
}

/* ---------------------------------------------------------------------------
   Blocos
   --------------------------------------------------------------------------- */

.caipora-bloco {
    padding: var(--cai-respiro) 0;
}

.caipora-bloco--faixa {
    padding: 0;
}

.caipora-cabecalho-secao {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.6rem;
    font-family: var(--cai-titulo);
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight: 700;
    line-height: 1.1;
}

/* O fio da seção é hachura, não risco: é o mesmo traço paralelo das letras da
   logo, desenhado em gradiente para não custar requisição nem imagem. */
.caipora-cabecalho-secao__fio {
    flex: 1;
    height: 12px;
    background-image: repeating-linear-gradient(
        -62deg,
        currentColor 0 1.5px,
        transparent 1.5px 7px
    );
    opacity: 0.55;
}

.caipora-cabecalho-secao__link {
    font-family: var(--cai-interface);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Manchete --------------------------------------------------------------- */

.caipora-manchete {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

@media (min-width: 900px) {
    .caipora-manchete--lado-a-lado {
        grid-template-columns: 1.15fr 1fr;
    }
}

.caipora-manchete__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Manchete sobreposta: a foto ocupa a faixa e o título deita sobre ela. É o que
   dá peso de capa — uma reportagem por vez no palco, como no Intercept.
   O véu não é enfeite: sem ele o texto depende da foto, e foto a gente não
   controla. Ele garante o contraste do osso em qualquer imagem. */
.caipora-manchete--sobreposto {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(360px, 60vh, 660px);
    overflow: hidden;
    gap: 0;
}

.caipora-manchete--sobreposto .caipora-manchete__media {
    position: absolute;
    inset: 0;
    display: block;
}

.caipora-manchete--sobreposto .caipora-manchete__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caipora-manchete--sobreposto .caipora-manchete__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(2, 35, 18, 0.12) 0%,
        rgba(2, 35, 18, 0.62) 48%,
        rgba(2, 35, 18, 0.95) 100%
    );
}

.caipora-manchete--sobreposto .caipora-manchete__texto {
    position: relative;
    z-index: 1;
    padding: clamp(1.4rem, 4vw, 3.2rem);
    max-width: 60ch;
}

.caipora-manchete--sobreposto .caipora-manchete__titulo {
    font-size: clamp(2rem, 5.4vw, 4.2rem);
}

.caipora-manchete__chapeu {
    margin-bottom: 1rem;
}

.caipora-manchete__titulo {
    margin: 0 0 1rem;
    font-family: var(--cai-titulo);
    font-weight: 700;
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.caipora-manchete__titulo a {
    text-decoration: none;
}

.caipora-manchete__linhafina {
    margin: 0 0 1.2rem;
    font-family: var(--cai-titulo);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.5;
    max-width: 48ch;
}

.caipora-assinatura {
    font-family: var(--cai-interface);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

/* Grade autoral ---------------------------------------------------------- */

.caipora-grade {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* O cartão é um objeto, não um empilhamento de linhas: tem superfície própria,
   a foto sangra até a borda de cima e o texto respira dentro. Sem isso a grade
   lia como lista de texto solto sobre o fundo. */
.caipora-cartao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    position: relative;
    transition: transform 0.28s ease;
}

.caipora-escuro .caipora-cartao {
    background-color: var(--cai-verde-cartao);
    padding-bottom: 1.2rem;
}

.caipora-claro .caipora-cartao {
    background-color: #fff;
    padding-bottom: 1.2rem;
}

.caipora-cartao > *:not(.caipora-cartao__media) {
    padding-inline: 1.1rem;
}

.caipora-cartao__media {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

/* Fio de menta que acende no topo do cartão — a marca aparecendo na interação. */
.caipora-cartao::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--cai-verde-vivo);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
    z-index: 2;
}

.caipora-cartao:hover::before {
    transform: scaleX(1);
}

.caipora-cartao:hover {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .caipora-cartao,
    .caipora-cartao::before {
        transition: none;
    }
    .caipora-cartao:hover {
        transform: none;
    }
}

.caipora-cartao__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.caipora-cartao:hover .caipora-cartao__media img {
    transform: scale(1.03);
}

.caipora-cartao__titulo {
    margin: 0;
    font-family: var(--cai-titulo);
    font-weight: 700;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.18;
    letter-spacing: -0.008em;
}

/* O tema carrega Inter Tight pelo painel. Estes seletores têm duas classes, o
   que basta para a Zilla Slab vencer sem recorrer a !important. */
.caipora-bloco .caipora-manchete__titulo,
.caipora-bloco .caipora-cartao__titulo,
.caipora-bloco .caipora-rio__titulo,
.caipora-bloco .caipora-video__titulo,
.caipora-bloco .caipora-cabecalho-secao {
    font-family: var(--cai-titulo);
}

.caipora-cartao__titulo a {
    text-decoration: none;
}

/* Eixo temático ----------------------------------------------------------- */

.caipora-eixo__lista {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* Vídeo -------------------------------------------------------------------
   O play é a ponta de flecha da logo. A mesma forma que marca as seções aqui
   quer dizer "assistir" — identidade que vem do significado, não de enfeite. */

.caipora-video__arranjo {
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.4rem);
}

@media (min-width: 900px) {
    .caipora-video__arranjo--com-destaque {
        grid-template-columns: 1.6fr 1fr;
        align-items: start;
    }
}

.caipora-video__lista {
    display: grid;
    gap: 1.4rem;
}

@media (max-width: 899px) {
    .caipora-video__lista {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    }
}

.caipora-video__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

.caipora-video__media {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--cai-verde-cartao);
}

.caipora-video__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.caipora-video__semfoto {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.caipora-video__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caipora-video__play::before {
    content: "";
    position: absolute;
    width: clamp(48px, 7vw, 74px);
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--cai-verde-noite);
    opacity: 0.82;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.caipora-video__play .caipora-ponta {
    position: relative;
    width: clamp(15px, 2.2vw, 24px);
    height: auto;
    color: var(--cai-menta);
    margin-left: 0.16em;
}

.caipora-video__media:hover .caipora-video__play::before,
.caipora-video__media:focus-visible .caipora-video__play::before {
    opacity: 0.95;
    transform: scale(1.06);
}

.caipora-video__titulo {
    margin: 0;
    font-family: var(--cai-titulo);
    font-weight: 700;
    line-height: 1.15;
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
}

.caipora-video__item--destaque .caipora-video__titulo {
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
}

.caipora-video__titulo a {
    text-decoration: none;
}

.caipora-video__linha {
    margin: 0;
    font-family: var(--cai-titulo);
    font-size: 1.02rem;
    line-height: 1.5;
    max-width: 52ch;
    opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
    .caipora-video__play::before {
        transition: none;
    }
    .caipora-video__media:hover .caipora-video__play::before {
        transform: none;
    }
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Título de faixa para as seções montadas com widgets do tema, que não trazem
   título próprio. Repete o vocabulário do cabeçalho dos nossos blocos. */
.elementor-widget.caipora-titulo-faixa .elementor-heading-title,
.caipora-titulo-faixa .elementor-heading-title,
.caipora-titulo-faixa {
    font-family: var(--cai-titulo);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    line-height: 1.1;
    color: var(--cai-menta);
    margin: 0 0 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 12px solid transparent;
    border-image: repeating-linear-gradient(
        -62deg,
        var(--cai-verde-vivo) 0 1.5px,
        transparent 1.5px 7px
    ) 12;
}

/* ---------------------------------------------------------------------------
   Vestir os elementos do próprio TheGem e do Elementor Pro

   O tema entrega grade, slider, carrossel, timeline e filtro de categoria
   prontos — reescrever isso seria desperdício. O que faltava era identidade.
   Tipografia é aplicada em qualquer lugar (risco baixo, ganho alto); cor só
   dentro de .caipora-escuro/.caipora-claro, para não mexer em telas que ainda
   não revisamos. Basta pôr essa classe no contêiner do Elementor.
   As classes .news-grid, .caption, .grid-post-meta, .portfolio-filters-list e
   .blog vêm do CSS do tema; .elementor-widget-<nome> é gerada pelo Elementor.
   --------------------------------------------------------------------------- */

.news-grid .caption .title,
.news-grid .caption h3,
.blog .title,
.blog h2 a,
.elementor-widget-thegem-featured-posts-slider .title,
.elementor-widget-thegem-blogslider .title,
.elementor-widget-thegem-posts-carousel .title,
.elementor-widget-thegem-blogtimeline .title {
    font-family: var(--cai-titulo);
    font-weight: 700;
    letter-spacing: -0.005em;
}

.news-grid .grid-post-meta,
.news-grid .post-date,
.news-grid .author,
.blog .post-author-date {
    font-family: var(--cai-interface);
    letter-spacing: 0.02em;
}

.caipora-escuro .news-grid .caption,
.caipora-escuro .blog .item-post-container {
    background-color: var(--cai-verde-cartao);
    color: var(--cai-osso);
}

.caipora-escuro .news-grid .caption .title,
.caipora-escuro .news-grid .caption .title a,
.caipora-escuro .blog .title a {
    color: var(--cai-osso);
}

.caipora-escuro .news-grid .caption .title a:hover,
.caipora-escuro .blog .title a:hover {
    color: var(--cai-menta);
}

.caipora-escuro .news-grid .grid-post-meta,
.caipora-escuro .news-grid .post-date,
.caipora-escuro .news-grid .author {
    color: var(--cai-menta);
    opacity: 0.75;
}

/* Filtro de categoria: é a peça que faz as editorias virarem navegação. */
.caipora-escuro .portfolio-filters-list a,
.caipora-claro .portfolio-filters-list a {
    font-family: var(--cai-interface);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.42em 0.9em;
    border-radius: 0;
}

.caipora-escuro .portfolio-filters-list a {
    color: var(--cai-menta);
    border: 1px solid rgba(191, 241, 204, 0.35);
}

.caipora-escuro .portfolio-filters-list a:hover,
.caipora-escuro .portfolio-filters-list a.active {
    background-color: var(--cai-verde-vivo);
    border-color: var(--cai-verde-vivo);
    color: var(--cai-verde-noite);
}

.caipora-claro .portfolio-filters-list a {
    color: var(--cai-verde-noite);
    border: 1px solid rgba(2, 35, 18, 0.25);
}

.caipora-claro .portfolio-filters-list a:hover,
.caipora-claro .portfolio-filters-list a.active {
    background-color: var(--cai-vinho);
    border-color: var(--cai-vinho);
    color: var(--cai-osso);
}

/* Botão do tema */
.caipora-escuro .gem-widget-button a,
.caipora-escuro .elementor-widget-thegem-styledbutton a {
    font-family: var(--cai-interface);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Elementor Pro na página de leitura: sumário e barra de progresso são o que
   uma reportagem de 6 mil palavras precisa para não perder o leitor. */
.caipora-claro .elementor-widget-table-of-contents,
.caipora-claro .elementor-widget-progress-tracker,
.caipora-claro .elementor-widget-share-buttons {
    font-family: var(--cai-interface);
    color: var(--cai-verde-noite);
}

.caipora-claro .elementor-widget-table-of-contents a {
    color: var(--cai-vinho-escuro);
}

/* Newsletter do tema */
.caipora-escuro .elementor-widget-thegem-mailchimp,
.caipora-escuro .elementor-widget-thegem-infobox {
    font-family: var(--cai-interface);
}

.caipora-escuro .elementor-widget-thegem-quoted-text {
    font-family: var(--cai-titulo);
    color: var(--cai-menta);
}

/* ---------------------------------------------------------------------------
   Leitura — reportagem autoral
   Uma reportagem daqui passa de 6 mil palavras. Medida curta e entrelinha alta
   não são enfeite: são o que torna esse tamanho legível.
   --------------------------------------------------------------------------- */

.caipora-claro .entry-content {
    font-family: var(--cai-titulo);
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    line-height: 1.75;
}

.caipora-claro .entry-content > * {
    max-width: var(--cai-medida);
    margin-left: auto;
    margin-right: auto;
}

.caipora-claro .entry-content > .wp-block-image,
.caipora-claro .entry-content > .wp-block-gallery,
.caipora-claro .entry-content > .alignwide,
.caipora-claro .entry-content > .alignfull {
    max-width: min(100%, 1100px);
}

.caipora-claro .entry-content figcaption {
    font-family: var(--cai-interface);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--cai-musgo);
    margin-top: 0.6rem;
    max-width: var(--cai-medida);
}

.caipora-claro .entry-content blockquote {
    border-left: 4px solid var(--cai-vinho);
    padding-left: 1.4rem;
    margin-left: 0;
    font-size: 1.15em;
    line-height: 1.5;
    font-weight: 500;
}

.caipora-claro .entry-content h2,
.caipora-claro .entry-content h3 {
    font-family: var(--cai-titulo);
    font-weight: 700;
    line-height: 1.15;
    margin-top: 2.4em;
}

/* Rodapé de transparência das notas do Assobio, gravado pela automação. */
.caipora-claro .entry-content hr + p {
    font-family: var(--cai-interface);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--cai-musgo);
}

/* ---------------------------------------------------------------------------
   Acessibilidade
   --------------------------------------------------------------------------- */

.caipora-escuro :focus-visible,
.caipora-claro :focus-visible {
    outline: 3px solid var(--cai-verde-vivo);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .caipora-cartao__media img {
        transition: none;
    }
    .caipora-cartao:hover .caipora-cartao__media img {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Os cartões das grades são do tema

   Havia aqui um bloco que repintava legenda, título, data e etiqueta das grades
   do TheGem. Foi retirado a pedido da redação: cada grade traz a própria
   configuração de cor no Elementor — "Escolhas da redação" pede título escuro
   sobre legenda clara, a faixa de baixo pede legenda branca — e o CSS passava
   por cima disso. Quem manda na aparência das grades é o painel, não esta folha.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   O fundo da capa

   As faixas que a demo não trazia com textura ficaram transparentes, e o que
   aparecia por trás era o branco do site — os "quadrados brancos". Pintar o
   corpo resolve todas de uma vez, inclusive as que eu não alcançar no futuro.
   --------------------------------------------------------------------------- */

body.caipora-home {
    background-color: var(--cai-verde-noite);
}

.caipora-home #main-content,
.caipora-home .page-content,
.caipora-home .block-content {
    background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Assobio — o giro do dia

   Desenho proposto pela redação: cartões claros em forma de folha sobre a faixa
   vinho, com foto, etiqueta da editoria, data no começo da manchete e a fonte
   no rodapé. Três colunas no computador, uma no celular, e a primeira nota
   abrindo a faixa em dobro.

   O cartão é claro de propósito: é o contraste com o vinho que faz o giro do
   dia saltar como seção própria, em vez de mais uma grade escura.
   --------------------------------------------------------------------------- */

.caipora-home .caipora-bloco--rio,
.caipora-home .caipora-bloco--rio.caipora-escuro {
    background-color: transparent;
    padding: 0;
    position: relative;
}

/* Grafismo de marca-d'água na faixa, bem baixo, como no desenho. */
.caipora-home .caipora-bloco--rio::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -62deg,
        rgba(248, 245, 244, 0.05) 0 2px,
        transparent 2px 14px
    );
    pointer-events: none;
}

.caipora-rio__cabecalho {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.8rem;
    font-family: var(--cai-titulo);
    font-weight: 700;
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--cai-osso);
}

.caipora-apito {
    width: 1.5em;
    height: auto;
    flex: none;
    color: var(--cai-menta);
}

.caipora-rio {
    display: grid;
    gap: clamp(1rem, 2vw, 1.6rem);
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .caipora-rio {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .caipora-rio {
        grid-template-columns: repeat(3, 1fr);
    }
    .caipora-nota--abertura {
        grid-column: span 2;
    }
}

/* O cartão-folha ------------------------------------------------------------ */

.caipora-nota {
    display: flex;
    flex-direction: column;
    background-color: var(--cai-osso);
    color: var(--cai-verde-noite);
    padding: 0.7rem 0.7rem 1.1rem;
    border-radius: 8px 54px 8px 54px;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.caipora-nota--espelhada {
    border-radius: 54px 8px 54px 8px;
}

.caipora-nota:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(2, 35, 18, 0.35);
}

.caipora-nota__media {
    position: relative;
    display: block;
    margin-bottom: 0.95rem;
}

.caipora-nota__media img,
.caipora-nota__semfoto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 6px 40px 6px 6px;
    background-color: var(--cai-verde-cartao);
}

.caipora-nota--espelhada .caipora-nota__media img,
.caipora-nota--espelhada .caipora-nota__semfoto {
    border-radius: 40px 6px 6px 6px;
}

.caipora-nota--abertura .caipora-nota__media img {
    aspect-ratio: 16 / 9;
}

/* Etiqueta da editoria, no canto de cima ------------------------------------ */

.caipora-nota__etiqueta {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    font-family: var(--cai-interface);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.34em 0.75em;
    border-radius: 4px;
    text-decoration: none;
    background-color: var(--cai-verde-inst);
    color: var(--cai-osso); /* 4,38 — corpo pequeno em negrito */
}

.caipora-nota--espelhada .caipora-nota__etiqueta {
    right: auto;
    left: 0.6rem;
}

/* Cada editoria com sua cor, todas medidas contra o texto que levam por cima. */
.caipora-nota__etiqueta--justica,
.caipora-nota__etiqueta--narrativas-insurgentes {
    background-color: var(--cai-vinho); /* osso 8,31 */
}

.caipora-nota__etiqueta--memoria-e-futuro,
.caipora-nota__etiqueta--movimento-indigena {
    background-color: var(--cai-vinho-escuro); /* osso 12,66 */
}

.caipora-nota__etiqueta--mae-terra {
    background-color: var(--cai-verde-vivo);
    color: var(--cai-verde-noite); /* 6,08 */
}

.caipora-nota__etiqueta--internacional,
.caipora-nota__etiqueta--decolonizar-saberes {
    background-color: var(--cai-verde-cartao); /* osso 8,87 */
}

.caipora-nota__etiqueta:hover {
    background-color: var(--cai-verde-noite);
    color: var(--cai-osso);
}

/* Texto do cartão ----------------------------------------------------------- */

.caipora-nota__texto {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
    padding: 0 0.5rem;
}

.caipora-nota__titulo {
    margin: 0;
    font-family: var(--cai-titulo);
    font-weight: 700;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.28;
    text-transform: uppercase;
    letter-spacing: 0.002em;
}

.caipora-nota--abertura .caipora-nota__titulo {
    font-size: clamp(1.15rem, 1.7vw, 1.42rem);
}

.caipora-nota__titulo a {
    color: var(--cai-verde-noite); /* 15,47 sobre o osso */
    text-decoration: none;
}

.caipora-nota__titulo a:hover {
    color: var(--cai-vinho); /* 8,31 */
}

.caipora-nota__data {
    color: var(--cai-vinho);
    margin-right: 0.15em;
}

.caipora-nota__data::after {
    content: " —";
}

.caipora-nota__fonte {
    margin: auto 0 0;
    font-family: var(--cai-interface);
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--cai-musgo); /* 4,70 sobre o osso */
    word-break: break-word;
}

/* Rodapé da faixa ----------------------------------------------------------- */

.caipora-rio__acao {
    margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
    text-align: center;
}

.caipora-botao {
    display: inline-block;
    font-family: var(--cai-interface);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.85em 2.2em;
    border: 1px solid var(--cai-menta);
    border-radius: 6px 22px 6px 22px;
    color: var(--cai-menta);
    text-decoration: none;
    transition: background-color 0.22s ease, color 0.22s ease;
}

.caipora-botao:hover {
    background-color: var(--cai-menta);
    color: var(--cai-vinho-escuro);
}

.caipora-rio__transparencia {
    margin: 1.6rem auto 0;
    max-width: 62rem;
    font-family: var(--cai-interface);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--cai-osso);
    opacity: 0.72;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .caipora-nota {
        transition: none;
    }
    .caipora-nota:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Tira de destaques com rodízio

   A faixa traz nove posts e mostra três; o JS troca quais estão visíveis. Os
   que saem de cena apenas somem — continuam no HTML, e quem navega por teclado
   ou leitor de tela não é levado para dentro deles.
   --------------------------------------------------------------------------- */

.caipora-rotativo .portfolio-item {
    transition: opacity 0.55s ease;
}

.caipora-rotativo .portfolio-item.caipora-rotativo__fora {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .caipora-rotativo .portfolio-item {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Rodapé e cabeçalho

   Os contêineres desses templates não declaram fundo: ficam transparentes e o
   que aparece por trás é o branco do site. Pintar o invólucro do template —
   .elementor-140 é o rodapé, .elementor-18 e .elementor-2103 os cabeçalhos —
   resolve sem depender de alcançar cada contêiner por dentro.
   --------------------------------------------------------------------------- */

.elementor-140 {
    background-color: var(--cai-verde-noite);
    color: var(--cai-osso);
}

.elementor-140 .elementor-heading-title,
.elementor-140 .thegem-te-animated-heading,
.elementor-140 p,
.elementor-140 span,
.elementor-140 div {
    color: inherit;
}

.elementor-140 a,
.elementor-140 .menu-item a,
.elementor-140 .thegem-te-custom-menu a {
    color: var(--cai-menta);
    text-decoration: none;
}

.elementor-140 a:hover,
.elementor-140 .menu-item a:hover,
.elementor-140 .thegem-te-custom-menu a:hover {
    color: var(--cai-osso);
}

/* Os títulos de coluna do rodapé ("A Caipora", "Editorias") são do tipo que
   herda a cor de texto do Kit Global e sumia no escuro. */
.elementor-140 .title-h5,
.elementor-140 h2,
.elementor-140 h3,
.elementor-140 h4,
.elementor-140 h5 {
    color: var(--cai-osso);
}

/* Campo do boletim: fundo claro com texto escuro, que é como formulário se lê */
.elementor-140 input[type="text"],
.elementor-140 input[type="email"] {
    background-color: var(--cai-osso);
    color: var(--cai-verde-noite);
    border-color: var(--cai-menta);
}

.elementor-140 button,
.elementor-140 input[type="submit"] {
    background-color: var(--cai-menta);
    color: var(--cai-verde-noite);
    border-color: var(--cai-menta);
}

/* Cabeçalhos ---------------------------------------------------------------- */

.elementor-18,
.elementor-2103 {
    background-color: var(--cai-verde-noite);
}

/* No cabeçalho fixo as redes ficam AO LADO do menu, não empilhadas embaixo. */
.elementor-2103 .e-con-inner,
.elementor-2103 .e-con > .e-con-inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.8rem;
}

.caipora-redes-fixas .elementor-social-icons-wrapper,
.caipora-redes-fixas .elementor-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin: 0;
}

.caipora-redes-fixas .elementor-grid-item {
    margin: 0;
}

.caipora-redes-fixas {
    width: auto;
    margin-left: auto;
}

/* ---------------------------------------------------------------------------
   Tira de destaques

   Grade CSS, não a grade do tema: a do tema posiciona por cima (isotope), e
   esconder um item para o rodízio deixava os cartões sobrepostos. Aqui os que
   saem de cena apenas somem e os outros se reacomodam.
   --------------------------------------------------------------------------- */

.caipora-tira {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(var(--caipora-por-vez, 3), minmax(0, 1fr));
}

/* Colados e ocupando a faixa inteira: a tira fecha o bloco de abertura, então
   ela preenche o espaço em vez de flutuar no meio dele. */
.caipora-bloco--tira {
    padding: 0;
}

.caipora-destaque {
    min-width: 0;
}

.caipora-destaque.caipora-rotativo__fora {
    display: none;
}

.caipora-destaque__link {
    position: relative;
    display: block;
    height: 100%;
    min-height: clamp(230px, 34vw, 420px);
    overflow: hidden;
    border-radius: 0;
    text-decoration: none;
    background-color: var(--cai-verde-cartao);
}

/* Fio de separação entre cartões colados, para não virarem uma mancha só. */
.caipora-destaque + .caipora-destaque .caipora-destaque__link {
    box-shadow: inset 1px 0 0 rgba(191, 241, 204, 0.22);
}

.caipora-destaque__link img,
.caipora-destaque__semfoto {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.caipora-destaque__link:hover img {
    transform: scale(1.04);
}

/* O véu garante a leitura do título sobre qualquer foto — é o mesmo princípio
   do cartão das grades do tema. */
.caipora-destaque__veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(2, 35, 18, 0.05) 0%,
        rgba(2, 35, 18, 0.58) 52%,
        rgba(2, 35, 18, 0.92) 100%
    );
}

.caipora-destaque__texto {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: clamp(0.7rem, 1.6vw, 1.2rem);
}

.caipora-destaque__etiqueta {
    font-family: var(--cai-interface);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cai-menta);
    border: 1px solid var(--cai-menta);
    border-radius: 20px;
    padding: 0.3em 0.8em;
    line-height: 1;
}

.caipora-destaque__titulo {
    font-family: var(--cai-titulo);
    font-weight: 700;
    font-size: clamp(0.86rem, 1.35vw, 1.22rem);
    line-height: 1.22;
    color: var(--cai-osso);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.caipora-destaque__meta {
    font-family: var(--cai-interface);
    font-size: 0.68rem;
    color: var(--cai-menta);
    opacity: 0.82;
}

@media (max-width: 700px) {
    .caipora-destaque__meta {
        display: none;
    }
    .caipora-destaque__link {
        min-height: 170px;
    }
    .caipora-destaque__titulo {
        -webkit-line-clamp: 4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .caipora-destaque__link img {
        transition: none;
    }
    .caipora-destaque__link:hover img {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Rodapé: a cor precisa de !important

   O CSS que o Elementor gera para cada elemento do template usa seletor com o
   id do elemento, que vence qualquer regra nossa por especificidade. Como isto
   está preso ao invólucro do rodapé, o alcance é pequeno e o risco também.
   --------------------------------------------------------------------------- */

.elementor-140 a,
.elementor-140 .menu-item a,
.elementor-140 .thegem-te-custom-menu a,
.elementor-140 nav a {
    color: var(--cai-menta) !important;
}

.elementor-140 a:hover,
.elementor-140 .menu-item a:hover,
.elementor-140 nav a:hover {
    color: var(--cai-osso) !important;
}

.elementor-140 .elementor-heading-title,
.elementor-140 h2,
.elementor-140 h3,
.elementor-140 h4,
.elementor-140 h5,
.elementor-140 .title-h5 {
    color: var(--cai-osso) !important;
}

/* Redes sociais: em linha, sempre — no rodapé e no cabeçalho fixo. */
.elementor-140 .elementor-social-icons-wrapper,
.elementor-2103 .elementor-social-icons-wrapper,
.caipora-redes-fixas .elementor-social-icons-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 0.5rem;
}

.elementor-140 .elementor-social-icons-wrapper .elementor-grid-item,
.elementor-2103 .elementor-social-icons-wrapper .elementor-grid-item,
.caipora-redes-fixas .elementor-grid-item {
    margin: 0 !important;
    width: auto !important;
}

/* Botão Apoie e a caixa das redes no cabeçalho ------------------------------- */

.caipora-apoie .elementor-button {
    font-family: var(--cai-interface);
    white-space: nowrap;
}

.caipora-apoie .elementor-button:hover {
    background-color: var(--cai-vinho-escuro) !important;
    color: var(--cai-osso) !important;
}

/* Os ícones de rede vivem numa caixa própria, como a logo e o menu. */
.caipora-redes-fixas .elementor-social-icon {
    background-color: transparent !important;
    border: 1px solid var(--cai-menta);
}

.caipora-redes-fixas .elementor-social-icon:hover {
    background-color: var(--cai-menta) !important;
}

.caipora-redes-fixas .elementor-social-icon i,
.caipora-redes-fixas .elementor-social-icon svg {
    color: var(--cai-menta);
    fill: var(--cai-menta);
}

.caipora-redes-fixas .elementor-social-icon:hover i,
.caipora-redes-fixas .elementor-social-icon:hover svg {
    color: var(--cai-verde-noite);
    fill: var(--cai-verde-noite);
}

/* O rodapé também: as redes ficam em aro de menta sobre o escuro. */
.elementor-140 .elementor-social-icon {
    background-color: transparent !important;
    border: 1px solid var(--cai-menta);
}

.elementor-140 .elementor-social-icon i,
.elementor-140 .elementor-social-icon svg {
    color: var(--cai-menta) !important;
    fill: var(--cai-menta) !important;
}

.elementor-140 .elementor-social-icon:hover {
    background-color: var(--cai-menta) !important;
}

.elementor-140 .elementor-social-icon:hover i,
.elementor-140 .elementor-social-icon:hover svg {
    color: var(--cai-verde-noite) !important;
    fill: var(--cai-verde-noite) !important;
}

/* ---------------------------------------------------------------------------
   A barra — o único cabeçalho do site

   Sempre fixa. Os dois templates do tema foram esvaziados: um rolava junto com
   a página e o outro repetia o conteúdo. A estrutura espelha a da Agência
   Pública, que a redação apontou como referência: menu à esquerda, logo em
   seguida, e Apoie e busca colados na borda direita ocupando a altura toda.
   --------------------------------------------------------------------------- */

:root {
    /* Valor de partida, até o JS medir a barra de verdade. Era 62px, menos que
       os 78px da linha do menu mais o fio de leitura: no primeiro quadro o
       conteúdo já entrava por baixo da barra. */
    --cai-barra-altura: 82px;
    /* Vinho mais vivo, pedido pela redação, usado só na barra. Os oito da
       paleta oficial seguem intactos; este é uma variação do vinho para o
       cabeçalho, e volta atrás trocando uma linha. */
    --cai-vinho-forte: #A5123F;
}

/* O cabeçalho do tema fica escondido: a nossa barra é o cabeçalho do site.
   Esconder, e não apagar o template, porque sem template o TheGem cai no
   cabeçalho padrão dele e despeja menu, redes e logo sem estilo na página. */
#site-header,
#site-header-wrapper,
.top-area-background,
#site-header-sticky-wrapper {
    display: none !important;
}

.caipora-barra {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    background-color: var(--cai-vinho-forte);
}

/* O grafismo do pacuzinho corre atrás da barra.
   Ele vem numa tira vertical de 204x812 com fundo preto, chevrons brancos e
   lentes vermelhas. Entra numa camada própria, deitada e esmaecida: assim o
   desenho aparece e o menu continua legível: o texto osso segue sobre o vinho,
   sem o preto do grafismo comer o contraste. */
.caipora-barra::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("https://caipora.org/wp-content/uploads/2025/05/marcador-grafismo-do-pacuzinho-ii-hi-b3xkufyg1i.jpeg");
    background-repeat: repeat;
    background-size: auto 260%;
    background-position: center center;
    opacity: 0.18;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Tudo o que é conteúdo da barra fica acima da camada do grafismo.
   A ordem entre eles importa: são irmãos, e com o mesmo z-index quem vem
   depois no HTML pinta por cima. A barra de progresso vem depois da linha do
   menu, e com empate ela cobria o submenu — o submenu abria e o mouse não
   conseguia entrar nele. Por isso a linha do menu fica acima das duas. */
.caipora-barra__linha {
    position: relative;
    z-index: 3;
}

.caipora-barra__campo {
    position: relative;
    z-index: 2;
}

.caipora-barra__progresso {
    position: relative;
    z-index: 1;
}

/* O conteúdo da página desce o tanto que a barra ocupa. A medida real é escrita
   pelo JS, porque a altura muda com a tela e com a barra de administração. */
/* "html body" e não só "body": o tema emite na própria página um
   body{padding-top: 0px; ...} que, com a mesma especificidade e vindo depois,
   ganhava da minha regra. O conteúdo então subia para debaixo da barra fixa e
   ela comia o começo da página — o título da reportagem aparecia cortado.
   Dois seletores bastam para passar na frente, sem !important. */
html body {
    padding-top: var(--cai-barra-altura);
}

/* Logado, o WordPress põe a própria barra no topo. A nossa é fixa em top:0 e
   ficava por baixo dela, com a logo cortada. */
body.admin-bar .caipora-barra {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .caipora-barra {
        top: 46px;
    }
}

.caipora-barra__linha {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 78px;
    overflow: visible;
}

/* Menu ---------------------------------------------------------------------- */

.caipora-barra__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cai-osso);
    cursor: pointer;
}

.caipora-barra__menu:hover {
    color: var(--cai-menta);
}

.caipora-barra__tracos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}

.caipora-barra__tracos span {
    display: block;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
}

/* Logo ---------------------------------------------------------------------- */

.caipora-barra__logo {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.8rem 0.5rem 0.2rem;
    flex: none;
    min-width: 0;
}

/* A logo ocupa quase toda a altura da faixa: é a peça principal do cabeçalho,
   e é o que o desenho pedia. A largura vem da altura para ela nunca estourar a
   linha nem ser cortada. */
.caipora-barra__logo img {
    display: block;
    height: clamp(30px, 7vw, 52px);
    width: auto;
    max-width: min(52vw, 420px);
    object-fit: contain;
}

/* Menu inteiro, só no computador -------------------------------------------- */

.caipora-barra__nav {
    display: none;
    flex: 1;
    min-width: 0;
}

/* Os itens ocupam a altura inteira da faixa, e não só a altura do texto.
   Com eles centrados, o submenu (que abre no pé do item) nascia no meio da
   faixa vermelha e ainda deixava o percurso do mouse passar por fora do item.
   Esticados, o submenu desce exatamente da borda de baixo da barra. */
.caipora-barra__menu-lista {
    display: flex;
    align-items: stretch;
    gap: clamp(0.5rem, 1.4vw, 1.3rem);
    list-style: none;
    margin: 0;
    padding: 0 0.6rem;
    height: 100%;
}

.caipora-barra__menu-lista > li {
    position: relative;
}

/* O corpo cresce com a janela: no computador o menu estava ilegível de tão
   pequeno, mas fixar um número grande faria os itens não caberem em tela média.
   O clamp resolve os dois lados.

   O menu passou de treze itens soltos para sete com submenu (Início, Nós,
   Editorias, Mídia, Materiais, Apoie, Contato), e sobrou largura: o corpo
   subiu de 1,14rem para 1,5rem no limite. A faixa tem 78px de altura, então
   24px de texto ainda respira dentro dela. */
.caipora-barra__menu-lista a {
    display: flex;
    align-items: center;
    height: 100%;
    font-family: var(--cai-interface);
    font-size: clamp(1.15rem, 1.35vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cai-osso); /* 8,31 sobre o vinho */
    text-decoration: none;
    white-space: nowrap;
}

.caipora-barra__menu-lista a:hover {
    color: var(--cai-menta);
}

/* Submenu do computador */
/* O submenu abria por trás do conteúdo da página e não dava para clicar: ele
   desce para fora da barra, e ali quem manda é a pilha de empilhamento do
   documento. Daí o z-index alto e o empilhamento próprio no item pai. */
.caipora-barra__menu-lista > li {
    position: relative;
    z-index: 1;
}

.caipora-barra__menu-lista > li:hover,
.caipora-barra__menu-lista > li:focus-within {
    z-index: 10002;
}

/* Abre por visibilidade, e não por display: assim cabe um atraso ao fechar.
   Com display o submenu sumia no instante em que o ponteiro saía do item, e
   qualquer desvio no caminho até ele já cancelava. */
.caipora-barra__menu-lista .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10001;
    min-width: 15rem;
    margin: 0;
    padding: 0.4rem 0;
    list-style: none;
    background-color: var(--cai-vinho-escuro);
    box-shadow: 0 12px 28px rgba(2, 35, 18, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, visibility 0.14s ease;
    transition-delay: 0.25s; /* o atraso é no fechar */
}

/* Ponte invisível sobre a borda: cobre o fio de um pixel entre o item e o
   submenu, onde o ponteiro perdia os dois ao mesmo tempo. */
.caipora-barra__menu-lista .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

.caipora-barra__menu-lista li:hover > .sub-menu,
.caipora-barra__menu-lista li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

/* Submenu que não caberia na tela abre para dentro. Quem marca é o JS, que
   mede: contar posição na lista não serve, porque o item com submenu pode
   estar em qualquer lugar dela e a largura muda com a janela. */
.caipora-barra__menu-lista > li > .sub-menu.caipora-submenu--esquerda {
    left: auto;
    right: 0;
}

.caipora-barra__menu-lista .sub-menu {
    max-width: calc(100vw - 2rem);
}

.caipora-barra__menu-lista .sub-menu a {
    padding: 0.66rem 1.2rem;
    font-size: 1.06rem;
    letter-spacing: 0.03em;
}

@media (min-width: 1080px) {
    .caipora-barra__nav {
        display: block;
    }
    .caipora-barra__menu {
        display: none;
    }
    .caipora-barra__logo {
        padding-left: clamp(0.8rem, 2vw, 1.6rem);
    }
}

/* Blocos da direita, colados na borda --------------------------------------- */

.caipora-barra__blocos {
    display: flex;
    align-items: stretch;
    margin-left: auto;
    flex: none;
}

.caipora-barra__apoie {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 clamp(0.8rem, 2.2vw, 1.6rem);
    background-color: var(--cai-verde-vivo);
    color: var(--cai-verde-noite); /* 6,08 */
    font-family: var(--cai-interface);
    font-size: clamp(0.8rem, 0.8vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.caipora-barra__apoie svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.caipora-barra__apoie:hover {
    background-color: var(--cai-menta);
    color: var(--cai-verde-noite);
}

.caipora-barra__busca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    flex: none;
    padding: 0;
    border: 0;
    background-color: var(--cai-vinho-escuro);
    color: var(--cai-osso);
    cursor: pointer;
}

.caipora-barra__busca svg {
    width: 19px;
    height: 19px;
}

.caipora-barra__busca:hover {
    color: var(--cai-menta);
}

/* A flecha que avança com a leitura ----------------------------------------- */

.caipora-barra__progresso {
    position: relative;
    height: 5px;
}

.caipora-barra__trilho {
    position: absolute;
    inset: 0;
    background-color: rgba(248, 245, 244, 0.22);
}

.caipora-barra__avanco {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: var(--cai-menta);
}

.caipora-barra__flecha {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    color: var(--cai-menta);
}

.caipora-barra__flecha .caipora-ponta {
    width: 10px;
    height: 12px;
}

/* Campo de busca ------------------------------------------------------------ */

.caipora-barra__campo {
    background-color: var(--cai-vinho-escuro);
    padding: 0.8rem clamp(0.8rem, 3vw, 2rem);
}

.caipora-barra__campo form {
    display: flex;
    gap: 0.5rem;
    max-width: 46rem;
    margin: 0 auto;
}

.caipora-barra__campo input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--cai-menta);
    border-radius: 6px;
    background-color: var(--cai-osso);
    color: var(--cai-verde-noite);
    font-family: var(--cai-interface);
}

.caipora-barra__campo button {
    padding: 0.6rem 1.2rem;
    border: 0;
    border-radius: 6px;
    background-color: var(--cai-menta);
    color: var(--cai-verde-noite);
    font-family: var(--cai-interface);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    cursor: pointer;
}

/* Telas estreitas: sai o texto do Apoie, fica o coração. */
@media (max-width: 620px) {
    .caipora-barra__apoie span {
        display: none;
    }
    .caipora-barra__apoie {
        padding: 0 1rem;
    }
}

/* Painel do menu ------------------------------------------------------------ */

.caipora-painel {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(2, 35, 18, 0.97);
    padding: clamp(3.5rem, 9vw, 6rem) clamp(1.2rem, 5vw, 3rem);
    overflow-y: auto;
}

body.caipora-painel-aberto {
    overflow: hidden;
}

.caipora-painel__fechar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
    line-height: 1;
    border: 1px solid rgba(191, 241, 204, 0.4);
    border-radius: 10px;
    background: transparent;
    color: var(--cai-menta);
    cursor: pointer;
}

.caipora-painel__lista {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 46rem;
    display: grid;
    gap: 0.2rem;
}

.caipora-painel__lista a {
    display: block;
    padding: 0.5rem 0;
    font-family: var(--cai-titulo);
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--cai-osso);
    text-decoration: none;
}

.caipora-painel__lista a:hover {
    color: var(--cai-menta);
}

.caipora-painel__lista .sub-menu {
    list-style: none;
    margin: 0 0 0.6rem 1rem;
    padding: 0;
}

.caipora-painel__lista .sub-menu a {
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    font-weight: 500;
    color: var(--cai-menta);
    opacity: 0.85;
}

.caipora-painel__redes {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2rem;
}

.caipora-barra__rede {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--cai-menta);
    border-radius: 50%;
    color: var(--cai-menta);
}

.caipora-barra__rede svg {
    width: 19px;
    height: 19px;
}

.caipora-barra__rede:hover {
    background-color: var(--cai-menta);
    color: var(--cai-verde-noite);
}

/* ---------------------------------------------------------------------------
   A reportagem

   Uma matéria daqui passa de 90 mil caracteres. Tudo abaixo serve a uma coisa
   só: fazer esse tamanho ser lido. Fundo claro, medida curta, entrelinha alta
   e hierarquia visível dos subtítulos, que é o que deixa o leitor se localizar
   num texto longo.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Página de leitura

   Capa escura, leitura clara — a decisão da redação lá do começo, e o que
   fazem os veículos de referência. Texto claro sobre fundo escuro cansa numa
   reportagem de sete mil palavras, e foi essa a queixa. O hero segue escuro,
   desenhado pelo template do tema; daí para baixo a página vira osso.

   Os tamanhos estão em pixel de propósito. Em rem eles dependiam do tamanho
   base do documento, que o tema mexe — foi por isso que "aumentar a fonte"
   não aumentava nada na tela.
   --------------------------------------------------------------------------- */

body.single-post #main,
body.single-post #main-content,
body.single-post .block-content {
    background-color: var(--cai-osso);
}

/* Corpo do texto ------------------------------------------------------------ */

body.single-post .thegem-te-post-content {
    font-family: var(--cai-titulo);
    font-size: 20px;
    line-height: 1.62;
    color: var(--cai-verde-noite); /* 15,5:1 sobre o osso */
}

@media (min-width: 1080px) {
    body.single-post .thegem-te-post-content {
        font-size: 21px;
        line-height: 1.65;
    }
}

body.single-post .thegem-te-post-content > * {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
}

body.single-post .thegem-te-post-content p {
    margin: 0 auto 1.3em;
}

/* Bloco de duas colunas: é diagramação da autora, texto de um lado e foto do
   outro. A medida de 72 caracteres serve ao texto corrido; aplicada ao bloco
   inteiro, deixava cada coluna com 36 e o texto virava uma tira estreita. */
body.single-post .thegem-te-post-content .wp-block-columns,
body.single-post .thegem-te-post-content .wp-block-gallery {
    max-width: min(100%, 1100px);
}

/* Texto correndo em volta da foto.
   Em duas colunas rígidas, quando o texto de um lado acaba antes da legenda do
   outro sobra um bloco de vazio — foi o que apareceu na reportagem do
   Fitzcarrald. Aqui o bloco deixa de ser flex e a coluna que tem imagem passa
   a flutuar: o texto contorna a foto e fecha o buraco.

   Vale a partir de 782px, que é onde o próprio editor empilha as colunas. O
   :has() é o que identifica a coluna da imagem; navegador que não o entenda
   mantém as duas colunas como estão hoje, sem quebrar nada. */
@media (min-width: 782px) {
    body.single-post .thegem-te-post-content .wp-block-columns:has(.wp-block-column img) {
        display: block;
    }

    body.single-post .thegem-te-post-content .wp-block-columns:has(.wp-block-column img)::after {
        content: "";
        display: table;
        clear: both;
    }

    body.single-post .thegem-te-post-content .wp-block-column:has(img) {
        float: right;
        width: 42%;
        margin: 0.3em 0 1.2em 2rem;
    }

    /* A coluna de texto volta a ser texto corrido: sem base de flex e sem
       largura própria. */
    body.single-post .thegem-te-post-content .wp-block-column:not(:has(img)) {
        flex-basis: auto !important;
        width: auto;
    }
}

@media (max-width: 781px) {
    /* O editor já empilha as colunas nesta largura; aqui elas voltam à medida
       do texto para não ficarem mais largas que o resto da leitura. */
    body.single-post .thegem-te-post-content .wp-block-columns {
        max-width: 72ch;
    }
}

/* Imagem dentro do texto não flutua: numa coluna de 72 caracteres, uma foto
   alinhada à direita espremia o texto numa tira de três palavras por linha,
   que foi o que apareceu no computador. Aqui ela ocupa a coluna e centra. */
body.single-post .thegem-te-post-content .alignleft,
body.single-post .thegem-te-post-content .alignright,
body.single-post .thegem-te-post-content figure.alignleft,
body.single-post .thegem-te-post-content figure.alignright {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* A primeira linha ganha corpo: é o degrau de entrada no texto. */
body.single-post .thegem-te-post-content > p:first-of-type {
    font-size: 1.12em;
    line-height: 1.55;
}

/* Subtítulos ---------------------------------------------------------------- */

body.single-post .thegem-te-post-content h2,
body.single-post .thegem-te-post-content h3,
body.single-post .thegem-te-post-content h4 {
    font-family: var(--cai-titulo);
    font-weight: 700;
    line-height: 1.18;
    /* A redação pediu subtítulo de cor única. Na página escura era a menta;
       aqui a menta daria 1,3:1, então o mesmo papel fica com o vinho. */
    color: var(--cai-vinho); /* 8,3:1 sobre o osso */
    margin: 2.3em 0 0.7em;
}

body.single-post .thegem-te-post-content h2 {
    font-size: 30px;
    padding-top: 0.6em;
    border-top: 3px solid var(--cai-verde-vivo);
}

body.single-post .thegem-te-post-content h3 { font-size: 24px; }
body.single-post .thegem-te-post-content h4 { font-size: 21px; }

@media (min-width: 1080px) {
    body.single-post .thegem-te-post-content h2 { font-size: 34px; }
    body.single-post .thegem-te-post-content h3 { font-size: 27px; }
}

/* Links, imagens e legendas ------------------------------------------------- */

body.single-post .thegem-te-post-content a {
    color: var(--cai-vinho-escuro); /* 12,7:1 */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

body.single-post .thegem-te-post-content a:hover {
    color: var(--cai-vinho);
}

body.single-post .thegem-te-post-content figure,
body.single-post .thegem-te-post-content .wp-block-image,
body.single-post .thegem-te-post-content .wp-block-gallery {
    max-width: 100%;
    margin: 2.2em 0;
}

body.single-post .thegem-te-post-content img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

body.single-post .thegem-te-post-content figcaption {
    max-width: 72ch;
    margin-top: 0.7rem;
    font-family: var(--cai-interface);
    font-size: 15px;
    line-height: 1.5;
    color: var(--cai-musgo); /* 4,7:1 sobre o osso */
}

/* Citação ------------------------------------------------------------------- */

body.single-post .thegem-te-post-content blockquote {
    margin: 2.4em 0;
    padding: 1.5rem 1.7rem;
    /* background, e não background-color: o tema punha uma aspa em imagem de
       fundo, e o atalho limpa a imagem junto. */
    background: var(--cai-vinho);
    border-left: 5px solid var(--cai-verde-vivo);
    border-radius: 0 4px 4px 0;
    font-size: 1.06em;
    line-height: 1.5;
    font-weight: 500;
    color: var(--cai-osso); /* 8,3:1 sobre o vinho */
}

body.single-post .thegem-te-post-content blockquote p { color: var(--cai-osso); }
body.single-post .thegem-te-post-content blockquote p:last-of-type { margin-bottom: 0; }

body.single-post .thegem-te-post-content blockquote cite,
body.single-post .thegem-te-post-content blockquote footer {
    display: block;
    margin-top: 0.9rem;
    font-family: var(--cai-interface);
    font-size: 0.82em;
    font-style: normal;
    font-weight: 400;
    color: var(--cai-menta); /* 7,2:1 sobre o vinho */
}

body.single-post .thegem-te-post-content blockquote::before,
body.single-post .thegem-te-post-content blockquote::after {
    color: rgba(248, 245, 244, 0.16);
    background-image: none;
}

body.single-post .thegem-te-post-content ul,
body.single-post .thegem-te-post-content ol {
    padding-left: 1.4em;
    margin: 0 0 1.3em;
}

body.single-post .thegem-te-post-content li { margin-bottom: 0.5em; }

/* Coluna lateral ------------------------------------------------------------
   Gruda enquanto o texto rola: em matéria longa é o que mantém o resto do site
   ao alcance sem interromper a leitura. */

@media (min-width: 1000px) {
    body.single-post .e-con.e-child:last-child {
        position: sticky;
        top: calc(var(--cai-barra-altura) + 16px);
        align-self: flex-start;
    }
}

@media (max-width: 999px) {
    body.single-post .e-con.e-child { width: 100% !important; }
}

/* Peças do rodapé da matéria ------------------------------------------------ */

body.single-post .thegem-te-post-tags a {
    display: inline-block;
    margin: 0 0.4rem 0.4rem 0;
    padding: 0.35em 0.85em;
    border: 1px solid rgba(2, 35, 18, 0.25);
    border-radius: 20px;
    font-family: var(--cai-interface);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cai-verde-noite);
    text-decoration: none;
}

body.single-post .thegem-te-post-tags a:hover {
    background-color: var(--cai-vinho);
    border-color: var(--cai-vinho);
    color: var(--cai-osso); /* 8,3:1 */
}

/* A assinatura do comunicador tem peso: num veículo de etnomídia, a autoria é
   a credencial. */
body.single-post .thegem-te-post-author {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background-color: #ffffff;
    border-left: 4px solid var(--cai-verde-vivo);
    border-radius: 4px;
}

body.single-post .thegem-te-post-author a { color: var(--cai-vinho-escuro); }

body.single-post .thegem-te-post-navigation a {
    font-family: var(--cai-titulo);
    color: var(--cai-verde-noite);
}

body.single-post .thegem-te-post-navigation a:hover { color: var(--cai-vinho); }

body.single-post .thegem-social-sharing,
body.single-post .socials-sharing {
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(2, 35, 18, 0.14);
    border-bottom: 1px solid rgba(2, 35, 18, 0.14);
}

/* Lista lateral do Assobio */
body.single-post .title-text-body-tiny a {
    color: var(--cai-verde-noite);
    font-family: var(--cai-titulo);
}

body.single-post .title-text-body-tiny a:hover { color: var(--cai-vinho); }


/* ---------------------------------------------------------------------------
   Tema escuro da leitura
   O prefixo é "caipora-tema-": as classes .caipora-claro e .caipora-escuro já
   existiam no desenho original, aplicadas a blocos individuais. Quando o botão
   de tema começou a pôr .caipora-claro no <html>, aquelas regras passaram a
   valer no site inteiro — e uma delas, .caipora-claro .entry-content > *, com
   medida e margem automática, espremeu a capa numa coluna estreita no meio.
   Mesma diagramação, cores invertidas. Entra por escolha de quem lê, no botão
   da barra, ou pela preferência do sistema quando ninguém escolheu ainda.
   Os pares abaixo foram medidos sobre o verde-noite.
   --------------------------------------------------------------------------- */

html.caipora-tema-escuro body.single-post #main,
html.caipora-tema-escuro body.single-post #main-content,
html.caipora-tema-escuro body.single-post .block-content {
    background-color: var(--cai-verde-noite);
}

html.caipora-tema-escuro body.single-post .thegem-te-post-content {
    color: var(--cai-osso); /* 15,5:1 */
}

html.caipora-tema-escuro body.single-post .thegem-te-post-content h2,
html.caipora-tema-escuro body.single-post .thegem-te-post-content h3,
html.caipora-tema-escuro body.single-post .thegem-te-post-content h4 {
    color: var(--cai-menta); /* 13,3:1 */
}

html.caipora-tema-escuro body.single-post .thegem-te-post-content a {
    color: var(--cai-menta);
}

html.caipora-tema-escuro body.single-post .thegem-te-post-content a:hover {
    color: var(--cai-verde-vivo);
}

html.caipora-tema-escuro body.single-post .thegem-te-post-content figcaption {
    color: var(--cai-cinza); /* 7,9:1 */
}

html.caipora-tema-escuro body.single-post .thegem-te-post-tags a,
html.caipora-tema-escuro body.single-post .thegem-te-post-navigation a,
html.caipora-tema-escuro body.single-post .title-text-body-tiny a {
    color: var(--cai-osso);
}

html.caipora-tema-escuro body.single-post .thegem-te-post-tags a {
    border-color: rgba(191, 241, 204, 0.28);
}

html.caipora-tema-escuro body.single-post .thegem-te-post-navigation a:hover,
html.caipora-tema-escuro body.single-post .title-text-body-tiny a:hover {
    color: var(--cai-verde-vivo);
}

html.caipora-tema-escuro body.single-post .thegem-te-post-author {
    background-color: var(--cai-verde-cartao); /* osso em cima: 8,9:1 */
}

html.caipora-tema-escuro body.single-post .thegem-te-post-author,
html.caipora-tema-escuro body.single-post .thegem-te-post-author p {
    color: var(--cai-osso);
}

html.caipora-tema-escuro body.single-post .thegem-te-post-author a {
    color: var(--cai-menta);
}

html.caipora-tema-escuro body.single-post .thegem-social-sharing,
html.caipora-tema-escuro body.single-post .socials-sharing {
    border-top-color: rgba(191, 241, 204, 0.18);
    border-bottom-color: rgba(191, 241, 204, 0.18);
}

/* A citação é vinho nos dois temas: foi escolha da redação, e o texto osso em
   cima dela dá 8,3:1 tanto sobre o claro quanto sobre o escuro. */

/* ---------------------------------------------------------------------------
   Zilla Slab em todo o site

   O tema carrega Inter Tight pelo painel e gera CSS com seletor por elemento,
   que vence qualquer regra nossa — por isso aqui vai com !important.

   A cadeia de :not() existe para não atropelar as fontes de ícone: Font
   Awesome, os ícones do TheGem e os do Elementor desenham glifos a partir da
   família. Forçar Zilla Slab neles transformaria cada ícone numa letra solta.
   --------------------------------------------------------------------------- */

body,
body :not(i):not(svg):not(path):not(use):not([class*="eicon"]):not([class*="fa-"]):not([class*="gem-elegant"]):not([class*="gem-icon"]):not([class*="thegem-icon"]):not([class*="icon-"]) {
    font-family: 'Zilla Slab', Georgia, 'Times New Roman', serif !important;
}

/* Números em coluna continuam alinhando. */
.caipora-rio__hora,
.caipora-nota__data,
.caipora-destaque__meta {
    font-variant-numeric: tabular-nums;
}

/* O corpo pequeno em caixa alta ganha um respiro entre letras: em serifada
   estreita, maiúscula colada fica difícil de ler. */
.caipora-etiqueta,
.caipora-nota__etiqueta,
.caipora-destaque__etiqueta,
.caipora-botao {
    letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------------------
   Rodapé
   O rodapé do tema é a área de widgets (#colophon) mais a barra de assinatura
   (#footer-nav). O conteúdo dos widgets foi refeito com a Caipora; aqui é só a
   cor e o ritmo, para ele parar de parecer o rodapé da demonstração.
   --------------------------------------------------------------------------- */

#colophon.site-footer,
#footer-nav.site-footer {
    /* Fundo verde-noite com texto osso: 15,5:1. Este fundo já virou osso uma
       vez por engano, numa troca em massa que casou "color: var(--cai-verde-
       noite)" dentro de "background-color: var(--cai-verde-noite)" — e o
       rodapé ficou claro com texto claro, ilegível. */
    background-color: var(--cai-verde-noite);
    color: var(--cai-osso);
}

#colophon.site-footer {
    padding: clamp(2.6rem, 5vw, 4.2rem) 0 clamp(1.6rem, 3vw, 2.6rem);
}

#colophon .widget-title {
    font-family: var(--cai-titulo);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cai-menta); /* 13,5:1 sobre o verde-noite */
    margin-bottom: 1.1rem;
}

/* O fio de grafismo abaixo do título da coluna: a mesma ponta de flecha que
   marca as seções da capa, aqui em versão mínima. */
#colophon .widget-title::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-top: 0.5rem;
    background-color: var(--cai-vinho);
}

#colophon .textwidget,
#colophon .textwidget p {
    font-family: var(--cai-interface);
    font-size: 17px;
    line-height: 1.7;
    color: var(--cai-osso);
}

#colophon .textwidget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#colophon .textwidget li {
    margin-bottom: 0.62rem;
}

#colophon .textwidget a {
    color: var(--cai-osso);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

#colophon .textwidget a:hover,
#colophon .textwidget a:focus {
    color: var(--cai-menta);
    border-bottom-color: var(--cai-menta);
}

.caipora-rodape__logo img {
    width: 210px;
    max-width: 100%;
    height: auto;
    margin-bottom: 1.2rem;
}

/* Cidade e nota de transparência falam mais baixo que o corpo: são informação
   de contexto, não de leitura. */
.caipora-rodape__lugar,
.caipora-rodape__nota {
    font-size: 15px;
    color: var(--cai-cinza, #9abaa6); /* 8,0:1 sobre o verde-noite */
}

.caipora-rodape__nota strong {
    color: var(--cai-menta);
}

#colophon .caipora-rodape__apoie {
    display: inline-block;
    margin: 0.3rem 0 1rem;
    padding: 0.62rem 1.5rem;
    background-color: var(--cai-vinho); /* osso sobre vinho: 8,4:1 */
    color: var(--cai-osso);
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 0;
    border-radius: 2px;
}

#colophon .caipora-rodape__apoie:hover {
    background-color: var(--cai-verde-vivo);
    color: var(--cai-verde-noite); /* 6,1:1 */
    border-bottom-color: transparent;
}

/* Barra de assinatura */
#footer-nav.site-footer {
    padding: 1.2rem 0;
    border-top: 1px solid rgba(191, 241, 204, 0.18);
}

#footer-nav .footer-site-info,
#footer-nav .footer-site-info a,
#footer-nav #footer-menu a {
    font-family: var(--cai-interface);
    font-size: 15px;
    color: var(--cai-cinza, #9abaa6);
}

#footer-nav #footer-menu a:hover,
#footer-nav .footer-site-info a:hover {
    color: var(--cai-menta);
}

#footer-nav .socials-item-icon {
    color: var(--cai-osso);
}

#footer-nav .socials-item:hover .socials-item-icon {
    color: var(--cai-menta);
}

/* ---------------------------------------------------------------------------
   A nota do Assobio
   A diagramação é a do tema, igual à da reportagem. A única diferença é a
   medida do texto: a nota tem duzentas e quarenta palavras, e nos 1140px do
   contêiner ela vira quatro linhas atravessando a tela. Só o corpo do texto se
   recolhe — cabeçalho, foto e rodapé seguem como o tema desenhou.
   --------------------------------------------------------------------------- */

/* O nome tem prefixo "pagina-" de propósito: .caipora-nota já é o cartão do
   Assobio na capa, e esse cartão tem overflow:hidden. Como classe do <body>, a
   mesma regra travava a rolagem da página inteira da nota — foi o que a
   redação viu, no computador e no celular. */
body.caipora-pagina-nota .elementor-widget-thegem-template-post-content .thegem-te-post-content {
    max-width: 760px;
}

/* ---------------------------------------------------------------------------
   Botão de claro e escuro
   Ao lado do Apoie e fora do bloco verde dele: sem preenchimento próprio, só o
   ícone sobre o fundo da barra. Mostra o destino da troca, não o estado atual —
   quem está no claro vê a lua, que é para onde o clique leva.
   --------------------------------------------------------------------------- */

.caipora-barra__tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cai-osso);
    cursor: pointer;
}

.caipora-barra__tema:hover {
    color: var(--cai-menta);
}

.caipora-barra__tema svg {
    width: 21px;
    height: 21px;
}

/* No claro aparece a lua; no escuro, o sol. */
.caipora-barra__tema .caipora-barra__sol { display: none; }
.caipora-barra__tema .caipora-barra__lua { display: block; }

html.caipora-tema-escuro .caipora-barra__tema .caipora-barra__sol { display: block; }
html.caipora-tema-escuro .caipora-barra__tema .caipora-barra__lua { display: none; }

@media (max-width: 420px) {
    .caipora-barra__tema { width: 42px; }
    .caipora-barra__tema svg { width: 19px; height: 19px; }
}

/* ---------------------------------------------------------------------------
   Claro e escuro no site inteiro

   Antes o botão trocava só a página de leitura, e o resto do site ficava no
   escuro do tema. Isso é o que produzia o descompasso: uma tela clara e a
   seguinte escura, com texto herdado da errada.

   O que muda aqui é o fundo da página e a cor do texto que o tema controla. O
   que a redação pintou dentro do Elementor — faixa vinho, grafismo, cartão com
   fundo próprio — continua com a cor dela nos dois temas, de propósito: são
   escolhas de diagramação, não de tema.
   --------------------------------------------------------------------------- */

/* Claro ---------------------------------------------------------------------- */

html.caipora-tema-claro body,
html.caipora-tema-claro #page,
html.caipora-tema-claro #main,
html.caipora-tema-claro #main-content,
html.caipora-tema-claro .block-content {
    background-color: var(--cai-osso);
    color: var(--cai-verde-noite); /* 15,5:1 */
}

html.caipora-tema-claro #main-content a:not(.gem-button):not(.elementor-button) {
    color: var(--cai-vinho-escuro); /* 12,7:1 */
}

html.caipora-tema-claro #main-content a:not(.gem-button):not(.elementor-button):hover {
    color: var(--cai-vinho);
}

/* Escuro --------------------------------------------------------------------- */

html.caipora-tema-escuro body,
html.caipora-tema-escuro #page,
html.caipora-tema-escuro #main,
html.caipora-tema-escuro #main-content,
html.caipora-tema-escuro .block-content {
    background-color: var(--cai-verde-noite);
    color: var(--cai-osso); /* 15,5:1 */
}

html.caipora-tema-escuro #main-content a:not(.gem-button):not(.elementor-button) {
    color: var(--cai-menta); /* 13,3:1 */
}

html.caipora-tema-escuro #main-content a:not(.gem-button):not(.elementor-button):hover {
    color: var(--cai-verde-vivo);
}

/* O rodapé acompanha ---------------------------------------------------------
   Ele é escuro por desenho, mas no tema claro fica estranho um bloco preto no
   pé de uma página clara: aqui ele vira a superfície elevada da paleta, que é
   escura o bastante para fechar a página sem virar um buraco. */

html.caipora-tema-claro #colophon.site-footer,
html.caipora-tema-claro #footer-nav.site-footer {
    background-color: var(--cai-verde-cartao); /* osso em cima: 8,9:1 */
}

/* ---------------------------------------------------------------------------
   Hero das editorias
   O modelo que a redação apontou mostra o nome da editoria e, abaixo, a frase
   dela — sem migalhas. O ajuste title_breadcrumbs do tema não desliga a
   marcação, só a posiciona, então ela sai daqui. A trilha continua no dado
   estruturado das reportagens, que é onde o Google a lê.
   --------------------------------------------------------------------------- */

.page-title-block .breadcrumbs-container {
    display: none;
}

/* O nome da editoria sobre a foto precisa de peso e de véu por baixo: sem
   isso ele depende do que a imagem tiver naquele ponto. */
.page-title-block.has-background-image .page-title-title h1,
.page-title-block.has-background-image h1 {
    color: var(--cai-osso);
    text-shadow: 0 2px 18px rgba(2, 35, 18, 0.55);
}

.page-title-block.has-background-image .page-title-excerpt {
    color: var(--cai-menta);
    font-family: var(--cai-titulo);
    font-size: 19px;
    text-shadow: 0 2px 14px rgba(2, 35, 18, 0.5);
}

/* ---------------------------------------------------------------------------
   Páginas institucionais
   Carta de princípios, Manifesto, Formação, Participe, Denúncias, Fóruns,
   Revista Física. São textos longos, com muitos subtítulos e listas, e estavam
   saindo na medida do contêiner, sem ritmo: a mesma parede de texto que a
   reportagem tinha antes.

   O tratamento é o da página de leitura, com uma diferença: aqui a lista é
   estrutura, não enfeite — a Carta tem onze princípios numerados e o Participe
   tem quatorze itens de como entrar. Por isso a lista ganha respiro e marcador
   colorido em vez de herdar o padrão do navegador.

   A capa é uma página também, e fica de fora pelo :not().
   --------------------------------------------------------------------------- */

body.page:not(.caipora-home) .entry-content {
    font-family: var(--cai-titulo);
    font-size: 20px;
    line-height: 1.62;
    color: var(--cai-verde-noite); /* 15,5:1 sobre o osso */
}

@media (min-width: 1080px) {
    body.page:not(.caipora-home) .entry-content {
        font-size: 21px;
        line-height: 1.65;
    }
}

body.page:not(.caipora-home) .entry-content > * {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
}

body.page:not(.caipora-home) .entry-content p {
    margin: 0 auto 1.3em;
}

/* Abertura: a primeira linha da página segura a leitura. */
body.page:not(.caipora-home) .entry-content > p:first-of-type {
    font-size: 1.12em;
    line-height: 1.55;
}

/* Subtítulos ---------------------------------------------------------------- */

body.page:not(.caipora-home) .entry-content h2,
body.page:not(.caipora-home) .entry-content h3,
body.page:not(.caipora-home) .entry-content h4 {
    font-family: var(--cai-titulo);
    font-weight: 700;
    line-height: 1.18;
    color: var(--cai-vinho); /* 8,3:1 sobre o osso */
    margin: 2.2em auto 0.7em;
}

/* O fio verde marca a seção. Cada página usa um nível diferente como topo — a
   Carta abre em h2, Formação e Participe abrem em h3 — então os dois levam o
   fio, e o h4 fica como subdivisão. */
body.page:not(.caipora-home) .entry-content h2,
body.page:not(.caipora-home) .entry-content h3 {
    padding-top: 0.55em;
    border-top: 3px solid var(--cai-verde-vivo);
}

body.page:not(.caipora-home) .entry-content h2 { font-size: 28px; }
body.page:not(.caipora-home) .entry-content h3 { font-size: 24px; }
body.page:not(.caipora-home) .entry-content h4 { font-size: 20px; }

@media (min-width: 1080px) {
    body.page:not(.caipora-home) .entry-content h2 { font-size: 32px; }
    body.page:not(.caipora-home) .entry-content h3 { font-size: 25px; }
}

/* Listas — aqui elas são a estrutura do documento ---------------------------- */

body.page:not(.caipora-home) .entry-content ul,
body.page:not(.caipora-home) .entry-content ol {
    padding-left: 1.5em;
    margin: 0 auto 1.4em;
}

body.page:not(.caipora-home) .entry-content li {
    margin-bottom: 0.62em;
    padding-left: 0.2em;
}

body.page:not(.caipora-home) .entry-content li::marker {
    color: var(--cai-verde-vivo);
    font-weight: 700;
}

/* Parágrafo que é só um negrito ("Você pode:", "Requisitos:") não é ênfase de
   voz: é rótulo da lista que vem logo abaixo. Tratado como rótulo, ele para de
   competir com o subtítulo e passa a costurar o texto com a lista. */
body.page:not(.caipora-home) .entry-content p:has(> strong:only-child) {
    margin-bottom: 0.5em;
    font-family: var(--cai-interface);
    font-size: 0.88em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.page:not(.caipora-home) .entry-content p:has(> strong:only-child) strong {
    color: var(--cai-vinho);
    font-weight: 700;
}

html.caipora-tema-escuro body.page:not(.caipora-home) .entry-content p:has(> strong:only-child) strong {
    color: var(--cai-verde-vivo);
}

/* Fio de separação: o tema entrega uma linha cinza; aqui ela vira a marca. */
body.page:not(.caipora-home) .entry-content hr {
    max-width: 72ch;
    margin: 2.6em auto;
    border: 0;
    height: 3px;
    background-color: var(--cai-vinho);
    opacity: 0.35;
}

/* Links, imagens e citação --------------------------------------------------- */

body.page:not(.caipora-home) .entry-content a {
    color: var(--cai-vinho-escuro); /* 12,7:1 */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

body.page:not(.caipora-home) .entry-content a:hover { color: var(--cai-vinho); }

body.page:not(.caipora-home) .entry-content img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

body.page:not(.caipora-home) .entry-content figcaption {
    font-family: var(--cai-interface);
    font-size: 15px;
    line-height: 1.5;
    color: var(--cai-musgo);
    margin-top: 0.7rem;
}

body.page:not(.caipora-home) .entry-content blockquote {
    margin: 2.2em auto;
    padding: 1.4rem 1.6rem;
    background: var(--cai-vinho);
    border-left: 5px solid var(--cai-verde-vivo);
    border-radius: 0 4px 4px 0;
    color: var(--cai-osso); /* 8,3:1 sobre o vinho */
    font-weight: 500;
}

body.page:not(.caipora-home) .entry-content blockquote p { color: var(--cai-osso); }

/* Destaque no meio do texto: o negrito dessas páginas costuma marcar termo, e
   não ênfase de voz. */
body.page:not(.caipora-home) .entry-content strong {
    color: var(--cai-verde-noite);
    font-weight: 700;
}

/* No escuro ------------------------------------------------------------------ */

html.caipora-tema-escuro body.page:not(.caipora-home) .entry-content {
    color: var(--cai-osso); /* 15,5:1 */
}

html.caipora-tema-escuro body.page:not(.caipora-home) .entry-content h2,
html.caipora-tema-escuro body.page:not(.caipora-home) .entry-content h3,
html.caipora-tema-escuro body.page:not(.caipora-home) .entry-content h4,
html.caipora-tema-escuro body.page:not(.caipora-home) .entry-content strong {
    color: var(--cai-menta); /* 13,3:1 */
}

html.caipora-tema-escuro body.page:not(.caipora-home) .entry-content a {
    color: var(--cai-menta);
}

html.caipora-tema-escuro body.page:not(.caipora-home) .entry-content a:hover {
    color: var(--cai-verde-vivo);
}

html.caipora-tema-escuro body.page:not(.caipora-home) .entry-content figcaption {
    color: var(--cai-cinza); /* 7,9:1 */
}