/* 
   Site Reformulado - Sucatas Resucenter
   Modern & Minimalist Design
*/

:root {
    /* Colors */
    --primary-color: #1a4d2e;
    /* Dark Green - Professionalism */
    --secondary-color: #4caf50;
    /* Leaf Green - Growth & Action */
    --accent-color: #8bc34a;
    /* Light Green - Highlights */
    --text-dark: #333333;
    /* Dark Gray text */
    --text-light: #666666;
    /* Lighter text */
    --bg-light: #f9f9f9;
    /* Light background for sections */
    --white: #ffffff;

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    /* Spacing */
    --section-padding: 80px 0;
    --container-width: 1200px;
}

/* Reset & Basics */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

.text-white {
    color: var(--white);
}

.section {
    padding: var(--section-padding);
}

.bg-light {
    background-color: var(--bg-light);
}

.section-title {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;

}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--secondary-color);
    margin: 10px auto 0;
    border-radius: 2px;
}

.about-text .section-title::after {
    margin: 10px 0 0;
    /* Left align underline for left aligned text */
}


/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--secondary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

.btn-secondary:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

.btn-whatsapp-header {
    background-color: #25d366;
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-whatsapp-header:hover {
    background-color: #128c7e;
}

.btn-whatsapp-large {
    display: inline-block;
    background-color: #25d366;
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp-large:hover {
    background-color: #128c7e;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

/* Contact Section (Redesigned) */
.contact-section {
    padding: 100px 0;
}

.contact-header-text {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    font-weight: 700;
}

.contact-sub-text {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 40px;
}

.contact-help-text {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-bottom: 30px;
    font-weight: 600;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 0;
}

.contact-info-card {
    padding: 50px;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.contact-item .contact-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    min-width: 30px;
}

.contact-item-content {
    display: flex;
    flex-direction: column;
}

.contact-item-content strong {
    color: var(--primary-color);
    margin-bottom: 5px;
}

.contact-item-content a,
.contact-item-content .contact-text-value {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.contact-item-content a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.contact-map-container {
    width: 100%;
    min-height: 400px;
    background-color: #eee;
}

/* Header */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 15px 0;
    backdrop-filter: blur(5px);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-menu ul {
    display: flex;
    gap: 25px;
}

.nav-menu a {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.nav-menu a:hover {
    color: var(--secondary-color);
}

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: var(--text-dark);
}

/* Hero Section */
.hero-section {
    height: 100vh;
    background: linear-gradient(135deg, var(--primary-color) 0%, #2e7d32 100%);
    display: flex;
    align-items: center;
    color: var(--white);
    padding-top: 80px;
    /* Offset fixed header */
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./img/floresta_bambu.jpeg') no-repeat center center/cover;
    opacity: 0.1;
    /* Subtle texture */
    z-index: 0;
    /*Imagem fixa no fundo como paralax*/
    background-attachment: fixed;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    animation: fadeInUp 1s ease-out;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.1;
}

.hero-content .subtitle {
    font-size: 1.25rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 10;
}

/* About Section */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: flex-start;
    /* Alinhamento ao topo conforme solicitado */
}

.about-text p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: var(--text-light);
}

.stats-grid {
    display: flex;
    gap: 40px;
    margin-top: 30px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--secondary-color);
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 5px;
}

.about-image {
    height: 400px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background: url('./img/globo.jpeg') center/cover;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    /* Min-width aumentado para 2x2 visualmente equilibrado */
    gap: 30px;
    margin: 50px 0;
}

.service-card {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 3px solid transparent;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-bottom-color: var(--secondary-color);
}

.service-card .icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.service-card p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* Sustainability Section */
.sustainability-section {
    /* Parallax Image with Green Overlay using Gradient */
    /* RGBA(26, 77, 46, 0.9) matches --primary-color #1a4d2e with 90% opacity */
    background: linear-gradient(rgba(26, 77, 46, 0.9), rgba(26, 77, 46, 0.9)), url('./img/floresta_bambu.jpeg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
    position: relative;
}

/* Removed separate pseudo-element to simplify parallax behavior */
.sustainability-section .container {
    position: relative;
    z-index: 1;
}

.sustainability-section .container {
    position: relative;
    z-index: 2;
    /* Content above background */
}

.max-width-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.3rem;
    line-height: 1.8;
    opacity: 0.9;
}

/* Diferenciais Section (was Products) */
.diferenciais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.diferencial-item {
    background-color: var(--white);
    border-left: 5px solid var(--secondary-color);
    padding: 30px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.diferencial-item:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.diferencial-item h3 {
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.diferencial-item p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Contact Section */
.contact-wrapper {
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contact-info {
    padding: 50px;
}

.contact-list {
    margin: 30px 0;
}

.contact-list li {
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.contact-list strong {
    display: block;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.contact-map iframe {
    height: 100%;
    min-height: 400px;
}

/* Footer */
.footer {
    background-color: #111;
    color: #aaa;
    padding: 60px 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #333;
}

.footer-brand h3 {
    color: var(--white);
    margin-bottom: 10px;
}

.footer-links ul {
    display: flex;
    gap: 20px;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-bottom {
    text-align: center;
    font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }

    /* Mobile Header */
    .hamburger {
        display: block;
        z-index: 1001;
    }

    .nav-menu {
        position: fixed;
        right: -100%;
        top: 0;
        width: 80%;
        height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        justify-content: center;
        transition: 0.3s;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        padding: 50px;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu ul {
        flex-direction: column;
        align-items: center;
    }

    .nav-menu a {
        font-size: 1.2rem;
    }

    .btn-whatsapp-header {
        display: none;
        /* Hide header CTA on mobile, use float */
    }

    /* Hero Responsive */
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .about-image {
        height: 250px;
        order: -1;
        /* Image first on mobile? or last. Lets keep as is, text first usually better for SEO priority but visual impact... lets switch order actually usually good to have image then text or text then image. Default order is text then image. Let's keep it. */
    }

    .contact-map-container {
        min-height: 300px;
    }

    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .footer-links ul {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Floating WhatsApp Menu Container */
.whatsapp-menu-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    pointer-events: none;
    /* Evita que a caixa "invisível" bloqueie os cliques por baixo dela */
}

/* Options container (hidden by default) */
.whatsapp-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.whatsapp-menu-container.active .whatsapp-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.whatsapp-option-btn {
    background-color: var(--white);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, background-color 0.2s, color 0.2s;
    border: 1px solid #eee;
    pointer-events: auto;
    /* Reativa os cliques apenas para o botão visível */
}

.whatsapp-option-btn:hover {
    transform: scale(1.05);
    background-color: #f9f9f9;
    color: var(--primary-color);
}

.whatsapp-option-icon {
    font-size: 1.2rem;
}

/* Main Toggle Button */
.btn-whatsapp-main {
    background-color: #25D366;
    /* WhatsApp Green */
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, background-color 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    pointer-events: auto;
    /* Reativa os cliques para o ícone do ativador */
}

.btn-whatsapp-main:hover {
    transform: scale(1.1);
    background-color: #128C7E;
}

.btn-whatsapp-main svg {
    transition: transform 0.3s ease;
}

.whatsapp-menu-container.active .btn-whatsapp-main .wa-icon-default {
    display: none;
}

.whatsapp-menu-container.active .btn-whatsapp-main .wa-icon-close {
    display: block !important;
}

/* For mobile adjustments */
@media (max-width: 480px) {
    .whatsapp-menu-container {
        bottom: 20px;
        right: 20px;
    }

    .btn-whatsapp-main {
        width: 55px;
        height: 55px;
    }

    .btn-whatsapp-main svg {
        width: 28px;
        height: 28px;
    }
}