/*
  enhancements.css
  Arquivo ADITIVO — carregado depois de style.css.
  Não duplica nem sobrescreve tokens existentes; usa var(--token, fallback)
  em todo lugar pra funcionar mesmo se um nome de variável não existir ainda
  no style.css original. Se seu style.css já define --accent/--text-muted/--bg
  com outros valores, esses valores vencem automaticamente (isso é só fallback).
*/

/* ===== Seção do mecanismo (Código de 5 Camadas) ===== */
.mechanism-section {
    position: relative;
    overflow: hidden;
}

/* Background decorativo (brain-bg.jpg) — atrás de tudo, nunca na frente do texto */
.mechanism-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('assets/brain-bg.jpg') center 35% / cover no-repeat;
    opacity: 0.22;
    z-index: 0;
    pointer-events: none;
}
.mechanism-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 10%, rgba(0, 0, 0, 0.8), transparent 65%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.7));
    z-index: 0;
    pointer-events: none;
}
.mechanism-section > * {
    position: relative;
    z-index: 1;
}

/* ===== Visual de produto na seção "O que você terá acesso" ===== */
.content-visual {
    display: flex;
    justify-content: center;
    margin: 0 auto 2.5rem;
    max-width: 460px;
}
.content-visual img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 45px rgba(239, 35, 60, 0.25));
}

/* ===== Visual de produto na seção "Por que é essencial" ===== */
.essential-visual {
    display: flex;
    justify-content: center;
    margin: 0 auto 2.5rem;
    max-width: 380px;
}
.essential-visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
}

.mechanism-pin-wrap {
    max-width: 900px;
    margin: 3rem auto 0;
}

.mechanism-layers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mechanism-layer {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    opacity: 0.8;
    filter: grayscale(0.75);
    transition: opacity 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Estado "ativo" — ligado pelo GSAP conforme o scroll passa por cada camada */
.mechanism-layer.is-active {
    opacity: 1;
    filter: grayscale(0);
    border-color: color-mix(in srgb, var(--accent, #EF233C) 45%, transparent);
    box-shadow: 0 0 40px color-mix(in srgb, var(--accent, #EF233C) 20%, transparent);
    background: rgba(239, 35, 60, 0.04);
}

.layer-index {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    color: var(--accent, #EF233C);
    min-width: 3ch;
    line-height: 1;
    transition: text-shadow 0.3s ease;
}

.mechanism-layer.is-active .layer-index {
    opacity: 1;
    text-shadow: 0 0 20px color-mix(in srgb, var(--accent, #EF233C) 60%, transparent);
}

.layer-content h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    margin: 0 0 0.35rem;
}

.layer-content p {
    color: var(--text-muted, #a1a1aa);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* ===== Depoimentos: carrossel de prints reais =====
   Mostra vários cards de uma vez (quantos couberem, ~4 num desktop largo),
   em tamanho legível (280px, bem maior que um thumbnail), e rola UM card
   por vez com as setas — não pagina o conjunto inteiro de uma tacada. */
.testimonial-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 1280px;
    margin: 0 auto;
}

.tc-viewport {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tc-viewport::-webkit-scrollbar { display: none; }
.tc-viewport:focus-visible { outline: 2px solid var(--accent, #EF233C); outline-offset: 4px; border-radius: 12px; }

.tc-track {
    display: flex;
    gap: 1.25rem;
    padding: 0.5rem 0.5rem 1rem;
    list-style: none;
}

.tc-slide {
    flex: 0 0 auto;
    width: 280px;
    scroll-snap-align: start;
}

.tc-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
}

.tc-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.tc-arrow:hover { background: var(--accent, #EF233C); border-color: var(--accent, #EF233C); }

.tc-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.tc-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}
.tc-dot.is-active {
    background: var(--accent, #EF233C);
    transform: scale(1.3);
}

@media (max-width: 640px) {
    .tc-arrow { width: 36px; height: 36px; font-size: 1.2rem; }
    .tc-slide { width: 78vw; max-width: 300px; }
}

/* ===== Mobile-first: telas pequenas (celulares) ===== */
@media (max-width: 480px) {
    .mechanism-pin-wrap { margin-top: 2rem; }
    .mechanism-layers { gap: 0.75rem; }
    .mechanism-layer { padding: 1.1rem 1.1rem; gap: 1rem; }
    .layer-index { font-size: 1.4rem; min-width: 2.4ch; }
    .layer-content h3 { font-size: 1.05rem; }
    .layer-content p { font-size: 0.88rem; }

    .content-visual { max-width: 280px; margin-bottom: 2rem; }
    .essential-visual { max-width: 240px; margin-bottom: 2rem; }
}

/* ===== Neutraliza o CSS do widget da Hotmart nos nossos botões =====
   hotmart-fb.min.css é injetado por JS e entra DEPOIS de style.css/
   enhancements.css no <head>, então na prática ele ganha o empate de
   especificidade e pinta os CTAs de verde por padrão. Aqui reforçamos
   com !important pra manter a identidade vermelho+preto da marca. */
a.hotmart-fb.shiny-cta {
    background: linear-gradient(#000, #000) padding-box,
        conic-gradient(from var(--gradient-angle, 0deg), transparent 0%, var(--accent, #EF233C) 5%, var(--accent, #EF233C) 15%, var(--accent, #EF233C) 30%, transparent 40%) border-box !important;
    border: 2px solid transparent !important;
    color: #fff !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}
a.hotmart-fb.btn-primary {
    background: var(--accent, #EF233C) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
}
a.hotmart-fb.btn-primary:hover {
    background: var(--accent-dark, #b91c2e) !important;
}

/* ===== Widget de notificação de compra (dados reais via webhook) ===== */
.purchase-notification {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 60;
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    background: rgba(10, 10, 11, 0.92);
    border: 1px solid rgba(239, 35, 60, 0.35);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    font-size: 0.85rem;
    color: #f4f4f5;
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.purchase-notification.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.purchase-notification .pn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 8px #22c55e;
}

.purchase-notification.demo-mode::before {
    content: "MODO DEMO";
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: #facc15;
    position: absolute;
    top: -0.6rem;
    left: 0.75rem;
    background: #0A0A0B;
    padding: 0 0.4rem;
}

@media (max-width: 640px) {
    .purchase-notification { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; max-width: none; }
}

/* ===== Acessibilidade: reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .mechanism-layer { opacity: 1 !important; filter: none !important; transition: none !important; }
    .purchase-notification { transition: none !important; }
}