:root {
    /* Paleta de Cores AIBA */
    --color-principal: #007b4e; /* Destaque, Botões */
    --color-escuro: #001719;   /* Textos, Background Escuro */
    --color-verde-claro: #F2F9F7; /* Alterna com Branco */
    --color-paragrafo: #444;    /* Parágrafos Principais */
    --color-nota: #666;         /* Notas Menores */
    --color-branco: #FFF;

    /* Bordas e Sombras */
    --border-clara: #ffffff2e; /* Borda de elementos escuros */
    --border-escura: #a5bdb6;  /* Borda de elementos brancos */
    --shadow-padrao: 0 6px 24px rgba(0, 0, 0, 0.05);

    /* Tipografia Fluida (adapta-se ao tamanho da tela) */
    --font-size-h1: clamp(32px, 6vw, 50px);
    --font-size-h4: clamp(18px, 2.5vw, 22px);
    --font-size-p: clamp(14px, 1.5vw, 16px);
    --line-height-padrao: 1.6;
}

/* =========================================================
   QS-INTRO: PROTOCOLO 1% GLOBAL
   ========================================================= */

.qs-intro {
    background: linear-gradient(to bottom, var(--color-verde-claro) 0%, #FFF 100%);
    overflow: hidden;
}

/* 1. HEADER: O IMPACTO INICIAL */
.intro-head {
    max-width: 900px;
    margin-bottom: 80px;
}

.intro-title {
    font-size: var(--font-size-h1);
    font-weight: 850; /* Ultra Bold para autoridade */
    color: var(--color-escuro);
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 24px;
}

.intro-sub-lead {
    font-size: var(--font-size-lead);
    color: var(--color-text-lead);
    font-weight: 500;
    line-height: 1.5;
    max-width: 650px;
}

/* 2. GRID ASSIMÉTRICO (55/45) */
.intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Assimetria elegante */
    gap: 80px;
    align-items: flex-start;
}

/* 3. CONTEÚDO E TEXTO */
.intro-copy-main {
    font-size: var(--font-size-p);
    color: var(--color-paragrafo);
    line-height: var(--line-height-padrao);
    border-left: 2px solid var(--color-principal);
    padding-left: 32px;
    margin-bottom: 50px;
}

/* 4. PILLS (A EVOLUÇÃO DOS HIGHLIGHTS) */
.intro-pills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
}

.intro-pill-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    transition: var(--transition-smooth);
}

.intro-pill-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    border-color: var(--color-principal);
}

.pill-icon {
    width: 44px; height: 44px;
    background: var(--color-verde-claro);
    color: var(--color-principal);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.pill-label {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-escuro);
    margin-bottom: 4px;
}

.pill-desc {
    font-size: 13px;
    color: var(--color-nota);
    line-height: 1.4;
}

/* 5. VISUAL STACK (APPLE STYLE) */
.intro-visual {
    position: relative;
}

.visual-stack {
    position: relative;
    padding: 20px;
}

.visual-img {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    object-fit: cover;
    border-radius: 32px; /* Raio generoso */
    z-index: 1;
}

.visual-floating-card {
    position: absolute;
    bottom: 40px;
    left: -30px;
    background: #FFF;
    padding: 24px;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    z-index: 2;
    border: 1px solid rgba(0,0,0,0.03);
}

.card-number {
    font-size: 32px;
    font-weight: 900;
    color: var(--color-principal);
    line-height: 1;
}

.card-text {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-escuro);
    margin-top: 5px;
}

/* RESPONSIVIDADE */
@media (max-width: 1024px) {
    .intro-grid { grid-template-columns: 1fr; gap: 60px; }
    .intro-pills-grid { grid-template-columns: 1fr; }
    .visual-floating-card { left: 20px; }
}

/* =========================================================
   2. QS-HISTORY: EDITORIAL TIMELINE (APPLE STYLE)
   ========================================================= */

.qs-history {
    background-color: var(--color-branco);
    position: relative;
}

/* 1. CABEÇALHO REFINADO */
.history-head {
    margin-bottom: 80px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 40px;
}

.history-title {
    font-size: var(--font-size-h2);
    font-weight: 850;
    color: var(--color-escuro);
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}

.history-sub-lead {
    font-size: var(--font-size-lead);
    color: var(--color-text-lead);
    font-weight: 450;
    max-width: 600px;
}

/* 2. GRID EDITORIAL (Assimétrico 40/60) */
.history-editorial-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 100px;
    align-items: start;
}

/* 3. ÂNCORA VISUAL (YEAR DISPLAY) */
.anchor-sticky {
    position: sticky;
    top: 120px; /* Mantém o ano visível durante o scroll */
}

.history-year-display {
    display: block;
    font-size: clamp(80px, 12vw, 160px);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.06em;
    color: var(--color-verde-claro); /* Tom sutil para profundidade */
    margin-left: -8px;
    margin-bottom: 32px;
}

.founding-badge {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-left: 10px;
}

.qs-history .badge-dot {
    width: 12px; height: 12px;
    background: var(--color-principal);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 0 6px var(--color-verde-claro);
}

.founding-text {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-escuro);
    line-height: 1.4;
}

/* 4. CONTEÚDO NARRATIVO */
.narrative-wrapper {
    max-width: 620px;
}

.narrative-wrapper p {
    font-size: var(--font-size-p);
    color: var(--color-paragrafo);
    line-height: var(--line-height-padrao);
    margin-bottom: 2em;
}

/* Toque de mestre: Letra capitular no primeiro parágrafo */
.narrative-wrapper p:first-of-type::first-letter {
    float: left;
    font-size: 52px;
    font-weight: 900;
    line-height: 0.8;
    margin-right: 12px;
    margin-top: 4px;
    color: var(--color-principal);
}

/* RESPONSIVIDADE */
@media (max-width: 992px) {
    .history-editorial-grid { grid-template-columns: 1fr; gap: 60px; }
    .history-year-display { font-size: 100px; margin-bottom: 20px; }
    .anchor-sticky { position: static; }
}

/* =========================================================
   QS-PURPOSE: PROTOCOLO 1% GLOBAL (HIGH-END REFINEMENT)
   ========================================================= */

.qs-purpose {
    background: linear-gradient(180deg, var(--color-verde-claro) 0%, #FFF 100%);
    position: relative;
    overflow: hidden;
}

/* 1. HEADER AUTORITÁRIO */
.qs-purpose .qs-head {
    margin-bottom: 80px;
}

.qs-purpose .qs-title {
    font-size: var(--font-size-h1);
    font-weight: 850; /* Máximo peso para impacto editorial */
    color: var(--color-escuro);
    letter-spacing: -0.04em;
    margin-bottom: 24px;
}

.qs-purpose .qs-sub-lead {
    font-size: var(--font-size-lead);
    color: var(--color-text-lead);
    max-width: 700px;
    line-height: var(--line-height-padrao);
}

/* 2. GRID DE ALTA PRECISÃO */
.purpose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    list-style: none;
    padding: 0;
}

/* 3. FEATURE CARD: THE SURFACE */
.feature-card-premium {
    background: var(--color-branco);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 24px; /* Raio Apple/iOS */
    padding: 48px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 320px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card-premium:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 23, 25, 0.12);
    border-color: var(--color-principal);
}

/* 4. SELO TÉCNICO (ÍNDICE) */
.card-technical-label {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    opacity: 0.4;
}

.step-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--color-nota);
}

.step-number {
    font-family: 'Inter', monospace; /* Feeling técnico */
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    color: var(--color-principal);
}

/* 5. ICONOGRAFIA E CONTEÚDO */
.feat-ico-box {
    width: 56px; height: 56px;
    background: var(--color-verde-claro);
    color: var(--color-principal);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 32px;
    transition: var(--transition-smooth);
}

.feat-ico-box svg {
    width: 26px;
    height: 26px;
    stroke: var(--color-principal); /* Garante a cor da marca */
    stroke-width: 1.8; /* Espessura "Premium" para legibilidade */
    transition: transform 0.5s var(--bezier-premium);
}

.feature-card-premium:hover .feat-ico-box svg {
    transform: scale(1.15) rotate(-5deg); /* Micro-interação orgânica */
    stroke: var(--color-branco); /* No hover, o ícone inverte para branco se o box preencher */
}

.feature-card-premium:hover .feat-ico-box {
    background: var(--color-principal);
    color: #FFF;
    transform: rotate(-10deg);
}

.feat-title {
    font-size: var(--font-size-h3);
    font-weight: 800;
    color: var(--color-escuro);
    margin-bottom: 12px;
}

.feat-desc-technical {
    font-size: var(--font-size-p);
    color: var(--color-text-card);
    line-height: var(--line-height-padrao);
}

/* RESPONSIVIDADE RIGOROSA */
@media (max-width: 1024px) {
    .purpose-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .purpose-grid { grid-template-columns: 1fr; }
    .feature-card-premium { padding: 40px 32px; min-height: auto; }
}

/* =========================================================
   9. SEÇÃO MVV (QS-MVV) - PROTOCOLO 1% GLOBAL
   Foco: Profundidade, Contraste e Leitura Editorial
   ========================================================= */

.qs-mvv {
    background-color: var(--color-escuro);
    /* Gradiente radial sutil para evitar o "preto flat" e dar volume */
    background: radial-gradient(circle at top center, #002a2e 0%, var(--color-escuro) 100%);
    color: var(--color-branco);
    padding: var(--spacing-section) 0;
    position: relative;
    overflow: hidden;
}

/* 1. CABEÇALHO DE ALTO IMPACTO */
.qs-mvv .section-head--center {
    margin-bottom: 80px;
}

.qs-mvv .mvv-title {
    color: var(--color-branco) !important;
    font-size: var(--font-size-h1);
    font-weight: 850; /* Ultra Bold para autoridade institucional */
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 16px;
}

/* 2. O PAINEL FOCADO (STACK) */
.mvv-stack {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 900px; /* Largura controlada para conforto ocular */
    margin: 0 auto;
}

/* 3. O ITEM MVV (HORIZONTAL ROW) */
.mvv-item {
    display: grid;
    grid-template-columns: 80px 1fr; /* Espaço definido para o ícone */
    gap: 40px;
    align-items: start;
    padding: 60px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Borda ultra-sutil */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-interação de respiro no hover */
.mvv-item:hover {
    transform: translateX(10px);
}

.mvv-stack .mvv-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 4. ICONOGRAFIA PREMIUM */
.mvv-ico {
    width: 64px;
    height: 64px;
    background: rgba(0, 123, 78, 0.1); /* Fundo sutil com a cor da marca */
    color: var(--color-principal);
    border: 1px solid rgba(0, 123, 78, 0.2);
    border-radius: 16px; /* Squircle radius */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.mvv-ico svg {
    width: 28px !important;
    height: 28px !important;
    stroke: currentColor;
    stroke-width: 2;
}

/* Hover do ícone: Inversão de cores Apple Style */
.mvv-item:hover .mvv-ico {
    background: var(--color-principal);
    color: var(--color-branco);
    box-shadow: 0 10px 25px rgba(0, 123, 78, 0.3);
    transform: rotate(-5deg) scale(1.1);
}

/* 5. CONTEÚDO (HIERARQUIA DE TEXTO) */
.mvv-content {
    display: flex;
    flex-direction: column;
}

.mvv-item-title {
    color: var(--color-branco);
    font-size: var(--font-size-h3); /* Aumento para destaque */
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 16px 0;
}

.mvv-item-desc {
    color: rgba(255, 255, 255, 0.75); /* Opacidade para elegância e hierarquia */
    font-size: var(--font-size-p);
    line-height: var(--line-height-padrao);
    margin: 0;
    max-width: 720px;
}

/* 6. RESPONSIVIDADE RIGOROSA */
@media (max-width: 992px) {
    .qs-mvv { padding: 80px 0; }
    .mvv-item { padding: 40px 0; }
}

@media (max-width: 768px) {
    .mvv-item {
        grid-template-columns: 1fr; /* Stack vertical em mobile */
        gap: 24px;
        text-align: left;
    }
    
    .mvv-ico {
        width: 52px;
        height: 52px;
    }
}

/* ==========================================================================
   MAPA INTERATIVO AIBA – V5 (GLOBAL 1% STANDARD)
   ========================================================================== */

:root {
    --map-bg-canvas: #FFFFFF;
    --map-bg-neutral: #F2F2F7;       /* Cinza Apple para áreas inativas */
    --map-bg-territory: #455A50;     /* Verde Profundo (Base AIBA) */
    --map-active-glow: rgba(0, 123, 78, 0.3);
    
    --ease-ios: cubic-bezier(0.25, 1, 0.5, 1);
    --bezier-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

.qs-map-section {
    background-color: var(--map-bg-canvas);
    padding: var(--spacing-section) 0;
    overflow: hidden;
}

/* Tipografia Editorial */
.qs-map-header .display-title {
    font-size: var(--font-size-h2);
    font-weight: 850;
    letter-spacing: -0.04em;
    color: var(--color-escuro);
    line-height: 1.1;
    margin-bottom: 24px;
}

.qs-map-header .body-text {
    font-size: var(--font-size-lead);
    color: var(--color-text-lead);
    line-height: var(--line-height-padrao);
}

.city-selector-panel {
    position: relative;
    height: 480px;
    margin-top: 40px;
    border-radius: 24px;
    background: #F9F9FB;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.list-fade-mask {
    position: absolute;
    left: 0; right: 0;
    height: 80px;
    z-index: 10;
    pointer-events: none;
}
.list-fade-mask.top { top: 0; background: linear-gradient(to bottom, #F9F9FB 20%, transparent); }
.list-fade-mask.bottom { bottom: 0; background: linear-gradient(to top, #F9F9FB 20%, transparent); }

.city-list {
    list-style: none;
    padding: 40px 10px;
    margin: 0;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}
.city-list::-webkit-scrollbar { display: none; }

.city-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 14px 24px;
    background: transparent;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.city-trigger:hover { background: #FFF; transform: translateX(5px); }

.city-item.is-active .city-trigger {
    background: #FFF;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transform: translateX(10px);
}

.city-trigger .status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background-color: #D1D1D6;
    margin-right: 16px;
    transition: all 0.4s var(--ease-ios);
}

.city-item.is-active .status-dot {
    background-color: var(--color-principal);
    box-shadow: 0 0 0 4px var(--map-active-glow);
    transform: scale(1.3);
}

.city-item.is-active .label {
    color: var(--color-principal);
    font-weight: 800;
}

.map-stage-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.9;
    background: radial-gradient(circle at center, rgba(0, 123, 78, 0.04) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.svg-interaction-layer svg path {
    fill: var(--map-bg-neutral);
    stroke: #FFFFFF;
    stroke-width: 1.2px;
    vector-effect: non-scaling-stroke;

    /* Prepara a GPU para a animação, garantindo 60fps */
    will-change: fill, transform, filter;
    
    /* Transição suave para todas as propriedades animáveis */
    transition: all 0.6s var(--bezier-premium);
    
    /* Ponto de origem para a escala (centro do path) */
    transform-origin: center;
}

/* Áreas de Atuação (Destaque Permanente) */
.svg-interaction-layer svg path.is-territory {
    fill: #DDE4E1;
    cursor: pointer;

    /* Estado inicial sem transformação */
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* Focus Mode: Quando uma cidade é selecionada */
.map-stage-wrapper.has-selection svg path:not(.is-active) {
    opacity: 0.3;
}

.svg-interaction-layer svg path.is-territory:hover,
.svg-interaction-layer svg path.is-active {
    /* 1. Mudança de Cor (Vibrante) */
    fill: var(--color-principal) !important;
    
    /* 2. Micro-movimento de "Levantar" (Elevação) */
    transform: translateY(-3px) scale(1.01);
    
    /* 3. Sombra de Profundidade (Drop-shadow segue o contorno do SVG) */
    /* Sombra suave e difusa para dar volume */
    filter: drop-shadow(0 12px 24px rgba(0, 123, 78, 0.3));
    
    /* Garante que o elemento flutuante fique por cima dos vizinhos */
    z-index: 50; 
    opacity: 1 !important;
}

/* Glass Tooltip (Fixed follow-mouse) */
.glass-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: rgba(29, 29, 31, 0.85);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px);
    color: #FFF;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s var(--ease-ios);
}

.glass-tooltip.is-visible { opacity: 1; transform: scale(1); }

/* HUD Legend (Bottom-Right Panel) */
.map-hud-legend {
    position: absolute;
    bottom: 30px; right: 30px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    z-index: 100;
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.hud-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
}
.hud-dot.type-sede { background: var(--color-principal); box-shadow: 0 0 0 4px var(--map-active-glow); }
.hud-dot.type-bfs { background: var(--color-escuro); }

.hud-role { font-size: 10px; text-transform: uppercase; font-weight: 800; color: var(--color-nota); }
.hud-city { font-size: 14px; font-weight: 700; color: var(--color-escuro); }

@media (max-width: 991px) {
    .qs-map-section .row { flex-direction: column-reverse; }
    
    .map-hud-legend {
        position: relative;
        bottom: 0; right: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 30px;
        padding: 15px;
    }
    
    .map-stage-wrapper { aspect-ratio: 1 / 1.1; }
    
    .city-selector-panel { height: 320px; }
}

/* ==========================================================================
   CAMADA DE MARCADORES (DOTS SOBRE O MAPA)
   ========================================================================== */

.map-markers-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; /* Permite que o clique passe para o SVG abaixo se necessário */
    z-index: 40; /* Acima do SVG, abaixo do Tooltip */
}

.map-dot-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    border: 2px solid var(--color-principal);
    border-radius: 50%;
    transform: translate(-50%, -50%); /* Centralização exata na coordenada */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto; /* Reabilita o clique no ponto específico */
    transition: all 0.4s var(--ease-ios);
}

/* Diferenciação de tipos por cor (Sede vs BFS) */
.map-dot-marker.type-bfs {
    border-color: var(--color-escuro);
}

/* Estado Ativo / Hover */
.map-dot-marker:hover,
.map-dot-marker.is-active {
    background: var(--color-principal);
    border-color: #FFFFFF;
    transform: translate(-50%, -50%) scale(1.6);
    box-shadow: 0 8px 20px rgba(0, 123, 78, 0.4);
    z-index: 50;
}

.map-dot-marker.type-bfs.is-active {
    background: var(--color-escuro);
}

/* Efeito de Pulsação (The Pulse) */
.pulse-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid var(--color-principal);
    animation: markerPulse 2.5s infinite;
    pointer-events: none;
}

.map-dot-marker.type-bfs .pulse-ring {
    border-color: var(--color-escuro);
}

@keyframes markerPulse {
    0% { width: 100%; height: 100%; opacity: 0.8; }
    100% { width: 350%; height: 350%; opacity: 0; }
}

/* Barreiras (Sede) */
.map-dot-marker[data-target="barreiras"] {
    top: 36%; 
    left: 17.2%; /* Ajustado para a esquerda */
}

/* LEM (Complexo BFS) */
.map-dot-marker[data-target="luis-eduardo-magalhaes"] {
    top: 38%; 
    left: 11.2%; /* Ajustado para a esquerda */
}

/* =========================================================
   QS-VALUES: FROSTED GLASS GRID (1% STANDARD)
   ========================================================= */

.qs-values {
    background-image: url('URL_DA_IMAGEM_PREMIUM.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    background-color: var(--color-escuro);
}

/* Overlay para garantir legibilidade */
.qs-values::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 23, 25, 0.92) 0%, rgba(0, 23, 25, 0.75) 100%);
    z-index: 1;
}

.qs-values .container { position: relative; z-index: 5; }

/* 1. HEADER (STYLING WHITE) */
.qs-title-white {
    color: #FFF !important;
    font-size: var(--font-size-h1);
    font-weight: 850;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
}

.qs-sub-lead-white {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-lead);
    margin: 0 auto 80px;
}

/* 2. GRID LADO A LADO (4 COLUNAS) */
.vals-grid-premium {
    display: grid;
    /* Divide em 4 colunas iguais no desktop */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* 3. CARD FROSTED GLASS */
.val-card-frosted {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda de luz */
    border-radius: 24px;
    position: relative;
    padding: 48px 40px 60px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.6s var(--bezier-premium);
    will-change: transform, backdrop-filter;
}

.val-card-frosted:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-12px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}

/* 4. VISUAL TOP (ÍCONE + ORDEM) */
.val-visual-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.val-icon-lens {
    width: 52px; height: 52px;
    background: rgba(0, 123, 78, 0.2);
    color: var(--color-principal);
    border: 1px solid rgba(0, 123, 78, 0.3);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.5s var(--bezier-premium);
}

.val-card-frosted:hover .val-icon-lens {
    background: var(--color-principal);
    color: #FFF;
    transform: scale(1.1) rotate(-5deg);
}

.val-icon-lens svg {
    width: 26px;
    height: 26px;
    stroke: var(--color-principal);
    stroke-width: 1.5; /* Traço leve para elegância sobre o vidro */
    filter: drop-shadow(0 0 8px rgba(0, 123, 78, 0.2));
    transition: all 0.5s var(--bezier-premium);
}

.val-card-frosted:hover .val-icon-lens svg {
    stroke: #FFF;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
    transform: scale(1.1);
}

.val-order {
    font-family: 'Inter', monospace;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.1em;
}

/* 5. TEXTO E INTERAÇÃO */
.val-title-premium {
    font-size: var(--font-size-h4);
    font-weight: 800;
    color: #FFF;
    margin-bottom: 12px;
}

.val-desc-soft {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

.val-interaction-bar {
    width: 0;
    height: 4px;
    background: var(--color-principal);
    margin-top: auto;
    padding-top: 0; /* Ajuste para não quebrar o flex */
    border-radius: 2px 2px 0 0;

    /* Transição ultra suave */
    transition: width 0.6s var(--bezier-premium);
    z-index: 10;
}

.val-card-frosted:hover .val-interaction-bar {
    width: 100%;
}

/* RESPONSIVIDADE */
@media (max-width: 1200px) {
    .vals-grid-premium { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .vals-grid-premium { grid-template-columns: 1fr; }
    .val-card-frosted { padding: 32px; }
}

/* =========================================================
   QS-NUMBERS: THE SHOW OF FORCE (GLOBAL 1% STANDARD)
   Refinação: Sombras Profundas, Tabular Nums & Precision UI
   ========================================================= */

.qs-numbers {
    background-color: var(--color-verde-claro);
    background: radial-gradient(circle at center, #fafffd 0%, var(--color-verde-claro) 100%);
    position: relative;
    overflow: hidden;
}

/* 1. HEADER EDITORIAL */
.qs-numbers .qs-head {
    margin-bottom: 80px;
}

.qs-title-impact {
    font-size: var(--font-size-h1);
    font-weight: 850;
    color: var(--color-escuro);
    letter-spacing: -0.05em; /* Kerning fechado para autoridade */
    line-height: 1.05;
    margin-bottom: 24px;
}

.qs-title-impact .qs-sub-lead {
    font-size: var(--font-size-lead);
}

/* 2. GRID DE ALTA FIDELIDADE */
.numbers-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 3. THE DATA MONOLITH (O CARD) */
.number-card-premium {
    background: var(--color-branco);
    /* Borda quase invisível: assinatura Stripe */
    border: 1px solid rgba(0, 23, 25, 0.03);
    border-radius: 32px;
    padding: 80px 48px;
    text-align: center;
    position: relative;
    
    /* Sombra de multi-camada (Soft Depth) */
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.02),
        0 2px 4px -1px rgba(0, 0, 0, 0.01);
        
    transition: all 0.8s var(--bezier-premium);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Hardware Acceleration */
    will-change: transform, box-shadow;
}

.number-card-premium:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(0, 123, 78, 0.15);
    /* Shadow Bloom: O card parece emitir luz no hover */
    box-shadow: 
        0 30px 60px -12px rgba(0, 23, 25, 0.12),
        0 18px 36px -18px rgba(0, 0, 0, 0.05);
}

/* 4. THE HERO NUMBER (PRECISION TYPOGRAPHY) */
.number-hero {
    /* tabular-nums: impede que o card "balance" durante a contagem JS */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    
    font-size: clamp(54px, 7vw, 84px);
    font-weight: 900;
    color: var(--color-principal);
    letter-spacing: -0.06em;
    line-height: 0.9;
    margin-bottom: 40px;
    display: inline-flex;
    align-items: baseline;
    position: relative;
}

/* Barra de Performance (The Pulse) */
.num-indicator-bar {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 4px;
    background: var(--color-principal);
    border-radius: 10px;
    opacity: 0.2;
    transition: all 0.6s var(--bezier-premium);
}

.number-card-premium:hover .num-indicator-bar {
    width: 64px;
    opacity: 1;
    box-shadow: 0 0 15px rgba(0, 123, 78, 0.3);
}

/* 5. THE LEGEND (CAPTION) */
.number-caption {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-nota);
    text-transform: uppercase;
    letter-spacing: 0.12em; /* Tracking alto para look técnico */
    line-height: 1.5;
    max-width: 220px;
    margin: 0;
    transition: color 0.4s ease;
}

.number-card-premium:hover .number-caption {
    color: var(--color-escuro);
}

/* 6. RESPONSIVIDADE RIGOROSA */
@media (max-width: 1024px) {
    .numbers-grid-premium { gap: 20px; }
    .number-card-premium { padding: 60px 32px; }
}

@media (max-width: 768px) {
    .numbers-grid-premium { grid-template-columns: 1fr; }
    .number-card-premium { padding: 50px 32px; border-radius: 24px; }
    .number-hero { font-size: 64px; }
}

/* =========================================================
   COMPONENTES: BOTÕES AIBA (GLOBAL 1% STANDARD)
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 36px;
    
    font-size: 15px; /* Tamanho UI Global */
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
    
    border-radius: 14px; /* Squircle feeling */
    cursor: pointer;
    transition: all 0.6s var(--bezier-premium);
    position: relative;
    overflow: hidden;
}

/* --- BOTÃO PRIMÁRIO (THE POWER ACTION) --- */
.btn--primary {
    background-color: var(--color-principal);
    color: var(--color-branco);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 123, 78, 0.2);
}

.btn--primary:hover {
    transform: translateY(-4px) scale(1.02);
    background-color: #008f5a; /* Verde levemente mais vibrante */
    box-shadow: 0 20px 40px rgba(0, 123, 78, 0.3);
}

.btn--primary:active {
    transform: translateY(-1px) scale(0.98);
}

/* Ícone com movimento de escape */
.btn--primary svg {
    transition: transform 0.5s var(--bezier-premium);
}

.btn--primary:hover svg {
    transform: translateX(5px) scale(1.1);
}

/* --- LINK SECUNDÁRIO (MINIMALIST) --- */
.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-branco);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    opacity: 0.7;
    transition: all 0.4s var(--bezier-premium);
}

.cta-link:hover {
    opacity: 1;
    transform: translateX(5px);
}

.cta-link svg {
    transition: transform 0.4s var(--bezier-premium);
}

.cta-link:hover svg {
    transform: translate(2px, -2px);
}

/* =========================================================
   QS-CTA: THE MAGNETIC FINALE
   ========================================================= */

.qs-cta {
    padding: 140px 0;
    position: relative;
    background-color: var(--color-escuro);
    overflow: hidden;
}

/* Tratamento de Imagem de Fundo (Se houver) */
.qs-cta.cta--image {
    background-image: linear-gradient(rgba(0, 23, 25, 0.85), rgba(0, 23, 25, 0.85)), var(--cta-bg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efeito Premium */
}

/* 1. O CARD MAGNÉTICO (CONTAINER) */
.cta-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    padding: 80px 60px;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
}

/* 2. TEXTO E HIERARQUIA */
.cta-copy {
    max-width: 600px;
}

.cta-title {
    font-size: var(--font-size-h1);
    font-weight: 850;
    color: var(--color-branco);
    letter-spacing: -0.05em;
    line-height: 1.05;
    margin-bottom: 20px;
}

.cta-sub {
    font-size: var(--font-size-lead);
    color: rgba(255, 255, 255, 0.7);
    line-height: var(--line-height-padrao);
}

/* 3. AÇÕES (ALIGNMENT & RHYTHM) */
.cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o conjunto de ações */
    gap: 24px;
    flex-shrink: 0;
}

/* 4. RESPONSIVIDADE (ZERO LOSS) */
@media (max-width: 1100px) {
    .cta-card {
        flex-direction: column;
        text-align: center;
        padding: 60px 40px;
    }
    .cta-actions {
        width: 100%;
    }
    .btn.cta-btn {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .qs-cta { padding: 80px 0; }
    .cta-card { border-radius: 30px; padding: 50px 24px; }
}