/* ========================================================= NEMESIS AML — Custom Styles & Animations ========================================================= */ :root { --navy-deep: #0A1628; --navy-mid: #112240; --cyan: #00C9C8; --cyan-ink: #0A807F; /* cian apagado (teal) para fondo claro: no vibra ni daña la vista */ --cyan-dim: rgba(0, 201, 200, 0.15); --cyan-glow: rgba(0, 201, 200, 0.35); --white: #FFFFFF; --bg-light: #EEF1F6; /* off-white frío (fondo de los inputs del formulario) */ --text-muted: #8892A4; --text-dark: #1A2940; /* Tonos de texto suavizados (bajan el contraste extremo SIN salir de paleta) */ --text-on-dark: #E8EEF6; /* blanco suave (frío) para titulares/datos sobre oscuro — evita el deslumbre del #fff puro */ --ink: #17263C; /* tinta navy suave para titulares sobre claro — menos duro que el near-black */ --border: rgba(0, 201, 200, 0.2); --footer-bg: #060D1A; /* Grano FINO casi imperceptible (calidad de superficie, no textura visible) */ --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"); /* Motion — custom easing curves (stronger than CSS defaults) */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ─── Base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 140px; /* deja libre el navbar fijo al saltar a anclas */ } /* Lenis smooth scroll (clases añadidas por la librería en ) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Foco de teclado visible (a11y) */ a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } body { font-family: 'DM Sans', sans-serif; font-size: 1.125rem; /* 18px = Tailwind text-lg — cómodo para perfil corporativo */ line-height: 1.75; /* backdrop base = navy profundo + grano fino (web oscura atmosférica; las secciones llevan su propia atmósfera encima). Sin lienzos blancos. */ background-color: var(--navy-deep); background-image: var(--grain-fine); background-size: 180px 180px; /* sin background-attachment:fixed → evita repaint del viewport al hacer scroll */ color: rgba(255, 255, 255, 0.78); overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ─── Sistema de superficies — OSCURO ATMOSFÉRICO (polar.sh / rig.ai / Hero) ── Base navy/near-black. Cada sección tiene su propia ATMÓSFERA (glows radiales cian a baja opacidad en posiciones distintas, malla, viñeta, motivo de columnas del Hero) + ruido fino. La diferenciación viene de la profundidad y la luz, no del blanco. Texto claro. Costuras = hairlines luminosas. */ .surface-dark { position: relative; isolation: isolate; color: rgba(255, 255, 255, 0.74); background-color: var(--navy-deep); } /* El contenido por encima de la capa de atmósfera */ .surface-dark > .max-w-7xl, .surface-dark > .max-w-6xl, .surface-dark > .max-w-5xl { position: relative; z-index: 1; } /* Costura superior luminosa (cian que desvanece en los extremos) */ .surface-dark::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; z-index: 3; background: linear-gradient(90deg, transparent, rgba(0, 201, 200, 0.30) 14%, rgba(0, 201, 200, 0.30) 86%, transparent); } /* Capa de ruido fino sobre cada superficie oscura (calidad de superficie) */ .surface-dark::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain-fine); background-size: 180px 180px; opacity: 0.6; } /* AUDITORÍAS — near-black frío con glow lateral (gravedad, rigor) */ .atmo-black { background-color: #060C18; background-image: radial-gradient(48% 75% at 0% 28%, rgba(0, 201, 200, 0.11), transparent 55%), radial-gradient(70% 90% at 100% 100%, rgba(17, 34, 64, 0.55), transparent 62%); } /* LA FIRMA — grafito elevado, algo más cálido (humanidad del equipo) */ .atmo-graphite { background-color: #0E1A2E; background-image: radial-gradient(72% 50% at 50% 0%, rgba(0, 201, 200, 0.07), transparent 55%), radial-gradient(80% 70% at 100% 0%, rgba(46, 64, 96, 0.35), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(0, 0, 0, 0.32), transparent 60%); } /* ─── Superficie CLARA premium (Formaciones, El Futuro, Contáctanos) ───────── Off-white frío con textura tipo rig.ai (guías de columna en hairline + grano fino + profundidad). NO blanco plano. Las tarjetas/paneles van OSCUROS encima (contraste editorial). Texto oscuro. */ .surface-light { position: relative; isolation: isolate; color: var(--text-dark); --cyan: var(--cyan-ink); /* en claro, el cian pasa a teal apagado (no vibra) */ background-color: #E7EBF1; background-image: radial-gradient(110% 70% at 50% -12%, rgba(255, 255, 255, 0.72), transparent 55%), radial-gradient(80% 60% at 100% 0%, rgba(0, 201, 200, 0.045), transparent 55%), linear-gradient(180deg, rgba(10, 22, 40, 0), rgba(10, 22, 40, 0.06)), /* cuadrícula técnica (2 ejes) — más visible para romper el salto oscuro→claro */ repeating-linear-gradient(90deg, transparent 0, transparent 119px, rgba(10, 22, 40, 0.055) 119px, rgba(10, 22, 40, 0.055) 120px), repeating-linear-gradient(0deg, transparent 0, transparent 119px, rgba(10, 22, 40, 0.045) 119px, rgba(10, 22, 40, 0.045) 120px); } .surface-light > .max-w-7xl, .surface-light > .max-w-6xl, .surface-light > .max-w-5xl { position: relative; z-index: 1; } .surface-light::before { /* costura superior (teal, no cian eléctrico) */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(10, 128, 127, 0.4) 14%, rgba(10, 128, 127, 0.4) 86%, transparent); } .surface-light::after { /* grano fino */ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain-fine); background-size: 180px 180px; opacity: 0.5; } /* Texto/paneles sobre superficie clara */ .surface-light .section-title { color: var(--ink); } .surface-light .section-title::before { /* filete del título en teal apagado */ background: linear-gradient(90deg, rgba(10, 128, 127, 0.85), rgba(10, 128, 127, 0.25) 38%, transparent 75%); } .surface-light .section-lede { color: #4A5A72; } .surface-light .feature-tag { color: #46566e; border-color: rgba(10, 22, 40, 0.14); background: rgba(10, 22, 40, 0.025); } .surface-light .feature-tag:hover { color: var(--cyan-ink); border-color: rgba(10, 128, 127, 0.4); background: rgba(10, 128, 127, 0.08); } /* Iconos cian (stroke #00C9C8) sobre claro → teal apagado (los artefactos oscuros usan currentColor) */ .surface-light [stroke="#00C9C8"] { stroke: var(--cyan-ink); } .surface-light .contact-info-icon { background: rgba(10, 128, 127, 0.08); border-color: rgba(10, 128, 127, 0.22); } /* Dentro de artefactos OSCUROS sobre claro, el cian vuelve a ser brillante */ .surface-light .pull-quote, .surface-light .training-card, .surface-light .dashboard-mockup, .surface-light .trust-block { --cyan: #00C9C8; } /* La cita en claro vuelve a ser panel navy sólido (no vidrio invisible) */ .surface-light .pull-quote { background: var(--navy-deep) !important; border: 1px solid rgba(0, 201, 200, 0.28); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 20px 50px rgba(10, 22, 40, 0.18); } /* Botón primario en superficie clara: misma cápsula del Hero pero en TEAL profundo (el cian eléctrico vibra sobre claro) + texto blanco + halo atenuado */ .surface-light .btn-primary { color: #fff; background: linear-gradient(158deg, #15a5a3 0%, #0a807f 50%, #076968 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -3px 7px rgba(0, 40, 40, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 6px rgba(10, 22, 40, 0.18), 0 14px 32px rgba(10, 128, 127, 0.26); } .surface-light .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 8px rgba(0, 40, 40, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 4px 10px rgba(10, 22, 40, 0.22), 0 18px 42px rgba(10, 128, 127, 0.34); } @media (prefers-reduced-transparency: reduce) { .surface-light .btn-primary { background: #0a807f; } } /* ─── Texto claro sobre las superficies oscuras (recolor global por sección) ── */ .surface-dark .section-title { color: var(--text-on-dark); } .surface-dark h3 { color: var(--text-on-dark); } .surface-dark .section-header p { color: rgba(255, 255, 255, 0.6); } .surface-dark .feature-list li { color: rgba(255, 255, 255, 0.64); border-top-color: rgba(255, 255, 255, 0.10); } .surface-dark .feature-list li:last-child { border-bottom-color: rgba(255, 255, 255, 0.10); } /* Cita/pull-quote sobre fondo oscuro: panel de vidrio sutil con borde-luz superior (el filete lateral grueso era el patrón "side-stripe"; el acento vive ahora en la costura superior, mismo lenguaje que las training-cards) */ .pull-quote { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)) !important; border: 1px solid rgba(0, 201, 200, 0.22); border-radius: 4px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .pull-quote::before { content: ""; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 201, 200, 0.55), transparent); } .pull-quote-source { font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); } /* La tarjeta blanca del formulario conserva texto oscuro (excepción dentro de #contacto oscuro) */ .contact-card h3 { color: var(--ink); } .pull-quote .text-white { color: var(--text-on-dark); } /* CTA del menú móvil (la vía a Contacto donde el botón del navbar va oculto) */ .mobile-menu-cta { margin-top: 1.75rem; } /* ─── Solicitar catálogo — conversión intermedia (jerarquía SECUNDARIA) ────── No compite con el formulario principal: panel discreto + botón ghost teal. */ .catalog-cta { margin-bottom: 2.5rem; display: grid; grid-template-columns: 1fr auto; gap: 1.25rem 2.5rem; align-items: center; padding: 1.75rem 2rem; border: 1px dashed rgba(10, 22, 40, 0.18); border-radius: 14px; background: rgba(10, 22, 40, 0.025); } .catalog-eyebrow { display: block; font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan-ink); margin-bottom: 0.45rem; } .catalog-title { font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 0.3rem; } .catalog-desc { font-size: 0.9rem; color: #4A5A72; line-height: 1.55; max-width: 48ch; } .catalog-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; } .catalog-input { background: rgba(255, 255, 255, 0.7); border: 1.5px solid rgba(10, 22, 40, 0.15); color: var(--text-dark); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; padding: 0.6rem 0.9rem; border-radius: 6px; outline: none; min-width: 210px; transition: border-color 0.3s ease; } .catalog-input:focus { border-color: var(--cyan-ink); } .catalog-input::placeholder { color: var(--text-muted); } .btn-secondary-light { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan-ink); padding: 0.62rem 1.2rem; background: transparent; border: 1.5px solid rgba(10, 128, 127, 0.5); border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background 0.3s ease, border-color 0.3s ease, transform 0.18s var(--ease-out-quart); } .btn-secondary-light:hover { background: rgba(10, 128, 127, 0.08); border-color: var(--cyan-ink); } .btn-secondary-light:active { transform: scale(0.97); } .catalog-confirm { flex-basis: 100%; margin-top: 0.2rem; font-size: 0.82rem; font-weight: 600; color: var(--cyan-ink); } @media (max-width: 760px) { .catalog-cta { grid-template-columns: 1fr; } .catalog-input { flex: 1 1 auto; min-width: 0; } } /* Variante de sidebar: vertical y compacta (acción secundaria, no compite con el form) */ .catalog-cta--side { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem; margin-bottom: 0; } .catalog-cta--side .catalog-title { font-size: 1.05rem; } .catalog-cta--side .catalog-form { flex-direction: column; align-items: stretch; } .catalog-cta--side .catalog-input { min-width: 0; width: 100%; } .catalog-cta--side .btn-secondary-light { justify-content: center; } /* Micro-momento del header de Contacto: la promesa de respuesta. La cifra hereda la activación lenta de color del hero (blanco→acento, deliberada, una sola vez). */ .contact-claim { margin-top: 1.5rem; font-family: 'DM Sans', system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); } .contact-claim .cc-num { color: var(--ink); transition: color 1.7s linear 0.55s; /* activación lenta tras el reveal */ } .contact-claim.visible .cc-num { color: var(--cyan-ink); } @media (prefers-reduced-motion: reduce) { .contact-claim .cc-num { transition: none; color: var(--cyan-ink); } } @media (max-width: 640px) { .contact-claim { font-size: 1.05rem; } } /* ─── Typography ────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: 'DM Sans', system-ui, sans-serif; /* grotesca unificada con el Hero */ font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; /* tracking tenso (lógica del Hero) */ text-wrap: balance; /* líneas más equilibradas en titulares */ } p { text-wrap: pretty; } /* evita líneas huérfanas en párrafos */ /* ─── Título de sección — apertura de capítulo + revelado por máscara ───────── Escala mayor y tracking tenso (jerarquía premium). El motion (líneas que suben bajo máscara, estilo the-echo-book) lo conduce GSAP en initSectionTitles; sin JS / reduced-motion las líneas quedan visibles. */ .section-title { position: relative; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: clamp(3rem, 7.5vw, 6rem); /* protagonista: presencia editorial real */ line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; } /* Filete superior del título (sustituye al eyebrow; le da su propia "zona"). Se "dibuja" 0→100% ligado al SCROLL vía --st-rule (lo conduce initSectionTitles). Por defecto 1 (visible) → seguro sin JS / reduced-motion. */ .section-title::before { content: ""; display: block; width: 100%; height: 2px; margin-bottom: 1.5rem; background: linear-gradient(90deg, rgba(0, 201, 200, 0.8), rgba(0, 201, 200, 0.2) 38%, transparent 75%); transform: scaleX(var(--st-rule, 1)); transform-origin: left center; } /* Barrido cian que cruza el título una vez al revelar (lo anima initSectionTitles) */ .title-scan { position: absolute; top: 1.5rem; bottom: 0; left: 0; width: 4px; background: var(--cyan); box-shadow: 0 0 22px 3px rgba(0, 201, 200, 0.6); opacity: 0; pointer-events: none; z-index: 2; } /* Tagline de El Futuro (sub del título protagonista) */ .saas-tagline { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.5rem; max-width: 30ch; } .saas-tagline .accent { color: var(--cyan); } /* Status 'En desarrollo' discreto (subordinado, no compite con el título) */ .dev-access-label { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; } .dev-chip { display: inline-flex; align-items: center; gap: 0.5rem; font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); padding: 0.3rem 0.65rem; border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--cyan) 8%, transparent); white-space: nowrap; } .dev-chip::before { content: ""; width: 14px; height: 1px; background: var(--cyan); flex: none; } .st-line { display: block; overflow: hidden; padding-bottom: 0.05em; /* evita recorte de descendentes bajo overflow:hidden */ } .st-in { display: block; will-change: transform; } /* ─── Logo — navbar & footer ────────────────────────────── */ .logo-navbar { display: inline-flex; align-items: center; text-decoration: none; transition: opacity 0.3s ease, transform 0.25s ease; } .logo-navbar:hover { opacity: 0.85; transform: scale(1.015); } /* Logo en blanco puro sobre fondo oscuro */ .logo-img-navbar { height: 72px; width: auto; object-fit: contain; display: block; /* brightness(0) → todo negro · invert(1) → todo blanco nítido */ filter: brightness(0) invert(1); transition: opacity 0.3s ease; } .logo-img-footer { height: 60px; width: auto; object-fit: contain; display: block; margin-bottom: 1.25rem; filter: brightness(0) invert(1); opacity: 0.75; } /* ─── Navbar ────────────────────────────────────────────── */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease; padding: 0.6rem 0; } #navbar.scrolled { background: rgba(10, 22, 40, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(0, 201, 200, 0.15), 0 4px 32px rgba(0,0,0,0.5); padding: 0.35rem 0; } .nav-link { position: relative; font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,0.75); text-decoration: none; letter-spacing: 0.04em; transition: color 0.3s ease; padding-bottom: 2px; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px; background: var(--cyan); transition: width 0.3s ease; } .nav-link:hover { color: var(--white); } .nav-link:hover::after { width: 100%; } /* Sección activa en el nav (la clase la conduce el IntersectionObserver de main.js) */ .nav-link.active-nav { color: var(--white); } .nav-link.active-nav::after { width: 100%; } /* ─── CTA Button ────────────────────────────────────────── */ /* Primario: liquid glass cian de alta fidelidad (especular fuerte + profundidad multicapa) */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--navy-deep); font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.8rem 1.75rem; border: none; cursor: pointer; text-decoration: none; position: relative; isolation: isolate; overflow: hidden; /* contiene el barrido (sheen) dentro del botón aunque clip-path sea none */ clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); background: linear-gradient(158deg, rgba(140,255,253,0.95) 0%, rgba(0,201,200,0.86) 48%, rgba(0,160,159,0.92) 100%); -webkit-backdrop-filter: blur(14px) saturate(175%) brightness(1.04); backdrop-filter: blur(14px) saturate(175%) brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), /* filo superior nítido */ inset 0 3px 6px rgba(255,255,255,0.45), /* especular superior amplio */ inset 0 -4px 8px rgba(0,52,52,0.42), /* hueco/profundidad inferior */ inset 0 0 0 1px rgba(255,255,255,0.22), /* borde interno multicapa */ 0 1px 2px rgba(0,0,0,0.30), 0 12px 28px rgba(0,201,200,0.32), /* halo de color */ 0 24px 56px rgba(0,0,0,0.45); /* elevación profunda */ transition: box-shadow 0.4s var(--ease-out-quart), background 0.35s ease, transform 0.18s var(--ease-out-quart); } .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 3px 7px rgba(255,255,255,0.55), inset 0 -4px 9px rgba(0,52,52,0.45), inset 0 0 0 1px rgba(255,255,255,0.30), 0 0 30px var(--cyan-glow), 0 14px 34px rgba(0,201,200,0.4), 0 28px 64px rgba(0,0,0,0.5); } .btn-primary:active { transform: translateY(0) scale(0.97); } /* Outline: cristal esmerilado profundo (frosted) sobre el campo navy */ .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.8rem 1.75rem; cursor: pointer; text-decoration: none; position: relative; border: 1px solid rgba(255,255,255,0.18); border-radius: 2px; background: rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.30), /* especular superior */ inset 0 0 0 1px rgba(255,255,255,0.08), /* hairline interno */ inset 0 -3px 10px rgba(0,0,0,0.28), /* profundidad inferior */ 0 2px 4px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.42); /* elevación */ transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.4s var(--ease-out-quart), transform 0.18s var(--ease-out-quart); } .btn-outline:hover { border-color: rgba(0,201,200,0.55); color: var(--cyan); background: rgba(0,201,200,0.12); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.38), inset 0 0 0 1px rgba(0,201,200,0.18), inset 0 -3px 10px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.28), 0 18px 46px rgba(0,201,200,0.22); } .btn-outline:active { transform: scale(0.97); } /* Fallback sin transparencias: superficie sólida, sin blur */ @media (prefers-reduced-transparency: reduce) { .btn-primary { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cyan); } .btn-outline { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,0.10); } } /* ── Refinamiento premium de CTAs (sheen + parallax magnético) ── */ .btn-inner { display: inline-flex; align-items: center; gap: 0.5rem; position: relative; z-index: 1; /* por encima del barrido */ white-space: nowrap; /* la CTA no parte en dos líneas */ will-change: transform; } .nav-link { white-space: nowrap; } /* Barrido de luz que cruza el primario al hover */ .btn-primary { isolation: isolate; } .btn-primary::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.5) 50%, transparent 65%); transform: translateX(-130%); transition: transform 0.65s var(--ease-out-quart); pointer-events: none; } .btn-primary:hover::before { transform: translateX(130%); } /* En las CTAs magnéticas, el transform lo gobierna el JS (sin transición CSS que choque) */ .magnetic { will-change: transform; transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease; } /* ─── Hero ──────────────────────────────────────────────── */ #hero { min-height: 100vh; background: var(--navy-deep); position: relative; display: flex; align-items: center; overflow: hidden; } /* La banda 'compliance wire' hace de cierre inferior del hero (sin separador) */ .hero-title { font-family: 'DM Sans', system-ui, sans-serif; font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 700; color: var(--white); line-height: 1.05; letter-spacing: -0.03em; } .hero-title .accent { color: var(--cyan); } .hero-divider { width: 60px; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); margin: 1.75rem 0; } /* ─── Section Shared ────────────────────────────────────── */ .section-header { max-width: 680px; } /* ─── Formación PBC/FT ──────────────────────────────────── */ #formacion { position: relative; } /* superficie gestionada por .surface-light */ /* Lista editorial (Formación + Asesoramiento): folio mono + filete divisor + jerarquía. Sustituye los checks cian en caja por un índice regulatorio sobrio (mismo lenguaje que los folios mono del hero / .wire-code). */ .feature-list { list-style: none; padding: 0; margin: 0; counter-reset: feat; } .feature-list li { counter-increment: feat; display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; gap: 1rem; padding: 0.95rem 0; font-size: 1.02rem; color: #4A5A72; line-height: 1.6; border-top: 1px solid rgba(10, 22, 40, 0.09); /* filete divisor entre ítems */ } .feature-list li:last-child { border-bottom: 1px solid rgba(10, 22, 40, 0.09); } .feature-list li::before { content: counter(feat, decimal-leading-zero); font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--cyan); } /* ─── FORMACIONES — 4 tarjetas bespoke (rejilla 2×2, vidrio oscuro) ────────── No son cards de catálogo: índice grande fantasma, borde-luz cian, glow de esquina y motivo de marca; conviven como un sistema coherente. Estructura placeholder (sin contenido definitivo). Refs: polar.sh, cosmos.so. */ .formaciones-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; perspective: 1300px; /* habilita el tilt 3D suave de las tarjetas (init3DCards) */ } @media (min-width: 768px) { .formaciones-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } .training-card { will-change: transform; } .training-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2.25rem; min-height: 320px; padding: 2.4rem; border-radius: 16px; /* Tarjeta OSCURA (navy) sobre la superficie clara: contraste editorial. Capa 1: glow cian de esquina en reposo · Capa 2: gradiente base */ background: radial-gradient(230px circle at calc(100% + 50px) -50px, rgba(0, 201, 200, 0.13), transparent 70%), linear-gradient(157deg, #15294A, #0A1830); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 55px rgba(10, 22, 40, 0.28); transition: transform .55s var(--ease-out-quart), border-color .55s var(--ease-out-quart), box-shadow .55s var(--ease-out-quart); } .training-card::before { /* borde-luz cian superior */ content: ""; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 201, 200, 0.55), transparent); } .training-card::after { /* luz cian que sigue al cursor (init3DCards alimenta --mx/--my) */ content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: radial-gradient(290px circle at var(--mx, 85%) var(--my, 10%), rgba(0, 201, 200, 0.14), transparent 65%); opacity: 0; transition: opacity .55s var(--ease-out-quart); } .training-card:hover { border-color: rgba(0, 201, 200, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 24px 55px rgba(10, 22, 40, 0.34), 0 0 55px rgba(0, 201, 200, 0.10); } .training-card:hover::after { opacity: 1; } /* Sin índices numerados (se repetían con Auditoría); el título es el protagonista */ .training-top { display: flex; align-items: flex-start; justify-content: flex-end; } .training-glyph { color: rgba(0, 201, 200, 0.7); opacity: .85; } .training-eyebrow { display: inline-flex; align-items: center; gap: 0.65rem; font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.95rem; } .training-eyebrow::before { /* filete cian (mismo lenguaje que saas-badge-rule/course-badge) */ content: ""; width: 20px; height: 1px; background: var(--cyan); opacity: .8; } .training-title { font-size: clamp(1.8rem, 2.2vw, 2.1rem); font-weight: 700; color: var(--text-on-dark); letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 0.8rem; text-wrap: balance; } .training-desc { font-size: 0.98rem; color: rgba(255, 255, 255, 0.55); line-height: 1.6; max-width: 42ch; } .training-status { display: inline-flex; align-items: center; gap: 0.6rem; font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); } .training-status::before { content: ""; width: 16px; height: 1px; background: var(--cyan); opacity: .7; } /* Tarjeta ancha "Formación a medida": horizontal, baja, clicable → Contacto */ .training-card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; min-height: 0; padding: 1.9rem 2.4rem; text-decoration: none; } .training-card--wide .training-title { margin-bottom: 0.35rem; } .training-card--wide .training-desc { max-width: 64ch; } .training-cta-arrow { flex: none; color: var(--cyan); transition: transform .45s var(--ease-out-quart); } .training-card--wide:hover .training-cta-arrow { transform: translateX(7px); } @media (max-width: 640px) { .training-card--wide { flex-direction: column; align-items: flex-start; gap: 1.1rem; } } /* ─── AUDITORÍA & ASESORAMIENTO — 4 tarjetas CLARAS apiladas + 3D bespoke ───── Contraste invertido respecto a Formaciones (allí oscuras sobre claro; aquí claras sobre oscuro). Profundidad REAL por capas en translateZ + tilt al puntero (init3DCards) con reflejo especular que sigue el cursor. No es preset. */ /* Dos líneas de negocio: cabecera editorial fija a la izquierda, tarjetas a la derecha. Rompe la pila uniforme de 4 sin cambiar el lenguaje de las tarjetas. */ .audit-groups { display: flex; flex-direction: column; } .audit-group { display: grid; grid-template-columns: minmax(230px, 0.85fr) 2.1fr; gap: 2rem 3.5rem; align-items: start; padding-block: 2.75rem; } .audit-group + .audit-group { border-top: 1px solid rgba(255, 255, 255, 0.08); } .audit-group-head { position: sticky; top: 110px; } /* acompaña el scroll de sus tarjetas */ .audit-group-title { font-family: 'DM Sans', system-ui, sans-serif; font-size: clamp(1.5rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--text-on-dark); margin: 0.55rem 0 0.7rem; text-wrap: balance; } .audit-group-desc { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.55); max-width: 30ch; } @media (max-width: 900px) { .audit-group { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem; } .audit-group-head { position: static; } } .audit-stack { display: flex; flex-direction: column; gap: 1.25rem; perspective: 1300px; } .audit-card { position: relative; --cyan: var(--cyan-ink); /* tarjeta CLARA → su cian es teal apagado (no vibra) */ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem 2rem; padding: 2rem 2.5rem; border-radius: 16px; background: linear-gradient(150deg, #F5F8FC 0%, #DDE4EE 100%); /* tarjeta CLARA */ border: 1px solid rgba(255, 255, 255, 0.65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 40px rgba(0, 0, 0, 0.42); transform-style: preserve-3d; transition: transform 0.25s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart); will-change: transform; } .audit-card > * { transform-style: preserve-3d; } /* Luz que sigue al cursor (receta de las training-cards, en teal-ink: el cian de marca para superficies claras, más oscuro → se nota sobre el blanco) */ .audit-card::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: radial-gradient(290px circle at var(--mx, 50%) var(--my, 0%), rgba(10, 128, 127, 0.17), transparent 65%); opacity: 0; transition: opacity 0.55s var(--ease-out-quart); } .audit-card:hover::after { opacity: 1; } .audit-card:hover { /* misma elevación que en reposo (sin sensación de subida) + halo teal sutil */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 40px rgba(0, 0, 0, 0.48), 0 0 50px rgba(0, 201, 200, 0.08); } .audit-index { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em; color: rgba(10, 22, 40, 0.16); transform: translateZ(45px); /* capa más adelantada (profundidad real al inclinar) */ transition: color 0.35s var(--ease-out-quart); } .audit-card:hover .audit-index { color: var(--cyan-ink); opacity: 0.75; } .audit-body { transform: translateZ(24px); } .audit-eyebrow { display: block; font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.45rem; } .audit-card .audit-title { font-size: 1.35rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.4rem; } .audit-desc { font-size: 0.95rem; color: #4A5A72; line-height: 1.6; max-width: 62ch; } .audit-arrow { color: var(--cyan); display: inline-flex; transform: translateZ(38px); transition: transform 0.35s var(--ease-out-quart); } .audit-card:hover .audit-arrow { transform: translateZ(38px) translateX(5px); } @media (max-width: 640px) { .audit-card { grid-template-columns: auto 1fr; padding: 1.6rem 1.5rem; } .audit-arrow { display: none; } } /* ─── SaaS Section ──────────────────────────────────────── */ #saas { position: relative; overflow: hidden; } /* superficie por .surface-light */ /* Dashboard mockup */ .dashboard-mockup { /* panel 'producto' OSCURO sólido sobre la sección clara (artefacto en contraste) */ background: linear-gradient(160deg, #0E1F3A, #081325); border: 1px solid rgba(0, 201, 200, 0.22); border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,201,200,0.08), 0 40px 90px rgba(10,22,40,0.45), 0 0 60px rgba(0,201,200,0.06); } /* Mensaje clave / filosofía (destacado editorial sobrio, NO banner): filete cian vertical + peso medio; el cierre de la frase va en acento teal (fondo claro). */ .saas-principle { max-width: 460px; margin: 0 0 2.25rem; padding-left: 1.05rem; border-left: 2px solid var(--cyan-ink); font-family: 'DM Sans', system-ui, sans-serif; font-weight: 500; font-size: 1.14rem; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); } .saas-principle .accent { color: var(--cyan-ink); font-weight: 600; } /* ─── SaaS · réplica del Expediente de Diligencia Debida (compacta + flujo) ──── Réplica sobria de la interfaz real (frontend Next.js): folios y datos en mono, filetes cian de 1px, filas con hairlines. Un pipeline recorre las etapas reales (documentación → extracción → screening → riesgo → informe) y la zona de detalle muestra la etapa activa. Sin dots pulsantes ni datos financieros inventados. Gated por reduced-motion (queda estático en una etapa representativa). */ .mock-title { font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } .mock-folio { font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.58rem; letter-spacing: 0.08em; color: var(--cyan); font-variant-numeric: tabular-nums; } .edd-content { display: flex; flex-direction: column; gap: 0.85rem; } /* Datos regulatorios en mono tabular (patrón de la app real) */ .edd-ref, .edd-subtype, .edd-label, .edd-meta, .edd-row-tag, .edd-row-state, .edd-conf, .edd-viability, .edd-verdict-meta, .edd-trace, .edd-note, .edd-field dt, .edd-flow-label { font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } /* Cabecera del expediente */ .edd-head { display: flex; flex-direction: column; gap: 0.3rem; } .edd-ref { font-size: 0.58rem; letter-spacing: 0.1em; color: var(--cyan); } .edd-head-main { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .edd-subject { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em; color: var(--text-on-dark); } .edd-status { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.68rem; color: rgba(255, 255, 255, 0.72); white-space: nowrap; } .edd-status [data-stage-name] { color: var(--cyan); } .edd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex: none; } .edd-subtype { font-size: 0.54rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } /* ── Pipeline del EDD (etapas reales) ── */ .edd-flow { position: relative; padding: 0.15rem 0 0.1rem; } .edd-flow-track { position: absolute; top: 4px; left: 10%; right: 10%; height: 1px; background: rgba(255, 255, 255, 0.14); } .edd-flow-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--cyan); transition: width 0.6s var(--ease-out-quart); } .edd-flow-steps { list-style: none; margin: 0; padding: 0; display: flex; position: relative; } .edd-flow-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .edd-flow-node { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: var(--navy-deep); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s; } .edd-flow-step.is-done .edd-flow-node { background: var(--cyan); border-color: var(--cyan); } .edd-flow-step.is-active .edd-flow-node { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 201, 200, 0.16); } .edd-flow-label { font-size: 0.45rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); transition: color 0.4s; } .edd-flow-step.is-done .edd-flow-label { color: rgba(255, 255, 255, 0.5); } .edd-flow-step.is-active .edd-flow-label { color: var(--cyan); } /* ── Zona de detalle: altura fija, un panel por etapa (cross-fade) ── */ .edd-stage { position: relative; min-height: 138px; } .edd-panel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.5rem; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease-out-quart); } .edd-panel.is-active { opacity: 1; visibility: visible; } .edd-block-head { display: flex; align-items: center; gap: 0.55rem; } .edd-rule { width: 1.6rem; height: 1px; background: var(--cyan); flex: none; } .edd-label { font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .edd-meta { margin-left: auto; font-size: 0.52rem; letter-spacing: 0.08em; color: var(--text-muted); } /* Filas con hairlines */ .edd-rows { border-top: 1px solid rgba(255, 255, 255, 0.08); } .edd-row { display: flex; align-items: baseline; gap: 0.65rem; padding: 0.42rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .edd-row-name { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.72rem; color: rgba(255, 255, 255, 0.82); } .edd-row-tag { font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .edd-row-state { margin-left: auto; font-size: 0.58rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; } .edd-row-state.review { color: var(--cyan); } /* Campos extraídos con confianza por campo */ .edd-fields { border-top: 1px solid rgba(255, 255, 255, 0.08); } .edd-field { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 0.65rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .edd-field dt { font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .edd-field dd { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.72rem; color: rgba(255, 255, 255, 0.85); } .edd-conf { font-size: 0.56rem; color: rgba(0, 201, 200, 0.8); } /* Veredicto de riesgo — viabilidad como lectura principal (énfasis TIPOGRÁFICO, nunca cromático: el branding prohíbe rojo/alarma) */ .edd-verdict-main { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; } .edd-viability { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-on-dark); } .edd-verdict-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.6rem; color: rgba(255, 255, 255, 0.72); } .edd-verdict-meta i { font-style: normal; color: var(--text-muted); margin-right: 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.5rem; } .edd-note { font-size: 0.54rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } /* Trazabilidad / versionado (reproducibilidad regulatoria) */ .edd-trace { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.54rem; color: var(--text-muted); } .edd-trace i { font-style: normal; color: rgba(255, 255, 255, 0.4); margin-right: 0.35rem; text-transform: uppercase; letter-spacing: 0.06em; } /* Aparición gradual de los campos extraídos cuando su etapa entra en escena */ @media (prefers-reduced-motion: no-preference) { .edd-panel[data-panel="1"].is-active .edd-field { opacity: 0; animation: eddFieldIn 0.45s var(--ease-out-quart) forwards; } .edd-panel[data-panel="1"].is-active .edd-field:nth-child(1) { animation-delay: 0.12s; } .edd-panel[data-panel="1"].is-active .edd-field:nth-child(2) { animation-delay: 0.42s; } .edd-panel[data-panel="1"].is-active .edd-field:nth-child(3) { animation-delay: 0.72s; } } @keyframes eddFieldIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Nota de aviso bajo la previsualización del SaaS: deja claro que es preliminar */ .preview-note { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-top: 1.9rem; text-align: center; font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .preview-note::before, .preview-note::after { /* filetes a ambos lados (lenguaje saas-badge-rule) */ content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; } .mock-titlebar { background: rgba(10, 22, 40, 0.9); padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid rgba(0,201,200,0.1); } .mock-content { padding: 1.25rem; } /* Feature tags */ .feature-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); padding: 0.35rem 0.8rem; background: rgba(255,255,255,0.04); transition: border-color 0.3s, color 0.3s, background 0.3s; } .feature-tag:hover { border-color: var(--border); color: var(--cyan); background: var(--cyan-dim); } /* Titlebar del mockup: etiqueta a la izquierda + badge "En vivo" a la derecha */ .mock-titlebar { justify-content: space-between; } /* ─── Contact Section ───────────────────────────────────── */ #contacto { position: relative; overflow: hidden; } /* superficie por .surface-light */ .contact-card { background: var(--white); border: 1px solid rgba(0,0,0,0.07); padding: 3rem; box-shadow: 0 4px 40px rgba(10,22,40,0.08); } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-deep); } .form-input, .form-select, .form-textarea { width: 100%; background: var(--bg-light); border: 1.5px solid rgba(10, 22, 40, 0.12); color: var(--text-dark); font-family: 'DM Sans', sans-serif; font-size: 0.9rem; padding: 0.75rem 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; outline: none; -webkit-appearance: none; appearance: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 201, 200, 0.12); background: var(--white); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); opacity: 0.7; } .form-textarea { resize: vertical; min-height: 120px; } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238892A4' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; cursor: pointer; } .privacy-note { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; } /* Contact info sidebar */ .contact-info-block { display: flex; flex-direction: column; gap: 2rem; } .contact-info-item { display: flex; gap: 1rem; align-items: flex-start; } .contact-info-icon { width: 42px; height: 42px; flex-shrink: 0; background: var(--cyan-dim); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .contact-info-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem; } .contact-info-value { font-size: 1rem; color: var(--navy-deep); font-weight: 500; line-height: 1.45; } .trust-block { margin-top: 2rem; padding: 1.5rem; background: var(--navy-deep); position: relative; overflow: hidden; font-size: 1rem; } .trust-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); } /* ─── Footer ────────────────────────────────────────────── */ #footer { background: var(--footer-bg); border-top: 1px solid rgba(0, 201, 200, 0.1); } .footer-link { font-size: 0.8rem; color: rgba(255,255,255,0.62); text-decoration: none; transition: color 0.3s; } .footer-link:hover { color: var(--cyan); } .footer-divider { height: 1px; background: rgba(255,255,255,0.06); } /* ─── Scroll Animations ─────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } .reveal-delay-5 { transition-delay: 0.5s; } .reveal-delay-6 { transition-delay: 0.6s; } /* ─── Mobile Menu ───────────────────────────────────────── */ .mobile-menu { position: fixed; inset: 0; z-index: 999; background: rgba(10, 22, 40, 0.98); backdrop-filter: blur(16px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-menu.open { transform: translateX(0); } .mobile-nav-link { font-family: 'DM Sans', system-ui, sans-serif; font-size: 2.2rem; font-weight: 700; color: rgba(255,255,255,0.7); text-decoration: none; letter-spacing: -0.02em; transition: color 0.3s; } .mobile-nav-link:hover { color: var(--cyan); } /* ─── Utilities ─────────────────────────────────────────── */ .cyan-line { display: block; width: 40px; height: 2px; background: var(--cyan); margin-bottom: 1rem; } .text-cyan { color: var(--cyan); } .text-navy { color: var(--navy-deep); } /* ─── Scrollbar ─────────────────────────────────────────── */ /* Más presente (canal con guía cian) y "viva": el pulgar se enciende mientras la página se desplaza (clase .is-scrolling puesta por JS). */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--navy-deep); border-left: 1px solid rgba(0, 201, 200, 0.12); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3BE5E4, var(--cyan) 45%, #00A3A2); border-radius: 8px; border: 2px solid var(--navy-deep); background-clip: padding-box; min-height: 44px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6FF0EF, #2EDFDE 45%, var(--cyan)); } html.is-scrolling::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #8FF6F5, #2EDFDE 40%, var(--cyan)); border-color: rgba(0, 201, 200, 0.35); box-shadow: 0 0 10px rgba(0, 201, 200, 0.65), 0 0 26px rgba(0, 201, 200, 0.35); } html.is-scrolling::-webkit-scrollbar-track { border-left-color: rgba(0, 201, 200, 0.28); } /* Firefox (sin pseudo-elementos webkit): color de sistema equivalente */ @supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--cyan) var(--navy-deep); } } /* ─── Success state for form ────────────────────────────── */ #form-success { display: none; text-align: center; padding: 3rem 1rem; } #form-success.show { display: flex; flex-direction: column; align-items: center; gap: 1rem; } /* ─── Sobre Nosotros — Team Cards ───────────────────────── */ /* Claim diferencial: banda editorial A SANGRE que ecoa la banda de servicios del hero (mismo navy de pista + filetes hairline) — la frase ES la banda. UNA línea centrada; la segunda mitad en cian es el énfasis. */ .team-claim { position: relative; margin: 0 calc(50% - 50vw) 2.6rem; /* a sangre (body capa overflow-x) */ padding: 1.55rem 2rem; text-align: center; background: #0a1526; /* mismo navy que .hero-ticker */ border-top: 1px solid rgba(0, 201, 200, 0.18); border-bottom: 1px solid rgba(0, 201, 200, 0.18); font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.55rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--text-on-dark); white-space: nowrap; } /* Eco tenue de las guías de columna del hero, disuelto hacia el centro */ .team-claim::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, transparent 0, transparent 119px, rgba(0, 201, 200, 0.05) 119px, rgba(0, 201, 200, 0.05) 120px); -webkit-mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000); mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000); } .team-claim .accent { color: var(--cyan); } @media (max-width: 900px) { /* en móvil la línea única no cabe: vuelve a envolver */ .team-claim { white-space: normal; padding: 1.4rem 1.5rem; font-size: clamp(1.15rem, 3.6vw, 1.5rem); text-wrap: balance; } } /* Rejilla del equipo: habilita el tilt 3D de las tarjetas (init3DCards) */ #nosotros .grid { perspective: 1300px; } .team-card { position: relative; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); will-change: transform; transition: transform 0.3s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart), border-color 0.4s var(--ease-out-quart); } .team-card:hover { /* sin translate (tarjetas siempre alineadas); halo cian en lugar de elevación */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 50px rgba(0, 201, 200, 0.10); border-color: rgba(0, 201, 200, 0.3); } /* Foto de integrante: mismo panel 5:4 del monograma, con la foto a sangre. Integración con la tarjeta de vidrio: saturación levemente contenida, velo navy que funde el borde inferior con el bloque de info y la misma costura cian. */ .team-photo { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: linear-gradient(165deg, var(--navy-mid), var(--navy-deep)); border-bottom: 1px solid rgba(0, 201, 200, 0.2); } .team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92) contrast(1.02); transition: transform 0.6s var(--ease-out-quart); } .team-card:hover .team-photo img { transform: scale(1.025); } .team-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 22, 40, 0.10), transparent 28%, transparent 60%, rgba(10, 22, 40, 0.42)); } @media (prefers-reduced-motion: reduce) { .team-photo img { transition: none; } .team-card:hover .team-photo img { transform: none; } } /* Monograma liquid-glass (sustituye la caja "FOTO"): panel navy translúcido con reflejo especular, eco de las guías de columna del hero y monograma de iniciales. Mismo lenguaje cápsula/cristal que los botones del hero, adaptado al bloque. */ .team-monogram { position: relative; aspect-ratio: 5 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; overflow: hidden; background: radial-gradient(120% 95% at 50% 0%, rgba(0, 201, 200, 0.16), transparent 58%), linear-gradient(165deg, var(--navy-mid), var(--navy-deep)); border-bottom: 1px solid rgba(0, 201, 200, 0.2); } /* Reflejo especular superior (vidrio) */ .team-monogram::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 32%); pointer-events: none; } /* Eco de las guías de columna del hero (coherencia de sistema) */ .team-monogram::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(0, 201, 200, 0.05) 39px, rgba(0, 201, 200, 0.05) 40px); -webkit-mask-image: radial-gradient(120% 100% at 50% 38%, transparent 28%, #000 82%); mask-image: radial-gradient(120% 100% at 50% 38%, transparent 28%, #000 82%); pointer-events: none; } .team-monogram-mark { position: relative; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 3.6rem; line-height: 1; letter-spacing: -0.03em; color: var(--text-on-dark); } .team-monogram-mark .accent { color: var(--cyan); } .team-monogram-tag { position: relative; font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } @media (prefers-reduced-transparency: reduce) { .team-monogram { background: var(--navy-deep); } } .team-info { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .team-accent-line { width: 28px; height: 2px; background: var(--cyan); margin-bottom: 0.5rem; } .team-name { font-family: 'DM Sans', system-ui, sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--navy-deep); letter-spacing: -0.01em; line-height: 1.2; } .team-role { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.6rem; } .team-bio { font-size: 0.97rem; color: rgba(255, 255, 255, 0.55); line-height: 1.7; } /* ═════════════════════════════════════════════════════════ REDISEÑO — bento, contraste y momentos de scroll ═════════════════════════════════════════════════════════ */ /* SaaS — mockup con flotación 3D IDLE suave (no brusca) + tilt al puntero (init3DCards). Perspectiva propia en el transform; sin JS / reduced-motion queda plano. */ #saas .dashboard-mockup { will-change: transform; } @media (min-width: 768px) and (prefers-reduced-motion: no-preference) { #saas .dashboard-mockup { animation: mockFloat 12s ease-in-out infinite; } } /* Mientras el puntero tilta el mockup: flotación en pausa + transform suavizado (misma sensación que el tilt de las tarjetas) */ #saas .dashboard-mockup.is-tilting { animation: none; transition: transform .3s var(--ease-out-quart); } @keyframes mockFloat { 0%, 100% { transform: perspective(1400px) rotateY(-3deg) rotateX(1.4deg) translateY(0); } 50% { transform: perspective(1400px) rotateY(3deg) rotateX(-1deg) translateY(-8px); } } /* Contacto — oscuro: ajustes de texto sobre navy (la tarjeta sigue blanca) */ #contacto .contact-info-value { color: var(--text-dark); } #contacto .contact-card { box-shadow: 0 30px 70px rgba(10, 22, 40, 0.16); } #contacto .trust-block { background: var(--navy-mid); /* panel oscuro sobre claro: contraste editorial */ border: 1px solid var(--border); } /* ─── Hero "Wire regulatorio" (campo drenado · grotesca monumental · banda) ── */ #hero.hero--field { display: flex; flex-direction: column; align-items: stretch; /* anula el center del #hero base; banda a todo el ancho */ position: relative; min-height: 100vh; overflow: hidden; /* Navy plano ultra-limpio (sin degradados pesados) */ background: var(--navy-deep); } /* Estructura rig.ai: guías de columna verticales (líneas vectoriales sharp) */ #hero.hero--field::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, transparent 0, transparent 59px, rgba(0,201,200,0.055) 59px, rgba(0,201,200,0.055) 60px, transparent 60px, transparent 120px); /* calma la zona del titular; las columnas enmarcan hacia los lados */ -webkit-mask-image: radial-gradient(135% 102% at 50% 42%, transparent 20%, #000 74%); mask-image: radial-gradient(135% 102% at 50% 42%, transparent 20%, #000 74%); } /* Ticks "+" como capa de elementos (generada por JS) para parpadeo individual */ .hero-ticks { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(135% 102% at 50% 42%, transparent 20%, #000 74%); mask-image: radial-gradient(135% 102% at 50% 42%, transparent 20%, #000 74%); } .tick { position: absolute; width: 11px; height: 11px; transform: translate(-50%, -50%); /* centra el "+" en su coordenada */ opacity: 0.16; } .tick::before, .tick::after { content: ""; position: absolute; background: var(--cyan); } .tick::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); } .tick::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); } /* Onda de flujo: TODOS los "+" laten suave; un subconjunto añade luminiscencia cian. La duración y el delay (fase según posición + jitter) los fija el JS → onda diagonal orgánica. */ @media (prefers-reduced-motion: no-preference) { .tick { animation: tickFlow 5s ease-in-out infinite; } .tick--glow { animation-name: tickGlow; } } @keyframes tickFlow { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.46; } } @keyframes tickGlow { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.82; } /* respiración por opacidad pura, sin halo */ } /* Contenido monumental, composición centrada y equilibrada */ .hero--field .hero-inner { margin: auto auto clamp(4rem, 13vh, 9rem); /* empuja el conjunto hacia arriba */ max-width: min(96vw, 1240px); /* ancho para que cada frase quepa en 1 línea */ padding: 2.5rem clamp(1.5rem, 6vw, 3rem) 0; /* menos espacio superior → el texto sube */ text-align: center; z-index: 5; } /* Titular rig-inspired: peso 700 + leading DENSO + tracking tenso → bloque contundente */ .hero--field .hero-title { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: clamp(2rem, 5.6vw, 5.4rem); /* escalada para que la frase larga quepa en 1 línea */ line-height: 0.94; /* leading denso (rig ≈ 0.88) → líneas que se apilan */ letter-spacing: -0.04em; /* tracking rig (-0.04em) */ } /* En escritorio/tablet cada frase ocupa exactamente una línea (como subframe) */ @media (min-width: 768px) { .hero--field .hero-line { white-space: nowrap; } } .hero--field .hero-divider { margin: 1.7rem auto 1.4rem; } /* Declaración de posicionamiento (frase 1): pieza tipográfica con jerarquía propia. Bitono monocromo — "lo que se sabe" atenuado, "lo que se ha hecho" pleno + peso. Más pequeña que el H1 (no compite); más grande que el apoyo. Sin glow/gradiente. */ .hero-statement { margin: 0 auto 1.1rem; max-width: none; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.02rem, 1.35vw, 1.18rem); /* compacta, en una sola línea, bajo el H1 */ line-height: 1.3; letter-spacing: -0.01em; color: var(--text-on-dark); /* énfasis uniforme (blanco suave) en toda la frase */ white-space: nowrap; /* una sola línea en escritorio */ } .hero-statement .hs-dim, .hero-statement .hs-strong { color: inherit; font-weight: inherit; } /* sin bitono: frase uniforme */ @media (max-width: 760px) { .hero-statement { white-space: normal; max-width: 38ch; font-size: 1.02rem; } } .hero-lede { margin: 0 auto; max-width: 48ch; color: #aab6c9; font-size: 1.06rem; line-height: 1.6; text-wrap: pretty; } /* Credencial tecnológica clicable → SaaS: cápsula liquid glass sobria, más presente */ .hero-roadmap { display: inline-flex; align-items: center; gap: 0.95rem; margin: 3.25rem auto 0; padding: 0.66rem 1.5rem; border-radius: 999px; font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; cursor: pointer; color: rgba(255,255,255,0.74); background: rgba(17,34,64,0.5); /* navy translúcido, algo más presente */ border: 1px solid rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(11px) saturate(140%); backdrop-filter: blur(11px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), /* reflejo especular tenue */ inset 0 -1px 0 rgba(0,0,0,0.20), 0 6px 22px rgba(0,0,0,0.28); /* elevación */ transition: border-color 0.3s var(--ease-out-quart), background 0.3s ease, box-shadow 0.3s var(--ease-out-quart), transform 0.25s var(--ease-out-quart); } .hero-roadmap:hover { transform: translateY(-2px); border-color: rgba(0,201,200,0.45); background: rgba(17,34,64,0.62); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.22), 0 10px 30px rgba(0,201,200,0.16); } .hero-roadmap:active { transform: translateY(0); } @media (prefers-reduced-transparency: reduce) { .hero-roadmap { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--navy-mid); } } /* Credencial editorial: nombre + filete vertical + estado en microcontraste (sin luz pulsante) */ .hero-roadmap-label { color: rgba(255,255,255,0.76); } .hero-roadmap-status { padding-left: 0.95rem; border-left: 1px solid rgba(255,255,255,0.22); /* filete divisor fino */ color: rgba(255,255,255,0.94); /* microcontraste por opacidad */ } .hero-roadmap-arrow { color: var(--cyan); /* acento de marca = afordancia de enlace */ transition: transform 0.3s var(--ease-out-quart); } .hero-roadmap:hover .hero-roadmap-arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .hero-roadmap, .hero-roadmap-arrow { transition: none; } .hero-roadmap:hover { transform: none; } } /* Peso UNIFORME en todas las palabras; los verbos se distinguen SOLO por color */ .hero--field .hero-title .accent { color: var(--cyan); } .hero--field .hero-title .soft { color: var(--white); } /* Enmascarado por palabra (cada palabra se revela bajo su propia máscara) */ .hero-line { display: block; } .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.16em; margin-bottom: -0.16em; } .word-in { display: inline-block; will-change: transform; } /* ── Entrada bespoke: reveal por palabra + activación de color lenta en los verbos ── */ @media (prefers-reduced-motion: no-preference) { .hero--field .word-in { transform: translateY(115%); opacity: 0; animation: wordUp 0.8s var(--ease-out-expo) forwards; } .hero--field .hero-line:nth-child(1) .word:nth-child(1) .word-in { animation-delay: 0.10s; } .hero--field .hero-line:nth-child(1) .word:nth-child(2) .word-in { animation-delay: 0.18s; } .hero--field .hero-line:nth-child(1) .word:nth-child(3) .word-in { animation-delay: 0.26s; } .hero--field .hero-line:nth-child(2) .word:nth-child(1) .word-in { animation-delay: 0.30s; } .hero--field .hero-line:nth-child(2) .word:nth-child(2) .word-in { animation-delay: 0.38s; } .hero--field .hero-line:nth-child(2) .word:nth-child(3) .word-in { animation-delay: 0.46s; } /* Verbos: misma máscara que el resto + activación de color LENTA y deliberada (arrancan en blanco y el cian se asienta en ~2.4s → realce protagonista, sin destello) */ .hero--field .hero-line:nth-child(1) .word:nth-child(1) .word-in.accent { color: #fff; animation: wordUp 0.8s var(--ease-out-expo) 0.10s forwards, accentColor 1.9s linear 1.05s forwards; /* lineal y tardío → activación lenta, perceptible */ } .hero--field .hero-line:nth-child(2) .word:nth-child(1) .word-in.accent { color: #fff; animation: wordUp 0.8s var(--ease-out-expo) 0.30s forwards, accentColor 1.9s linear 1.3s forwards; } .hero--field .hero-divider, .hero--field .hero-statement, .hero--field .hero-lede, .hero--field .hero-roadmap, .hero--field .hero-cta-row, .hero--field .hero-ticker { opacity: 0; transform: translateY(22px); animation: heroRise 0.75s var(--ease-out-quart) forwards; } .hero--field .hero-divider { animation-delay: 0.66s; } .hero--field .hero-statement { animation-delay: 0.72s; } .hero--field .hero-lede { animation-delay: 0.78s; } .hero--field .hero-cta-row { animation-delay: 0.90s; } .hero--field .hero-roadmap { animation-delay: 1.02s; } .hero--field .hero-ticker { animation-delay: 1.14s; } } @keyframes wordUp { to { transform: translateY(0); opacity: 1; } } @keyframes accentColor { from { color: #fff; } to { color: var(--cyan); } } @keyframes heroRise { to { transform: translateY(0); opacity: 1; } } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 3.75rem; /* más aire entre el texto y los botones */ } /* ── Banda dinámica: wire de servicios (señalética + enlaces reales) ── */ .hero-ticker { position: relative; z-index: 4; display: flex; align-items: stretch; height: 84px; border-top: 1px solid rgba(0,201,200,0.18); background: #0a1526; } .hero-ticker-viewport { position: relative; flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .hero-ticker-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; will-change: transform; } .hero-ticker-group { display: flex; align-items: center; flex: none; } /* Wire de servicios: separados por el "+" del campo de ticks del hero */ .wire-item { display: inline-flex; align-items: baseline; padding: 0 1.9rem; font-family: 'DM Sans', system-ui, sans-serif; font-size: 1.08rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.88); /* nombre del servicio protagonista */ white-space: nowrap; transition: color 0.3s ease; } /* Separador "+": mismo motivo que los ticks vectoriales del fondo del hero */ .wire-item::before { content: '+'; align-self: center; margin-right: 3.8rem; font-weight: 400; font-size: 0.95rem; color: rgba(0,201,200,0.5); transition: color 0.3s ease, transform 0.3s ease; } /* Al frenar con el ratón, foco sobre el ítem señalado */ .hero-ticker-viewport:hover .wire-item { color: rgba(255,255,255,0.6); } .hero-ticker-viewport:hover .wire-item:hover { color: #fff; } .hero-ticker-viewport:hover .wire-item:hover::before { color: var(--cyan); transform: rotate(45deg); } /* Pill de estado para servicios en desarrollo */ .wire-status { align-self: center; margin-left: 0.15rem; padding: 0.22rem 0.55rem; border: 1px solid rgba(0,201,200,0.35); border-radius: 99px; font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.56rem; font-style: normal; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); } /* Responsive */ @media (max-width: 900px) { .hero--field .hero-inner { margin-block: auto; margin-inline: 1.5rem; padding-top: 130px; max-width: none; } .hero-ticker { height: 68px; } .wire-item { padding: 0 1.4rem; font-size: 0.95rem; } .wire-item::before { margin-right: 2.8rem; } } @media (max-width: 520px) { .hero--field .hero-title { font-size: clamp(2.3rem, 12vw, 3rem); } } /* ─── Formularios: errores de validación y feedback real ─────────── */ .form-error { margin-top: 0.35rem; font-size: 0.78rem; font-weight: 600; color: #C0392B; line-height: 1.4; } .surface-dark .form-error { color: #FF8A7A; } .form-input[aria-invalid="true"], .form-select[aria-invalid="true"], .form-textarea[aria-invalid="true"], .catalog-input[aria-invalid="true"], #waitlist-form input[aria-invalid="true"] { border-color: #C0392B !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); } /* Alerta de fallo de envío (formulario principal) */ .form-alert { margin-top: 1rem; padding: 0.8rem 1rem; font-size: 0.85rem; font-weight: 600; color: #8E2A1E; background: rgba(192, 57, 43, 0.08); border: 1px solid rgba(192, 57, 43, 0.35); } /* Feedback de la waitlist SaaS */ .form-feedback { margin-top: 0.6rem; font-size: 0.82rem; font-weight: 600; color: var(--cyan-ink); max-width: 28rem; line-height: 1.5; } .form-feedback.is-error { color: #C0392B; } .catalog-confirm.is-error { color: #C0392B; } /* Errores dentro de formularios en línea (fila flex): ocupan su propia línea */ #waitlist-form .form-error, .catalog-form .form-error { flex-basis: 100%; } #waitlist-form { flex-wrap: wrap; } /* ─── Páginas legales (legal/*.html) ─────────────────────── */ .legal-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(10, 22, 40, 0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(0, 201, 200, 0.15); padding: 0.6rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .legal-back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.3s ease; } .legal-back:hover { color: var(--cyan); } .legal-main { max-width: 760px; margin: 0 auto; padding: 10rem 1.5rem 5rem; } .legal-main h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--text-on-dark); line-height: 1.05; margin-bottom: 0.6rem; } .legal-updated { display: block; font-family: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 3rem; } .legal-main h2 { font-size: 1.3rem; color: var(--text-on-dark); margin: 2.4rem 0 0.7rem; letter-spacing: -0.02em; } .legal-main p, .legal-main li { color: rgba(255,255,255,0.74); font-size: 0.98rem; line-height: 1.75; margin-bottom: 0.8rem; } .legal-main ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1rem; } .legal-main li { margin-bottom: 0.35rem; } .legal-main a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; } .legal-footer { max-width: 760px; margin: 0 auto; padding: 0 1.5rem 3rem; font-size: 0.75rem; color: rgba(255,255,255,0.5); } /* ─── Print: el contenido coreografiado por GSAP/reveal queda siempre visible ── */ @media print { .reveal, .training-card, .audit-card, .team-card, .st-in, .section-header p, .hero--field .word-in { opacity: 1 !important; transform: none !important; } #navbar, .hero-ticker, .mobile-menu { display: none !important; } } /* ─── Reduced motion (accesibilidad) ────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* El contenido revelado por scroll debe quedar siempre visible */ .reveal { opacity: 1 !important; transform: none !important; } /* Detener movimientos decorativos en bucle */ .tick, #saas .dashboard-mockup { animation: none !important; } /* Aplanar la perspectiva del mockup */ #saas .dashboard-mockup { transform: none !important; } /* La banda regulatoria queda estática bajo reduced-motion (la mueve el JS) */ .hero-ticker-track { transform: none !important; } }