/* Fontes Externas */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- Estilos Globais do Corpo --- */
body {
    font-family: 'Archivo', sans-serif; /* Define a fonte principal */
    color: #000; /* Cor padrão do texto */
    position: relative; /* Necessário para posicionamento de pseudo-elementos */
    overflow-x: hidden; /* Previne scroll horizontal indesejado */
}

/* Efeito de ruído e gradientes no fundo do corpo */
body::before {
    content: "";
    position: fixed; /* Fixo na viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Largura total da viewport */
    height: 100vh; /* Altura total da viewport */
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"), /* Camada de ruído SVG */
        radial-gradient(circle at 20% 30%, rgba(234, 108, 63, 0.1) 0%, transparent 20%), /* Gradiente radial sutil */
        radial-gradient(circle at 80% 70%, rgba(248, 198, 142, 0.1) 0%, transparent 20%); /* Outro gradiente radial sutil */
    z-index: -2; /* Posiciona atrás de todo o conteúdo */
    pointer-events: none; /* Permite que cliques passem através do fundo */
}

/* Suporte para safe areas no gradiente de fundo - estendendo para preencher toda a tela */
@supports (top: env(safe-area-inset-top)) {
    body::before {
        /* Força o gradiente a cobrir toda a tela incluindo safe areas */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        min-width: 100vw !important;

        /* Extende para além das safe areas */
        margin-top: calc(env(safe-area-inset-top) * -1) !important;
        margin-left: calc(env(safe-area-inset-left) * -1) !important;
        margin-right: calc(env(safe-area-inset-right) * -1) !important;
        margin-bottom: calc(env(safe-area-inset-bottom) * -1) !important;

        /* Aumenta as dimensões para cobrir as safe areas */
        width: calc(100vw + env(safe-area-inset-left) + env(safe-area-inset-right)) !important;
        height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)) !important;
        min-width: calc(100vw + env(safe-area-inset-left) + env(safe-area-inset-right)) !important;
        min-height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)) !important;

        /* Garante que o gradiente cubra tudo */
        background-size: cover !important;
        background-repeat: no-repeat !important;

        /* Z-index e outros estilos */
        z-index: -2 !important;
        pointer-events: none !important;

        /* Mantém o conteúdo original do background */
        content: "" !important;
        background:
            url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"),
            radial-gradient(circle at 20% 30%, rgba(234, 108, 63, 0.1) 0%, transparent 20%),
            radial-gradient(circle at 80% 70%, rgba(248, 198, 142, 0.1) 0%, transparent 20%) !important;
    }
}

/* Imagem de fundo com efeito parallax */
.parallax-bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/assets/background.jpg');
    background-size: cover; /* Cobre toda a área */
    background-position: center center; /* Centraliza a imagem */
    opacity: 1; /* Opacidade total */
    z-index: -1; /* Atrás do conteúdo, mas à frente do body::before */
    overflow: hidden; /* Previne que conteúdo interno cause scroll */
    pointer-events: none; /* Permite que cliques passem através da imagem */
}

/* Suporte para safe areas no background - estendendo para preencher toda a tela */
@supports (top: env(safe-area-inset-top)) {
    .parallax-bg-image {
        /* Força o background a cobrir toda a tela incluindo safe areas */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        min-width: 100vw !important;

        /* Extende para além das safe areas */
        margin-top: calc(env(safe-area-inset-top) * -1) !important;
        margin-left: calc(env(safe-area-inset-left) * -1) !important;
        margin-right: calc(env(safe-area-inset-right) * -1) !important;
        margin-bottom: calc(env(safe-area-inset-bottom) * -1) !important;

        /* Aumenta as dimensões para cobrir as safe areas */
        width: calc(100vw + env(safe-area-inset-left) + env(safe-area-inset-right)) !important;
        height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)) !important;
        min-width: calc(100vw + env(safe-area-inset-left) + env(safe-area-inset-right)) !important;
        min-height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)) !important;

        /* Garante que o background cubra tudo */
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        /* Z-index e outros estilos */
        z-index: -1 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* Estilo para fundo de seções com gradiente e blur */
.section-bg {
    background: linear-gradient(135deg, rgba(215, 253, 219, 0.7), rgba(203, 231, 236, 0.7), rgba(185, 197, 253, 0.7), rgba(211, 179, 238, 0.7), rgba(237, 172, 201, 0.7));
    backdrop-filter: blur(10px); /* Efeito de desfoque no fundo */
    -webkit-backdrop-filter: blur(10px); /* Para navegadores Webkit */
    border-radius: 24px; /* Bordas arredondadas */
}

/* Cards Animados - Depoimentos (Estilo temp.js) */
.marquee-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.marquee-container::before,
.marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0) 100%
    );
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0) 100%
    );
}

.marquee-row {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    animation: marquee 30s linear infinite;
    width: max-content;
}

.marquee-row-2 {
    animation-direction: reverse;
    animation-duration: 35s;
}

.marquee-row:hover {
    animation-play-state: paused;
}

.marquee-row .depoimento-card {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.marquee-row .depoimento-card:hover {
    filter: grayscale(0%);
}

.depoimento-card {
    position: relative;
    height: 100%;
    width: 256px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.01);
    padding: 1rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.depoimento-card:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.depoimento-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.depoimento-avatar {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    object-fit: cover;
    flex-shrink: 0;
}

.depoimento-info {
    display: flex;
    flex-direction: column;
}

.depoimento-nome {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    line-height: 1.25;
    margin: 0;
}

.depoimento-grupo {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(17, 24, 39, 0.4);
    line-height: 1;
    margin: 0;
}

.depoimento-texto {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #374151;
    font-style: italic;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Responsividade para cards animados */
@media (max-width: 768px) {
    .marquee-container::before,
    .marquee-container::after {
        width: 60px;
    }

    .depoimento-card {
        width: 240px;
    }
}

@media (max-width: 480px) {
    .marquee-container::before,
    .marquee-container::after {
        width: 40px;
    }

    .depoimento-card {
        width: 220px;
    }
}

.depoimento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s ease;
    z-index: 1;
}

.depoimento-card:hover::before {
    left: 100%;
}

/* Gradiente de fundo sutil */
.depoimento-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(234, 108, 63, 0.05) 0%,
        transparent 50%,
        rgba(248, 198, 142, 0.05) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.depoimento-card:hover::after {
    opacity: 1;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsividade para cards animados */
@media (max-width: 768px) {
    .marquee-container::before,
    .marquee-container::after {
        width: 60px;
    }

    .depoimento-card {
        flex: 0 0 300px;
    }

    .marquee-row {
        gap: 1.25rem;
    }

    .depoimento-content {
        padding: 1.5rem;
    }

    .depoimento-texto {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    .marquee-container::before,
    .marquee-container::after {
        width: 40px;
    }

    .depoimento-card {
        flex: 0 0 280px;
    }

    .depoimento-content {
        padding: 1.25rem;
    }
}

/* Estilos para elementos decorativos (bolhas) */
.bubble, .decorative-element {
    position: absolute;
    border-radius: 50%; /* Formato circular */
    filter: blur(40px); /* Desfoque intenso */
    opacity: 0.5; /* Semi-transparente */
    z-index: -1; /* Atrás do conteúdo da seção */
    pointer-events: none; /* Não interfere com interações */
}

/* Garante que elementos decorativos não interfiram com cliques */
.decorative-element {
    pointer-events: none;
}

/* --- Estilos de Botões --- */
.btn-primary {
    background: linear-gradient(45deg, #000, #333); /* Gradiente escuro */
    color: white;
    font-weight: 800;
    letter-spacing: -0.5px;
    transition: all 0.3s ease; /* Transição suave para hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    transform: translateY(-2px); /* Efeito de elevação */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada */
}

/* Estilo para botão "ver mais" */
.read-more-btn {
    transition: all 0.2s ease;
    text-decoration: underline;
}

.read-more-btn:hover {
    color: #d55a2f !important;
    text-decoration: none;
}

/* Estilo para estado "adicionado" */
.added-to-cart {
    background: linear-gradient(45deg, #22c55e, #16a34a) !important;
    transform: scale(1.05);
}

/* --- Estilos de Cards --- */
.event-card {
    transition: all 0.3s ease;
    border-left: 4px solid #000; /* Destaque na borda esquerda */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Sombra suave para todos os cards e elementos com padding */
.card-shadow, 
.bg-white.p-6, 
.bg-white.p-8 {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* !important para sobrescrever Tailwind se necessário */
    transition: all 0.3s ease;
}

.card-shadow:hover,
.bg-white.p-6:hover,
.bg-white.p-8:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* --- Estilos específicos para cards de produtos --- */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card .flex-grow {
    flex-grow: 1;
}

.product-card .mt-auto {
    margin-top: auto;
}

/* Garante altura uniforme dos cards em cada linha */
#product-list {
    display: grid;
    align-items: stretch;
}

/* --- Efeito Grayscale APENAS para You Store --- */
/* Aplica filtro preto e branco apenas nas imagens dos produtos */
.product-card img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

/* Remove o filtro preto e branco no hover dos produtos */
.product-card:hover img {
    filter: grayscale(0%);
}

/* Exceções: imagens que devem sempre manter as cores originais */
#product-modal img,
#event-modal img,
#modalImage,
.hero-section img,
.modal img,
.parallax-bg-image,
.floating img,
.nav img,
.footer img {
    filter: none !important;
}

/* --- Estilos de Navegação --- */
.nav-link {
    position: relative; /* Para pseudo-elemento ::after */
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0; /* Começa sem largura */
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #000;
    transition: width 0.3s ease; /* Animação da largura */
}

/* --- Estilos específicos para conteúdo dos estudos - REDUZINDO ESPAÇAMENTO ENTRE LINHAS --- */
#visualizadorEstudo #conteudoEstudo {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.5 !important; /* Reduzido de 1.8 */
    color: #374151 !important;
    font-size: 1.125rem !important;
    max-width: 65ch !important;
    margin: 0 auto !important;
}


#visualizadorEstudo #conteudoEstudo * {
    font-family: 'Inter', sans-serif !important;
}

#visualizadorEstudo #conteudoEstudo h1 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: #111827 !important;
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important; /* Reduzido de 1.5rem */
    margin-top: 3rem !important; /* Reduzido de 4rem */
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    padding-top: 1.5rem !important; /* Reduzido de 2rem */
}

#visualizadorEstudo #conteudoEstudo h2 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: #111827 !important;
    font-size: 2rem !important;
    margin-bottom: 0.875rem !important; /* Reduzido de 1.25rem */
    margin-top: 3rem !important; /* Reduzido de 4rem */
    line-height: 1.3 !important;
    letter-spacing: -0.025em !important;
    padding-top: 1.5rem !important; /* Reduzido de 2rem */
    border-top: 1px solid #e5e7eb !important;
}

#visualizadorEstudo #conteudoEstudo h3 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: #ea6c3f !important;
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    margin-top: 2.5rem !important; /* Reduzido de 3.5rem */
    line-height: 1.3 !important; /* Reduzido de 1.4 */
    padding-top: 1rem !important; /* Reduzido de 1.5rem */
}

#visualizadorEstudo #conteudoEstudo h4 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: #374151 !important;
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important; /* Reduzido de 0.75rem */
    margin-top: 2rem !important; /* Reduzido de 3rem */
    padding-top: 0.75rem !important; /* Reduzido de 1rem */
}

#visualizadorEstudo #conteudoEstudo p {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    color: #374151 !important;
    margin-bottom: 1rem !important; /* Reduzido de 1.5rem */
    font-size: 1.125rem !important;
    line-height: 1.5 !important; /* Reduzido de 1.8 */
    text-align: left !important;
}

#visualizadorEstudo #conteudoEstudo p + p {
    margin-top: 1rem !important; /* Reduzido de 1.5rem */
}

/* Reduzir distância quando um título vem após um parágrafo */
#visualizadorEstudo #conteudoEstudo p + h1,
#visualizadorEstudo #conteudoEstudo p + h2,
#visualizadorEstudo #conteudoEstudo p + h3,
#visualizadorEstudo #conteudoEstudo p + h4 {
    margin-top: 3rem !important; /* Reduzido de 4rem */
    padding-top: 1.5rem !important; /* Reduzido de 2rem */
}

#visualizadorEstudo #conteudoEstudo ul {
    margin-bottom: 1.5rem !important; /* Reduzido de 2rem */
    margin-top: 1rem !important; /* Reduzido de 1.5rem */
    padding-left: 2rem !important;
    list-style: disc !important; /* Mostra bullets nas listas não ordenadas */
}

#visualizadorEstudo #conteudoEstudo ol {
    margin-bottom: 1.5rem !important; /* Reduzido de 2rem */
    margin-top: 1rem !important; /* Reduzido de 1.5rem */
    padding-left: 2rem !important;
    list-style: decimal !important; /* Mostra números nas listas ordenadas */
}

#visualizadorEstudo #conteudoEstudo li {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    color: #374151 !important;
    font-size: 1.125rem !important;
    line-height: 1.5 !important; /* Reduzido de 1.8 */
    margin-bottom: 0.5rem !important; /* Reduzido de 0.75rem */
}

#visualizadorEstudo #conteudoEstudo li:last-child {
    margin-bottom: 0 !important;
}

/* Reduzir distância quando título vem após lista */
#visualizadorEstudo #conteudoEstudo ul + h1,
#visualizadorEstudo #conteudoEstudo ul + h2,
#visualizadorEstudo #conteudoEstudo ul + h3,
#visualizadorEstudo #conteudoEstudo ul + h4,
#visualizadorEstudo #conteudoEstudo ol + h1,
#visualizadorEstudo #conteudoEstudo ol + h2,
#visualizadorEstudo #conteudoEstudo ol + h3,
#visualizadorEstudo #conteudoEstudo ol + h4 {
    margin-top: 3rem !important; /* Reduzido de 4rem */
    padding-top: 1.5rem !important; /* Reduzido de 2rem */
}

#visualizadorEstudo #conteudoEstudo strong,
#visualizadorEstudo #conteudoEstudo b {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

#visualizadorEstudo #conteudoEstudo em,
#visualizadorEstudo #conteudoEstudo i {
    font-family: 'Inter', sans-serif !important;
    font-style: italic !important;
    color: #374151 !important;
}

#visualizadorEstudo #conteudoEstudo blockquote {
    border-left: 4px solid #ea6c3f !important;
    padding: 2.5rem !important;
    margin: 3rem 0 !important; /* Reduzido de 3.5rem */
    background-color: #f9fafb !important;
    font-style: italic !important;
    color: #374151 !important;
    font-weight: 400 !important;
    font-size: 1.125rem !important;
    line-height: 1.8 !important;
    border-radius: 0.75rem !important;
}

#visualizadorEstudo #conteudoEstudo hr {
    border: none !important;
    height: 1px !important;
    background-color: #e5e7eb !important;
    margin: 3rem 0 !important; /* Reduzido de 4rem */
}

#visualizadorEstudo #conteudoEstudo .callout {
    background: linear-gradient(135deg, #fef3e2 0%, #fef7f0 100%) !important;
    border-left: 4px solid #ea6c3f !important;
    padding: 2.5rem !important;
    margin: 3rem 0 !important; /* Reduzido de 3.5rem */
    border-radius: 0.75rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

#visualizadorEstudo #conteudoEstudo .callout p {
    margin-bottom: 0 !important;
    color: #92400e !important;
}

.nav-link:hover::after {
    width: 100%; /* Expande ao passar o mouse */
}

/* Estilos para menu dropdown */
.dropdown-container {
    position: relative; /* Contexto para posicionamento absoluto do menu */
}

.dropdown-menu {
    display: none; /* Escondido por padrão */
    transition: opacity 0.3s, visibility 0.3s; /* Transições suaves */
    opacity: 0;
    visibility: hidden;
}

/* Mostra o menu no hover do container ou do próprio menu */
.dropdown-container:hover .dropdown-menu,
.dropdown-menu:hover {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Área invisível para facilitar a navegação entre botão e menu */
.dropdown-container::after {
    content: '';
    position: absolute;
    height: 20px; /* Altura da "ponte" invisível */
    width: 100%;
    bottom: -20px; /* Posicionada abaixo do botão */
    left: 0;
}

/* --- Estilos de Formulário --- */
.form-input {
    background: rgba(255, 255, 255, 0.8); /* Fundo semi-transparente */
    border: none;
    border-bottom: 2px solid #000; /* Apenas borda inferior */
    border-radius: 0; /* Sem arredondamento */
    transition: all 0.3s ease;
}

.form-input:focus {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 2px solid #ea6c3f; /* Cor de destaque no foco */
    outline: none; /* Remove o outline padrão */
}

/* Garante que elementos decorativos absolutos dentro de .section-bg não interfiram com cliques */
.section-bg .absolute {
    pointer-events: none;
}

/* --- Animações --- */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Movimento vertical */
    }
}

.floating {
    animation: float 6s ease-in-out infinite; /* Animação de flutuação */
}

/* --- Estilos Específicos da Hero Section --- */
.word {
    display: inline-block;
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    filter: blur(8px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.word.animate {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0px);
}

.hero-title.scale-effect {
    transform: scale(1.1);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-title.scale-normal {
    transform: scale(1);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-subtitle, .hero-buttons {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transform: translateY(20px);
}

.hero-subtitle.show, .hero-buttons.show {
    opacity: 1;
    transform: translateY(0);
}

/* --- Estilos Específicos da Seção de Voluntariado (Galeria e Modal) --- */
@keyframes float-gallery { /* Renomeado para evitar conflito com .floating */
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(1deg); }
    50% { transform: translateY(-10px) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(-1deg); }
}

.animate-float-gallery { /* Renomeado para usar a animação correta */
    animation: float-gallery 6s ease-in-out infinite;
}

.gallery-item {
    position: relative;
    overflow: visible; /* Permite que o ::before seja maior */
}

/* Efeito de brilho no hover da galeria */
.gallery-item::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, #ea6c3f, #f8c68e);
    border-radius: 2rem; /* Correspondente ao border-radius da imagem mais o espaçamento */
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.gallery-item:hover::before {
    opacity: 0.2;
}

.gallery-item:hover {
    transform: scale(1.15) translateZ(0); /* Efeito de zoom e elevação */
    box-shadow: 0 25px 50px rgba(234, 108, 63, 0.3); /* Sombra colorida */
}

/* Modal da galeria com backdrop-filter */
#imageModal {
    backdrop-filter: blur(10px);
}

.modal-content {
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5)); /* Sombra projetada no conteúdo do modal */
}

/* Estilos para o Modal de Valores (Quem Somos) */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn { /* Classe para aplicar animação de fade-in */
    animation: fadeIn 0.3s ease-out forwards;
}
#valorModal > div { /* Aplica animação ao container interno do modal */
    animation: fadeIn 0.3s ease-out forwards;
}

/* Estilos para o Modal de Eventos */
#eventoModal {
    backdrop-filter: blur(10px);
}

#eventoModalContent {
    transition: transform 0.3s ease-out;
}

#eventoModal.hidden #eventoModalContent {
    transform: scale(0.95);
}

.added-to-cart {
    background: #4CAF50 !important;
    transform: scale(1.1);
}
#floating-cart-button {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    transform: scale(0);
}
#floating-cart-button.visible {
    opacity: 1;
    transform: scale(1);
}

/* --- Estilos específicos para o Modal de Estudos --- */
#estudosModal {
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
}

#estudosModalContent {
    max-height: calc(100vh - 2rem); /* Garante espaço para padding */
}

/* Garante que as áreas de scroll funcionem corretamente */
#listaEstudos .overflow-y-auto,
#visualizadorEstudo .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ea6c3f #f1f1f1;
}

/* Estilização da scrollbar para webkit browsers */
#listaEstudos .overflow-y-auto::-webkit-scrollbar,
#visualizadorEstudo .overflow-y-auto::-webkit-scrollbar {
    width: 8px;
}

#listaEstudos .overflow-y-auto::-webkit-scrollbar-track,
#visualizadorEstudo .overflow-y-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#listaEstudos .overflow-y-auto::-webkit-scrollbar-thumb,
#visualizadorEstudo .overflow-y-auto::-webkit-scrollbar-thumb {
    background: #ea6c3f;
    border-radius: 4px;
}

#listaEstudos .overflow-y-auto::-webkit-scrollbar-thumb:hover,
#visualizadorEstudo .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #d55a35;
}

/* Estilos específicos para o Modal de Estudos */
#estudosModalContent {
    border-radius: 24px !important;
    max-width: 85vw !important;
    max-height: 85vh !important;
    width: 85vw !important;
    height: 85vh !important;
    margin: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    #estudosModalContent {
        max-width: 95vw !important;
        max-height: 95vh !important;
        width: 95vw !important;
        height: 95vh !important;
        border-radius: 24px !important;
        margin: 0;
    }

    #estudosModalContent .flex {
        flex-direction: column;
    }

    #estudosModalContent .w-80 {
        width: 100%;
        max-height: 200px;
    }
}

/* Garantir que todas as bordas fiquem arredondadas no desktop */
@media (min-width: 769px) {
    #estudosModalContent {
        border-radius: 24px !important;
    }
}

/* Estilos para carregamento lazy de imagens */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Placeholder para imagens lazy */
img[loading="lazy"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* --- Estilos para Modal de Depoimento --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.depoimento-modal-content {
    background-color: #fefefe;
    padding: 0;
    border-radius: 20px;
    width: 95%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
}

.depoimento-modal-body {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.depoimento-imagem-container-full {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.depoimento-imagem-container-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.depoimento-info {
    padding: 2rem;
    text-align: center;
}

.depoimento-info h3 {
    font-family: 'Archivo', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ea6c3f;
    margin-bottom: 0.5rem;
}

.depoimento-grupo {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.depoimento-texto {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    font-style: italic;
}

.close {
    color: white;
    position: fixed;
    right: 1rem;
    top: 1rem;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.close:hover,
.close:focus {
    background-color: rgba(234, 108, 63, 0.8);
    text-decoration: none;
}

/* Responsividade para o modal */
@media screen and (max-width: 768px) {
    .depoimento-modal-content {
        width: 98%;
        max-width: 98%;
        max-height: 95vh;
        margin: auto;
        /* Removed the problematic top: 50% and transform: translateY(-50%) */
        /* The parent .modal already uses flexbox with align-items: center and justify-content: center */
        /* This ensures proper centering on all devices including iPhones */
    }

    .depoimento-imagem-container-full {
        height: 300px;
    }

    .depoimento-info {
        padding: 2rem;
    }

    .depoimento-info h3 {
        font-size: 1.3rem;
    }

    .depoimento-texto {
        font-size: 1rem;
    }
}

/* Additional fix for small mobile devices */
@media screen and (max-width: 480px) {
    .depoimento-modal-content {
        width: 95%;
        max-width: 95%;
        max-height: 90vh;
    }

    .depoimento-imagem-container-full {
        height: 250px;
    }

    .depoimento-info {
        padding: 1.5rem;
    }
}
/* Garantir que o texto seja exibido completamente no modal */
.depoimento-modal-content .depoimento-texto {
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Garantir que o contêiner de informações não limite a altura */
.depoimento-modal-content .depoimento-info {
    max-height: none !important;
    overflow: visible !important;
}

/* Garantir que o corpo do modal permita expansão completa */
.depoimento-modal-body {
    min-height: auto;
    height: auto;
}

/* Fixed close button for depoimento modal that stays visible during scroll */
#depoimentoModal .close {
    position: fixed;
    right: 30px; /* Account for modal padding (20px) + button offset (10px) */
    top: 30px; /* Account for modal padding (20px) + button offset (10px) */
    z-index: 1001; /* Ensure it's above the modal content */
}

/* Adjust close button position for mobile */
@media screen and (max-width: 768px) {
    #depoimentoModal .close {
        right: 35px; /* Account for modal padding + button offset */
        top: 35px; /* Account for modal padding + button offset */
    }
}

/* Adjust close button position for very small screens */
@media screen and (max-width: 480px) {
    #depoimentoModal .close {
        right: 30px; /* Account for modal padding + button offset */
        top: 30px; /* Account for modal padding + button offset */
    }
}

/* --- ESTILOS RESPONSIVOS PARA ESTUDOS (IMPORTANTE: NO FINAL DO ARQUIVO PARA MAIOR ESPECIFICIDADE) --- */

/* Para tablets e telas médias */
@media (max-width: 768px) {
    #visualizadorEstudo #conteudoEstudo {
        font-size: 1.15rem !important; /* Redução significativa para mobile */
        line-height: 1.2 !important;
    }

    #visualizadorEstudo #conteudoEstudo h1 {
        font-size: 1.9rem !important; /* Redução significativa */
    }

    #visualizadorEstudo #conteudoEstudo h2 {
        font-size: 1.775rem !important; /* Redução significativa */
    }

    #visualizadorEstudo #conteudoEstudo h3 {
        font-size: 1.525rem !important; /* Redução significativa */
    }

    #visualizadorEstudo #conteudoEstudo h4 {
        font-size: 1rem !important; /* Redução significativa */
    }

    #visualizadorEstudo #conteudoEstudo p {
        font-size: 0.95rem !important; /* Redução significativa */
        line-height: 1.6 !important;
    }

    #visualizadorEstudo #conteudoEstudo li {
        font-size: 0.95rem !important; /* Redução significativa */
        line-height: 1.6 !important;
    }

    #visualizadorEstudo #conteudoEstudo blockquote {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    #visualizadorEstudo #conteudoEstudo .callout p {
        font-size: 1.15rem !important;
        line-height: 1.6 !important;
    }
}

/* Para smartphones e telas muito pequenas */
@media (max-width: 480px) {
    #visualizadorEstudo #conteudoEstudo {
        font-size: 1.025rem !important; /* Redução drástica */
        line-height: 1.6 !important;
    }

    #visualizadorEstudo #conteudoEstudo h1 {
        font-size: 1.65rem !important; /* Redução drástica */
    }

    #visualizadorEstudo #conteudoEstudo h2 {
        font-size: 1.525rem !important; /* Redução drástica */
    }

    #visualizadorEstudo #conteudoEstudo h3 {
        font-size: 1.4rem !important; /* Redução drástica */
    }

    #visualizadorEstudo #conteudoEstudo h4 {
        font-size: 1.275rem !important; /* Redução drástica */
    }

    #visualizadorEstudo #conteudoEstudo p {
        font-size: 1.025rem !important; /* Redução drástica */
        line-height: 1.6 !important;
    }

    #visualizadorEstudo #conteudoEstudo li {
        font-size: 1.025rem !important; /* Redução drástica */
        line-height: 1.6 !important;
    }

    #visualizadorEstudo #conteudoEstudo blockquote {
        font-size: 1.025rem !important;
        line-height: 1.6 !important;
    }

    #visualizadorEstudo #conteudoEstudo .callout p {
        font-size: 1.025rem !important;
        line-height: 1.6 !important;
    }
}

/* --- IPHONE SAFE AREA SUPPORT --- */

/* Suporte para areas seguras do iPhone (notch e home indicator) */
/* Para o body e elementos principais */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Para elementos fixos como headers e modais */
.fixed,
.modal,
#estudosModal,
#eventoModal,
#imageModal,
#valorModal,
#depoimentoModal {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Para elementos fixos na parte inferior da tela */
#floating-cart-button,
.fixed.bottom-0,
.modal-content .close {
    bottom: env(safe-area-inset-bottom);
}

/* Para o background da página */
.parallax-bg-image,
body::before {
    top: env(safe-area-inset-top);
    left: env(safe-area-inset-left);
    right: env(safe-area-inset-right);
    bottom: env(safe-area-inset-bottom);
}

/* Específico para iPhone com iOS 11+ */
@supports (padding: max(0px)) {
    body {
        padding-top: max(env(safe-area-inset-top), 0px);
        padding-bottom: max(env(safe-area-inset-bottom), 0px);
    }

    .fixed,
    .modal,
    #estudosModal,
    #eventoModal,
    #imageModal,
    #valorModal,
    #depoimentoModal {
        padding-top: max(env(safe-area-inset-top), 0px);
        padding-left: max(env(safe-area-inset-left), 0px);
        padding-right: max(env(safe-area-inset-right), 0px);
    }

    #floating-cart-button,
    .fixed.bottom-0,
    .modal-content .close {
        bottom: max(env(safe-area-inset-bottom), 0px);
    }
}

/* Ajustes específicos para modais em dispositivos iOS */
@supports (-webkit-touch-callout: none) {
    #estudosModalContent,
    #eventoModalContent,
    .depoimento-modal-content {
        border-radius: 0;
        margin-top: env(safe-area-inset-top);
        margin-bottom: env(safe-area-inset-bottom);
    }

    /* Cria elementos de background adicionais para iPhone specifically */
    body::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: url('/assets/background.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -3;
        pointer-events: none;
        opacity: 1;
    }

    /* Força os backgrounds principais a cobrirem as safe areas no iOS */
    .parallax-bg-image,
    body::before {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        transform: none !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Ajuste especifico para o notch no iOS */
    @supports (top: env(safe-area-inset-top)) {
        body {
            /* Remove padding do body no iOS para o background preencher tudo */
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        /* Adiciona padding apenas ao conteúdo principal */
        main, .main-content, #main-content {
            padding-top: env(safe-area-inset-top) !important;
            padding-bottom: env(safe-area-inset-bottom) !important;
            padding-left: env(safe-area-inset-left) !important;
            padding-right: env(safe-area-inset-right) !important;
        }
    }
}