/* Global background: red gradient fixed across the whole page */ html { background: radial-gradient(120% 140% at 50% 0%, rgba(128, 0, 255, 0.12) 0%, rgba(10, 10, 10, 0) 55%), linear-gradient(180deg, #0d0d0d 0%, #060606 100%) !important; background-attachment: fixed !important; } body, .framer-gvib3.framer-mq0uyz { background: transparent !important; } .framer-gvib3, .framer-gvib3 > * { background: transparent !important; } /* Full-width section shells ship an opaque rgb(10,10,10) fill that blocks the fixed red gradient on , cutting it into hard bands between sections. Make the section shells transparent so the gradient flows continuously. (Content cards keep their own darker fills — only the section wrappers here.) */ .framer-gvib3 section { background: transparent !important; } .framer-gvib3 nav.framer-ujUI6, .framer-qu8arv-container { background: transparent !important; } nav.framer-ujUI6 { background-color: rgba(13, 13, 13, 0.5) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } .wa-floating-btn { background-color: #25D366 !important; } /* Cursor tracker — red dot that follows the mouse */ .cursor-dot { position: fixed; width: 20px; height: 20px; background: #8000ff; border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: width 0.15s, height 0.15s, background 0.15s; mix-blend-mode: difference; } .cursor-dot.hovering { width: 24px; height: 24px; background: #9933ff; } /* ========================================================================== PORTFOLIO CARDS — "Selected Editing Work" The Framer export nests every card inside one extra wrapper
that sat in column 1 of a 3-col grid, so all cards stacked in a single left column. Fix: collapse the wrapper with display:contents so each card becomes a real grid item, and force every card to a uniform 9:16 portrait frame. Landscape (YouTube) embeds are centered inside the frame rather than distorted. ========================================================================== */ .framer-m18xux { display: grid !important; /* Auto-responsive: ~3 cols on desktop, 2 on tablet, 1 on phone — without relying on fixed viewport breakpoints, and never overflowing narrow screens */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; column-count: auto !important; gap: 24px !important; align-items: start !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Collapse the extra Framer wrapper so cards become direct grid items */ .framer-m18xux > div { display: contents !important; } /* Each card = uniform 9:16 portrait frame */ .framer-m18xux > div > * { width: 100% !important; aspect-ratio: 9 / 16 !important; height: auto !important; margin: 0 !important; border-radius: 16px !important; overflow: hidden !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #0a0a0a !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .framer-m18xux > div > *:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 40px rgba(128, 0, 255, 0.18) !important; } /* Media (iframe/img/embed wrapper) fills width, keeps its own ratio, centered */ .framer-m18xux > div > * > * { width: 100% !important; max-height: 100% !important; flex: 0 0 auto !important; } /* Tablet: 2 columns */ @media (max-width: 1024px) { .framer-m18xux { grid-template-columns: repeat(2, 1fr) !important; } } /* Mobile: single column, let each row size to its own card so the landscape featured card doesn't sit in a 626px portrait-height row. */ @media (max-width: 640px) { .framer-m18xux { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: auto !important; height: auto !important; } } /* Mobile safety: keep long email/phone pills from overflowing the screen */ @media (max-width: 600px) { .framer-1q1vsss .framer-ogemz6 { max-width: 100% !important; flex-wrap: wrap !important; word-break: break-word !important; box-sizing: border-box !important; } .framer-1q1vsss { max-width: 100% !important; } } /* ========================================================================== CONTACT SECTION — "Book a Call" The Framer export shipped this section broken: the right-hand media box is an empty placeholder, the Email/Phone labels collapsed onto their values, the "Follow Me On" label was squeezed into a 51px box (wrapped to 3 lines) and the social icons stacked vertically. Rebuild it as a clean left-aligned block. ========================================================================== */ .framer-1s1nl7r, .framer-1s1nl7r .framer-1gqrt5x, .framer-1s1nl7r .framer-1oxw26l { background: transparent !important; text-align: center !important; } /* Stack the outer wrapper and hide the empty media void on the right */ .framer-1s1nl7r .framer-1gqrt5x { flex-direction: column !important; align-items: center !important; gap: 8px !important; } .framer-1s1nl7r .framer-i73j2h { display: none !important; } .framer-1s1nl7r .framer-1oxw26l { width: 100% !important; max-width: 100% !important; } /* Contact heading + content centered */ .framer-1s1nl7r .framer-mk01nk { align-items: center !important; text-align: center !important; } .framer-1s1nl7r .framer-1oxw26l { align-items: center !important; } .framer-1s1nl7r .framer-b5zzyj, .framer-1s1nl7r .framer-b5zzyj h2 { text-align: center !important; --framer-text-alignment: center !important; } /* Description centered */ .framer-1s1nl7r .framer-1canf3n { max-width: 620px !important; margin: 16px auto 0 auto !important; text-align: center !important; } .framer-1s1nl7r .framer-1canf3n p { text-align: center !important; } /* Info block: labelled fields + socials, centered */ .framer-1s1nl7r .framer-1q1vsss { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 28px !important; width: 100% !important; height: auto !important; margin-top: 36px !important; } /* Each field block: label stacked above the value */ .framer-1q1vsss .framer-16qrgc, .framer-1q1vsss .framer-1f5pkj2 { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: center !important; width: auto !important; height: auto !important; } .framer-1q1vsss .framer-mnb0lz, .framer-1q1vsss .framer-1fp8xz9 { width: auto !important; height: auto !important; position: static !important; } /* Email / phone value as a subtle pill */ .framer-1q1vsss .framer-ogemz6 { display: inline-flex !important; align-items: center !important; gap: 10px !important; width: auto !important; height: auto !important; padding: 12px 18px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 10px !important; text-decoration: none !important; position: static !important; transition: all 0.25s ease !important; } .framer-1q1vsss .framer-ogemz6:hover { border-color: rgba(128, 0, 255, 0.5) !important; background: rgba(128, 0, 255, 0.08) !important; } /* Follow Me On: label on one line, icons in a row */ .framer-1q1vsss .framer-1vitiol { display: flex !important; flex-direction: column !important; gap: 14px !important; width: auto !important; height: auto !important; align-items: flex-start !important; } .framer-1q1vsss .framer-12gbk8d { width: auto !important; height: auto !important; } .framer-1q1vsss .framer-12gbk8d .framer-text { white-space: nowrap !important; width: auto !important; } .framer-1q1vsss .framer-6ysf0r { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; width: auto !important; height: auto !important; } /* Email / phone text white */ .framer-1q1vsss .framer-ogemz6, .framer-1q1vsss .framer-ogemz6 * { color: #ffffff !important; fill: #ffffff !important; } /* Remove the "Follow Me On" block from the Contact section entirely */ .framer-1q1vsss .framer-1vitiol { display: none !important; } /* Footer socials + nav row: hide entirely (already shown in Contact / header) */ footer .framer-ohx6u0-container, footer .framer-ec9yvd, footer .fito-social-row, footer .framer-z1lnv9 { display: none !important; } /* Trim vertical padding since we removed the nav row and socials */ footer.framer-axgd5s { padding-top: 40px !important; padding-bottom: 24px !important; } /* Portfolio cards are vertical YouTube Shorts (click plays inline) */ .framer-m18xux > div > .pf-card, .framer-m18xux > div > * { background: #000 !important; } .framer-m18xux > div > .pf-card { display: block !important; text-decoration: none !important; cursor: pointer !important; position: relative !important; } .framer-m18xux > div > .pf-card img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; border-radius: 16px !important; display: block !important; } .framer-m18xux > div > .pf-card iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 16px !important; } /* Real YouTube play button, not a purple circle. */ .framer-m18xux .pf-play { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 68px !important; height: 48px !important; padding: 0 !important; border: 0 !important; background: none !important; cursor: pointer !important; pointer-events: none !important; z-index: 3 !important; transition: transform 0.25s ease !important; } .framer-m18xux .pf-play .pf-yt { width: 100% !important; height: 100% !important; display: block !important; } .framer-m18xux .pf-play .pf-yt-bg { fill: #212121 !important; fill-opacity: 0.8 !important; transition: fill 0.2s ease, fill-opacity 0.2s ease !important; } .framer-m18xux > div > .pf-card:hover .pf-play { transform: translate(-50%, -50%) scale(1.06) !important; } .framer-m18xux > div > .pf-card:hover .pf-play .pf-yt-bg { fill: #ff0000 !important; fill-opacity: 1 !important; } /* Channel header overlay, mirroring an unstarted YouTube embed. */ .framer-m18xux > div > .pf-card .pf-head { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-height: none !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 12px 12px 26px !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0) 100%) !important; pointer-events: none !important; z-index: 2 !important; box-sizing: border-box !important; } .framer-m18xux > div > .pf-card .pf-avatar { width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; } .framer-m18xux > div > .pf-card .pf-meta { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; width: auto !important; overflow: hidden !important; } .framer-m18xux > div > .pf-card .pf-title, .framer-m18xux > div > .pf-card .pf-channel { display: block !important; width: auto !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.25 !important; } .framer-m18xux > div > .pf-card .pf-title { color: #fff !important; font-size: 13px !important; font-weight: 600 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; } .framer-m18xux > div > .pf-card .pf-channel { color: rgba(255, 255, 255, 0.82) !important; font-size: 11px !important; font-weight: 400 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; } .framer-m18xux > div > .pf-card .pf-thumb { width: 100% !important; height: 100% !important; object-fit: cover !important; } .framer-m18xux > div > .pf-card:hover { transform: translateY(-6px) !important; } /* Service card images — make them bigger */ .framer-5IQds .framer-12f1gwt, .framer-5IQds .framer-a7m40w, .framer-5IQds .framer-12vqwha, .framer-5IQds .framer-1d6x2tg { flex: 1.5 0 0 !important; max-width: 60% !important; min-height: 300px !important; } .framer-5IQds .framer-12f1gwt img { object-fit: cover !important; object-position: center !important; } /* Ensure text column stays same width too */ .framer-5IQds .framer-1w8bmwe, .framer-5IQds .framer-16xf2zi, .framer-5IQds .framer-uvhnut, .framer-5IQds .framer-rukvmu { flex: 1 0 0 !important; min-width: 320px !important; } /* Color Grading slider — keep images inside bounds */ .framer-5IQds .framer-1gsef12-container img { object-fit: contain !important; width: 100% !important; height: 100% !important; } /* ========================================================================== WORK FILTER TABS — active highlight The Framer export baked the "active" look into the *All* tab's own instance styles, so the highlight never moved when another tab was clicked. The JS does correctly flip data-framer-name="Active" on the clicked tab, so drive the highlight off that attribute instead (on-brand red). ========================================================================== */ .framer-103g85l [data-framer-name="Default"] .framer-text { color: #888888 !important; } .framer-103g85l [data-framer-name="Active"] .framer-text { color: #9933ff !important; } /* ========================================================================== RETENTION GRAPH — replaces the old "Retention Based Edit" placeholder image with a custom scroll-driven rising line chart (animated in JS). ========================================================================== */ .retention-graph { width: 100%; aspect-ratio: 467 / 604; position: relative; border-radius: 24px; overflow: hidden; background: radial-gradient(120% 90% at 30% 0%, rgba(128, 0, 255, 0.10), rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, rgba(20, 8, 8, 0.55), rgba(6, 6, 6, 0.55)); } .retention-graph .rg-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .retention-graph text { font-family: inherit; } .retention-graph .rg-kicker { fill: #b366ff; font-size: 15px; font-weight: 700; letter-spacing: 2.5px; } .retention-graph .rg-pct { fill: #ffffff; font-size: 64px; font-weight: 800; letter-spacing: -1px; } .retention-graph .rg-sub { fill: rgba(255, 255, 255, 0.55); font-size: 12px; font-weight: 500; } .retention-graph .rg-dot { filter: drop-shadow(0 0 6px rgba(128, 0, 255, 0.9)); transition: opacity 0.2s ease; } /* Hide pricing section entirely */ section#pricing { display: none !important; } /* Floating WhatsApp button — nudge a little lower */ .wa-floating-btn { bottom: 52px !important; } /* Feature tiles (Native Style / Fast Turnaround): center the injected icon */ .framer-8x6134, .framer-3559ih { display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 12px !important; } .framer-8x6134 svg, .framer-3559ih svg { width: 26px !important; height: 26px !important; display: block !important; } /* Hide slideshow controls */ [aria-label="Slideshow pagination controls"], [aria-label="Previous"], [aria-label="Next"] { display: none !important; } /* NOTE: native `scroll-behavior: smooth` is broken on this Framer export (transformed ancestors break it), so smooth scrolling is handled in JS. */ /* Remove the logo (icon + wordmark) from the header and footer */ .framer-1b0m7h5-container, /* header logo */ .framer-1gcn1uh-container { /* footer logo */ display: none !important; } /* Footer — even purple wash across the top, no centered hotspot */ footer.framer-axgd5s { position: relative !important; background: linear-gradient(180deg, rgba(128, 0, 255, 0.14) 0%, rgba(10, 10, 10, 0) 60%), linear-gradient(180deg, #0d0d0d 0%, #060606 100%) !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; overflow: hidden !important; } footer.framer-axgd5s::before { content: "" !important; position: absolute !important; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(128, 0, 255, 0.6), transparent) !important; filter: blur(0.3px); } footer.framer-axgd5s::after { display: none !important; } /* Mobile: one full-width video card at a time (like the reference) */ @media (max-width: 700px) { .framer-m18xux { grid-template-columns: 1fr !important; } } /* Mobile only: hero layout — image on top, text column below */ @media (max-width: 809.98px) { .framer-5IQds .framer-1a6yjc2 { padding-bottom: 0px !important; } .framer-5IQds .framer-zfc0mn { flex-direction: column !important; align-items: center !important; } .framer-5IQds .framer-1ougko3 { order: 0 !important; } .framer-5IQds .framer-yuzlh6 { order: 1 !important; align-items: center !important; } .framer-5IQds .framer-14xk4kr { gap: 10px !important; align-items: center !important; width: 100% !important; } .framer-5IQds .framer-10n4a2-container { order: 0 !important; } .framer-5IQds .framer-9bevb6 { display: contents !important; } .framer-5IQds .framer-17s3yi0-container { order: 1 !important; } .framer-5IQds .framer-1strct8-container { order: 2 !important; } .framer-5IQds .framer-zgjeti { display: none !important; } .framer-5IQds .framer-kzphr9 { order: 3 !important; } /* Footer: center copyright, hide Built By, make Hanzlah glow red on hover */ .framer-1wathli { justify-content: center !important; align-items: center !important; } .framer-li5uxv { text-align: center !important; } .framer-1jz743r { display: none !important; } .framer-1u96wp1 .framer-dm0qcw-container:hover p { color: #8000ff !important; text-shadow: 0 0 12px rgba(128, 0, 255, 0.9), 0 0 30px rgba(128, 0, 255, 0.5) !important; } } /* Mobile dropdown menu styles */ .mobile-menu { background: rgba(10, 10, 10, 0.98); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0 0 24px 24px; border-top: none; } .mobile-menu-link:hover { background: rgba(255, 255, 255, 0.06); } .mobile-menu-cta:hover { opacity: 0.9; } /* ========================================================================== Fitoframe — content rebuild (see content.js / app.js) ========================================================================== */ /* The socials block was hidden by the old build. The live site does show "Mis redes sociales" on contact, so bring it back (app.js rebuilds the row with Fito's real Instagram / TikTok / X / LinkedIn links). */ .framer-1q1vsss .framer-1vitiol { display: flex !important; flex-direction: column !important; gap: 14px !important; } .fito-social-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 12px !important; width: auto !important; height: auto !important; } .fito-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .fito-social svg { width: 18px; height: 18px; display: block; } .fito-social:hover { background: rgba(128, 0, 255, 0.22); border-color: #8000ff; transform: translateY(-2px); } /* ---- Language switcher (ES | EN) ---------------------------------------- */ .fito-lang { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); flex: none; z-index: 20; } .fito-lang button { appearance: none; border: 0; margin: 0; padding: 5px 11px; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.62); font: inherit; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .fito-lang button:hover { color: #fff; } .fito-lang button.is-active { background: #8000ff; color: #fff; } .fito-lang-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.18); } /* Floats at the top-right of the viewport, deliberately clear of the header pill — inside the nav it collided with the "Contact me" CTA. app.js toggles this on/off depending on which nav is actually visible. */ .fito-lang.is-floating { position: fixed; top: 20px; right: 40px; z-index: 60; background: rgba(13, 13, 13, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } @media (max-width: 810px) { .fito-lang button { padding: 5px 9px; font-size: 11px; } } /* "Worked with Gatorade, KFC..." line injected under the hero bio */ .fito-brands { margin-top: 14px !important; color: rgba(235, 235, 235, 0.72) !important; font-size: 15px !important; line-height: 1.6 !important; max-width: 620px; } .fito-brands:empty { display: none; } /* ========================================================================== SKILLS — animated icon list on a timeline (replaces the template's four giant alternating image/text blocks; see initSkills() in app.js) ========================================================================== */ .fito-skills-host { width: 100% !important; height: auto !important; display: block !important; } /* Two columns: timeline left, photo collage right (mirrors the live site). */ .fito-skills-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 48px; align-items: center; width: 100%; } /* ---- Photo collage ---------------------------------------------------- */ .fito-collage { position: relative; width: 100%; aspect-ratio: 6 / 5; min-height: 380px; } .fito-collage-block, .fito-collage-a, .fito-collage-b { position: absolute; border-radius: 12px; opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .fito-skills-grid.is-in .fito-collage-block, .fito-skills-grid.is-in .fito-collage-a, .fito-skills-grid.is-in .fito-collage-b { opacity: 1; transform: none; } .fito-skills-grid.is-in .fito-collage-block { transition-delay: 120ms; } .fito-skills-grid.is-in .fito-collage-a { transition-delay: 220ms; } .fito-skills-grid.is-in .fito-collage-b { transition-delay: 320ms; } /* Purple slab peeking out from behind the photo */ .fito-collage-block { left: 4%; top: 12%; width: 62%; height: 76%; background: linear-gradient(150deg, #8000ff 0%, #4b0099 100%); z-index: 0; } /* On-location shot — main photo, offset over the purple slab */ .fito-collage-b { right: 2%; top: 6%; width: 74%; height: 88%; object-fit: cover; z-index: 2; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } /* Slow drift so the collage isn't dead on the page */ .fito-skills-grid.is-in .fito-collage-a { animation: fito-float 7s ease-in-out 1.2s infinite; } .fito-skills-grid.is-in .fito-collage-b { animation: fito-float 9s ease-in-out 1.6s infinite reverse; } @keyframes fito-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } @media (prefers-reduced-motion: reduce) { .fito-skills-grid.is-in .fito-collage-a, .fito-skills-grid.is-in .fito-collage-b { animation: none; } } @media (max-width: 900px) { .fito-skills-grid { grid-template-columns: 1fr; gap: 34px; } .fito-collage { min-height: 300px; aspect-ratio: 5 / 4; } } .fito-skills { position: relative; padding: 8px 0 8px 0; width: 100%; } /* The vertical rail. Draws itself downward when the list scrolls in. */ .fito-skills-line { position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, #8000ff 0%, rgba(128, 0, 255, 0.15) 100%); transform: scaleY(0); transform-origin: top; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .fito-skills.is-in .fito-skills-line { transform: scaleY(1); } .fito-skills-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; } .fito-skill { position: relative; display: flex; align-items: flex-start; gap: 20px; padding-left: 4px; opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .fito-skill.is-in { opacity: 1; transform: none; } /* Little tick joining each row to the rail */ .fito-skill-tick { position: absolute; left: -8px; top: 26px; width: 12px; height: 2px; background: rgba(128, 0, 255, 0.55); } .fito-skill-icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, #9d4dff 0%, #6a00d6 100%); box-shadow: 0 6px 18px rgba(128, 0, 255, 0.28); position: relative; z-index: 1; transition: transform 0.3s ease, box-shadow 0.3s ease; } .fito-skill-icon svg { width: 24px; height: 24px; display: block; } .fito-skill:hover .fito-skill-icon { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(128, 0, 255, 0.45); } .fito-skill-body { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; } .fito-skill-title { margin: 0; color: #fff; font-size: 19px; font-weight: 600; line-height: 1.3; } .fito-skill-desc { margin: 0; color: rgba(235, 235, 235, 0.68); font-size: 15px; line-height: 1.6; max-width: 560px; } @media (max-width: 600px) { .fito-skills-line { left: 22px; } .fito-skill { gap: 14px; } .fito-skill-icon { width: 44px; height: 44px; border-radius: 12px; } .fito-skill-icon svg { width: 20px; height: 20px; } .fito-skill-title { font-size: 17px; } .fito-skill-desc { font-size: 14px; } } /* ========================================================================== COLOUR GRADING — before/after wipe (see initSkills / initGradeSlider) One source image, shown twice: left half flat, right half purple-graded in CSS. Swap assets/grade-sample.jpg for one of Fito's own frames any time. ========================================================================== */ .fito-grade { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 44px; align-items: center; margin-top: 64px; padding: 32px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; background: rgba(13, 13, 13, 0.45); } .fito-grade-title { margin: 0 0 12px; color: #fff; font-size: 26px; font-weight: 600; line-height: 1.25; } .fito-grade-desc { margin: 0; color: rgba(235, 235, 235, 0.68); font-size: 15px; line-height: 1.65; max-width: 520px; } .fito-grade-slider { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: none; outline: none; } .fito-grade-slider:focus-visible { box-shadow: 0 0 0 3px rgba(128, 0, 255, 0.6); } .fito-grade-layer { position: absolute; inset: 0; } .fito-grade-layer img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* Source image is already graded — show it as-is on the "after" side */ .fito-grade-after img { filter: none; } .fito-grade-after::after { display: none; } /* Ungraded: flat, washed out — clipped to the left of the handle */ .fito-grade-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); } .fito-grade-before img { filter: saturate(0.38) contrast(0.9) brightness(1.1); } .fito-grade-label { position: absolute; top: 12px; padding: 5px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; pointer-events: none; z-index: 3; } .fito-grade-label.is-before { left: 12px; } .fito-grade-label.is-after { right: 12px; } .fito-grade-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 4; } .fito-grade-handle { position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 5; } .fito-grade-handle svg { width: 18px; height: 18px; } @media (max-width: 900px) { .fito-grade { grid-template-columns: 1fr; gap: 26px; padding: 22px; margin-top: 44px; } .fito-grade-title { font-size: 22px; } } /* ========================================================================== SERVICE CARDS — alternating text / image, above the grading card ========================================================================== */ .fito-svc { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 44px; align-items: center; margin-top: 28px; padding: 32px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; background: rgba(13, 13, 13, 0.45); } .fito-svc:first-of-type { margin-top: 64px; } /* Flip every other card so the page doesn't march down one edge */ .fito-svc:nth-of-type(even) .fito-svc-text { order: 2; } .fito-svc:nth-of-type(even) .fito-svc-media { order: 1; } .fito-svc-media { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; } .fito-svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .fito-svc:hover .fito-svc-media img { transform: scale(1.04); } /* Purple wash so the placeholders sit in the theme rather than fighting it */ .fito-svc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(128, 0, 255, 0.30) 0%, rgba(0, 170, 255, 0.10) 100%); mix-blend-mode: soft-light; pointer-events: none; } @media (max-width: 900px) { .fito-svc { grid-template-columns: 1fr; gap: 24px; padding: 22px; } .fito-svc:first-of-type { margin-top: 44px; } /* Keep image-above-text consistently once stacked */ .fito-svc:nth-of-type(even) .fito-svc-text { order: 2; } .fito-svc:nth-of-type(even) .fito-svc-media { order: 1; } .fito-svc-text { order: 2; } .fito-svc-media { order: 1; } } /* ========================================================================== SERVICE CARDS — sticky stack Each card pins as it reaches the top and the next one slides over it, offset by --i so the stacked edges stay visible. Needs an opaque card background, otherwise the card underneath shows through and the stack just looks like a rendering bug. ========================================================================== */ .fito-svc, .fito-grade { position: sticky; top: calc(96px + var(--i, 0) * 16px); background: rgb(17, 16, 20) !important; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55); } /* Sticky needs no *scrolling* ancestor. The Framer wrappers use `overflow: clip`, which does not create a scroll container, so sticky already works — only the immediate host needs unclipping. Do NOT blanket this with a `*` selector: it strips overflow:hidden off the grading slider and the card media, and they burst out of their cards. */ .fito-skills-host, .framer-p2v9dn { overflow: visible !important; } /* Scroll distance between pins — without this they all pin at once. */ .fito-svc { margin-top: 90px; } .fito-svc:first-of-type { margin-top: 72px; } .fito-grade { margin-top: 90px; margin-bottom: 40px; } @media (max-width: 900px) { .fito-svc, .fito-grade { position: static; box-shadow: none; margin-top: 26px; } .fito-svc:first-of-type { margin-top: 40px; } } @media (prefers-reduced-motion: reduce) { .fito-svc, .fito-grade { position: static; } } /* ========================================================================== FEATURED LANDSCAPE VIDEO — full-row 16:9 card below the Shorts grid The base rule forces every grid child to a 9:16 short frame; override that for the landscape card and make it span the full row. ========================================================================== */ .framer-m18xux > div > .pf-featured { grid-column: 1 / -1 !important; aspect-ratio: 16 / 9 !important; width: 100% !important; max-width: 100% !important; } .framer-m18xux > div > .pf-featured .pf-thumb, .framer-m18xux > div > .pf-featured iframe { width: 100% !important; height: 100% !important; object-fit: cover !important; } .framer-m18xux > div > .pf-featured iframe { position: absolute !important; inset: 0 !important; border: 0 !important; border-radius: inherit !important; } /* ========================================================================== SECTION KICKER PILLS — hide the small repeated badge above each heading (e.g. "Videos" pill above the "Videos" heading, "Skills" pill, etc.) They all share the .framer-UBLMm component class (rounded pill with the preset-sudjg0 text inside). ========================================================================== */ .framer-UBLMm.framer-11cxewz { display: none !important; } /* Hide the subtitle line under the Skills heading ("What I work with") */ .framer-5uil9y { display: none !important; } /* Hide the subtitle line under the Videos heading (both breakpoint variants) */ .framer-1j3nj6a, .framer-1c1prv0 { display: none !important; } /* Section headings (h2) — match "Video Editor" hero style: Trueno Ultra Black */ .framer-styles-preset-qqeaut, [data-styles-preset="kScghea8I"] { font-family: "Trueno", "Inter", sans-serif !important; font-weight: 900 !important; letter-spacing: 0.005em !important; } /* ========================================================================== TYPOGRAPHY — Trueno (self-hosted Gotham-alike) The client asked for a Gotham system. Gotham is paid; the supplied pack was "gotham-similar-fonts" and Trueno is the closest match — it has the exact weights named: Ultra Black (Gotham Ultra) and Regular (Gotham Book). Weight map: Regular 400 (Book) · SemiBold 600 · Bold 700 · Black 800 · UltraBlack 900. ========================================================================== */ @font-face { font-family: "Trueno"; src: url("./assets/fonts/TruenoRg.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Trueno"; src: url("./assets/fonts/TruenoSBd.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Trueno"; src: url("./assets/fonts/TruenoBd.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Trueno"; src: url("./assets/fonts/TruenoBlk.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Trueno"; src: url("./assets/fonts/TruenoUltBlk.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } /* Whole site → Trueno. Family only (each element keeps its own weight), so the existing hierarchy survives; normal body text lands on Trueno Regular (Book). */ body, .framer-gvib3, .framer-gvib3 *, .fito-skills-host *, .fito-lang, .fito-lang * { font-family: "Trueno", "Inter", sans-serif !important; } /* Name "Rodolfo Delgado" — asked for Gotham Narrow. Trueno has no narrow cut, so this is Bold with tightened tracking as the closest same-family stand-in. Say the word and I'll load a genuinely condensed family for it instead. */ [data-i18n="hero.name"], [data-i18n="hero.name"] * { font-family: "Trueno", "Inter", sans-serif !important; font-weight: 700 !important; letter-spacing: -0.03em !important; } /* Role "Editor de video" — Gotham Ultra/Black → Trueno Ultra Black (900). It is now the big hero headline (.fito-hero-title, the repurposed

). */ [data-i18n="hero.role"], [data-i18n="hero.role"] * { font-family: "Trueno", "Inter", sans-serif !important; font-weight: 900 !important; letter-spacing: 0.005em !important; } /* Name "Rodolfo Delgado" — now a smaller line beneath the title. */ .fito-hero-name { font-family: "Trueno", "Inter", sans-serif !important; font-weight: 600 !important; font-size: clamp(16px, 2.2vw, 24px) !important; letter-spacing: 0.02em !important; line-height: 1.2 !important; color: rgba(235, 235, 235, 0.82) !important; margin-top: 12px !important; } [data-i18n="extras.sub"], [data-i18n="footer.tagline"], [data-i18n="faq.sub"] { display: none !important; } section#process { display: none !important; } @media (max-width: 1199px) { .framer-kzphr9 > .hidden-2bk7wc.hidden-ryxffi { display: block !important; } } @media (max-width: 809px) { section.framer-evym3x { padding-top: 40px !important; padding-bottom: 8px !important; margin-bottom: 0 !important; } section.framer-1l9qw0n { padding-top: 8px !important; margin-top: 0 !important; } section.framer-1l9qw0n#why-me { padding-top: 8px !important; } .fito-hero-top { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; text-align: center !important; margin-bottom: 12px !important; } [data-i18n="hero.bio"], .fito-brands { text-align: center !important; } .fito-brands { margin-bottom: 20px !important; } } .fito-software { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 28px !important; padding: 20px 0 40px !important; } .fito-software-sub { color: rgba(255, 255, 255, 0.6) !important; font-size: 18px !important; font-weight: 600 !important; text-align: center !important; letter-spacing: 0.01em !important; } .fito-software-logos { display: flex !important; align-items: stretch !important; justify-content: center !important; gap: 20px !important; flex-wrap: wrap !important; width: 100% !important; } .fito-software-logo { display: flex !important; align-items: center !important; gap: 16px !important; padding: 18px 26px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease !important; /* Lock both cards to the same visible width so DaVinci's longer label can't stretch its card wider than Higgsfield's. */ width: 280px !important; box-sizing: border-box !important; justify-content: center !important; } .fito-software-logo:hover { transform: translateY(-4px) !important; border-color: rgba(128, 0, 255, 0.4) !important; background: rgba(128, 0, 255, 0.08) !important; } .fito-software-logo img { height: 72px !important; width: 72px !important; border-radius: 16px !important; object-fit: contain !important; flex-shrink: 0 !important; } /* Higgsfield's glyph fills its own square edge-to-edge while DaVinci's glyph has internal padding, so at the same 72px box they read as different sizes. Scale Higgsfield down a hair to visually match. */ .fito-software-logo img[alt*="Higgsfield" i] { height: 60px !important; width: 60px !important; } .fito-software-logo span { color: #fff !important; font-size: 20px !important; font-weight: 700 !important; white-space: nowrap !important; } @media (max-width: 640px) { .fito-software { width: 100% !important; padding: 20px 0 !important; } .fito-software-logos { flex-direction: column !important; gap: 14px !important; width: 100% !important; } .fito-software-logo { width: 100% !important; box-sizing: border-box !important; padding: 20px 22px !important; border-radius: 22px !important; } } /* Spanish rules: don't force-capitalize every word — keep lowercase where content.js has it (e.g. "Distintos formatos", "+4 años audiovisuales", "Retención de audiencia", "Preguntas comunes"). Framer's h3/h2/h4 preset applies text-transform: capitalize globally. */ [data-i18n="extras.1.t"], [data-i18n="extras.2.t"], [data-i18n="extras.3.t"], [data-i18n="faq.title"] { text-transform: none !important; }