.elementor-270280 .elementor-element.elementor-element-eaf21fa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-917c9d1 *//* ============================================= TradeMap × Minhas Economias — Estilos ============================================= */ /* Google Fonts — cole no do WordPress ou ative via Elementor > Configurações de fonte: Poppins (300,400,500,600,700) + DM Mono (400,500) Link: https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=DM+Mono:wght@400;500&display=swap */ /* Reset mínimo */ .tm-me-widget *, .tm-me-widget *::before, .tm-me-widget *::after { box-sizing: border-box; } /* Container raiz */ .tm-me-widget { background: #0A0B0D; color: #fff; font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Reset total de headings — vence qualquer override do tema WordPress */ .tm-me-widget h1, .tm-me-widget h2, .tm-me-widget h3, .tm-me-widget h4, .tm-me-widget h5, .tm-me-widget h6 { color: #fff !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; margin: 0 !important; } /* Tamanhos + peso + line-height específicos com !important */ .tm-me-hero-a__title { font-size: clamp(42px, 6vw, 72px) !important; font-weight: 700 !important; line-height: 1.02 !important; letter-spacing: -0.02em !important; margin: 0 0 22px !important; } .tm-me-section__title { font-size: clamp(30px, 4vw, 46px) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; margin: 0 !important; } .tm-me-card h3 { font-size: 23px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0 !important; margin: 0 0 12px !important; } .tm-me-step h3 { font-size: 19px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0 !important; margin: 0 0 10px !important; } .tm-me-band__title { font-size: clamp(22px, 2.6vw, 30px) !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; margin: 0 !important; } .tm-me-final-cta h2 { font-size: clamp(34px, 5vw, 58px) !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; margin: 0 0 18px !important; } .tm-me-widget ::selection { background: rgba(21, 230, 155, 0.3); } /* ---- Animações ---- */ @keyframes tm-floaty { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-16px) rotate(var(--rot, 0deg)); } } @keyframes tm-floaty2 { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-24px) rotate(var(--rot, 0deg)); } } @keyframes tm-glowpulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } } /* ============================================= NAV / HEADER ============================================= */ .tm-me-header { position: relative; z-index: 40; max-width: 1200px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .tm-me-header__logos { display: flex; align-items: center; gap: 14px; min-width: 0; /* permite encolher */ } .tm-me-header__logos img { height: 30px; width: auto; display: block; flex-shrink: 0; } .tm-me-header__sep { color: rgba(255, 255, 255, 0.28); font-size: 18px; font-weight: 300; flex-shrink: 0; } .tm-me-btn-nav { display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; font-size: 14px; font-weight: 600; color: #0A0B0D !important; background: linear-gradient(135deg, #1DE9A0, #0FD15D) !important; padding: 11px 20px; border-radius: 9999px; box-shadow: 0 6px 22px rgba(15, 209, 93, 0.32); transition: transform 160ms, filter 160ms; white-space: nowrap; } .tm-me-btn-nav:hover, .tm-me-btn-nav:visited, .tm-me-btn-nav:focus { color: #0A0B0D !important; transform: translateY(-2px); filter: brightness(1.06); } /* ============================================= HERO A — Duas colunas (copy esq. | phones dir.) ============================================= */ .tm-me-hero-a { position: relative; max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; overflow: visible; } .tm-me-hero-a__glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 900px; height: 560px; background: radial-gradient(closest-side, rgba(15,209,93,0.28), rgba(1,229,155,0.12) 45%, transparent 72%); filter: blur(20px); animation: tm-glowpulse 5s ease-in-out infinite; pointer-events: none; z-index: 0; } .tm-me-hero-a__chart { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.5; pointer-events: none; } .tm-me-hero-a__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 48px; align-items: center; } /* Copy */ .tm-me-hero-a__eyebrow { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #15E69B; margin-bottom: 22px; } .tm-me-hero-a__title { color: #fff !important; } .tm-me-hero-a__title span { display: inline-block; } .tm-me-hero-a__title em { font-style: italic; color: #19E6A0 !important; } .tm-me-hero-a__subtitle { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, 0.66); font-weight: 300; max-width: 520px; margin: 0 0 28px; } .tm-me-hero-a__subtitle strong { color: #fff; font-weight: 600; } .tm-me-hero-a__badge { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(15, 209, 93, 0.4); background: rgba(15, 209, 93, 0.08); color: #3DEBA3; padding: 9px 16px; border-radius: 9999px; margin-bottom: 34px; } .tm-me-hero-a__badge span { font-size: 14px; font-weight: 500; font-family: 'DM Mono', monospace; letter-spacing: 0.02em; } .tm-me-hero-a__ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .tm-me-hero-a__note { font-size: 13px; color: rgba(255, 255, 255, 0.42); } /* Visual: phones + persona */ .tm-me-hero-a__visual { position: relative; min-height: clamp(440px, 42vw, 560px); display: flex; align-items: center; justify-content: center; } .tm-me-hero-a__persona { position: relative; width: min(530px, 90%); aspect-ratio: 400 / 480; z-index: 2; } .tm-me-hero-a__persona img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .tm-me-hero-a__phone { position: absolute; width: clamp(140px, 17vw, 196px); aspect-ratio: 196 / 410; background: #15171F; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 30px; padding: 8px; z-index: 3; } .tm-me-hero-a__phone::before { content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 46px; height: 5px; border-radius: 9999px; background: rgba(255, 255, 255, 0.18); z-index: 2; } .tm-me-hero-a__phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; background: #EAF0F7; display: block; } .tm-me-hero-a__phone--left { left: -2%; bottom: 2%; box-shadow: 0 26px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(1,229,155,0.18); transform: rotate(-8deg); animation: tm-floaty 6s ease-in-out infinite; } .tm-me-hero-a__phone--right { right: -2%; top: 0%; box-shadow: 0 26px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(15,209,93,0.18); transform: rotate(7deg); animation: tm-floaty2 7s ease-in-out infinite; } /* ============================================= BOTÕES ============================================= */ .tm-me-btn-primary { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; font-size: 18px; font-weight: 600; color: #06130C !important; background: linear-gradient(135deg, #22EBA4, #0FD15D) !important; padding: 17px 30px; border-radius: 12px; box-shadow: 0 12px 38px rgba(15, 209, 93, 0.4); transition: transform 160ms, filter 160ms; } .tm-me-btn-primary:hover, .tm-me-btn-primary:visited, .tm-me-btn-primary:focus { color: #06130C !important; transform: translateY(-2px); filter: brightness(1.06); } .tm-me-btn-primary--lg { font-size: 19px; padding: 19px 38px; box-shadow: 0 16px 44px rgba(15, 209, 93, 0.46); } .tm-me-btn-primary--full { width: 100%; justify-content: center; font-size: 18px; padding: 18px 30px; box-shadow: 0 14px 40px rgba(15, 209, 93, 0.42); margin-top: 26px; box-sizing: border-box; } /* ============================================= SEÇÕES GENÉRICAS ============================================= */ .tm-me-section { max-width: 1200px; margin: 0 auto; padding: 80px 24px; } .tm-me-section--narrow { max-width: 1000px; } .tm-me-section--narrower { max-width: 1100px; } .tm-me-section__header { text-align: center; max-width: 680px; margin: 0 auto 52px; } .tm-me-section__label { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 16px; } .tm-me-section__title { color: #fff !important; } .tm-me-section__title em { font-style: italic; color: #19E6A0 !important; } /* ============================================= CARDS DE FEATURES ============================================= */ .tm-me-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; align-items: stretch; } .tm-me-card { background: #13151C; border-radius: 20px; padding: 34px; position: relative; overflow: hidden; } .tm-me-card--tm { border: 1px solid rgba(1, 229, 155, 0.18); } .tm-me-card--me { border: 1px solid rgba(15, 209, 93, 0.2); } .tm-me-card__glow { position: absolute; top: -60px; right: -40px; width: 200px; height: 200px; pointer-events: none; } .tm-me-card--tm .tm-me-card__glow { background: radial-gradient(closest-side, rgba(1, 229, 155, 0.16), transparent 70%); } .tm-me-card--me .tm-me-card__glow { background: radial-gradient(closest-side, rgba(15, 209, 93, 0.18), transparent 70%); } .tm-me-card__logo { height: 22px !important; margin-bottom: 24px; position: relative; display: block; } .tm-me-card h3 { color: #fff !important; } .tm-me-card p { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.62); font-weight: 300; margin: 0 0 22px; } .tm-me-feature-list { display: flex; flex-direction: column; gap: 12px; } .tm-me-feature-item { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, 0.82); } .tm-me-feature-icon { flex: none; width: 22px; height: 22px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; } .tm-me-feature-icon--tm { background: rgba(1, 229, 155, 0.15); } .tm-me-feature-icon--me { background: rgba(15, 209, 93, 0.15); } /* Band unificadora */ .tm-me-band { margin-top: 24px; background: linear-gradient(135deg, rgba(1, 229, 155, 0.1), rgba(15, 209, 93, 0.1)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 34px 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .tm-me-band__title { color: #fff !important; } .tm-me-band__sub { font-size: 16px; color: rgba(255, 255, 255, 0.6); font-weight: 300; margin-top: 6px; } /* ============================================= TABELA COMPARATIVA ============================================= */ .tm-me-table-wrap { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; overflow: hidden; background: #101218; } .tm-me-table-head { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; } .tm-me-table-head__empty { padding: 20px 24px; } .tm-me-table-head__col { padding: 20px 16px; text-align: center; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.55); border-left: 1px solid rgba(255, 255, 255, 0.07); } .tm-me-table-head__col--combo { border-left: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(180deg, rgba(15, 209, 93, 0.14), rgba(15, 209, 93, 0.04)); } .tm-me-table-head__col--combo strong { display: block; font-size: 14px; font-weight: 600; color: #fff; } .tm-me-table-head__col--combo span { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: #3DEBA3; text-transform: uppercase; margin-top: 3px; display: block; } .tm-me-table-row { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.07); } .tm-me-table-cell { padding: 16px 24px; font-size: 15px; color: rgba(255, 255, 255, 0.86); } .tm-me-table-cell--center { padding: 16px; display: flex; justify-content: center; border-left: 1px solid rgba(255, 255, 255, 0.07); } .tm-me-table-cell--combo { background: rgba(15, 209, 93, 0.05); } .tm-me-table-cost { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.07); } .tm-me-table-cost__label { padding: 18px 24px; font-size: 15px; font-weight: 600; color: #fff; } .tm-me-table-cost__price { padding: 18px 16px; text-align: center; font-family: 'DM Mono', monospace; font-size: 14px; color: rgba(255, 255, 255, 0.5); border-left: 1px solid rgba(255, 255, 255, 0.07); } .tm-me-table-cost__free { padding: 18px 16px; text-align: center; font-family: 'DM Mono', monospace; font-size: 15px; font-weight: 500; color: #3DEBA3; border-left: 1px solid rgba(255, 255, 255, 0.07); background: rgba(15, 209, 93, 0.05); } /* ============================================= OFERTA / PREÇO ============================================= */ .tm-me-offer-card { position: relative; max-width: 560px; margin: 0 auto; background: #13151C; border: 1px solid rgba(15, 209, 93, 0.28); border-radius: 24px; padding: 40px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); } .tm-me-offer-card__glow { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 380px; height: 240px; background: radial-gradient(closest-side, rgba(15, 209, 93, 0.22), transparent 72%); pointer-events: none; } .tm-me-offer-card__inner { position: relative; } .tm-me-offer-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(15, 209, 93, 0.12); border: 1px solid rgba(15, 209, 93, 0.4); border-radius: 9999px; padding: 7px 14px; margin-bottom: 24px; } .tm-me-offer-badge span { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: #3DEBA3; text-transform: uppercase; font-weight: 500; } .tm-me-price-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; } .tm-me-price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .tm-me-price-row__logo img { height: 34px; } .tm-me-price-row__value { font-family: 'DM Mono', monospace; font-size: 16px; color: rgba(255, 255, 255, 0.82); } .tm-me-price-row__value small { font-size: 13px; color: rgba(255, 255, 255, 0.45); } .tm-me-price-row__values { display: flex; align-items: baseline; gap: 10px; } .tm-me-price-row__old { font-family: 'DM Mono', monospace; font-size: 14px; color: rgba(255, 255, 255, 0.4); text-decoration: line-through; } .tm-me-price-row__new { font-family: 'DM Mono', monospace; font-size: 18px; font-weight: 500; color: #3DEBA3; } .tm-me-divider { height: 1px; background: rgba(255, 255, 255, 0.08); } .tm-me-free-box { margin-top: 28px; text-align: center; padding: 26px; border: 1px dashed rgba(15, 209, 93, 0.4); border-radius: 16px; background: rgba(15, 209, 93, 0.05); } .tm-me-free-box__text { font-size: clamp(40px, 7vw, 58px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; background: linear-gradient(135deg, #3DEBA3, #0FD15D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tm-me-free-box__sub { font-size: 15px; color: rgba(255, 255, 255, 0.6); font-weight: 300; margin-top: 8px; } .tm-me-free-box__sub strong { color: #fff; font-weight: 600; } .tm-me-offer-disclaimer { text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, 0.4); margin-top: 16px; line-height: 1.5; } /* ============================================= COMO RESGATAR (3 passos) ============================================= */ .tm-me-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; } .tm-me-step { background: #13151C; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 30px; } .tm-me-step__num { font-family: 'DM Mono', monospace; font-size: 13px; color: #3DEBA3; letter-spacing: 0.1em; margin-bottom: 18px; } .tm-me-step h3 { color: #fff !important; } .tm-me-step p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); font-weight: 300; margin: 0; } /* ============================================= CTA FINAL ============================================= */ .tm-me-final-cta { position: relative; padding: 90px 24px; text-align: center; overflow: hidden; } .tm-me-final-cta__glow { position: absolute; bottom: -180px; left: 50%; transform: translateX(-50%); width: 1000px; height: 520px; background: radial-gradient(closest-side, rgba(15, 209, 93, 0.22), rgba(1, 229, 155, 0.1) 45%, transparent 72%); filter: blur(20px); pointer-events: none; z-index: 0; } .tm-me-final-cta__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; } .tm-me-final-cta h2 { color: #fff !important; } .tm-me-final-cta h2 em { font-style: italic; color: #19E6A0 !important; } .tm-me-final-cta p { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, 0.66); font-weight: 300; max-width: 540px; margin: 0 auto 32px; } /* ============================================= FOOTER ============================================= */ .tm-me-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 36px 24px; } .tm-me-footer__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .tm-me-footer__logos { display: flex; align-items: center; gap: 14px; } .tm-me-footer__logos img { height: 30px; width: auto; opacity: 0.85; flex-shrink: 0; } .tm-me-footer__sep { color: rgba(255, 255, 255, 0.24); font-weight: 300; flex-shrink: 0; } .tm-me-footer__disclaimer { font-size: 12.5px; color: rgba(255, 255, 255, 0.38); max-width: 560px; line-height: 1.5; } /* ============================================= UTILITÁRIOS ============================================= */ .tm-me-text-center { text-align: center; } .tm-me-mt-34 { margin-top: 34px; } .tm-me-mt-36 { margin-top: 36px; } /* ============================================= RESPONSIVO — TABLET (≤768px) ============================================= */ @media (max-width: 768px) { /* Hero */ .tm-me-hero-a { padding: 32px 20px 60px; } .tm-me-hero-a__grid { gap: 32px; } .tm-me-hero-a__visual { min-height: clamp(320px, 75vw, 440px); } .tm-me-hero-a__phone { width: clamp(110px, 20vw, 150px); } /* Seções */ .tm-me-section, .tm-me-section--narrow, .tm-me-section--narrower { padding: 60px 20px; } /* Band */ .tm-me-band { flex-direction: column; padding: 28px 24px; } /* Tabela */ .tm-me-table-cell, .tm-me-table-cell--center { font-size: 13px; padding: 12px 10px; } .tm-me-table-head__col { font-size: 12px; padding: 14px 10px; } .tm-me-table-cost__label { font-size: 13px; padding: 14px 10px; } /* Oferta */ .tm-me-offer-card { padding: 28px 20px; } /* CTA final */ .tm-me-final-cta { padding: 70px 20px; } } /* ============================================= RESPONSIVO — MOBILE (≤480px) ============================================= */ @media (max-width: 480px) { /* Header: esconde o botão CTA do nav, mantém apenas as logos lado a lado */ .tm-me-btn-nav { display: none; } .tm-me-header { padding: 18px 16px; justify-content: flex-start; } .tm-me-header__logos { gap: 10px; } .tm-me-header__logos img { height: 22px; /* reduz as logos no mobile */ } /* Hero phones */ .tm-me-hero-a__phone--left { left: 0; } .tm-me-hero-a__phone--right { right: 0; } .tm-me-hero-a__ctas { flex-direction: column; align-items: flex-start; } /* Tabela */ .tm-me-table-row, .tm-me-table-head, .tm-me-table-cost { grid-template-columns: 1.2fr 0.7fr 1fr; } /* Footer mobile: empilha e centraliza */ .tm-me-footer__inner { flex-direction: column; align-items: center; text-align: center; gap: 16px; } .tm-me-footer__logos { justify-content: center; } .tm-me-footer__logos img { height: 22px; } .tm-me-footer__disclaimer { text-align: center; max-width: 100%; font-size: 12px; } }/* End custom CSS */