/* ==================================================
   VARIABLES & RESET
================================================== */
:root {
    --primary: #D32F2F;        /* Vermelho urgência/força (Logo original) */
    --primary-hover: #b71c1c;
    --secondary: #FFC107;      /* Amarelo atenção/ação (Logo original) */
    --secondary-hover: #ffa000;
    
    --bg-white: #FFFFFF;
    --bg-light: #F5F5F5;
    
    --text-primary: #1E1E1E;
    --text-secondary: #757575;
    
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --font-quote: 'Lato', sans-serif;
    
    --border-radius: 8px;
    --card-radius: 12px;
    --transition: all 0.3s ease-in-out;
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 10px rgba(0,0,0,0.15);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
}

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

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

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: var(--bg-white);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.text-center { text-align: center; }
.mb-1 { margin-bottom: 1rem; }
.w-100 { width: 100%; }

.image-placeholder {
    background-color: #ddd;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; border-radius: var(--border-radius); width: 100%;
}

/* ==================================================
   ANIMATIONS UTILS (INTERSECTION OBSERVER)
================================================== */
.fade-in { opacity: 0; transition: opacity 0.8s ease-out; }
.fade-in.is-visible { opacity: 1; }

.fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

.scale-up { opacity: 0; transform: scale(0.95); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.scale-up.is-visible { opacity: 1; transform: scale(1); }

.slide-in-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.slide-in-left.is-visible { opacity: 1; transform: translateX(0); }

.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }

/* ==================================================
   BUTTONS
================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: var(--border-radius); font-family: var(--font-body);
    font-weight: 600; cursor: pointer; border: none; transition: var(--transition);
}
.btn-primary { background-color: var(--primary); color: var(--bg-white); }
.btn-primary:hover { background-color: var(--primary-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-secondary { background-color: var(--secondary); color: var(--text-primary); }
.btn-secondary:hover { background-color: var(--secondary-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-green { background-color: #25D366; color: white; }
.btn-green:hover { background-color: #1ebd5a; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-large { padding: 14px 28px; font-size: 1.1rem; }

/* ==================================================
   1. HEADER (STICKY)
================================================== */
.header {
    background-color: var(--bg-white); position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000; transition: var(--transition); border-bottom: 2px solid var(--secondary);
    height: 140px; display: flex; align-items: center;
}
.header.scrolled { box-shadow: var(--shadow-sm); height: 100px; }
.header-content { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.logo { display: flex; align-items: center; height: 110px; }
.logo-img { height: 100%; object-fit: contain; }
.nav-menu ul { display: flex; gap: 24px; }
.nav-menu a { font-weight: 600; font-size: 0.95rem; }
.nav-menu a:hover { color: var(--primary); }
.d-mobile-only { display: none !important; }
.menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; background: transparent; border: none; cursor: pointer; z-index: 1001; }
.menu-toggle span { display: block; height: 3px; width: 100%; background-color: var(--text-primary); border-radius: 3px; transition: var(--transition); }

/* ==================================================
   2. HERO SECTION
================================================== */
.hero { 
    padding-top: 160px; 
    padding-bottom: 120px; 
    background-color: var(--text-primary); 
    border-bottom: none;
    position: relative;
    background-size: cover;
    background-position: center;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 1;
}
.hero-container { position: relative; z-index: 2; align-items: center; text-align: center; justify-content: center; display: flex;}
.hero-content { flex: 0 0 80%; }
.hero-content h1 { font-size: 3.2rem; margin-bottom: 24px; color: var(--bg-white); }
.hero-subtitle { font-size: 1.2rem; color: #E0E0E0; margin-bottom: 24px; max-width: 800px; margin-left: auto; margin-right: auto;}
.social-proof-stars { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 32px; background: transparent; padding: 0; border: none;}
.stars { color: var(--secondary); font-size: 1.2rem; letter-spacing: 2px; }
.reviews-count { font-weight: 600; color: var(--bg-white); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;}


/* ==================================================
   3. DIFERENCIAIS
================================================== */
.diferenciais { padding: 80px 0; background-color: var(--bg-white); }
.section-title { font-size: 2.2rem; margin-bottom: 48px; color: var(--text-primary); }
.grid-diferenciais { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.card-diferencial { padding: 32px; background-color: var(--bg-white); border-radius: var(--card-radius); border: 1px solid #ebebeb; transition: var(--transition); }
.card-diferencial:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: #ebebeb;}
.icon-wrapper { width: 60px; height: 60px; background-color: rgba(255, 193, 7, 0.15); color: #b78a00; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.icon-wrapper i { width: 28px; height: 28px; }
.card-diferencial h3 { font-size: 1.2rem; margin-bottom: 12px; }
.card-diferencial p { color: var(--text-secondary); }

/* ==================================================
   4. SERVIÇOS (2 Cards Personalizados com as cores)
================================================== */
.servicos { padding: 80px 0; background-color: var(--secondary); color: var(--text-primary); }
.servicos .section-title { color: var(--text-primary); }
.grid-servicos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 800px; margin: 0 auto;}
.card-servico { background-color: var(--bg-white); padding: 40px; border-radius: var(--card-radius); box-shadow: var(--shadow-sm); text-align: center; transition: var(--transition); display: flex; flex-direction: column; border-bottom: 6px solid var(--primary); color: var(--text-primary);}
.card-servico:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); }
.icon-servico { color: var(--primary); margin-bottom: 20px; }
.icon-servico i { width: 48px; height: 48px; }
.card-servico h3 { margin-bottom: 16px; font-size: 1.5rem; }
.card-servico p { color: var(--text-secondary); margin-bottom: 24px; flex-grow: 1; text-align: left; }

/* ==================================================
   5. DEPOIMENTOS
================================================== */
.depoimentos { padding: 80px 0; background-color: var(--bg-white); border: none;}
.grid-depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.card-depoimento { background-color: var(--bg-light); padding: 32px; border-radius: var(--card-radius); border-top: none; position: relative; }
.quote-icon { position: absolute; top: 24px; right: 24px; color: rgba(255, 193, 7, 0.3); margin-bottom: 0px;}
.quote-icon i { width: 40px; height: 40px; }
.depoimento-texto { font-family: var(--font-quote); font-style: italic; font-size: 1.1rem; color: var(--text-primary); margin-bottom: 24px; line-height: 1.5; }
.depoimento-author { display: flex; align-items: center; gap: 16px; border: none; padding-top: 0;}
.avatar-placeholder { width: 50px; height: 50px; background-color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); border: 2px solid var(--secondary); }
.author-info { display: flex; flex-direction: column; }
.author-info .stars { font-size: 1rem; letter-spacing: 1px; }
.author-info strong { font-size: 1rem; color: var(--text-primary);}
.author-info span { font-size: 0.85rem; color: var(--text-secondary); text-transform: none; letter-spacing: normal;}

/* ==================================================
   6. SOBRE A EQUIPE
================================================== */
.sobre { padding: 80px 0; background-color: var(--bg-light); }
.sobre-container { display: flex; align-items: center; gap: 60px; }
.sobre-content { flex: 1; }
.sobre-content p { margin-bottom: 16px; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6;}
.sobre-content strong { color: var(--text-primary); }
.badge-google { display: inline-flex; align-items: center; gap: 12px; background-color: var(--bg-white); padding: 16px 24px; border-radius: var(--border-radius); margin-top: 24px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--secondary); }
.badge-google i { color: #ea4335; width: 32px; height: 32px; }
.badge-google strong { display: block; font-size: 1rem; color: var(--text-primary); margin-bottom: 0;}
.badge-google span { font-size: 0.85rem; color: var(--text-secondary); }
.sobre-image { flex: 1; position: relative; }
.img-equipe { width: 100%; height: auto; border-radius: var(--card-radius); box-shadow: var(--shadow-lg); object-fit: cover; max-height: 500px;}
.badge-floating { position: absolute; bottom: -20px; left: -20px; background-color: var(--bg-white); padding: 12px 24px; border-radius: 30px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--primary); }
.badge-floating i { color: var(--secondary); fill: var(--secondary); }

/* ==================================================
   7. CONTATO E MAPA
================================================== */
.contato { padding: 80px 0; background-color: var(--bg-white); }
.contato-container { display: flex; gap: 40px; background-color: var(--bg-white); border-radius: var(--card-radius); box-shadow: var(--shadow-lg); overflow: hidden; border: none;}
.contato-form { flex: 1; padding: 40px; background-color: var(--bg-light); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.95rem; text-transform: none; letter-spacing: normal; color: var(--text-primary);}
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid #ccc; border-radius: var(--border-radius); font-family: var(--font-body); font-size: 1rem; transition: var(--transition); background-color: var(--bg-white);}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); background-color: var(--bg-white); box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1); }
.cta-alternativo { margin-top: 32px; text-align: center; padding-top: 24px; border-top: 1px solid #ccc; }
.cta-alternativo p { margin-bottom: 12px; font-size: 0.9rem; color: var(--text-secondary); font-weight: normal;}
.btn-whatsapp-large { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background-color: #25D366; color: white; padding: 14px 24px; border-radius: var(--border-radius); font-weight: 700; width: 100%; font-size: 1rem;}
.btn-whatsapp-large:hover { background-color: #1ebd5a; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.contato-mapa { flex: 1; min-height: 400px; }

/* ==================================================
   FOOTER
================================================== */
.footer { background-color: var(--secondary); color: var(--text-primary); padding: 60px 0 20px; border-top: 6px solid var(--primary); }
.footer-container { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand .footer-logo { display: inline-block; margin-bottom: 16px; width: 100%;}
.footer-brand .footer-logo img { height: 200px; width: auto; max-width: 100%; object-fit: contain; }
.footer-brand p { color: var(--text-primary); font-size: 1.05rem;}
.footer-links h4, .footer-contact h4 { color: var(--primary); margin-bottom: 20px; font-size: 1.2rem; text-transform: none; letter-spacing: normal;}
.footer-links ul li { margin-bottom: 12px; }
.footer-links a { color: var(--text-primary); font-size: 1rem; font-weight: 600;}
.footer-links a:hover { color: var(--primary); }
.footer-contact p { display: flex; align-items: flex-start; gap: 12px; color: var(--text-primary); margin-bottom: 16px; font-size: 1rem; font-weight: 600;}
.footer-contact a { color: var(--text-primary); font-weight: 600;}
.footer-contact a:hover { color: var(--primary); }
.footer-contact i { color: var(--primary); flex-shrink: 0; width: auto; height: auto;}
.schedule-block { display: flex; align-items: flex-start; gap: 12px; color: var(--text-primary); margin-bottom: 16px; font-size: 1rem; text-align: left;}
.schedule-block i { color: var(--primary); flex-shrink: 0;}
.schedule-block strong { font-weight: 700; color: var(--primary);}
.schedule-block small { font-size: 0.85rem; color: rgba(0,0,0,0.7);}
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.1); color: var(--text-secondary); font-size: 0.95rem; }

/* ==================================================
   IMAGE SEPARATOR
================================================== */
.image-separator { width: 100%; height: 350px; background-attachment: fixed; background-size: cover; background-position: center; border-top: 8px solid var(--secondary); border-bottom: 8px solid var(--secondary); }

/* ==================================================
   FLOATING WHATSAPP
================================================== */
.floating-wpp { position: fixed; bottom: 24px; right: 24px; background-color: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; box-shadow: var(--shadow-lg); z-index: 1000; transition: var(--transition); }
.floating-wpp:hover { transform: scale(1.1); background-color: #1ebd5a; }
.floating-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }

/* ==================================================
   RESPONSIVIDADE
================================================== */
@media (max-width: 1024px) {
    .container { padding: 0 24px; }
    .hero-content h1 { font-size: 2.2rem; }
    .sobre-container { flex-direction: column; }
    .sobre-image { width: 100%; margin-top: 40px; }
    .footer-container { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

@media (max-width: 768px) {
    html { font-size: 14px; } /* Reduz a base para caber mais e ficar elegante */
    .container { padding: 0 20px; width: 100%; box-sizing: border-box; }
    
    section { padding: 50px 0 !important; overflow: visible !important; }
    .section-title { font-size: 1.6rem; margin-bottom: 32px; line-height: 1.3; }
    
    .header { height: 130px; padding-bottom: 0; }
    .header.scrolled { height: 90px; }
    .logo { height: 100px; width: 100%; max-width: 80vw; justify-content: center; margin: 0 auto;} /* Logo GIGANTE no mobile */
    .logo-img { height: 100%; width: auto; }
    
    .menu-toggle { display: flex; align-self: center;}
    .nav-menu { position: fixed; top: 130px; left: -100%; width: 100%; height: calc(100vh - 130px); background-color: var(--bg-white); flex-direction: column; align-items: center; padding: 40px 24px; box-shadow: var(--shadow-md); overflow-y: auto; transition: var(--transition); z-index: 999;}
    .nav-menu.active { left: 0; }
    .nav-menu ul { flex-direction: column; width: 100%; text-align: center; margin-bottom: 24px; }
    .nav-menu ul li { width: 100%; }
    .nav-menu ul li a { display: block; padding: 16px 0; font-size: 1.2rem; border-bottom: 1px solid var(--bg-light); }
    .d-mobile-only { display: inline-flex !important; width: 100%; }
    .d-desktop-only { display: none !important; }

    .menu-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .hero { padding-top: 160px !important; padding-bottom: 50px !important; background-position: center 30%; } /* Foco superior da imagem no mobile para não cortar o meio */
    .hero-container { flex-direction: column; text-align: center; }
    .hero-content { flex: 0 0 100%; max-width: 100%; }
    .hero-content h1 { font-size: 2rem; line-height: 1.3; margin-bottom: 16px; padding: 0;}
    .hero-subtitle { font-size: 1.1rem; padding: 0;}
    .hero-actions { flex-direction: column; gap: 12px; margin: 0; }
    .hero-actions .btn { width: 100%; }
    
    .image-separator { height: 250px; background-attachment: scroll; } /* Melhor performance no mobile */
    
    .grid-diferenciais, .grid-servicos, .grid-depoimentos { grid-template-columns: 1fr; gap: 20px; }
    .card-servico, .card-diferencial { padding: 24px; }
    .card-depoimento { padding: 20px;}
    
    .contato-container { flex-direction: column; box-shadow: none; border-radius: 0; }
    .contato-form { padding: 24px; border-radius: var(--card-radius); box-shadow: var(--shadow-md); margin-bottom: 24px;}
    .contato-mapa { min-height: 300px; width: 100%; border-radius: var(--card-radius); overflow: hidden;}
    
    .footer-container { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .footer-brand .footer-logo img { height: 100px; margin: 0 auto 16px auto; }
    .footer-contact p { justify-content: center; }
}