.elementor-15791 .elementor-element.elementor-element-6ca3d62{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-2ec4e85 *//* === VARIÁVEIS DE COR (Foco no Azul Principal #0597E2) === */
:root {
    --cor-azul-principal: rgba(5, 151, 226, 1); /* SEU AZUL #0597E2 */
    --cor-azul-hover: #047fc0; /* Um pouco mais escuro para hover */
    --cor-azul-gradiente-fim: #036aa0; /* Fim do gradiente, um pouco mais escuro mas ainda vibrante */
    
    --cor-texto-principal: #1f2937; /* Azul muito escuro/quase preto para boa legibilidade */
    --cor-texto-secundario: #4a5568; /* Cinza escuro para texto de apoio */
    --cor-texto-claro: #ffffff; /* Branco para texto sobre fundos azuis */
    
    --cor-destaque-amarelo: #FFD700; /* Amarelo para destaques pontuais */
    --cor-destaque-amarelo-hover: #eab600;
    
    --cor-fundo-pagina: #f8f9fa; /* Fundo muito claro, quase branco */
    --cor-fundo-card: #ffffff; 
    --cor-fundo-card-alternativo: #eaf6fd; /* Azul bem clarinho para alternar seções */
    
    --cor-borda: #dee2e6; /* Cinza claro para bordas */
    --cor-sucesso: #28a745; /* Verde para sucesso */

    --font-principal: 'Roboto', sans-serif;
    --font-destaque: 'Montserrat', sans-serif;
    --font-cta: 'Poppins', sans-serif;

    --sombra-card: 0 4px 8px rgba(0, 0, 0, 0.05);
    --sombra-card-hover: 0 8px 16px rgba(0, 0, 0, 0.07);
    --sombra-botao: 0 4px 10px rgba(var(--cor-azul-principal-rgb, 5, 151, 226), 0.25); /* Usando RGB para opacidade */
    --sombra-botao-hover: 0 6px 15px rgba(var(--cor-azul-principal-rgb, 5, 151, 226), 0.35);
    --border-radius-padrao: 8px;
    --transition-padrao: all 0.25s ease-in-out;

    /* Adicionando os componentes RGB do seu azul para uso com opacidade em sombras */
    --cor-azul-principal-r: 5;
    --cor-azul-principal-g: 151;
    --cor-azul-principal-b: 226;
}

/* === RESET BÁSICO & GERAL === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 100%; }

body {
    font-family: var(--font-principal);
    color: var(--cor-texto-principal);
    line-height: 1.65; 
    background-color: var(--cor-fundo-pagina);
    font-size: 1rem; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 960px; 
    margin: 0 auto;
    padding: 0 15px;
}

a {
    color: var(--cor-azul-principal); 
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-padrao);
}
a:hover {
    color: var(--cor-azul-hover); 
}

strong { font-weight: 700; }

/* === HEADER DA PÁGINA (REMOVIDO - SEM ESTILOS NECESSÁRIOS) === */

/* === HERO SECTION ECOSYSTEM === */
.hero-ecosystem {
    /* Usando seu azul principal como cor sólida, ou um gradiente sutil a partir dele */
    background: var(--cor-azul-principal); 
    /* Ou, se preferir um gradiente sutil:
    background: linear-gradient(140deg, var(--cor-azul-principal) 0%, var(--cor-azul-gradiente-fim) 100%);
    */
    color: var(--cor-texto-claro);
    padding: 60px 20px 70px; 
    text-align: center;
    border-radius: 0 0 var(--border-radius-padrao) var(--border-radius-padrao);
    margin-bottom: 40px; 
    position: relative;
    overflow: hidden;
}
.hero-ecosystem::before { 
    /* Removendo o overlay escuro, já que o fundo azul principal deve ser visível */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.05); /* Overlay MUITO sutil, opcional */
    z-index: 1;
}
.hero-ecosystem-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
}
.hero-tagline {
    display: inline-block;
    font-family: var(--font-cta);
    font-size: 0.9rem; 
    font-weight: 600;
    color: var(--cor-destaque-amarelo); 
    background-color: rgba(var(--cor-azul-principal-r), var(--cor-azul-principal-g), var(--cor-azul-principal-b), 0.2); /* Fundo azulado transparente */
    /* Ou para maior contraste com o fundo azul:
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff; 
    border: 1px solid var(--cor-destaque-amarelo);
    */
    padding: 7px 16px; 
    border-radius: 20px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.8px; 
}
.hero-ecosystem h1 {
    font-family: var(--font-destaque);
    font-size: clamp(2.2rem, 5.5vw, 3.5rem); 
    font-weight: 800; 
    margin-bottom: 15px;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15); 
}
.subtitle-ecosystem {
    font-size: clamp(1rem, 2.5vw, 1.15rem); 
    line-height: 1.6;
    opacity: 0.95; /* Um pouco mais opaco para melhor leitura */
    margin-bottom: 0;
}
.highlight-location { 
    color: var(--cor-destaque-amarelo); 
    font-weight: 600; 
}

/* === CONTAINER DO ARTIGO E CARDS === */
.ecosystem-article-wrapper {
    margin-top: -30px; 
    position: relative;
    z-index: 2;
}
.ecosystem-content-detailed {
    background-color: transparent; 
    padding: 0; 
}

.ecosystem-section-card {
    background-color: var(--cor-fundo-card);
    border-radius: var(--border-radius-padrao);
    padding: 25px; 
    margin-bottom: 25px; 
    box-shadow: var(--sombra-card);
    transition: var(--transition-padrao);
}
.ecosystem-section-card:hover {
    transform: translateY(-4px); 
    box-shadow: var(--sombra-card-hover);
}
.ecosystem-section-card.intro-card { 
    text-align: center;
    padding-top: 30px; 
    background: var(--cor-fundo-card); 
}
.ecosystem-section-card.intro-card h2 {
    font-family: var(--font-destaque);
    font-size: clamp(1.5rem, 4vw, 2rem); 
    color: var(--cor-texto-principal);
    margin-bottom: 15px; 
    font-weight: 700; 
}
.ecosystem-section-card.intro-card p {
    font-size: 1rem; 
    color: var(--cor-texto-secundario);
    max-width: 680px;
    margin: 0 auto 15px; 
    line-height: 1.7;
}
.ecosystem-section-card.intro-card strong {
    color: var(--cor-azul-principal); 
}
.card-icon-wrapper {
    margin-bottom: 15px; 
}
.section-main-icon { 
    width: 40px; 
    height: 40px; 
    fill: var(--cor-azul-principal); 
}

.section-header-with-icon {
    display: flex;
    align-items: center;
    gap: 12px; 
    margin-bottom: 20px; 
    padding-bottom: 12px; 
    border-bottom: 1px solid var(--cor-borda);
}
.card-title-icon { 
    width: 24px; 
    height: 24px; 
    fill: var(--cor-azul-principal); 
    flex-shrink: 0;
}
.ecosystem-section-card h2:not(.intro-card h2) {
    font-family: var(--font-destaque);
    font-size: clamp(1.4rem, 3.5vw, 1.8rem); 
    color: var(--cor-texto-principal);
    margin: 0;
    font-weight: 700; 
}

/* Seção de Integração */
.integration-card {
    background-color: var(--cor-fundo-card-alternativo); 
}
.integration-points {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 20px; 
    margin-bottom: 20px; 
}
.integration-point {
    background-color: var(--cor-fundo-card);
    padding: 20px; 
    border-radius: var(--border-radius-padrao); 
    text-align: center;
    box-shadow: var(--sombra-card);
    transition: var(--transition-padrao);
}
.integration-point:hover {
    transform: scale(1.02) translateY(-3px); 
}
.point-icon {
    font-size: 2rem; 
    margin-bottom: 12px; 
    line-height: 1;
    color: var(--cor-azul-principal); 
}
.integration-point h3 {
    font-family: var(--font-cta);
    font-size: 1.1rem; 
    color: var(--cor-texto-principal);
    margin-bottom: 8px; 
    font-weight: 600; 
}
.integration-point p {
    font-size: 0.9rem; 
    color: var(--cor-texto-secundario);
    line-height: 1.6;
}
.integration-footer-text {
    font-size: 0.95rem; 
    color: var(--cor-texto-secundario);
    text-align: center;
    max-width: 650px;
    margin: 15px auto 0; 
}
.marketplace-names {
    font-weight: 600;
    color: var(--cor-texto-principal);
}

/* Seção de Tecnologia e Oportunidades */
.list-styled-ecosystem { 
    list-style: none;
    padding-left: 0; 
    margin-top: 15px; 
}
.list-styled-ecosystem li {
    padding-left: 25px; 
    position: relative;
    margin-bottom: 10px; 
    font-size: 0.95rem; 
    color: var(--cor-texto-secundario);
}
.list-styled-ecosystem.checkmark li::before {
    content: '✓';
    color: var(--cor-sucesso); 
    font-size: 1em; 
    position: absolute;
    left: 0;
    top: 1px; 
    font-weight: bold;
}
.technology-card p:first-of-type,
.opportunities-card p {
    font-size: 1rem; 
    color: var(--cor-texto-secundario);
    line-height: 1.7;
    margin-bottom: 12px; 
}
.final-callout {
    font-family: var(--font-cta);
    font-size: 1.1rem; 
    color: var(--cor-texto-principal);
    text-align: center;
    margin-top: 20px; 
    padding: 18px; 
    background-color: var(--cor-fundo-card-alternativo);
    border-radius: var(--border-radius-padrao);
    border-left: 4px solid var(--cor-azul-principal); 
}
.highlight-strong {
    color: var(--cor-azul-principal);
    font-weight: 700;
}
.cta-ecosystem-wrapper {
    text-align: center;
    margin-top: 25px; 
}
.cta-button-ecosystem {
    display: inline-block;
    padding: 12px 28px; 
    border-radius: 25px; 
    font-family: var(--font-cta);
    font-size: 1rem; 
    font-weight: 600; 
    text-transform: uppercase;
    letter-spacing: 0.5px; 
    color: var(--cor-texto-claro);
    background-color: var(--cor-azul-principal); 
    box-shadow: var(--sombra-botao);
    transition: var(--transition-padrao);
}
.cta-button-ecosystem:hover {
    background-color: var(--cor-azul-hover); 
    color: var(--cor-texto-claro);
    transform: translateY(-3px) scale(1.02); 
    box-shadow: var(--sombra-botao-hover);
}

/* === SEÇÃO DE REDES SOCIAIS === */
.social-media-connect {
    background-color: var(--cor-fundo-card-alternativo);
    text-align: center;
    padding-bottom: 30px; 
}
.social-media-connect p {
    font-size: 1rem; 
    color: var(--cor-texto-secundario);
    max-width: 580px; 
    margin: 0 auto 20px; 
}
.social-buttons-ecosystem {
    display: flex;
    justify-content: center;
    gap: 15px; 
    flex-wrap: wrap;
}
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; 
    gap: 8px; 
    padding: 10px 20px; 
    border-radius: var(--border-radius-padrao); 
    font-family: var(--font-cta);
    font-size: 0.9rem; 
    font-weight: 600;
    text-decoration: none;
    color: var(--cor-texto-claro);
    /* A sombra dos botões sociais será baseada na cor de fundo deles */
    transition: var(--transition-padrao);
    border: none;
    min-width: 140px; 
}
.social-btn:hover {
    transform: translateY(-3px) scale(1.02);
    color: var(--cor-texto-claro);
}
.social-btn.instagram { background-color: #E1306C; box-shadow: 0 4px 10px rgba(225, 48, 108, 0.3); }
.social-btn.instagram:hover { background-color: #c13584; box-shadow: 0 6px 15px rgba(225, 48, 108, 0.4); }
.social-btn.youtube { background-color: #FF0000; box-shadow: 0 4px 10px rgba(255, 0, 0, 0.3); }
.social-btn.youtube:hover { background-color: #cc0000; box-shadow: 0 6px 15px rgba(255, 0, 0, 0.4); }
.social-btn.whatsapp { background-color: #25D366; box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3); }
.social-btn.whatsapp:hover { background-color: #1dae51; box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4); }


.btn-social-icon {
    width: 1.1em; 
    height: 1.1em; 
    fill: currentColor; 
}
/* Ajustes de stroke/fill para ícones se necessário, mantidos do seu original */
.social-btn.instagram .btn-social-icon rect,
.social-btn.instagram .btn-social-icon path,
.social-btn.instagram .btn-social-icon line {
    stroke: var(--cor-texto-claro); fill: none;
}
.social-btn.instagram .btn-social-icon path[d^="M16 11.37"] {
    fill: var(--cor-texto-claro); stroke: none;
}
.social-btn.youtube .btn-social-icon path,
.social-btn.youtube .btn-social-icon polygon {
    fill: var(--cor-texto-claro); stroke: none;
}
.social-btn.whatsapp .btn-social-icon path {
    stroke: var(--cor-texto-claro); fill: none;
}

/* === RESPONSIVIDADE === */
@media (min-width: 769px) { 
    .container { padding: 0 20px; } 
    .hero-ecosystem { padding: 80px 30px 90px; }
    .ecosystem-article-wrapper { margin-top: -40px; }
    .ecosystem-section-card { padding: 30px 35px; margin-bottom: 30px; }
    .intro-card h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
    .section-header-with-icon h2 { font-size: clamp(1.6rem, 4vw, 2rem); }
    .integration-points { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } 
    .cta-button-ecosystem { padding: 16px 35px; font-size: 1.1rem; }
    .social-btn { padding: 12px 25px; font-size: 1rem; }
}

@media (max-width: 480px) {
    .hero-ecosystem { padding: 50px 15px 60px; border-radius: 0 0 20px 20px;}
    .hero-tagline { font-size: 0.85rem; padding: 6px 12px;}
    .hero-ecosystem h1 { font-size: clamp(1.8rem, 6vw, 2.8rem); }
    .subtitle-ecosystem { font-size: 0.95rem; }
    .ecosystem-article-wrapper { margin-top: -25px; }
    .ecosystem-section-card { padding: 20px 15px; }
    .intro-card h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); }
    .section-header-with-icon h2 { font-size: clamp(1.3rem, 3.8vw, 1.6rem); }
    .integration-point p, .technology-card .list-styled-ecosystem li, .opportunities-card p { font-size: 0.85rem; }
    .final-callout { font-size: 1rem; padding: 15px; }
    .cta-button-ecosystem { font-size: 0.95rem; padding: 12px 22px; }
    .social-media-connect p { font-size: 0.9rem; }
}/* End custom CSS */