/* --- 1. VARIÁVEIS E SETUP --- */
:root {
    --bg: #FDFCFB;
    --primary: #1A2B3C;
    --accent: #C5A059;
    --text: #3E444D;
    --text-light: #707781;
    --serif: 'Playfair Display', serif;
    --sans: 'Inter', sans-serif;
    --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
    background-color: var(--bg);
    color: var(--primary);
    font-family: var(--sans);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.marca { color: var(--accent) !important; font-weight: 700 !important; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* --- 2. NAVEGAÇÃO --- */
.navbar { padding: 30px 0; position: fixed; width: 100%; top: 0; z-index: 1000; transition: var(--transition); }
.navbar.scrolled { background: rgba(253, 252, 251, 0.98); backdrop-filter: blur(10px); padding: 20px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.02); }
.nav-content { display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: 600; letter-spacing: 4px; font-size: 1.1rem; text-transform: uppercase; }
.nav-menu { list-style: none; display: flex; gap: 35px; align-items: center; }
.nav-menu a { text-decoration: none; color: var(--primary); font-size: 0.8rem; text-transform: uppercase; }

/* --- 3. HERO E SEÇÕES GERAIS --- */
.hero { padding: 220px 0 120px; text-align: center; }
.eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 5px; color: var(--accent); display: block; margin-bottom: 25px; }
h1 { font-family: var(--serif); font-size: 4rem; line-height: 1.1; margin-bottom: 30px; }

.section-classic, .section-clean { padding: 120px 0; }
.bg-soft { background-color: #F8F9FA; }
.tag { color: var(--accent); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; margin-bottom: 20px; display: block; }
h3 { font-family: var(--serif); font-size: 2.8rem; line-height: 1.2; margin-bottom: 30px; }
.header-center { text-align: center; margin-bottom: 80px; }

/* --- 4. GRIDS DESKTOP (Restaurados) --- */
.grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.dual-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; border-top: 1px solid #EEE; padding-top: 80px; }

/* --- 5. CARDS E COMPONENTES GERAIS --- */
.cards-elegant { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.e-card { background: white; padding: 50px; border: 1px solid #EEE; transition: var(--transition); }
.e-card:hover { border-color: var(--accent); transform: translateY(-5px); }
.e-card h4 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 20px; }

.quote-card { background: white; padding: 60px; border-left: 4px solid var(--accent); box-shadow: 0 30px 60px rgba(0,0,0,0.03); font-family: var(--serif); font-style: italic; font-size: 1.8rem; }
.list-minimal { list-style: none; padding: 20px; background: #FFF; border: 1px solid #EEE; }
.list-minimal li { padding: 15px 0; border-bottom: 1px solid #F5F5F5; font-weight: 500; }

.btn-elegant { padding: 18px 45px; background: var(--primary); color: white; text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; display: inline-block; transition: 0.3s; }
.btn-elegant:hover { opacity: 0.9; transform: translateY(-3px); }
.btn-elegant.invert { background: #FFF; color: var(--primary); }
.btn-minimal { padding: 10px 22px; border: 1px solid var(--primary); text-decoration: none; color: var(--primary); font-size: 0.75rem; text-transform: uppercase; border-radius: 50px; }

/* --- 6. COMPARAÇÃO (TEMPO ESSENCIAL) --- */
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: white; padding: 50px; border: 1px solid #EEE; }
.comparison-grid .old { display: inline-block; font-size: 0.85rem; color: var(--text-light) !important; text-decoration: line-through !important; text-transform: uppercase; margin-bottom: 5px; opacity: 0.6; }
.comparison-grid .new { display: block; font-family: var(--serif); font-size: 1.4rem; color: var(--primary); }

/* --- 6.1. RESPOSTAS A DÚVIDAS --- */
.objections-list { display: grid; max-width: 900px; margin: 0 auto; gap: 18px; }
.objection-item { background: #FFF; border: 1px solid #E8E8E8; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.objection-item[open] { border-color: var(--accent); box-shadow: 0 16px 35px rgba(26, 43, 60, 0.05); }
.objection-item summary { position: relative; padding: 28px 58px 16px 30px; color: var(--primary); cursor: pointer; font-family: var(--serif); font-size: 1.35rem; font-weight: 700; line-height: 1.35; list-style: none; }
.objection-item:not([open]) summary { padding-bottom: 28px; }
.objection-item summary::-webkit-details-marker { display: none; }
.objection-item summary::after { content: '+'; position: absolute; top: 50%; right: 4px; color: var(--accent); font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1; transform: translateY(-50%); transition: transform 0.3s ease; }
.objection-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.objection-item p { max-width: 820px; padding: 10px 58px 34px 30px; color: var(--text); font-size: 1rem; font-weight: 300; line-height: 1.85; }
.objection-item a { color: var(--primary); font-weight: 600; }

/* --- 6.2. ECOSSISTEMA MELHOR ALUNO --- */
.product-teaser { padding: 140px 0; overflow: hidden; }
.product-teaser-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr); gap: 110px; align-items: center; }
.product-teaser-copy p { max-width: 650px; margin-bottom: 24px; color: var(--text); font-weight: 300; }
.product-teaser-proof { color: var(--primary) !important; font-family: var(--serif); font-size: 1.12rem; line-height: 1.6; }
.product-teaser-copy .btn-elegant { margin-top: 18px; }
.product-teaser-visual { position: relative; padding: 25px; }
.product-teaser-visual::before { content: ""; position: absolute; inset: 8% -15% -8% 15%; border-radius: 50%; background: radial-gradient(circle, rgba(197,160,89,0.18), rgba(197,160,89,0) 68%); }
.premium-screen { position: relative; display: block; max-width: 470px; margin: 0 auto; overflow: hidden; border: 12px solid #FFF; background: #FFF; color: var(--primary); text-decoration: none; box-shadow: 0 40px 90px rgba(26,43,60,0.18); transition: var(--transition); }
.premium-screen:hover { transform: translateY(-7px); box-shadow: 0 48px 105px rgba(26,43,60,0.23); }
.premium-screen:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.premium-screen-window { display: block; max-height: 620px; overflow: hidden; background: #F4F5F7; }
.premium-screen-window img { display: block; width: 100%; height: auto; }
.premium-screen-caption { display: block; padding: 17px 20px; border-top: 1px solid #EEE; background: #FFF; font-size: 0.72rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }

/* Página do ecossistema */
.ecosystem-page { background: var(--bg); }
.ecosystem-navbar { position: relative; padding: 20px 0; border-bottom: 1px solid #EEE; background: rgba(253,252,251,0.98); }
.ecosystem-navbar .logo img { display: block; height: 58px; }
.ecosystem-hero { padding: 120px 0 110px; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(197,160,89,0.12), transparent 42%); }
.ecosystem-hero h1 { max-width: 940px; margin: 0 auto 30px; }
.ecosystem-hero p { max-width: 790px; margin: 0 auto 38px; color: var(--text); font-size: 1.14rem; font-weight: 300; }
.ecosystem-feature { padding: 140px 0; border-top: 1px solid #EEE; }
.ecosystem-feature-grid { display: grid; grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.05fr); gap: 115px; align-items: center; }
.ecosystem-feature-grid.reverse .ecosystem-screen-wrap, .ecosystem-feature-grid.reverse .ecosystem-capability-visual { order: 2; }
.ecosystem-feature-grid.reverse .ecosystem-feature-copy { order: 1; }
.ecosystem-feature-copy h2 { margin-bottom: 28px; font-family: var(--serif); font-size: 3rem; line-height: 1.15; }
.ecosystem-feature-copy p { margin-bottom: 22px; color: var(--text); font-weight: 300; }
.ecosystem-feature-copy .feature-conclusion { color: var(--primary); font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; }
.feature-number { display: block; margin-bottom: 18px; color: var(--accent); font-family: var(--serif); font-size: 1.1rem; }
.ecosystem-screen { display: block; max-width: 520px; margin: 0 auto; overflow: hidden; border: 12px solid #FFF; background: #FFF; color: var(--primary); text-decoration: none; box-shadow: 0 35px 85px rgba(26,43,60,0.14); transition: var(--transition); }
.ecosystem-screen:hover { transform: translateY(-6px); box-shadow: 0 44px 100px rgba(26,43,60,0.20); }
.ecosystem-screen:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.ecosystem-screen-window { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #F4F5F7; }
.ecosystem-screen-window img { display: block; width: 100%; height: auto; }
.ecosystem-screen-label { display: flex; justify-content: space-between; gap: 20px; padding: 17px 20px; border-top: 1px solid #EEE; background: #FFF; font-size: 0.72rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.ecosystem-screen-label span:last-child { color: var(--accent); }
.ecosystem-capability-visual { display: flex; align-items: center; justify-content: center; }
.capability-panel { width: 100%; max-width: 520px; padding: 55px; background: var(--primary); color: #FFF; box-shadow: 0 35px 85px rgba(26,43,60,0.16); }
.capability-kicker { display: block; margin-bottom: 38px; color: var(--accent); font-size: 0.72rem; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; }
.capability-chain { display: grid; gap: 14px; }
.capability-chain div { padding: 20px 22px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); }
.capability-chain small { display: block; margin-bottom: 4px; color: rgba(255,255,255,0.55); font-size: 0.72rem; letter-spacing: 1.4px; text-transform: uppercase; }
.capability-chain strong { display: block; font-family: var(--serif); font-size: 1.35rem; }
.capability-chain > span { color: var(--accent); font-family: var(--serif); font-size: 1.4rem; line-height: 1; text-align: center; }
.capability-panel > p { margin-top: 34px; color: rgba(255,255,255,0.74); font-family: var(--serif); font-size: 1.05rem; font-style: italic; text-align: center; }
.capability-panel-light { border-top: 4px solid var(--accent); background: #FFF; color: var(--primary); }
.capability-panel-light .capability-kicker { color: var(--accent); }
.planning-view { display: grid; gap: 18px; }
.planning-view div { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 22px 0; border-bottom: 1px solid #EEE; }
.planning-view span { color: var(--text-light); font-size: 0.78rem; letter-spacing: 1.4px; text-transform: uppercase; }
.planning-view strong { font-family: var(--serif); font-size: 1.4rem; }
.capability-panel-light > p { color: var(--text); }
.feature-list { margin: 30px 0; padding: 0; list-style: none; }
.feature-list li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid #EEE; color: var(--text); font-weight: 400; }
.feature-list li::before { content: ""; position: absolute; top: 23px; left: 2px; width: 7px; height: 7px; border: 2px solid var(--accent); border-radius: 50%; }
.ecosystem-outcomes { padding: 130px 0; background: var(--primary); color: #FFF; }
.ecosystem-outcomes .header-center { margin-bottom: 65px; }
.ecosystem-outcomes h2 { margin-bottom: 24px; font-family: var(--serif); font-size: 3rem; line-height: 1.2; }
.ecosystem-outcomes .header-center p { max-width: 720px; margin: 0 auto; color: rgba(255,255,255,0.72); }
.ecosystem-outcomes .e-card { color: var(--primary); }
.ecosystem-footer { padding-top: 100px; }

.footer-elegant { padding: 120px 0 80px; background: var(--primary); color: white; text-align: center; }
.footer-bottom { margin-top: 80px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); }

/* --- 7. ANIMAÇÕES (REVEAL FALLBACK) --- */
@keyframes autoReveal { to { opacity: 1; transform: translateY(0); } }
.reveal { animation: autoReveal 0.1s forwards; animation-play-state: paused; opacity: 0; transform: translateY(30px); }
.reveal.active { animation-play-state: running; opacity: 1; transform: translateY(0); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }

/* =========================================================
   8. RESPONSIVIDADE (CELULARES E TABLETS)
========================================================= */

@media (max-width: 992px) {
    /* Navbar flutuante para coluna única */
    .navbar { position: relative; padding: 15px 0; background: var(--bg); }
    .nav-content { flex-direction: column; gap: 20px; text-align: center; }
    .nav-menu { flex-wrap: wrap; justify-content: center; gap: 15px; padding: 0; }
    .logo img { height: 45px !important; } /* Impede logo gigante no mobile */

    /* Força todos os grids a virarem 1 coluna */
    .grid-split, 
    .dual-columns,
    .comparison-grid,
    .cards-elegant,
    .impact-summary {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Corrige o erro do bloco "impact-summary" vazando da tela */
    .impact-summary {
        grid-column: 1 / span 1 !important; 
    }

    /* Ajuste de seções e tipografia */
    .hero { padding: 60px 0 40px; }
    h1 { font-size: 2.2rem; line-height: 1.2; }
    h3 { font-size: 2rem; }
    .quote-card { font-size: 1.3rem; padding: 30px; }

    /* Botões empilhados */
    .hero-actions { display: flex; flex-direction: column; gap: 15px; }
    .btn-elegant, .btn-minimal { width: 100%; text-align: center; padding: 16px 20px; }
    .e-card { padding: 30px; }
    .objections-list { gap: 14px; }
    .objection-item summary { padding: 24px 45px 14px 24px; font-size: 1.2rem; }
    .objection-item:not([open]) summary { padding-bottom: 24px; }
    .objection-item p { padding: 8px 45px 28px 24px; }

    .product-teaser { padding: 90px 0; }
    .product-teaser-grid, .ecosystem-feature-grid { grid-template-columns: 1fr; gap: 55px; }
    .product-teaser-copy { text-align: center; }
    .product-teaser-copy p { margin-left: auto; margin-right: auto; }
    .product-teaser-visual { padding: 10px 30px; }
    .ecosystem-navbar .nav-content { flex-direction: row; }
    .ecosystem-navbar .nav-menu { display: block; }
    .ecosystem-navbar .btn-minimal { width: auto; }
    .ecosystem-hero { padding: 75px 0 80px; }
    .ecosystem-feature { padding: 90px 0; }
    .ecosystem-feature-grid.reverse .ecosystem-screen-wrap, .ecosystem-feature-grid.reverse .ecosystem-feature-copy { order: initial; }
    .ecosystem-screen-wrap { order: 2 !important; }
    .ecosystem-capability-visual { order: 2 !important; }
    .ecosystem-feature-copy { order: 1 !important; text-align: center; }
    .ecosystem-feature-copy h2 { font-size: 2.35rem; }
    .ecosystem-outcomes { padding: 90px 0; }
}

@media (max-width: 480px) {
    .container { padding: 0 20px; }
    h1 { font-size: 1.8rem; }
    h3 { font-size: 1.6rem; }
    .comparison-grid { padding: 30px 20px; gap: 20px !important; }
    .premium-screen, .ecosystem-screen { border-width: 8px; }
    .premium-screen-window { max-height: 500px; }
    .ecosystem-navbar .logo img { height: 44px; }
    .ecosystem-navbar .btn-minimal { padding: 9px 14px; font-size: 0.68rem; }
    .ecosystem-hero h1 { font-size: 2.3rem; }
    .ecosystem-feature-copy h2 { font-size: 1.95rem; }
    .capability-panel { padding: 36px 26px; }
    .feature-list { text-align: left; }
}

/* =========================================================
   ADAPTAÇÃO HERO - OVERLAP (TEXTO SOBRE IMAGEM)
========================================================= */

.hero-overlap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    text-align: left; /* Sobrescreve o alinhamento centralizado do hero padrão */
    position: relative;
}

.hero-text-box {
    grid-column: 1 / 8; /* Ocupa da coluna 1 até a 7 */
    grid-row: 1;
    z-index: 2; /* Garante que o texto fique por cima da imagem */
    background: rgba(253, 252, 251, 0.95); /* Usa a cor exata do seu var(--bg) com leve transparência */
    padding: 60px 50px 60px 0;
    border-radius: 8px;
}

.hero-img-box {
    grid-column: 6 / 13; /* Ocupa da coluna 6 até a 12 (criando a sobreposição) */
    grid-row: 1;
    z-index: 1; /* Fica por baixo do texto */
}

    .hero-img-box img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 30px 60px rgba(0,0,0,0.12); /* Sombra elegante */
    }

/* Responsividade do Overlap (Celulares e Tablets) */
@media (max-width: 992px) {
    .hero-overlap {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-text-box {
        grid-column: 1 / -1;
        grid-row: 2; /* Move o texto para baixo da imagem */
        margin-top: -60px; /* Mantém um pequeno efeito de sobreposição no mobile */
        padding: 30px 20px;
        background: var(--bg); /* Fundo sólido para esconder a parte inferior da imagem */
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        margin-left: 15px;
        margin-right: 15px;
        z-index: 2;
    }

    .hero-img-box {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}