/* ═══════════════════════════════════════════════════════ POTENCIA — "Tinta y Marfil" monocromo elegante: negro cálido + marfil + blanco puro El único color de la página es el trabajo (los casos). Archivo (variable wdth/wght) · Instrument Serif · Geist Mono ═══════════════════════════════════════════════════════ */ :root { --negro: #131312; --carbon: #1C1C1B; --humo: #2E2E2C; --blanco: #F2F1ED; --puro: #FFFFFF; --gris: #9A9994; --gris-tenue: #6B6A66; /* Default de fábrica: amarillo alta tensión (2026-07-13). El script anti-FOUC del y initVersionSwitch() en main.js pisan esto según localStorage; el rojo (#E2261C) sigue disponible como alternativa en el switch. */ --acento: #F5C518; --acento-contraste: #131312; /* texto sobre el acento (amarillo usa negro) */ --font-sans: "Archivo", system-ui, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; --font-mono: "Geist Mono", ui-monospace, monospace; --pad: clamp(1.25rem, 4vw, 4rem); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: auto; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { background: var(--negro); color: var(--blanco); font-family: var(--font-sans); font-variation-settings: "wdth" 100, "wght" 400; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--acento); color: var(--acento-contraste); } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; } .kicker { display: inline-flex; align-items: center; gap: 0.9em; color: var(--gris); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .kicker::before { content: ""; width: 1.6rem; height: 1px; background: var(--acento); } :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } /* ═══════════ GRAIN ═══════════ */ .grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 9000; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain-shift 0.9s steps(4) infinite; } @keyframes grain-shift { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 3%); } 50% { transform: translate(3%, -2%); } 75% { transform: translate(-3%, -3%); } 100% { transform: translate(2%, 2%); } } /* ═══════════ PRELOADER ═══════════ */ .preloader { position: fixed; inset: 0; z-index: 9999; background: var(--negro); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; } .preloader-word { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: 0.02em; display: flex; } .pre-letter { font-variation-settings: "wdth" 62, "wght" 200; color: var(--blanco); } .preloader-bar { width: min(320px, 60vw); height: 1px; background: var(--humo); overflow: hidden; } .preloader-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--gris), var(--acento)); transform: scaleX(0); transform-origin: left; } /* ═══════════ CURSOR ═══════════ */ .cursor, .cursor-ring { display: none; } @media (hover: hover) and (pointer: fine) { .cursor { display: block; position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none; } .cursor-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); transform: translate(-50%, -50%); } .cursor-ring { display: block; position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1px solid rgba(242,241,237,0.6); border-radius: 50%; z-index: 9499; pointer-events: none; transform: translate(-50%, -50%); transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), opacity 0.3s; } .cursor-ring.is-hover { width: 64px; height: 64px; opacity: 0.5; } body.cursor-on * { cursor: none !important; } } /* ═══════════ NAV ═══════════ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 8000; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--pad); transition: background 0.4s, backdrop-filter 0.4s; } .nav.is-scrolled { background: color-mix(in srgb, var(--negro) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .nav-logo { font-variation-settings: "wdth" 125, "wght" 800; font-size: 0.95rem; letter-spacing: 0.08em; } .nav-logo sup { font-size: 0.5em; font-variation-settings: "wdth" 100, "wght" 400; } .nav-links { display: flex; gap: 2rem; } .nav-links a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); transition: color 0.3s; } .nav-links a:hover { color: var(--acento); } .nav-cta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--humo); border-radius: 99px; padding: 0.65rem 1.3rem; color: var(--blanco); transition: border-color 0.3s, background 0.3s, color 0.3s; } .nav-cta:hover { border-color: var(--acento); background: var(--acento); color: var(--acento-contraste); } @media (max-width: 720px) { .nav-links { display: none; } } /* ═══════════ HERO ═══════════ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: calc(4.5rem + env(safe-area-inset-top)) var(--pad) 4rem; overflow: hidden; isolation: isolate; /* contiene ::after (z -1) y los blends de la figura */ } .hero::after { /* claro de luna bajo el horizonte — SIEMPRE detrás de la escena */ content: ""; position: absolute; left: 50%; bottom: -40vh; width: 140vw; height: 80vh; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(242,241,237,0.07), transparent 65%); pointer-events: none; z-index: -1; } .hero-top { display: flex; justify-content: space-between; align-items: baseline; color: var(--gris); } .hero-clock .clock-label { color: var(--puro); margin-right: 0.5em; } .hero-status { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; } .hero-agenda { display: flex; align-items: center; gap: 0.55em; color: var(--gris); } .agenda-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--acento) 62%, transparent); animation: agenda-pulse 2.4s ease-in-out infinite; } @keyframes agenda-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } @media (max-width: 720px) { .hero-top { flex-direction: column; gap: 0.5rem; } .hero-status { align-items: flex-start; flex-direction: row; gap: 1.4rem; } } /* ─── escena: droide + carrusel de casos ─── */ .hero-escena { position: relative; flex: 1; min-height: clamp(340px, 52vh, 620px); margin: 1rem 0; } .hero-h1-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ─── anillo cilíndrico 3D ─── El escenario (.carrusel) aporta la perspective (650px — CRÍTICA: de ella sale el agrandado/encogido). El track es el anillo (preserve-3d) y cada tarjeta vive tangente al cilindro: rotateY(i·25.7°) translateZ(radio), mirando hacia afuera. Sin scale: el tamaño aparente es pura perspectiva. */ .carrusel { position: absolute; inset: 0; z-index: 1; perspective: 650px; cursor: grab; touch-action: pan-y; /* el arrastre horizontal es nuestro; el scroll vertical, del navegador */ user-select: none; -webkit-user-select: none; } .carrusel.is-drag { cursor: grabbing; } .carrusel-track { position: absolute; left: 50%; top: 50%; /* punto-pivote del anillo en el centro de la escena */ transform-style: preserve-3d; will-change: transform; } .tarjeta { --th: clamp(210px, 34vh, 380px); position: absolute; left: 0; top: 0; height: var(--th); width: calc(var(--th) * 1.42); /* rectángulo APAISADO (como la referencia) */ border-radius: 18px; overflow: hidden; background: linear-gradient(165deg, #242423, #161615); border: 1px solid rgba(242, 241, 237, 0.07); box-shadow: 0 26px 52px -20px rgba(0, 0, 0, 0.55); backface-visibility: hidden; /* hacia 180° da la espalda y se oculta */ -webkit-backface-visibility: hidden; will-change: transform; } .tarjeta img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.4)); border-radius: inherit; /* WebKit: el recorte redondeado no siempre alcanza a hijos composited */ -webkit-user-drag: none; /* sin drag nativo de imagen (el gesto es del anillo) */ } /* tarjetas sobre los temas gris y claro del hero */ body.hero-gris .tarjeta { background: linear-gradient(165deg, #454542, #2E2E2C); border-color: rgba(242, 241, 237, 0.09); } body.hero-claro .tarjeta { background: linear-gradient(165deg, #F6F4EE, #E4E1D9); border-color: rgba(19, 19, 18, 0.09); box-shadow: 0 26px 46px -22px rgba(0, 0, 0, 0.3); } body.hero-claro .tarjeta img { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.25)); } .droide { position: absolute; left: 50%; bottom: -3%; transform: translateX(-50%); height: 116%; z-index: 5; pointer-events: none; user-select: none; filter: grayscale(1) contrast(1.04) brightness(1); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%); mask-image: linear-gradient(180deg, #000 70%, transparent 98%); } @media (max-width: 720px) { .hero-escena { min-height: clamp(300px, 46vh, 460px); } .tarjeta { --th: clamp(200px, 34vh, 300px); border-radius: 20px; } .droide { height: 108%; } } .hero-bottom { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: end; } .hero-payoff { font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.2; font-variation-settings: "wdth" 95, "wght" 500; max-width: 16em; } .hero-payoff em, .m-line em, .servicio-payoff em, .casos-titulo em, .sistema-humano em, .contacto-titulo em, .destacado-nombre em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--puro); } .hero-side { display: flex; flex-direction: column; gap: 1.5rem; } .hero-sub { color: var(--gris); font-size: 0.95rem; max-width: 34em; } .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-scrollhint { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); color: var(--gris); display: flex; align-items: center; gap: 0.75rem; font-size: 0.6rem; } .hero-scrollhint span { display: block; width: 3rem; height: 1px; background: linear-gradient(90deg, transparent, var(--acento)); animation: pulse-line 2.2s ease-in-out infinite; } @keyframes pulse-line { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } } @media (max-width: 900px) { .hero-bottom { grid-template-columns: 1fr; align-items: start; } .hero-payoff { font-size: clamp(1.6rem, 6.4vw, 2.2rem); } } /* ═══════════ BOTONES ═══════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 1rem 1.9rem; border-radius: 99px; border: 1px solid transparent; transition: background 0.35s, color 0.35s, border-color 0.35s; will-change: transform; } .btn-solid { background: var(--blanco); color: var(--negro); } .btn-solid:hover { background: var(--acento); color: var(--acento-contraste); } .btn-ghost { border-color: var(--humo); color: var(--blanco); } .btn-ghost:hover { border-color: var(--acento); color: var(--puro); } .btn-grande { padding: 1.35rem 2.8rem; font-size: 0.8rem; } /* ═══════════ MANIFIESTO ═══════════ */ .manifiesto { padding: clamp(7rem, 16vh, 12rem) var(--pad); max-width: 72rem; margin: 0 auto; } .manifiesto-text { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem); } .m-line { font-size: clamp(1.7rem, 4.2vw, 3.6rem); line-height: 1.15; font-variation-settings: "wdth" 90, "wght" 550; letter-spacing: -0.01em; max-width: 22em; } /* .m-punch conserva el énfasis (em en acento) pero al MISMO tamaño que las demás líneas del manifiesto — pedido de Manuel 2026-07-13 */ /* Glow compacto anti-banding: los halos anchos y tenues (30-60px a 10-25% de alfa) se cuantizan sobre fondo oscuro en bandas con borde recto visible. Halos cortos y más densos llegan a cero antes de que el ojo distinga los escalones — el "fade" se percibe continuo. */ .m-punch em { color: var(--acento); text-shadow: 0 0 2px color-mix(in srgb, var(--acento) 50%, transparent), 0 0 7px color-mix(in srgb, var(--acento) 26%, transparent), 0 0 14px color-mix(in srgb, var(--acento) 10%, transparent); } /* ═══════════ CASOS ═══════════ */ .casos { padding: clamp(6rem, 12vh, 10rem) var(--pad); max-width: 90rem; margin: 0 auto; } .casos-head { max-width: 60rem; margin-bottom: clamp(3.5rem, 7vw, 6rem); } .casos-titulo { font-size: clamp(2.8rem, 7vw, 6.5rem); line-height: 1; font-variation-settings: "wdth" 80, "wght" 700; letter-spacing: -0.01em; margin-bottom: 1.5rem; } .casos-sub { color: var(--gris); font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 38em; } /* browser frame (chrome oscuro — el color lo pone el caso) */ .browser-frame { background: var(--carbon); border: 1px solid var(--humo); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.75); } .browser-bar { display: flex; align-items: center; gap: 6px; padding: 0.7rem 1rem; border-bottom: 1px solid var(--humo); background: var(--carbon); } .browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--humo); } .browser-bar em { font-style: normal; color: var(--gris); margin-left: 0.8rem; font-size: 0.62rem; letter-spacing: 0.08em; } .browser-frame > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } .browser-viewport { aspect-ratio: 16 / 10.4; overflow: hidden; position: relative; } /* La "barra blanca" del mockup era una scrollbar de ~24px capturada DENTRO del screenshot: se recortó del asset (shot-altosilencio-full-v2.webp). Sin hacks de clip/ensanche aquí — el asset es la fuente de verdad. */ .browser-scrollimg { width: 100%; height: auto; will-change: transform; } /* destacado */ .caso-destacado { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 5rem); } .destacado-num { color: var(--acento); margin-bottom: 1rem; } .destacado-nombre { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1; font-variation-settings: "wdth" 78, "wght" 750; margin-bottom: 0.8rem; } .destacado-rubro { color: var(--gris); margin-bottom: 1.4rem; } .destacado-desc { color: var(--gris); max-width: 28em; margin-bottom: 1.6rem; } .destacado-tags { color: var(--blanco); } /* grilla */ .casos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem); } .caso-item:nth-child(even) { margin-top: clamp(1.5rem, 4vw, 4rem); } .caso-item .browser-frame { transition: translate 0.5s var(--ease-out), box-shadow 0.5s, border-color 0.5s; } .caso-item:hover .browser-frame { translate: 0 -6px; border-color: #3D3D3A; box-shadow: 0 50px 90px -30px rgba(0,0,0,0.9); } .caso-meta { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 1.2rem; align-items: baseline; margin-top: 1.1rem; } .caso-num { color: var(--acento); } .caso-meta h3 { font-size: 1.25rem; font-variation-settings: "wdth" 85, "wght" 700; } .caso-rubro { grid-column: 2; color: var(--gris-tenue); font-size: 0.6rem; } .caso-tags { grid-column: 3; grid-row: 1 / span 2; color: var(--gris); font-size: 0.58rem; text-align: right; align-self: start; } @media (max-width: 900px) { .caso-destacado { grid-template-columns: 1fr; } .casos-grid { grid-template-columns: 1fr; } .caso-item:nth-child(even) { margin-top: 0; } .caso-tags { grid-column: 2; grid-row: auto; text-align: left; } } /* ─── casos compactos: la prueba (tras el sistema, protagonismo bajo) ─── */ .casos-compacto { padding-top: clamp(4rem, 8vh, 7rem); } .casos-grid-compacto { grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem); } .casos-grid-compacto .caso-item:nth-child(even) { margin-top: 0; } /* sin escalonado */ .casos-grid-compacto .caso-meta h3 { font-size: 1.05rem; } .casos-mas { margin-top: clamp(2.5rem, 5vw, 4rem); color: var(--gris-tenue); font-size: 0.72rem; letter-spacing: 0.06em; text-align: center; } @media (max-width: 900px) { .casos-grid-compacto { grid-template-columns: 1fr; } } @media (min-width: 901px) and (max-width: 1200px) { .casos-grid-compacto { grid-template-columns: repeat(2, 1fr); } } /* cierre del manifiesto: la línea que nombra POTENCIA como sistema */ .manifiesto-cierre { margin-top: clamp(1.5rem, 3vw, 2.5rem); color: var(--gris); font-variation-settings: "wdth" 90, "wght" 500; } /* ═══════════ SERVICIOS ═══════════ */ .servicios { position: relative; } .servicios-pin { position: relative; height: 100svh; overflow: hidden; } .servicio { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 var(--pad); background: var(--negro); } .servicio[data-index="1"] { background: var(--carbon); } .servicio[data-index="2"] { background: var(--negro); } .servicio-inner { width: 100%; max-width: 84rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 6vw, 7rem); align-items: center; } .servicio-etapa { color: var(--gris); } .servicio-etapa { display: inline-flex; align-items: center; gap: 0.9em; margin-bottom: 1.2rem; } .servicio-etapa::before { content: ""; width: 1.6rem; height: 1px; background: var(--acento); } .servicio-nombre { font-size: clamp(2.6rem, 6.5vw, 6rem); line-height: 1; font-variation-settings: "wdth" 75, "wght" 750; letter-spacing: 0.01em; margin-bottom: 1.6rem; } .servicio-payoff { font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.25; font-variation-settings: "wdth" 95, "wght" 500; margin-bottom: 1.2rem; } .servicio-body { color: var(--gris); max-width: 34em; margin-bottom: 2rem; } .servicio-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; color: var(--blanco); font-size: 0.66rem; } .servicio-lista li { border: 1px solid var(--humo); border-radius: 99px; padding: 0.55rem 1rem; background: rgba(255,255,255,0.03); } /* visual: stack browser + phone */ .visual-stack { position: relative; padding-bottom: 3rem; padding-left: 3.5rem; } .visual-stack .browser-frame { margin-left: auto; } .phone-frame { position: absolute; left: 0; bottom: 0; width: clamp(120px, 21%, 158px); border: 1px solid var(--humo); border-radius: 22px; overflow: hidden; background: var(--carbon); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.85); } .phone-frame img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; } @media (max-width: 900px) { .visual-stack { padding-bottom: 2.5rem; padding-left: 0; } .phone-frame { left: auto; right: -0.4rem; } } /* visual: chat */ .chat-frame { background: var(--negro); border: 1px solid var(--humo); border-radius: 16px; padding: 1.5rem; max-width: 30rem; margin-left: auto; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8); } .chat-hora { color: var(--gris); margin-bottom: 1.2rem; } .chat-log { display: flex; flex-direction: column; gap: 0.8rem; } .chat-msg { max-width: 85%; padding: 0.8rem 1rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.45; opacity: 0; transform: translateY(12px); } .chat-msg.is-visible { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .from-cliente { align-self: flex-start; background: #232322; border: 1px solid var(--humo); border-bottom-left-radius: 4px; } .from-agente { align-self: flex-end; background: var(--blanco); color: #161615; border-bottom-right-radius: 4px; } .from-agente .chat-meta { color: #161615; } .chat-meta { display: block; font-size: 0.55rem; opacity: 0.55; margin-top: 0.4rem; letter-spacing: 0.1em; } .chat-footer { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--humo); color: var(--gris); font-size: 0.62rem; } /* visual: grid IG */ .ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; max-width: 30rem; margin-left: auto; } .ig-grid img { border-radius: 10px; border: 1px solid var(--humo); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.7); } .ig-grid img:nth-child(even) { transform: translateY(1.4rem); } /* progreso */ .servicios-progress { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; color: var(--gris); font-size: 0.62rem; z-index: 10; } .sp-current { color: var(--acento); } .sp-track { display: block; width: 6rem; height: 1px; background: var(--humo); overflow: hidden; } .sp-fill { display: block; height: 100%; background: var(--acento); transform: scaleX(0); transform-origin: left; } @media (max-width: 900px) { .servicios-pin { height: auto; overflow: visible; } .servicio { position: relative; inset: auto; padding: 5rem var(--pad); clip-path: none !important; } .servicio-inner { grid-template-columns: 1fr; gap: 2.5rem; } .chat-frame, .ig-grid { margin-left: 0; } .servicios-progress { display: none; } } /* ═══════════ SISTEMA ═══════════ */ .sistema { padding: clamp(7rem, 14vh, 11rem) var(--pad); max-width: 84rem; margin: 0 auto; } .sistema-dualidad { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .sistema-humano { font-size: clamp(2.2rem, 5.5vw, 5rem); line-height: 1.05; font-variation-settings: "wdth" 85, "wght" 650; } .sistema-maquina { color: var(--blanco); font-size: 0.75rem; line-height: 1.9; text-align: right; border: 1px solid var(--humo); border-radius: 10px; padding: 0.9rem 1.3rem; background: var(--carbon); } .sistema-circuito { display: block; width: 100%; height: auto; color: var(--gris); margin: 0.5rem 0 2rem; opacity: 0.9; } .circuito-nodo { fill: var(--acento); opacity: 0; } .sistema-body { color: var(--gris); font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 38em; margin-bottom: 3.5rem; } .sistema-principios { list-style: none; border-top: 1px solid var(--humo); } .sistema-principios li { display: flex; align-items: baseline; gap: 2rem; padding: 1.4rem 0.5rem; border-bottom: 1px solid var(--humo); transition: background 0.4s, padding-left 0.4s var(--ease-out); } .sistema-principios li:hover { background: linear-gradient(90deg, rgba(255,255,255,0.05), transparent 60%); padding-left: 1.2rem; } .sistema-principios .mono { color: var(--puro); } .sistema-principios p { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-variation-settings: "wdth" 95, "wght" 480; } /* ═══════════ CONTACTO ═══════════ */ .contacto { position: relative; padding: clamp(8rem, 18vh, 14rem) var(--pad) clamp(13rem, 28vh, 19rem); text-align: center; overflow: hidden; } .contacto .kicker { color: var(--gris); } .contacto::before { content: ""; position: absolute; left: 50%; top: 45%; width: 120vw; height: 100vh; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(242,241,237,0.07), transparent 60%); pointer-events: none; } .contacto-andes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .contacto-andes img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: max(100%, 1100px); min-height: 62%; object-fit: cover; object-position: center bottom; opacity: 0.9; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 38%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 38%, #000 70%); } .contacto > *:not(.contacto-andes) { position: relative; } .contacto-titulo { font-size: clamp(2.4rem, 6.5vw, 6rem); line-height: 1.05; font-variation-settings: "wdth" 85, "wght" 700; margin-bottom: 1.8rem; } .contacto-sub { color: var(--gris); max-width: 36em; margin: 0 auto 3rem; font-size: clamp(0.95rem, 1.3vw, 1.1rem); } .contacto-mail { margin-top: 2.8rem; } .contacto-mail a { color: var(--gris); transition: color 0.3s; } .contacto-mail a:hover { color: var(--acento); } /* ═══════════ FOOTER ═══════════ */ .footer { border-top: 1px solid var(--humo); padding: clamp(3rem, 6vw, 5rem) var(--pad) 2rem; } .footer-word { display: flex; justify-content: space-between; font-size: clamp(2.8rem, 12.5vw, 14rem); line-height: 1; user-select: none; color: var(--blanco); margin-bottom: 3rem; } .fletter { font-variation-settings: "wdth" 62, "wght" 300; } .footer-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: var(--gris); font-size: 0.62rem; } .footer-meta a:hover { color: var(--acento); } /* ═══════════ REDUCED MOTION ═══════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } .preloader { display: none; } .chat-msg { opacity: 1; transform: none; } } /* ═══════════ SWITCH DE VERSIONES (panel flotante) ═══════════ */ .vswitch { position: fixed; left: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); z-index: 90; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.85rem 0.95rem; background: rgba(20, 20, 19, 0.72); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid var(--humo); border-radius: 14px; box-shadow: 0 24px 60px -30px rgba(0,0,0,0.9); font-family: var(--mono); transform: translateY(0); transition: opacity 0.4s ease, transform 0.4s ease; } .vswitch[hidden] { display: none; } .vswitch-row { display: flex; align-items: center; gap: 0.7rem; } .vswitch-label { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-tenue); width: 3.6rem; flex: none; } .vswitch-opts { display: flex; gap: 0.3rem; } .vswitch-btn { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--gris); background: transparent; border: 1px solid var(--humo); border-radius: 8px; padding: 0.34rem 0.6rem; cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s; white-space: nowrap; } .vswitch-btn:hover { color: var(--blanco); border-color: var(--gris-tenue); } .vswitch-btn[aria-pressed="true"] { color: var(--acento-contraste); background: var(--acento); border-color: var(--acento); } .vswitch-name { min-width: 8.5rem; font-size: 0.68rem; letter-spacing: 0.04em; color: var(--blanco); text-align: center; } .vswitch-nav { display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--humo); border-radius: 8px; background: transparent; color: var(--gris); cursor: pointer; font-size: 0.85rem; line-height: 1; transition: color 0.25s, border-color 0.25s; } .vswitch-nav:hover { color: var(--blanco); border-color: var(--gris-tenue); } .vswitch-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.15rem; } .vswitch-title { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento); } .vswitch-close { background: none; border: none; color: var(--gris-tenue); cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0; } .vswitch-close:hover { color: var(--blanco); } /* botón para reabrir el panel cuando está cerrado */ .vswitch-reopen { position: fixed; left: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); z-index: 90; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); background: rgba(20, 20, 19, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--humo); border-radius: 10px; padding: 0.5rem 0.8rem; cursor: pointer; transition: color 0.25s, border-color 0.25s; } .vswitch-reopen:hover { color: var(--blanco); border-color: var(--gris-tenue); } .vswitch-reopen[hidden] { display: none; } /* variantes especiales de figura */ .droide.es-particulas { filter: none; mix-blend-mode: screen; } .droide.es-ninguno { display: none; } @media (max-width: 720px) { .vswitch { left: 0.7rem; right: 0.7rem; bottom: 0.7rem; } .vswitch-label { width: 3rem; } .vswitch-name { min-width: 0; flex: 1; } } @media (prefers-reduced-motion: reduce) { .vswitch { transition: none; } } /* ═══════════════════════════════════════════════════════ TEMA CLARO DEL HERO (body.hero-claro) Fondo marfil suave que se funde a negro antes de la siguiente sección. Invierte tipografías donde corresponde. ═══════════════════════════════════════════════════════ */ body.hero-claro .hero { background: linear-gradient( 180deg, #E8E6DF 0%, #E4E2DA 40%, #C9C7C0 68%, #4a4a47 88%, var(--negro) 100% ); } /* apagamos el claro de luna oscuro y lo cambiamos por una luz cálida alta */ body.hero-claro .hero::after { top: -30vh; bottom: auto; background: radial-gradient(ellipse at center, rgba(255,255,255,0.5), transparent 60%); } /* textos del hero → oscuros */ body.hero-claro .hero-kicker, body.hero-claro .hero-top, body.hero-claro .hero-agenda { color: #55544F; } body.hero-claro .hero-clock .clock-label { color: var(--negro); } body.hero-claro .hero-payoff { color: var(--negro); } body.hero-claro .hero-payoff em { color: #1c1c1b; } body.hero-claro .hero-sub { color: #55544F; } body.hero-claro .hero-scrollhint { color: #6B6A66; } /* nav sobre claro (mientras no se ha hecho scroll) */ body.hero-claro .nav:not(.is-scrolled) .nav-logo { color: var(--negro); } body.hero-claro .nav:not(.is-scrolled) .nav-links a { color: #55544F; } body.hero-claro .nav:not(.is-scrolled) .nav-links a:hover { color: var(--acento); } body.hero-claro .nav:not(.is-scrolled) .nav-cta { color: var(--negro); border-color: rgba(0,0,0,0.22); } body.hero-claro .nav:not(.is-scrolled) .nav-cta:hover { background: var(--acento); color: var(--acento-contraste); border-color: var(--acento); } /* botones del hero en claro */ body.hero-claro .hero-ctas .btn-solid { background: var(--negro); color: var(--blanco); } body.hero-claro .hero-ctas .btn-solid:hover { background: var(--acento); color: var(--acento-contraste); } body.hero-claro .hero-ctas .btn-ghost { border-color: rgba(0,0,0,0.22); color: var(--negro); } body.hero-claro .hero-ctas .btn-ghost:hover { border-color: var(--acento); color: var(--negro); } /* la figura: sobre claro dejamos la silueta oscura tal cual (funciona como recorte negro). El monolito/partículas se ajustan: partículas necesita multiply en vez de screen. */ body.hero-claro .droide { filter: grayscale(1) contrast(1.05) brightness(0.96); } body.hero-claro .droide.es-particulas { mix-blend-mode: multiply; } /* el preloader y demás quedan oscuros: el tema claro es SOLO el hero */ /* ═══════════════════════════════════════════════════════ TEMA GRIS DEL HERO (body.hero-gris) Fondo gris grafito medio, pero TEXTOS CLAROS (como el oscuro). Se funde a negro antes de la siguiente sección. ═══════════════════════════════════════════════════════ */ body.hero-gris .hero { background: linear-gradient( 180deg, #3C3C39 0%, #353532 42%, #2A2A28 70%, #1e1e1c 88%, var(--negro) 100% ); } /* claro de luna un poco más presente sobre el gris */ body.hero-gris .hero::after { background: radial-gradient(ellipse at center, rgba(242,241,237,0.10), transparent 62%); } /* los textos SIGUEN CLAROS: no tocamos colores de tipografía (heredan el tema oscuro). Solo reforzamos el gris del kicker/sub para que respire sobre el fondo más claro. */ body.hero-gris .hero-kicker, body.hero-gris .hero-top, body.hero-gris .hero-agenda, body.hero-gris .hero-sub { color: #C4C3BD; } body.hero-gris .hero-scrollhint { color: #B0AFA9; } /* sombra de los teléfonos: intermedia entre claro y oscuro */ body.hero-gris .tarjeta img { filter: drop-shadow(0 28px 42px rgba(0,0,0,0.42)); } /* ═══════════ DISPOSITIVO NOTEBOOK en el carrusel ═══════════ Los teléfonos son verticales (0.62 ratio); las notebooks son horizontales. */ body.disp-notebook .tarjeta { width: calc(var(--th) * 1.5); height: calc(var(--th) * 0.92); } body.disp-notebook .tarjeta img { object-fit: contain; } @media (max-width: 720px) { body.disp-notebook .tarjeta { width: calc(var(--th) * 1.35); height: calc(var(--th) * 0.82); } } /* ═══════════ La "IA" de POTENCIA: tratamientos ═══════════ Controlado por data-marca en (switch). !important porque las letras del footer reciben color inline desde GSAP (hover/scroll). Default "encendido": todo POTENCIA en blanco; la "IA" se ENCIENDE como un bombillo (acento + glow) al completar la palabra, con un parpadeo premium, y queda encendida. La clase `.is-on` la prende (la pone el JS). */ /* --- encendido (default) --- */ [data-marca="encendido"] .marca-ia { transition: color 0.45s ease, text-shadow 0.45s ease; } [data-marca="encendido"] .marca-ia.is-on { color: var(--acento) !important; text-shadow: 0 0 2px color-mix(in srgb, var(--acento) 60%, transparent), 0 0 6px color-mix(in srgb, var(--acento) 32%, transparent), 0 0 12px color-mix(in srgb, var(--acento) 12%, transparent); animation: ia-flicker 0.9s ease-out; } /* parpadeo tipo bombillo/neón al prender */ @keyframes ia-flicker { 0% { opacity: 0.3; } 8% { opacity: 1; } 14% { opacity: 0.4; } 22% { opacity: 1; } 30% { opacity: 0.7; } 40% { opacity: 1; } 100% { opacity: 1; } } /* --- glow (siempre encendido, sin animación) --- */ [data-marca="glow"] .marca-ia { color: var(--acento) !important; text-shadow: 0 0 2px color-mix(in srgb, var(--acento) 55%, transparent), 0 0 6px color-mix(in srgb, var(--acento) 30%, transparent), 0 0 12px color-mix(in srgb, var(--acento) 12%, transparent); } /* --- acento plano --- */ [data-marca="acento"] .marca-ia { color: var(--acento) !important; } /* --- blanco (DEFAULT, pedido de Manuel 2026-07-15): todo POTENCIA en blanco, pero la "IA" se ENCIENDE como un LED BLANCO — blanco puro sobre el marfil del resto, con halo frío. Monocromo y vivo a la vez: el amarillo queda libre para los acentos reales. Halos compactos (anti-banding, ver v3.6). */ [data-marca="blanco"] .marca-ia { transition: color 0.45s ease, text-shadow 0.45s ease; } [data-marca="blanco"] .marca-ia.is-on { color: var(--puro) !important; text-shadow: 0 0 2px rgba(255,255,255,0.75), 0 0 7px rgba(255,255,255,0.42), 0 0 15px rgba(255,255,255,0.18); animation: ia-flicker 0.9s ease-out; } /* En tema claro un LED blanco no se ve: ahí la IA se enciende en negro. */ body.hero-claro [data-marca="blanco"] .marca-ia.is-on, [data-marca="blanco"] body.hero-claro .marca-ia.is-on { color: var(--negro) !important; text-shadow: none; } @media (prefers-reduced-motion: reduce) { [data-marca="encendido"] .marca-ia.is-on, [data-marca="blanco"] .marca-ia.is-on { animation: none; } }