/* ============================================
   iGreen Energy · Seções de conteúdo
   Depende dos tokens definidos em styles.css
   ============================================ */

/* ============================================
   CENAS DE FUNDO
   Foto entra como <img> e não como background-image: assim ganha srcset,
   lazy loading e dimensão declarada, que o CSS sozinho não dá.
   A dessaturação aproxima o dourado das fotos do verde da marca, para a
   imagem parecer parte do site e não banco de imagem colado por cima.
   ============================================ */
.has-scene {
    position: relative;
    isolation: isolate;
}

.scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--scene-pos, center);
    filter: saturate(0.6) contrast(1.08);
}

/* Véu em diagonal, não uniforme: escuro onde o texto corre (esquerda) e aberto
   do outro lado, senão a cena vira uma mancha e a foto perde a razão de existir.
   As camadas se acumulam, então cada uma sozinha parece fraca de propósito. */
.scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(102deg,
            rgba(5, 8, 6, 0.94) 0%,
            rgba(5, 8, 6, 0.88) 34%,
            rgba(5, 8, 6, 0.62) 62%,
            rgba(5, 8, 6, 0.5) 100%),
        linear-gradient(180deg,
            rgba(5, 8, 6, 0.72) 0%,
            rgba(5, 8, 6, 0) 26%,
            rgba(5, 8, 6, 0) 68%,
            rgba(5, 8, 6, 0.9) 100%),
        radial-gradient(70% 60% at 75% 45%, rgba(0, 255, 136, 0.08), transparent 72%);
}

.has-scene > .container { position: relative; z-index: 1; }

/* Hero: a usina precisa ser reconhecível, então o véu abre no lado direito,
   onde não há texto. O escuro fica concentrado à esquerda e no rodapé. */
.scene-hero { --scene-pos: center 42%; }

.scene-hero::after {
    background:
        linear-gradient(100deg,
            rgba(5, 8, 6, 0.93) 0%,
            rgba(5, 8, 6, 0.84) 36%,
            rgba(5, 8, 6, 0.44) 66%,
            rgba(5, 8, 6, 0.26) 100%),
        linear-gradient(180deg,
            rgba(5, 8, 6, 0.78) 0%,
            rgba(5, 8, 6, 0.05) 24%,
            rgba(5, 8, 6, 0.05) 62%,
            rgba(5, 8, 6, 0.92) 100%),
        radial-gradient(65% 55% at 80% 42%, rgba(0, 255, 136, 0.11), transparent 74%);
}

/* Contato: a figura está cortada na borda esquerda da foto, então o véu abre
   nas laterais e fecha no meio, onde o formulário precisa de fundo calmo */
.scene-contato { --scene-pos: center 45%; }

.scene-contato::after {
    background:
        radial-gradient(52% 72% at 50% 52%, rgba(5, 8, 6, 0.92) 28%, rgba(5, 8, 6, 0.5) 72%, rgba(5, 8, 6, 0.22) 100%),
        linear-gradient(180deg, rgba(5, 8, 6, 0.8) 0%, rgba(5, 8, 6, 0.28) 28%, rgba(5, 8, 6, 0.45) 70%, rgba(5, 8, 6, 0.93) 100%),
        radial-gradient(90% 80% at 50% 0%, rgba(0, 255, 136, 0.08), transparent 65%);
}

/* ============================================
   CARTÕES COM BRILHO QUE SEGUE O PONTEIRO
   Usado por .feature-card, .solution-card, .license-price-card
   ============================================ */
.feature-card,
.solution-card,
.license-price-card {
    position: relative;
    isolation: isolate;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-soft);
}

.feature-card::before,
.solution-card::before,
.license-price-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--green-glow), transparent 65%);
    transition: opacity var(--dur) var(--ease-soft);
}

.feature-card:hover,
.solution-card:hover,
.license-price-card:hover {
    border-color: rgba(0, 255, 136, 0.28);
    background: var(--surface-strong);
}

.feature-card:hover::before,
.solution-card:hover::before,
.license-price-card:hover::before { opacity: 1; }

/* ============================================
   A ATIVIDADE
   ============================================ */
/* dois por linha em telas largas: quatro colunas deixavam a linha de texto
   com 25 caracteres, estreita demais para ler */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-card);
}

.feature-card { padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }

.feature-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.15rem;
    border-radius: var(--radius-md);
    background: var(--green-wash);
    border: 1px solid rgba(0, 255, 136, 0.18);
    color: var(--green);
}

.feature-card h3 {
    font-size: var(--text-h3);
    margin-bottom: 0.6rem;
}

.feature-card p {
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--text-muted);
}

/* Caixa de aviso neutra */
.callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
}

.callout iconify-icon { flex-shrink: 0; color: var(--green); margin-top: 2px; }

/* trava a linha em torno de 70 caracteres: acima disso o olho se perde */
.callout p {
    max-width: 70ch;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--text-muted);
}

.callout strong { color: var(--text); }

/* ============================================
   PASSO A PASSO
   ============================================ */
.steps {
    position: relative;
    /* fecha o empilhamento aqui: sem isto o trilho de progresso, que é um
       pseudo-elemento deste bloco, era pintado por cima dos marcadores */
    isolation: isolate;
    display: grid;
    gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
    max-width: 820px;
    counter-reset: step;
}

/* trilho vertical que preenche conforme a rolagem */
.steps::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 27px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--border);
}

.steps::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 27px;
    top: 12px;
    width: 2px;
    height: var(--steps-progress, 0%);
    background: linear-gradient(180deg, var(--green), var(--green-deep));
    box-shadow: 0 0 14px var(--green-glow);
    transition: height var(--dur) var(--ease-soft);
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: clamp(1rem, 0.8rem + 0.8vw, 1.75rem);
    align-items: start;
}

.step-marker {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-base);
    border: 1px solid var(--border-strong);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dim);
    transition: color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft),
                box-shadow var(--dur) var(--ease-soft);
}

.step.is-active .step-marker {
    color: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 0 6px var(--green-wash);
}

.step-body h3 {
    font-size: var(--text-h3);
    margin-bottom: 0.5rem;
    padding-top: 0.9rem;
}

.step-body p {
    max-width: 66ch;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-muted);
}

/* ============================================
   SOLUÇÕES
   ============================================ */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-card);
}

.solution-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
}

.solution-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    color: var(--green);
}

.solution-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.solution-card p {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.solution-tag {
    margin-top: auto;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pill);
    background: var(--green-wash);
    border: 1px solid rgba(0, 255, 136, 0.18);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--green-soft);
}

.solution-card-wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(115deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.02));
    border-color: rgba(0, 255, 136, 0.22);
}

.solution-card-wide .solution-icon { margin-bottom: 0; flex-shrink: 0; }
.solution-card-wide p { margin-bottom: 0; }

/* ============================================
   REMUNERAÇÃO
   ============================================ */
.pay-layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(1.5rem, 1.2rem + 1.6vw, 2.75rem);
    align-items: start;
}

.pay-list { display: grid; gap: 1.5rem; }

.pay-list li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 0.9rem;
    align-items: start;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.pay-list li:last-child { border-bottom: none; padding-bottom: 0; }

.pay-list iconify-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--green-wash);
    color: var(--green);
}

.pay-list h3 { font-size: var(--text-h3); margin-bottom: 0.4rem; }

.pay-list p {
    max-width: 66ch;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-muted);
}

.pay-warning {
    position: sticky;
    top: 96px;
    padding: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 194, 71, 0.28);
    background: linear-gradient(160deg, rgba(255, 194, 71, 0.08), rgba(255, 194, 71, 0.02));
}

.pay-warning-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.pay-warning-head iconify-icon { color: var(--amber); flex-shrink: 0; }
.pay-warning-head h3 { font-size: 1.05rem; }

.pay-warning ul { display: grid; gap: 0.85rem; }

.pay-warning li {
    position: relative;
    padding-left: 1.1rem;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-muted);
}

.pay-warning li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--amber);
}

/* ============================================
   NÍVEIS DE CARREIRA
   ============================================ */
.levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.level {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.4rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-soft);
}

.level:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 255, 136, 0.28);
}

.level-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--green);
}

.level-goal {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.levels-note {
    max-width: 70ch;
    margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    padding: 1.1rem 1.25rem;
    border-left: 2px solid var(--border-strong);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-dim);
}

/* ============================================
   LICENÇA
   ============================================ */
.license-layout {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: clamp(1.5rem, 1.2rem + 1.6vw, 3rem);
    align-items: start;
}

.license-includes h3 {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    color: var(--text);
}

.license-includes ul { display: grid; gap: 0.75rem; }

.license-includes li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 0.7rem;
    align-items: start;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-muted);
}

.license-includes iconify-icon { color: var(--green); margin-top: 3px; }

.license-excludes-title { margin-top: 2rem; }
.license-excludes iconify-icon { color: var(--danger); }

.license-price-card {
    padding: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
    text-align: center;
    border-color: rgba(0, 255, 136, 0.25);
    background: linear-gradient(170deg, rgba(0, 255, 136, 0.07), var(--surface));
}

.license-eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 1rem;
}

.license-price {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text);
}

.license-price small {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-dim);
}

.license-installment {
    margin-top: 0.75rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.license-renewal {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 1.25rem 0 1.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.license-renewal iconify-icon { color: var(--green); }

.license-legal {
    margin-top: 1.1rem;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text-dim);
}

/* ============================================
   PERFIL
   ============================================ */
.profile-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 1.2rem + 1.6vw, 3rem);
}

.profile-col {
    padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
}

.profile-title {
    font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
    margin-bottom: 1.4rem;
}

.profile-list { display: grid; gap: 0.9rem; }

.profile-list li {
    position: relative;
    padding-left: 1.9rem;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--text-muted);
}

.profile-list li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.profile-list-yes li::before { content: '✓'; color: var(--green); }
.profile-list-no li::before { content: '✕'; color: var(--danger); }

/* ============================================
   EXECUTIVO
   ============================================ */
.executive {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(1.75rem, 1.4rem + 2vw, 3.5rem);
    align-items: center;
    max-width: 900px;
}

.executive-photo {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(160deg, rgba(0, 255, 136, 0.12), var(--surface));
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.executive-photo img { width: 100%; height: 100%; object-fit: cover; }

.executive-photo-placeholder {
    text-align: center;
    color: var(--text-dim);
}

.executive-photo-placeholder iconify-icon {
    display: block;
    margin-inline: auto;
    margin-bottom: 0.6rem;
    color: var(--green);
}

.executive-photo-placeholder p { font-size: var(--text-sm); font-weight: 600; }

.executive-info h2 {
    font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
    margin-bottom: 0.35rem;
}

.executive-role {
    font-size: var(--text-sm);
    color: var(--green);
    margin-bottom: 1rem;
}

.executive-desc {
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
}

.executive-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ============================================
   FAQ
   ============================================ */
.faq-container {
    max-width: 800px;
    border-top: 1px solid var(--border);
}

.faq-item { border-bottom: 1px solid var(--border); }

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    padding: 1.35rem 0;
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: clamp(0.98rem, 0.94rem + 0.3vw, 1.1rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-soft);
}

.faq-question:hover { color: var(--green); }

.faq-question iconify-icon {
    flex-shrink: 0;
    color: var(--text-dim);
    transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-soft);
}

.faq-item.is-open .faq-question { color: var(--green); }
.faq-item.is-open .faq-question iconify-icon { transform: rotate(135deg); color: var(--green); }

/* grid-template-rows anima sem depender de altura calculada em JS */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease-out);
}

.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }

.faq-answer > div { overflow: hidden; }

.faq-answer p {
    padding-bottom: 1.4rem;
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--text-muted);
}

/* ============================================
   TRANSPARÊNCIA
   ============================================ */
.transparency {
    padding: clamp(3rem, 2.4rem + 3vw, 5rem) 0;
    background: var(--bg-alt);
    border-block: 1px solid var(--border);
}

.transparency-inner {
    max-width: 820px;
    margin-inline: auto;
    padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
}

.transparency h2 {
    font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
    margin-bottom: 1.1rem;
    color: var(--text);
}

.transparency p {
    max-width: 70ch;
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}

.transparency p:last-child { margin-bottom: 0; }
.transparency strong { color: var(--text); }

.transparency-owner {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: var(--text-xs) !important;
    color: var(--text-dim) !important;
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 1024px) {
    .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Em tela estreita o texto atravessa a largura inteira, inclusive a parte
   clara da foto. O véu em diagonal deixa de servir e vira uniforme: medido,
   o corpo pequeno caía para 3,1:1 sobre o céu. */
@media (max-width: 900px) {
    .scene::after,
    .scene-hero::after,
    .scene-contato::after {
        background:
            linear-gradient(180deg,
                rgba(5, 8, 6, 0.88) 0%,
                rgba(5, 8, 6, 0.79) 40%,
                rgba(5, 8, 6, 0.82) 70%,
                rgba(5, 8, 6, 0.94) 100%),
            radial-gradient(95% 55% at 62% 30%, rgba(0, 255, 136, 0.1), transparent 72%);
    }
}

@media (max-width: 900px) {
    .feature-grid,
    .solutions-grid,
    .pay-layout,
    .license-layout,
    .profile-split { grid-template-columns: 1fr; }

    .pay-warning { position: static; }

    .executive {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .executive-photo { width: 220px; }
    .executive-actions { justify-content: center; }
}

@media (max-width: 560px) {
    .steps::before, .steps::after { left: 21px; }
    .step { grid-template-columns: 44px 1fr; gap: 0.9rem; }
    .step-marker { width: 44px; height: 44px; font-size: 0.85rem; }
    .step-body h3 { padding-top: 0.55rem; }
    .solution-card-wide { flex-direction: column; align-items: flex-start; }
    .executive-actions { flex-direction: column; align-items: stretch; width: 100%; }
}