/* Variáveis CSS para fácil personalização */
:root {
    --primary-color: #4CAF50; /* Verde vibrante para destaque */
    --secondary-color: #333; /* Cinza escuro para cabeçalho e rodapé */
    --background-color: #1a1a1a; /* Fundo principal escuro */
    --text-color: #f0f0f0; /* Cor do texto principal (quase branco) */
    --card-background: #2a2a2a; /* Fundo dos blocos de seção */
    --border-color: #555; /* Cor de bordas suaves */
}

/* Reset básico e configurações globais */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* INÍCIO - Adicionado para imagem de fundo estática */
    background-image: url('imgs/fundo.jpg'); /* Substitua pelo caminho da sua imagem */
    background-size: cover; /* Para não esticar a imagem, use "contain" */
    /*background-repeat: no-repeat;*//* Evita que a imagem se repita */
    background-position: center center; /* Centralizar a imagem */
    background-attachment: fixed; /* Fundo fixo */
    /* FIM - Adicionado para imagem de fundo estática */
}

/* INÍCIO - Adicionado efeito de "backdrop" para obscurecer o fundo */
body::before {
    content: "";
    position: fixed; /* Garante que o pseudo-elemento cubra a tela inteira */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Cor preta com 50% de transparência */
    z-index: -1; /* Coloca o pseudo-elemento atrás de todo o conteúdo */
}
/* FIM - Adicionado efeito de "backdrop" para obscurecer o fundo */

html {
    scroll-behavior: smooth; /* Rolagem suave ao clicar nos links de navegação */
}

/* Layout do contêiner principal */
.container {
    max-width: 1600px;
    margin: 20px auto; /* Centraliza o contêiner e adiciona margem vertical */
    padding: 0 20px; /* Padding nas laterais para telas menores */
    position: relative; /* Importante para que o conteúdo fique na frente do background */
    z-index: 1; /* Garante que o conteúdo fique na frente do backdrop */
}

/* Estilo do cabeçalho */
header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgba(51, 51, 51, 0.7);
    padding: 40px 20px;
    border-bottom: 3px solid var(--primary-color);
}


header .logo {
    max-height: 100px; /* Altura máxima para o logo */
    /*margin-bottom: 10px;*//* Adicionado margem abaixo do logo */
    position: absolute;
    left: 20px;
}

header h1 {
    color: var(--text-color);
    margin: 0;
    font-size: 2.5rem;
    /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);*/ /* Removido */
    /*flex-grow: 1;*//*Removido pois não precisa mais*/
    text-align: center; /* Centraliza o texto do título */
    /*padding-left: 20px;*//*Removido pois não precisa mais*/
    /*padding-right: 20px;*//*Removido pois não precisa mais*/

    /* INÍCIO - Adicionado sombra e contorno ao título */
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 12px var(--primary-color); /* Adiciona uma leve iluminação verde */
    /* FIM - Adicionado sombra e contorno ao título */
}

/* INÍCIO - Estilo do subtítulo do cabeçalho */
.header-subtitle {
    color: #ccc;
    font-size: 1.2rem;
    text-align: center;
    margin-top: -10px; /* Ajuste fino para aproximar do título */
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* Centralizando o subtítulo */
    width: 100%; /* Garante que ocupe a largura total do cabeçalho */
    font-style: italic; /* Adiciona itálico ao subtítulo */
    font-family: sans-serif, Arial;
}
/* FIM - Estilo do subtítulo do cabeçalho */

/* Adicionar regra para que o título se alinhe à esquerda em telas menores, se desejar */
@media (max-width: 768px) {
    header {
        /*flex-direction: column;*//* Removido pois não precisa mais */
        text-align: center;
        gap: 10px; /* Espaçamento entre logo e título */
    }

    header h1 {
        padding-left: 0;
        padding-right: 0;
        text-align: center; /* Garante que o título permaneça centralizado quando empilhado */
    }
}
/* Estilo da barra de navegação */
nav {
    background-color: #222;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra sutil */
    position: sticky; /* Torna a nav "grudenta" no topo ao rolar */
    top: 0;
    z-index: 1000; /* Garante que a nav fique acima de outros elementos */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Usa Flexbox para organizar os itens */
    justify-content: center; /* Centraliza os itens horizontalmente */
    gap: 30px; /* Espaço entre os itens */
}

nav ul li a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 5px 10px;
    transition: color 0.3s ease, background-color 0.3s ease; /* Transição suave no hover */
    border-radius: 5px;
}

nav ul li a:hover {
    color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.1); /* Fundo sutil no hover */
}

/* Estilo para as seções de conteúdo */
.section {
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Sombra mais pronunciada */
    text-align: center; /* Centraliza o conteúdo da seção */
    border-top: 5px solid var(--primary-color); /* Borda superior colorida */

    /* INÍCIO - Adicionado transparência às seções */
    background-color: rgba(42, 42, 42, 0.8); /* Usando rgba para adicionar transparência */
    /* FIM - Adicionado transparência às seções */
}

/* Estilo do título da seção */
.section-title {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 15px;
    /* sombra em verde, bem suave */
    text-shadow:
        0 0 6px var(--primary-color),
        0 0 12px rgba(76, 175, 80, 0.6);
    position: relative;
    padding-bottom: 10px; /* Espaço para a linha decorativa */
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centraliza a linha */
    bottom: 0;
    width: 80px;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 5px;
}

/* Estilo do subtítulo da seção */
.section-subtitle {
    font-size: 1.5rem;
    color: grey; /* Cor de texto mais clara */
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* INÍCIO - Estilo do subtítulo customizado da seção */
.section-subtitle-custom {
    font-size: 1.3rem;
    color: yellow;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
/* FIM - Estilo do subtítulo customizado da seção */

/* Estilo para listas de conteúdo (eventos, preços, etc.) */
.content-list {
    list-style: none; /* Remove marcadores padrão */
    padding: 0;
    margin: 0 auto; /* Centraliza a lista */
    max-width: 1200px; /* Limita a largura para melhor leitura */
    text-align: center; /* Alinha o texto dos itens à esquerda */
}

.content-list li {
    background-color: transparent; /* Removendo as caixas cinzas */
    box-shadow: none;
    padding: 5px 0; /* Reduzindo o padding para ocupar menos espaço */
}

.content-list li:hover {
    /*transform: translateY(-3px); /* Efeito de "levantar" no hover */
    /*background-color: #4a4a4a; /* Fundo um pouco mais claro no hover */
}

/* Estilo para a galeria de imagens */
.image-gallery {
    display: flex;
    flex-wrap: wrap; /* Permite que as imagens quebrem para a próxima linha */
    justify-content: center; /* Centraliza as imagens */
    gap: 20px; /* Espaço entre as imagens */
    margin-top: 30px;
}

.image-gallery img {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease; /* Transição suave no hover */
    max-width: 100%; /* Garante que as imagens sejam responsivas e não transbordem */
    height: auto; /* Mantém a proporção da imagem */
}

.image-gallery img:hover {
    transform: scale(1.10); /* Efeito de zoom sutil no hover */
}

/* Classes para tamanhos de imagem específicos */
.img-small {
    width: 150px;
}

.img-medium {
    width: 300px;
}

.img-large {
    width: 450px;
}

/* Estilo do rodapé */
footer {
    /*background-color: var(--secondary-color);*/ /* Removido */
    color: var(--text-color);
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 3px solid var(--primary-color); /* Borda superior de destaque */

    /* INÍCIO - Adicionado transparência ao rodapé */
    background-color: rgba(51, 51, 51, 0.7); /* Cor cinza escuro com 70% de transparência */
    /* FIM - Adicionado transparência ao rodapé */
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }

    nav ul {
        flex-direction: column; /* Itens da nav empilhados em telas pequenas */
        gap: 15px;
    }

    .section {
        padding: 30px 20px;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    header .logo {
        max-height: 90px;
    }

    header h1 {
        font-size: 1.8rem;
    }

    nav ul li a {
        font-size: 1rem;
    }

    .section {
        padding: 20px 15px;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .section-subtitle {
        font-size: 1.1rem;
    }
    .content-list li {
        font-size: 1rem;
    }
}

/* Abaixo de .whatsapp-icon */
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
    text-align: center; /* Centraliza o conteúdo */
}

.contact-list li {
    background-color: transparent; /* Removendo as caixas cinzas */
    box-shadow: none;
    padding: 5px 0; /* Reduzindo o padding para ocupar menos espaço */
}

.contact-text {
    text-align: center;
    margin-bottom: 15px;
    color: #ccc; /* Cor clara para o texto */
}

/* INÍCIO - Estilos específicos para a frase de contato */
.contact-text.special-text {
    color: #fff; /* Cor da fonte branca */
    text-shadow: 
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px 1px 0 black,
        1px 1px 0 black,
        0 0 5px #4CAF50; /* Sombra verde */
}
/* FIM - Estilos específicos para a frase de contato */

.whatsapp-link {
    /*color: #007bff; /* Cor azul para o link */
    text-decoration: none; /* Removendo o sublinhado padrão */
    /*display: flex; /* Alinhando o ícone e o texto horizontalmente */
    /*align-items: center; /* Alinhando verticalmente */
    justify-content: center; /* Centralizando o conteúdo */
    display: inline-block; /*Permitir tamanho e margem*/
}

.whatsapp-link:hover {
    text-decoration: none; /* Removendo o sublinhado ao passar o mouse */
    background-color: transparent; /*Remover quadrado cinza ao passar o mouse*/
}

/* INÍCIO - Estilos para o ícone do WhatsApp */
.contact-icon {
    height: auto;
    vertical-align: middle;
    transition: transform 0.2s ease-in-out; /* Adiciona uma transição suave */
    width: 180px; /* Tamanho padrão */
    /*display: block; /* Garante que ocupe a largura total */
    margin: 0 auto; /* Centraliza horizontalmente */
    border: none; /*Remover quadrado cinza ao passar o mouse*/
}

.whatsapp-icon {
    /*width: 25px; /* Tamanho ligeiramente maior para destacar */
}

.whatsapp-link:hover .contact-icon {
    transform: scale(1.2); /* Aumenta o tamanho no hover */
}

.whatsapp-item{
    text-align: center;
}

.whatsapp-item:hover{
    background-color: transparent; /*Remover quadrado cinza ao passar o mouse*/
}

.contact-list li:hover{
    background-color: transparent; /*Remover quadrado cinza ao passar o mouse*/
}
/* FIM - Estilos para o ícone do WhatsApp */

/* ---------- Layout especial para o bloco1 com imagens laterais ---------- */
.eventos-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px auto 20px;
    max-width: 1600px; /* acompanha container */
    padding: 0 20px;
}

.section-eventos,
#bloco1.section {
    flex: 1;
    max-width: 80%; /* largura do bloco central */
}

.evento-img {
    max-width: 20%; /* tamanho das imagens laterais em % */
    height: auto;
    object-fit: contain;
    pointer-events: none; /* não clicável */
    user-select: none;
}
.evento-img-left { order: -1; }
@media (max-width: 900px) {
    .eventos-wrapper {
        gap: 12px;
    }
    .evento-img { max-width: 18%; }
    #bloco1.section { max-width: 64%; }
}
@media (max-width: 700px) {
    /* Em telas pequenas, prioriza o conteúdo central e oculta as laterais */
    .evento-img { display: none; }
    #bloco1.section { max-width: 100%; }
}
/* ----------------------------------------------------------------------- */
.section { scroll-margin-top: 96px; }

/* ===== Overrides sem quebrar estilos anteriores ===== */

/* Header mais baixo (menos área vazia) */
header { padding: 16px 20px; }              /* antes era maior */
header h1 { margin: 2px 0; }
.header-subtitle { margin: 0 0 2px; line-height: 1.2; }

/* Título de seção: garantir base para linha e manter sombra verde */
.section-title {
    position: relative;                     /* base do ::after */
    padding-bottom: 5px;                    /* linha 5px abaixo do texto */
    text-shadow:
        0 0 6px var(--primary-color),
        0 0 12px rgba(76, 175, 80, 0.6);    /* mantém brilho verde */
}

/* Linha decorativa 95% com contorno preto de 2px */
.section-title::after {
    content: "";
    position: absolute;
    left: 2.5%;
    width: 95%;
    bottom: 0;                               /* encostada na base (5px abaixo do texto) */
    height: 3px;
    background: var(--primary-color);
    border: 2px solid #000;                  /* contorno preto */
    border-radius: 2px;
    box-sizing: border-box;
}

/* ===== Correção da linha decorativa: largura 95%, centralizada no bloco, sem translate herdado ===== */
.section .section-title { position: relative; padding-bottom: 5px; }
.section .section-title::after {
    content: "";
    position: absolute;
    left: 2.5%;
    width: 95%;
    right: auto;
    bottom: 0;
    height: 3px;
    background-color: var(--primary-color);
    border: 2px solid #000;
    border-radius: 2px;
    box-sizing: border-box;
    transform: none !important; /* neutraliza translateX herdado */
}

/* ===== Linha decorativa branca (estilo original), 95% da largura ===== */
.section .section-title { position: relative; padding-bottom: 5px; }
.section .section-title::after {
    content: "";
    position: absolute;
    left: 2.5%;
    width: 95%;
    bottom: 0;
    height: 3px;
    background-color: var(--text-color); /* branco do tema (original) */
    border: none;                         /* sem contorno preto */
    border-radius: 5px;                   /* pontas arredondadas como a original */
    box-sizing: border-box;
    transform: none !important;           /* neutraliza translate herdado */
}

/* ===== Redução de espaço interno dos blocos ===== */
/* Metade do espaço livre abaixo do conteúdo dentro de cada seção */
.section { padding-bottom: 20px; } /* antes: 40px */

/* Aproxima o título e subtítulo do conteúdo */
.section-title { margin-bottom: 10px; }        /* antes: 15px */
.section-subtitle-custom { margin-bottom: 6px; } /* antes: 10px */

/* Aperta um pouco os itens de lista para reduzir altura final */
.content-list li { padding: 3px 0; }           /* antes: 5px 0 */

/* ===== Aproxima TÍTULO da borda superior verde ===== */
.section { padding-top: 16px; }          /* antes: 40px; reduz bastante o espaço acima do título */
.section-title { margin-top: 0; }        /* remove margem superior padrão do h2 */

/* ===== Galeria Dinâmica (image-gallery-dynamic) ===== */
.image-gallery-dynamic {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: center;
    margin-top: 12px;
}

.image-gallery-dynamic .ig-thumb {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #111;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-gallery-dynamic .ig-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

.image-gallery-dynamic .ig-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;      /* Mostra a imagem inteira dentro do thumb */
    object-position: center;  /* Centraliza */
    user-select: none;
    pointer-events: none;
}

/* Lightbox (visualização em tela cheia) */
.ig-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.ig-lightbox-backdrop.is-open { display: flex; }

.ig-lightbox {
    position: relative;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ig-lightbox img {
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    border: 1px solid var(--border-color);
    background: #000;
}

.ig-nav-btn, .ig-close-btn {
    position: absolute;
    border: none;
    background: rgba(0,0,0,0.5);
    color: var(--text-color);
    font-size: 28px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(1px);
    transition: transform 0.2s ease, background 0.2s ease;
    user-select: none;
}

.ig-nav-btn:hover, .ig-close-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.05); }

.ig-prev { left: -60px; top: 50%; transform: translateY(-50%); }
.ig-next { right: -60px; top: 50%; transform: translateY(-50%); }
.ig-close-btn { top: -52px; right: -8px; font-size: 26px; width: 40px; height: 40px; line-height: 40px; }

/* Evita rolagem do body quando o lightbox está aberto */
body.ig-no-scroll { overflow: hidden; }

/* Responsividade dos controles do lightbox */
@media (max-width: 600px) {
  .ig-prev { left: 8px; }
  .ig-next { right: 8px; }
  .ig-close-btn { top: 8px; right: 8px; }
}

#bloco6 .event-list {
  list-style: none;   /* tira as bolinhas */
  padding: 0;
  margin: 0;
  text-align: left;   /* garante alinhamento à esquerda */
}

#bloco6 .event-list li {
  margin-bottom: 8px;
  line-height: 1.5;
}

#bloco6 .event-name {
  color: yellow;
  font-weight: bold;
}

/* ===== bloco6: ENFORCE - 2 colunas centralizadas, nomes brancos, sem borda/sublinhado, popover ===== */
#bloco6 .event-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 24px;
  width: min(100%, 1000px);
  margin: 10px auto 0; /* centraliza */
}
@media (max-width: 800px) {
  #bloco6 .event-list { grid-template-columns: 1fr; width: 100%; }
}
#bloco6 .event-list li {
  border: none;
  padding: 2px 6px;
  background: transparent;
}
#bloco6 .event-name {
  color: var(--text-color);  /* branco */
  text-decoration: none;
  cursor: pointer;
  line-height: 1.15;
  position: relative;
}

#bloco6 .event-name:hover::after,
#bloco6 .event-name:focus::after {
  opacity: 0.9;
  transform: translateY(-1px);
}
/* popover */
.event-popover {
  position: fixed;
  display: none;
  z-index: 3000;
  max-width: min(560px, 86vw);
  background: rgba(32,32,32,0.96);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  pointer-events: none;
  line-height: 1.35;
  font-size: 0.98rem;
}
.event-popover.open { display: block; }
/* descrição escondida no DOM */
#bloco6 .event-desc { display: none !important; }

/* ===== CENTRALIZAÇÃO REAL das 2 colunas no bloco 6 ===== */
#bloco6 .event-list {
  width: 100%;
  max-width: 500px;
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 440px)); /* colunas com largura fixa/limite */
  gap: 8px 40px;                /* espaço horizontal visível entre as colunas */
  justify-content: center;      /* centraliza o conjunto de colunas no container */
  align-content: start;
  justify-items: start;         /* alinha itens ao início dentro das células */
}
@media (max-width: 980px) {
  #bloco6 .event-list {
    grid-template-columns: 1fr;
    gap: 8px 20px;
    max-width: 380px;
  }
}

/* ===== Bloco 6: 4 colunas (centralizadas) ===== */
#bloco6 .event-list {
  width: 100%;
  max-width: 1280px;                          /* espaço para 4 colunas confortável */
  margin: 10px auto 0;                         /* centraliza a grade no bloco */
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));  /* 4 colunas */
  gap: 3px 22px;                               /* (row-gap, column-gap) */
  justify-content: center;                      /* centraliza o conjunto */
  align-content: start;
  justify-items: start;
}

/* Responsivo: reduz colunas quando não couber */
@media (max-width: 1100px) {
  #bloco6 .event-list { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width: 820px) {
  #bloco6 .event-list { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 520px) {
  #bloco6 .event-list { grid-template-columns: 1fr; max-width: 600px; }
}

/* ====== POPovers genéricos (auto) ====== */
[data-popover-list] {
  width: 100%;
  max-width: 1280px;
  margin: 10px auto 0;
  display: grid;
  gap: 8px 32px;
  justify-content: center;
  align-content: start;
  justify-items: start;
  list-style: none;
  padding: 0;
  grid-template-columns: repeat(var(--cols, 4), minmax(220px, 1fr));
}
@media (max-width: 1100px) { [data-popover-list] { --cols: 3; } }
@media (max-width: 820px)  { [data-popover-list] { --cols: 2; } }
@media (max-width: 520px)  { [data-popover-list] { --cols: 1; max-width: 600px; } }

[data-popover-name] {
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.15;
  position: relative;
}

[data-popover-name]:hover::after,
[data-popover-name]:focus::after { opacity: 0.9; transform: translateY(-1px); }

[data-popover-desc] { display: none !important; }

/* Popover flutuante caso não exista previamente */
.event-popover {
  position: fixed;
  display: none;
  z-index: 3000;
  max-width: min(560px, 86vw);
  background: rgba(32,32,32,0.96);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  pointer-events: none;
  line-height: 1.35;
  font-size: 0.98rem;
}
.event-popover.open { display: block; }

/* ===== Ícone padrão de popover (igual ao do bloco 6) ===== */

[data-popover-name]:hover::after,
[data-popover-name]:focus::after {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ===== Ícone de dica padrão (global para todos os blocos com popover) ===== */
[data-popover-name]::after {
  content: " ⓘ";            /* circled i */
  opacity: 0.25;
  font-size: 1.5em;
  transition: opacity .15s ease, transform .15s ease;
}
[data-popover-name]:hover::after,
[data-popover-name]:focus::after {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ====== Título animado (SVG) ====== */
.logo-svg { /* Define o tamanho do SVG que contém o título animado */
  width: 100%; /* Ocupa toda a largura do header */
  height: 100px; /* Altura fixa confortável para o texto grande */
}

/* Trilho “de cobre” constante (contorno base + linhas de entrada/saída) */
.trilho { /* Estilo das linhas e do contorno base sem animação */
  fill: white; /* Não preenche o interior (apenas traço) */
  stroke: white; /* Cor do trilho (azul translúcido suave) */
  stroke-width: 2.0px; /* Espessura do traço do trilho */
}

/* Contorno do texto do trilho (apenas guia visual do caminho) */
text.trilho { /* Estilo do texto que serve de caminho fixo (sem animação) */
  font: 900 96px/1 "Roboto", sans-serif; /* Peso, tamanho, altura de linha e fonte */
  letter-spacing: 1px; /* Pequeno espaçamento entre letras para respirarem */
  paint-order: stroke fill; /* Desenha o traço antes do preenchimento (melhora a legibilidade) */
  stroke: white; /* Traço do texto do trilho (leve azul translúcido) */
  stroke-width: 2px; /* Espessura do traço do contorno fixo do texto */
}

/* Mesmo estilo de texto para o feixe (segue o caminho das letras) */
text.energia { /* Texto que recebe a animação do feixe */
  font: 900 96px/1 "Roboto", sans-serif; /* Garante que o caminho/animação siga o mesmo desenho da palavra */
  letter-spacing: 1px; /* Mantém coerência com o trilho base */
  paint-order: stroke fill; /* Traço primeiro para realçar o efeito de luz nas bordas da letra */
}

/* Animação do feixe de energia (vai e volta) */
@keyframes energia-correndo { /* Controla o deslocamento do traço animado */
  0%   { stroke-dashoffset: 2400; }   /* Começa “fora” do caminho (entra pelo início) */
  100% { stroke-dashoffset: -2400; }  /* Percorre tudo e “sai” pelo final (efeito de passagem) */
}

/* Ajustes responsivos (reduz o tamanho em telas menores) */
@media (max-width: 768px) { /* Tablets e telas médias */
  text.trilho,
  text.energia { font-size: 64px; } /* Diminui o tamanho da tipografia no SVG */
  .logo-svg { height: 110px; } /* Ajusta a altura do SVG */
}

@media (max-width: 480px) { /* Celulares */
  text.trilho,
  text.energia { font-size: 48px; } /* Tipografia menor para caber bem no header */
  .logo-svg { height: 95px; } /* Altura reduzida mantendo proporção agradável */
}

/* CAMADA BASE — preenchido branco + contorno preto (fixo) */
text.base{
  font: 900 96px/1 "Roboto", sans-serif;
  letter-spacing: 1px;
  fill:#fff;
  stroke:#000;
  stroke-width:2px;
  paint-order: stroke fill;
  pointer-events:none;
}

/* ====== Título animado (SVG) ====== */
.logo-svg { /* Tamanho do SVG do título */
  width: 100%;          /* ocupa toda a largura */
  height: 80px;        /* altura do header (ajuste livre) */
}

/* TEXTO BASE — SEMPRE branco + contorno preto */
text.base { /* Aparência original do seu logo */
  font: 900 96px/1 "Roboto", sans-serif; /* peso/tamanho/fonte */
  letter-spacing: 1px;                   /* respiro entre letras */
  fill: #fff;                             /* preenchimento branco */
  stroke: #000;                           /* contorno preto */
  stroke-width: 2px;                      /* grossura do contorno */
  paint-order: stroke fill;               /* desenha borda antes do fill */
  pointer-events: none;                   /* não captura cliques */
}

/* TRILHO PCB — apenas contorno discreto (sem fill) */
.trilho {
  fill: none !important;                  /* nunca preenche */
  stroke: rgba(255,255,255,.35);          /* branco translúcido */
  stroke-width: 2px;                      /* espessura da pista */
  stroke-linejoin: round;                 /* quinas suaves */
  pointer-events: none;
}

/* ENERGIA — apenas stroke, segmento curto animado
   - 3s “andando”
   - 2s invisível (pausa)
   Total do ciclo = 5s */
.energia {
  fill: none;                                        /* não altera o fill branco do logo */
  stroke: var(--primary-color, #22c55e);             /* verde do site */
  color: var(--primary-color, #22c55e);              /* currentColor p/ brilho */
  stroke-width: 2px;                                  /* mesmo 2px do contorno base */
  stroke-linecap: round;                              /* pontas arredondadas */
  /* Segmento curto + gap longo (ajuste o --dash-size se quiser) */
  stroke-dasharray: var(--dash-size, 40) 600;
  /* 3s de movimento + 2s de pausa (opacidade 0) */
  animation: energia-ciclo 5s linear infinite;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 6px currentColor);
  pointer-events: none;
}

/* A energia no texto precisa da mesma fonte p/ casar contorno */
text.energia {
  font: 900 96px/1 "Roboto", sans-serif; /* igual ao base */
  letter-spacing: 1px;                   /* igual ao base */
}

/* Keyframes: 0–60% (3s) = corre; 60–100% (2s) = pausa invisível */
@keyframes energia-ciclo {
  0%   { stroke-dashoffset:   0; opacity: 1; }   /* início do caminho */
  80%  { stroke-dashoffset: -2400; opacity: 1; } /* fim do caminho ao 3s */
  80.001% { opacity: 0; }                        /* some logo após terminar */
  100% { stroke-dashoffset: -2400; opacity: 0; } /* fica invisível por ~2s */
}

/* Responsivo (opcional) */
@media (max-width: 768px) {
  text.base, text.energia { font-size: 64px; }
  .logo-svg { height: 110px; }
}
@media (max-width: 480px) {
  text.base, text.energia { font-size: 48px; }
  .logo-svg { height: 95px; }
}

/* --- Perf: gallery thumbs lazy + blur-up placeholder --- */
.gal-thumb{
  width:100%;
  height:auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: blur(8px);
  transition: filter .2s ease, transform .2s ease;
  display:block;
  border-radius: 12px;
 background: rgba(255,255,255,0.04);}
.gal-thumb.is-loaded{
  filter:none;
}
.gal-item{ display:block;  width:100%;}


/* --- Thumbs: configurable size system --- */
:root{
  --thumb-size: 360px; /* default display size for thumbnails */
  --thumb-gap: 16px;
}

/* Utility classes for quick selection (apply to <html>, <body>, or gallery container) */
.thumb-size-sm { --thumb-size: 280px; }
.thumb-size-md { --thumb-size: 360px; }
.thumb-size-lg { --thumb-size: 440px; }
.thumb-size-xl { --thumb-size: 520px; }
.thumb-size-xxl{ --thumb-size: 640px; }

/* Make common gallery containers auto-fit based on --thumb-size without breaking existing layout */
.image-gallery, .galeria, .image-gallery-grid, .galeria-dinamica, .gallery, .content-list.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--thumb-size), 1fr));
  gap: var(--thumb-gap);
  align-items: start;
}

/* The anchor wrapper caps each thumb width but allows responsive fill */
.gal-item{   width:100%;}

/* Thumbs fill their wrapper */
.gal-thumb{ width: 100%; height: auto;  background: rgba(255,255,255,0.04);}