/* RESET & FONTS */
:root {
    --font-poppins: "Poppins", "Poppins Fallback";
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    color: #ffffff;
    font-family: var(--font-poppins), sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background-color: #000000;
    background-image:
        /* Glow roxo lateral esquerdo */
        radial-gradient(ellipse 40% 80% at -5% 40%, rgba(193, 131, 251, 0.15) 0%, rgba(193, 131, 251, 0) 70%),
        /* Glow rosa lateral direito */
        radial-gradient(ellipse 50% 90% at 105% 70%, rgba(241, 115, 184, 0.15) 0%, rgba(241, 115, 184, 0) 70%),
        /* Glow de fundo bem suave ao centro/baixo */
        radial-gradient(ellipse 60% 60% at 50% 90%, rgba(193, 131, 251, 0.08) 0%, transparent 70%);
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* UTILITIES */
.some-no-desktop {
    display: none;
}

@media (max-width: 768px) {
    .some-no-celular {
        display: none;
    }

    .some-no-desktop {
        display: block;
    }
}

@keyframes headerSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* HERO SECTION */
.topo {
    position: relative;
    width: 100%;
    min-height: min(760px, 90vh);
    padding: 108px 8vw 34px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(188, 133, 248, 0.12) 0%, rgba(0, 0, 0, 0) 34%),
        linear-gradient(225deg, rgba(226, 123, 183, 0.14) 0%, rgba(0, 0, 0, 0) 38%),
        #000000;
}

.topo::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 34%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 110px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 86%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 86%);
    opacity: 0.5;
}

.topo-conteudo {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
    align-items: center;
    gap: 72px;
}

.topo-palco-column {
    position: relative;
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: visible;
}

.topo-palco-glass {
    position: relative;
    width: min(560px, calc(100% + 88px));
    max-width: none;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.topo-palco-glass::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 430px;
    height: 560px;
    border-radius: 50%;
    border: 1px solid rgba(188, 133, 248, 0.12);
    background:
        radial-gradient(circle at 50% 50%, rgba(226, 123, 183, 0.08), transparent 62%),
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(188, 133, 248, 0.1) 59%, transparent 60%);
    opacity: 0.9;
    transform: rotate(-10deg);
    filter: blur(0.2px);
    pointer-events: none;
}

.topo-celular-shell {
    position: relative;
    z-index: 3;
    width: 330px;
    margin-left: 0;
    transform: none;
    filter:
        drop-shadow(0 28px 44px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 34px rgba(226, 123, 183, 0.12));
}

/* ── iPhone 15 Pro Realistic Frame ── */
.topo-celular-frame {
    position: relative;
    width: 100%;
    height: 610px;
    padding: 6px;
    border-radius: 52px;
    background: linear-gradient(165deg, #8a8d93 0%, #5c5e63 8%, #3a3c40 20%, #2a2c2f 40%, #1d1e21 60%, #2a2c2f 80%, #5c5e63 95%, #8a8d93 100%);
    border: none;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.15),
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 0 1px rgba(0,0,0,0.4),
        0 30px 60px rgba(0,0,0,0.5),
        0 0 40px rgba(226,123,183,0.08);
}

.topo-celular-frame::before,
.topo-celular-frame::after {
    content: '';
    position: absolute;
    z-index: 1;
    display: block;
    background: linear-gradient(180deg, #5c5e63, #3a3c40, #5c5e63);
    border: none;
    border-radius: 3px;
}

/* Left buttons - Volume */
.topo-celular-frame::before {
    left: -3px;
    top: 120px;
    width: 3px;
    height: 30px;
    border-radius: 3px 0 0 3px;
    box-shadow:
        0 -36px 0 0 #4a4c50,
        0 44px 0 0 #4a4c50;
}

/* Right button - Power */
.topo-celular-frame::after {
    right: -3px;
    top: 160px;
    width: 3px;
    height: 64px;
    border-radius: 0 3px 3px 0;
}

/* ── Dynamic Island ── */
.topo-aparelho-island {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 100px;
    height: 28px;
    background: #000;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
}

.topo-aparelho-island-cam {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #1a2744, #0a0f1a);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 0 2px rgba(50,80,180,0.4);
}

/* ── iOS Status Bar ── */
.topo-ios-statusbar {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    z-index: 45;
    height: 48px;
    padding: 14px 24px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: transparent;
    color: #000000;
    pointer-events: none;
}

.topo-ios-time {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-feature-settings: "tnum";
}

.topo-ios-statusbar-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

.topo-ios-battery-svg {
    display: block;
    flex-shrink: 0;
}

/* ── WhatsApp App Container (iOS) ── */
.topo-app-zap {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 46px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
    background: #eae6df;
    color: #111b21;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.topo-app-zap::before {
    content: '';
    position: absolute;
    inset: 100px 0 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23111b21' fill-opacity='1'%3E%3Ccircle cx='20' cy='20' r='1.2'/%3E%3Ccircle cx='60' cy='20' r='1.2'/%3E%3Ccircle cx='40' cy='40' r='1.2'/%3E%3Ccircle cx='20' cy='60' r='1.2'/%3E%3Ccircle cx='60' cy='60' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
    pointer-events: none;
}

/* ── iOS WhatsApp Header (Light Beige — matching real iOS) ── */
.topo-zap-header {
    position: relative;
    z-index: 2;
    height: 100px;
    padding: 50px 12px 8px;
    display: flex;
    align-items: center;
    gap: 0;
    background: #f0ebe4;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    color: #000000;
}

.topo-zap-header-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 28px;
}

.topo-zap-back {
    width: 20px;
    height: 20px;
    opacity: 1;
    stroke: #007AFF;
}

.topo-zap-header-center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.topo-zap-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.topo-zap-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topo-zap-contact {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.topo-zap-contact strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.88rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: #000000;
}

.topo-zap-verified {
    flex-shrink: 0;
    color: #53bdeb;
    filter: none;
}

.topo-zap-contact span {
    margin-top: 1px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.68rem;
}

.topo-zap-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.topo-zap-header-actions svg {
    width: 20px;
    height: 20px;
    stroke: #007AFF;
    opacity: 1;
}

.topo-zap-body {
    position: relative;
    z-index: 1;
    height: calc(100% - 164px);
    padding: 14px 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    overflow: hidden;
}

.topo-zap-message {
    position: relative;
    width: fit-content;
    max-width: 85%;
    padding: 6px 8px 8px;
    border-radius: 7.5px;
    font-size: 0.82rem;
    line-height: 1.45;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    opacity: 0;
    transform: translateY(12px);
    animation: heroMessageIn 0.42s ease forwards;
}

.topo-zap-message.user {
    align-self: flex-end;
    border-top-right-radius: 2px;
    background: #d9fdd3;
}

.topo-zap-message.bot {
    align-self: flex-start;
    border-top-left-radius: 2px;
    background: #ffffff;
}

.topo-zap-message strong {
    display: flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    margin-bottom: 2px;
    color: #111b21;
    font-size: 0.78rem;
    font-weight: 700;
}

.topo-zap-message-content {
    display: block;
}

.topo-zap-message-content b {
    font-weight: 700;
}

.topo-zap-message-content br {
    content: '';
    display: block;
    margin-bottom: 14px;
}

.topo-zap-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    float: right;
    margin-top: 4px;
    margin-left: 8px;
    color: #667781;
    font-size: 0.65rem;
    line-height: 1;
}

.topo-zap-message.user .topo-zap-meta {
    color: rgba(17, 27, 33, 0.45);
}

.topo-zap-checks {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 11px;
    color: #53bdeb;
    transform: translateY(1px);
}

.topo-zap-checks svg {
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topo-zap-checks svg:first-child {
    left: 0;
}

.topo-zap-checks svg:last-child {
    left: 5px;
}

.topo-zap-typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 18px;
}

.topo-zap-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8696a0;
    animation: heroDotPulse 1.3s infinite ease-in-out both;
}

.topo-zap-typing-dots span:nth-child(2) {
    animation-delay: 0.14s;
}

.topo-zap-typing-dots span:nth-child(3) {
    animation-delay: 0.28s;
}

.topo-zap-input {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 56px;
    padding: 6px 8px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0ebe4;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.topo-zap-plus {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: transparent;
    color: #8e8e93;
    font-weight: 500;
    font-size: 1.3rem;
    box-shadow: none;
}

.topo-zap-camera {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #8e8e93;
}

.topo-zap-mic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: transparent;
    color: #8e8e93;
    box-shadow: none;
}

.topo-zap-typebox {
    min-width: 0;
    flex: 1;
    height: 36px;
    padding: 0 8px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    background: #ffffff;
    color: #111b21;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: none;
}

.topo-zap-sticker-icon {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.topo-zap-cursor {
    margin-left: 1px;
    color: #00a884;
    font-weight: 300;
    animation: heroCursorBlink 1s infinite;
}

@keyframes heroMessageIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroDotPulse {

    0%,
    80%,
    100% {
        transform: scale(0.65);
        opacity: 0.45;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes heroCursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}







@media (prefers-reduced-motion: reduce) {

    .topo-celular-shell,
    .topo-zap-message,
    .topo-zap-tags,
    .topo-zap-cursor,
    .topo-zap-typing-dots span,
    .hero-signal-card,
    .hero-signal-card::after,
    .hero-signal-card::before,
    .hero-signal-paths path {
        animation: none;
        transform: none;
    }
}

@media (max-width: 1280px) and (min-width: 1101px) {
    .topo-conteudo {
        grid-template-columns: minmax(0, 1.02fr) minmax(360px, 430px);
        gap: 52px;
    }

    .topo-palco-glass {
        width: min(520px, calc(100% + 58px));
    }

    .topo-celular-shell {
        width: 310px;
    }

    .topo-celular-frame {
        height: 574px;
        border-radius: 48px;
    }

    .topo-app-zap {
        border-radius: 42px;
    }
}

@media (max-width: 1100px) {
    .topo {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .topo-conteudo {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
        gap: 44px;
    }

    .topo-palco-glass {
        width: min(430px, calc(100% + 40px));
        min-height: 560px;
    }

    .topo-celular-shell {
        width: 300px;
        margin-left: 0;
    }

    .topo-celular-frame {
        height: 552px;
        border-radius: 46px;
    }

    .topo-app-zap {
        border-radius: 40px;
    }
}



/* ORBIT SECTION (REDE NEURAL) */
.orbita-section {
    width: 100%;
    padding: 100px 8vw 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: #161722;
    background-color: #F5F0EB;
}

.orbita-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: -10%;
    width: 55%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 60% at 80% 20%, rgba(188, 133, 248, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 20% 80%, rgba(226, 123, 183, 0.05) 0%, transparent 70%);
    opacity: 1;
}

#neural-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.56;
    mix-blend-mode: multiply;
}

.orbita-title {
    text-align: center;
    margin-bottom: 100px;
    position: relative;
    z-index: 10;
}

.orbita-title h2 {
    font-family: var(--font-poppins), sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 16px;
    color: #15151f;
}

.orbita-title p {
    font-size: 1.1rem;
    color: #5b5d6b;
    font-weight: 400;
}

.orbita-wrapper {
    position: relative;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    z-index: 1;
    border: 1px dashed rgba(22, 23, 34, 0.1);
}

.orbita-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.92), transparent 38%),
        linear-gradient(145deg, #ffffff 0%, #f1eef8 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(193, 131, 251, 0.15);
    box-shadow:
        0 18px 45px rgba(43, 35, 68, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.orbita-centro svg {
    width: 35px;
    height: 35px;
    fill: #25D366;
    filter: drop-shadow(0 8px 16px rgba(37, 211, 102, 0.34));
    position: relative;
    z-index: 2;
}

/* Anéis de sinal WiFi — expandem do centro e desaparecem */
.orbita-onda {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid rgba(193, 131, 251, 0.45);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
    animation: wifi-signal 4s ease-out infinite;
}

/* Delays escalonados — cada onda sai com intervalo */
.orbita-onda:nth-child(1) {
    animation-delay: 0s;
}

.orbita-onda:nth-child(2) {
    animation-delay: 0.6s;
}

.orbita-onda:nth-child(3) {
    animation-delay: 1.2s;
}

@keyframes wifi-signal {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }

    8% {
        opacity: 0.55;
    }

    60% {
        opacity: 0.12;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.8);
        opacity: 0;
    }
}

.orbita-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 210px;
    height: 0;
    transform-origin: 0 50%;
    transform: translateY(-50%) rotate(var(--angle));
    z-index: 1;
}

.orbita-card {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle)));

    /* ======================================
       GLASS SOFISTICADO — mesmo nível dos botões
       Alta opacidade + blur forte + bordas brilhantes
       ====================================== */
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);

    /* Borda assimétrica: topo e esquerda brilham, resto some */
    border-top: 1px solid rgba(255, 255, 255, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 0.82);
    border-right: 1px solid rgba(142, 89, 196, 0.12);
    border-bottom: 1px solid rgba(142, 89, 196, 0.1);

    border-radius: 16px;
    padding: 10px 16px 10px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    white-space: nowrap;

    box-shadow:
        0 18px 44px rgba(26, 27, 40, 0.1),
        0 4px 14px rgba(26, 27, 40, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 0 0 1px rgba(142, 89, 196, 0.06);

    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;

    /* Flutuação suave — cada card recebe delay via nth-child */
    animation: card-float 4s ease-in-out infinite;
}

/* Linha de reflexo no topo — brilhinho premium do glass */
.orbita-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.58) 25%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(255, 255, 255, 0.58) 75%,
            transparent 100%);
    border-radius: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Glow interno sutil na parte inferior — profundidade glass */
.orbita-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(193, 131, 251, 0.28) 40%,
            rgba(226, 123, 183, 0.22) 60%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.orbita-card:hover {
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle))) scale(1.06);
    animation-play-state: paused;
    background: rgba(255, 255, 255, 0.98);
    border-top-color: rgba(255, 255, 255, 1);
    border-left-color: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 24px 56px rgba(26, 27, 40, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 0 34px rgba(193, 131, 251, 0.18),
        0 0 0 1px rgba(142, 89, 196, 0.1);
    z-index: 20;
}

.cartao-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;

    /* Glass icon — uniforme, branco, refinado */
    background: linear-gradient(135deg, rgba(193, 131, 251, 0.17), rgba(226, 123, 183, 0.12));
    border-top: 1px solid rgba(255, 255, 255, 0.78);
    border-left: 1px solid rgba(255, 255, 255, 0.68);
    border-right: 1px solid rgba(142, 89, 196, 0.14);
    border-bottom: 1px solid rgba(142, 89, 196, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 8px 18px rgba(142, 89, 196, 0.14);

    /* Ícones com contraste light, mantendo o acento da marca */
    color: #8b45d1;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Remove cores individuais — todos brancos */
.orbita-item:nth-child(3n+1) .cartao-icone,
.orbita-item:nth-child(3n+2) .cartao-icone,
.orbita-item:nth-child(3n) .cartao-icone {
    background: linear-gradient(135deg, rgba(193, 131, 251, 0.17), rgba(226, 123, 183, 0.12));
    color: #8b45d1;
    border-top: 1px solid rgba(255, 255, 255, 0.78);
    border-left: 1px solid rgba(255, 255, 255, 0.68);
    border-right: 1px solid rgba(142, 89, 196, 0.14);
    border-bottom: 1px solid rgba(142, 89, 196, 0.12);
}

.orbita-card:hover .cartao-icone {
    background: linear-gradient(135deg, rgba(193, 131, 251, 0.24), rgba(226, 123, 183, 0.18));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 0 18px rgba(193, 131, 251, 0.18),
        0 10px 20px rgba(142, 89, 196, 0.16);
}

.cartao-rotulo {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    color: #232637;
    letter-spacing: -0.01em;
}

.orbita-card {
    cursor: pointer;
}

/* Delays e amplitudes independentes por posição — flutuação orgânica */
.orbita-item:nth-child(1) .orbita-card {
    animation-delay: 0s;
    animation-duration: 3.8s;
}

.orbita-item:nth-child(2) .orbita-card {
    animation-delay: -1.2s;
    animation-duration: 4.3s;
}

.orbita-item:nth-child(3) .orbita-card {
    animation-delay: -2.5s;
    animation-duration: 3.6s;
}

.orbita-item:nth-child(4) .orbita-card {
    animation-delay: -0.7s;
    animation-duration: 4.8s;
}

.orbita-item:nth-child(5) .orbita-card {
    animation-delay: -3.1s;
    animation-duration: 4.1s;
}

.orbita-item:nth-child(6) .orbita-card {
    animation-delay: -1.8s;
    animation-duration: 3.9s;
}

.orbita-item:nth-child(7) .orbita-card {
    animation-delay: -0.4s;
    animation-duration: 4.5s;
}

@keyframes card-float {
    0% {
        transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle))) translateY(0px);
    }

    50% {
        transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle))) translateY(-7px);
    }

    100% {
        transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle))) translateY(0px);
    }
}

.cartao-seta {
    font-size: 1rem;
    color: rgba(139, 69, 209, 0.72);
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.25s ease, color 0.25s ease;
    margin-left: 2px;
}

.orbita-card:hover .cartao-seta {
    transform: translateX(3px);
    color: #8b45d1;
}



/* ======================================
   ANIMAÇÃO CHAT PREMIUM — BLOCO 3
   ====================================== */

.conversa-floating-canvas {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 520px;
    margin: 0 auto 20px auto;
    background-color: #F5F0EB;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
    border-radius: 24px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 8px 16px rgba(0, 0, 0, 0.04),
        0 16px 28px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
}


/* ── Overlay de desfoque sobre as mensagens ── */
.conversa-blur-overlay {
    position: absolute;
    inset: 0;
    background: rgba(245, 240, 235, 0.55);
    /* Corrigido */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.conversa-blur-overlay.active {
    opacity: 1;
}

/* ── Eraser — camada sólida que "apaga" a tela subindo ── */
.conversa-eraser {
    position: absolute;
    left: 0;
    width: 100%;
    height: 200%;
    top: 100%;
    background: #F5F0EB;
    /* Corrigido */
    z-index: 15;
    pointer-events: none;
    will-change: top;
}

/* Trilha das mensagens */
.conversa-chat-track {
    flex: 1;
    padding: 50px 16px 80px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: hidden;
    z-index: 2;
}

/* ── Dock — SEMPRE usa 'top' para posicionamento fluido ── */
.conversa-input-dock {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 20;
    /* Flex: centraliza a pill horizontalmente (expansão do centro) */
    display: flex;
    justify-content: center;
    will-change: top, transform, opacity;
}

/* Pill */
.conversa-input-pill {
    background: #ffffff;
    border-radius: 40px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    will-change: width, border-radius, padding;
}

/* ── Estado colapsado: círculo puro com "+" ── */
.conversa-input-pill.collapsed {
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(0, 0, 0, 0.02);
}

.conversa-input-pill.collapsed .conversa-icon-plus {
    margin: 0 auto;
}

/* ── Estado expandido: barra completa ── */
.conversa-input-pill.expanded {
    width: 100%;
    border-radius: 40px;
    padding: 10px 16px;
}

.conversa-text-field {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #111b21;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.conversa-icon-btn {
    color: #8696a0;
    flex-shrink: 0;
    cursor: pointer;
}

.conversa-cursor {
    animation: ma-blink 1s infinite;
    color: #00a884;
    margin-left: 2px;
}

/* Mensagens */
.conversa-row {
    display: flex;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    animation: ma-floatUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.conversa-row.user {
    justify-content: flex-end;
}

.conversa-row.bot {
    justify-content: flex-start;
    gap: 12px;
}

/* Avatar */
.conversa-avatar-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.conversa-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Balões */
.conversa-bubble {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 14px;
    max-width: 82%;
    border: 1px solid rgba(0, 0, 0, 0.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.conversa-bubble.user {
    background-color: #d9fdd3;
    color: #111b21;
    border-top-right-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.conversa-bubble.bot {
    background-color: #ffffff;
    color: #111b21;
    border-top-left-radius: 4px;
}

.conversa-bot-head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.conversa-bot-head strong {
    font-size: 14px;
    color: #111b21;
}

.conversa-verified {
    color: #34B7F1;
    width: 14px;
    height: 14px;
}

.conversa-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #667781;
    margin-top: 6px;
}

.conversa-ticks {
    color: #8696a0;
    transition: color 0.4s ease;
}

.conversa-ticks.blue {
    color: #53bdeb;
}

/* 3 bolinhas */
.conversa-typing-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    height: 20px;
    padding: 0 4px;
}

.conversa-typing-dots span {
    width: 7px;
    height: 7px;
    background-color: #8696a0;
    border-radius: 50%;
    opacity: 0.8;
    animation: ma-bounce 1.4s infinite ease-in-out both;
}

.conversa-typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.conversa-typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

/* ======================================
   GOOGLE AGENDA OVERLAY — BLOCO 5
   ====================================== */

.telinha-overlay {
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: 60;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    border-radius: 24px;
    overflow: hidden;
    transform: translateX(105%);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .telinha-overlay {
        border-radius: 16px;
    }
}

.telinha-overlay.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
}

/* Slide-up para sair (fechar aba) */
.telinha-overlay.slide-up {
    transform: translateY(-105%);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}

/* ── Notificação WhatsApp ── */
.telinha-whatsapp-notif {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    z-index: 70;
    padding: 6px 8px;
    transform: translateY(-120%);
    opacity: 0;
    /* Transição de SAÍDA: Mais lenta e suave */
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.8s ease;
    pointer-events: none;
}

.telinha-whatsapp-notif.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
    /* Transição de ENTRADA: Elegante sem pressa */
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.8s ease;
}

.telinha-notif-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.04);
}

.telinha-notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #e7fce6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.telinha-notif-icon svg {
    width: 22px;
    height: 22px;
}

.telinha-notif-body {
    flex: 1;
    min-width: 0;
}

.telinha-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.telinha-notif-head strong {
    font-size: 13px;
    color: #1a1a2e;
    font-weight: 600;
}

.telinha-notif-head span {
    font-size: 11px;
    color: #70757a;
}

.telinha-notif-body p {
    font-size: 12px;
    color: #5f6368;
    line-height: 1.4;
    margin: 0;
}

/* Keyframes */
@keyframes ma-blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes ma-floatUp {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes ma-bounce {

    0%,
    80%,
    100% {
        transform: scale(0)
    }

    40% {
        transform: scale(1)
    }
}

/* Mobile */
@media (max-width: 768px) {
    .conversa-floating-canvas {
        height: 520px;
        transform: translateX(0);
        /* Remove o deslocamento no mobile */
        max-width: 100%;
        border-radius: 16px;
        /* Suaviza a sombra no mobile para evitar clipping e linhas bruscas */
        box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.03),
            0 12px 24px rgba(0, 0, 0, 0.05);
    }

    .conversa-input-pill.collapsed {
        width: 48px;
        height: 48px;
    }
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {

    .topo {
        min-height: auto;
        padding: 112px 4px 64px;
        align-items: center;
    }

    .topo-conteudo {
        display: flex;
        flex-direction: column;
        gap: 0px;
        text-align: center;
        padding: 0;
        max-width: 100%;
    }

    .topo-palco-column {
        width: 100%;
        justify-content: center;
    }

    .topo-palco-glass {
        width: 100%;
        max-width: min(378px, calc(100vw - 8px));
        min-height: 540px;
        margin-top: -2px;
    }

    .topo-palco-glass::before {
        width: 290px;
        height: 408px;
    }

    .topo-celular-shell {
        width: 246px;
        margin-left: 0;
        transform: scale(1.25);
        transform-origin: top center;
    }

    .topo-celular-frame {
        height: 416px;
        padding: 4px;
        border-radius: 38px;
    }

    .topo-aparelho-island {
        top: 8px;
        width: 72px;
        height: 20px;
        padding-right: 7px;
    }

    .topo-aparelho-island-cam {
        width: 6px;
        height: 6px;
    }

    .topo-ios-statusbar {
        height: 36px;
        padding: 10px 16px 0;
    }

    .topo-ios-time {
        font-size: 0.62rem;
    }

    .topo-ios-statusbar-right {
        gap: 3px;
    }

    .topo-ios-signal {
        width: 12px;
        height: 8px;
    }

    .topo-ios-wifi {
        width: 10px;
        height: 8px;
    }

    .topo-ios-battery-svg {
        width: 20px;
        height: 10px;
    }

    .topo-app-zap {
        border-radius: 34px;
    }

    .topo-zap-header {
        height: 72px;
        padding: 36px 8px 6px;
    }

    .topo-zap-header-left {
        width: 20px;
    }

    .topo-zap-back {
        width: 14px;
        height: 14px;
    }

    .topo-zap-header-center {
        gap: 6px;
    }

    .topo-zap-avatar {
        width: 26px;
        height: 26px;
    }

    .topo-zap-contact strong {
        font-size: 0.68rem;
    }

    .topo-zap-verified {
        width: 10px;
        height: 10px;
    }

    .topo-zap-contact span {
        font-size: 0.52rem;
    }

    .topo-zap-header-actions {
        gap: 8px;
    }

    .topo-zap-header-actions svg {
        width: 13px;
        height: 13px;
    }

    .topo-zap-body {
        height: calc(100% - 122px);
        padding: 10px 7px 10px;
        gap: 5px;
        text-align: left;
    }

    .topo-zap-message {
        max-width: 88%;
        padding: 5px 7px 6px;
        border-radius: 7px;
        font-size: 0.64rem;
        line-height: 1.36;
        text-align: left;
    }

    .topo-zap-message strong {
        font-size: 0.61rem;
        margin-bottom: 2px;
        text-align: left;
    }

    .topo-zap-message-content,
    .topo-zap-message-content span {
        text-align: left;
    }

    .topo-zap-meta {
        font-size: 0.5rem;
        justify-content: flex-end;
        text-align: right;
    }

    .topo-zap-input {
        height: 38px;
        padding: 4px 5px 8px;
        gap: 3px;
    }

    .topo-zap-plus {
        width: 20px;
        height: 20px;
    }

    .topo-zap-plus svg {
        width: 14px;
        height: 14px;
    }

    .topo-zap-camera {
        width: 20px;
        height: 20px;
    }

    .topo-zap-camera svg {
        width: 14px;
        height: 14px;
    }

    .topo-zap-mic {
        width: 20px;
        height: 20px;
    }

    .topo-zap-mic svg {
        width: 14px;
        height: 14px;
    }

    .topo-zap-typebox {
        height: 26px;
        padding: 0 6px;
        font-size: 0.55rem;
    }

    .topo-zap-sticker-icon {
        width: 14px;
        height: 14px;
    }

    /* ORBIT MOBILE - NEURAL CONSTELLATION */
    .orbita-section {
        padding: 60px 0 20px;
        /* Reduzido de 80px para 20px */
        background-color: #F5F0EB;
        overflow-x: hidden;
    }

    .orbita-title {
        padding: 0 5vw;
        margin-bottom: 10px;
        /* Ajustado de 25px para 10px para um equilíbrio melhor */
    }

    .orbita-title h2 {
        font-size: 1.65rem;
        line-height: 1.3;
    }

    .orbita-title p {
        font-size: 0.82rem;
    }

    .orbita-wrapper {
        width: 100%;
        height: 115vw;
        /* Reduzido de 130vw para 115vw */
        min-height: 440px;
        /* Reduzido de 480px para 440px */
        max-height: 600px;
        /* Reduzido de 650px para 600px */
        border: none;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
    }

    .orbita-centro {
        position: absolute;
        top: 47%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 65px;
        height: 65px;
        z-index: 10;
        margin: 0;
    }

    .orbita-centro svg {
        width: 32px;
        height: 32px;
    }

    .orbita-item {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 0;
        width: var(--mobile-radius);
        transform: translateY(-50%) rotate(var(--mobile-angle));
        z-index: 1;
    }

    .orbita-card {
        position: absolute;
        left: 100%;
        top: 50%;
        width: 100px;
        /* Largura ajustada para acomodar palavras longas como "Compromissos" */
        flex-direction: column;
        gap: 4px;
        /* Menos gap para ficar menorzinho */
        padding: 8px 4px 6px;
        /* Menos padding */
        text-align: center;
        justify-content: center;
        border-radius: 12px;
        word-break: break-word;
        /* Garante que palavras muito longas não vazem */
        /* Substituímos o !important por uma animação dedicada mobile */
        animation: card-float-mobile 4s ease-in-out infinite;
        /* Indicador visual de clicabilidade */
        -webkit-tap-highlight-color: rgba(193, 131, 251, 0.15);
    }

    /* Feedback tátil ao tocar no card */
    .orbita-card:active {
        transform: translate(-50%, -50%) rotate(calc(-1 * var(--mobile-angle))) scale(0.93) !important;
        animation-play-state: paused;
        background: rgba(255, 255, 255, 0.98);
        box-shadow:
            0 4px 12px rgba(193, 131, 251, 0.22),
            0 0 0 2px rgba(193, 131, 251, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 1);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    /* Delays independentes por posição — flutuação orgânica mobile */
    .orbita-item:nth-child(2) .orbita-card {
        animation-delay: 0s;
        animation-duration: 3.8s;
    }

    .orbita-item:nth-child(3) .orbita-card {
        animation-delay: -1.2s;
        animation-duration: 4.3s;
    }

    .orbita-item:nth-child(4) .orbita-card {
        animation-delay: -2.5s;
        animation-duration: 3.6s;
    }

    .orbita-item:nth-child(5) .orbita-card {
        animation-delay: -0.7s;
        animation-duration: 4.8s;
    }

    .orbita-item:nth-child(6) .orbita-card {
        animation-delay: -3.1s;
        animation-duration: 4.1s;
    }

    .orbita-item:nth-child(7) .orbita-card {
        animation-delay: -1.8s;
        animation-duration: 3.9s;
    }

    .orbita-item:nth-child(8) .orbita-card {
        animation-delay: -0.4s;
        animation-duration: 4.5s;
    }

    @keyframes card-float-mobile {
        0% {
            transform: translate(-50%, -50%) rotate(calc(-1 * var(--mobile-angle))) translateY(0px);
        }

        50% {
            transform: translate(-50%, -50%) rotate(calc(-1 * var(--mobile-angle))) translateY(-5px);
        }

        100% {
            transform: translate(-50%, -50%) rotate(calc(-1 * var(--mobile-angle))) translateY(0px);
        }
    }

    .cartao-icone {
        width: 28px;
        height: 28px;
        margin: 0 auto;
    }

    .cartao-icone svg {
        width: 14px;
        height: 14px;
    }

    .cartao-rotulo {
        font-size: 0.65rem;
        line-height: 1.25;
    }

    .cartao-seta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin: 2px auto 0;
        font-size: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(193, 131, 251, 0.18), rgba(226, 123, 183, 0.14));
        border: 1px solid rgba(193, 131, 251, 0.2);
        animation: tap-hint-pulse 2.2s ease-in-out infinite;
        position: relative;
    }

    /* Ícone de chevron dentro do círculo */
    .cartao-seta::after {
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        border-right: 1.5px solid #8b45d1;
        border-bottom: 1.5px solid #8b45d1;
        transform: rotate(-45deg) translateX(-1px);
    }

    /* Animação de pulso sutil para indicar interatividade */
    @keyframes tap-hint-pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(193, 131, 251, 0);
            opacity: 0.7;
        }
        50% {
            box-shadow: 0 0 0 4px rgba(193, 131, 251, 0.12);
            opacity: 1;
        }
    }

    /* Constellation Map Positions - 360 Harmonioso (Elipse) */
    .orbita-item:nth-child(2) {
        --mobile-angle: -90deg;
        /* Topo */
        --mobile-radius: 46vw;
    }

    .orbita-item:nth-child(3) {
        --mobile-angle: -38.6deg;
        /* Topo Direita */
        --mobile-radius: 40vw;
    }

    .orbita-item:nth-child(4) {
        --mobile-angle: 12.8deg;
        /* Direita */
        --mobile-radius: 32vw;
    }

    .orbita-item:nth-child(5) {
        --mobile-angle: 64.3deg;
        /* Baixo Direita */
        --mobile-radius: 40vw;
    }

    .orbita-item:nth-child(6) {
        --mobile-angle: 115.7deg;
        /* Baixo Esquerda */
        --mobile-radius: 40vw;
    }

    .orbita-item:nth-child(7) {
        --mobile-angle: 167.1deg;
        /* Esquerda */
        --mobile-radius: 32vw;
    }

    .orbita-item:nth-child(8) {
        --mobile-angle: 218.6deg;
        /* Topo Esquerda */
        --mobile-radius: 40vw;
    }
}

@media (max-width: 430px) {
    .topo {
        padding: 86px 2px 28px;
    }

    .topo-conteudo {
        gap: 18px;
    }

    .topo-palco-glass {
        max-width: min(380px, calc(100vw - 4px));
        min-height: 410px;
    }

    .topo-celular-shell {
        width: 238px;
    }

    .topo-celular-frame {
        height: 414px;
        border-radius: 36px;
    }

    .topo-app-zap {
        border-radius: 32px;
    }

    .topo-zap-message {
        font-size: 0.59rem;
    }

    .topo-zap-typebox {
        font-size: 0.58rem;
    }

}

.cartao-recurso {
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.8s ease,
        border-color 0.8s ease,
        box-shadow 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    color: #ffffff;
    position: relative;
}

/* Glow radial sutil no topo do card */
.cartao-recurso::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    z-index: 1;
}

.cartao-recurso:hover {
    /* Basic hover is now handled by the JS adding .is-focused, but we keep a subtle transition just in case JS fails */
    border-color: rgba(193, 131, 251, 0.2);
}

.cartao-recurso.is-focused {
    transform: scale(1.05) translateY(-10px);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

.cartao-recurso.is-blurred {
    transform: scale(0.95);
    opacity: 0.8;
    filter: blur(1.5px);
    pointer-events: none;
}

.recursos-veu.is-active {
    opacity: 1;
    pointer-events: auto;
    /* allows the overlay to catch clicks to unfocus if we want to add that later */
}

.cartao-tela {
    height: 210px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Separador visual entre ilustração e conteúdo ── */
.cartao-texto {
    flex: 1;
    padding: 24px 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    position: relative;
}

.cartao-texto-interno {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cartao-texto h3 {
    font-family: var(--font-poppins), sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: #ffffff;
}

.cartao-texto p {
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
}

/* Responsiveness for new block */
@media (max-width: 992px) {

    /* Mobile Focus Logic */
    .cartao-recurso {
        transform: scale(0.85);
        opacity: 0.75;
    }

    .cartao-recurso.is-focused {
        transform: scale(1);
        opacity: 1;
        /* No translateY on mobile so it stays properly centered */
    }

    .cartao-recurso.is-blurred {
        transform: scale(0.82);
        opacity: 0.75;
        filter: blur(1.5px);
    }
}









/* ══════════════════════════════════════════
   SEÇÃO FAQ — PERGUNTAS FREQUENTES
   ══════════════════════════════════════════ */

.faq-section {
    width: 100%;
    padding: 40px 8vw 120px;
    position: relative;
}

/* ── Responsivo ── */
@media (max-width: 768px) {
    .faq-section {
        padding: 40px 6vw 80px;
    }
}

@media (max-width: 640px) {

    .rodape-interno,
    .rodape-base {
        align-items: center;
        text-align: center;
    }
}


/* ── As telas do Stark dentro dos cards ────────────────────────────────────
   ⚠️ TEMA CLARO, e a correção veio do cliente: eu escrevi estas telas com
   texto branco, pensando no fundo escuro da seção — mas o `.mosaico-card` tem
   fundo CLARO (#f4f5f7 → #fff). Texto branco em card branco não aparece.

   O desenho continua sendo o da aba de Projetos do produto; o que muda é a
   polaridade das cores. */

:root {
    --sk-tinta: #141a24;
    --sk-fraca: #6b7280;
    --sk-borda: rgba(20, 26, 36, 0.10);
    --sk-fundo: #f8fafc;
}

/* O quadro (Kanban) */
.stark-kanban {
    background: var(--sk-fundo);
    border: 1px solid var(--sk-borda);
    border-radius: 16px;
    padding: 14px;
    font-size: 11px;
    color: var(--sk-tinta);
}
.stark-kanban-topo { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.stark-kanban-busca {
    flex:1; padding:7px 10px; border-radius:9px;
    background:#fff; border:1px solid var(--sk-borda); color:#9aa3b2;
}
.stark-kanban-novo {
    padding:7px 12px; border-radius:9px; white-space:nowrap; font-weight:600;
    background:linear-gradient(135deg,#1d4ed8 0%,#38bdf8 100%); color:#fff;
}
.stark-kanban-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:12px; }
.stark-kanban-stats span {
    display:flex; flex-direction:column; gap:2px; padding:8px 9px; border-radius:11px;
    background:#fff; border:1px solid var(--sk-borda);
    font-size:9.5px; color:var(--sk-fraca);
}
.stark-kanban-stats b { font-size:15px; color:var(--sk-tinta); font-weight:700; }
.stark-kanban-colunas { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.stark-col { display:flex; flex-direction:column; gap:6px; min-width:0; }
.stark-col-topo {
    display:flex; align-items:center; gap:5px; padding:7px 8px; border-radius:10px;
    background:#fff; border:1px solid var(--sk-borda);
    font-weight:600; font-size:9.5px; white-space:nowrap; overflow:hidden; color:var(--sk-tinta);
}
.stark-col-topo i { width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.stark-col-topo em { margin-left:auto; font-style:normal; color:var(--sk-fraca); }
.stark-proj {
    padding:9px; border-radius:11px; background:#fff;
    border:1px solid var(--sk-borda); box-shadow:0 1px 3px rgba(20,26,36,.05);
}
.stark-proj b { display:block; font-size:10.5px; line-height:1.3; margin-bottom:7px; font-weight:600; color:var(--sk-tinta); }
.stark-proj small { display:block; margin-top:5px; font-size:9px; color:var(--sk-fraca); }
.stark-proj.concluido b { color:var(--sk-fraca); }
.stark-barra { display:block; height:4px; border-radius:99px; background:rgba(20,26,36,.09); overflow:hidden; }
.stark-barra i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#1d4ed8,#38bdf8); }
.stark-vazio {
    padding:16px 8px; border-radius:11px; text-align:center; font-size:9.5px;
    border:1px dashed var(--sk-borda); color:#9aa3b2;
}

/* O cartão de projeto com etapas */
.stark-etapas { display:flex; justify-content:center; padding:6px 0; }
.stark-etapa-card {
    width:100%; max-width:300px; padding:14px; border-radius:16px;
    background:#fff; border:1px solid var(--sk-borda);
    border-left:3px solid hsl(217 84% 56%);
    box-shadow:0 2px 10px rgba(20,26,36,.06);
    font-size:11px; color:var(--sk-tinta);
}
.stark-etapa-topo { display:flex; align-items:flex-start; gap:8px; }
.stark-etapa-topo b { flex:1; font-size:12.5px; font-weight:700; line-height:1.25; }
.stark-etapa-menu { color:#b6bdc9; letter-spacing:1px; }
.stark-etapa-desc { margin-top:3px; font-size:10px; color:var(--sk-fraca); }
.stark-etapa-prog { display:flex; align-items:center; gap:8px; margin:11px 0 9px; }
.stark-etapa-prog .stark-barra { flex:1; }
.stark-etapa-prog .stark-barra i { background:hsl(217 84% 56%); }
.stark-etapa-prog em { font-style:normal; font-size:10.5px; font-weight:700; }
.stark-etapa-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.stark-etapa-lista li {
    display:flex; align-items:center; gap:8px; padding:4px 5px; border-radius:8px;
    font-size:10.5px; color:var(--sk-tinta);
}
.stark-etapa-lista li.ok { color:#9aa3b2; text-decoration:line-through; }
.stark-etapa-lista .cx {
    width:15px; height:15px; flex:0 0 auto; border-radius:5px; font-size:9px;
    border:1px solid var(--sk-borda); display:grid; place-items:center; color:#fff;
}
.stark-etapa-lista .cx.marcada { background:hsl(217 84% 56%); border-color:transparent; }
.stark-etapa-add { margin-top:9px; font-size:10px; color:#9aa3b2; }

/* O mural de papéis (Anotações) */
.stark-mural { font-size:11px; }
.stark-mural-busca {
    padding:7px 10px; border-radius:9px; margin-bottom:10px;
    background:#fff; border:1px solid var(--sk-borda); color:#9aa3b2;
}
.stark-papeis { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.stark-papel {
    position:relative; padding:10px 11px; border-radius:4px; overflow:hidden;
    background:var(--pp); color:#2b2b2b; min-height:74px;
    box-shadow:0 3px 10px rgba(20,26,36,.14);
}
.stark-papel::after {
    content:""; position:absolute; right:0; bottom:0; width:16px; height:16px;
    background:linear-gradient(135deg, transparent 50%, var(--pd) 50%);
}
.stark-papel b { display:block; font-size:11px; font-weight:700; margin-bottom:4px; }
.stark-papel p { font-size:10px; line-height:1.35; opacity:.78; margin:0; }
.stark-papel ul { list-style:none; margin:0; padding:0; font-size:10px; line-height:1.6; }
.stark-papel li.ok { opacity:.5; text-decoration:line-through; }

@media (max-width: 700px) {
    .stark-kanban-colunas { grid-template-columns:repeat(2,1fr); }
    .stark-kanban-stats { grid-template-columns:repeat(2,1fr); }
}

/* O texto dos cards encosta embaixo, para os títulos alinharem lado a lado. */
.stark-bento-a .mosaico-content,
.stark-bento-b .mosaico-content,
.stark-bento-largo .mosaico-content { margin-top: auto; padding-top: 22px; }

/* ===== Telas do Stark na seção de Finanças =====
   ⚠️ TEMA CLARO. O `.cartao-recurso` é claro (#f4f5f7→#fff): texto
   branco aqui some, e já sumiu uma vez na seção de Projetos. Toda cor de texto
   abaixo é escura de propósito. */
.stark-fin{width:100%;box-sizing:border-box;padding:0 20px;font-family:'Poppins',sans-serif}
.stark-fin-tela{background:#fff;border:1px solid #e6e8ec;border-radius:14px;padding:14px;
  box-shadow:0 8px 24px rgba(16,24,40,.08)}
.stark-fin-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.stark-fin-kicker{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8a93a3;font-weight:600}
.stark-fin-total{font-size:20px;font-weight:800;color:#111827;font-variant-numeric:tabular-nums}
.stark-fin-pill{font-size:10px;font-weight:600;color:#2f7ff0;background:#e8f1fe;border-radius:999px;padding:4px 9px}

/* Assinaturas: próximas cobranças */
.stark-fin-linha{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #f0f2f5}
.stark-fin-linha:first-of-type{border-top:0}
.stark-fin-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex:0 0 auto}
.stark-fin-nome{flex:1;min-width:0}
.stark-fin-nome b{display:block;font-size:12px;font-weight:600;color:#111827;line-height:1.3}
.stark-fin-nome small{font-size:10px;color:#8a93a3}
.stark-fin-val{font-size:12px;font-weight:700;color:#111827;font-variant-numeric:tabular-nums}

/* Orçamentos: barras */
.stark-fin-orc{margin-top:10px}
.stark-fin-orc-topo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.stark-fin-orc-topo b{font-size:12px;font-weight:600;color:#111827}
.stark-fin-orc-topo span{font-size:11px;color:#6b7280;font-variant-numeric:tabular-nums}
.stark-fin-barra{height:7px;border-radius:999px;background:#eef0f4;overflow:hidden}
.stark-fin-barra i{display:block;height:100%;border-radius:999px}
.stark-fin-aviso{display:inline-block;margin-top:6px;font-size:10px;font-weight:600;
  color:#b42318;background:#fee4e2;border-radius:999px;padding:3px 8px}

/* Extrato vindo do WhatsApp */
.stark-fin-zap{display:flex;justify-content:flex-end;margin-bottom:10px}
.stark-fin-bolha{background:#d9fdd3;border-radius:12px 12px 3px 12px;padding:7px 11px;
  font-size:12px;color:#111827;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.stark-fin-tag{font-size:10px;font-weight:600;border-radius:999px;padding:3px 8px;white-space:nowrap}

/* ⚠️ O CARD INTEIRO É BRANCO, e não um retângulo branco dentro do card.
   A `.cartao-recurso` é vidro escuro sobre fundo escuro; a tela do
   Stark é clara. Encaixar uma na outra deixava uma "ilha" branca com moldura.
   Aqui o card assume a cor da tela, e a tela perde fundo, borda e sombra —
   passa a ser o próprio card. */
.cartao-recurso.stark-card{background:#fff;border:1px solid #e6e8ec;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 14px 40px rgba(16,24,40,.16)}
.cartao-recurso.stark-card:hover{border-color:#2f7ff0}
.cartao-recurso.stark-card .cartao-texto h3{color:#111827;font-weight:700}
.cartao-recurso.stark-card .cartao-texto p{color:#4b5563;font-weight:400}
.cartao-recurso.stark-card .cartao-tela{align-items:flex-start;height:230px}
.cartao-recurso.stark-card .stark-fin{padding:0}
.cartao-recurso.stark-card .stark-fin-tela{background:transparent;border:0;border-radius:0;
  box-shadow:none;padding:20px 24px 0}

/* ===== Categorias do Stark =====
   Tela clara sobre a seção escura, com moldura própria — aqui ela É uma janela
   do painel, não o card inteiro (o caso dos `.stark-card` era outro). */
.stark-cat-canvas{position:relative;width:100%;max-width:520px;margin:0 auto;
  font-family:'Poppins',sans-serif;perspective:1200px}
.stark-cat-tela{background:#fff;border:1px solid #e6e8ec;border-radius:18px;padding:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden}
.stark-cat-topo{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.stark-cat-kicker{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8a93a3;font-weight:600}
.stark-cat-total{font-size:24px;font-weight:800;color:#111827;font-variant-numeric:tabular-nums;line-height:1.15}
.stark-cat-novo{font-size:11px;font-weight:600;color:#fff;background:#2f7ff0;border-radius:9px;
  padding:7px 12px;white-space:nowrap;transition:transform .18s ease,filter .18s ease}
.stark-cat-novo.apertado{transform:scale(.94);filter:brightness(.88)}
.stark-cat-cab{display:flex;align-items:center;gap:10px;padding:0 2px 6px;
  border-bottom:1px solid #f0f2f5;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#a2a9b5;font-weight:600}
.stark-cat-cab .c-nome{flex:1}
.stark-cat-cab .c-val{width:82px;text-align:right}
.stark-cat-cab .c-pct{width:42px;text-align:right}
.stark-cat-cab .c-qtd{width:42px;text-align:right}

.stark-cat-linha{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #f6f7f9}
.stark-cat-bola{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.stark-cat-linha .c-nome{flex:1;font-size:12.5px;font-weight:600;color:#111827;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stark-cat-linha .c-val{width:82px;text-align:right;font-size:12.5px;font-weight:700;color:#111827;font-variant-numeric:tabular-nums}
.stark-cat-linha .c-pct{width:42px;text-align:right;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.stark-cat-linha .c-qtd{width:42px;text-align:right;font-size:11.5px;color:#8a93a3;font-variant-numeric:tabular-nums}
/* A categoria nova entra crescendo — o olho precisa ver ONDE ela apareceu. */
.stark-cat-linha.nasceu{animation:starkCatNasce .55s cubic-bezier(.16,1,.3,1) both}
@keyframes starkCatNasce{
  from{opacity:0;transform:translateY(-10px);background:#e8f1fe}
  60%{opacity:1;background:#e8f1fe}
  to{opacity:1;transform:none;background:transparent}}

/* Caixa "Nova categoria" — o mesmo diálogo do painel */
.stark-cat-modal{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(16,24,40,.34);border-radius:18px;opacity:0;pointer-events:none;
  transition:opacity .28s ease;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.stark-cat-modal.aberto{opacity:1}
.stark-cat-caixa{width:82%;max-width:330px;background:#fff;border-radius:16px;padding:18px;
  box-shadow:0 22px 50px rgba(0,0,0,.32);transform:translateY(14px) scale(.96);
  transition:transform .28s cubic-bezier(.16,1,.3,1)}
.stark-cat-modal.aberto .stark-cat-caixa{transform:none}
.stark-cat-caixa h4{font-size:14px;font-weight:700;color:#111827;margin:0 0 12px}
.stark-cat-rot{font-size:10px;font-weight:600;color:#6b7280;display:block;margin-bottom:5px}
.stark-cat-campo{border:1px solid #dfe3e9;border-radius:9px;padding:9px 11px;font-size:12.5px;
  color:#111827;min-height:36px;box-sizing:border-box;transition:border-color .2s ease}
.stark-cat-campo.focado{border-color:#2f7ff0;box-shadow:0 0 0 3px rgba(47,127,240,.14)}
.stark-cat-campo .vazio{color:#b6bcc7}
.stark-cat-cursor{display:inline-block;width:1.5px;height:13px;background:#2f7ff0;
  vertical-align:-2px;margin-left:1px;animation:starkPisca 1s steps(1) infinite}
@keyframes starkPisca{50%{opacity:0}}
.stark-cat-cores{display:flex;gap:8px;margin:12px 0 16px}
.stark-cat-cor{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px transparent;
  transition:box-shadow .2s ease,transform .2s ease}
.stark-cat-cor.escolhida{box-shadow:0 0 0 2px #111827;transform:scale(1.12)}
.stark-cat-acoes{display:flex;justify-content:flex-end;gap:8px}
.stark-cat-btn{font-size:11.5px;font-weight:600;border-radius:9px;padding:8px 14px}
.stark-cat-btn.sec{color:#6b7280;background:#f2f4f7}
.stark-cat-btn.pri{color:#fff;background:#2f7ff0;transition:transform .18s ease,filter .18s ease}
.stark-cat-btn.pri.apertado{transform:scale(.94);filter:brightness(.88)}

/* A setinha do mouse, no azul da marca. */
.stark-cat-seta{position:absolute;left:0;top:0;width:20px;height:20px;z-index:5;opacity:0;
  transition:left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1),opacity .3s ease;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));pointer-events:none}
.stark-cat-seta.visivel{opacity:1}

/* ===== Visão geral do Stark: a tela do painel dentro do celular ===== */
.stark-vg{position:relative;width:100%;max-width:380px;height:520px;margin:0 auto;
  background:#fff;border-radius:24px;overflow:hidden;font-family:'Poppins',sans-serif;
  color:#111827;text-align:left;border:1px solid #e6e8ec;
  box-shadow:0 8px 16px rgba(0,0,0,.06),0 24px 48px rgba(0,0,0,.10)}
.stark-vg-topo{display:flex;justify-content:space-between;align-items:center;
  padding:16px 18px 12px;border-bottom:1px solid #f0f2f5;flex-shrink:0}
.stark-vg-topo b{font-size:15px;font-weight:700}
.stark-vg-mes{font-size:10.5px;font-weight:600;color:#2f7ff0;background:#e8f1fe;border-radius:999px;padding:5px 10px}
/* A rolagem é a animação: mostra que a tela tem mais coisa embaixo. */
.stark-vg-rolo{padding:14px 18px 20px;animation:starkVgRola 16s ease-in-out infinite}
@keyframes starkVgRola{0%,18%{transform:translateY(0)}48%,62%{transform:translateY(-150px)}92%,100%{transform:translateY(0)}}
.stark-vg-kicker{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#8a93a3;font-weight:700}
.stark-vg-saldo{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px}
.stark-vg-var{font-size:10.5px;font-weight:600;color:#067647;margin-top:2px}
.stark-vg-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 18px}
.stark-vg-tile{border:1px solid #edeff3;border-radius:12px;padding:9px 11px}
.stark-vg-tile span{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#8a93a3}
.stark-vg-tile b{display:block;font-size:14px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.stark-vg-sec{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 9px}
.stark-vg-sec b{font-size:12.5px;font-weight:700}
.stark-vg-sec i{font-size:10.5px;font-style:normal;font-weight:600;color:#2f7ff0}
.stark-vg-cat{margin-bottom:11px}
.stark-vg-cat-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.stark-vg-cat-top span{font-size:11.5px;font-weight:600}
.stark-vg-cat-top em{font-size:11px;font-style:normal;color:#6b7280;font-variant-numeric:tabular-nums}
.stark-vg-tr{height:6px;border-radius:999px;background:#eef0f4;overflow:hidden}
.stark-vg-tr i{display:block;height:100%;border-radius:999px}
.stark-vg-linha{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid #f4f5f8}
.stark-vg-linha:first-of-type{border-top:0}
.stark-vg-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;flex:0 0 auto}
.stark-vg-linha .n{flex:1;min-width:0}
.stark-vg-linha .n b{display:block;font-size:11.5px;font-weight:600;line-height:1.3}
.stark-vg-linha .n small{font-size:9.5px;color:#8a93a3}
.stark-vg-linha .v{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
/* Véu no rodapé: o conteúdo some por baixo em vez de ser cortado a faca. */
.stark-vg::after{content:'';position:absolute;left:0;right:0;bottom:0;height:52px;
  background:linear-gradient(to top,#fff,rgba(255,255,255,0));pointer-events:none}

/* ===== Agenda do Stark: a telinha que entra pela direita ===== */
.telinha-overlay .stark-ag{position:absolute;inset:0;background:#fff;border-radius:inherit;
  display:flex;flex-direction:column;font-family:'Poppins',sans-serif;color:#111827;text-align:left;overflow:hidden}
.stark-ag-topo{display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px 10px;border-bottom:1px solid #f0f2f5;flex-shrink:0}
.stark-ag-topo b{font-size:14px;font-weight:700}
.stark-ag-topo span{font-size:10px;font-weight:600;color:#2f7ff0;background:#e8f1fe;border-radius:999px;padding:4px 9px}
.stark-ag-corpo{padding:12px 16px;overflow:hidden}
.stark-ag-mes{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.stark-ag-mes b{font-size:11.5px;font-weight:700}
.stark-ag-mes i{font-style:normal;color:#b6bcc7;font-size:12px;letter-spacing:6px}
.stark-ag-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.stark-ag-dow{font-size:8px;font-weight:700;letter-spacing:.04em;color:#a2a9b5;text-align:center;padding-bottom:2px}
.stark-ag-dia{aspect-ratio:1;display:grid;place-items:center;position:relative;
  font-size:10.5px;font-weight:500;border-radius:8px;color:#111827}
.stark-ag-dia.fora{color:#d3d7de}
.stark-ag-dia.hoje{box-shadow:inset 0 0 0 1px #2f7ff0}
.stark-ag-dia.sel{background:#2f7ff0;color:#fff;font-weight:700}
.stark-ag-pontos{position:absolute;bottom:3px;display:flex;gap:2px}
.stark-ag-pontos i{width:3px;height:3px;border-radius:50%;display:block}
.stark-ag-sec{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 8px}
.stark-ag-sec b{font-size:12px;font-weight:700}
.stark-ag-sec em{font-style:normal;font-size:10px;color:#8a93a3}
.stark-ag-item{display:flex;gap:9px;align-items:flex-start;border:1px solid #edeff3;
  border-radius:12px;padding:8px 10px;margin-bottom:7px}
.stark-ag-emo{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;background:rgba(47,127,240,.08);flex:0 0 auto}
.stark-ag-item .t{min-width:0;flex:1}
.stark-ag-item .t b{display:block;font-size:11.5px;font-weight:600;line-height:1.3}
.stark-ag-metas{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:3px;font-size:9.5px;color:#8a93a3}
.stark-ag-pri{display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:1px 6px;font-weight:700}
.stark-ag-pri i{width:5px;height:5px;border-radius:50%;display:block}
/* A entrada nova pisca uma vez, para o olho achar o que acabou de ser marcado. */
.stark-ag-item.novo{animation:starkAgNasce .6s cubic-bezier(.16,1,.3,1) both}
@keyframes starkAgNasce{from{opacity:0;transform:translateY(-8px);border-color:#2f7ff0;background:#e8f1fe}
  to{opacity:1;transform:none;border-color:#edeff3;background:transparent}}

/* ===== Órbita do Stark: azul, e com a fala acendendo cada carta ===========
   O que existia era decoração parada: sete cartas boiando e um hub. Agora a
   animação CONTA a coisa — a frase aparece no hub, o feixe corre até a carta
   que atende aquele pedido, e ela acende. É a mesma ideia do produto: você
   fala, e alguma coisa acontece do outro lado. */
.orbita-section::before{background:
  radial-gradient(ellipse 50% 60% at 80% 20%, rgba(47,127,240,.09) 0%, transparent 70%),
  radial-gradient(ellipse 40% 50% at 20% 80%, rgba(56,189,248,.07) 0%, transparent 70%)}
.orbita-item .cartao-icone,
.orbita-item:nth-child(3n+1) .cartao-icone,.orbita-item:nth-child(3n+2) .cartao-icone,.orbita-item:nth-child(3n) .cartao-icone{
  background:linear-gradient(135deg,rgba(47,127,240,.16),rgba(56,189,248,.12));color:#1d4ed8}
.orbita-card::after{background:linear-gradient(90deg,transparent 0%,rgba(47,127,240,.28) 40%,rgba(56,189,248,.22) 60%,transparent 100%)}
.orbita-card:hover .cartao-icone{background:linear-gradient(135deg,rgba(47,127,240,.24),rgba(56,189,248,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 0 18px rgba(47,127,240,.2),0 10px 20px rgba(29,78,216,.16)}
.orbita-card:hover .cartao-seta,.cartao-seta{color:rgba(29,78,216,.75)}
.orbita-card:hover .cartao-seta{color:#1d4ed8}
.cartao-seta::after{border-right-color:#1d4ed8;border-bottom-color:#1d4ed8}
.orbita-onda{border-color:rgba(47,127,240,.45)}
.orbita-centro{background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.92),transparent 38%),
  linear-gradient(145deg,#fff 0%,#eaf1fd 100%)}

/* A carta que a frase acabou de acionar. */
.orbita-card.aceso{background:rgba(255,255,255,.99);
  border-color:rgba(47,127,240,.55)!important;animation-play-state:paused;
  box-shadow:0 0 0 3px rgba(47,127,240,.16),0 18px 44px rgba(29,78,216,.22);
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle))) scale(1.07)}
.orbita-card.aceso .cartao-icone{background:linear-gradient(135deg,#1d4ed8,#38bdf8);color:#fff}

/* O feixe que sai do hub e corre até a carta acesa. */
.orbita-feixe{position:absolute;top:50%;left:50%;height:2px;width:170px;z-index:0;
  transform-origin:0 50%;pointer-events:none;opacity:0;border-radius:2px;
  background:linear-gradient(90deg,rgba(47,127,240,.85),rgba(56,189,248,.15));
  transition:opacity .3s ease}
.orbita-feixe.ligado{opacity:1;animation:starkFeixe 1s ease-out}
@keyframes starkFeixe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* A frase falada, num balão de áudio sob o hub. */
.orbita-fala{position:absolute;top:calc(50% + 58px);left:50%;transform:translate(-50%,0) scale(.96);
  z-index:12;display:flex;align-items:center;gap:9px;white-space:nowrap;
  background:#fff;border:1px solid rgba(47,127,240,.25);border-radius:999px;padding:8px 15px;
  box-shadow:0 12px 30px rgba(29,78,216,.16);opacity:0;transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1);
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;color:#111827}
.orbita-fala.visivel{opacity:1;transform:translate(-50%,0) scale(1)}
.orbita-fala .onda{display:flex;align-items:center;gap:2px;height:14px}
.orbita-fala .onda i{width:2.5px;border-radius:2px;background:#2f7ff0;height:5px;
  animation:starkOnda .9s ease-in-out infinite}
.orbita-fala .onda i:nth-child(2){animation-delay:.12s}
.orbita-fala .onda i:nth-child(3){animation-delay:.24s}
.orbita-fala .onda i:nth-child(4){animation-delay:.36s}
.orbita-fala .onda i:nth-child(5){animation-delay:.48s}
@keyframes starkOnda{0%,100%{height:5px;opacity:.6}50%{height:14px;opacity:1}}
@media (max-width:768px){.orbita-fala{font-size:11px;padding:6px 12px;top:calc(47% + 46px)}
  .orbita-feixe{display:none}}
/* Quem pediu menos movimento não recebe nada piscando. */
@media (prefers-reduced-motion:reduce){
  .orbita-fala,.orbita-feixe{transition:none;animation:none}
  .orbita-card.aceso{animation:none}}

/* ⚠️ No celular a carta é posicionada por --mobile-angle, não por --angle.
   Deixar o `transform` da carta acesa apontando para --angle produziria um
   calc() inválido — o navegador descarta a regra inteira e o efeito some sem
   dizer nada. Aqui a carta acesa só cresce, sem tocar no giro. */
@media (max-width:768px){
  .orbita-card.aceso{transform:translate(-50%,-50%) rotate(calc(-1 * var(--mobile-angle))) scale(1.06)}
}

/* ===== O botão do Stark (o azul espelhado, com o brilho passando) =========
   Portado de src/app/globals.css — mesmo gradiente radial, mesma sombra e o
   mesmo brilho em `plus-lighter`. É o botão que a pessoa vai reencontrar
   dentro do produto; ele não pode ser "parecido", tem que ser o mesmo. */
.stark-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:auto;cursor:pointer;overflow:hidden;isolation:isolate;border-radius:.75rem;
  clip-path:inset(0 round .75rem);border:1px solid #ffffff4d;padding:.75rem 1.6rem;
  font-family:'Poppins',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  font-size:.8rem;color:#fff!important;text-decoration:none;
  transition:all .5s cubic-bezier(.4,0,.2,1);
  background:radial-gradient(67.54% 100.03% at 50% 0%,#e3f2fd,#90caf9 25.48%,#1e88e5 62.5%,#0d47a1);
  box-shadow:0 6px 23px #0d47a133,0 14px 54px #0d47a180}
.stark-btn:hover{transform:translateY(-.15rem)}
.stark-btn:active{transform:scale(.97)}
.stark-btn::before{content:"";pointer-events:none;position:absolute;top:0;bottom:0;left:-45%;width:45%;
  transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  mix-blend-mode:plus-lighter;animation:stark-brilho 3s linear infinite}
@keyframes stark-brilho{0%{left:-45%;opacity:0}25%{opacity:.9}60%{left:100%;opacity:.9}100%{left:130%;opacity:0}}
/* Quem pediu menos movimento não vê o brilho correndo sem parar. */
@media (prefers-reduced-motion:reduce){.stark-btn::before{animation:none;opacity:0}}
.stark-btn.largo{width:100%}

/* ⚠️ O avatar do Stark é um PNG quadrado com fundo transparente — não uma foto
   recortada em pessoa. Encostá-lo no fundo do bloco como a foto anterior
   deixaria o corpo "cortado a faca" na borda. Aqui ele fica apoiado, com um
   halo azul atrás para descolar do preto. */
.stark-cta-avatar{position:relative;bottom:0;width:240px;height:auto;display:block;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
.chamada-image:has(.stark-cta-avatar){align-items:flex-end}
.chamada-image:has(.stark-cta-avatar)::before{content:'';position:absolute;left:50%;bottom:0;
  width:300px;height:300px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 60%,rgba(47,127,240,.35),transparent 62%)}
@media (max-width:768px){.stark-cta-avatar{width:200px;margin:0 auto}}

/* ===== PREÇOS — no estilo dos cards que o cliente mandou ==================
   Fundo neutro com um halo azul em `multiply`, cards brancos, o plano em
   destaque com anel azul e fundo azul-claro, botão em degradê de baixo para
   cima. Escrito em CSS puro a partir do desenho aprovado (#206ce8, azul 500/600,
   neutro 100/200). */
#pricing-section{position:relative;width:100%;padding:88px 5vw 96px;background:#f5f5f5;
  font-family:'Poppins',sans-serif;overflow:hidden}
#pricing-section::before{content:'';position:absolute;top:0;left:10%;width:80%;height:100%;z-index:0;
  background:radial-gradient(circle at center,#206ce8 0%,transparent 70%);opacity:.6;mix-blend-mode:multiply;pointer-events:none}
.pr-topo{position:relative;z-index:1;text-align:center;max-width:760px;margin:0 auto 34px}
.pr-topo h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:500;color:#111827;line-height:1.12;margin:0 0 14px}
.pr-topo h2 mark{background:#dbeafe;color:#111827;border:1px dashed #3b82f6;border-radius:12px;
  padding:2px 10px;display:inline-block}
.pr-topo p{font-size:.98rem;color:#4b5563;max-width:70%;margin:0 auto}
.pr-grade{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;max-width:880px;margin:0 auto}
.pr-card{position:relative;background:#fff;border:1px solid #e5e5e5;border-radius:18px;padding:26px 24px;
  display:flex;flex-direction:column}
.pr-card.destaque{background:#eff6ff;box-shadow:0 0 0 2px #3b82f6;border-color:transparent}
.pr-card h3{font-size:1.75rem;font-weight:600;color:#111827;margin:0 0 6px}
.pr-selo{position:absolute;top:24px;right:22px;background:#3b82f6;color:#fff;border-radius:999px;
  padding:5px 13px;font-size:.78rem;font-weight:600}
.pr-desc{font-size:.86rem;color:#4b5563;margin:0 0 16px;min-height:40px}
.pr-preco{display:flex;align-items:baseline;gap:3px;margin-bottom:4px}
.pr-preco .cif{font-size:1.4rem;font-weight:600;color:#111827}
.pr-preco .val{font-size:2.6rem;font-weight:700;color:#111827;font-variant-numeric:tabular-nums;line-height:1}
.pr-preco .per{font-size:.95rem;color:#4b5563;margin-left:3px}
.pr-abaixo{font-size:.78rem;color:#6b7280;margin:0 0 18px;min-height:20px}
.pr-abaixo b{color:#1d4ed8;font-weight:700}
.pr-btn{display:block;width:100%;text-align:center;padding:15px 16px;border-radius:12px;
  font-size:1.05rem;font-weight:600;color:#fff!important;text-decoration:none;margin-bottom:20px;
  transition:transform .2s ease,filter .2s ease}
.pr-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.pr-btn.escuro{background:linear-gradient(to top,#171717,#525252);border:1px solid #404040;
  box-shadow:0 10px 24px rgba(23,23,23,.35)}
.pr-lista{list-style:none;margin:0;padding:0 0 18px;display:flex;flex-direction:column;gap:10px}
.pr-lista li{display:flex;align-items:flex-start;gap:11px;font-size:.86rem;color:#4b5563}
.pr-lista li .ic{flex:0 0 auto;width:22px;height:22px;color:#374151;display:grid;place-content:center}
.pr-inclui{border-top:1px solid #e5e5e5;padding-top:16px;margin-top:auto}
.pr-inclui h4{font-size:.95rem;font-weight:500;color:#111827;margin:0 0 12px}
.pr-inclui ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pr-inclui li{display:flex;align-items:flex-start;gap:11px;font-size:.86rem;color:#4b5563}
.pr-check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#f0fdf4;
  border:1px solid #3b82f6;display:grid;place-content:center;color:#3b82f6}
@media (max-width:820px){
  .pr-grade{grid-template-columns:1fr;max-width:440px}
  .pr-topo p{max-width:90%}
  .pr-desc,.pr-abaixo{min-height:0}
}

/* O mesmo fundo da seção de preços na órbita: cinza-neutro com o halo azul
   em `multiply`. ⚠️ O halo fica em z-index 0 e sem captar clique — as cartas
   estão em z-index 1 e o hub em 10, então nada passa por cima delas nem
   rouba o clique que abre o detalhe. */
.orbita-section{background-color:#f5f5f5}
.orbita-section::before{
  top:0;left:10%;right:auto;width:80%;height:100%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at center,#206ce8 0%,transparent 70%);
  opacity:.6;mix-blend-mode:multiply}

/* Sem o halo azul na órbita: só o fundo neutro. O `content` some junto — um
   pseudo-elemento transparente continuaria empilhado sobre o fundo à toa. */
.orbita-section::before{content:none}

/* ⚠️ O anel roxo atrás do celular do topo era um PSEUDO-ELEMENTO, não uma
   imagem: some com `content: none`, não apagando marcação. O `.topo-halo`
   (o bloom) foi removido do HTML; a regra dele fica órfã no <style> inline
   e não pinta nada. */
.topo-palco-glass::before{content:none}

/* ===== TOPO: tudo no azul do Stark ==============
   A troca é por elemento, e não no arquivo inteiro: os mesmos tokens
   (#c183fb, #e27bb7) pintam seções que ainda não revisamos, e repintar tudo
   de uma vez mudaria coisas sem ninguém ter olhado. */
.topo{background:linear-gradient(135deg, rgba(47,127,240,.14) 0%, rgba(0,0,0,0) 34%),linear-gradient(225deg, rgba(56,189,248,.14) 0%, rgba(0,0,0,0) 38%), #000000}
.topo-celular-shell{filter:drop-shadow(0 28px 44px rgba(0,0,0,.48)) drop-shadow(0 0 34px rgba(47,127,240,.16))}
/* O halo colorido em volta do aparelho (o último rosa do topo). */
.topo-celular-frame{box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),inset 0 1px 0 rgba(255,255,255,.2),
  0 0 0 1px rgba(0,0,0,.4),0 30px 60px rgba(0,0,0,.5),0 0 40px rgba(47,127,240,.18)}

/* Carta que não abre nada: sem cursor de clique e sem a setinha, que é o
   convite visual. Deixar a seta seria prometer um clique que não acontece. */
.orbita-card.sem-clique{cursor:default}
.orbita-card.sem-clique .cartao-seta{display:none}

/* O brilho roxo que aparecia ao passar o mouse na carta — agora azul.
   Some também o par de bordas arroxeadas que a carta tem em repouso. */
.orbita-card{border-right-color:rgba(47,127,240,.14);border-bottom-color:rgba(47,127,240,.12)}
.orbita-card:hover{box-shadow:0 24px 56px rgba(26,27,40,.14),inset 0 1px 0 rgba(255,255,255,1),
  0 0 34px rgba(47,127,240,.22),0 0 0 1px rgba(47,127,240,.14)}
.orbita-card:active{box-shadow:0 4px 12px rgba(47,127,240,.24),0 0 0 2px rgba(47,127,240,.18),
  inset 0 1px 0 rgba(255,255,255,.9)}
.cartao-seta{background:linear-gradient(135deg,rgba(47,127,240,.18),rgba(56,189,248,.14));
  border-color:rgba(47,127,240,.22)}

/* ⚠️ ALINHAMENTO DOS DOIS CARDS. O bloco "Tudo do mensal, e mais:" descia
   porque a linha acima do botão tem tamanhos diferentes: no mensal cabe em uma
   linha, no anual (R$ 368,16 no ano, economia de 23%) ocupa duas. Reservar a
   altura das duas linhas nos dois cards faz botão, lista e divisória nascerem
   na mesma altura — sem depender de qual texto é mais curto hoje. */
.pr-desc{min-height:46px}
.pr-abaixo{min-height:36px;display:flex;align-items:flex-start}
@media (max-width:820px){
  /* Empilhados, um embaixo do outro, não há o que alinhar — e a altura
     reservada viraria só espaço vazio. */
  .pr-desc,.pr-abaixo{min-height:0}
}

/* ⚠️ A CAUSA REAL do desalinhamento: `.pr-inclui{margin-top:auto}` colava o
   bloco no RODAPÉ do card. Como os cards têm a mesma altura mas listas de
   tamanhos diferentes (no mensal um item quebra em duas linhas), o bloco mais
   alto começava mais acima e o mais curto, mais abaixo. Ancorado embaixo, ele
   nunca ia alinhar em cima — não era questão de "subir um pouco".
   Agora ele segue a lista, que é igual nos dois, e a sobra fica no fim. */
.pr-inclui{margin-top:0}
.pr-card{justify-content:flex-start}

/* ===== O FUNDO DA PÁGINA ==================================================
   ⚠️ ERA AQUI. Os brilhos roxo/rosa que se veem atrás do FAQ (e de toda seção
   escura) não são do card nem da seção: vêm de uma camada fixa atrás de tudo,
   `body::before`. Por isso trocar a cor dos cards não mudava nada do que o
   cliente estava vendo. Mesmas posições e opacidades, agora em azul. */
body::before{
  background-image:
    radial-gradient(ellipse 40% 80% at -5% 40%, rgba(47,127,240,.16) 0%, rgba(47,127,240,0) 70%),
    radial-gradient(ellipse 50% 90% at 105% 70%, rgba(56,189,248,.14) 0%, rgba(56,189,248,0) 70%),
    radial-gradient(ellipse 60% 60% at 50% 90%, rgba(47,127,240,.09) 0%, transparent 70%)}
.fq-aba.ativa{color:#fff;border-color:#3b82f6}
.fq-aba.ativa::before{transform:translateY(0)}
.fq-lista.entrando{animation:fqEntra .5s cubic-bezier(.36,0,.66,-.56) reverse both}
@keyframes fqEntra{from{opacity:1;transform:none}to{opacity:0;transform:translateY(20px)}}
.fq-item.aberto{background:rgba(255,255,255,.07);border-color:rgba(59,130,246,.45)}
.fq-item.aberto .fq-btn > span{color:#fff}
.fq-item.aberto .fq-mais{transform:rotate(45deg);color:#60a5fa}
/* O botão do plano anual usa o mesmo botão do "Começar agora" (glass azul com
   o brilho passando). Só o espaçamento vem do card de preço. */
.pr-btn-stark{margin-bottom:20px;padding:15px 16px;font-size:.92rem}

/* A 2ª seção (Finanças) passa a usar o mesmo fundo da órbita: #f5f5f5, o
   cinza-neutro, no lugar do bege #F5F0EB. */
#financas-section{background-color:#f5f5f5}
/* A 3ª seção (Painel) acompanha, pelo mesmo motivo. */
#painel-section{background-color:#f5f5f5}
/* A 4ª seção (Agenda) fecha o trio: as três com layout de coluna dupla agora
   dividem o mesmo fundo, sem degrau de cor entre elas na rolagem. */
#agenda-section{background-color:#f5f5f5}

/* ===== A assinatura do Stark dentro do balão ==============================
   ⚠️ A foto ao lado do nome NUNCA teve regra de tamanho — nem no código
   original, onde as fotos eram pequenas e passavam despercebidas. Com o ícone
   do Stark (256px) ela aparecia no tamanho cheio e estourava o balão.
   A linha do autor também não tinha layout: nome, selo e cargo caíam soltos. */
.topo-zap-author{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.topo-zap-author-foto{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.conversa-cracha{font-size:.55rem;font-weight:600;opacity:.85;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════════
   BARRA DO TOPO, MENU E RODAPÉ — escrito para o Stark
   --------------------------------------------------------------------------
   Um bloco só, com os dois temas declarados lado a lado — antes as mesmas
   regras estavam espalhadas em quatro lugares, e o nome da marca chegou a ter
   quatro declarações de cor competindo entre si.

   Os dois temas:
     escuro  — o padrão, sobre as seções pretas
     claro   — `.barra-clara`, que o script liga quando a barra passa por cima
               de uma seção clara
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --barra-altura:64px;
  --barra-topo-espaco:16px;
  --tinta-clara:rgba(255,255,255,.6);
  --tinta-clara-forte:rgba(255,255,255,.95);
  --tinta-escura:rgba(0,0,0,.55);
  --tinta-escura-forte:rgba(0,0,0,.9);
  --azul-stark:#1d4ed8;
  --azul-claro:#38bdf8;
}

/* ── A barra ─────────────────────────────────────────────────────────────
   Vidro de verdade: o fundo é quase transparente de propósito, para o
   `backdrop-filter` capturar a cor real do que está passando por baixo. Um
   fundo opaco aqui mataria o efeito. */
.barra-topo{
  position:fixed; z-index:1000;
  top:var(--barra-topo-espaco); left:50%; transform:translateX(-50%);
  width:calc(100% - 48px); max-width:1320px; height:var(--barra-altura);
  border-radius:100px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.01);
  backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
/* Fio de luz no topo da barra, que dá o volume do vidro. */
.barra-topo::before{
  content:''; position:absolute; z-index:1; top:0; left:10%; right:10%; height:1px;
  border-radius:100%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 20%,
             rgba(255,255,255,.25) 50%,rgba(255,255,255,.12) 80%,transparent);
}
.barra-topo.scrolled{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(48px) saturate(220%) brightness(1.08);
  -webkit-backdrop-filter:blur(48px) saturate(220%) brightness(1.08);
  border-color:rgba(255,255,255,.15);
  box-shadow:0 8px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.1);
}
.barra-topo.barra-clara{
  border-color:rgba(0,0,0,.08);
  box-shadow:0 4px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);
}
.barra-topo.barra-clara::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4) 20%,
             rgba(255,255,255,.6) 50%,rgba(255,255,255,.4) 80%,transparent);
}
.barra-interna{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  height:100%; padding:0 8px 0 28px;
}

/* ── O nome da marca ─────────────────────────────────────────────────────
   ⚠️ "Stark" acompanha a cor dos links do menu, nos DOIS temas — foram três
   idas e vindas até acertar isso. "Assessor" fica azul sempre. */
.stark-logo{
  display:flex; align-items:center; flex-shrink:0;
  font-size:1.05rem; font-weight:600; letter-spacing:-.02em;
  white-space:nowrap; text-decoration:none;
  color:var(--tinta-clara); transition:color .4s ease;
}
.stark-logo:hover{color:var(--tinta-clara-forte)}
.stark-logo-serif{font-family:"Fraunces",Georgia,serif; font-weight:600}
.stark-logo-accent{color:#7cc4fb}
.barra-clara .stark-logo{color:var(--tinta-escura)}
.barra-clara .stark-logo:hover{color:var(--tinta-escura-forte)}

/* ── Links do meio ──────────────────────────────────────────────────────── */
.menu-largo{position:absolute; left:50%; transform:translateX(-50%)}
.menu-links{display:flex; align-items:center; gap:4px; padding:4px}
.menu-links a{
  position:relative; padding:8px 16px; border-radius:100px;
  font-size:.875rem; font-weight:400; text-decoration:none;
  color:var(--tinta-clara); transition:color .4s ease, background .4s ease;
}
.menu-links a:hover{color:var(--tinta-clara-forte); background:rgba(255,255,255,.08)}
/* Tracinho azul que cresce do meio no hover. */
.menu-links a::after{
  content:''; position:absolute; bottom:4px; left:50%;
  width:16px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--azul-stark),var(--azul-claro));
  transform:translateX(-50%) scaleX(0); transition:transform .3s ease;
}
.menu-links a:hover::after{transform:translateX(-50%) scaleX(1)}
.barra-clara .menu-links a{color:var(--tinta-escura)}
.barra-clara .menu-links a:hover{color:var(--tinta-escura-forte); background:rgba(0,0,0,.06)}

/* ── Botão de três traços (só no celular) ────────────────────────────────── */
.menu-botao{
  display:none; flex-direction:column; gap:5px; padding:10px;
  background:none; border:none; cursor:pointer;
}
.menu-botao span{
  display:block; width:24px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.8); transition:background .4s ease;
}
.barra-clara .menu-botao span{background:rgba(0,0,0,.7)}

/* ── Gaveta lateral ──────────────────────────────────────────────────────── */
.menu-lateral{
  position:fixed; z-index:2000; top:0; left:-320px;
  display:flex; flex-direction:column; gap:24px;
  width:280px; height:100vh; padding:24px;
  background:#fff; box-shadow:2px 0 10px rgba(0,0,0,.2);
  transition:left .4s ease;
}
.menu-lateral.open{left:0}
.menu-lateral-header{display:flex; align-items:center; justify-content:space-between}
.menu-lateral-nav{display:flex; flex-direction:column; gap:24px}
.menu-link-lateral{
  font-size:1.1rem; font-weight:500; text-decoration:none;
  color:#000; transition:color .3s ease;
}
.menu-link-lateral:hover{color:var(--azul-stark)}
.menu-fechar{
  display:flex; align-items:center; justify-content:center; padding:4px;
  background:none; border:none; color:#000; cursor:pointer;
}
.menu-lateral-overlay{
  position:fixed; inset:0; z-index:1500; opacity:0; pointer-events:none;
  background:rgba(0,0,0,.45); transition:opacity .4s ease;
}
.menu-lateral-overlay.open{opacity:1; pointer-events:auto}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.rodape{width:100%; padding:70px 8vw 34px}
.rodape-interno{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:34px}
.rodape-base{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.08);
}
.rodape-direitos{
  max-width:760px; font-size:.8rem; line-height:1.6; color:rgba(255,255,255,.4);
}

/* ── Telas menores ──────────────────────────────────────────────────────── */
@media (max-width:900px){ .stark-logo{font-size:.95rem} }
@media (max-width:768px){
  .barra-topo{width:calc(100% - 24px); top:10px; height:56px}
  /* Três colunas fixas: marca à esquerda, respiro no meio, botão à direita.
     Com flex a marca esticava e empurrava o botão para fora em telas curtas. */
  .barra-interna{
    display:grid; grid-template-columns:auto minmax(0,1fr) 40px;
    align-items:center; column-gap:8px; padding:0 12px 0 16px;
  }
  .menu-largo{display:none}
  .menu-botao{display:flex; grid-column:3; justify-self:end; gap:4px; padding:8px}
  .menu-botao span{width:18px}
  .rodape{padding:58px 20px 30px}
  .rodape-interno{max-width:430px; margin-inline:auto}
  .rodape-base{flex-direction:column; align-items:center; justify-content:center; width:100%; gap:18px}
  .rodape-direitos{font-size:.76rem; margin:0 auto; text-align:center}
}
@media (max-width:480px){ .stark-logo{font-size:.86rem} }
@media (max-width:380px){
  .barra-topo{width:calc(100% - 16px); height:52px; top:8px}
  .barra-interna{grid-template-columns:auto minmax(0,1fr) 36px; column-gap:6px; padding:0 8px}
  .menu-botao{padding:7px}
  .menu-botao span{width:17px}
}
/* A marca dentro da gaveta: é texto, não imagem. A regra antiga fixava altura
   de <img> (24px) e não servia mais — o nome ficava com o tamanho da barra. */
.menu-lateral-header .menu-marca{font-size:1rem}

/* ══════════════════════════════════════════════════════════════════════════
   BLOCOS DE COLUNA DUPLA — texto de um lado, tela do outro
   --------------------------------------------------------------------------
   Usados por Finanças, Painel e Agenda. Reescrito na segunda leva do passo 2.

   O que mudou em relação ao que havia: o azul do Stark era aplicado por
   remendo em cada seção (#financas-section, #painel-section, #agenda-section
   repetiam as MESMAS três regras). Aqui a cor é uma variável, declarada uma
   vez. Trocar o azul da marca agora é mexer numa linha, não em nove.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --selo-degrade:linear-gradient(135deg,#1d4ed8 0%,#2f7ff0 100%);
  --marca-degrade:linear-gradient(135deg,#1d4ed8 0%,#38bdf8 100%);
  --marca-sombra:rgba(47,127,240,.28);
  --tinta-titulo:#1a1a2e;
  --tinta-corpo:#6b6b88;
}

.bloco-duplo-section{
  position:relative; width:100%; padding:60px 8vw; overflow:hidden;
  background-color:#f5f5f5;
}
/* Blocos em sequência não repetem o respiro do topo: sem isso, aparece uma
   faixa vazia entre um e outro. */
.bloco-duplo-section + .bloco-duplo-section{padding-top:0; margin-top:-20px}

.bloco-duplo-container{
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center;
}
/* `.reverse` inverte só a proporção: quem manda na ordem é a marcação. */
.bloco-duplo-container.reverse{grid-template-columns:1fr 1.2fr}

/* ── Cartão de texto ─────────────────────────────────────────────────────── */
.bloco-duplo-text{
  position:relative; display:flex; flex-direction:column;
  padding:52px 56px; border-radius:28px; background:#fff;
  box-shadow:0 18px 48px rgba(26,31,54,.07);
}
/* Fio de luz no topo do cartão. */
.bloco-duplo-text::before{
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(47,127,240,.18) 30%,
             rgba(47,127,240,.28) 50%,rgba(47,127,240,.18) 70%,transparent);
}
.bloco-duplo-title{
  margin:0 0 14px; font-size:2.4rem; font-weight:700; line-height:1.15;
  letter-spacing:-1px; color:var(--tinta-titulo);
}
.bloco-duplo-desc{
  margin:0 0 32px; font-size:.95rem; font-weight:400; line-height:1.75;
  color:var(--tinta-corpo);
}
.bloco-duplo-media{display:flex; align-items:center; justify-content:center}

/* ── Selo da seção ──────────────────────────────────────────────────────── */
.selo-secao{
  display:inline-flex; align-items:center; gap:7px; width:fit-content;
  margin-bottom:28px; padding:7px 16px; border-radius:100px;
  font-size:.75rem; font-weight:600; letter-spacing:.04em; color:#fff;
  background:var(--selo-degrade);
  box-shadow:0 2px 8px var(--marca-sombra), inset 0 1px 0 rgba(255,255,255,.2);
}
.selo-secao svg{flex-shrink:0; opacity:.9; stroke:#fff}

/* ── Pílulas com marca de conferido ─────────────────────────────────────── */
.selo-item-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.selo-item{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  width:fit-content; padding:10px 20px; border-radius:100px;
  font-size:.85rem; font-weight:500; color:#2d2d4e;
  background:#fff; border:1.5px solid rgba(0,0,0,.10);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
}
/* O disco azul e o "✓" são desenhados aqui: duas camadas, sem imagem nem
   ícone extra na marcação. */
.selo-item::before{
  content:''; display:inline-block; flex-shrink:0; width:18px; height:18px;
  border-radius:50%; background:var(--marca-degrade);
  box-shadow:0 1px 4px rgba(47,127,240,.32);
}
.selo-item::after{
  content:''; position:absolute; left:25px;
  width:5px; height:8px; border:solid #fff; border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translateY(-1px);
}
.selo-item:hover{
  transform:translateX(4px);
  border-color:rgba(47,127,240,.35);
  box-shadow:0 2px 8px rgba(47,127,240,.12);
}

/* Variante clara do selo (fundo branco, texto preto), usada onde a seção
   escura pede contraste invertido. */
.selo-claro{background:#fff; color:#000; box-shadow:0 2px 8px rgba(0,0,0,.1)}
.selo-claro svg{stroke:#000}
/* ⚠️ Exceção: em Categorias o selo é azul como os outros. A variante clara
   veio junto com a marcação reaproveitada e destoava das seções vizinhas. */
#categorias-section .selo-claro{
  background:var(--selo-degrade); color:#fff;
  box-shadow:0 2px 8px var(--marca-sombra), inset 0 1px 0 rgba(255,255,255,.2);
}
#categorias-section .selo-claro svg{stroke:#fff}

@media (max-width:768px){
  .bloco-duplo-section{padding:30px 5vw 32px}
  .bloco-duplo-section + .bloco-duplo-section{padding-top:0; margin-top:0}
  .bloco-duplo-container,
  .bloco-duplo-container.reverse{grid-template-columns:1fr; gap:30px}
  /* Empilhado, o texto vem primeiro mesmo quando a ordem no desktop é inversa. */
  .bloco-duplo-container.reverse .bloco-duplo-text{order:-1}
  .bloco-duplo-text{padding:36px 28px; border-radius:22px}
  .bloco-duplo-title{font-size:1.7rem; letter-spacing:-.8px}
  .bloco-duplo-desc{font-size:.9rem; margin-bottom:24px}
  .selo-item{font-size:.8rem; padding:9px 16px}
  .selo-item::after{left:21px}
  .secao-celulares{padding-top:0 !important; margin-top:0 !important}
  .secao-celulares .bloco-duplo-container{gap:20px}
}

/* ══════════════════════════════════════════════════════════════════════════
   MANCHETE, SEÇÕES ESCURAS E BLOCO DE CHAMADA — escrito para o Stark
   --------------------------------------------------------------------------
   Terceira leva do passo 2. Junta cinco blocos que estavam espalhados e
   repetiam a mesma estrutura: cabeçalho centralizado + grade de cartões.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --tinta-branca:#ffffff;
  --tinta-branca-fraca:rgba(255,255,255,.55);
  --tinta-branca-media:rgba(255,255,255,.78);
  --preto-bloco:#0a0a0e;
}

/* ── Manchete do topo ────────────────────────────────────────────────────
   Dois pesos de propósito: a primeira linha fina, a segunda pesada e em
   degradê. Foi o pedido explícito do cliente, depois de três tentativas. */
.coluna-texto{max-width:640px}
.manchete{margin:0 0 18px; font-size:4.2rem; font-weight:400; line-height:1.1; letter-spacing:0}
.manchete-forte{
  font-weight:800;
  background:var(--manchete-degrade,linear-gradient(135deg,#60a5fa 0%,#38bdf8 100%));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:inline-block;
}
.degrade-texto,.destaque-degrade{
  display:inline;
  background:linear-gradient(135deg,#1d4ed8 0%,#38bdf8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.destaque-degrade{font-weight:700}
.submanchete{
  margin:0 0 30px; font-size:1.18rem; font-weight:300; line-height:1.4;
  color:var(--tinta-branca-media);
}
/* A linha que fecha a ideia: mais clara e um pouco mais encorpada que o
   parágrafo, sem virar um segundo título. */
.remate{display:inline-block; margin-top:10px; font-weight:600; color:rgba(255,255,255,.95)}
.area-botoes{margin-top:0}
.tema-escuro{position:relative; width:100%; overflow:hidden; background-color:transparent}

/* ── Seção escura com cabeçalho centralizado ────────────────────────────── */
.recursos-section,
.projetos-section{position:relative; width:100%; display:flex; justify-content:center}
.recursos-section{padding:40px 8vw 120px; align-items:center}
.projetos-section{padding:96px 8vw; background:#2f7ff0}
.recursos-container,
.projetos-container{width:100%; max-width:1200px; display:flex; flex-direction:column}
.recursos-container{align-items:center; gap:56px}
.projetos-container{gap:80px}
.recursos-header{display:flex; flex-direction:column; align-items:center; gap:16px}
.projetos-header{width:100%; margin:0 auto; text-align:center}
.recursos-headline,
.projetos-headline{margin:0; color:var(--tinta-branca); text-align:center; line-height:1.15}
.recursos-headline{font-size:2.8rem; font-weight:500; letter-spacing:-.5px}
.projetos-headline{font-size:2.5rem; font-weight:700; letter-spacing:-.03em; margin:12px 0 16px}
.recursos-subheadline{
  max-width:620px; margin:0; font-size:1.05rem; font-weight:300; line-height:1.6;
  color:var(--tinta-branca-fraca); text-align:center;
}
.projetos-subheadline{
  max-width:800px; margin:0 auto; font-size:1rem; font-weight:400; line-height:1.6;
  color:var(--tinta-branca); opacity:.9;
}
.recursos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; width:100%}
/* Véu que escurece o resto quando um cartão ganha foco. */
.recursos-veu{
  position:fixed; inset:0; z-index:997; opacity:0; pointer-events:none;
  background:transparent; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  transition:opacity .5s ease;
}
.recursos-veu.is-active{opacity:1}
.mosaico-card{
  position:relative; display:flex; flex-direction:column;
  padding:32px; border-radius:12px; border:none;
  background:linear-gradient(to bottom,#f4f5f7 0%,#fff 55%);
  box-shadow:0 20px 40px rgba(16,24,40,.10);
  transition:transform .3s ease, box-shadow .3s ease;
}
.mosaico-card:hover{transform:translateY(-4px); box-shadow:0 30px 60px rgba(47,127,240,.20), 0 1px 3px rgba(0,0,0,.05)}
.mosaico-content{position:relative; z-index:2; margin-bottom:auto; padding-right:48px}
.mosaico-content h3{margin:0 0 12px; font-size:1.45rem; font-weight:600; line-height:1.2; color:#1a1f36}
.mosaico-content p{margin:0; font-size:.85rem; line-height:1.5; color:#4a5568}

/* ── Bloco de Categorias (texto à esquerda, tela à direita) ─────────────── */
.duplo-cat-section{position:relative; width:100%; padding:96px 8vw; overflow:hidden}
.duplo-cat-container{
  position:relative; z-index:2; max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:60px;
}
.duplo-cat-text{flex:1; max-width:620px}
.duplo-cat-title{
  margin:0 0 24px; font-size:2.8rem; font-weight:500; line-height:1.1;
  letter-spacing:-.8px; color:var(--tinta-branca);
}
.duplo-cat-desc{
  margin:0 0 40px; font-size:1rem; font-weight:300; line-height:1.6;
  color:rgba(255,255,255,.75);
}
.duplo-cat-buttons{display:flex; align-items:center; gap:16px; margin-top:40px}
.duplo-cat-media{flex:1; display:flex; align-items:center; justify-content:flex-end}

/* ── Bloco preto de chamada ─────────────────────────────────────────────── */
.chamada-section{width:100%; padding:105px 8vw 120px; display:flex; justify-content:center;
  position:relative; z-index:10; margin-top:-1px; background-color:#f5f5f5}
.chamada-wrapper{width:100%; max-width:1200px; margin:0 auto; display:flex; justify-content:flex-start}
.chamada-container{
  position:relative; width:1200px; max-width:100%; margin:0;
  display:flex; align-items:stretch; justify-content:space-between;
  min-height:200px; padding:0 91px 0 100px;
  border-radius:32px; overflow:hidden;
  border-top:1px solid rgba(47,127,240,.3);
  border-left:1px solid rgba(47,127,240,.15);
  border-right:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  background-color:var(--preto-bloco);
  background-image:
    radial-gradient(ellipse 55% 85% at -5% 40%, rgba(47,127,240,.30) 0%, transparent 75%),
    radial-gradient(ellipse 55% 85% at 105% 70%, rgba(56,189,248,.26) 0%, transparent 75%);
}
.chamada-container::before{
  content:''; position:absolute; top:0; right:0; bottom:0; width:50%;
  border-radius:0 32px 32px 0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at center right, rgba(47,127,240,.16) 0%, transparent 70%);
}
.chamada-content{flex:1; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:40px 0}
.chamada-title{margin:0 0 16px; font-size:2.2rem; font-weight:500; line-height:1.2;
  letter-spacing:-.5px; color:var(--tinta-branca)}
.chamada-desc{margin:0; font-size:.95rem; font-weight:300; line-height:1.5; color:rgba(255,255,255,.85)}
.chamada-btn-wrap{flex:1; z-index:2; display:flex; align-items:center; justify-content:flex-end; padding:40px 20px 40px 0}
.chamada-image{position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; justify-content:center}

@media (min-width:993px){ .mosaico-content p{max-width:460px} }
@media (max-width:1280px){ .manchete{font-size:3.58rem} .submanchete{font-size:1.08rem} }
@media (max-width:1100px){
  .manchete{font-size:3.35rem} .submanchete{font-size:1.05rem}
}
@media (max-width:992px){
  .recursos-section{padding:40px 5vw 80px}
  .recursos-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto}
  .recursos-headline{font-size:2rem}
  .recursos-subheadline{font-size:.95rem; max-width:100%}
  .duplo-cat-container{flex-direction:column; text-align:center; gap:40px}
  .duplo-cat-text{max-width:100%; display:flex; flex-direction:column; align-items:center}
  .duplo-cat-title{font-size:2.2rem}
  .duplo-cat-desc br{display:none}
  .duplo-cat-buttons{flex-direction:column; width:100%; gap:12px}
  .duplo-cat-media{justify-content:center; width:100%}
  /* Empilhado: título, botão e figura, nessa ordem. */
  .chamada-section{padding:0 5vw 60px}
  .chamada-container{flex-direction:column; width:100%; padding:40px 20px 0; text-align:center; min-height:auto}
  .chamada-content{order:1; padding:0; max-width:100%; align-items:center}
  .chamada-desc{display:none}
  .chamada-btn-wrap{order:2; justify-content:center; width:100%; padding:28px 0 30px}
  .chamada-image{order:3; position:static; transform:none; width:calc(100% + 40px); margin:0 -20px;
    align-items:flex-end; height:auto}
  .chamada-title{font-size:2.1rem; margin-bottom:0}
}
@media (max-width:768px){
  .coluna-texto{max-width:100%; width:100%; display:flex; flex-direction:column; align-items:center}
  .manchete{max-width:350px; font-size:1.86rem; line-height:1.12; margin-bottom:11px}
  .submanchete{max-width:320px; font-size:.95rem; margin:0 0 32px}
  .area-botoes{position:static; width:auto; display:flex; justify-content:center; margin-top:0}
  .projetos-headline{font-size:1.8rem}
}
@media (max-width:430px){
  .manchete{font-size:1.72rem}
  .submanchete{max-width:360px; font-size:.88rem; margin-bottom:18px}
}
/* A figura do bloco de chamada. Hoje é o avatar do Stark (que tem regra
   própria de tamanho); esta aqui cuida do encaixe: encostada na base, sem a
   fresta de 1px que aparece entre a imagem e a borda arredondada. */
.chamada-figura{position:relative; bottom:-1px; display:block; height:auto;
  object-fit:contain; object-position:bottom}
@media (max-width:992px){
  .chamada-figura{bottom:0; left:auto; width:100%; max-width:380px; transform:translateY(4px)}
}

/* ══════════════════════════════════════════════════════════════════════════
   TELAS DO STARK NO CELULAR
   --------------------------------------------------------------------------
   ⚠️ As telas que desenhei (visão geral, categorias, agenda, mural) nasceram
   com medidas de desktop e NENHUMA regra de tela pequena — eu montei cada uma
   olhando o monitor. Num aparelho de 360px elas apertam o texto e estouram a
   largura. Aqui elas ganham a versão de celular.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* Visão geral: menos altura, menos respiro, número menor. */
  .stark-vg{height:440px}
  .stark-vg-rolo{padding:12px 14px 18px}
  .stark-vg-saldo{font-size:25px}
  .stark-vg-tiles{gap:6px;margin:12px 0 14px}
  .stark-vg-tile{padding:8px 9px}
  .stark-vg-tile b{font-size:13px}

  /* Categorias: a tabela tem quatro colunas de largura fixa e não cabe. */
  .stark-cat-tela{padding:14px}
  .stark-cat-total{font-size:21px}
  .stark-cat-novo{font-size:10px;padding:6px 10px}
  .stark-cat-cab .c-val,.stark-cat-linha .c-val{width:70px}
  .stark-cat-cab .c-pct,.stark-cat-linha .c-pct{width:34px}
  .stark-cat-linha{padding:8px 0;gap:8px}
  .stark-cat-linha .c-nome{font-size:12px}
  .stark-cat-caixa{width:88%;padding:16px}

  /* Agenda: a grade do mês e a lista do dia. */
  .stark-ag-corpo{padding:10px 12px}
  .stark-ag-item{padding:7px 9px}
  .stark-ag-emo{width:26px;height:26px}

  /* Finanças: as três telas dentro dos cartões. */
  .stark-fin{padding:0 14px}
  .stark-fin-total{font-size:18px}
  .stark-fin-linha{gap:8px}

  /* Mural e etapas dos projetos. */
  .stark-papeis{gap:7px}
  .stark-etapa-card{padding:14px}
}

/* Telas estreitas de verdade (iPhone SE e parecidos). */
@media (max-width:400px){
  /* A coluna de quantidade é a menos importante das quatro: sai primeiro,
     para o nome da categoria e o valor caberem sem cortar. */
  .stark-cat-cab .c-qtd,.stark-cat-linha .c-qtd{display:none}
  .stark-cat-cab .c-val,.stark-cat-linha .c-val{width:64px;font-size:11.5px}
  .stark-vg{height:400px}
  .stark-vg-saldo{font-size:22px}
  .stark-fin-tag{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   CORREÇÕES DE CELULAR — relatadas pelo cliente em 26/08
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* 1. A BARRA DO TOPO SAI DO CELULAR.
     Ela abria uma gaveta lateral com os mesmos links que já existem rolando a
     página, e ocupava altura no aparelho onde ela é mais escassa. Sai a barra,
     sai a gaveta e sai o véu — os três, senão o véu fica capturando toque numa
     camada invisível por cima de tudo. */
  .barra-topo,
  .menu-lateral,
  .menu-lateral-overlay{display:none !important}

  /* 2. O CELULAR DO TOPO ESTAVA CORTADO pela seção seguinte.
     A causa: `transform: scale(1.25)` aumenta o desenho mas NÃO aumenta o
     espaço que ele ocupa — o palco continua reservando o tamanho de antes, e a
     seção de baixo sobe por cima. Tiro a escala e uso a largura de verdade. */
  .topo-celular-shell{width:300px; transform:none}
  .topo-palco-glass{min-height:0; padding-bottom:18px}
  .topo{padding-bottom:56px}

  /* 3. O TEXTO DO TOPO, alinhado ao centro de ponta a ponta. */
  .coluna-texto{align-items:center; text-align:center}
  .manchete{max-width:320px; margin-inline:auto; text-align:center; text-wrap:balance}
  .submanchete{margin-inline:auto; text-align:center; text-wrap:pretty}
  .area-botoes{width:100%; justify-content:center}

  /* 4. A ÓRBITA: o texto vazava do cartão e o feixe não aparecia.
     Cartões um pouco maiores, texto podendo quebrar em duas linhas e sem
     estourar a borda. */
  .orbita-card{width:108px; padding:9px 6px 7px; overflow-wrap:anywhere; hyphens:auto}
  .cartao-rotulo{font-size:.62rem; line-height:1.2}
  /* O feixe volta, agora apontando pelo ângulo DO CELULAR: no aparelho as
     cartas ficam em posições diferentes, e usar o ângulo do desktop mandaria a
     luz para o lugar errado. Por isso ele estava desligado. */
  .orbita-feixe{display:block; width:34vw}
  /* A fala desce um pouco para não encostar no hub. */
  .orbita-fala{top:calc(47% + 54px); max-width:88vw; white-space:normal; text-align:center}
}

/* 5. O QUADRADO AZUL NA SEÇÃO DE PREÇOS.
   O brilho de fundo usa `mix-blend-mode: multiply`. Em vários navegadores de
   celular a mistura não acontece e o degradê vira um retângulo azul chapado no
   meio da tela. No celular ele sai de cena: o fundo claro sozinho já basta. */
@media (max-width:820px){
  #pricing-section::before{display:none}
}



/* ⚠️ NO CELULAR A MANCHETE CORRE COMO UM TEXTO SÓ.
   `.manchete-forte` é `inline-block` no computador — é isso que segura o
   degradê e o recorte no texto. Mas inline-block não quebra POR DENTRO: cada
   trecho vira um bloco indivisível, e "lembrar de tudo" / "sozinho." caíam
   empilhados em vez de fluir. No aparelho ele passa a ser `inline`: o degradê
   continua, e as palavras quebram onde couber. */
@media (max-width:768px){
  .manchete{max-width:min(340px,86vw); text-wrap:pretty}
  .manchete-forte{display:inline}
  /* A quebra que existe só para o computador não vale aqui. */
  .manchete br{display:none}
}



/* ══════════════════════════════════════════════════════════════════════════
   ÓRBITA NO CELULAR — o anel fica, o texto encolhe
   --------------------------------------------------------------------------
   ⚠️ As cartas do anel têm largura fixa (o ângulo manda na posição, não o
   conteúdo). Então quem tem de caber é o TEXTO. Aqui a letra encolhe, a
   palavra pode quebrar em duas linhas e a carta cresce em altura se precisar —
   é o que impede "Agendar compromissos" de vazar a borda.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .orbita-card{
    width:96px; min-height:auto; padding:9px 5px 7px; gap:3px;
    border-radius:13px;
  }
  .orbita-card .cartao-icone{width:26px; height:26px; margin:0 auto}
  .orbita-card .cartao-icone svg{width:13px; height:13px}
  .cartao-rotulo{
    font-size:.58rem; line-height:1.18; letter-spacing:-.01em;
    /* Quebra dentro da palavra quando não houver espaço — sem isto,
       "compromissos" sozinho já é maior que a carta. */
    overflow-wrap:anywhere; hyphens:auto;
  }
  /* A setinha ocupa espaço que o texto precisa mais. */
  .orbita-card .cartao-seta{display:none}
}
@media (max-width:400px){
  .orbita-card{width:88px; padding:8px 4px 6px}
  .cartao-rotulo{font-size:.54rem}
}

/* ⚠️ A CARTA CRESCE, EM VEZ DE A LETRA ENCOLHER MAIS.
   Abaixo de ~0,55rem o texto fica ilegível no aparelho, então o caminho é
   outro: dar largura à carta e puxar o anel para dentro.

   O raio das cartas é em `vw` (46vw no topo, 40vw nas diagonais). Uma carta de
   120px pendurada a 46vw do centro encosta na borda numa tela de 360px. Por
   isso o raio diminui junto — a carta ganha o espaço que o anel devolve. */
@media (max-width:768px){
  .orbita-card{width:120px; padding:10px 8px 8px}
  .cartao-rotulo{font-size:.64rem; line-height:1.22; overflow-wrap:anywhere; hyphens:auto}
  .orbita-item:nth-child(2){--mobile-radius:40vw}   /* topo */
  .orbita-item:nth-child(3){--mobile-radius:34vw}
  .orbita-item:nth-child(4){--mobile-radius:27vw}   /* direita */
  .orbita-item:nth-child(5){--mobile-radius:34vw}
  .orbita-item:nth-child(6){--mobile-radius:34vw}
  .orbita-item:nth-child(7){--mobile-radius:27vw}   /* esquerda */
  .orbita-item:nth-child(8){--mobile-radius:34vw}
  /* Com o anel mais fechado, o bloco precisa de menos altura. */
  .orbita-wrapper{height:112vw; min-height:420px}
}
@media (max-width:400px){
  .orbita-card{width:104px; padding:9px 6px 7px}
  .cartao-rotulo{font-size:.6rem}
  .orbita-item:nth-child(2){--mobile-radius:38vw}
  .orbita-item:nth-child(3),
  .orbita-item:nth-child(5),
  .orbita-item:nth-child(6),
  .orbita-item:nth-child(8){--mobile-radius:32vw}
  .orbita-item:nth-child(4),
  .orbita-item:nth-child(7){--mobile-radius:25vw}
}

/* A carta cresce mais uma vez. A conta da geometria diz que, com o anel atual,
   cabem até ~169px numa tela de 360px — então 142px ainda deixa folga, e a
   palavra mais longa ("compromissos", 12 letras) passa a caber inteira numa
   linha em vez de ser partida no meio. */
@media (max-width:768px){
  .orbita-card{width:142px; padding:11px 10px 9px}
  .cartao-rotulo{font-size:.66rem; line-height:1.25; overflow-wrap:normal; hyphens:none}
  .orbita-wrapper{height:116vw; min-height:440px}
}
@media (max-width:400px){
  .orbita-card{width:130px; padding:10px 8px 8px}
  .cartao-rotulo{font-size:.62rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   O ANEL VIRA ELIPSE NO CELULAR
   --------------------------------------------------------------------------
   ⚠️ Com a carta em 142px as duas de baixo se sobrepunham: elas ficavam a
   106px uma da outra e cada uma tem 142px de largura. Não era ajuste fino —
   sete cartas desse tamanho não cabem num anel circular de 360px de largura.

   A saída é o anel deixar de ser círculo: raio MAIOR nos ângulos verticais e
   menor nos horizontais. As cartas se afastam para cima e para baixo, que é a
   direção onde sobra espaço num celular, e param de brigar pela largura.

   Os números vieram de uma verificação de colisão em 360, 390 e 430px: 124px
   é a maior carta que passa nas três sem sobrepor nem vazar.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .orbita-card{width:124px; padding:10px 8px 8px}
  .cartao-rotulo{font-size:.63rem; line-height:1.22}
  .orbita-wrapper{height:124vw; min-height:460px; max-height:none}

  .orbita-item:nth-child(2){--mobile-angle:-90deg; --mobile-radius:49vw}   /* topo */
  .orbita-item:nth-child(3){--mobile-angle:-38deg; --mobile-radius:40vw}
  .orbita-item:nth-child(4){--mobile-angle:14deg;  --mobile-radius:32vw}   /* direita */
  .orbita-item:nth-child(5){--mobile-angle:66deg;  --mobile-radius:47vw}
  .orbita-item:nth-child(6){--mobile-angle:114deg; --mobile-radius:47vw}
  .orbita-item:nth-child(7){--mobile-angle:166deg; --mobile-radius:32vw}   /* esquerda */
  .orbita-item:nth-child(8){--mobile-angle:218deg; --mobile-radius:40vw}
}
@media (max-width:400px){
  .orbita-card{width:116px; padding:9px 7px 7px}
  .cartao-rotulo{font-size:.6rem}
}
/* O botão do plano anual usa o botão do produto, que é MAIÚSCULO por padrão
   (`text-transform: uppercase`). Aqui ele fica como está escrito — do jeito
   que o cliente pediu, e igual ao botão do mensal, que nunca foi maiúsculo. */
.pr-btn-stark{text-transform:none; letter-spacing:0; font-weight:600}

/* O preço anterior, riscado, acima do que vale hoje. Discreto de propósito:
   quem manda na leitura é o preço novo, logo abaixo. */
.pr-de{margin:0 0 2px; font-size:.9rem; color:#6b7280}
.pr-de s{color:#9aa3b2; text-decoration-thickness:1.5px}
/* ⚠️ `display:flex` AQUI COMEU OS ESPAÇOS. Num container flex, o texto solto e
   o <b> viram itens separados, e o espaço em branco ENTRE eles deixa de existir
   — saía "Umaeconomia de 50%em relação". O flex tinha entrado só para alinhar
   os dois cards, e a altura reservada já faz esse trabalho sozinha. */
.pr-abaixo{display:block}

/* ── Gráfico de gastos por categoria, dentro da Visão Geral ───────────────
   O mesmo donut do painel: total no meio, legenda ao lado. O anel é girado
   -90° para a primeira fatia começar no topo, e não às três horas. */
.stark-vg-grafico{display:flex; align-items:center; gap:12px; margin-bottom:4px}
.stark-vg-donut{position:relative; flex:0 0 auto; width:96px; height:96px; display:grid; place-items:center}
.stark-vg-donut svg{width:96px; height:96px; transform:rotate(-90deg)}
.stark-vg-donut-centro{position:absolute; text-align:center; line-height:1.1}
.stark-vg-donut-centro b{display:block; font-size:11.5px; font-weight:700; color:#111827;
  font-variant-numeric:tabular-nums}
.stark-vg-donut-centro small{font-size:7.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#8a93a3}
.stark-vg-legenda{list-style:none; margin:0; padding:0; flex:1; min-width:0;
  display:flex; flex-direction:column; gap:5px}
.stark-vg-legenda li{display:flex; align-items:center; gap:6px; font-size:10.5px}
.stark-vg-legenda i{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.stark-vg-legenda span{flex:1; min-width:0; color:#111827; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.stark-vg-legenda em{font-style:normal; color:#8a93a3; font-variant-numeric:tabular-nums}
.stark-vg-legenda b{width:62px; text-align:right; font-weight:600; color:#4b5563;
  font-variant-numeric:tabular-nums}
@media (max-width:768px){
  .stark-vg-grafico{gap:9px}
  .stark-vg-donut,.stark-vg-donut svg{width:84px; height:84px}
  .stark-vg-legenda li{font-size:9.5px}
  .stark-vg-legenda b{width:56px}
}

/* ══════════════════════════════════════════════════════════════════════════
   PERGUNTAS FREQUENTES — lista única, sem abas
   --------------------------------------------------------------------------
   O formato de abas foi desfeito a pedido do cliente. Aqui é o acordeão: uma
   pergunta por vez aberta, o "+" girando para virar ×.

   Escrito do zero, e não recuperado do CSS de origem que já saiu do projeto.
   ═════════════════════════════════════════════════════════════════════════ */
.faq-secao{position:relative; width:100%; padding:56px 4vw 96px; font-family:'Poppins',sans-serif}
.faq-cabecalho{display:flex; flex-direction:column; align-items:center; margin-bottom:38px}
.faq-titulo{margin:0 0 14px; font-size:clamp(2rem,5vw,3rem); font-weight:700; color:#fff; text-align:center}
.faq-sub{max-width:620px; margin:0; font-size:.98rem; line-height:1.6;
  color:rgba(255,255,255,.55); text-align:center}

.faq-lista{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px}
.faq-item{border:1px solid rgba(255,255,255,.1); border-radius:12px;
  background:rgba(255,255,255,.03); transition:background .3s ease, border-color .3s ease}
.faq-item:hover{border-color:rgba(59,130,246,.35)}
.faq-item.aberto{background:rgba(255,255,255,.07); border-color:rgba(59,130,246,.45)}

.faq-pergunta{display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:16px; padding:16px; background:none; border:none; cursor:pointer;
  text-align:left; font-family:inherit}
.faq-pergunta > span{font-size:1.02rem; font-weight:500; color:rgba(255,255,255,.6);
  transition:color .3s ease}
.faq-item.aberto .faq-pergunta > span{color:#fff}
.faq-mais{flex:0 0 auto; width:20px; height:20px; color:rgba(255,255,255,.6);
  transition:transform .2s ease, color .3s ease}
.faq-item.aberto .faq-mais{transform:rotate(45deg); color:#60a5fa}

/* A altura é medida e animada; `auto` não anima. */
.faq-resposta{overflow:hidden; height:0; transition:height .3s ease-in-out}
.faq-resposta p{margin:0; padding:0 16px 16px; font-size:.93rem; line-height:1.7;
  color:rgba(255,255,255,.6)}
@media (max-width:600px){
  .faq-secao{padding:44px 5vw 72px}
  .faq-pergunta{padding:14px}
  .faq-pergunta > span{font-size:.94rem}
}

/* ── Rodapé: marca, três colunas e o cartão de suporte ──────────────────── */
.rodape-topo{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.5fr; gap:32px;
  padding-bottom:34px}
.rodape-marca .stark-logo{font-size:1.1rem; color:rgba(255,255,255,.92)}
.rodape-marca p{margin:12px 0 0; max-width:280px; font-size:.82rem; line-height:1.6;
  color:rgba(255,255,255,.45)}
.rodape-coluna{display:flex; flex-direction:column; gap:10px}
.rodape-coluna h2{margin:0 0 4px; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.4)}
.rodape-coluna a{font-size:.86rem; color:rgba(255,255,255,.62); text-decoration:none;
  transition:color .25s ease}
.rodape-coluna a:hover{color:#fff}

.rodape-suporte{padding:20px; border-radius:16px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04)}
.rodape-suporte-selo{display:inline-block; margin-bottom:10px; padding:4px 10px;
  border-radius:999px; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#1d4ed8,#2f7ff0)}
.rodape-suporte h3{margin:0 0 6px; font-size:1rem; font-weight:600; color:#fff}
.rodape-suporte p{margin:0 0 14px; font-size:.8rem; line-height:1.55; color:rgba(255,255,255,.5)}
.rodape-zap{display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  border-radius:10px; font-size:.84rem; font-weight:600; color:#fff!important;
  text-decoration:none; background:#25d366; transition:filter .2s ease, transform .2s ease}
.rodape-zap:hover{filter:brightness(1.06); transform:translateY(-1px)}

@media (max-width:960px){
  .rodape-topo{grid-template-columns:1fr 1fr; gap:28px}
  .rodape-marca{grid-column:1 / -1}
  .rodape-suporte{grid-column:1 / -1}
}
@media (max-width:768px){
  .rodape-topo{grid-template-columns:1fr; gap:26px; text-align:center}
  .rodape-marca p{margin-inline:auto}
  .rodape-coluna{align-items:center}
  .rodape-suporte{text-align:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   SEJA MEU SÓCIO — programa de afiliados, antes dos preços
   --------------------------------------------------------------------------
   Fica logo acima da seção de preços de propósito: a afiliação só existe para
   quem compra, então a leitura natural é "quero isso" → e o preço está ali
   embaixo. O botão desta seção leva justamente para lá.
   ═════════════════════════════════════════════════════════════════════════ */
.socio-secao{position:relative; width:100%; padding:96px 8vw; overflow:hidden;
  background:#07070c; font-family:'Poppins',sans-serif}
.socio-secao::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 60% at 12% 30%, rgba(47,127,240,.20), transparent 70%),
    radial-gradient(ellipse 45% 55% at 88% 70%, rgba(56,189,248,.14), transparent 70%)}
.socio-interno{position:relative; z-index:2; max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}

.socio-selo{display:inline-flex; align-items:center; gap:7px; width:fit-content;
  margin-bottom:22px; padding:7px 16px; border-radius:100px; font-size:.75rem;
  font-weight:600; letter-spacing:.04em; color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#2f7ff0);
  box-shadow:0 2px 8px rgba(47,127,240,.28), inset 0 1px 0 rgba(255,255,255,.2)}
.socio-titulo{margin:0 0 16px; font-size:clamp(2.1rem,4.6vw,3.2rem); font-weight:400;
  line-height:1.1; color:#fff; letter-spacing:-.5px}
.socio-titulo b{font-weight:800;
  background:linear-gradient(135deg,#60a5fa 0%,#38bdf8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent}
.socio-texto{margin:0 0 28px; max-width:520px; font-size:1rem; font-weight:300;
  line-height:1.65; color:rgba(255,255,255,.72)}
.socio-itens{list-style:none; margin:0 0 32px; padding:0; display:flex;
  flex-direction:column; gap:12px}
.socio-itens li{display:flex; align-items:flex-start; gap:11px; font-size:.9rem;
  color:rgba(255,255,255,.82)}
.socio-itens i{flex:0 0 auto; width:20px; height:20px; margin-top:1px; border-radius:50%;
  display:grid; place-items:center; font-style:normal; font-size:11px; color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#38bdf8)}
.socio-itens b{color:#fff; font-weight:600}

/* ── O quadro da direita: quanto rende ─────────────────────────────────── */
.socio-quadro{position:relative; padding:26px; border-radius:22px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.socio-quadro-topo{display:flex; align-items:center; gap:11px; margin-bottom:20px}
.socio-avatar{width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(47,127,240,.4)}
.socio-quadro-topo b{display:block; font-size:.95rem; color:#fff}
.socio-quadro-topo small{font-size:.75rem; color:rgba(255,255,255,.5)}

.socio-kicker{font-size:.68rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.45)}
.socio-valor{margin:6px 0 2px; font-size:2.6rem; font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums; line-height:1.05}
.socio-cenario{font-size:.82rem; color:rgba(255,255,255,.55); min-height:20px}
.socio-barra{height:6px; margin:18px 0 16px; border-radius:999px;
  background:rgba(255,255,255,.08); overflow:hidden}
.socio-barra i{display:block; height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg,#1d4ed8,#38bdf8); transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.socio-linhas{display:flex; flex-direction:column; gap:9px}
.socio-linha{display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:11px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06); font-size:.83rem; color:rgba(255,255,255,.72)}
.socio-linha b{color:#fff; font-weight:600; font-variant-numeric:tabular-nums}
.socio-linha.destaque{border-color:rgba(47,127,240,.45); background:rgba(47,127,240,.10)}

.socio-botao{margin-top:6px}
.socio-aviso{margin:16px 0 0; font-size:.78rem; line-height:1.5; color:rgba(255,255,255,.42)}

@media (max-width:960px){
  .socio-secao{padding:64px 5vw}
  .socio-interno{grid-template-columns:1fr; gap:34px}
  .socio-texto{max-width:100%}
}
@media (max-width:600px){
  .socio-quadro{padding:20px}
  .socio-valor{font-size:2.1rem}
}
/* A coluna de texto: só o empilhamento, para o botão não esticar na largura. */
.socio-texto-col{display:flex; flex-direction:column; align-items:flex-start}
@media (max-width:960px){.socio-texto-col{align-items:center; text-align:center}
  .socio-itens li{text-align:left}}
/* O destaque troca de linha em vez de ficar fixo: a transição é o que dá vida
   à lista, que antes era três valores parados. */
.socio-linha{transition:background .5s ease, border-color .5s ease, transform .5s ease}
.socio-linha.destaque{transform:translateX(3px)}
/* Uma coluna a menos no rodapé: a grade se ajusta em vez de deixar um vão. */
.rodape-topo{grid-template-columns:1.7fr 1fr 1fr 1.6fr}

/* ══════════════════════════════════════════════════════════════════════════
   FAIXA DE PROVA SOCIAL — logo abaixo do topo
   --------------------------------------------------------------------------
   ⚠️ OS AVATARES SÃO INICIAIS, e não fotos. A versão de origem trazia rostos
   de pessoas reais que nunca autorizaram nada — foi por isso que as imagens
   saíram do projeto. Círculo com inicial cumpre o mesmo papel visual sem usar
   a cara de ninguém.
   ═════════════════════════════════════════════════════════════════════════ */
.prova-faixa{position:relative; width:100%; padding:34px 8vw 44px; background:#000;
  font-family:'Poppins',sans-serif}
.prova-interno{max-width:1080px; margin:0 auto; display:flex; align-items:center;
  justify-content:center; gap:38px; flex-wrap:wrap}

.prova-pessoas{display:flex; align-items:center; gap:14px}
.prova-avatares{display:flex}
.prova-avatares span{width:42px; height:42px; margin-left:-12px; border-radius:50%;
  display:grid; place-items:center; font-size:.85rem; font-weight:700; color:#fff;
  border:2px solid #000; box-shadow:0 2px 10px rgba(0,0,0,.5)}
.prova-avatares span:first-child{margin-left:0}
.prova-pessoas-texto b{display:block; font-size:1.05rem; font-weight:700; color:#fff;
  line-height:1.2}
.prova-pessoas-texto small{display:block; margin-top:3px; font-size:.82rem;
  color:rgba(255,255,255,.5)}
.prova-estrelas{color:#fbbf24; font-size:.85rem; letter-spacing:2px}

.prova-divisor{width:1px; height:44px; background:rgba(255,255,255,.12)}
.prova-numeros{display:flex; gap:34px; flex-wrap:wrap}
.prova-numero b{display:block; font-size:1.5rem; font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums; line-height:1.1}
.prova-numero small{display:block; margin-top:2px; font-size:.74rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.45)}

@media (max-width:820px){
  .prova-faixa{padding:28px 5vw 34px}
  .prova-interno{gap:22px}
  .prova-divisor{display:none}
  .prova-numeros{gap:26px; justify-content:center; width:100%}
  .prova-numero b{font-size:1.25rem}
}


.social-proof-section {
    width: 100%;
    padding: 120px 8vw 100px;
    position: relative;
}

.sp-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.sp-glow-left {
    width: 600px;
    height: 600px;
    top: -100px;
    left: -200px;
    background: radial-gradient(circle, rgba(47, 127, 240, 0.18) 0%, transparent 70%);
}

.sp-glow-right {
    width: 500px;
    height: 500px;
    bottom: -80px;
    right: -150px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
}

.sp-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.sp-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 100px;
    background: rgba(47, 127, 240, 0.12);
    border: 1px solid rgba(47, 127, 240, 0.25);
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.sp-headline {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0;
}

.sp-highlight {
    background: linear-gradient(135deg, #1d4ed8 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sp-subheadline {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.sp-metrics {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 32px 40px;
    backdrop-filter: blur(10px);
}

.sp-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.sp-metric-number {
    font-size: 2.4rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.04em;
}

.sp-metric-plus,
.sp-metric-pct {
    font-size: 1.4rem;
    background: linear-gradient(135deg, #1d4ed8 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.sp-metric-star {
    font-size: 1.6rem;
    background: linear-gradient(135deg, #f9c74f 0%, #f8961e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sp-metric-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    text-align: center;
}

.sp-metric-divider {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    margin: 0 8px;
}

.sp-testimonials-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
}

.sp-card-featured {
    grid-row: span 2;
}

.sp-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    backdrop-filter: blur(12px);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.sp-card:hover {
    border-color: rgba(47, 127, 240, 0.25);
    background: rgba(47, 127, 240, 0.06);
}

.sp-card.sp-card-featured {
    background: rgba(47, 127, 240, 0.07);
    border-color: rgba(47, 127, 240, 0.2);
    padding: 36px 32px 28px;
}

.sp-card.sp-card-featured:hover {
    border-color: rgba(47, 127, 240, 0.4);
    background: rgba(47, 127, 240, 0.1);
}

.sp-card-quote {
    margin-bottom: 4px;
}

.sp-card-text {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

.sp-card-featured .sp-card-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
}

.sp-card-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sp-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.sp-avatar-1 {
    background: linear-gradient(135deg, #1d4ed8 0%, #38bdf8 100%);
}

.sp-avatar-2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.sp-avatar-3 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.sp-avatar-4 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.sp-avatar-5 {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.sp-author-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.sp-author-info strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
}

.sp-author-info span {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}

.sp-stars {
    color: #f9c74f;
    font-size: 0.72rem;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.sp-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sp-trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.sp-trust-badge:hover {
    color: rgba(255, 255, 255, 0.8);
}@media (max-width: 768px){
    .social-proof-section {
        padding: 80px 6vw 60px;
    }

    .sp-container {
        gap: 48px;
    }

    .sp-metrics {
        flex-wrap: wrap;
        gap: 24px;
        padding: 24px 20px;
    }

    .sp-metric-divider {
        display: none;
    }

    .sp-metric {
        flex: 0 0 45%;
    }

    .sp-testimonials-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .sp-card-featured {
        grid-row: span 1;
    }

    .sp-trust-row {
        gap: 20px;
        justify-content: flex-start;
    }}

/* ══════════════════════════════════════════
   CARROSSEL DE DEPOIMENTOS
   ══════════════════════════════════════════ */

.sp-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
}

/* ── Faixa de avatares ── */
.sp-avatars-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    height: 180px;
    position: relative;
}

.sp-avatar-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* Posições por diff (i - active) */
/* diff = -2 */
.sp-avatar-item[data-diff="-2"] {
    left: calc(50% - 260px);
    width: 64px;
    height: 64px;
    opacity: 0.35;
    transform: translateY(20px);
    z-index: 1;
}

/* diff = -1 */
.sp-avatar-item[data-diff="-1"] {
    left: calc(50% - 180px);
    width: 90px;
    height: 90px;
    opacity: 0.6;
    transform: translateY(10px);
    z-index: 2;
}

/* diff = 0  (active) */
.sp-avatar-item.sp-avatar-active,
.sp-avatar-item[data-diff="0"] {
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 148px;
    height: 148px;
    opacity: 1;
    z-index: 5;
}

/* diff = 1 */
.sp-avatar-item[data-diff="1"] {
    left: calc(50% + 90px);
    width: 90px;
    height: 90px;
    opacity: 0.6;
    transform: translateY(10px);
    z-index: 2;
}

/* diff = 2 */
.sp-avatar-item[data-diff="2"] {
    left: calc(50% + 196px);
    width: 64px;
    height: 64px;
    opacity: 0.35;
    transform: translateY(20px);
    z-index: 1;
}

/* Halo de glow no avatar ativo */
.sp-av-halo {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 127, 240, 0.22) 0%, transparent 70%);
    animation: sp-halo-pulse 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Círculo do avatar */
.sp-av-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    font-size: clamp(0.75rem, 2vw, 1.4rem);
    letter-spacing: 0.02em;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.4s ease;
    overflow: hidden;
    background: linear-gradient(135deg, #1d4ed8 0%, #38bdf8 100%);
}

.sp-av-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.sp-avatar-item.sp-avatar-active .sp-av-circle {
    box-shadow: 0 0 0 4px rgba(47, 127, 240, 0.4), 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ── Área de depoimento ── */
.sp-quote-area {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 600px;
}

.sp-quote-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    transition: opacity 0.2s ease;
}

.sp-quote-role {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    transition: opacity 0.2s ease;
}

.sp-quote-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.75;
    margin: 8px 0 0;
    transition: opacity 0.2s ease;
}

.sp-quote-stars {
    color: #f9c74f;
    font-size: 1rem;
    letter-spacing: 2px;
}

/* ── Navegação ── */
.sp-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sp-nav-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.sp-nav-btn:hover {
    background: rgba(47, 127, 240, 0.15);
    border-color: rgba(47, 127, 240, 0.4);
    color: #1d4ed8;
}

.sp-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-dot.sp-dot-active {
    width: 20px;
    border-radius: 3px;
    background: linear-gradient(90deg, #1d4ed8 0%, #38bdf8 100%);
}@media (max-width: 768px){
    .sp-avatars-row {
        height: 140px;
    }

    .sp-avatar-item[data-diff="-2"] {
        left: calc(50% - 189px);
        width: 44px;
        height: 44px;
    }

    .sp-avatar-item[data-diff="-1"] {
        left: calc(50% - 133px);
        width: 66px;
        height: 66px;
    }

    .sp-avatar-item.sp-avatar-active,
    .sp-avatar-item[data-diff="0"] {
        width: 110px;
        height: 110px;
    }

    .sp-avatar-item[data-diff="1"] {
        left: calc(50% + 67px);
        width: 66px;
        height: 66px;
    }

    .sp-avatar-item[data-diff="2"] {
        left: calc(50% + 145px);
        width: 44px;
        height: 44px;
    }

    .sp-quote-text {
        font-size: 0.9rem;
    }}/* O rótulo de cima da métrica (o original tinha rótulo, número e descrição). */
.sp-metric-titulo{font-size:.7rem!important; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.5)!important; margin-bottom:2px}
/* Os campos ainda por preencher ficam visivelmente vazios de propósito: um
   número inventado aqui é afirmação de venda, e some no meio do que é real. */
[data-editar]{opacity:.5}
/* A troca do texto acontece com ele apagado; sem isto, a frase nova aparece
   por cima da antiga no meio da transição dos avatares. */
.sp-quote-area{transition:opacity .18s ease}
.sp-av-circle{cursor:pointer}
/* Foto dentro do círculo do avatar. `object-fit: cover` preenche sem esticar
   o rosto — o recorte já foi feito no arquivo. */
.sp-av-circle{overflow:hidden; padding:0}
.sp-av-circle img{width:100%; height:100%; object-fit:cover; display:block}
/* O selo "Resultados" passa a ser igual ao "Programa de sócios": azul cheio
   com texto branco, no lugar do azul translúcido com texto azul, que sobre o
   preto ficava apagado. */
.sp-badge{
  color:#fff; border:none;
  background:linear-gradient(135deg,#1d4ed8,#2f7ff0);
  box-shadow:0 2px 8px rgba(47,127,240,.28), inset 0 1px 0 rgba(255,255,255,.2);
  font-size:.75rem; padding:7px 16px;
}

.stark-rot{display:flex; flex-direction:column; gap:12px; font-family:'Poppins',sans-serif}
.stark-rot-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.stark-rot-kicker{display:block; font-size:9.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#8a93a3}
.stark-rot-pct{display:block; margin-top:2px; font-size:26px; font-weight:800; color:#111827;
  line-height:1.05; font-variant-numeric:tabular-nums}
.stark-rot-selo{flex:0 0 auto; padding:4px 9px; border-radius:999px; font-size:9.5px;
  font-weight:600; color:#8a6100; background:rgba(240,180,41,.16); white-space:nowrap}

.stark-rot-grafico{height:96px; padding:0 2px}
.stark-rot-grafico svg{width:100%; height:100%; overflow:visible}

.stark-rot-semana{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.stark-rot-dia{aspect-ratio:1; display:grid; place-items:center; border-radius:8px;
  font-size:10px; font-weight:600; color:#b6bcc7; background:#f2f4f7}
/* O dia cumprido some com o texto e vira o "✓" — é o mesmo gesto do painel. */
.stark-rot-dia.feito{color:transparent; background:linear-gradient(135deg,#1d4ed8,#38bdf8);
  position:relative}
.stark-rot-dia.feito::after{content:'✓'; position:absolute; color:#fff; font-size:11px}

.stark-rot-habitos{display:flex; flex-direction:column; gap:6px}
.stark-rot-habito{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px;
  background:#f7f8fa; font-size:11.5px; color:#111827}
.stark-rot-habito em{margin-left:auto; font-style:normal; font-size:10.5px; color:#8a93a3;
  font-variant-numeric:tabular-nums}
@media (max-width:768px){
  .stark-rot-grafico{height:82px}
  .stark-rot-pct{font-size:22px}
}

/* ── A grade dos quatro cards de Projetos ─────────────────────────────────
   ⚠️ ERA DE TRÊS COLUNAS com dois cards em cima: a terceira coluna ficava
   vazia, e ao entrar o quarto card o buraco ficou evidente. Quatro cards
   pedem 2×2 — cada um ocupa uma célula, sem vão e sem card espremido.

   Escrito UMA vez: as posições anteriores estavam espalhadas em cinco regras,
   três delas contradizendo as outras. */
.mosaico-grid{display:grid; grid-template-columns:repeat(2,1fr);
  grid-auto-rows:minmax(520px,auto); gap:20px; width:100%}
.stark-bento-a{grid-column:1; grid-row:1}
.stark-bento-b{grid-column:2; grid-row:1}
.stark-bento-largo{grid-column:1; grid-row:2}
.stark-bento-rotina{grid-column:2; grid-row:2}

@media (max-width:900px){
  /* Empilhados, quem manda na ordem é a marcação. */
  .mosaico-grid{grid-template-columns:1fr; grid-auto-rows:auto}
  .stark-bento-a,.stark-bento-b,.stark-bento-largo,.stark-bento-rotina{
    grid-column:1; grid-row:auto}
}

/* ── O texto dos quatro cards, alinhado entre eles ────────────────────────
   ⚠️ DUAS REGRAS BRIGAVAM: uma dizia `margin-bottom:auto` (empurra o texto
   para cima) e outra `margin-top:auto` (empurra para baixo). Qual vencia
   dependia da ordem no arquivo — e o resultado era o texto começando numa
   altura diferente em cada card, conforme a tela acima dele.

   Agora: a tela ocupa o espaço que sobra, e o bloco de texto tem altura
   reservada. Com isso o título começa na MESMA linha nos quatro, mesmo que um
   parágrafo tenha uma linha a mais que o outro. */
.mosaico-card > :first-child{flex:1 1 auto; min-height:0; display:flex;
  flex-direction:column; justify-content:center}
.mosaico-content{
  flex:0 0 auto; margin:0; padding-top:22px; padding-right:48px;
  min-height:142px;
}
@media (max-width:900px){
  .mosaico-content{min-height:0}
}
/* O nome vira alvo de clique de verdade: cursor de mão e um leve recuo ao
   tocar, como os outros botões da barra. */
.stark-logo{cursor:pointer; transition:color .4s ease, transform .2s ease}
.stark-logo:active{transform:scale(.97)}

/* ── O rodapé no celular: tudo no mesmo eixo ──────────────────────────────
   ⚠️ O alinhamento vinha de três faixas diferentes (960px, 768px e 640px),
   cada uma mexendo numa parte. O resultado dependia da largura exata do
   aparelho: numa faixa a marca centralizava e as colunas não, na outra o
   inverso. Aqui é uma faixa só, e tudo compartilha o mesmo eixo. */
@media (max-width:768px){
  .rodape{padding:52px 24px 28px}
  .rodape-interno{max-width:100%; gap:30px}
  .rodape-topo{
    grid-template-columns:1fr; gap:30px; padding-bottom:28px;
    justify-items:center; text-align:center;
  }
  /* A marca não parte no meio: "Stark" e "Assessor" na mesma linha. */
  .rodape-marca{display:flex; flex-direction:column; align-items:center}
  .rodape-marca .stark-logo{justify-content:center; white-space:nowrap}
  .rodape-marca p{max-width:300px; margin:10px auto 0}

  .rodape-coluna{align-items:center; gap:12px; width:100%}
  .rodape-coluna h2{margin-bottom:0}

  .rodape-suporte{width:100%; max-width:340px; text-align:center}
  .rodape-zap{margin-inline:auto}

  .rodape-base{padding-top:22px; text-align:center}
}