/* =========================================================== LA AGENCIA — Landing V3 · Apple Hybrid =========================================================== */ :root { /* Brand accent (the 5% color) — blue system */ --accent: #1E7BE0; --accent-soft: #5DA0E9; --accent-glow: rgba(30, 123, 224, 0.5); --green: #1A8A50; /* Dark environment */ --black: #000000; --surface-d: #0a0a0c; --surface-d2: #121215; --text-d: #f5f5f7; --muted-d: #86868b; --steel: #5b6473; --hair-d: rgba(255, 255, 255, 0.10); /* Light environment */ --white: #ffffff; --offwhite: #f5f5f7; --text-l: #1d1d1f; --muted-l: #86868b; --hair-l: rgba(0, 0, 0, 0.08); /* Type */ --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --maxw: 1180px; --pad: 24px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--font); background: var(--black); color: var(--text-d); line-height: 1.4; /* `clip` (not `hidden`) — `hidden` forces overflow-y:auto, turning into a scroll container and breaking position:sticky on .scrolly-sticky. `clip` recorta igual horizontalmente pero NO crea scroll container. */ overflow-x: clip; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } /* Numerals that don't shift width while animating / aligning in columns */ .big-number, .kpi .val, .dl-kpi .v, .plan-price .amt, .appt .time, .testi-meta .nm, .dash-bar .title { font-variant-numeric: tabular-nums; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ---------- Section scaffolding ---------- */ .section { position: relative; width: 100%; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .dark { background: var(--black); color: var(--text-d); } .surface-dark { background: var(--surface-d); color: var(--text-d); } .light { background: var(--white); color: var(--text-l); } .gray { background: var(--offwhite); color: var(--text-l); } /* ---------- Type system ---------- */ .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .dark .eyebrow, .surface-dark .eyebrow { color: var(--accent-soft); } .display { font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(38px, 5.4vw, 76px); text-wrap: balance; } .h2 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; font-size: clamp(30px, 4.2vw, 54px); text-wrap: balance; } .lede { font-weight: 400; font-size: clamp(17px, 1.5vw, 21px); color: var(--muted-d); line-height: 1.5; letter-spacing: -0.01em; text-wrap: pretty; } .light .lede, .gray .lede { color: var(--muted-l); } /* Apple-style clipped gradient on accent text */ .accent-word { background-image: linear-gradient(135deg, #3AA6FF 0%, #0A1931 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* On dark backgrounds the deep-navy stop disappears — keep both stops in the bright-blue range so the gradient stays legible (same Apple-style feel) */ .dark .accent-word, .surface-dark .accent-word, .scrolly-cap .accent-word { background-image: linear-gradient(135deg, #8FCBFF 0%, #3AA6FF 100%); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; padding: 15px 30px; border-radius: 980px; cursor: pointer; border: 1px solid transparent; transition: transform .4s var(--ease), background .3s var(--ease), box-shadow .4s var(--ease), color .3s; white-space: nowrap; } .btn .arrow { transition: transform .4s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.12); } .btn-primary:hover { background: var(--accent-soft); box-shadow: 0 6px 20px -10px var(--accent-glow); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); } .dark .btn-ghost, .surface-dark .btn-ghost { color: var(--accent-soft); border-color: color-mix(in oklab, var(--accent-soft) 55%, transparent); } .btn-ghost:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); border-color: var(--accent); } .btn-sm { font-size: 15px; padding: 11px 22px; } /* =========================================================== NAV =========================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 60px; display: flex; align-items: center; transition: background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(10, 10, 12, 0.62); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hair-d); } .nav.scrolled.on-light { background: rgba(255, 255, 255, 0.72); border-bottom: 1px solid var(--hair-l); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; } .nav-logo { height: 17px; width: auto; transition: opacity .4s; } .nav-logo.dark-logo { display: none; } .nav.on-light .nav-logo.white-logo { display: none; } .nav.on-light .nav-logo.dark-logo { display: block; } .nav-links { display: flex; gap: 34px; align-items: center; } .nav-links a { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-d); opacity: .82; transition: opacity .25s, color .4s; } .nav.on-light .nav-links a { color: var(--text-l); } .nav-links a:hover { opacity: 1; color: var(--accent); } .nav-right { display: flex; align-items: center; gap: 16px; } .nav-social { display: flex; gap: 12px; } .nav-social a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--text-d); opacity: .7; transition: opacity .25s, background .25s, color .4s; } .nav.on-light .nav-social a { color: var(--text-l); } .nav-social a:hover { opacity: 1; color: var(--accent); } .nav-social svg { width: 16px; height: 16px; } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .hamburger span { width: 22px; height: 2px; background: var(--text-d); border-radius: 2px; transition: .35s var(--ease); } .nav.on-light .hamburger span { background: var(--text-l); } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: rgba(10,10,12,.92); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); } .mobile-menu.open { opacity: 1; pointer-events: auto; } .mobile-menu a { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-d); } .mobile-menu .btn { margin-top: 10px; } /* =========================================================== 01 HERO =========================================================== */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 150px 0 0; text-align: center; overflow: hidden; } .hero-glowfield { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(120% 70% at 50% 128%, rgba(0,0,0,0.55), transparent 52%); } /* Aurora disabled — clean flat black hero */ .hero-aurora { display: none; } .hero-aurora::before, .hero-aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; } .hero-aurora::before { width: 62vw; height: 62vw; max-width: 760px; max-height: 760px; left: -8vw; top: -16vw; background: radial-gradient(circle, rgba(78,78,88,0.62), rgba(78,78,88,0) 64%); animation: heroAuroraA 26s var(--ease) infinite alternate; } .hero-aurora::after { width: 56vw; height: 56vw; max-width: 700px; max-height: 700px; right: -10vw; top: 2vw; background: radial-gradient(circle, rgba(38,38,46,0.78), rgba(38,38,46,0) 62%); animation: heroAuroraB 32s var(--ease) infinite alternate; } @keyframes heroAuroraA { from { transform: translate(0,0) scale(1); } to { transform: translate(16vw, 12vh) scale(1.22); } } @keyframes heroAuroraB { from { transform: translate(0,0) scale(1.12); } to { transform: translate(-15vw, 15vh) scale(0.9); } } body.no-anim .hero-aurora::before, body.no-anim .hero-aurora::after { animation: none !important; } .hero .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .hero-copy { display: flex; flex-direction: column; align-items: center; } .hero .eyebrow { margin-bottom: 22px; } .hero-headline { margin-top: 0; } .hero-headline .display { max-width: 19ch; line-height: 1.06; } .hero-sub { margin-top: 22px; max-width: 46ch; } .hero-cta-row { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .hero-meta { font-size: 14px; color: var(--muted-d); letter-spacing: .01em; } /* Product visual peeks above the fold, fully revealed on scroll */ .hero-stage { margin-top: 72px; width: 100%; display: flex; justify-content: center; } /* Dashboard mockup */ .dash { position: relative; width: min(820px, 92vw); border-radius: 18px; background: linear-gradient(180deg, #151519, #0c0c0f); border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 50px 120px -50px rgba(0,0,0,0.95), 0 30px 80px -60px var(--accent-glow), 0 0 0 1px rgba(255,255,255,0.03); overflow: hidden; } .dash-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--hair-d); } .dash-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a2a30; display: inline-block; } .dash-bar .title { margin-left: 12px; font-size: 12px; color: var(--muted-d); letter-spacing: .02em; } .dash-body { padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .kpi { background: rgba(255,255,255,0.03); border: 1px solid var(--hair-d); border-radius: 12px; padding: 15px 16px; text-align: left; transition: border-color .4s var(--ease), background .4s var(--ease); } .kpi:hover { border-color: color-mix(in oklab, var(--accent-soft) 40%, transparent); background: rgba(93,160,233,0.06); } .kpi .label { font-size: 11px; color: var(--muted-d); letter-spacing: .04em; text-transform: uppercase; } .kpi .val { font-size: clamp(22px,3vw,30px); font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; } .kpi .val.accent { color: var(--accent-soft); } .kpi .delta { font-size: 12px; color: #34c77b; margin-top: 4px; font-weight: 600; } .dash-pipe { grid-column: 1 / -1; background: rgba(255,255,255,0.03); border: 1px solid var(--hair-d); border-radius: 12px; padding: 16px; } .dash-pipe .ph { font-size: 11px; color: var(--muted-d); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; } .pipe-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; } .pipe-col .pc-h { font-size: 11px; color: var(--muted-d); margin-bottom: 8px; display:flex; justify-content:space-between; } .pipe-card { height: 26px; border-radius: 7px; background: rgba(255,255,255,0.05); margin-bottom: 7px; border:1px solid var(--hair-d); } .pipe-card.hot { background: linear-gradient(90deg, rgba(30,123,224,.35), rgba(30,123,224,.12)); border-color: rgba(58,166,255,.5); } .scroll-ind { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.5; } .scroll-ind .mouse { width: 22px; height: 34px; border: 1.5px solid var(--muted-d); border-radius: 12px; position: relative; } .scroll-ind .mouse::after { content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:3px; height:6px; border-radius:3px; background: var(--muted-d); animation: scrolldot 1.8s var(--ease) infinite; } @keyframes scrolldot { 0%{opacity:0; transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1; transform:translate(-50%,8px)} 100%{opacity:0; transform:translate(-50%,8px)} } /* =========================================================== 02 LOGOS =========================================================== */ .logos { padding: 64px 0; overflow: hidden; } .logos-label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-d); margin-bottom: 38px; } .logos-track-wrap { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); } .logos-track { display: flex; align-items: center; width: max-content; animation: marquee 38s linear infinite; } .logos-group { display: flex; align-items: center; gap: 76px; padding-right: 76px; flex: 0 0 auto; } .logos-track img.lg { height: 30px; width: auto; flex: 0 0 auto; opacity: .55; filter: brightness(0) invert(1); transition: opacity .4s var(--ease); } .logos-track img.lg:hover { opacity: .95; } @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } /* =========================================================== 03 PROBLEMA =========================================================== */ .problem { padding: 16vh 0; text-align: center; } .problem .wrap { max-width: 900px; } .problem-line { font-weight: 700; letter-spacing: -0.025em; line-height: 1.18; font-size: clamp(26px, 3.4vw, 42px); } .problem .block1 .problem-line { color: var(--text-d); } .problem .block2 .problem-line { color: var(--steel); } .problem .block2 .problem-line strong { color: var(--text-d); font-weight: 700; } .problem-divider { width: 64px; height: 2px; background: var(--accent); margin: 54px auto; border-radius: 2px; opacity: .85; } /* =========================================================== 04 REVELACIÓN =========================================================== */ .reveal-sec { padding: 16vh 0 14vh; text-align: center; } .reveal-sec .wrap { display: flex; flex-direction: column; align-items: center; } .reveal-sec .h2 { max-width: 14ch; margin-top: 60px; } .reveal-sec .lede { margin-top: 22px; max-width: 30ch; } .reveal-sec .lede .strong { color: var(--text-l); font-weight: 600; } /* Phone mockup */ .phone { position: relative; width: 300px; height: 612px; border-radius: 52px; background: #0a0a0c; padding: 12px; border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 50px 110px -50px rgba(30,123,224,0.18), 0 40px 80px -45px rgba(0,0,0,0.55); } .phone-screen { width: 100%; height: 100%; border-radius: 42px; background: linear-gradient(180deg,#0e1a12,#0a0a0c); overflow: hidden; position: relative; } .phone-notch { position:absolute; top:12px; left:50%; transform:translateX(-50%); width: 92px; height: 26px; background:#000; border-radius: 14px; z-index: 5; } .wa-head { display:flex; align-items:center; gap:10px; padding: 40px 16px 12px; background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(255,255,255,.06); } .wa-ava { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#3AA6FF,#1E7BE0); display:grid; place-items:center; font-size: 13px; font-weight:700; color:#fff; } .wa-head .nm { font-size: 14px; font-weight: 600; color: #f5f5f7; } .wa-head .st { font-size: 11px; color: #34c77b; } .wa-body { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; } .bub { max-width: 80%; padding: 9px 13px; border-radius: 15px; font-size: 12.5px; line-height: 1.4; } .bub.in { background: #1f262b; color: #e7eef0; align-self: flex-start; border-bottom-left-radius: 5px; } .bub.out { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; } .bub .tt { font-size: 9px; opacity: .6; display:block; margin-top: 4px; text-align: right; } .wa-typing { align-self: flex-start; display:flex; gap:4px; padding: 11px 14px; background:#1f262b; border-radius:15px; border-bottom-left-radius:5px; } .wa-typing i { width:6px;height:6px;border-radius:50%;background:#7b8a8f; animation: blink 1.2s infinite; } .wa-typing i:nth-child(2){animation-delay:.2s} .wa-typing i:nth-child(3){animation-delay:.4s} @keyframes blink { 0%,60%,100%{opacity:.3} 30%{opacity:1} } .phone-toast { position: absolute; left: 12px; right: 12px; top: 70px; z-index: 8; background: rgba(20,22,26,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 13px 15px; display:flex; gap:11px; align-items:flex-start; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6); opacity: 0; transform: translateY(-12px); } .phone-toast.show { animation: toastIn .7s var(--ease) forwards; } @keyframes toastIn { to { opacity:1; transform: translateY(0) } } .phone-toast .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); display:grid; place-items:center; flex:0 0 auto; } .phone-toast .ic svg { width:16px;height:16px;color:#fff } .phone-toast .tt { font-size: 12.5px; font-weight: 700; color: #fff; } .phone-toast .ds { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 2px; } /* =========================================================== 05 CÓMO FUNCIONA =========================================================== */ .how { padding: 14vh 0; } .how-head { text-align: center; margin-bottom: 90px; } .how-frames { display: flex; flex-direction: column; gap: 110px; } .how-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .how-frame:nth-child(even) .how-visual { order: 2; } .how-num { font-size: 17px; font-weight: 700; color: var(--accent); letter-spacing: .02em; } .how-frame h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 14px 0 16px; max-width: 14ch; } .how-frame .lede { max-width: 40ch; } .how-frame .btn { margin-top: 28px; } .visual-card { border-radius: 18px; background: var(--white); overflow: hidden; box-shadow: 0 0 70px -18px rgba(0,0,0,0.18), 0 30px 60px -40px rgba(0,0,0,0.25); border: 1px solid var(--hair-l); aspect-ratio: 4 / 3; display: flex; flex-direction: column; } /* Frame 1 — Meta ad */ .ad-mock { flex:1; background: linear-gradient(160deg,#fff,#f5f5f7); padding: 18px; display:flex; flex-direction:column; } .ad-top { display:flex; align-items:center; gap:9px; } .ad-logo { width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3AA6FF,#1E7BE0); display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;} .ad-top .nm{font-size:13px;font-weight:600;color:#1d1d1f} .ad-top .sp{font-size:11px;color:#86868b} .ad-img { margin: 13px 0; border-radius: 12px; flex:1; min-height: 90px; background: #2b3556; position: relative; overflow: hidden; } .ad-img .house-render { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ad-img .tag { position:absolute; left:12px; bottom:12px; background:#1d1d1f; color:#fff; font-size:11px; padding:5px 11px; border-radius:7px; font-weight:600; } .ad-cta { background: var(--accent); color:#fff; text-align:center; font-size:13px; font-weight:600; padding:11px; border-radius:9px; position: relative; } .cursor { position:absolute; right: 22px; bottom: 16px; width: 22px; height: 22px; z-index: 3; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); animation: tapcursor 2.6s var(--ease) infinite; } @keyframes tapcursor { 0%,100%{transform:translate(6px,6px)} 45%{transform:translate(0,0)} 55%{transform:scale(.85) translate(0,0)} 65%{transform:translate(0,0)} } /* Frame 2 — vendor agenda */ .agenda-mock { flex:1; background: #fff; padding: 16px 18px; display:flex; flex-direction:column; } .agenda-mock .ag-h { font-size:12px; color:#86868b; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom: 6px; } .agenda-mock .ag-day { font-size: 19px; font-weight: 700; color:#1d1d1f; letter-spacing:-0.02em; margin-bottom: 12px; } .appt { display:flex; gap:11px; align-items:center; padding: 10px 12px; border-radius:11px; background:#f5f5f7; margin-bottom:8px; } .appt .time { font-size:12px; font-weight:700; color:var(--accent); width:46px; flex:0 0 auto; } .appt .who { font-size:13px; font-weight:600; color:#1d1d1f; } .appt .meta{font-size:11px;color:#86868b} .appt.filled { background: color-mix(in oklab, var(--accent) 8%, #f5f5f7); } .appt .dot { margin-left:auto; width:8px;height:8px;border-radius:50%;background:#34c77b; flex:0 0 auto; } /* Frame 3 — dashboard light */ .dashlite { flex:1; background:#fff; padding:16px 18px; display:flex; flex-direction:column; gap:10px; } .dl-row { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; } .dl-kpi { background:#f5f5f7; border-radius:11px; padding:12px; } .dl-kpi .l{font-size:10px;color:#86868b;text-transform:uppercase;letter-spacing:.04em} .dl-kpi .v{font-size:20px;font-weight:700;color:#1d1d1f;letter-spacing:-0.02em;margin-top:4px} .dl-kpi .v.accent{color:var(--accent)} .dl-chart { flex:1; background:#f5f5f7; border-radius:11px; padding:14px; display:flex; align-items:flex-end; gap:7px; min-height: 90px; } .dl-chart .bar { flex:1; background: linear-gradient(180deg,#3AA6FF,#0A1931); border-radius:5px 5px 0 0; opacity:.85; } /* =========================================================== 06 EL NÚMERO =========================================================== */ .number-sec { min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 16vh 0; overflow:hidden; position: relative; } .number-sec .glow { position:absolute; inset:0; background: radial-gradient(50% 50% at 50% 50%, rgba(30,123,224,.12), transparent 72%); pointer-events:none; } .number-sec .wrap { position: relative; z-index:2; } .big-number { font-weight: 800; letter-spacing: -0.04em; line-height: .95; font-size: clamp(64px, 14vw, 200px); background: linear-gradient(180deg, #fff 30%, #b9b9c2); -webkit-background-clip: text; background-clip: text; color: transparent; } .number-sec .n-sub { margin-top: 30px; font-size: clamp(20px,2.4vw,30px); font-weight: 500; color: var(--text-d); max-width: 22ch; margin-left:auto;margin-right:auto; letter-spacing:-0.02em; } .number-sec .n-meta { margin-top: 18px; font-size: 17px; color: var(--muted-d); } .number-sec .n-close { margin-top: 40px; font-size: clamp(22px,2.6vw,34px); font-weight: 700; letter-spacing:-0.02em; background: linear-gradient(135deg, #8FCBFF, #3AA6FF); -webkit-background-clip:text; background-clip:text; color: transparent; -webkit-text-fill-color: transparent; } /* =========================================================== 07 CASOS =========================================================== */ .cases { padding: 14vh 0; } .cases-head { margin-bottom: 70px; } .cases-head .h2 { max-width: 12ch; } .case-item { border-top: 1px solid var(--hair-l); padding: 40px 0; padding-left: 30px; border-left: 3px solid var(--accent); position: relative; transition: padding-left .4s var(--ease), background .4s var(--ease); } .cases .case-item { transition: padding-left .4s var(--ease), background .4s var(--ease), opacity .7s var(--ease), transform .7s var(--ease); } .case-item:last-of-type { border-bottom: 1px solid var(--hair-l); } .case-item:hover { padding-left: 44px; background: color-mix(in oklab, var(--accent) 4%, transparent); } /* Animated arrow cue that slides in on hover */ .case-item .c-arrow { position: absolute; top: 50%; right: 8px; transform: translateY(-50%) translateX(-6px); width: 30px; height: 30px; opacity: 0; color: var(--accent); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; } .case-item:hover .c-arrow { opacity: 1; transform: translateY(-50%) translateX(0); } .case-item .c-arrow svg { width: 100%; height: 100%; } .case-item .c-head { font-size: clamp(26px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; color: var(--text-l); } .case-item .c-head .accent-word { -webkit-text-fill-color: transparent; } .case-item .c-ctx { margin-top: 14px; font-size: 17px; color: var(--muted-l); max-width: 60ch; } .cases .case-cta { margin-top: 56px; } /* =========================================================== 08 TESTIMONIALES =========================================================== */ .testi { padding: 14vh 0; } .testi-head { text-align:center; margin-bottom: 56px; } .testi-head .h2 { max-width: 18ch; margin: 0 auto; } .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .testi-card { aspect-ratio: 9 / 16; border-radius: 22px; position: relative; overflow: hidden; background: linear-gradient(180deg,#1a1a1f,#0c0c0f); border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent); box-shadow: 0 0 60px -22px rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .testi-card::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(35deg, rgba(255,255,255,.015), rgba(255,255,255,.015) 14px, transparent 14px, transparent 28px); } .testi-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -40px var(--accent-glow), 0 20px 50px -30px rgba(0,0,0,0.4); } .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.10); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.25); display:grid; place-items:center; z-index:2; transition: transform .4s var(--ease), background .3s; } .testi-card:hover .play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); } .play svg { width: 22px; height: 22px; color:#fff; margin-left: 3px; } .testi-meta { position:absolute; bottom: 18px; left: 18px; right: 18px; z-index:2; } .testi-meta .nm { font-size: 15px; font-weight: 700; color:#fff; } .testi-meta .rl { font-size: 12px; color: rgba(255,255,255,.6); margin-top:3px; } /* =========================================================== 08b RESEÑAS DE GOOGLE (slider) =========================================================== */ .reviews { padding: 14vh 0; overflow: hidden; } .reviews-head { text-align: center; margin-bottom: 44px; } .reviews-head .h2 { max-width: 18ch; margin: 0 auto 22px; } /* Gold star primitive (CSS mask so it stays crisp at any size) */ .g-stars, .rv-stars { display: inline-flex; gap: 2px; vertical-align: middle; } .g-stars i, .rv-stars i { width: 1em; height: 1em; display: inline-block; background: #FBA40A; -webkit-mask: var(--star) center/contain no-repeat; mask: var(--star) center/contain no-repeat; } :root { --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.3l-6.18 3.7 1.64-7.03L2 9.24l7.19-.61L12 2l2.81 6.63 7.19.61-5.46 4.73 1.64 7.03z'/%3E%3C/svg%3E"); } /* Google rating summary chip */ .g-summary { display: inline-flex; align-items: center; gap: 11px; flex-wrap: nowrap; justify-content: center; padding: 11px 20px; border-radius: 980px; background: var(--white); border: 1px solid var(--hair-l); box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: box-shadow .35s var(--ease), transform .35s var(--ease); } .g-summary .g-count { white-space: nowrap; } .g-summary:hover { box-shadow: 0 10px 30px -16px rgba(0,0,0,0.28); transform: translateY(-1px); } .g-ico { width: 19px; height: 19px; flex: 0 0 auto; } .g-score { font-size: 17px; font-weight: 700; color: var(--text-l); letter-spacing: -0.01em; } .g-summary .g-stars { font-size: 16px; } .g-count { font-size: 14px; color: var(--muted-l); font-weight: 500; } .g-arrow { font-size: 15px; color: var(--accent); transition: transform .35s var(--ease); } .g-summary:hover .g-arrow { transform: translateX(3px); } /* Slider shell */ .reviews-slider { position: relative; display: flex; align-items: center; gap: 14px; } .rv-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; flex: 1 1 auto; scroll-padding-left: 2px; -webkit-overflow-scrolling: touch; } .rv-viewport::-webkit-scrollbar { display: none; } .rv-viewport { cursor: grab; } .rv-viewport.dragging { cursor: grabbing; } .rv-viewport.dragging .rv-card { pointer-events: none; } .rv-track { display: flex; gap: 22px; padding: 8px 2px 12px; align-items: stretch; } .rv-card { flex: 0 0 clamp(280px, 78vw, 384px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; background: var(--white); border: 1px solid var(--hair-l); border-radius: 22px; padding: 26px 26px 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .rv-card:hover { transform: translateY(-5px); box-shadow: 0 26px 56px -34px rgba(0,0,0,0.32); border-color: rgba(0,0,0,0.12); } .rv-top { display: flex; align-items: center; gap: 13px; } .rv-ava { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; } .rv-id { flex: 1 1 auto; min-width: 0; } .rv-name { font-size: 16px; font-weight: 600; color: var(--text-l); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-sub { font-size: 12.5px; color: var(--muted-l); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-g { width: 20px; height: 20px; flex: 0 0 auto; opacity: .9; } .rv-meta { display: flex; align-items: center; gap: 10px; } .rv-stars { font-size: 15px; } .rv-time { font-size: 13px; color: var(--muted-l); } .rv-new { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); border-radius: 980px; padding: 2px 9px; } .rv-text { font-size: 15.5px; line-height: 1.5; color: #2b2b2f; letter-spacing: -0.005em; text-wrap: pretty; } /* Arrows */ .rv-arrow { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--white); border: 1px solid var(--hair-l); color: var(--text-l); box-shadow: 0 2px 8px -3px rgba(0,0,0,0.16); transition: background .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease), box-shadow .3s; } .rv-arrow svg { width: 20px; height: 20px; } .rv-arrow:hover { background: var(--accent); color: #fff; transform: scale(1.06); box-shadow: 0 8px 20px -8px var(--accent-glow); } .rv-arrow:disabled { opacity: .32; cursor: default; pointer-events: none; } /* Dots */ .rv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; } .rv-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: color-mix(in oklab, var(--text-l) 22%, transparent); transition: all .35s var(--ease); } .rv-dots button.active { background: var(--accent); width: 24px; border-radius: 980px; } /* Edge fade so cards bleed out cleanly on wide screens */ .rv-viewport { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.4%, #000 97.6%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 2.4%, #000 97.6%, transparent 100%); } @media (max-width: 720px) { .rv-arrow { display: none; } .rv-viewport { -webkit-mask-image: none; mask-image: none; } .rv-card { flex-basis: clamp(260px, 84vw, 320px); } } @media (max-width: 480px) { .g-summary { flex-wrap: wrap; padding: 12px 18px; } .g-summary .g-arrow { display: none; } } /* =========================================================== 09 INVERSIÓN =========================================================== */ .inv { padding: 14vh 0; } .inv-head { text-align:center; margin-bottom: 16px; } .inv-head .h2 { max-width: 14ch; margin: 0 auto; } .inv-note { text-align:center; max-width: 50ch; margin: 0 auto 60px; font-size: 16px; color: var(--muted-d); } .inv-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: start; max-width: 920px; margin: 0 auto; } .plan { background: var(--surface-d2); border: 1px solid var(--hair-d); border-radius: 22px; padding: 38px 34px; box-shadow: 0 0 70px -28px rgba(0,0,0,0.6); position: relative; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .inv-grid .plan { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), opacity .7s var(--ease); } .plan:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--accent) 38%, transparent); box-shadow: 0 40px 90px -50px rgba(0,0,0,0.7), 0 22px 60px -46px var(--accent-glow); } .plan.featured:hover { transform: translateY(-8px); border-color: color-mix(in oklab, var(--accent) 65%, transparent); box-shadow: 0 48px 110px -50px rgba(0,0,0,0.75), 0 26px 70px -44px var(--accent-glow); } .plan.featured { border-color: color-mix(in oklab, var(--accent) 50%, transparent); box-shadow: 0 40px 90px -50px rgba(0,0,0,0.7), 0 20px 60px -50px var(--accent-glow); } .plan-badge { position:absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space:nowrap; background: var(--accent); color:#fff; font-size: 12px; font-weight: 700; letter-spacing:.06em; padding: 6px 16px; border-radius: 980px; } .plan-name { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-d); } .plan.featured .plan-name { color: var(--accent-soft); } .plan-price { margin-top: 14px; display:flex; align-items:baseline; gap:8px; } .plan-price .amt { font-size: clamp(36px,4.4vw,52px); font-weight: 800; letter-spacing:-0.03em; color: var(--text-d); } .plan-price .per { font-size: 15px; color: var(--muted-d); } .plan-sub { margin-top: 8px; font-size: 14px; color: var(--muted-d); } .plan-feats { list-style: none; margin: 26px 0; display:flex; flex-direction:column; gap: 14px; } .plan-feats li { display:flex; gap: 11px; font-size: 15px; line-height: 1.4; color: #d4d4da; } .plan-feats li svg { width: 17px; height: 17px; color: var(--accent-soft); flex:0 0 auto; margin-top: 2px; } .plan-feats li strong { color: var(--text-d); font-weight: 600; } .plan .btn { width: 100%; justify-content: center; } .inv-guarantee { margin: 50px auto 0; max-width: 620px; text-align: center; display:flex; align-items:center; justify-content:center; gap: 11px; padding: 18px 26px; border-radius: 16px; background: rgba(26,138,80,.08); border: 1px solid rgba(26,138,80,.3); color: #d4d4da; font-size: 16px; } .inv-guarantee .check { color:#34c77b; font-weight:700; } /* =========================================================== 10 FAQ =========================================================== */ .faq { padding: 14vh 0; } .faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: start; } .faq-head .h2 { max-width: 8ch; } .faq-list { border-top: 1px solid var(--hair-l); } .faq-item { border-bottom: 1px solid var(--hair-l); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; display:flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font-size: clamp(18px,1.9vw,22px); font-weight: 600; letter-spacing: -0.02em; color: var(--text-l); transition: color .3s var(--ease); } .faq-q:hover { color: var(--accent); } .faq-q:hover .ic::before, .faq-q:hover .ic::after { background: var(--accent-soft); } .faq-q .ic { width: 22px; height: 22px; flex:0 0 auto; position: relative; } .faq-q .ic::before, .faq-q .ic::after { content:""; position:absolute; background: var(--accent); border-radius: 2px; transition: transform .4s var(--ease); } .faq-q .ic::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); } .faq-q .ic::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); } .faq-item.open .faq-q .ic::after { transform: translateX(-50%) scaleY(0); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); } .faq-a-inner { padding: 0 0 26px; font-size: 17px; line-height: 1.55; color: var(--muted-l); max-width: 56ch; } /* =========================================================== 11 CIERRE =========================================================== */ .close-sec { min-height: 92vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 16vh 0; } .close-sec .display { max-width: 14ch; } .close-sec .display .dim { color: var(--steel); } .close-sec .c-sub { margin-top: 24px; font-size: clamp(18px,2vw,24px); color: var(--muted-d); } .close-sec .btn { margin-top: 44px; } .close-sec .c-meta { margin-top: 16px; font-size: 14px; color: var(--muted-d); } .close-social { margin-top: 40px; display:flex; gap: 20px; } .close-social a { width: 42px; height:42px; border-radius:50%; border:1px solid var(--hair-d); display:grid; place-items:center; color:var(--muted-d); transition:.3s var(--ease); } .close-social a:hover { color:#fff; border-color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); } .close-social svg { width:18px;height:18px; } /* =========================================================== FOOTER =========================================================== */ .footer { padding: 70px 0 56px; text-align:center; border-top: 1px solid var(--hair-d); } .footer .f-logo { height: 20px; width:auto; margin: 0 auto 18px; opacity: .92; } .footer .f-tag { font-size: 15px; color: var(--muted-d); } .footer .f-links { margin-top: 24px; display:flex; gap: 24px; justify-content:center; flex-wrap: wrap; } .footer .f-links a { font-size: 14px; color: var(--text-d); opacity:.78; transition: .25s; } .footer .f-links a:hover { opacity:1; color: var(--accent-soft); } .footer .f-social { margin-top: 22px; display:flex; gap:16px; justify-content:center; } .footer .f-social a { color: var(--muted-d); transition:.25s; } .footer .f-social a:hover{ color:#fff; } .footer .f-social svg{width:17px;height:17px} .footer .f-meta { margin-top: 26px; font-size: 13px; color: #55555c; } /* =========================================================== SCROLL REVEAL =========================================================== */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal-scale { opacity: 0; transform: scale(.975); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal-scale.in { opacity: 1; transform: none; } body.no-anim .reveal, body.no-anim .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; } body.no-anim .logos-track { animation: none !important; } /* stagger helpers via data attribute handled in JS */ /* =========================================================== 05.5 SCROLLYTELLING (pinned video scrub) =========================================================== */ .scrolly { position: relative; background: #000; } .scrolly-track { height: var(--scrolly-track, 460vh); position: relative; } .scrolly-sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; background: #000; } .scrolly-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; transform: scale(1.04); will-change: transform; } /* subtle vignette + grain for depth and legibility */ .scrolly-grain { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 55%, transparent 38%, rgba(0,0,0,0.55) 100%); } .scrolly-fade { position: absolute; left: 0; right: 0; height: 22vh; pointer-events: none; z-index: 3; } .scrolly-fade-top { top: 0; background: linear-gradient(180deg, #000, transparent); } .scrolly-fade-bot { bottom: 0; background: linear-gradient(0deg, #000, transparent); } /* Full-panel blackout driven by scroll progress: emerges from black at the start and dissolves to black at the end for a seamless section hand-off. */ .scrolly-blackout { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 3; pointer-events: none; will-change: opacity; } .scrolly-caps { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .scrolly-cap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + var(--ty, 0px))); width: min(90vw, 880px); text-align: center; opacity: 0; will-change: opacity, transform; } /* Captions docked to one side, leaving the particle field breathing room */ .scrolly--side .scrolly-cap { left: clamp(24px, 7vw, 110px); top: 50%; transform: translate(0, calc(-50% + var(--ty, 0px))); width: min(48vw, 540px); text-align: left; } .scrolly--side .scrolly-grain { background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 42%, transparent 70%), radial-gradient(120% 90% at 50% 55%, transparent 45%, rgba(0,0,0,0.5) 100%); } .scrolly-cap h2 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; font-size: clamp(28px, 4.4vw, 56px); color: #f5f5f7; text-wrap: balance; text-shadow: 0 2px 40px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.5); } .scrolly-cap .accent-word { background-image: linear-gradient(135deg, #CDE6FF 0%, #5DB4FF 48%, #1E7BE0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } body.no-anim .scrolly-track { height: auto; } body.no-anim .scrolly-sticky { position: relative; } body.no-anim .scrolly-cap { position: relative; opacity: 1 !important; transform: none !important; left: auto; top: auto; padding: 8vh 24px; } /* =========================================================== RESPONSIVE =========================================================== */ @media (max-width: 900px) { .nav-links, .nav-social { display: none; } .hamburger { display: flex; } .how-frame { grid-template-columns: 1fr; gap: 30px; } .how-frame:nth-child(even) .how-visual { order: 0; } .how-frames { gap: 80px; } .testi-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; gap: 20px; } .inv-grid { grid-template-columns: 1fr; max-width: 460px; } .faq-grid { grid-template-columns: 1fr; gap: 30px; } .dash-body { grid-template-columns: 1fr 1fr; } .how-head { margin-bottom: 56px; } .how { padding: 11vh 0; } } @media (max-width: 560px) { :root { --pad: 20px; } .dash-body { grid-template-columns: 1fr; } .pipe-cols { grid-template-columns: 1fr 1fr; } .hero-cta-row .btn { width: 100%; justify-content: center; } /* Hero — tighter rhythm on phones */ .hero { padding: 116px 0 0; min-height: auto; } .hero-stage { margin-top: 48px; } .hero .eyebrow { margin-bottom: 16px; } .hero-sub { margin-top: 16px; } .hero-cta-row { margin-top: 28px; } /* Sections — calmer vertical padding */ .problem { padding: 12vh 0; } .reveal-sec { padding: 12vh 0 10vh; } .number-sec, .close-sec { padding: 13vh 0; min-height: auto; } .cases, .testi, .inv, .faq { padding: 11vh 0; } /* Buttons full-width where they stand alone */ .case-cta .btn, .how-text .btn, .close-sec .btn, .number-sec .btn { width: 100%; justify-content: center; } /* Logos — smaller, smoother strip */ .logos { padding: 48px 0; } .logos-group { gap: 52px; padding-right: 52px; } .logos-track img.lg { height: 24px; } /* Plans — comfortable padding */ .plan { padding: 32px 24px; } .plan-feats li { font-size: 14px; } /* Cases — keep left accent tidy */ .case-item { padding-left: 20px; padding-top: 30px; padding-bottom: 30px; } .case-item:hover { padding-left: 24px; } /* FAQ legibility */ .faq-q { padding: 22px 0; font-size: 17px; } .faq-a-inner { font-size: 15.5px; } /* Phone mockup scales down */ .phone { width: 264px; height: 540px; } /* Guarantee block wraps nicely */ .inv-guarantee { font-size: 14.5px; padding: 16px 20px; } } /* =========================================================== TOP STRIP (desktop conversion shortcut) =========================================================== */ .topstrip { display: none; } @media (min-width: 901px) { .topstrip { position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 101; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--accent); color: #fff; text-decoration: none; font-size: 13.5px; letter-spacing: -0.01em; border-bottom: 1px solid rgba(255,255,255,0.12); transition: background .25s; } .topstrip:hover { background: var(--accent-soft); } .topstrip .ts-text { opacity: .92; } .topstrip .ts-text strong { font-weight: 700; opacity: 1; } .topstrip .ts-cta { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .topstrip .ts-cta .arrow { transition: transform .25s var(--ease); } .topstrip:hover .ts-cta .arrow { transform: translateX(4px); } .topstrip .ts-pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); animation: tsPulse 2.2s infinite; } @keyframes tsPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } body.no-anim .topstrip .ts-pulse { animation: none; } } /* =========================================================== TESTIMONIAL QUOTE =========================================================== */ .testi-card { justify-content: flex-end; } .testi-meta .q { font-size: 14.5px; line-height: 1.42; font-weight: 500; color: #fff; letter-spacing: -0.01em; margin-bottom: 12px; text-wrap: pretty; text-shadow: 0 2px 14px rgba(0,0,0,0.55); } .testi-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.72)); z-index: 1; } .testi-meta { z-index: 2; } /* =========================================================== FOOTER LEGAL =========================================================== */ .footer .f-legal { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #55555c; } .footer .f-legal-link { background: none; border: 0; cursor: pointer; padding: 0; font: inherit; color: var(--text-d); opacity: .78; transition: .25s; text-decoration: underline; text-underline-offset: 3px; } .footer .f-legal-link:hover { opacity: 1; color: var(--accent-soft); } .footer .f-legal-sep { opacity: .5; } /* =========================================================== PRIVACY MODAL =========================================================== */ .privacy-modal { position: fixed; inset: 0; z-index: 200; display: none; } .privacy-modal.open { display: block; } .pm-backdrop { position: absolute; inset: 0; background: rgba(6,6,8,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: pmFade .3s var(--ease); } .pm-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(680px, calc(100vw - 40px)); max-height: min(82vh, 760px); background: var(--surface-d2); color: var(--text-d); border: 1px solid var(--hair-d); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 120px -40px rgba(0,0,0,0.8); animation: pmRise .35s var(--ease); } @keyframes pmFade { from { opacity: 0; } to { opacity: 1; } } @keyframes pmRise { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } } .pm-close { position: absolute; top: 14px; right: 16px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair-d); background: rgba(255,255,255,0.04); color: var(--text-d); font-size: 22px; line-height: 1; cursor: pointer; transition: .2s; } .pm-close:hover { background: rgba(255,255,255,0.1); } .pm-scroll { overflow-y: auto; max-height: min(82vh, 760px); padding: 40px 44px 36px; } .pm-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-soft); font-weight: 600; } .pm-title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; } .pm-updated { font-size: 13px; color: var(--muted-d); margin-top: 6px; } .pm-scroll h3 { font-size: 15.5px; font-weight: 700; margin-top: 24px; color: var(--text-d); } .pm-scroll p { font-size: 14px; line-height: 1.6; color: #c4c4ca; margin-top: 8px; } .pm-scroll p strong { color: var(--text-d); font-weight: 600; } .pm-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hair-d); font-size: 13px !important; color: var(--muted-d) !important; } @media (max-width: 560px) { .pm-scroll { padding: 36px 24px 28px; } .pm-title { font-size: 23px; } }