/* --- ESTILOS GERAIS E PALETA DE CORES --- */

/* Reset básico para melhor controle do layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que padding e borda não aumentem o tamanho do elemento */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #FFFFFF; /* Branco */
    color: #001F3F; /* Azul Marinho para textos */
}

/* Cores da Paleta Náutica */
:root {
    --cor-primaria: #001F3F;    /* Azul Marinho */
    --cor-secundaria: #FFFFFF;  /* Branco */
    --cor-destaque: #FF4136;    /* Vermelho Coral */
    --cor-ouro: #FFDC00;        /* Dourado/Areia */
}

/* --- ESTILO DO CABEÇALHO (HEADER) E MENU DE NAVEGAÇÃO --- */

.cabecalho {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    padding: 15px 5%;
    display: flex; /* Permite colocar logo e menu lado a lado */
    justify-content: space-between; /* Espaçamento entre logo e menu */
    align-items: center;
    /* Faz o cabeçalho ficar fixo no topo ao rolar a página */
    position: sticky;
    top: 0;
    z-index: 1000; /* Garante que fique acima de outros elementos */
}

.logo {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--cor-ouro); /* Logo em dourado */
}

.link-menu {
    color: var(--cor-secundaria);
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
    transition: all 0.3s; /* Transição para suavizar efeitos */
}

/* Comportamento Especial: Efeito Hover no Menu */
.link-menu:hover {
    color: var(--cor-destaque); /* Vermelho Coral ao passar o mouse */
    text-decoration: underline;
    text-decoration-color: var(--cor-ouro);
    text-underline-offset: 4px;
}

/* Estilo para destacar o link da página atual no menu */
.link-menu.ativo {
    color: var(--cor-ouro);
    border-bottom: 2px solid var(--cor-ouro);
    padding-bottom: 3px;
}


/* --- ESTILO DOS BOTÕES DE DESTAQUE --- */

.botao-destaque {
    display: inline-block;
    background-color: var(--cor-destaque);
    color: var(--cor-secundaria);
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 20px;
    transition: all 0.3s; /* Adicionado all para scale */
}

/* Comportamento Especial: Efeito Hover no Botão */
.botao-destaque:hover {
    background-color: #CC352B; /* Vermelho escuro ao passar */
    transform: scale(1.05); /* Faz o botão crescer levemente */
}

.botao-destaque.secundario {
    background-color: var(--cor-primaria);
}

.botao-destaque.secundario:hover {
    background-color: #000E1F;
}

/* --- 🌅 ESTILO DO BANNER PRINCIPAL 🌅 --- */

.banner-principal {

    background-image: url('../img/banner-floripa.jpg'); 
    
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 100px 5%;
    color: var(--cor-primaria);
}

.banner-principal h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}


/* --- 🌟 ESTILO DA SEÇÃO CARROSSEL DE FEED 🌟 --- */

.carrossel-feed {
    background-color: var(--cor-primaria); /* Fundo Azul Marinho */
    padding: 30px 5%;
    text-align: center;
}

.carrossel-feed h2 {
    color: var(--cor-secundaria); /* Título em Branco */
    margin-bottom: 20px;
    font-size: 1.8em;
}

.container-carrossel {
    display: flex;
    overflow-x: auto; /* Permite rolar se o conteúdo for muito longo */
    gap: 15px; /* Espaço entre os itens */
    padding-bottom: 10px; 
    /* Esconder a barra de rolagem (CSS puramente visual) */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Esconde a barra de rolagem no Chrome, Safari e Opera */
.container-carrossel::-webkit-scrollbar {
    display: none;
}

.item-feed {
    flex: 0 0 280px; /* Largura fixa para cada item (ajustável) */
    background-color: var(--cor-secundaria);
    color: var(--cor-primaria);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-bottom: 3px solid var(--cor-ouro); /* Toque dourado */
    text-align: left;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
}


/* --- 🔧 ESTILO DOS DESTAQUES E CARDS --- */

.destaques {
    padding: 40px 5%;
    text-align: center;
}

.destaques h2 {
    margin-bottom: 30px;
    font-size: 2em;
    color: var(--cor-primaria);
}

.container-cards {
    display: flex;
    justify-content: space-around; 
    flex-wrap: wrap; 
}

.card {
    width: 30%; /* Três cards por linha */
    min-width: 250px;
    background-color: #F8F8F8;
    padding: 20px;
    border-top: 5px solid var(--cor-ouro); /* Destaque dourado no topo */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 15px;
    transition: all 0.3s; /* Transição para suavizar efeitos */
}

/* Comportamento Especial: Efeito Hover no Card */
.card:hover {
    transform: translateY(-5px) scale(1.02); /* Sobe 5px e cresce um pouco */
    box-shadow: 0 8px 15px rgba(0,0,0,0.2); /* Sombra mais forte */
}


/* --- 📰 ESTILO DAS NOTÍCIAS --- */

.noticias {
    background-color: #f4f4f4;
    padding: 40px 5%;
    text-align: center;
}

.noticias h2 {
    margin-bottom: 30px;
    font-size: 2em;
    color: var(--cor-primaria);
}

.container-noticias {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.noticia-item {
    background-color: var(--cor-secundaria);
    padding: 20px;
    width: 45%;
    border-left: 3px solid var(--cor-destaque);
    text-align: left;
}

/* --- 📞 ESTILO DO RODAPÉ (FOOTER) --- */

.rodape {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
}

/* --- ESTILO GERAL DE PÁGINAS INTERNAS (Galeria, Serviços, Contato, etc.) --- */
.conteudo-principal {
    padding: 40px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.titulo-pagina {
    text-align: center;
    color: var(--cor-primaria);
    font-size: 2.5em;
    margin-bottom: 5px;
}

.subtitulo-pagina {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-style: italic;
}

/* --- ESTILO ESPECÍFICO DA GALERIA (Grid CSS) --- */

.titulo-secao-galeria {
    color: var(--cor-destaque); /* Título em Vermelho Coral */
    border-bottom: 2px solid var(--cor-ouro); /* Sublinhado Dourado */
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.container-grid-midia {
    /* Grid CSS para criar a estrutura de colunas */
    display: grid;
    /* Colunas responsivas: no mínimo 280px, preenchendo o espaço */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px;
}

.item-midia {
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    overflow: hidden; 
    border-radius: 5px;
}

.item-midia:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.imagem-galeria, .video-galeria {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; 
}

.legenda-midia {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    padding: 10px;
    text-align: center;
    font-size: 0.9em;
}


/* --- RESPONSIVIDADE BÁSICA (MÓVEL) --- */
@media (max-width: 768px) {
    .cabecalho {
        flex-direction: column; /* Coloca o menu abaixo do logo */
        text-align: center;
    }
    .menu-navegacao {
        margin-top: 10px;
    }
    .link-menu {
        margin: 0 8px; /* Espaçamento menor no menu */
    }
    
    .container-cards {
        flex-direction: column; /* Coloca os cards um abaixo do outro */
        align-items: center;
    }
    .card {
        width: 90%;
    }
    
    .container-noticias {
        flex-direction: column;
        align-items: center;
    }
    .noticia-item {
        width: 90%;
    }
    
    .container-carrossel {
        /* Garante que o carrossel ocupe a largura total */
        justify-content: flex-start;
    }
}

/* --- ESTILO ESPECÍFICO DE SERVIÇOS --- */

.servico-destaque {
    background-color: #f0f8ff; /* Fundo levemente azulado */
    border: 1px solid var(--cor-ouro);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 40px;
}

.servico-destaque h2 {
    color: var(--cor-destaque); /* Vermelho Coral */
    margin-bottom: 10px;
    font-size: 2em;
}

.servico-destaque p {
    margin-bottom: 20px;
    font-size: 1.1em;
}

.container-listagem-servicos {
    display: grid;
    /* 2 colunas em telas maiores */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
    gap: 30px;
}

.item-servico {
    background-color: var(--cor-secundaria);
    border: 1px solid #ddd;
    border-left: 5px solid var(--cor-primaria); /* Destaque lateral Azul Marinho */
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s;
}

.item-servico:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.titulo-servico {
    color: var(--cor-primaria);
    margin-bottom: 10px;
    font-size: 1.5em;
}

.lista-detalhes {
    list-style-type: none; /* Remove as bolinhas padrão */
    padding-left: 0;
    margin-top: 10px;
}

.lista-detalhes li {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FF4136' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm3.95-10.45l-5 5a.5.5 0 0 1-.7 0l-3-3a.5.5 0 0 1 .7-.7L6.5 9.79l4.65-4.65a.5.5 0 0 1 .7.7z'/%3E%3C/svg%3E") no-repeat left center; /* Ícone Náutico (Vermelho Coral) */
    background-size: 14px;
    padding-left: 20px;
    margin-bottom: 5px;
}

/* --- Responsividade para Serviços em Telas Pequenas --- */
@media (max-width: 900px) {
    .container-listagem-servicos {
        /* Garante que em telas menores de 900px, a listagem caia para uma coluna */
        grid-template-columns: 1fr;
    }
}

/* --- ESTILO ESPECÍFICO DA LOJA --- */

.filtros-loja {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px dashed #ddd;
}

.botao-filtro {
    background-color: #eee;
    color: var(--cor-primaria);
    border: 1px solid #ccc;
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.botao-filtro:hover, .botao-filtro.ativo {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    border-color: var(--cor-ouro);
}

.container-grid-produtos {
    /* Grid CSS para listar os produtos em colunas */
    display: grid;
    /* Colunas responsivas: no mínimo 250px, até 4 itens por linha */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px;
    margin-bottom: 40px;
}

.item-produto {
    background-color: var(--cor-secundaria);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.item-produto:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.imagem-produto {
    width: 100%;
    height: 200px; /* Altura fixa para alinhar os produtos */
    object-fit: cover; /* Recorta a imagem para cobrir a área */
    border-radius: 5px;
    margin-bottom: 10px;
}

.nome-produto {
    color: var(--cor-primaria);
    font-size: 1.3em;
    margin-bottom: 5px;
}

.descricao-produto {
    color: #666;
    font-size: 0.9em;
    height: 36px; /* Altura fixa para descrição (2 linhas) */
    overflow: hidden;
    margin-bottom: 10px;
}

.preco-produto {
    display: block;
    color: var(--cor-destaque); /* Preço em Vermelho Coral (Destaque!) */
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Tamanho menor para o botão de compra */
.botao-destaque.pequeno {
    padding: 8px 18px;
    font-size: 0.9em;
}

.chamada-contato-loja {
    text-align: center;
    background-color: var(--cor-ouro);
    padding: 30px;
    border-radius: 8px;
    color: var(--cor-primaria);
}

.chamada-contato-loja p {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
}


/* --- ESTILO ESPECÍFICO DE CONTATO --- */

.container-contato {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* Alinha o conteúdo ao topo */
}

/* Estilo para as duas colunas */
.coluna-formulario, .coluna-info-mapa {
    flex: 1; /* Faz as duas colunas ocuparem o mesmo espaço */
    min-width: 300px; /* Garante um tamanho mínimo antes de quebrar */
}

.coluna-formulario h2, .coluna-info-mapa h2 {
    color: var(--cor-destaque);
    border-bottom: 2px solid var(--cor-ouro);
    padding-bottom: 5px;
    margin-bottom: 25px;
}

/* Estilo do Formulário */
.formulario-contato label {
    display: block; /* Garante que a label ocupe toda a linha */
    color: var(--cor-primaria);
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
}

.formulario-contato input[type="text"],
.formulario-contato input[type="email"],
.formulario-contato select,
.formulario-contato textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.formulario-contato input:focus,
.formulario-contato select:focus,
.formulario-contato textarea:focus {
    border-color: var(--cor-ouro);
    box-shadow: 0 0 5px rgba(255, 220, 0, 0.5);
    outline: none; /* Remove a borda padrão do navegador */
}

.formulario-contato textarea {
    resize: vertical; /* Permite redimensionar apenas verticalmente */
}

.formulario-contato .botao-destaque {
    width: 100%;
    margin-top: 25px;
    border: none;
    cursor: pointer;
}

/* Informações de Contato e Mapa */
.info-detalhes {
    background-color: #f4f4f4;
    border-left: 5px solid var(--cor-primaria);
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 4px;
}

.info-detalhes p {
    margin-bottom: 10px;
}

.titulo-mapa {
    color: var(--cor-primaria);
    margin-bottom: 10px;
}

.mapa-container {
    /* Container para garantir a responsividade do mapa */
    overflow: hidden;
    padding-bottom: 56.25%; /* Proporção 16:9 (altura/largura) */
    position: relative;
    height: 0;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.mapa-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

/* --- Responsividade para Contato em Telas Pequenas --- */
@media (max-width: 900px) {
    .container-contato {
        /* As colunas ficam uma em cima da outra em telas menores */
        flex-direction: column; 
    }
}

/* --- ESTILO ESPECÍFICO DE NOTÍCIAS/BLOG --- */

.container-blog {
    max-width: 900px;
    margin: 0 auto;
}

.post-blog {
    display: flex;
    background-color: var(--cor-secundaria);
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden; /* Garante que a borda seja aplicada corretamente */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.imagem-post {
    width: 35%; /* A imagem ocupa 35% da largura do post */
    height: auto;
    object-fit: cover;
}

.conteudo-post {
    width: 65%; /* O texto ocupa 65% da largura do post */
    padding: 20px;
}

.titulo-post {
    color: var(--cor-primaria);
    font-size: 1.6em;
    margin-bottom: 5px;
}

.data-post {
    color: var(--cor-destaque);
    font-size: 0.85em;
    font-style: italic;
    margin-bottom: 10px;
}

.resumo-post {
    color: #444;
    margin-bottom: 15px;
}

.botao-leia-mais {
    display: inline-block;
    color: var(--cor-ouro);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid var(--cor-ouro);
    transition: color 0.3s;
}

.botao-leia-mais:hover {
    color: var(--cor-destaque);
    border-bottom-color: var(--cor-destaque);
}

.divisor-post {
    border: none;
    border-top: 1px dashed #ccc;
    margin: 30px auto;
    width: 80%;
}

.paginacao {
    text-align: center;
    margin-top: 40px;
}

.paginacao a {
    margin: 0 10px;
}

/* --- Responsividade para Notícias/Blog em Telas Pequenas --- */
@media (max-width: 768px) {
    .post-blog {
        /* Empilha a imagem acima do texto em telas menores */
        flex-direction: column;
    }

    .imagem-post {
        width: 100%;
        height: 200px; 
    }

    .conteudo-post {
        width: 100%;
        padding: 15px;
    }
}