/* ========================================================= Mobile-first • Layout refinado • Acessibilidade (WCAG 2.2 AA) - Duas LPs separadas: investigue.html e atento.html - Tema por página via ========================================================= */ :root{ --radius: 16px; --radius-sm: 12px; --shadow: 0 18px 46px rgba(0,0,0,.36); --shadow-soft: 0 12px 28px rgba(0,0,0,.20); --text: #ffffff; --muted: rgba(255,255,255,.82); --bg: #0b0b0b; --panel: rgba(255,255,255,.06); --panel-strong: rgba(255,255,255,.085); --border: rgba(255,255,255,.12); --accent: #C62828; /* investigue default */ --accent2: #F5A623; /* investigue default */ --ring: 0 0 0 3px rgba(245,166,35,.34); --btn-primary-bg: var(--accent); --btn-primary-fg: #fff; --btn-secondary-bg: rgba(255,255,255,.10); --btn-secondary-fg: #fff; --container: 1040px; } /* ===== Theme: INVESTIGUE ===== */ body[data-lp="investigue"]{ --bg: #07070a; --panel: rgba(255,255,255,.055); --panel-strong: rgba(255,255,255,.085); --border: rgba(255,255,255,.12); --accent: #C62828; --accent2: #F5A623; --ring: 0 0 0 3px rgba(245,166,35,.34); --btn-primary-bg: var(--accent); --btn-primary-fg: #fff; --btn-secondary-bg: rgba(245,166,35,.14); --btn-secondary-fg: #ffffff; } /* ===== Theme: ATENTO ===== */ body[data-lp="atento"]{ --bg: #061724; --panel: rgba(255,255,255,.055); --panel-strong: rgba(255,255,255,.085); --border: rgba(255,255,255,.12); --accent: #1F4FD8; --accent2: #2ECC71; --ring: 0 0 0 3px rgba(46,204,113,.30); --btn-primary-bg: var(--accent2); --btn-primary-fg: #061724; --btn-secondary-bg: rgba(31,79,216,.18); --btn-secondary-fg: #ffffff; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } img{ max-width:100%; height:auto; display:block; border-radius: var(--radius); } a{ color: inherit; text-decoration:none; } button{ font-family: inherit; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 12px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:-999px; top: 10px; background: var(--accent2); color: #050507; padding: 10px 12px; border-radius: 12px; z-index: 9999; font-weight: 900; } .skip-link:focus{ left: 12px; } /* ========================= Layout ========================= */ .container{ max-width: var(--container); margin: 0 auto; padding: 18px; } @media (min-width: 880px){ .container{ padding: 26px; } } /* ========================= Topbar ========================= */ .topbar{ position: sticky; top: 0; z-index: 1200; background: rgba(10,10,12,.70); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); } .topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap: 12px; min-height: 64px; } .brand{ display:inline-flex; align-items:center; gap: 10px; } .brand__dot{ width: 11px; height: 11px; border-radius: 999px; background: var(--accent2); box-shadow: 0 0 0 7px rgba(245,166,35,.14); } body[data-lp="atento"] .brand__dot{ background: var(--accent2); box-shadow: 0 0 0 7px rgba(46,204,113,.14); } .brand__name{ font-weight: 900; letter-spacing: .2px; font-size: 13px; opacity: .96; } .tabs{ display:inline-flex; gap: 8px; flex-wrap: wrap; justify-content:flex-end; } .tab{ padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-weight: 900; font-size: 12px; opacity: .92; background: rgba(255,255,255,.03); } .tab[aria-current="page"]{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); } body[data-lp="investigue"] .tab[aria-current="page"]{ background: rgba(198,40,40,.16); border-color: rgba(198,40,40,.42); } body[data-lp="atento"] .tab[aria-current="page"]{ background: rgba(31,79,216,.16); border-color: rgba(31,79,216,.42); } /* ========================= Sticky CTA (mobile) ========================= */ .cta-sticky{ position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 1500; padding: 14px 14px; border-radius: 16px; background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-weight: 950; text-align: center; box-shadow: var(--shadow); } @media (min-width: 880px){ .cta-sticky{ display:none; } } /* ========================= Hero ========================= */ .hero{ padding: 22px 0 8px; position: relative; overflow:hidden; } .hero::before{ content:""; position:absolute; inset: -120px -140px auto -140px; height: 420px; background: radial-gradient(560px 260px at 20% 30%, rgba(255,255,255,.10), transparent 60%), radial-gradient(560px 260px at 75% 0%, rgba(255,255,255,.08), transparent 62%); opacity: .55; pointer-events:none; } body[data-lp="investigue"] .hero::before{ background: radial-gradient(700px 320px at 18% 10%, rgba(198,40,40,.30), transparent 60%), radial-gradient(600px 280px at 80% 0%, rgba(245,166,35,.18), transparent 62%), radial-gradient(520px 240px at 60% 70%, rgba(255,255,255,.08), transparent 65%); opacity: .7; } body[data-lp="atento"] .hero::before{ background: radial-gradient(700px 320px at 18% 10%, rgba(31,79,216,.30), transparent 60%), radial-gradient(600px 280px at 80% 0%, rgba(46,204,113,.16), transparent 62%), radial-gradient(520px 240px at 60% 70%, rgba(255,255,255,.08), transparent 65%); opacity: .7; } .hero__grid{ position: relative; display:grid; gap: 16px; } .hero__copy .eyebrow{ display:inline-flex; align-items:center; gap: 8px; font-weight: 950; font-size: 12px; letter-spacing: .42px; text-transform: uppercase; opacity: .92; margin: 0 0 12px; } .hero__copy h1{ margin: 0 0 12px; font-size: 32px; line-height: 1.12; letter-spacing: -.2px; } .subheadline{ margin: 0 0 14px; color: var(--muted); font-size: 15px; } .hero__cta{ display:grid; gap: 10px; max-width: 520px; } .kpis{ display:flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; } .kpi{ padding: 10px 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.05); font-size: 12px; font-weight: 850; opacity: .98; } .hero__media{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.10); transform: translateZ(0); } @media (min-width: 880px){ .hero{ padding: 40px 0 10px; } .hero__grid{ grid-template-columns: 1.12fr .88fr; align-items: center; gap: 30px; } .hero__copy h1{ font-size: 48px; } .subheadline{ font-size: 16px; } } /* ========================= Sections ========================= */ .section{ padding: 34px 0; } .section--panel{ background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); } .section--light{ background: #f4f6f8; color: #0b0b0b; } .section h2{ margin: 0 0 10px; font-size: 22px; line-height: 1.2; } .lead{ margin: 0 0 18px; opacity: .9; font-size: 14px; } .inline-cta{ margin-top: 18px; } /* ========================= Bullets ========================= */ .bullets{ list-style:none; padding:0; margin: 0 0 18px; } .bullets li{ position:relative; padding-left: 18px; margin: 10px 0; color: rgba(255,255,255,.92); } .bullets li::before{ content:""; position:absolute; left:0; top:.55em; width: 8px; height: 8px; border-radius: 999px; background: var(--accent2); } /* ========================= Cards / grids ========================= */ .grid{ display:grid; gap: 12px; } .grid--2{ grid-template-columns: 1fr; } .grid--3{ grid-template-columns: 1fr; } @media (min-width: 720px){ .grid--2{ grid-template-columns: 1fr 1fr; } .grid--3{ grid-template-columns: 1fr 1fr; } } @media (min-width: 980px){ .grid--3{ grid-template-columns: 1fr 1fr 1fr; } } .card{ padding: 15px 15px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); box-shadow: 0 12px 24px rgba(0,0,0,.10); } .card--glass{ background: rgba(255,255,255,.06); } .card--light{ background: #ffffff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 12px 24px rgba(0,0,0,.06); } .card__title{ margin: 0 0 6px; font-weight: 950; font-size: 15px; } .card__text{ margin: 0; opacity: .9; font-size: 14px; } /* ========================= Steps ========================= */ .steps{ list-style:none; padding:0; margin:0; display:grid; gap: 12px; } .step{ display:grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); } .step__icon{ width: 44px; height: 44px; border-radius: 14px; display:grid; place-items:center; font-weight: 950; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); } body[data-lp="investigue"] .step__icon{ background: rgba(198,40,40,.18); border-color: rgba(198,40,40,.38); } body[data-lp="atento"] .step__icon{ background: rgba(31,79,216,.18); border-color: rgba(31,79,216,.38); } .step__content h3{ margin: 0 0 6px; font-size: 16px; } .step__content p{ margin: 0; opacity: .9; font-size: 14px; } /* ========================= Split / notes ========================= */ .split{ display:grid; gap: 14px; } @media (min-width: 880px){ .split{ grid-template-columns: 1fr 1fr; align-items: start; } } .note{ padding: 14px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); } body[data-lp="investigue"] .note{ background: rgba(245,166,35,.10); border-color: rgba(245,166,35,.32); } body[data-lp="atento"] .note{ background: rgba(31,79,216,.10); border-color: rgba(31,79,216,.28); } .note h3{ margin: 0 0 6px; font-size: 16px; } .note p{ margin: 0; opacity: .95; font-size: 14px; } /* ========================= Pricing ========================= */ .pricing{ display:grid; gap: 14px; } @media (min-width: 880px){ .pricing{ grid-template-columns: 1fr 1fr; } } .price-card{ padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); } .price-card--highlight{ background: radial-gradient(760px 260px at 20% 0%, rgba(255,255,255,.10), transparent 58%), var(--panel); border-color: rgba(255,255,255,.18); } body[data-lp="investigue"] .price-card--highlight{ background: radial-gradient(760px 260px at 20% 0%, rgba(198,40,40,.30), transparent 60%), rgba(255,255,255,.06); border-color: rgba(198,40,40,.36); } body[data-lp="atento"] .price-card--highlight{ background: radial-gradient(760px 260px at 20% 0%, rgba(31,79,216,.26), transparent 60%), #ffffff; color: #0b0b0b; border-color: rgba(31,79,216,.22); box-shadow: var(--shadow-soft); } .badge{ display:inline-flex; padding: 8px 10px; border-radius: 999px; font-weight: 950; font-size: 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); } body[data-lp="investigue"] .badge{ background: rgba(245,166,35,.14); border-color: rgba(245,166,35,.32); } body[data-lp="atento"] .badge{ background: rgba(31,79,216,.14); border-color: rgba(31,79,216,.30); } .price{ margin: 10px 0 10px; font-size: 18px; font-weight: 950; } .price-card ul{ margin: 10px 0 14px; padding-left: 18px; } .price-card li{ margin: 8px 0; } /* ========================= Buttons ========================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; min-height: 48px; padding: 12px 16px; border-radius: 14px; font-weight: 950; border: 1px solid transparent; cursor:pointer; text-align:center; transition: transform .12s ease, filter .12s ease; } .btn:active{ transform: translateY(1px); } .btn--full{ width: 100%; } .btn--primary{ background: var(--btn-primary-bg); color: var(--btn-primary-fg); } .btn--secondary{ background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: rgba(255,255,255,.14); } .btn--ghost{ background: transparent; border-color: rgba(255,255,255,.22); color: #fff; } .section--light .btn--ghost{ border-color: rgba(0,0,0,.16); color: #0b0b0b; } /* ========================= Checklist ========================= */ .checklist{ list-style:none; padding:0; margin:0; } .checklist li{ padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.10); position: relative; padding-left: 22px; } .checklist li::before{ content:"✓"; position:absolute; left:0; top: 10px; font-weight: 950; color: var(--accent2); } .section--light .checklist li{ border-bottom-color: rgba(0,0,0,.08); } .section--light .checklist li::before{ color: var(--accent); } /* ========================= FAQ ========================= */ .faq{ padding: 14px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); margin: 12px 0; } .faq summary{ font-weight: 950; cursor:pointer; min-height: 44px; display:flex; align-items:center; } .faq p{ margin: 10px 0 0; opacity: .92; } /* ========================= Form ========================= */ .form-section{ padding: 38px 0 92px; /* espaço pro sticky CTA */ background: radial-gradient(900px 300px at 20% 0%, rgba(255,255,255,.06), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%), transparent; border-top: 1px solid rgba(255,255,255,.06); } /* ===== Form layout refinado (destaque + alinhamento) ===== */ #leadForm{ margin-top: 18px; padding: 16px; border-radius: var(--radius); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 46px rgba(0,0,0,.22); display: grid; gap: 12px; } @media (min-width: 720px){ #leadForm{ padding: 22px; gap: 14px; } } #leadForm .field{ margin: 0; display: grid; gap: 6px; } #leadForm label{ margin: 0; } #leadForm .consents{ margin: 0; } #leadForm .btn--full{ margin-top: 6px; } /* microcopy com respiro melhor */ #leadForm .microcopy{ margin-top: 2px; } .field{ margin: 14px 0; } label{ font-weight: 900; font-size: 13px; display:block; margin-bottom: 6px; } input, select{ width: 100%; min-height: 48px; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; } .section--light input, .section--light select{ color: #0b0b0b; } /* ===== Fix: dropdown com texto branco em fundo branco ===== Alguns navegadores herdam a cor do