/* Base styling */
:root {
    /* Paleta inspirada nos Lençóis Maranhenses */
    --cor-lagoa: #2ABED9;        /* Azul das lagoas cristalinas */
    --cor-lagoa-escura: #1D6A96; /* Azul profundo das águas */
    --cor-dunas: #F5F0E9;        /* Areia branca das dunas */
    --cor-dunas-escura: #E5D9C8; /* Tom mais escuro das dunas */
    --cor-folhagem: #5CDB95;     /* Vegetação e vida */
    --cor-por-do-sol: #FFAA5A;   /* Pôr do sol nas dunas */
    --cor-destaque: #FF6B6B;     /* Elemento de destaque/ação */
    
    --cor-texto-escuro: #2D3B4E; /* Texto principal em fundo claro */
    --cor-texto-medio: #5A6B7F;  /* Texto secundário em fundo claro */
    --cor-texto-claro: #F5F5F5;  /* Texto em fundo escuro */
    
    --cor-fundo: #FFFFFF;
    --cor-fundo-alt: #F8F9FA;
    --cor-borda: #E5E7EB;
    
    --sombra-leve: 0 2px 10px rgba(0, 0, 0, 0.05);
    --sombra-media: 0 5px 15px rgba(0, 0, 0, 0.08);
    --sombra-forte: 0 10px 25px rgba(0, 0, 0, 0.1);
    
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;
    
    --borda-radius-sm: 6px;
    --borda-radius-md: 10px;
    --borda-radius-lg: 16px;
    
    --transicao: all 0.3s ease;
}

.dark {
    --cor-lagoa: #3DABC7;
    --cor-lagoa-escura: #1D6A96;
    --cor-dunas: #1E1E1E;
    --cor-dunas-escura: #2D2D2D;
    --cor-texto-escuro: #E5E5E5;
    --cor-texto-medio: #A0A0A0;
    
    --cor-fundo: #121212;
    --cor-fundo-alt: #1E1E1E;
    --cor-borda: #2D2D2D;
    
    --sombra-leve: 0 2px 10px rgba(0, 0, 0, 0.2);
    --sombra-media: 0 5px 15px rgba(0, 0, 0, 0.25);
    --sombra-forte: 0 10px 30px rgba(0, 0, 0, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto-escuro);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Botões e componentes interativos */
.btn-primary {
    display: inline-block;
    background-color: var(--cor-lagoa);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--borda-radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transicao);
    text-align: center;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--cor-lagoa-escura);
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--borda-radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transicao);
}

.btn-whatsapp:before {
    content: '';
    display: inline-block;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="white"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>') no-repeat center center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.btn-whatsapp:hover {
    background-color: #128C7E;
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

.btn-ver-mais {
    color: var(--cor-lagoa);
    font-weight: 600;
    position: relative;
    transition: var(--transicao);
}

.btn-ver-mais:after {
    content: '→';
    display: inline-block;
    margin-left: 0.25rem;
    transition: var(--transicao);
}

.btn-ver-mais:hover:after {
    transform: translateX(4px);
}

/* Header/Hero Section */
.hero {
    background: linear-gradient(to bottom, rgba(29, 106, 150, 0.9), rgba(42, 190, 217, 0.8)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0 50 C20 30, 80 30, 100 50 C80 70, 20 70, 0 50 Z" fill="none" stroke="white" stroke-width="2"/></svg>') center/cover;
    color: white;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-sm);
    position: relative;
    box-shadow: var(--sombra-media);
}

.dark .hero {
    background: linear-gradient(to bottom, rgba(29, 106, 150, 0.9), rgba(18, 18, 18, 0.9)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0 50 C20 30, 80 30, 100 50 C80 70, 20 70, 0 50 Z" fill="none" stroke="white" stroke-width="2"/></svg>') center/cover;
}

.logo-container {
    margin-bottom: var(--spacing-md);
}

.logo {
    max-width: 180px;
    height: auto;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: var(--spacing-md);
    opacity: 0.9;
}

.hero-text {
    max-width: 700px;
    margin: 0 auto var(--spacing-lg);
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
}

.hero-cta {
    margin-top: var(--spacing-md);
}

/* Intro Section */
.intro {
    padding: var(--spacing-xl) 0;
    background-color: var(--cor-fundo-alt);
}

.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-lagoa-escura);
    margin-bottom: var(--spacing-md);
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--cor-texto-medio);
    margin-bottom: var(--spacing-lg);
}

.intro-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.intro-content p {
    margin-bottom: var(--spacing-md);
}

/* Pacotes Section */
.pacotes {
    padding: var(--spacing-xl) 0;
}

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

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

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

.pacote-card {
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--borda-radius-lg);
    box-shadow: var(--sombra-leve);
    overflow: hidden;
    text-decoration: none;
    color: var(--cor-texto-escuro);
    transition: var(--transicao);
    position: relative;
    display: flex;
    flex-direction: column;
}

.pacote-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-media);
}

.pacote-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: var(--cor-destaque);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--borda-radius-sm);
    z-index: 1;
}

.pacote-tag.promocao {
    background-color: var(--cor-por-do-sol);
}

.pacote-tag.destaque {
    background-color: var(--cor-folhagem);
}

.pacote-duration {
    font-size: 1rem;
    text-align: center;
    font-weight: 600;
    padding: var(--spacing-xs) 0;
    background-color: var(--cor-lagoa);
    color: white;
}

.pacote-image {
    height: 160px;
    width: 100%;
    background-color: var(--cor-lagoa-escura);
    position: relative;
    overflow: hidden;
}

.pacote-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pacote-card:hover .pacote-image img {
    transform: scale(1.05);
}

.pacote-content {
    padding: var(--spacing-md);
    flex-grow: 1;
}

.pacote-titulo {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--cor-lagoa-escura);
}

.pacote-features {
    list-style-type: none;
    margin-bottom: var(--spacing-md);
}

.pacote-features li {
    margin-bottom: var(--spacing-xs);
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.95rem;
    color: var(--cor-texto-medio);
}

.pacote-features li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--cor-folhagem);
    font-weight: bold;
}

.pacote-preco-container {
    margin-top: auto;
    margin-bottom: var(--spacing-sm);
}

.pacote-preco-label {
    font-size: 0.85rem;
    color: var(--cor-texto-medio);
    margin-bottom: 0.25rem;
}

.pacote-preco {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.preco-valor {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cor-lagoa-escura);
}

.preco-info {
    font-size: 0.85rem;
    color: var(--cor-texto-medio);
}

.pacote-footer {
    padding: var(--spacing-sm);
    border-top: 1px solid var(--cor-borda);
    text-align: center;
    background-color: var(--cor-fundo-alt);
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--cor-lagoa) 0%, var(--cor-lagoa-escura) 100%);
    color: white;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-sm);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" d="M0,50 C25,20 75,20 100,50 C75,80 25,80 0,50 Z" /></svg>');
    background-size: 200px;
    opacity: 0.3;
}

.cta-section h2 {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    position: relative;
}

.cta-section p {
    margin-bottom: var(--spacing-md);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.cta-timer {
    margin-bottom: var(--spacing-md);
    font-weight: 600;
    position: relative;
}

.timer-display {
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
}

.timer-item {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: var(--borda-radius-sm);
}

.timer-number {
    font-size: 1.8rem;
    font-weight: 700;
}

.timer-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Footer */
.footer {
    background-color: var(--cor-fundo-alt);
    padding: var(--spacing-lg) var(--spacing-sm);
    text-align: center;
}

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

.logo-small {
    max-width: 120px;
}

.footer-text {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Página de Detalhes do Pacote */
.breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--cor-texto-medio);
    text-decoration: none;
    transition: var(--transicao);
}

.breadcrumb a:hover {
    color: var(--cor-lagoa);
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: var(--cor-texto-medio);
}

.pacote-header-detalhes {
    margin-bottom: var(--spacing-lg);
}

.pacote-titulo-detalhes {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-lagoa-escura);
    margin-bottom: var(--spacing-sm);
}

.pacote-promocao-tag {
    display: inline-block;
    background-color: var(--cor-destaque);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--borda-radius-sm);
    margin-bottom: var(--spacing-sm);
}

.pacote-preco-detalhes {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cor-lagoa-escura);
    margin-bottom: 0.25rem;
}

.pacote-preco-detalhes span {
    font-size: 1rem;
    font-weight: normal;
    color: var(--cor-texto-medio);
}

.pacote-valor-individual {
    font-size: 0.9rem;
    color: var(--cor-texto-medio);
    margin-bottom: var(--spacing-md);
}

.pacote-desconto {
    display: inline-block;
    color: var(--cor-destaque);
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.pacote-parcelamento {
    font-size: 0.9rem;
    color: var(--cor-folhagem);
    margin-bottom: var(--spacing-sm);
}

/* Galeria */
.galeria {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-radius: var(--borda-radius-md);
    overflow: hidden;
}

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

.galeria img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--borda-radius-md);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.galeria img:hover {
    transform: scale(1.02);
}

/* Destaques do pacote */
.destaques-container {
    background-color: var(--cor-dunas);
    border-radius: var(--borda-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.destaques-titulo {
    font-size: 1.3rem;
    color: var(--cor-lagoa-escura);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.destaques-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

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

.destaque-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-sm);
}

.destaque-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-lagoa);
    color: white;
    border-radius: 50%;
    margin-bottom: var(--spacing-xs);
    font-size: 1.2rem;
}

.destaque-texto {
    font-size: 0.9rem;
    color: var(--cor-texto-escuro);
}

/* Itinerário */
.itinerario-container {
    margin-bottom: var(--spacing-lg);
}

.itinerario-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.itinerario-titulo {
    font-size: 1.3rem;
    color: var(--cor-lagoa-escura);
    font-weight: 600;
}

.itinerario-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-lagoa);
    color: white;
    border-radius: 50%;
    margin-right: 0.75rem;
    font-size: 0.9rem;
}

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

.dia-card {
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--borda-radius-md);
    box-shadow: var(--sombra-leve);
    overflow: hidden;
}

.dia-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--cor-fundo-alt);
    cursor: pointer;
    transition: var(--transicao);
}

.dia-header:hover {
    background-color: var(--cor-dunas-escura);
}

.dia-numero {
    background-color: var(--cor-lagoa);
    color: white;
    font-weight: bold;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.dia-titulo {
    font-weight: 600;
    font-size: 1.1rem;
    flex-grow: 1;
}

.dia-toggle {
    width: 24px;
    height: 24px;
    position: relative;
    transition: transform 0.3s ease;
}

.dia-toggle:before, .dia-toggle:after {
    content: '';
    position: absolute;
    background-color: var(--cor-lagoa);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dia-toggle:before {
    width: 12px;
    height: 2px;
}

.dia-toggle:after {
    width: 2px;
    height: 12px;
    transition: transform 0.3s ease;
}

.dia-card.active .dia-toggle:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.dia-conteudo {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.dia-card.active .dia-conteudo {
    padding: var(--spacing-md);
    max-height: 500px;
}

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

.atividade {
    position: relative;
    padding-left: 1.5rem;
}

.atividade:before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background-color: var(--cor-lagoa);
    border-radius: 50%;
}

.atividade-icon {
    color: var(--cor-lagoa);
    margin-right: 0.25rem;
    font-weight: 400;
}

/* Observações */
.observacoes-container {
    background-color: var(--cor-fundo-alt);
    border-radius: var(--borda-radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.observacoes-titulo {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    color: var(--cor-lagoa-escura);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.observacoes-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-por-do-sol);
    color: white;
    border-radius: 50%;
    margin-right: 0.75rem;
    font-size: 0.9rem;
}

.observacoes-lista {
    list-style-type: none;
}

.observacoes-item {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.observacoes-item:before {
    content: '•';
    position: absolute;
    left: 0.5rem;
    color: var(--cor-por-do-sol);
}

/* CTA nas páginas de detalhes */
.cta-container {
    margin: var(--spacing-lg) 0;
    text-align: center;
    background-color: var(--cor-dunas);
    padding: var(--spacing-md);
    border-radius: var(--borda-radius-lg);
    position: relative;
    overflow: hidden;
}

.cta-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 80px 80px 0;
    border-color: transparent var(--cor-por-do-sol) transparent transparent;
    z-index: 1;
}

.cta-texto {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    font-weight: 600;
    color: var(--cor-lagoa-escura);
}

.voltar-container {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.btn-voltar {
    display: inline-flex;
    align-items: center;
    color: var(--cor-texto-medio);
    text-decoration: none;
    transition: var(--transicao);
}

.btn-voltar:before {
    content: '←';
    margin-right: 0.5rem;
    transition: var(--transicao);
}

.btn-voltar:hover {
    color: var(--cor-lagoa);
}

.btn-voltar:hover:before {
    transform: translateX(-4px);
}

/* Modal para imagens */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    display: block;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}