/* ============================================================ kivo.css — Dirección A · "Vidrio sobre petróleo" Superficies PLANAS (el manual no tiene degradés): petróleo dominante, una franja más profunda, y una sección en hueso. Lo que va detrás del vidrio es la trama diagonal a 135° del manual — no un radial de color. SIGNATURE MOVE: el anillo del isotipo, gigante, sangrando por el borde derecho, que se va cerrando a medida que scrolleás. Las cuatro cards de vidrio flotan encima y doblan la trama. El magenta NO se usa en texto: el manual dice que aparece solo en el isotipo, en un filete o en un botón. Se respeta al pie de la letra. ============================================================ */ /* ============================================================ VIDRIO LÍQUIDO Mecánica de la liquid glass card de KokonutUI, re-teñida con los tokens (Parte C de componentes.md): - sin #000 / #fff -> hueso y petróleo en oklch - sin shadow-* -> hairline + speculares INSET (la luz propia del material, no una sombra proyectada) - via-black/5 -> barrido magenta a <10% en un solo hue - ease-in-out -> var(--ease-suave) - rounded-xl -> var(--radio-vidrio) Cuatro capas, pero las dos de filtro son HERMANAS, no anidadas: Firefox y Safari no soportan url() dentro de backdrop-filter, y así la capa difusa sigue dando un vidrio correcto sin la refracción. ============================================================ */ .vidrio { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radio-vidrio); border: 1px solid var(--vidrio-borde); background: transparent; /* el fondo va en la capa difusa, no acá */ box-shadow: inset 0 1px 0 0 var(--vidrio-luz), inset 1px 0 0 0 var(--vidrio-canto), inset -1px 0 0 0 var(--vidrio-canto), inset 0 -1px 0 0 var(--vidrio-sombra), inset 0 10px 26px -14px var(--vidrio-luz), inset 0 -26px 44px -32px var(--vidrio-sombra); transition: transform var(--dur-media) var(--ease-suave), border-color var(--dur-media) var(--ease-suave); } /* Capa 1 — difusa: el blur base. Sobrevive en todos los motores. */ .vidrio__difusa { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--vidrio-lavado); /* el blur queda solo para el modo noche y los bloques magenta, donde hay algo atrás que se nota desenfocado */ backdrop-filter: saturate(var(--vidrio-satura)); -webkit-backdrop-filter: saturate(var(--vidrio-satura)); } /* Capa 2 — refracción: el desplazamiento líquido. Su backdrop es la página MÁS el resultado de la capa difusa, así que el orden queda turbulencia -> blur -> desplazamiento, igual que el original. Si el motor la ignora, no se pierde nada: es puro agregado. */ .vidrio__refr { position: absolute; inset: 0; z-index: 1; pointer-events: none; backdrop-filter: url("#kivo-refraccion"); -webkit-backdrop-filter: url("#kivo-refraccion"); /* sobre papel no hay nada que refractar: solo vive de noche y en magenta */ opacity: 0; } /* Capa 3 — brillo especular del hover */ .vidrio__brillo { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient( 108deg, transparent 0%, oklch(0.65 0.265 355 / 0.10) 42%, var(--vidrio-canto) 56%, transparent 100% ); transition: opacity var(--dur-media) var(--ease-suave); } /* Capa 4 — contenido */ .vidrio__cont { position: relative; z-index: 3; } .vidrio:hover, .vidrio:focus-within { border-color: var(--linea-acento); transform: translateY(-4px); } .vidrio:hover .vidrio__brillo, .vidrio:focus-within .vidrio__brillo { opacity: 1; } /* En pantallas chicas la refracción cuesta caro y casi no se ve */ @media (max-width: 720px) { .vidrio__refr { display: none; } .vidrio__difusa { backdrop-filter: saturate(var(--vidrio-satura)); -webkit-backdrop-filter: saturate(var(--vidrio-satura)); } } @media (prefers-reduced-motion: reduce) { .vidrio:hover, .vidrio:focus-within { transform: none; } } /* El isotipo vive en tokens.css: es SVG, no el truco de borders. Acá van solo los tamaños de cada lugar donde aparece. */ .iso__disco { fill: var(--iso-disco); } /* ============================================================ MARCA DE AGUA SOBRE FOTO El patrón exacto del manual (sección 06 · Aplicaciones): el isotipo —o el wordmark— arriba a la izquierda, y el epígrafe en mono abajo, con padding de 22px y todo alineado a los bordes del recuadro. ============================================================ */ .foto { position: relative; overflow: hidden; } .foto > img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Velos: sin esto la marca de agua desaparece sobre fotos claras */ .foto::before, .foto::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; } .foto::before { top: 0; height: 42%; background: linear-gradient(to bottom, var(--velo-alto), transparent); } .foto::after { bottom: 0; height: 48%; background: linear-gradient(to top, var(--velo-bajo), transparent); } .foto__agua { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(0.9rem, 2vw, 1.375rem); /* 22px del manual en desktop */ pointer-events: none; } .foto__agua .iso { width: clamp(30px, 3.6vw, 46px); } .foto__agua .wordmark { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 2rem); letter-spacing: -0.04em; line-height: 1; color: var(--hueso); } .foto__epigrafe { font-family: var(--f-mono); font-size: clamp(0.6rem, 0.32vw + 0.52rem, 0.7rem); letter-spacing: 0.16em; text-transform: uppercase; color: oklch(1 0 0 / 0.82); } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem var(--s-borde); border-bottom: 1px solid transparent; transition: background-color var(--dur-media) var(--ease-suave), border-color var(--dur-media) var(--ease-suave), padding var(--dur-media) var(--ease-suave); } .nav.pegado { background: var(--nav-fondo); backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); border-bottom-color: var(--linea); padding-block: 0.8rem; } .marca { display: flex; align-items: center; gap: 0.7rem; } .marca .iso { width: 24px; } .marca__txt { font-family: var(--f-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.04em; color: var(--texto); } .nav__links { display: flex; align-items: center; gap: 1.7rem; } .nav__links a { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nav-link); position: relative; padding-block: 0.35rem; transition: color var(--dur-rapida) var(--ease-suave); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--acento); transition: width var(--dur-media) var(--ease-suave); } .nav__links a:hover { color: var(--texto); } .nav__links a:hover::after { width: 100%; } /* Botones */ .btn { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; padding: 0.85rem 1.7rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: transparent; color: var(--texto); cursor: pointer; transition: background-color var(--dur-media) var(--ease-suave), border-color var(--dur-media) var(--ease-suave), color var(--dur-media) var(--ease-suave); } .btn:hover { border-color: var(--acento); color: var(--acento); } .btn--lleno { background: var(--magenta); border-color: var(--magenta); /* petróleo, no papel: el blanco sobre magenta da 3.53:1 y no pasa AA */ color: var(--negro); font-weight: 600; } .btn--lleno:hover { background: var(--magenta-hondo); border-color: var(--magenta-hondo); color: var(--papel); } .btn svg { width: 15px; height: 15px; transition: transform var(--dur-media) var(--ease-suave); } .btn:hover svg { transform: translateX(4px); } .hamb { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; cursor: pointer; } .hamb span { display: block; width: 24px; height: 1px; background: var(--texto); transition: transform var(--dur-media) var(--ease-suave), opacity var(--dur-rapida); } .hamb.abierto span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamb.abierto span:nth-child(2) { opacity: 0; } .hamb.abierto span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .menu-movil { position: fixed; inset: 0; z-index: 99; display: none; flex-direction: column; justify-content: center; gap: 1.3rem; padding: 0 var(--s-borde); background: var(--menu-fondo); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow-y: auto; } .menu-movil a { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.45rem, 6.5vw, 2.2rem); letter-spacing: -0.03em; color: var(--texto); transition: color var(--dur-rapida) var(--ease-suave); } .menu-movil a:hover { color: var(--acento); } /* El nav pasa a hamburguesa acá: medido, a 900px los links ya quedan a 24px del CTA y a 800px el botón se sale de pantalla. La regla .abierto vive adentro del media query a propósito: si el teléfono gira a horizontal con el menú abierto, arriba de 900 el menú se apaga solo en vez de quedar tapando el sitio. */ @media (max-width: 900px) { .nav__links { display: none; } .hamb { display: flex; } .menu-movil.abierto { display: flex; } } /* Abajo de 560 el CTA no entra al lado de la hamburguesa, y no hace falta: el menú lo lleva en magenta. */ @media (max-width: 560px) { .nav > .btn { display: none; } } /* ============================================================ ESCENA — hero + servicios comparten el anillo. Superficie plana: el fondo del tema y nada encima. Pasó por una trama de rayas y después por una grilla de puntos en canvas; las dos se fueron. ============================================================ */ .escena { position: relative; overflow: clip; background: var(--fondo); } /* Acá vivía la grilla de puntos en canvas (fondo.js). Juan la sacó: "no me convence el fondo ese". La escena queda con el fondo del tema y nada más — el peso visual lo llevan el anillo, el grano y la tipografía. */ /* El anillo: sangra por el borde derecho a propósito. A 1000px el isotipo no puede ir en magenta pleno (el acento tiene que quedar bajo el 5% de la pantalla), así que acá es presencia estructural y el único magenta que pesa es el punto que avanza. */ .anillo { position: absolute; top: 26vh; right: -20vw; width: min(94vw, 1040px); aspect-ratio: 1; pointer-events: none; z-index: 0; } .anillo svg { width: 100%; height: 100%; overflow: visible; } .anillo__pista { stroke: var(--linea-fuerte); } .anillo__arco { stroke: var(--acento); opacity: 0.11; } .anillo__grupo { transform-origin: 100px 100px; } .anillo__cabeza { stroke: var(--acento); opacity: 0.26; } .anillo__punto { fill: var(--acento); } @media (max-width: 900px) { .anillo { top: auto; bottom: -4vh; right: -38vw; width: min(118vw, 600px); } .anillo__arco { opacity: 0.07; } .anillo__cabeza { opacity: 0.15; } } /* MOSAICO DEL HERO — una foto grande que se rearma por fragmentos. Cuarta versión de este lugar: era .anillo (SVG, sigue arriba sin usar), después el video de marca, después una grilla 2×2 de las cuatro fotos, y ahora UNA sola grande que rota entre las cuatro. Va EN FLUJO adentro del