/* ==========================================
   BLOCO 1: RESET E CONFIGURAÇÕES BASE
   Responsabilidade: Normalização e configuração inicial
   ========================================== */

/* Reset universal */
* {
    box-sizing: border-box; /* Modelo de box consistente */
}

/* ==========================================
   BLOCO 2: CONFIGURAÇÃO DO CORPO
   Responsabilidade: Estilo base da página
   ========================================== */

/* Configuração do body */
body {
    font-family: 'Arial', sans-serif; /* Fonte principal */
}

/* ==========================================
   BLOCO 3: HEADER DA PÁGINA DE DESTINOS
   Responsabilidade: Seção hero com background
   ========================================== */

/* Header da página de destinos */
.destinations-header {
    height: 60vh; /* 60% da altura da viewport */
    min-height: 400px; /* Altura mínima */
    background-image: url('../imagens/fotos-banner/banner-destinos.png'); /* Overlay + imagem */
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar imagem */
    background-attachment: fixed; /* Efeito parallax */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    text-align: center; /* Texto centralizado */
    color: white; /* Texto branco */
    margin-top: 0; /* Sem margem superior */
}

/* ==========================================
   BLOCO 4: CONTEÚDO DO HEADER DE DESTINOS
   Responsabilidade: Título e subtítulo
   ========================================== */

/* Container do conteúdo do header */
.destinations-header-content {
    max-width: 800px; /* Largura máxima */
    padding: 0 20px; /* Espaçamento lateral */
}

/* ==========================================
   BLOCO 5: TÍTULO PRINCIPAL DOS DESTINOS
   Responsabilidade: Título da página
   ========================================== */

/* Título da página de destinos */
.destinations-header-content h1 {
    font-size: clamp(28px, 5vw, 48px); /* Tamanho responsivo */
    margin-bottom: 20px; /* Espaçamento abaixo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/* ==========================================
   BLOCO 6: DESCRIÇÃO DOS DESTINOS
   Responsabilidade: Subtítulo explicativo
   ========================================== */

/* Parágrafo do header */
.destinations-header-content p {
    font-size: clamp(16px, 3vw, 20px); /* Tamanho responsivo */
    margin-bottom: 30px; /* Espaçamento abaixo */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/* ==========================================
   BLOCO 7: SEÇÕES COM PADDING RESPONSIVO
   Responsabilidade: Espaçamento adaptativo
   ========================================== */

/* Seções com padding responsivo */
.featured-destinations {
    padding: clamp(40px, 8vw, 80px) 0; /* Padding responsivo */
}

/* ==========================================
   BLOCO 8: TÍTULOS DE SEÇÃO
   Responsabilidade: Estilo dos títulos principais
   ========================================== */

/* Container dos títulos de seção */
.section-title {
    text-align: center; /* Centralização */
    margin-bottom: clamp(30px, 6vw, 50px); /* Espaçamento responsivo */
}

/* ==========================================
   BLOCO 9: TÍTULOS H2 DOS DESTINOS
   Responsabilidade: Hierarquia visual dos títulos
   ========================================== */

/* Títulos H2 dos destinos */
.section-title h2 {
    font-family: 'Arial', sans-serif; /* Fonte consistente */
    color: #0b3d91; /* Cor azul da marca */
    font-size: clamp(24px, 5vw, 32px); /* Tamanho responsivo */
    margin-bottom: clamp(10px, 2vw, 20px); /* Espaçamento responsivo */
    line-height: 1.3; /* Altura de linha */
}

/* ==========================================
   BLOCO 10: PARÁGRAFOS DOS TÍTULOS
   Responsabilidade: Texto explicativo dos títulos
   ========================================== */

/* Parágrafos dos títulos */
.section-title p {
    font-family: 'Arial', sans-serif; /* Fonte consistente */
    color: #666; /* Cor cinza */
    max-width: min(90%, 700px); /* Largura máxima responsiva */
    margin: 0 auto; /* Centralização */
    font-size: clamp(14px, 2.5vw, 16px); /* Tamanho responsivo */
    line-height: 1.6; /* Altura de linha */
}

/* ==========================================
   BLOCO 11: GRID TOTALMENTE RESPONSIVO
   Responsabilidade: Layout adaptativo dos cards
   ========================================== */

/* Grid responsivo dos destinos */
.destinations-grid {
    display: grid; /* Layout em grid */
    grid-template-columns: 1fr; /* Coluna única inicial */
    gap: clamp(20px, 4vw, 30px); /* Gap responsivo */
}

/* ==========================================
   BLOCO 12: CARDS OTIMIZADOS
   Responsabilidade: Container principal dos destinos
   ========================================== */

/* Cards dos destinos */
.destination-card {
    background-color: white; /* Fundo branco */
    border-radius: clamp(6px, 1.5vw, 12px); /* Bordas responsivas */
    overflow: hidden; /* Ocultar overflow */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Sombra sutil */
    transition: all 0.3s ease; /* Transições suaves */
    width: 100%; /* Largura total */
    max-width: 100%; /* Largura máxima */
}

/* ==========================================
   BLOCO 13: HOVER DOS CARDS
   Responsabilidade: Efeito visual no hover
   ========================================== */

/* Hover nos cards */
.destination-card:hover {
    transform: translateY(-8px); /* Elevação */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* Sombra maior */
}

/* ==========================================
   BLOCO 14: IMAGEM DOS DESTINOS
   Responsabilidade: Área da imagem do card
   ========================================== */

/* Container da imagem */
.destination-image {
    height: clamp(180px, 25vw, 220px); /* Altura responsiva */
    overflow: hidden; /* Ocultar overflow */
    position: relative; /* Para posicionamento */
}

/* ==========================================
   BLOCO 15: IMAGEM DOS DESTINOS
   Responsabilidade: Elemento visual da imagem
   ========================================== */

/* Imagem dos destinos */
.destination-image img {
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    object-fit: cover; /* Manter proporções */
    transition: transform 0.5s ease; /* Transição de escala */
}

/* ==========================================
   BLOCO 16: HOVER DA IMAGEM
   Responsabilidade: Efeito zoom na imagem
   ========================================== */

/* Hover na imagem */
.destination-card:hover .destination-image img {
    transform: scale(1.05); /* Escala no hover */
}

/* ==========================================
   BLOCO 17: CONTEÚDO DOS CARDS
   Responsabilidade: Área textual dos cards
   ========================================== */

/* Conteúdo dos cards */
.destination-content {
    padding: clamp(15px, 4vw, 25px); /* Padding responsivo */
}

/* ==========================================
   BLOCO 18: TÍTULOS DOS DESTINOS
   Responsabilidade: Nome do destino
   ========================================== */

/* Título do destino */
.destination-title {
    font-size: clamp(16px, 3vw, 22px); /* Tamanho responsivo */
    color: #0b3d91; /* Cor azul da marca */
    margin-bottom: 8px; /* Espaçamento abaixo */
    font-weight: 600; /* Peso semi-negrito */
    line-height: 1.3; /* Altura de linha */
}

/* ==========================================
   BLOCO 19: LOCALIZAÇÃO DOS DESTINOS
   Responsabilidade: Indicação geográfica
   ========================================== */

/* Localização do destino */
.destination-location {
    color: #666; /* Cor cinza */
    font-size: clamp(12px, 2vw, 14px); /* Tamanho responsivo */
    margin-bottom: clamp(12px, 2vw, 18px); /* Espaçamento responsivo */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
}

/* ==========================================
   BLOCO 20: ÍCONE DA LOCALIZAÇÃO
   Responsabilidade: Ícone geográfico
   ========================================== */

/* Ícone de localização */
.destination-location i {
    margin-right: 6px; /* Espaçamento à direita */
    color: #00b4d8; /* Cor azul */
}

/* ==========================================
   BLOCO 21: GRID DE DETALHES RESPONSIVO
   Responsabilidade: Layout das informações técnicas
   ========================================== */

/* Grid de detalhes do destino */
.destination-details {
    display: grid; /* Layout em grid */
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: clamp(8px, 2vw, 12px); /* Gap responsivo */
    margin-bottom: clamp(12px, 2vw, 18px); /* Espaçamento responsivo */
    padding-bottom: clamp(12px, 2vw, 18px); /* Padding inferior responsivo */
    border-bottom: 1px solid #eee; /* Borda inferior */
}

/* ==========================================
   BLOCO 22: ITENS DE DETALHE
   Responsabilidade: Container individual dos detalhes
   ========================================== */

/* Item de detalhe */
.detail-item {
    display: flex; /* Layout flexbox */
    flex-direction: column; /* Elementos em coluna */
}

/* ==========================================
   BLOCO 23: RÓTULOS DOS DETALHES
   Responsabilidade: Labels dos itens técnicos
   ========================================== */

/* Rótulo do detalhe */
.detail-label {
    font-size: clamp(10px, 1.8vw, 12px); /* Tamanho responsivo */
    color: #666; /* Cor cinza */
    margin-bottom: 4px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 24: VALORES DOS DETALHES
   Responsabilidade: Dados técnicos dos destinos
   ========================================== */

/* Valor do detalhe */
.detail-value {
    font-weight: 500; /* Peso semi-negrito */
    color: #333; /* Cor escura */
    font-size: clamp(12px, 2vw, 14px); /* Tamanho responsivo */
}

/* ==========================================
   BLOCO 25: DESCRIÇÃO DOS DESTINOS
   Responsabilidade: Texto explicativo do destino
   ========================================== */

/* Descrição do destino */
.destination-description {
    color: #666; /* Cor cinza */
    font-size: clamp(12px, 2vw, 14px); /* Tamanho responsivo */
    line-height: 1.6; /* Altura de linha */
    margin-bottom: clamp(15px, 3vw, 25px); /* Espaçamento responsivo */
}

/* ==========================================
   BLOCO 26: BOTÃO DOS DESTINOS
   Responsabilidade: Call-to-action do card
   ========================================== */

/* Botão do destino */
.destination-button {
    display: block; /* Comportamento de bloco */
    background-color: #0b3d91; /* Fundo azul */
    color: white; /* Texto branco */
    text-align: center; /* Centralização do texto */
    padding: clamp(10px, 2vw, 14px) clamp(15px, 3vw, 20px); /* Padding responsivo */
    border-radius: clamp(4px, 1vw, 6px); /* Bordas responsivas */
    font-weight: 500; /* Peso semi-negrito */
    font-size: clamp(12px, 2vw, 14px); /* Tamanho responsivo */
    transition: all 0.3s ease; /* Transições suaves */
    text-decoration: none; /* Sem sublinhado */
}

/* ==========================================
   BLOCO 27: HOVER DO BOTÃO
   Responsabilidade: Efeito visual do botão
   ========================================== */

/* Hover no botão */
.destination-button:hover {
    background-color: #072a66; /* Azul mais escuro */
    transform: translateY(-2px); /* Elevação */
}

/* ==========================================
   BLOCO 28: SEÇÃO TODOS OS DESTINOS
   Responsabilidade: Container da lista completa
   ========================================== */

/* Seção de todos os destinos */
.all-destinations {
    padding: clamp(40px, 8vw, 80px) 0; /* Padding responsivo */
    background-color: #f9f9f9; /* Fundo cinza claro */
}

/* ==========================================
   BLOCO 29: ESTADO SEM DESTINOS
   Responsabilidade: Mensagem quando não há dados
   ========================================== */

/* Container de estado vazio */
.no-destinations {
    text-align: center; /* Centralização */
    padding: clamp(30px, 6vw, 50px); /* Padding responsivo */
    background-color: #f8f9fa; /* Fundo cinza */
    border-radius: clamp(6px, 1.5vw, 12px); /* Bordas responsivas */
    margin: clamp(15px, 3vw, 25px) 0; /* Espaçamento responsivo */
}

/* ==========================================
   BLOCO 30: TÍTULO DO ESTADO VAZIO
   Responsabilidade: Título da mensagem
   ========================================== */

/* Título do estado vazio */
.no-destinations h3 {
    color: #0b3d91; /* Cor azul da marca */
    margin-bottom: clamp(8px, 2vw, 15px); /* Espaçamento responsivo */
    font-size: clamp(18px, 4vw, 24px); /* Tamanho responsivo */
}

/* ==========================================
   BLOCO 31: TEXTO DO ESTADO VAZIO
   Responsabilidade: Descrição do estado
   ========================================== */

/* Parágrafo do estado vazio */
.no-destinations p {
    color: #666; /* Cor cinza */
    margin-bottom: clamp(15px, 3vw, 25px); /* Espaçamento responsivo */
    font-size: clamp(14px, 2.5vw, 16px); /* Tamanho responsivo */
}

/* ==========================================
   BLOCO 32: SEÇÃO CTA RESPONSIVA
   Responsabilidade: Call-to-action final
   ========================================== */

/* Seção de chamada para ação */
.cta-section {
    padding: clamp(50px, 10vw, 100px) 0; /* Padding responsivo */
    text-align: center; /* Centralização */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("images/cta-bg.jpg"); /* Overlay + imagem */
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar imagem */
    background-attachment: fixed; /* Efeito parallax */
    color: white; /* Texto branco */
}

/* ==========================================
   BLOCO 33: CONTEÚDO DA SEÇÃO CTA
   Responsabilidade: Container do CTA
   ========================================== */

/* Container do conteúdo CTA */
.cta-content {
    max-width: min(90%, 700px); /* Largura máxima responsiva */
    margin: 0 auto; /* Centralização */
    padding: 0 clamp(15px, 4vw, 30px); /* Padding responsivo */
}

/* ==========================================
   BLOCO 34: TÍTULO DO CTA
   Responsabilidade: Título da seção CTA
   ========================================== */

/* Título da seção CTA */
.cta-content h2 {
    font-size: clamp(24px, 6vw, 42px); /* Tamanho responsivo */
    margin-bottom: clamp(15px, 3vw, 25px); /* Espaçamento responsivo */
    line-height: 1.2; /* Altura de linha */
}

/* ==========================================
   BLOCO 35: TEXTO DO CTA
   Responsabilidade: Descrição do CTA
   ========================================== */

/* Parágrafo do CTA */
.cta-content p {
    font-size: clamp(14px, 3vw, 18px); /* Tamanho responsivo */
    margin-bottom: clamp(25px, 5vw, 40px); /* Espaçamento responsivo */
    opacity: 0.9; /* Transparência */
    line-height: 1.6; /* Altura de linha */
}

/* ==========================================
   BLOCO 36: BOTÕES CTA RESPONSIVOS
   Responsabilidade: Layout dos botões de ação
   ========================================== */

/* Container dos botões CTA */
.cta-buttons {
    display: flex; /* Layout flexbox */
    justify-content: center; /* Centralização horizontal */
    gap: clamp(15px, 3vw, 25px); /* Gap responsivo */
    flex-wrap: wrap; /* Permitir quebra de linha */
}

/* ==========================================
   BLOCO 37: BOTÕES CTA INDIVIDUAIS
   Responsabilidade: Estilo dos botões de ação
   ========================================== */

/* Botões CTA */
.cta-btn-primary,
.cta-btn-secondary {
    padding: clamp(10px, 2vw, 14px) clamp(20px, 4vw, 35px); /* Padding responsivo */
    border-radius: clamp(4px, 1vw, 6px); /* Bordas responsivas */
    font-size: clamp(14px, 2.5vw, 16px); /* Tamanho responsivo */
    font-weight: 500; /* Peso semi-negrito */
    transition: all 0.3s ease; /* Transições suaves */
    text-decoration: none; /* Sem sublinhado */
    min-width: clamp(120px, 25vw, 160px); /* Largura mínima responsiva */
    text-align: center; /* Centralização do texto */
}

/* ==========================================
   BLOCO 38: BOTÃO CTA PRIMÁRIO
   Responsabilidade: Botão principal de ação
   ========================================== */

/* Botão CTA primário */
.cta-btn-primary {
    background-color: #00b4d8; /* Fundo azul */
    color: white; /* Texto branco */
}

/* ==========================================
   BLOCO 39: HOVER DO BOTÃO PRIMÁRIO
   Responsabilidade: Efeito visual do botão principal
   ========================================== */

/* Hover no botão primário */
.cta-btn-primary:hover {
    background-color: #0096c7; /* Azul mais escuro */
    transform: translateY(-2px); /* Elevação */
}

/* ==========================================
   BLOCO 40: BOTÃO CTA SECUNDÁRIO
   Responsabilidade: Botão alternativo de ação
   ========================================== */

/* Botão CTA secundário */
.cta-btn-secondary {
    background-color: transparent; /* Fundo transparente */
    color: white; /* Texto branco */
    border: 2px solid white; /* Borda branca */
}

/* ==========================================
   BLOCO 41: HOVER DO BOTÃO SECUNDÁRIO
   Responsabilidade: Efeito visual do botão alternativo
   ========================================== */

/* Hover no botão secundário */
.cta-btn-secondary:hover {
    background-color: white; /* Fundo branco */
    color: #0b3d91; /* Texto azul */
    transform: translateY(-2px); /* Elevação */
}

/* ==========================================
   BLOCO 42: CONTAINER GERAL
   Responsabilidade: Container padrão reutilizável
   ========================================== */

/* Container padrão */
.container {
    max-width: min(95%, 1200px); /* Largura máxima responsiva */
    margin: 0 auto; /* Centralização */
    padding: 0 clamp(15px, 4vw, 30px); /* Padding responsivo */
}

/* ==========================================
   BLOCO 43: MOBILE PEQUENO
   Responsabilidade: Smartphones (320px - 480px)
   ========================================== */

/* Mobile pequeno */
@media (max-width: 480px) {
    /* Background sem parallax em mobile */
    .destinations-header {
        background-attachment: scroll;
        margin-top: 60px;
    }

    /* Grid de detalhes em coluna única */
    .destination-details {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Background sem parallax no CTA */
    .cta-section {
        background-attachment: scroll;
    }

    /* Botões em coluna */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Botões em largura total */
    .cta-btn-primary,
    .cta-btn-secondary {
        width: 100%;
        max-width: 280px;
    }
}

/* ==========================================
   BLOCO 44: MOBILE GRANDE E TABLET PEQUENO
   Responsabilidade: (481px - 768px)
   ========================================== */

/* Mobile grande e tablet pequeno */
@media (min-width: 481px) and (max-width: 768px) {
    /* Grid com 2 colunas em telas médias */
    .destinations-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }

    /* Cards com largura limitada */
    .destination-card {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ==========================================
   BLOCO 45: TABLET MÉDIO
   Responsabilidade: (769px - 1024px)
   ========================================== */

/* Tablet médio */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Grid com colunas maiores */
    .destinations-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
    }

    /* Botões com gap maior */
    .cta-buttons {
        gap: 20px;
    }
}

/* ==========================================
   BLOCO 46: DESKTOP PEQUENO
   Responsabilidade: (1025px - 1200px)
   ========================================== */

/* Desktop pequeno */
@media (min-width: 1025px) and (max-width: 1200px) {
    /* Grid otimizado para desktop pequeno */
    .destinations-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 30px;
    }
}

/* ==========================================
   BLOCO 47: DESKTOP GRANDE
   Responsabilidade: (1201px+)
   ========================================== */

/* Desktop grande */
@media (min-width: 1201px) {
    /* Grid otimizado para desktop grande */
    .destinations-grid {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 35px;
    }

    /* Cards com largura específica */
    .destination-card {
        max-width: 420px;
    }
}

/* ==========================================
   BLOCO 48: OTIMIZAÇÕES PARA DISPOSITIVOS COM HOVER
   Responsabilidade: Melhorias para desktop
   ========================================== */

/* Media query para dispositivos com hover */
@media (hover: hover) {
    /* Hover mais pronunciado em desktop */
    .destination-card:hover {
        transform: translateY(-10px);
    }

    /* Hover maior nos botões */
    .destination-button:hover {
        transform: translateY(-3px);
    }

    /* Hover maior nos botões CTA */
    .cta-btn-primary:hover,
    .cta-btn-secondary:hover {
        transform: translateY(-3px);
    }
}

/* ==========================================
   BLOCO 49: TELAS DE ALTA DENSIDADE
   Responsabilidade: Otimização para Retina
   ========================================== */

/* Otimizações para telas de alta densidade */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Garantir qualidade das imagens */
    .destinations-header,
    .cta-section {
        background-size: cover;
    }
}

/* ==========================================
   BLOCO 50: MODO PAISAGEM MOBILE
   Responsabilidade: Otimização para orientação
   ========================================== */

/* Modo paisagem para dispositivos móveis */
@media (max-height: 500px) and (orientation: landscape) {
    /* Header com altura maior em paisagem */
    .destinations-header {
        height: 80vh;
        margin-top: 50px;
    }

    /* Título menor em paisagem */
    .destinations-header-content h1 {
        font-size: clamp(20px, 4vw, 32px);
    }
}

/* ==========================================
   BLOCO 51: ACESSIBILIDADE - REDUÇÃO DE MOVIMENTO
   Responsabilidade: Suporte para usuários sensíveis
   ========================================== */

/* Acessibilidade - redução de movimento */
@media (prefers-reduced-motion: reduce) {
    /* Desabilitar transições para reduzir movimento */
    .destination-card,
    .destination-image img,
    .destination-button,
    .cta-btn-primary,
    .cta-btn-secondary {
        transition: none;
    }

    /* Remover transformações no hover */
    .destination-card:hover {
        transform: none;
    }

    .destination-card:hover .destination-image img {
        transform: none;
    }
}