/* === GERAL & RESET === */
:root {
    /* Cores da Logo PintaTelha */
    --pintatelha-red: #D81E1E;
    --pintatelha-dark-blue: #2A3A8A;
    --pintatelha-light-blue: #5C92CC;
    --pintatelha-white: #FFFFFF;
    --pintatelha-off-white: #f8f9fa;
    --pintatelha-footer-text: #e0e0e0;

    /* Cores do Tema do Site */
    --primary-color: var(--pintatelha-red);
    --secondary-color: var(--pintatelha-dark-blue);
    --accent-color: var(--pintatelha-light-blue);
    --light-color: var(--pintatelha-off-white);
    --dark-color: #222730;
    --text-color: #333;
    --heading-color: var(--pintatelha-dark-blue);
    --text-on-primary-bg: var(--pintatelha-white);
    --text-on-dark-bg: var(--pintatelha-white);
    --text-on-accent-bg: var(--pintatelha-white);
    --success-color: #28a745;
    --error-color: #dc3545;

    /* Fontes */
    --font-primary: 'Open Sans', sans-serif;
    --font-headings: 'Montserrat', sans-serif;

    /* Layout */
    --container-width: 1180px;
    /* Responsive section padding: smaller on tablets, even smaller on mobile */
    --section-padding-y: 70px; /* Default vertical padding */
    --section-padding: var(--section-padding-y) 0;
    --border-radius: 8px;
    --box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    /* Header height variables for better management */
    --header-height-desktop: 100px;
    --header-height-scrolled: 80px;
    --header-height-tablet: 80px; /* For 992px breakpoint */
    --header-height-mobile: 70px; /* For 768px breakpoint */
    --header-height-mobile-scrolled: 60px;

    /* Fluid Typography Examples (adjust min/max/preferred values as needed) */
    /* For global h1: Min 2.2rem, Preferred 2.5vw + 1rem, Max 2.8rem */
    --h1-font-size: clamp(2.2rem, 1rem + 2.5vw, 2.8rem);
    /* For section titles: Min 2rem, Preferred 1.5vw + 1.5rem, Max 2.6rem */
    --section-title-font-size: clamp(2rem, 1.5rem + 1.5vw, 2.6rem);

    /* Grid Gaps */
    --grid-gap: 30px; /* Default gap */
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size, rem units will be relative to this */
}

body {
    font-family: var(--font-primary);
    color: var(--text-color);
    line-height: 1.7;
    background-color: var(--pintatelha-white);
    padding-top: var(--header-height-desktop); /* Initial header height */
}

.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 15px; /* Consistent horizontal padding for content within container */
}

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

/* Applying fluid font size to h1 */
h1 { font-size: var(--h1-font-size); font-weight: 900; }
/* h2 is often used for section titles, which has its own class */
h2 { font-size: 2.2rem; } /* Default h2, can be overridden by .section-title */
h3 { font-size: 1.8rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: var(--pintatelha-red);
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
    opacity: 0.85;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevents extra space below images */
}

ul {
    list-style: none; /* Moved from individual sections for global reset */
}

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

.page-top-padding { /* For pages that need extra space below a fixed header */
    padding-top: calc(var(--header-height-desktop) + 40px); /* Adjust based on current header height */
}

.bg-light-theme {
    background-color: var(--light-color);
}
.bg-dark-theme {
    background-color: var(--secondary-color);
    color: var(--text-on-dark-bg);
}
.bg-dark-theme h1, .bg-dark-theme h2, .bg-dark-theme h3, .bg-dark-theme h4, .bg-dark-theme .section-title {
    color: var(--text-on-dark-bg);
}
.bg-dark-theme p {
    color: var(--pintatelha-off-white);
}
.bg-dark-theme a {
    color: var(--accent-color);
}
.bg-dark-theme a:hover {
    color: var(--pintatelha-white);
}


.section-title {
    text-align: center;
    margin-bottom: 50px; /* Slightly reduced default margin */
    font-size: var(--section-title-font-size); /* Fluid section title */
    font-weight: 900;
    color: var(--heading-color);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 5px;
    background-color: var(--pintatelha-red);
    margin: 15px auto 0;
    border-radius: 3px;
}
.bg-dark-theme .section-title::after {
    background-color: var(--pintatelha-white);
}


.section-subtitle {
    text-align: center;
    margin-top: -35px; /* Adjusted relative to section-title's new margin */
    margin-bottom: 45px;
    font-size: clamp(1rem, 0.8rem + 0.5vw, 1.15rem); /* Fluid subtitle */
    color: #666;
    max-width: 750px; /* Slightly increased max-width */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.bg-dark-theme .section-subtitle {
    color: var(--pintatelha-off-white);
}


/* === BOTÕES === */
.btn {
    display: inline-block;
    padding: 14px 30px; /* Slightly adjusted padding */
    font-family: var(--font-headings);
    font-size: clamp(0.9rem, 0.8rem + 0.25vw, 1rem); /* Fluid button font size */
    font-weight: 700;
    border-radius: 50px;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--pintatelha-red);
    color: var(--text-on-primary-bg);
}

.btn-primary:hover {
    background-color: #B71818;
    color: var(--text-on-primary-bg);
    box-shadow: 0 6px 20px rgba(216, 30, 30, 0.4);
    transform: translateY(-3px);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-on-dark-bg);
}
.btn-secondary:hover {
    background-color: #1E2B70;
    color: var(--text-on-dark-bg);
    box-shadow: 0 6px 20px rgba(42, 58, 138, 0.4);
    transform: translateY(-3px);
}

.btn-whatsapp {
    background-color: #25D366;
    color: white;
    margin-left: 10px; /* Keep as is, or handle stacking in flex containers */
}
.btn-whatsapp:hover {
    background-color: #1DAE50;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.btn-whatsapp i {
    margin-right: 10px;
}


/* === HEADER REVOLUCIONÁRIO === */



/* === HERO SECTION === */
.hero-section {
    height: 90vh; /* Consider min-height in vh as well or a clamp for height */
    min-height: 600px; /* Ensures it's not too small on short viewports */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-on-dark-bg);
    padding: 0 15px; /* Padding for content on very narrow screens */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(216, 30, 30, 0.85), rgba(180, 25, 25, 0.9)); /* Slightly adjusted opacity */
    opacity: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px; /* Slightly wider */
}

.hero-content h1 {
    /* Min 2.5rem, Preferred 3vw + 1.5rem, Max 4rem */
    font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    font-weight: 900;
    margin-bottom: 25px;
    color: var(--pintatelha-white);
    text-shadow: 2px 3px 6px rgba(0,0,0,0.55); /* Slightly stronger shadow */
}

.hero-content p {
    /* Min 1.1rem, Preferred 0.5vw + 0.9rem, Max 1.5rem */
    font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.5rem);
    margin-bottom: 40px;
    font-weight: 400;
    line-height: 1.65; /* Slightly more line height */
    color: var(--pintatelha-off-white);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.35);
}

.hero-content .btn {
    padding: 18px 40px;
    font-size: clamp(1rem, 0.85rem + 0.4vw, 1.15rem); /* Fluid button size */
}
.hero-content .btn-primary {
    background-color: var(--pintatelha-white);
    color: var(--pintatelha-red);
    box-shadow: 0 5px 20px rgba(0,0,0, 0.2);
}
.hero-content .btn-primary:hover {
    background-color: var(--pintatelha-off-white);
    color: #B71818;
    transform: translateY(-4px) scale(1.03); /* Slightly adjusted hover */
    box-shadow: 0 7px 25px rgba(0,0,0,0.35);
}


/* === ABOUT SECTION === */
#sobre .about-content {
    display: flex;
    gap: clamp(30px, 5vw, 50px); /* Fluid gap */
    align-items: center;
}
#sobre .about-text {
    flex: 1.5;
}
#sobre .about-image {
    flex: 1;
    text-align: center; /* Ensures image is centered if flex basis is larger */
}
#sobre .about-image img {
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(42, 58, 138, 0.2);
    max-width: 480px;
}
#sobre .about-text h4 {
    color: var(--pintatelha-red);
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 1.4rem;
}
#sobre .about-text ul {
    /* list-style: none; // Global now */
    padding-left: 0; /* Reset padding */
}
#sobre .about-text ul li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    font-size: 1.05rem;
}
#sobre .about-text ul li i {
    color: var(--pintatelha-red);
    margin-right: 12px;
    font-size: 1.3rem;
    flex-shrink: 0; /* Prevent icon from shrinking */
}


/* === SERVICES SECTION === */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjusted minmax for potentially better fit */
    gap: var(--grid-gap); /* Using variable */
}

.service-card {
    background-color: var(--pintatelha-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 12px 35px rgba(42, 58, 138, 0.15);
}

.service-card img {
    width: 100%;
    height: 240px; /* Fixed height might stretch images if not aspect ratio controlled. Consider aspect-ratio property if all images are same ratio. */
    object-fit: cover;
}

.service-card-content {
    padding: clamp(20px, 2vw + 10px, 30px); /* Fluid padding */
    flex-grow: 1; /* Ensures content area grows to fill card */
}

.service-card h3 {
    color: var(--heading-color);
    font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.6rem); /* Fluid card title */
    margin-bottom: 15px;
}

.service-card p {
    font-size: 0.98rem;
    line-height: 1.65;
}

/* === NOSSO PROCESSO SECTION === */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Slightly smaller min for more items per row on some screens */
    gap: var(--grid-gap);
    margin-top: 40px;
}
.process-step {
    background-color: var(--pintatelha-white);
    padding: clamp(20px, 2vw + 10px, 30px) clamp(15px, 1.5vw + 10px, 25px); /* Fluid padding */
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid var(--pintatelha-red);
}
.process-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.process-icon {
    margin-bottom: 20px;
}
.process-icon img {
    max-width: 60px;
    height: auto;
    margin: 0 auto;
    opacity: 0.8;
}
.process-step h4 {
    font-size: clamp(1.15rem, 1rem + 0.4vw, 1.3rem); /* Fluid process step title */
    color: var(--heading-color);
    margin-bottom: 10px;
}
.process-step p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}


/* === GALLERY TEASER / GALLERY PAGE === */
.gallery-teaser-grid, .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjusted minmax */
    gap: clamp(15px, 2vw, 25px); /* Fluid gap for gallery */
}
.gallery-teaser-grid img, .gallery-item img { /* Applied to img directly if <a> wraps it */
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease; /* Slightly slower for smoother feel */
}
.gallery-teaser-grid a:hover img, /* Target the img within the hovered <a> */
.gallery-item a:hover img {
    transform: scale(1.06);
    opacity: 0.9;
    box-shadow: 0 8px 25px rgba(216, 30, 30, 0.25); /* Slightly stronger shadow */
}
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(216, 30, 30, 0.88); /* Slightly more opaque */
    color: white;
    padding: 12px 15px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transform: translateY(100%); /* Start fully hidden below */
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
}
.gallery-item a:hover .gallery-caption {
    opacity: 1;
    transform: translateY(0);
}
/* Lightbox styles - Assuming these are from a library, check its docs for deeper customization if needed */
.lightboxOverlay { background-color: rgba(20, 20, 40, 0.92) !important; }
.lb-data .lb-caption { font-size: 1.1rem !important; font-weight: bold !important; color: var(--pintatelha-white); }
.lb-data .lb-number { font-size: 0.95rem !important; color: var(--pintatelha-off-white); }
.lb-close { filter: brightness(0) invert(1); opacity: 0.8; transition: opacity 0.3s ease; }
.lb-close:hover { opacity: 1; }
.lb-nav a.lb-prev, .lb-nav a.lb-next { filter: brightness(0) invert(1); opacity: 0.7; transition: opacity 0.3s ease;}
.lb-nav a.lb-prev:hover, .lb-nav a.lb-next:hover { opacity: 1;}


/* === TESTIMONIALS SECTION === */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--grid-gap);
    margin-top: 40px;
}
.testimonial-card {
    background-color: var(--pintatelha-white);
    padding: clamp(25px, 2vw + 15px, 35px) clamp(20px, 1.5vw + 10px, 30px); /* Fluid padding */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    border-left: 5px solid var(--pintatelha-red);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.testimonial-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 25px auto;
    border: 4px solid var(--pintatelha-white);
    box-shadow: 0 0 0 3px var(--pintatelha-red);
}
.testimonial-quote {
    font-style: italic;
    color: #555;
    margin-bottom: 25px;
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.05rem); /* Fluid quote font size */
    line-height: 1.75; /* Increased for readability */
    position: relative;
    padding: 0 15px; /* More horizontal padding for quotes */
}
.testimonial-quote::before {
    content: '“';
    font-size: clamp(3rem, 2rem + 2vw, 3.5rem); /* Fluid quote mark size */
    color: var(--pintatelha-red);
    opacity: 0.4; /* Slightly more subtle */
    position: absolute;
    left: -5px; /* Adjusted */
    top: -10px;  /* Adjusted */
    font-family: Georgia, serif;
    line-height: 1;
}
.testimonial-quote::after {
    content: '”';
    font-size: clamp(3rem, 2rem + 2vw, 3.5rem);
    color: var(--pintatelha-red);
    opacity: 0.4;
    position: absolute;
    right: -5px;
    bottom: -25px;
    font-family: Georgia, serif;
    line-height: 1;
}
.testimonial-author {
    font-size: 1.2rem;
    color: var(--heading-color);
    margin-bottom: 5px;
    font-weight: 700;
}
.testimonial-location {
    font-size: 0.9rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* === FAQ SECTION === */
.faq-accordion {
    max-width: 850px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--pintatelha-white);
    margin-bottom: 18px;
    border-radius: var(--border-radius);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.faq-question {
    background-color: transparent;
    border: none;
    width: 100%;
    padding: 20px 25px; /* Slightly adjusted padding */
    text-align: left;
    font-family: var(--font-headings);
    font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.15rem); /* Fluid question font size */
    font-weight: 700;
    color: var(--heading-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.faq-question:hover {
    background-color: var(--light-color); /* Fundo suave no hover */
}

.faq-question i { /* Chevron icon */
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: 1.1rem;
    color: var(--pintatelha-red); /* Ícone vermelho */
    margin-left: 10px; /* Ensure some space from text */
}

.faq-question[aria-expanded="true"] { /* Estilo quando aberto */
    background-color: var(--pintatelha-red); /* Fundo vermelho */
    color: var(--text-on-primary-bg); /* Texto branco */
}
.faq-question[aria-expanded="true"] i {
    transform: rotate(180deg);
    color: var(--text-on-primary-bg); /* Ícone branco quando aberto */
}


.faq-answer {
    padding: 0 25px; /* Padding lateral, vertical será controlado pelo JS/max-height */
    max-height: 0; /* Começa fechado */
    overflow: hidden;
    transition: max-height 0.45s ease-out, padding-top 0.45s ease-out, padding-bottom 0.45s ease-out;
    background-color: var(--light-color); /* Fundo da resposta */
}
/* JS should add/remove a class like 'open' which sets padding-top/bottom */
.faq-answer.open p { /* Assuming JS adds 'open' to faq-answer when expanded */
    padding-top: 20px;
    padding-bottom: 25px;
}
.faq-answer p {
    /* padding vertical será aplicado pelo JS ao abrir/fechar */
    margin: 0;
    font-size: 1rem;
    border-top: 1px solid #d5d5d5; /* Linha divisória */
    color: #444;
    line-height: 1.7;
}

/* === CALL TO ACTION FINAL === */
#cta-final .section-title, #cta-final .section-subtitle {
    color: var(--pintatelha-white); /* Garantir que sejam brancos */
}
#cta-final .section-title::after {
    background-color: var(--pintatelha-white); /* Detalhe branco */
}
/* Botão primário no CTA Final precisa de estilo customizado para contrastar */
#cta-final .btn-primary {
    background-color: var(--pintatelha-white); /* Fundo branco */
    color: var(--pintatelha-red); /* Texto vermelho */
}
#cta-final .btn-primary:hover {
    background-color: var(--pintatelha-off-white);
    color: #B71818; /* Vermelho mais escuro */
}


/* === CONTACT SECTION / FORM === */
.contact-wrapper {
    display: flex;
    gap: clamp(30px, 4vw, 45px); /* Fluid gap */
    background-color: var(--pintatelha-white); /* Wrapper interno branco */
    padding: clamp(25px, 3vw, 40px); /* Fluid padding */
    border-radius: var(--border-radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.10); /* Sombra mais pronunciada */
}
.contact-form-container {
    flex: 1.2;
}
.contact-info-container {
    flex: 0.8;
}

.contact-form-container h3, .contact-info-container h3 {
    color: var(--heading-color); /* Títulos internos azuis */
    margin-bottom: 25px;
    font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.7rem); /* Fluid heading */
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--heading-color);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fdfdfd; /* Fundo do input levemente off-white */
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--pintatelha-red); /* Borda vermelha no foco */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(216, 30, 30, 0.2); /* Glow vermelho */
}

.form-group textarea {
    resize: vertical;
    min-height: 130px;
}

#form-messages, #form-messages-contact-page {
    font-size: 1rem;
    padding: 15px;
    border-radius: var(--border-radius);
    margin-top: 20px;
    font-weight: 600;
    display: none; /* Mostrado via JS */
    text-align: center;
}

#form-messages.success, #form-messages-contact-page.success {
    background-color: #E6F5EA;
    color: #2C6C3F;
    border: 1px solid #A3D3B0;
    display: block;
}

#form-messages.error, #form-messages-contact-page.error {
    background-color: #FDEDED;
    color: #8C2E2E;
    border: 1px solid #F0BDBD;
    display: block;
}


.contact-info-container p {
    margin-bottom: 18px;
    font-size: 1.05rem;
    display: flex;
    align-items: flex-start;
    color: #444; /* Texto de info de contato */
}
.contact-info-container p i {
    color: var(--pintatelha-red); /* Ícones vermelhos */
    margin-right: 15px;
    font-size: 1.4rem;
    width: 25px; /* Fixed width for alignment */
    text-align: center;
    margin-top: 2px;
    flex-shrink: 0; /* Prevent icon from shrinking */
}
.contact-info-container p a {
    color: var(--pintatelha-red); /* Link de contato vermelho */
    word-break: break-word; /* Prevent long links from breaking layout */
}
.contact-info-container p a:hover {
    color: var(--secondary-color); /* Hover azul */
}
.contact-info-container .map-container {
    margin-top: 30px;
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 320px; /* Altura do mapa */
    /* Making map responsive if iframe is direct child */
    position: relative; /* For aspect ratio trick if needed */
    /* padding-bottom: 56.25%; /* 16:9 aspect ratio */
    /* height: 0; */
}
.contact-info-container .map-container iframe {
    border: none;
    /* For aspect ratio trick */
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    width: 100%;
    height: 100%;
}

/* === FOOTER === */
.site-footer-main {
    background-color: var(--pintatelha-red); /* FOOTER VERMELHO */
    color: var(--pintatelha-footer-text);    /* TEXTO PADRÃO DO FOOTER (BRANCO SUAVE) */
    padding: var(--section-padding-y) 0 calc(var(--section-padding-y) / 2); /* Using variable, bottom padding is half */
    font-size: 0.95rem;
}
.footer-logo {
    max-height: 70px;
    margin-bottom: 30px; /* Mais espaço abaixo do logo */
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Slightly adjusted min for better fit */
    gap: clamp(30px, 4vw, 40px); /* Fluid gap */
    margin-bottom: 50px; /* Mais espaço antes do rodapé final */
}

.footer-column h3, .footer-column h4 { /* Títulos das colunas */
    color: var(--pintatelha-white); /* BRANCO */
    font-family: var(--font-headings);
    margin-bottom: 25px;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 10px;
}
.footer-column h3::after, .footer-column h4::after { /* Detalhe sublinhado */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: rgba(255,255,255,0.5); /* Branco translúcido */
}


.footer-column p {
    margin-bottom: 12px;
    line-height: 1.7;
    color: var(--pintatelha-footer-text);
}

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

.footer-column ul li a {
    color: var(--pintatelha-footer-text); /* Links do footer */
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block; /* Allows padding-left to work as expected */
}

.footer-column ul li a:hover {
    color: var(--pintatelha-white); /* Links mais brilhantes no hover */
    padding-left: 8px;
}
.footer-column i { /* General icons in footer text/lists */
    margin-right: 10px;
    color: var(--pintatelha-white); /* Ícones brancos */
    opacity: 0.8;
}
.footer-column .social-icons { /* Container for social icons for better layout control */
    display: flex; /* Added for alignment if needed */
    flex-wrap: wrap; /* Allow wrapping if many icons */
    gap: 10px; /* Gap between icons */
}
.footer-column .social-icons a { /* Specific styling for social icons */
    color: var(--pintatelha-white);
    font-size: 1.6rem; /* Tamanho dos ícones sociais */
    /* margin-right: 18px; Removed, using gap on parent */
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-flex; /* For better alignment of icon itself */
    align-items: center;
    justify-content: center;
}
.footer-column .social-icons a:last-child {
    margin-right: 0; /* No margin for the last icon if not using gap */
}
.footer-column .social-icons a:hover {
    color: var(--pintatelha-off-white); /* Cor de hover para ícones sociais */
    opacity: 1; /* Full opacity on hover */
    transform: scale(1.15) rotate(5deg); /* Added slight rotation */
}

.footer-bottom {
    text-align: center;
    padding-top: 30px; /* Mais espaço */
    border-top: 1px solid rgba(255,255,255,0.15); /* Divisor mais sutil */
    font-size: 0.9rem;
    color: var(--pintatelha-footer-text);
}
.footer-bottom p {
    margin: 0;
}
.footer-bottom a { /* Link do desenvolvedor */
    color: var(--pintatelha-white);
    font-weight: 600;
    text-decoration: none; /* Default is none, underline on hover */
}
.footer-bottom a:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* === WHATSAPP FLOAT BUTTON === */
.whatsapp-float {
    position: fixed;
    width: 60px;  /* Slightly smaller for balance */
    height: 60px; /* Slightly smaller for balance */
    bottom: 30px; /* Adjusted position */
    right: 30px;  /* Adjusted position */
    background-color: #25D366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px; /* Adjusted icon size */
    box-shadow: 3px 3px 18px rgba(0,0,0,0.35); /* Softer shadow */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, box-shadow 0.3s ease; /* Added bouncy transition */
}
.whatsapp-float:hover {
    transform: scale(1.12) rotate(12deg); /* Enhanced hover effect */
    background-color: #1DAE50;
    box-shadow: 4px 4px 22px rgba(0,0,0,0.4);
}


/* === COOKIE CONSENT BANNER === */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--dark-color); /* Fundo escuro padrão */
    color: var(--pintatelha-off-white);
    padding: clamp(15px, 2vw, 20px) clamp(15px, 2.5vw, 25px); /* Fluid padding */
    z-index: 1001;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 15px; /* Gap between text and button */
    font-size: clamp(0.9rem, 0.85rem + 0.2vw, 0.95rem); /* Fluid font size */
    box-shadow: 0 -3px 15px rgba(0,0,0,0.15);
}
.cookie-consent p {
    margin: 0; /* Removed margin-right, using gap now */
    flex-grow: 1; /* Allow text to take available space */
}
.cookie-consent a {
    color: var(--pintatelha-red); /* Link vermelho para políticas */
    text-decoration: underline;
}
.cookie-consent a:hover {
    color: #ff5c5c; /* Vermelho mais claro */
}
#acceptCookieConsent {
    background-color: var(--pintatelha-red); /* Botão de aceite vermelho */
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.3s, transform 0.3s;
    font-family: var(--font-headings);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0; /* Prevent button from shrinking */
}
#acceptCookieConsent:hover {
    background-color: #B71818; /* Vermelho mais escuro */
    transform: scale(1.05);
}


/* === COOKIES PAGE SPECIFIC === */
#cookies-policy-page .text-content { /* Para página de política de cookies */
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--pintatelha-white);
    padding: clamp(20px, 3vw, 40px); /* Fluid padding */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}
#cookies-policy-page h3 {
    color: var(--heading-color);
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.6rem);
}
#cookies-policy-page ul {
    list-style: disc;
    padding-left: 30px;
    margin-bottom: 20px;
}
#cookies-policy-page ul li {
    margin-bottom: 10px;
    line-height: 1.6; /* Improved readability for list items */
}


/* === RESPONSIVE DESIGN === */

/* Larger Tablets and Small Desktops */
@media (max-width: 1024px) {
    :root {
        --section-padding-y: 60px; /* Slightly reduce section padding */
        --grid-gap: 25px; /* Slightly reduce grid gap */
    }

    .main-nav {
        flex-basis: calc(50% - 100px); /* Adjusted based on logo size */
        max-width: calc(50% - 100px);
    }
    #mainLogo {
        max-height: 80px; /* Adjust if header height changes here */
    }
    .site-header-revolutionary.scrolled #mainLogo {
        max-height: 60px;
    }
    .main-nav ul li { margin: 0 8px; }
    /* font-size for nav links already fluid */

    .hero-content h1 { font-size: clamp(2.8rem, 1.8rem + 2.8vw, 3.5rem); } /* Adjust clamp for this range */
    .hero-content p { font-size: clamp(1.1rem, 0.9rem + 0.4vw, 1.3rem); }

    .services-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .process-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* Tablets (Portrait) & Large Phones (Landscape) */
@media (max-width: 992px) {
    body { padding-top: var(--header-height-tablet); }
    .site-header-revolutionary { height: var(--header-height-tablet); }
    .site-header-revolutionary.scrolled { height: var(--header-height-mobile-scrolled); } /* Use mobile scrolled height earlier */

    .page-top-padding {
        padding-top: calc(var(--header-height-tablet) + 30px);
    }

    .logo-container {
        position: static; /* Remove absolute positioning */
        transform: none;
        flex-grow: 1; /* Allow logo to take space */
        text-align: left;
        left: auto; /* Reset absolute positioning helper */
        display:flex; /* ensure it aligns with toggle */
        align-items:center;
    }
    #mainLogo {
        max-height: 65px !important; /* Ensure it fits well */
        margin-left: 0; /* Align to left with container padding */
        margin-top: 0;
    }
    .site-header-revolutionary.scrolled #mainLogo {
        max-height: 55px !important; /* Smaller on scroll */
    }

    .main-nav.nav-left, .main-nav.nav-right { display: none; }
    .menu-toggle {
        display: block;
        order: 3; /* Ensure it's on the right */
        margin-left: auto; /* Pushes it to the far right of the container */
    }
    .header-container { /* Ensure container padding is respected by logo and toggle */
        padding-left: 0; /* .container parent will handle overall padding */
        padding-right: 0;
    }


    #sobre .about-content {
        flex-direction: column;
        gap: 40px; /* Consistent gap when stacked */
    }
    #sobre .about-image {
        margin-top: 30px; /* Space above image when stacked */
        max-width: 100%;
    }
    #sobre .about-image img {
        max-width: 450px; /* Control max image size */
        margin: 0 auto;
    }

    .contact-wrapper {
        flex-direction: column;
        padding: clamp(20px, 2.5vw, 30px); /* Adjust padding */
        gap: 35px;
    }
    .contact-info-container {
        margin-top: 30px; /* Space above info when stacked */
    }
    .contact-info-container .map-container { height: 280px; }


    .footer-columns {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: clamp(20px, 3vw, 30px);
    }
    .footer-column {
        margin-bottom: 20px; /* Spacing between stacked footer columns if they wrap weirdly */
    }
    .footer-logo { margin-left: auto; margin-right:auto; display:block; } /* Centralizar logo no mobile */

    .process-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .testimonials-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* Allow 2 columns if space */
}

/* Mobile Devices (Portrait & Landscape) */
@media (max-width: 768px) {
    html { font-size: 15px; } /* Adjust base for rem units if desired, but clamp is often better for specific elements */
    body { padding-top: var(--header-height-mobile); }
    .site-header-revolutionary { height: var(--header-height-mobile); }
    .site-header-revolutionary.scrolled { height: var(--header-height-mobile-scrolled); }

    .page-top-padding {
        padding-top: calc(var(--header-height-mobile) + 20px);
    }

    #mainLogo { max-height: 55px !important; } /* Further reduce logo */
    .site-header-revolutionary.scrolled #mainLogo { max-height: 48px !important; }

    :root {
        --section-padding-y: 50px;
        --grid-gap: 20px;
    }

    .section-title {
        font-size: clamp(1.8rem, 1.5rem + 1vw, 2.2rem); /* Adjust section title clamp */
        margin-bottom: 40px;
    }
    .section-title::after { width: 80px; height: 4px; margin-top:12px; }
    .section-subtitle {
        margin-top: -25px; /* Adjusted */
        margin-bottom: 35px; /* Adjusted */
        font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.05rem);
    }


    .hero-section {
        min-height: auto; /* Remove fixed min-height */
        padding: calc(var(--header-height-mobile) + 40px) 15px 60px; /* Dynamic top padding + content padding */
        height: auto; /* Ensure it's not viewport fixed */
    }
    .hero-content h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 2.5rem); } /* Adjusted for mobile */
    .hero-content p { font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1rem); margin-bottom: 30px; }
    .hero-content .btn {
        padding: 15px 25px; /* Slightly smaller padding */
        font-size: 0.95rem; /* Adjust if clamp is not used for all buttons */
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 300px; /* Control max width of block buttons */
    }
    .hero-content .btn:not(:last-child) {
      margin-bottom: 15px; /* Space between stacked buttons */
    }
    .hero-content .btn-whatsapp { margin-left: auto; } /* Keep centered if block */


    .services-grid,
    .gallery-teaser-grid,
    .gallery-grid,
    .process-grid, /* Ensure single column for process steps for clarity */
    .testimonials-grid { /* Single column for testimonials */
        grid-template-columns: 1fr;
    }
    .service-card, .process-step, .testimonial-card { /* Add margin bottom if not last child in single column */
        margin-bottom: var(--grid-gap);
    }
    .service-card:last-child, .process-step:last-child, .testimonial-card:last-child {
        margin-bottom: 0;
    }


    .whatsapp-float {
        width: 55px; height: 55px; font-size: 26px;
        bottom: 20px; right: 20px;
    }

    .cookie-consent {
        flex-direction: column;
        text-align: center;
        padding: 15px;
        gap: 10px;
    }
    .cookie-consent p { margin-bottom: 10px; } /* Space between text and button when stacked */
    #acceptCookieConsent { padding: 10px 20px; font-size: 0.9rem; }

    .testimonial-quote::before { left: 0px; top: -5px; font-size: clamp(2.5rem, 1.8rem + 1.5vw, 3rem); }
    .testimonial-quote::after { right: 0px; bottom: -15px; font-size: clamp(2.5rem, 1.8rem + 1.5vw, 3rem); }
}

/* Small Mobile Devices (Portrait) */
@media (max-width: 480px) {
    :root {
        --section-padding-y: 40px; /* Further reduce padding */
        --grid-gap: 15px; /* Smaller gaps */
    }

    .hero-content h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2rem); } /* Smallest hero title */
    .hero-content p { font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem); }
    .hero-content .btn { max-width: 280px; } /* Further constrain button width */

    .footer-columns {
        text-align: center;
        grid-template-columns: 1fr; /* Ensure single column and centered text */
    }
    .footer-column h3::after, .footer-column h4::after { /* Centraliza sublinhado */
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-column .social-icons {
        justify-content: center;
        /* display: flex; // Already flex */
    }
    .footer-column .social-icons a { margin: 0 10px; } /* Adjust spacing for centered icons */

    .contact-wrapper { padding: 20px 15px; } /* Smallest padding for contact wrapper */
    .form-group input, .form-group select, .form-group textarea { padding: 12px 10px; font-size: 0.95rem; }

    .testimonial-quote { font-size: 0.95rem; padding: 0 5px; }
    .testimonial-quote::before, .testimonial-quote::after { font-size: clamp(2.2rem, 1.6rem + 1.5vw, 2.8rem); }
    .testimonial-quote::before { top: -2px; }
    .testimonial-quote::after { bottom: -10px; }

    .faq-question { padding: 18px 20px; font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem); }
    .faq-answer.open p, .faq-answer p { padding-left: 20px; padding-right:20px; font-size:0.95rem;} /* Added padding for p inside faq-answer */
    .faq-answer.open p { padding-top:15px; padding-bottom:20px;}


    .cookie-consent { padding: 12px; }
    #acceptCookieConsent { width: 100%; max-width: 280px; margin: 0 auto; } /* Make button full width up to a max */
}