/* ============================================================ THE NOISY BRAND — Design System Fusión: dark luxury editorial + minimal bold + futuristic glass Base blanco/negro, acentos dorado + plateado. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500&family=Inter:wght@300;400;500;600;700;800&display=swap'); :root{ /* ---- Color: base ---- */ --c-black: #0a0a0a; --c-black-soft: #131211; --c-black-elev: #1a1917; --c-white: #faf9f6; --c-white-pure: #ffffff; --c-ink: #0c0a09; --c-ink-70: rgba(12,10,9,.7); --c-ink-50: rgba(12,10,9,.5); --c-paper-line: rgba(12,10,9,.12); /* ---- Color: metals ---- */ --c-gold-1: #8a6d1a; --c-gold-2: #c9a227; --c-gold-3: #e8c766; --c-gold-4: #f8ecc0; --grad-gold: linear-gradient(135deg,#8a6d1a 0%,#c9a227 35%,#f3d98a 60%,#8a6d1a 100%); --grad-gold-text: linear-gradient(100deg,#8a6d1a 10%,#e8c766 40%,#fff3cf 55%,#c9a227 80%); --grad-silver-text: linear-gradient(100deg,#6b6b6b 10%,#c8c8c8 40%,#ffffff 55%,#8f8f8f 80%); --c-silver-1: #8f8f8f; --c-silver-2: #c8c8c8; --c-silver-3: #eaeaea; --grad-silver: linear-gradient(135deg,#8f8f8f 0%,#cfcfcf 35%,#ffffff 60%,#a8a8a8 100%); --grad-metal-text: linear-gradient(100deg,#8a6d1a 0%,#eaeaea 22%,#f8ecc0 42%,#c8c8c8 60%,#e8c766 78%,#8f8f8f 100%); /* ---- Surfaces on dark ---- */ --glass-fill: rgba(250,249,246,.06); --glass-fill-strong: rgba(250,249,246,.1); --glass-border: rgba(250,249,246,.14); --glass-fill-light: rgba(10,10,10,.05); --glass-border-light: rgba(10,10,10,.1); /* ---- Type ---- */ --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --fs-display: clamp(2.9rem, 4vw + 1.6rem, 6.75rem); --fs-h1: clamp(2.1rem, 2.4vw + 1.3rem, 3.6rem); --fs-h2: clamp(1.7rem, 1.6vw + 1.1rem, 2.6rem); --fs-h3: clamp(1.25rem, .8vw + 1rem, 1.65rem); --fs-lead: clamp(1.1rem, .5vw + 1rem, 1.4rem); --fs-body: 1rem; --fs-small: .875rem; --fs-micro: .75rem; /* ---- Space (8pt rhythm, spacious for marketing) ---- */ --sp-3xs: .25rem; --sp-2xs: .5rem; --sp-xs: .75rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2rem; --sp-xl: 3rem; --sp-2xl: 4.5rem; --sp-3xl: 6.5rem; --sp-4xl: 9rem; /* ---- Misc ---- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px; --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --dur-fast: .2s; --dur-med: .4s; --dur-slow: .8s; --container-w: 1320px; --z-cursor: 9999; --z-nav: 1000; --z-overlay: 900; --z-base: 1; } /* ============ Reset ============ */ *, *::before, *::after{ box-sizing: border-box; } ul, ol{ list-style: none; padding: 0; } /* Not scroll-behavior:smooth on — Chrome applies it to large wheel/trackpad deltas too (not just anchor/JS navigation), which measured multi-second lag between input and the page actually moving during real scrolling. The one place smooth scrolling is wanted (the footer's back-to-top button) already requests it explicitly via scrollTo({behavior:"smooth"}) in JS. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0; } img,picture,video,canvas,svg{ display:block; max-width:100%; } input,button,textarea,select{ font: inherit; color: inherit; } a{ color: inherit; text-decoration:none; } button{ background:none; border:none; padding:0; } html,body{ height:100%; } body{ background: var(--c-white); color: var(--c-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-dark{ background: var(--c-black); color: var(--c-white); } h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; } .eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-family: var(--font-body); font-weight:600; font-size: var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; color: var(--c-gold-2); } .eyebrow::before{ content:''; width: 28px; height:1px; background: currentColor; opacity:.8; } .lead{ font-size: var(--fs-lead); line-height:1.55; color: var(--c-ink-70); font-weight:400; } .is-dark .lead{ color: rgba(250,249,246,.72); } /* ============ Layout ============ */ .container{ width:100%; max-width: var(--container-w); margin-inline:auto; padding-inline: var(--sp-lg); } @media (max-width: 640px){ .container{ padding-inline: var(--sp-md); } } .section{ padding-block: var(--sp-3xl); position:relative; } @media (max-width: 768px){ .section{ padding-block: var(--sp-2xl); } } .section-head{ max-width: 720px; margin-bottom: var(--sp-2xl); } .section-head.center{ margin-inline:auto; text-align:center; } .section-head h2{ margin-top: var(--sp-sm); } h2.services-head-title{ font-size:var(--fs-display); line-height:1.18; padding-bottom:.15em; } .section-head:has(> h2.services-head-title){ max-width:min(1400px, 92vw); } /* Two candidate break points so mobile can wrap to exactly 3 lines without touching desktop's existing 2-line break. Desktop shows the break after "que" (unchanged); mobile swaps to a break after "profesionales" instead and lets "que impulsan tu negocio." wrap naturally into 2 more lines. */ .services-head-title .title-break-mobile{ display:none; } @media (max-width:700px){ .services-head-title .title-break-mobile{ display:inline; } .services-head-title .title-break-desktop{ display:none; } } .text-gradient-metal{ font-size:var(--fs-h1); background:var(--grad-metal-text); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .text-gradient-silver{ background:var(--grad-silver-text); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .grain{ position:relative; } .grain::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.035; mix-blend-mode: overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============ Buttons ============ */ .btn{ position: relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding: 1.05em 2em; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight:600; font-size: var(--fs-small); letter-spacing:.03em; text-transform:uppercase; cursor: pointer; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); will-change: transform; } .btn svg{ width:16px; height:16px; } .btn-gold{ background: linear-gradient(100deg,#8b5cf6 0%,#3b82f6 50%,#ec4899 100%); background-size:200% 200%; background-position: 0% 50%; color: #fff; box-shadow: 0 8px 30px -8px rgba(139,92,246,.55); } .btn-gold:hover{ background-position:100% 50%; transform: translateY(-2px); box-shadow: 0 14px 36px -10px rgba(139,92,246,.7); } .btn-outline{ border: 1px solid var(--glass-border); color: inherit; background: var(--glass-fill); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .is-dark .btn-outline:hover, .btn-outline:hover{ border-color: var(--c-gold-2); color: var(--c-gold-2); transform: translateY(-2px); } .btn-ghost{ color: inherit; font-weight:600; font-size:var(--fs-small); letter-spacing:.03em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5em; } .btn-ghost .line{ width:24px; height:1px; background:currentColor; transition: width var(--dur-fast) var(--ease-out); } .btn-ghost:hover .line{ width:40px; } .btn-wa{ background: var(--glass-fill-strong); color:#fff; border:1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 4px 24px -8px rgba(0,0,0,.4); } .btn-wa:hover{ transform: translateY(-2px); border-color: var(--c-gold-2); background: rgba(250,249,246,.16); box-shadow: 0 8px 28px -8px rgba(201,162,39,.35); } .section-light .btn-wa{ background: var(--c-ink); color:#fff; border-color: var(--c-ink); box-shadow: 0 4px 24px -8px rgba(0,0,0,.25); } .section-light .btn-wa:hover{ background: var(--c-gold-2); border-color: var(--c-gold-2); color:#1a1400; } /* Nav CTA matches the footer's primary WhatsApp pill */ .nav-cta .btn-wa{ background: linear-gradient(100deg,#8b5cf6 0%,#3b82f6 50%,#ec4899 100%); background-size:200% 200%; background-position:0% 50%; border-color: transparent; color:#fff; box-shadow: 0 10px 34px -10px rgba(139,92,246,.55), inset 0 1px 1px rgba(255,255,255,.15); } .nav-cta .btn-wa:hover{ background-position:100% 50%; border-color:transparent; color:#fff; transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(139,92,246,.7), inset 0 1px 1px rgba(255,255,255,.2); } /* ============ Custom cursor ============ */ .cursor-dot, .cursor-ring{ position: fixed; top:0; left:0; pointer-events:none; z-index: var(--z-cursor); transform: translate(-50%,-50%); border-radius:50%; mix-blend-mode: difference; } .cursor-dot{ width:8px; height:8px; background:#fff; } .cursor-ring{ width:38px; height:38px; border:1px solid rgba(255,255,255,.9); transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .cursor-ring.is-hover{ width:64px; height:64px; } .cursor-ring.is-text{ width:90px; height:90px; background:var(--c-gold-2); mix-blend-mode:normal; opacity:.95; border-color:transparent; } html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor input, html.has-custom-cursor textarea{ cursor:none; } @media (pointer: coarse){ .cursor-dot,.cursor-ring{ display:none !important; } } /* ============ Nav ============ */ .nav{ position: fixed; top:0; left:0; right:0; z-index: var(--z-nav); padding: var(--sp-md) 0; transition: padding var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); border-bottom: 1px solid transparent; } .nav.is-scrolled{ padding: var(--sp-xs) 0; background: rgba(6,6,6,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 12px 30px -14px rgba(0,0,0,.6); color: #fff; } .nav.is-scrolled .nav-logo, .nav.is-scrolled .nav-links a{ color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.22); } .nav.is-scrolled .nav-links a::after{ box-shadow: 0 0 10px rgba(139,92,246,.8); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-lg); } .nav-logo{ font-family: var(--font-display); font-weight:800; font-size: 1.3rem; letter-spacing:-.01em; display:flex; flex-direction:column; line-height:1; } .nav-logo .t-the{ font-weight:500; font-size:.5em; letter-spacing:.3em; text-transform:uppercase; opacity:.75; margin-bottom:.35em; } .nav-logo .t-main{ display:flex; align-items:baseline; gap:.12em; } .nav-logo .t-mx{ font-size:.32em; font-family: var(--font-body); font-weight:700; letter-spacing:.08em; opacity:.6; align-self:flex-start; margin-top:.3em;} .nav-links{ display:flex; align-items:center; gap: var(--sp-xl); } .nav-links a{ position:relative; font-size:var(--fs-small); font-weight:600; letter-spacing:.04em; text-transform:uppercase; opacity:.85; } .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: linear-gradient(100deg,#8b5cf6 0%,#3b82f6 50%,#ec4899 100%); transform:scaleX(0); transform-origin:right; transition: transform var(--dur-med) var(--ease-out); } .nav-links a:hover{ opacity:1; } .nav-links a:hover::after, .nav-links a.is-active::after{ transform:scaleX(1); transform-origin:left; } .nav-cta{ display:flex; align-items:center; gap: var(--sp-md); } .nav-burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; } .nav-burger span{ display:block; width:22px; height:1px; background:currentColor; position:relative; transition: background var(--dur-fast); } .nav-burger span::before, .nav-burger span::after{ content:''; position:absolute; left:0; width:22px; height:1px; background:currentColor; transition: transform var(--dur-med) var(--ease-out); } .nav-burger span::before{ top:-7px; } .nav-burger span::after{ top:7px; } .nav-burger.is-open span{ background:transparent; } .nav-burger.is-open span::before{ transform: translateY(7px) rotate(45deg); } .nav-burger.is-open span::after{ transform: translateY(-7px) rotate(-45deg); } /* ============ Kinetic full-screen navigation ============ */ .kinetic-nav{ position:fixed; inset:0; z-index:2000; display:none; color:var(--c-white); } .kinetic-nav[data-nav="open"]{ display:block; } .kn-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); opacity:0; cursor:pointer; } .kn-menu{ position:absolute; inset:0; overflow:hidden; } .kn-bg{ position:absolute; inset:0; z-index:0; } .kn-backdrop{ position:absolute; inset:0; background:#000; } .kn-backdrop.first{ background: var(--c-black-soft); } .kn-backdrop.second{ background:#000; } .kn-shapes{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; } .kn-shape{ position:absolute; top:50%; left:50%; width:min(70vw,640px); height:min(70vw,640px); transform:translate(-50%,-50%); opacity:0; } .kn-shape .shape-element{ opacity:0; transform-origin:center; } .kn-shape.active{ opacity:1; } .kn-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; padding: var(--sp-2xl) clamp(var(--sp-lg), 8vw, var(--sp-4xl)); } .kn-list{ display:flex; flex-direction:column; gap:.25rem; } .kn-item{ overflow:hidden; } .kn-link{ display:block; position:relative; padding-block:.5rem; font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem, 7vw, 5rem); line-height:1.15; color:var(--c-white); transform-origin:left bottom; } .kn-link:hover{ color:var(--c-gold-2); } .kn-foot{ margin-top:var(--sp-xl); font-family:var(--font-body); font-size:var(--fs-small); color:rgba(250,249,246,.55); } .kn-close{ position:absolute; top: var(--sp-md); right: var(--sp-lg); z-index:5; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); cursor:pointer; } .kn-close svg{ width:16px; height:16px; color:#fff; transition: transform var(--dur-med) var(--ease-out); } .kinetic-nav[data-nav="open"] .kn-close svg{ transform:rotate(315deg); } @media (max-width:640px){ .kn-content{ padding-inline: var(--sp-md); } .kn-link{ font-size:clamp(2rem,10vw,2.8rem); } } @media (max-width: 900px){ .nav-links{ display:none; } .nav-cta{ display:none; } .nav-burger{ display:flex; } } /* ============ Hero ============ */ .hero{ position: relative; min-height: 100vh; min-height: 100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--c-black); color:var(--c-white); } .hero-media{ position:absolute; inset:0; z-index:0; } .hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; } .hero-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 28%, rgba(10,10,10,.7) 55%, rgba(10,10,10,.96) 80%, rgba(10,10,10,1) 92%); } .hero-media::before{ content:''; position:absolute; inset:0; z-index:1; background: radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(10,10,10,.5) 100%); } .hero-content{ position:relative; z-index:3; width:100%; padding-bottom: var(--sp-2xl); } .hero-bottom{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: var(--sp-lg); } .hero-tagline{ max-width:540px; font-size:var(--fs-body); color:rgba(250,249,246,.78); } .hero-scroll{ display:flex; align-items:center; gap:.75rem; font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; opacity:.7; } .hero-scroll .sc-line{ width:1px; height:40px; background:linear-gradient(180deg, rgba(255,255,255,.9), transparent); position:relative; overflow:hidden; } .hero-scroll .sc-line::after{ content:''; position:absolute; left:0; top:-40px; width:100%; height:40px; background:var(--c-gold-2); animation: scrollDrip 2.2s var(--ease-in-out) infinite; } @keyframes scrollDrip{ 0%{ top:-40px; } 100%{ top:40px; } } @media (max-width: 640px){ .hero-tagline{ max-width:none; } .hero-bottom{ flex-direction:column; align-items:flex-start; } /* Full-bleed cover forces a 16:9 video to either crop its sides (cover) or letterbox with black bars (contain) inside a 100svh portrait box. Sizing the media box to the video's own aspect ratio instead means the whole frame shows with no crop and no bars — the box IS the video's shape, so there's nothing left to letterbox. Content moves to normal flow below it. */ .hero{ min-height:0; display:block; overflow:visible; } .hero-media{ position:relative; inset:auto; aspect-ratio:16/9; margin-top:var(--sp-2xl); } .hero-media video{ object-fit:cover; } .hero-content{ position:static; padding: var(--sp-xl) 0 var(--sp-lg); } .hero-scroll{ display:none; } } .logos-section{ background:var(--c-black); color:var(--c-white); padding-block:var(--sp-2xl); } @media (max-width: 640px){ .logos-section{ padding-top:var(--sp-xl); padding-bottom:7rem; } } /* ============ Cards ============ */ .glass-card{ position:relative; border-radius: var(--radius-lg); background: var(--glass-fill); border:1px solid var(--glass-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: var(--sp-xl); transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); } .glass-card:hover{ transform: translateY(-6px); border-color: rgba(201,162,39,.5); } .card-index{ font-family:var(--font-display); font-size:var(--fs-small); color:var(--c-gold-2); letter-spacing:.15em; } .card-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--grad-gold); color:#1a1400; margin-bottom:var(--sp-md); } .card-icon svg{ width:24px; height:24px; } /* ============ Stats ============ */ .stat{ text-align:left; } .stat .stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,4vw,4.2rem); line-height:1; background:var(--grad-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat .stat-label{ margin-top:.5rem; font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase; opacity:.65; } /* ============ Footer ============ */ .footer{ background: var(--c-black); color: var(--c-white); padding-block: var(--sp-3xl) var(--sp-xl); position:relative; } .footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-xl); padding-bottom: var(--sp-2xl); border-bottom:1px solid rgba(255,255,255,.1); } .footer-brand .nav-logo{ font-size:1.6rem; } .footer-tag{ margin-top: var(--sp-md); max-width:320px; color:rgba(250,249,246,.65); } .footer-col h4{ font-family:var(--font-body); font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--c-gold-2); margin-bottom:var(--sp-md); font-weight:700; } .footer-col ul{ display:flex; flex-direction:column; gap:.85rem; } .footer-col a{ color:rgba(250,249,246,.75); font-size:var(--fs-small); } .footer-col a:hover{ color:var(--c-gold-2); } .footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap: var(--sp-md); padding-top: var(--sp-lg); font-size:var(--fs-micro); color:rgba(250,249,246,.5); } @media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } } /* ============ Forms ============ */ .field{ margin-bottom: var(--sp-lg); } .field label{ display:block; font-size:var(--fs-small); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.6rem; color:var(--c-silver-2); } .field input, .field textarea, .field select{ width:100%; padding: 1em 1.1em; border-radius: var(--radius-sm); background: var(--glass-fill); border:1px solid var(--glass-border); color:inherit; font-size:1rem; transition: border-color var(--dur-fast), background var(--dur-fast); } .field input:focus, .field textarea:focus, .field select:focus{ outline: 2px solid #8b5cf6; outline-offset:2px; } .field textarea{ resize:vertical; min-height:140px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-lg); } @media (max-width:640px){ .field-row{ grid-template-columns:1fr; } } .field-hint{ margin-top:.5rem; font-size:var(--fs-micro); opacity:.55; } .form-status{ margin-top:var(--sp-md); font-size:var(--fs-small); } .form-status.is-ok{ color:#7bd88f; } /* ============ Reveal utility ============ */ .reveal{ opacity:0; transform: translateY(28px); } .reveal-img{ opacity:0; clip-path: inset(0 0 100% 0); } /* ============ Misc components ============ */ .divider{ height:1px; background: linear-gradient(90deg, transparent, var(--glass-border), transparent); } .pill-tag{ display:inline-flex; align-items:center; padding:.4em 1em; border-radius:var(--radius-pill); border:1px solid var(--glass-border); font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase; } .split{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); align-items:center; } @media (max-width: 900px){ .split{ grid-template-columns:1fr; gap: var(--sp-xl); } } /* ============ Statement: circle → arc photo morph ============ Pin-and-scrub via ScrollTrigger (see morph-hero.js). Every card's base position is set with margin, not CSS transform, so GSAP is the sole owner of transform on these elements from the very first frame — mixing CSS-authored transforms with GSAP writes is what caused the kinetic-nav bug earlier in this project. */ /* GSAP's ScrollTrigger pin switches this section to position:fixed while it's pinned. The site's cinematic footer is ALSO position: fixed (its own "curtain reveal" trick), permanently sitting behind everything. While pinned, this section must cover the FULL viewport — anything shorter leaves a gap at the bottom where the always-fixed footer shows through, since nothing else is there to paint over it during the pin. (The earlier z-index-only fix didn't address this; the real issue was height, not stacking order.) Content still sits near the bottom (align-items:flex-end) so the gap *after* unpinning stays small — the extra room this height needs shows up above the text, between the arc and the copy, which reads as intentional breathing room rather than a seam. */ .pin-spacer{ position:relative; z-index:10; } .morph-hero{ position:relative; z-index:10; overflow:hidden; background:var(--c-white); color:var(--c-ink); min-height:100vh; min-height:100svh; padding-block:0; display:flex; align-items:flex-end; justify-content:center; will-change:transform; } .morph-stage{ position:relative; width:100%; height:100vh; height:100svh; display:flex; align-items:flex-end; justify-content:center; padding-bottom: 16rem; isolation:isolate; } .morph-cards{ position:absolute; inset:0; z-index:1; pointer-events:none; } .morph-card{ position:absolute; top:50%; left:50%; width:70px; height:95px; margin:-47.5px 0 0 -35px; perspective:1000px; cursor:pointer; pointer-events:auto; will-change:transform; } .morph-card-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition: transform .6s cubic-bezier(.16,1,.3,1); } .morph-card:hover .morph-card-inner{ transform: rotateY(180deg); } .morph-face{ position:absolute; inset:0; border-radius:12px; overflow:hidden; backface-visibility:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -12px rgba(0,0,0,.6); } .morph-face-front{ background:linear-gradient(155deg,#201f1c,#0a0a0a); border:1px solid rgba(255,255,255,.1); } .morph-face-front img{ width:100%; height:100%; object-fit:cover; } .morph-ph{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:rgba(255,255,255,.22); } .morph-face-back{ background:#0a0a0a; border:1px solid rgba(201,162,39,.4); transform:rotateY(180deg); font-family:var(--font-body); font-weight:700; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-gold-2); text-align:center; } .morph-face-back span{ display:block; width:100%; padding-inline:.4rem; } .morph-content{ position:relative; z-index:5; max-width:1900px; text-align:center; padding-inline:var(--sp-lg); pointer-events:none; will-change:transform; } .morph-content h2{ font-size:clamp(2.4rem, 3.2vw + 1.2rem, 5.5rem); line-height:1.05; } .morph-content p{ max-width:560px; margin-inline:auto; } .morph-content a{ pointer-events:auto; } /* Dot pattern (ported from a React "DotPattern" SVG component): a tiled dot grid masked by a radial gradient so it's only visible inside the empty circle at the center of the card ring, fading out toward the edges — same masking idea as the reference's radial-gradient mask. */ .morph-dot-pattern{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; fill:var(--c-ink); opacity:.22; -webkit-mask-image: radial-gradient(420px circle at 50% 50%, #fff, transparent); mask-image: radial-gradient(420px circle at 50% 50%, #fff, transparent); } @media (max-width:700px){ .morph-card{ width:56px; height:76px; margin:-38px 0 0 -28px; } .morph-stage{ padding-bottom:8.75rem; } } .big-cta{ position:relative; border-radius: var(--radius-lg); overflow:hidden; padding: var(--sp-3xl) var(--sp-xl); text-align:center; background: var(--c-black); color:var(--c-white); } .big-cta::before{ content:''; position:absolute; inset:-40%; z-index:0; background: radial-gradient(circle at 30% 30%, rgba(201,162,39,.28), transparent 55%), radial-gradient(circle at 75% 70%, rgba(200,200,200,.14), transparent 50%); animation: driftGlow 16s ease-in-out infinite alternate; } @keyframes driftGlow{ from{ transform: translate(-3%, -2%) scale(1);} to{ transform: translate(3%, 2%) scale(1.08);} } .big-cta > *{ position:relative; z-index:1; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* skip link */ .skip-link{ position:absolute; left:-999px; top:0; background:var(--c-gold-2); color:#1a1400; padding:1em 1.4em; z-index:10000; font-weight:700; } .skip-link:focus{ left: var(--sp-md); top: var(--sp-md); } ::selection{ background: var(--c-gold-2); color:#1a1400; } /* ============ Page (inner) hero ============ */ .page-hero{ position:relative; background: var(--c-black); color: var(--c-white); overflow:hidden; padding-top: clamp(9rem, 16vw, 12rem); padding-bottom: var(--sp-3xl); } .page-hero::before{ content:''; position:absolute; inset:0; z-index:0; background: radial-gradient(circle at 15% 0%, rgba(201,162,39,.16), transparent 45%), radial-gradient(circle at 85% 30%, rgba(200,200,200,.08), transparent 50%); } .page-hero .container{ position:relative; z-index:1; } .page-hero h1{ margin-top:1rem; max-width:820px; } .page-hero .lead{ margin-top:1.5rem; max-width:620px; } .contact-intro h1{ margin-top:1rem; text-align:center; white-space:nowrap; font-size:clamp(1.3rem, 4.8vw, 3.6rem); /* The global h1 line-height (1.08) is tuned for tighter display type; at this size Playfair Display's actual glyph height (ascenders + descenders) runs taller than that line-box, so with the gradient fill below clipped to the text shape (background-clip:text), the top/bottom tips of letters like "H" and the "g"/"j" descenders can render as if cut off. A taller line-height gives the glyphs room to fully sit inside their own box. */ line-height:1.4; } .contact-intro .lead{ margin-top:1.5rem; text-align:center; } .text-effect-words .word{ display:inline-block; opacity:0; } .text-gradient-purple{ background: linear-gradient(100deg,#ffffff 15%,#c9b6f8 50%,#8b5cf6 85%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .page-hero-meta{ display:flex; gap:2.5rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.12); } .page-hero-meta div{ font-size:var(--fs-small); color:rgba(250,249,246,.6); } .page-hero-meta strong{ display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--c-white); font-weight:700; } /* ============ Service blocks ============ */ .service-block{ padding-block: var(--sp-3xl); border-top:1px solid var(--paper-line, var(--c-paper-line)); scroll-margin-top: 110px; } .service-block:first-of-type{ border-top:none; } .service-num{ font-family:var(--font-display); font-size:1rem; color:var(--c-gold-2); letter-spacing:.2em; } .service-block h2{ margin-top:.75rem; } .service-lead{ margin-top:1.25rem; max-width:640px; } .process-list{ margin-top:3rem; counter-reset: step; position:relative; } .process-step{ display:grid; grid-template-columns:64px 1fr; gap:1.5rem; padding-block:1.5rem; position:relative; border-top:1px solid var(--c-paper-line); } .process-step:first-child{ border-top:1px solid var(--c-paper-line); } .process-num{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--c-gold-2); } .process-step h4{ font-family:var(--font-body); font-weight:700; font-size:1.05rem; letter-spacing:.01em; } .process-step p{ margin-top:.4rem; color:var(--c-ink-70); font-size:var(--fs-small); max-width:520px; } .is-dark .process-step p{ color:rgba(250,249,246,.65); } .process-images{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.25rem; max-width:420px; } .process-img-ph{ margin:0; aspect-ratio:4/3; border-radius:var(--radius-md); border:1px dashed var(--glass-border-light); background:var(--glass-fill-light); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:.75rem; text-align:center; } .process-img-ph svg{ width:22px; height:22px; opacity:.35; } .process-img-ph figcaption{ font-size:var(--fs-micro); letter-spacing:.03em; color:var(--c-ink-70); opacity:.7; } .is-dark .process-img-ph{ background:var(--glass-fill); border-color:var(--glass-border); } .is-dark .process-img-ph figcaption{ color:rgba(250,249,246,.6); } .is-dark .process-step, .is-dark .process-step:first-child{ border-color:rgba(255,255,255,.12); } .type-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; } @media (max-width:900px){ .type-grid{ grid-template-columns:1fr; } } .type-card{ border-radius:var(--radius-md); border:1px solid var(--glass-border); padding:2rem; transition: border-color var(--dur-med), transform var(--dur-med); } .type-card:hover{ transform: translateY(-4px); border-color: var(--c-gold-2); } .type-card h4{ font-family:var(--font-display); font-size:1.3rem; } .type-card p{ margin-top:.75rem; font-size:var(--fs-small); color:var(--c-ink-70); } .is-dark .type-card p{ color:rgba(250,249,246,.65); } /* ============ Portfolio grid: dynamic frame layout ============ Ported from a React/framer-motion "dynamic frame layout" (Luma-labs style video wall) to plain CSS Grid + JS track sizing — see initFrameGrid() in main.js. Each card is a "frame" on a unit grid; hovering a frame grows its row + column track while the rest compress, and gold viewfinder corners mark the active frame in place of the reference's decorative corner/edge image assets (no video/frame art exists for this project, so client logos + names fill the frame instead). Fine-pointer only — touch/reduced- motion falls back to the plain static grid below. */ .client-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; } @media (max-width:900px){ .client-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .client-grid{ grid-template-columns:1fr; } } .client-card{ position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio: 4/5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.75rem; background: linear-gradient(160deg, #1a1917, #0a0a0a); border:1px solid rgba(255,255,255,.08); } .client-card h3{ position:relative; font-style:italic; font-weight:600; color:#fff; font-size:clamp(1.6rem,2.4vw,2.2rem); transition: transform .45s cubic-bezier(.25,1,.5,1); } .client-card p{ position:relative; margin-top:.4rem; font-family:var(--font-body); font-weight:400; font-style:normal; font-size:var(--fs-small); color:rgba(255,255,255,.65); } .client-card-photo{ align-items:flex-start; justify-content:flex-end; text-align:left; } .client-card-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.25,1,.5,1); } .client-card-photo:hover img{ transform:scale(1.06); } .client-card-photo .client-card-overlay{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.15) 45%, rgba(10,10,10,.88) 100%); } .client-card-photo .client-card-text{ position:relative; z-index:1; } .client-card-photo .client-card-text p{ color:rgba(255,255,255,.8); } .client-grid.is-frame-grid{ transition: grid-template-columns .55s cubic-bezier(.25,1,.5,1), grid-template-rows .55s cubic-bezier(.25,1,.5,1), height .55s cubic-bezier(.25,1,.5,1); } .client-grid.is-frame-grid .client-card{ aspect-ratio:unset; height:100%; min-height:0; transition: opacity .45s cubic-bezier(.25,1,.5,1), border-color .45s cubic-bezier(.25,1,.5,1); } .client-grid.is-frame-grid.is-interactive .client-card:not(.is-hovered){ opacity:.4; } .client-grid.is-frame-grid .client-card.is-hovered{ border-color:var(--c-gold-2); } .client-grid.is-frame-grid .client-card.is-hovered h3{ transform:translateY(-3px); } /* Gold viewfinder corners — CSS-only stand-in for the reference's corner/edge frame image assets. */ .client-grid.is-frame-grid .client-card::after{ content:''; position:absolute; inset:14px; pointer-events:none; opacity:0; transition: opacity .45s cubic-bezier(.25,1,.5,1); background-repeat:no-repeat; background-image: linear-gradient(var(--c-gold-2), var(--c-gold-2)), linear-gradient(var(--c-gold-2), var(--c-gold-2)), linear-gradient(var(--c-gold-2), var(--c-gold-2)), linear-gradient(var(--c-gold-2), var(--c-gold-2)), linear-gradient(var(--c-gold-2), var(--c-gold-2)), linear-gradient(var(--c-gold-2), var(--c-gold-2)), linear-gradient(var(--c-gold-2), var(--c-gold-2)), linear-gradient(var(--c-gold-2), var(--c-gold-2)); background-size: 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px; background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right; } .client-grid.is-frame-grid .client-card.is-hovered::after{ opacity:1; } /* ============ Reel testimonials (portafolio.html) ============ Faithful port of the given "ScrollReelTestimonials" React/Tailwind component (counter-rotating vertical reel + per-character text rise). Geometry, timings and easing match the source 1:1; portrait photos are swapped for client logos since no real client photos exist. Built by initReelTestimonials() in reel-testimonials.js. */ .rtx-head{ margin-bottom: var(--sp-xl); } .rtx-head h2{ margin-top:.5rem; max-width:none; white-space:nowrap; font-size:clamp(1.05rem, 3.6vw, 3.6rem); } @media (max-width:700px){ .rtx-head h2{ font-size:var(--fs-h1); white-space:normal; } } .rtx-widget{ position:relative; display:flex; flex-direction:column; gap:0; border-radius:var(--radius-lg); border:1px solid var(--glass-border); background:var(--glass-fill); overflow:hidden; outline:none; } .rtx-widget:focus-visible{ box-shadow:0 0 0 2px var(--c-gold-2); } @media (min-width:768px){ .rtx-widget{ flex-direction:row; align-items:stretch; min-height:320px; } } .rtx-reel{ position:relative; height:224px; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:8px; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; -webkit-mask-composite: source-in; } @media (min-width:768px){ .rtx-reel{ height:320px; width:380px; } } .rtx-col{ display:flex; flex-direction:column; gap:8px; flex-shrink:0; transition: transform 800ms cubic-bezier(.65,0,.35,1); will-change:transform; } .rtx-widget.rtx-no-transition .rtx-col{ transition:none; } .rtx-cell{ width:121.33px; height:121.33px; flex-shrink:0; border-radius:12px; filter:blur(1px); border:1px solid var(--glass-border); background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); } .rtx-featured{ position:relative; width:121.33px; height:121.33px; flex-shrink:0; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 20px 40px -12px rgba(0,0,0,.55); } .rtx-featured img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:1.1rem; } .rtx-featured-mono{ display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:2rem; color:#1a1400; background:var(--grad-gold); } .rtx-content{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding: clamp(1.75rem,3vw,2.5rem); } .rtx-quote-icon{ width:2.25rem; height:2.25rem; color:rgba(250,249,246,.28); margin-bottom:.9rem; flex-shrink:0; } .rtx-stage{ position:relative; min-height:9.5rem; } .rtx-text-block{ display:flex; flex-direction:column; gap:.9rem; } .rtx-quote{ font-family:var(--font-body); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.4; color:#fff; letter-spacing:-.01em; } .rtx-role-line{ font-size:var(--fs-small); color:rgba(250,249,246,.55); } .rtx-word{ display:inline-block; white-space:nowrap; } .scroll-reel-char{ display:inline-block; opacity:0; transform:translateY(12px); animation: scrollReelCharRise 480ms cubic-bezier(.25,1,.5,1) forwards; } @keyframes scrollReelCharRise{ to{ opacity:1; transform:translateY(0); } } .rtx-text-block.scroll-reel-exit{ animation: scrollReelExit 240ms ease forwards; } @keyframes scrollReelExit{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(-12px); } } .rtx-controls{ display:flex; gap:.5rem; margin-top:1.5rem; } .rtx-nav{ width:28px; height:28px; border-radius:50%; border:1px solid rgba(250,249,246,.2); background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s ease, opacity .2s ease; } .rtx-nav:hover:not(:disabled){ transform:scale(1.08); border-color:var(--c-gold-2); } .rtx-nav:active:not(:disabled){ transform:scale(.94); } .rtx-nav:disabled{ opacity:.35; cursor:default; } .rtx-nav svg{ width:12px; height:12px; } @media (prefers-reduced-motion: reduce){ .rtx-col{ transition:none; } .scroll-reel-char{ animation:none; opacity:1; transform:none; } .rtx-text-block.scroll-reel-exit{ animation:none; } .rtx-nav{ transition:none; } } /* ============ Highlights / stats row ============ */ .stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--c-paper-line); } .is-dark .stat-row{ border-color:rgba(255,255,255,.12); } @media (max-width:700px){ .stat-row{ grid-template-columns:1fr; gap:1.75rem; } } /* ============ Pricing ============ */ .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; margin-top:2.5rem; } @media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; max-width:400px; margin-inline:auto; } } .pricing-card{ position:relative; border-radius:var(--radius-lg); border:1px solid var(--glass-border); background:var(--glass-fill); padding:2.5rem 2rem; display:flex; flex-direction:column; transition: transform var(--dur-med), border-color var(--dur-med); } .pricing-card:hover{ transform:translateY(-4px); } .pricing-card.is-featured{ border-color:var(--c-gold-2); } .pricing-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--grad-gold); color:#1a1400; font-size:var(--fs-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.45em 1.3em; border-radius:var(--radius-pill); } .pricing-name{ font-family:var(--font-display); font-size:1.5rem; } .pricing-card-desc{ margin-top:.6rem; font-size:var(--fs-small); color:var(--c-ink-70); min-height:2.6em; } .is-dark .pricing-card-desc{ color:rgba(250,249,246,.65); } .pricing-price{ font-family:var(--font-display); font-weight:800; font-size:2.4rem; margin-top:1.5rem; line-height:1; } .pricing-price small{ font-family:var(--font-body); font-weight:500; font-size:.95rem; opacity:.6; margin-left:.3em; } .pricing-note{ margin-top:.4rem; font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase; opacity:.5; } .pricing-features{ margin-top:1.75rem; margin-bottom:2rem; display:flex; flex-direction:column; gap:.8rem; flex:1; } .pricing-features li{ display:flex; align-items:flex-start; gap:.65rem; font-size:.88rem; line-height:1.4; } .pricing-features li svg{ flex-shrink:0; margin-top:.15em; width:16px; height:16px; color:var(--c-gold-2); } .is-dark .pricing-features li{ color:rgba(250,249,246,.8); } .pricing-card .btn{ justify-content:center; text-align:center; width:100%; } /* ============ Comparison table ============ */ .compare-wrap{ overflow-x:auto; margin-top:3rem; border-radius:var(--radius-lg); border:1px solid var(--glass-border); background:var(--glass-fill); } .compare-table{ width:100%; min-width:620px; border-collapse:collapse; } .compare-table th, .compare-table td{ padding:1.1rem 1.4rem; text-align:center; border-bottom:1px solid var(--glass-border); font-size:.85rem; } .compare-table th:first-child, .compare-table td:first-child{ text-align:left; font-weight:600; } .compare-table thead th{ font-family:var(--font-display); font-size:1rem; font-weight:700; padding-top:1.5rem; } .compare-table thead th:first-child{ font-family:var(--font-body); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.1em; color:var(--c-gold-2); font-weight:700; } .compare-table tbody tr:last-child td{ border-bottom:none; } .compare-table .yes{ color:var(--c-gold-2); font-weight:700; } .compare-table .no{ opacity:.25; } .compare-table td.sub{ padding-left:2.75rem; font-style:italic; opacity:.8; font-weight:400; } /* ============ Price compare (plan header + feature rows in one table) ============ */ .price-compare-table thead th{ padding:0; vertical-align:bottom; border-bottom:2px solid var(--glass-border); } .price-compare-table .price-compare-label{ vertical-align:bottom; padding:1.1rem 1.4rem; } .price-plan{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; padding:1.75rem 1.25rem 1.25rem; } .price-plan-name{ font-family:var(--font-display); font-style:italic; font-weight:700; font-size:1.15rem; } .price-plan[data-tone="silver"] .price-plan-name{ color:var(--c-silver-1); } .price-plan[data-tone="gold"] .price-plan-name{ color:var(--c-gold-2); } .price-plan[data-tone="copper"] .price-plan-name{ color:#c98a3a; } .price-plan-price{ font-family:var(--font-display); font-weight:800; font-size:1.7rem; margin-top:.4rem; white-space:nowrap; } .price-plan-price small{ font-family:var(--font-body); font-weight:500; font-size:.75rem; opacity:.6; margin-left:.25em; text-transform:none; letter-spacing:0; } .price-plan-note{ font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.05em; opacity:.5; margin-bottom:.5rem; } .price-plan .btn{ font-size:.72rem; padding:.65em 1.4em; margin-top:.5rem; } /* ============ Price cards (mobile-only card view of the price-compare table) ============ */ .price-cards-mobile{ display:none; } @media (max-width:640px){ .compare-wrap.price-compare{ display:none; } .price-cards-mobile{ display:flex; flex-direction:column; gap:2.25rem; margin-top:2.5rem; } } .price-card-mobile{ border-radius:1.5rem; padding:2px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); } .price-card-mobile[data-tone="silver"]{ --tone-accent:var(--c-silver-1); background:linear-gradient(165deg,#6b6b6b,#dcdcdc); } .price-card-mobile[data-tone="gold"]{ --tone-accent:var(--c-gold-2); background:linear-gradient(165deg,#8a6d1a,#e8c766); } .price-card-mobile[data-tone="copper"]{ --tone-accent:#c98a3a; background:linear-gradient(165deg,#a9761c,#f7dfa0); } /* Marketing plans get the brand's purple/blue/pink (Advanced) and pink/white (Personalizado) identity */ [data-group="marketing"] .price-card-mobile[data-tone="gold"]{ --tone-accent:#8b5cf6; background:linear-gradient(165deg,#8b5cf6 0%,#3b82f6 55%,#ec4899 100%); } [data-group="marketing"] .price-card-mobile[data-tone="copper"]{ --tone-accent:#ec4899; background:linear-gradient(165deg,#ec4899 0%,#f6b6d6 55%,#ffffff 100%); } /* Sitios Web plans get pink/white (Sitio Informativo) and white/blue (E-commerce) */ [data-group="web"] .price-card-mobile[data-tone="gold"]{ --tone-accent:#ec4899; background:linear-gradient(165deg,#ec4899 0%,#f6b6d6 55%,#ffffff 100%); } [data-group="web"] .price-card-mobile[data-tone="copper"]{ --tone-accent:#3b82f6; background:linear-gradient(165deg,#ffffff 0%,#c7ddff 50%,#3b82f6 100%); } .price-card-mobile-inner{ border-radius:calc(1.5rem - 2px); background:var(--c-black-elev); padding:1.75rem 1.5rem 1.5rem; text-align:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .price-card-mobile-icon{ display:flex; align-items:center; justify-content:center; margin:0 auto .5rem; width:2.25rem; height:2.25rem; color:var(--tone-accent); } .price-card-mobile-icon svg{ width:100%; height:100%; } .price-card-mobile-name{ font-family:var(--font-display); font-style:italic; font-weight:700; font-size:1.2rem; color:#fff; } .price-card-mobile-note{ font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.05em; opacity:.5; color:rgba(250,249,246,.65); margin-top:.2rem; } .price-card-mobile-price{ font-family:var(--font-display); font-weight:800; font-size:1.9rem; color:#fff; margin-top:.85rem; } .price-card-mobile-price small{ font-family:var(--font-body); font-weight:500; font-size:.7rem; opacity:.6; margin-left:.25em; text-transform:none; letter-spacing:0; } .price-card-mobile-list{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.9rem; text-align:left; } .price-card-mobile-item{ display:flex; align-items:flex-start; gap:.65rem; font-size:.82rem; color:rgba(250,249,246,.85); } .price-card-mobile-item.is-sub{ padding-left:1.4rem; font-style:italic; opacity:.85; } .price-card-mobile-item.is-no{ opacity:.4; } .price-card-mobile-badge{ flex-shrink:0; width:1.35rem; height:1.35rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(250,249,246,.08); margin-top:.05rem; } .price-card-mobile-badge svg{ width:.7rem; height:.7rem; } .price-card-mobile-item:not(.is-no) .price-card-mobile-badge{ color:var(--tone-accent); } .price-card-mobile-item.is-no .price-card-mobile-badge{ color:rgba(250,249,246,.4); } .price-card-mobile-value{ opacity:.6; } .price-card-mobile-cta{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; margin-top:1.5rem; padding:.85em 1.4em; border-radius:var(--radius-pill); font-family:var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.02em; text-decoration:none; background:var(--glass-fill-strong); color:#fff; border:1px solid var(--glass-border); transition: background .3s var(--ease-out), border-color .3s var(--ease-out); } .price-card-mobile-cta svg{ width:15px; height:15px; } .price-card-mobile-cta:active{ background:rgba(250,249,246,.16); border-color:var(--c-gold-2); } /* ============ Dark pricing block (forces dark glass tokens even nested inside a .section-light ancestor) ============ */ .pricing-dark-block{ margin-top:4rem; padding:clamp(1.5rem,2.5vw,2.25rem) clamp(1.5rem,4vw,3.5rem); border-radius:var(--radius-lg); background:var(--c-black); color:var(--c-white); background-image: radial-gradient(circle at 20% 15%, rgba(201,162,39,.14), transparent 55%); } .pricing-dark-block h3{ font-family:var(--font-body); font-weight:800; font-size:clamp(1.9rem,3.2vw,2.75rem); letter-spacing:-.01em; } .pricing-dark-block .title-accent{ font-family:var(--font-display); font-style:italic; font-weight:800; background:var(--grad-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 18px rgba(201,162,39,.5)); } .pricing-dark-block .compare-wrap{ background:var(--glass-fill); border-color:var(--glass-border); } .pricing-dark-block .compare-table td:first-child{ color:#fff; } .pricing-dark-block .compare-table td{ color:rgba(250,249,246,.85); border-color:var(--glass-border); } .pricing-dark-block .price-compare-label{ color:rgba(250,249,246,.55); } /* ============ Case studies ============ */ .case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; margin-top:2.5rem; } @media (max-width:800px){ .case-grid{ grid-template-columns:1fr; } } .case-card{ border-radius:var(--radius-lg); border:1px solid var(--glass-border); background:var(--glass-fill); padding:2.25rem; display:flex; flex-direction:column; gap:1.25rem; } .case-card-head{ display:flex; align-items:center; gap:1rem; } .case-card-logo{ width:56px; height:56px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; } .case-card-logo img{ width:70%; height:70%; object-fit:contain; } .case-card-logo span{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:#1a1400; } .case-card-head-text h3{ font-family:var(--font-display); font-size:1.35rem; } .case-card-head-text .cc-tag{ display:block; font-size:var(--fs-micro); letter-spacing:.15em; text-transform:uppercase; color:var(--c-gold-2); margin-bottom:.3rem; } .case-card p{ font-size:.92rem; line-height:1.6; color:rgba(250,249,246,.75); } .section-light .case-card p{ color:var(--c-ink-70); } .case-card-result{ margin-top:auto; padding-top:1rem; border-top:1px solid var(--glass-border); font-size:.85rem; } .case-card-result strong{ color:var(--c-gold-2); } /* ============ Section CTA ============ */ .service-cta{ margin-top:3rem; padding:2.5rem; border-radius:var(--radius-lg); border:1px solid var(--glass-border); background:var(--glass-fill); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; } .service-cta-text h3{ font-family:var(--font-display); font-size:1.4rem; } .service-cta-text p{ margin-top:.4rem; font-size:var(--fs-small); color:var(--c-ink-70); } .is-dark .service-cta-text p{ color:rgba(250,249,246,.65); } .section-light .pricing-card, .section-light .compare-wrap, .section-light .case-card, .section-light .service-cta{ background:var(--glass-fill-light); border-color:var(--glass-border-light); } .section-light .pricing-card-desc, .section-light .service-cta-text p{ color:var(--c-ink-70); } .section-light .pricing-features li{ color:var(--c-ink); } /* ============ CTA vertical marquee (contacto.html) ============ Ported from a React "CTAWithVerticalMarquee" component: two sibling tracks animate the same 0→-100% keyframe in lockstep, so the second track fills the gap the first leaves behind — the component's actual technique, distinct from this site's other duplicate-track-translate-50% marquees. Per-item opacity fades by distance from the viewport's vertical center, recomputed every frame — see initCtaMarquee() in main.js. Played only near-viewport via IntersectionObserver, same as the footer's cine-marquee. */ .cta-marquee-wrap{ position:relative; height:420px; overflow:hidden; } @media (max-width:900px){ .cta-marquee-wrap{ display:none; } } .cta-marquee{ display:flex; flex-direction:column; height:100%; overflow:hidden; } .cta-marquee-track{ display:flex; flex-direction:column; flex-shrink:0; animation: ctaMarqueeVertical 20s linear infinite; animation-play-state:paused; } .cta-marquee-wrap.is-near-view .cta-marquee-track{ animation-play-state:running; } @keyframes ctaMarqueeVertical{ from{ transform:translateY(0); } to{ transform:translateY(-100%); } } .cta-marquee-item{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,4vw,3.1rem); line-height:1.15; padding-block:1.1rem; color:var(--c-white); white-space:nowrap; } .cta-marquee-fade{ position:absolute; left:0; right:0; height:35%; pointer-events:none; z-index:1; } .cta-marquee-fade-top{ top:0; background:linear-gradient(180deg, var(--c-black) 0%, transparent 100%); } .cta-marquee-fade-bottom{ bottom:0; background:linear-gradient(0deg, var(--c-black) 0%, transparent 100%); } @media (prefers-reduced-motion: reduce){ .cta-marquee-track{ animation:none !important; } } /* ============ Skewed gradient service cards ============ Pure-CSS hover component (no JS): on hover the skewed gradient panel behind the card straightens and expands, two blurred "blob" highlights float in at opposite corners, and the glass content pane gains top padding to make room for them. */ .skew-cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem; margin-top:3rem; } .skew-card{ position:relative; display:block; width:300px; height:380px; flex-shrink:0; text-decoration:none; color:inherit; } .skew-panel{ position:absolute; top:0; left:50px; width:50%; height:100%; border-radius:var(--radius-md); transform:skewX(15deg); transition: all .5s var(--ease-out); z-index:1; background: var(--skew-grad); } .skew-panel-blur{ filter:blur(30px); opacity:.7; } .skew-card:hover .skew-panel{ transform:skewX(0deg); left:20px; width:calc(100% - 40px); } .skew-card[data-tone="gold"]{ --skew-grad: linear-gradient(315deg, #8a6d1a, #e8c766); } .skew-card[data-tone="silver"]{ --skew-grad: linear-gradient(315deg, #6b6b6b, #dcdcdc); } .skew-card[data-tone="copper"]{ --skew-grad: linear-gradient(315deg, #a9761c, #f7dfa0); } .skew-blob{ position:absolute; width:0; height:0; border-radius:var(--radius-md); opacity:0; pointer-events:none; background:rgba(255,255,255,.14); backdrop-filter:blur(10px); box-shadow:0 5px 15px rgba(0,0,0,.2); transition: all .5s var(--ease-out); z-index:3; } .skew-blob-tl{ top:0; left:0; } .skew-blob-br{ bottom:0; right:0; } .skew-card:hover .skew-blob-tl{ top:-30px; left:30px; width:70px; height:70px; opacity:1; animation: skewFloat 2.4s ease-in-out infinite; } .skew-card:hover .skew-blob-br{ bottom:-30px; right:30px; width:70px; height:70px; opacity:1; animation: skewFloat 2.4s ease-in-out infinite -1.2s; } @keyframes skewFloat{ 0%,100%{ transform:translateY(8px); } 50%{ transform:translateY(-8px); } } .skew-content{ position:relative; z-index:2; height:100%; padding: 1.75rem 2rem; background: rgba(255,255,255,.05); backdrop-filter:blur(10px); border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; justify-content:flex-end; transition: padding .5s var(--ease-out); } .skew-card:hover .skew-content{ padding-top:4rem; } .skew-content h3{ font-family:var(--font-display); font-size:1.6rem; margin-bottom:.75rem; } .skew-content p{ font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.75); margin-bottom:1.25rem; } .skew-cta{ display:inline-flex; align-self:flex-start; font-size:var(--fs-small); font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#1a1400; background:#fff; padding:.6em 1.2em; border-radius:var(--radius-pill); transition: background .3s var(--ease-out); } .skew-card:hover .skew-cta{ background:var(--c-gold-2); } @media (max-width:700px){ .skew-card{ width:88vw; max-width:340px; } } /* ============ Feature carousel (Servicios) ============ */ /* Tone theming: each service gets its own metallic/jewel gradient, shared by its chip (active state) and its card's color wash. Set on the [data-tone] element itself so both .fcarousel-chip and .fcarousel-card can read the same custom properties. */ .fcarousel-chip[data-tone="silver"], .fcarousel-card[data-tone="silver"]{ --tone-grad: linear-gradient(135deg,#7d7d7d,#d4d4d4,#ffffff); --tone-text:#2c2c2c; --tone-glow:rgba(210,210,210,.35); } .fcarousel-chip[data-tone="gold"], .fcarousel-card[data-tone="gold"]{ --tone-grad: linear-gradient(135deg,#8a6d1a,#e8c766,#fff3cf); --tone-text:#4a3a0d; --tone-glow:rgba(201,162,39,.35); } .fcarousel-chip[data-tone="purple"], .fcarousel-card[data-tone="purple"]{ --tone-grad: linear-gradient(135deg,#4c2a86,#9b6fe0,#e4d4fb); --tone-text:#2a1650; --tone-glow:rgba(155,111,224,.35); } .fcarousel{ display:flex; margin-top:3rem; border-radius:2.5rem; overflow:hidden; border:1px solid var(--glass-border); min-height:560px; background:var(--glass-fill); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); } .fcarousel-nav{ position:relative; width:38%; flex-shrink:0; display:flex; align-items:center; padding-inline:clamp(1.5rem,3vw,3rem); overflow:hidden; background:rgba(255,255,255,.03); border-right:1px solid var(--glass-border); } .fcarousel-fade{ position:absolute; inset-inline:0; height:3rem; z-index:2; pointer-events:none; } .fcarousel-fade-top{ top:0; background:linear-gradient(to bottom, var(--c-black-elev), transparent); } .fcarousel-fade-bottom{ bottom:0; background:linear-gradient(to top, var(--c-black-soft), transparent); } .fcarousel-chips{ display:flex; flex-direction:column; gap:.85rem; width:100%; } .fcarousel-chip{ display:flex; align-items:center; gap:.9rem; padding:.9rem 1.4rem; border-radius:var(--radius-pill); border:1px solid var(--glass-border); background:var(--glass-fill); color:rgba(255,255,255,.6); font-family:var(--font-body); font-size:.85rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; cursor:pointer; text-align:left; transition: all .5s var(--ease-out); } .fcarousel-chip-icon{ display:flex; flex-shrink:0; opacity:.6; transition:opacity .4s var(--ease-out); } .fcarousel-chip-icon svg{ width:18px; height:18px; flex-shrink:0; } .fcarousel-chip:hover{ border-color:rgba(255,255,255,.4); color:#fff; } .fcarousel-chip.is-active{ background:var(--tone-grad); border-color:transparent; color:var(--tone-text); box-shadow:0 8px 24px -6px var(--tone-glow); } .fcarousel-chip.is-active .fcarousel-chip-icon{ opacity:1; } .fcarousel-stage{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; padding: clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem); background:rgba(255,255,255,.015); } .fcarousel-cards{ position:relative; width:100%; max-width:400px; aspect-ratio:4/5; } .fcarousel-card{ position:absolute; inset:0; border-radius:1.75rem; overflow:hidden; text-decoration:none; color:inherit; border:1px solid var(--glass-border); } .fcarousel-card-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .fcarousel-card-content{ position:absolute; inset:0; z-index:2; padding:2rem; padding-top:6rem; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(to top, rgba(10,10,10,.94), rgba(10,10,10,.35) 60%, transparent); opacity:0; transition:opacity .5s var(--ease-out); } .fcarousel-card.is-active .fcarousel-card-content{ opacity:1; } .fcarousel-card-tag{ display:inline-block; align-self:flex-start; font-size:var(--fs-micro); font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--c-gold-3); margin-bottom:.85rem; } .fcarousel-card-content p{ font-size:.95rem; line-height:1.55; color:rgba(255,255,255,.82); margin-bottom:1.25rem; } .fcarousel-card-content .skew-cta{ align-self:flex-start; } .fcarousel-arrow{ display:none; } @media (max-width:900px){ .fcarousel{ flex-direction:column; min-height:0; } .fcarousel-nav{ width:100%; padding:1.25rem; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); gap:.4rem; } .fcarousel-fade{ display:none; } .fcarousel-chips{ flex-direction:row; flex:1; overflow:hidden; justify-content:center; } .fcarousel-chip{ display:none; width:auto; max-width:100%; justify-content:center; text-align:center; font-size:.66rem; gap:.55rem; padding:.8rem .9rem; white-space:nowrap; } .fcarousel-chip.is-active{ display:flex; } .fcarousel-chip .fcarousel-chip-icon svg{ width:15px; height:15px; } .fcarousel-stage{ padding:2rem 1.5rem 2.5rem; } .fcarousel-cards{ max-width:320px; } .fcarousel-arrow{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:1.9rem; height:1.9rem; border-radius:50%; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color:var(--c-white); transition: background .3s var(--ease-out), border-color .3s var(--ease-out); } .fcarousel-arrow svg{ width:14px; height:14px; } .fcarousel-arrow:hover, .fcarousel-arrow:active{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); } } .skew-portfolio-link{ display:inline-block; font-family:var(--font-body); font-weight:500; font-size:var(--fs-small); letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.55); text-decoration:none; padding-bottom:.4em; border-bottom:1px solid transparent; transition: color .3s var(--ease-out), border-color .3s var(--ease-out), letter-spacing .3s var(--ease-out); } .skew-portfolio-link:hover{ color:#fff; border-color:var(--c-gold-2); letter-spacing:.4em; } /* ============ Light-section overrides ============ .section-light marks sections with an explicit white/cream background sitting inside an otherwise dark (body.is-dark) page. These rules must appear after the .is-dark rules above so they win the specificity tie and restore readable dark-on-light text. */ .section-light .lead{ color: var(--c-ink-70); } .section-light .glass-card{ background: rgba(10,10,10,.03); border-color: rgba(10,10,10,.08); } .section-light .glass-card:hover{ border-color: rgba(201,162,39,.6); } .section-light .process-step, .section-light .process-step:first-child{ border-color: var(--c-paper-line); } .section-light .process-step p{ color: var(--c-ink-70); } .section-light .type-card p{ color: var(--c-ink-70); } .section-light .btn-outline{ border-color: var(--glass-border-light); background: var(--glass-fill-light); color: var(--c-ink); } .section-light .btn-outline:hover{ border-color: var(--c-gold-1); color: var(--c-gold-1); } .section-light .field input, .section-light .field textarea, .section-light .field select{ background: rgba(10,10,10,.03); border-color: rgba(10,10,10,.14); } /* ============ Cinematic footer (curtain reveal) ============ */ #main{ position:relative; z-index:1; min-height:100vh; background:var(--c-black); } .cine-footer-wrap{ position:relative; height:100vh; } .cine-footer{ position:fixed; left:0; right:0; bottom:0; height:100vh; z-index:0; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:#000; color:var(--c-white); } .cine-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; background-size:60px 60px; background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px); -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); } .cine-marquee{ position:absolute; top:14%; left:0; width:100%; overflow:hidden; z-index:1; border-block:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.8); backdrop-filter:blur(10px); padding-block:1rem; transform:rotate(-1.5deg) scale(1.08); } .cine-marquee-track{ display:flex; width:max-content; animation:cineMarquee 40s linear infinite; animation-play-state:paused; } .cine-footer-wrap.is-near-view .cine-marquee-track{ animation-play-state:running; } .cine-marquee-item{ display:flex; align-items:center; gap:2.5rem; padding-inline:1.5rem; font-size:var(--fs-small); font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.5); white-space:nowrap; } .cine-marquee-item .dot{ background: linear-gradient(100deg,#8b5cf6 0%,#3b82f6 50%,#ec4899 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; opacity:.85; } @keyframes cineMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .cine-center{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-inline:var(--sp-lg); margin-top:7.5rem; text-align:center; } .cine-heading{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,7vw,5.5rem); letter-spacing:-.02em; line-height:1.25; padding-top:.15em; background:var(--grad-silver-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 0 30px rgba(200,200,200,.18)); margin-bottom:2.5rem; } .cine-links{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; width:100%; } .cine-pills-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; } .cine-pill{ display:inline-flex; align-items:center; gap:.6em; padding:1.1em 2em; border-radius:var(--radius-pill); font-weight:700; font-size:var(--fs-small); color:var(--c-white); background:linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); box-shadow:0 10px 30px -10px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.08); backdrop-filter:blur(16px); transition: background .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), color .4s var(--ease-out); } .cine-pill:hover{ border-color:rgba(201,162,39,.5); color:var(--c-gold-2); box-shadow:0 16px 34px -10px rgba(201,162,39,.25), inset 0 1px 1px rgba(255,255,255,.12); } .cine-pill svg{ width:18px; height:18px; flex-shrink:0; } .cine-pill-primary{ padding:1.15em 2.4em; font-size:1rem; background: linear-gradient(100deg,#8b5cf6 0%,#3b82f6 50%,#ec4899 100%); background-size:200% 200%; background-position:0% 50%; border-color: transparent; color:#fff; box-shadow: 0 10px 34px -10px rgba(139,92,246,.55), inset 0 1px 1px rgba(255,255,255,.15); } .cine-pill-primary:hover{ background-position:100% 50%; border-color:transparent; color:#fff; box-shadow: 0 16px 40px -10px rgba(139,92,246,.7), inset 0 1px 1px rgba(255,255,255,.2); } .cine-pills-row--secondary .cine-pill{ padding:.75em 1.5em; font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); } .cine-pills-row--secondary .cine-pill:hover{ color:#fff; } .cine-bottom{ position:relative; z-index:2; width:100%; padding: var(--sp-md) clamp(var(--sp-lg),6vw,var(--sp-2xl)) var(--sp-xl); display:flex; flex-direction:column; align-items:center; gap:1.25rem; } .cine-copy{ font-size:var(--fs-micro); letter-spacing:.06em; color:rgba(255,255,255,.45); font-weight:600; order:3; text-align:center; } .cine-social{ display:flex; gap:.6rem; order:1; } .cine-social-icon{ width:44px; height:44px; padding:0; justify-content:center; } .cine-social-icon svg{ width:16px; height:16px; } /* Icon "draw-in" hover (ported from a Lucide Animated React/motion component): each shape reports pathLength="1" so stroke-dasharray/ stroke-dashoffset can treat 0→1 as fully-hidden→fully-drawn, the same trick Framer's pathLength prop uses internally. Rest state is fully drawn; hovering re-traces all three shapes in parallel. */ .icon-draw svg [data-icon-draw]{ stroke-dasharray:1; stroke-dashoffset:0; opacity:1; } .icon-draw:hover svg [data-icon-draw]{ animation:iconDrawIn .6s linear; } @keyframes iconDrawIn{ 0%{ stroke-dashoffset:1; opacity:0; } 17%{ opacity:1; } 100%{ stroke-dashoffset:0; opacity:1; } } @media (prefers-reduced-motion: reduce){ .icon-draw:hover svg [data-icon-draw]{ animation:none; } } .cine-top{ width:52px; height:52px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; order:2; color:rgba(255,255,255,.7); } .cine-top:hover{ color:var(--c-gold-2); } .cine-top svg{ width:20px; height:20px; transition:transform .3s var(--ease-out); } .cine-top:hover svg{ transform:translateY(-3px); } /* ============ Logo beam card (index.html) ============ Ported from a React "LogoCloud" (BorderBeam) component: a light beam traces the card's border on a continuous loop, and a label straddling the top edge shimmers right as the beam sweeps under it. The beam is done in pure CSS (animated conic-gradient via @property) rather than the reference's per-frame JS perimeter math — simpler and just as smooth, and the shimmer keyframe is calibrated to the same loop length so it still flashes right as the beam crosses the top-center label. Logos keep this project's established grayscale-on-white-tile treatment (their PNGs have opaque backgrounds, so a plain silhouette filter doesn't work — confirmed the hard way earlier in this project). */ @property --beam-angle{ syntax:''; inherits:false; initial-value:0deg; } .logo-beam-wrap{ margin-top:2.5rem; display:flex; justify-content:center; } .logo-beam-card{ position:relative; width:100%; max-width:1100px; border-radius:var(--radius-lg); border:1px solid var(--glass-border); background:var(--c-black); } .logo-beam-card::after{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 74%, rgba(139,92,246,.6) 82%, rgba(59,130,246,.75) 87%, #fff 90%, rgba(236,72,153,.75) 93%, rgba(139,92,246,.6) 96%, transparent 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: logoBeamRotate 8s linear infinite; pointer-events:none; } @keyframes logoBeamRotate{ to{ --beam-angle:360deg; } } .logo-beam-label{ position:absolute; top:0; left:50%; transform:translate(-50%,-50%); z-index:2; background:var(--c-black); padding:0 1.25rem; margin:0; max-width:90%; font-family:var(--font-body); font-weight:500; font-size:1.05rem; letter-spacing:-.01em; color:rgba(250,249,246,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:480px){ .logo-beam-label{ font-size:.8rem; max-width:96%; white-space:normal; text-align:center; line-height:1.3; padding:.3em .75rem; } } .logo-beam-wave{ background-image: linear-gradient(90deg, currentColor 0%, currentColor 40%, #e8c766 47%, #8b5cf6 50%, #e8c766 53%, currentColor 60%, currentColor 100%); background-size:250% 100%; background-repeat:no-repeat; background-position:100% center; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation: logoBeamWave 8s linear infinite; } @keyframes logoBeamWave{ 0%{ background-position:100% center; } 6%{ background-position:0% center; } 100%{ background-position:0% center; } } .logo-beam-marquee{ position:relative; overflow:hidden; padding:3.5rem 0 2.5rem; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .logo-beam-track{ display:flex; align-items:center; gap:2.5rem; width:max-content; animation: logoBeamScroll 28s linear infinite; } .logo-beam-card:hover .logo-beam-track{ animation-play-state:paused; } .logo-beam-track-dup{ display:contents; } @keyframes logoBeamScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .logo-beam-item{ flex-shrink:0; } .logo-beam-item img{ display:block; height:40px; width:auto; max-width:150px; object-fit:contain; filter:grayscale(1); opacity:.85; background:#fff; border-radius:8px; padding:.5rem .9rem; box-sizing:content-box; transition: opacity .3s var(--ease-out); } .logo-beam-item:hover img{ opacity:1; } @media (prefers-reduced-motion: reduce){ .logo-beam-card::after{ animation:none; } .logo-beam-wave{ animation:none; background-position:0% center; } .logo-beam-track{ animation:none; } } @media (min-width:640px){ .cine-bottom{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; } .cine-copy{ grid-column:1; justify-self:start; text-align:left; } .cine-social{ grid-column:2; justify-self:center; } .cine-top{ grid-column:3; justify-self:end; } } @media (max-width:768px){ .cine-marquee{ top:10%; } .cine-center{ margin-top:8.5rem; } } /* Dark pricing block always wins on button contrast, even though it sits inside a .section-light ancestor — placed last so cascade order breaks the specificity tie with .section-light .btn-outline. */ .pricing-dark-block .btn-outline{ background:var(--glass-fill); border-color:var(--glass-border); color:#fff; } .pricing-dark-block .btn-outline:hover{ border-color:var(--c-gold-2); color:var(--c-gold-2); } .pricing-dark-block .lead{ color:#fff; } /* Purple → blue → pink accent, replacing the gold accents that were here before, scoped to this block only. */ .pricing-dark-block{ background-image:none; background:var(--c-black); } .pricing-dark-block .title-accent{ background:linear-gradient(100deg,#8b5cf6 0%,#3b82f6 50%,#ec4899 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 18px rgba(139,92,246,.5)); } .pricing-dark-block .price-compare-table thead th.price-compare-label{ color:var(--c-silver-2); } .pricing-dark-block .price-plan[data-tone="gold"] .price-plan-name{ background:linear-gradient(100deg,#8b5cf6 0%,#3b82f6 50%,#ec4899 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .pricing-dark-block .price-plan[data-tone="copper"] .price-plan-name{ color:var(--c-silver-1); } .pricing-dark-block .compare-table .yes{ color:#c4b5fd; } /* Smaller pricing table inside the dark block. */ .pricing-dark-block .price-compare-table th, .pricing-dark-block .price-compare-table td{ padding:.75rem 1rem; font-size:.78rem; } .pricing-dark-block .price-compare-table thead th{ font-size:.88rem; padding-top:1rem; } .pricing-dark-block .price-compare-table .price-compare-label{ padding:.75rem 1rem; } .pricing-dark-block .price-compare-table td.sub{ padding-left:2.25rem; } .pricing-dark-block .price-plan{ padding:1.25rem .9rem .9rem; gap:.2rem; } .pricing-dark-block .price-plan-name{ font-size:1rem; } .pricing-dark-block .price-plan-price{ font-size:1.35rem; } .pricing-dark-block .price-plan-note{ margin-bottom:.25rem; } /* Section shell behind the pricing block: light dot/line grid with a soft purple-to-blue dual radial blur, ported from a Tailwind "gradient-blur-bg" demo to plain CSS. Colors match the title-accent gradient already used on this block for a consistent accent. */ .pricing-grid-bg-section{ position:relative; overflow:hidden; background:var(--c-white); color:var(--c-ink); } .pricing-grid-bg-section .container{ position:relative; z-index:1; } .pricing-grid-bg-section::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(to right, rgba(12,10,9,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(12,10,9,.06) 1px, transparent 1px), radial-gradient(circle 500px at 18% 88%, rgba(139,92,246,.28), transparent), radial-gradient(circle 500px at 82% 10%, rgba(59,130,246,.24), transparent); background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%; } /* Methodology section on black background — placed last so cascade order breaks the specificity tie with the global unscoped .lead rule. */ .methodology-dark .lead{ color:#fff; } .methodology-dark .mtimeline-line{ background:rgba(250,249,246,.18); } .methodology-dark .mtimeline-node{ background:var(--c-black); border-color:var(--c-black); box-shadow:0 0 0 1px rgba(250,249,246,.18); } .methodology-dark .mtimeline-card{ background:rgba(250,249,246,.05); border-color:rgba(250,249,246,.12); } .methodology-dark .mtimeline-card h4{ color:#fff; } .methodology-dark .mtimeline-card p{ color:rgba(250,249,246,.65); } .methodology-dark .mtimeline-img-ph{ background:rgba(250,249,246,.04); border-color:rgba(250,249,246,.16); } .methodology-dark .mtimeline-img-ph svg{ color:rgba(250,249,246,.6); opacity:.4; } /* ============ Methodology: alternating timeline ============ */ .mtimeline{ position:relative; margin-top:3.5rem; padding-block:1rem; } .mtimeline-line{ position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--c-paper-line); transform:translateX(-50%); } .mtimeline-item{ position:relative; display:flex; width:100%; margin-bottom:3.5rem; } .mtimeline-item:last-child{ margin-bottom:0; } .mtimeline-item[data-side="left"]{ justify-content:flex-start; } .mtimeline-item[data-side="right"]{ justify-content:flex-end; } .mtimeline-node{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; background:var(--c-black); color:var(--c-gold-3); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:.95rem; border:4px solid var(--c-white); z-index:2; box-shadow:0 0 0 1px var(--c-paper-line); } .mtimeline-card{ width:calc(50% - 3.25rem); background:var(--glass-fill-light); border:1px solid var(--glass-border-light); border-radius:var(--radius-lg); padding:1.75rem; transition:transform .35s var(--ease-out), border-color .35s var(--ease-out); } .mtimeline-card:hover{ transform:translateY(-4px); border-color:var(--c-gold-2); } .mtimeline-img-ph{ aspect-ratio:16/10; border-radius:var(--radius-md); background:rgba(10,10,10,.04); border:1px dashed var(--glass-border-light); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; } .mtimeline-img-ph svg{ width:36px; height:36px; opacity:.3; } .mtimeline-card h4{ font-family:var(--font-body); font-weight:700; font-size:1.15rem; } .mtimeline-card p{ margin-top:.6rem; font-size:var(--fs-small); color:var(--c-ink-70); } @media (max-width:900px){ .mtimeline-line{ left:22px; } .mtimeline-item[data-side="left"], .mtimeline-item[data-side="right"]{ justify-content:flex-start; padding-left:58px; } .mtimeline-node{ left:22px; } .mtimeline-card{ width:100%; } } /* ============ Service selector (choose category) ============ */ .svc-selector{ position:relative; overflow:hidden; background:var(--c-black); color:var(--c-white); display:flex; flex-direction:column; justify-content:center; min-height:100vh; padding-block: clamp(4rem, 8vw, 6rem); border-top:1px solid rgba(255,255,255,.08); } .svc-selector-bg{ position:absolute; inset:0; z-index:0; } /* ============ Beams background (servicios.html selector default state) ============ Ported from a React "BeamsBackground" canvas component: soft glowing beams drift upward with a pulsing gradient, blurred both in the canvas context and via a CSS filter, plus a faint animated haze overlay on top. Framer Motion's opacity tween became a plain CSS keyframe. Sits behind the marketing/web/eventos photo layers in the DOM, so it's only visible in the selector's default state, before any option is hovered or chosen — once a layer's opacity animates to 1 it fully covers the beams. */ .beams-bg-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .beams-bg-overlay{ position:absolute; inset:0; pointer-events:none; background:rgba(10,10,10,.05); backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px); animation: beamsOverlayPulse 10s ease-in-out infinite; animation-play-state: paused; } /* Both the canvas's own per-frame blur(35px) fill and this backdrop-filter are expensive; only run the pulse while the hero selector is actually on screen (toggled by the IntersectionObserver in beams-bg.js) instead of animating it forever regardless of scroll position. */ .svc-selector.is-bg-active .beams-bg-overlay{ animation-play-state: running; } @keyframes beamsOverlayPulse{ 0%, 100%{ opacity:.05; } 50%{ opacity:.15; } } @media (prefers-reduced-motion: reduce){ .beams-bg-canvas{ display:none; } .beams-bg-overlay{ animation:none; opacity:.08; } } .svc-selector-bg-layer{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease; background-size:cover; background-position:center; background-repeat:no-repeat; } .svc-selector-bg-layer[data-bg="marketing"]{ background-image: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.32) 45%, rgba(10,10,10,.82) 100%), url('../img/servicios-bg/marketing.jpg'); } .svc-selector-bg-layer[data-bg="web"]{ background-image: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.32) 45%, rgba(10,10,10,.82) 100%), url('../img/servicios-bg/web.jpg'); } .svc-selector-bg-layer[data-bg="eventos"]{ background-image: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.32) 45%, rgba(10,10,10,.82) 100%), url('../img/servicios-bg/eventos.jpg'); } .svc-selector-bg-layer.is-active{ opacity:1; } .svc-selector .container{ position:relative; z-index:1; } .svc-selector .eyebrow{ color:rgba(250,249,246,.6); display:flex; } .svc-selector-title{ margin-top:1.25rem; text-align:center; font-family:var(--font-display); font-style:italic; font-size:clamp(1.6rem, 4vw, 2.6rem); font-weight:400; color:rgba(250,249,246,.85); min-height:2.6em; display:flex; align-items:center; justify-content:center; max-width:760px; margin-inline:auto; line-height:1.3; } .svc-opt-cols{ display:grid; grid-template-columns:1fr 1.4fr 1fr; align-items:center; gap:1rem 2.5rem; margin-top:3.5rem; width:100%; padding-inline: clamp(2rem, 7vw, 7rem); } .svc-opt-col{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1.75rem; } .svc-opt-col:last-child{ justify-self:end; align-items:flex-end; } .svc-opt-col:last-child .svc-opt{ flex-direction:row-reverse; text-align:right; } .svc-center{ position:relative; min-height:5.5em; display:flex; align-items:center; justify-content:center; text-align:center; } .svc-center-word{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; line-height:1; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(2.2rem, 4.8vw, 4.4rem); color:rgba(250,249,246,.5); opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease, color .6s ease; pointer-events:none; } .svc-center-word.is-active{ opacity:1; transform:translateY(0); } .svc-center-word[data-service="marketing"].is-active{ color:var(--c-gold-3); } .svc-center-word[data-service="web"].is-active{ background: var(--grad-silver-text); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .svc-center-word[data-service="eventos"].is-active{ color:#e2a06a; } .svc-opt{ appearance:none; background:none; border:none; cursor:pointer; color:inherit; padding:.5rem 0; display:flex; align-items:baseline; gap:.9rem; text-align:left; opacity:.4; transition:opacity .3s ease; } .svc-opt:hover, .svc-opt:focus-visible, .svc-opt.is-active{ opacity:1; } .svc-opt-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(1rem, 1.5vw, 1.25rem); color:rgba(250,249,246,.6); transition:color .3s ease; position:relative; } .svc-opt:hover .svc-opt-name, .svc-opt:focus-visible .svc-opt-name, .svc-opt.is-active .svc-opt-name{ color:var(--c-white); } /* Dot marker points toward the center word */ .svc-opt-name::after{ content:''; position:absolute; top:50%; right:-14px; width:5px; height:5px; border-radius:50%; background:var(--c-gold-3); transform:translateY(-50%) scale(0); transition:transform .25s ease; } .svc-opt-col:last-child .svc-opt-name::after{ right:auto; left:-14px; } .svc-opt:hover .svc-opt-name::after, .svc-opt:focus-visible .svc-opt-name::after, .svc-opt.is-active .svc-opt-name::after{ transform:translateY(-50%) scale(1); } .svc-selector-progress{ width:200px; margin:3.5rem auto 0; text-align:center; } .svc-selector-progress-numbers{ display:flex; justify-content:space-between; font-family:var(--font-display); font-size:.8rem; color:rgba(250,249,246,.55); margin-bottom:.5rem; } .svc-selector-progress-current{ color:var(--c-gold-3); } .svc-selector-progress-bar{ height:1px; background:rgba(250,249,246,.18); position:relative; } .svc-selector-progress-fill{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--c-gold-2); height:100%; transition:width .4s ease; } @media (max-width:900px){ .svc-opt-cols{ grid-template-columns:1fr; gap:1.15rem; max-width:420px; margin-inline:auto; padding-inline: var(--sp-lg); } .svc-opt{ opacity:.55; } .svc-opt-col:last-child, .svc-center{ display:none; } .svc-selector-title{ font-size:clamp(1.3rem,6vw,1.7rem); min-height:0; } } /* ============ Flow sections (per-service scroll-stack story) ============ Full-screen panels that pin in place while the next one rotates in from the bottom-left corner and covers it — ported from a React "story-scroll" pin+rotate pattern to plain CSS/GSAP. */ .flow-stack{ position:relative; width:100%; } .flow-section{ position:relative; min-height:100vh; width:100%; overflow:hidden; } .flow-inner{ position:relative; min-height:100vh; width:100%; display:flex; flex-direction:column; justify-content:space-between; gap:1.75rem; padding: clamp(6rem,10vw,8rem) clamp(1.5rem,5vw,4.5rem) clamp(3rem,6vw,4.5rem); transform-origin:bottom left; will-change:transform; } .flow-eyebrow{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; opacity:.65; } .flow-hr{ border:none; border-top:1px solid currentColor; opacity:.16; margin:0; } .flow-heading{ font-family:var(--font-display); font-weight:800; line-height:.95; text-transform:uppercase; font-size:clamp(2.6rem, 7vw, 6.2rem); letter-spacing:-.01em; } .flow-heading-gradient{ background: linear-gradient(100deg,#8b5cf6 0%,#3b82f6 50%,#ec4899 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .flow-heading-silver{ background: var(--grad-silver-text); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .flow-lead{ max-width:46ch; font-size:clamp(1.05rem, 1.4vw, 1.5rem); line-height:1.55; } .flow-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:2.5rem 3rem; } .flow-grid-label{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.6rem; } .flow-grid-desc{ font-size:var(--fs-small); line-height:1.6; opacity:.75; max-width:38ch; } @media (max-width:640px){ .flow-heading{ font-size:clamp(2.1rem, 10vw, 3.2rem); } .flow-inner{ gap:1.25rem; padding-top:6.5rem; } .flow-grid{ gap:1.75rem; } } .svc-content.is-hidden{ display:none; } /* ============ Fluid particle background (contacto.html) ============ Ported from a React "FluidParticlesBackground" canvas component: soft noise-driven dots drift, fade in/out over a life cycle, and wrap at the section edges, leaving a faint trailing haze. Reimplemented in plain canvas 2D + a hand-rolled Perlin noise (the original had no external deps either), scoped to sit behind one section's content instead of the full viewport. */ .section-fluid-bg{ overflow:hidden; } .section-fluid-bg > .container{ position:relative; z-index:1; } .fluid-bg-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; background:var(--c-black); } @media (prefers-reduced-motion: reduce){ .fluid-bg-canvas{ display:none; } } /* ============ Wavy background (index.html, "Servicios destacados") ============ Ported from a React "WavyBackground" canvas component: 5 layered noise-driven lines undulate across the section, each stroke drawn at partial opacity over a translucent fill (the trailing/aurora look), then softened with a CSS blur on the canvas itself. Same hand-rolled Perlin noise as .fluid-bg-canvas, kept as an independent copy so each background script stays self-contained; scoped to the section instead of the reference's full-viewport canvas. */ .section-wavy-bg{ overflow:hidden; } .section-wavy-bg > .container{ position:relative; z-index:1; } .wavy-bg-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; background:var(--c-black); } @media (prefers-reduced-motion: reduce){ .wavy-bg-canvas{ display:none; } } /* ============ Animated gradient background (portafolio.html, "Nuestra Experiencia") ============ Ported from a React "AnimatedGradient" component: a WebGL2 fragment shader blends 3 colors through a noise-driven swirl/distortion field. The shader itself is plain GLSL (no React dependency), so it's copied verbatim; only the component lifecycle (canvas setup, resize, the animation loop) was rewritten in vanilla JS. Tuned to the reference's "Plasma" preset with the accent swapped for dark charcoal instead of purple, so it reads as a moody all-black smoke on black. */ .section-gradient-bg{ position:relative; overflow:hidden; } .section-gradient-bg > .container{ position:relative; z-index:1; } .gradient-bg-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; background:var(--c-black); } @media (prefers-reduced-motion: reduce){ .gradient-bg-canvas{ display:none; } }