/* ==========================================================================
    Base Responsiva — UXTBD
    Max container: 1128px
    Breakpoints pedidos:
    • 1128px até 991px
    • 991px até 767px
    • 767px
    (Estratégia mobile-first)
========================================================================== */

/* -------------------- Tokens -------------------- */
:root{
    --container-max:1128px;
    --px:20px;
    --radius:16px;

    --bg:#EDEAEA;				/* base cinza claro do site */
    --panel:#ffffff;			/* cartões */
    --line:#e6e8ee;				/* linhas/bordas */
    --text:#111827;
    --muted:#667085;
    --brand:#111827;
    --accent:#e53935;			/* vermelho dos CTAs */
    --accent-600:#d33531;

    --chip:#f2f4f7;

    --h1:clamp(28px, 4.2vw, 40px);
    --h2:clamp(26px, 3.8vw, 36px);
    --h3:clamp(22px, 3.2vw, 30px);
    --p:clamp(16px, 2.4vw, 20px);
    --btn-font:clamp(16px, 2.0vw, 18px);
}

/* -------------------- Fontes -------------------- */
.manrope-font {
    font-family: "Manrope", Arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* -------------------- Reset / Base -------------------- */
*,
*::before,
*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto;}
}
/* Offset de header fixo para QUALQUER alvo com id */
[id]{
	scroll-margin-top: calc(var(--header-h, 64px) + 12px);
}

body{
    margin:0;
    font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
    line-height:1.6;
    background:var(--bg);
    color:var(--text);
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1rem 0;color:var(--text);}
h1,h2,h3,h4{margin:0 0 .5rem 0;font-weight:700;line-height:1.25;}
.h1{font-size:var(--h1);} .h2{font-size:var(--h2);} .h3{font-size:var(--h3);}

/* -------------------- Acessibilidade -------------------- */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{left:var(--px);top:var(--px);width:auto;height:auto;padding:.6rem .9rem;background:#111827;color:#fff;border-radius:999px;}

/* -------------------- Helpers -------------------- */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--px);}
.section{padding:64px 0; scroll-margin-top: calc(var(--header-h, 72px) + 12px)}
.section-head{margin-bottom:20px;}
.section-head .accent{color:var(--accent);}

/* -------------------- Grid -------------------- */
.grid{display:grid;gap:24px;}
.research-grid{grid-template-columns:repeat(4, minmax(0,1fr));column-gap:32px;}
.ganhos-grid{grid-template-columns:repeat(3, minmax(0,1fr));}

/* -------------------- Cards (uso geral) -------------------- */
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 2px 2px 6px rgba(17,24,39,.06);
    display: flex;
    flex-direction: column;
    /* Adicionado para flexbox */
}
.card .tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto; /* Garante que fique no final do card */
    padding:5px 0px;
    /* Remova top:10px; se não for necessário */
}
.tag{background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:4px 6px;font-size:12px;color:var(--muted);}

/* -------------------- Ticks list -------------------- */
.ticks{padding-left:22px;margin:6px 0 20px 0;color:var(--text);}
.ticks li{margin:.35rem 0;}
.ticks li::marker{content:'• ';}

/* -------------------- Buttons -------------------- */
.btn{
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.8rem 1.4rem; border-radius:100px;
    border:1px solid transparent;
    font-weight:600;
    transition:transform .06s ease, background .15s ease, border-color .15s ease, color .15s ease;
    font-size: var(--btn-font);
}
.btn:active{transform:translateY(1px);}
.btn-outline{background:none;border-color:var(--accent-600);color:var(--accent-600);}
.btn-outline:hover{ background-color: #fff;}
.btn-whatsapp{background:var(--accent);color:#fff;}
.btn-whatsapp:hover{background:var(--accent-600);}

/* -------------------- Pills / headers -------------------- */
.pill{display:inline-block;background:var(--chip);border:1px solid var(--line);color:#344054;border-radius:999px;padding:8px 12px;font-weight:700;}


/* ========================================================================== */
/* HEADER / NAV */
/* ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 110;
    background: #fff;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{font-weight:900;letter-spacing:.2px; font-size: 40px;}
.brand-mark .ux{color:var(--accent);} 
.brand-mark .tbd{color:var(--brand); }
.brand-tag{font-size:14px;color:#475467; line-height: normal;}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#111827;cursor:pointer;}

/* -------------------- Mobile menu -------------------- */
.site-nav{position:absolute;inset-inline:0;top:64px;opacity:0;translate:0 -8px;pointer-events:none;background:#fff;border-bottom:1px solid var(--line);transition:opacity .15s ease, translate .15s ease;}
.site-nav ul{list-style:none;margin:0;padding:8px;display:grid;gap:4px;}
.site-nav a{display:block;padding:12px 14px;border-radius:10px;color:#1E1E1E; font-weight: 600;}
.site-nav a:hover{background:var(--bg);color:#111827;}
.site-nav.aberto{opacity:1;translate:0 0;pointer-events:auto;}

@media (max-width:767px){
    .site-nav ul li:nth-child(2) { display: none; }
}

@media (min-width:767px){
    .nav-toggle{display:none;}
    .site-nav{position:static;inset:auto;opacity:1;translate:0 0;pointer-events:auto;background:transparent;border:0;}
    .site-nav ul{display:flex;gap:14px;padding:0;}
    .site-nav a{padding:10px 12px;}
}



/* ========================================================================== */
/* HERO */
/* ========================================================================== */
.hero{background:#D4D4D4;}
.hero-inner{padding-block: 72px; margin-top:30px; display:flex;flex-direction:column;gap:22px;}
.hero h1 {max-width:980px; color:#fff; text-shadow: 1px 1px 4px rgba(0,0,0,0.6); font-size:3.0em;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;}

@media (max-width: 1160px) {
    .hero-inner{ margin-left:40px; }
}

@media (max-width: 991px) {
    .hero-inner{ margin-left:40px; }
    .hero h1 { font-size: 2.4em;}
}

@media (max-width: 767px) {
    .cta-row {
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .cta-row .btn,
    .cta-row .btn-whatsapp {
        width: 100%;
        max-width: 300px;
        text-align: center;
        justify-content: center;
    }
    .hero h1 { font-size: 2.0em;}
}




/* HERO com imagem de fundo */
#hero {
    background: #d4d4d4 url('img/hero.webp') center center/cover no-repeat;
    /* fallback cinza caso a imagem não carregue */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 560px;
    position: relative;
    z-index: 1;
}

/* Para garantir contraste do texto, se necessário: */
#hero .container,
#hero .hero-inner {
    position: relative;
    z-index: 2;
}

/* Opcional: overlay escuro para melhor leitura do texto */
#hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20,20,20,0.8); /* branco translúcido sobre a imagem */
    z-index: 1;
    pointer-events: none;
}

/* ========================================================================== */
/* RESEARCH */
/* ========================================================================== */
.researches{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.researches .section-head h2{color:var(--accent);} /* título vermelho */
.research-item{padding:8px 0;} /* sem cartões; apenas colunas de texto */
.research-item h3{font-size:22px;line-height:1.25;color:#1E1E1E;margin-bottom:6px;}
.research-item p{color:#1E1E1E; min-height: 90px; padding-top:10px;}
.research-grid hr { display: none; } /* linha divisória entre itens (mobile) */
.link-arrow{display:inline-flex;align-items:center;gap:.6rem;margin-top:12px;font-weight:600;color:#111827;}
.link-arrow i{translate:0 0;transition:translate .15s ease;}
.link-arrow:hover i{translate:3px 0; color:var(--accent)}


/* ========================================================================== */
/* GANHOS */
/* ========================================================================== */
.ganhos .ganhos-card{padding:0;overflow:hidden; }
.ganhos-card .card-head{padding:16px 20px;border-bottom:1px solid var(--line);background:#fafbfc}
.ganhos-card .card-body{padding:16px 20px;}
.ganhos-card p strong{color:#1f2937;}
.ganhos-card .card-head span { font-size: 20px; font-weight: 600; color: #1E1E1E; }


/* ========================================================================== */
/* CTA BAND */
/* ========================================================================== */
.cta-band{border-bottom:1px solid var(--line);text-align:center;}
.cta-band .ux-strong{color:var(--accent);}
.cta-band h2 { font-size:var(--h2); }
.cta-band p { color:#1E1E1E; font-size:var(--p); }
.cta-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px;margin-bottom:15px;}
.cta-band p.caption {color:var(--text); padding-top:5px; }


/* ==========================================================================
	FOOTER (estrutura geral)
	========================================================================== */

footer {
	background: #D4D4D4;
	color: var(--text);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr 1.2fr;
    gap: 32px;
    align-items: start;
    padding-top: 30px;
}

.footer-logo-cnpj,
.footer-contact,
.footer-about {
    text-align: left;
}
.footer-logo-cnpj .logo {
    display: flex;
    justify-content: left;
}
.footer-logo-cnpj .consultoria {
    margin-top: 8px;
}

.footer-logo-cnpj p { padding-bottom: 0; margin-bottom: 0;}

@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .footer-logo-cnpj .logo {
        justify-content: center;
    }
    .footer-logo-cnpj,
    .footer-contact,
    .footer-about {
        text-align: center;
        max-width: 340px;
        margin: 0 auto;
    }
}

/* ==========================================================================
	RODAPÉ INFERIOR
	========================================================================== */

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 32px;
	padding: 28px 0;
	color: var(--text);
	font-size: 1rem;
}

/* Copyright */
.footer-bottom .copy {
	margin: 0 auto;
	font-size: 1rem;
}

/* Políticas/links do rodapé */
.footer-policy {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-policy li a {
	font-size: 1rem;
	text-decoration: none;
	transition: color 0.15s;
}

.footer-policy li a:hover {
	color: #e53935;
}

/* ==========================================================================
	RESPONSIVO (≤ 767px)
	========================================================================== */

@media (max-width: 767px) {

	.footer-bottom {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		text-align: center;
	}

	.footer-policy {
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px;
	}
}


/* ========================================================================== */
/* MEGA MENU E OVERLAY */
/* ========================================================================== */

/* Overlay escuro */
.mega-overlay {
    display: none;
    position: fixed;
    top: 64px; /* altura do header */
    left: 0;
    width: 100vw;
    height: calc(100vh - 64px);
    background: rgba(17, 24, 39, 0.7);
    z-index: 99;
    transition: opacity 0.2s;
}

/* Mega Menu principal */
.mega-menu {
    display: none;
    position: fixed;
    top: 64px; /* abaixo do header */
    left: 0;
    width: 100vw;
    z-index: 1101;
    background: none;
    justify-content: center;
    pointer-events: none;
}
.mega-menu.active {
    display: flex;
    pointer-events: auto;
}

/* Mega Menu estrutura interna */
.mega-menu-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    background: #fff;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    overflow: hidden;
    min-height: 340px;
    display: flex;
    position: relative;
    top: 0;
}

/* Menu lateral do Mega Menu */
.mega-menu-cats {
    background: #FAFAFA;
    padding: 32px 24px;
    min-width: 440px;
    border-right: 1px solid #e6e8ee;
    display: flex;
    flex-direction: column;
}
.mega-menu-cats h4 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 700;
}
.mega-menu-cats p {
    font-size: 0.95rem;
    margin-bottom: 34px;
    max-width: 260px;
    display: block;;
}
.mega-menu-cats ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mega-menu-cats li {
    border-radius: 10px;
    padding: 20px 16px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s;
    font-weight: 600;
}
.mega-menu-cats li.active,
.mega-menu-cats li:hover {
    background: #EFEFEE;
}
.mega-menu-cats li i:first-child {
    color:var(--accent);
}
.mega-menu-cats li i:last-child {
    margin-left: auto;
}

.mega-menu-cats ul li img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 28px;
    height: 28px;
}

/* Conteúdo do Mega Menu */
.mega-menu-content {
    background-color:#E3E1E1;
    flex: 1;
    padding: 32px 32px 24px 32px;
    display: flex;
    flex-direction: column;
    min-width: 340px;
}
.mega-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.mega-menu-head h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}
.mega-menu-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    padding: 4px;
}
.mega-menu-fasttrack {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 18px;
}
.fasttrack-label {
    display: inline-block;
    background: #fbe9e7;
    color: #d11c1c;
    font-size: 0.88em;
    font-weight: 600;
    border-radius: 6px;
    padding: 2px 8px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Serviços do Mega Menu */
.mega-menu-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.service-btn {
    background: #f6f6f6;
    border-radius: 10px;
    padding: 14px 16px;
    font-weight: 500;
    color: #222;
    align-items: center;
    transition: background 0.15s;
    border: none;
    box-shadow: 2px 2px 2px rgba(17,24,39,.06);
    display: flex;
    align-items: center;       /* centraliza verticalmente o conteúdo */
    gap: 12px;
}
.service-btn:hover {
    background: #ececec;
}
.service-btn span {
    flex: 1 1 auto;            /* ocupa o espaço disponível */
    min-width: 0;              /* permite quebra correta dentro de flex */
    font-weight: 600;
    line-height: 1.25;
    color: #1A1A1A;
    font-size: 0.90em;
}
.service-btn span.fasttrack-label2 {
    flex: 0 0 auto;
    white-space: nowrap;       /* nunca quebra */
    background: #fbe9e7;
    color: #d11c1c;
    font-size: 0.78em;
    font-weight: 600;
    border-radius: 6px;
    padding: 2px 8px;
    z-index: 1;
}


/* ========================================================================== */
/* BREAKPOINTS (mobile-first) */
/* ========================================================================== */

/* <= 991px */
@media (max-width:991px){
    /* Grid */
    .research-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
    .ganhos-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
    .section{padding:56px 0;}

    /* Mega Menu */
    .mega-menu-inner {
        min-width: 0;
        max-width: 98vw;
    }
    .mega-menu-cats,
    .mega-menu-content {
        min-width: 0;
        padding: 20px 12px;
    }
    .mega-menu-content {
        padding: 20px 12px 12px 12px;
    }
    .mega-menu-services {
        grid-template-columns: 1fr;
    }

}


/* <= 767px */
@media (max-width:767px){

    :root{--px:12px;}
    .research-grid {grid-template-columns:1fr; gap: 32px; padding-top:20px; }
    .research-grid hr { border:0; border-bottom: #adadad 1px dashed; width: 100%; margin:0; padding:0; display: block; height:1px; }
    .research-item { padding:0px 0px; margin:0px;}
    .research-item h3 { padding:0px; margin:0px; }
    .research-item p { min-height: 0px; }

    .ganhos-grid{grid-template-columns:1fr;}
    .section{padding:48px 0;}
    .card{padding:16px;}

    :root{--px:16px;}
    #hero { min-height: 400px;}
    .hero-inner{padding-block:20px; padding-top:60px;  margin-left:0px;}
    .hero { align-items: center; text-align: center; }

     /* Mega Menu */
    .mega-menu{
        display: none;
        max-width: 0px;
        max-height: 0px;
    }

}








/* Overlay ativo (passa a servir pro mini-menu também) */
.mega-overlay.active{
	display:block;
	opacity:1;
}

/* ===========================
   MINI-MENU (Mobile)
   =========================== */
.mini-menu{
	position: fixed;
	top: 64px;
	left: 0;
	width: 100vw;
	background: #fff;
	z-index: 100;
	transform: translateY(-104%);
	opacity: 0;
	transition: transform .24s ease, opacity .24s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	pointer-events: none;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}
.mini-menu.aberto{
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.mini-inner{padding: 10px 20px 10px 20px;}
.mini-link{
	display: block;
	padding: 18px 0;
	font-weight: 800;
	font-size: 16px;
	color: #1e1e1e;
	border-bottom: 1px solid var(--line);
}
.mini-link + .mini-link{margin-top: 2px;}

.mobile-category{padding: 0px 0;}
.mobile-category hr{border:0;border-bottom:1px solid var(--line);margin: 0px 0 0 0;}

.mobile-cat-title{
	width: 100%;
	background: none;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 18px 0;
	cursor: pointer;
	font: inherit;
	color: #1e1e1e;
}
.mobile-cat-title strong{
	font-size: 16px;
	font-weight: 800;
	display:flex;
	align-items:center;
	gap:10px;
}
.mobile-cat-title .cat-arrow{display:inline-flex;align-items:center;}

.mobile-cat-content{
	max-height: 0;
	overflow: hidden;
	transition: max-height .28s ease;
	will-change: max-height;
}
.mobile-cat-content ul{list-style: none; padding: 0; margin: 0 0 12px 0;}
.mobile-cat-content li{padding: 8px 0; font-size: 16px; color:#1f2937;}

.mini-menu .fa-chevron-up,
.mini-menu .fa-chevron-down{font-size: 16px; color:#6b7280;}

/* Visibilidade por breakpoint */
@media (min-width:768px){
	.mini-menu{display:none;}
}