:root {
    /* Cores primárias (Azul da Cardiofinni) */
    --color-primary: #009db3;
    /* Azul principal */
    --color-primary-light: #52929E;
    /* Azul claro (para detalhes) */
    --color-primary-dark: #0e414a;
    /* Azul escuro (para ênfase) */

    /* Cor secundária (Vermelho) */
    --color-secondary: #E32434;
    /* Vermelho vibrante */
    --color-secondary-light: #F25A67;
    /* Vermelho claro (para elementos interativos) */
    --color-secondary-dark: #B51A27;
    /* Vermelho escuro (para botões e alertas) */

    /* Cor terciária (Complementar) */
    --color-tertiary: #F0E68C;
    /* Amarelo suave (para destacar informações) */
    --color-tertiary-light: #FFF2B2;
    /* Amarelo muito claro (para fundos sutis) */
    --color-tertiary-dark: #C1B46D;
    /* Amarelo ocre (para detalhes mais ricos) */

    /* Cores neutras */
    --color-dark: #333333;
    /* Cinza escuro (para textos importantes) */
    --color-text: #4A4A4A;
    /* Cinza médio (para textos gerais) */
    --color-muted: #777777;
    /* Cinza claro (para legendas e dicas) */
    --color-light: #FFFFFF;
    /* Branco */
    --color-background: #fff;
    /* Cinza muito claro (para fundos) */
    --color-border: #DDDDDD;
    /* Cinza bem claro (para bordas) */

    /* Cores de destaque */
    --color-accent: #50B9A3;
    /* Verde água (para elementos interativos) */

    /* Tipografia */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Source Sans Pro', sans-serif;

    /* Tamanhos de fonte */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */
    --text-6xl: 3.75rem;
    /* 60px */

    /* Pesos de fonte */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Espaçamentos */
    --spacing-xs: 0.25rem;
    /* 4px */
    --spacing-sm: 0.5rem;
    /* 8px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-2xl: 3rem;
    /* 48px */
    --spacing-3xl: 4rem;
    /* 64px */

    /* Border radius */
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 1rem;
    /* 16px */
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Transições */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* Layout */
    --container-width: 1200px;
    --header-height: 80px;
    --header-height-mobile: 64px;

    /* Z-index layers */
    --z-below: -1;
    --z-normal: 1;
    --z-above: 10;
    --z-modal: 100;
    --z-toast: 1000;
}

/* ===== Reset & Base Styles ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height-mobile);
}

@media (min-width: 768px) {
    html {
        scroll-padding-top: var(--header-height);
    }
}

body {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* notificações! */
/* Estilos Base para Notificações */
.notification {
    padding: 15px 20px;
    /* Mais padding para um visual mais espaçoso */
    border-radius: 8px;
    /* Cantos mais arredondados */
    margin-bottom: 20px;
    /* Mais espaçamento abaixo */
    font-weight: 600;
    /* Um pouco mais encorpado */
    font-size: 1rem;
    /* Tamanho de fonte padrão */
    text-align: center;
    opacity: 0;
    /* Inicialmente invisível para a animação de entrada */
    transform: translateY(-20px);
    /* Começa um pouco acima para a animação de slide-down */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, background-color 0.3s ease;
    /* Transições suaves */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Sombra suave para profundidade */
    will-change: opacity, transform;
    /* Otimização para animação */
}

/* Animação de Entrada para Notificações */
.notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* Estado de Carregamento */
.notification.loading {
    background-color: #e0f7fa;
    /* Um azul claro suave */
    color: #00796b;
    /* Verde-azulado escuro */
    border: 1px solid #b2ebf2;
    display: flex;
    /* Para centralizar o spinner/texto */
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Espaço entre o spinner e o texto */
}

/* Estilos do Spinner de Carregamento (Puro CSS) */
.spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid #00796b;
    /* Cor do spinner */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    /* Animação de rotação */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Estado de Sucesso */
.notification.success {
    background-color: #e8f5e9;
    /* Um verde claro suave */
    color: #2e7d32;
    /* Verde escuro */
    border: 1px solid #c8e6c9;
}

/* Estado de Erro */
.notification.error {
    background-color: #ffebee;
    /* Um vermelho claro suave */
    color: #c62828;
    /* Vermelho escuro */
    border: 1px solid #ffcdd2;
}

/* Animação para mensagens de sucesso/erro (opcional, um leve "pulse") */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.01);
    }

    /* Levemente maior */
    100% {
        transform: scale(1);
    }
}

.notification.success.show,
.notification.error.show {
    animation: pulse 0.5s ease-in-out;
    /* Aplica o pulse na aparição */
}


/* Animação de saída (se você quisesse fazer a notificação desaparecer suavemente,
   seria necessário um pouco mais de JavaScript para gerenciar a remoção da classe 'show'
   e, após a animação de saída, remover o elemento do DOM. Por enquanto,
   ela apenas some quando outra notificação aparece ou o form reseta.
   /* Se quiser uma animação de saída: */
.notification.hide {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}


img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-normal);
}

a:hover,
a:focus {
    color: var(--color-secondary-dark);
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--color-dark);
}

/* ===== Accessibility ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    padding: var(--spacing-md);
    background-color: var(--color-primary);
    color: var(--color-dark);
    z-index: var(--z-toast);
    transition: top var(--transition-normal);
}

.skip-link:focus {
    top: 0;
}


/* Header da seção */
.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-3xl);
}

.section-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--color-primary);
    color: var(--color-dark);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-md);
}

.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text);
    margin-top: var(--spacing-md);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/* ===== Layout & Container ===== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--spacing-lg);
}

section {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
    position: relative;
}

/* ===== Typography ===== */
.section-title {
    font-size: var(--text-3xl);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
}

.highlight {
    color: var(--color-primary);
    position: relative;
}

.sand-text-effect {
    position: relative;
    display: inline-block;
    color: var(--color-tertiary);
    /* Usando uma cor laranja para destacar "na areia" */
    font-weight: var(--weight-semibold);
    transition: all var(--transition-normal);
}

.sand-text-effect::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 4px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 30"><path d="M0,0 C150,40 350,-10 500,20 C650,50 700,0 850,10 C1000,20 1150,40 1200,0 L1200,30 L0,30 Z" fill="var(--color-primary)" opacity="0.7"/></svg>') repeat-x;
    opacity: 0.8;
    transform-origin: center;
    transition: opacity var(--transition-normal);
    animation: waveEffect2 10s linear infinite;
}

/* Estilo para os pontos de carregamento */
.loading-dots:after {
    content: ' .';
    animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        color: rgba(0, 0, 0, 0);
        text-shadow:
            .25em 0 0 rgba(0, 0, 0, 0),
            .5em 0 0 rgba(0, 0, 0, 0);
    }

    40% {
        color: black;
        text-shadow:
            .25em 0 0 rgba(0, 0, 0, 0),
            .5em 0 0 rgba(0, 0, 0, 0);
    }

    60% {
        text-shadow:
            .25em 0 0 black,
            .5em 0 0 rgba(0, 0, 0, 0);
    }

    80%,
    100% {
        text-shadow:
            .25em 0 0 black,
            .5em 0 0 black;
    }
}

.mark {
    position: relative;
    display: inline-block;
    color: var(--color-tertiary);
    /* Usando uma cor laranja para destacar "na areia" */
    transition: all var(--transition-normal);
}

.mark:hover {
    color: var(--color-tertiary-dark);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size: var(--text-base);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    color: var(--color-dark);
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.4s ease-out;
    z-index: -1;
}

.btn:hover::before {
    transform: translateX(0);
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(252, 163, 17, 0.3);
}

.btn:active {
    transform: translateY(1px);
}

.btn__icon {
    margin-right: var(--spacing-sm);
    font-size: 1.2em;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-dark);
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-dark);
}

.btn--secondary {
    background-color: var(--color-secondary);
    color: var(--color-light);
}

.btn--secondary:hover {
    background-color: var(--color-secondary-dark);
    color: var(--color-light);
}

.btn--accent {
    background-color: var(--color-accent);
    color: var(--color-light);
}

.btn--accent:hover {
    background-color: var(--color-secondary);
    color: var(--color-light);
}

.btn--text {
    padding: 0.75rem 0;
    color: var(--color-secondary);
    background-color: transparent;
    box-shadow: none;
}

.btn--text:hover {
    color: var(--color-secondary-dark);
    background-color: transparent;
}

.btn--text::before {
    display: none;
}

.btn--text-accent {
    padding: 0.75rem 0;
    color: white;
    background-color: transparent;
    box-shadow: none;
}

.btn--text-accent:hover {
    color: var(--color-tertiary);
    background-color: transparent;
}

.btn--text-accent::before {
    display: none;
}

.btn--nav {
    padding: 0.6rem 1.2rem;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--color-primary-dark);
    border: 2px solid var(--color-primary);
}

.btn--nav:hover {
    background-color: var(--color-primary);
    color: var(--color-dark);
}

.btn--large {
    padding: 1rem 2rem;
    font-size: var(--text-lg);
    border-radius: var(--radius-lg);
}

.btn--small {
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}

.btn--full {
    width: 100%;
}

/* ===== Header & Navigation ===== */
.header {
    position: fixed;
    /* MUDANÇA CRUCIAL: De 'sticky' para 'fixed' */
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height-mobile);
    background-color: transparent;
    /* Já está transparente */

    z-index: var(--z-above);
    /* Garante que o header fique ACIMA de outros elementos */
    transition: all var(--transition-normal);
}

.header.scrolled {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
    .header {
        height: var(--header-height);
    }
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Estilos para o contêiner da logo */
.logo {
    display: flex;
    /* Mantém o layout flexível */
    align-items: center;
    /* Centraliza verticalmente o conteúdo */
    z-index: var(--z-above);
    /* Não defina width ou max-width aqui, a imagem dentro se ajustará */
    justify-content: flex-start;
    /* Adicione esta linha */
}

/* Estilos para a imagem da logo */
.logo img {
    width: 100%;
    /* A imagem ocupará 100% da largura de seu contêiner (.logo) */
    height: auto;
    /* ESSENCIAL: Mantém a proporção da logo automaticamente */
    max-width: 250px;
    /* Define um tamanho máximo para a logo em telas grandes (ex: desktops).
                       Ajuste este valor para o tamanho máximo desejado da sua logo. */
    transition: all var(--transition-normal);
    /* Mantém a transição suave */
    display: block;
    /* Garante que a imagem se comporte como um bloco para melhor controle de layout */
}

/* Media Queries para diferentes tamanhos de tela */

/* Para telas menores (ex: celulares em modo retrato, até 767px de largura) */
@media (max-width: 767px) {
    .logo img {
        max-width: 250px;
        margin-top: 5px;
        margin-left: -40px;
        /* Reduz o tamanho máximo da logo para telas pequenas */
        /* Você pode ajustar este valor conforme a necessidade para celulares */
    }
}

/* Para telas médias (ex: tablets e celulares maiores, de 768px a 1023px de largura) */
@media (min-width: 768px) and (max-width: 1023px) {
    .logo img {
        max-width: 150px;
        /* Tamanho médio da logo para tablets */
    }
}

/* Para telas maiores (ex: desktops, a partir de 1024px de largura) */
@media (min-width: 1024px) {
    .logo img {
        max-width: 250px;
        /* Volta ao tamanho máximo para desktops */
    }
}

.nav {
    display: flex;
    align-items: center;
}

.nav__link {
    color: var(--color-primary-dark);
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    z-index: var(--z-above);
    position: relative;

    /* Adicione esta linha: */
    margin-left: auto;
    /* Isso empurra o elemento para a direita dentro de um contêiner flexível */
}

.nav-toggle__bar {
    width: 100%;
    height: 2px;
    background-color: var(--color-dark);
    transition: all 0.3s ease;
    border-radius: var(--radius-full);
}

.nav__menu {
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    width: 100%;
    background-color: var(--color-light);
    padding: var(--spacing-lg) 0;
    box-shadow: var(--shadow-md);
    z-index: var(--z-modal);
    transform: translateY(-100%);
    transition: transform var(--transition-normal);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

body.nav-open .nav__menu {
    transform: translateY(0);
    display: flex;
}

@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }

    .nav__menu {
        position: static;
        flex-direction: row;
        background-color: transparent;
        padding: 0;
        box-shadow: none;
        transform: none;
        display: flex;
        gap: var(--spacing-xl);
    }
}

/* Hero Section */
.hero {
    z-index: 1;
    /* Para ficar abaixo do header (se --z-above for maior) */
    position: relative;
    /* Necessário para o z-index funcionar */
    min-height: 80vh;
    /* Ocupa a maior parte da altura da viewport */
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #212121;
    /* Imagem de fundo e gradiente para telas maiores */
    background: linear-gradient(to right, #ffffff 20%, rgba(255, 255, 255, 0)),
        url('../imgs/site/herobg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    /* Posição padrão da imagem para telas maiores */
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    /* Largura máxima para o conteúdo principal */
    margin: 0 auto;
    gap: 2rem;
    /* Espaçamento entre os elementos */
    padding: 0 2rem;
    /* Padding lateral padrão */
}

.hero-content {
    margin-top: 50px;
    max-width: 50%;
    /* Ocupa metade do espaço para o texto */
    flex: 1;
    z-index: 2;
    /* Para garantir que o conteúdo esteja acima da imagem de fundo */
    text-align: left;
    /* Alinhamento padrão do texto */
}

.hero-content h1 {
    text-transform: uppercase;
    font-size: clamp(1.8rem, 5vw, 3rem);
    /* Tamanho de fonte adaptável */
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 2rem;
}

/* Botões */
.hero-buttons {
    /* Adicionei este container para gerenciar os botões, especialmente em mobile */
    display: flex;
    gap: 1rem;
    /* Espaçamento entre os botões */
}

.hero-buttons .btn {
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    /* Impede quebras de linha em botões */
}

.btn-primario {
    background-color: var(--color-primary);
    color: #fff;
    transition: all 0.3s ease;
}

.btn-primario:hover {
    background-color: #c91f2d;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.btn-transparente {
    background: none;
    border: 2px solid #212121;
    color: #212121;
    transition: all 0.3s ease;
}

.btn-transparente:hover {
    background-color: #212121;
    color: #fff;
}

/* Estilos para o Carrossel de Texto */
.carousel-text {
    display: inline-block;
    min-width: 180px;
    /* Largura mínima base para a palavra (ajuste conforme a maior palavra) */
    text-align: left;
    overflow: hidden;
    white-space: normal;
    /* ALTERADO: Permite que o texto quebre a linha */
    word-break: break-word;
    /* ADICIONADO: Garante que palavras muito longas quebrem */
    vertical-align: middle;
    font-size: inherit;
    /* Herda o tamanho da fonte do h1 pai, garantindo que ele escale com o h1 */
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-primary);

    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Classe para o estado ativo (visível) */
.carousel-text.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* --- Media Queries para Responsividade --- */

/* Laptops e Tablets maiores (max-width: 1024px) */
@media (max-width: 1024px) {
    .hero {
        min-height: 70vh;
        /* Ajuste a altura para telas intermediárias */
        background-position: 40% center;
        /* Ajusta a posição da imagem de fundo */
    }

    .hero .container {
        max-width: 960px;
        /* Reduz a largura máxima do container */
        padding: 0 1.5rem;
        /* Ajusta o padding lateral */
        gap: 1.5rem;
        /* Reduz o espaçamento entre elementos */
    }

    .hero-content h1 {
        font-size: clamp(1.6rem, 4.5vw, 2.2rem);
        /* Ajusta a escala da fonte do título */
    }

    .hero-content p {
        font-size: 1.1rem;
        /* Ajusta o tamanho da fonte do parágrafo */
    }

    .carousel-text {
        min-width: 220px;
        /* Aumenta o min-width para acomodar fontes ligeiramente maiores */
    }
}

/* Tablets em retrato e Smartphones grandes (max-width: 768px) */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        /* Altera o layout para empilhar os elementos */
        text-align: center;
        /* Centraliza o texto */
        padding: 4rem 1rem;
        /* Adiciona padding vertical */
        min-height: auto;
        /* Permite que a altura se ajuste ao conteúdo */
        /* Ajusta o gradiente e a posição da imagem para um layout vertical */
        background: linear-gradient(to bottom, #ffffff 50%, rgba(255, 255, 255, 0.2)),
            url('../imgs/site/herobg.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        /* Posição da imagem para layout empilhado */
    }

    .hero .container {
        flex-direction: column;
        /* Empilha o conteúdo dentro do container */
        padding: 0 1rem;
        align-items: center;
        /* Centraliza os itens no container */
        gap: 2rem;
    }

    .hero-content {
        max-width: 100%;
        /* Ocupa a largura total */
        margin-bottom: 2rem;
        text-align: left;
        /* Garante que o texto esteja centralizado */
    }

    .hero-content h1 {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
        /* Reajusta a escala da fonte para mobiles */
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        /* Empilha os botões verticalmente */
        gap: 1rem;
        width: 100%;
        /* Ocupa a largura total disponível */
        max-width: 320px;
        /* Limita a largura máxima do grupo de botões */
        margin: 0 auto;
        /* Centraliza o grupo de botões */
    }

    .hero-buttons .btn {
        width: 100%;
        /* Faz com que os botões ocupem a largura total do grupo */
    }

    .carousel-text {
        min-width: 250px;
        /* Ajusta o min-width para o tamanho da fonte e alinhamento central */
        text-align: left;
        font-size: clamp(1.8rem, 5vw, 2.5rem);
        /* Centraliza a palavra do carrossel */
    }
}

/* Smartphones (max-width: 576px) */
@media (max-width: 576px) {
    .hero .container {
        padding: 0 0.5rem;
        gap: 1.5rem;
    }

    .hero-content h1 {
        text-align: left;
        font-size: 28px;
        /* Escala de fonte menor para os menores dispositivos */
    }

    .hero-content p {
        font-size: 0.9rem;
        /* Fonte ainda menor para parágrafos */
    }

    .hero-buttons {
        text-align: left;
    }

    .hero-buttons .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
        /* Botões ligeiramente menores */
    }

    .carousel-text {
        min-width: 210px;
        /* Último ajuste no min-width do carrossel */
    }
}

/* ===== Gastronomy Section ===== */
.gastronomy {
    position: relative;
    background-color: var(--color-background);
}

.gastronomy__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-xl);
}

.menu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-xl);
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
}

.menu-card.in-view {
    transform: translateY(0);
    opacity: 1;
}

.menu-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: var(--shadow-lg);
}

.menu-card__icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
    position: relative;
}

.icon-backdrop {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    background-color: var(--color-sand-light);
    z-index: var(--z-below);
    transform-origin: center;
    animation: pulse 2s ease-in-out infinite;
}

.menu-card__title {
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-dark);
    position: relative;
}

.menu-card__title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: var(--color-primary);
    transition: all var(--transition-normal);
}

.menu-card:hover .menu-card__title::after {
    width: 60px;
}

.menu-card__text {
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

.menu-card__link {
    margin-top: auto;
    color: var(--color-primary);
    font-weight: var(--weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all var(--transition-normal);
}

.menu-card__link i {
    transition: transform var(--transition-normal);
}

.menu-card__link:hover {
    color: var(--color-primary-dark);
}

.menu-card__link:hover i {
    transform: translateX(5px);
}

.gastronomy__highlight {
    margin-top: var(--spacing-2xl);
    position: relative;
    padding: var(--spacing-xl);
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.featured-dishes {
    text-align: center;
}

.featured-dishes__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--spacing-xl);
    color: var(--color-primary);
    position: relative;
    display: inline-block;
}

/* .featured-dishes__title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
} */

.dishes-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-xl);
}

.dish-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--color-sand-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.dish-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.dish-item__image {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.dish-item__image img {
    width: 100%;
    height: 100%;
    /* Alteração importante aqui! */
    object-fit: cover;
    object-position: bottom;
    /* Teste: mostra mais o topo da foto */
    transition: transform var(--transition-normal);
}

.dish-item:hover .dish-item__image img {
    transform: scale(1.05);
}

.dish-item__content {
    padding: var(--spacing-lg);
}

.dish-item__content h4 {
    margin-bottom: var(--spacing-sm);
    font-size: var(--text-xl);
    color: var(--color-dark);
}

.dish-item__content p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.dish-item__price {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--color-primary);
    color: var(--color-dark);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
}

@media (min-width: 768px) {
    .gastronomy__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .dishes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Sports Section ===== */
/* ===== Seção Esportes na Areia ===== */
.sports {
    align-items: center;
    background-color: var(--color-background);
    position: relative;
    overflow: hidden;
}

.sports .section-title {
    margin-bottom: 1rem;
}

.sports .section-subtitle {
    margin-bottom: var(--spacing-2xl);
}


/* Cards de esportes */
.sports-slider {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}


@media (max-width: 992px) {
    .sports-slider {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        overflow-x: auto;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        padding-bottom: var(--spacing-md);
    }

    .sports-slider::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari */
    }

    .sports-slider>* {
        scroll-snap-align: center;
    }
}

.sports-card {
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.sports-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.sports-card__image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.sports-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.sports-card:hover .sports-card__image img {
    transform: scale(1.05);
}

.sports-card__tag {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background-color: var(--color-primary);
    color: var(--color-dark);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    z-index: 2;
}

.sports-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--spacing-lg);
    transition: opacity var(--transition-normal);
    z-index: 1;
}

.sports-card:hover .sports-card__overlay {
    opacity: 1;
}

.sports-card__content {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sports-card__title {
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-sm);
    position: relative;
    display: inline-block;
    width: fit-content;
    word-break: break-word;
}

.sports-card__title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

.sports-card:hover .sports-card__title::after {
    width: 100%;
}

.sports-card__text {
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
}

.sports-card__info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--text-sm);
}

.info-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.info-item i {
    color: var(--color-primary);
}

.sports-card__actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: auto;
}

/* Seu CSS existente para .sports-navigation, .sports-nav-btn, .sports-nav-indicators */
.sports-navigation {
    /* Por padrão, ocultamos a navegação. O JS adicionará 'display: flex' */
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    margin-top: var(--spacing-md);
    /* Adicionado para espaçar do slider */
}

.sports-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-light);
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-top: -25px;
}

.sports-nav-btn:hover:not(:disabled) {
    /* Adicionado :not(:disabled) */
    background-color: var(--color-primary);
    color: var(--color-dark);
}

.sports-nav-btn:disabled {
    /* Estilo para botão desabilitado */
    opacity: 0.5;
    cursor: not-allowed;
}

.sports-nav-indicators {
    display: none;
    gap: 8px;
    margin-top: -25px;
}

.sports-nav-indicators span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-border);
    cursor: pointer;
    transition: all var(--transition-normal);
}


.sports-nav-indicators span.active,
.sports-nav-indicators span:hover {
    background-color: var(--color-primary);
    transform: scale(1.2);
}

/* Novo CSS para o slider */
.sports-slider {
    display: flex;
    /* Para organizar os cards horizontalmente */
    overflow-x: auto;
    /* Permite a rolagem horizontal */
    scroll-behavior: smooth;
    /* Para rolagem suave via JS */
    padding-bottom: var(--spacing-md);
    /* Espaço para sombra e scrollbar (se visível) */
    gap: var(--spacing-lg);
    /* Espaçamento entre os cards */

    /* Ocultar a scrollbar, mas manter a funcionalidade de rolagem */
    scrollbar-width: none;
    /* Para Firefox */
    -ms-overflow-style: none;
    /* Para IE/Edge */
}

/* Ocultar a scrollbar para navegadores Webkit (Chrome, Safari) */
.sports-slider::-webkit-scrollbar {
    display: none;
}

/* Estilo para os cards dentro do slider */
.sports-card {
    flex-shrink: 0;
    /* Impede que os cards encolham */
    width: 100%;
    /* Largura total em telas pequenas */
    max-width: 320px;
    /* Largura máxima para cards em telas maiores */
    /* Garanta que o .sports-card tenha um 'min-width' ou 'flex-basis' adequado para não encolher */
    /* Se você quiser 3 cards por linha no desktop, por exemplo, ajuste o width/max-width e o gap */
}

/* Exemplo de ajuste para desktop, se necessário */
@media (min-width: 768px) {
    .sports-card {
        width: calc((100% / 3) - (var(--spacing-lg) * 2 / 3));
        /* 3 cards por linha com gap */
    }
}

@media (max-width: 768px) {

    .sports-nav-indicators {
        display: flex;
    }

    .sports-nav-prev,
    .sports-nav-next {
        display: none;
    }

    .sports-nav-indicators span:nth-child(8) {
        display: none;
    }

    .sports-nav-indicators span:nth-child(0),
    .sports-nav-indicators span:nth-child(1),
    .sports-nav-indicators span:nth-child(2),
    .sports-nav-indicators span:nth-child(3),
    .sports-nav-indicators span:nth-child(4),
    .sports-nav-indicators span:nth-child(5),
    .sports-nav-indicators span:nth-child(6),
    .sports-nav-indicators span:nth-child(7) {
        display: block;
    }

}

/* Cards de destaque */
.sports-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-3xl);
}

.sports-highlight-card {
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    position: relative;
    border-top: 3px solid var(--color-primary);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sports-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.sports-highlight-card__icon {
    width: 50px;
    height: 50px;
    background-color: var(--color-sand-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    color: var(--color-tertiary);
    font-size: var(--text-xl);
    transition: all var(--transition-normal);
}

.sports-highlight-card:hover .sports-highlight-card__icon {
    background-color: var(--color-primary-light);
    transform: rotateY(360deg);
    transition: transform 0.8s ease-in-out, background-color var(--transition-normal);
}

.sports-highlight-card h4 {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--color-dark);
}

.sports-highlight-card p {
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.sports-highlight-card__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-secondary);
    font-weight: var(--weight-medium);
    margin-top: auto;
    transition: gap var(--transition-normal);
}

.sports-highlight-card__link:hover {
    color: var(--color-secondary-dark);
    gap: var(--spacing-md);
}

/* CTA Section */
.sports-cta {
    background-color: var(--color-sand-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.sports-cta::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: url('sports-icon.svg') no-repeat center center;
    background-size: contain;
    opacity: 0.1;
    z-index: 0;
}

.sports-cta__content {
    flex: 1;
}

.sports-cta__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--spacing-sm);
    color: var(--color-dark);
}

.sports-cta__text {
    color: var(--color-text);
}

@media (max-width: 768px) {
    .sports-cta {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-lg);
    }

    .sports-cta__title {
        font-size: var(--text-xl);
    }
}

/* Botões com ícones */
.btn--with-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: gap var(--transition-normal), background-color var(--transition-normal), color var(--transition-normal);
}

.btn--with-icon:hover {
    gap: var(--spacing-md);
}

.btn--text {
    background-color: transparent;
    color: var(--color-secondary);
    padding: 0.5rem 0;
    box-shadow: none;
    position: relative;
}

.btn--text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-secondary);
    transition: width var(--transition-normal);
}

.btn--text:hover {
    color: var(--color-secondary-dark);
}

.btn--text:hover::after {
    width: 100%;
}

.btn--light {
    background-color: var(--color-light);
    color: var(--color-dark);
}

.btn--light:hover {
    background-color: var(--color-primary);
}

.btn--lg {
    padding: 0.875rem 2rem;
    font-size: var(--text-lg);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-animation="fade-up"] {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease-out forwards;
}

[data-animation-delay="100"] {
    animation-delay: 0.1s;
}

[data-animation-delay="200"] {
    animation-delay: 0.2s;
}

[data-animation-delay="300"] {
    animation-delay: 0.3s;
}

/* ===== Events Section ===== */

.events {
    background-color: var(--color-sand-light);
    position: relative;
    overflow: hidden;
}

/* Botão fixo na parte inferior */
.events .btn {
    position: absolute;
    bottom: var(--spacing-xl);
    left: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    transition: gap var(--transition-normal);
}

.events .btn:hover {
    gap: var(--spacing-md);
}

.events .btn i {
    transition: transform var(--transition-normal);
}

.events .btn:hover i {
    transform: translateX(3px);
}

.events-grid {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    justify-content: center;
    align-items: center;
}

/* Cards de eventos */
.event-card {
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    position: relative;
    width: 600px;
    height: 800px;
    /* Define uma altura fixa */
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* Mantém a altura das imagens */
.event-card__image {
    position: relative;
    height: 500px;
    /* Ajuste a altura conforme necessário */
    overflow: hidden;
}

.event-card__image img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.event-card__content {
    padding: var(--spacing-xl);
    position: relative;
    height: 300px;
    /* Ajuste a altura conforme necessário */
    overflow: hidden;
    /* Previne o texto de expandir a caixa */
}

.event-card__content p {
    overflow: hidden;
    /* Esconde o texto que extravasa */
    text-overflow: ellipsis;
    /* Adiciona reticências no final do texto */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    /* Limita o número de linhas visíveis */
    -webkit-box-orient: vertical;
}

/* Algumas outras estilizações permanecem as mesmas */
.event-card__icon {
    position: absolute;
    top: -30px;
    right: var(--spacing-xl);
    width: 60px;
    height: 60px;
    background-color: var(--color-sand);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-tertiary);
    font-size: var(--text-2xl);
    box-shadow: var(--shadow-md);
}

.event-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-dark);
}

.event-card p {
    color: var(--color-text);
    line-height: 1.6;
}

@media (max-width: 768px) {

    /* Você pode ajustar 768px conforme necessário */
    .events-grid {
        flex-direction: column;
        /* Empilha os itens verticalmente */
        align-items: stretch;
        /* Opcional: faz os itens preencherem a largura do contêiner flex */
    }

    .event-card {
        width: auto;
        /* Deixa o grid controlar a largura */
        max-width: none;
        /* Remove o limite de largura que pode interferir no grid */
    }

}

/* ===== Testimonials Section ===== */
.testimonials {
    position: relative;
    background-color: var(--color-background);
    overflow: hidden;
    padding: 50px 0;
}

.testimonials .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.testimonials .section-header {
    text-align: center;
    margin-bottom: 30px;
}

.testimonials .section-title {
    font-size: 2.5em;
    color: var(--color-dark);
}

.testimonials-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
    gap: 20px;
    transition: transform 0.3s ease;
}

.testimonial-card {
    flex: 0 0 80%;
    margin: 0 10px;
    padding: 30px;
    background-color: var(--color-light);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.testimonial-card__content {
    margin-bottom: 20px;
}

.testimonial-card__text {
    font-size: 1.1em;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: 15px;
}

.testimonial-card__rating {
    color: var(--color-primary);
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.testimonial-card__rating i {
    margin: 0 2px;
}

.testimonial-card__author {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-card__author img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.testimonial-card__author h4 {
    font-size: 1.2em;
    color: var(--color-dark);
    margin-bottom: 5px;
    text-align: center;
}

.testimonial-card__author span {
    font-size: 0.9em;
    color: var(--color-muted);
    text-align: center;
}

/* Estilos para telas maiores */
@media (min-width: 768px) {
    .testimonials-slider {
        overflow-x: hidden;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        scroll-snap-type: none;
    }

    .testimonial-card {
        flex: 1;
        margin: 0;
        text-align: center;
    }
}

/* ===== Gallery Section ===== */
.gallery {
    background-color: var(--color-light);
    position: relative;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

.gallery-item img {
    width: 100%;
    /* A largura máxima do contêiner */
    height: auto;
    /* Preserva a proporção */
    object-fit: contain;
    transition: transform var(--transition-normal);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-normal);
}

.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item__overlay i {
    color: var(--color-light);
    font-size: var(--text-xl);
    background-color: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transform: scale(0.8);
    transition: all var(--transition-normal);
}

.gallery-item:hover .gallery-item__overlay i {
    transform: scale(1);
}

.gallery-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (min-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .gallery-item:nth-child(1),
    .gallery-item:nth-child(6) {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* ===== Location Section ===== */
.location {
    background-color: var(--color-background);
}

.location-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.location-map {
    flex: 1;
    height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.location-info {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-lg);
}

.info-card {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.info-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--color-sand-light);
    color: var(--color-primary);
    font-size: var(--text-xl);
    border-radius: var(--radius-full);
}

.info-card__content {
    flex-grow: 1;
}

.info-card__content h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-xs);
    color: var(--color-secondary);
}

.info-card__content p {
    font-size: var(--text-sm);
    color: var(--color-text);
}

@media (min-width: 768px) {
    .location-container {
        flex-direction: row;
    }

    .location-info {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Booking Section ===== */
.booking {
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-background) 100%);
    position: relative;
}

.booking::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path d="M30,10 C35,15 45,5 50,10 C55,15 65,5 70,10 L70,70 L10,70 L10,10 C15,15 25,5 30,10 Z" fill="%23F2D2A9" opacity="0.05"/></svg>');
    background-size: 80px 80px;
    background-repeat: repeat;
    z-index: 0;
}

.booking-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.booking-info {
    flex: 1;
    background-color: var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    color: var(--color-light);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.booking-info::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 C25,25 75,25 100,0 C100,25 100,75 75,100 C50,75 0,75 0,100 Z" fill="%2300798C" opacity="0.3"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
}

.booking-info__content {
    position: relative;
    z-index: 1;
}

.booking-info__content h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-light);
}

.booking-info__content p {
    margin-bottom: var(--spacing-xl);
    color: rgba(255, 255, 255, 0.8);
}

.booking-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.booking-feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: rgba(255, 255, 255, 0.9);
}

.booking-feature i {
    color: var(--color-secondary);
}

.booking-contact {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.booking-contact p {
    margin-bottom: var(--spacing-md);
}

.booking-form-container {
    flex: 1;
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.booking-form-container::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 120px;
    height: 120px;
    background-color: var(--color-sand-light);
    border-radius: var(--radius-full);
    opacity: 0.3;
    z-index: 0;
}

.booking-form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    transition: all var(--transition-normal);
    background-color: var(--color-background);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(252, 163, 17, 0.1);
    outline: none;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-md);
}

.form-submit {
    margin-top: var(--spacing-md);
}

.form-disclaimer {
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-align: center;
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .booking-container {
        flex-direction: row;
    }

    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Footer ===== */
.footer {
    background-color: var(--color-primary-dark);
    color: var(--color-light);
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.footer__logo {
    margin-bottom: var(--spacing-sm);
}

.footer__tagline {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
    max-width: 400px;
    margin-bottom: var(--spacing-md);
}

.footer__social {
    display: flex;
    gap: var(--spacing-sm);
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-light);
    transition: all var(--transition-normal);
}

.social-icon:hover {
    background-color: var(--color-primary);
    color: var(--color-dark);
    transform: translateY(-3px);
}

.footer__heading {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-light);
    position: relative;
    padding-bottom: var(--spacing-xs);
}

.footer__heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--color-primary);
}

.footer__menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer__menu a {
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--transition-normal);
    display: inline-block;
    position: relative;
}

.footer__menu a::before {
    content: '→';
    margin-right: var(--spacing-xs);
    opacity: 0;
    transform: translateX(-10px);
    transition: all var(--transition-normal);
    display: inline-block;
}

.footer__menu a:hover {
    color: var(--color-primary);
    transform: translateX(5px);
}

.footer__menu a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.footer__address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.footer__address p {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    color: rgba(255, 255, 255, 0.7);
}

.footer__address p i {
    color: var(--color-primary);
    margin-top: 5px;
}

.footer__address a {
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--transition-normal);
}

.footer__address a:hover {
    color: var(--color-primary);
}

.newsletter-form {
    margin-top: var(--spacing-md);
}

.newsletter-form .form-group {
    display: flex;
    flex-direction: row;
    gap: 0;
    position: relative;
}

.newsletter-form input {
    flex-grow: 1;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-light);
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.newsletter-form button {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 0 1rem;
    background-color: var(--color-primary);
    color: var(--color-dark);
    white-space: nowrap;
}

.newsletter-form button:hover {
    background-color: var(--color-primary-dark);
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
    text-align: center;
}

.footer__copyright {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
}

.footer__legal a {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.footer__legal a:hover {
    color: var(--color-primary-light);
}

@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ===== Modal ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    perspective: 1000px;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

.modal__container {
    position: relative;
    background-color: var(--color-light);
    width: 90%;
    max-width: 1000px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9) translateY(30px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.modal.active .modal__container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal__content {
    width: 100%;
    padding: var(--spacing-md);
    text-align: center;
}

.modal__content img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.gallery-caption {
    font-size: var(--text-lg);
    color: var(--color-dark);
}

.modal__close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    font-size: var(--text-xl);
    color: var(--color-muted);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: rgba(0, 0, 0, 0.1);
    transition: all var(--transition-normal);
    z-index: 10;
}

.modal__close:hover {
    color: var(--color-dark);
    background-color: var(--color-primary);
    transform: rotate(90deg);
}

.gallery-controls {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--spacing-xl) var(--spacing-xl);
}

.gallery-prev,
.gallery-next {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.gallery-prev:hover,
.gallery-next:hover {
    background-color: var(--color-primary-dark);
    transform: scale(1.1);
}

/* Container principal do botão flutuante e opções */
.whatsapp-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    /* Permite posicionar o menu relativo ao botão */
    flex-direction: column-reverse;
    /* Menu aparece acima do botão */
    align-items: flex-end;
    /* Alinha os itens à direita */
}

/* Botão principal do WhatsApp (gatilho) */
.whatsapp-main-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    font-size: 34px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border: none;
    /* Remover borda padrão de botão */
    cursor: pointer;
    /* Indicar que é clicável */
    padding: 0;
    /* Remover padding padrão */
}

.whatsapp-main-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* Bolinha de Notificação */
.whatsapp-main-button .notification-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    background-color: #FF0000;
    border-radius: 50%;
    border: 2px solid white;
    animation: pulse-dot 1.5s infinite ease-in-out;
}

/* Animação de Pulsação */
@keyframes pulse-dot {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.8;
    }
}

/* Menu de opções de contato */
.whatsapp-options-menu {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: 15px;
    margin-bottom: 15px;
    /* Espaço entre o menu e o botão principal */
    min-width: 220px;
    /* Largura mínima para o menu */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Alinha o conteúdo à esquerda */

    /* Estilos para esconder/mostrar e animar */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    /* Começa um pouco abaixo para o slide-up */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    /* Impede interação quando oculto */
}

/* Estado ativo do menu */
.whatsapp-options-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    /* Permite interação quando visível */
}

/* Estilo para os links dentro do menu */
.whatsapp-options-menu a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-bottom: 5px;
    /* Espaço entre os links */
}

.whatsapp-options-menu a:last-of-type {
    margin-bottom: 0;
}

.whatsapp-options-menu a i {
    margin-right: 10px;
    color: #25D366;
    /* Cor do ícone */
    font-size: 18px;
}

.whatsapp-options-menu a[href^="tel:"] i {
    color: #007bff;
    /* Azul para ícone de telefone */
}

.whatsapp-options-menu a[href^="mailto:"] i {
    color: #dc3545;
    /* Vermelho para ícone de e-mail */
}


.whatsapp-options-menu a:hover {
    background-color: #f0f0f0;
    color: #000;
}

/* Botão de fechar dentro do menu */
.whatsapp-options-close {
    align-self: flex-end;
    /* Alinha o botão de fechar à direita */
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0;
    margin-bottom: 10px;
    transition: color 0.2s ease;
}

.whatsapp-options-close:hover {
    color: #555;
}

/* Responsividade */

/* Para telas menores (ex: tablets em retrato, max-width: 768px) */
@media (max-width: 768px) {
    .whatsapp-container {
        bottom: 15px;
        right: 15px;
    }

    .whatsapp-main-button {
        width: 50px;
        height: 50px;
        font-size: 24px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    }

    .whatsapp-main-button .notification-dot {
        width: 10px;
        height: 10px;
        top: 3px;
        right: 3px;
        border-width: 1.5px;
    }

    .whatsapp-options-menu {
        min-width: 180px;
        /* Reduz a largura mínima do menu */
        padding: 12px;
        margin-bottom: 12px;
    }

    .whatsapp-options-menu a {
        padding: 8px 10px;
        font-size: 15px;
    }

    .whatsapp-options-close {
        font-size: 18px;
        margin-bottom: 8px;
    }
}

/* Para telas muito pequenas (ex: smartphones, max-width: 480px) */
@media (max-width: 480px) {
    .whatsapp-container {
        bottom: 10px;
        right: 10px;
        /* As propriedades flex-direction: column-reverse; e align-items: flex-end;
           já presentes no .whatsapp-container são cruciais e devem ser mantidas */
    }

    .whatsapp-main-button {
        width: 55px;
        height: 55px;
        font-size: 28px;
    }

    .whatsapp-main-button .notification-dot {
        width: 8px;
        height: 8px;
        top: 2px;
        right: 2px;
        border-width: 1px;
    }

    .whatsapp-options-menu {
        min-width: unset;
        /* Remove largura mínima */
        width: auto;
        /* Deixa a largura ser determinada pelo conteúdo, respeitando max-width */
        max-width: calc(100vw - 20px);
        /* Garante que o menu não exceda a largura da tela,
                                           considerando 10px de margem em cada lado */

        /* Remove propriedades de posicionamento horizontal conflitantes */
        right: auto;
        left: auto;

        /* Alinha o menu à direita dentro do seu container flexível */
        align-self: flex-end;

        /* Mantém o translateY para a animação de deslize para cima */
        transform: translateY(10px);

        /* Remove o translateX problemático */
    }

    .whatsapp-options-menu.is-active {
        transform: translateY(0);
        /* Mantém a animação de deslize para cima no estado ativo */
        /* Remove o translateX problemático */
    }

    /* Ajuste para alinhar à direita em telas muito pequenas */
    .whatsapp-container {
        align-items: flex-end;
        /* Mantém o alinhamento à direita */
    }
}

/* ===== Animations ===== */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
}

@keyframes sandDrip {

    0%,
    100% {
        transform: translateX(-50%) scale(1, 1);
    }

    50% {
        transform: translateX(-50%) scale(1.2, 0.8);
    }

    60% {
        transform: translateX(-50%) scale(0.8, 1.3);
    }

    70% {
        transform: translateX(-50%) scale(1.1, 0.9);
    }

    80% {
        transform: translateX(-50%) scale(0.9, 1.1);
    }

    90% {
        transform: translateX(-50%) scale(1.05, 0.95);
    }
}

/* ===== Media Queries ===== */
@media (min-width: 576px) {
    .hero__title {
        font-size: var(--text-5xl);
    }

    .section-title {
        font-size: var(--text-4xl);
    }

}

@media (min-width: 768px) {
    .hero__container {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-2xl);
    }

    .hero__content {
        flex: 1;
    }

    .hero__visual {
        flex: 1;
        margin-top: 0;
    }
}

@media (min-width: 992px) {
    .hero__title {
        font-size: var(--text-6xl);
    }

    .hero__subtitle {
        font-size: var(--text-xl);
    }

    .section-title {
        font-size: var(--text-5xl);
    }
}

@media (min-width: 1200px) {
    .container {
        padding-inline: 0;
    }
}

/* ===== Utility Classes ===== */
[data-animation] {
    opacity: 0;
    transition: all var(--transition-normal) 0.2s;
}

[data-animation="fade-up"] {
    transform: translateY(20px);
}

[data-animation="fade-down"] {
    transform: translateY(-20px);
}

[data-animation="fade-left"] {
    transform: translateX(20px);
}

[data-animation="fade-right"] {
    transform: translateX(-20px);
}

[data-animation="zoom-in"] {
    transform: scale(0.9);
}

[data-animation].in-view {
    opacity: 1;
    transform: translate(0) scale(1);
}

[data-animation-delay="100"] {
    transition-delay: 0.1s;
}

[data-animation-delay="200"] {
    transition-delay: 0.2s;
}

[data-animation-delay="300"] {
    transition-delay: 0.3s;
}

[data-animation-delay="400"] {
    transition-delay: 0.4s;
}

[data-animation-delay="500"] {
    transition-delay: 0.5s;
}

/* ==================================== */
/* NOVO: Estilos para Animações de Seção (Scroll Reveal) */
/* ==================================== */
[data-animation] {
    opacity: 0;
    transform: translateY(20px);
    /* Começa um pouco abaixo e transparente */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animation].animate {
    opacity: 1;
    transform: translateY(0);
}

/* ==================================== */
/* Styles for Thank You Page */
/* ==================================== */

/* Adicione a classe 'page-thankyou' ao <body> do obrigado.html para aplicar estes estilos */
/* .page-thankyou .header{
    
} */

/* Wrapper para centralizar o conteúdo da página de agradecimento verticalmente */
.thankyou-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ajusta a altura mínima para ocupar o espaço restante da viewport após o footer.
       150px é uma estimativa do tamanho do seu footer no desktop. Ajuste se necessário. */
    min-height: calc(100vh - 150px);
    padding: var(--spacing-2xl) var(--spacing-lg);
    /* Padding superior/inferior para espaçamento */
    box-sizing: border-box;
    margin-top: 0;
    /* Garante que não haja margem superior indesejada */
}

/* Em telas menores, ajuste a altura mínima do wrapper */
@media (max-width: 767px) {
    .thankyou-content-wrapper {
        min-height: calc(100vh - 100px);
        /* Altura do footer menor em mobile, ajuste conforme necessário */
        padding: var(--spacing-xl) var(--spacing-sm);
    }
}

/* Contêiner principal do conteúdo da página de agradecimento */
.thankyou-container {
    margin-top: 50px;
    max-width: 650px;
    /* Levemente maior para dar mais espaço */
    width: 100%;
    background-color: var(--color-light);
    /* Fundo do container principal (branco) */
    border-radius: var(--radius-lg);
    /* Cantos arredondados */
    padding: var(--spacing-3xl) var(--spacing-2xl);
    /* Mais padding interno para um visual premium */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
    /* Sombra mais pronunciada */
    text-align: center;
    /* Centraliza o texto dentro do contêiner */
    opacity: 0;
    /* Inicialmente invisível para animação JS */
    transform: translateY(30px);
    /* Começa ligeiramente abaixo para animação JS */
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    /* Transição suave para a animação inicial */
}

/* Estilo para o ícone de sucesso (círculo azul com check branco) */
.icon-success {
    display: inline-flex;
    /* Permite centralizar o ícone Font Awesome */
    justify-content: center;
    align-items: center;
    width: 110px;
    /* Ícone maior */
    height: 110px;
    /* Ícone maior */
    background-color: var(--color-primary-dark);
    /* Cor azul escura da identidade */
    border-radius: var(--radius-full);
    /* Faz um círculo perfeito */
    margin-bottom: var(--spacing-lg);
    /* Espaçamento baseado nas variáveis */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* Sombra para o ícone */
    position: relative;
    overflow: hidden;
    /* Para o efeito de pulso */
    transform: scale(0.8);
    /* Começa menor para animação JS */
    opacity: 0;
    /* Inicialmente invisível para animação JS */
    transition: all 0.6s ease-out;
    /* Transição suave */
}

.icon-success i {
    color: var(--color-light);
    /* Cor branca para o ícone */
    font-size: var(--text-5xl);
    /* Ícone Font Awesome maior */
    z-index: 1;
    /* Para garantir que o ícone esteja acima de quaisquer pseudo-elementos */
}

/* Efeito de brilho/pulso para o ícone */
.icon-success::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    /* Brilho branco suave */
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}

/* Animações JS para o ícone */
.icon-success.animate::after {
    width: 150%;
    height: 150%;
    opacity: 1;
    animation: success-pulse 1s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes success-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}


/* Estilo para o título principal (Agradecemos...) */
.thankyou-container h1 {
    /* Tornando mais específico para evitar conflitos */
    font-family: var(--font-primary);
    /* Usa a fonte primária para títulos */
    color: var(--color-primary-dark);
    /* Cor azul escura da identidade */
    font-size: var(--text-4xl);
    /* Título maior e mais impactante */
    font-weight: var(--weight-bold);
    /* Negrito */
    margin-bottom: var(--spacing-md);
    /* Espaçamento baseado nas variáveis */
    line-height: 1.2;
    opacity: 0;
    /* Inicialmente invisível para animação JS */
    transform: translateY(20px);
    /* Começa ligeiramente abaixo */
    transition: all 0.6s ease-out;
    /* Transição suave */
    transition-delay: 0.1s;
    /* Atraso para animação em cascata (controlado pelo JS) */
}

/* Estilo para o subtítulo abaixo do título principal */
.thankyou-subtitle {
    /* Nova classe para clareza e especificidade */
    font-family: var(--font-secondary);
    /* Usa a fonte secundária */
    font-size: var(--text-lg);
    /* Tamanho de fonte padrão */
    color: var(--color-text);
    /* Cor de texto geral da identidade */
    margin-bottom: var(--spacing-2xl);
    /* Mais espaçamento abaixo */
    opacity: 0;
    /* Inicialmente invisível para animação JS */
    transform: translateY(20px);
    /* Começa ligeiramente abaixo */
    transition: all 0.6s ease-out;
    /* Transição suave */
    transition-delay: 0.2s;
    /* Atraso para animação em cascata (controlado pelo JS) */
}

/* Estilo para a caixa "O que acontece agora?" */
.info-box {
    background-color: var(--color-background);
    /* Cinza muito claro da identidade */
    border-radius: var(--radius-md);
    /* Cantos arredondados */
    padding: var(--spacing-lg) var(--spacing-xl);
    /* Padding horizontal maior */
    margin-bottom: var(--spacing-xl);
    /* Espaçamento baseado nas variáveis */
    text-align: left;
    /* Alinha o texto dentro da caixa à esquerda */
    border: 1px solid var(--color-border);
    /* Borda sutil */
    box-shadow: var(--shadow-sm);
    /* Sombra sutil */
    opacity: 0;
    /* Inicialmente invisível para animação JS */
    transform: translateY(20px);
    /* Começa ligeiramente abaixo */
    transition: all 0.6s ease-out;
    /* Transição suave */
    transition-delay: 0.3s;
    /* Atraso para animação em cascata (controlado pelo JS) */
}

.info-box h2 {
    font-family: var(--font-primary);
    /* Usa a fonte primária para títulos */
    color: var(--color-primary-dark);
    /* Cor azul escura da identidade */
    font-size: var(--text-xl);
    /* Tamanho de fonte baseado nas variáveis */
    font-weight: var(--weight-semibold);
    /* Semi-negrito */
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    /* Espaçamento baseado nas variáveis */
    text-align: center;
    /* Centraliza o título da caixa */
}

/* Estilo para a lista dentro da caixa de informações */
.info-box ul {
    list-style: none;
    /* Remove o estilo de lista padrão */
    padding: 0;
    margin: 0;
}

.info-box ul li {
    font-family: var(--font-secondary);
    /* Usa a fonte secundária */
    font-size: var(--text-base);
    /* Tamanho de fonte padrão */
    font-weight: var(--weight-medium);
    /* Peso de fonte médio */
    color: var(--color-dark);
    /* Cinza escuro da identidade */
    margin-bottom: var(--spacing-md);
    /* Espaçamento baseado nas variáveis */
    position: relative;
    padding-left: var(--spacing-lg);
    /* Espaço para o ícone de marcador */
}

.info-box ul li:last-child {
    margin-bottom: 0;
    /* Remove margem do último item da lista */
}

/* Adiciona um ícone Font Awesome como marcador de lista */
.info-box ul li::before {
    content: "\f058";
    /* Código Unicode para o ícone 'check-circle' solid */
    font-family: "Font Awesome 6 Free";
    /* Garante que o Font Awesome seja usado */
    font-weight: 900;
    /* Define o peso para o ícone sólido */
    color: var(--color-primary);
    /* Cor primária (azul principal) da identidade para o ícone */
    position: absolute;
    left: 0;
    top: 0;
    font-size: var(--text-lg);
    /* Tamanho de fonte baseado nas variáveis */
}

/* Grupo de botões */
.button-group {
    display: flex;
    flex-direction: column;
    /* Organiza os botões em uma coluna */
    gap: var(--spacing-md);
    /* Espaço entre os botões */
    opacity: 0;
    /* Inicialmente invisível para animação JS */
    transform: translateY(20px);
    /* Começa ligeiramente abaixo */
    transition: all 0.6s ease-out;
    /* Transição suave */
    transition-delay: 0.4s;
    /* Atraso para animação em cascata (controlado pelo JS) */
}

/* Estilo específico para os botões primários da página de agradecimento */
.btn--primary-thankyou {
    background-color: var(--color-primary-dark);
    /* Cor azul escura da identidade */
    color: var(--color-light);
    /* Branco para o texto */
    padding: var(--spacing-sm) var(--spacing-lg);
    /* Padding ajustado para o botão */
    font-size: var(--text-lg);
    /* Texto maior no botão */
    font-weight: var(--weight-semibold);
    /* Semi-negrito */
    letter-spacing: 0.5px;
    /* Leve espaçamento entre letras */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn--primary-thankyou:hover {
    background-color: var(--color-primary);
    /* Cor azul principal no hover */
    transform: translateY(-2px);
    /* Efeito de "levantar" no hover */
    box-shadow: var(--shadow-lg);
    /* Sombra mais intensa no hover */
    color: var(--color-light);
    /* Garante que a cor do texto permaneça clara */
}

/* Efeito de onda/brilho no hover do botão */
.btn--primary-thankyou::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%);
    transition: left 0.4s ease-out;
    z-index: 2;
}

.btn--primary-thankyou:hover::before {
    left: 100%;
}

/* Responsividade para o wrapper do conteúdo principal (para quando o header é hidden) */
@media (min-width: 768px) {
    .thankyou-content-wrapper {
        min-height: calc(100vh - var(--header-height) - 150px);
        /* Mantém o header height na formula para telas maiores mesmo que hidden, para alinhamento flex */
    }
}

/* Responsividade básica para telas menores específicas do thank-you container */
@media (max-width: 480px) {
    .thankyou-container {
        padding: var(--spacing-lg);
    }

    .thankyou-container h1 {
        font-size: var(--text-2xl);
    }

    .thankyou-subtitle {
        font-size: var(--text-sm);
    }

    .info-box {
        padding: var(--spacing-md);
    }

    .info-box h2 {
        font-size: var(--text-lg);
    }

    .info-box ul li {
        font-size: var(--text-sm);
    }

    .btn--primary-thankyou {
        font-size: var(--text-base);
        /* Botão ligeiramente menor em mobile */
    }
}

/* Seção de Redirecionamento para o Jogo da Memória */
.memory-game-redirect {
    background-color: var(--color-background); /* Usa a cor de fundo padrão */
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
    text-align: center; /* Centraliza todo o conteúdo da seção */
    position: relative;
    overflow: hidden;
}

.memory-game-redirect .section-header {
    margin-bottom: var(--spacing-2xl); /* Espaçamento abaixo do cabeçalho */
}

.memory-game-redirect .section-title {
    color: var(--color-dark); /* Cor do título principal */
}

.memory-game-redirect .section-subtitle {
    color: var(--color-text); /* Cor do subtítulo */
}

.redirect-button-container {
    margin-top: var(--spacing-xl); /* Espaçamento acima do botão */
    display: flex;
    justify-content: center; /* Centraliza o botão */
}

/* O botão btn--secondary e btn--large já são estilizados pelo seu CSS global,
   então eles se encaixarão perfeitamente.
   Apenas um pequeno ajuste para o ícone. */
.redirect-button-container .btnicon {
    margin-right: var(--spacing-sm);
}

/* Mídias queries podem ser adicionadas aqui se você quiser ajustar o botão
   especificamente para telas menores, mas os estilos globais já devem ser suficientes. */
@media (max-width: 480px) {
    .redirect-button-container .btn {
        width: 90%; /* Botão ocupa mais largura em telas muito pequenas */
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
        font-size: var(--text-base); /* Tamanho de fonte um pouco menor no botão */
    }
}