/* Radar Promo Baby — landing /baby
   Identidade: cream editorial (mesma da bio.frantlab.com)
   cream #f7f1e8 · ink #34251d · peach #b86243 · sage #4d6647 */

:root {
    --cream: #f7f1e8;
    --shell: #f8f3eb;
    --paper: #fffaf3;
    --ink: #34251d;
    --muted: #857268;
    --line: rgba(104, 79, 64, 0.21);
    --peach: #f2c8b2;
    --peach-deep: #b86243;
    --peach-hot: #a35d42;
    --sage: #d9dec9;
    --sage-deep: #4d6647;
    --serif: "Playfair Display", Georgia, serif;
    --sans: Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    background:
        radial-gradient(circle at 22% 12%, rgba(243, 199, 175, 0.28), transparent 30rem),
        radial-gradient(circle at 82% 60%, rgba(197, 207, 178, 0.24), transparent 32rem),
        var(--shell);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
}

.noise-overlay {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.30;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

.ambient {
    position: fixed; z-index: 0; border-radius: 999px;
    filter: blur(2px); pointer-events: none;
}
.ambient-one {
    top: 240px; left: max(14px, calc(50% - 620px));
    width: 100px; height: 100px;
    border: 1px solid rgba(174, 106, 78, 0.16);
}
.ambient-two {
    right: max(14px, calc(50% - 600px)); bottom: 160px;
    width: 52px; height: 52px;
    background: rgba(187, 199, 162, 0.18);
}

main, .top-nav, .minimal-footer { position: relative; z-index: 2; }

/* ---------- Nav ---------- */
.top-nav {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1140px; margin: 0 auto;
    padding: 26px 24px 0;
}
.wordmark {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--serif); font-size: 21px; letter-spacing: -0.02em;
    color: var(--ink); text-decoration: none;
}
.wordmark em { font-style: italic; color: var(--peach-hot); }
.wordmark-heart { color: #dc8f6e; font-size: 18px; }
.nav-text-link {
    color: var(--muted); text-decoration: none;
    font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em;
    transition: color 160ms ease;
}
.nav-text-link:hover { color: var(--ink); }
.nav-status {
    display: flex; align-items: center; gap: 8px;
    color: var(--sage-deep); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
}
.pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #7d936f; display: inline-block;
    animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }

/* ---------- Hero ---------- */
.hero-editorial {
    display: grid; grid-template-columns: 1.08fr 0.92fr;
    align-items: center; gap: 48px;
    max-width: 1140px; margin: 0 auto;
    padding: 64px 24px 72px;
}
.eyebrow {
    display: inline-block;
    color: #a26a55; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    margin-bottom: 20px;
}
.main-headline {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(38px, 4.6vw, 58px);
    letter-spacing: -0.045em; line-height: 1.04;
}
.main-headline .line { display: block; }
.italic-serif { font-style: italic; color: var(--peach-hot); }
.hero-desc {
    max-width: 440px; margin: 24px 0 32px;
    color: var(--muted); font-size: 17px;
    letter-spacing: -0.02em; line-height: 1.6;
}
.hero-desc strong { color: var(--ink); }

.action-wrapper { display: flex; gap: 13px; flex-wrap: wrap; }
.cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px; border-radius: 999px;
    font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.cta-btn svg { width: 19px; height: 19px; fill: currentColor; }
.cta-btn:hover { transform: translateY(-2px); }
.cta-whatsapp {
    background: linear-gradient(112deg, #5d7a55, var(--sage-deep));
    color: #f6faf2;
    box-shadow: 0 14px 34px rgba(77, 102, 71, 0.32);
}
.cta-whatsapp:hover { box-shadow: 0 18px 42px rgba(77, 102, 71, 0.42); }
.cta-telegram {
    background: rgba(255, 251, 245, 0.8);
    color: var(--peach-hot);
    border: 1px solid rgba(163, 93, 66, 0.4);
    box-shadow: 0 10px 26px rgba(76, 53, 40, 0.07);
}
.cta-telegram:hover { box-shadow: 0 14px 32px rgba(76, 53, 40, 0.12); }
.cta-note { margin-top: 15px; color: var(--muted); font-size: 12.5px; letter-spacing: 0.01em; }

/* hero visuals */
.hero-visuals { position: relative; min-height: 430px; }
.image-wrapper.main-img {
    width: min(400px, 100%); aspect-ratio: 1;
    margin-left: auto;
    border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%;
    overflow: hidden;
    border: 1px solid rgba(117, 89, 72, 0.22);
    box-shadow: 0 30px 70px rgba(104, 74, 55, 0.16);
    background: var(--paper);
    padding: 10px;
}
.image-wrapper.main-img img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: inherit; display: block;
}
.float-slow { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.glass-tag {
    position: absolute;
    display: flex; align-items: center; gap: 11px;
    background: rgba(255, 251, 245, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 11px 16px 11px 11px;
    box-shadow: 0 14px 36px rgba(76, 53, 40, 0.12);
    transition: transform 300ms ease;
}
.tag-1 { top: 34px; left: -8px; }
.tag-2 { bottom: 46px; right: -4px; }
.icon-box {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(242, 200, 178, 0.5); color: var(--peach-hot);
}
.icon-box.sage { background: rgba(217, 222, 201, 0.6); color: var(--sage-deep); }
.icon-box svg { width: 21px; height: 21px; }
.tag-text { display: flex; flex-direction: column; }
.tag-text span {
    font-size: 9px; font-weight: 750; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
}
.tag-text strong {
    font-family: var(--serif); font-weight: 500;
    font-size: 15px; letter-spacing: -0.01em; color: var(--ink);
}

/* ---------- Marquee ---------- */
.scrolling-marquee {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 251, 245, 0.55);
    overflow: hidden;
    padding: 15px 0;
    white-space: nowrap;
}
.marquee-content {
    display: inline-flex; align-items: center; gap: 34px;
    animation: tickerScroll 34s linear infinite;
    color: var(--muted);
    font-size: 12px; font-weight: 650;
    letter-spacing: 0.16em; text-transform: uppercase;
    padding-left: 34px;
}
.marquee-mark { color: #dc8f6e; font-family: var(--serif); font-size: 15px; letter-spacing: 0; }
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Showcase ---------- */
.premium-showcase { padding: 84px 0 30px; }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 40px; padding: 0 24px; }
.section-header h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(30px, 3.6vw, 42px); letter-spacing: -0.04em;
}
.section-header p { margin-top: 12px; color: var(--muted); font-size: 15.5px; letter-spacing: -0.015em; }

.horizontal-scroll-container {
    overflow-x: auto; padding: 10px 24px 34px;
    scrollbar-width: thin; scrollbar-color: rgba(117, 89, 72, 0.3) transparent;
}
.cards-track {
    display: flex; gap: 20px;
    max-width: 1140px; margin: 0 auto;
    width: max-content; padding: 4px;
}
.lux-card {
    width: 250px; flex-shrink: 0;
    background: rgba(255, 251, 245, 0.85);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none; color: inherit;
    box-shadow: 0 10px 30px rgba(76, 53, 40, 0.05);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
a.lux-card:hover {
    transform: translateY(-4px);
    border-color: rgba(104, 79, 64, 0.36);
    box-shadow: 0 20px 48px rgba(76, 53, 40, 0.12);
}
.card-image {
    position: relative; height: 190px;
    background: #fff; display: grid; place-items: center;
    border-bottom: 1px solid var(--line);
}
.card-image img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.discount-pill {
    position: absolute; top: 12px; left: 12px;
    background: var(--peach-hot); color: #fff7f0;
    font-size: 11.5px; font-weight: 750; letter-spacing: 0.04em;
    padding: 4px 11px; border-radius: 999px;
    box-shadow: 0 6px 16px rgba(163, 93, 66, 0.35);
}
.discount-pill.bug { background: var(--sage-deep); box-shadow: 0 6px 16px rgba(77, 102, 71, 0.35); }
.card-details { padding: 16px 18px 19px; }
.card-details h3 {
    font-family: var(--serif); font-weight: 500;
    font-size: 15.5px; letter-spacing: -0.015em; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 40px;
}
.prices { display: flex; flex-direction: column; gap: 2px; margin-top: 11px; }
.prices .retail {
    color: var(--muted); font-size: 12px; text-decoration: line-through;
}
.prices .vip-price {
    color: var(--sage-deep); font-size: 17.5px; font-weight: 750; letter-spacing: -0.02em;
}

/* skeletons */
.skeleton-card .card-image { border-bottom-color: transparent; background: rgba(242, 200, 178, 0.18); }
.skeleton-text { border-radius: 8px; }
.skeleton-pulse { animation: skeletonPulse 1.4s ease-in-out infinite; background: rgba(133, 114, 104, 0.14); }
@keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- CTA final ---------- */
.ultimate-cta { padding: 60px 24px 90px; }
.glass-container {
    max-width: 760px; margin: 0 auto;
    text-align: center;
    background: linear-gradient(112deg, rgba(246, 210, 189, 0.55), rgba(221, 226, 207, 0.5));
    border: 1px solid var(--line);
    border-radius: 34px;
    padding: 58px 34px;
    box-shadow: 0 24px 60px rgba(104, 74, 55, 0.1);
}
.glass-container h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.04em; line-height: 1.1;
}
.glass-container p { margin: 16px auto 28px; color: var(--muted); font-size: 15.5px; max-width: 420px; line-height: 1.55; }
.cta-row { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.minimal-footer {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    flex-wrap: wrap;
    padding: 0 24px 44px;
    color: #9c7767;
    font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
}
.footer-rule { width: 44px; height: 1px; background: rgba(117, 89, 72, 0.34); }
.footer-mark { color: #dc8f6e; font-family: var(--serif); font-size: 16px; letter-spacing: normal; }
.footer-links { display: flex; gap: 18px; margin-left: 12px; }
.footer-links a { color: inherit; text-decoration: none; letter-spacing: 0.12em; }
.footer-links a:hover { color: var(--ink); }

/* ---------- Reveals ---------- */
.reveal-text, .reveal-text-delay, .reveal-text-delay-2 {
    opacity: 0; transform: translateY(16px);
    transition: opacity 600ms ease, transform 600ms ease;
}
.reveal-text-delay { transition-delay: 180ms; }
.reveal-text-delay-2 { transition-delay: 320ms; }
.reveal-text.active, .reveal-text-delay.active, .reveal-text-delay-2.active { opacity: 1; transform: translateY(0); }

.reveal-on-scroll, .reveal-card {
    opacity: 0; transform: translateY(22px);
    transition: opacity 650ms ease, transform 650ms ease;
}
.reveal-on-scroll.active, .reveal-card.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 120ms; }
.delay-2 { transition-delay: 240ms; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
    .hero-editorial {
        grid-template-columns: 1fr;
        gap: 40px; padding: 44px 20px 56px;
        text-align: center;
    }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .action-wrapper { justify-content: center; }
    .hero-visuals { min-height: 0; max-width: 340px; margin: 0 auto; }
    .image-wrapper.main-img { margin: 0 auto; }
    .tag-1 { top: 10px; left: -14px; }
    .tag-2 { bottom: 12px; right: -10px; }
    .nav-links-center { display: none; }
}

@media (max-width: 520px) {
    .top-nav { padding: 20px 16px 0; }
    .nav-status span:last-child { display: none; }
    .cta-btn { width: 100%; justify-content: center; }
    .glass-container { padding: 44px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .reveal-text, .reveal-text-delay, .reveal-text-delay-2, .reveal-on-scroll, .reveal-card {
        opacity: 1; transform: none;
    }
}