/* FONTES E RESET BÁSICO */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap');

:root {
    --navy: #0A1628;
    --orange: #FF6B35;
    --white: #FAFAF9;
    --navy-light: #1A2942;
    --bg-dark-primary: rgb(6, 15, 30);
    --bg-dark-secondary: rgb(8, 18, 35);
    --bg-dark-tertiary: rgb(12, 25, 45);
    --bg-card-start: rgb(15, 30, 55);
    --bg-card-end: rgb(10, 22, 40);
    --bg-card-alt-start: rgb(18, 35, 60);
    --bg-card-alt-end: rgb(12, 25, 45);
    --bg-card-alt-2-start: rgb(16, 32, 58);

    --text-white: #ffffff;
    --text-gray-300: #d1d5db;
    --text-gray-400: #9ca3af;

    --accent-orange-400: #fb923c;
    --accent-orange-500: #f97316;
    --accent-orange-600: #ea580c;
    --accent-orange-700: #c2410c;

    --border-color: rgba(249, 115, 22, 0.2);
    --border-color-medium: rgba(249, 115, 22, 0.3);

    --shadow-color: rgba(249, 115, 22, 0.2);
    --shadow-color-hover: rgba(249, 115, 22, 0.3);
    --shadow-color-strong: rgba(249, 115, 22, 0.5);

    --font-sans: 'Inter', sans-serif;

    /* Variáveis da Timeline */
    --timeline-line-to-box-gap: 0.5rem; /* Espaçamento da linha para a caixa */
    --timeline-total-gap-width: 1rem;  /* Largura total do gap (gap + linha + gap) */
    --timeline-dot-size: 1.5rem;
    --timeline-dot-border: 4px;
    /* Ajuste este valor (ex: 55%, 60%) se as caixas ainda não forem largas o suficiente */
    --timeline-box-target-width-percent: 55%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-dark-primary);
    color: whitesmoke;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
}

main {
    flex-grow: 1;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ============ HERO (VERSÃO CURTA - P/ TOPO DA PÁGINA) ============ */
.hero.short-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 74px;
}
.hero-background { position: absolute; inset: 0; background-image: linear-gradient(to bottom, rgb(6, 15, 30)); }
.hero-overlay-dark { position: absolute; inset: 0; background-image: linear-gradient(to bottom, rgb(6, 15, 30)); }
.hero-content { position: relative; z-index: 10; text-align: center; padding: 1.5rem; }
.short-hero .hero-content h1 { font-size: 4rem; font-weight: 900; color: white; margin-bottom: 1rem; }

/* === UTILITIES === */
.container-narrow {
    max-width: 896px; margin: 0 auto; padding: 0 1.5rem;
}
.container {
    max-width: 1024px; margin: 0 auto; padding: 0 1.5rem;
}
.container-wide {
    max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
}

.grid { display: grid; }
.gap-medium { gap: 2rem; }
.gap-large { gap: 3rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* === SCROLL INDICATOR === */
@keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 1s infinite;
    z-index: 20;
}
.scroll-indicator svg {
    width: 2rem; height: 2rem; color: rgba(251, 146, 60, 0.6);
}

/* === GENERAL SECTION STYLES === */
.section {
    padding: 6rem 1.5rem;
}
.section-intro { background: linear-gradient(to bottom, var(--bg-dark-secondary), var(--bg-dark-tertiary)); }
.section-purpose-values { background: linear-gradient(to bottom, var(--bg-dark-tertiary), var(--bg-dark-primary)); }
.section-timeline { background: linear-gradient(to bottom right, var(--bg-dark-primary), var(--bg-dark-secondary), var(--bg-dark-secondary)); }
.section-results { background: linear-gradient(to bottom, var(--bg-dark-secondary), var(--bg-dark-tertiary)); }
.section-cta {
    position: relative; overflow: hidden;
    background: linear-gradient(to bottom right, rgb(4,10,20), rgb(8,18,35), rgb(6,15,30));
}

.section-header {
    text-align: center; margin-bottom: 4rem;
}
.section-header h2 {
    font-size: 3rem; font-weight: 700; color: var(--text-white); margin-bottom: 1.5rem;
}
.title-underline {
    width: 6rem; height: 6px; background-color: var(--accent-orange-500); margin: 0 auto 2rem;
}
.section-subtitle {
    font-size: 1.25rem; color: var(--text-gray-300); max-width: 56rem; margin: 0 auto;
}

@media (min-width: 768px) {
    .section-header h2 { font-size: 3.75rem; }
}

/* === CARDS === */
.card {
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    background: linear-gradient(to bottom right, var(--bg-card-start), var(--bg-card-end));
    overflow: hidden; padding: 3rem; border-radius: 0.5rem;
}
.card-intro {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    margin-top: -7rem;
}
.card-intro p {
    font-size: 1.25rem; color: var(--text-gray-300); line-height: 1.75; text-align: center;
}
.card-hover-shadow {
    border-color: var(--border-color-medium);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.card-hover-shadow:hover {
     box-shadow: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
}
.card-hover-scale {
    border-color: var(--border-color-medium);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.card-hover-scale:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px var(--shadow-color-hover), 0 8px 10px -6px var(--shadow-color-hover);
}

.card-header {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem;
}
.icon-wrapper {
    padding: 0.75rem; background: linear-gradient(to bottom right, var(--accent-orange-500), var(--accent-orange-600));
    border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); display: inline-flex;
}
.icon-wrapper svg {
    width: 2rem; height: 2rem; color: var(--text-white);
}
.card-header h3, .card-timeline h4 {
    font-size: 1.875rem; font-weight: 700; color: var(--text-white);
}
.card p, .card li span {
    font-size: 1.2rem; color: var(--text-gray-300); line-height: 1.75; text-align: justify;  
  text-justify: inter-word; /* distribui o espaço entre palavras */     text-align: left !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
}


/* Values List */
.values-list {
    list-style: none; display: flex; flex-direction: column; gap: 1rem;
}
.values-list li {
    display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 0.5rem;
}
.value-icon {
    margin-top: 0.25rem; padding: 0.5rem; background-color: rgba(249, 115, 22, 0.2);
    border-radius: 0.5rem; border: 1px solid var(--border-color); transition: background-color 0.3s ease; display: inline-flex;
}
.values-list li:hover .value-icon {
    background-color: rgba(249, 115, 22, 0.3);
}
.value-icon svg {
    width: 1.25rem; height: 1.25rem; color: var(--accent-orange-400);
}
.values-list li span { flex: 1; }

/* === TIMELINE SECTION === */
.timeline-wrapper {
    position: relative;
}
.timeline-line {
    position: absolute; left: 50%; transform: translateX(-50%);
    height: 100%; width: 2px;
    background: linear-gradient(to bottom, var(--accent-orange-500), var(--accent-orange-400), var(--accent-orange-500));
    display: none;
}
.timeline-item {
    position: relative; margin-bottom: 3rem;
}
.timeline-dot {
    position: absolute;
    top: 20rem; /* Posição vertical */
    width: var(--timeline-dot-size); height: var(--timeline-dot-size);
    background-color: var(--accent-orange-500); border-radius: 9999px;
    border: var(--timeline-dot-border) solid var(--bg-dark-secondary);
    box-shadow: 0 0 15px 5px var(--shadow-color-strong); display: none; z-index: 10;
}
.card-timeline {
     padding: 1.5rem; background: linear-gradient(to bottom right, var(--bg-card-alt-2-start), var(--bg-card-alt-end));
    text-align: left !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
}

.card-timeline svg { /* Ícone dentro do header da timeline */
     width: 1.5rem; height: 1.5rem; color: var(--accent-orange-400);
}

/* Desktop Timeline Layout */
@media (min-width: 768px) {
    .timeline-line, .timeline-dot { display: block; }

    /* Largura e posicionamento das caixas */
    .timeline-item {
        width: auto; /* Deixa a caixa crescer */
        max-width: calc(var(--timeline-box-target-width-percent) - (var(--timeline-total-gap-width) / 2)); /* Limita a largura */
        margin-bottom: 0;
    }

    .timeline-item-left {
        text-align: right;
        margin-right: calc(52% + var(--timeline-total-gap-width) / 2); /* Empurra para a direita da linha */
        margin-left: auto; /* Garante que fique à direita */
    }
    
    .timeline-item-right {
        text-align: left;
        margin-top: 3rem;
        margin-left: calc(52% + var(--timeline-total-gap-width) / 2); /* Empurra para a esquerda da linha */
        margin-right: auto; /* Garante que fique à esquerda */
    
    }
    /* Posicionamento horizontal da bolinha */
    .timeline-item-left .timeline-dot {
        /* Metade do tamanho da bolinha + gap */
        right: calc(-1.7 * (var(--timeline-dot-size) / 2 + var(--timeline-line-to-box-gap)));
        left: auto; /* Desativa o left: 50% herdado */
        transform: translateY(-50%); /* Apenas centraliza verticalmente */
    }
    .timeline-item-right .timeline-dot {
        /* Metade do tamanho da bolinha + gap */
        left: calc(-1.7 * (var(--timeline-dot-size) / 2 + var(--timeline-line-to-box-gap)));
        right: auto; /* Desativa o right */
        transform: translateY(-50%); /* Apenas centraliza verticalmente */
    }

    /* Alinhamento dos headers */
    .timeline-item-left .card-header { justify-content: flex-end; }
    .timeline-item-right .card-header { justify-content: flex-start; }
}


/* === RESULTS SECTION === */
.results-grid { margin-bottom: 4rem; }
.card-result {
    padding: 2.5rem; text-align: center;
    background: linear-gradient(to bottom right, var(--bg-card-alt-2-start), var(--bg-card-end));
}
.result-number {
    font-size: 3.75rem; font-weight: 700;
    background: linear-gradient(to right, var(--accent-orange-400), var(--accent-orange-600));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 0.75rem;
}
.result-label {
    font-size: 1.25rem; font-weight: 500; color: var(--text-gray-300);
}

.card-quote {
    text-align: center; border-color: var(--border-color-medium);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    background: linear-gradient(to bottom right, var(--bg-card-alt-end), rgb(10,20,38)); padding: 3rem;
}
.quote-icon { margin-bottom: 1.5rem; }
.quote-icon svg {
    width: 4rem; height: 4rem; color: var(--accent-orange-400); margin: 0 auto;
}
.card-quote blockquote {
    font-size: 1.5rem; color: var(--text-gray-300); font-style: italic; line-height: 1.75; margin-bottom: 1.5rem;
}
.card-quote cite {
    font-size: 1.125rem; font-weight: 600; color: var(--accent-orange-400); font-style: normal;
}

/* === CTA SECTION === */
.section-cta { text-align: center; }
.cta-background-glow {
    position: absolute; inset: 0; opacity: 0.1;
    background: radial-gradient(circle at 50% 50%, rgba(255, 140, 0, 0.2), transparent 60%);
}
.cta-content { position: relative; z-index: 10; }
.cta-icon {
    display: inline-block; padding: 1rem; background-color: rgba(249, 115, 22, 0.2);
    border-radius: 1rem; border: 1px solid var(--border-color-medium); margin-bottom: 1.5rem;
}
.cta-icon svg {
    width: 4rem; height: 4rem; color: var(--accent-orange-400); margin: 0 auto;
}
.cta-content h2 {
    font-size: 2.25rem; font-weight: 700; color: var(--text-white); margin-bottom: 1.5rem;
}
.cta-content p {
    font-size: 1.25rem; color: var(--text-gray-300); margin-bottom: 2.5rem; line-height: 1.75;
}

@media (min-width: 768px) {
    .cta-content h2 { font-size: 3rem; }
}

/* === ANIMATIONS (Fade In) === */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

[data-animate] {
    opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animate="fade-in"].is-visible { opacity: 1; }
[data-animate="fade-up"].is-visible { opacity: 1; transform: translateY(0); }
[data-animate="fade-up"] { transform: translateY(20px); }

/* =====================================================
   MENSAGEM DE SUCESSO
   ===================================================== */
.success-card {
    max-width: 768px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-color: rgba(30, 58, 138, 0.5);
    animation: fade-in-scale 0.5s ease-out forwards;
}

.success-icon-wrapper {
    width: 3rem;
    height: 3rem;
    background-color: rgba(37, 99, 235, 0.2);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.success-icon-wrapper .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--blue-400);
}

.success-text h3 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.success-text p {
    color: var(--slate-400);
    font-weight: 300;
}

/* === BOTÕES (Copiado da seção HERO para garantir consistência) === */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
    padding: 0.875rem 2rem; font-size: 1.125rem; border-radius: 0.375rem; text-decoration: none;
    transition: all 0.3s ease; cursor: pointer; line-height: 1.5; min-height: 3.5rem;
}
.button-primary {
    background-color: var(--accent-orange-500); color: var(--text-white); font-weight: 600;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1), 0 0 0 0 var(--shadow-color);
}
.button-primary:hover {
    background-color: var(--accent-orange-600);
    box-shadow: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
}
.button-outline {
    background-color: transparent; border: 2px solid var(--accent-orange-500); color: var(--accent-orange-400);
}
.button-outline:hover { background-color: var(--accent-orange-500); color: var(--text-white); }
.button-cta {
    background: linear-gradient(to right, var(--accent-orange-500), var(--accent-orange-600)); color: var(--text-white);
    font-weight: 700; font-size: 1.25rem; padding: 1rem 3rem; min-height: 4rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1), 0 0 0 0 var(--shadow-color);
}
.button-cta:hover {
    background: linear-gradient(to right, var(--accent-orange-600), var(--accent-orange-700));
    box-shadow: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color); transform: scale(1.05);
}
.button-cta svg { width: 1.5rem; height: 1.5rem; margin-right: 0.75rem; }

/* === HERO SECTION (Removido do código anterior, adicionando de volta) === */
.hero-section {
    position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: linear-gradient(to bottom right, rgb(4,10,20), rgb(8,18,35), rgb(6,15,30)); padding: 6rem 1.5rem 4rem; text-align: center;
}
.hero-background-glow {
    position: absolute; inset: 0; opacity: 0.2; background: radial-gradient(circle at 50% 50%, rgba(255, 140, 0, 0.3), transparent 70%); transition: background 0.1s linear;
}
.hero-content { position: relative; z-index: 10; max-width: 1024px; margin: 0 auto; }
.hero-badge {
    display: inline-block; margin-bottom: 1.5rem; padding: 0.5rem 1rem; background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(4px);
    border-radius: 9999px; border: 1px solid var(--border-color-medium);
}
.hero-badge span { color: var(--accent-orange-400); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.05em; }
.hero-content h1 { font-size: 3.75rem; font-weight: 700; color: var(--text-white); margin-bottom: 2rem; letter-spacing: -0.025em; }
.hero-description { font-size: 1.25rem; color: var(--text-gray-300); max-width: 56rem; margin: 0 auto 3rem; line-height: 1.75; }
.hero-buttons { display: flex; flex-direction: column; gap: 1rem; align-items: center; }

@media (min-width: 640px) { .hero-buttons { flex-direction: row; justify-content: center; } }