/* Hallmark · genre: modern-minimal · macrostructure: Split Studio * theme: brand-locked (Manual de Marca Nexatur - no catalogo Hallmark) * nav: N5 Floating Pill · footer: Ft1 Mast-headed */ /* ============================================================ NEXATUR - sistema visual Tokens de marca: Manual de Marca Nexatur (vinculante) Diales: DESIGN_VARIANCE 7 · MOTION_INTENSITY 5 · VISUAL_DENSITY 4 ============================================================ */ @font-face { font-family: "DM Sans"; src: url("../assets/fonts/DMSans-Variable.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* Marca - fijos por manual, nunca cambian con el tema */ --nx-black: #1c1c1e; --nx-deep: #266f76; --nx-teal: #00a595; --nx-aqua: #4ce0d2; --nx-silver: #c0c1c3; --nx-white: #f4f4f6; /* ---- Tema oscuro (principal / por defecto) ---- */ /* Superficies derivadas: escalonan profundidad sin salir del negro de marca */ --surface-0: #16191a; --surface-1: var(--nx-black); --surface-2: #23282a; --surface-3: #2c3234; /* Triples RGB (sin alpha) para componer rgba() que se adaptan al tema */ --ink-rgb: 244, 244, 246; /* nx-white: usado en veladuras/hairlines sobre superficie oscura */ --surface-rgb: 28, 28, 30; /* nx-black: usado en vidrios translucidos (header) */ /* Semánticos */ --ink: var(--nx-white); --ink-muted: #9ba1a3; --ink-faint: #868c8e; /* 5.0:1 sobre --surface-1: recede sin bajar de WCAG AA */ --accent: var(--nx-teal); --accent-light: var(--nx-aqua); /* accent-pop: variante del acento para TEXTO/iconos que necesitan contraste legible contra la superficie actual. En oscuro el aqua brilla; en claro el aqua casi no se lee sobre blanco, así que se cambia por el deep. */ --accent-pop: var(--nx-aqua); --hairline: rgba(var(--ink-rgb), 0.13); --hairline-strong: rgba(var(--ink-rgb), 0.26); /* Tipografía */ --font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; /* Espaciado */ --sp-xs: 0.25rem; --sp-sm: 0.5rem; --sp-md: 1rem; --sp-lg: 1.5rem; --sp-xl: 2rem; --sp-2xl: 3rem; --sp-3xl: 4rem; --sp-4xl: 6rem; --sp-5xl: 8rem; /* Forma: sistema documentado - paneles rectos, controles 8px, botones píldora. Excepción declarada: tarjetas flotantes con elevación/rotación (Dimensional Layering) usan --radius-float, nunca los paneles planos dentro del flujo. */ --radius-panel: 0px; --radius-control: 8px; --radius-pill: 999px; --radius-float: 18px; --container: 1240px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --header-h: 76px; color-scheme: dark; } /* ---- Tema claro: activado con [data-theme="light"] en ---- Usa los tonos claros ya definidos en el manual (Nexatur White/Silver como superficie, Nexatur Black como tinta). El oscuro sigue siendo el tema principal; este es el opt-in. */ :root[data-theme="light"] { --surface-0: #fafafa; --surface-1: var(--nx-white); --surface-2: #e7e8ea; --surface-3: var(--nx-silver); --ink-rgb: 28, 28, 30; /* nx-black: veladuras/hairlines sobre superficie clara */ --surface-rgb: 244, 244, 246; /* nx-white: vidrio translucido claro */ --ink: var(--nx-black); --ink-muted: #55585c; /* 6.5:1 sobre nx-white */ --ink-faint: #6b6e71; /* 4.7:1 sobre nx-white, pasa AA de texto normal */ --accent-pop: var(--nx-deep); /* el aqua no se lee sobre blanco; el deep si */ color-scheme: light; } /* ============================================================ Reset y base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Cruce suave entre temas: solo color/fondo/borde, nunca layout. */ body, body * { transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; background: var(--surface-1); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.08; letter-spacing: -0.022em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } input, textarea { font: inherit; } blockquote { margin: 0; } :focus-visible { outline: 2px solid var(--accent-pop); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: var(--sp-md); top: -100px; z-index: 200; background: var(--accent); color: #06201c; padding: 0.75rem 1.25rem; border-radius: var(--radius-control); font-weight: 600; transition: top 0.2s var(--ease); } .skip-link:focus { top: var(--sp-md); } .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-xl); } @media (max-width: 640px) { .wrap { padding: 0 var(--sp-lg); } } .muted { color: var(--ink-muted); } /* ============================================================ Escala tipográfica ============================================================ */ .h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; } .h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; } .h3-label { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-pop); margin: 0 0 var(--sp-md); } .lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.55; max-width: 60ch; } .eyebrow { display: block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-pop); margin-bottom: var(--sp-md); } /* ============================================================ Botones ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.85rem 1.9rem; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem; white-space: nowrap; border: 1px solid transparent; transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); } .btn:active { transform: scale(0.975); } .btn-sm { min-height: 44px; padding: 0.6rem 1.35rem; font-size: 0.88rem; } .btn-primary { background: var(--accent); color: var(--nx-white); } .btn-primary:hover { background: var(--accent-light); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline-strong); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-pop); transform: translateY(-2px); } /* ============================================================ Header - pill flotante, pero del ancho del contenedor de contenido: alinea exactamente con donde arranca el texto del hero y donde terminan las tarjetas flotantes (mismo max-width y padding horizontal que .wrap), no un pill angosto centrado. ============================================================ */ .site-header { position: fixed; top: var(--sp-md); left: 50%; transform: translateX(-50%); z-index: 100; width: 100%; /* El borde de la pildora, no el contenido interno, alinea con donde arranca el texto del hero y donde terminan las tarjetas flotantes. */ max-width: calc(var(--container) - 2 * var(--sp-xl)); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); /* Asimetrico a proposito: el borde derecho ya es un pill (el boton "Hablemos"), necesita menos aire que el lado del wordmark para no verse descentrado contra la curva del contenedor. */ padding: 0.6rem 0.6rem 0.6rem 1.5rem; background: rgba(var(--surface-rgb), 0.5); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.35); transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); } .site-header.is-scrolled { background: rgba(var(--surface-rgb), 0.82); box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.4); border-color: var(--hairline-strong); } .brand { display: flex; align-items: center; flex-shrink: 0; } .brand img { height: 22px; width: auto; } /* Logo con dos versiones (blanco/negro): el manual exige contraste correcto del wordmark contra el fondo, y eso cambia con el tema. */ .brand-logo--light { display: none; } :root[data-theme="light"] .brand-logo--dark { display: none; } :root[data-theme="light"] .brand-logo--light { display: block; } .theme-toggle { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink-muted); transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .theme-toggle:hover { color: var(--ink); border-color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } .nav-links { display: flex; align-items: center; gap: var(--sp-lg); } .nav-links a { position: relative; font-size: 0.9rem; font-weight: 500; color: var(--ink-muted); padding: 0.5rem 0; transition: color 0.25s var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } .nav-links a.is-active { color: var(--ink); } .nav-links a.is-active::after { transform: scaleX(1); transform-origin: left; } .header-actions { display: flex; align-items: center; gap: var(--sp-md); } .nav-toggle { position: relative; display: none; background: none; border: none; color: var(--ink); width: 44px; height: 44px; align-items: center; justify-content: center; } .nav-toggle-bars { display: block; width: 22px; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .nav-toggle-bars i { display: block; height: 1.5px; background: currentColor; } .nav-toggle-bars i:first-child { margin-bottom: 6px; } /* Al abrir, las barras no rotan a una X generica: se desvanecen y en su lugar aparece el simbolo real de marca (flechas convergentes) - es la X del logo, no una aproximacion geometrica. */ .nav-toggle[aria-expanded="true"] .nav-toggle-bars { opacity: 0; transform: scale(0.7); } .nav-toggle-x { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%) scale(0.6) rotate(-30deg); opacity: 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .nav-toggle[aria-expanded="true"] .nav-toggle-x { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } @media (max-width: 900px) { .nav-links { display: none; } .nav-toggle { display: flex; } .header-actions .btn { display: none; } .header-actions .theme-toggle { display: none; } } @media (max-width: 640px) { .site-header { max-width: calc(100% - 2 * var(--sp-lg)); padding-left: 1.1rem; padding-right: 0.5rem; } } /* Tarjeta de vidrio flotante, misma estetica que el pill del nav (blur, translucida, borde, radio) - no un bloque solido a pantalla completa. Se ancla debajo del pill, alineada a sus mismos margenes. */ .mobile-nav { position: fixed; top: 92px; left: var(--sp-xl); right: var(--sp-xl); z-index: 99; max-height: calc(100dvh - 92px - var(--sp-xl)); overflow-y: auto; background: rgba(var(--surface-rgb), 0.82); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--hairline-strong); border-radius: var(--radius-float); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5); padding: var(--sp-lg) var(--sp-lg) var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-sm); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .mobile-nav a { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; padding: 0.6rem 0; border-bottom: 1px solid var(--hairline); } .mobile-nav a:last-of-type { border-bottom: none; } .mobile-nav .btn { align-self: stretch; justify-content: center; margin-top: var(--sp-md); font-size: 1rem; } .mobile-nav-row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--hairline); } .mobile-nav-row-label { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; color: var(--ink-muted); } .theme-switch { width: 52px; height: 30px; border-radius: 999px; border: none; background: transparent; padding: 0; flex-shrink: 0; } .theme-switch-track { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--hairline-strong); border: 1px solid var(--hairline-strong); position: relative; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); } .theme-switch-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-muted); transition: transform 0.25s var(--ease), background-color 0.25s var(--ease); } .theme-switch[aria-checked="true"] .theme-switch-track { background: var(--nx-teal); border-color: var(--nx-teal); } .theme-switch[aria-checked="true"] .theme-switch-thumb { transform: translateX(22px); background: var(--nx-black); } @media (max-width: 640px) { .mobile-nav { left: var(--sp-lg); right: var(--sp-lg); } } /* ============================================================ 1 · HERO - degradado de marca (manual: "Version Alterna Sobre Degradado"), no foto. Elimina el corte panel/imagen; el glow teal difuminado es un activo de marca real, no una invención. ============================================================ */ .hero { position: relative; display: flex; align-items: center; min-height: 100dvh; background: var(--surface-0); overflow: hidden; } .hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Los blobs se apagan antes de llegar al borde inferior, para que el color no quede cortado en seco contra la seccion siguiente. */ mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%); } .hero-glow i { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; } .hero-glow i:nth-child(1) { width: 62vw; height: 62vw; left: -18vw; bottom: -26vw; background: radial-gradient(circle, rgba(76, 224, 210, 0.30) 0%, rgba(0, 165, 149, 0.12) 42%, transparent 70%); animation: hero-drift-a 10s ease-in-out infinite; } .hero-glow i:nth-child(2) { width: 48vw; height: 48vw; right: -12vw; top: -14vw; background: radial-gradient(circle, rgba(0, 165, 149, 0.24) 0%, transparent 68%); animation: hero-drift-b 12s ease-in-out infinite; } .hero-glow i:nth-child(3) { width: 30vw; height: 30vw; right: 8vw; bottom: -10vw; background: radial-gradient(circle, rgba(38, 111, 118, 0.4) 0%, transparent 72%); animation: hero-drift-c 9s ease-in-out infinite; } .hero-glow i:nth-child(4) { width: 36vw; height: 36vw; left: 30vw; top: 20vw; background: radial-gradient(circle, rgba(76, 224, 210, 0.22) 0%, transparent 70%); animation: hero-drift-d 14s ease-in-out infinite; } .hero-glow i:nth-child(5) { width: 34vw; height: 34vw; left: -12vw; top: -18vw; background: radial-gradient(circle, rgba(0, 165, 149, 0.26) 0%, transparent 70%); animation: hero-drift-e 11s ease-in-out infinite; } /* Recorridos con varios puntos (no solo ida-y-vuelta lineal), para que el movimiento se lea como algo vivo/organico y no un rebote mecanico. */ @keyframes hero-drift-a { 0% { transform: translate(0, 0) scale(1); } 30% { transform: translate(9vw, -7vw) scale(1.18); } 60% { transform: translate(4vw, 6vw) scale(0.92); } 100% { transform: translate(0, 0) scale(1); } } @keyframes hero-drift-b { 0% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-8vw, 8vw) scale(0.82); } 70% { transform: translate(-3vw, -5vw) scale(1.1); } 100% { transform: translate(0, 0) scale(1); } } @keyframes hero-drift-c { 0% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-7vw, -6vw) scale(1.25); } 75% { transform: translate(5vw, 3vw) scale(0.9); } 100% { transform: translate(0, 0) scale(1); } } @keyframes hero-drift-d { 0% { transform: translate(0, 0) scale(0.9); opacity: 0.6; } 50% { transform: translate(6vw, -8vw) scale(1.2); opacity: 1; } 100% { transform: translate(0, 0) scale(0.9); opacity: 0.6; } } @keyframes hero-drift-e { 0% { transform: translate(0, 0) scale(1); } 45% { transform: translate(8vw, 6vw) scale(1.15); } 80% { transform: translate(3vw, -4vw) scale(0.85); } 100% { transform: translate(0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .hero-glow i { animation: none; } } /* En claro los mismos tonos teal se diluyen contra el fondo casi blanco - se sube la opacidad para que el movimiento se note igual de bien que en oscuro. */ :root[data-theme="light"] .hero-glow i:nth-child(1) { background: radial-gradient(circle, rgba(76, 224, 210, 0.3) 0%, rgba(0, 165, 149, 0.14) 42%, transparent 70%); } :root[data-theme="light"] .hero-glow i:nth-child(2) { background: radial-gradient(circle, rgba(0, 165, 149, 0.25) 0%, transparent 68%); } :root[data-theme="light"] .hero-glow i:nth-child(3) { background: radial-gradient(circle, rgba(76, 224, 210, 0.28) 0%, transparent 72%); } :root[data-theme="light"] .hero-glow i:nth-child(4) { background: radial-gradient(circle, rgba(76, 224, 210, 0.24) 0%, transparent 70%); } :root[data-theme="light"] .hero-glow i:nth-child(5) { background: radial-gradient(circle, rgba(0, 165, 149, 0.27) 0%, transparent 70%); } .hero-copy { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: calc(var(--header-h) + var(--sp-2xl)) var(--sp-xl) var(--sp-3xl); display: flex; align-items: center; justify-content: center; text-align: center; gap: var(--sp-3xl); } .hero-copy-inner { max-width: 900px; } /* La tipografia es el unico elemento dominante del hero, sin tarjeta que le dispute espacio: columna ancha para que el titular respire en dos o tres lineas grandes, no un parrafo apretado. Todo centrado. */ .hero-h1 { font-size: clamp(2.6rem, 5.2vw, 4.5rem); margin-bottom: var(--sp-lg); } /* Minimalismo editorial: sin tarjeta, sin elemento visual aparte. El titular grande y el glow ambiental de fondo cargan todo el peso de la composicion - el aire alrededor es la decision de diseno, no un vacio accidental. */ .hero .lede { color: var(--ink-muted); margin: 0 auto var(--sp-xl); max-width: 46ch; } .hero-actions { display: flex; justify-content: center; gap: var(--sp-md); flex-wrap: wrap; } /* Los tres pilares como un camino que se enciende, no una lista mas: arrancan apagados y se iluminan en secuencia (Performance, luego Growth, luego Travel) al cargar la pagina - representa el recorrido, no es decorativo porque le da lectura de orden/progresion al texto. */ .hero-path { display: flex; align-items: center; justify-content: center; gap: var(--sp-md); margin-top: var(--sp-5xl); } .hero-path-word { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: -0.005em; color: var(--ink-faint); transition: color 0.6s var(--ease); } /* Mismo mecanismo que el sistema de reveal-on-scroll del resto del sitio: transition + transition-delay disparados por una sola clase, en vez de @keyframes/animation-play-state (eso producia saltos). */ .hero-path-word--1 { transition-delay: 0.1s; } .hero-path-word--2 { transition-delay: 0.7s; } .hero-path-word--3 { transition-delay: 1.3s; } .hero-path.is-active .hero-path-word { color: var(--ink); } /* Una vez terminada la secuencia inicial, un cambio de tema (--ink pasa de blanco a negro) tambien dispara esta transition - y como el delay sigue puesto, el texto queda "congelado" en su color viejo hasta 4.1s, por eso parecia desaparecer contra el nuevo fondo. Al terminar la secuencia se anula el delay para que los cambios de tema sean instantaneos de ahi en adelante. */ .hero-path.reveal-done .hero-path-word { transition-delay: 0s; transition-duration: 0.25s; } .hero-path-connector { flex: none; display: flex; align-items: center; justify-content: center; width: 15px; height: 16px; color: var(--ink-faint); transform: scale(0.8); transition: color 0.6s var(--ease), transform 0.6s var(--ease); } .hero-path-connector svg { width: 100%; height: 100%; display: block; } /* Los conectores no siguen el orden intermedio: se quedan en gris mientras se revelan las tres palabras y recien ahi, las dos juntas, se encienden a la vez. */ .hero-path-connector { transition-delay: 2s; } .hero-path.is-active .hero-path-connector { color: var(--accent); transform: scale(1); } .hero-path.reveal-done .hero-path-connector { transition-delay: 0s; transition-duration: 0.25s; } @media (prefers-reduced-motion: reduce) { .hero-path-word, .hero-path-connector { transition: none; } .hero-path-word { color: var(--ink); } .hero-path-connector { color: var(--accent); transform: none; } } @media (max-width: 900px) { /* min-height:100dvh (no "auto"): con el texto mas compacto el contenido quedaba mas corto que la pantalla y se veia asomar la siguiente seccion en el borde inferior al cargar. */ .hero { min-height: 100dvh; padding: calc(var(--header-h) + var(--sp-2xl)) 0 var(--sp-3xl); } .hero-copy { padding: 0 var(--sp-lg); } .hero-copy-inner { max-width: none; } .hero-h1 { font-size: clamp(2rem, 9vw, 2.6rem); } .hero .lede { font-size: 0.92rem; } .hero-actions .btn { flex: 1 1 auto; } .hero-path { margin-top: var(--sp-3xl); gap: var(--sp-sm); } .hero-path-word { font-size: 1.05rem; } .hero-path-connector { width: 11px; height: 12px; } .hero-glow i:nth-child(1) { width: 90vw; height: 90vw; left: -30vw; bottom: -30vw; } .hero-glow i:nth-child(2) { width: 80vw; height: 80vw; right: -30vw; top: -20vw; } } /* Tablet (641-900px): el titular del hero es mas largo desde que se agrego "Somos tu aliado estrategico..." y con el tamano movil normal se parte en 3 lineas en este rango intermedio. Se achica solo aqui para que quede en 2 - en movil real (<=640px) se deja como estaba. */ @media (min-width: 641px) and (max-width: 900px) { .hero-h1 { font-size: clamp(1.7rem, 6.2vw, 2.3rem); } } /* ============================================================ Andamiaje de sección ============================================================ */ .section { padding: var(--sp-5xl) 0; } @media (max-width: 720px) { .section { padding: var(--sp-3xl) 0; } } .section-head { max-width: 620px; margin-bottom: var(--sp-3xl); } .section-head h2 { margin-bottom: var(--sp-md); } /* Motion - reveal escalonado, gobernado por IntersectionObserver */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ 2 · DIAGNÓSTICO - declaración fija + lista dividida (sin tarjetas) ============================================================ */ .diagnostico { background: var(--surface-1); } .diagnostico-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-4xl); align-items: start; } /* Alterna la direccion del diptico frente al hero (texto-izq/prueba-der): aqui la prueba (la lista) va a la izquierda. */ .brechas { order: 1; } .diagnostico-claim { order: 2; position: sticky; top: calc(var(--sp-2xl) + 84px); } .diagnostico-claim h2 { margin-bottom: var(--sp-lg); } .diagnostico-claim em { font-style: normal; color: var(--accent-pop); } .brechas { border-top: 1px solid var(--hairline); } .brechas li { padding: var(--sp-lg) 0 var(--sp-lg) var(--sp-xl); border-bottom: 1px solid var(--hairline); position: relative; transition: padding-left 0.7s var(--ease); } /* El simbolo de la marca (SVG, no texto) como marcador. */ .brechas li::before { content: ""; position: absolute; left: 0; top: calc(var(--sp-lg) + 0.2em); width: 12px; height: 12px; background-color: var(--accent); -webkit-mask-image: url("../assets/logo/simbolo.svg"); mask-image: url("../assets/logo/simbolo.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: transform 0.7s var(--ease), background-color 0.7s var(--ease); } .brechas li:hover { padding-left: calc(var(--sp-xl) + 8px); } .brechas li:hover::before { transform: translateX(6px); background-color: var(--accent-pop); } .brechas h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.3rem; } .brechas p { color: var(--ink-muted); font-size: 0.95rem; max-width: 52ch; } @media (max-width: 900px) { .diagnostico-grid { grid-template-columns: 1fr; gap: var(--sp-2xl); } .diagnostico-claim { position: static; order: 1; } .brechas { order: 2; } } /* ============================================================ MENSAJE CENTRAL - tarjeta de marca a pantalla completa ============================================================ */ .mensaje { background: var(--surface-1); padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); } .mensaje-card { background: linear-gradient(180deg, var(--nx-deep) 0%, #17383c 100%); color: var(--nx-white); border-radius: var(--radius-float); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5); padding: var(--sp-4xl) var(--sp-3xl); text-align: center; } .mensaje-title { color: var(--nx-white); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.3; margin-bottom: var(--sp-lg); max-width: 20ch; margin-left: auto; margin-right: auto; } .mensaje-title em { font-style: normal; color: var(--nx-aqua); } .mensaje-sub { color: rgba(255, 255, 255, 0.75); font-size: 1.05rem; max-width: 58ch; margin: 0 auto; } @media (max-width: 720px) { .mensaje-card { padding: var(--sp-2xl) var(--sp-lg); } } /* ============================================================ 3 · SERVICIOS - diptico Split Studio: pila de tarjetas escalonadas + foto ============================================================ */ .servicios { background: var(--surface-1); padding-bottom: var(--sp-2xl); } /* El titulo de esta seccion es una frase mas larga que las demas del sitio - se ensancha el contenedor y se reduce un poco el tamano para que quepa en 2 lineas en vez de 4. */ .servicios .section-head { max-width: 920px; } .servicios .section-head h2 { font-size: clamp(1.6rem, 2.7vw, 2.5rem); margin-bottom: var(--sp-xl); } /* Tres cards, mismo ancho, misma altura (align-items: stretch) y mismo tono (vidrio neutro, sin teal de marca en la superficie). El acento verde vive solo en el detalle interactivo de cada frente (ver .pilar-tags mas abajo), no en la caja. Los titulos se fijan arriba (justify-content: flex-start) para que las tres cabeceras queden a la misma altura sin importar cuanto contenido traiga cada card. */ .pilares { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: var(--sp-lg); } /* Las 2 lineas de servicio de la propuesta comercial (en vez de 3 pilares con nombre propio): mismo componente visual, 2 columnas. */ .pilares--dos { grid-template-columns: repeat(2, 1fr); } .pilar { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-lg); padding: var(--sp-lg); border-radius: var(--radius-float); background: linear-gradient(165deg, var(--surface-3) 0%, var(--surface-1) 100%); border: 1px solid rgba(var(--ink-rgb), 0.08); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(var(--ink-rgb), 0.05); } /* En claro, el degradado silver->blanco se leia sucio/gris; el mismo vidrio translucido y plano que usa el menu movil desplegable se ve mas limpio y consistente con el resto de la UI en este tema. */ :root[data-theme="light"] .pilar { background: rgba(var(--surface-rgb), 0.82); border: 1px solid var(--hairline-strong); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.12); } .pilar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-md); } /* min-height reserva 2 lineas siempre: si el nombre de una card cabe en 1 linea y el de otra necesita 2, sin esto el resto del contenido (frase + lista de frentes) queda desnivelado entre cards. */ .pilar-head h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; line-height: 1.25; min-height: 2.5em; } .pilar-linea-tag { flex-shrink: 0; font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; color: var(--ink-faint); white-space: nowrap; } /* min-height reserva el mismo espacio en todas las cards (2 lineas), para que la lista de frentes empiece siempre a la misma altura sin importar si la frase de esta card en particular ocupa 1 o 2 lineas. */ .pilar-thesis { color: var(--ink-muted); font-size: 0.92rem; line-height: 1.5; min-height: 2.8rem; } .pilar-tags { display: flex; flex-direction: column; } .pilar-tags li { border-top: 1px solid var(--hairline); } .pilar-tag-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); width: 100%; padding: 0.7rem 0; background: none; border: none; color: inherit; font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; letter-spacing: -0.01em; text-align: left; cursor: pointer; } /* Mismo lenguaje que el subrayado de la nav bar: la barra verde crece desde la izquierda al pasar el cursor, no es un color fijo. */ .pilar-tag-toggle .label { position: relative; transition: color 0.6s var(--ease); } .pilar-tag-toggle .label::after { content: ""; position: absolute; left: 0; bottom: -0.25em; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.65s var(--ease); } .pilar-tag-toggle[aria-expanded="true"] .label { color: var(--accent-pop); } .pilar-tag-toggle[aria-expanded="true"] .label::after { transform: scaleX(1); transform-origin: left; } @media (hover: hover) { .pilar-tag-toggle:hover .label { color: var(--accent-pop); } .pilar-tag-toggle:hover .label::after { transform: scaleX(1); transform-origin: left; } } /* Flecha extraida del angulo real del brazo del simbolo (no un chevron generico) - mismo color que el subtitulo, gira 180deg al desplegar. */ .pilar-tag-arrow { flex: none; width: 13px; height: 5px; transition: transform 0.4s var(--ease); } .pilar-tag-toggle[aria-expanded="true"] .pilar-tag-arrow { transform: rotate(180deg); } .pilar-tag-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); } .pilar-tag-body > div { overflow: hidden; } .pilar-tag-body p { color: var(--ink-muted); font-size: 0.88rem; line-height: 1.5; max-width: 42ch; padding-bottom: 0.9rem; } .pilar-tag-toggle[aria-expanded="true"] + .pilar-tag-body { grid-template-rows: 1fr; } /* Aparicion gradual, una sola vez: no ligada al scroll. Se dispara al entrar en el viewport (ver .reveal en main.js), un poco mas lenta que el reveal general del sitio para que se note el gradiente de entrada entre las tres, y despues queda fija - no vuelve a desaparecer al subir el scroll. */ .pilar.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--reveal-delay, 0ms); } .pilar.reveal.is-visible { opacity: 1; transform: none; } @media (max-width: 860px) { .pilares { grid-template-columns: 1fr; } } /* Reduced motion: colapsa a estatico (ver bloque global mas abajo). */ /* ============================================================ METODOLOGÍA - cuatro fases en grid (reusa el vidrio de .pilar) ============================================================ */ /* padding-top reducido (no el var(--sp-5xl) por defecto de .section): esta seccion continua directamente la idea de "como trabajamos" de Servicios, no abre un tema nuevo - pero el hairline le da un limite visual propio para que no se sienta pegada sin mas. Mismo patron que .nosotros-pilares mas abajo. */ .metodologia { background: var(--surface-1); padding-top: var(--sp-3xl); padding-bottom: var(--sp-3xl); } .metodologia .wrap { border-top: 1px solid var(--hairline); padding-top: var(--sp-3xl); } .metodologia .section-head { max-width: 780px; } .metodologia .section-head h2 { margin-bottom: var(--sp-xl); } .fases { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); } .fase { padding: var(--sp-lg); border-radius: var(--radius-float); background: linear-gradient(165deg, var(--surface-3) 0%, var(--surface-1) 100%); border: 1px solid rgba(var(--ink-rgb), 0.08); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(var(--ink-rgb), 0.05); } :root[data-theme="light"] .fase { background: rgba(var(--surface-rgb), 0.82); border: 1px solid var(--hairline-strong); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.12); } .fase-num { display: block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; color: var(--accent-pop); margin-bottom: var(--sp-md); } .fase h3 { font-size: 1.1rem; margin-bottom: 0.4rem; } .fase p { color: var(--ink-muted); font-size: 0.92rem; line-height: 1.5; } /* La ultima fase (Resultados) se destaca con la misma tarjeta de marca fija que .dif-mayor, para cerrar el ciclo con el acento de marca. */ .fase--dark { background: linear-gradient(152deg, var(--nx-deep) 0%, #17383c 100%); border: none; } .fase--dark .fase-num { color: var(--nx-aqua); } .fase--dark h3 { color: var(--nx-white); } .fase--dark p { color: rgba(255, 255, 255, 0.75); } /* La regla de modo claro de .fase (mas arriba) tiene mas especificidad que .fase--dark sola y se la comia, dejando texto blanco sobre fondo casi blanco. Se reafirma aqui con el mismo nivel de especificidad. */ :root[data-theme="light"] .fase.fase--dark { background: linear-gradient(152deg, var(--nx-deep) 0%, #17383c 100%); border: none; } @media (max-width: 900px) { .fases { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .fases { grid-template-columns: 1fr; } } /* ============================================================ 4 · DIFERENCIA - comparación asimétrica (lo menor recede) ============================================================ */ /* Mismo patron que .metodologia: gap reducido + hairline propio, para que la transicion desde Metodologia se sienta igual de cercana. */ .diferencia { background: var(--surface-1); padding-top: var(--sp-2xl); padding-bottom: var(--sp-3xl); } .diferencia .wrap { border-top: 1px solid var(--hairline); padding-top: var(--sp-4xl); } .diferencia .section-head { margin-bottom: var(--sp-4xl); } .diferencia-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--sp-4xl); align-items: center; } .dif-menor p { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); margin-bottom: var(--sp-lg); } .dif-menor ul { display: flex; flex-direction: column; gap: var(--sp-md); } .dif-menor li { color: var(--ink-faint); font-size: 0.95rem; line-height: 1.5; padding-left: var(--sp-lg); position: relative; } .dif-menor li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 10px; height: 10px; background-color: var(--ink-faint); -webkit-mask-image: url("../assets/logo/simbolo.svg"); mask-image: url("../assets/logo/simbolo.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Tarjeta de marca fija: siempre teal oscuro con tinta clara, independiente del tema del sitio (no usa tokens de superficie/tinta que se invierten, porque esta superficie nunca debe aclararse). */ .dif-mayor { background: linear-gradient(152deg, var(--nx-deep) 0%, #17383c 100%); color: var(--nx-white); border-radius: var(--radius-float); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5); padding: var(--sp-3xl); } .dif-mayor h2 { color: var(--nx-white); margin-bottom: var(--sp-xl); } .dif-lista { display: flex; flex-direction: column; gap: var(--sp-lg); } .dif-lista li { color: var(--nx-white); font-size: 1.08rem; line-height: 1.45; font-weight: 500; padding-left: var(--sp-xl); position: relative; } .dif-lista li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px; background-color: var(--nx-aqua); -webkit-mask-image: url("../assets/logo/check.svg"); mask-image: url("../assets/logo/check.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @media (max-width: 900px) { .diferencia-grid { grid-template-columns: 1fr; gap: var(--sp-2xl); } .dif-mayor { padding: var(--sp-xl); } } /* ============================================================ CÓMO NOS MEDIMOS - grid de indicadores ============================================================ */ .indicadores { background: var(--surface-1); padding-top: var(--sp-xl); padding-bottom: var(--sp-3xl); } .indicadores .wrap { border-top: 1px solid var(--hairline); padding-top: var(--sp-3xl); } /* Diptico: texto/promesa a la izquierda, prueba (grid 3x2) a la derecha - mismo patron que .diagnostico-grid y .diferencia-grid. */ .indicadores-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-4xl); align-items: center; } .indicadores-claim h2 { margin-bottom: var(--sp-lg); } .indicadores-claim .lede { font-size: 0.95rem; } .indicadores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); } .indicador { border: 1px solid var(--hairline); border-radius: var(--radius-float); padding: var(--sp-lg) var(--sp-md); text-align: center; } .indicador strong { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--accent-pop); margin-bottom: 0.35rem; } .indicador span { display: block; color: var(--ink-muted); font-size: 0.82rem; line-height: 1.4; } @media (max-width: 900px) { .indicadores-layout { grid-template-columns: 1fr; gap: var(--sp-2xl); } } @media (max-width: 560px) { .indicadores-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ 5 · ALIANZAS - diptico Split Studio: texto/foto contenida, alterna con Servicios y Diferencia. Ya no es media a sangre con panel superpuesto (ese patrón repetía la costura que se quería evitar). ============================================================ */ .alianzas { background: var(--surface-1); } .alianzas-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--sp-4xl); align-items: center; } .alianzas-panel h2 { margin-bottom: var(--sp-lg); } .alianzas-panel p { color: var(--ink-muted); max-width: 50ch; margin-bottom: var(--sp-xl); } .alianzas-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* Mismo material que las cards de "Un ecosistema, siete frentes": vidrio oscuro con elevacion, no el contorno plano que tenian antes. */ .alianzas-tags li { border-radius: var(--radius-float); padding: 0.6rem 1.1rem; font-size: 0.85rem; color: var(--ink-muted); background: rgba(var(--surface-rgb), 0.5); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--hairline-strong); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35); } :root[data-theme="light"] .alianzas-tags li { background: rgba(var(--surface-rgb), 0.82); border: 1px solid var(--hairline-strong); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.12); } .alianzas-proof { margin: 0; } .alianzas-proof picture, .alianzas-proof img { width: 100%; display: block; border-radius: var(--radius-float); } .alianzas-proof img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5); } @media (max-width: 900px) { .alianzas-grid { grid-template-columns: 1fr; gap: var(--sp-xl); } .alianzas-tags { flex-direction: column; } .alianzas-tags li { width: 100%; text-align: center; box-sizing: border-box; } } /* ============================================================ 6 · NOSOTROS - diptico Split Studio: cita (prueba) izquierda, Misión/Visión (texto) derecha. Alterna con Alianzas. ============================================================ */ .nosotros { background: var(--surface-1); padding-top: var(--sp-xl); } .nosotros .wrap { border-top: 1px solid var(--hairline); padding-top: var(--sp-3xl); } .nosotros-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--sp-4xl); align-items: center; } .manifiesto { padding-left: var(--sp-xl); border-left: 2px solid var(--accent); } .manifiesto p { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.022em; padding-bottom: 0.06em; /* holgura para descendentes en "estrategia"/"crecimiento" */ margin-bottom: var(--sp-md); } .manifiesto em { font-style: normal; color: var(--accent-pop); } .manifiesto footer { font-size: 0.92rem; color: var(--ink-faint); } .nosotros-cols { display: flex; flex-direction: column; gap: var(--sp-xl); } .nosotros-cols p { color: var(--ink-muted); font-size: 0.97rem; } @media (max-width: 900px) { .nosotros-grid { grid-template-columns: 1fr; gap: var(--sp-2xl); } } /* ============================================================ 7 · SEGMENTOS - píldoras sobre superficie con patrón de marca ============================================================ */ .segmentos { position: relative; background: var(--surface-1); overflow: hidden; } .segmentos::before { content: ""; position: absolute; inset: 0; background-image: url("../assets/pattern-lattice.svg?v=3"); background-size: 146px 160px; opacity: 0.042; /* El patron tambien se desvanece cerca de los bordes de la seccion, no solo la sombra - refuerza que no es un fondo cortado a filo. */ mask-image: linear-gradient(to bottom, transparent, black 80px, black calc(100% - 80px), transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 80px, black calc(100% - 80px), transparent); pointer-events: none; } /* El SVG trae el color fijo (no puede heredar tokens via CSS), asi que en claro se sirve una variante con relleno oscuro en vez del gris claro que se perdia contra el fondo blanco. */ :root[data-theme="light"] .segmentos::before { background-image: url("../assets/pattern-lattice-light.svg?v=1"); opacity: 0.08; } .segmentos-grid { position: relative; z-index: 1; display: grid; /* Misma proporcion que .nosotros-grid (arriba): el punto de division de las dos secciones queda alineado en la misma linea vertical. */ grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--sp-4xl); align-items: center; } .segmentos-head h2 { margin-bottom: var(--sp-md); } /* space-between reparte cada fila a lo ancho completo del contenedor (Flexbox distribuye por linea individual, no por el bloque entero) - asi ninguna fila corta deja hueco vacio a la derecha frente a las otras. */ .segmentos-wrap { display: flex; flex-wrap: wrap; align-content: center; justify-content: space-between; gap: 0.7rem; } .segment-pill { border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); padding: 0.7rem 1.3rem; font-size: 0.95rem; font-weight: 500; background: rgba(var(--ink-rgb), 0.03); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } :root[data-theme="light"] .segment-pill { background: rgba(var(--surface-rgb), 0.82); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.12); } .segment-pill:hover { border-color: var(--accent); color: var(--accent-pop); } @media (max-width: 900px) { .segmentos-grid { grid-template-columns: 1fr; gap: var(--sp-xl); } .segmentos-wrap { flex-direction: column; } .segment-pill { width: 100%; text-align: center; box-sizing: border-box; } } /* ============================================================ 8 · CONTACTO ============================================================ */ .contacto { background: var(--surface-1); } /* En movil el bloque de info (correo/telefono/redes) empuja el aviso "Envianos un mensaje" fuera de la pantalla al llegar desde "Hablemos"; un scroll-margin negativo hace que el ancla se detenga mas abajo. */ @media (max-width: 900px) { .contacto { scroll-margin-top: -190px; } } .contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-4xl); } .contact-info h2 { margin-bottom: var(--sp-md); } .contact-detail { margin-top: var(--sp-2xl); display: flex; flex-direction: column; gap: var(--sp-lg); } .contact-detail > div > span { display: block; font-size: 0.72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 0.3rem; } .contact-detail a:not(.social-row a), .contact-detail div > p { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; } .contact-detail a:not(.social-row a) { display: inline-flex; align-items: center; min-height: 44px; /* area tactil */ transition: color 0.25s var(--ease); } .contact-detail a:not(.social-row a):hover { color: var(--accent-pop); } .social-row { display: flex; gap: 0.65rem; margin-top: 0.4rem; } /* Mismo vidrio translucido que el menu movil y las pills de claro: fondo semi-transparente + blur, no un relleno solido. */ .social-row a { width: 44px; height: 44px; border: 1px solid var(--hairline-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); background: rgba(var(--surface-rgb), 0.5); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35); transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease); } .social-row a:hover { color: var(--accent-pop); border-color: var(--accent); transform: translateY(-2px); } .social-row svg { width: 18px; height: 18px; } .social-row a[href*="wa.me"] { background: rgba(0, 165, 149, 0.16); border-color: rgba(0, 165, 149, 0.5); color: var(--accent); } .social-row a[href*="wa.me"]:hover, .social-row a[href*="wa.me"]:active { background: var(--accent); border-color: var(--accent); color: var(--nx-white); box-shadow: 0 10px 22px -8px rgba(0, 165, 149, 0.55); } /* Instagram/LinkedIn: sin cuenta real todavia, asi que no son enlaces - mismo tamano y material que los que si funcionan, pero sin interaccion ni foco, para no prometer un destino que no existe. */ .social-icon-disabled { width: 44px; height: 44px; border: 1px solid var(--hairline-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); background: rgba(var(--surface-rgb), 0.5); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); opacity: 0.6; } .social-icon-disabled svg { width: 18px; height: 18px; } .form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--sp-lg); } .form-field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); } .form-field input, .form-field textarea { background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: var(--radius-control); padding: 0.9rem 1rem; color: var(--ink); min-height: 48px; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .form-field textarea { min-height: 120px; resize: vertical; } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-faint); } .form-field input:hover, .form-field textarea:hover { border-color: rgba(var(--ink-rgb), 0.38); } :root[data-theme="light"] .form-field input, :root[data-theme="light"] .form-field textarea { background: rgba(var(--surface-rgb), 0.82); border: 1px solid var(--hairline-strong); } /* Pista solo para movil: el grid de contacto se apila (info arriba, formulario abajo) y sin el layout a dos columnas de escritorio no es obvio que hay que seguir bajando para encontrar el formulario. */ .contact-form-hint { display: none; align-items: center; gap: 0.5rem; margin-top: var(--sp-2xl); font-size: 0.9rem; font-weight: 600; color: var(--accent-pop); } .contact-form-hint svg { width: 16px; height: 16px; animation: contact-hint-bounce 1.6s ease-in-out infinite; } @keyframes contact-hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @media (max-width: 900px) { .contact-form-hint { display: inline-flex; } } @media (prefers-reduced-motion: reduce) { .contact-form-hint svg { animation: none; } } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); } .form-submit { width: 100%; margin-top: var(--sp-sm); } .form-status { margin-top: var(--sp-md); font-size: 0.85rem; } .form-status:empty { margin-top: 0; } .form-status--ok { color: var(--accent-pop); } .form-status--error { color: #e08a8a; } /* Campo trampa anti-spam: oculto para personas, visible para bots que rellenan todo sin renderizar CSS. Nunca display:none (algunos bots ya lo detectan y lo saltan) - se saca de flujo y de la vista. */ .form-field--trap { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-2xl); } } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; gap: 0; } } /* ============================================================ Footer - Ft1 Mast-headed: banda unica y centrada (wordmark + tagline + enlaces + contacto), no la grilla de 4 columnas (el otro fingerprint de IA mas citado, junto al nav ancho-completo). ============================================================ */ .site-footer { background: var(--surface-1); padding: var(--sp-4xl) 0 var(--sp-lg); border-top: 1px solid var(--hairline); } .foot-mast { text-align: center; display: flex; flex-direction: column; align-items: center; } .foot-mast-logo { height: 34px; width: auto; margin-bottom: var(--sp-lg); } .foot-mast-tagline { color: var(--ink-muted); font-size: 1rem; max-width: 46ch; line-height: 1.55; margin-bottom: var(--sp-xl); } .foot-mast-links { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--sp-lg); } .foot-mast-links a { font-size: 0.92rem; color: var(--ink); font-weight: 500; transition: color 0.25s var(--ease); } .foot-mast-links a:hover { color: var(--accent-pop); } .foot-mast-links span { color: var(--ink-faint); font-size: 0.8rem; } .foot-mast-contact { font-size: 0.88rem; color: var(--ink-faint); margin-bottom: var(--sp-2xl); } .foot-mast-contact a { color: var(--ink-muted); transition: color 0.25s var(--ease); } .foot-mast-contact a:hover { color: var(--accent-pop); } .foot-mast-contact span { margin: 0 0.4rem; } /* Los digitos del telefono ocupan mas altura visual que el texto en minuscula de al lado (correo, ciudad) aunque el font-size sea igual - se reduce un poco para que se lean del mismo peso, y el icono lo identifica sin depender solo del formato del numero. */ .foot-mast-contact .tel-link { font-size: 0.92em; } .foot-mast-bottom { width: 100%; border-top: 1px solid var(--hairline); padding-top: var(--sp-lg); display: flex; justify-content: center; gap: var(--sp-md); flex-wrap: wrap; font-size: 0.78rem; color: var(--ink-faint); } .foot-mast-bottom span:not(:last-child)::after { content: "·"; margin-left: var(--sp-md); color: var(--ink-faint); } @media (max-width: 560px) { .foot-mast-links { flex-wrap: wrap; justify-content: center; } } /* ============================================================ ESTADO DEL SITIO - proximamente / mantenimiento Pagina unica y minima, sin nav ni footer: solo logo, mensaje honesto (sin countdown ni cifras inventadas) y contacto directo. ============================================================ */ .status-page { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-2xl); overflow: hidden; } .status-page .brand-logo { height: 52px; width: auto; margin-bottom: var(--sp-3xl); } .status-page-code { display: block; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent-pop); margin-bottom: var(--sp-md); } .status-page h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; max-width: 18ch; margin-bottom: var(--sp-lg); } .status-page p { color: var(--ink-muted); font-size: 1.05rem; max-width: 46ch; margin-bottom: var(--sp-xl); } .status-page .btn { position: relative; z-index: 1; } /* ============================================================ WHATSAPP FAB - siempre visible, no escondido dentro de "Redes". En este mercado, WhatsApp suele convertir mejor que el formulario. ============================================================ */ .whatsapp-fab { position: fixed; right: var(--sp-lg); bottom: calc(var(--sp-lg) + env(safe-area-inset-bottom, 0px)); z-index: 90; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 165, 149, 0.22); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(0, 165, 149, 0.55); color: var(--accent); box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4); transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .whatsapp-fab:hover, .whatsapp-fab:active { background: var(--accent); color: var(--nx-white); transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px -8px rgba(0, 165, 149, 0.55); } .whatsapp-fab svg { width: 28px; height: 28px; } @media (max-width: 640px) { .whatsapp-fab { right: var(--sp-md); bottom: calc(var(--sp-md) + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; } .whatsapp-fab svg { width: 26px; height: 26px; } } /* ============================================================ Reduced motion - colapsa a estático conservando jerarquía ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .pilar.reveal { opacity: 1; transform: none; transition: none; } .btn:hover, .social-row a:hover, .whatsapp-fab:hover { transform: none; } .brechas li, .brechas li::before { transition: none; } .nav-links a::after { transition: none; } .pilar-tag-body, .pilar-tag-arrow, .pilar-tag-toggle .label, .pilar-tag-toggle .label::after { transition: none; } }