/* =========================================
 *   Tokens (Design System)
 *   ========================================= */
:root{
    --ink:#1c1d1f;
    --ink-soft:#6a6f73;
    --bg:#ffffff;
    --bg-weak:#f7f9fa;
    --border:#e5e8f0;
    --accent:#458ac6;
    --accent-ink:#0f3d5c;
    --accent-weak: rgba(69,138,198,.12);
    --accent-ring: 0 0 0 3px rgba(69,138,198,.12);
    --bg-dark:#333856;
    --container:1184px;
    --radius:12px;
    --radius-lg:16px;
    --shadow:0 6px 18px rgba(0,0,0,.08);
    --transition: all .2s ease;
    --gap-1:4px; --gap-2:8px; --gap-3:12px; --gap-4:16px;
    --gap-5:24px; --gap-6:32px; --gap-7:48px;
    --focus:#90a4ff;
    --partners-logo-h:28px;
}

/* =========================================
 *   Reset básico
 *   ========================================= */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
}
img{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none }
.visually-hidden{
    position:absolute!important; inset:0 auto auto 0; width:1px; height:1px;
    overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap
}
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:8px }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto }}

/* =========================================
 *   Estrutura
 *   ========================================= */
.container{ max-width:var(--container); margin-inline:auto; padding:0 16px }
section{ padding:var(--gap-7) 0; content-visibility:auto; contain-intrinsic-size:1000px }
h1,h2,h3{ margin:0 0 12px; line-height:1.2 }
h1{ font-weight:800; font-size:clamp(28px,3.4vw,44px) }
h2{ font-weight:800; font-size:clamp(22px,2.4vw,32px) }
h3{ font-weight:700; font-size:clamp(18px,1.8vw,22px) }
.lead{ font-size:clamp(16px,1.6vw,18px); color:#2d2f31; max-width:66ch }
.card-meta{ color:var(--ink-soft); font-size:13px; }

/* =========================================
 *   Header / Navbar
 *   ========================================= */
.site-header{ position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 1px 0 #e7e7e7 }
.nav-wrap{
    display:grid; grid-template-columns:auto 1fr auto;
    gap:24px; align-items:center; height:72px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:28px }
.brand-name { font-weight:700; font-size:18px; color:var(--ink); }

/* --- Menu Desktop --- */
.desktop-nav { justify-self: center; }
.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-item a {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}
.nav-item a:hover {
    color: var(--ink);
    border-bottom-color: var(--accent);
}
.nav-item a svg { transition: var(--transition); }
.nav-item.has-dropdown:hover a svg { transform: rotate(180deg); }

/* --- Dropdown Menu --- */
.nav-item.has-dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    list-style: none;
    padding: 8px;
    margin-top: 10px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    border: 1px solid var(--border);
}
.nav-item.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
    display: block;
    padding: 10px 14px;
    border-bottom: 0;
    border-radius: 8px;
    white-space: nowrap;
    font-weight: 500;
}
.dropdown-menu a:hover {
    background: var(--bg-weak);
    color: var(--ink);
}

.wa-cta{
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:999px;
    background:var(--accent); color:#fff; font-weight:700;
    box-shadow:var(--shadow); border:1px solid transparent; transition:var(--transition);
}
.wa-cta:hover{ filter:brightness(.96); transform:translateY(-1px) }
.wa-cta img{ width:18px; height:18px }

/* Mobile header */
.hamb{ display:none; border:0; background:none; padding:8px; cursor:pointer }
.hamb span{ display:block; height:2px; width:24px; background:var(--ink); margin:5px 0; transition:.2s }

nav.primary-nav{
    position:fixed; inset:72px 0 0 0; background:#fff;
    transform:translateY(-100%); opacity:0; pointer-events:none;
    transition:var(--transition); padding:16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
}
nav.primary-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto }
nav.primary-nav .menu{ 
    display:grid; gap:12px; padding:0; margin:0; list-style:none;
    border-top: 1px solid var(--border);
    max-width: 300px;
    width: 100%;
    margin-inline: auto;
}
nav.primary-nav .menu a { 
    font-weight: 600; padding: 14px 12px; display: block;
    border-bottom: 1px solid var(--border);
}
nav.primary-nav .wa-cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    margin: 32px auto 0;
}

/* =========================================
 *   Hero
 *   ========================================= */
.hero {
    padding: 32px 0 48px;
    color: #fff;
    background: url('images/png/hero_vertical.png') no-repeat;
    background-size: cover;
    background-position: center;    
}
@media (min-width: 981px) {
    .hero {
        background-image: url('images/jpeg/heroimage.jpeg');
        background-position: center 20%;
    }
}
.hero-wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center }
.hero .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8); margin:2px 0 0; display:block } /* 2px de topo; bloco para underline em 100% */
.hero .lead{ color: rgba(255,255,255,.95) }
.hero .lead span{ display:block } /* 2 linhas obrigatórias */
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }

@media (max-width: 980px){
  .hero .lead{ font-size:10px; line-height:1.3 } /* mobile: menor */
} /* adicionar no FINAL do arquivo para ter precedência */

.hero-wa-btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:12px 18px; border-radius:999px;
    font-weight:700;
    background: #fff;
    color: var(--ink);
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: var(--transition);
}
.hero-wa-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.hero-wa-btn img {
    width: 20px;
    height: 20px;
}

.btn-outline{
    display:inline-flex; align-items:center; gap:10px;
    padding:12px 18px; border-radius:999px;
    border:2px solid #fff; color:#fff; font-weight:700;
    background:transparent;
    transition: var(--transition);
}
.btn-outline:hover{ background: rgba(255, 255, 255, 0.1); }

.hero-logo { display: flex; align-items: center; justify-content: center; }
.hero-logo img { max-width: 280px; filter: brightness(0) invert(1); }

@media (max-width:980px){
    .hero-wrap{ grid-template-columns:1fr; text-align:center }
    .hero-actions{ justify-content:center; }
    .hero-logo{ margin-bottom: 40px }
    .hero-logo img{ max-width: 100px; margin-inline: auto; }
}

/* =========================================
 *   Seções restantes
 *   ========================================= */
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.partners-strip{ background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--ink); }
.partners-wrap{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 32px; }
.partners-strip h3{ margin:0; font-weight:700; color:var(--ink); }
.logos-mask { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); }
.partners-logos{ display: flex; flex-wrap: nowrap; animation: scroll 40s linear infinite; }
.partners-set { display: flex; align-items: center; gap: 48px; flex-shrink: 0; }
.partners-set img{ height: var(--partners-logo-h); width: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: var(--transition); }
.partners-set img:hover { filter: grayscale(0%); opacity: 1; }
@media (max-width: 768px){ .partners-wrap{ grid-template-columns: 1fr; gap: 16px; text-align: center; } }
.row-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.slider-actions{ display:flex; gap:8px }
.nav-btn{ 
    border:1px solid #d1d7dc; background:#fff; border-radius:50%; 
    width: 36px; height: 36px; cursor:pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.nav-btn:disabled{ opacity:.5; cursor:default }
.scroll-row{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(240px,24vw,300px); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
.scroll-row::-webkit-scrollbar{ height:8px }
.scroll-row::-webkit-scrollbar-thumb{ background:#d1d7dc; border-radius:999px }
.card-course{ scroll-snap-align:start; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 0 #f1f2f4; }
.card-media{ aspect-ratio:16/9; background:#eef2f7 }
.card-body{ padding:12px }
.card-title{ font-weight:700; line-height:1.3; margin:0 0 6px }
.pill{ display:inline-block; padding:2px 8px; border-radius:999px; background:var(--accent-weak); color:var(--accent-ink); font-weight:700; font-size:11px; }
.values{ background:var(--bg-weak) }
.values-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:24px }
.tabs{ display:grid; gap:12px }
.tab{ display:flex; flex-direction: column; text-align: left; gap:4px; align-items:flex-start; padding:14px; border:1px solid var(--border); border-radius:12px; cursor:pointer; background:#fff; }
.tab[aria-selected="true"]{ border-color:var(--accent); box-shadow:var(--accent-ring); }
.tab .card-meta { color: var(--ink-soft); }
.panel{ aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:#e9ecf2 }
.panel img{ width:100%; height:100%; object-fit:cover }
#p1 img { object-position: center 20%; }
@media (max-width:980px){ .values-grid{ grid-template-columns:1fr } }
.chips{ display:flex; flex-wrap:wrap; gap:10px }
.chip{ padding:8px 12px; border:1px solid #d1d7dc; border-radius:999px; background:#fff; font-weight:600; }
.chip:hover{ border-color:#b6bec6 }
.testimonials{ background:#fff }
.t-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.t-card{ margin: 0; background:#f8f9fc; border:1px solid #edf0f5; border-left:4px solid var(--bg-dark); border-radius:12px; padding:20px; }
.t-card p { margin: 0; }
.t-card footer { background-color: transparent; }
.t-author{ font-weight:700; margin-top:12px; }
.testimonials .card-meta { margin-top: 4px; }
@media (max-width:980px){ .t-grid{ grid-template-columns:1fr } }
.cta-strip{ background:#fff; border-top:1px solid #eef0f2; border-bottom:1px solid #eef0f2; }
.cta-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cta-copy h2{ margin:0 }
.cta-copy .card-meta { margin-top: 4px; }
footer{ background:var(--bg-dark); color:#d1d7dc; font-size:14px }
footer .container { padding-inline: 16px; }
.footer-top{ padding:32px 0; border-top:1px solid rgba(255,255,255,.08) }
.footer-grid{ display:grid; gap:24px; grid-template-columns:2fr 1fr 1fr }
@media (max-width:900px){ 
    .footer-grid{ grid-template-columns:1fr }
    .footer-brand p,
    .footer-links a,
    .footer-bottom {
        font-size: 13px;
    }
}
.footer-heading{ color:#fff; margin-bottom:12px; font-weight:700 }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.08); padding:16px 0; margin-top:8px; font-size:inherit }
.footer-links a{ display:block; color:#d1d7dc; margin:8px 0 }
.footer-links a:hover{ color:#fff }
.footer-links[aria-label="Contato"] a{ display:flex; align-items:center; gap:8px } /* ícone + texto */
.footer-links[aria-label="Contato"] .material-symbols-outlined.mi{ font-size:18px; line-height:1; } /* tamanho do ícone */
.footer-links.social{ display:flex; gap:16px }
.footer-links.social a{ display:inline-flex; align-items:center; gap:8px; margin:0 } /* ícone + texto alinhados */
.footer-links.social svg{ width:16px; height:16px; flex:0 0 auto } /* tamanho consistente do ícone */

.footer-logo{ height:30px; filter:brightness(0) invert(1); margin-bottom:12px }
.footer-brand p { margin: 0; }
button, .browse-btn{ color:inherit; text-align: left; }
button{ font:inherit }
[hidden]{ display:none !important }

/* =========================================
 *   Ajustes para Desktop (Telas maiores)
 *   ========================================= */
@media (min-width: 1024px) {
    :root {
        --container: 1024px;
        --gap-7: 40px;
    }
    .hero {
        padding: 60px 0;
    }
    .hero-wrap {
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
    }
    .hero-wrap > .hero-logo {
        order: 2;
    }
    .hero-wrap > div:not(.hero-logo) {
        order: 1;
    }
    h1 { font-size: 36px; }
    .hero h1 { font-size: 40px; }
    .hero h1{ margin:0 } /* aproxima ao máximo do próximo elemento */
    .hero .eyebrow::after{ content:""; display:block; height:2px; width:100%; margin-top:6px; background:rgba(255,255,255,.7) } /* ocupa a largura do container (igual ao h1) */

    /* Força o bloco de texto do hero a ter largura do conteúdo (h1) */
    .hero .hero-wrap > div:not(.hero-logo){
    width:max-content;
    max-width:100%;
    justify-self:start;
    }


    h2 { font-size: 28px; }
    h3 { font-size: 20px; }
    .lead { font-size: 16px; }
    .nav-item a { font-size: 14px; }
    .hero-wa-btn, .btn-outline { font-size: 14px; padding: 10px 16px; }
    .t-author { margin-top: 8px; }
    .testimonials .card-meta { margin-top: 2px; }
}

/* === Mobile Header Override === */
@media (max-width:980px){
  .site-header{ position:sticky; top:0; z-index:100; background:#fff; }
  .nav-wrap{
    position:relative;
    height:60px;
    display:grid; grid-template-columns: 1fr; align-items:center;
    gap:0;
  }
  .desktop-nav, .brand-name, .nav-wrap .wa-cta{ display:none }
  .hamb{ position:absolute; top:10px; right:16px; display:block }
  .site-header .nav-wrap .brand{
    position:absolute; top:16px; left:16px; right:auto;
    transform:none; margin:0; width:max-content; z-index:2;
  }
}

/* === VALUES: imagens com mesma altura da coluna de botões (desktop) === */
@media (min-width: 981px){
  .values-grid{ align-items: stretch } /* garante que as duas colunas estiquem igualmente */
  .panels{ height:100% } /* painel ocupa 100% da altura da linha do grid */
  .panel{ height:100%; aspect-ratio:auto } /* remove a trava por aspect-ratio e preenche toda a altura */ /* FIX height match */
  .panel img{ height:100%; width:100%; object-fit:cover } /* cobre todo o painel mantendo proporção */
}