/* ═══════════════════════════════════════════════════════════════ GRAFIA Studio — experiencia digital Sistema MATERIA Y LUZ (identidad v0.1): Cool Black · blanco · hueso · grises fríos · luz naranja. La luz nunca es relleno: es fuente. ═══════════════════════════════════════════════════════════════ */ /* ---------- Fuente (variable, un solo archivo) ---------- */ @font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { --bg: #000A0F; /* Cool Black de la identidad v0.1 */ --bg-2: #04141C; /* superficie: un paso de luz sobre el fondo */ --ink: #FFFFFF; /* títulos */ --ink-dim: #B9BBB8; /* texto corrido: hueso apagado */ --ink-faint: #8A8E90; /* gris frío (#7C8082 aclarado para cumplir contraste AA) */ --acc-magenta-text: #FBBA00; /* acento legible para texto pequeño: luz naranja */ --line: rgba(255, 255, 255, 0.08); --paper: #EFEBE4; /* hueso */ --paper-ink: #000D13; --paper-dim: #546770; /* Luz naranja (los nombres viejos se conservan para no romper reglas) */ --acc-amber: #CF9100; --acc-magenta: #FBBA00; --acc-violet: #FFE000; --luz: #FBBA00; --grad: linear-gradient(120deg, #CE8F00, #FBBA00 55%, #FFE000); --glow: 0 0 0 1px rgba(251, 186, 0, 0.55), 0 12px 38px -10px rgba(251, 186, 0, 0.6); --magenta: #E50073; /* acentos 10 %: nunca protagonistas */ --cyan: #009FE3; --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --pad-x: clamp(24px, 6vw, 120px); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* OJO: nada de overflow-x en — rompe position:sticky (las escenas fijadas del hero/proceso/experiencia dejan de pegarse). El recorte horizontal va en el body con `clip` (no crea contenedor de scroll). */ html { scroll-behavior: auto; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.7; font-weight: 400; font-size: clamp(15px, 1.05vw, 17px); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, video, canvas { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } em { font-style: normal; } ::selection { background: var(--luz); color: #000A0F; } .skip-link { position: fixed; top: -100px; left: 16px; z-index: 2000; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 6px; font-weight: 600; font-size: 14px; transition: top 0.2s; } .skip-link:focus { top: 16px; } :focus-visible { outline: 2px solid var(--acc-magenta); outline-offset: 4px; border-radius: 2px; } /* ═══════════ LOADER ═══════════ */ .loader { position: fixed; inset: 0; z-index: 1500; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity 0.7s var(--ease-out), visibility 0.7s; } .loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .loader__tri { width: 72px; } .loader__tri path { stroke-dasharray: 300; stroke-dashoffset: 300; animation: tri-draw 1.6s var(--ease-out) infinite alternate; } @keyframes tri-draw { to { stroke-dashoffset: 0; } } .loader__count { font-size: 12px; font-weight: 600; letter-spacing: 0.35em; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .loader__count::after { content: '%'; } /* ═══════════ NAV ═══════════ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--pad-x); transition: background 0.5s, backdrop-filter 0.5s, padding 0.5s, border-color 0.5s; border-bottom: 1px solid transparent; } .nav.is-scrolled { background: rgba(0, 10, 15, 0.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--line); padding-top: 12px; padding-bottom: 12px; } .nav__logo img { width: auto; height: 30px; } .nav__menu { display: flex; gap: clamp(20px, 3vw, 44px); } .nav__menu a { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-dim); position: relative; padding: 6px 0; transition: color 0.3s; } .nav__menu a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-out); } .nav__menu a:hover { color: var(--ink); } .nav__menu a:hover::after { transform: scaleX(1); transform-origin: left; } .nav__cta { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 10px 22px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 100px; transition: border-color 0.3s, background 0.3s, transform 0.3s; } .nav__cta:hover { border-color: var(--acc-magenta); background: rgba(251, 186, 0, 0.08); } /* Botón hamburguesa (solo móvil) */ .nav__toggle { display: none; width: 42px; height: 42px; background: none; border: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; z-index: 1001; } .nav__toggle span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.35s var(--ease-out), opacity 0.25s; } body.nav-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav__toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Drawer móvil */ .nav-drawer { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.4vh, 30px); background: rgba(0, 10, 15, 0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-out), visibility 0.4s; } body.nav-open .nav-drawer { opacity: 1; visibility: visible; } .nav-drawer a { font-size: clamp(22px, 6vw, 30px); font-weight: 300; letter-spacing: -0.01em; color: var(--ink-dim); opacity: 0; transform: translateY(16px); transition: color 0.3s, opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } body.nav-open .nav-drawer a { opacity: 1; transform: translateY(0); } .nav-drawer a:nth-child(1) { transition-delay: 0.06s; } .nav-drawer a:nth-child(2) { transition-delay: 0.10s; } .nav-drawer a:nth-child(3) { transition-delay: 0.14s; } .nav-drawer a:nth-child(4) { transition-delay: 0.18s; } .nav-drawer a:nth-child(5) { transition-delay: 0.22s; } .nav-drawer a:nth-child(6) { transition-delay: 0.26s; } .nav-drawer a:nth-child(7) { transition-delay: 0.30s; } .nav-drawer a:active, .nav-drawer a:hover { color: var(--ink); } .nav-drawer__cta { margin-top: 10px; padding: 14px 34px; border-radius: 100px; background: #fff; color: #000A0F !important; box-shadow: var(--glow); font-weight: 600 !important; font-size: 16px !important; } @media (max-width: 880px) { .nav__menu, .nav__cta { display: none; } .nav__toggle { display: flex; } } /* ═══════════ FONDO AMBIENTAL (bokeh de marca, tenue) ═══════════ */ .bg-ambience { position: fixed; inset: -4%; z-index: 0; /* Textura de neón sobre el Cool Black: GRAFIA es sobria, pero juega con la luz */ background: url('/assets/img/fondo-ambiente.webp') center / cover no-repeat; filter: blur(26px) brightness(0.75) saturate(1.1); opacity: 0.5; pointer-events: none; } /* ═══════════ CAPA AMBIENTAL ═══════════ */ .ambient { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0.9; } main { position: relative; z-index: 2; } /* ═══════════ TIPOGRAFÍA COMPARTIDA ═══════════ */ .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.38em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: clamp(20px, 3vh, 36px); display: flex; align-items: center; gap: 14px; } .eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--grad); flex: none; } .display { font-size: clamp(34px, 5.2vw, 76px); font-weight: 300; line-height: 1.12; letter-spacing: -0.02em; max-width: 16ch; } .display strong, .display em { font-weight: 600; } .display--xl { font-size: clamp(40px, 6.4vw, 96px); max-width: 14ch; } .display .w { display: inline-block; white-space: pre; } .lead { font-size: clamp(17px, 1.5vw, 22px); font-weight: 300; line-height: 1.75; color: var(--ink-dim); } .lead strong { color: var(--ink); font-weight: 600; } [data-reveal] { will-change: transform, opacity, filter; } /* ═══════════ ESCENA 1 · HERO ═══════════ */ .hero { height: 380vh; position: relative; } .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; /* dvh: la escena fijada llena SIEMPRE la pantalla del móvil, incluso cuando la barra del navegador se oculta (svh dejaba un vacío abajo) */ height: 100dvh; overflow: hidden; } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 10, 15, 0.55) 100%), linear-gradient(rgba(0, 10, 15, 0.35), transparent 22%, transparent 78%, rgba(0, 10, 15, 0.5)); pointer-events: none; } .hero__phase { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--pad-x); pointer-events: none; opacity: 0; } .hero__phase--1 { opacity: 1; padding-bottom: 26vh; /* despeja el logo que vive en el centro del video */ } /* Velo radial difuminado tras el texto de entrada: legible sobre cualquier frame del video sin sentirse una caja (bordes totalmente feathered). */ .hero__phase--1::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, 92vw); height: 78vh; background: radial-gradient(60% 46% at 50% 42%, rgba(5, 5, 8, 0.62), rgba(5, 5, 8, 0.3) 55%, transparent 74%); pointer-events: none; } .hero__phase--1 .hero__title, .hero__phase--1 .hero__sub { position: relative; z-index: 1; } /* Los statements bajan un poco del centro para no tapar el logo del video */ .hero__phase--2 { padding-top: 38vh; } .hero__title { font-size: clamp(38px, 5.8vw, 84px); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; text-shadow: 0 4px 60px rgba(0, 10, 15, 0.8); } .hero__title em { font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__sub { margin-top: 28px; max-width: 560px; font-size: clamp(15px, 1.25vw, 18px); font-weight: 400; color: var(--ink-dim); text-shadow: 0 2px 30px rgba(0, 10, 15, 0.9); } .hero__dim { /* Atenuación cinematográfica del video mientras hablan los statements; su opacidad la controla la línea de tiempo del scroll */ position: absolute; inset: 0; background: rgba(4, 4, 7, 1); opacity: 0; pointer-events: none; } .hero__statement { position: relative; font-size: clamp(28px, 4.2vw, 60px); font-weight: 300; line-height: 1.2; letter-spacing: -0.015em; text-shadow: 0 2px 18px rgba(0, 10, 15, 0.95), 0 4px 60px rgba(0, 10, 15, 0.85); text-wrap: balance; } .hero__statement em { font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__caption { position: absolute; bottom: 12vh; font-size: 12px; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-dim); } .hero__hint { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-faint); } .hero__hint i { width: 1px; height: 44px; background: linear-gradient(var(--acc-magenta), transparent); animation: hint-drop 2.2s var(--ease-out) infinite; } @keyframes hint-drop { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(18px); opacity: 0; } } /* ═══════════ ESCENAS EDITORIALES ═══════════ */ .scene { position: relative; padding: clamp(120px, 18vh, 220px) var(--pad-x); max-width: 1400px; margin: 0 auto; } .scene__body { max-width: 640px; margin-top: clamp(36px, 6vh, 64px); display: grid; gap: 24px; } .scene--estudio { padding-top: clamp(140px, 22vh, 260px); max-width: 1640px; } .estudio__grid { /* minmax(0,…): el render puede desbordar sin robarle ancho al texto */ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 90px); align-items: center; } /* El render no es una foto: es ambientación. Crece SOLO hacia afuera (100% de su columna + el sangrado), nunca sobre el texto. */ .estudio__figure { position: relative; justify-self: end; } .estudio__figure img { width: calc(100% + var(--pad-x) + 6vw); max-width: none; margin-right: calc(-1 * var(--pad-x) - 6vw); /* sangra hacia el borde derecho */ mix-blend-mode: screen; /* el fondo negro del render se funde con la página */ /* máscara radial: desvanece los bordes para que no se lea el rectángulo */ -webkit-mask-image: radial-gradient(58% 58% at 50% 50%, #000 52%, transparent 76%); mask-image: radial-gradient(58% 58% at 50% 50%, #000 52%, transparent 76%); } @media (max-width: 880px) { .estudio__grid { grid-template-columns: 1fr; } .estudio__figure { justify-self: center; } .estudio__figure img { width: min(120%, 560px); margin-right: 0; } } /* Sección clara */ .scene--light { max-width: none; background: var(--paper); color: var(--paper-ink); padding: clamp(120px, 18vh, 220px) var(--pad-x); } .scene--light .eyebrow { color: var(--paper-dim); } .scene--light .lead { color: var(--paper-dim); } .scene--light .lead strong { color: var(--paper-ink); } .light__grid { max-width: 1640px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 100px); align-items: center; } .light__text { display: grid; gap: 24px; } /* Intercalado: en El Estudio el render va a la derecha; aquí va a la IZQUIERDA. Ambientación: crece y sangra hacia el borde izquierdo. */ .light__figure { order: -1; position: relative; } .light__figure img { width: calc(100% + var(--pad-x) + 6vw); /* crece solo hacia el borde externo */ max-width: none; margin-left: calc(-1 * var(--pad-x) - 6vw); mix-blend-mode: multiply; filter: drop-shadow(0 40px 80px rgba(251, 186, 0, 0.18)); } @media (max-width: 880px) { .light__grid { grid-template-columns: 1fr; } .light__figure img { width: min(110%, 560px); margin-left: -6%; } } /* ═══════════ ESCENA 4 · PROCESO (pin) ═══════════ */ .process { height: 300vh; position: relative; background: rgba(11, 11, 16, 0.55); } .process__stage { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--pad-x); overflow: hidden; } /* Video de marca desenfocado, liviano y oscuro, ambientando el proceso */ .process__video { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(30px) saturate(1.05) brightness(0.38); transform: scale(1.06); } .process__scrim { position: absolute; inset: 0; background: radial-gradient(85% 70% at 50% 50%, rgba(0, 10, 15, 0.15), rgba(0, 10, 15, 0.7)); } .process__stage > *:not(.process__video):not(.process__scrim):not(.scroll-cue) { position: relative; } .process__stage .eyebrow { justify-content: center; } .process__intro { font-size: clamp(26px, 3vw, 44px); font-weight: 300; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: clamp(40px, 8vh, 90px); } .process__words { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: clamp(90px, 16vh, 160px); } .process__index { font-size: 12px; font-weight: 600; letter-spacing: 0.4em; color: var(--acc-magenta-text); font-variant-numeric: tabular-nums; } .process__word { font-size: clamp(48px, 8vw, 120px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; will-change: transform, opacity, filter; } .process__bar { width: min(320px, 60vw); height: 1px; background: var(--line); margin: clamp(28px, 5vh, 48px) 0; overflow: hidden; } .process__bar i { display: block; height: 100%; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; } .process__note { max-width: 460px; font-size: 14px; color: var(--ink-faint); } /* Pista de scroll: triángulos que "quieren avanzar" */ .scroll-cue { position: absolute; bottom: 9vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--ink-faint); } .scroll-cue svg { transform: rotate(180deg); opacity: 0.25; animation: cue-step 1.8s ease-in-out infinite; } .scroll-cue svg:nth-child(2) { animation-delay: 0.22s; } .scroll-cue svg:nth-child(3) { animation-delay: 0.44s; } @keyframes cue-step { 0%, 100% { opacity: 0.18; transform: rotate(180deg) translateY(0); } 45% { opacity: 0.9; transform: rotate(180deg) translateY(-5px); color: var(--acc-magenta-text); } } /* ═══════════ ESCENA 5 · PROYECTOS (horizontal) ═══════════ */ .projects { position: relative; overflow: hidden; } .projects__head { padding: clamp(90px, 12vh, 150px) var(--pad-x) clamp(28px, 4vh, 48px); max-width: 1400px; margin: 0 auto; } .projects__headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .btn-catalog { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; padding: 14px 28px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.22); white-space: nowrap; transition: border-color 0.3s, background 0.3s; margin-bottom: 8px; } .btn-catalog:hover { border-color: var(--acc-magenta); background: rgba(251, 186, 0, 0.08); } .btn-catalog svg { transition: transform 0.35s var(--ease-out); } .btn-catalog:hover svg { transform: translateX(5px); } /* Grid estático: las 6 tarjetas caben en pantalla, sin scroll horizontal (3+3 en tableta, 2+2+2 en celular). Aparecen con un reveal suave escalonado. */ .projects__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 1.8vw, 32px); padding: 0 var(--pad-x) clamp(80px, 12vh, 150px); max-width: 1640px; margin: 0 auto; } .project { position: relative; } .project__media { overflow: hidden; border-radius: 6px; aspect-ratio: 665 / 886; } .project__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.1s var(--ease-out), filter 1.1s; filter: saturate(0.88); will-change: transform; } .project:hover .project__media img { transform: scale(1.0); filter: saturate(1.05); } .project figcaption { margin-top: 16px; display: grid; gap: 4px; } .project figcaption span { font-size: 11px; font-weight: 600; letter-spacing: 0.3em; color: var(--acc-magenta-text); } .project h3 { font-size: clamp(16px, 1.15vw, 19px); font-weight: 600; letter-spacing: -0.01em; } .project p { font-size: clamp(12.5px, 0.9vw, 14px); color: var(--ink-dim); line-height: 1.5; } /* Estado inicial del reveal (solo con JS) */ html.has-js [data-project] { opacity: 0; transform: translateY(40px); } @media (max-width: 1100px) { .projects__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); } } @media (max-width: 680px) { .projects__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .project h3 { font-size: 15px; } .project p { font-size: 12.5px; } } /* ═══════════ UNIVERSOS PROPIOS ═══════════ */ .universes { position: relative; padding: clamp(110px, 16vh, 190px) var(--pad-x); max-width: 1400px; margin: 0 auto; border-top: 1px solid var(--line); } .universes__lead { max-width: 520px; margin-top: clamp(24px, 4vh, 40px); } .universes__grid { margin-top: clamp(48px, 8vh, 90px); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; } .universes__list { display: grid; gap: clamp(36px, 6vh, 60px); align-content: center; } .universes__list li { display: grid; gap: 14px; justify-items: start; } .universes__logo { width: auto; opacity: 0.92; } .universes__logo--eter { height: clamp(44px, 5vw, 64px); } .universes__logo--voyd { height: clamp(70px, 8vw, 104px); } .universes__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 8px; } /* NOVA: la experiencia insignia, destacada e invitando a entrar */ .nova-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: clamp(32px, 4.5vw, 56px); border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.02); overflow: hidden; transition: border-color 0.4s, transform 0.4s var(--ease-out); } .nova-card:hover { border-color: rgba(251, 186, 0, 0.5); transform: translateY(-4px); } .nova-card__halo { position: absolute; inset: -30%; background: radial-gradient(45% 45% at 70% 20%, rgba(251, 186, 0, 0.16), transparent 70%), radial-gradient(50% 50% at 20% 90%, rgba(0, 159, 227, 0.14), transparent 70%); pointer-events: none; transition: opacity 0.5s; } .nova-card__logo { position: relative; width: min(72%, 340px); height: auto; } .nova-card__desc { position: relative; font-size: 15px; color: var(--ink-dim); max-width: 42ch; } .nova-card__cta { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #000A0F; padding: 14px 28px; border-radius: 100px; background: #fff; box-shadow: var(--glow); } .nova-card__cta svg { transition: transform 0.35s var(--ease-out); } .nova-card:hover .nova-card__cta svg { transform: translateX(5px); } @media (max-width: 880px) { .universes__grid { grid-template-columns: 1fr; } } /* ═══════════ CLIENTES (placeholders → logos reales) ═══════════ */ .clients { position: relative; padding: clamp(90px, 13vh, 160px) var(--pad-x); max-width: 1400px; margin: 0 auto; border-top: 1px solid var(--line); } .clients__title { margin-top: clamp(20px, 3vh, 32px); font-size: clamp(22px, 2.6vw, 34px); font-weight: 300; letter-spacing: -0.015em; } .clients__strip { margin-top: clamp(36px, 6vh, 60px); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .clients__strip li { display: flex; align-items: center; justify-content: center; padding: 22px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-faint); background: rgba(255, 255, 255, 0.015); transition: color 0.35s, border-color 0.35s; } .clients__strip li:hover { color: var(--ink-dim); border-color: rgba(255, 255, 255, 0.18); } .clients__strip svg { width: 116px; height: 40px; } .clients__note { margin-top: 22px; font-size: 13px; color: var(--ink-faint); } /* ═══════════ ESCENA 6 · SERVICIOS ═══════════ */ .services { position: relative; padding: clamp(120px, 18vh, 220px) var(--pad-x); max-width: 1400px; margin: 0 auto; } .services__list { margin-top: clamp(48px, 8vh, 90px); border-top: 1px solid var(--line); } .service { border-bottom: 1px solid var(--line); } .service__row { display: grid; grid-template-columns: 60px 1fr 1.2fr; gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(28px, 4.5vh, 44px) 8px; transition: padding-left 0.5s var(--ease-out); position: relative; } .service__row:hover { padding-left: 24px; } .service__row::before { content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 3px; height: 0; background: var(--grad); border-radius: 2px; transition: height 0.45s var(--ease-out); } .service__row:hover::before { height: 46%; } .service__num { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: var(--ink-faint); } .service__name { font-size: clamp(24px, 3vw, 42px); font-weight: 300; letter-spacing: -0.02em; transition: color 0.3s; } .service__desc { font-size: 15px; color: var(--ink-dim); max-width: 52ch; } @media (max-width: 760px) { .service__row { grid-template-columns: 40px 1fr; } .service__desc { grid-column: 2; } } /* Icono 3D que sigue el cursor (solo puntero fino). mix-blend-mode: screen funde el fondo negro del render y nunca tapa el texto con una caja opaca. */ .service__float { position: fixed; top: 0; left: 0; z-index: 900; width: 160px; pointer-events: none; opacity: 0; transform: scale(0.9); display: none; /* el blend va en el contenedor fijo: funde el fondo negro del render con la página (en el img quedaría aislado por el stacking context) */ mix-blend-mode: screen; } .service__float img { width: 100%; height: auto; -webkit-mask-image: radial-gradient(52% 52% at 50% 50%, #000 52%, transparent 80%); mask-image: radial-gradient(52% 52% at 50% 50%, #000 52%, transparent 80%); } @media (hover: hover) and (pointer: fine) { .service__float { display: block; } } /* ═══════════ ESCENA 7 · TECNOLOGÍA ═══════════ */ .scene--tech { border-top: 1px solid var(--line); } .tech__tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(36px, 6vh, 60px); } .tech__tags li { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); padding: 10px 20px; border: 1px solid var(--line); border-radius: 100px; background: rgba(255, 255, 255, 0.02); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* ═══════════ ESCENA 8 · EXPERIENCIA (video fondo) ═══════════ */ .detail { height: 260vh; position: relative; } .detail__stage { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .detail__video { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(26px) saturate(1.15) brightness(0.5); transform: scale(1.06); } .detail__scrim { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 50%, rgba(0, 10, 15, 0.1), rgba(0, 10, 15, 0.78)); } .detail__content { position: relative; text-align: center; padding: 0 var(--pad-x); display: flex; flex-direction: column; align-items: center; } .detail__content .eyebrow { justify-content: center; } .detail__content .display { max-width: none; } .detail__line { margin-top: clamp(32px, 6vh, 56px); font-size: clamp(24px, 3.4vw, 48px); font-weight: 300; letter-spacing: -0.015em; min-height: 1.4em; color: var(--ink); will-change: transform, opacity, filter; } .detail__close { margin-top: clamp(32px, 6vh, 56px); max-width: 520px; font-size: 15px; color: var(--ink-dim); opacity: 0; } /* ═══════════ ESCENA 9 · CTA ═══════════ */ .cta { position: relative; padding: clamp(160px, 26vh, 300px) var(--pad-x); max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; overflow: visible; } .cta__glow { position: absolute; right: -10%; top: 10%; width: min(52vw, 700px); aspect-ratio: 1; background: radial-gradient(circle at 60% 40%, rgba(251, 186, 0, 0.14), transparent 55%), radial-gradient(circle at 40% 60%, rgba(251, 186, 0, 0.13), transparent 60%), radial-gradient(circle at 55% 55%, rgba(0, 159, 227, 0.12), transparent 65%); filter: blur(30px); pointer-events: none; } .cta__lead { max-width: 560px; margin-top: clamp(28px, 4vh, 44px); } .cta__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 100px); margin-top: clamp(48px, 8vh, 90px); width: 100%; align-items: start; } @media (max-width: 880px) { .cta__grid { grid-template-columns: 1fr; } } .cta__info { margin-top: clamp(32px, 5vh, 48px); display: grid; gap: 18px; } .cta__info li { display: grid; gap: 2px; } .cta__info span { font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); } .cta__info a { font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; transition: color 0.3s; } .cta__info a:hover { color: var(--acc-magenta-text); } .cta__vcard { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(28px, 4vh, 40px); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-dim); padding: 12px 20px; border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 100px; transition: color 0.3s, border-color 0.3s; } .cta__vcard:hover { color: var(--ink); border-color: var(--acc-magenta); } /* ── Formulario de cotización → WhatsApp ── */ .quote { display: grid; gap: 18px; padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .quote__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .quote__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .quote__row { grid-template-columns: 1fr; } } .quote__field { display: grid; gap: 7px; } .quote__field span { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); } .quote__field input, .quote__field select, .quote__field textarea { font-family: var(--font); font-size: 15px; color: var(--ink); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; transition: border-color 0.3s; width: 100%; } .quote__field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; } .quote__field select:invalid { color: var(--ink-faint); } .quote__field option { background: var(--bg-2); color: var(--ink); } .quote__field textarea { resize: vertical; min-height: 84px; } .quote__field input::placeholder, .quote__field textarea::placeholder { color: var(--ink-faint); } .quote__field input:focus, .quote__field select:focus, .quote__field textarea:focus { outline: none; border-color: var(--acc-magenta); } .quote__send { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font); font-size: 15px; font-weight: 600; color: #000A0F; background: #fff; box-shadow: var(--glow); border: 0; border-radius: 100px; padding: 16px 28px; cursor: pointer; transition: transform 0.25s var(--ease-out), box-shadow 0.25s; } .quote__send:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(251, 186, 0, 0.6); } .quote__hint { font-size: 12px; color: var(--ink-faint); } .cta__btn { display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(40px, 7vh, 72px); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; padding: 20px 40px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; transition: border-color 0.4s, color 0.4s, transform 0.2s; will-change: transform; } .cta__btn::before { content: ''; position: absolute; inset: 0; background: #fff; box-shadow: var(--glow); opacity: 0; transition: opacity 0.4s; z-index: -1; } .cta__btn:hover { border-color: transparent; color: #000A0F; } .cta__btn:hover::before { opacity: 1; } .cta__btn svg { transition: transform 0.4s var(--ease-out); } .cta__btn:hover svg { transform: translateX(6px); } /* ═══════════ FOOTER ═══════════ */ .footer { border-top: 1px solid var(--line); padding: clamp(60px, 10vh, 100px) var(--pad-x) 40px; max-width: 1400px; margin: 0 auto; display: grid; gap: 28px; } .footer__logo { height: 26px; width: auto; opacity: 0.9; } .footer__services { font-size: 13px; color: var(--ink-faint); letter-spacing: 0.04em; } .footer__social { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 32px); } .footer__social a { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-dim); position: relative; padding: 4px 0; transition: color 0.3s; } .footer__social a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out); } .footer__social a:hover { color: var(--ink); } .footer__social a:hover::after { transform: scaleX(1); transform-origin: left; } .footer__base a { transition: color 0.3s; } .footer__base a:hover { color: var(--ink); } .footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-faint); } /* ═══════════ MOTION: estados iniciales solo si hay JS ═══════════ */ html.has-js [data-reveal] { opacity: 0; } html.has-js .display .w { opacity: 0; transform: translateY(0.6em); } /* ═══════════ REDUCED MOTION ═══════════ */ @media (prefers-reduced-motion: reduce) { html.has-js [data-reveal], html.has-js .display .w { opacity: 1; transform: none; } .hero { height: auto; } .hero__stage { position: relative; height: 100svh; } .hero__phase { position: relative; inset: auto; opacity: 1; padding: 40px var(--pad-x); } .hero__phase--2, .hero__phase--3 { display: none; } .hero__hint, .loader__tri path { animation: none; } .process { height: auto; } .process__stage { position: relative; height: auto; padding: 120px var(--pad-x); } .detail { height: auto; } .detail__stage { position: relative; height: auto; padding: 120px 0; } .ambient { display: none; } } /* ═══════════ AJUSTES MÓVILES ═══════════ */ @media (max-width: 767px) { /* Escenas de scroll con el MISMO recorrido que desktop: cada fase de la animación tiene espacio para respirar y la experiencia se siente igual de inmersiva (antes eran más cortas y todo pasaba de golpe). */ .hero { height: 380vh; } .process { height: 300vh; } .detail { height: 260vh; } .hero__sub { max-width: 90%; } /* El titular del hero un poco más centrado en la pantalla del teléfono, sin que el subtítulo pise el logo que vive en el centro del video */ .hero__phase--1 { padding-bottom: 22vh; } .hero__phase--2 { padding-top: 30vh; } /* Texto + render amarrados: menos aire vertical, el render acompaña al texto en la misma pantalla en vez de flotar solo. */ .scene { padding: clamp(76px, 11vh, 110px) var(--pad-x); } .scene--estudio { padding-top: clamp(96px, 14vh, 140px); } .scene__body { margin-top: 26px; } .estudio__grid { gap: 0; } .estudio__figure img { width: min(100%, 470px); /* nunca más ancho que la pantalla */ /* la máscara radial deja mucho borde transparente: se compensa metiendo el render hacia el texto y hacia la sección siguiente */ margin-top: -10vw; margin-bottom: -14vw; } .scene--light { padding: clamp(76px, 11vh, 110px) var(--pad-x); } .light__grid { gap: 10px; } .light__figure { order: 1; } /* primero el texto, el render lo acompaña debajo */ .light__figure img { width: min(100%, 440px); margin: 4px auto -30px; } .universes__grid { gap: 28px; } /* clip: el resplandor decorativo sangra a la derecha y en móvil ensanchaba la página (obligaba a hacer zoom/pan) */ .cta { align-items: stretch; text-align: left; overflow: clip; } } /* ═══════════ Enlaces al catálogo y a las galerías de marca ═══════════ Añadido al conectar el index con /catalogo y /marcas. El enlace de la tarjeta de proyecto va superpuesto para no alterar la rejilla ni el reveal escalonado que ya funcionaban. */ .project__link { position: absolute; inset: 0; z-index: 3; border-radius: 6px; } .project__link:focus-visible { outline: 2px solid var(--acc-magenta); outline-offset: 4px; } .clients__strip li { padding: 0; } .clients__strip a { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; padding: 22px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--ink-faint); transition: color 0.35s; } .clients__strip li:hover a, .clients__strip a:focus-visible { color: var(--ink); } .clients__cta { margin-top: 26px; } /* Los universos propios ahora son enlaces a /mundos//. El hereda la rejilla del
  • para no alterar el diseño. */ .universes__list li > a { display: grid; gap: 14px; justify-items: start; transition: opacity 0.35s, transform 0.45s var(--ease-out); } .universes__list li > a:hover { transform: translateX(5px); } .universes__list li > a:hover .universes__logo { opacity: 1; } .universes__list li > a:hover .universes__tag { color: var(--ink-dim); } .universes__list li > a::after { content: "Ver la marca"; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc-magenta-text); opacity: 0; transition: opacity 0.35s; } .universes__list li > a:hover::after, .universes__list li > a:focus-visible::after { opacity: 1; } @media (hover: none) { .universes__list li > a::after { opacity: 1; } } /* ═══════════ Marcas del index: logos reales ═══════════ El bloque lo genera build/build.py (marcadores MARCAS:inicio/fin). Cada logo va sobre su propio color: el color del cliente vive dentro de su ventana y la sección sigue siendo GRAFIA. */ .clients__strip--logos { grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (min-width: 640px) { .clients__strip--logos { grid-template-columns: repeat(4, 1fr); gap: 12px; } } @media (min-width: 1000px) { .clients__strip--logos { grid-template-columns: repeat(6, 1fr); gap: 14px; } } .clients__strip--logos li { padding: 0; background: none; border: 0; } .clients__strip--logos a { display: block; width: 100%; padding: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); transition: transform 0.5s var(--ease-out), border-color 0.4s, filter 0.4s; } .clients__strip--logos a:hover, .clients__strip--logos a:focus-visible { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.3); } .clients__strip--logos img { width: 100%; height: 100%; object-fit: contain; } /* Menú del celular del index: accesos a otras páginas, distintos de las secciones */ .nav-drawer a:nth-child(8) { transition-delay: 0.34s; } .nav-drawer a:nth-child(9) { transition-delay: 0.38s; } .nav-drawer a.nav-drawer__page { font-size: clamp(15px, 4.2vw, 18px); font-weight: 600; letter-spacing: 0.01em; color: var(--acc-magenta-text); } .nav-drawer a:not(.nav-drawer__page) + .nav-drawer__page { margin-top: 6px; } /* Las imágenes de los seis frentes son de concepto: se dice, para que nadie las lea como producto entregado */ .projects__nota { margin-top: 18px; max-width: 62ch; font-size: 13.5px; line-height: 1.6; color: var(--ink-faint); } /* ═══════════ Estudio: construcción en vector (reemplaza el render del cerebro) ═══════════ Un lápiz traza de la idea a la forma y cierra el triángulo de GRAFIA. Se dibuja al hacer scroll (main.js); sin JS o con movimiento reducido se ve completa. */ .estudio__figure .construccion { display: block; width: 100%; max-width: 680px; height: auto; margin-left: auto; overflow: visible; } .construccion .c-tenue { opacity: 0.38; } .construccion .c-punteado { opacity: 0.16; } .construccion .c-etiquetas { opacity: 0.7; } @media (max-width: 880px) { .estudio__figure { width: 100%; } .estudio__figure .construccion { max-width: 520px; margin: 28px auto 0; } } /* La columna del dibujo ocupa su ancho (antes se encogía al contenido y el SVG quedaba diminuto) */ .estudio__figure { justify-self: stretch; width: 100%; } .estudio__figure .construccion { max-width: 760px; margin: 0 0 0 auto; } /* Título del estudio con la escala de la referencia: 3 líneas, no 4 */ .scene--estudio .display { font-size: clamp(38px, 4.3vw, 70px); } /* ═══════════ Revisión 2026-09-18 ═══════════ */ /* Enfoque: tres puntos de contacto reales, como piezas sobre la mesa */ .puntos { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 560px; margin-left: auto; } .puntos__item { position: absolute; margin: 0; background: #fff; padding: 8px 8px 30px; border-radius: 4px; box-shadow: 0 18px 40px rgba(18, 16, 22, 0.18), 0 3px 8px rgba(18, 16, 22, 0.08); } .puntos__item img { display: block; width: 100%; height: auto; border-radius: 2px; } .puntos__item span { position: absolute; left: 12px; bottom: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-dim); } .puntos__item--pantalla { width: 74%; left: 0; top: 2%; transform: rotate(-3deg); } .puntos__item--producto { width: 40%; right: 0; top: 22%; transform: rotate(4deg); z-index: 2; } .puntos__item--impreso { width: 56%; left: 10%; bottom: 2%; transform: rotate(-1.5deg); z-index: 3; } @media (max-width: 880px) { .puntos { max-width: 440px; margin: 36px auto 0; } } /* La nota de los frentes lleva el mismo margen lateral que el resto */ .projects__nota { padding: 0 var(--pad-x); max-width: calc(62ch + 2 * var(--pad-x)); margin: 18px auto 26px 0; } @media (min-width: 881px) { .projects__nota { margin-left: max(0px, calc((100% - 1400px) / 2)); } } /* Fondo ambiental: los triángulos acompañan, no compiten con el contenido */ .ambient { opacity: 0.55; } /* Las piezas de Enfoque no heredan el tratamiento del render viejo (ancho sangrado, multiply, sombra rosada) */ .light__figure.puntos .puntos__item img { width: 100%; max-width: 100%; margin: 0; mix-blend-mode: normal; filter: none; } .light__figure.puntos { margin-left: 0; } @media (min-width: 881px) { .light__figure.puntos { margin: 0 auto; } } .puntos__item--producto span { left: auto; right: 12px; } /* El crédito de la pieza real bajo cada frente: prueba de que no es un concepto */ .project__real { font-size: 11.5px; line-height: 1.4; color: var(--ink-faint); letter-spacing: 0.02em; }