/*
Theme Name: Portal Culco Landing Page
Theme URI: https://culco.com.br
Author: New Mind Comunicação
Description: Tema customizado para Landing Page de Alta Performance.
Version: 1.2
License: GNU General Public License v2 or later
*/

/* --- (MANTENHA AS VARIÁVEIS E RESET DO ARQUIVO ANTERIOR AQUI) --- */
:root {
    --primary-color: #003366;
    --accent-color: #0056b3;
    --secondary-color: #f4f4f4;
    --text-dark: #222222;
    --text-light: #ffffff;
    --text-gray: #555555;
    
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    
    --container-width: 1140px;
    --spacing-section: 80px;
}

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

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: #fff;
    /* Necessário para o modal não rolar o fundo */
    position: relative; 
}

/* --- (OUTROS ESTILOS JÁ EXISTENTES: h1, a, container, btn, etc...) --- */
h1, h2, h3, h4 { font-family: var(--font-heading); margin-bottom: 20px; font-weight: 700; line-height: 1.2; }
a { text-decoration: none; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.max-800 { max-width: 800px; margin: 0 auto; }

/* Buttons */
.btn { display: inline-block; padding: 12px 30px; border-radius: 5px; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; border: none; cursor: pointer; transition: 0.3s; }
.btn-primary { background-color: var(--accent-color); color: #fff; }
.btn-primary:hover { background-color: #002a5c; }
.btn-lg { padding: 18px 40px; font-size: 1rem; }
.btn-white { background-color: #fff; color: var(--primary-color); }
.btn-white:hover { background-color: #e0e0e0; }
.btn-full { width: 100%; }

/* --- NOVO: Top Bar --- */
.top-bar {
    background-color: #002244; /* Azul mais escuro que o primário */
    color: #fff;
    font-size: 0.8rem;
    padding: 8px 0;
}
.top-bar-content {
    display: flex;
    justify-content: flex-end; /* Alinha tudo à direita */
    align-items: center;
    gap: 20px;
}
.top-msg { opacity: 0.7; font-weight: 400; display: none; } /* Esconde msg em mobile */
@media(min-width: 768px) { .top-msg { display: block; } }

.btn-login {
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    background: rgba(255,255,255,0.1);
    padding: 5px 15px;
    border-radius: 4px;
    transition: 0.3s;
}
.btn-login:hover { background: rgba(255,255,255,0.2); }

/* --- Header (Ajuste) --- */
.main-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 900;
}
.main-header .container { display: flex; justify-content: space-between; align-items: center; }

/* Logo */
.logo { display: flex; align-items: center; }
.logo img { max-width: 180px; height: auto; display: block; }

/* Nav */
.desktop-nav { display: flex; align-items: center; }
.desktop-nav a { margin-left: 20px; color: var(--text-dark); font-weight: 600; font-size: 0.9rem; }
.desktop-nav button.btn { margin-left: 20px; } /* Ajuste para o button tag */

/* --- (RESTO DAS SEÇÕES: Hero, Metodo, etc. - MANTENHA IGUAL) --- */
.hero-section { background: linear-gradient(135deg, #001a33 0%, #003366 100%); color: #fff; padding: 100px 0; }
.hero-content { display: flex; align-items: center; gap: 50px; }
.hero-text { flex: 1; }
.hero-image { flex: 1; }
.dashboard-look { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; height: 300px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.section-light { background: #fff; }
.section-dark { background: var(--primary-color); color: #fff; }
.section-gray { background: var(--secondary-color); }
.section-blue { background: var(--accent-color); color: #fff; }
section { padding: var(--spacing-section) 0; }

/* Grid Utils */
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.gap-large { gap: 80px; }
.img-placeholder { background: #ddd; width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.card-persona { padding: 30px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: rgba(255,255,255,0.05); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.testimonial-card { background: var(--secondary-color); padding: 30px; border-radius: 8px; border-left: 5px solid var(--accent-color); }
.logos-wrapper { display: flex; justify-content: center; gap: 40px; margin-top: 30px; flex-wrap: wrap; }
.logo-box { background: #eee; padding: 20px 40px; font-weight: bold; color: #999; border-radius: 5px; }
.numbers-grid { display: flex; justify-content: space-around; text-align: center; }
.big-num { font-size: 3.5rem; font-weight: 800; display: block; margin-bottom: 10px; }
.guarantee-badge { display: flex; justify-content: center; }
.badge-circle { width: 150px; height: 150px; background: var(--primary-color); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 10px 20px rgba(0,0,0,0.2); text-align: center;}
.faq-wrapper { margin-top: 40px; }
.faq-item { border-bottom: 1px solid #ddd; }
.faq-question { background: none; border: none; width: 100%; text-align: left; padding: 20px 0; font-size: 1.1rem; font-weight: 600; cursor: pointer; color: var(--primary-color); display: flex; justify-content: space-between; }
.faq-question::after { content: '+'; font-size: 1.5rem; }
.faq-question.active::after { content: '-'; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer p { padding-bottom: 20px; color: var(--text-gray); }
footer { background: #111; color: #777; padding: 20px 0; font-size: 0.8rem; }
.cta-final .footer-note { margin-top: 30px; font-size: 0.8rem; opacity: 0.8; }

/* --- NOVO: Botão Voltar ao Topo --- */
#backToTop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    font-size: 1.5rem;
    border: none;
    outline: none;
    background-color: var(--accent-color);
    color: white;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: 0.3s;
}
#backToTop:hover { background-color: var(--primary-color); transform: translateY(-3px); }

/* --- NOVO: Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 2000;
    display: none; /* JS vai dar toggle nisso */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal-overlay.open { display: flex; opacity: 1; }

.modal-content {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
.modal-overlay.open .modal-content { transform: translateY(0); }

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
}
.modal-close:hover { color: #333; }

.modal-header h3 { margin-bottom: 10px; color: var(--primary-color); }
.modal-header p { font-size: 0.9rem; color: #666; margin-bottom: 20px; }

/* Form Styles */
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; color: #333; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--accent-color);
    outline: none;
}
.form-group-row { display: flex; gap: 15px; }
.form-group-row .form-group { flex: 1; }

/* Mobile Adaptations */
@media (max-width: 768px) {
    .grid-2-col, .hero-content, .numbers-grid { grid-template-columns: 1fr; flex-direction: column; }
    .desktop-nav { display: none; } /* Nota: Em produção, você precisaria de um menu hambúrguer aqui */
    .gap-large { gap: 40px; }
    .top-bar-content { justify-content: center; }
}
/* --- Ajustes Específicos do Contact Form 7 no Modal --- */

/* Remove margens extras padrão do CF7 */
.wpcf7 p { margin-bottom: 0; }

/* Estiliza a caixa de resposta (Sucesso/Erro) */
.wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0 0;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    text-align: center;
    border-width: 1px; /* Afina a borda padrão */
}

/* Garante que o spinner de carregamento não quebre linha de forma estranha */
.wpcf7-spinner {
    margin-top: 10px;
}

/* --- Atualização Top Bar --- */
.top-bar {
    background-color: #002244;
    color: #fff;
    padding: 8px 0;
    font-size: 0.8rem;
}

.top-bar-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Para mobile não quebrar feio */
}

/* Formulário Inline */
.login-inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-inline-form input {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    width: 140px;
    outline: none;
    transition: 0.3s;
}

.login-inline-form input::placeholder {
    color: rgba(255,255,255,0.6);
}

.login-inline-form input:focus {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
}

.btn-login-submit {
    background-color: var(--accent-color); /* Azul mais claro */
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-login-submit:hover {
    background-color: #fff;
    color: var(--primary-color);
}

.login-spinner {
    animation: spin 1s linear infinite;
    display: inline-block;
}

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

/* Mobile: Esconder msg e empilhar login se necessário */
@media (max-width: 768px) {
    .top-msg { display: none; }
    .top-bar-content { justify-content: center; }
    .login-inline-form { width: 100%; justify-content: center; }
    .login-inline-form input { width: 110px; } /* Menor no mobile */
}/* --- Adicione ou Atualize no style.css --- */

/* Modal Pequeno para Login */
.modal-sm {
    max-width: 400px; /* Mais estreito que o modal de contato */
    padding: 30px;
}

/* Spinner de Login */
.login-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Botão Top Bar */
.btn-login {
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    background: rgba(255,255,255,0.1);
    padding: 6px 15px;
    border-radius: 4px;
    transition: 0.3s;
    cursor: pointer;
}
.btn-login:hover { background: rgba(255,255,255,0.2); }