/* ========================================================================== Tokens ========================================================================== */ :root { --color-bg-fallback: #040d10; --color-text: #eff8fa; --color-accent: #35dced; --color-accent-soft: #5ce6f4; --color-whatsapp: #22c55e; --color-telegram: #2196f3; --color-error: #ff8a7a; --color-field-bg: rgba(4, 13, 16, 0.5); --color-field-border: rgba(255, 255, 255, 0.22); --font-display: "Barlow Condensed", system-ui, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --content-max-width: 430px; --transition-fast: 160ms ease; --transition-medium: 550ms ease; } /* ========================================================================== Reset basico ========================================================================== */ .ortega-destaque, .ortega-destaque *, .ortega-destaque *::before, .ortega-destaque *::after { box-sizing: border-box; } /* Reset aplicado so quando a LP ocupa a pagina — no WordPress a classe vem do filtro body_class, no standalone vem no proprio . Sem isso o plugin zeraria margens de qualquer pagina do tema. */ body.ortega-destaque-page { margin: 0; padding: 0; min-height: 100%; background-color: var(--color-bg-fallback); } .ortega-destaque { font-family: var(--font-body); color: var(--color-text); -webkit-font-smoothing: antialiased; } .ortega-destaque a { color: var(--color-accent); text-decoration: none; } .ortega-destaque a:hover { color: var(--color-accent-soft); } .ortega-destaque input { font-family: inherit; } .ortega-destaque .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; } /* ========================================================================== Background: foto fixa + degrades + brilho decorativo. Um unico layout cuida de mobile e desktop, so a imagem (e o breakpoint abaixo) muda. ========================================================================== */ .ortega-destaque .bg-layer { position: fixed; inset: 0; z-index: -2; background-color: var(--color-bg-fallback); background-repeat: no-repeat; background-size: cover; background-position: 72% top; background-image: linear-gradient(to top, rgba(4, 13, 16, 0.96) 0%, rgba(4, 13, 16, 0.82) 24%, rgba(4, 13, 16, 0.4) 46%, rgba(4, 13, 16, 0) 68%), linear-gradient(to right, rgba(4, 13, 16, 0.82) 0%, rgba(4, 13, 16, 0.45) 32%, rgba(4, 13, 16, 0.08) 60%, rgba(4, 13, 16, 0) 84%), url('../img/mobile-bg.jpg'); } @media (min-width: 860px) { .ortega-destaque .bg-layer { background-image: linear-gradient(to top, rgba(4, 13, 16, 0.96) 0%, rgba(4, 13, 16, 0.82) 24%, rgba(4, 13, 16, 0.4) 46%, rgba(4, 13, 16, 0) 68%), linear-gradient(to right, rgba(4, 13, 16, 0.82) 0%, rgba(4, 13, 16, 0.45) 32%, rgba(4, 13, 16, 0.08) 60%, rgba(4, 13, 16, 0) 84%), url('../img/desktop-bg.jpg'); } } .ortega-destaque .bg-glow { position: fixed; z-index: -1; bottom: -22%; left: -14%; width: 58vmax; height: 58vmax; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(53, 220, 237, 0.14) 0%, rgba(53, 220, 237, 0) 62%); animation: ortega-drift 18s ease-in-out infinite; will-change: transform; } @keyframes ortega-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; } 50% { transform: translate3d(4%, -3%, 0) scale(1.14); opacity: 1; } } @keyframes ortega-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ortega-destaque .bg-glow { animation: none; } } /* ========================================================================== Tarja de conformidade (Ministerio da Fazenda) — abaixo dos botoes de contato, em HTML/CSS puro seguindo os mesmos tokens de cor e tipografia do restante da pagina. ========================================================================== */ .ortega-destaque .compliance-banner { margin-top: clamp(14px, 2.4vmin, 20px); display: flex; flex-direction: column; gap: clamp(12px, 2vmin, 16px); padding: clamp(14px, 2.2vmin, 18px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(7, 20, 24, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .ortega-destaque .compliance-main { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 14px); } .ortega-destaque .compliance-age { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: clamp(38px, 5.6vmin, 44px); height: clamp(38px, 5.6vmin, 44px); border-radius: 50%; border: 1.5px solid rgba(53, 220, 237, 0.5); background: rgba(53, 220, 237, 0.1); font-family: var(--font-display); font-weight: 800; font-size: clamp(14px, 2vmin, 16px); color: var(--color-accent); } .ortega-destaque .compliance-text { margin: 0; text-align: center; font-size: clamp(11.5px, 1.6vmin, 12.5px); line-height: 1.35; color: rgba(239, 248, 250, 0.78); } .ortega-destaque .compliance-text strong { display: block; margin-bottom: 1px; color: var(--color-text); font-weight: 700; font-size: clamp(12.5px, 1.75vmin, 13.5px); } .ortega-destaque .compliance-tag { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(53, 220, 237, 0.35); background: rgba(53, 220, 237, 0.08); font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 1.6vmin, 13px); letter-spacing: 0.01em; color: var(--color-accent-soft); } .ortega-destaque .compliance-tag-icon { width: 15px; height: 15px; flex-shrink: 0; } /* ========================================================================== Layout — coluna unica ancorada no canto inferior esquerdo, centralizada, com tipografia e espacamentos fluidos (clamp) para dispensar breakpoints extras de mobile. ========================================================================== */ .ortega-destaque .page { position: relative; z-index: 1; height: 100vh; height: 100dvh; min-height: 520px; display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(18px, 3.4vmin, 52px) clamp(18px, 5vw, 72px); overflow: hidden; } .ortega-destaque .content { width: 100%; max-width: var(--content-max-width); display: flex; flex-direction: column; gap: clamp(16px, 3vmin, 34px); text-align: center; } /* Mobile: o bloco de conteudo cresceu (form + CTAs + tarja) e, ancorado no rodape de uma tela 100dvh fixa, comecava a tampar o rosto do fundo. Aqui ele passa a empurrar a altura da pagina (min-height, sem overflow: hidden) e ganha um respiro no topo — se ainda assim nao couber, rola normalmente. */ @media (max-width: 600px) { .ortega-destaque .page { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; padding-top: clamp(120px, 30vh, 220px); padding-bottom: clamp(28px, 5vh, 44px); } .ortega-destaque .content { gap: clamp(18px, 2.6vh, 26px); } } /* ========================================================================== Headline ========================================================================== */ .ortega-destaque .headline { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 6vmin, 54px); line-height: 0.92; letter-spacing: -0.005em; text-wrap: balance; text-shadow: 0 4px 26px rgba(0, 0, 0, 0.85); animation: ortega-rise 0.55s ease-out both; } .ortega-destaque .headline-accent { display: block; color: var(--color-accent); text-shadow: 0 0 40px rgba(53, 220, 237, 0.45), 0 4px 22px rgba(0, 0, 0, 0.7); } /* ========================================================================== Formulario — flutua direto sobre a foto, sem cartao por baixo ========================================================================== */ .ortega-destaque .lead-form { display: flex; flex-direction: column; gap: clamp(10px, 1.9vmin, 16px); text-align: left; animation: ortega-rise 0.55s ease-out 0.07s both; } .ortega-destaque .lead-form-fields { display: flex; flex-direction: column; gap: clamp(10px, 1.9vmin, 16px); margin: 0; padding: 0; border: 0; } .ortega-destaque .field { display: flex; flex-direction: column; gap: 6px; } .ortega-destaque .field label { font-size: clamp(13px, 1.6vmin, 14px); font-weight: 600; color: var(--color-text); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .ortega-destaque .field input { width: 100%; height: clamp(46px, 6vmin, 54px); padding: 0 16px; font-size: 16px; color: var(--color-text); background-color: var(--color-field-bg); border: 1px solid var(--color-field-border); border-radius: 12px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } .ortega-destaque .field input::placeholder { color: rgba(239, 248, 250, 0.4); } .ortega-destaque .field input:focus-visible { border-color: rgba(53, 220, 237, 0.85); box-shadow: 0 0 0 3px rgba(53, 220, 237, 0.18); background-color: rgba(4, 13, 16, 0.78); } .ortega-destaque .field input.is-invalid { border-color: var(--color-error); } .ortega-destaque .field input:disabled { opacity: 0.6; cursor: not-allowed; } /* Honeypot: invisivel para humanos, preenchido por bots. */ .ortega-destaque .ortega-destaque-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ortega-destaque .field-error { min-height: 1.1em; font-size: 12px; line-height: 1.2; color: var(--color-error); } .ortega-destaque .submit-btn { position: relative; overflow: hidden; height: clamp(48px, 6.2vmin, 56px); margin-top: 2px; border: none; border-radius: 12px; cursor: pointer; font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #04181c; background-color: var(--color-accent); box-shadow: 0 16px 34px -16px rgba(53, 220, 237, 0.85); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast); } .ortega-destaque .submit-btn span { position: relative; } .ortega-destaque .submit-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: ortega-sheen 3.6s ease-in-out infinite; pointer-events: none; } @keyframes ortega-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(240%); } } .ortega-destaque .submit-btn:hover:not(:disabled) { transform: translateY(-2px); background-color: var(--color-accent-soft); box-shadow: 0 22px 42px -16px rgba(53, 220, 237, 0.95); } .ortega-destaque .submit-btn:active:not(:disabled) { transform: translateY(0); } .ortega-destaque .submit-btn:focus-visible { outline: 3px solid rgba(53, 220, 237, 0.6); outline-offset: 2px; } .ortega-destaque .submit-btn:disabled { cursor: not-allowed; opacity: 0.85; } .ortega-destaque .submit-btn:disabled::after { animation: none; display: none; } /* Estado do formulario: escondido por padrao (so leitor de tela); vira visivel apenas quando ha um erro de envio para o usuario ver. */ .ortega-destaque .form-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ortega-destaque .form-status.is-error { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: block; margin-top: 4px; text-align: center; font-size: 13px; line-height: 1.35; color: var(--color-error); } /* ========================================================================== Canais (Telegram / WhatsApp) — bloqueados (borrados, com cadeado) ate o envio do formulario. ========================================================================== */ .ortega-destaque .cta-group { display: flex; flex-direction: column; animation: ortega-rise 0.55s ease-out 0.14s both; } .ortega-destaque .cta-label { margin: 0 0 clamp(8px, 1.6vmin, 14px); font-family: var(--font-display); font-size: clamp(20px, 3vmin, 28px); font-weight: 600; line-height: 1.04; color: var(--color-text); text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85); } .ortega-destaque .cta-wrap { position: relative; overflow: hidden; padding: clamp(14px, 2.4vmin, 22px) 22px; margin: 0 -22px; } .ortega-destaque .cta-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; transition: filter var(--transition-medium), opacity var(--transition-medium), transform var(--transition-medium); filter: blur(6px); opacity: 0.45; transform: scale(0.98); pointer-events: none; } .ortega-destaque .cta-icon { width: 22px; height: 22px; flex-shrink: 0; } .ortega-destaque .cta-btn { display: flex; align-items: center; justify-content: center; gap: 9px; height: clamp(50px, 6.6vmin, 60px); border-radius: 12px; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: #fff; transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); } .ortega-destaque .cta-btn--telegram { background-color: var(--color-telegram); box-shadow: 0 16px 32px -18px rgba(33, 150, 243, 0.95); } .ortega-destaque .cta-btn--whatsapp { background-color: var(--color-whatsapp); box-shadow: 0 16px 32px -18px rgba(34, 197, 94, 0.95); } .ortega-destaque .cta-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; } /* Estado liberado: classe is-unlocked no wrapper .ortega-destaque */ .ortega-destaque.is-unlocked .cta-buttons { filter: blur(0); opacity: 1; transform: scale(1); pointer-events: auto; } .ortega-destaque.is-unlocked .cta-btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .ortega-destaque.is-unlocked .cta-btn--telegram:hover { box-shadow: 0 22px 40px -18px rgba(33, 150, 243, 1); } .ortega-destaque.is-unlocked .cta-btn--whatsapp:hover { box-shadow: 0 22px 40px -18px rgba(34, 197, 94, 1); } .ortega-destaque.is-unlocked .cta-btn:active { transform: scale(0.97); } .ortega-destaque .lock-badge { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: opacity var(--transition-medium), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 1; transform: scale(1); pointer-events: none; } .ortega-destaque.is-unlocked .lock-badge { opacity: 0; transform: scale(1.45); } .ortega-destaque .lock-badge-circle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(6, 20, 25, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .ortega-destaque .lock-shackle { width: 12px; height: 12px; border: 2px solid #dff2f5; border-bottom: none; border-radius: 7px 7px 0 0; margin-bottom: -1px; } .ortega-destaque .lock-body { width: 18px; height: 14px; border-radius: 4px; background-color: #dff2f5; } .ortega-destaque .lock-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #cfe6ea; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }