/* ═══════════════════════════════════════════════════════════ arq pics — estudio de visualización arquitectónica Paleta de marca: Azul ARQ PICS #1155CC · tinta #231F1E fondo lavado #EDEDEC (el mismo del video del logo) ═══════════════════════════════════════════════════════════ */ :root{ /* superficies */ --paper: #EDEDEC; --paper-soft: #F4F4F3; --paper-pure: #FBFBFA; --wash: #E4E8EC; --wash-warm: #E9E6E1; --intro-bg: #EBEBEC; /* tinta */ --ink: #1B1A18; --ink-soft: #57565270; --ink-mute: #5A5954; --ink-faint:#6B6A63; /* marca */ --blue: #1155CC; --blue-deep: #0D45A8; --blue-wash: #DCE5FA; --dot: #1155CC; --mark-dot: #1155CC; --on-blue: #FFFFFF; /* ajustes que sólo cambian en oscuro */ --grain-blend: multiply; --grain-op: .5; --img-bright: 1; --shadow-lb: 0 30px 70px -40px rgba(20,19,17,.5); --shadow-ctl: 0 6px 22px -12px rgba(20,19,17,.5); --line: rgba(27,26,24,.12); --line-soft: rgba(27,26,24,.07); /* tipografía */ --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --geo: "Poppins", var(--sans); /* ritmo */ --gutter: clamp(20px, 5vw, 64px); --maxw: 1440px; --sect: clamp(88px, 13vw, 190px); /* motion */ --ease: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.62,.05,.2,1); --t-fast: .35s; --t-mid: .65s; --t-slow: 1.1s; color-scheme: light; } /* ═══════════════════════════════════════════════════════════ MODO OSCURO Sigue al sistema salvo que el visitante elija a mano; el atributo data-theme del manda sobre la preferencia. ═══════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper: #131313; --paper-soft: #191918; --paper-pure: #1D1D1B; --wash: #1A2029; --wash-warm: #201E1B; --intro-bg: #131313; --ink: #EDEDE9; --ink-soft: #A9A8A230; --ink-mute: #9C9B95; --ink-faint:#82817B; --blue: #5E9BFF; --blue-deep: #8AB6FF; --blue-wash: #17233D; --mark-dot: #5E9BFF; --on-blue: #071428; --line: rgba(237,237,233,.16); --line-soft: rgba(237,237,233,.09); --grain-blend: screen; --grain-op: .32; --img-bright: .94; --shadow-lb: 0 34px 80px -40px rgba(0,0,0,.85); --shadow-ctl: 0 6px 22px -10px rgba(0,0,0,.7); color-scheme: dark; } } :root[data-theme="dark"]{ --paper: #131313; --paper-soft: #191918; --paper-pure: #1D1D1B; --wash: #1A2029; --wash-warm: #201E1B; --intro-bg: #131313; --ink: #EDEDE9; --ink-soft: #A9A8A230; --ink-mute: #9C9B95; --ink-faint:#82817B; --blue: #5E9BFF; --blue-deep: #8AB6FF; --blue-wash: #17233D; --mark-dot: #5E9BFF; --on-blue: #071428; --line: rgba(237,237,233,.16); --line-soft: rgba(237,237,233,.09); --grain-blend: screen; --grain-op: .32; --img-bright: .94; --shadow-lb: 0 34px 80px -40px rgba(0,0,0,.85); --shadow-ctl: 0 6px 22px -10px rgba(0,0,0,.7); color-scheme: dark; } *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; font-size:clamp(15px,1.02vw,17px); line-height:1.65; letter-spacing:-.008em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.is-locked{ overflow:hidden } img,svg,video{ display:block; max-width:100% } a{ color:inherit; text-decoration:none } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer } ::selection{ background:var(--blue); color:#fff } :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; } .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:var(--sect) } .skip-link{ position:fixed; top:10px; left:10px; z-index:9999; transform:translateY(-160%); background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:999px; font-size:13px; transition:transform var(--t-fast) var(--ease); } .skip-link:focus{ transform:none } /* textura muy sutil — el "lavado" ────────────────────────── */ .grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:var(--grain-op); mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"); } /* ═══ INTRO — The Observer ═════════════════════════════════ El logo ya no sale de un video: se dibuja acá. El anillo se traza en un solo gesto, el punto aparece en el centro y viaja una sola vez hasta su esquina. Como es vectorial, toma los colores del tema y no necesita trucos de inversión en oscuro. ═════════════════════════════════════════════════ */ .intro{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; } .intro__bg{ position:absolute; inset:0; background:var(--intro-bg); transition:opacity .75s var(--ease); } .intro__stage{ position:relative; z-index:1; width:min(280px, 52vw); display:grid; justify-items:center; gap:clamp(14px,2.2vw,24px); } .intro__mark{ width:100%; aspect-ratio:306/224; overflow:visible; transform-origin:0 0; will-change:transform; } .intro__ring{ fill:none; stroke:var(--blue); stroke-width:23.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transform-box:view-box; transform-origin:112px 112px; transform:rotate(-90deg) scale(.88); animation:introRing 1.45s .1s var(--ease-io) forwards; } .intro__dot{ fill:var(--mark-dot); transform-box:fill-box; transform-origin:50% 50%; transform:translate(-161px,71px) scale(.42); opacity:0; animation:introDot 1.8s .8s var(--ease-io) forwards; } @keyframes introRing{ from{ stroke-dashoffset:1; transform:rotate(-90deg) scale(.88) } to { stroke-dashoffset:0; transform:rotate(-90deg) scale(1) } } @keyframes introDot{ 0% { transform:translate(-161px,71px) scale(.42); opacity:0 } 22% { transform:translate(-161px,71px) scale(.42); opacity:1 } /* aparece en el centro */ 40% { transform:translate(-161px,71px) scale(.42); opacity:1 } /* respira ahí un momento */ 100%{ transform:translate(0,0) scale(1); opacity:1 } /* un solo viaje a la esquina */ } .intro__word{ font-family:var(--geo); font-weight:500; font-size:clamp(21px,2.1vw,27px); letter-spacing:-.025em; color:var(--ink); opacity:0; transform:translateY(10px); animation:introWord .8s 2.35s var(--ease-io) forwards; } @keyframes introWord{ to{ opacity:1; transform:none } } /* el vuelo hasta el nav */ .intro.is-flying .intro__mark{ transition:transform 1.2s var(--ease-io) } .intro.is-flying .intro__word{ opacity:0; transition:opacity .3s linear } .intro.is-done{ pointer-events:none } .intro.is-done .intro__bg{ opacity:0 } .intro.is-done .intro__skip{ opacity:0; transition:opacity .3s linear } .intro__skip{ position:absolute; bottom:calc(28px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); padding:10px 16px; opacity:0; animation:skipIn .5s .9s var(--ease) forwards; transition:color var(--t-fast) var(--ease); } .intro__skip:hover{ color:var(--ink) } @keyframes skipIn{ to{ opacity:1 } } /* sin JS no hay intro y la página se ve completa desde el vamos: así la leen los crawlers que no ejecutan scripts */ .no-js .intro{ display:none } .no-js .strip{ overflow-x:auto } .js body.is-loading{ overflow:hidden } .js body.is-loading main, .js body.is-loading .nav, .js body.is-loading .footer{ opacity:0 } main,.nav,.footer{ transition:opacity .5s var(--ease) } /* ═══ EL ISOTIPO — anillo + punto ══════════════════════════ El punto es un elemento propio dentro del símbolo, así que cualquier instancia puede moverlo con variables. De ahí salen las cinco conductas de The Observer. ═════════════════════════════════════════════════ */ .mk-ring{ transform-box:view-box; transform-origin:112px 112px; transform:scale(var(--ring-s,1)); transition:transform .75s var(--ease); } .mk-dot{ transform-box:fill-box; transform-origin:50% 50%; transform:translate(var(--dot-x,0px),var(--dot-y,0px)) scale(var(--dot-s,1)); transition:transform .75s var(--ease); } [data-beh="descubre"]{ --dot-x:0px; --dot-y:0px; --dot-s:1; --ring-s:1 } [data-beh="enfoca"] { --dot-x:-24px; --dot-y:-32px; --dot-s:1.06; --ring-s:1 } [data-beh="explora"] { --dot-x:-161px; --dot-y:71px; --dot-s:.42; --ring-s:1 } [data-beh="acompana"]{ --dot-x:-8px; --dot-y:71px; --dot-s:.74; --ring-s:.93 } [data-beh="inspira"] { --dot-x:16px; --dot-y:71px; --dot-s:.52; --ring-s:.78 } /* ═══ CURSOR — The Observer ════════════════════════════════ El anillo persigue al puntero con inercia y el punto llega antes: entre los dos queda el gesto de la marca. Sólo se activa con mouse (pointer fino) y si no se pidió menos movimiento; en táctil y teclado no cambia nada. ═════════════════════════════════════════════════ */ body.has-observer{ cursor:none } body.has-observer a, body.has-observer button, body.has-observer input, body.has-observer textarea, body.has-observer select, body.has-observer label, body.has-observer [role="button"], body.has-observer .tile__frame{ cursor:none } /* los valores base van en .cursor (especificidad baja) para que cada conducta pueda pisarlos */ .cursor{ display:none; /* sólo lo enciende el JS */ position:fixed; top:0; left:0; z-index:1200; pointer-events:none; opacity:0; transition:opacity .3s var(--ease); --rs:1; --dx:0px; --dy:0px; --ds:1; --cursor-c:var(--blue); } body.has-observer .cursor{ display:block } .cursor.is-on{ opacity:1 } .cursor__ring{ position:absolute; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px; border:1.6px solid var(--cursor-c); border-radius:50%; background:transparent; transform:scale(var(--rs)); transition:transform .45s var(--ease), background-color .45s var(--ease), opacity .45s var(--ease); } .cursor__dot{ position:absolute; top:0; left:0; will-change:transform } .cursor__dot i{ position:absolute; top:0; left:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--cursor-c); transform:translate(var(--dx),var(--dy)) scale(var(--ds)); transition:transform .45s var(--ease); } .cursor__label{ position:absolute; top:0; left:0; transform:translate(-50%,-50%) scale(.6); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--cursor-c); white-space:nowrap; opacity:0; transition:opacity .3s var(--ease), transform .45s var(--ease); } /* El punto va siempre en el centro del anillo: lo que cambia de una zona a otra es cuánto se abre el anillo y cuánto pesa el punto. Al moverse rápido el punto igual se adelanta —ahí aparece el gesto del logo— y vuelve al centro al frenar. */ /* enfoca — links, botones, chips */ .cursor.is-focus{ --rs:.6; --ds:.8 } /* explora — imágenes y proyectos */ .cursor.is-view{ --rs:2.35; --ds:.55 } .cursor.is-view .cursor__ring{ background:color-mix(in srgb, var(--cursor-c) 9%, transparent) } .cursor.is-view.has-label .cursor__label{ opacity:1; transform:translate(-50%,26px) scale(1) } /* inspira — campos de texto */ .cursor.is-text{ --rs:.5; --ds:.6 } .cursor.is-text .cursor__ring{ opacity:.55 } /* sobre superficies que se llenan (botones, chips, filas de servicios) el azul desaparecería: el cursor se pasa a claro */ .cursor.is-invert{ --cursor-c:var(--paper-pure) } /* acompaña — mientras se aprieta */ .cursor.is-press .cursor__ring{ transform:scale(calc(var(--rs) * .82)) } .cursor.is-press{ --ds:1.35 } /* ═══ PROGRESO ═══════════════════════════════════════════ */ .progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:900; background:transparent; pointer-events:none; } .progress span{ display:block; height:100%; width:100%; background:var(--blue); transform:scaleX(0); transform-origin:0 50%; transition:transform .12s linear; } /* ═══ NAV ════════════════════════════════════════════════ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:800; transition:transform .55s var(--ease), background-color var(--t-mid) var(--ease), backdrop-filter var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); border-bottom:1px solid transparent; } .nav.is-stuck{ background:color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-bottom-color:var(--line-soft); } .nav.is-hidden{ transform:translateY(-102%) } .nav__inner{ max-width:var(--maxw); margin-inline:auto; padding:18px var(--gutter); display:flex; align-items:center; gap:clamp(16px,3vw,48px); transition:padding var(--t-mid) var(--ease); } .nav.is-stuck .nav__inner{ padding-block:13px } .brand{ display:flex; align-items:center; gap:11px; margin-right:auto; } .brand__mark{ width:31px; height:23px; color:var(--blue); transition:opacity .45s var(--ease), transform .6s var(--ease); } .js .brand__mark{ opacity:0 } .js .brand__mark.is-in{ opacity:1 } .brand:hover .brand__mark{ --dot-x:-161px; --dot-y:71px; --dot-s:.42 } .brand__word{ font-family:var(--geo); font-weight:500; font-size:17px; letter-spacing:-.02em; white-space:nowrap; transition:opacity .5s .08s var(--ease), transform .5s .08s var(--ease); } .js .brand__word{ opacity:0; transform:translateY(6px) } .js .brand__mark.is-in + .brand__word{ opacity:1; transform:none } .nav__links{ display:flex; gap:clamp(14px,2vw,34px) } .navlink{ position:relative; font-size:14px; letter-spacing:-.01em; color:var(--ink-mute); padding:6px 2px; transition:color var(--t-fast) var(--ease); overflow:hidden; } .navlink span{ display:block; transition:transform var(--t-mid) var(--ease) } .navlink::after{ content:''; position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s var(--ease); } .navlink:hover,.navlink.is-current{ color:var(--ink) } .navlink:hover::after,.navlink.is-current::after{ transform:scaleX(1); transform-origin:0 50% } /* ═══ BOTONES ════════════════════════════════════════════ */ .btn{ position:relative; display:inline-flex; align-items:center; gap:10px; font-size:14px; letter-spacing:-.01em; font-weight:500; padding:14px 26px; border-radius:999px; isolation:isolate; overflow:hidden; transition:color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), transform .4s var(--ease); will-change:transform; } .btn::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--ink); transform:translateY(101%); transition:transform .6s var(--ease); border-radius:inherit; } .btn:hover::before{ transform:translateY(0) } .btn__ico{ width:17px; height:17px; transition:transform .5s var(--ease) } .btn:hover .btn__ico{ transform:translateX(4px) } .btn__ico--down{ transform:rotate(90deg) } .btn:hover .btn__ico--down{ transform:rotate(90deg) translateX(4px) } .btn--solid{ background:var(--blue); color:var(--on-blue) } .btn--solid::before{ background:var(--ink) } .btn--ghost{ border:1px solid var(--line); color:var(--ink) } .btn--ghost:hover{ color:var(--paper); border-color:var(--ink) } .btn--pill{ border:1px solid var(--line); padding:11px 20px; font-size:13.5px } .btn--pill:hover{ color:var(--paper); border-color:var(--ink) } .link-arrow{ display:inline-flex; align-items:center; gap:9px; font-size:15px; padding-bottom:3px; border-bottom:1px solid var(--line); transition:border-color var(--t-mid) var(--ease), gap var(--t-mid) var(--ease); } .link-arrow:hover{ border-bottom-color:var(--ink); gap:14px } .link-arrow .btn__ico{ width:16px; height:16px } /* ═══ SELECTOR DE IDIOMA ════════════════════════════════════ Un
nativo: funciona sin JS y con teclado. El JS sólo lo cierra al hacer clic afuera o con Esc. ═════════════════════════════════════════════════ */ .lang{ position:relative; flex:0 0 auto } .lang summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:5px; height:38px; padding:0 13px; border:1px solid var(--line); border-radius:999px; font-size:11.5px; letter-spacing:.12em; color:var(--ink-mute); transition:color .4s var(--ease), border-color .4s var(--ease); } .lang summary::-webkit-details-marker{ display:none } .lang summary::after{ content:''; width:5px; height:5px; margin-top:-2px; border-right:1.3px solid currentColor; border-bottom:1.3px solid currentColor; transform:rotate(45deg); transition:transform .35s var(--ease); } .lang summary:hover{ color:var(--ink); border-color:var(--ink) } .lang[open] summary{ color:var(--ink); border-color:var(--ink) } .lang[open] summary::after{ transform:rotate(-135deg); margin-top:2px } .lang__list{ position:absolute; z-index:10; top:calc(100% + 8px); right:0; margin:0; padding:6px; list-style:none; min-width:148px; background:var(--paper-pure); border:1px solid var(--line-soft); border-radius:10px; box-shadow:var(--shadow-ctl); animation:langIn .3s var(--ease); } @keyframes langIn{ from{ opacity:0; transform:translateY(-6px) } } .lang__list a{ display:block; padding:8px 12px; border-radius:6px; font-size:13.5px; color:var(--ink-mute); transition:background-color .25s var(--ease), color .25s var(--ease); } .lang__list a:hover{ background:var(--wash); color:var(--ink) } .lang__list a[aria-current]{ color:var(--ink); font-weight:500 } .drawer__langs{ display:flex; gap:14px; width:100%; margin-bottom:4px } .drawer__langs a{ font-size:12px; letter-spacing:.12em; color:var(--ink-faint); transition:color .3s var(--ease); } .drawer__langs a:hover{ color:var(--ink) } .drawer__langs a[aria-current]{ color:var(--blue) } /* ═══ TOGGLE DE TEMA ═════════════════════════════════════ */ .themebtn{ position:relative; flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); color:var(--ink-mute); display:grid; place-items:center; transition:color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease); } .themebtn:hover{ color:var(--ink); border-color:var(--ink); transform:rotate(-12deg) } .themebtn:active{ transform:scale(.92) } .themebtn__ico{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform:scale(.55) rotate(-90deg); transition:opacity .4s var(--ease), transform .55s var(--ease); } .themebtn__ico svg{ width:17px; height:17px } .themebtn[data-mode="auto"] .themebtn__ico[data-for="auto"], .themebtn[data-mode="light"] .themebtn__ico[data-for="light"], .themebtn[data-mode="dark"] .themebtn__ico[data-for="dark"]{ opacity:1; transform:none; } .drawer__theme{ font-size:13px; color:var(--ink-mute); border-bottom:1px solid var(--line-soft); padding-bottom:2px; transition:color .35s var(--ease), border-color .35s var(--ease); } .drawer__theme:hover{ color:var(--ink); border-bottom-color:var(--ink) } .drawer__theme span{ color:var(--ink) } /* el cambio de tema se atenúa en toda la página */ .theme-anim, .theme-anim *{ transition:background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), fill .45s var(--ease), stroke .45s var(--ease) !important; } @media (prefers-reduced-motion:reduce){ .theme-anim,.theme-anim *{ transition:none !important } } /* ═══ BURGER / DRAWER ════════════════════════════════════ */ .burger{ display:none; width:42px; height:42px; position:relative; margin-right:-10px } .burger span{ position:absolute; left:11px; width:20px; height:1.5px; background:var(--ink); transition:transform .5s var(--ease), opacity .3s var(--ease); } .burger span:nth-child(1){ top:18px } .burger span:nth-child(2){ top:24px } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg) } .burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg) } .drawer{ position:fixed; inset:0; z-index:790; background:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:0 var(--gutter); clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease); visibility:hidden; } .drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible } .drawer__nav{ display:flex; flex-direction:column; gap:4px } .drawer__nav a{ display:flex; align-items:baseline; gap:16px; font-size:clamp(30px,9vw,46px); font-weight:200; letter-spacing:-.03em; padding:9px 0; border-bottom:1px solid var(--line-soft); opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s var(--ease); } .drawer.is-open .drawer__nav a{ opacity:1; transform:none } .drawer.is-open .drawer__nav a:nth-child(1){ transition-delay:.14s } .drawer.is-open .drawer__nav a:nth-child(2){ transition-delay:.20s } .drawer.is-open .drawer__nav a:nth-child(3){ transition-delay:.26s } .drawer.is-open .drawer__nav a:nth-child(4){ transition-delay:.32s } .drawer.is-open .drawer__nav a:nth-child(5){ transition-delay:.38s } .drawer__nav a:hover{ color:var(--blue) } .drawer__nav i{ font-style:normal; font-size:12px; letter-spacing:.1em; color:var(--ink-faint); font-weight:400; } .drawer__foot{ position:absolute; bottom:calc(34px + env(safe-area-inset-bottom)); left:var(--gutter); right:var(--gutter); display:flex; gap:22px; flex-wrap:wrap; align-items:baseline; font-size:13px; color:var(--ink-mute); } .drawer__foot .drawer__theme{ margin-left:auto } /* ═══ TIPOGRAFÍA DE SECCIÓN ══════════════════════════════ */ .eyebrow{ display:inline-flex; align-items:flex-start; gap:10px; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 clamp(26px,4vw,44px); } .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); flex:0 0 auto; margin-top:.5em; animation:pulse 2.8s var(--ease-io) infinite; } @keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.55); opacity:.45 } } .sechead{ margin-bottom:clamp(40px,6vw,72px); max-width:64ch } .sechead--split{ max-width:none; display:grid; gap:clamp(22px,4vw,70px); grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:end; } .sechead__num{ display:block; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; } .sechead__title{ font-size:clamp(31px,5.2vw,62px); font-weight:200; line-height:1.06; letter-spacing:-.035em; margin:0 0 22px; text-wrap:balance; } .sechead__text{ margin:0; color:var(--ink-mute); max-width:52ch } /* ═══ HERO ═══════════════════════════════════════════════ */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-block:clamp(104px,14vh,168px) clamp(38px,6vh,74px); overflow:hidden; } .hero__wash{ position:absolute; inset:-20% -10% auto; height:120%; background: radial-gradient(58% 50% at 78% 18%, var(--blue-wash) 0%, transparent 62%), radial-gradient(46% 44% at 8% 86%, var(--wash-warm) 0%, transparent 64%); opacity:.85; pointer-events:none; animation:washDrift 26s ease-in-out infinite alternate; } @keyframes washDrift{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(-3%,2%,0) scale(1.08) } } .hero__inner{ position:relative; z-index:1; width:100% } .hero__title{ font-size:clamp(38px,8.4vw,124px); font-weight:200; line-height:.98; letter-spacing:-.045em; margin:0 0 clamp(28px,4.2vw,52px); max-width:16ch; text-wrap:balance; } .hero__meta{ display:grid; gap:clamp(24px,3vw,48px); grid-template-columns:minmax(0,1fr) auto; align-items:end; } .hero__lead{ margin:0; max-width:46ch; color:var(--ink-mute); font-size:clamp(15px,1.15vw,18px) } .hero__actions{ display:flex; gap:12px; flex-wrap:wrap } /* ═══ BANDA DE PROYECTOS ══════════════════════════════════════ Los 12 proyectos pasando de costado, en loop. El JS duplica el grupo para que el ciclo no tenga costura. Cada pieza mantiene su proporción real (--ar), así la tira respira sola. ═════════════════════════════════════════════════ */ .strip{ --h: clamp(200px, 44vh, 440px); position:relative; overflow:hidden; background:var(--paper-soft); border-block:1px solid var(--line-soft); } .strip__track{ display:flex; width:max-content } .js .strip__track{ animation:stripSlide 75s linear infinite } .strip:hover .strip__track{ animation-play-state:paused } .strip__group{ display:flex; flex:0 0 auto } .strip__item{ position:relative; flex:0 0 auto; overflow:hidden; height:var(--h); width:calc(var(--h) * var(--ar, 1.4)); margin-right:clamp(8px,1vw,16px); background:var(--paper-pure); } .strip__item img{ width:100%; height:100%; object-fit:cover; filter:saturate(.62) contrast(.97) brightness(var(--img-bright)); transform:scale(1.004); transition:transform 1.2s var(--ease), filter .8s var(--ease); } .strip__item:hover img{ transform:scale(1.05); filter:saturate(1) contrast(1) } .strip__item::after{ content:''; position:absolute; inset:auto 0 0; height:52%; background:linear-gradient(to top, rgba(18,18,16,.62) 0%, rgba(18,18,16,.16) 52%, transparent 100%); opacity:.9; transition:opacity .6s var(--ease); pointer-events:none; } .strip__cap{ position:absolute; z-index:1; left:clamp(14px,1.4vw,20px); right:clamp(14px,1.4vw,20px); bottom:clamp(12px,1.3vw,18px); display:grid; gap:3px; color:#fff; text-shadow:0 1px 14px rgba(16,16,14,.5); transition:transform .6s var(--ease); } .strip__cap b{ font-weight:400; font-size:clamp(13px,1.05vw,15.5px); letter-spacing:-.02em } .strip__cap i{ font-style:normal; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; opacity:.82; } .strip__item:hover .strip__cap{ transform:translateY(-3px) } @keyframes stripSlide{ to{ transform:translateX(-50%) } } /* ═══ MARQUEE ════════════════════════════════════════════ */ .marquee{ border-block:1px solid var(--line-soft); padding-block:clamp(16px,2vw,24px); overflow:hidden; background:var(--paper-soft); } .marquee__track{ display:flex; width:max-content; /* al revés que la banda de proyectos: uno va para cada lado */ animation:slide 70s linear infinite reverse; } .marquee:hover .marquee__track{ animation-play-state:paused } .marquee__group{ display:flex; align-items:center; flex:0 0 auto } .marquee__group span{ font-size:clamp(19px,2.6vw,34px); font-weight:200; letter-spacing:-.03em; padding-inline:clamp(16px,2.4vw,34px); white-space:nowrap; } .marquee__group i{ width:7px; height:7px; border-radius:50%; background:var(--blue); flex:0 0 auto; } @keyframes slide{ to{ transform:translateX(-50%) } } /* ═══ FILTROS ════════════════════════════════════════════ */ .filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,48px); } .chip{ position:relative; font-size:13px; letter-spacing:-.005em; padding:9px 18px; border-radius:999px; border:1px solid var(--line); color:var(--ink-mute); overflow:hidden; isolation:isolate; transition:color .45s var(--ease), border-color .45s var(--ease); } .chip::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--ink); transform:scale(1.04) translateY(101%); transition:transform .55s var(--ease); border-radius:inherit; } .chip:hover::before{ transform:scale(1.04) translateY(0) } .chip:hover{ color:var(--paper); border-color:var(--ink) } .chip.is-active{ color:var(--paper); border-color:var(--ink) } .chip.is-active::before{ transform:scale(1.04) translateY(0) } /* ═══ GRILLA ═══════════════════════════════════════════════ Los 12 proyectos están escritos en el HTML. Sin JS se ven en una grilla simple; cuando el JS toma el control agrega .is-masonry y los posiciona uno por uno con transform. ══════════════════════════════════════════════════════════ */ .grid{ display:grid; gap:clamp(26px,3.4vw,44px); grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); } .grid.is-masonry{ display:block; position:relative; width:100%; transition:height .7s var(--ease); } /* sin JS el botón "ver más" no hace nada: ya están los 12 */ .grid:not(.is-masonry) + .work__more{ display:none } .tile{ position:relative } .grid.is-masonry .tile{ position:absolute; top:0; left:0; opacity:0; transition:transform .85s var(--ease), opacity .5s var(--ease), width .85s var(--ease); will-change:transform; } .grid.is-masonry .tile.is-in{ opacity:1 } .grid.is-masonry .tile.is-out{ opacity:0; pointer-events:none } .tile__frame{ display:block; position:relative; width:100%; overflow:hidden; aspect-ratio:var(--ar, 4 / 3); /* el JS le fija la altura exacta */ background:var(--paper-soft); border-radius:3px; cursor:pointer; } /* blur-up: la miniatura de ~200 bytes viaja en el --lqip del marco */ .tile__frame::before{ content:''; position:absolute; inset:0; z-index:0; background-image:var(--lqip); background-size:cover; background-position:center; filter:blur(16px) saturate(.6); transform:scale(1.08); transition:opacity .7s var(--ease); } .tile__frame.is-ready::before{ opacity:0 } .tile__frame::after{ content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(20,19,17,.44) 0%, rgba(20,19,17,.06) 42%, transparent 70%); opacity:0; transition:opacity .6s var(--ease); } .tile:hover .tile__frame::after{ opacity:1 } .tile__img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; filter:saturate(.62) contrast(.97) brightness(var(--img-bright)); transform:scale(1.005); transition:transform 1.2s var(--ease), filter .8s var(--ease), opacity .8s var(--ease); } .tile__img.is-loading{ opacity:0 } .tile:hover .tile__img{ transform:scale(1.055); filter:saturate(1) contrast(1) } .tile__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:16px 2px 0; } .tile__title{ font-size:clamp(15px,1.25vw,19px); font-weight:400; letter-spacing:-.022em; margin:0; transition:color var(--t-mid) var(--ease); } .tile:hover .tile__title{ color:var(--blue) } .tile__sub{ font-size:12.5px; color:var(--ink-faint); white-space:nowrap } .tile__tag{ position:absolute; z-index:3; top:14px; left:14px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; border-radius:999px; background:color-mix(in srgb, var(--paper-pure) 86%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transform:translateY(-6px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .tile:hover .tile__tag{ opacity:1; transform:none } .work__more{ display:flex; justify-content:center; margin-top:clamp(44px,6vw,74px) } .work__more.is-done{ display:none } /* ═══ LIGHTBOX ═══════════════════════════════════════════ */ .lb{ position:fixed; inset:0; z-index:950; display:grid; place-items:center; padding:clamp(16px,4vw,56px); background:color-mix(in srgb, var(--paper) 92%, #000); opacity:0; transition:opacity .45s var(--ease); } .lb[hidden]{ display:none } .lb.is-open{ opacity:1 } .lb__figure{ margin:0; max-width:min(1180px,100%); max-height:100%; display:flex; flex-direction:column; gap:14px; align-items:center; } .lb__media{ position:relative; max-height:78svh; display:grid; place-items:center; transform:scale(.965) translateY(14px); opacity:0; transition:transform .75s var(--ease), opacity .5s var(--ease); } .lb.is-open .lb__media{ transform:none; opacity:1 } .lb__media img{ max-height:78svh; width:auto; max-width:100%; border-radius:3px; box-shadow:var(--shadow-lb); } .lb__cap{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; justify-content:center; text-align:center; opacity:0; transform:translateY(8px); transition:opacity .5s .18s var(--ease), transform .5s .18s var(--ease); } .lb.is-open .lb__cap{ opacity:1; transform:none } .lb__cap strong{ font-weight:500; letter-spacing:-.02em; font-size:16px } .lb__cap span{ font-size:13px; color:var(--ink-mute) } .lb__cap a{ font-size:13px; color:var(--blue); border-bottom:1px solid transparent; transition:border-color .3s } .lb__cap a:hover{ border-bottom-color:var(--blue) } .lb__close,.lb__nav{ position:absolute; z-index:2; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--paper-pure); color:var(--ink); box-shadow:var(--shadow-ctl); transition:transform .45s var(--ease), background-color .35s var(--ease), color .35s var(--ease); } .lb__close svg,.lb__nav svg{ width:19px; height:19px } .lb__close{ top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px) } .lb__nav{ top:50%; transform:translateY(-50%) } .lb__nav--prev{ left:clamp(10px,2vw,26px) } .lb__nav--prev svg{ transform:rotate(180deg) } .lb__nav--next{ right:clamp(10px,2vw,26px) } .lb__close:hover{ background:var(--ink); color:var(--paper); transform:rotate(90deg) } .lb__nav:hover{ background:var(--ink); color:var(--paper) } .lb__nav--prev:hover{ transform:translateY(-50%) translateX(-3px) } .lb__nav--next:hover{ transform:translateY(-50%) translateX(3px) } /* ═══ SERVICIOS ══════════════════════════════════════════ */ .srv{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft) } .srv__row{ position:relative; isolation:isolate; display:grid; grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.25fr) 40px; gap:clamp(12px,2.4vw,40px); align-items:baseline; padding:clamp(22px,3vw,36px) clamp(10px,1.6vw,22px); border-bottom:1px solid var(--line-soft); transition:color .55s var(--ease), padding-left .55s var(--ease); } .srv__row::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--ink); transform:scaleY(0); transform-origin:50% 100%; transition:transform .6s var(--ease); } .srv__row:hover::before{ transform:scaleY(1); transform-origin:50% 0 } .srv__row:hover{ color:var(--paper); padding-left:clamp(18px,2.6vw,36px) } .srv__num{ font-size:12px; letter-spacing:.12em; color:var(--ink-faint); transition:color .55s var(--ease) } .srv__row:hover .srv__num{ color:var(--blue-wash) } .srv__title{ margin:0; font-size:clamp(20px,2.55vw,33px); font-weight:200; letter-spacing:-.032em; line-height:1.14; } .srv__text{ margin:0; font-size:14.5px; color:var(--ink-mute); transition:color .55s var(--ease) } .srv__row:hover .srv__text{ color:color-mix(in srgb, var(--paper) 72%, transparent) } .srv__ico{ width:20px; height:20px; justify-self:end; align-self:center; opacity:0; transform:translateX(-10px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .srv__row:hover .srv__ico{ opacity:1; transform:none } /* ═══ PROCESO ════════════════════════════════════════════ */ .process{ background:var(--paper-soft) } .steps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(24px,3vw,40px); grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); } .step{ position:relative; padding-top:26px; border-top:1px solid var(--line) } .step::after{ content:''; position:absolute; top:-1px; left:0; height:1px; width:100%; background:var(--blue); transform:scaleX(0); transform-origin:0 50%; transition:transform .9s var(--ease); } .step.is-in::after{ transform:scaleX(1) } .step__num{ display:block; font-size:12px; letter-spacing:.13em; color:var(--blue); margin-bottom:14px } .step h3{ margin:0 0 9px; font-size:clamp(17px,1.6vw,21px); font-weight:400; letter-spacing:-.024em } .step p{ margin:0; font-size:14.5px; color:var(--ink-mute) } /* ═══ ESTUDIO ════════════════════════════════════════════ */ .studio__grid{ display:grid; gap:clamp(38px,6vw,88px); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start; } .studio__copy p{ color:var(--ink-mute); max-width:52ch; margin:0 0 18px } .studio__copy strong{ font-weight:500; color:var(--ink) } .studio__copy em{ font-style:normal; color:var(--blue) } .studio__copy .sechead__title{ max-width:15ch } .studio__side{ background:var(--paper-pure); border:1px solid var(--line-soft); border-radius:4px; padding:clamp(26px,3.4vw,44px); } .studio__mark{ margin:0 0 clamp(26px,3.4vw,44px); display:flex; align-items:center; gap:clamp(14px,2vw,22px); } .studio__mark svg{ width:clamp(78px,9vw,116px); height:auto; color:var(--blue); flex:0 0 auto; overflow:visible; /* en "enfoca" el punto se sale del viewBox */ } .studio__beh{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); } .studio__beh-word{ display:block; opacity:0; transform:translateY(5px); transition:opacity .35s var(--ease), transform .35s var(--ease); } .studio__beh-word.is-on{ opacity:1; transform:none } .stats{ margin:0; display:grid; gap:22px } .stat{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; border-top:1px solid var(--line-soft); padding-top:14px } .stat dt{ font-size:13px; color:var(--ink-mute) } .stat dd{ margin:0; font-family:var(--geo); font-weight:400; font-size:clamp(27px,3.2vw,40px); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; } /* ═══ CONTACTO ═══════════════════════════════════════════ */ .contact__grid{ display:grid; gap:clamp(42px,6vw,96px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; } .contact__lead{ color:var(--ink-mute); max-width:40ch; margin:0 0 clamp(28px,4vw,44px) } .contact__links{ list-style:none; margin:0; padding:0; display:grid; gap:2px } .contact__links li{ display:grid; grid-template-columns:96px 1fr; align-items:baseline; gap:14px; padding:13px 0; border-top:1px solid var(--line-soft); } .contact__links span{ font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint) } .contact__links a{ font-size:clamp(14.5px,1.1vw,16.5px); background-image:linear-gradient(var(--blue),var(--blue)); background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .55s var(--ease), color .4s var(--ease); padding-bottom:2px; } .contact__links a:hover{ background-size:100% 1px; color:var(--blue) } .form{ display:grid; gap:clamp(18px,2.4vw,28px) } .form__row{ display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:1fr 1fr } .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 } .field{ position:relative; display:block } .field input,.field textarea,.field select{ width:100%; font:inherit; font-size:15.5px; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); padding:22px 0 11px; border-radius:0; transition:border-color .4s var(--ease); appearance:none; -webkit-appearance:none; } .field textarea{ resize:vertical; min-height:104px; line-height:1.6 } .field select{ cursor:pointer } .field--select::after{ content:''; position:absolute; right:3px; bottom:19px; width:7px; height:7px; border-right:1.4px solid var(--ink-mute); border-bottom:1.4px solid var(--ink-mute); transform:rotate(45deg); pointer-events:none; transition:transform .4s var(--ease); } .field--select:focus-within::after{ transform:rotate(225deg) translate(-2px,-2px) } .field label{ position:absolute; left:0; top:22px; font-size:15.5px; color:var(--ink-faint); pointer-events:none; transform-origin:0 50%; transition:transform .45s var(--ease), color .45s var(--ease); } .field label i{ font-style:normal; opacity:.7 } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label, .field select:focus + label, .field select:valid + label{ transform:translateY(-23px) scale(.76); color:var(--ink-mute); } .field input:focus + label,.field textarea:focus + label,.field select:focus + label{ color:var(--blue) } .field__line{ position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--blue); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease); } .field:focus-within .field__line{ transform:scaleX(1) } .field__err{ display:block; font-size:12px; color:#B4322B; min-height:0; opacity:0; transform:translateY(-4px); transition:opacity .3s var(--ease), transform .3s var(--ease); } .field.has-error input,.field.has-error textarea,.field.has-error select{ border-bottom-color:#B4322B } .field.has-error .field__err{ opacity:1; transform:none; padding-top:7px } .field.has-error{ animation:nudge .4s var(--ease) } @keyframes nudge{ 0%,100%{ transform:translateX(0) } 22%{ transform:translateX(-5px) } 55%{ transform:translateX(4px) } 80%{ transform:translateX(-2px) } } .btn--submit{ justify-self:start; min-width:196px; justify-content:center } .btn__spin{ position:absolute; inset:0; margin:auto; width:17px; height:17px; border:1.6px solid color-mix(in srgb, var(--on-blue) 35%, transparent); border-top-color:var(--on-blue); border-radius:50%; opacity:0; } .btn--submit.is-busy .btn__label,.btn--submit.is-busy .btn__ico{ opacity:0 } .btn--submit.is-busy .btn__spin{ opacity:1; animation:spin .7s linear infinite } .btn--submit.is-busy{ pointer-events:none } .btn--submit .btn__label,.btn--submit .btn__ico{ transition:opacity .25s var(--ease) } @keyframes spin{ to{ transform:rotate(360deg) } } .btn--submit.is-ok{ background:var(--blue-deep) } .form__status{ margin:0; font-size:13.5px; color:var(--ink-mute); opacity:0; transform:translateY(-5px); transition:opacity .45s var(--ease), transform .45s var(--ease); } .form__status.is-show{ opacity:1; transform:none } .form__status.is-err{ color:#B4322B } .form__status.is-ok{ color:var(--blue) } /* ═══ FOOTER ═════════════════════════════════════════════ */ .footer{ border-top:1px solid var(--line-soft); padding-block:clamp(44px,6vw,72px) } .footer__top{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; padding-bottom:clamp(30px,4vw,48px); } .footer__brand{ display:flex; align-items:center; gap:12px } .footer__brand span{ font-family:var(--geo); font-weight:500; font-size:19px; letter-spacing:-.02em } .footer__mark{ width:34px; height:25px; color:var(--blue) } .footer__brand:hover .footer__mark{ --dot-x:-161px; --dot-y:71px; --dot-s:.42 } .footer__nav{ display:flex; gap:clamp(14px,2vw,28px); flex-wrap:wrap } .footer__nav a{ font-size:13.5px; color:var(--ink-mute); transition:color .35s var(--ease) } .footer__nav a:hover{ color:var(--ink) } .footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:clamp(20px,2.6vw,30px); font-size:12.5px; color:var(--ink-faint); } .footer__bottom p{ margin:0 } .footer__social{ display:flex; gap:20px } .footer__social a{ transition:color .35s var(--ease) } .footer__social a:hover{ color:var(--ink) } /* ═══ REVEALS ════════════════════════════════════════════ */ .js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease), transform .95s var(--ease); } .js [data-reveal].is-in{ opacity:1; transform:none } .word{ display:inline-block; overflow:hidden; vertical-align:top } .word > i{ display:inline-block; font-style:inherit; transform:translateY(102%) rotate(3deg); transition:transform .95s var(--ease); } [data-split].is-in .word > i{ transform:none } /* ═══ RESPONSIVE ═════════════════════════════════════════ */ @media (max-width:1080px){ .sechead--split{ grid-template-columns:1fr } .studio__grid,.contact__grid{ grid-template-columns:1fr } .srv__row{ grid-template-columns:50px minmax(0,1fr) 30px } .srv__text{ grid-column:2 / -1 } } @media (max-width:860px){ .nav__links,.nav__cta,.lang{ display:none } .burger{ display:block } .themebtn{ margin-left:auto } .hero__meta{ grid-template-columns:1fr; align-items:start } .hero__title{ max-width:none } .form__row{ grid-template-columns:1fr } .contact__links li{ grid-template-columns:82px 1fr } .lb__nav{ width:42px; height:42px } } @media (max-width:560px){ .hero{ min-height:88svh } .btn{ padding:13px 22px } .footer__top{ flex-direction:column; align-items:flex-start } .stat{ flex-direction:column; gap:4px; align-items:flex-start } } @media (hover:none){ .tile__tag{ opacity:1; transform:none } .tile__img{ filter:saturate(.85) } } /* ═══ REDUCED MOTION ═════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } [data-reveal],.tile{ opacity:1 !important; transform:none !important } .word > i{ transform:none !important } .hero__wash{ animation:none } .marquee__track{ animation:none } .strip__track{ animation:none !important } .strip{ overflow-x:auto } }