/* ========================================================================== SRBOT.ONLINE — Página Comercial Automatizada (landing de oferta) Azul oscuro · amarillo · blanco · verde WhatsApp ========================================================================== */ :root { --navy-950: #040a1c; --navy-900: #060d24; --navy-850: #0a1532; --navy-800: #0e1b40; --navy-700: #16275a; --navy-600: #213a7c; --line: rgba(150, 175, 235, 0.13); --line-2: rgba(150, 175, 235, 0.24); --ink: #ffffff; --ink-2: #d7deef; --muted: #a3afcb; --dim: #8490ae; --yellow: #ffc629; --yellow-2: #ffdd6b; --yellow-soft: rgba(255, 198, 41, 0.12); --green: #25d366; --green-2: #3ee07e; --green-ink: #03200e; --green-soft: rgba(37, 211, 102, 0.13); --blue: #3d74ff; --blue-soft: rgba(61, 116, 255, 0.16); --red: #ff6b6b; --f-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --f-body: "Manrope", "Segoe UI", system-ui, sans-serif; --r-sm: 10px; --r: 18px; --r-lg: 28px; --container: 1200px; --gutter: clamp(16px, 4vw, 40px); --section: clamp(80px, 10vw, 136px); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 124px; background: var(--navy-900); color-scheme: dark; } body { margin: 0; font-family: var(--f-body); font-size: 16.5px; line-height: 1.65; color: var(--ink-2); background: var(--navy-900); overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; } p { margin: 0 0 1em; } h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 700; color: var(--ink); letter-spacing: -0.028em; line-height: 1.05; text-wrap: balance; } h3 { font-weight: 600; letter-spacing: -0.012em; line-height: 1.22; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } ::selection { background: rgba(255, 198, 41, 0.45); color: #fff; } :focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 8px; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--yellow); color: var(--navy-950); font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform 0.2s; } .skip-link:focus { transform: none; } .hl { color: var(--yellow); background: linear-gradient(transparent 72%, rgba(255, 198, 41, 0.2) 72%); } /* Estado de la oferta (config.js marca ) */ .only-expired { display: none !important; } .offer-expired .only-active { display: none !important; } .offer-expired .only-expired { display: block !important; } /* Revelado al hacer scroll */ .js [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity 0.85s var(--ease-out), translate 0.85s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); animation: reveal-fallback 0.8s var(--ease-out) 3s forwards; /* por si el observador no corre */ } .js.reveal-on [data-reveal] { animation: none; } .js [data-reveal].is-in { opacity: 1; translate: 0 0; animation: none; } @keyframes reveal-fallback { to { opacity: 1; translate: 0 0; } } /* ---------- Botones ---------- */ .btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font: 700 15.5px/1.1 var(--f-body); letter-spacing: 0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.25s var(--ease-out), box-shadow 0.25s, background-color 0.25s, border-color 0.25s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-sm { --h: 40px; padding: 0 16px; font-size: 14px; } .btn-lg { --h: 58px; padding: 0 28px; font-size: 16.5px; } .btn-xl { --h: 70px; padding: 0 38px; font-size: clamp(16px, 1.2vw + 10px, 20px); } .btn-block { width: 100%; } .btn-wa { color: var(--green-ink); background: linear-gradient(180deg, var(--green-2), var(--green)); box-shadow: 0 10px 30px -10px rgba(37, 211, 102, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 0.02em; } .btn-sm.btn-wa { text-transform: none; letter-spacing: 0; } .btn-wa:hover { box-shadow: 0 16px 40px -12px rgba(37, 211, 102, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .btn-ghost { color: var(--ink); border-color: var(--line-2); background: rgba(255, 255, 255, 0.03); } .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.07); } .show-xs { display: none; } /* ---------- Cabecera ---------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.3s, border-color 0.3s, backdrop-filter 0.3s; } .site-header.is-stuck { background: rgba(6, 13, 36, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); } .nav { display: flex; align-items: center; gap: 16px; height: 72px; } /* Barra de urgencia (fija, con el contador) */ .urgency-bar { position: relative; overflow: hidden; background: linear-gradient(90deg, #b3121f, #e8252f 45%, #ff4b2b); color: #fff; box-shadow: 0 6px 20px -8px rgba(232, 37, 47, 0.7); } .urgency-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); transform: translateX(-100%); animation: ub-shine 3.8s ease-in-out infinite; pointer-events: none; } @keyframes ub-shine { 60%, 100% { transform: translateX(100%); } } .ub-inner { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; flex-wrap: wrap; padding-top: 5px; padding-bottom: 5px; } .ub-txt { display: inline-flex; align-items: center; gap: 7px; font: 700 14px/1.2 var(--f-body); letter-spacing: 0.04em; text-transform: uppercase; } .ub-txt svg { flex: none; color: #ffe066; animation: tilt 2.4s ease-in-out infinite; } .ub-txt b { font-weight: 800; color: #ffe066; } .ub-short { display: none; } @media (max-width: 1000px) { .ub-long { display: none; } .ub-short { display: inline; } } .ub-time { display: inline-flex; align-items: center; gap: 3px; font: 700 17px/1 var(--f-display); font-variant-numeric: tabular-nums; } .ub-time span { min-width: 34px; padding: 5px 6px; border-radius: 7px; text-align: center; background: #fff; color: #b3121f; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); } .ub-time i { font-style: normal; color: #ffe066; animation: blink 1s steps(2) infinite; } .offer-expired .hero { padding-top: 128px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 17px/1 var(--f-display); color: var(--ink); letter-spacing: 0.01em; margin-right: auto; } .brand img { border-radius: 10px; } .brand em { font-style: normal; color: var(--yellow); } .nav-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--yellow-soft); border: 1px solid rgba(255, 198, 41, 0.3); color: var(--yellow-2); font: 700 12.5px/1 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 172px 0 clamp(72px, 8vw, 110px); overflow: hidden; isolation: isolate; } .hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% -10%, var(--navy-700) 0%, var(--navy-900) 55%); } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; } .hero .orb-y { width: 520px; height: 520px; right: -140px; top: 60px; background: radial-gradient(circle, rgba(255, 198, 41, 0.42), transparent 65%); animation: drift 16s ease-in-out infinite alternate; } .hero .orb-b { width: 620px; height: 620px; left: -220px; top: -120px; background: radial-gradient(circle, rgba(61, 116, 255, 0.5), transparent 65%); animation: drift 20s ease-in-out infinite alternate-reverse; } .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 75%); opacity: 0.5; } @keyframes drift { to { transform: translate(-40px, 40px) scale(1.08); } } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .alert-pill { display: inline-flex; align-items: flex-start; gap: 10px; max-width: 560px; margin: 0 0 24px; padding: 10px 16px 10px 12px; border-radius: 14px; background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.32); color: #ffd6d6; font: 700 14.5px/1.4 var(--f-body); } .alert-pill svg { flex: none; color: var(--red); margin-top: 1px; } .hero h1 { font-size: clamp(2.35rem, 4.4vw + 0.6rem, 4.4rem); margin-bottom: 22px; } .hero-sub { font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.18rem); color: var(--ink-2); max-width: 600px; margin-bottom: 28px; } .hero-sub strong { color: var(--ink); } .hero-sub > p { margin: 0 0 16px; } .hl-soft { color: var(--yellow-2); font-weight: 700; } .hero-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hero-points li { display: flex; align-items: center; gap: 11px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); font: 700 15px/1.3 var(--f-body); color: var(--ink); transition: transform 0.3s var(--ease-out), border-color 0.3s, background-color 0.3s; } .hero-points li:hover { transform: translateY(-2px); border-color: rgba(255, 198, 41, 0.45); background: var(--yellow-soft); } .hp-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--yellow); color: var(--navy-950); } .hero-points .hp-wa { border-color: rgba(37, 211, 102, 0.45); background: var(--green-soft); } .hero-points .hp-wa:hover { border-color: var(--green); background: rgba(37, 211, 102, 0.2); } .hp-wa .hp-ico { background: var(--green); color: var(--green-ink); } .offer-box { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; padding: 14px; margin-bottom: 26px; max-width: 620px; border-radius: var(--r); border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(22, 39, 90, 0.75), rgba(10, 21, 50, 0.75)); box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.7); } .offer-box .price { flex: 1 1 190px; padding: 6px 8px; } .offer-box .countdown { flex: 1 1 280px; } .offer-expired .offer-box .countdown { flex-basis: 100%; } .price-old { margin: 0 0 2px; color: var(--muted); font-weight: 600; font-size: 14px; } .price-old s { color: var(--ink-2); text-decoration-color: var(--red); text-decoration-thickness: 2px; } .price-new { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; } .price-tag { display: inline-block; font: 800 11.5px/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-950); background: var(--yellow); padding: 6px 9px; border-radius: 6px; } .price-num { font: 700 clamp(2.4rem, 3vw + 1rem, 3.1rem)/1 var(--f-display); color: var(--yellow); letter-spacing: -0.03em; text-shadow: 0 0 40px rgba(255, 198, 41, 0.35); } .price-plus { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 0; padding: 6px 11px; border-radius: 999px; background: var(--green-soft); border: 1px solid rgba(37, 211, 102, 0.35); color: var(--green-2); font: 700 13px/1.25 var(--f-body); } .price-plus svg { flex: none; } .price-lg .price-plus { margin-top: 14px; } /* Contador */ .countdown { padding: 12px 14px; border-radius: 14px; background: rgba(4, 10, 28, 0.6); border: 1px solid rgba(255, 198, 41, 0.28); } .cd-label { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 800 12.5px/1.2 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow-2); } .cd-label svg { animation: tilt 2.4s ease-in-out infinite; } @keyframes tilt { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(180deg); } 90% { transform: rotate(180deg); } } .cd-units { display: flex !important; align-items: flex-start; gap: 6px; } .offer-expired .cd-units { display: none !important; } .cd-unit { flex: 1; min-width: 0; text-align: center; padding: 8px 4px 6px; border-radius: 10px; background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); border: 1px solid var(--line-2); } .cd-unit span { display: block; font: 700 clamp(1.6rem, 1.4vw + 1rem, 2.1rem)/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; } .cd-unit small { display: block; margin-top: 5px; font: 700 10.5px/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .cd-sep { font: 700 1.6rem/1 var(--f-display); color: var(--yellow); padding-top: 10px; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0.25; } } .cd-end { margin: 8px 0 0; font-size: 12.5px; color: var(--dim); } .cd-expired { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 15px/1.3 var(--f-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--red); } .offer-expired .cd-expired { display: flex !important; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .hero-note { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); animation: pulse 2s infinite; flex: none; } @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /* Visual del hero */ .hero-visual { position: relative; margin: 0; padding: 40px 18px 56px 34px; } .device { position: relative; border-radius: 18px; overflow: hidden; background: #f5f7fc; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 8px rgba(255, 255, 255, 0.04); transform: perspective(1400px) rotateY(-9deg) rotateX(4deg); transition: transform 0.8s var(--ease-out); } .hero-visual:hover .device { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); } .device-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #e6eaf4; } .device-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c6cde0; } .device-bar i:first-child { background: #ff6b6b; } .device-bar i:nth-child(2) { background: #ffc629; } .device-bar i:nth-child(3) { background: #25d366; } .device-bar span { margin-left: 12px; padding: 4px 14px; border-radius: 999px; background: #fff; font: 600 11px/1 var(--f-body); color: #6c7690; } .device-body { padding: 16px 18px 20px; background: linear-gradient(180deg, #0e1b40 0%, #0e1b40 58%, #f5f7fc 58%); } .mk-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; } .mk-nav b { width: 54px; height: 10px; border-radius: 4px; background: var(--yellow); margin-right: auto; } .mk-nav span { width: 28px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); } .mk-hero { display: grid; gap: 9px; justify-items: start; padding-bottom: 26px; } .mk-kicker { width: 70px; height: 7px; border-radius: 3px; background: var(--yellow); opacity: 0.7; } .mk-h { width: 88%; height: 16px; border-radius: 5px; background: #fff; } .mk-h2 { width: 62%; } .mk-p { width: 74%; height: 7px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); margin-top: 3px; } .mk-btn { display: inline-flex; align-items: center; justify-content: center; width: 104px; height: 26px; margin-top: 8px; border-radius: 999px; background: var(--green); color: var(--green-ink); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); animation: pulse 2.2s infinite; } .mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mk-cards span { height: 70px; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px -10px rgba(14, 27, 64, 0.35); position: relative; } .mk-cards span::before { content: ""; position: absolute; left: 10px; top: 10px; width: 22px; height: 22px; border-radius: 7px; background: var(--blue-soft); } .mk-cards span::after { content: ""; position: absolute; left: 10px; right: 14px; bottom: 14px; height: 6px; border-radius: 3px; background: #dfe4f0; } .float { position: absolute; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(10, 21, 50, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line-2); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.75); animation: bob 6s ease-in-out infinite; } .float p { margin: 0; } .fl-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--blue-soft); color: #9fbaff; } .fl-ico-y { background: var(--yellow-soft); color: var(--yellow); } .fl-ico-g { background: var(--green-soft); color: var(--green); } .fl-t { font: 700 11px/1.2 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px !important; } .fl-msg { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; } .fl-chips { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; } .fl-chips span { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 600; color: var(--ink-2); } .fl-chips .on { border-color: var(--yellow); background: var(--yellow); color: var(--navy-950); } .fl-row { display: flex; gap: 10px; font-size: 13px; color: var(--muted); } .fl-row b { color: var(--yellow-2); } .fl-bot { left: -6px; top: 4px; max-width: 250px; } .fl-lead { right: -4px; top: 46%; animation-delay: -2s; } .fl-wa { left: 8%; bottom: 0; max-width: 300px; align-items: center; border-color: rgba(37, 211, 102, 0.4); animation-delay: -4s; } .fl-send { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: var(--green-ink); } @keyframes bob { 50% { transform: translateY(-10px); } } /* ---------- Secciones ---------- */ .section { position: relative; padding: var(--section) 0; } .sec-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); } .sec-head-c { margin-left: auto; margin-right: auto; text-align: center; } .kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 800 12.5px/1 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); } .kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; } .section h2 { font-size: clamp(1.9rem, 2.6vw + 0.8rem, 3.1rem); } .lead { margin: 20px 0 0; font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.2rem); color: var(--ink-2); } /* Problema */ .problem { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); } .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cmp { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--navy-850); transition: transform 0.35s var(--ease-out), border-color 0.35s; } .cmp:hover { transform: translateY(-4px); } .cmp-good { background: linear-gradient(160deg, rgba(37, 211, 102, 0.1), rgba(10, 21, 50, 0.9) 55%); border-color: rgba(37, 211, 102, 0.3); } .cmp-tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; font: 800 12px/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; } .cmp-bad .cmp-tag { background: rgba(255, 107, 107, 0.12); color: #ffb3b3; } .cmp-good .cmp-tag { background: var(--green-soft); color: var(--green-2); } .cmp h3 { font-size: 1.4rem; margin-bottom: 18px; } .cmp ul { display: grid; gap: 12px; } .cmp li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); } .cmp li svg { flex: none; margin-top: 3px; } .cmp-bad li svg { color: var(--red); } .cmp-good li svg { color: var(--green); } .bridge { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: clamp(48px, 6vw, 72px) 0 0; text-align: center; font: 700 clamp(1.35rem, 1.6vw + 0.8rem, 2.1rem)/1.2 var(--f-display); color: var(--ink); letter-spacing: -0.02em; } .bridge svg { color: var(--yellow); flex: none; } /* Solución */ .solution { background: var(--navy-950); } .func-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: f; } .func { position: relative; padding: 28px 26px 26px; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--navy-850), rgba(10, 21, 50, 0.4)); border: 1px solid var(--line); overflow: hidden; transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s; } .func::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--yellow), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); } .func:hover { transform: translateY(-5px); border-color: rgba(255, 198, 41, 0.35); box-shadow: 0 24px 50px -30px rgba(255, 198, 41, 0.35); } .func:hover::after { transform: scaleX(1); } .func b { position: absolute; right: 22px; top: 20px; font: 700 2.4rem/1 var(--f-display); color: rgba(255, 255, 255, 0.06); } .func-ico { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px; border-radius: 14px; background: var(--yellow-soft); color: var(--yellow); border: 1px solid rgba(255, 198, 41, 0.25); } .func-ico-g { background: var(--green-soft); color: var(--green); border-color: rgba(37, 211, 102, 0.3); } .func h3 { font-size: 1.2rem; margin-bottom: 8px; } .func p { margin: 0; color: var(--muted); } /* Demo del bot */ .demo { background: radial-gradient(70% 60% at 85% 50%, rgba(61, 116, 255, 0.16), transparent 70%), var(--navy-900); } .demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .ticks { display: grid; gap: 10px; margin: 26px 0 22px; } .ticks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--ink); } .ticks svg { flex: none; color: var(--green); margin-top: 3px; } .fine { font-size: 13.5px; color: var(--dim); margin: 0; } .chat { display: flex; flex-direction: column; height: 540px; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-850); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); } .chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(90deg, var(--navy-700), var(--navy-800)); border-bottom: 1px solid var(--line); } .chat-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--yellow); color: var(--navy-950); } .chat-name { margin: 0; font-weight: 800; color: var(--ink); font-size: 15px; line-height: 1.2; } .chat-status { display: flex; align-items: center; gap: 7px; margin: 3px 0 0; font-size: 12.5px; color: var(--muted); } .chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; overscroll-behavior: contain; } .msg { max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; animation: pop 0.35s var(--ease-out); white-space: pre-line; } .msg-bot { align-self: flex-start; background: var(--navy-700); color: var(--ink); border-bottom-left-radius: 5px; } .msg-user { align-self: flex-end; background: var(--yellow); color: var(--navy-950); font-weight: 700; border-bottom-right-radius: 5px; } .msg-typing { display: inline-flex; gap: 4px; padding: 13px 14px; } .msg-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing 1s infinite; } .msg-typing i:nth-child(2) { animation-delay: 0.15s; } .msg-typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes typing { 50% { transform: translateY(-4px); opacity: 0.4; } } @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .chat-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 16px; border-top: 1px solid var(--line); background: rgba(4, 10, 28, 0.5); min-height: 74px; align-content: flex-start; } .chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: border-color 0.2s, background-color 0.2s, transform 0.2s; } .chip:hover { border-color: var(--yellow); background: var(--yellow-soft); transform: translateY(-1px); } .chip-main { border-color: rgba(255, 198, 41, 0.6); color: var(--yellow-2); } .chat-form { display: flex; gap: 8px; width: 100%; } .chat-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--navy-900); color: var(--ink); font: 600 15px var(--f-body); } .chat-form input:focus { outline: none; border-color: var(--yellow); } .chat-form button { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--yellow); color: var(--navy-950); cursor: pointer; } .chat-actions .btn { width: 100%; } /* Cómo funciona */ .how { background: var(--navy-950); } .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 44px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px); } .js .steps::after { content: ""; position: absolute; left: 12%; top: 44px; height: 2px; width: 76%; background: linear-gradient(90deg, var(--yellow), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-out) 0.3s; } .js .steps.is-in::after { transform: scaleX(1); } .step { position: relative; text-align: center; padding: 0 8px; } .step-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 26px; background: linear-gradient(160deg, var(--navy-700), var(--navy-850)); border: 1px solid var(--line-2); color: var(--yellow); box-shadow: 0 0 0 8px var(--navy-950); transition: transform 0.35s var(--ease-out); } .step:hover .step-ico { transform: translateY(-4px) rotate(-3deg); } .step-wa .step-ico { color: var(--green); border-color: rgba(37, 211, 102, 0.45); background: linear-gradient(160deg, rgba(37, 211, 102, 0.22), var(--navy-850)); } .step-n { position: absolute; z-index: 2; top: -8px; left: calc(50% + 26px); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--navy-950); font: 800 13px/1 var(--f-display); } .step-wa .step-n { background: var(--green); } .step h3 { font-size: 1.14rem; margin-bottom: 8px; } .step p { margin: 0 auto; max-width: 250px; font-size: 15px; color: var(--muted); } /* Ejemplos */ .examples { background: radial-gradient(60% 50% at 50% 0%, rgba(255, 198, 41, 0.07), transparent 70%), var(--navy-900); } .ex-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); } .ex-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--ink-2); font: 700 14.5px/1 var(--f-body); cursor: pointer; transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease-out); } .ex-tabs button:hover { border-color: rgba(255, 198, 41, 0.5); color: var(--ink); transform: translateY(-1px); } .ex-tabs button[aria-selected="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--navy-950); } .ex-panel { animation: ex-in 0.55s var(--ease-out); } @keyframes ex-in { from { opacity: 0; transform: translateY(14px); } } .ex-stage { position: relative; max-width: 1000px; margin: 0 auto; padding: 0 13% 5% 0; } .ex-caption { max-width: 760px; margin: 22px auto 0; text-align: center; color: var(--ink-2); font-size: 15px; } .ex-caption b { color: var(--yellow-2); } .ex-note { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--dim); } /* Temas por rubro */ .ex-gastro { --e-bg: #1a0f0b; --e-bg2: #2a1710; --e-ink: #fff4ea; --e-mut: #d9b9a3; --e-acc: #ff7a2f; --e-acc-ink: #1a0f0b; --e-card: #2e1b13; --e-line: rgba(255, 170, 120, 0.18); } .ex-pro { --e-bg: #f4f7fb; --e-bg2: #e3ebf6; --e-ink: #0f2742; --e-mut: #53677f; --e-acc: #0f8b8d; --e-acc-ink: #ffffff; --e-card: #ffffff; --e-line: rgba(15, 39, 66, 0.1); } .ex-salud { --e-bg: #fdf4f5; --e-bg2: #f6e1e6; --e-ink: #4a2233; --e-mut: #8b6574; --e-acc: #c2577a; --e-acc-ink: #ffffff; --e-card: #ffffff; --e-line: rgba(74, 34, 51, 0.1); } .ex-comercio { --e-bg: #f5efe6; --e-bg2: #e8dcc9; --e-ink: #2f2418; --e-mut: #7a6751; --e-acc: #3f6b4a; --e-acc-ink: #ffffff; --e-card: #fffaf2; --e-line: rgba(47, 36, 24, 0.12); } .ex-browser { border-radius: 16px; overflow: hidden; background: var(--e-bg); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.12); container-type: inline-size; } .ex-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #e6eaf4; } .ex-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c6cde0; } .ex-bar i:first-child { background: #ff6b6b; } .ex-bar i:nth-child(2) { background: #ffc629; } .ex-bar i:nth-child(3) { background: #25d366; } .ex-bar span { margin-left: 12px; padding: 4px 14px; border-radius: 999px; background: #fff; font: 600 11px/1 var(--f-body); color: #6c7690; } .ex-site { position: relative; padding: 2.6cqw 3.4cqw 3.6cqw; color: var(--e-ink); font-family: var(--f-body); background: linear-gradient(160deg, var(--e-bg) 55%, var(--e-bg2)); } .ex-site p { margin: 0; } .ex-nav { display: flex; align-items: center; gap: 2.4cqw; padding-bottom: 2.4cqw; border-bottom: 1px solid var(--e-line); } .ex-logo { font: 700 2.3cqw/1 var(--f-display); letter-spacing: -0.02em; margin-right: auto; } .ex-links { display: flex; gap: 2.4cqw; font-size: 1.5cqw; font-weight: 600; color: var(--e-mut); } .ex-nav-btn { padding: 0.9cqw 1.8cqw; border-radius: 99px; background: var(--e-acc); color: var(--e-acc-ink); font-size: 1.4cqw; font-weight: 700; } .ex-hero { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 3cqw; align-items: center; padding: 4.2cqw 0 3.4cqw; } .ex-kick { font-size: 1.4cqw; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-acc); margin-bottom: 1.2cqw !important; } .ex-h { font: 700 4.4cqw/1.06 var(--f-display); letter-spacing: -0.03em; margin-bottom: 1.4cqw !important; } .ex-p { font-size: 1.8cqw; line-height: 1.45; color: var(--e-mut); margin-bottom: 2.4cqw !important; } .ex-cta { display: inline-flex; align-items: center; gap: 1cqw; padding: 1.4cqw 2.4cqw; border-radius: 99px; background: #25d366; color: #03200e; font-size: 1.7cqw; font-weight: 800; box-shadow: 0 1.4cqw 3cqw -1.4cqw rgba(37, 211, 102, 0.8); } .ex-cta svg { width: 2.2cqw; height: 2.2cqw; } .ex-art { display: grid; place-items: center; aspect-ratio: 1 / 0.9; border-radius: 2.4cqw; color: var(--e-acc-ink); background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 45%), linear-gradient(145deg, var(--e-acc), color-mix(in srgb, var(--e-acc) 55%, #000)); box-shadow: 0 3cqw 6cqw -3cqw color-mix(in srgb, var(--e-acc) 70%, transparent); } .ex-art svg { width: 38%; height: 38%; opacity: 0.95; } .ex-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; } .ex-cards div { display: grid; gap: 0.5cqw; padding: 1.8cqw; border-radius: 1.6cqw; background: var(--e-card); border: 1px solid var(--e-line); } .ex-cards i { width: 3.4cqw; height: 3.4cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--e-acc) 22%, transparent); margin-bottom: 0.6cqw; } .ex-cards b { font-size: 1.7cqw; } .ex-cards span { font-size: 1.35cqw; color: var(--e-mut); } .ex-bot { position: absolute; left: 61%; top: 51%; max-width: 23cqw; display: flex; gap: 1.2cqw; align-items: flex-start; padding: 1.4cqw 1.6cqw; border-radius: 1.8cqw; background: #0e1b40; color: #fff; box-shadow: 0 2.4cqw 5cqw -2cqw rgba(0, 0, 0, 0.6); animation: bob 6s ease-in-out infinite; } .ex-bot-av { flex: none; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 1cqw; background: var(--yellow); color: var(--navy-950); } .ex-bot-av svg { width: 60%; height: 60%; } .ex-bot p { font-size: 1.6cqw; font-weight: 700; margin-bottom: 0.9cqw !important; } .ex-chips { display: flex; gap: 0.7cqw; } .ex-chips span { padding: 0.5cqw 1.2cqw; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.25); font-size: 1.3cqw; font-weight: 600; } .ex-chips .on { background: var(--yellow); border-color: var(--yellow); color: var(--navy-950); } .ex-phone { position: absolute; right: 0; bottom: 0; width: 26%; aspect-ratio: 9 / 17.5; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 6px solid #0b0f1a; background: #efe7dc; container-type: inline-size; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.14); } .ex-wa-head { display: flex; align-items: center; gap: 6cqw; padding: 9cqw 7cqw 6cqw; background: #075e54; color: #fff; } .ex-wa-av { flex: none; display: grid; place-items: center; width: 15cqw; height: 15cqw; border-radius: 50%; background: var(--e-acc); color: var(--e-acc-ink); font: 700 7cqw/1 var(--f-display); } .ex-wa-head b { display: block; font-size: 7cqw; line-height: 1.2; } .ex-wa-head small { font-size: 5.5cqw; opacity: 0.8; } .ex-wa-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 6cqw; background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px); background-size: 8cqw 8cqw; } .ex-wa-msg { align-self: flex-end; max-width: 92%; margin: 0; padding: 5cqw 6cqw; border-radius: 6cqw 6cqw 1.5cqw 6cqw; background: #d9fdd3; color: #111b21; font-size: 6.4cqw; line-height: 1.35; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); animation: pop 0.6s var(--ease-out) 0.3s both; } .ex-wa-input { display: flex; align-items: center; gap: 4cqw; padding: 5cqw 6cqw 8cqw; background: #f0f2f5; } .ex-wa-input span { flex: 1; padding: 4cqw 6cqw; border-radius: 99px; background: #fff; color: #667781; font-size: 6cqw; } .ex-wa-input i { flex: none; display: grid; place-items: center; width: 17cqw; height: 17cqw; border-radius: 50%; background: #25d366; color: #fff; animation: pulse 2s infinite; } .ex-wa-input svg { width: 55%; height: 55%; } /* Qué incluye */ .includes { background: linear-gradient(180deg, var(--navy-950), var(--navy-900)); } .inc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .inc { position: relative; padding: 24px 22px; border-radius: var(--r); background: var(--navy-850); border: 1px solid var(--line); transition: transform 0.35s var(--ease-out), border-color 0.35s, background-color 0.35s; } .inc:hover { transform: translateY(-5px); border-color: rgba(255, 198, 41, 0.35); background: var(--navy-800); } .inc-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 13px; background: var(--blue-soft); color: #a9c0ff; } .inc-ico-g { background: var(--green-soft); color: var(--green); } .inc h3 { font-size: 1.06rem; margin-bottom: 6px; padding-right: 22px; } .inc p { margin: 0; font-size: 14.5px; color: var(--muted); } .inc-ok { position: absolute; top: 22px; right: 20px; color: var(--green); } .shift { max-width: 820px; margin: clamp(44px, 5vw, 64px) auto 0; text-align: center; font: 600 clamp(1.2rem, 1.2vw + 0.8rem, 1.7rem)/1.35 var(--f-display); color: var(--ink-2); letter-spacing: -0.015em; } .shift span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 107, 107, 0.7); } .shift strong { color: var(--yellow); font-weight: 700; } /* Oferta */ .offer { background: var(--navy-900); padding-top: calc(var(--section) * 0.6); } .offer-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); border-radius: 32px; overflow: hidden; background: linear-gradient(140deg, var(--navy-700), var(--navy-850) 60%); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.9); } .offer-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--yellow), rgba(255, 198, 41, 0.1) 40%, rgba(37, 211, 102, 0.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .offer-main { padding: clamp(28px, 4vw, 56px); } /* Mockup de dispositivos (imagen referencial responsive) */ .offer-devices { grid-column: 1 / -1; margin: 0; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px) 22px; border-bottom: 1px solid var(--line); background: radial-gradient(60% 80% at 50% 100%, rgba(255, 198, 41, 0.14), transparent 70%), radial-gradient(50% 70% at 50% 30%, rgba(61, 116, 255, 0.18), transparent 70%); } .devices-img { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35)); } .offer-devices figcaption { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; text-align: center; font-weight: 700; font-size: 15px; color: var(--ink); } .offer-devices figcaption svg { color: var(--green); flex: none; } .offer-devices figcaption span { font-weight: 500; font-size: 13px; color: var(--dim); } .offer-flag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px; padding: 7px 13px; border-radius: 999px; background: var(--yellow); color: var(--navy-950); font: 800 12.5px/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; } .offer-main h2 { margin-bottom: 26px; } .offer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; } .offer-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--ink); font-size: 15.5px; } .offer-list svg { flex: none; color: var(--green); margin-top: 3px; } .offer-list .offer-host { grid-column: 1 / -1; color: var(--green-2); } .offer-list .offer-bonus { grid-column: 1 / -1; margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--yellow-soft); border: 1px dashed rgba(255, 198, 41, 0.45); color: var(--yellow-2); } .offer-list .offer-bonus svg { color: var(--yellow); } .offer-side { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(28px, 4vw, 52px); background: rgba(4, 10, 28, 0.55); border-left: 1px solid var(--line); } .price-lg { text-align: center; } .price-lg .price-old { font-size: 15px; } .price-lg .price-tag { margin: 10px 0 8px; } .price-lg .price-num { display: block; margin: 0; font-size: clamp(3.4rem, 5vw + 1rem, 5rem); } .countdown-lg .cd-label { justify-content: center; } .countdown-lg .cd-end { text-align: center; } .expired-box p { margin: 10px 0 0; text-align: center; color: var(--ink-2); } .expired-box .cd-expired { justify-content: center; margin: 0; } .offer-note { margin: 0; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--muted); } /* Bono */ .bonus { background: var(--navy-900); padding-top: 0; } .bonus-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(26px, 3.5vw, 44px); border-radius: var(--r-lg); background: linear-gradient(120deg, rgba(255, 198, 41, 0.14), rgba(255, 198, 41, 0.03) 50%, rgba(10, 21, 50, 0.6)); border: 1px solid rgba(255, 198, 41, 0.3); } .bonus-ico { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: var(--yellow); color: var(--navy-950); box-shadow: 0 16px 40px -14px rgba(255, 198, 41, 0.7); animation: bob 5s ease-in-out infinite; } .bonus-copy .kicker { margin-bottom: 10px; } .bonus-copy h2 { font-size: clamp(1.4rem, 1.4vw + 0.9rem, 2rem); margin-bottom: 10px; } .bonus-copy p:last-child { margin: 0; color: var(--ink-2); } .bonus-path { display: flex; flex-direction: column; gap: 6px; } .bonus-path li { position: relative; padding: 6px 14px 6px 28px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); border: 1px solid var(--line-2); white-space: nowrap; } .bonus-path li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--yellow); } .bonus-path .on { color: var(--green-ink); background: var(--green); border-color: var(--green); } .bonus-path .on::before { background: var(--green-ink); } /* FAQ */ .faq { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); } .faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .faq .sec-head { position: sticky; top: 110px; margin-bottom: 0; } .qa-list { display: grid; gap: 10px; } .qa { border-radius: var(--r); background: var(--navy-850); border: 1px solid var(--line); transition: border-color 0.3s, background-color 0.3s; } .qa[open] { border-color: rgba(255, 198, 41, 0.35); background: var(--navy-800); } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font: 600 1.06rem/1.35 var(--f-display); color: var(--ink); } .qa summary::-webkit-details-marker { display: none; } .qa summary svg { flex: none; color: var(--yellow); transition: transform 0.3s var(--ease-out); } .qa[open] summary svg { transform: rotate(45deg); } .qa-a { padding: 0 22px 20px; } .qa-a p { margin: 0; color: var(--ink-2); } .qa-a a { color: var(--yellow-2); } /* CTA final */ .final { position: relative; padding: var(--section) 0; overflow: hidden; isolation: isolate; text-align: center; } .final-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 80% at 50% 100%, var(--navy-700), var(--navy-950) 70%); } .final .orb-y { width: 480px; height: 480px; left: 8%; bottom: -200px; background: radial-gradient(circle, rgba(255, 198, 41, 0.35), transparent 65%); } .final .orb-g { width: 480px; height: 480px; right: 6%; bottom: -220px; background: radial-gradient(circle, rgba(37, 211, 102, 0.3), transparent 65%); } .final-inner { max-width: 900px; } .final-eyebrow { margin: 0 0 18px; font: 800 13px/1 var(--f-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow); } .final h2 { font-size: clamp(2rem, 3.4vw + 0.8rem, 3.8rem); margin-bottom: 24px; } .final-sub { margin: 0 auto 34px; max-width: 560px; font: 700 clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem)/1.4 var(--f-body); color: var(--ink); text-transform: uppercase; letter-spacing: 0.02em; } .final-steps { margin: 20px auto 0; max-width: 520px; font-size: 15px; color: var(--ink-2); } .final-price { margin: 22px 0 0; color: var(--muted); font-weight: 600; font-size: 15px; } .final-price s { text-decoration-color: var(--red); } .final-price b { color: var(--yellow); } /* Pie */ .footer { padding: 28px 0 36px; background: var(--navy-950); border-top: 1px solid var(--line); } .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--dim); } .footer p { margin: 0; } .footer nav { display: flex; gap: 20px; } .footer a { color: var(--muted); text-decoration: none; } .footer a:hover { color: var(--ink); } /* Botón flotante */ .wa-float { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(180deg, var(--green-2), var(--green)); color: #fff; box-shadow: 0 14px 34px -8px rgba(37, 211, 102, 0.7); transition: transform 0.3s var(--ease-out), opacity 0.3s; } .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green); animation: ring 2.4s ease-out infinite; } .wa-float:hover { transform: scale(1.08); } .js .wa-float:not(.is-on) { opacity: 0; transform: scale(0.6); pointer-events: none; } @keyframes ring { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.6); opacity: 0; } } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .inc-grid { grid-template-columns: repeat(2, 1fr); } .func-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 920px) { .hero { padding-top: 150px; } .offer-expired .hero { padding-top: 108px; } .hero-grid, .demo-grid, .faq-grid { grid-template-columns: 1fr; } .hero-visual { max-width: 560px; margin: 8px auto 0; width: 100%; } .faq .sec-head { position: static; } .offer-card { grid-template-columns: 1fr; } .offer-side { border-left: 0; border-top: 1px solid var(--line); } .steps { grid-template-columns: repeat(2, 1fr); row-gap: 44px; } .steps::before, .js .steps::after { display: none; } .bonus-card { grid-template-columns: auto minmax(0, 1fr); } .bonus-path { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } .chat { height: 520px; } } @media (max-width: 640px) { body { font-size: 16px; } .nav { height: 64px; gap: 10px; } .nav-pill { display: none; } .hide-xs { display: none; } .show-xs { display: inline; } .hero { padding-top: 134px; } .offer-expired .hero { padding-top: 92px; } .ub-inner { gap: 8px; min-height: 40px; flex-wrap: nowrap; } .ub-txt { font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; } .ub-time { font-size: 14px; } .ub-time span { min-width: 27px; padding: 4px 4px; border-radius: 6px; } .alert-pill { font-size: 13.5px; } .hero-points { grid-template-columns: 1fr; gap: 8px; } .ex-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; } .ex-tabs::-webkit-scrollbar { display: none; } .ex-tabs button { flex: none; padding: 10px 14px; font-size: 13.5px; } .ex-stage { padding: 0 0 70% 0; } .ex-phone { width: 44%; right: 4%; border-width: 5px; border-radius: 18px; } .ex-bot { left: 50%; top: 50%; } .hero-points li { font-size: 15px; } .offer-box { padding: 12px; } .hero-ctas .btn { width: 100%; } .btn-lg { font-size: 15px; padding: 0 20px; } .btn-xl { width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding: 14px 22px; } .hero-visual { padding: 34px 4px 60px 4px; } .device { transform: none; } .fl-bot { left: -2px; top: 0; max-width: 220px; } .fl-lead { right: -2px; } .fl-wa { left: 4px; right: 20px; max-width: none; } .compare, .func-grid, .inc-grid, .offer-list { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; row-gap: 36px; } .bonus-card { grid-template-columns: 1fr; text-align: left; } .chat { height: 500px; } .msg { max-width: 92%; } .wa-float { right: 14px; width: 56px; height: 56px; } } @media (max-width: 380px) { .cd-unit span { font-size: 1.45rem; } .cd-unit small { font-size: 9.5px; letter-spacing: 0.06em; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; translate: none; } }