/* ============================================================ PHARMA-V · v3 (Balance: institucional moderno) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* Brand */ --navy-900: #0B1D33; --navy-800: #15324F; --navy-700: #1C4267; --navy-600: #2257E8; --blue-500: #3E7BFA; --blue-50: #EEF3FB; /* Neutros */ --white: #FFFFFF; --ink: #0B1D33; --ink-2: #4A5A6E; --ink-3: #8895A7; --line: #E5EAF0; --line-2:#F0F3F7; --bg: #FFFFFF; --bg-2: #F7F9FC; --bg-3: #FAFBFD; /* Accent suave */ --teal: #0FB5A6; --warn: #C56B3A; /* Layout */ --container: 1200px; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; /* Sombras */ --shadow-sm: 0 1px 2px rgba(11,29,51,.06), 0 1px 1px rgba(11,29,51,.03); --shadow: 0 4px 16px rgba(11,29,51,.06), 0 1px 2px rgba(11,29,51,.04); --shadow-lg: 0 20px 50px rgba(11,29,51,.08), 0 6px 18px rgba(11,29,51,.05); /* Easing */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Tipografía */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Display serif → headings de sección (no el hero) */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* "Mono" tokens reapuntados al sans: etiquetas ejecutivas, sin estética de código */ --font-mono: var(--font-sans); --tp-mono: var(--font-sans); /* Surface tokens (light) — usado por componentes para que dark los reemplace */ --surface: #FFFFFF; --surface-elev: #FAFBFD; --surface-strong: #F0F3F7; --line-strong: #D5DCE5; --accent: var(--navy-700); --accent-soft: rgba(28,66,103,.08); } [data-theme="dark"] { /* Base: navy progressivly elevated */ --bg: #08182B; /* page background — más profundo */ --bg-2: #0E2440; /* alt sections */ --bg-3: #173354; /* elevated surfaces (cards) */ /* Surface token: usado por componentes (form, cards) */ --surface: #0E2440; --surface-elev: #173354; --surface-strong: #1E4670; /* Texto */ --ink: #F2F5F9; --ink-2: #C5D1E0; --ink-3: #94A4B8; /* Dividers — más visibles que antes */ --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.06); --line-strong: rgba(255,255,255,.20); /* Brand accents — en dark se cambia a blue-500 que sí contrasta */ --accent: #5B92FF; --accent-soft: rgba(91,146,255,.16); /* Sombras (en dark son menos visibles pero ayudan a separar) */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 16px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 20px 50px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35); --blue-50: rgba(91,146,255,.14); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* ============ Lenis · required base styles ============ When Lenis is active, native scroll-behavior must be off and overflow must stay on (not body) so the wheel events hit Lenis. */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto !important; } html.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Guard horizontal overflow at so Lenis owns the body scroll cleanly */ html { overflow-x: clip; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ============ Scroll progress · velocity-aware ============ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 1000; pointer-events: none; background: transparent; } .scroll-progress__bar { --vel: 0; position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--teal)); box-shadow: 0 0 calc(8px + var(--vel) * 18px) rgba(28, 66, 103, calc(0.25 + var(--vel) * 0.5)), 0 0 calc(2px + var(--vel) * 6px) rgba(15, 181, 166, calc(0.20 + var(--vel) * 0.45)); transition: box-shadow .4s var(--ease); } [data-theme="dark"] .scroll-progress__bar { background: linear-gradient(90deg, var(--accent), var(--teal)); box-shadow: 0 0 calc(10px + var(--vel) * 22px) rgba(91, 146, 255, calc(0.35 + var(--vel) * 0.5)), 0 0 calc(3px + var(--vel) * 8px) rgba(15, 181, 166, calc(0.25 + var(--vel) * 0.45)); } /* Legacy single-element fallback (no motion.js / non-module browsers) */ .scroll-progress:not(:has(.scroll-progress__bar)) { height: 2px; background: linear-gradient(90deg, var(--navy-700), var(--teal)); } /* ============ Grain overlay (procedural noise) ============ */ .grain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; } [data-theme="dark"] .grain { opacity: .06; mix-blend-mode: soft-light; } @media (prefers-reduced-motion: reduce) { .grain { display: none; } } /* ============ Hero — dramatic dark cinematic background ============ Hero ALWAYS renders dark regardless of global theme. The site below stays light. This creates the Stripe/Linear "hero floats over a deep canvas" feel. */ .hero { isolation: isolate; position: relative; background: #102A47; /* navy floor (no negro) — picked up by mesh shader */ color: rgba(255,255,255,0.92); overflow: hidden; } /* Override design tokens inside the hero so children read white on dark naturally */ .hero[data-hero-theme="dark"] { --ink: rgba(255,255,255,0.96); --ink-2: rgba(255,255,255,0.66); --ink-3: rgba(255,255,255,0.48); --line: rgba(255,255,255,0.12); --line-strong:rgba(255,255,255,0.22); --bg: transparent; --bg-2: rgba(255,255,255,0.04); --surface: rgba(255,255,255,0.04); --surface-elev: rgba(255,255,255,0.06); --accent: #7fb1ff; --accent-soft:rgba(127,177,255,0.18); } /* WebGL gradient mesh — sits behind everything */ .hero__mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1); } .hero__mesh.is-ready { opacity: 1; } /* Soft radial vignette so edges fall to pure navy + content has breathing room */ .hero__vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 110%, rgba(16,42,71,0.70) 0%, rgba(16,42,71,0) 55%), radial-gradient(120% 90% at 50% -10%, rgba(16,42,71,0.55) 0%, rgba(16,42,71,0) 50%), linear-gradient(180deg, rgba(16,42,71,0.15) 0%, rgba(16,42,71,0) 25%, rgba(16,42,71,0) 75%, rgba(16,42,71,0.30) 100%); } /* When WebGL is up, hide the CSS aurora fallback */ .hero:has(.hero__mesh.is-ready) .hero__aurora--fallback { opacity: 0; visibility: hidden; /* PERF: removes from the paint tree → no expensive blur(80px) repaint */ } .hero__aurora { position: absolute; inset: -10% -5% -10% -5%; z-index: 0; pointer-events: none; overflow: hidden; filter: blur(80px) saturate(115%); opacity: .55; transition: opacity 0.6s ease; } .hero__aurora-blob { position: absolute; width: 520px; height: 520px; border-radius: 50%; will-change: transform, opacity; animation: pv-aurora 22s ease-in-out infinite alternate; } .hero__aurora-blob--a { top: -10%; left: -8%; background: radial-gradient(circle at 30% 30%, rgba(28,66,103,.55), transparent 65%); animation-duration: 26s; } .hero__aurora-blob--b { top: 35%; right: -10%; background: radial-gradient(circle at 70% 50%, rgba(15,181,166,.40), transparent 65%); animation-duration: 30s; animation-delay: -8s; } .hero__aurora-blob--c { bottom: -15%; left: 35%; background: radial-gradient(circle at 50% 50%, rgba(62,123,250,.30), transparent 65%); animation-duration: 34s; animation-delay: -16s; } [data-theme="dark"] .hero__aurora { opacity: .70; } [data-theme="dark"] .hero__aurora-blob--a { background: radial-gradient(circle at 30% 30%, rgba(62,123,250,.55), transparent 65%); } [data-theme="dark"] .hero__aurora-blob--b { background: radial-gradient(circle at 70% 50%, rgba(15,181,166,.50), transparent 65%); } [data-theme="dark"] .hero__aurora-blob--c { background: radial-gradient(circle at 50% 50%, rgba(127,212,255,.35), transparent 65%); } @keyframes pv-aurora { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.08); } 100% { transform: translate(-30px,20px) scale(0.96); } } @media (prefers-reduced-motion: reduce) { .hero__aurora-blob { animation: none; } } /* ============ Hero grid rules (editorial structure) ============ */ .hero__rules { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: grid; grid-template-columns: repeat(5, 1fr); max-width: var(--container); margin: 0 auto; padding: 0 24px; opacity: .55; } .hero__rules > span { border-left: 1px solid var(--line); height: 100%; } .hero__rules > span:last-child { border-right: 1px solid var(--line); } [data-theme="dark"] .hero__rules { opacity: .35; } @media (max-width: 900px) { .hero__rules { display: none; } } .hero > .container { position: relative; z-index: 1; } /* ============ Split-text · word wrapper ============ */ .split-word { display: inline-block; will-change: transform, opacity; /* Initial state set in JS (motion.js page-enter). No CSS transition: GSAP drives it. */ } /* ============ Magnetic buttons ============ */ [data-magnetic] { will-change: transform; } /* ============ Page enter · prevent flash before motion.js runs. Class only added once motion.js has booted; if it fails, content stays visible. Eyebrow + title parents stay visible — title em fades in via GSAP. */ html.motion-ready-css .hero__lead, html.motion-ready-css .hero__cta .btn, html.motion-ready-css .hero__panel, html.motion-ready-css .hero__stat { opacity: 0; } html.motion-ready-css .nav { opacity: 0; } /* ============ Tilt 3D · perspective context for cards ============ */ .services, .testimonials, .certs { perspective: 1200px; perspective-origin: center center; } /* ============ Reveal · motion.js drives via GSAP when active Only hide [data-reveal] once motion.js has marked the page as ready to animate. If motion.js fails to load, this class is never added → content stays visible. */ html.motion-ready-css [data-reveal]:not(.is-revealed) { opacity: 0; } html:not(.js) [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } } /* ============ Command palette (⌘K) ============ */ .cmdk[hidden] { display: none; } .cmdk { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; } .cmdk__backdrop { position: absolute; inset: 0; background: rgba(11,29,51,.42); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); animation: pv-cmdk-fade .18s var(--ease-out); } .cmdk__panel { position: relative; width: min(640px, calc(100% - 32px)); background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 80px rgba(11,29,51,.30), 0 8px 24px rgba(11,29,51,.18), 0 0 0 1px rgba(255,255,255,.04) inset; overflow: hidden; animation: pv-cmdk-pop .22s var(--ease-out); } [data-theme="dark"] .cmdk__panel { background: var(--bg-2); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35); } @keyframes pv-cmdk-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pv-cmdk-pop { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .cmdk__searchbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .cmdk__search-icon { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; } .cmdk__input { flex: 1; border: 0; outline: 0; background: transparent; font: 500 15px/1.4 var(--font-sans); color: var(--ink); letter-spacing: -0.005em; } .cmdk__input::placeholder { color: var(--ink-3); } .cmdk__hint, .cmdk kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-2); color: var(--ink-2); font: 600 10px/1 var(--font-sans); letter-spacing: .04em; } .cmdk__list { max-height: 50vh; overflow-y: auto; padding: 8px; } .cmdk__group-label { font: 600 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); padding: 12px 12px 6px; } .cmdk__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--ink); font-size: 14px; transition: background .12s var(--ease); } .cmdk__item-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--accent); flex-shrink: 0; } .cmdk__item-icon svg { width: 14px; height: 14px; } .cmdk__item-body { display: flex; flex-direction: column; min-width: 0; } .cmdk__item-title { font-weight: 500; color: var(--ink); } .cmdk__item-sub { font-size: 12px; color: var(--ink-3); } .cmdk__item-shortcut { margin-left: auto; opacity: 0; transition: opacity .15s var(--ease); } .cmdk__item:hover, .cmdk__item.is-active { background: var(--bg-2); } .cmdk__item.is-active .cmdk__item-shortcut { opacity: 1; } .cmdk__empty { text-align: center; padding: 28px 12px; color: var(--ink-3); font-size: 13px; } .cmdk__footer { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 11px; color: var(--ink-3); } .cmdk__footer-group { display: inline-flex; align-items: center; gap: 6px; } .cmdk__brand { background: var(--accent); color: #fff; border-color: var(--accent); } @media (max-width: 540px) { .cmdk { padding-top: 8vh; } } button { font-family: inherit; } /* Reveal animation: definido arriba en bloque premium (línea ~199). Mantener este fallback para no-JS: */ html:not(.js) [data-reveal] { opacity: 1; transform: none; } /* ============ Container ============ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ============ Typography ============ */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--accent); display: inline-block; } .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0; } .h1 { font-size: clamp(2rem, 3.9vw, 3.1rem); line-height: 1.14; } .h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.2; } .h3 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.35; font-weight: 600; } .lead { font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--ink-2); line-height: 1.65; max-width: 62ch; } .text-mute { color: var(--ink-2); } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); white-space: nowrap; } .btn--primary { background: var(--navy-800); color: var(--white); } .btn--primary:hover { background: var(--navy-900); transform: translateY(-1px); box-shadow: var(--shadow); } [data-theme="dark"] .btn--primary { background: var(--white); color: var(--navy-900); } [data-theme="dark"] .btn--primary:hover { background: var(--ink-2); color: var(--navy-900); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--bg-2); border-color: var(--ink-3); } .btn--accent { background: var(--navy-700); color: var(--white); } .btn--accent:hover { background: var(--navy-800); transform: translateY(-1px); } .btn--lg { padding: 14px 28px; font-size: 15px; } .btn .arrow { transition: transform .2s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* ============ Nav ============ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; /* Default: glass on dark (hero is the first section). Switches to light glass once the user scrolls past the hero via .nav.is-past-hero. */ background: rgba(6, 16, 28, 0.55); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } .nav .brand, .nav .nav__links a, .nav .lang-toggle, .nav .theme-toggle { color: rgba(255, 255, 255, 0.92); } .nav .nav__links a { color: rgba(255, 255, 255, 0.66); } .nav .nav__links a:hover, .nav .nav__links a.is-active { color: rgba(255, 255, 255, 0.96); } .nav .lang-toggle, .nav .theme-toggle { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); } .nav .lang-toggle:hover, .nav .theme-toggle:hover { background: rgba(255, 255, 255, 0.10); } .nav .lang-toggle [data-lang-current] { color: rgba(255, 255, 255, 0.96); } .nav .lang-toggle [data-lang-other] { color: rgba(255, 255, 255, 0.55); } .nav .lang-toggle .lang-toggle__sep { color: rgba(255, 255, 255, 0.35); } .nav .btn--primary { background: #fff; color: #06101c; border-color: #fff; } .nav .btn--primary:hover { background: rgba(255, 255, 255, 0.92); } /* Once scrolled past the hero, nav switches to light glass on the body. */ .nav.is-past-hero { background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--line); color: var(--ink); } .nav.is-past-hero .brand, .nav.is-past-hero .nav__links a, .nav.is-past-hero .lang-toggle, .nav.is-past-hero .theme-toggle { color: var(--ink); } .nav.is-past-hero .nav__links a { color: var(--ink-2); } .nav.is-past-hero .nav__links a:hover, .nav.is-past-hero .nav__links a.is-active { color: var(--ink); } .nav.is-past-hero .lang-toggle, .nav.is-past-hero .theme-toggle { border-color: var(--line); background: var(--bg); } .nav.is-past-hero .lang-toggle:hover, .nav.is-past-hero .theme-toggle:hover { background: var(--bg-2); } .nav.is-past-hero .lang-toggle [data-lang-current] { color: var(--ink); } .nav.is-past-hero .lang-toggle [data-lang-other] { color: var(--ink-2); } .nav.is-past-hero .lang-toggle .lang-toggle__sep { color: var(--ink-3); } .nav.is-past-hero .btn--primary { background: var(--navy-800); color: #fff; border-color: var(--navy-800); } [data-theme="dark"] .nav.is-past-hero { background: rgba(8, 24, 43, 0.82); border-color: var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); } .brand__logo { width: 36px; height: 36px; } .brand__wordmark { font-weight: 700; letter-spacing: 0.08em; font-size: 14px; } .nav__links { display: flex; gap: 28px; } .nav__links a { position: relative; font-size: 14px; color: var(--ink-2); font-weight: 500; transition: color .25s var(--ease); } .nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1); } .nav__links a:hover { color: var(--ink); } .nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); } .nav__links a.is-active { color: var(--ink); } .nav__actions { display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--ease); } .theme-toggle:hover { background: var(--bg-2); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .sun { display: none; } [data-theme="dark"] .theme-toggle .sun { display: block; } [data-theme="dark"] .theme-toggle .moon { display: none; } .lang-toggle { height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font: 600 12px/1 var(--font-sans); letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px; transition: background .2s var(--ease), color .2s var(--ease); } .lang-toggle:hover { background: var(--bg-2); } .lang-toggle [data-lang-current] { color: var(--ink); } .lang-toggle [data-lang-other] { color: var(--ink-2); } .lang-toggle__sep { color: var(--ink-3); } /* === Mobile nav burger (hidden by default, shown on mobile) === */ .nav__burger { display: none; width: 44px; height: 44px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 0; color: var(--ink); transition: background .2s var(--ease), border-color .2s var(--ease); -webkit-tap-highlight-color: transparent; } .nav__burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease), opacity .25s var(--ease); } .nav__burger:hover { background: var(--bg-2); } .nav__burger:active { background: var(--bg-3); } /* === Mobile slide-over panel === */ .mnav__backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(11, 29, 51, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .mnav__backdrop.is-open { opacity: 1; pointer-events: auto; } .mnav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(380px, 88vw); height: 100dvh; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(11, 29, 51, .20); display: flex; flex-direction: column; padding: 20px 24px 24px; transform: translateX(100%); transition: transform .35s var(--ease-out); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; } .mnav.is-open { transform: translateX(0); visibility: visible; } .mnav__header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); } .brand--mnav { color: var(--ink); } .brand--mnav .brand__logo { width: 30px; height: 30px; color: var(--navy-700); } [data-theme="dark"] .brand--mnav .brand__logo { color: var(--blue-500); } .mnav__close { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s var(--ease); } .mnav__close:active { background: var(--bg-3); } .mnav__close svg { width: 18px; height: 18px; } .mnav__links { display: flex; flex-direction: column; gap: 2px; flex: 1; } .mnav__links a { display: flex; align-items: center; padding: 14px 12px; font-size: 17px; font-weight: 500; color: var(--ink); border-radius: 10px; letter-spacing: -0.005em; transition: background .15s var(--ease), color .15s var(--ease); border-bottom: 0; min-height: 48px; } .mnav__links a:hover { background: var(--bg-2); } .mnav__links a:active { background: var(--bg-3); } .mnav__cta { margin-top: 20px; justify-content: center; width: 100%; } .mnav__footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .mnav__footer-label { font-size: 13px; color: var(--ink-2); } .mnav__footer-meta { font-size: 11px; color: var(--ink-3); letter-spacing: .08em; font-family: var(--font-sans); } /* === Body lock when mnav is open === */ body.has-mnav-open { overflow: hidden; } @media (max-width: 860px) { .nav__links { display: none; } .nav__cta-desktop { display: none; } .nav__burger { display: inline-flex; } } /* ============ Hero ============ */ .hero { padding: 64px 0 88px; /* background owned by the dark hero block above (deep navy + WebGL mesh) */ position: relative; overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } .hero__title { margin: 14px 0 18px; } .hero__title em { font-style: normal; font-weight: 600; background: linear-gradient(135deg, #9ec5ff 0%, #6ee7d4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } [data-hero-theme="dark"] .hero__trust-icon { color: #9ec5ff; } [data-hero-theme="dark"] .hero__trust { border-top-color: rgba(255,255,255,0.10); } [data-hero-theme="dark"] .eyebrow::before { background: #9ec5ff; } [data-hero-theme="dark"] .eyebrow { color: rgba(255,255,255,0.80); } [data-hero-theme="dark"] .eyebrow__sep { color: rgba(255,255,255,0.30); } [data-hero-theme="dark"] .eyebrow__loc { color: rgba(255,255,255,0.55); } [data-hero-theme="dark"] .hero__lead { color: rgba(255,255,255,0.72); } /* Visual card (operational panel) — glass on dark hero */ [data-hero-theme="dark"] .hero__visual { background: linear-gradient(140deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(20px); } [data-hero-theme="dark"] .hero__visual::before { background: radial-gradient(circle at 25% 20%, rgba(127,177,255,0.18), transparent 50%), radial-gradient(circle at 80% 90%, rgba(110,231,212,0.12), transparent 55%); } [data-hero-theme="dark"] .hero__visual-pattern { color: rgba(255,255,255,0.18); } /* CTA buttons on dark hero — primary inverts, ghost becomes white outline */ [data-hero-theme="dark"] .btn--primary { background: #fff; color: #06101c; border-color: #fff; } [data-hero-theme="dark"] .btn--primary:hover { background: rgba(255,255,255,0.92); box-shadow: 0 12px 32px -10px rgba(127,177,255,0.5); } [data-hero-theme="dark"] .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); } [data-hero-theme="dark"] .btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.36); } /* Hide the editorial grid lines over the dark hero (they fight the mesh) */ [data-hero-theme="dark"] .hero__rules { opacity: 0.10; } [data-hero-theme="dark"] .hero__rules > span, [data-hero-theme="dark"] .hero__rules > span:last-child { border-color: rgba(255,255,255,0.10); } .hero__lead { max-width: 52ch; } .eyebrow__sep { color: var(--ink-3); margin: 0 2px; } .eyebrow__loc { color: var(--ink-3); font-weight: 500; } .hero__cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero__trust { display: flex; gap: 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); flex-wrap: wrap; } .hero__trust-item { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; } .hero__trust-item strong { color: var(--ink); font-weight: 600; } .hero__trust-icon { width: 18px; height: 18px; color: var(--navy-600); flex-shrink: 0; } .hero__visual { position: relative; aspect-ratio: 6 / 7; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 100%); overflow: hidden; box-shadow: var(--shadow-lg); } .hero__visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 25% 20%, rgba(62,123,250,.28), transparent 50%), radial-gradient(circle at 80% 90%, rgba(15,181,166,.20), transparent 55%); } .hero__visual-pattern { position: absolute; inset: 0; color: #fff; pointer-events: none; } .hero__visual-pattern svg { width: 100%; height: 100%; } .hero__visual-content { position: absolute; inset: 0; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; color: var(--white); } .hero__badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; } .hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(15,181,166,.25); } /* Panel con feed de operaciones */ .hero__visual-panel { margin-top: 14px; padding: 14px 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; backdrop-filter: blur(10px); } .hero__visual-panel-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); } .hero__visual-panel-label { font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600; opacity: .85; } .hero__visual-panel-meta { font-size: 11px; opacity: .55; font-family: var(--font-sans); letter-spacing: .04em; } .hero__visual-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .hero__visual-feed li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.35; } .feed__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .feed__dot--ok { background: var(--teal); box-shadow: 0 0 0 3px rgba(15,181,166,.18); } .feed__dot--info { background: var(--blue-500); box-shadow: 0 0 0 3px rgba(62,123,250,.20); } .feed__text { color: rgba(255,255,255,.88); } .feed__time { font-size: 11px; opacity: .55; font-family: var(--font-sans); letter-spacing: .04em; } .hero__visual-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hero__visual-stat { padding: 12px 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; backdrop-filter: blur(10px); } .hero__visual-stat-num { font-size: 22px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; } .hero__visual-stat-label { font-size: 10.5px; opacity: .75; margin-top: 6px; letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 900px) { .hero { padding: 40px 0 56px; } .hero__grid { grid-template-columns: 1fr; gap: 36px; } .hero__title { margin: 10px 0 14px; } .hero__cta { margin-top: 24px; gap: 10px; } .hero__cta .btn { flex: 1 1 auto; justify-content: center; min-width: 0; } .hero__trust { gap: 16px 24px; margin-top: 28px; padding-top: 20px; } .hero__trust-item { font-size: 12.5px; } .hero__visual { aspect-ratio: 4/5; } .hero__visual-content { padding: 20px; gap: 16px; } .hero__visual-panel { padding: 12px 14px; margin-top: 10px; } .hero__visual-feed li { font-size: 12px; } .hero__visual-stats { gap: 12px; } .hero__visual-stat-num { font-size: 19px; } .hero__visual-stat-label { font-size: 10px; } } @media (max-width: 540px) { .hero { padding: 28px 0 44px; } /* Copy block: más respiro entre eyebrow/H1/lead/CTAs */ .eyebrow { font-size: 11px; letter-spacing: 0.08em; } .hero__title { margin: 18px 0 16px; } .hero__lead { font-size: 15.5px; line-height: 1.55; } .hero__cta { margin-top: 24px; flex-direction: column; } .hero__cta .btn { width: 100%; } .hero__trust { gap: 10px; margin-top: 28px; padding-top: 20px; } .hero__trust-item { width: 100%; font-size: 13px; } /* Hero visual: card libre, contenido simplificado */ .hero__visual { aspect-ratio: auto; border-radius: 16px; } .hero__visual-content { padding: 22px; gap: 18px; position: static; inset: auto; } .hero__visual::before { opacity: 0.85; } .hero__visual-pattern { opacity: 0.30; } /* Panel: SOLO el grid 2x2 de métricas, sin header "Indicadores operativos" */ .hero__visual-panel { margin-top: 0; padding: 0; background: transparent; border: 0; backdrop-filter: none; } .hero__visual-panel-header { display: none; } .hero__visual-feed { display: none; } .hero__visual-stats { grid-template-columns: 1fr 1fr; gap: 10px; } .hero__visual-stat { padding: 14px 14px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.10); } .hero__visual-stat-num { font-size: 22px; } .hero__visual-stat-label { font-size: 10px; letter-spacing: 0.06em; } } /* ============ Section base ============ */ .section { padding: 96px 0; } .section--alt { background: var(--bg-2); } .section--dark { background: var(--navy-900); color: var(--white); } .section--dark .h2, .section--dark .lead { color: var(--white); } .section--dark .lead { color: rgba(255,255,255,.75); } [data-theme="dark"] .section--dark { background: #06111F; } .section__header { max-width: 720px; margin: 0 0 56px; } .section__header--center { margin-left: auto; margin-right: auto; text-align: center; } .section__header .h2 { margin-top: 14px; } .section__header .lead { margin-top: 16px; } /* ============ About — misión / visión ============ */ .about-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .about-quote { margin: 0; padding: 32px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 14px; position: relative; } [data-theme="dark"] .about-quote { background: var(--surface-elev); } .about-quote::before { content: ""; position: absolute; left: 30px; top: 24px; width: 22px; height: 1px; background: var(--accent); } .about-quote__label { display: block; margin-top: 12px; font: 600 11px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .about-quote__text { font-size: 16px; line-height: 1.65; letter-spacing: -0.003em; color: var(--ink); margin: 0; font-weight: 400; } /* Pilares — cards con icono */ .about-pillars-band { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .about-pillar-cell { padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; transition: border-color .25s var(--ease), transform .25s var(--ease); } [data-theme="dark"] .about-pillar-cell { background: var(--surface-elev); } .about-pillar-cell:hover { border-color: var(--accent); transform: translateY(-2px); } .about-pillar-cell__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; } .about-pillar-cell__icon svg { width: 22px; height: 22px; } .about-pillar-cell__title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); margin: 0; } .about-pillar-cell__desc { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; } @media (max-width: 900px) { .about-quotes { grid-template-columns: 1fr; gap: 16px; } .about-quote { padding: 28px 24px; } .about-pillars-band { margin-top: 48px; grid-template-columns: 1fr; gap: 14px; } .about-pillar-cell { padding: 24px 22px; } } @media (max-width: 540px) { .about-quote__text { font-size: 15px; } } /* ============ Stats ============ */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 56px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } #nosotros .stats { margin-top: 64px; padding: 44px 0 0; border-bottom: 0; border-top: 1px solid var(--line); } .stat__num { font-size: clamp(1.9rem, 3.2vw, 2.4rem); font-weight: 600; color: var(--navy-800); line-height: 1; letter-spacing: -0.02em; } .stat__num .suffix { color: var(--navy-600); } .stat__label { font-size: 13px; color: var(--ink-2); margin-top: 10px; line-height: 1.4; } @media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; gap: 24px; padding: 40px 0; } } /* ============ Servicios ============ */ .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .service { position: relative; overflow: hidden; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transform-style: preserve-3d; will-change: transform; transition: transform .45s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease); } [data-theme="dark"] .service { background: var(--surface-elev); } .service > * { position: relative; z-index: 1; } .service:hover { border-color: var(--accent); box-shadow: var(--shadow); } .service__num { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 18px; } .card__glow { position: absolute; z-index: 0; top: var(--y, 50%); left: var(--x, 50%); width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(28,66,103,.10), transparent 70%); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .35s var(--ease-out); } [data-theme="dark"] .card__glow { background: radial-gradient(circle, rgba(127,212,255,.14), transparent 70%); } .service:hover .card__glow { opacity: 1; } .service__icon { width: 48px; height: 48px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } [data-theme="dark"] .service__icon { color: var(--accent); } .service__icon svg { width: 24px; height: 24px; } .service__title { margin-bottom: 10px; } .service__desc { color: var(--ink-2); font-size: 14px; line-height: 1.55; } @media (max-width: 900px) { .services { grid-template-columns: 1fr; } } /* ============ Proceso (timeline) ============ */ .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; } .process::before { content: ''; position: absolute; top: 22px; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 10%, var(--line) 90%, transparent); z-index: 0; } .step { position: relative; z-index: 1; } .step__num { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; margin-bottom: 16px; } [data-theme="dark"] .step__num { background: var(--surface-elev); } .step__title { font-weight: 600; font-size: 16px; margin-bottom: 8px; color: var(--ink); } .step__desc { font-size: 14px; color: var(--ink-2); line-height: 1.55; } @media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr; gap: 32px; } .process::before { display: none; } } @media (max-width: 540px) { .process { grid-template-columns: 1fr; } } /* ============ Mapa CR ============ */ .coverage { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .coverage__map { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; aspect-ratio: 4 / 3; position: relative; } .coverage__map svg { width: 100%; height: 100%; display: block; } .cr-map-host { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Provincias */ .cr-province { fill: #BFD2F2; stroke: var(--navy-700); stroke-width: 1; stroke-linejoin: round; transition: fill .2s var(--ease), stroke .2s var(--ease); cursor: pointer; pointer-events: all; } .cr-province:hover, .cr-province.is-active { fill: var(--navy-600); stroke: var(--navy-800); } .cr-water { fill: var(--white); stroke: var(--navy-700); stroke-width: 0.5; opacity: 0.7; pointer-events: none; } [data-theme="dark"] .cr-province { fill: rgba(62,123,250,.12); stroke: rgba(255,255,255,.35); } [data-theme="dark"] .cr-province:hover, [data-theme="dark"] .cr-province.is-active { fill: var(--navy-600); stroke: var(--white); } [data-theme="dark"] .cr-water { fill: var(--navy-900); stroke: rgba(255,255,255,.25); } .cr-pin { fill: var(--navy-700); transition: r .2s var(--ease); pointer-events: none; } .cr-pin-ring { fill: none; stroke: var(--navy-600); stroke-width: 1; opacity: 0.4; pointer-events: none; } .cr-pin-label { font-size: 11px; font-weight: 600; fill: var(--ink); pointer-events: none; } [data-theme="dark"] .cr-pin { fill: var(--white); } [data-theme="dark"] .cr-pin-ring { stroke: var(--white); } [data-theme="dark"] .cr-pin-label { fill: var(--white); } .coverage__list { display: flex; flex-direction: column; gap: 8px; } .coverage__intro { padding: 16px 18px; background: transparent; border-left: 2px solid var(--accent); display: grid; gap: 6px; margin-bottom: 12px; } .coverage__intro-label { font-family: var(--tp-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0; } .coverage__intro-text { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 48ch; } .coverage__note { margin: 16px 4px 0; font-family: var(--tp-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); opacity: 0.75; } .coverage__item { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; transition: border-color .2s var(--ease), background .2s var(--ease); cursor: pointer; } [data-theme="dark"] .coverage__item { background: var(--surface-elev); } .coverage__item:hover, .coverage__item.is-active { border-color: var(--accent); background: var(--accent-soft); } .coverage__item-name small { color: var(--ink-2); font-weight: 400; } .coverage__item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .coverage__item-name { font-weight: 500; flex: 1; } .coverage__item-meta { font-size: 13px; color: var(--ink-2); } @media (max-width: 900px) { .coverage { grid-template-columns: 1fr; gap: 40px; } } /* ============ Marcas (estático) ============ */ .marquee { overflow: hidden; padding: 10px 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee + .marquee { margin-top: 14px; } .marquee__track { display: flex; gap: 14px; width: max-content; animation: pv-scroll-x 48s linear infinite; } .marquee--reverse .marquee__track { animation-duration: 58s; animation-direction: reverse; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes pv-scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } .brand-pill { display: inline-flex; flex-direction: column; gap: 4px; padding: 12px 20px; min-width: 200px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); white-space: nowrap; transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); } [data-theme="dark"] .brand-pill { background: var(--surface-elev); } .brand-pill:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); } .brand-pill b { font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--ink); } .brand-pill i { font-style: normal; font-family: var(--font-sans); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ============ Certificaciones ============ */ .certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cert { padding: 24px; background: var(--surface-strong); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; } [data-theme="dark"] .cert { background: var(--surface-elev); } .cert__icon { width: 36px; height: 36px; color: var(--accent); } .cert__title { font-weight: 600; font-size: 14px; } .cert__desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; } @media (max-width: 900px) { .certs { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .certs { grid-template-columns: 1fr; } } /* ============ Testimonios ============ */ .testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .testimonial { padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 20px; } [data-theme="dark"] .testimonial { background: var(--surface-elev); } .testimonial__quote { font-size: 15px; line-height: 1.6; color: var(--ink); } .testimonial__quote::before { content: '"'; font-size: 32px; line-height: 0; color: var(--accent); display: block; margin-bottom: 10px; font-weight: 700; } .testimonial__author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); } .testimonial__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-700), var(--navy-600)); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; } .testimonial__name { font-weight: 600; font-size: 14px; } .testimonial__role { font-size: 12px; color: var(--ink-2); } @media (max-width: 900px) { .testimonials { grid-template-columns: 1fr; } } /* ============ Contacto ============ */ .contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; } .contact__info { display: flex; flex-direction: column; gap: 32px; } .contact__info-item { display: flex; gap: 16px; } .contact__info-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; background: rgba(255,255,255,.1); color: var(--white); display: flex; align-items: center; justify-content: center; } .contact__info-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; } .contact__info-value { font-size: 15px; font-weight: 500; } .form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; box-shadow: var(--shadow-lg); } [data-theme="dark"] .form { background: var(--surface-elev); } .form__field { display: flex; flex-direction: column; gap: 6px; } .form__field--full { grid-column: 1 / -1; } .form__label { font-size: 12px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.04em; } .form__input, .form__textarea { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--surface); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } [data-theme="dark"] .form__input, [data-theme="dark"] .form__textarea { background: var(--bg); border-color: var(--line-strong); } .form__input::placeholder, .form__textarea::placeholder { color: var(--ink-3); } .form__input:focus, .form__textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form__textarea { min-height: 110px; resize: vertical; font-family: inherit; } .form__submit { grid-column: 1 / -1; } .form__note { grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); margin: 0; } @media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 40px; } .form { grid-template-columns: 1fr; padding: 28px; } } /* ============ Footer ============ */ .footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding: 64px 0 28px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); } .footer__brand .brand { color: var(--white); } .footer__about { margin-top: 16px; font-size: 14px; max-width: 32ch; line-height: 1.55; } .footer h4 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin: 0 0 18px; font-weight: 600; } .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer a { font-size: 14px; transition: color .2s var(--ease); } .footer a:hover { color: var(--white); } .footer__bottom { padding-top: 28px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.5); flex-wrap: wrap; gap: 12px; } @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } } /* ============================================================ FOOTER v2 — institutional / pharma tone ============================================================ */ .footer--v2 { background: var(--navy-900); color: rgba(255,255,255,0.62); padding: clamp(64px, 9vh, 96px) 0 28px; position: relative; } .footer--v2::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 18%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.10) 82%, transparent 100%); } .footer--v2 .footer__top { display: grid; grid-template-columns: 1.25fr 2fr; gap: clamp(40px, 6vw, 88px); padding-bottom: clamp(40px, 6vh, 64px); border-bottom: 1px solid rgba(255,255,255,0.08); } .footer--v2 .footer__brand-block .brand { color: #fff; } .footer--v2 .footer__statement { margin-top: 18px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.70); max-width: 36ch; } .footer__creds { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; } .footer__cred { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: rgba(255,255,255,0.62); line-height: 1.4; } .footer__cred-tag { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; padding: 3px 7px; min-width: 42px; text-align: center; flex-shrink: 0; } .footer__cred-text { letter-spacing: 0.005em; } .footer--v2 .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); } .footer--v2 .footer__col h4 { font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 18px; font-weight: 500; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer--v2 .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer--v2 .footer__col a { font-size: 13.5px; color: rgba(255,255,255,0.72); letter-spacing: 0.005em; transition: color .2s var(--ease); } .footer--v2 .footer__col a:hover { color: #fff; } .footer--v2 .footer__bottom { padding-top: 24px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.48); flex-wrap: wrap; gap: 16px; } .footer__legal-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--font-sans); letter-spacing: 0.01em; } .footer__sep { color: rgba(255,255,255,0.25); } .footer__legal-links { display: flex; gap: 22px; } .footer__legal-links a { font-size: 12px; color: rgba(255,255,255,0.55); transition: color .2s var(--ease); } .footer__legal-links a:hover { color: #fff; } @media (max-width: 980px) { .footer--v2 .footer__top { grid-template-columns: 1fr; gap: 48px; } .footer--v2 .footer__cols { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .footer--v2 .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 540px) { .footer--v2 .footer__cols { grid-template-columns: 1fr; gap: 28px; } .footer--v2 .footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; } .footer__legal-line { flex-wrap: wrap; } .footer--v2 .footer__col ul { gap: 6px; } .footer--v2 .footer__col a { display: inline-block; padding: 6px 0; font-size: 14px; } .footer__legal-links { gap: 16px 22px; flex-wrap: wrap; } .footer__legal-links a { padding: 6px 0; font-size: 13px; } } /* ============================================================ RESPONSIVE — global polish & mobile UX ============================================================ */ /* === Tablet & medium screens === */ @media (max-width: 1024px) { :root { --container: 100%; } .container { padding: 0 28px; } } /* === Mobile (<= 900px) === */ @media (max-width: 900px) { .container { padding: 0 26px; } .section { padding: 64px 0; } .section__header { margin-bottom: 36px; } /* Headings adjustments — clamps already handle this but tighten */ .h2 { font-size: clamp(1.4rem, 4.6vw, 1.85rem); line-height: 1.22; } .h3 { font-size: 1.05rem; } .lead { font-size: 15px; } /* CTAs in nav */ .nav__inner { padding-top: 12px; padding-bottom: 12px; } .brand__logo { width: 30px; height: 30px; } .brand__wordmark { font-size: 13px; } /* Stats compactos */ .stats { padding: 36px 0; gap: 20px; } .stat__num { font-size: clamp(1.7rem, 6vw, 2.1rem); } .stat__label { font-size: 12px; } /* Servicios: padding del card y orden */ .service { padding: 24px; } /* Coverage: lista primero arriba del mapa para que se vea contenido sin scrollear tanto */ .coverage__map { padding: 20px; aspect-ratio: auto; min-height: 320px; } /* Marquee: spacing más cómodo en phones */ .marquee { padding: 6px 0; } .marquee + .marquee { margin-top: 10px; } .brand-pill { padding: 8px 14px; font-size: 12px; } /* Certs */ .cert { padding: 24px 20px; } /* Form */ .form { padding: 24px 20px; gap: 14px; } .form__input, .form__textarea { font-size: 16px; padding: 12px 14px; min-height: 44px; } .form__textarea { min-height: 120px; } /* Footer compacto */ .footer { padding: 48px 0 24px; } .footer__grid { padding-bottom: 36px; gap: 28px 36px; } .footer__bottom { gap: 8px; font-size: 12px; flex-direction: column; align-items: flex-start; } } /* === Small phones (<= 540px) === */ @media (max-width: 540px) { .container { padding: 0 28px; } .section { padding: 56px 0; } .nav__inner { padding-top: 10px; padding-bottom: 10px; } .nav__actions { gap: 8px; } .lang-toggle { padding: 0 10px; font-size: 11px; } .theme-toggle, .lang-toggle { height: 36px; } .btn { padding: 10px 18px; font-size: 13px; min-height: 44px; } .btn--lg { padding: 12px 22px; font-size: 14px; } /* Coverage list spacing */ .coverage__item { padding: 12px 14px; } .coverage__item-name { font-size: 14px; } .coverage__item-meta { font-size: 12px; } /* Process numbering tighter */ .step__num { font-size: 22px; } /* Marquee pills smaller */ .brand-pill { padding: 7px 12px; font-size: 11px; } .brand-pill b { font-size: 12px; } } /* === Touch device tweaks === */ @media (hover: none) and (pointer: coarse) { /* Disable premium hover-only effects on touch */ [data-tilt] { transform: none !important; } [data-magnetic] { transform: none !important; } .btn--primary:hover, .btn--ghost:hover, .btn--accent:hover, .service:hover, .cert:hover, .coverage__item:hover, .brand-pill:hover { transform: none; box-shadow: none; } /* Tactile :active feedback */ .btn:active { transform: scale(0.97); } .service:active, .cert:active, .coverage__item:active, .brand-pill:active { transform: scale(0.985); } /* Pause marquee animation on touch to save battery */ .marquee__track { animation-duration: 80s; } /* Hide command palette trigger on touch (no keyboard shortcut anyway) */ .cmdk { display: none !important; } } /* === Notched viewport (iPhone safe-area) — only adds insets in landscape === */ @supports (padding: max(0px)) { @media (max-width: 900px) and (orientation: landscape) { .container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } } .footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); } } /* ============================================================ HERO · LAYERED · Stripe-style depth ============================================================ */ .hero--layered { height: 100vh; height: 100svh; /* mobile: small-viewport unit, avoids URL-bar jump */ max-height: 920px; min-height: 640px; padding: 0; display: block; } /* All canvases & decorative layers absolute-pinned to the section */ .hero--layered .hero__mesh, .hero--layered .hero__cross, .hero--layered .hero__dots, .hero--layered .hero__vignette, .hero--layered .hero__rules { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hero--layered .hero__mesh { z-index: 0; } .hero--layered .hero__aurora { z-index: 0; } .hero--layered .hero__dots { z-index: 1; } .hero--layered .hero__world { z-index: 1; } .hero--layered .hero__cross { z-index: 2; } .hero--layered .hero__logo { z-index: 2; } .hero--layered .hero__vignette{ z-index: 3; } .hero--layered .hero__rules { z-index: 4; } .hero--layered .hero__container { z-index: 5; } /* ===== Floating brand isotype · 1:1 with header logo ===== */ .hero--layered .hero__logo { position: absolute; top: 50%; left: auto; /* Size AND position scale with the viewport (vw) so the whole composition shrinks/grows as a unit instead of drifting. Calibrated to the values the user approved at ~1660px (width 284px, ~260px from the right edge), with clamp() caps so it doesn't blow up on very wide / very narrow screens. */ right: clamp(120px, 15.6vw, 300px); width: clamp(208px, 19.7vw, 347px); aspect-ratio: 1 / 1; transform: translate(0px, calc(-50% + 120px)) perspective(2000px) rotateY(0deg) rotateX(0deg); transform-style: preserve-3d; pointer-events: none; filter: drop-shadow(0 30px 55px rgba(6, 16, 40, 0.65)); } /* Bright glow pooling on the floor below the isotype */ .hero__logo-glow { position: absolute; left: 50%; bottom: -3%; width: 140%; height: 22%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(120, 175, 255, 1) 0%, rgba(80, 140, 255, 0.7) 28%, rgba(62, 123, 250, 0.32) 52%, rgba(62, 123, 250, 0.12) 70%, transparent 82%); filter: blur(12px); z-index: 0; } /* Soft contact shadow cast on the floor below the isotype */ .hero__logo::after { content: ""; position: absolute; left: 50%; bottom: -15%; width: 97%; height: 41%; transform: translateX(calc(-50% + 8%)); background: radial-gradient(ellipse at center, rgba(4, 12, 32, 1) 0%, rgba(4, 12, 32, 0.58) 42%, transparent 72%); filter: blur(10px); z-index: -1; } .hero__logo-svg, .hero__logo-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; overflow: visible; } /* Frame: solid white, lifted with a soft cast shadow for depth */ .hero__logo-frame { color: #ffffff; filter: drop-shadow(0 2px 0 rgba(120, 150, 200, 0.55)) drop-shadow(0 10px 18px rgba(8, 20, 50, 0.55)); } /* Cross: single solid piece in brand blue, raised above the frame */ .hero__logo-cross { color: #3E7BFA; filter: drop-shadow(0 2px 0 rgba(20, 50, 130, 0.9)) drop-shadow(0 4px 1px rgba(15, 40, 110, 0.6)) drop-shadow(0 14px 22px rgba(20, 60, 160, 0.5)); } @media (max-width: 900px) { .hero--layered .hero__logo { opacity: 0.45; right: clamp(8px, 6vw, 48px); } } /* ===== Dotted world map + connection network (right half) ===== */ .hero--layered .hero__world { /* Size AND position scale with the viewport (vw) like the logo, so the map grows/shrinks as a unit instead of drifting. Calibrated to the values the user approved at ~1660px (width 992px, ~80px off the right edge). */ --world-dot: rgba(150, 200, 255, 0.72); position: absolute; top: 0; bottom: 0; left: auto; right: clamp(-140px, -4.8vw, 0px); width: clamp(640px, 59.8vw, 1100px); height: 100%; pointer-events: none; opacity: 0.95; transform: translateY(-40px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 92%, transparent); } /* Soft radial glow pooling behind the network's Costa Rica hub */ .hero__world::before { content: ""; position: absolute; inset: 0; background: radial-gradient(38% 46% at 30% 56%, rgba(91, 146, 255, 0.30), transparent 70%), radial-gradient(50% 60% at 62% 40%, rgba(60, 110, 220, 0.16), transparent 75%); filter: blur(6px); } .hero__world-map, .hero__world-net { position: absolute; inset: 0; width: 100%; height: 100%; /* Slightly compress vertically (less tall, same width) */ transform: scaleX(1.2) scaleY(0.968); transform-origin: center; } /* Glowing landmass silhouette behind the dots — kept dim inside so it reads as a thin luminous EDGE tracing the continents rather than a bright filled blob. A crisp tight halo sits right on the outline = the map's "borde de luz". */ .hero__world-map::before { content: ""; position: absolute; inset: 0; background: rgba(120, 170, 240, 0.05); -webkit-mask: url("assets/world.svg") center / contain no-repeat; mask: url("assets/world.svg") center / contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } /* Bright rim: a copy of the silhouette turned into a thin glowing OUTLINE via an SVG morphology filter (dilate − original = ring), so each continent gets a uniform luminous edge regardless of its position. */ .hero__world-map::after { content: ""; position: absolute; inset: 0; background: #bfe4ff; -webkit-mask: url("assets/world.svg") center / contain no-repeat; mask: url("assets/world.svg") center / contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; filter: url(#mapEdgeGlow); } /* Dot-matrix continents: a fine dot grid revealed only over landmasses by using the country-shapes SVG as an alpha mask. */ .hero__world-map { background-image: radial-gradient(var(--world-dot) 1px, transparent 1.5px); background-size: 7px 7px; background-position: center; -webkit-mask: url("assets/world.svg") center / contain no-repeat; mask: url("assets/world.svg") center / contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; filter: drop-shadow(0 0 12px rgba(91, 146, 255, 0.5)); } /* Connection network overlaid in the same coordinate space (same aspect) */ .hero__world-arcs path { stroke-width: 2; stroke-dasharray: 6 7; filter: drop-shadow(0 0 3px rgba(127, 212, 255, 0.95)) drop-shadow(0 0 8px rgba(91, 146, 255, 0.7)); animation: hero-arc-flow 5.5s linear infinite; } .hero__world-arcs path:nth-child(2) { animation-duration: 6.5s; } .hero__world-arcs path:nth-child(3) { animation-duration: 7.5s; } @keyframes hero-arc-flow { to { stroke-dashoffset: -130; } } .hero__world-nodes circle { fill: #d6e9ff; filter: drop-shadow(0 0 4px rgba(190, 224, 255, 1)) drop-shadow(0 0 9px rgba(120, 180, 255, 0.85)); } .hero__world-hub-core { fill: #7FD4FF; filter: drop-shadow(0 0 8px rgba(127, 212, 255, 1)); } .hero__world-hub-ring { fill: none; stroke: #7FD4FF; stroke-width: 1.4; transform-origin: 239px 436px; animation: hero-hub-pulse 2.6s ease-out infinite; } @keyframes hero-hub-pulse { 0% { transform: scale(1); opacity: 0.9; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } @media (max-width: 900px) { .hero__world { right: -18%; width: 96%; opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .hero__world-arcs path, .hero__world-hub-ring { animation: none; } } /* The container becomes a grid: nav-space, content, stats strip */ .hero--layered .hero__container { position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto; /* Nav is fixed at top (~64px tall) → reserve that + breathing room */ padding-top: clamp(80px, 10vh, 112px); padding-bottom: clamp(16px, 3vh, 32px); } /* Floating operational panel · top-right · compact glass */ .hero__panel { position: absolute; top: clamp(80px, 10vh, 112px); right: 24px; width: clamp(260px, 24vw, 340px); padding: 14px 16px; background: rgba(10, 22, 38, 0.55); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06); color: rgba(255,255,255,0.86); z-index: 6; } .hero__panel-head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); } .hero__panel-dot { width: 6px; height: 6px; border-radius: 50%; background: #6ee7d4; box-shadow: 0 0 0 4px rgba(110,231,212,0.18); animation: pv-pulse 2.4s ease-in-out infinite; } @keyframes pv-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(110,231,212,0.18); } 50% { box-shadow: 0 0 0 8px rgba(110,231,212,0.04); } } .hero__panel-label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.78); } .hero__panel-meta { margin-left: auto; font-size: 10.5px; font-family: var(--font-sans); letter-spacing: .04em; color: rgba(255,255,255,0.40); } .hero__panel-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } .hero__panel-feed li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.78); } .hero__panel-feed .feed__time { font-size: 10.5px; opacity: 0.55; font-family: var(--font-sans); } /* Main headline column */ .hero__main { max-width: 760px; align-self: center; padding-bottom: clamp(8px, 2vh, 24px); } .hero__title--display { font-family: var(--font-sans); font-size: clamp(34px, 4.4vw, 64px); line-height: 1.0; letter-spacing: -0.035em; font-weight: 600; margin: 8px 0 16px; color: #fff; /* depth shadow → reads as if the type is floating above the mesh */ text-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 30px 60px rgba(0,0,0,0.4); } .hero__title-line { display: block; } .hero__title-em { display: block; font-style: normal; font-weight: 500; color: rgba(255, 255, 255, 0.58); margin-top: 0.05em; position: relative; /* Cancel inherited text-shadow so the lower-opacity text stays readable */ text-shadow: none; } .hero--layered .hero__lead { max-width: 56ch; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; color: rgba(255,255,255,0.70); margin-bottom: 18px; } .hero--layered .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; } /* Eyebrow with coordinate-style index */ .eyebrow--coord { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.70); } .eyebrow--coord::before { display: none; } .eyebrow__index { color: inherit; opacity: 0.55; font-weight: 600; } .eyebrow__rule { width: 26px; height: 1px; background: currentColor; opacity: 0.28; } /* Architectural stats strip · floats at the bottom of hero, full width */ .hero--layered .hero__cta { margin-top: 20px; } .hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.10); padding: clamp(12px, 2vh, 20px) 0 clamp(10px, 2vh, 18px); position: relative; } .hero__stats::before { /* tiny top ticks like a measuring rule */ content: ''; position: absolute; inset: 0 0 auto 0; height: 8px; background-image: linear-gradient(to right, rgba(255,255,255,0.22) 1px, transparent 1px); background-size: 25% 100%; background-position: 0 0; opacity: 0.5; transform: translateY(-1px); } .hero__stat { position: relative; padding: 4px 22px; } .hero__stat + .hero__stat::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,0.08); } .hero__stat-num { font-family: var(--font-sans); font-size: clamp(24px, 2.6vw, 36px); line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: #fff; display: flex; align-items: baseline; gap: 2px; } .hero__stat-unit { font-size: 0.5em; color: rgba(255,255,255,0.50); font-weight: 400; margin-left: 4px; } .hero__stat-sep { color: rgba(255,255,255,0.30); margin: 0 2px; } .hero__stat-label { margin-top: 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,0.48); font-family: var(--font-sans); } /* Dot grid midground · CSS-only, very subtle */ .hero__dots { background-image: radial-gradient(rgba(158,197,255,0.18) 1px, transparent 1.4px); background-size: 36px 36px; background-position: 0 0; opacity: 0.55; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, #000 55%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, #000 55%, transparent 100%); } /* 3D cross canvas · positioned in the right portion of the hero */ .hero__cross { /* Sized via JS to match its parent (.hero) */ opacity: 0; transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1); } .hero__cross.is-ready { opacity: 1; } /* ============ Hero · Tablet (≤980px) ============ */ @media (max-width: 980px) { .hero--layered { height: auto; max-height: none; min-height: auto; padding-bottom: 0; } /* Switch to flex column so `order` works naturally on mobile */ .hero--layered .hero__container { padding-top: 104px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 28px; } /* Panel descends below main content, full width */ .hero__panel { position: relative; top: auto; right: auto; width: 100%; margin-top: 0; order: 2; } .hero__main { padding-bottom: 0; max-width: none; order: 1; } .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 18px 0; order: 3; } .hero__stat + .hero__stat:nth-child(3)::before { display: none; } /* 3D cross shrinks + moves so it doesn't overlap text */ .hero__cross { opacity: 0.35 !important; } /* Dot grid less prominent on tablet */ .hero__dots { opacity: 0.35; } } /* ============ Hero · Mobile (≤640px) ============ */ @media (max-width: 640px) { .hero--layered .hero__container { padding-top: 92px; padding-bottom: 20px; gap: 22px; } /* Title: ensure it's readable and tight */ .hero__title--display { font-size: clamp(34px, 9.5vw, 48px); line-height: 1.02; letter-spacing: -0.03em; margin: 12px 0 16px; text-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 16px 30px rgba(0,0,0,0.5); } .hero__title-em { font-size: 0.88em; } /* Eyebrow: keep compact, allow wrapping cleanly */ .eyebrow--coord { flex-wrap: wrap; gap: 8px; font-size: 10px; letter-spacing: 0.14em; } .eyebrow__rule { width: 20px; } /* Lead */ .hero--layered .hero__lead { font-size: 14.5px; line-height: 1.55; margin-bottom: 22px; } /* CTAs stack & stretch */ .hero--layered .hero__cta { gap: 10px; } .hero--layered .hero__cta .btn { flex: 1 1 auto; justify-content: center; min-width: 0; } /* Operational panel — compact */ .hero__panel { padding: 14px 14px; border-radius: 12px; } .hero__panel-head { padding-bottom: 10px; margin-bottom: 10px; } .hero__panel-label { font-size: 10px; } .hero__panel-meta { font-size: 10px; } .hero__panel-feed li { font-size: 12px; grid-template-columns: auto 1fr auto; gap: 8px; } .hero__panel-feed .feed__time { font-size: 10px; } /* Stats strip — denser */ .hero__stats { grid-template-columns: 1fr 1fr; padding: 18px 0 4px; gap: 14px 0; } .hero__stat { padding: 4px 14px; } .hero__stat-num { font-size: 26px; } .hero__stat-label { font-size: 9.5px; letter-spacing: 0.12em; margin-top: 6px; } .hero__stats::before { display: none; } /* hide tick marks on mobile */ .hero__stat + .hero__stat::before { display: none; } /* hide dividers */ /* Cross + dots → off on mobile (visual noise hurts content) */ .hero__cross { display: none; } .hero__dots { opacity: 0.25; background-size: 28px 28px; } /* Vignette: less aggressive */ .hero__vignette { background: radial-gradient(110% 80% at 50% 110%, rgba(6,16,28,0.80) 0%, rgba(6,16,28,0) 60%), radial-gradient(110% 70% at 50% -10%, rgba(6,16,28,0.55) 0%, rgba(6,16,28,0) 50%); } } /* ============ Hero · Tiny (≤380px) ============ */ @media (max-width: 380px) { .hero__title--display { font-size: 32px; } .hero__stat-num { font-size: 24px; } .hero--layered .hero__container { padding-top: 84px; } } /* ============================================================ TRUSTED PARTNER · SYSTEM TOKENS + COMPONENTS v=20260529tp ============================================================ */ /* ---------- Trusted tokens ---------- */ :root { --tp-mono: var(--font-sans); --tp-rule: rgba(11,29,51,.10); --tp-rule-strong: rgba(11,29,51,.18); --tp-ink-quiet: rgba(11,29,51,.58); --tp-bg-paper: #FAFBFD; --tp-bg-card: #FFFFFF; --tp-accent: #1C4267; } [data-theme="dark"] { --tp-rule: rgba(255,255,255,.10); --tp-rule-strong: rgba(255,255,255,.20); --tp-ink-quiet: rgba(255,255,255,.62); --tp-bg-paper: #0E2440; --tp-bg-card: #173354; --tp-accent: #7FB1FF; } /* ---------- mono-tag · etiqueta institucional ---------- */ .mono-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); line-height: 1; white-space: nowrap; } /* ============================================================ BRIDGE · continuación natural del hero Misma estética: navy + sans display + em opacity + eyebrow coord ============================================================ */ .bridge--hero-continuation { position: relative; isolation: isolate; overflow: hidden; background: #0B1D33; /* mismo navy base que el hero */ color: #fff; padding: clamp(96px, 14vw, 180px) 0 clamp(120px, 16vw, 200px); } /* Mesh background canvas — el motion.js puede engancharse aquí si querés */ .bridge__mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* Fallback aurora hasta que motion.js inicialice (si lo conectamos) */ background: radial-gradient(ellipse 60% 50% at 78% 30%, rgba(91,146,255,0.22), transparent 60%), radial-gradient(ellipse 50% 40% at 18% 70%, rgba(127,212,255,0.14), transparent 65%), radial-gradient(ellipse 80% 60% at 50% 100%, rgba(11,29,51,0.6), transparent 70%); filter: blur(40px); opacity: 0.85; } /* Vignette: disuelve los bordes hacia el navy base, sin fade pastel al final */ .bridge__vignette { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(11,29,51,0.7) 85%, #0B1D33 100%); } .bridge--hero-continuation .bridge__inner { position: relative; z-index: 2; max-width: 920px; display: grid; gap: 0; } /* Eyebrow coord — exactamente como en el hero */ .bridge__eyebrow { margin-bottom: clamp(28px, 4vw, 44px); } /* Statement con la MISMA tipografía display del hero */ .bridge--hero-continuation .bridge__statement { font-family: var(--font-sans); font-size: clamp(34px, 5vw, 68px); line-height: 1.0; letter-spacing: -0.035em; font-weight: 600; color: #fff; margin: 0; text-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 30px 60px rgba(0,0,0,0.4); } .bridge__line { display: block; } .bridge__em { display: block; font-style: normal; font-weight: 500; color: rgba(255, 255, 255, 0.58); margin-top: 0.08em; text-shadow: none; } /* Lead corto debajo, mismo treatment que hero__lead */ .bridge__lead { font-family: var(--font-sans); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; color: rgba(255,255,255,0.70); max-width: 56ch; margin: clamp(24px, 3vw, 32px) 0 0; } @media (max-width: 640px) { .bridge--hero-continuation { padding: clamp(64px, 16vw, 96px) 0 clamp(72px, 18vw, 104px); } .bridge--hero-continuation .bridge__statement { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.05; letter-spacing: -0.028em; } .bridge__em { font-size: 0.88em; } .bridge__lead { font-size: 14.5px; line-height: 1.55; margin-top: clamp(20px, 5vw, 28px); } } /* ============================================================ TP HEADER · header institucional para secciones ============================================================ */ .section--tp .tp-header, .tp-header { display: grid; gap: 14px; max-width: 760px; margin: 0 0 clamp(48px, 7vw, 80px); } .tp-header__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tp-header__meta::before { content: ''; display: block; width: 40px; height: 1px; background: var(--tp-accent); opacity: .8; } .tp-header__id { margin-left: auto; color: var(--tp-ink-quiet); } .tp-header__title { font-family: var(--font-display, var(--font-sans)); font-weight: 600; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); margin: 0; } .tp-header__lead { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--ink-2); max-width: 64ch; margin: 0; } @media (max-width: 640px) { .tp-header__id { margin-left: 0; width: 100%; } } /* ============================================================ #nosotros · TP credo (misión/visión) + principios ============================================================ */ .tp-credo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--tp-rule-strong); border-bottom: 1px solid var(--tp-rule-strong); margin-bottom: clamp(56px, 8vw, 96px); } .tp-credo__block { margin: 0; padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px); display: grid; gap: 14px; } .tp-credo__block + .tp-credo__block { border-left: 1px solid var(--tp-rule); } .tp-credo__quote { font-family: var(--font-serif, 'Instrument Serif'), serif; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); margin: 0; font-weight: 400; } @media (max-width: 720px) { .tp-credo { grid-template-columns: 1fr; } .tp-credo__block + .tp-credo__block { border-left: 0; border-top: 1px solid var(--tp-rule); } } /* Principles */ .tp-principles { display: grid; grid-template-columns: 1fr 2.4fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .tp-principles__header { position: sticky; top: 100px; display: grid; gap: 14px; } .tp-principles__intro { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 28ch; } .tp-principles__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--tp-rule); } .tp-principle { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 36px); align-items: start; padding: clamp(24px, 3.5vw, 36px) 0; border-bottom: 1px solid var(--tp-rule); position: relative; transition: background .3s ease; } .tp-principle:hover { background: linear-gradient(90deg, var(--tp-rule) 0%, transparent 30%); } .tp-principle__num { font-family: var(--tp-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--tp-accent); padding-top: 4px; min-width: 28px; } .tp-principle__body { display: grid; gap: 8px; } .tp-principle__title { font-family: var(--font-sans, system-ui); font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0; line-height: 1.25; } .tp-principle__desc { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 64ch; } @media (max-width: 860px) { .tp-principles { grid-template-columns: 1fr; gap: 32px; } .tp-principles__header { position: static; } .tp-principles__intro { max-width: none; } } /* ============================================================ #servicios · CAPABILITY DECK ============================================================ */ .capability-deck { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--tp-rule-strong); } .capability { display: grid; grid-template-columns: 200px 1fr 280px; gap: clamp(24px, 3.5vw, 48px); align-items: start; padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--tp-rule); position: relative; transition: background .4s cubic-bezier(.22,.61,.36,1); } .capability::before { /* indicador vertical izquierdo, aparece en hover */ content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 2px; background: var(--tp-accent); transform: scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(.22,.61,.36,1); } .capability:hover { background: linear-gradient(90deg, var(--tp-rule) 0%, transparent 40%); } .capability:hover::before { transform: scaleY(1); } .capability__index { display: grid; gap: 10px; padding-top: 6px; position: sticky; top: 100px; } .capability__num { font-family: var(--tp-mono); font-size: clamp(40px, 5vw, 64px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .capability__label { color: var(--tp-accent); font-weight: 600; } .capability__body { display: grid; gap: 14px; padding-top: 12px; } .capability__title { font-family: var(--font-sans, system-ui); font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0; line-height: 1.2; } .capability__desc { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch; } .capability__kpis { list-style: none; padding: 16px 0 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--tp-rule); } .capability__kpis li { display: grid; gap: 4px; padding: 0 12px; border-right: 1px solid var(--tp-rule); } .capability__kpis li:last-child { border-right: 0; } .capability__kpi-val { font-family: var(--tp-mono); font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1; } .capability__kpi-label { font-family: var(--tp-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tp-ink-quiet); line-height: 1; } @media (max-width: 980px) { .capability { grid-template-columns: 100px 1fr; gap: 24px; } .capability__kpis { grid-column: 1 / -1; margin-top: 8px; } .capability__index { position: static; padding-top: 0; } .capability__num { font-size: 36px; } } @media (max-width: 540px) { .capability { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; } .capability__index { display: flex; align-items: baseline; gap: 14px; } .capability__num { font-size: 28px; } .capability__kpis { grid-template-columns: repeat(3, 1fr); padding-top: 12px; } .capability__kpis li { padding: 0 8px; } .capability__kpi-val { font-size: 15px; } .capability__kpi-label { font-size: 9px; } } /* ============================================================ DARK ADJUSTMENTS ============================================================ */ /* Bridge usa navy fijo del hero — no overrides en dark theme */ /* ============================================================ TRUSTED PARTNER · v=20260529tp2 #nosotros team block + lean capability deck ============================================================ */ /* Operational pillars in #nosotros */ .tp-pillars-block { margin-bottom: clamp(48px, 7vw, 72px); } .tp-pillars-block__head { text-align: center; max-width: 60ch; margin: 0 auto clamp(28px, 3.5vw, 44px); display: grid; gap: 10px; justify-items: center; } .tp-pillars-block__title { font-family: var(--font-display, var(--font-sans)); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .tp-pillars-block__sub { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: var(--ink-2); margin: 0; } .tp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); } .tp-pillar { display: grid; gap: 12px; padding: clamp(26px, 2.8vw, 36px); background: var(--navy-900); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } [data-theme="dark"] .tp-pillar { background: var(--surface-elev); border-color: var(--line); } .tp-pillar:hover { border-color: var(--blue-500); box-shadow: var(--shadow); transform: translateY(-3px); } .tp-pillar__icon { width: 44px; height: 44px; color: #7FB1FF; } .tp-pillar__icon svg { width: 100%; height: 100%; } .tp-pillar__title { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.01em; color: #fff; margin: 4px 0 0; } .tp-pillar__desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0; } @media (max-width: 820px) { .tp-pillars { grid-template-columns: 1fr; } } /* Misión / Visión en #nosotros */ .tp-mv { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 28px); margin-bottom: clamp(48px, 7vw, 72px); } .tp-mv__card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 2.6vw, 32px); align-items: start; padding: clamp(32px, 3.4vw, 48px); background: var(--bg-2); border: 1px solid var(--tp-rule-strong); border-radius: var(--radius); overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .tp-mv__card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--blue-500), transparent); opacity: .65; } .tp-mv__card--vision::before { background: linear-gradient(180deg, var(--tp-accent, #0B1D33), transparent); } .tp-mv__card:hover { border-color: var(--blue-500); box-shadow: var(--shadow); transform: translateY(-3px); } .tp-mv__index { font-family: var(--font-display, var(--font-sans)); font-size: clamp(40px, 5vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--blue-500); opacity: .5; } .tp-mv__card--vision .tp-mv__index { color: var(--tp-accent, #0B1D33); } .tp-mv__body { display: grid; gap: 14px; } .tp-mv__label { color: var(--accent); } .tp-mv__text { font-family: var(--font-display, var(--font-sans)); font-size: clamp(17px, 1.55vw, 21px); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); margin: 0; } @media (max-width: 820px) { .tp-mv { grid-template-columns: 1fr; } } /* Why Costa Rica — market context cards */ .whycr__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); } .whycr__card { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 2.6vw, 34px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .whycr__card:hover { border-color: var(--blue-500); box-shadow: var(--shadow); transform: translateY(-3px); } .whycr__icon { width: 40px; height: 40px; color: var(--blue-500); } .whycr__icon svg { width: 100%; height: 100%; } .whycr__card-title { font-family: var(--font-display, var(--font-sans)); font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0; } .whycr__card-desc { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; } @media (max-width: 980px) { .whycr__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .whycr__grid { grid-template-columns: 1fr; gap: 12px; } .whycr__card { padding: 22px 20px; gap: 12px; } .whycr__icon { width: 34px; height: 34px; } .whycr .section__header { margin-bottom: 24px; } } /* Comparativa — operación propia vs Pharma-V */ .vs__table { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } [data-theme="dark"] .vs__table { background: var(--surface-elev); } .vs__head, .vs__row { display: grid; grid-template-columns: 1.15fr 1.35fr 1.35fr; align-items: stretch; } .vs__head { background: var(--surface-strong); border-bottom: 1px solid var(--line); } [data-theme="dark"] .vs__head { background: var(--surface); } .vs__head-cell { padding: clamp(15px, 1.6vw, 19px) clamp(18px, 1.9vw, 24px); font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; } .vs__head-cell--pv { color: #fff; background: var(--accent); } [data-theme="dark"] .vs__head-cell--pv { color: #fff; background: var(--accent); } .vs__row { border-top: 1px solid var(--line); transition: background .2s var(--ease); } .vs__row:hover { background: var(--surface-strong); } [data-theme="dark"] .vs__row:hover { background: rgba(255,255,255,.03); } .vs__row:hover .vs__pv { background: var(--accent-soft); } .vs__row > span { padding: clamp(17px, 1.9vw, 22px) clamp(18px, 1.9vw, 24px); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); display: flex; align-items: flex-start; gap: 10px; } .vs__task { font-weight: 600; color: var(--ink) !important; align-items: center !important; } .vs__own { color: var(--ink-3) !important; } .vs__own::before { content: ''; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; background: var(--ink-3); opacity: .55; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .vs__pv { background: var(--accent-soft); color: var(--ink) !important; font-weight: 500; } .vs__pv::before { content: ''; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; background: var(--accent); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } @media (max-width: 720px) { .vs__table { box-shadow: var(--shadow-sm, var(--shadow)); } .vs__head { display: none; } .vs__row { grid-template-columns: 1fr; padding: 6px 0 10px; } .vs__row:hover { background: transparent; } .vs__row > span { border-left: none; padding-top: 12px; padding-bottom: 12px; } .vs__task { background: var(--surface-strong); padding-top: 14px; padding-bottom: 14px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent) !important; } [data-theme="dark"] .vs__task { background: var(--surface); } .vs__own::after { content: 'Operación propia'; } .vs__pv { margin: 4px 12px 0; border-radius: 10px; border-left: none !important; } .vs__pv::after { content: 'Con Pharma-V'; } .vs__own::after, .vs__pv::after { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; order: -1; flex-basis: 100%; } .vs__pv::after { color: var(--accent); } } /* Team block in #nosotros (founding team) */ .tp-team { display: grid; gap: clamp(32px, 5vw, 56px); padding: clamp(48px, 7vw, 72px) 0 0; border-top: 1px solid var(--tp-rule-strong); } .tp-team__head { display: grid; gap: 12px; max-width: 56ch; margin: 0 auto; text-align: center; justify-items: center; } .tp-team__intro { font-family: var(--font-display, var(--font-sans)); font-weight: 600; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .tp-team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); } .tp-person { display: grid; grid-template-columns: 88px 1fr; gap: 24px; align-items: start; } .tp-person__photo { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.4), transparent 60%), linear-gradient(135deg, var(--tp-accent), var(--bg-2)); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-family: var(--tp-mono); font-size: 18px; font-weight: 500; letter-spacing: 0.05em; border: 1px solid var(--tp-rule-strong); box-shadow: inset 0 0 0 4px rgba(255,255,255,.08); } [data-theme="dark"] .tp-person__photo { background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, var(--bg-3), var(--bg-2)); } .tp-person__initials { opacity: .9; } .tp-person__photo--img { background: var(--bg-2); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .tp-person__photo--img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .tp-person__body { display: grid; gap: 6px; padding-top: 6px; } .tp-person__name { font-family: var(--font-sans, system-ui); font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0; line-height: 1.2; } .tp-person__role { font-family: var(--font-sans, system-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tp-accent); margin: 0; line-height: 1.45; } .tp-person__cred { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 4px 0 0; max-width: 36ch; } .tp-team__note { margin-top: 8px; color: var(--tp-ink-quiet); opacity: .7; font-size: 10px; } @media (max-width: 720px) { .tp-team__grid { grid-template-columns: 1fr; gap: 32px; } .tp-person { grid-template-columns: 64px 1fr; gap: 18px; } .tp-person__photo { width: 64px; height: 64px; font-size: 14px; } } /* Lean capability deck (sin KPIs columna derecha) */ .capability-deck--lean .capability { grid-template-columns: 100px 1fr; } .capability-deck--lean .capability__num { font-size: clamp(36px, 4vw, 48px); font-weight: 300; } .capability-deck--lean .capability__body { padding-top: 8px; } .capability-deck--lean .capability__title { font-family: var(--font-serif, 'Instrument Serif'), serif; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.2; } .capability-deck--lean .capability__desc { font-size: 15.5px; max-width: 56ch; } @media (max-width: 640px) { .capability-deck--lean .capability { grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; } .capability-deck--lean .capability__num { font-size: 28px; } .capability-deck--lean .capability__title { font-size: 20px; } } /* ============================================================ PILLS · #servicios v=20260529tp6 Sticky 3D capsule + one service visible at a time Aesthetic complexity at hero-level, low info density ============================================================ */ .pills { position: relative; background: var(--bg); padding: clamp(80px, 10vw, 140px) 0 clamp(48px, 6vw, 80px); isolation: isolate; /* `clip` instead of `hidden` so position:sticky descendants keep working. */ overflow: clip; } /* Subtle top accent line */ .pills::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1200px, calc(100% - 48px)); height: 1px; background: linear-gradient(90deg, transparent, var(--tp-rule-strong) 20%, var(--tp-rule-strong) 80%, transparent); } /* --- Intro header --- */ .pills__intro { margin-bottom: clamp(48px, 7vw, 80px); } .pills__header { max-width: 760px; display: grid; gap: 18px; } .pills__eyebrow { color: var(--ink-2); } [data-theme="dark"] .pills__eyebrow { color: rgba(255,255,255,.7); } .pills__title { font-family: var(--font-display, var(--font-sans)); font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; color: var(--ink); margin: 0; max-width: 18ch; } /* --- Stage: 2-col sticky layout --- */ .pills__stage { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; } /* --- LEFT · sticky 3D visual --- */ .pills__visual { position: sticky; top: 96px; align-self: start; /* Match the pill's min-height so the cross stays vertically aligned with the pill title at every scroll position, including the last one. */ height: 60vh; max-height: 640px; min-height: 440px; display: flex; flex-direction: column; gap: 24px; } .pills__art { flex: 1 1 auto; width: 100%; min-height: 0; /* allow shrink */ position: relative; display: grid; place-items: center; isolation: isolate; } /* Soft circular halo behind the icon — echoes the 360° wheel reference, tinted with the active service's brand color. */ .pills__art-halo { position: absolute; z-index: -1; width: min(78%, 420px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--pills-active-color, #1C4267) 16%, transparent) 0%, color-mix(in srgb, var(--pills-active-color, #1C4267) 6%, transparent) 45%, transparent 70%); border: 1px solid color-mix(in srgb, var(--pills-active-color, #1C4267) 22%, transparent); transition: background .6s var(--ease), border-color .6s var(--ease); } .pills__art-halo::after { content: ''; position: absolute; inset: 16%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--pills-active-color, #1C4267) 18%, transparent); } /* Each illustration sits stacked; only the active one is shown. */ .pills__art-fig { grid-area: 1 / 1; margin: 0; width: min(46%, 220px); color: var(--pills-active-color, #1C4267); opacity: 0; transform: scale(0.9) translateY(8px); transition: opacity .5s var(--ease), transform .55s var(--ease); pointer-events: none; } .pills__art-fig svg { width: 100%; height: 100%; display: block; } .pills__art-fig.is-active { opacity: 1; transform: scale(1) translateY(0); } @media (prefers-reduced-motion: reduce) { .pills__art-fig { transition: opacity .2s linear; transform: none; } .pills__art-fig.is-active { transform: none; } } /* Progress: 5 stages — número monoespaciado + hairline arquitectónica IMPORTANTE: ningún cambio de tamaño/layout entre estados (active/done/pending) para evitar reflow del sticky container que reseteaba el WebGL canvas. */ .pills__progress { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; width: 100%; } .pills__tick { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 14px 0 0; cursor: default; user-select: none; } .pills__tick:last-child { padding-right: 0; } .pills__tick-num { font-family: var(--tp-mono, 'SF Mono', 'JetBrains Mono', ui-monospace, monospace); font-size: 11px; letter-spacing: 0.16em; font-weight: 500; color: rgba(11,29,51,0.32); /* sólo color/opacity transitions — nunca tamaño/peso/letter-spacing */ transition: color .4s cubic-bezier(.22,.61,.36,1); line-height: 1; } .pills__tick-rule { position: relative; display: block; /* GROSOR FIJO en todos los estados — sin reflow */ height: 4px; background: rgba(11,29,51,0.10); border-radius: 2px; overflow: hidden; } .pills__tick-rule::after { content: ''; position: absolute; inset: 0; background: var(--tp-accent, #0B1D33); transform: scaleX(0); transform-origin: left center; /* sólo transform/opacity/background — composited, no causa reflow */ transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .35s ease, background .4s ease; } /* Done: rule llena, opacidad media; número en gris medio */ .pills__tick.is-done .pills__tick-num { color: rgba(11,29,51,0.48); } .pills__tick.is-done .pills__tick-rule::after { transform: scaleX(1); opacity: 0.35; } /* Active: número en color del brandbook, rule llena en color del brandbook */ .pills__tick.is-active .pills__tick-num { color: var(--pills-active-color, var(--tp-accent, #0B1D33)); } .pills__tick.is-active .pills__tick-rule::after { background: var(--pills-active-color, var(--tp-accent, #0B1D33)); transform: scaleX(1); opacity: 1; } /* Done: rule queda llena pero apagada — usa accent neutral del tema */ .pills__tick.is-done .pills__tick-rule::after { background: var(--tp-accent, #0B1D33); } /* Dark theme */ [data-theme="dark"] .pills__tick-num { color: rgba(255,255,255,0.32); } [data-theme="dark"] .pills__tick.is-done .pills__tick-num { color: rgba(255,255,255,0.48); } [data-theme="dark"] .pills__tick.is-active .pills__tick-num { color: #fff; } [data-theme="dark"] .pills__tick-rule { background: rgba(255,255,255,0.10); } [data-theme="dark"] .pills__tick-rule::after { background: #fff; } /* --- RIGHT · list of services --- */ .pills__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40vh, 50vh, 56vh); } .pill { display: grid; gap: 18px; align-content: center; min-height: 60vh; scroll-margin-top: 100px; opacity: 0.32; /* PERF: dropped `filter: blur(2px)` — it triggered "Compositing failed: filter-related property may move pixels", forcing main-thread paint of 5 × 60vh layers on every scroll frame. Opacity-only de-emphasis is GPU-composited and visually equivalent at this scale. */ transition: opacity 0.5s cubic-bezier(0.22,0.61,0.36,1); will-change: opacity; } /* Last pill: keep the same vertical rhythm as the rest (centered, full min-height). Only collapse what comes AFTER (the section padding handles the close). */ .pill:last-child { /* Inherits min-height: 60vh + align-content: center from .pill — same as 01–04 */ } .pill.is-active { opacity: 1; } .pill__num { font-family: var(--tp-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; color: var(--pill-color, var(--tp-accent)); line-height: 1; } .pill__title { font-family: var(--font-display, var(--font-sans)); font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; color: var(--ink); margin: 0; max-width: 16ch; } .pill__desc { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 56ch; } /* --- Mobile / tablet: single column, capsule smaller above, no sticky --- */ @media (max-width: 980px) { .pills__stage { grid-template-columns: 1fr; gap: 0; } .pills__visual { position: sticky; top: 60px; height: 32vh; min-height: 220px; max-height: 300px; margin-bottom: 24px; z-index: 2; overflow: hidden; background: var(--bg); box-shadow: 0 18px 22px 10px var(--bg); } .pills__art-fig { width: min(30%, 120px); } .pills__art-halo { width: auto; height: min(82%, 200px); } .pills__progress { padding: 0; } .pills__list { gap: 32vh; } .pill { min-height: 50vh; } } @media (max-width: 640px) { .pills__visual { height: 24vh; min-height: 168px; max-height: 220px; top: 56px; } .pills__art-fig { width: min(26%, 96px); } .pills__art-halo { width: auto; height: min(78%, 160px); } .pill__title { font-size: clamp(26px, 7.5vw, 36px); max-width: none; line-height: 1.1; letter-spacing: -0.02em; } .pill__desc { max-width: none; font-size: 15px; line-height: 1.55; } .pill { min-height: 44vh; } .pills__list { gap: 24vh; } } /* ============================================================ TIMELINE · #proceso · vertical, low-density, pharma-narrative Same visual family as pills (mono-tag header, editorial type), but lighter: no sticky, no 3D, lots of breathing room. ============================================================ */ .timeline { list-style: none; margin: clamp(48px, 8vw, 96px) auto 0; padding: 0; max-width: 920px; position: relative; } /* Vertical rule running the full height of the list */ .timeline::before { content: ''; position: absolute; left: 88px; top: 8px; bottom: 8px; width: 1px; background: var(--tp-rule, rgba(11,29,51,0.12)); } .timeline__phase { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: clamp(32px, 5vw, 64px); padding: clamp(28px, 4vw, 48px) 0; } /* Dot marker on the rule */ .timeline__phase::before { content: ''; position: absolute; left: 84px; top: clamp(36px, 4.5vw, 56px); width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ink); z-index: 1; } .timeline__meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 4px; } .timeline__num { font-family: var(--tp-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; } .timeline__when { font-family: var(--tp-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-2); text-transform: uppercase; white-space: nowrap; } .timeline__body { display: grid; gap: 12px; max-width: 56ch; } .timeline__title { font-family: var(--font-display, var(--font-sans)); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); margin: 0; } .timeline__desc { font-size: clamp(15px, 1.05vw, 16px); line-height: 1.65; color: var(--ink-2); margin: 0; } /* Mobile: collapse the meta column above the body */ @media (max-width: 640px) { .timeline::before { left: 11px; } .timeline__phase { grid-template-columns: 1fr; gap: 12px; padding: 28px 0 28px 32px; } .timeline__phase::before { left: 7px; top: 36px; } .timeline__meta { flex-direction: row; align-items: center; gap: 14px; } } /* ============================================================ COMPLIANCE · #certificaciones · institutional ledger Same family as timeline, denser, regulatory tone. ============================================================ */ .compliance__lead { font-family: var(--font-sans); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; color: var(--ink-2); max-width: 64ch; margin: clamp(20px, 2.4vw, 28px) 0 0; } .compliance { list-style: none; margin: clamp(40px, 6vw, 72px) auto 0; padding: 0; max-width: 920px; position: relative; } .compliance::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--tp-rule, rgba(11,29,51,0.12)); } .compliance__item { position: relative; display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 3.2vw, 36px) 0 clamp(24px, 3.2vw, 36px) clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--tp-rule, rgba(11,29,51,0.08)); } .compliance__item:last-child { border-bottom: 0; } /* Tick on the rule */ .compliance__item::before { content: ''; position: absolute; left: -1px; top: clamp(30px, 3.6vw, 42px); width: 12px; height: 1px; background: var(--accent); } .compliance__meta { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; } .compliance__tag { font-family: var(--tp-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; } .compliance__source { font-family: var(--tp-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-2); opacity: 0.85; } .compliance__body { display: grid; gap: 10px; max-width: 56ch; } .compliance__title { font-family: var(--font-display, var(--font-sans)); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; color: var(--ink); margin: 0; } .compliance__desc { font-size: clamp(14px, 1vw, 15.5px); line-height: 1.65; color: var(--ink-2); margin: 0; } @media (max-width: 720px) { .compliance::before { left: 0; } .compliance__item { grid-template-columns: 1fr; gap: 14px; padding: 22px 0 22px 20px; } .compliance__item::before { top: 30px; width: 10px; } .compliance__meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; } .compliance__title { font-size: 19px; line-height: 1.25; } .compliance__desc { font-size: 14.5px; line-height: 1.6; } } /* ============================================================ CONTACTO V2 · #contacto · two paths, pharma intake form Dark section. Path A (form qualifier) + Path B (direct). ============================================================ */ .mono-tag--light { color: #7FD4FF; } .contact-v2__header { max-width: 760px; margin: 0 auto; text-align: center; display: grid; gap: clamp(20px, 2.6vw, 28px); } .contact-v2__title { font-family: var(--font-display, var(--font-sans)); font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; color: #fff; margin: 0; } .contact-v2__lead { font-family: var(--font-sans); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0 auto; max-width: 60ch; } .contact-v2__paths { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 56px); margin-top: clamp(48px, 6vw, 80px); align-items: start; } @media (max-width: 920px) { .contact-v2__paths { grid-template-columns: 1fr; } } .contact-path { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: clamp(28px, 3.4vw, 44px); display: grid; gap: clamp(24px, 3vw, 32px); } .contact-path--secondary { background: transparent; border: 1px solid rgba(255,255,255,0.10); } .contact-path__head { display: grid; gap: 8px; align-items: start; } .contact-path__num { font-family: var(--tp-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; color: #7FD4FF; text-transform: uppercase; border: 1px solid rgba(127,212,255,0.4); border-radius: 6px; padding: 6px 0; text-align: center; width: 36px; } .contact-path__title { font-family: var(--font-display, var(--font-sans)); font-size: clamp(20px, 1.95vw, 26px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; color: #fff; margin: 0 0 8px; } .contact-path__sub { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.65); margin: 0; max-width: 52ch; } /* --- Form (path A) --- */ .contact-form { display: grid; gap: 18px; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 540px) { .contact-form__row { grid-template-columns: 1fr; } } .contact-form__field { display: grid; gap: 6px; } .contact-form__label { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: rgba(255,255,255,0.72); } .contact-form__input, .contact-form__textarea { font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: #fff; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 12px 14px; min-height: 44px; outline: none; transition: border-color .2s ease, background .2s ease; } .contact-form__input::placeholder, .contact-form__textarea::placeholder { color: rgba(255,255,255,0.32); } .contact-form__input:focus, .contact-form__textarea:focus { border-color: rgba(127,212,255,0.6); background: rgba(127,212,255,0.04); } .contact-form__textarea { resize: vertical; min-height: 96px; } .contact-form__chips { display: flex; flex-wrap: wrap; gap: 8px; } .contact-form__chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 38px; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; font-size: 13px; color: rgba(255,255,255,0.75); cursor: pointer; /* PERF: avoid `transition: all` — captures non-compositable props (color, border-color, background) and forces main-thread paint. Explicit list keeps the visual feel on hover/checked without compositor failures. */ transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .contact-form__chip input { display: none; } .contact-form__chip:hover { border-color: rgba(127,212,255,0.4); color: #fff; } .contact-form__chip:has(input:checked) { border-color: #7FD4FF; background: rgba(127,212,255,0.10); color: #fff; } .contact-form__submit { justify-self: start; margin-top: 4px; } .contact-form__note { font-family: var(--font-sans); font-size: 12px; line-height: 1.55; letter-spacing: 0.01em; color: rgba(255,255,255,0.45); margin: 0; max-width: 60ch; } /* --- Direct (path B) --- */ .contact-direct { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .contact-direct__item { display: grid; gap: 4px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; } .contact-direct__item:first-child { border-top: 0; padding-top: 0; } .contact-direct__label { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: rgba(255,255,255,0.6); } .contact-direct__value { font-family: var(--font-sans); font-size: 16px; color: #fff; text-decoration: none; transition: color .2s ease; } a.contact-direct__value:hover { color: #7FD4FF; } .contact-direct__note { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.6; letter-spacing: 0.01em; color: rgba(255,255,255,0.55); border-top: 1px solid rgba(255,255,255,0.08); padding-top: 18px; margin-top: 4px; }