/* =================================================================
   DOBRA 2 — HERO VSL  (claro)
================================================================= */
.hero-vsl {
    background: var(--branco-suave);
    padding: 90px 60px;
    content-visibility: auto;
}

.hero-vsl__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* --- player --- */
.vsl-player-wrap {
    width: 100%;
}

.vsl-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--azul-profundo);
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(11, 28, 46, 0.18);
}

.vsl-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.vsl-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.vsl-play::before {
    content: '';
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(11, 28, 46, 0.82);
    border: 2.5px solid var(--dourado-lunar);
    position: absolute;
    transition: transform 0.2s ease;
}

.vsl-play::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 20px;
    border-color: transparent transparent transparent var(--dourado-lunar);
    position: absolute;
    margin-left: 4px;
    z-index: 3;
}

.vsl-player:hover .vsl-play::before {
    transform: scale(1.08);
}

.vsl-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    border: none;
}

.vsl-player.is-playing .vsl-thumb,
.vsl-player.is-playing .vsl-play {
    opacity: 0;
    pointer-events: none;
}

.vsl-player.is-playing .vsl-iframe {
    opacity: 1;
    pointer-events: all;
}

.hero-vsl__legenda {
    margin-top: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--azul-claro);
    opacity: 0.7;
    text-align: center;
}

/* --- conteúdo direita --- */
.hero-vsl__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-vsl__intro {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(11, 28, 46, 0.65);
    border-left: 3px solid var(--dourado-lunar);
    padding-left: 20px;
}

.hero-vsl__pergunta {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--azul-profundo);
}

.hero-vsl__pergunta strong {
    font-weight: 900;
    color: var(--azul-claro);
}

.hero-vsl__chamada {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--azul-claro);
}

.hero-vsl__cta {
    display: inline-block;
    align-self: flex-start;
    background: var(--azul-profundo);
    color: var(--dourado-lunar);
    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 18px 36px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-vsl__cta:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

/* =================================================================
   DOBRA 3 — AS TRÊS VERDADES (Com Elementos Visuais em CSS)
================================================================= */
.consciencia-lunar {
    position: relative;
    /* Mistura do fundo escuro com um gradiente radial (efeito névoa/glow lunar) e uma textura sutil */
    background:
        radial-gradient(circle at 50% -20%, rgba(44, 99, 129, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, #12283f 0%, #0b1c2e 90%),
        /* Gera um ruído/poeira cósmica sutil no fundo usando gradiente repetitivo */
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.003) 0px, rgba(255, 255, 255, 0.003) 2px, transparent 2px, transparent 4px);
    background-blend-mode: normal, normal, overlay;
    padding: 120px 40px;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 1px 700px;
}

/* Pseudo-elemento para criar um arco de lua ou brilho linear no topo da seção */
.consciencia-lunar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(247, 224, 180, 0.15), transparent);
    pointer-events: none;
}

.consciencia-lunar__container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 64px;
    position: relative;
    z-index: 2;
    /* Garante que o conteúdo fique acima de qualquer efeito de fundo */
}

/* --- Engenharia do Grid --- */
.consciencia-lunar__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.lunar-col__icone {
    width: 32px;
    height: 32px;
    color: var(--azul-claro);
    margin-bottom: 8px;
    /* Afastamento sutil antes do título */
    transition: color 0.3s ease;
}

.lunar-col:hover .lunar-col__icone {
    color: var(--dourado-lunar);
    /* O ícone acende em dourado quando passa o mouse no card */
}

.lunar-col__icone svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Coluna Base --- */
.lunar-col {
    background: rgba(11, 28, 46, 0.4);
    /* Fundo ligeiramente mais escuro para destacar do degradê do fundo */
    backdrop-filter: blur(8px);
    /* Efeito sutil de vidro fosco */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(245, 245, 245, 0.04);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    border-radius: 4px;
    /* Casando com o raio do player da VSL */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.lunar-col:hover {
    transform: translateY(-4px);
    border-color: rgba(44, 99, 129, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.lunar-col__titulo {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--branco-suave);
    letter-spacing: -0.3px;
}

.lunar-col__conclusao p {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(245, 245, 245, 0.6);
}

.lunar-col__destaque {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dourado-lunar) !important;
}

/* --- Customização Coluna 1 (Sintomas) --- */
.lunar-col__lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lunar-col__lista li {
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(245, 245, 245, 0.75);
    position: relative;
    padding-left: 20px;
}

/* Trocando a bolinha por um traço minimalista elegante */
.lunar-col__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 1px;
    background: var(--azul-claro);
}

/* --- Customização Coluna 2 (Destaque do Diagnóstico) --- */
.lunar-col--diagnostico {
    background: rgba(247, 224, 180, 0.01);
    border: 1px solid rgba(247, 224, 180, 0.12);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25);
}

.lunar-col--diagnostico:hover {
    border-color: rgba(247, 224, 180, 0.3);
}

.lunar-col__perfis {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.perfil-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.perfil-item__role {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--dourado-lunar);
}

.perfil-item__texto {
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(245, 245, 245, 0.85);
}

/* --- Customização Coluna 3 (Mecanismo) --- */
.lunar-col__fatos {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(245, 245, 245, 0.8);
}

.lunar-col__conclusao-final {
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(245, 245, 245, 0.7);
    border-top: 1px solid rgba(245, 245, 245, 0.05);
    padding-top: 20px;
}

.lunar-col__conclusao-final strong {
    font-weight: 700;
    color: var(--branco-suave);
}

/* --- Botão CTA --- */
.consciencia-lunar__action {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.consciencia-lunar__cta {
    display: inline-block;
    background: var(--dourado-lunar);
    color: var(--azul-profundo);
    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 20px 44px;
    border-radius: 4px;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.consciencia-lunar__cta:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(247, 224, 180, 0.2);
}

/* =================================================================
   DOBRA 4 — O QUE É E O QUE VOCÊ DESCOBRE (VERSÃO LAPIDADA)
================================================================= */
.detalhes-produto {
    background-color: #fbfaf7;
    /* Off-white premium mais quente */
    background-image: radial-gradient(circle at 50% 50%, #fbfaf7 0%, #f5f2eb 100%);
    padding: 140px 40px;
    position: relative;
    overflow: hidden;
}

.detalhes-produto__container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: relative;
    z-index: 2;
}

.detalhes-produto__grid-principal {
    display: grid;
    /* 3 colunas: Bloco Esquerdo, Divisor Sutil, Bloco Direito */
    grid-template-columns: 1fr 100px 1.2fr;
    gap: 20px;
    align-items: stretch;
}

.detalhes-col__tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #c4a468;
    /* Dourado de contraste */
    margin-bottom: 16px;
}

.detalhes-produto__titulo {
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--azul-profundo);
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

.detalhes-produto__sub {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(11, 28, 46, 0.7);
    margin-bottom: 48px;
}

/* --- Linha e Elemento Central --- */
.detalhes-produto__divisor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.linha-vertical {
    width: 1px;
    flex-grow: 1;
    background: linear-gradient(to bottom, transparent, rgba(11, 28, 46, 0.1) 30%, rgba(11, 28, 46, 0.1) 70%, transparent);
}

.emblema-lunar {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(196, 164, 104, 0.3);
    border-radius: 50%;
    margin: 20px 0;
    position: relative;
    background: transparent;
}

/* Pequeno ponto interno simulando o centro de um mapa astrológico */
.emblema-lunar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background-color: #c4a468;
    border-radius: 50%;
}

/* --- Pilares da Esquerda --- */
.pilar-lista {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-bottom: 40px;
}

.pilar-item-mapa {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pilar-item-mapa__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pilar-icon {
    width: 20px;
    height: 20px;
    color: #c4a468;
}

.pilar-item-mapa__nome {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--azul-profundo);
    letter-spacing: -0.2px;
}

.pilar-item-mapa__desc {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(11, 28, 46, 0.65);
    padding-left: 32px;
    /* Alinha perfeitamente abaixo do texto do título */
}

.detalhes-produto__conclusao {
    font-size: 1rem;
    font-weight: 600;
    color: var(--azul-profundo);
    border-top: 1px dashed rgba(11, 28, 46, 0.1);
    padding-top: 24px;
}

/* --- Grid de Descobertas (Direita) --- */
.descobertas-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.checklist-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.checklist-item {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--azul-profundo);
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.6);
    padding: 14px 18px;
    border-radius: 6px;
    border: 1px solid rgba(11, 28, 46, 0.03);
    box-shadow: 0 4px 15px rgba(11, 28, 46, 0.01);
}

.item-icon {
    width: 18px;
    height: 18px;
    color: var(--azul-profundo);
    opacity: 0.7;
    flex-shrink: 0;
}

/* --- Botão CTA --- */
.detalhes-produto__action {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.detalhes-produto__cta {
    display: inline-block;
    background: var(--azul-profundo);
    color: #fbfaf7;
    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 22px 50px;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(11, 28, 46, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.detalhes-produto__cta:hover {
    background-color: #1a3959;
    transform: translateY(-2px);
}

/* =================================================================
   MICROINTERAÇÕES — DOBRA 4 (UPGRADE VISUAL)
================================================================= */

/* --- Animação dos Pilares (Esquerda) --- */
.pilar-item-mapa {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pilar-item-mapa:hover {
    transform: translateX(6px);
    /* Dá um leve "push" para a direita ao passar o mouse */
}

.pilar-item-mapa .pilar-icon {
    transition: color 0.3s ease, transform 0.4s ease;
}

.pilar-item-mapa:hover .pilar-icon {
    color: var(--azul-profundo);
    /* O ícone ganha o peso do azul principal */
    transform: scale(1.1) rotate(15deg);
    /* Dá um leve pulo e gira de leve, simulando órbita */
}


/* --- Animação dos Cards de Descoberta (Direita) --- */
.checklist-item {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease;
    cursor: default;
}

.checklist-item:hover {
    background-color: #ffffff;
    /* Fundo fica totalmente opaco */
    border-color: rgba(196, 164, 104, 0.25);
    /* Bordinha acende em dourado sutil */
    transform: translateY(-3px) scale(1.02);
    /* Flutua de leve para cima */
    box-shadow: 0 10px 25px rgba(11, 28, 46, 0.05);
    /* Sombra suave de profundidade */
}

.checklist-item .item-icon {
    transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* O match perfeito: o ícone acende em dourado quando o card sofre hover */
.checklist-item:hover .item-icon {
    color: #c4a468;
    /* Transiciona do azul opaco para o dourado premium */
    opacity: 1;
    transform: scale(1.15);
    /* Micro-zoom no ícone */
}

/* =================================================================
   DOBRA 5 — TESTIMONIALS (CARROSSEL INFINITO EM CSS PURO)
   Fundo escuro profundo conectado ao conceito lunar
================================================================= */
.testimonials {
    background-color: #0b1c2e;
    /* Fundo escuro premium */
    padding: 120px 40px;
    position: relative;
    overflow: hidden;
}

.testimonials-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.testimonials-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
}

.testimonials-h2 {
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    color: #fbfaf7;
    /* Branco suave */
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

.testimonials-subtitle {
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(251, 250, 247, 0.6);
}

/* --- Container do Carrossel Ocultando o que vaza --- */
.testimonials-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    /* Máscara sutil nas laterais para o carrossel sumir suavemente nas bordas da tela */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

/* --- A Esteira Rodante (Animação Infinita) --- */
.testimonials-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: rolarInfinito 45s linear infinite;
}

/* Pausa o movimento quando o usuário coloca o mouse em cima para ler com calma */
.testimonials-carousel:hover .testimonials-track {
    animation-play-state: paused;
}

/* --- Card de Depoimento --- */
.testimonial-card {
    width: 380px;
    /* Largura fixa ideal para o cálculo da esteira */
    background: rgba(18, 40, 63, 0.4);
    border: 1px solid rgba(251, 250, 247, 0.04);
    padding: 36px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background-color 0.4s ease;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    background-color: rgba(18, 40, 63, 0.7);
    border-color: rgba(196, 164, 104, 0.25);
    /* Toque dourado no hover */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* --- Foto e Info das Clientes --- */
.testimonial-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(196, 164, 104, 0.4);
    /* Aro dourado fino */
    box-shadow: 0 0 15px rgba(196, 164, 104, 0.1);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

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

/* Microinteração na foto ao passar o mouse no card */
.testimonial-card:hover .testimonial-photo {
    transform: scale(1.08);
    border-color: #c4a468;
    /* Dourado acende */
}

.testimonial-text {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(251, 250, 247, 0.75);
    font-style: italic;
    flex-grow: 1;
}

.testimonial-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fbfaf7;
    letter-spacing: -0.2px;
    display: block;
    margin-top: 4px;
}

/* Adiciona um detalhe sutil de aspas via CSS antes do nome para preencher o design */
.testimonial-name::before {
    content: "— ";
    color: #c4a468;
    font-weight: 900;
}

/* --- Botão de Ação Inferior --- */
.testimonials-action {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.testimonials-button {
    display: inline-block;
    background: #c4a468;
    /* Botão dourado para dar contraste máximo no fundo escuro */
    color: #0b1c2e;
    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 22px 46px;
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(196, 164, 104, 0.2);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.testimonials-button:hover {
    background-color: #d4b578;
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(196, 164, 104, 0.3);
}

/* =================================================================
   KEYFRAMES DA ANIMAÇÃO (A mágica do loop infinito)
   Move exatamente metade da largura da track (já que ela está duplicada)
================================================================= */
@keyframes rolarInfinito {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Move 50% porque a segunda metade é espelho idêntico da primeira */
        transform: translateX(-50%);
    }
}

/* =================================================================
   DOBRA 6 — REESTRUTURAÇÃO COMPLETA (3 COLUNAS)
================================================================= */
.diferencial-app {
    background-color: #fbfaf7;
    background-image: radial-gradient(circle at 50% 40%, #fbfaf7 0%, #f5f2eb 100%);
    padding: 120px 40px 0 40px;
    /* Colado no bottom */
    position: relative;
    overflow: hidden;
}

.diferencial-app__container {
    max-width: 1300px;
    /* Um pouco mais amplo para caber as 3 colunas perfeitamente */
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr;
    /* Separação perfeita de espaço */
    gap: 40px;
    align-items: stretch;
}

.diferencial-app__tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #c4a468;
    margin-bottom: 16px;
}

/* --- Coluna 1: Diferencial --- */
.diferencial-app__col-diferencial {
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.diferencial-app__titulo {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    color: #0b1c2e;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

.diferencial-app__titulo .destaque-ouro {
    color: #c4a468;
    display: block;
    margin-top: 4px;
}

.diferencial-app__descricao {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(11, 28, 46, 0.75);
    margin-bottom: 28px;
}

.diferencial-app__lista-conceito {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lista-conceito-item {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease;
}

.lista-conceito-item:hover {
    transform: translateX(6px);
}

.item-icon-spark {
    color: rgba(11, 28, 46, 0.3);
    font-size: 0.9rem;
    transition: color 0.3s ease, transform 0.4s ease;
}

.lista-conceito-item:hover .item-icon-spark {
    color: #c4a468;
    transform: rotate(90deg) scale(1.2);
}

.lista-conceito-item p {
    font-size: 0.95rem;
    font-weight: 500;
    color: #0b1c2e;
}

/* --- Coluna 2: Lista do App --- */
.diferencial-app__col-app-lista {
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.diferencial-app__subtitulo {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 800;
    line-height: 1.2;
    color: #0b1c2e;
    margin-bottom: 12px;
}

.diferencial-app__entrega {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(11, 28, 46, 0.4);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
}

.diferencial-app__checklist-app {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    background: transparent;
    transition: background-color 0.3s ease, padding-left 0.3s ease;
}

.app-check-item:hover {
    background-color: rgba(196, 164, 104, 0.06);
    padding-left: 20px;
}

.app-check-icon {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(11, 28, 46, 0.3);
    transition: color 0.3s ease, transform 0.3s ease;
}

.app-check-item:hover .app-check-icon {
    color: #c4a468;
    transform: scale(1.2);
}

.app-check-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: #0b1c2e;
}

/* --- Coluna 3: O Mockup Isolado com o Efeito Voltou --- */
.diferencial-app__col-mockup {
    display: flex;
    align-items: flex-end;
    /* Senta a estrutura no chão */
    position: relative;
}

.diferencial-app__mockup-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    line-height: 0;
    font-size: 0;
}

.diferencial-app__mockup-img {
    width: 100%;
    max-width: 440px;
    height: auto;
    display: block;
    filter: drop-shadow(0 -10px 35px rgba(11, 28, 46, 0.06));

    /* MUDANÇA AQUI: Colocamos o ponto de origem 10% ABAIXO do chão (110%) */
    transform-origin: bottom center 10%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

/* O Novo Hover Supremo (Sem tirar o pé do chão) */
.diferencial-app:hover .diferencial-app__mockup-img {
    /* Tiramos o translateY. Agora ela expande com força para cima e para os lados, 
       mas como a base está travada abaixo do limite, o corte nunca aparece! */
    transform: scale(1.06);
    filter: drop-shadow(0 -20px 45px rgba(196, 164, 104, 0.18));
}

/* =================================================================
   DOBRA 7 — REESTRUTURAÇÃO COMPLETA CHECKOUT (3 COLUNAS)
================================================================= */
.offer-final {
    background-color: #0b1c2e;
    /* Mantém o bloco escuro premium para destacar o card */
    background-image: radial-gradient(circle at 50% 30%, #12283f 0%, #0b1c2e 100%);
    padding: 120px 40px;
    color: #fbfaf7;
    position: relative;
    overflow: hidden;
}

.offer-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
}

.offer-three-col-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr;
    /* Espaçamento de 3 colunas idêntico ao do App */
    gap: 45px;
    align-items: center;
}

/* --- Coluna 1: Copy & Manifesto --- */
.offer-col-copy {
    text-align: left;
}

.offer-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #c4a468;
    margin-bottom: 16px;
}

.offer-h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    color: #fbfaf7;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
}

.offer-h2 .destaque-ouro {
    color: #c4a468;
}

.offer-checklist-para-quem {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.para-quem-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.para-quem-icon {
    color: #c4a468;
    font-size: 0.9rem;
    margin-top: 2px;
}

.para-quem-item p {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(251, 250, 247, 0.85);
    line-height: 1.4;
}

.offer-manifesto-box {
    border-top: 1px solid rgba(251, 250, 247, 0.1);
    padding-top: 24px;
}

.manifesto-p1 {
    font-size: 0.95rem;
    color: rgba(251, 250, 247, 0.5);
    margin-bottom: 6px;
}

.manifesto-p2 {
    font-size: 1.15rem;
    line-height: 1.4;
    color: #fbfaf7;
    margin-bottom: 12px;
}

.manifesto-p2 strong {
    color: #c4a468;
}

.manifesto-p3 {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(251, 250, 247, 0.6);
}

/* --- Coluna 2: O Card de Oferta Central --- */
.offer-col-card-center {
    width: 100%;
}

.offer-price-card.card-white {
    background: #ffffff;
    color: #0b1c2e;
    border-radius: 12px;
    padding: 36px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.price-old-2 {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(11, 28, 46, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.offer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.offer-list li {
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(11, 28, 46, 0.85);
    display: flex;
    gap: 8px;
}

.offer-list li .check {
    color: #c4a468;
    font-weight: 700;
}

.price-block-wrapper {
    border-top: 1px solid rgba(11, 28, 46, 0.08);
    padding-top: 16px;
}

.price-old {
    font-size: 0.85rem;
    text-decoration: line-through;
    color: rgba(11, 28, 46, 0.4);
    display: block;
}

.price-main {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
}

.price-installment {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(11, 28, 46, 0.5);
}

.price-value {
    font-size: 2.8rem;
    font-weight: 900;
    color: #0b1c2e;
    line-height: 1;
}

.btn-cta-main.btn-yellow {
    display: block;
    text-align: center;
    background: #0b1c2e;
    color: #ffffff;
    padding: 16px 24px;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-cta-main.btn-yellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* --- Coluna 3: Selo de Garantia Isolado (Microinterativo) --- */
.offer-col-seal-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.seal-visual-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.warranty-seal-img,
.warranty-seal-main-img {
    width: 100%;
    max-width: 160px;
    /* Selo limpo e destacado */
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efeito sutil de rotação flutuante no selo quando passa o mouse na dobra */
.offer-final:hover .warranty-seal-main-img {
    transform: scale(1.05) rotate(5deg);
}

.seal-text-box {
    max-width: 260px;
}

.warranty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fbfaf7;
    margin-bottom: 8px;
}

.warranty-description {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(251, 250, 247, 0.6);
}

.warranty-description strong {
    color: #c4a468;
}

/* =================================================================
   DOBRA 7 — VERSÃO SUPREMA ULTRA-INTERATIVA (3 COLUNAS)
================================================================= */
.offer-final {
    background-color: #0b1c2e;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(196, 164, 104, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(18, 40, 63, 0.7) 0%, #0b1c2e 100%);
    padding: 140px 40px;
    color: #fbfaf7;
    position: relative;
    overflow: hidden;
}

.offer-container {
    max-width: 1300px;
    margin: 0 auto;
}

.offer-three-col-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.85fr;
    gap: 50px;
    align-items: center;
}

/* --- Coluna 1: Copy, Tags Animadas e Manifesto --- */
.offer-col-copy {
    text-align: left;
}

.offer-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #c4a468;
    background: rgba(196, 164, 104, 0.08);
    border: 1px solid rgba(196, 164, 104, 0.2);
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 24px;
}

.offer-tag svg {
    animation: rotateStar 4s linear infinite;
}

@keyframes rotateStar {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.offer-h2 {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.25;
    color: #fbfaf7;
    letter-spacing: -0.5px;
    margin-bottom: 32px;
}

.offer-h2 .destaque-ouro {
    color: #c4a468;
    background: linear-gradient(135deg, #fbfaf7 0%, #c4a468 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.offer-checklist-para-quem {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.para-quem-item {
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.2s ease;
}

.para-quem-item:hover {
    transform: translateX(6px);
    /* Microinteração ao passar o mouse no texto */
}

.para-quem-icon-wrapper {
    width: 22px;
    height: 22px;
    color: #c4a468;
    flex-shrink: 0;
    opacity: 0.85;
    transition: transform 0.3s ease;
}

.para-quem-item:hover .para-quem-icon-wrapper {
    transform: scale(1.2);
}

.para-quem-item p {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(251, 250, 247, 0.85);
}

/* Caixa do Manifesto (Efeito Vidro Premium) */
.offer-manifesto-box {
    background: rgba(251, 250, 247, 0.02);
    border-left: 3px solid #c4a468;
    padding: 24px;
    border-radius: 0 12px 12px 0;
    backdrop-filter: blur(10px);
}

.manifesto-p1 {
    font-size: 0.95rem;
    color: rgba(251, 250, 247, 0.45);
    margin-bottom: 6px;
}

.manifesto-p2 {
    font-size: 1.2rem;
    line-height: 1.4;
    color: #fbfaf7;
    margin-bottom: 12px;
    font-weight: 600;
}

.pergunta-glow {
    background: linear-gradient(90deg, #fbfaf7, #d4b67b, #fbfaf7);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Força o Webkit a aceitar o preenchimento */
    animation: textShine 4s linear infinite;
}

@keyframes textShine {
    to {
        background-position: 200% center;
    }
}

.manifesto-p3 {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(251, 250, 247, 0.6);
}

/* --- Coluna 2: Card de Oferta Centralizado --- */
.offer-price-card.card-white {
    background: #ffffff;
    color: #0b1c2e;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

/* Efeito de flash sutil que passa pelo card */
.offer-price-card.card-white:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 40px 80px rgba(196, 164, 104, 0.15);
}

.price-old-2 {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(11, 28, 46, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.offer-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.offer-list li {
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(11, 28, 46, 0.85);
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: start;
}

.check-svg {
    color: #c4a468;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.price-block-wrapper {
    border-top: 1px solid rgba(11, 28, 46, 0.08);
    padding-top: 24px;
    margin-top: 8px;
}

.price-old {
    font-size: 0.85rem;
    text-decoration: line-through;
    color: rgba(11, 28, 46, 0.4);
    display: block;
}

.price-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}

.price-installment {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(11, 28, 46, 0.4);
}

.price-value {
    font-size: 3.2rem;
    font-weight: 900;
    color: #0b1c2e;
    line-height: 1;
    letter-spacing: -1px;
}

/* O Botão Interativo Supremo */
.btn-cta-main.btn-yellow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0b1c2e;
    color: #ffffff;
    padding: 20px 24px;
    border-radius: 10px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: 0 8px 24px rgba(11, 28, 46, 0.2);
}

.btn-cta-main.btn-yellow:hover {
    background: #c4a468;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 15px 32px rgba(196, 164, 104, 0.35);
}

.arrow-icon {
    transition: transform 0.3s ease;
}

.btn-cta-main.btn-yellow:hover .arrow-icon {
    transform: translateX(4px);
    /* Seta avança discretamente no hover */
}

/* --- Coluna 3: Selo de Garantia com Flutuação 3D --- */
.offer-col-seal-right {
    display: flex;
    justify-content: center;
}

.seal-visual-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.seal-container-animated {
    animation: floatSeal 5s ease-in-out infinite;
    /* Animação flutuante sem parar na tela */
}

@keyframes floatSeal {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.warranty-seal-main-img {
    width: 100%;
    max-width: 170px;
    height: auto;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.seal-text-box {
    max-width: 250px;
    text-align: center;
}

.warranty-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fbfaf7;
    margin-bottom: 8px;
}

.warranty-description {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(251, 250, 247, 0.55);
}

.warranty-description strong {
    color: #c4a468;
}

/* =================================================================
   DOBRA 8 — SOBRE A CRIADORA (IDENTIDADE CLARA PADRÃO)
================================================================= */
.about-light-version {
    background-color: #fbfaf7;
    /* O off-white padrão das suas dobras claras */
    padding: 120px 40px 0 40px;
    /* Zera o padding-bottom para a foto encostar no chão */
    color: #0b1c2e;
    position: relative;
    overflow: hidden;
}

.about-light-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    /* Copy ganha mais fôlego, imagem abraça a direita */
    gap: 60px;
    align-items: end;
    /* Força os elementos a se alinharem pela base (chão da dobra) */
}

/* --- Coluna de Texto (Esquerda) --- */
.about-light-content {
    text-align: left;
    padding-bottom: 100px;
    /* Empurra o texto para cima para não ficar esmagado no chão */
}

.about-light-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #c4a468;
    margin-bottom: 20px;
}

.about-light-h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: #0b1c2e;
    letter-spacing: -1px;
    margin-bottom: 28px;
}

.about-light-name {
    color: #c4a468;
}

.about-light-text {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 36px;
}

.about-light-p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(11, 28, 46, 0.8);
}

.about-light-p strong {
    color: #0b1c2e;
    font-weight: 700;
}

/* Caixa de Destaque Sutil (Estilo Borda Lateral) */
.about-light-highlight-box {
    border-left: 3px solid #c4a468;
    padding-left: 20px;
    margin-top: 8px;
}

.about-light-p-bold {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #0b1c2e;
    font-weight: 700;
}

/* Botão Versão Escuro/Dourado das Dobras Anteriores */
.about-light-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #0b1c2e;
    color: #ffffff;
    padding: 18px 32px;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 25px rgba(11, 28, 46, 0.15);
}

.about-light-button:hover {
    background: #c4a468;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(196, 164, 104, 0.25);
}

.about-light-arrow {
    transition: transform 0.3s ease;
}

.about-light-button:hover .about-light-arrow {
    transform: translateX(5px);
}

/* --- Coluna da Imagem (Direita - Colada no Chão) --- */
.about-light-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: end;
    height: 100%;
    position: relative;
}

.about-light-img-png {
    width: 100%;
    max-width: 440px;
    /* Ajuste o tamanho máximo de acordo com o arquivo original */
    height: auto;
    display: block;
    margin-bottom: 0;
    /* Garante que toque o chão da div */
    /* Filtro de sombra suave projetada para baixo/lados, respeitando o recorte transparente do PNG */
    filter: drop-shadow(0 -5px 15px rgba(11, 28, 46, 0.03)) drop-shadow(10px 10px 25px rgba(11, 28, 46, 0.08));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Microinteração sutil sem tirar a foto do chão */
.about-light-version:hover .about-light-img-png {
    transform: scale(1.015);
}

/* =================================================================
   DOBRA 9 — FAQ (ESTILO ESCURO PREMIUM)
================================================================= */
.faq {
    background-color: #0b1c2e;
    /* Casando com o fundo escuro oficial */
    padding: 120px 24px;
    position: relative;
    overflow: hidden;
}

.faq-container {
    max-width: 860px;
    /* Layout centralizado e focado, excelente para leitura */
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- Cabeçalho do FAQ --- */
.faq-header {
    text-align: center;
    margin-bottom: 50px;
}

.faq-h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: #fbfaf7;
    letter-spacing: -1px;
}

/* Proteção do VS Code contra propriedades experimentais */
.faq-h2-gradient {
    background: linear-gradient(135deg, #fbfaf7 30%, #c4a468 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* --- Grid / Lista de Items --- */
.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Card Detalhes (Base) */
.faq-item {
    background: rgba(251, 250, 247, 0.02);
    border: 1px solid rgba(251, 250, 247, 0.06);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efeito de hover discreto para dar a sensação de clique */
.faq-item:hover {
    background: rgba(251, 250, 247, 0.04);
    border-color: rgba(196, 164, 104, 0.2);
}

/* Quando o item estiver aberto, destaca a borda em ouro */
.faq-item[open] {
    background: rgba(251, 250, 247, 0.03);
    border-color: rgba(196, 164, 104, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* --- O Summary (A Pergunta) --- */
.faq-question {
    padding: 24px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fbfaf7;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    user-select: none;
    list-style: none;
    /* Esconde a seta nativa no Chrome/Firefox */
}

/* Esconde a seta nativa especificamente no Safari */
.faq-question::-webkit-details-marker {
    display: none;
}

/* O Ícone de Seta (Chevron) */
.faq-icon {
    color: #c4a468;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Microinteração: Gira o chevron quando a tag estiver [open] */
.faq-item[open] .faq-icon {
    transform: rotate(180deg);
    color: #fbfaf7;
}

/* --- O Bloco da Resposta --- */
.faq-answer {
    padding: 0 24px 24px 24px;
    /* Remove o padding do topo para o texto não flutuar longe da pergunta */
}

.faq-answer p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(251, 250, 247, 0.7);
}

.faq-answer strong {
    color: #c4a468;
    font-weight: 600;
}

/* =================================================================
   RESPONSIVO
================================================================= */

@media (max-width: 1024px) {
    .hero-topo__nav {
        padding: 28px 32px;
    }

    .hero-topo__body {
        grid-template-columns: 1fr 1fr;
        padding: 0 32px;
        gap: 24px;
    }

    .hero-topo__content {
        padding-top: 40px;
        padding-bottom: 48px;
    }

    .hero-topo__titulo {
        font-size: clamp(1.6rem, 3vw, 2.4rem);
    }

    .hero-topo__imagem img {
        max-height: 65vw;
    }

    .hero-vsl {
        padding: 70px 32px;
    }

    .hero-vsl__body {
        gap: 40px;
    }

    /* ABA 3*/
    .consciencia-lunar {
        padding: 80px 32px;
    }

    .consciencia-lunar__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .lunar-col {
        padding: 36px 28px;
    }

    /* ABA 4 */
    .detalhes-produto__grid-principal {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .detalhes-produto__divisor {
        display: none;
        /* Some com o divisor no tablet/mobile para não quebrar layout */
    }

    /* ABA 6 */
    .diferencial-app__container {
        grid-template-columns: 1fr 1fr;
        /* Vira 2 colunas no tablet */
        gap: 40px;
    }

    .diferencial-app__col-mockup {
        grid-column: span 2;
        /* Joga o celular para baixo centralizado */
        justify-content: center;
        margin-top: 20px;
    }

    .diferencial-app__col-diferencial,
    .diferencial-app__col-app-lista {
        padding-bottom: 20px;
    }

    .diferencial-app__mockup-img {
        max-width: 360px;
    }

    /* ABA 7 */
    .offer-three-col-grid {
        grid-template-columns: 1fr 1fr;
    }

    .offer-col-seal-right {
        grid-column: span 2;
        margin-top: 30px;
    }

    .seal-visual-wrapper {
        flex-direction: row;
        text-align: left;
        max-width: 500px;
    }

    .seal-text-box {
        text-align: left;
    }

    /* ABA 8 */
    .about-light-version {
        padding: 80px 24px 0 24px;
    }

    .about-light-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-light-content {
        padding-bottom: 0;
        /* Tira o recuo para não afastar a foto no mobile */
    }

    .about-light-image-wrapper {
        justify-content: center;
    }

    .about-light-img-png {
        max-width: 320px;
        /* Reduz um pouco no mobile para dar leitura */
    }
}

@media (max-width: 768px) {
    .hero-topo__nav {
        padding: 20px 24px;
        text-align: center;
    }

    .hero-topo__body {
        grid-template-columns: 1fr;
        padding: 0 24px;
        align-items: start;
    }

    .hero-topo__content {
        padding-top: 32px;
        padding-bottom: 0;
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .hero-topo__imagem {
        justify-content: flex-end;
    }

    .hero-topo__imagem img {
        max-height: 60vw;
    }

    .hero-vsl {
        padding: 60px 24px;
    }

    .hero-vsl__body {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-vsl__content {
        align-items: center;
        text-align: center;
    }

    .hero-vsl__intro {
        text-align: left;
    }

    .hero-topo__cta,
    .hero-vsl__cta {
        align-self: stretch;
        text-align: center;
    }

    /* ABA 3 */
    .consciencia-lunar {
        padding: 60px 24px;
    }

    .consciencia-lunar__cta {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* ABA 4 */
    .detalhes-produto {
        padding: 80px 24px;
    }

    .detalhes-produto__grid-principal {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .descobertas-checklist {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pilar-item-mapa__desc {
        padding-left: 0;
    }

    .detalhes-produto__cta {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* ABA 5 */
    .testimonials {
        padding: 80px 24px;
    }

    .testimonial-card {
        width: 300px;
        /* Diminui o card um pouco no mobile para ajustar a leitura */
        padding: 28px;
    }

    .testimonials-track {
        /* Acelera um tiquinho no mobile para manter a fluidez em telas menores */
        animation-duration: 30s;
    }

    .testimonials-button {
        display: block;
        width: 100%;
        padding: 20px 20px;
    }

    /* ABA 6 */
    .diferencial-app__container {
        grid-template-columns: 1fr;
        /* 1 coluna no mobile */
    }

    .diferencial-app__col-mockup {
        grid-column: span 1;
    }

    .diferencial-app {
        padding: 80px 24px 0 24px;
    }

    .diferencial-app__mockup-img {
        max-width: 300px;
    }

    /* ABA 7 */
    .offer-three-col-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .offer-col-seal-right {
        grid-column: span 1;
    }

    .seal-visual-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .seal-text-box {
        text-align: center;
    }

    .offer-final {
        padding: 80px 24px;
    }

    /* ABA 9 */
    .faq {
        padding: 80px 16px;
    }
    
    .faq-question {
        padding: 20px;
        font-size: 1rem;
    }
    
    .faq-answer {
        padding: 0 20px 20px 20px;
    }
}

@media (max-width: 480px) {
    .diferencial-app {
        padding: 60px 24px 0 24px;
    }

    .diferencial-app__mockup-img {
        max-width: 290px;
    }
}