/* Resetando o estilo básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

/*INICIO PRE LOADER*/

/* O fundo que cobre a tela */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Cor de fundo (pode ser a cor institucional) */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}

/* Estilo da Logo */
.pulsing-logo {
    width: 100px; /* Ajuste o tamanho da logo aqui */
    height: auto;
    animation: pulse 1.5s infinite ease-in-out; /* Velocidade da pulsação */
}

/* A animação de Pulso */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1); /* Aumenta 10% */
        opacity: 0.7; /* Fica um pouco transparente */
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Classe para esconder */
.preloader-hide {
    opacity: 0;
    visibility: hidden;
}

/*FIM PRE LOADER*/

/* Cores sofisticadas */
body {
    background-color: #2D2D2D;
    color: #ccc;
}

/* =========================
   NAVBAR ATUALIZADA
========================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, padding 0.3s ease;
    background: transparent;
    z-index: 1000;
}
.navbar.scrolled {
    background-color: #fff;
    padding: 15px 40px;
}
.nav-left, .nav-center, .nav-right {
    display: flex;
    align-items: center;
}

/* Menu toggle refinado */
.menu-toggle {
    position: relative;
    font-size: 1.6rem;
    cursor: pointer;
    margin-right: 8px;
    color: #fff;
    transition: transform 0.3s ease, color 0.3s ease, opacity 0.4s ease;
    z-index: 1300;
}
.menu-toggle.active {
    opacity: 0;
    transform: rotate(0deg);
}
.navbar.scrolled .menu-toggle {
    color: #000;
}

/* Label "Menu" / "X Fechar" controlado via JS */
.menu-label {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    transition: color 0.3s ease;
    margin-left: 5px;
}
.navbar.scrolled .menu-label {
    color: #000;
}

/* Logo central */
.logo {
    height: 50px;
    max-height: 80px;
    object-fit: contain;
}

/* Botão Fale Conosco refinado */
.contact-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    transition: color 0.3s ease;
}
.navbar.scrolled .contact-btn {
    color: #000;
}
.contact-btn .contact-icon { display: none; }

/* =========================
   SIDE MENU ELEGANTE
========================= */
.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100%;
    background: linear-gradient(180deg, #1a1a1a, #0d0d0d); /* degrade grafite-preto */
    box-shadow: 4px 0 15px rgba(0,0,0,0.4);
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform 0.5s ease, opacity 0.4s ease;
    opacity: 0;
    font-family: 'Georgia', serif;
}
.side-menu.active {
    transform: translateX(0);
    opacity: 1;
}

.side-menu ul {
    list-style: none;
    margin: 100px 0 0 0;
    padding: 0;
}
.side-menu li {
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08); /* separador discreto */
}
.side-menu a {
    display: block;
    padding: 18px 40px;
    color: #f2f2f2;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.side-menu a:hover {
    background: rgba(255, 215, 0, 0.08); /* dourado suave */
    color: #d4af37; /* dourado refinado */
    padding-left: 50px; /* leve movimento no hover */
}

/* Botão de fechar refinado */
.side-menu .close-side-menu {
    position: absolute;
    top: 25px;
    left: 25px;
    font-size: 1.6rem;
    color: #f2f2f2;
    cursor: pointer;
    transition: color 0.3s ease;
}
.side-menu .close-side-menu:hover {
    color: #d4af37;
}

/* Overlay escuro já existente */
.overlay-bg {
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
}

.overlay-bg.active {
    opacity: 1;
    visibility: visible;
}

/* =========================
   CONTACT PANEL
========================= */
.contact-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 350px;
    height: 100%;
    background: linear-gradient(180deg, #ffffff, #f7f1e3); /* branco → dourado claro */
    box-shadow: -4px 0 12px rgba(0,0,0,0.15);
    transition: right 0.4s ease, top 0.4s ease;
    padding: 30px 25px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'Georgia', serif;
}

/* Ativo no desktop */
.contact-panel.active {
    right: 0;
}

/* Botão de fechar */
.close-contact-panel {
    font-size: 22px;
    cursor: pointer;
    align-self: flex-end;
    margin-bottom: 20px;
    color: #333;
    transition: color 0.3s ease;
}
.close-contact-panel:hover {
    color: #b8860b; /* dourado */
}

/* Mensagem principal */
.contact-message {
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 25px;
    color: #444;
    line-height: 1.5;
    text-align: center;
    width: 100%;
}

/* Opções de contato */
.contact-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.contact-options a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.contact-options a img {
    width: 22px;
    height: 22px;
}

.contact-options a:hover {
    transform: translateY(-2px);
    background: #f7e9c5; /* dourado suave */
    color: #000;
}

/* =========================
   HERO SECTION
========================= */
.hero-section {
    width: 100%;
    height: 100vh; /* Agora o hero ocupa a tela inteira */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0D0D0D;
}
.overlay {
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.hero-content {
    color: #fff;
    text-align: center;
    animation: fadeIn 2s ease-in-out;
}
h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #E0E0E0;
}

/* =========================
   ABOUT US
========================= */
.about-us {
    background: linear-gradient(to bottom, #333333, #262626);
    padding: 50px 10%;
    text-align: center;
    color: #ccc;
    border-top: 2px solid #444444;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.about-us h2 {
    margin-bottom: 30px;
    font-size: 2rem;
    color: #E0E0E0;
}
/*
.icon-pattern {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.icon-pattern .icon {
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0.04;
    animation: moveIcons 20s ease-in-out infinite, fadeIcons 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}*/

/* =========================
   ICON ANIMATIONS
========================= */
/*@keyframes moveIcons {
    0% { transform: translate(0, 0); }
    5% { transform: translate(30px, -20px); }
    50% { transform: translate(-30px, 10px); }
    75% { transform: translate(40px, 20px); }
    100% { transform: translate(0, 0); }
}
@keyframes fadeIcons {
    0% { opacity: 0; }
    50% { opacity: 0.3; }
    100% { opacity: 0; }
}*/

/* =========================
   TEAM
========================= */
.team-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.team-member.appear {
    opacity: 1;
    transform: translateY(0);
}
.team-photo {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}
.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.team-member:hover .team-photo {
    transform: scale(1.1);
}
.team-info {
    text-align: center;
    margin-top: 10px;
    padding: 0 15px;
    line-height: 1.6;
    max-width: 900px;
}
.team-info h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #E0E0E0;
}
.team-info p {
    font-size: 1rem;
    color: #ccc;
    text-align: justify;
}

/*Indicador piscando no inicio do site*/
.scroll-indicator {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: fadeIn 2s ease-out 1s forwards;
}
.scroll-text {
    font-size: 1rem;
    color: #ccc;
    font-style: italic;
    opacity: 0;
    animation: fadeIn 2s ease-out 1s forwards, blinkText 2s infinite 3s;
}
@keyframes blinkText {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* =========================
   RESPONSIVIDADE
========================= */
@media only screen and (max-width: 768px) {
    .contact-btn .contact-text { display: none; }
    .contact-btn .contact-icon {
        display: inline;
        font-size: 1.3rem;
    }
    .logo 
    { 
        height: 40px;
        max-height: 60px;
    }
}

/* =========================
   RESPONSIVIDADE MOBILE
========================= */
@media only screen and (max-width: 768px) {
    /* Mantém só o ícone do menu, esconde o texto "Menu" */
    .menu-label {
        display: none;
    }

    /* Se quiser manter o menu toggle maior para tocar facilmente 
    .menu-toggle {
        font-size: 1.8rem;
    }*/
}

/* =========================
   SIDE MENU MOBILE
========================= */
@media only screen and (max-width: 768px) {
    .side-menu {
        width: 100%;
        height: 100%;
        padding-top: 0; /* remove espaço do topo */
        transform: translateY(-100%); /* anima de cima */
        display: flex;
        flex-direction: column;
        justify-content: center; /* centraliza links verticalmente */
        align-items: center;     /* centraliza links horizontalmente */
        text-align: center;
    }

    .side-menu.active {
        transform: translateY(0);
    }

    .side-menu ul {
        margin-top: 0;
        padding-left: 0;
        width: 100%;
    }

    .side-menu li {
        margin: 20px 0; /* espaçamento entre links */
        padding-left: 0; /* remove padding lateral */
    }

    .side-menu a {
        padding-left: 0;
        font-size: 1.3rem;
        display: block;
        width: auto; /* evita quebrar layout de hero ou imagens */
    }

    /* Botão fechar continua no topo, sem mexer no alinhamento */
    .side-menu .close-side-menu {
        top: 20px;
        left: 40px;
        transform: none; /* mantém no canto */
    }
}

/* =========================
   SIDE MENU MOBILE CORRIGIDO
========================= */
@media only screen and (max-width: 768px) {
    /* Oculta label "Menu" */
    .menu-label {
        display: none;
    }

    .side-menu {
        width: 100%;
        transform: translateY(-100%);
        text-align: center;
        box-shadow: none;
    }
    .side-menu.active {
        transform: translateY(0);
    }
    .side-menu ul {
        margin-top: 0;
    }
    .side-menu li {
        border: none;
        margin: 20px 0;
    }
    .side-menu a {
        font-size: 1.4rem;
        padding: 15px 0;
    }
    .side-menu .close-side-menu {
        left: 50%;
        transform: translateX(-50%);
        top: 30px;
    }
}

/*Fale conosco mobile*/
/* Mobile: ocupa tela toda */
@media (max-width: 768px) {
    .contact-panel {
        top: -100%;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        align-items: center;
        padding: 40px 20px;
    }

    .contact-panel.active {
        top: 0;
    }

    .contact-message {
        font-size: 1.2rem;
        margin-bottom: 30px;
    }

    .contact-options {
        align-items: center;
    }

    .contact-options a {
        width: 80%;
        justify-content: center;
    }
}


/* =========================
   ANIMAÇÕES GERAIS
========================= */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/*-------Video Hero Modification--------/*

/* Container para o vídeo ocupar a área inteira do hero */
/*
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* fica atrás do conteúdo existente 
    overflow: hidden;
}*/

/* Vídeo em tela cheia */
/*.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* garante que nunca distorça
    object-position: center;
    filter: brightness(0.6); /* deixa o texto mais visível
}*/

/* =========================
   HERO SLIDESHOW (Corrigido e Otimizado)
========================= */
.hero-slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background-color: #000; /* Fundo preto essencial */
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    
    /* === OTIMIZAÇÃO DE QUALIDADE === */
    /* Força aceleração de hardware para evitar serrilhado */
    transform: translateZ(0); 
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;

    /* A transição é apenas para a OPACIDADE (Fade in) */
    /* O Zoom é controlado pelo Keyframes abaixo */
    transition: opacity 2s ease-in-out; 
}

/* Estado Ativo */
.hero-slide.active {
    opacity: 1;
    /* O z-index será controlado pelo JS para garantir sobreposição correta */
    
    /* Animação: 
       8s de duração 
       linear (movimento constante) 
       forwards (mantém o zoom no final se o tempo passar) 
    */
    animation: kenburns 8s linear forwards; 
}

/* Keyframes: Zoom MUITO suave (apenas 8% de aumento) para não perder definição */
@keyframes kenburns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08); 
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); 
    z-index: 10; /* Sempre acima das imagens */
    pointer-events: none;
}

/* Camada extra se quiser escurecer mais */
.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25); /* ajuste se quiser mais escuro */
    pointer-events: none;
}

.hero-section .overlay {
    position: relative;
    z-index: 2; /* Mantém seus textos acima do vídeo */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

/* ============================== */
/*   NOVA SEÇÃO · EVENTOS         */
/* ============================== */

.events-section {
    position: relative;
    padding: 120px 8%;
    overflow: hidden;
    background: #fff9f5; 
}

/* Mantém o EFEITO do fundo com ícones já existente */
/*.events-section .icon-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.14;
    pointer-events: none;
}*/

/* GRID principal */
/*.events-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 70px;
    position: relative;
    z-index: 1;
}*/

/* Texto */
/*.events-text {
    font-size: 1.2rem;
    line-height: 1.7em;
    color: #1b1b1b;
    opacity: 0;
    transform: translateY(40px);
    transition: 1s ease;
}*/

/*.events-text.visible { 
    opacity: 1; 
    transform: translateY(0);
}*/

/* Título */
.events-section h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 50px;
    font-weight: 600;
    color: #1b1b1b;
}

/* Media bloco */
.events-media {
    opacity: 0;
    transform: translateY(40px);
    transition: 1s ease;
}
/*.events-media.visible { 
    opacity: 1;
    transform: translateY(0);
}*/


/* IMAGENS */
/*.events-media img {
    width: 100%;
    border-radius: 14px;
    box-shadow: rgba(0,0,0,.15) 0 8px 25px;
}*/

/* VÍDEOS */
/*.events-media video {
    width: 100%;
    border-radius: 14px;
    box-shadow: rgba(0,0,0,.15) 0 8px 25px;
    outline: none;
}*/

/* Botão para WhatsApp */
.events-btn {
    margin: 60px auto 0;
    display: block;
    width: fit-content;
    background: #c8a36b;
    color: white;
    padding: 16px 40px;
    /*font-size: 1.2rem;*/
    font-size: 17px;
    border-radius: 40px;
    font-weight: 600;
    transition: .35s;
    text-decoration: none;
}
.events-btn:hover{
    transform: scale(1.05);
    background: #b28954;
}

.testimonials-track {
    display: flex;
    gap: 40px;                 /* opcional */
    overflow-x: hidden;        /* não mostrar bordas */
    white-space: nowrap;
    scroll-behavior: auto;     /* impedir a animação brusca do reset */
}

.testimonial-item {
    flex: 0 0 auto;
}


/* ============================== */
/* RESPONSIVIDADE                 */
/* ============================== */

/*@media(max-width: 980px){
    .events-container{
        grid-template-columns: 1fr;
        text-align: center;
    }
}*/

/* =========================
 Mobile: aproximar imagem + texto e suavizar entrada
========================= */

/* Menor padding na seção eventos para mobile */
@media (max-width: 980px) {
    .events-section {
        padding: 60px 6%; /* antes 120px 8% */
    }

    /* aproxima os blocos */
    /*.events-container {
        gap: 16px !important; /* garante proximidade entre media e text 
        padding: 0;
    }*/

    /* reduz a distância do movimento de entrada para ficar mais sutil */
    /*.events-media,
    .events-text {
        transform: translateY(12px);
        transition: transform 0.6s ease, opacity 0.6s ease;
    }*/

    /* quando ficar visível, sobe um pouco e aparece */
    /*.events-media.visible,
    .events-text.visible {
        transform: translateY(0);
        opacity: 1;
    }*/

    /* garante que o texto fique logo embaixo da mídia, sem grandes margens */
    /*.events-text {
        margin-top: 8px;
        margin-bottom: 16px;
        font-size: 1.05rem;
        line-height: 1.5;
    }*/

    /* se quiser ainda mais proximidade em telas muito pequenas */
    @media (max-width: 420px) {
        .events-section { padding: 40px 4%; }
        /*.events-text { margin-top: 6px; font-size: 1rem; }*/
    }
}

/* ============================== */
/* SEÇÃO PRODUTOS (VITRINE GOURMET) */
/* ============================== */

.products-section {
    padding: 100px 8%;
    background-color: #F2EFE9; /* Tom "Linho" sofisticado - Coerente mas distinto */
    position: relative;
    border-top: 1px solid #e0ddd5;
}

/* Cabeçalho da Seção */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.products-section h2 {
    font-size: 3rem;
    color: #2c2c2c;
    font-weight: 400;
    margin-bottom: 20px;
}

/* GRID LAYOUT - A principal mudança estrutural */
.products-grid {
    display: grid;
    /* Cria colunas automáticas com largura mínima de 300px */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
}

/* O CARTÃO DO PRODUTO */
.product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Sombra suave */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-10px); /* O card flutua ao passar o mouse */
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* Área da Mídia (Foto/Video) */
.product-media {
    position: relative;
    height: 300px; /* Altura fixa para alinhar tudo */
    width: 100%;
    overflow: hidden;
}

.product-media img, 
.product-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

/* Efeito de zoom na imagem ao passar o mouse no card */
.product-card:hover .product-media img,
.product-card:hover .product-media video {
    transform: scale(1.1);
}

/* Overlay dourado sutil na imagem */
.media-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
    opacity: 0.6;
}

/* Conteúdo do Texto */
.product-content {
    padding: 35px 30px;
    text-align: center;
    flex-grow: 1; /* Garante que os cards tenham altura igual */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-content h3 {
    font-size: 1.6rem;
    color: #1a1a1a;
    font-family: 'Georgia', serif;
    margin-bottom: 15px;
}

.gold-divider {
    width: 40px;
    height: 2px;
    background-color: #d4af37;
    margin-bottom: 20px;
}

.product-content p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

.products-footer {
    margin-top: 60px;
    text-align: center;
}

/* Responsividade Específica para Cards */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr; /* 1 coluna no celular */
        gap: 30px;
    }
    
    .product-media {
        height: 250px; /* Um pouco menor no celular */
    }
}

/* ============================== */
/* BOTÃO PADRONIZADO (MINIMALISTA) */
/* ============================== */

.events-btn {
    display: block;
    width: fit-content;
    margin: 60px auto 0;
    
    /* Proporções e Tipografia */
    padding: 16px 45px;       /* Um pouco mais largo para elegância */
    /*font-size: 1.1rem;        /* Tamanho de fonte refinado */
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;    /* Espaçamento leve entre letras */
    text-transform: uppercase; /* Dá um ar mais "Boutique" */
    text-decoration: none;
    text-align: center;
    border-radius: 50px;      /* Arredondado (Pill shape) */

    /* Cores Padrão (Gold Sólido) */
    background-color: #d4af37; 
    color: #fff;           /* Texto quase preto para contraste alto */
    border: 2px solid #d4af37; /* Borda da mesma cor para o efeito hover */
    
    /* Transição Suave */
    transition: all 0.4s ease;
    box-shadow: none;         /* Garante que não tenha sombra inicial */
}

/* Efeito Hover Minimalista */
.events-btn:hover {
    background-color: transparent; /* Fundo fica transparente */
    color: #d4af37;                /* Texto vira dourado */
    transform: translateY(-4px);   /* Sobe levemente */
    
    /* Nota: Como o fundo fica transparente:
       - Na seção preta: parecerá texto dourado no fundo preto.
       - Na seção clara: parecerá texto dourado no fundo off-white.
       Ambos muito elegantes. */
}

/* Responsividade igual à de eventos */
/*@media (max-width: 980px) {
    .products-section {
        padding: 60px 6%;
    }
}*/

/* ============================== */
/* STORYTELLING SECTION (LIGHT THEME) */
/* ============================== */

/*
.story-section {
    background: #f7f7f7; /* Fundo levemente off-white 
    color: #4a4a4a; /* Cor de texto padrão escura 
    padding: 100px 8%;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}*/

/* ============================== */
/* STORYTELLING SECTION (LIGHT THEME) */
/* ============================== */

.story-section {
    background: #f7f7f7; /* Fundo levemente off-white */
    color: #4a4a4a; /* Cor de texto padrão escura */
    padding: 100px 8%;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    z-index: 1; /* Garante que a seção esteja em sua própria camada */
    background-image: none; /* Remove qualquer background-image anterior */
}

/* Novo: Camada de fundo (Espaguete Zigue-Zague) */
.story-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* SVG Codificado do Zigue-Zague Dourado */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='100%' height='100%' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMid slice' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E.gold-line{stroke:%23d4af37;stroke-width:40;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0.8;}%3C/style%3E%3C/defs%3E%3Cpath class='gold-line' d='M 100 0 C 250 150, 450 50, 600 200 S 850 400, 700 600 C 550 800, 750 950, 900 1000' /%3E%3C/svg%3E");
    background-repeat: repeat;
    background-position: center center;
    background-size: 800px 800px;
    opacity: 0.08; /* MUITO SUTIL - Ajuste este valor se quiser mais visível (ex: 0.15) */
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}

/* Garante que o conteúdo fique sobre o fundo (z-index: 2) */
.chef-spotlight, .team-header, .team-container {
    position: relative;
    z-index: 2;
}
/* ... resto da seção .chef-spotlight etc. continua igual ... */

/* --- CHEF SPOTLIGHT (LAYOUT ASSIMÉTRICO) --- */
.chef-spotlight {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 150px;
}

/* Container da imagem da Chef */
.chef-image-container {
    flex: 1;
    position: relative;
    max-width: 500px;
}

.chef-img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 4px;
    filter: none; /* Remove o filtro, deixa a cor original da foto */
    /* Sombra escura para contraste no fundo claro */
    box-shadow: 20px 20px 0px rgba(0, 0, 0, 0.1); 
    transition: transform 0.5s ease;
    border: 1px solid #ddd;
}

.chef-image-container:hover .chef-img {
    transform: scale(1.02) translate(-5px, -5px);
}

/* Detalhe da Chef: Mantido escuro/dourado para ser um ACENTO forte no fundo claro */
.chef-badge {
    position: absolute;
    bottom: 30px;
    right: -20px;
    background: #d4af37;
    color: #1a1a1a;
    padding: 10px 25px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Texto da Chef */
.chef-bio {
    flex: 1;
    padding-left: 20px;
}

.script-title {
    font-family: 'Georgia', serif;
    font-style: italic;
    color: #6a6a6a; /* Tom de cinza suave */
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.chef-bio h3 {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 30px;
    color: #1a1a1a; /* Título principal escuro */
    font-weight: 300;
}

.intro-text {
    font-size: 1.4rem;
    font-style: italic;
    border-left: 3px solid #d4af37; /* Mantém o detalhe dourado */
    padding-left: 20px;
    margin-bottom: 25px;
    color: #333;
}

.body-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a4a4a;
    margin-bottom: 30px;
    text-align: justify;
}

.signature-img {
    height: 60px;
    opacity: 0.8;
    filter: none; /* Deixa a imagem da assinatura preta/original */
}


/* --- TEAM GRID (INTERATIVO) --- */
.team-header {
    text-align: center;
    margin-bottom: 60px;
}
.team-header h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 10px;
}
.team-header p {
    color: #6a6a6a;
    font-style: italic;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.team-card {
    position: relative;
    height: 450px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent; /* Remove o fundo branco para mostrar apenas a imagem */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Sombra um pouco mais forte na imagem */
    transition: transform 0.3s ease;
}
.team-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    transform: translateY(-5px); /* Dá um leve destaque ao card no hover */
}

/* ============================== */
/* TEAM CARD FIX PARA MOBILE      */
/* ============================== */

/* NOVO: Aplica o efeito de hover quando a classe 'mobile-active' estiver presente */

/* 1. Zoom na imagem */
.team-card.mobile-active .card-image img {
    transform: scale(1.1); 
}

/* 2. Sobe o overlay */
.team-card.mobile-active .card-overlay {
    transform: translateY(0); 
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.4));
}

/* 3. Mostra o parágrafo */
.team-card.mobile-active .card-overlay p {
    opacity: 1; 
}

/* NOVO: Garante que o contêiner da imagem ocupe 100% da altura do card */
.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}

.card-image img {
    width: 100%;
    height: 100%; /* A imagem preenche 100% do novo contêiner */
    object-fit: cover;
    transition: transform 0.6s ease;
    filter: brightness(0.95); /* Opacidade sutil para realçar o overlay de texto */
}

/* O Overlay escuro com texto deve se manter, para dar contraste na revelação do texto */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Gradient escuro para garantir que o texto claro funcione */
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0)); 
    padding: 30px 20px;
    transform: translateY(60px); 
    transition: transform 0.4s ease;
    z-index: 10; /* Garante que o texto fique acima de tudo */
}

/* Cores do texto no Overlay (Mantidas claras para o contraste do gradiente) */
.card-overlay h4 {
    color: #d4af37;
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.card-overlay span {
    display: block;
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.card-overlay p {
    color: #ccc;
    font-size: 0.95rem;
    opacity: 0; 
    transition: opacity 0.4s ease 0.1s;
}

/* Efeito Hover no Card (Mantido, funciona bem) */
.team-card:hover .card-image img {
    transform: scale(1.1); 
}

.team-card:hover .card-overlay {
    transform: translateY(0); 
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.4));
}

.team-card:hover .card-overlay p {
    opacity: 1; 
}


/* --- CLASSES DE ANIMAÇÃO (REVEAL) --- (Sem alterações) */
.reveal-trigger {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-trigger.active-reveal {
    opacity: 1;
    transform: translateY(0);
}

.delay-200 { transition-delay: 0.2s; }
.delay-400 { transition-delay: 0.4s; }
.delay-600 { transition-delay: 0.6s; }


/* RESPONSIVIDADE STORY (Sem alterações) */
@media (max-width: 900px) {
    .chef-spotlight {
        flex-direction: column;
        gap: 40px;
    }
    .chef-image-container {
        width: 100%;
        max-width: 100%;
    }
    .chef-img {
        height: 400px;
    }
    .chef-bio {
        padding-left: 0;
        text-align: center;
    }
    .intro-text {
        border-left: none;
        border-bottom: 2px solid #d4af37;
        padding-bottom: 15px;
        padding-left: 0;
    }
}

/* ==========================================
   HEADER REFINADO
========================================== */
.team-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 100px auto;
    padding: 0 20px;
}

.team-header h2 {
    font-size: 3.5rem; /* Maior e mais imponente */
    color: #e0e0e0;
    font-weight: 300; /* Fonte mais fina é mais chique */
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.separator-gold {
    width: 60px;
    height: 3px;
    background-color: #d4af37;
    margin: 0 auto 20px auto;
}

.team-header p {
    font-size: 1.1rem;
    color: #888;
    font-family: 'Georgia', serif;
    font-style: italic;
}

/* ==========================================
   ESTRUTURA DA LINHA (ZIG-ZAG)
========================================== */
.team-container {
    display: flex;
    flex-direction: column;
    gap: 120px; /* Muito espaço entre os chefes */
    padding-bottom: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.artisan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5%;
    position: relative;
}

/* Classe para inverter a ordem no segundo chefe */
.artisan-row.reverse {
    flex-direction: row-reverse;
}

/* ==========================================
   GALERIA DE PRATOS (COMPOSIÇÃO ARTÍSTICA)
========================================== */
.artisan-gallery {
    position: relative;
    width: 50%; /* Ocupa metade da linha */
    height: 400px; /* Altura da área de composição */
    display: flex;
    align-items: center;
    justify-content: center;
}

.dish-frame {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5); /* Sombra profunda */
    border-radius: 4px; /* Bordas levemente arredondadas, mais elegante que círculo ou quadrado total */
    transition: all 0.6s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

.dish-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    filter: brightness(0.8); /* Levemente escuro para destacar o chefe */
}

/* A Imagem Principal (Maior) */
.primary-dish {
    width: 320px;
    height: 240px;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centralizado */
}

/* A Imagem Secundária (Menor e Deslocada) */
.secondary-dish {
    width: 200px;
    height: 150px;
    z-index: 1;
    /* Posição padrão: Superior esquerda */
    top: 0;
    left: 10%;
}

/* Ajuste da imagem secundária na linha invertida para equilibrar */
.artisan-row.reverse .secondary-dish {
    left: auto;
    right: 10%;
}

/* Hover Efeito na Galeria */
.artisan-row:hover .dish-frame {
    transform: translate(-50%, -50%) scale(1.02); /* Movimento sutil */
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.artisan-row:hover .secondary-dish {
    /* Mantém a posição relativa mas dá um "float" */
    transform: translateY(-10px); 
}
.artisan-row:hover .dish-frame img {
    transform: scale(1.1);
    filter: brightness(1); /* Acende a imagem */
}

/* ==========================================
   CARD DO CHEFE (PREMIUM)
========================================== */
.artisan-card {
    width: 45%; /* Ocupa a outra metade */
    height: 550px; /* Bem alto e elegante */
    border-radius: 8px; /* Refinando o border-radius */
    /* Removemos o box-shadow padrão para usar um mais sofisticado */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.artisan-card .card-image img {
    filter: grayscale(20%); /* Levemente desaturado para elegância */
}

/*
.artisan-card:hover .card-image img {
    filter: grayscale(0%); /* Cor total no hover
    transform: scale(1.05);
}*/
/* 1. Imagem: Ganha cor e zoom */
.artisan-card:hover .card-image img,
.artisan-card.mobile-hover-active .card-image img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Refinando o Overlay de Texto do Chefe */
.artisan-card .card-overlay {
    background: linear-gradient(to top, #1a1a1a 10%, rgba(26,26,26,0.95) 40%, transparent 100%);
    padding: 40px 30px;
}

.chef-role {
    font-size: 0.85rem;
    color: #d4af37; /* Dourado */
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.5s ease 0.1s;
}

.artisan-card h4 {
    font-size: 2rem;
    color: #fff;
    font-family: 'Georgia', serif;
    margin-bottom: 10px;
    font-weight: 400;
}

.gold-line {
    width: 0;
    height: 2px;
    background: #d4af37;
    margin-bottom: 15px;
    transition: width 0.6s ease;
}

/* Animações ao passar o mouse no Card */
/*
.artisan-card:hover .chef-role {
    opacity: 1;
    transform: translateY(0);
}*/
/* 2. Cargo/Formação (O que estava faltando): Aparece */
.artisan-card:hover .chef-role,
.artisan-card.mobile-hover-active .chef-role {
    opacity: 1;
    transform: translateY(0);
}

/*
.artisan-card:hover .gold-line {
    width: 50px;
}*/
/* 3. Linha Dourada: Cresce */
.artisan-card:hover .gold-line,
.artisan-card.mobile-hover-active .gold-line {
    width: 50px;
}

/* ==========================================
   RESPONSIVIDADE INTELIGENTE
========================================== */
@media (max-width: 900px) {
    .team-header h2 {
        font-size: 2.5rem;
    }
    
    .team-container {
        gap: 60px;
    }

    .artisan-row, .artisan-row.reverse {
        flex-direction: column; /* Empilha tudo */
        gap: 30px;
    }

    .artisan-gallery, .artisan-card {
        width: 100%; /* Ocupa largura total */
    }

    /* Ajuste da galeria no mobile para não ficar gigante */
    .artisan-gallery {
        height: 300px;
        margin-bottom: 20px;
    }
    
    .primary-dish {
        width: 260px;
        height: 180px;
    }
    
    .secondary-dish {
        width: 160px;
        height: 120px;
        left: 5% !important; /* Força alinhamento no mobile */
        right: auto !important;
    }
    
    .artisan-card {
        height: 450px; /* Um pouco menor no mobile */
    }
}

/* ==========================================
   AJUSTE DE ORDEM NO MOBILE (max-width: 900px)
   Card do Artesão no topo, Galeria embaixo
========================================== */
@media (max-width: 900px) {
    
    .artisan-row, 
    .artisan-row.reverse {
        /* Garante que eles estão empilhados verticalmente (já estava no código) */
        flex-direction: column; 
    }

    /* 1. O Card do Artesão aparece primeiro (ordem 1) */
    .artisan-row .artisan-card {
        order: 1;
    }
    
    /* 2. A Galeria de Pratos aparece em segundo (ordem 2) */
    .artisan-row .artisan-gallery {
        order: 2;
        /* Adiciona uma margem superior para separar o card */
        margin-top: 20px; 
    }
    
    /* Outros ajustes de mobile (mantidos do código anterior) */
    .artisan-gallery {
        height: 300px;
        margin-bottom: 0; /* Remove a margem inferior que não é mais necessária */
    }

    .artisan-card {
        height: 450px; 
    }
}
/* ============================== */
/* SEÇÃO PARCEIROS (PRESTIGE DUO) */
/* ============================== */

.partners-section-prestige {
    background: #fff;
    padding: 120px 0; /* Bastante espaço vertical para dar importância */
    text-align: center;
    position: relative;
    /* Uma borda sutil em baixo para fechar a seção */
    border-bottom: 1px solid #f0f0f0; 
}

/* Títulos Refinados */
.partners-header h2 {
    font-size: 2.8rem;
    color: #222;
    margin-bottom: 15px;
    font-weight: 400; /* Letra mais fina fica mais chique */
    letter-spacing: 1px;
}

.subtitle-gold {
    display: block;
    color: #d4af37;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-weight: 700;
}

.separator-gold-mini {
    width: 40px;
    height: 2px;
    background-color: #d4af37;
    margin: 0 auto 60px auto; /* Espaço grande até os logos */
}

/* Container do Duo */
.duo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px; /* Distância entre os dois parceiros */
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* Cartão do Parceiro (Foco no Logo) */
.partner-card-prestige {
    position: relative;
    width: 350px; /* Tamanho generoso */
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.partner-card-prestige img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Estado inicial: Escala de cinza e levemente opaco para elegância */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.5s ease;
}

/* Divisor Vertical (Aquele toque de 'separação' fina) */
.vertical-gold-line {
    width: 1px;
    height: 100px; /* Altura da linha */
    background: linear-gradient(to bottom, transparent, #d4af37, transparent);
    opacity: 0.5;
}

/* --- INTERAÇÃO (HOVER) --- */

/* Ao passar o mouse no card */
.partner-card-prestige:hover {
    transform: translateY(-10px); /* Flutua levemente */
}

.partner-card-prestige:hover img {
    filter: grayscale(0%) opacity(1); /* Traz a cor real */
    transform: scale(1.05); /* Leve zoom */
    /* Se os logos tiverem sombra própria, isso ajuda a destacar */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); 
}

/* Texto de rodapé da seção */
.partners-footer-text {
    margin-top: 60px;
    color: #999;
    font-style: italic;
    font-family: 'Georgia', serif;
    font-size: 1rem;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .duo-container {
        flex-direction: column; /* Um em cima do outro no celular */
        gap: 40px;
    }

    /* Transforma a linha vertical em horizontal no mobile, ou esconde */
    .vertical-gold-line {
        width: 100px;
        height: 1px;
        background: linear-gradient(to right, transparent, #d4af37, transparent);;
    }

    .partner-card-prestige {
        width: 100%;
        max-width: 280px; /* Um pouco menor no mobile */
        height: 150px;
    }
}

/* Ajuste específico para mobile */
@media (max-width: 768px) {
    .vertical-gold-line {
        margin: 20px 0 !important;   /* adiciona respiro acima e abaixo */
    }
}

/*
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ESSENCIAL: Garante que o vídeo preencha o container sem distorcer 
}*/

/* ==================================== */
/*  EVENTS SECTION — ADAPTADA PARA MATCH COM PRODUTOS */
/* ==================================== */

.events-section {
    padding: 80px 20px;
    background: #fafafa;
    text-align: center;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
}

/* CARD */
.event-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* MÍDIA */
.event-media {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
}

.event-media img,
.event-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-media .media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.28));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.event-card:hover .media-overlay {
    opacity: 1;
}

/* CONTEÚDO */
.event-content {
    padding: 25px;
}

.event-content h3 {
    font-weight: 600;
    font-size: 1.6rem;
    color: #1a1a1a;
    font-family: 'Georgia', serif;
    margin-bottom: 15px;
}

.event-content p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

/* FOOTER */
.events-footer {
    margin-top: 40px;
}

.events-section .events-btn {
    padding: 14px 34px;
    font-size: 17px;
}

/* Garante que o conteúdo do card esteja centralizado */
.event-content {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centraliza horizontalmente título + divider + texto */
    text-align: center;
}

/* Força a linha dourada a ter largura fixa e ficar centralizada */
.event-content .gold-divider,
.event-content .gold-line {
    width: 40px;           /* ajuste a largura que preferir */
    height: 2px;
    background-color: #d4af37;
    margin: 10px 0;        /* espaço acima/abaixo */
    align-self: center;    /* reforça o centro no flexbox */
}

/* Segurança: garante que títulos usem comportamento de bloco centralizado */
.event-content h3,
.event-content .titulo-evento {
    display: block;
    margin: 0;
    text-align: center;
}

/* =========================================
   NOVA SEÇÃO DE DEPOIMENTOS (PREMIUM STATIC)
   ========================================= */

.reviews-premium-section {
    background-color: #1b1b1b; /* Fundo grafite quase preto */
    padding: 120px 8%;
    border-top: 1px solid #333;
    position: relative;
    /* Adicionando uma textura sutil de ruído ou gradiente se desejar */
    background-image: radial-gradient(circle at top right, #2a2a2a 0%, transparent 40%);
}

.reviews-premium-grid {
    display: grid;
    /* Cria 3 colunas iguais, mas quebram se ficar pequeno */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* O CARTÃO DE DEPOIMENTO */
.review-card-premium {
    background: #252525;
    padding: 50px 40px;
    border-radius: 4px; /* Cantos pouco arredondados = mais sério/elegante */
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Marca d'água de aspas */
.quote-mark {
    font-family: 'Georgia', serif;
    font-size: 6rem;
    line-height: 0.5;
    color: #d4af37;
    opacity: 0.15;
    position: absolute;
    top: 30px;
    left: 20px;
    pointer-events: none; /* O clique atravessa */
    transition: opacity 0.4s ease;
}

/* O Texto do depoimento */
.review-text {
    font-family: 'Georgia', serif; /* Fonte serifada para leitura confortável e chique */
    font-size: 1.15rem;
    font-style: italic;
    color: #d1d1d1;
    line-height: 1.8;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

/* Rodapé do card (Autor) */
.review-author {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.author-line {
    width: 30px;
    height: 2px;
    background-color: #444;
    margin-bottom: 15px;
    transition: width 0.4s ease, background-color 0.4s ease;
}

.review-author h4 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.review-author span {
    color: #888;
    font-size: 0.85rem;
}

.stars {
    color: #d4af37;
    margin-top: 10px;
    font-size: 0.9rem;
    letter-spacing: 3px;
}

/* --- EFEITOS DE HOVER --- */
.review-card-premium:hover {
    transform: translateY(-10px); /* Sobe levemente */
    background: #2a2a2a;
    border-color: rgba(212, 175, 55, 0.3); /* Borda fica dourada bem suave */
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.review-card-premium:hover .quote-mark {
    opacity: 0.4; /* Aspas ficam mais visíveis */
    color: #d4af37;
}

.review-card-premium:hover .author-line {
    width: 100%; /* A linha cresce ocupando o espaço */
    background-color: #d4af37; /* Fica dourada */
}

/* Destaque para o card do meio (opcional) */
.review-card-premium.highlight {
    background: #2a2a2a; /* Já começa um pouco mais claro */
    border-color: rgba(212, 175, 55, 0.1);
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .reviews-premium-section {
        padding: 80px 6%;
    }
    .review-card-premium {
        padding: 40px 30px;
    }
    /* IGUALA OS EVENTOS AOS PRODUTOS NO MOBILE */
    .event-media {
        height: 250px; /* Mesma altura que o .product-media em mobile */
    }

    .events-section,
    .products-section {
        /* Padroniza o padding lateral para ambos no mobile */
        padding-left: 30px;
        padding-right: 30px;
    }
}

/*Efeito auto-hover em mobile*/
/*Parceiros*/
.partner-card-prestige:hover,
.partner-card-prestige.mobile-hover-active { /* <--- ADICIONADO */
    transform: translateY(-10px);
}

.partner-card-prestige:hover img,
.partner-card-prestige.mobile-hover-active img { /* <--- ADICIONADO */
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); 
}

/*Equipe*/
/* Efeito na Imagem */
.team-card:hover .card-image img,
.team-card.mobile-hover-active .card-image img { 
    transform: scale(1.1); 
}

/* Efeito no Overlay e Texto */
.team-card:hover .card-overlay,
.team-card.mobile-hover-active .card-overlay { 
    transform: translateY(0); 
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.4));
}

.team-card:hover .card-overlay p,
.team-card.mobile-hover-active .card-overlay p { 
    opacity: 1; 
}

/*Produtos e eventos*/
/* Movimento do Card */
.product-card:hover, .product-card.mobile-hover-active,
.event-card:hover, .event-card.mobile-hover-active {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* Zoom na Mídia */
.product-card:hover .product-media img,
.product-card.mobile-hover-active .product-media img,
.product-card:hover .product-media video,
.product-card.mobile-hover-active .product-media video,
.event-card:hover .event-media img,
.event-card.mobile-hover-active .event-media img {
    transform: scale(1.1);
}

/* Overlay Escuro */
.event-card:hover .media-overlay,
.event-card.mobile-hover-active .media-overlay {
    opacity: 1;
}

/*Comentários dos clientes*/
.review-card-premium:hover,
.review-card-premium.mobile-hover-active {
    transform: translateY(-10px);
    background: #2a2a2a;
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.review-card-premium:hover .quote-mark,
.review-card-premium.mobile-hover-active .quote-mark {
    opacity: 0.4;
    color: #d4af37;
}

.review-card-premium:hover .author-line,
.review-card-premium.mobile-hover-active .author-line {
    width: 100%;
    background-color: #d4af37;
}

/* =======================================================
   CORREÇÃO DE SUAVIZAÇÃO - EVENTS SECTION
   ======================================================= */

/* 1. O CARD (Base) */
.event-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    
    /* AQUI ESTÁ O SEGREDO: 'all' pega sombra, transform, cor, tudo. */
    /* 0.5s ease-out garante uma parada suave */
    transition: all 0.5s ease-out; 
    
    /* Otimização para celular (evita tremidas) */
    will-change: transform, box-shadow; 
}

/* Estado Ativo (Desktop Hover + Mobile Scroll) */
.event-card:hover, 
.event-card.mobile-hover-active {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* 2. A MÍDIA (Container) */
.event-media {
    position: relative;
    height: 300px;
    overflow: hidden; /* Garante que o zoom não saia da caixa */
}

/* 3. IMAGEM E VÍDEO (O Zoom) */
.event-media img,
.event-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* CORREÇÃO IMPORTANTE: Transição deve estar aqui no elemento base */
    /* 0.8s para o zoom ser mais lento e cinematográfico que a subida do card */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Aplica o Zoom */
.event-card:hover .event-media img,
.event-card.mobile-hover-active .event-media img,
.event-card:hover .event-media video,
.event-card.mobile-hover-active .event-media video {
    transform: scale(1.1);
}

/* 4. O OVERLAY ESCURO (Fade In) */
.event-media .media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
    opacity: 0;
    
    /* Suaviza o aparecimento e desaparecimento */
    transition: opacity 0.5s ease;
}

/* Mostra o Overlay */
.event-card:hover .media-overlay,
.event-card.mobile-hover-active .media-overlay {
    opacity: 1;
}

/* 5. TÍTULOS E TEXTOS (Opcional: mudança de cor suave) */
.event-content h3 {
    font-weight: 600;
    font-size: 1.6rem;
    color: #1a1a1a;
    font-family: 'Georgia', serif;
    margin-bottom: 15px;
    transition: color 0.3s ease; /* Suaviza se mudar a cor no futuro */
}

/*Novo ajuste de layout para sessão de eventos*/
/* ==================================== */
/*  EVENTS SECTION — MATCH PERFEITO COM PRODUTOS */
/* ==================================== */

.events-section {
    padding: 100px 8%; /* Mesmo padding da seção de produtos */
    background: #fafafa;
    text-align: center;
    border-top: 1px solid #e0ddd5; /* Mesma borda sutil */
}

/* Título igual */
.events-section h2 {
    font-size: 3rem;
    color: #2c2c2c;
    font-weight: 400;
    margin-bottom: 60px;
}

/* GRID IDENTICO AO DE PRODUTOS */
.events-grid {
    display: grid;
    /* Colunas automáticas iguais aos produtos */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
}

/* CARD IDENTICO AO DE PRODUTOS */
.event-card {
    background: #fff;
    border-radius: 12px; /* Igual produtos */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    
    /* ESTA É A MÁGICA DO ALINHAMENTO: */
    display: flex; 
    flex-direction: column; /* Faz o conteúdo fluir de cima para baixo */
    height: 100%; /* Garante que o card ocupe toda altura da linha do grid */
}

.event-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* MÍDIA (FOTO/VIDEO) */
.event-media {
    position: relative;
    height: 300px; /* Altura fixa igual produtos */
    width: 100%;
    overflow: hidden;
}

.event-media img,
.event-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

/* Zoom no hover igual produtos */
.event-card:hover .event-media img,
.event-card:hover .event-media video {
    transform: scale(1.1);
}

.event-media .media-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
    opacity: 0.6; /* Igual produtos */
    transition: opacity 0.3s ease;
}

/* CONTEÚDO (TEXTO) */
.event-content {
    padding: 35px 30px; /* Padding generoso igual produtos */
    text-align: center;
    
    /* ESTA É A MÁGICA DO ALINHAMENTO INTERNO: */
    flex-grow: 1; /* Ocupa todo o espaço restante, empurrando o footer se houver */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Alinha texto no topo */
}

.event-content h3 {
    font-size: 1.6rem;
    color: #1a1a1a;
    font-family: 'Georgia', serif;
    margin-bottom: 15px;
}

.event-content p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

/* DIVISOR DOURADO (Igual Produtos) */
.gold-divider {
    width: 40px;
    height: 2px;
    background-color: #d4af37;
    margin-bottom: 20px;
    margin-top: 5px; /* Ajuste fino */
}

/* BOTÃO (Opcional se houver botão dentro do card) */
.event-card .events-btn {
    margin-top: auto; /* Empurra o botão para o final se estiver dentro do card */
    margin-bottom: 0;
}

/* ==========================================
   RESPONSIVIDADE (MOBILE) - A CORREÇÃO PRINCIPAL
========================================== */
@media (max-width: 768px) {
    /* Garante 1 coluna no celular e alinha gaps */
    .events-grid {
        grid-template-columns: 1fr; /* Força 1 coluna */
        gap: 30px;
        padding: 0 10px; /* Pequeno respiro lateral */
    }
    
    .events-section {
        padding: 60px 6%; /* Reduz padding vertical no mobile */
    }

    .event-media {
        height: 250px; /* Altura proporcional no mobile */
    }
    
    .event-content {
        padding: 25px 20px;
    }
}