/* =========================================
   1. CONFIGURAÇÕES GERAIS E VARIÁVEIS
   ========================================= */
:root {
    --otheva-dark: #102e38;
    --otheva-light: #1c4b5b;
    --otheva-yellow: #fdd835;
    --otheva-blue: #004553;
    --text-gray: #555555;
    --light-bg: #f8f9fa;
    --white: #ffffff;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif; 
}

body {
    background-color: var(--light-bg);
    color: var(--text-gray);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; }
ul { list-style: none; }

/* =========================================
   2. CABEÇALHO (HEADER)
   ========================================= */
header {
    background: var(--otheva-dark);
    padding: 10px 5%; /* Padding menor para header mais fino */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

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

/* IMPORTANTE: Isso controla o tamanho da logo */
.logo img {
    height: 50px; 
    width: auto;
    display: block;
}

nav ul { display: flex; gap: 30px; }
nav a { color: var(--white); font-size: 14px; font-weight: 600; text-transform: uppercase; transition: color 0.3s; }
nav a:hover { color: var(--otheva-yellow); }

.btn-header { border: 2px solid var(--otheva-yellow); padding: 8px 20px; border-radius: 4px; color: var(--otheva-yellow); }
.btn-header:hover { background: var(--otheva-yellow); color: var(--otheva-dark); }

/* Responsivo do Header */
@media (max-width: 768px) {
    header { flex-direction: column; gap: 15px; padding: 15px; }
    nav ul { gap: 15px; flex-wrap: wrap; justify-content: center; }
}

/* =========================================
   3. PÁGINA DE TROCAS (ESTILO NOVO)
   ========================================= */
.page-container {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
    min-height: 60vh; /* Garante que o footer fique lá embaixo */
}

.page-title {
    text-align: center;
    margin-bottom: 50px;
}

.page-title h1 {
    font-size: 2.2rem;
    color: var(--otheva-dark);
    margin-bottom: 10px;
}

/* Estilo do Formulário */
.form-troca {
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Sombra suave no form */
}

.form-row {
    display: flex;
    gap: 30px;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-group.full-width { width: 100%; }

.input-group label {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Campos apenas com linha embaixo (Estilo Mancer) */
.input-group input, 
.input-group select, 
.input-group textarea {
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    font-size: 1rem;
    color: #333;
    outline: none;
    border-radius: 0;
    transition: border-color 0.3s;
}

.input-group input:focus, 
.input-group select:focus, 
.input-group textarea:focus {
    border-bottom-color: var(--otheva-dark);
}

.btn-submit-troca {
    background-color: transparent;
    border: 2px solid var(--otheva-dark);
    color: var(--otheva-dark);
    padding: 15px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
    margin-top: 20px;
    letter-spacing: 1px;
}

.btn-submit-troca:hover {
    background-color: var(--otheva-dark);
    color: white;
}

/* Caixa Cinza de Contato */
.info-box {
    margin-top: 50px;
    background-color: #e9ecef;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.info-logo {
    height: 35px;
    opacity: 0.6;
    filter: grayscale(100%);
    margin-bottom: 10px;
}

/* Responsivo do Form */
@media (max-width: 600px) {
    .form-row { flex-direction: column; gap: 20px; }
    .form-troca { padding: 20px; }
}

/* =========================================
   4. RODAPÉ (FOOTER)
   ========================================= */
footer {
    background-color: var(--otheva-dark);
    color: var(--white);
    padding: 40px 10% 20px;
    text-align: center;
    margin-top: auto; /* Empurra footer pro final */
}

/* =========================================
   BARRA INFERIOR DO RODAPÉ (Corrigida)
   ========================================= */

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    margin-top: 40px;
    
    /* O SEGREDO DO ALINHAMENTO PERFEITO */
    display: grid;
    /* Define 3 colunas: 
       1fr (ocupa o que der na esq) 
       auto (tamanho da logo) 
       1fr (ocupa o que der na dir) */
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
    
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    color: #777;
    font-size: 13px;
    padding-bottom: 20px; /* Um respiro no final da página */
}

/* Força o primeiro texto (Copyright) a ficar na esquerda */
.footer-bottom span:first-child {
    text-align: left;
}

/* Centraliza a logo na coluna do meio */
.footer-bottom-logo {
    height: 35px; /* Altura da logo */
    width: auto;
    margin: 0 auto;
    display: block;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-bottom-logo:hover {
    opacity: 1;
}

/* Força o último texto (CNPJ/Dev) a ficar na direita */
.footer-bottom span:last-child {
    text-align: right;
}

/* RESPONSIVO: No celular, empilha tudo centralizado */
@media (max-width: 768px) {
    .footer-bottom {
        display: flex; /* Volta para flex no celular */
        flex-direction: column; /* Um embaixo do outro */
        gap: 15px;
        text-align: center;
    }

    .footer-bottom span:first-child,
    .footer-bottom span:last-child {
        text-align: center;
    }
}

/* =========================================
   5. ESTILOS DO SITE PRINCIPAL (Carrossel, Cards, etc)
   ========================================= */
/* (Mantendo resumido para não ficar gigante, mas garantindo que o básico funcione) */
.carousel-container { position: relative; width: 100%; height: 600px; overflow: hidden; background: var(--otheva-dark); }
.carousel-track { display: flex; height: 100%; width: 100%; transition: transform 0.8s ease-in-out; }
.carousel-slide { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-start; padding: 0 10%; background-size: cover; background-position: center; }
.slide-1 { background-image: linear-gradient(rgba(16, 46, 56, 0.6), rgba(16, 46, 56, 0.3)), url('https://i.postimg.cc/QCFzkVz0/produto.jpg'); }
.slide-2 { background-image: linear-gradient(rgba(16, 46, 56, 0.3), rgba(16, 46, 56, 0.3)), url('https://i.postimg.cc/02J3zMDC/catalogo.jpg'); }
.hero-content { max-width: 600px; color: white; text-align: left; }
.hero-content h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 25px; font-weight: 800; }
.btn-primary { background-color: var(--otheva-yellow); color: var(--otheva-dark); padding: 15px 40px; font-weight: 700; border-radius: 5px; display: inline-block; }

/* Ícones (Features) */
.features { background: var(--white); padding: 40px 5%; display: flex; justify-content: center; gap: 50px; margin-top: -60px; position: relative; z-index: 10; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); max-width: 1200px; margin-left: auto; margin-right: auto; flex-wrap: wrap; }
.feature-item { display: flex; align-items: center; gap: 15px; text-align: left; }
.feature-item i { font-size: 2.5rem; color: var(--otheva-yellow); }
.feature-text { display: flex; flex-direction: column; }
.feature-item strong { display: block; color: var(--otheva-dark); font-size: 1.1rem; }

/* Galeria de Instalações (Loop) */
.otheva-gallery-section { padding: 60px 20px; background-color: #f8f9fa; overflow: hidden; }
.otheva-gallery-container { max-width: 1200px; margin: 0 auto; position: relative; }
.otheva-gallery-track { display: flex; gap: 20px; width: max-content; transition: transform 0.5s ease-in-out; }
.otheva-gallery-card { min-width: 350px; width: 350px; height: 400px; background: #fff; border-radius: 12px; position: relative; overflow: hidden; }
.gallery-main-img img { width: 100%; height: 100%; object-fit: cover; }
.gallery-info { position: absolute; bottom: 0; width: 100%; padding: 20px; background: linear-gradient(to top, rgba(16, 46, 56, 0.9), transparent); color: white; }
.gallery-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #102e38; color: #fdd835; width: 45px; height: 45px; border-radius: 50%; border: none; font-size: 20px; cursor: pointer; z-index: 10; }
.gallery-prev { left: 10px; } 
.gallery-next { right: 10px; }

/* Seção Produtos Grid */
.otheva-secao-produtos { padding: 50px 20px; max-width: 1200px; margin: 0 auto; }
.otheva-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.otheva-card { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 5px; padding: 20px; text-align: center; transition: transform 0.3s; }
.otheva-card:hover { transform: scale(1.03); border-color: var(--otheva-dark); }
.otheva-img { width: 100%; height: 200px; object-fit: contain; margin-bottom: 15px; }
.otheva-nome-prod { font-size: 16px; font-weight: bold; margin-bottom: 10px; color: #333; }
.otheva-preco { font-size: 18px; font-weight: bold; color: var(--otheva-dark); }
.otheva-btn { display: block; width: 100%; padding: 12px 0; background-color: var(--otheva-dark); color: #fff; text-transform: uppercase; border-radius: 4px; opacity: 0; transform: translateY(20px); transition: all 0.4s; }
.otheva-card:hover .otheva-btn { opacity: 1; transform: translateY(0); }

/* Responsivo Global */
@media (max-width: 1024px) { .otheva-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .otheva-grid { grid-template-columns: 1fr; } }
/* =========================================
   RODAPÉ (FOOTER) - CENTRALIZADO
   ========================================= */

footer {
    background-color: #102e38; /* Azul Escuro Otheva */
    color: #ffffff;
    padding-top: 60px;
    padding-bottom: 20px;
    font-family: 'Segoe UI', sans-serif;
    border-top: 5px solid #fdd835;
    text-align: center; /* Centraliza textos gerais */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Garante que o conteúdo dentro das colunas fique centralizado */
.footer-about, .footer-col {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza horizontalmente os elementos flex */
}

.footer-title {
    font-size: 18px;
    font-weight: 700;
    color: #fdd835;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-about p {
    font-size: 14px;
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 0;
    max-width: 300px; /* Evita que o texto fique muito largo */
}

/* Linha divisória suave */
.footer-separator-box {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
    margin-top: 20px;
    color: #ccc;
    font-size: 13px;
    line-height: 1.5;
    width: 100%; /* Garante que a linha ocupe a largura da coluna */
    max-width: 250px; /* Limita a largura da linha para ficar bonita no centro */
}

/* Itens de Contato */
.contact-item {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o conteúdo */
    gap: 10px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 15px;
    width: 100%;
}

.contact-hours {
    margin-top: 20px;
    font-size: 13px;
    color: #ccc;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
    width: 100%;
    max-width: 250px; /* Mesma largura da linha do endereço */
}

/* Links Institucionais */
.footer-links {
    list-style: none;
    padding: 0;
    width: 100%;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #fdd835;
}

/* Redes Sociais */
.social-icons {
    margin-top: 30px;
    display: flex;
    justify-content: center; /* Centraliza os ícones */
    gap: 15px;
}

.social-btn {
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: background 0.3s, color 0.3s;
}

.social-btn:hover {
    background: #fdd835;
    color: #102e38;
}

/* Barra Inferior */
.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 13px;
    color: #777;
    display: flex;
    justify-content: space-between; /* Mantém espalhado (um na esq, outro na dir) */
    flex-wrap: wrap;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Se quiser a barra inferior totalmente centralizada também (um embaixo do outro), use este trecho abaixo: */
/*
.footer-bottom {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
*/

/* Responsividade */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        justify-content: center;
    }
}
/* Correção de Alinhamento do Rodapé */

/* Cria uma altura padrão para o bloco acima da linha */
.footer-altura-fixa {
    min-height: 110px; /* Altura suficiente para caber o texto maior */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente o conteúdo se sobrar espaço */
    align-items: center;
    width: 100%;
}

/* Garante que o parágrafo dentro desse bloco não tenha margens extras atrapalhando */
.footer-altura-fixa p {
    margin: 0;
}
/* Estilo da Logo na Barra Inferior */
.footer-bottom-logo {
    height: 45px; /* Altura discreta, ideal para rodapé */
    width: auto;  /* Mantém a proporção */
    opacity: 0.8; /* (Opcional) Deixa levemente transparente para ficar elegante */
    transition: opacity 0.3s;
}

.footer-bottom-logo:hover {
    opacity: 1; /* Fica totalmente visível ao passar o mouse */
}

/* Ajuste de alinhamento vertical para garantir que texto e logo fiquem na mesma linha */
.footer-bottom {
    align-items: center; /* Centraliza verticalmente todos os itens */
}
/* Remove o espaçamento interno do container da imagem */
/* =========================================
   AJUSTE PARA IMAGENS QUADRADAS NOS CARDS
   ========================================= */

/* 1. Definimos o container da imagem como um quadrado fixo */
.card-img {
    height: 300px; /* Define uma altura fixa para o quadrado. */
    padding: 0;    /* Remove espaços internos */
    overflow: hidden; /* Esconde o que passar do quadrado */
    background-color: #f4f4f4; /* Cor de fundo caso a imagem demore a carregar */
}

/* 2. Fazemos a imagem preencher esse quadrado sem esticar */
.card-img img {
    width: 100%;
    height: 100%;
    /* O SEGREDO: 'cover' faz a imagem cobrir toda a área quadrada,
       cortando as laterais ou topo/base se necessário, mas NUNCA estica. */
    object-fit: cover; 
    display: block;
    transition: transform 0.3s ease; /* Prepara para um efeito de zoom suave */
}

/* (Opcional) Efeito de zoom leve ao passar o mouse no card */
.card:hover .card-img img {
    transform: scale(1.05);
}
/* Rolagem Suave com Margem para o Menu Fixo */
html {
    scroll-behavior: smooth;
}

/* Lista todos os IDs que precisam parar um pouco antes do topo */
#area-instalador, 
#instalacoes,
#empresa, 
#produtos, 
#blog {
    scroll-margin-top: 80px; /* Mantém o espaço de respiro para o menu não cobrir o título */
}
/* Ajuste de Rolagem para a Área do Instalador */
#area-instalador {
    scroll-margin-top: 80px; /* 60px do menu + 40px de respiro visual */
}
/* --- Melhorias na Seção de Instalador --- */

/* Ajuste do container para centralizar tudo */
.cta-installer {
    flex-direction: column; /* Coloca um embaixo do outro (Texto em cima, form embaixo) */
    text-align: center;
    gap: 30px; /* Espaço entre o texto e o formulário */
    padding: 80px 20px; /* Mais respiro */
}

/* Melhoria na Fonte do Texto */
.cta-text p {
    font-size: 1.25rem; /* Aumentei a letra (era pequena) */
    font-weight: 400; /* Peso regular para leitura leve */
    color: #102e38;
    max-width: 700px;
    margin: 10px auto 0 auto; /* Centraliza o texto */
    line-height: 1.5;
    opacity: 0.9;
}

.cta-text h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    font-weight: 800;
}
/* =========================================
   RESPONSIVO TROCAS E GARANTIA
   ========================================= */
@media (max-width: 768px) {
    .page-container {
        margin: 30px auto;
        padding: 0 15px;
    }

    .page-title h1 {
        font-size: 1.8rem;
    }

    .form-troca {
        padding: 25px 15px; /* Menos espaço interno */
    }

    .form-row {
        flex-direction: column; /* Coloca Nome em cima de Email, etc */
        gap: 20px;
    }

    .input-group input, 
    .input-group select {
        font-size: 16px; /* Evita zoom automático no iPhone */
    }
    
    /* Footer Fixo */
    footer {
        padding: 30px 5% 20px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }
}