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

body{
font-family:Arial, sans-serif;
background:#f4f6fa;
color:#1f2937;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 60px;

background:linear-gradient(
90deg,
#042a63,
#003d8f
);

color:white;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-size:20px;
font-weight:bold;
}

.logo img{
width:45px;
}

nav ul{
display:flex;
list-style:none;
gap:35px;
}

nav a{
text-decoration:none;
color:white;
font-size:15px;
}

nav{
margin-left:auto;
margin-right:0;
}

.btn-teste{
margin-left:10px;
}

.btn-teste{
background:#2196ff;
padding:14px 25px;
border-radius:8px;
color:white;
text-decoration:none;
font-weight:bold;
}

.container{
max-width:1400px;
margin:auto;
padding:40px;
}

.breadcrumb{
font-size:14px;
color:#6b7280;
margin-bottom:20px;
}

.badge{
display:inline-block;
background:#1565c0;
color:white;
padding:10px 18px;
border-radius:8px;
font-size:14px;
font-weight:bold;
margin-bottom:25px;
}

.blog-layout{
display:grid;
grid-template-columns:2fr 380px;
gap:40px;
}

.content h1{
font-size:60px;
line-height:1.1;
margin-bottom:25px;
color:#0f2f5f;
}

.subtitulo{
font-size:28px;
line-height:1.5;
margin-bottom:40px;
color:#555;
}

.autor{
display:flex;
align-items:center;
gap:15px;
margin-bottom:30px;
}

.autor img{
width:60px;
height:60px;
border-radius:50%;
}

.info-post{
margin-left:auto;
display:flex;
gap:30px;
color:#666;
}

.banner{
width:100%;
border-radius:12px;
margin-bottom:40px;
}

.content section{
margin-bottom:60px;
}

.content h2{
font-size:38px;
margin-bottom:25px;
color:#0f2f5f;
}

.content p{
font-size:20px;
line-height:1.8;
margin-bottom:20px;
}

.content ul{
padding-left:25px;
}

.content li{
font-size:20px;
margin-bottom:15px;
}

.alerta{
background:#e9f4ff;
padding:25px;
border-radius:10px;
border-left:5px solid #2196ff;
margin-top:30px;
}

.sidebar{
display:flex;
flex-direction:column;
gap:25px;
}

.card{
background:rgb(211, 227, 244);
padding:30px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.card h3{
font-size:28px;
margin-bottom:20px;
}

.card li{
margin-bottom:15px;
font-size:18px;
}

.ebook{
background:linear-gradient(
180deg,
#06265f,
#001a42
);

color:white;
padding:30px;
border-radius:15px;
text-align:center;
}

.ebook h4{
margin-bottom:10px;
}

.ebook h2{
font-size:36px;
margin-bottom:20px;
}

.ebook img{
width:80%;
margin:20px auto;
display:block;
}

.ebook p{
line-height:1.8;
margin-bottom:25px;
text-align: justify;
}

.ebook a{
display:block;
background:#1677ff;
padding:16px;
border-radius:8px;
color:white;
text-decoration:none;
font-weight:bold;
}

.card button{
width:100%;
padding:16px;
background:#1677ff;
color:white;
border:none;
border-radius:8px;
font-size:16px;
font-weight:bold;
cursor:pointer;
}

.timeline{
display:flex;
justify-content:space-between;
margin-top:40px;
position:relative;
}

.timeline::before{
content:"";
position:absolute;
top:25px;
left:0;
width:100%;
height:2px;
background:#dbe3f1;
}

.timeline div{
position:relative;
z-index:2;
text-align:center;
width:18%;
}

.timeline span{
display:flex;
align-items:center;
justify-content:center;

width:50px;
height:50px;

margin:auto;
margin-bottom:15px;

border-radius:50%;

background:#0d6efd;
color:white;

font-weight:bold;
}

@media(max-width:1100px){

.blog-layout{
grid-template-columns:1fr;
}

.content h1{
font-size:40px;
}

.subtitulo{
font-size:20px;
}

.info-post{
display:none;
}

.topbar{
flex-direction:column;
gap:20px;
}

nav ul{
flex-wrap:wrap;
justify-content:center;
}

.timeline{
flex-direction:column;
gap:30px;
}

.timeline::before{
display:none;
}

.timeline div{
width:100%;
}
}

.check-list {
    list-style: none; /* Remove o marcador original */
    padding: 0;
}

.check-list li {
    position: relative;
    padding-left: 35px; /* Espaço para o ícone */
    margin-bottom: 15px;
    line-height: 24px;
}

/* Criando o círculo azul */
.check-list li::before {
    content: "✓"; /* O símbolo de check */
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background-color: #007bff; /* A cor azul da imagem */
    color: white;
    border-radius: 50%; /* Faz o círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}
/* 1. Ajuste de Estabilidade para evitar "quebras" ao dar zoom */
body {
    overflow-x: hidden; /* Evita rolagem horizontal indesejada */
}

/* Garante que o layout não "encolha" demais e se quebre */
.container {
    min-width: 900px; /* Impede que o conteúdo fique comprimido ao dar zoom */
}

/* 2. Melhoria no Grid para manter as colunas organizadas */
.blog-layout {
    display: grid;
    grid-template-columns: 2fr 380px;
    gap: 40px;
    align-items: start; /* Impede que a sidebar se estique desnecessariamente */
}

/* 3. Refinamento de imagens e botões (Responsividade) */
img {
    max-width: 100%;
    height: auto;
}

/* 4. Garantir que os cards tenham altura consistente */
.sidebar {
    position: sticky;
    top: 20px; /* Faz a sidebar acompanhar a leitura */
}

/* 5. Ajuste fino na Timeline para ela não quebrar em telas menores */
@media (max-width: 1100px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
    
    .timeline {
        flex-direction: row; /* Mantém lado a lado se possível */
        flex-wrap: wrap;
    }
    
    .timeline div {
        width: 30%; /* Mais organizado em telas médias */
        margin-bottom: 20px;
    }
}

.subtitulo-etapas {
    font-size: 26px; /* Ajuste este valor até ficar do tamanho que você deseja */
    margin-top: 20px;
    margin-bottom: 20px;
    color: #0f2f5f; /* Mantém a mesma cor dos outros títulos */
}

.subtitulo2-etapas {
    font-size: 22px !important;
    color: #060708 !important; /* Preto */
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold; /* Opcional: ajuda a dar destaque */
}

.formula-container {
    display: flex;             
    justify-content: center;   
    margin: 30px 0;            
    /* background-color: white; REMOVIDO */
    /* padding: 20px; REMOVIDO */
}

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

.full-video-section{
    width:100%;
    padding:20px 20px 50px; /* reduz espaço superior */
    background:#f4f6fb;
    text-align:center;
}

.full-video-section h2{
    font-size:35px;      /* título menor */
    color:#244b7b;
    margin-bottom:20px; /* aproxima do vídeo */
    font-weight:bold;
}

.video-full-wrapper{
    position:relative;

    width:100%;
    max-width:1200px; /* aumenta bastante */

    margin:0 auto;

    aspect-ratio:16/7;

    border-radius:15px;
    overflow:hidden;

    box-shadow:0 10px 35px rgba(0,0,0,.20);
}

.video-full-wrapper iframe{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    border:none;
}

.video-full-wrapper{
    max-width:1400px;
}


.site-footer{
    background:#041026;
    color:#fff;
    margin-top:50px;
}

/* PRIMEIRA FAIXA */
.footer-content{
    max-width:1400px;
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:80px;

    padding:30px 40px;
}

.footer-column:first-child{
    width:260px;
}

.footer-column img{
    width:150px;
    margin-bottom:15px;
}

.footer-column p{
    font-size:16px;
    line-height:1.5;
}

.footer-column:nth-child(2){
    flex:1;
}

.footer-column h3{
    font-size:20px;
    margin-bottom:10px;
}

/* REDES */
/* Ajuste para alinhar as redes na HORIZONTAL */
.social-icons {
    display: flex;
    flex-direction: row;      /* Muda de coluna para linha (horizontal) */
    align-items: center;      /* Alinha verticalmente com o e-mail */
    gap: 25px;                /* Espaço horizontal entre os itens */
    margin-top: 15px;
    flex-wrap: wrap;          /* Quebra para a linha debaixo se a tela for muito pequena */
}

.social-icons a {
    display: flex;
    align-items: center;
    gap: 8px;                 /* Espaço entre ícone e texto */
    text-decoration: none;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;      /* Evita que o texto quebre no meio */
}

.social-icons i{
    font-size:24px;
}

.insta{ color:#E4405F; }
.fb{ color:#1877F2; }
.wpp{ color:#25D366; }

/* SEGUNDA FAIXA */
.footer-bottom{
    width:100%;

    background:#020814;

    border-top:1px solid #1e293b;

    text-align:center;

    color:#94a3b8;

    padding:18px 20px;

    font-size:14px;
}
.footer-logo img {
    width: 32px;   /* mesmo tamanho dos outros ícones */
    height: 32px;
    object-fit: contain;
}

/* ebook   */

.modal {
    display: none;
    position: fixed;
    z-index: 99999;
    inset: 0;
    background: rgba(4, 16, 38, 0.75);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: #ffffff;
    width: 90%;
    max-width: 520px;
    margin: 8% auto;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    text-align: left;
    animation: modalFade .25s ease;
}

@keyframes modalFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-content h2 {
    margin: 0 0 25px;
    font-size: 28px;
    font-weight: 700;
    color: #041026;
    text-align: center;
}

.modal-content ul {
    margin: 0 0 30px;
    padding-left: 22px;
}

.modal-content li {
    margin-bottom: 15px;
    color: #333;
    font-size: 17px;
    line-height: 1.5;
}

.close {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 32px;
    color: #666;
    cursor: pointer;
    transition: 0.3s;
}

.close:hover {
    color: #041026;
}

.btn-download {
    display: block;
    width: 100%;
    background: #1f6feb;
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 16px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    transition: 0.3s;
    box-sizing: border-box;
}

.btn-download:hover {
    background: #1557c0;
}