.elementor-15775 .elementor-element.elementor-element-05b6460{--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-e62cb28 *//* === VARIÁVEIS DE COR === */
:root {
    --cor-primaria: rgba(5, 151, 226, 1); /* AZUL #0597E2 */
    --cor-primaria-hover: #047bba;
    --cor-primaria-gradiente-fim: #035e8f;
    --cor-secundaria: #FFD700; /* Amarelo Ouro */
    --cor-secundaria-hover: #e6c300;
    --cor-fundo-pagina: #F8FAFC;
    --cor-fundo-bloco: #FFFFFF;
    --cor-fundo-bloco-alternativo: #EAF6FD; /* Azul bem clarinho */
    --cor-texto: #2c3e50;
    --cor-texto-leve: #576574;
    --cor-texto-claro: #FFFFFF;
    --cor-cinza-borda: #E0E6ED;
    --cor-sucesso: #27ae60;
    --font-principal: 'Roboto', sans-serif;
    --font-destaque: 'Montserrat', sans-serif;
    --font-cta: 'Poppins', sans-serif;

    --sombra-card: 0 10px 30px rgba(100, 120, 150, 0.08);
    --sombra-botao: 0 5px 18px rgba(5, 151, 226, 0.25);
    --border-radius-padrao: 12px;
    --border-radius-botao: 8px;
}

/* === 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);
    line-height: 1.7;
    background-color: var(--cor-fundo-pagina);
    font-size: 1.05rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
.container { width: 90%; max-width: 900px; margin: 0 auto; padding: 0 15px; }
a {
    color: var(--cor-primaria);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
a:hover { text-decoration: none; color: var(--cor-primaria-hover); }
.inline-link { font-weight: 700; position: relative; padding-bottom: 1px; }
.inline-link::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
    background-color: var(--cor-secundaria); transition: width 0.3s ease-in-out;
}
.inline-link:hover::after { width: 100%; }

/* === HEADER === */
.page-header-dicas {
    background: var(--cor-fundo-bloco);
    padding: 20px 0;
    border-bottom: 1px solid var(--cor-cinza-borda);
    margin-bottom: 40px;
}
.page-header-dicas .container { display: flex; justify-content: center; align-items: center; min-height: 50px; }
.logo-text-header {
    font-family: var(--font-destaque); font-size: 2rem; font-weight: 800;
    color: var(--cor-primaria); text-decoration: none; letter-spacing: -0.5px;
}
.logo-text-header:hover { color: var(--cor-primaria-hover); }

/* === MAIN CONTENT === */
.main-content { padding: 0 0 60px; }

/* === INTRODUÇÃO === */
.intro-dicas {
    text-align: center;
    padding: 40px 20px 50px;
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-gradiente-fim) 100%);
    color: var(--cor-texto-claro);
    border-radius: var(--border-radius-padrao);
    margin-bottom: 50px;
    box-shadow: var(--sombra-card);
}
.intro-dicas h1 {
    font-family: var(--font-destaque);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    letter-spacing: -1px;
}
.highlight-primary { color: var(--cor-secundaria); text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.intro-dicas .subtitle {
    font-size: 1.2rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
}
.highlight-secondary {
    background-color: rgba(255, 215, 0, 0.9);
    color: var(--cor-cinza-escuro);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-weight: 700;
}

/* === SEÇÕES DE DICAS === */
.dica-section {
    background-color: var(--cor-fundo-bloco);
    padding: 35px 30px;
    margin-bottom: 40px;
    border-radius: var(--border-radius-padrao);
    box-shadow: var(--sombra-card);
    border-left: 5px solid var(--cor-primaria);
}
.dica-section.colored-section {
    background-color: var(--cor-fundo-bloco-alternativo);
    border-left-color: var(--cor-secundaria);
}

.dica-header {
    display: flex;
    align-items: center; /* Alinha verticalmente ícone/imagem e título */
    margin-bottom: 25px;
}
.dica-icon { /* Para emojis */
    font-size: 2.2rem; /* Reduzido um pouco para melhor equilíbrio */
    margin-right: 12px; /* Reduzido um pouco */
    line-height: 1;
    flex-shrink: 0;
    width: 32px; /* Dando uma largura para emojis também, para consistência */
    text-align: center;
}
.pechincha-icon { /* Para a imagem do logo da Pechincha Livre */
    width: 80px;  /* Tamanho consistente */
    height: 80px; /* Tamanho consistente */
    min-width: 80px; /* Evita que encolha */
    min-height: 30px;
    margin-right: 12px;
    object-fit: contain;
    flex-shrink: 0;
    display: block; /* Garante que se comporte como bloco */
    /* Em caso de falha na imagem, o alt text pode precisar de estilos: */
    /* color: transparent; font-size:0; -> para esconder o alt text quebrado (não ideal para acessibilidade) */
    /* ou, se quiser mostrar o alt text de forma controlada: */
    /* background-color: var(--cor-cinza-borda); /* Para ver o espaço */
    /* text-align: center; line-height: 30px; font-size: 10px; overflow: hidden; */
}
.dica-section h2 {
    font-family: var(--font-destaque);
    font-size: clamp(1.6rem, 3.8vw, 2.1rem); /* Levemente reduzido para mais espaço */
    color: var(--cor-texto);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0; 
    line-height: 1.3; /* Adicionado para melhor espaçamento vertical do texto do título */
}
.underline-secondary {
    padding-bottom: 3px;
    border-bottom: 3px solid var(--cor-secundaria);
    display: inline-block;
}
.underline-primary {
    padding-bottom: 3px;
    border-bottom: 3px solid var(--cor-primaria);
    display: inline-block;
    color: var(--cor-primaria);
}

.dica-list, .dica-ordered-list {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}
.dica-list li, .dica-ordered-list li {
    font-size: 1.05rem;
    padding-left: 30px;
    position: relative;
    margin-bottom: 12px;
    line-height: 1.65;
    color: var(--cor-texto-leve);
}
.dica-list li::before {
    content: '✓';
    color: var(--cor-sucesso);
    position: absolute;
    left: 0;
    top: 2px;
    font-weight: bold;
    font-size: 1.2em;
}
.dica-ordered-list { counter-reset: ordered-list-counter; }
.dica-ordered-list li::before {
    counter-increment: ordered-list-counter;
    content: counter(ordered-list-counter) ".";
    color: var(--cor-primaria);
    font-weight: 700;
    font-family: var(--font-destaque);
    position: absolute;
    left: 0;
    top: 0;
}
.bold-highlight { font-weight: 700; color: var(--cor-texto); }
.highlight-text {
    background-color: rgba(255, 215, 0, 0.2);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-weight: 600;
}
.ferramentas-recomendadas { margin: 15px 0; }
.ferramentas-recomendadas p { color: var(--cor-texto); font-size: 1rem; }
.tag-tool {
    background-color: var(--cor-cinza-borda);
    color: var(--cor-texto-leve);
    padding: 0.2em 0.6em;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    margin-right: 5px;
}
.tag-cta {
    background-color: var(--cor-primaria);
    color: var(--cor-texto-claro);
    padding: 0.2em 0.7em;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: 500;
    margin: 0 3px;
}
.code-snippet {
    background-color: #eef2f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95em;
    color: #d63384;
}
.exemplo-dica {
    background-color: var(--cor-fundo-bloco-alternativo);
    padding: 15px;
    border-radius: var(--border-radius-padrao);
    margin-top: 15px;
    font-size: 1rem;
    color: var(--cor-texto-leve);
    border-left: 3px solid var(--cor-primaria);
}

/* Seção Pechincha Livre */
.pechincha-highlight-section {
    background: linear-gradient(135deg, var(--cor-primaria-gradiente-fim) 0%, var(--cor-primaria) 100%);
    color: var(--cor-texto-claro);
    border-left-color: var(--cor-secundaria);
}
.pechincha-highlight-section .dica-header h2 {
    color: var(--cor-texto-claro);
}
.pechincha-highlight-section .dica-header .pechincha-icon {
    /* Se o favicon for predominantemente escuro, pode ser necessário um filtro para branco.
       Ex: filter: brightness(0) invert(1);
       Mas o ideal é ter uma versão do ícone apropriada para fundos escuros.
       Se o favicon tiver um fundo branco, ele deve contrastar bem. */
}

.pechincha-highlight-section .underline-primary {
    border-bottom-color: var(--cor-secundaria);
    color: var(--cor-secundaria);
}
.pechincha-highlight-section p, .pechincha-highlight-section .dica-list li {
    color: rgba(255,255,255,0.9);
}
.pechincha-highlight-section .dica-list li::before {
    color: var(--cor-secundaria);
}

/* Encerramento e CTA */
.encerramento-dicas {
    padding: 40px 20px;
    text-align: center;
    background-color: var(--cor-fundo-bloco);
    border-radius: var(--border-radius-padrao);
    margin-top: 40px;
    box-shadow: var(--sombra-card);
}
.encerramento-dicas h3 {
    font-family: var(--font-destaque);
    font-size: 1.8rem;
    color: var(--cor-primaria);
    margin-bottom: 15px;
    font-weight: 700;
}
.encerramento-dicas p {
    font-size: 1.15rem;
    color: var(--cor-texto-leve);
    max-width: 650px;
    margin: 0 auto 25px;
}
.cta-button-dicas {
    display: inline-block;
    background-color: var(--cor-secundaria);
    color: var(--cor-cinza-escuro);
    padding: 14px 30px;
    border-radius: 50px;
    font-family: var(--font-cta);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: var(--sombra-botao);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.cta-button-dicas:hover {
    background-color: var(--cor-secundaria-hover);
    color: var(--cor-cinza-escuro);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255,215,0,0.35);
}

/* === SEÇÃO DE CONEXÃO SOCIAL === */
.social-connect-dicas {
    margin-top: 50px;
    padding-top: 30px;
    text-align: center;
    border-top: 1px solid var(--cor-cinza-borda);
}
.social-connect-title {
    font-family: var(--font-destaque);
    font-size: 1.6rem;
    color: var(--cor-texto);
    margin-bottom: 25px;
    font-weight: 700;
}
.social-icons-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.social-icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--cor-texto-leve);
}
.social-icon-link svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    margin-bottom: 6px;
}
.social-icon-link span {
    font-size: 0.9rem;
    font-weight: 500;
}
.social-icon-link:hover { color: var(--cor-primaria); transform: translateY(-2px); }
.social-icon-link.whatsapp-link:hover { color: var(--cor-sucesso); }

/* === RESPONSIVIDADE === */
@media (max-width: 768px) {
    body { font-size: 1rem; }
    .logo-text-header { font-size: 1.8rem; }
    .intro-dicas { padding: 30px 15px 40px; }
    .intro-dicas h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
    .intro-dicas .subtitle { font-size: 1.1rem; }
    .dica-section { padding: 30px 25px; }
    .dica-section h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
    .dica-icon { font-size: 2.2rem; width: 28px; }
    .pechincha-icon { width: 28px; height: 28px; min-width: 28px; min-height: 28px; margin-right: 12px;}
    .dica-list li, .dica-ordered-list li { font-size: 1rem; }
    .encerramento-dicas h3 { font-size: 1.6rem; }
    .encerramento-dicas p { font-size: 1.05rem; }
    .cta-button-dicas { font-size: 1.05rem; padding: 12px 25px; }
    .social-connect-title { font-size: 1.4rem; }
}

@media (max-width: 480px) {
    .intro-dicas { padding: 25px 10px 30px; }
    .intro-dicas h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
    .dica-section { padding: 25px 20px; }
    .dica-section h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); }
    .dica-icon { font-size: 2rem; width: 26px; }
    .pechincha-icon { width: 26px; height: 26px; min-width: 26px; min-height: 26px; margin-right: 10px;}
    .dica-list li, .dica-ordered-list li, .exemplo-dica { font-size: 0.95rem; }
    .tag-tool, .tag-cta { font-size: 0.85em; }
    .encerramento-dicas { padding: 30px 15px; }
    .cta-button-dicas { font-size: 1rem; }
}/* End custom CSS */