/*
Theme Name: INN Inteligência Negocial
Theme URI: https://inteligencianegocial.com.br/
Author: Glauber
Author URI: glauber11@gmail.com
Description: Tema personalizado para a landing page da INN Inteligência Negocial.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: landing-page, custom-theme
Text Domain: inn-negocial
*/


:root {
    /* Cores Primárias */
    --dark-blue: #0A2342;
    --primary-text-color: #FFFFFF;
    --secondary-text-color: #E0E0E0;

    /* Cores de Destaque */
    --accent-orange: #FF6700;
    --accent-teal: #2CA5B5;

    /* Cores Neutras */
    --neutral-light-bg: #F8F9FA;
    --neutral-card-bg: #FFFFFF;
    --neutral-text-dark: #343A40;
    --neutral-text-medium: #555555;

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

    /* Configurações Globais */
    --container-width: 1140px;
    --header-height-desktop: 75px;
    --header-height-mobile: 65px; 
    --header-top-margin: 20px;

    /* Cores do Header Flutuante */
    --header-bg-float-initial: rgba(255, 255, 255, 0.15); 
    --header-bg-float-scrolled: rgba(10, 35, 66, 0.65);
    --header-text-color: var(--primary-text-color); 

    --header-height-desktop: 75px;
    --header-height-mobile: 65px; 
    --header-top-margin: 10px;
}
html, body { 
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--neutral-text-dark);
    line-height: 1.6; 
    background-color: var(--neutral-light-bg); 
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; 
    display: flex; /* Para layout sticky footer */
    flex-direction: column; /* Empilha header, main, footer */
}

main { /* Faz o conteúdo principal expandir para ocupar o espaço disponível */
    flex-grow: 1;
}

/*
  Empurra o conteúdo principal para baixo nas páginas internas
  para que não fique escondido atrás do novo header fixo.
*/
body:not(.home.page-template-default) {
    padding-top: var(--header-height-mobile); /* Usa a altura do header mobile como base */
}

@media (min-width: 769px) {
    body:not(.home.page-template-default) {
        padding-top: var(--header-height-desktop); /* Usa a altura do header de desktop */
    }
}

.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
}

/* Ajuste de Rolagem para Header Fixo */
section[id] {
    scroll-margin-top: calc(var(--header-height-desktop) + var(--header-top-margin) + 25px); 
}
@media (max-width: 768px) {
    section[id] {
        scroll-margin-top: calc(var(--header-height-mobile) + 25px); 
    }
}


h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--dark-blue); 
    margin-bottom: 0.75em;
    font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.15; font-weight: 800;} 
h2 { font-size: clamp(1.8rem, 4vw, 2.25rem); } 
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700;} 
p { 
    margin-bottom: 1.25em; 
    line-height: 1.7; 
    font-size: clamp(1rem, 2.5vw, 1.125rem); 
}


a {
    text-decoration: none;
    color: var(--accent-teal);
    transition: color 0.3s ease, opacity 0.3s ease;
}
a:hover { 
    color: var(--accent-orange);
    opacity: 0.85;
}

.btn {
    display: inline-block;
    padding: 0.75em 1.5em; 
    border-radius: 8px; 
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    line-height: normal; 
}

.btn-cta {
    background-color: var(--accent-orange);
    color: var(--primary-text-color);
    border-color: var(--accent-orange);
    padding: 0 24px; 
    height: 56px; 
    line-height: 52px; 
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-cta:hover {
    background-color: #E65C00; 
    border-color: #E65C00;
    color: var(--primary-text-color); 
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}


/* Header e Navegação - ESTILO FLUTUANTE DESKTOP */
.main-header {
    height: var(--header-height-desktop);
    position: fixed;
    top: var(--header-top-margin);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 60px);
    max-width: calc(var(--container-width) - 40px);
    z-index: 1000;
    display: flex;
    align-items: center; 
    
    background: var(--header-bg-float-initial);
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    
    border-radius: 12px; 
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.12); 
    
    transition: box-shadow 0.3s ease, background-color 0.4s ease, top 0.3s ease; 
}
.main-header.scrolled {
    background: var(--header-bg-float-scrolled); 
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.main-header .container {
    width: 100%; max-width: none; padding-left: 25px; padding-right: 25px; 
    display: flex; justify-content: space-between; align-items: center; height: 100%; 
}
.logo-link { display: flex; align-items: center; height: 100%; }
.header-logo-img { display: block; max-height: calc(var(--header-height-desktop) - 30px); width: auto; }
.desktop-logo { display: block; filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }
.mobile-logo { display: none; filter: none; max-height: calc(var(--header-height-mobile) - 26px); }
.main-nav { display: flex; align-items: center; height: 100%; }
.main-nav ul { list-style: none; display: flex; align-items: center; padding-left: 0; margin-bottom: 0; height: 100%; }
.main-nav li { margin-left: 28px; display: flex; align-items: center; }
.main-nav a {
    color: var(--header-text-color); font-weight: 600; font-family: var(--font-heading); font-size: 0.9rem;
    padding: 8px 5px; position: relative; text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: color 0.2s ease, opacity 0.2s ease; line-height: 1; 
}
.main-nav a::after { display: none; }
.main-nav a:hover { color: var(--primary-text-color); opacity: 0.8; } 
.main-nav a.active { color: var(--primary-text-color); font-weight: 700; opacity: 1;}
.main-nav .nav-contact-btn { 
    background-color: var(--accent-orange); color: var(--primary-text-color);
    padding: 10px 20px; border-radius: 6px; text-shadow: none; font-size: 0.85rem;
}
.main-nav .nav-contact-btn:hover { background-color: #E65C00; opacity: 1; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001; }
.menu-toggle span {
    display: block; width: 28px; height: 3px; background-color: var(--header-text-color); 
    margin: 6px 0; transition: all 0.3s ease-in-out; border-radius: 1px;
}
.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); }


/* Seção Hero */
#hero {
    position: relative; 
    background-image: url('header_background.jpg'); 
    background-size: cover;
    background-position: center center; 
    background-repeat: no-repeat; 
    color: var(--primary-text-color);
    padding-bottom: 40px; 
    min-height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; 
}
#hero::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: linear-gradient(to bottom, rgba(10, 20, 40, 0.45) 0%, rgba(10, 20, 40, 0.65) 100%); 
    z-index: 1;
}
.hero-content-wrapper {
    position: relative; 
    z-index: 2; 
    width: 100%; 
    max-width: var(--container-width);
    display: flex; 
    flex-direction: column; 
    align-items: center;
    padding-top: calc(var(--header-height-desktop) + var(--header-top-margin));
    padding-bottom: 3vh; 
    justify-content: center;
}
.hero-top-content { 
    margin-bottom: 6vh;
    opacity: 0; 
    transform: translateY(25px); 
    animation: fadeInUp 0.8s 0.3s ease-out forwards; 
}
.hero-bottom-content { opacity: 0; transform: translateY(25px); animation: fadeInUp 0.8s 0.6s ease-out forwards; }
.hero-main-logo { max-width: 380px; width: 65%; margin-bottom: 30px; }
#hero h1 { 
    color: var(--primary-text-color); font-size: clamp(2.6rem, 5vw, 3.2rem); 
    font-weight: 800; margin-bottom: 25px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); 
}
#hero .subtitle { 
    color: var(--secondary-text-color); font-size: clamp(1.1rem, 3vw, 1.375rem); 
    margin-bottom: 40px; max-width: 720px; line-height: 1.65; text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Animações de Entrada */
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.animate-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.animate-in { opacity: 1; transform: translateY(0); }
.service-card.animate-on-scroll.animate-in:nth-child(1) { transition-delay: 0.0s; }
.service-card.animate-on-scroll.animate-in:nth-child(2) { transition-delay: 0.1s; }
.service-card.animate-on-scroll.animate-in:nth-child(3) { transition-delay: 0.2s; }
.service-card.animate-on-scroll.animate-in:nth-child(4) { transition-delay: 0.05s; }
.service-card.animate-on-scroll.animate-in:nth-child(5) { transition-delay: 0.15s; }
.service-card.animate-on-scroll.animate-in:nth-child(6) { transition-delay: 0.25s; }
.service-card.animate-on-scroll.animate-in:nth-child(7) { transition-delay: 0.1s; }
.service-card.animate-on-scroll.animate-in:nth-child(8) { transition-delay: 0.2s; }
.service-card.animate-on-scroll.animate-in:nth-child(9) { transition-delay: 0.3s; }
.team-card.animate-on-scroll.animate-in:nth-child(1) { transition-delay: 0.0s; }
.team-card.animate-on-scroll.animate-in:nth-child(2) { transition-delay: 0.1s; }
.team-card.animate-on-scroll.animate-in:nth-child(3) { transition-delay: 0.2s; }
.team-card.animate-on-scroll.animate-in:nth-child(4) { transition-delay: 0.05s; } /* Ajustar se necessário para equipe */
.team-card.animate-on-scroll.animate-in:nth-child(5) { transition-delay: 0.15s; }


/* Seções Gerais */
section { padding: 80px 0; }
section:not(#hero) { overflow: hidden; } 

/* Seção Abordagem */
#abordagem { background-color: var(--dark-blue); color: var(--secondary-text-color); }
#abordagem h2 { color: var(--primary-text-color); text-align: center; margin-bottom: 50px; }
#abordagem h3 { color: var(--accent-teal); margin-top: 35px; margin-bottom: 15px; font-size: clamp(1.3rem, 3.2vw, 1.9rem); }
#abordagem p { color: var(--secondary-text-color); font-size: clamp(1rem, 2.5vw, 1.125rem); line-height: 1.75; }
#abordagem .container { max-width: 850px; }

#quem-somos p { 
    text-align: justify;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word; 
}
#quem-somos ul {
    list-style-position: outside; 
}
#quem-somos ul li {
    text-align: justify;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
    margin-bottom: 0.6em;
}

@media (max-width: 768px) {
    #quem-somos ul {
        padding-left: 30px; /* Aumentar padding para bullets no mobile (ajuste o valor) */
    }
     #quem-somos p, 
     #quem-somos ul li { 
        line-height: 1.7; /* Melhorar legibilidade justificada */
    }
}

/* Seção Nossos Serviços */
#servicos { background-color: var(--neutral-light-bg); }
#servicos h2 { color: var(--dark-blue); text-align: center; margin-bottom: 50px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.service-card {
    background-color: var(--neutral-card-bg); padding: 25px 20px; border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07); display: flex; flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.service-card:hover { transform: scale(1.05) translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.12); }
.service-card h4 { color: var(--dark-blue); margin-bottom: 15px; font-size: 1.15em; min-height: 2.5em; display: flex; align-items: center; }
.service-card ul { padding-left: 0; list-style: none; font-size: 0.9em; color: var(--neutral-text-medium); flex-grow: 1; }
.service-card ul li { margin-bottom: 7px; position: relative; padding-left: 18px; }
.service-card ul li::before { content: '•'; color: var(--accent-teal); position: absolute; left: 0; font-size: 1.2em; line-height: 1; }

/* Seção Fundo de Comércio */
#fundo-comercio { background-color: var(--dark-blue); color: var(--secondary-text-color); padding-top: 80px; padding-bottom: 100px; overflow: hidden; }
#fundo-comercio h2 { color: var(--primary-text-color); text-align: center; margin-bottom: 25px; }
#fundo-comercio p { color: var(--secondary-text-color); text-align: center; max-width: 750px; margin-left: auto; margin-right: auto; margin-bottom: 50px; font-size: clamp(1rem, 2.6vw, 1.125rem); }
.valor-oculto-container { position: relative; width: 100%; min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 40px; margin-bottom: 40px; }
.onda-bg { position: absolute; left: 50%; top: 50%; border: 2px solid rgba(44, 165, 181, 0.1); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; }
.animate-on-scroll.animate-in .onda-bg-1 { width: 100px; height: 100px; animation: ripple-bg 1.8s 0.5s ease-out forwards; border-color: rgba(44, 165, 181, 0.15); } /* Atrasado */
.animate-on-scroll.animate-in .onda-bg-2 { width: 200px; height: 200px; animation: ripple-bg 1.8s 0.7s ease-out forwards; border-color: rgba(44, 165, 181, 0.20); } /* Atrasado */
.animate-on-scroll.animate-in .onda-bg-3 { width: 300px; height: 300px; animation: ripple-bg 1.8s 0.9s ease-out forwards; border-color: rgba(44, 165, 181, 0.25); } /* Atrasado */
.animate-on-scroll.animate-in .onda-bg-4 { width: 400px; height: 400px; animation: ripple-bg 1.8s 1.1s ease-out forwards; border-color: rgba(44, 165, 181, 0.30); } /* Atrasado */
.animate-on-scroll.animate-in .onda-bg-5 { width: 500px; height: 500px; animation: ripple-bg 1.8s 1.3s ease-out forwards; border-color: rgba(44, 165, 181, 0.35); } /* Atrasado */
/* A última onda (onda-bg-5) terminará em 1.1s (delay) + 1.8s (duration) = 2.9 segundos */
@keyframes ripple-bg { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.05; } 60% { opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.valor-item { position: relative; z-index: 10; margin-bottom: 20px; opacity: 0; transform: translateY(30px) scale(0.8); }
.valor-item:last-child { margin-bottom: 0; }
/* Delays dos itens ajustados para começar após o ripple estar mais visível */
.animate-on-scroll.animate-in .valor-item.item-1 { animation: item-appear 0.7s 2.5s ease-out forwards; } 
.animate-on-scroll.animate-in .valor-item.item-2 { animation: item-appear 0.7s 2.7s ease-out forwards; }
.animate-on-scroll.animate-in .valor-item.item-3 { animation: item-appear 0.7s 2.9s ease-out forwards; }
.animate-on-scroll.animate-in .valor-item.item-4 { animation: item-appear 0.7s 3.1s ease-out forwards; }
.animate-on-scroll.animate-in .valor-item.item-5 { animation: item-appear 0.7s 3.3s ease-out forwards; }
@keyframes item-appear { 0% { opacity: 0; transform: translateY(30px) scale(0.8); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.item-text { display: inline-block; color: var(--primary-text-color); font-family: var(--font-heading); font-weight: 600; font-size: clamp(0.9rem, 2.2vw, 1.1rem); padding: 10px 25px; background-color: var(--accent-teal); border-radius: 25px; box-shadow: 0 3px 10px rgba(0,0,0,0.25); text-align: center; min-width: 200px; }



/* Seção Equipe */
#equipe { background-color: var(--neutral-light-bg); }
#equipe h2 { color: var(--dark-blue); text-align: center; margin-bottom: 50px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; align-items: start; }
.team-card { background-color: var(--neutral-card-bg); padding: 25px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); text-align: center; }
.team-card-accordion-trigger { cursor: pointer; position: relative; padding-bottom: 15px; }
.team-member-photo { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px auto; border: 4px solid var(--neutral-light-bg); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.team-card h4 { color: var(--dark-blue); margin-bottom: 8px; font-size: 1.3rem; }
.team-member-title { color: var(--accent-teal); font-size: 0.9rem; font-weight: 600; margin-bottom: 15px; min-height: 2.5em; }
.accordion-icon { display: inline-block; font-size: 1.8rem; color: var(--accent-orange); font-weight: bold; position: absolute; right: 0px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s ease; }
.team-card.active .accordion-icon { transform: translateY(-50%) rotate(45deg); }
.team-card-accordion-content {
    max-height: 0; overflow: hidden; 
    transition: max-height 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), padding-top 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), margin-top 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); 
    text-align: justify; border-top: 1px solid var(--neutral-light-bg); padding-top: 0; margin-top: 0;  
}
.team-card.active .team-card-accordion-content { max-height: 1500px; padding-top: 25px; margin-top: 20px; }
.team-card-accordion-content p { color: var(--neutral-text-medium); font-size: 0.95rem; line-height: 1.75; margin-bottom: 1em; }
.team-card-accordion-content p strong { font-weight: 700; color: var(--neutral-text-dark); }
.team-card-accordion-content p:last-of-type { margin-bottom: 1.5em; }
.team-member-contact-details { margin-top: 20px; padding-top: 15px; border-top: 1px dashed var(--accent-teal); text-align: left; }
.whatsapp-link, .email-link { display: flex; align-items: center; color: var(--neutral-text-dark); font-size: 0.9rem; margin-bottom: 10px; text-decoration: none; transition: color 0.2s ease; }
.whatsapp-link:hover, .email-link:hover { color: var(--accent-orange); }
.whatsapp-icon { width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; }
.email-link { word-break: break-all; }


.section-subtitle {
    text-align: center;
    color: var(--neutral-text-medium);
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    max-width: 700px;
    margin: 0 auto 50px auto; /* Centraliza e adiciona margem inferior */
    line-height: 1.6;
}

/* Seção Obras Literárias */
#obras-literarias {
    background-color: var(--neutral-card-bg); 
    padding-top: 80px;
    padding-bottom: 80px;
}

#obras-literarias h2 {
    color: var(--dark-blue);
    text-align: center;
    margin-bottom: 15px; 
}

/* .section-subtitle já definido anteriormente, será aplicado aqui */

.livros-grid {
    display: grid;
    /* Para 8 itens, 4 colunas em desktop pode ficar bom */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Mais flexível */
    /* Se preferir fixo 4 colunas no desktop e depois ajustar: */
    /* grid-template-columns: repeat(4, 1fr); */
    gap: 35px; /* Aumentar um pouco o gap */
    margin-top: 40px; /* Espaçamento após o subtítulo */
}

.livro-card {
    background-color: var(--neutral-light-bg); 
    border-radius: 8px; /* Reduzir um pouco o radius */
    box-shadow: 0 5px 20px rgba(0,0,0,0.07); /* Sombra mais suave */
    overflow: hidden; 
    display: flex;
    flex-direction: column; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.livro-card:hover {
    transform: translateY(-6px) scale(1.02); /* Efeito de hover mais sutil */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.livro-capa {
    width: 100%;
    height: 280px; /* Altura um pouco menor para a capa */
    overflow: hidden;
    position: relative; 
    background-color: #e8e8e8; /* Placeholder de fundo mais claro */
    display: flex; /* Para centralizar a imagem */
    align-items: center;
    justify-content: center;
}

.livro-capa img {
    max-width: 100%;
    max-height: 100%; /* Garante que a imagem caiba e mantenha proporção */
    width: auto; /* Para manter proporção se a altura for o limite */
    height: auto; /* Para manter proporção se a largura for o limite */
    object-fit: contain; 
    display: block; 
}

.livro-info {
    padding: 20px; /* Reduzir padding */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.livro-titulo {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem); /* Ajustar tamanho do título */
    color: var(--dark-blue);
    margin-bottom: 5px; /* Menos espaço */
    font-weight: 700;
    line-height: 1.3; /* Melhorar espaçamento de linha para títulos longos */
}

.livro-autor {
    font-size: clamp(0.8rem, 1.8vw, 0.9rem); 
    color: var(--accent-teal); /* Cor mais suave para o autor */
    font-weight: 600;
    margin-bottom: 15px; /* Espaço antes da descrição */
    display: block; 
}

.livro-descricao {
    font-size: clamp(0.85rem, 2vw, 0.95rem); 
    color: var(--neutral-text-medium);
    line-height: 1.6; /* Ajustado para melhor leitura justificada */
    flex-grow: 1; 
    text-align: justify; /* ADICIONADO PARA JUSTIFICAR TODO O BLOCO DE DESCRIÇÃO */
}

.livro-descricao p {
    margin-bottom: 0.8em; 
    font-size: inherit; 
    /* text-align: justify; <- Se preferir aplicar por parágrafo, mas no pai é mais comum */
    /* Adicionar hifenização para melhor quebra de palavras em texto justificado */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word; /* Ajuda a quebrar palavras longas se necessário */
}

.livro-descricao p:last-child {
    margin-bottom: 0;
}


/* Responsividade para a seção Obras Literárias */
@media (max-width: 1200px) { /* Para telas um pouco menores que o container máximo */
    .livros-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        /* Se quiser forçar 3 colunas: */
        /* grid-template-columns: repeat(3, 1fr); */
    }
}

@media (max-width: 992px) {
    .livros-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
         /* Se quiser forçar 2 colunas: */
        /* grid-template-columns: repeat(2, 1fr); */
    }
     .livro-capa {
        height: 260px; 
    }
}

@media (max-width: 768px) {
    .livros-grid {
        grid-template-columns: 1fr; 
        gap: 25px; /* Menor gap no mobile */
    }
    .livro-capa {
        height: 240px; 
    }
    .livro-titulo {
        font-size: clamp(1rem, 3.5vw, 1.25rem);
    }
    .livro-autor {
        font-size: clamp(0.75rem, 2.2vw, 0.85rem);
    }
    .livro-descricao {
        font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    }
}

/* Seção Contato */
#contato {
    background-color: var(--accent-teal); /* Fundo Teal */
    padding-top: 80px;
    padding-bottom: 100px;
    color: var(--primary-text-color); /* Texto principal branco para contraste */
}

#contato h2 { 
    color: var(--primary-text-color); /* Título branco */
    text-align: center;
    margin-bottom: 20px; 
}

.section-subtitle-contact { /* Subtítulo específico para a seção contato */
    text-align: center;
    color: rgba(255, 255, 255, 0.85); /* Branco com leve transparência */
    font-size: clamp(1rem, 2.8vw, 1.125rem);
    max-width: 700px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}

.contact-form-wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 40px; 
    align-items: flex-start; 
}

#contactForm { 
    flex: 1.5; 
    min-width: 300px; 
    background-color: rgba(255, 255, 255, 0.05); /* Fundo sutil para o formulário */
    padding: 30px;
    border-radius: 8px;
}

.form-group label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    font-size: 0.9em; 
    color: var(--primary-text-color); /* Labels brancas */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borda clara */
    border-radius: 6px;
    font-family: var(--font-body); 
    font-size: 1rem; 
    color: var(--neutral-text-dark); /* Texto digitado escuro */
    background-color: rgba(255, 255, 255, 0.9); /* Fundo dos inputs claro */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--neutral-text-medium); /* Cor do placeholder */
    opacity: 0.7;
}

.form-group input:focus, 
.form-group textarea:focus {
    border-color: var(--primary-text-color); /* Borda branca ao focar */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); 
    outline: none;
    background-color: var(--neutral-card-bg); /* Fundo branco sólido ao focar */
}
.form-group textarea { min-height: 120px; resize: vertical; }

.privacy-group { display: flex; align-items: center; margin-top: 10px; }
.privacy-group input[type="checkbox"] { 
    width: auto; 
    margin-right: 10px; 
    transform: scale(1.1);
    accent-color: var(--accent-orange); /* Cor do checkbox marcado */
}
.privacy-label { 
    margin-bottom: 0; 
    font-weight: normal; 
    font-size: 0.85em; 
    color: var(--secondary-text-color); /* Texto da política de privacidade claro */
}
.privacy-label a { 
    color: var(--secondary-text-color); /* Texto da política de privacidade claro */
}

.btn-cta-contact { /* Botão do formulário de contato */
    background-color: var(--accent-orange);
    color: var(--primary-text-color);
    border-color: var(--accent-orange);
    width: 100%; 
    margin-top: 15px;
    padding: 0 24px;
    height: 52px; /* Ajuste de altura */
    line-height: 48px;
    font-size: 0.95rem; /* Ajuste de tamanho da fonte */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-cta-contact:hover {
    background-color: #E65C00; 
    border-color: #E65C00;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}


.contact-details-box { /* Novo nome para o box de contatos */
    flex: 1; 
    min-width: 280px; 
    background-color: transparent; /* Fundo transparente, pois a seção já tem cor */
    padding: 30px 20px; /* Ajuste de padding */
    border-radius: 8px; 
    /* box-shadow: 0 3px 10px rgba(0,0,0,0.05); */ /* Remover sombra se o fundo da seção já tem cor */
}
.contact-details-box h3 { 
    color: var(--primary-text-color); /* Título "Nossos Contatos" branco */
    margin-bottom: 20px; /* Mais espaço */
    font-size: 1.6rem; /* Tamanho maior */
    text-align: left; /* Alinhar à esquerda */
}
.contact-details-box p { 
    margin-bottom: 12px;
    text-align: left; /* Alinhar à esquerda */
}
.contact-details-box p a { /* Estilo para os links de contato (WhatsApp) */
    color: var(--primary-text-color); /* Links brancos */
    font-weight: 400; /* Peso normal para não destacar demais só o nome */
    font-size: 1rem; /* Aumentar um pouco */
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.contact-details-box p a:hover {
    color: var(--primary-text-color); /* Manter branco no hover */
    opacity: 0.75; /* Apenas mudar opacidade */
}
/* Remover o estilo strong padrão se os nomes não precisarem de negrito extra */
.contact-details-box p strong {
    font-weight: 600; /* Se ainda quiser um leve destaque para o nome */
    color: var(--primary-text-color); /* Garantir que o nome também seja branco */
}

.form-status {
    margin-top: 20px;
    padding: 15px;
    border-radius: 6px;
    font-size: 0.95rem;
    text-align: center;
    display: none; /* Escondido por padrão */
    transition: opacity 0.3s ease;
}

.form-status.success {
    background-color: #d4edda; /* Verde claro para sucesso */
    color: #155724; /* Verde escuro para texto */
    border: 1px solid #c3e6cb;
    display: block; /* Mostra quando a classe é adicionada */
}

.form-status.error {
    background-color: #f8d7da; /* Vermelho claro para erro */
    color: #721c24; /* Vermelho escuro para texto */
    border: 1px solid #f5c6cb;
    display: block; /* Mostra quando a classe é adicionada */
}

.form-servicos {
    background-color: var(--accent-teal);
    border-radius: 10px;
    padding: 20px;
}
.form-servicos h2 {
    color: white!important; /* Título branco */
    font-size: 1.5rem; /* Tamanho do título */
    padding-bottom: 0!important; /* Remover padding inferior */
}

/* Footer */
.main-footer {
    background-color: var(--dark-blue);
    color: var(--secondary-text-color); 
    text-align: center;
    padding: 50px 20px; 
}

/* ==========================================================================
   Estilos para o Campo de Seleção Múltipla (Select2) do Forminator [CORRIGIDO]
   ========================================================================== */

/* --- Estilo Base (para fundo claro) --- */

/* Alvo: O container principal gerado pelo Select2 */
.form-custom-style .select2-container--default .select2-selection--multiple {
    width: 100% !important;
    min-height: 50px; /* Garante altura mínima consistente */
    border: 1px solid #dcdcdc !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    padding: 5px 5px 0 5px !important; /* Espaçamento interno para as pílulas */
    cursor: text;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Foco na caixa de seleção */
.form-custom-style .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--dark-blue) !important;
    box-shadow: 0 0 0 3px rgba(10, 35, 66, 0.15) !important;
}

/* Alvo: As "pílulas" dos itens selecionados dentro da caixa */
.form-custom-style .select2-selection__choice {
    background-color: var(--dark-blue) !important;
    border: 1px solid var(--dark-blue) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    margin-right: 5px !important;
    margin-bottom: 5px !important; /* Espaçamento se quebrar linha */
    display: inline-flex;
    align-items: center;
}

/* O 'X' para remover um item selecionado */
.form-custom-style .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.2em;
    margin-left: 8px !important; /* Espaço entre o texto e o X */
    order: 2; /* Coloca o X no final */
    transition: color 0.2s ease;
}
.form-custom-style .select2-selection__choice__remove:hover {
    color: #fff !important;
}

/* O campo de input que aparece para digitar/buscar */
.form-custom-style .select2-search--inline .select2-search__field {
    margin-top: 5px; /* Alinhamento vertical */
    color: var(--neutral-text-dark);
}
.form-custom-style .select2-search__field::placeholder {
    color: var(--neutral-text-medium);
    opacity: 0.8;
}

h2.forminator-title {
    color: var(--primary-text-color) !important; /* Título do formulário em branco */
    font-size: 30px!important; /* Tamanho do título */
    margin-bottom: 0; /* Espaçamento inferior */
    text-align: center!important; /* Centralizar o título */
}

/* A lista suspensa que aparece ao clicar */
body .select2-dropdown {
    border-radius: 6px !important;
    border: 1px solid #dcdcdc !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background-color: #fff !important;
    z-index: 99999; /* Garante que a lista fique por cima de tudo */
}

/* Opções na lista suspensa */
body .select2-results__option {
    padding: 10px 15px !important;
    color: var(--neutral-text-dark);
}

/* Opção com o mouse por cima (hover) */
body .select2-results__option--highlighted {
    background-color: var(--accent-teal) !important;
    color: #0A2342 !important;
}

/* Opção que já foi selecionada */
body .select2-results__option[aria-selected="true"] {
    background-color: #f0f0f0 !important;
    color: var(--neutral-text-medium);
}


/* --- AJUSTES ESPECÍFICOS PARA O FORMULÁRIO DA PÁGINA INICIAL (FUNDO ESCURO) --- */

#contato .form-custom-style .select2-container--default .select2-selection--multiple {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

#contato .form-custom-style .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary-text-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
    background-color: var(--neutral-card-bg) !important;
}

#contato .form-custom-style .select2-search__field {
    color: var(--neutral-text-dark);
}
#contato .form-custom-style .select2-search__field::placeholder {
    color: var(--neutral-text-medium);
    opacity: 0.7;
}

/* Itens/tags selecionados na versão de fundo escuro */
#contato .form-custom-style .select2-selection__choice {
    background-color: var(--accent-teal) !important;
    border-color: var(--accent-teal) !important;
}

/* Lista suspensa na versão escura (geralmente não muda, mas podemos garantir) */
body #contato .select2-dropdown {
    /* O estilo padrão já deve funcionar bem, mas aqui podemos forçar se necessário */
}


/* --- AJUSTES ESPECÍFICOS PARA O FORMULÁRIO DA PÁGINA INICIAL (FUNDO ESCURO) --- */

#contato .form-custom-style .select2-container--default .select2-selection--multiple {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

#contato .form-custom-style .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary-text-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
    background-color: var(--neutral-card-bg) !important;
}

#contato .form-custom-style .select2-search__field::placeholder {
    color: var(--neutral-text-medium);
    opacity: 0.7;
}

/* Itens/tags selecionados na versão de fundo escuro */
#contato .form-custom-style .select2-selection__choice {
    background-color: var(--accent-teal) !important;
    border-color: var(--accent-teal) !important;
}

.footer-logo-img {
    height: 40px; /* Ou o tamanho que você preferir */
    margin-bottom: 20px;
    filter: brightness(0) invert(1); /* Para o logo azul (menu_logo.png) ficar branco */
}

.main-footer p {
    margin-bottom: 10px;
    font-size: 0.9em;
    color: inherit; /* Herda a cor de .main-footer (var(--secondary-text-color)) */
}

.main-footer p a, /* Estilo para links dentro dos parágrafos do footer */
.footer-link {     /* Estilo para links diretos (Política, Termos, Redes Sociais) */
    color: var(--primary-text-color); /* Links brancos para bom contraste */
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.main-footer p a:hover,
.footer-link:hover {
    color: var(--accent-teal); /* Cor de hover para os links */
    opacity: 1;
}

.social-links {
    margin-top: 25px; /* Aumentar um pouco a margem */
    display: flex; /* Para alinhar os ícones horizontalmente */
    justify-content: center; /* Centralizar os ícones */
    align-items: center;
    gap: 20px; /* Espaçamento entre os ícones */
}

.social-icon-link {
    display: inline-block; /* Para que o link se comporte como um bloco para o ícone */
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    opacity: 0.85; /* Opacidade inicial */
}

.social-icon-link:hover {
    transform: scale(1.15); /* Efeito de zoom no hover */
    opacity: 1; /* Opacidade total no hover */
}

.social-icon {
    width: 32px;  
    height: 32px; 
    vertical-align: middle;
}

/* Responsividade para a Seção Contato */
@media (max-width: 768px) {
    #contato h2 {
        font-size: clamp(1.7rem, 5vw, 2rem); /* Ajuste para mobile */
    }
    .section-subtitle-contact {
        font-size: clamp(0.95rem, 2.5vw, 1.05rem);
        margin-bottom: 40px;
    }
    .contact-form-wrapper {
        gap: 30px; /* Menor gap no mobile */
    }
    #contactForm {
        padding: 25px; /* Menor padding no form */
    }
    .contact-details-box {
        padding: 25px 15px; /* Menor padding no box de detalhes */
        text-align: center; /* Centralizar no mobile */
    }
    .contact-details-box h3 {
        text-align: center;
        font-size: 1.4rem;
    }
    .contact-details-box p,
    .contact-details-box p a {
        text-align: center;
        font-size: 0.95rem;
        justify-content: center; /* Se os links forem flex */
    }
}

.grecaptcha-badge { 
    visibility: hidden !important; 
}

/* ==========================================================================
   Correções de Cor do Tema WordPress
   ========================================================================== */

/* Garante que o texto nas seções de fundo claro seja escuro */
#quem-somos,
#servicos,
#equipe,
#obras-literarias {
    color: var(--neutral-text-dark); /* Cor de texto padrão escura */
}

/* Garante que os títulos (h2, h3, h4) nessas seções sejam azul escuro */
#quem-somos h2, #quem-somos h3,
#servicos h2, #servicos h4,
#equipe h2, #equipe h4,
#obras-literarias h2, #obras-literarias h3 {
    color: var(--dark-blue);
}

/* Garante que os parágrafos e itens de lista sejam cinza escuro */
#quem-somos p, #quem-somos li,
#servicos p,
#equipe p,
#obras-literarias p {
    color: var(--neutral-text-medium);
}

/* Ajustes específicos para garantir que os links mantenham a cor correta */
#equipe .team-member-title {
    color: var(--accent-teal);
}

#obras-literarias .livro-autor {
    color: var(--accent-teal);
}

#obras-literarias .livro-titulo {
    color: var(--dark-blue);
}

#servicos .service-card ul li {
    color: var(--neutral-text-medium);
}

/* O conteúdo do accordion da equipe */
.team-card-accordion-content p {
    color: var(--neutral-text-medium);
}
.team-card-accordion-content p strong {
    color: var(--neutral-text-dark);
}
.whatsapp-link, .email-link {
    color: var(--neutral-text-dark);
}
.whatsapp-link:hover, .email-link:hover {
    color: var(--accent-orange);
}

/* Responsividade */
@media (max-width: 992px) { 
    :root { --header-top-margin: 15px; }
    .main-header { width: calc(100% - 40px); max-width: calc(var(--container-width) - 20px); border-radius: 10px; }
    .main-header .container { padding-left: 20px; padding-right: 20px; }
    .main-nav li { margin-left: 20px; } 
    /* #hero padding-top é ajustado por scroll-margin-top */
   .hero-content-wrapper {
        padding-top: calc(var(--header-height-desktop) + var(--header-top-margin) + 20px); /* Ajuste para telas menores */
    }
    .hero-top-content {
        margin-bottom: 7vh; /* Ajuste para telas menores */
    }
    h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); } 
    #hero h1 { font-size: clamp(2.2rem, 5vw, 3rem); } 
    #hero .subtitle { 
        /* text-align: center; /* Se o #hero já tem, não precisa */
        margin-left: auto; 
        margin-right: auto; 
        padding-left: 15px; /* Evita encostar nas bordas */
        padding-right: 15px; /* Evita encostar nas bordas */
        max-width: 90%; /* Garante que não fique 100% da largura e centralize */
    }
    .hero-main-logo { max-width: 360px; } 
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    #fundo-comercio .valor-oculto-container { min-height: 400px; }
    #fundo-comercio .onda-bg-5 { width: 420px; height: 420px; }
    .team-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* ==========================================================================
   Estilos do Blog
   ========================================================================== */

.blog-header-intro {
    text-align: center; /* Centraliza todo o texto dentro dele */
    padding: 20px 0 60px 0; /* Espaçamento: 20px no topo, 60px embaixo antes dos posts */
}

.blog-header-intro h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem); /* Tamanho grande para o título */
    color: var(--dark-blue);
    margin-bottom: 15px; /* Espaço entre o título e os breadcrumbs */
}

/* 
  Sobrescreve o estilo dos breadcrumbs que era branco para o header escuro,
  agora eles precisam ser escuros para o fundo claro.
*/
.blog-header-intro .breadcrumbs {
    color: var(--neutral-text-medium); /* Cor cinza para o texto */
    margin-top: 0;
}

.blog-header-intro .breadcrumbs a {
    color: var(--neutral-text-medium);
}

.blog-header-intro .breadcrumbs a:hover {
    color: var(--accent-orange);
}

/* Área de conteúdo principal */
.main-content-area {
    padding: 80px 0;
}

/* Container para a lista de posts */
.posts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* Card individual do post */
.post-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
.post-card-image-link {
    display: block;
    height: 200px;
    overflow: hidden;
}
.post-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.post-card:hover .post-card-image {
    transform: scale(1.05);
}
.post-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.post-card .entry-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
}
.post-card .entry-title a {
    color: var(--dark-blue);
    text-decoration: none;
}
.post-card .entry-meta {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 15px;
}
.post-card .entry-summary {
    color: var(--neutral-text-medium);
    flex-grow: 1;
    margin-bottom: 20px;
}
.post-card .btn-read-more {
    color: var(--accent-orange);
    font-weight: bold;
    text-decoration: none;
    align-self: flex-start;
}
.post-card .btn-read-more:hover {
    color: #E65C00;
}

/* Paginação */
.pagination {
    margin-top: 60px;
    text-align: center;
}
.pagination .page-numbers {
    padding: 8px 14px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: var(--dark-blue);
    text-decoration: none;
    transition: all 0.2s ease;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: var(--dark-blue);
    color: #fff;
    border-color: var(--dark-blue);
}

/* Estilos para a página de Post Único */
.single-post-container {
    max-width: 800px;
    margin: 0 auto;
}
.entry-header-single {
    margin-bottom: 30px;
    text-align: center;
}
.entry-title-single {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.2;
    color: var(--dark-blue);
}
.entry-meta-single {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
}
.post-thumbnail-single {
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
}
.post-thumbnail-single img {
    width: 100%;
    height: auto;
}
.entry-content-single {
    font-size: 1.125rem;
    line-height: 1.7;
}
.entry-content-single p {
    margin-bottom: 1.5em;
}
.entry-content-single h2,
.entry-content-single h3,
.entry-content-single h4 {
    margin-top: 2em;
    margin-bottom: 1em;
    color: var(--dark-blue);
}

/* ==========================================================================
   Estilos Adicionais do Blog
   ========================================================================== */

/* Breadcrumbs (Caminho do Post) */
.breadcrumbs {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-top: 15px;
}
.single-post-container .breadcrumbs { /* Estilo para a página de post único */
    color: var(--neutral-text-medium);
    margin-bottom: 25px;
}
.breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.breadcrumbs a:hover {
    color: #fff; /* Fica branco no header */
}
.single-post-container .breadcrumbs a:hover {
    color: var(--accent-orange); /* Fica laranja no conteúdo */
}
.breadcrumbs span {
    margin: 0 0.5em;
}

/* Seção de Posts Relacionados */
.related-posts {
    background-color: var(--neutral-light-bg);
    padding: 80px 0;
    margin-top: 80px;
    border-top: 1px solid #e0e0e0;
}
.related-posts-title {
    text-align: center;
    font-size: 2.25rem;
    color: var(--dark-blue);
    margin-bottom: 50px;
}
/* Ajusta o título dos cards relacionados para h4 */
.related-posts .post-card .entry-title {
    font-size: 1.2rem;
    min-height: 3.2em; /* Garante alinhamento se os títulos tiverem tamanhos diferentes */
    margin-bottom: 15px;
}
/* Esconde resumo e data nos cards relacionados para um visual mais limpo */
.related-posts .post-card .entry-summary,
.related-posts .post-card .entry-meta {
    display: none;
}
.related-posts .post-card-content {
    justify-content: space-between; /* Empurra o botão "Leia Mais" para baixo */
}

/* ==========================================================================
   Estilos da Caixa do Autor
   ========================================================================== */
.author-box-container {
    display: flex;
    align-items: center;
    background-color: #f8f9fa; /* Um fundo sutil para destacar a caixa */
    padding: 30px;
    border-radius: 8px;
    margin-top: 60px; /* Espaço após o conteúdo do post */
    border: 1px solid #e9ecef;
}

.author-avatar {
    flex-shrink: 0; /* Impede que a imagem encolha */
    margin-right: 25px;
}

.author-avatar img {
    width: 100px; /* Largura da foto */
    height: 100px; /* Altura da foto */
    border-radius: 50%; /* Faz a imagem ficar redonda */
    object-fit: cover; /* Garante que a foto não fique distorcida */
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.author-details {
    flex-grow: 1;
}

.author-name {
    margin: 0 0 5px 0;
    font-size: 1.5rem;
    color: var(--dark-blue);
}

.author-name a {
    color: inherit;
    text-decoration: none;
}
.author-name a:hover {
    color: var(--accent-orange);
}

.author-description {
    margin: 0;
    font-size: 1rem;
    color: var(--neutral-text-medium);
    line-height: 1.5;
}

/* ==========================================================================
   Estilo do Header para Páginas Internas (Blog/Single)
   ========================================================================== */

/*
  Aqui, nós sobrescrevemos o estilo flutuante do .main-header
  quando ele também tem a nossa nova classe .header-solid-dark.
*/
.main-header.header-solid-dark {
    position: fixed; /* Mude para 'fixed' para travar no topo */
    top: 0;
    left: 0;
    transform: none; /* Remove o translate(-50%) */
    
    width: 100%;
    max-width: none;
    margin-top: 0;
    border-radius: 0;
    
    background: var(--dark-blue); /* Fundo sólido e escuro */
    backdrop-filter: none; /* Remove o efeito de blur */
    -webkit-backdrop-filter: none;
    
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* Sombra sutil para baixo */
}

/* Garante que o container dentro do header sólido não mude */
.main-header.header-solid-dark .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: 15px; /* Adiciona um padding para mobile */
    padding-right: 15px;
}

/* ==========================================================================
   Estilos Personalizados para o Formulário do Forminator (v2)
   ========================================================================== */

/* --- CORREÇÕES GERAIS --- */

/* 1. Esconde a caixa de erro geral no topo do formulário */
.forminator-response-message.forminator-error[role="alert"] {
    display: none !important;
}

/* --- ESTILOS DOS CAMPOS --- */

/* Alvo: A div que envolve cada campo (equivalente ao seu .form-group) */
.forminator-row {
    margin-bottom: 20px; /* Ajuste fino do espaçamento entre campos */
    position: relative;
}

/* Alvo: O rótulo <label> de cada campo */
.forminator-label {
    display: block; 
    margin-bottom: 8px; /* Espaço entre o rótulo e o input */
    font-weight: 600; 
    font-size: 0.9em; 
    color: var(--primary-text-color);
}

/* Alvo: Os campos de input e textarea */
.forminator-input,
.forminator-textarea {
    width: 100% !important; 
    padding: 12px 15px !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    font-family: var(--font-body) !important; 
    font-size: 1rem !important; 
    color: var(--neutral-text-dark) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Alvo: O estado de foco dos campos */
.forminator-input:focus, 
.forminator-textarea:focus {
    border-color: var(--primary-text-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important; 
    outline: none;
    background-color: var(--neutral-card-bg) !important;
}

/* 2. Estiliza a mensagem de erro individual por campo */
.forminator-error-message {
    color: #ffd4d4; /* Um vermelho mais claro para melhor leitura no fundo teal */
    font-size: 0.8em;
    margin-top: 5px;
}

/* --- CAMPO CHECKBOX E CONTADOR --- */

/* 4. Alinha o rótulo do checkbox corretamente */
.forminator-checkbox-label {
    /* Herda a cor do seu .privacy-label */
    color: var(--secondary-text-color);
    font-size: 0.85em;
    font-weight: normal;
    padding-left: 10px; /* Adiciona espaço após a caixa de seleção */
}
.forminator-checkbox-label a {
    color: inherit; /* Garante que o link tenha a mesma cor */
    text-decoration: underline;
}

/* 5. Esconde o contador de caracteres da área de texto */
.forminator-counter {
    display: none;
}

/* --- BOTÃO E MENSAGEM DE SUCESSO --- */

/* Alvo: O botão de Enviar */
.forminator-button-submit {
    background-color: var(--accent-orange) !important;
    color: var(--primary-text-color) !important;
    border: 2px solid var(--accent-orange) !important;
    width: 100%; 
    margin-top: 15px;
    padding: 0 24px !important;
    height: 52px !important;
    line-height: 48px !important;
    font-size: 0.95rem !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.forminator-button-submit:hover {
    background-color: #E65C00 !important; 
    border-color: #E65C00 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* Alvo: Mensagem de SUCESSO após o envio */
.forminator-response-message.forminator-success {
    margin-top: 20px;
    padding: 15px;
    border-radius: 6px;
    font-size: 0.95rem;
    text-align: center;
    border: 1px solid #c3e6cb;
    background-color: #d4edda;
    color: #155724;
}

/* ==========================================================================
   Estilos Padrão para Páginas Genéricas (page.php)
   ========================================================================== */

/* Cabeçalho de Página Padrão */
.page-header-standard {
    background-color: #f8f9fa; /* Fundo cinza bem claro */
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}

.page-header-standard .entry-title {
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--dark-blue);
    margin: 0 0 15px 0;
}

.page-header-standard .breadcrumbs {
    color: var(--neutral-text-medium);
}

.page-header-standard .breadcrumbs a {
    color: var(--neutral-text-medium);
}

.page-header-standard .breadcrumbs a:hover {
    color: var(--accent-orange);
}

/* Conteúdo da Página */
.entry-content {
    padding: 80px 0;
}

/*
  Define uma largura máxima para o conteúdo criado no editor de blocos,
  melhorando a legibilidade em telas largas.
*/
.entry-content .container > * {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Ajustes para o layout da página Clube (para não depender mais do ID) --- */

/* 
  Como o conteúdo da página Clube está agora dentro de um .container,
  precisamos ajustar o seletor dos títulos H2 e parágrafos para que o estilo
  ainda funcione, mas de uma forma mais genérica.
*/
.entry-content h2 {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--dark-blue);
    font-weight: 600;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}

.entry-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--accent-teal);
    border-radius: 2px;
}

.entry-content p {
    text-align: left;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--neutral-text-medium);
    margin-bottom: 2em;
}


/* ==========================================================================
   Componente Reutilizável: Info Card
   ========================================================================== */

/* A grade que segura os info-cards */
.info-card-grid {
    
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Padrão de 2 colunas */
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 30px; /* Espaço entre as linhas de cards */
    max-width: 960px; /* Limita a largura da grade */
    margin-left: auto;
    margin-right: auto;
}

/* 
  Estilo do card individual (o bloco de Grupo).
  O seletor mira no .wp-block-group APENAS quando ele está dentro do nosso .info-card-grid.
*/
.info-card-grid .wp-block-group {
    background-color: #fff; /* Fundo branco para a área de conteúdo */
    border: 1px solid #dcdcdc; /* Borda cinza clara */
    border-radius: 8px;
    overflow: hidden; /* Garante que o fundo do header não vaze */
    display: flex;
    flex-direction: column;
    height: 100%; /* Garante que cards na mesma linha tenham a mesma altura */
    padding: 0; /* Remove padding padrão do grupo */
}

/* Cabeçalho do card (o H4) */
.info-card-grid .wp-block-group h4 {
    background-color: var(--dark-blue);
    color: var(--primary-text-color);
    padding: 20px 25px;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Lista de itens dentro do card */
.info-card-grid .wp-block-group ul {
    
    padding: 25px;
    margin: 0;
    flex-grow: 1; /* Faz a lista ocupar o espaço restante */
    list-style-position: inside; /* Coloca os bullets para dentro */
    list-style-type: none; /* Removemos os bullets padrão para criar os nossos */
}

.info-card-grid .wp-block-group ul li {
    color: var(--neutral-text-medium);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1em;
    padding-left: 25px; /* Espaço para o nosso bullet customizado */
    position: relative;
}

/* Adiciona um bullet customizado com a cor de destaque */
.info-card-grid .wp-block-group ul li::before {
    content: '•';
    color: var(--accent-teal);
    font-size: 1.5em; /* Tamanho do bullet */
    position: absolute;
    left: 0;
    top: -2px; /* Ajuste fino de alinhamento vertical */
    line-height: 1;
}


/* --- Responsividade para o Info Card --- */
@media (max-width: 768px) {
    .info-card-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas menores */
    }
}


/* Responsividade para a caixa do autor */
@media (max-width: 600px) {
    .author-box-container {
        flex-direction: column; /* Empilha os elementos verticalmente */
        text-align: center;
    }
    .author-avatar {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    :root { --header-height-mobile: 65px; --header-top-margin: 0px; }
    .main-header {
        height: var(--header-height-mobile); position: sticky; top: 0; left: 0; transform: none; 
        width: 100%; max-width: none; border-radius: 0; 
        background: var(--neutral-card-bg) !important; /* FORÇAR FUNDO BRANCO */
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important; 
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; 
        border: none; margin-bottom: 0; margin-top: 0;
    }
    .main-header.scrolled { 
        background: var(--neutral-card-bg) !important; /* FORÇAR FUNDO BRANCO */
        box-shadow: 0 3px 12px rgba(0,0,0,0.12) !important;
    }
    .desktop-logo { display: none; }
    .mobile-logo { display: block; }
    .header-logo-img.mobile-logo { max-height: calc(var(--header-height-mobile) - 26px); filter: none; }
    .menu-toggle { display: block; }
    .menu-toggle span { background-color: var(--dark-blue); }
    .main-header .container { width: 90%; max-width: var(--container-width); padding-left: 0; padding-right: 0; height: 100%; }
    /* #hero padding-top é ajustado por scroll-margin-top */
    .hero-content-wrapper {
        padding-top: calc(var(--header-height-mobile) + 20px); /* Espaço para o header mobile */
        justify-content: space-around; /* Tentar distribuir melhor o espaço no mobile */
    }
    .hero-top-content {
        margin-bottom: 5vh; /* Ajuste para mobile */
    }
    h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); } 
    #hero h1 {
        font-size: clamp(2rem, 6vw, 2.6rem);
    }
    #hero { min-height: auto; padding-bottom: 50px; }
    .hero-main-logo { max-width: 300px; margin-bottom: 25px; } 
    #hero .subtitle { font-size: clamp(0.95rem, 2.8vw, 1.1rem); max-width: 90%;} 
    .main-nav { 
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background-color: var(--neutral-card-bg); padding-top: var(--header-height-mobile);
        transform: translateX(-100%); transition: transform 0.35s ease-in-out;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        overflow-y: auto; z-index: 999;
    }
    .main-nav.active { transform: translateX(0); }
    .main-nav ul { flex-direction: column; text-align: center; width: 100%; height: auto; }
    .main-nav li { margin: 20px 0; margin-left: 0; }
    .main-nav a { color: var(--dark-blue); font-size: 1.3em; text-shadow: none; }
    .main-nav a:hover { color: var(--accent-orange); opacity: 1; }
    .main-nav .nav-contact-btn { margin-top: 20px; font-size: 1.1em; padding: 12px 25px; }
    .services-grid { grid-template-columns: 1fr; }
    .service-card h4 { font-size: 1.1em; min-height: auto; }
    .service-card ul { font-size: 0.9rem; }
    #abordagem h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
    #abordagem p { font-size: clamp(0.95rem, 2.5vw, 1.05rem); }
    #fundo-comercio .valor-oculto-container { min-height: 400px; }
    #fundo-comercio .onda-bg-1 { width: 80px; height: 80px; }
    #fundo-comercio .onda-bg-2 { width: 150px; height: 150px; }
    #fundo-comercio .onda-bg-3 { width: 220px; height: 220px; }
    #fundo-comercio .onda-bg-4 { width: 290px; height: 290px; }
    #fundo-comercio .onda-bg-5 { width: 360px; height: 360px; }
    #fundo-comercio .item-text { font-size: clamp(0.8rem, 2.5vw, 1rem); padding: 8px 20px; min-width: 180px; }
    #fundo-comercio .valor-item { margin-bottom: 15px; }
    #fundo-comercio p { margin-bottom: 30px; }
    .team-grid { grid-template-columns: 1fr; } 
    .contact-form-wrapper { flex-direction: column; }
    .contact-details { margin-top: 30px; } 
}

@media (max-width: 480px) {
    #hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); } 
    #hero .subtitle { font-size: clamp(0.9rem, 3vw, 1rem); }
    .hero-main-logo { max-width: 240px; } 
    .btn, .btn-cta { font-size: 0.85rem; height: 50px; line-height: 46px;} 
    #hero .btn-cta { padding: 0 20px; }
    h2 { font-size: clamp(1.5rem, 5vw, 1.8rem); } 
    .service-card h4, .team-card h4 { font-size: 1rem; } 
    #contato p:first-of-type { font-size: 0.9rem; margin-bottom: 25px; } 
    #fundo-comercio .valor-oculto-container { min-height: 350px; margin-top: 20px; margin-bottom: 20px; }
    #fundo-comercio .onda-bg-1 { width: 60px; height: 60px; }
    #fundo-comercio .onda-bg-2 { width: 120px; height: 120px; }
    #fundo-comercio .onda-bg-3 { width: 180px; height: 180px; }
    #fundo-comercio .onda-bg-4 { width: 240px; height: 240px; }
    #fundo-comercio .onda-bg-5 { width: 300px; height: 300px; }
    #fundo-comercio .item-text { font-size: 0.8rem; padding: 6px 15px; min-width: 150px; }
    #fundo-comercio .valor-item { margin-bottom: 12px; }
    .social-icon {
        width: 28px;
        height: 28px;
    }
    .social-links {
        gap: 15px; /* Menor espaçamento */
    }
}

/* Esconde o selo (badge) do Google reCAPTCHA v3 */
.grecaptcha-badge { 
    visibility: hidden !important; 
}