/* Arca — global styles */ :root { --bg: #FAFAF7; --bg-elev: #F4F2EC; --ink: #0E0E0C; --ink-2: #1F1E1A; --muted: #6B6A63; --muted-2: #9C9B92; --line: rgba(14,14,12,0.10); --line-2: rgba(14,14,12,0.18); --accent: oklch(34% 0.06 152); --accent-ink: #FAFAF7; --accent-soft: oklch(94% 0.02 152); --serif: "Instrument Serif", "Times New Roman", serif; --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --container: 1240px; --pad-x: clamp(20px, 4vw, 56px); --t-fast: 200ms cubic-bezier(.4,0,.2,1); --t-med: 420ms cubic-bezier(.22,1,.36,1); --t-slow: 700ms cubic-bezier(.22,1,.36,1); } /* Bold tone overrides — applied via [data-tone="bold"] on */ [data-tone="bold"] { --bg: #0B0B0A; --bg-elev: #141412; --ink: #F4F2EC; --ink-2: #E8E5DD; --muted: #8E8C82; --muted-2: #5C5B54; --line: rgba(244,242,236,0.10); --line-2: rgba(244,242,236,0.20); --accent: oklch(82% 0.18 122); --accent-ink: #0B0B0A; --accent-soft: oklch(28% 0.08 122); } /* Dark, but corporate (not bold) */ [data-mode="dark"]:not([data-tone="bold"]) { --bg: #0E0E0C; --bg-elev: #161613; --ink: #F2F0EA; --ink-2: #DCD9D1; --muted: #8B897F; --muted-2: #58564E; --line: rgba(242,240,234,0.09); --line-2: rgba(242,240,234,0.18); --accent: oklch(74% 0.10 152); --accent-ink: #0E0E0C; --accent-soft: oklch(28% 0.05 152); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-size: 16px; line-height: 1.55; letter-spacing: -0.005em; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img { max-width: 100%; display: block; } /* Type scale */ .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; transform: translateY(-1px); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; margin: 0; color: var(--ink); } h1 { font-size: clamp(48px, 7.4vw, 112px); line-height: 1.02; letter-spacing: -0.035em; padding-bottom: 0.08em; } h2 { font-size: clamp(36px, 4.6vw, 72px); line-height: 1.06; letter-spacing: -0.028em; } h3 { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.22; letter-spacing: -0.018em; padding-bottom: 0.06em; } h4 { font-size: 20px; line-height: 1.25; } [data-tone="bold"] h1, [data-tone="bold"] h2, [data-tone="bold"] h3, [data-tone="bold"] h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.04em; } [data-tone="bold"] h1 { letter-spacing: -0.05em; font-weight: 500; } p { margin: 0; color: var(--ink-2); } .lede { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--ink-2); letter-spacing: -0.01em; text-wrap: pretty; max-width: 60ch; } /* Layout */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .section { padding-top: clamp(72px, 9vw, 140px); padding-bottom: clamp(72px, 9vw, 140px); position: relative; } .section--tight { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); } .divider { height: 1px; background: var(--line); width: 100%; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); background: transparent; color: var(--ink); } .btn--primary { background: var(--ink); color: var(--bg); } .btn--primary:hover { transform: translateY(-1px); } [data-tone="bold"] .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--ghost { border-color: var(--line-2); background: transparent; } .btn--ghost:hover { background: var(--bg-elev); border-color: var(--ink); } .btn .arrow { display: inline-block; transition: transform var(--t-fast); } .btn:hover .arrow { transform: translate(2px, -2px); } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 720ms cubic-bezier(.22,1,.36,1), transform 720ms cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-in { opacity: 1; transform: translateY(0); } /* Nav */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 78%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color var(--t-fast), background var(--t-fast); } .nav.is-scrolled { border-bottom-color: var(--line); } .nav.menu-open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg) !important; } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: inline-flex; align-items: center; } .brand__img { height: 26px; width: auto; display: block; } /* logo claro: modo light E tom corporate */ [data-mode="light"]:not([data-tone="bold"]) .brand__img--dark { display: none; } /* logo escuro: modo dark OU tom bold */ [data-mode="dark"] .brand__img--light { display: none; } [data-tone="bold"] .brand__img--light { display: none; } .nav__links { display: flex; gap: 28px; align-items: center; font-size: 14px; color: var(--ink-2); } .nav__links a { position: relative; padding: 6px 0; } .nav__links a:hover { color: var(--ink); } .nav__links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--ink); } .nav__cta { display: flex; align-items: center; gap: 12px; } /* Dropdown */ .nav__dropdown { position: relative; display: inline-block; } .nav__dropdown-trigger { background: none; border: 0; padding: 6px 0; font: inherit; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; position: relative; letter-spacing: -0.005em; } .nav__dropdown-trigger:hover, .nav__dropdown-trigger.is-active { color: var(--ink); } .nav__dropdown-trigger.is-active::after { content: ""; position: absolute; left: 0; right: 18px; bottom: -2px; height: 1px; background: var(--ink); } .nav__caret { font-size: 10px; transition: transform var(--t-fast); display: inline-block; } .nav__dropdown.is-open .nav__caret { transform: rotate(180deg); } .nav__dropdown-menu { position: absolute; top: calc(100% + 14px); right: 0; min-width: 200px; background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px; display: none; flex-direction: column; gap: 2px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); z-index: 100; } .nav__dropdown.is-open .nav__dropdown-menu { display: flex; } .nav__dropdown-menu a { padding: 10px 14px; border-radius: 6px; font-size: 14px; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); } .nav__dropdown-menu a:hover { background: var(--bg); color: var(--ink); } .nav__dropdown-menu a.is-active { background: var(--accent); color: var(--accent-ink); } /* Hamburger button */ .nav__burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 60; } .nav__burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; transform-origin: center; } .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.is-open span:nth-child(2) { opacity: 0; } .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 760px) { .nav__links { display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0; background: var(--bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 24px 24px; gap: 0; z-index: 200; overflow-y: auto; } .nav__links.is-open { display: flex; } .nav__links a { font-size: 24px; font-weight: 500; padding: 20px 0; border-bottom: 1px solid var(--line); width: 100%; color: var(--ink) !important; } .nav__links a:last-child { border-bottom: none; } .nav__cta { display: none; } .nav__burger { display: flex; } /* Dropdown mobile: sempre expandido */ .nav__dropdown { width: 100%; border-bottom: 1px solid var(--line); } .nav__dropdown-trigger { width: 100%; justify-content: flex-start; font-size: 24px; font-weight: 500; padding: 20px 0 8px; color: var(--ink) !important; pointer-events: none; } .nav__dropdown-trigger.is-active::after { display: none; } .nav__caret { display: none; } .nav__dropdown-menu { position: static; display: flex !important; background: transparent; border: 0; box-shadow: none; padding: 0 0 16px 14px; min-width: 0; } .nav__dropdown-menu a { font-size: 20px; font-weight: 400; padding: 12px 0; border-bottom: 0; border-radius: 4px; color: var(--ink-2) !important; } .nav__dropdown-menu a.is-active { background: var(--accent); color: var(--accent-ink) !important; padding: 10px 12px; } } /* Footer */ .foot { border-top: 1px solid var(--line); padding: 64px 0 36px; background: var(--bg); } .foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .foot h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 16px; } .foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .foot a { color: var(--ink-2); font-size: 14px; } .foot a:hover { color: var(--ink); } .foot__base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); } @media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; } } /* Hero */ .hero { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(72px, 9vw, 140px); position: relative; } .hero__eyebrow { margin-bottom: 28px; } .hero h1 { max-width: 14ch; } .hero h1 em { font-style: italic; color: var(--muted); } [data-tone="bold"] .hero h1 em { color: var(--accent); font-style: normal; } .hero__sub { margin-top: 40px; max-width: 56ch; } .hero__cta { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; } .hero__meta { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 32px; border-top: 1px solid var(--line); } .hero__meta .stat__num { font-family: var(--serif); font-size: clamp(36px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.03em; } [data-tone="bold"] .hero__meta .stat__num { font-family: var(--sans); font-weight: 500; letter-spacing: -0.04em; } .hero__meta .stat__lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); margin-top: 12px; } @media (max-width: 760px) { .hero__meta { grid-template-columns: repeat(2, 1fr); gap: 20px; } } /* Marquee — client logos */ .marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); } .marquee__track { display: flex; gap: 64px; padding: 28px 0; animation: marquee 60s linear infinite; white-space: nowrap; width: max-content; } .marquee__item { font-family: var(--serif); font-size: 28px; letter-spacing: -0.02em; color: var(--muted); display: inline-flex; align-items: center; gap: 64px; opacity: 0.85; } [data-tone="bold"] .marquee__item { font-family: var(--sans); font-weight: 500; } .marquee__item::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Section header */ .shead { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: end; margin-bottom: 64px; } .shead__title h2 { max-width: 16ch; } .shead__lede { padding-bottom: 6px; } @media (max-width: 860px) { .shead { grid-template-columns: 1fr; gap: 24px; align-items: start; } } /* Services */ .services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); } .svc { padding: 40px 32px 44px; border-bottom: 1px solid var(--line); position: relative; display: flex; flex-direction: column; gap: 28px; min-height: 340px; transition: background var(--t-fast); } .svc:nth-child(odd) { border-right: 1px solid var(--line); } .svc:hover { background: var(--bg-elev); } .svc__num { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.10em; } .svc h3 { max-width: 14ch; } .svc p { color: var(--muted); max-width: 44ch; } .svc__list { margin-top: auto; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); } .svc__list li { display: flex; align-items: center; gap: 12px; } .svc__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } @media (max-width: 760px) { .services { grid-template-columns: 1fr; } .svc:nth-child(odd) { border-right: 0; } } /* Cases */ .cases { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .case { background: var(--bg-elev); border-radius: 4px; padding: 36px 32px 32px; position: relative; overflow: hidden; transition: transform var(--t-med); border: 1px solid var(--line); } .case:hover { transform: translateY(-3px); } .case__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; } .case__brand { font-family: var(--serif); font-size: 22px; letter-spacing: -0.02em; } [data-tone="bold"] .case__brand { font-family: var(--sans); font-weight: 600; } .case__tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; } .case h3 { max-width: 18ch; margin-bottom: 28px; } .case__metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); } .case__metric .num { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 40px); line-height: 1; letter-spacing: -0.025em; color: var(--ink); } [data-tone="bold"] .case__metric .num { font-family: var(--sans); font-weight: 500; letter-spacing: -0.03em; color: var(--accent); } .case__metric .num small { font-size: 0.5em; color: var(--muted); margin-left: 2px; font-style: italic; } [data-tone="bold"] .case__metric .num small { color: var(--muted); font-style: normal; } .case__metric .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); margin-top: 8px; } @media (max-width: 860px) { .cases { grid-template-columns: 1fr; } } /* Testimonials */ .tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tcard { padding: 32px 28px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; gap: 24px; } .tcard p { font-family: var(--serif); font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; } [data-tone="bold"] .tcard p { font-family: var(--sans); font-weight: 400; font-size: 19px; letter-spacing: -0.015em; } .tcard__who { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; } .tcard__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; } [data-tone="bold"] .tcard__avatar { background: var(--accent); color: var(--accent-ink); } .tcard__name { font-weight: 500; color: var(--ink); } .tcard__role { color: var(--muted); font-size: 12px; } @media (max-width: 960px) { .tcards { grid-template-columns: 1fr; } } /* CTA section */ .cta { background: var(--ink); color: var(--bg); border-radius: 6px; padding: clamp(56px, 7vw, 112px) clamp(32px, 5vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; } [data-tone="bold"] .cta { background: var(--accent); color: var(--accent-ink); } .cta h2 { color: inherit; max-width: 14ch; } .cta__right { display: flex; flex-direction: column; gap: 24px; } .cta__lede { color: rgba(255,255,255,0.7); max-width: 44ch; } [data-tone="bold"] .cta__lede { color: rgba(0,0,0,0.7); } .cta .btn--primary { background: var(--bg); color: var(--ink); } [data-tone="bold"] .cta .btn--primary { background: #0a0a0a; color: #fff; } [data-tone="bold"] .cta .btn--primary:hover { background: #1a1a1a; } .cta .btn--ghost { border-color: rgba(255,255,255,0.25); color: var(--bg); } [data-tone="bold"] .cta .btn--ghost { background: #0a0a0a; border-color: #0a0a0a; color: #fff; } .cta .btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--bg); } [data-tone="bold"] .cta .btn--ghost:hover { background: #1a1a1a; border-color: #1a1a1a; } @media (max-width: 760px) { .cta { grid-template-columns: 1fr; } } /* Cases page */ .case-row { display: grid; grid-template-columns: 0.6fr 1fr 1.2fr; gap: 48px; padding: 48px 0; border-top: 1px solid var(--line); align-items: start; } .case-row:last-child { border-bottom: 1px solid var(--line); } .case-row__brand { font-family: var(--serif); font-size: 32px; letter-spacing: -0.02em; } [data-tone="bold"] .case-row__brand { font-family: var(--sans); font-weight: 600; } .case-row__seg { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; } .case-row h3 { font-size: 28px; line-height: 1.15; max-width: 22ch; } .case-row__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 960px) { .case-row { grid-template-columns: 1fr; gap: 24px; } } /* Service detail page */ .svc-hero { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; } .svc-hero h1 { font-size: clamp(40px, 5.6vw, 80px); max-width: 14ch; } @media (max-width: 860px) { .svc-hero { grid-template-columns: 1fr; } } .svc-detail { display: grid; grid-template-columns: 0.5fr 1fr; gap: 48px; padding-top: 64px; padding-bottom: 64px; border-top: 1px solid var(--line); } .svc-detail:last-child { border-bottom: 1px solid var(--line); } .svc-detail__num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin-bottom: 16px; } .svc-detail h3 { max-width: 14ch; } .svc-detail__sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 14px; line-height: 1.7; } .svc-detail__body p { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin-bottom: 28px; } .svc-detail__bullets { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: 14px; } .svc-detail__bullets li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); } .svc-detail__bullets li::before { content: ""; width: 14px; height: 1px; background: var(--ink-2); margin-top: 11px; flex: none; } @media (max-width: 860px) { .svc-detail { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 56px; border-top-color: var(--line-2); } .svc-detail__num { font-size: 13px; margin-bottom: 20px; } .svc-detail h3 { font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; max-width: none; } .svc-detail__sub { font-size: 11px; letter-spacing: 0.14em; line-height: 1.7; margin-top: 16px; } .svc-detail__body p { font-size: 17px; line-height: 1.55; margin-bottom: 24px; } .svc-detail__bullets { grid-template-columns: 1fr; gap: 16px; font-size: 15px; margin-top: 8px; } .svc-detail__bullets li { gap: 14px; } .svc-detail__bullets li::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 9px; } .svc-hero { padding-top: 32px; padding-bottom: 40px; gap: 28px; } .svc-hero h1 { font-size: clamp(34px, 8vw, 48px); max-width: none; } } /* Process strip */ .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); } .process__step { padding: 36px 24px 32px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; } .process__step:last-child { border-right: 0; } .process__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); } .process__step h4 { font-family: var(--serif); font-weight: 400; font-size: 22px; } [data-tone="bold"] .process__step h4 { font-family: var(--sans); font-weight: 500; } .process__step p { font-size: 13px; color: var(--muted); } @media (max-width: 760px) { .process { grid-template-columns: 1fr 1fr; } .process__step:nth-child(2) { border-right: 0; } .process__step:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } /* Contact form */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .contact__info { display: flex; flex-direction: column; gap: 32px; } .contact__info-item h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-weight: 500; } .contact__info-item p { font-size: 18px; color: var(--ink); } .wa-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; transition: color var(--t-fast); } .wa-link svg { width: 22px; height: 22px; color: var(--accent); flex: none; } .wa-link:hover { color: var(--accent); } .form { display: flex; flex-direction: column; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .field input, .field select, .field textarea { font-family: var(--sans); font-size: 16px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; color: var(--ink); outline: none; border-radius: 0; transition: border-color var(--t-fast); } .field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--ink); } .field textarea { resize: vertical; min-height: 90px; font-family: var(--sans); } .field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .form__submit { margin-top: 16px; align-self: flex-start; } .form__success { padding: 24px; background: var(--accent-soft); color: var(--accent); border-radius: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; } [data-tone="bold"] .form__success { background: var(--accent); color: var(--accent-ink); } @media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: 32px; } .field--row { grid-template-columns: 1fr; } } /* Page header (internal pages) */ .pghead { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); } .pghead .eyebrow { margin-bottom: 24px; } .pghead h1 { font-size: clamp(48px, 6vw, 88px); max-width: 16ch; } .pghead__lede { margin-top: 28px; max-width: 60ch; } /* Image placeholder (striped) */ .imgph { position: relative; width: 100%; border-radius: 4px; background-image: repeating-linear-gradient( 135deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 12px ); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; } .imgph__lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* Bold tone — selectively saturate */ [data-tone="bold"] body { letter-spacing: -0.005em; } [data-tone="bold"] .nav { background: color-mix(in oklab, var(--bg) 70%, transparent); } [data-tone="bold"] .case { border-color: var(--line); } [data-tone="bold"] .accent-text { color: var(--accent); } /* Partners */ .partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .partner { padding: 44px 28px 36px; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-height: 180px; transition: background var(--t-fast); position: relative; } .partner:last-child { border-right: 0; } .partner:hover { background: var(--bg-elev); } .partner__mark { font-size: clamp(24px, 2.2vw, 32px); line-height: 1; color: var(--ink); } .partner__spec { margin-top: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); } .partner__note { margin-top: 24px; display: flex; gap: 12px; align-items: baseline; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); } .partner__note > span:first-child { color: var(--accent); font-size: 14px; } @media (max-width: 860px) { .partners { grid-template-columns: 1fr 1fr; } .partner:nth-child(2) { border-right: 0; } .partner:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } @media (max-width: 520px) { .partners { grid-template-columns: 1fr; } .partner { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; } .partner:last-child { border-bottom: 0; } } /* ───────────────────────────────────────────────────────────────────────────── PROPOSTA COMERCIAL ───────────────────────────────────────────────────────────────────────────── */ /* Shake keyframe */ @keyframes gate-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } } /* Password gate — tela cheia centralizada */ .gate { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } .gate__card { width: 100%; max-width: 440px; background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(32px, 5vw, 56px); } .gate__card--shake { animation: gate-shake 0.45s cubic-bezier(.36,.07,.19,.97); } /* btn--lg */ .btn--lg { height: 52px; padding: 0 32px; font-size: 16px; } /* ── Blocos de precificação ──────────────────────────────────────────────────── */ .preco-bloco { background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 16px; padding: clamp(24px, 3vw, 40px); margin-bottom: 24px; } .preco-bloco__header { margin-bottom: 28px; } .preco-bloco__label { font-size: clamp(17px, 2vw, 22px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .preco-bloco__sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } .preco-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; } .preco-tier { padding: 24px 20px; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 8px; position: relative; } .preco-tier:last-child { border-right: 0; } .preco-tier--dest { background: var(--accent-soft); } .preco-tier__badge { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .preco-tier__range { font-size: 13px; color: var(--muted); font-family: var(--mono); } .preco-tier__val { font-size: clamp(22px, 3vw, 32px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; } .preco-tier__val small { font-size: 0.45em; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 2px; } /* Cards Loja + FEE */ .preco-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 48px; } .preco-card { background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 16px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 10px; } .preco-card--accent { background: var(--accent-soft); border-color: var(--accent); } .preco-card__eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); } .preco-card--accent .preco-card__eyebrow { color: var(--accent); } .preco-card__label { font-size: 15px; font-weight: 600; color: var(--ink); } .preco-card__val { font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -0.04em; color: var(--ink); line-height: 1; } .preco-card__val small { font-size: 0.4em; font-weight: 400; color: var(--muted); letter-spacing: 0; } .preco-card__desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; } /* CTA da seção de preços */ .preco-cta { text-align: center; margin-top: 48px; } /* ── Modal overlay ────────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: overlay-in 0.2s ease; } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 680px; max-height: 92dvh; background: var(--bg); border-radius: 20px 20px 0 0; border: 1px solid var(--line-2); border-bottom: 0; display: flex; flex-direction: column; overflow: hidden; animation: modal-up 0.28s cubic-bezier(.22,1,.36,1); } @keyframes modal-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (min-width: 720px) { .modal-overlay { align-items: center; padding: 24px; } .modal { border-radius: 20px; border-bottom: 1px solid var(--line-2); } } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 28px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .modal__close { appearance: none; border: 0; background: var(--bg-elev); color: var(--muted); width: 32px; height: 32px; border-radius: 50%; font-size: 14px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background var(--t-fast), color var(--t-fast); } .modal__close:hover { background: var(--line-2); color: var(--ink); } .modal__body { flex: 1; overflow-y: auto; padding: 28px; display: flex; flex-direction: column; gap: 24px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .modal__body .field { gap: 10px; } .modal__body .field input, .modal__body .field select, .modal__body .field textarea { padding: 14px 0; } .modal__footer { padding: 20px 28px 24px; border-top: 1px solid var(--line); flex-shrink: 0; background: var(--bg); } /* Fieldsets dentro do modal */ .modal__fieldset { border: 0; padding: 0; margin: 0 0 28px; } .modal__fieldset legend { font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; padding: 0; width: 100%; border-bottom: 1px solid var(--line); padding-bottom: 8px; } /* Checkboxes de marketplaces */ .mkt-checks { display: flex; flex-wrap: wrap; gap: 8px; } .mkt-check { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); user-select: none; } .mkt-check input[type="checkbox"] { display: none; } .mkt-check:hover { border-color: var(--ink-2); color: var(--ink); } .mkt-check--on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* ── Responsivo preços ──────────────────────────────────────────────────────── */ @media (max-width: 680px) { .preco-tiers { grid-template-columns: 1fr; } .preco-tier { border-right: 0; border-bottom: 1px solid var(--line-2); } .preco-tier:last-child { border-bottom: 0; } .preco-cards { grid-template-columns: 1fr; } } /* Print */ @media print { .nav, .foot, .twk-panel, .twk-toggle { display: none; } } /* ───────────────────────────────────────────────────────────────────────────── Prep Center page ───────────────────────────────────────────────────────────────────────────── */ /* Stats hero strip */ .prep-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .prep-stat { padding: 28px 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } .prep-stat:last-child { border-right: 0; } .prep-stat__num { font-family: var(--sans); font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); } .prep-stat__lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } @media (max-width: 760px) { .prep-stats { grid-template-columns: 1fr 1fr; } .prep-stat { padding: 22px 16px; border-bottom: 1px solid var(--line); } .prep-stat:nth-child(2n) { border-right: 0; } .prep-stat:nth-last-child(-n+2) { border-bottom: 0; } } /* Grid de blocos de preço */ .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .price-grid > .price-block:nth-child(3), .price-grid > .price-block:nth-child(5) { grid-column: 1 / -1; } @media (max-width: 960px) { .price-grid { grid-template-columns: 1fr; gap: 20px; } } /* Bloco individual */ .price-block { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 18px; transition: border-color var(--t-fast); } .price-block:hover { border-color: var(--line-2); } .price-block__head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .price-block__num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--accent); background: rgba(177,205,77,0.12); padding: 6px 10px; border-radius: 999px; flex: none; } [data-tone="bold"] .price-block__num { background: rgba(177,205,77,0.14); } .price-block__title { font-family: var(--sans); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .price-block__subtitle { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } .price-block__body { display: flex; flex-direction: column; gap: 0; } .price-block__note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-top: 4px; line-height: 1.5; } /* Linha de preço (label + valor) */ .price-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .price-row:last-child { border-bottom: 0; } .price-row__label { font-size: 15px; color: var(--ink-2); flex: 1; line-height: 1.4; } .price-row__note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .price-row__value { font-family: var(--sans); font-weight: 500; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; text-align: right; } [data-tone="bold"] .price-row__value { color: var(--accent); } /* Tiers do FBA / ML Full */ .prep-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 4px; } .prep-tier { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; } .prep-tier__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .prep-tier__sub { font-size: 13px; color: var(--muted); line-height: 1.4; } @media (max-width: 760px) { .prep-tiers { grid-template-columns: 1fr; gap: 8px; } } /* Tabela de preços (FBA e D2C) */ .prep-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .prep-table__head { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; background: var(--bg); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .prep-table__head > div { padding: 12px 16px; border-right: 1px solid var(--line); } .prep-table__head > div:last-child { border-right: 0; text-align: right; } .prep-table__head > div:nth-child(n+2):not(:last-child) { text-align: right; } .prep-table__row { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; border-top: 1px solid var(--line); align-items: center; } .prep-table__row--3col { grid-template-columns: 2.2fr 1fr 1fr; } .prep-table__row--3col + .prep-table__head, .prep-table__head + .prep-table__row--3col, .prep-table__row--3col { /* head ja vem com 4col, vamos reescrever quando for 3col */ } /* Override quando o head é de 3 colunas */ .price-block:has(.prep-table__row--3col) .prep-table__head { grid-template-columns: 2.2fr 1fr 1fr; } .prep-table__svc { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; font-size: 14px; color: var(--ink-2); line-height: 1.4; border-right: 1px solid var(--line); } .prep-table__roman { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: none; margin-top: 2px; } .prep-table__cell { padding: 14px 16px; font-family: var(--sans); font-weight: 500; font-size: 15px; color: var(--ink); text-align: right; border-right: 1px solid var(--line); } [data-tone="bold"] .prep-table__cell { color: var(--accent); } .prep-table__cell:last-child { border-right: 0; } .prep-table__cell--muted { color: var(--muted) !important; font-weight: 400; font-size: 13px; font-style: italic; } /* Tabela responsiva — vira cards no mobile */ @media (max-width: 760px) { .prep-table__head { display: none; } .prep-table { border: 0; border-radius: 0; } .prep-table__row, .prep-table__row--3col { display: flex; flex-direction: column; gap: 0; padding: 16px 0; border-top: 1px solid var(--line); background: transparent; } .price-block:has(.prep-table__row--3col) .prep-table__head { display: none; } .prep-table__svc { border-right: 0; padding: 0 0 12px; font-size: 15px; color: var(--ink); font-weight: 500; } .prep-table__cell { border-right: 0; padding: 6px 0; text-align: left; display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .prep-table__cell::before { content: attr(data-label); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 400; } } /* Padding ajuste mobile dos blocks */ @media (max-width: 640px) { .price-block { padding: 22px 20px 20px; } .price-block__title { font-size: 20px; } .price-row__value { font-size: 16px; } } /* ─── Simulações ────────────────────────────────────────────────────────────── */ .sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 960px) { .sim-grid { grid-template-columns: 1fr; } } .sim-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 24px; transition: border-color var(--t-fast); } .sim-card:hover { border-color: var(--line-2); } .sim-card__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .sim-card__title { font-family: var(--sans); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 0 0 14px; } .sim-card__desc { font-size: 15px; line-height: 1.55; color: var(--muted); } .sim-card__desc strong { color: var(--ink-2); font-weight: 500; } .sim-lines { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .sim-line { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); } .sim-line__calc { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-align: right; } .sim-line strong { font-family: var(--sans); font-weight: 500; font-size: 15px; color: var(--ink); white-space: nowrap; text-align: right; min-width: 80px; } .sim-card__total { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px; background: var(--bg); border-radius: 10px; border: 1px solid var(--line); margin-top: auto; } .sim-card__total-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .sim-card__total-val { font-family: var(--sans); font-weight: 500; font-size: 28px; letter-spacing: -0.025em; color: var(--ink); } .sim-card__unit { text-align: right; } .sim-card__unit-val { font-family: var(--sans); font-weight: 500; font-size: 28px; letter-spacing: -0.025em; color: var(--accent); } .sim-note { display: flex; gap: 12px; margin-top: 32px; padding: 16px 20px; border-left: 2px solid var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); line-height: 1.6; } .sim-note span:first-child { color: var(--accent); flex: none; } /* Mobile */ @media (max-width: 760px) { .sim-card { padding: 24px 20px; } .sim-card__title { font-size: 22px; } .sim-line { grid-template-columns: 1fr auto; gap: 4px 16px; } .sim-line__calc { grid-column: 1 / -1; text-align: left; margin-top: 2px; } .sim-line strong { grid-row: 1; grid-column: 2; } .sim-line > span:first-child { grid-row: 1; grid-column: 1; } .sim-card__total { padding: 18px 20px; } .sim-card__total-val, .sim-card__unit-val { font-size: 24px; } } /* ─── Benefícios ─────────────────────────────────────────────────────────────── */ .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 960px) { .benefits-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .benefits-grid { grid-template-columns: 1fr; gap: 14px; } } .benefit { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 14px; transition: border-color var(--t-fast), transform var(--t-fast); } .benefit:hover { border-color: var(--line-2); transform: translateY(-2px); } .benefit__icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(177,205,77,0.10); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex: none; } [data-tone="bold"] .benefit__icon { background: rgba(177,205,77,0.12); } .benefit__title { font-family: var(--sans); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; color: var(--ink); margin: 0; } .benefit__desc { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; } /* ─── Work-in-progress (placeholder pages) ──────────────────────────────────── */ .wip { min-height: calc(100vh - 68px); display: flex; align-items: center; justify-content: center; padding: 80px var(--pad-x); } .wip__inner { max-width: 640px; text-align: center; } .wip__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); background: rgba(177,205,77,0.12); display: inline-block; padding: 8px 14px; border-radius: 999px; margin-bottom: 32px; } .wip__title { font-family: var(--sans); font-weight: 500; font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); margin: 0 0 24px; } .wip__lede { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); margin: 0 auto 40px; max-width: 52ch; } .wip__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } @media (max-width: 640px) { .wip { padding: 60px 20px; min-height: calc(100vh - 60px); } .wip__title { font-size: 36px; letter-spacing: -0.03em; } .wip__lede { font-size: 16px; } } /* ─── Calculadora Amazon 1P ─────────────────────────────────────────────────── */ .calc-hero { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; } .calc-hero h1 { font-size: clamp(40px, 5.6vw, 80px); max-width: 16ch; } @media (max-width: 860px) { .calc-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; padding-bottom: 40px; } .calc-hero h1 { font-size: clamp(34px, 8vw, 48px); max-width: none; } } .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } @media (max-width: 960px) { .calc-grid { grid-template-columns: 1fr; } } /* ── Card de inputs ──────────────────────────────────────────────────────── */ .calc-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 28px; } .calc-card__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .calc-card__head h3 { font-family: var(--sans); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; color: var(--ink); margin: 0; } .calc-reset { background: none; border: 1px solid var(--line-2); color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); } .calc-reset:hover { color: var(--ink); border-color: var(--ink); } .calc-section { display: flex; flex-direction: column; gap: 14px; } .calc-section__title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } /* ── Inputs ──────────────────────────────────────────────────────────────── */ .calc-field { display: flex; flex-direction: column; gap: 6px; } .calc-field label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .calc-field__hint { text-transform: none; font-size: 10px; letter-spacing: 0; color: var(--muted-2); font-weight: 400; text-align: right; max-width: 60%; } .calc-field input { font-family: var(--sans); font-size: 16px; font-weight: 500; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; color: var(--ink); outline: none; border-radius: 0; transition: border-color var(--t-fast); width: 100%; } .calc-field input:focus { border-bottom-color: var(--accent); } .calc-field__pct { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-2); } .calc-field__pct input { border-bottom: 0; } /* Campo travado (fixo) */ .calc-field--locked .calc-field__pct { border-bottom-color: var(--line); background: rgba(255,255,255,0.02); } .calc-field--locked input { color: var(--muted); cursor: not-allowed; user-select: none; } .calc-field__lock { font-size: 10px; margin-left: 6px; opacity: 0.6; } .calc-field__pct span { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-right: 4px; } /* ── Resultado ───────────────────────────────────────────────────────────── */ .calc-result { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; } @media (max-width: 960px) { .calc-result { position: static; } } .calc-headline { background: var(--bg); border-radius: 10px; padding: 20px; } .calc-headline__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .calc-headline__val { font-family: var(--sans); font-weight: 500; font-size: 36px; letter-spacing: -0.03em; color: var(--accent); } .calc-headline__formula { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 10px; letter-spacing: 0.04em; } .calc-breakdown { display: flex; flex-direction: column; padding: 8px 0; } .calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); } .calc-row:last-child { border-bottom: 0; } .calc-row--accent { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2) !important; padding: 14px 0; background: rgba(255,255,255,0.02); margin: 4px 0; } .calc-row__label { font-size: 14px; color: var(--ink-2); font-weight: 500; } .calc-row__sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); margin-top: 2px; } .calc-row__val { font-family: var(--sans); font-weight: 500; font-size: 15px; color: var(--ink); white-space: nowrap; } .calc-row__val--neg { color: var(--muted); } /* Summary final */ .calc-summary { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding: 24px; border-radius: 12px; margin-top: 8px; background: var(--bg); border: 1px solid var(--line); transition: border-color var(--t-fast), background var(--t-fast); } .calc-summary__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .calc-summary__val { font-family: var(--sans); font-weight: 500; font-size: 28px; letter-spacing: -0.025em; color: var(--ink); } .calc-summary__divider { width: 1px; height: 40px; background: var(--line-2); } .calc-summary.is-good { border-color: var(--accent); background: rgba(177,205,77,0.06); } .calc-summary.is-good .calc-summary__val { color: var(--accent); } .calc-summary.is-ok { border-color: #d4a64a; background: rgba(212,166,74,0.06); } .calc-summary.is-ok .calc-summary__val { color: #d4a64a; } .calc-summary.is-bad { border-color: #c14a3a; background: rgba(193,74,58,0.06); } .calc-summary.is-bad .calc-summary__val { color: #c14a3a; } .calc-tip { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--muted); padding: 12px 16px; border-left: 2px solid var(--accent); background: rgba(177,205,77,0.04); border-radius: 0 6px 6px 0; } /* Mobile */ @media (max-width: 760px) { .calc-card, .calc-result { padding: 22px 18px; } .calc-headline__val { font-size: 32px; } .calc-summary { grid-template-columns: 1fr; gap: 14px; text-align: left; } .calc-summary__divider { width: 100%; height: 1px; } .calc-summary__val { font-size: 26px; } }