/* PACCO Eventos — todo o CSS escopado sob .pc-eventos.
 *
 * ============================================================
 * AUDITORIA REAL DO BLOG (não inventado) — feita lendo o CSS
 * efetivamente servido em blog.paccoby.com.br:
 *   - wp-content/uploads/elementor/css/post-1093.css  (kit Inkcraft)
 *   - wp-content/uploads/elementor/css/base-desktop.css (Elementor Atomic)
 *   - wp-content/themes/hello-elementor/assets/css/theme.css
 *
 * Paleta real confirmada (--e-global-color-* do kit 1093):
 *   primary   #000000  (preto)
 *   secondary #FFFFFF  (branco)
 *   text      #111111  (texto padrão do body)
 *   accent    #000000
 *   (cinza claro auxiliar) #EEEEEE
 * Fonte real: 'Lato'. Títulos: uppercase, weight 700/600.
 * Botão real do kit (.elementor-kit-1093 button/.elementor-button):
 *   normal → background:#000000; color:#FFFFFF; border-radius:50px
 *   hover  → background:#FFFFFF; border:1px solid #000000 (nesta parte
 *            o hover do próprio kit também erra o contraste do texto —
 *            NÃO copiado aqui; usamos texto preto no hover, que é o
 *            padrão correto e é também o que foi pedido).
 * Card real do template Loop Item (post 1669): border-radius 20px,
 * padding 20px (10px mobile), badge de categoria com border-radius 50px.
 * Nenhuma cor vermelha/rosa existe em nenhum desses arquivos — não há
 * vermelho estrutural no design system do blog.
 *
 * ============================================================
 * CAUSA RAIZ DOS BUGS REPORTADOS (confirmada, não suposição):
 *
 * O body de TODA página do blog carrega a classe `elementor-kit-1093`
 * (confirmado no HTML servido). Esse kit define, fora de qualquer escopo
 * de widget Elementor:
 *
 *   .elementor-kit-1093 h1,
 *   .elementor-kit-1093 h2,
 *   .elementor-kit-1093 h3 { color: #FFFFFF; ... }
 *
 * Especificidade dessas regras: 0-1-1 (uma classe + um elemento).
 * Meus seletores anteriores (.pc-eventos-card__titulo etc.) eram só
 * 0-1-0 (uma classe) — MENOR especificidade, então o branco do kit
 * vencia sempre, independente da ordem de carregamento. Isso é a causa
 * comprovada de "título branco sobre fundo claro": todo <h1>/<h2>/<h3>
 * dentro de qualquer página deste site nasce branco por padrão.
 *
 * No design real do blog isso funciona porque o card deles usa a FOTO
 * do post como fundo com overlay escuro por trás do título (branco
 * sobre foto escurecida). O meu card usa corpo claro (creme) abaixo da
 * imagem — branco ali seria ilegível. Portanto a solução correta não é
 * copiar branco-sobre-branco, e sim GARANTIR que meus títulos vençam a
 * regra do kit com especificidade própria suficiente.
 *
 * REGRAS EXTERNAS NEUTRALIZADAS NESTE ARQUIVO (com seletor+motivo):
 *   1. `.elementor-kit-1093 h1/h2/h3 { color:#FFFFFF }`
 *      → neutralizado por `.pc-eventos h1, .pc-eventos h2, .pc-eventos h3`
 *        (0-1-1, mesma especificidade do agressor, mas nossa regra vem
 *        DEPOIS no documento — wp_enqueue_style roda após o tema/kit —
 *        então empata e ganha por ordem; reforçado com !important só
 *        aqui, documentado, para não depender de ordem de load em caso
 *        de mudança futura de prioridade de enqueue).
 *   2. `:visited` do navegador (roxo/vermelho nativo) nunca era
 *      neutralizado — corrigido explicitamente abaixo.
 *   3. `:invalid`/`:required` do navegador desenha contorno vermelho
 *      nativo em campos obrigatórios vazios — neutralizado explicitamente.
 *   4. `.elementor-kit-1093 a { color:#000000 }` e `a:hover { color:
 *      #000000 }` — não conflita em cor (ambos pretos), mas o link vinha
 *      sem `text-decoration` explícito nosso em alguns estados; corrigido
 *      com estados completos abaixo.
 *   5. `.elementor-kit-1093 button/.elementor-button` (fundo preto/texto
 *      branco, radius 50px) — este é o padrão REAL que adotamos para
 *      `.pc-eventos__button`, então aqui não há conflito a neutralizar,
 *      apenas alinhamento intencional ao padrão existente.
 * ============================================================
 */

.pc-eventos {
    /* Paleta 1:1 com o kit real do blog — nada inventado */
    --pc-preto: #000000;
    --pc-branco: #ffffff;
    --pc-texto: #111111;
    --pc-texto-secundario: #4a4a4a;
    --pc-fundo-card: #f7f5f1;
    --pc-fundo-media: #ececec;
    --pc-linha: #e0e0e0;

    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    color: var(--pc-texto);
    font-family: 'Lato', sans-serif;
    box-sizing: border-box;
}

.pc-eventos *,
.pc-eventos *::before,
.pc-eventos *::after {
    box-sizing: inherit;
}

/* --- Reset estrutural contra o kit Elementor (.elementor-kit-1093) ---
   Todo heading dentro de .pc-eventos precisa vencer explicitamente a
   regra `.elementor-kit-1093 h1/h2/h3 { color:#FFFFFF }`. Especificidade
   igual (0-1-1); reforçado com !important porque a página é composta
   via shortcode dentro do fluxo normal do tema e não podemos garantir
   ordem de enqueue estável em todo cenário (ex.: um plugin de cache/
   minificação reordenando no futuro). Município do !important: só
   aqui, só para neutralizar essa regra específica do kit. */
.pc-eventos h1,
.pc-eventos h2,
.pc-eventos h3,
.pc-eventos h4 {
    color: var(--pc-texto) !important;
    font-family: 'Lato', sans-serif;
}

/* --- Todos os estados de link explícitos, para nunca herdar azul/roxo/
   vermelho nativo do navegador nem depender de `inherit`.
   !important necessário: o tema Hello Elementor tem, sem nenhum escopo,
   `a{text-decoration:underline}` (theme.css) e `a{color:#c36}` /
   `a:hover{color:#336}` (reset.css) — seletores de tag pura que podem
   empatar ou vencer nossos seletores dependendo de onde exatamente o
   navegador/cache carrega cada arquivo. */
.pc-eventos a:link,
.pc-eventos a:visited {
    color: inherit !important;
    text-decoration: none !important;
}

.pc-eventos a:hover,
.pc-eventos a:focus,
.pc-eventos a:active {
    color: inherit !important;
    text-decoration: none !important;
}

.pc-eventos a:focus-visible {
    outline: 2px solid var(--pc-preto);
    outline-offset: 2px;
}

.pc-eventos-hero {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3rem;
}

.pc-eventos-hero__titulo {
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 1rem;
}

.pc-eventos-hero__intro {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--pc-texto-secundario);
    margin: 0;
}

.pc-eventos-secao {
    margin-bottom: 3.5rem;
}

.pc-eventos-secao__titulo {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    margin: 0 0 1.5rem;
    text-align: center;
}

/* Flexbox em vez de grid: quando o número de cards não é múltiplo de 3
   (ex.: 8 eventos futuros = 2 linhas de 3 + 1 linha de 2), o grid deixa
   uma célula vazia na última linha; com flex-wrap + justify-content, a
   última linha incompleta fica centralizada em vez de deixar buraco. */
.pc-eventos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.pc-eventos-grid > * {
    flex: 0 1 calc(33.333% - 1rem);
    min-width: 0;
}

@media (max-width: 1024px) {
    .pc-eventos-grid > * {
        flex-basis: calc(50% - 0.75rem);
    }
}

@media (max-width: 640px) {
    .pc-eventos-grid > * {
        flex-basis: 100%;
    }
}

/* --- Card --- */
.pc-eventos-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: var(--pc-fundo-card);
    border: 1px solid var(--pc-linha);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pc-eventos-card:hover,
.pc-eventos-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* flex:1 faz o link (imagem+corpo) crescer até preencher o card, assim
   o botão de ação (.pc-eventos-card__acao, fora do <a>) sempre fica na
   mesma altura entre os cards de uma linha, mesmo quando o título tem
   tamanhos diferentes (1 ou 2 linhas). */
.pc-eventos-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: var(--pc-texto);
}

.pc-eventos-card--destaque {
    flex-basis: calc(66.666% - 1rem);
}

@media (max-width: 640px) {
    .pc-eventos-card--destaque {
        flex-basis: 100%;
    }
}

.pc-eventos-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--pc-fundo-media);
}

.pc-eventos-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.pc-eventos-card:hover .pc-eventos-card__img {
    transform: scale(1.04);
}

.pc-eventos-card__img--placeholder {
    object-fit: cover;
    transition: none;
}

.pc-eventos-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--pc-branco);
    color: var(--pc-preto) !important;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
}

.pc-eventos-card__badge--realizado {
    background: var(--pc-preto);
    color: var(--pc-branco) !important;
}

.pc-eventos-card__body {
    padding: 1rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

/* Título do card: h3 explicitamente sobrescrito acima (regra global do
   bloco), aqui só o restante da tipografia/layout específico do card. */
.pc-eventos-card__titulo {
    font-size: 1.05rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Hover do card: só elevação + zoom sutil da imagem (ver .pc-eventos-card
   e .pc-eventos-card__img acima) — sem sublinhar o título, conforme
   pedido; o clique inteiro do card já é a affordance de navegação. */

/* --- Placeholder de imagem: fundo escuro + logo PACCO real (branca) +
   rótulo "Eventos". Substitui o ícone abstrato anterior por um elemento
   de marca reconhecível, sem "lavar" o card. --- */
.pc-eventos-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: linear-gradient(160deg, #262019 0%, #141414 100%);
}

.pc-eventos-placeholder__logo {
    width: 42%;
    max-width: 140px;
    height: auto;
    display: block;
}

.pc-eventos-placeholder__label {
    font-family: 'Lato', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

/* --- Bloco organizado de data/local/horário, com ícone + texto em
   linhas separadas (substitui a antiga linha única "data • local"). --- */
.pc-eventos-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
}

.pc-eventos-card__info-linha {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--pc-texto-secundario);
    margin: 0;
}

.pc-eventos-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--pc-texto-secundario);
}

.pc-eventos-card__acao {
    padding: 0 1.25rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
 * Botões — reproduz o padrão REAL confirmado em
 * `.elementor-kit-1093 button/.elementor-button`:
 * normal = fundo preto + texto branco + radius 50px (pill);
 * hover  = fundo branco + texto preto + borda preta 1px.
 * (Diferente do kit real, aqui garantimos texto preto no hover — o
 * kit original também troca para branco no hover, o que reduz o
 * contraste contra o próprio fundo branco; não replicamos esse detalhe.)
 * ============================================================ */
/* !important em toda propriedade visual: o reset.css do tema Hello
   Elementor define, SEM nenhum escopo (seletor de tag/atributo puro,
   `button`/`[type=button]`/`[type=submit]`), uma cor de marca antiga
   (#c36, magenta) para todo botão do site — inclusive borda, fundo e
   estado hover/focus. Como é seletor de tag (especificidade 0-1-0 para
   os `[type=...]`, empatando com uma classe simples), a única forma
   confiável de sempre vencer, independente de ordem de carregamento
   futura (cache, minificador, CDN), é !important em cada propriedade
   que esse reset também define. */
.pc-eventos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 50px !important;
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    border: 1px solid var(--pc-preto) !important;
    background-color: var(--pc-preto) !important;
    color: var(--pc-branco) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.pc-eventos-btn:hover,
.pc-eventos-btn:focus-visible,
.pc-eventos-btn:focus {
    background-color: var(--pc-branco) !important;
    border-color: var(--pc-preto) !important;
    color: var(--pc-preto) !important;
    text-decoration: none !important;
}

.pc-eventos-btn:focus-visible {
    outline: 2px solid var(--pc-preto);
    outline-offset: 2px;
}

.pc-eventos-btn--primario {
    padding: 0.85rem 2rem;
}

.pc-eventos-btn--card {
    padding: 0.55rem 1.2rem;
    font-size: 0.78rem;
}

.pc-eventos-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.pc-eventos-vazio {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--pc-fundo-card);
    border: 1px solid var(--pc-linha);
    border-radius: 20px;
}

.pc-eventos-vazio__titulo {
    font-size: 1.05rem;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.pc-eventos-vazio p {
    color: var(--pc-texto-secundario);
    margin: 0 0 1.5rem;
}

.pc-eventos-carregar-mais {
    text-align: center;
    margin-top: 2rem;
}

/* --- CTA final: fundo preto (inverte o botão para branco-sobre-preto) --- */
.pc-eventos-cta-final {
    text-align: center;
    background: var(--pc-preto);
    padding: 3rem 1.5rem;
    border-radius: 20px;
}

.pc-eventos-cta-final h2 {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--pc-branco) !important;
}

.pc-eventos-cta-final p {
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.pc-eventos-cta-final .pc-eventos-btn {
    margin-top: 1.5rem;
    background-color: var(--pc-branco) !important;
    border-color: var(--pc-branco) !important;
    color: var(--pc-preto) !important;
}

.pc-eventos-cta-final .pc-eventos-btn:hover,
.pc-eventos-cta-final .pc-eventos-btn:focus-visible,
.pc-eventos-cta-final .pc-eventos-btn:focus {
    background-color: transparent !important;
    border-color: var(--pc-branco) !important;
    color: var(--pc-branco) !important;
}

/* --- Modal --- */
.pc-eventos-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.pc-eventos-modal[hidden] {
    display: none;
}

.pc-eventos-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.pc-eventos-modal__conteudo {
    position: relative;
    background: var(--pc-branco);
    color: var(--pc-texto);
    border-radius: 20px;
    padding: 2rem;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.pc-eventos-modal__conteudo h3 {
    margin: 0 0 0.5rem;
}

.pc-eventos-modal__evento {
    color: var(--pc-texto-secundario);
    margin: 0 0 1.25rem;
}

/* Mesmo motivo dos outros botões: o reset.css do tema define borda/fundo
   em qualquer <button> sem escopo — aqui precisa de !important em cada
   propriedade também, senão o "x" some (vira quase invisível com fundo
   #c36 sólido) no estado normal ou no hover. */
.pc-eventos-modal__fechar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    border: none !important;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--pc-texto) !important;
}

.pc-eventos-modal__fechar:hover,
.pc-eventos-modal__fechar:focus,
.pc-eventos-modal__fechar:focus-visible {
    background-color: transparent !important;
    border: none !important;
    color: var(--pc-texto-secundario) !important;
}

/* ============================================================
 * Formulário de lead. Navegadores desenham outline/borda vermelha
 * nativa em inputs :invalid / :required vazios (confirmado — nenhum
 * CSS do blog define isso, é comportamento padrão do user-agent).
 * Neutralizado explicitamente abaixo em vez de deixar o vermelho
 * nativo aparecer.
 * ============================================================ */
.pc-eventos-form__honeypot {
    position: absolute;
    left: -9999px;
}

.pc-eventos-form__campo {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pc-eventos-form__campo label {
    font-size: 0.85rem;
    color: var(--pc-texto);
}

.pc-eventos-form__campo input[type="text"],
.pc-eventos-form__campo input[type="email"],
.pc-eventos-form__campo input[type="tel"] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--pc-linha);
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Lato', sans-serif;
    color: var(--pc-texto);
    background: var(--pc-branco);
    outline: none;
}

/* Neutraliza TODA borda/contorno/sombra vermelha nativa de validação do
   navegador (:invalid, :required, e o pseudo específico do Firefox
   :-moz-ui-invalid, que usa box-shadow vermelho próprio e não é coberto
   só por :invalid). Nenhuma dessas cores vem do blog — é comportamento
   padrão do user-agent em campo obrigatório vazio/inválido. */
.pc-eventos-form__campo input:invalid,
.pc-eventos-form__campo input:required,
.pc-eventos-form__campo input:-moz-ui-invalid,
.pc-eventos-form__campo input:out-of-range,
.pc-eventos-form__campo input:user-invalid {
    box-shadow: none !important;
    outline: none !important;
    border-color: var(--pc-linha);
}

.pc-eventos-form__campo input:focus,
.pc-eventos-form__campo input:focus-visible {
    border-color: var(--pc-preto);
    outline: 2px solid var(--pc-preto);
    outline-offset: 1px;
}

.pc-eventos-form__campo--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--pc-texto-secundario);
}

/* O checkbox de consentimento é required: sem isto, o navegador desenha
   seu próprio contorno vermelho nativo de validação (mesmo motivo dos
   inputs de texto acima). */
.pc-eventos-form__campo--checkbox input[type="checkbox"] {
    accent-color: var(--pc-preto);
    outline: none !important;
    box-shadow: none !important;
}

.pc-eventos-form__campo--checkbox input[type="checkbox"]:invalid,
.pc-eventos-form__campo--checkbox input[type="checkbox"]:-moz-ui-invalid,
.pc-eventos-form__campo--checkbox input[type="checkbox"]:user-invalid {
    outline: none !important;
    box-shadow: none !important;
}

.pc-eventos-form__campo--checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--pc-preto) !important;
    outline-offset: 2px;
}

.pc-eventos-form__campo--checkbox a:link,
.pc-eventos-form__campo--checkbox a:visited {
    color: var(--pc-texto);
    text-decoration: underline;
}

.pc-eventos-form__campo--checkbox a:hover,
.pc-eventos-form__campo--checkbox a:focus-visible {
    color: var(--pc-texto-secundario);
}

/* Botão de envio do formulário sempre centralizado (modal e página de
   detalhe usam o mesmo form-lead-inline.php). */
.pc-eventos-form-lead {
    display: flex;
    flex-direction: column;
}

.pc-eventos-form-lead > button[type="submit"] {
    align-self: center;
}

/* Mensagens de estado do formulário: cores neutras da identidade
   (preto para erro, cinza-escuro para sucesso) — sem vermelho/verde
   saturado, já que essas cores não existem no design system do blog. */
.pc-eventos-form__erro {
    color: var(--pc-preto);
    font-weight: 700;
    font-size: 0.85rem;
    border-left: 3px solid var(--pc-preto);
    padding-left: 0.6rem;
}

/* Estado de sucesso: ocupa o lugar do form inteiro (campos ficam
   hidden via JS), com ícone de confirmação — evita a mensagem de
   sucesso passar despercebida como uma linha de texto qualquer. */
.pc-eventos-form__sucesso {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.5rem 1rem;
}

.pc-eventos-form__sucesso-icone {
    color: var(--pc-preto);
}

.pc-eventos-form__sucesso-titulo {
    color: var(--pc-texto);
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
}

.pc-eventos-form__sucesso-texto {
    color: var(--pc-texto-secundario);
    font-size: 0.85rem;
    margin: 0;
}

/* --- Página de detalhe do evento ---
   Coluna única (imagem em cima, conteúdo embaixo), largura de leitura
   igual à do blog real (--wp--style--global--content-size: 800px),
   sem grid de duas colunas. */
/* A página de detalhe não tem hero — o padding-top generoso de .pc-eventos
   (2rem) fica exagerado aqui em cima do link de voltar; reduzimos só
   neste contexto. */
.pc-eventos-detalhe {
    padding-top: 0.75rem;
}

.pc-eventos-detalhe__coluna {
    max-width: 800px;
    margin: 0 auto;
}

.pc-eventos-detalhe__voltar {
    margin: 0 0 1.25rem;
}

.pc-eventos-detalhe__voltar a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pc-eventos-detalhe__voltar a:link,
.pc-eventos-detalhe__voltar a:visited {
    font-size: 0.85rem;
    color: var(--pc-texto-secundario) !important;
}

.pc-eventos-detalhe__voltar a:hover,
.pc-eventos-detalhe__voltar a:focus-visible {
    color: var(--pc-texto) !important;
    text-decoration: none !important;
}

.pc-eventos-detalhe__voltar .pc-eventos-icon--seta {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.pc-eventos-detalhe__voltar a:hover .pc-eventos-icon--seta {
    transform: translateX(-2px);
}

.pc-eventos-detalhe__media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: var(--pc-fundo-media);
    aspect-ratio: 16 / 9;
    margin: 0 0 2rem;
}

.pc-eventos-detalhe__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-eventos-detalhe__corpo {
    text-align: center;
}

.pc-eventos-detalhe__titulo {
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 700;
    margin: 0 0 1rem;
}

/* Lista de metadados em linha única (ícone + texto), centralizada,
   separada por espaçamento pequeno e organizado — não uma linha por
   informação com espaço grande entre elas. Quebra para coluna só em
   telas bem estreitas. */
.pc-eventos-detalhe__meta-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 1.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.pc-eventos-detalhe__meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--pc-texto-secundario);
    white-space: nowrap;
}

.pc-eventos-detalhe__resumo {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--pc-texto);
    margin: 0 auto 1.75rem;
    max-width: 640px;
}

/* CTA da página de detalhe: um único botão centralizado que abre o
   modal — não um formulário sempre visível "jogado" na página. */
.pc-eventos-detalhe__cta {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pc-linha);
    display: flex;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .pc-eventos-card,
    .pc-eventos-card__img {
        transition: none;
    }
}