/* ============================================================ SF HOME DESIGN — Landing Dark Luxury · Arquitectura · Editorial · Cinematografía ------------------------------------------------------------ 01 Tokens 06 Servicios 11 Contacto 02 Base 07 Para quién 12 Footer 03 Marco/Grano 08 Proyectos 13 Menú mobile 04 Header 09 Proceso 14 Responsive 05 Hero 10 Sobre mí 15 Reduced motion ============================================================ */ /* ---------- 01 · TOKENS ---------- */ :root{ --black:#080808; --black-2:#111111; --grey:#1B1B1B; --cream:#F2F0EA; --white:#FFFFFF; --ocre:#C89A3D; /* ocre oscurecido: el de marca sobre crema queda en 2,3:1 de contraste, este llega a 3,3:1 sin salirse del dorado. Solo para la tarjeta invertida. */ --ocre-deep:#A87C29; /* El ocre de arriba funciona para trazos y textos grandes sobre crema, pero en cuerpos chicos da 3,3:1 y no se lee. Este llega a 5,6:1 y sigue siendo dorado: es el que va en etiquetas, números y botones sobre fondo claro. */ --ocre-ink:#7A5A1E; --line: rgba(242,240,234,.13); --line-soft: rgba(242,240,234,.07); --ocre-soft: rgba(200,154,61,.32); --txt: rgba(242,240,234,.62); --txt-dim: rgba(242,240,234,.42); /* Titulares y textos comparten familia: la jerarquía la marcan el cuerpo, el tracking y el acento serif. Instrument Serif entra solo en itálica ocre. */ --f-display:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --f-sans:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --f-accent:"Instrument Serif", Georgia, "Times New Roman", serif; --f-mono:"IBM Plex Mono", ui-monospace, monospace; /* Slow luxury */ --ease:cubic-bezier(.16,.84,.24,1); --ease-soft:cubic-bezier(.4,0,.2,1); --t-fast:.5s; --t:.9s; --t-slow:1.4s; --px:clamp(22px, 6.4vw, 130px); --sp:clamp(94px, 11.5vw, 186px); --rail:56px; --hdr-h:104px; --hdr-h-sm:70px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--black); color:var(--cream); font-family:var(--f-sans); font-weight:400; font-size:16px; line-height:1.7; /* clip recorta igual que hidden pero no crea contenedor de scroll, que es lo que dejaría inerte al position:sticky del proceso */ overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.is-locked{overflow:hidden} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,p,ul,figure{margin:0} ul{padding:0;list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--ocre);color:var(--black)} :focus-visible{outline:1px solid var(--ocre);outline-offset:4px} .skip{ position:fixed;top:-100px;left:24px;z-index:999; background:var(--ocre);color:var(--black); padding:12px 20px;font-family:var(--f-mono);font-size:11px; letter-spacing:.16em;text-transform:uppercase; transition:top var(--t-fast) var(--ease); } .skip:focus{top:20px} /* ---------- 02 · TIPOGRAFÍA COMPARTIDA ---------- */ .eyebrow{ font-family:var(--f-mono); font-weight:400; font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--ocre); display:flex;align-items:center;gap:14px; margin-bottom:clamp(26px,3vw,44px); } .eyebrow::after{ content:"";height:1px;flex:0 0 clamp(40px,6vw,96px); background:linear-gradient(90deg,var(--ocre-soft),transparent); } .h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.95rem,4.1vw,3.5rem); line-height:1.06; letter-spacing:-.032em; color:var(--white); } .h2--sm{font-size:clamp(1.6rem,2.85vw,2.4rem);line-height:1.14;letter-spacing:-.028em} .h2 em{ font-family:var(--f-accent); font-style:italic;font-weight:400; letter-spacing:-.01em; color:var(--ocre); } .lede{ font-size:clamp(15px,1.15vw,17px); line-height:1.85; color:var(--txt); max-width:46ch; } /* ---------- CTA ---------- */ .cta{ --pad:16px 30px; position:relative; display:inline-flex;align-items:center;justify-content:center; padding:var(--pad); font-family:var(--f-sans); font-weight:400; font-size:11px; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; overflow:hidden; isolation:isolate; transition:color var(--t) var(--ease), border-color var(--t) var(--ease); } .cta--solid{border:1px solid var(--ocre);color:var(--ocre)} .cta--solid::before{ content:"";position:absolute;inset:0;background:var(--ocre); transform:scaleX(0);transform-origin:left; transition:transform var(--t-slow) var(--ease);z-index:-1; } .cta--solid:hover{color:var(--black)} .cta--solid:hover::before{transform:scaleX(1)} .cta--ghost{padding-left:0;padding-right:0;color:var(--cream);letter-spacing:.2em} .cta--ghost::after{ content:"";position:absolute;left:0;right:0;bottom:8px;height:1px; background:var(--line); transition:background var(--t) var(--ease); } .cta--ghost::before{ content:"";position:absolute;left:0;bottom:8px;height:1px;width:100%; background:var(--ocre);transform:scaleX(0);transform-origin:left; transition:transform var(--t-slow) var(--ease); } .cta--ghost:hover{color:var(--white)} .cta--ghost:hover::before{transform:scaleX(1)} .cta--line{padding:10px 0;color:var(--cream);letter-spacing:.2em;font-size:10.5px} .cta--line::after{ content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%; background:var(--ocre);transform:scaleX(0);transform-origin:right; transition:transform var(--t) var(--ease); } .cta--line:hover::after{transform:scaleX(1);transform-origin:left} /* ---------- MARCA / LOGO ---------- */ .brand{display:flex;align-items:center;gap:14px} .logo-mark{ position:relative;display:block;flex:none; width:46px;height:46px; } .logo-mark img{ width:100%;height:100%;object-fit:contain; opacity:.92; transition:opacity var(--t) var(--ease); } .brand:hover .logo-mark img{opacity:1} .logo-mark--lg{width:104px;height:104px} .brand__txt{ font-family:var(--f-sans);font-weight:400; font-size:12px;letter-spacing:.3em;text-transform:uppercase; color:var(--cream);line-height:1;white-space:nowrap; transition:color var(--t) var(--ease); } .brand__txt b{font-weight:500;color:var(--ocre)} .brand:hover .brand__txt{color:var(--white)} /* ---------- 03 · MARCO DE LÁMINA + GRANO ---------- */ .sheet{position:fixed;inset:0;z-index:40;pointer-events:none} .sheet__rail{position:absolute;top:0;bottom:0;width:1px;background:var(--line-soft);transition:background-color var(--t) var(--ease)} .sheet__rail--l{left:var(--rail)} .sheet__rail--r{right:var(--rail)} .sheet__label{ position:absolute;left:14px;bottom:56px; writing-mode:vertical-rl;transform:rotate(180deg); font-family:var(--f-mono);font-size:9.5px;font-weight:300; letter-spacing:.3em;text-transform:uppercase; color:var(--txt-dim);white-space:nowrap; transition:opacity var(--t) var(--ease); } .sheet__progress{ position:absolute;top:0;left:0;width:1px;height:100%; background:var(--ocre);transform:scaleY(0);transform-origin:top; transition:background-color var(--t) var(--ease); } .sheet__corner{ position:absolute;width:11px;height:11px; border:0 solid var(--ocre-soft); transition:border-color var(--t) var(--ease); } .sheet__corner.tl{top:calc(var(--rail) - 1px);left:calc(var(--rail) - 1px);border-top-width:1px;border-left-width:1px} .sheet__corner.tr{top:calc(var(--rail) - 1px);right:calc(var(--rail) - 1px);border-top-width:1px;border-right-width:1px} .sheet__corner.bl{bottom:calc(var(--rail) - 1px);left:calc(var(--rail) - 1px);border-bottom-width:1px;border-left-width:1px} .sheet__corner.br{bottom:calc(var(--rail) - 1px);right:calc(var(--rail) - 1px);border-bottom-width:1px;border-right-width:1px} /* Halo que sigue al cursor. El canvas se dimensiona por JS en píxeles CSS: un degradado suave no necesita densidad retina y así cuesta la cuarta parte. El z-index lo deja sobre el contenido pero debajo del grano, del marco, del menú, del header, del visor y de la apertura: ilumina la página, no la interfaz. */ .spotlight{ position:fixed;top:0;left:0; width:100vw;height:100vh; z-index:30;pointer-events:none; } .grain{ position:fixed;inset:-120px;z-index:38;pointer-events:none; opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- INTRO ---------- */ .intro{ position:fixed;inset:0;z-index:200; background:var(--black); display:grid;place-items:center; transition:opacity 1s var(--ease), visibility 1s; } .intro.is-out{opacity:0;visibility:hidden} .intro__inner{display:grid;justify-items:center;gap:26px} .intro__word{ font-family:var(--f-sans);font-size:11px;font-weight:300; letter-spacing:.44em;text-transform:uppercase;color:var(--txt); padding-left:.44em; } .intro__bar{display:block;width:132px;height:1px;background:var(--line)} .intro__bar i{ display:block;height:100%;width:0;background:var(--ocre); transition:width .45s linear; } /* ---------- 04 · HEADER ---------- */ .hdr{ position:fixed;top:0;left:0;right:0;z-index:100; height:var(--hdr-h); border-bottom:1px solid transparent; transition:height var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), backdrop-filter var(--t) var(--ease); } .hdr.is-stuck{ height:var(--hdr-h-sm); background:rgba(8,8,8,.62); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line-soft); } .hdr__in{ height:100%; padding:0 var(--px); display:flex;align-items:center;gap:clamp(16px,3vw,54px); } .hdr.is-stuck .logo-mark{width:38px;height:38px} .logo-mark{transition:width var(--t) var(--ease), height var(--t) var(--ease)} .nav{flex:1;display:flex;justify-content:center;gap:clamp(12px,1.9vw,30px)} .nav__a{ position:relative; font-size:10.5px;font-weight:300; letter-spacing:.16em;text-transform:uppercase; color:var(--txt);padding:6px 0; transition:color var(--t-fast) var(--ease); } .nav__a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--ocre);transform:scaleX(0);transform-origin:right; transition:transform var(--t) var(--ease); } .nav__a:hover{color:var(--cream)} .nav__a:hover::after{transform:scaleX(1);transform-origin:left} .nav__a.is-active{color:var(--white)} .nav__a.is-active::after{transform:scaleX(1);transform-origin:left} .hdr__end{display:flex;align-items:center;gap:22px;margin-left:auto} .burger{ display:none;width:34px;height:34px; position:relative;flex:none; } .burger i{ position:absolute;left:6px;width:22px;height:1px;background:var(--cream); transition:transform var(--t) var(--ease), opacity var(--t-fast) var(--ease), width var(--t) var(--ease); } .burger i:nth-child(1){top:14px} .burger i:nth-child(2){top:20px;width:14px} .burger.is-open i:nth-child(1){transform:translateY(3px) rotate(45deg)} .burger.is-open i:nth-child(2){transform:translateY(-3px) rotate(-45deg);width:22px} /* ---------- 05 · HERO ---------- */ .hero{ position:relative; min-height:100vh; min-height:100svh; display:flex;align-items:center; overflow:hidden; isolation:isolate; } .hero__media{position:absolute;inset:0;z-index:0;background:#0d0d0d} .hero__media video{ width:100%;height:100%; object-fit:cover;object-position:center; will-change:transform; } .hero__veil{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg, rgba(8,8,8,.86) 0%, rgba(8,8,8,.66) 30%, rgba(8,8,8,.22) 60%, rgba(8,8,8,.12) 78%, rgba(8,8,8,.42) 100%), linear-gradient(180deg, rgba(8,8,8,.62) 0%, rgba(8,8,8,0) 28%, rgba(8,8,8,0) 62%, rgba(8,8,8,.72) 100%); opacity:0; transition:opacity 1.8s var(--ease); } .is-ready .hero__veil{opacity:1} .hero__in{ position:relative;z-index:2; width:100%; padding:calc(var(--hdr-h) + 40px) var(--px) 150px; } /* Un poco más ancho desde que el titular pasó a «Espacios que se sienten»: la primera línea creció y necesita margen para no partirse en dos. */ .hero__copy{max-width:min(860px,66%);will-change:transform} /* Bloque de marca: el nombre manda, la bajada acompaña. Aparecen juntos porque son una sola unidad, no dos renglones. */ .hero__eyebrow{ font-family:var(--f-mono);font-weight:400; text-transform:uppercase; margin-bottom:clamp(26px,2.8vw,38px); } /* Es la etiqueta de categoría del hero: pasó a ocupar el cuerpo que antes tenía el nombre del estudio. En pantalla angosta baja de cuerpo y afloja el espaciado, porque son 31 caracteres y con el tamaño de escritorio se parten en dos líneas. */ .hero__tag{ display:block; font-size:clamp(13px,1.15vw,16px); letter-spacing:.24em; color:var(--white); } .hero__title{ font-family:var(--f-display); font-weight:400; font-size:clamp(2.05rem,5.4vw,4.7rem); line-height:1.02; letter-spacing:-.035em; margin-bottom:clamp(24px,2.8vw,38px); } /* Si aun así llegara a partirse, balance la corta en dos líneas parejas en lugar de dejar una palabra huérfana. */ .hero__title span{display:block;text-wrap:balance} .hero__title .l1{color:var(--white)} .hero__title .l2{ font-family:var(--f-accent); font-style:italic;font-weight:400; font-size:1.04em; letter-spacing:-.01em; color:var(--ocre); } .hero__sub{ font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.85;color:var(--cream);opacity:.86; max-width:44ch; margin-bottom:clamp(34px,3.6vw,50px); } .hero__cta{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap} .hero__cta .cta--solid{border-color:rgba(242,240,234,.55);color:var(--white)} .hero__cta .cta--solid::before{background:var(--ocre)} .hero__cta .cta--solid:hover{border-color:var(--ocre);color:var(--black)} .hero__cta .cta--ghost{color:rgba(242,240,234,.72);font-size:10.5px} /* Entrada cinematográfica */ .hero__eyebrow,.hero__title .l1,.hero__title .l2,.hero__sub,.hero__cta,.scroller{ opacity:0;transform:translateY(22px); transition:opacity 1.5s var(--ease), transform 1.5s var(--ease); } .is-ready .hero__eyebrow{opacity:1;transform:none;transition-delay:.35s} .is-ready .hero__title .l1{opacity:1;transform:none;transition-delay:.6s} .is-ready .hero__title .l2{opacity:1;transform:none;transition-delay:.82s} .is-ready .hero__sub{opacity:1;transform:none;transition-delay:1.08s} .is-ready .hero__cta{opacity:1;transform:none;transition-delay:1.3s} .is-ready .scroller{opacity:1;transform:none;transition-delay:1.6s} /* Indicador de scroll */ /* Centrado con margin auto, no con translateX: el transform ya lo usa la animación de entrada. */ .scroller{ position:absolute;left:0;right:0;bottom:44px;z-index:3; width:fit-content;margin-inline:auto; display:flex;flex-direction:column;align-items:center;gap:16px; } .scroller span{ writing-mode:vertical-rl; font-family:var(--f-mono);font-size:9.5px;font-weight:300; letter-spacing:.36em;text-transform:uppercase; color:rgba(242,240,234,.66); } .scroller__line{ position:relative;display:block;width:1px;height:74px; background:rgba(242,240,234,.2);overflow:hidden; } .scroller__line b{ position:absolute;left:0;top:0;width:1px;height:26px;background:var(--ocre); animation:trickle 3.4s var(--ease-soft) infinite; } @keyframes trickle{ 0%{transform:translateY(-30px);opacity:0} 22%{opacity:1} 78%{opacity:1} 100%{transform:translateY(80px);opacity:0} } /* ---------- SECCIONES ---------- */ .sec{position:relative;padding:var(--sp) var(--px)} .sec__head{margin-bottom:clamp(52px,6vw,92px)} .sec__grid{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(30px,5vw,90px);align-items:end; } /* Revelado */ .js .reveal{opacity:0;transform:translateY(26px)} .js .reveal.is-in{ opacity:1;transform:none; transition:opacity 1.3s var(--ease), transform 1.3s var(--ease); transition-delay:calc(var(--d,0) * 90ms); } /* El título de Servicios lleva cuatro conceptos en vez de tres, así que en dos líneas no entra al cuerpo del resto: la segunda se pasa de la columna entre 1025 y 1500px. Acá se achica lo mínimo para que entre, y a partir de ~1587px —donde ya sobra lugar— vuelve al mismo cuerpo que los demás títulos. En pantalla angosta no se toca: ahí forzar dos líneas costaría un 26%. */ @media (min-width:1025px){ .h2--svc{font-size:clamp(2rem,3.53vw,3.5rem)} } /* ---------- 06 · SERVICIOS ---------- */ .sec--svc{border-top:1px solid var(--line-soft)} .svcs{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); } /* El filete de arriba es de la grilla y no de las tarjetas, así que no entraba con ellas: quedaba solo, colgando sobre el vacío, mientras subían. Con la entrada vieja duraba un suspiro; al alargarla a 2,5s se volvió una línea suelta sobre la nada. Se enciende junto con la primera tarjeta. En el teléfono la grilla no lleva filete, así que ahí no hace nada. */ .js .svcs{border-top-color:transparent;transition:border-top-color 1.6s var(--ease)} .js .svcs:has(.svc.is-in){border-top-color:var(--line)} .svc{ /* Letra sobre la foto. Con la imagen limpia, el gris de siempre (42% el número, 62% la descripción) no alcanzaba: sube casi a blanco pleno. Y un halo oscuro que casi no se ve pero sostiene la letra cuando pasa por algo claro. Van en variables porque el negativo crema las apaga todas juntas: sobre crema una sombra oscura ensucia la letra. */ --txt-foto:rgba(242,240,234,.9); --halo-n-foto:0 0 2px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.6); --halo-t-foto:0 1px 2px rgba(0,0,0,.55), 0 0 16px rgba(0,0,0,.55); --halo-n:var(--halo-n-foto); --halo-t:var(--halo-t-foto); position:relative; display:flex;flex-direction:column; min-height:clamp(280px,26vw,380px); padding:30px clamp(18px,1.8vw,30px) 40px; border-left:1px solid var(--line); transition:background var(--t-slow) var(--ease); } .svc:last-child{border-right:1px solid var(--line)} .svc::before{ content:"";position:absolute;inset:0;pointer-events:none; background:var(--cream); opacity:0;transition:opacity var(--t) var(--ease); } .svc:hover::before, .svc.is-active::before{opacity:1} .svc:hover, .svc.is-active{--halo-n:none;--halo-t:none} /* ---------- FOTO DE FONDO DE LA TARJETA ---------- Va en su propia capa y no como background de .svc por una razón concreta: en móvil la tarjeta no tiene relleno lateral y el velo crema se derrama hasta los bordes de la pantalla. Un background-image no puede salirse de su caja, así que la foto habría quedado cortada justo donde arranca la letra. Con una capa aparte se le da la misma geometría que al velo. La foto se ve limpia: el oscuro va solo donde hay letra encima. Antes un velo cubría la tarjeta entera y la imagen quedaba apagada; ahora la mitad de arriba se ve tal cual y el degradado entra recién a la altura del título, que es donde tiene que sostener la descripción. */ .svc__foto{ /* El velo y la imagen van en variables: así esta regla vale para las cinco tarjetas y cada una solo declara su archivo y, si hace falta, cuánto velo necesita. Cuatro tramos. Arriba, una sombra corta detrás del número; en el medio, nada; desde el título hacia abajo, el oscuro que carga con él y con la descripción. El número no depende solo de esa sombra corta: lleva además un halo propio (ver .svc__n), porque en el teléfono la tarjeta es ancha y baja y cae justo sobre ventanas y cielos. */ --velo-tope:.6; --velo-alto:.15; --velo-medio:.7; --velo-bajo:.88; /* Y dónde cae cada tramo. El oscuro fuerte se ancla al título en píxeles —relleno de arriba, más el renglón del número, más el margen del cuerpo— y no a un porcentaje del alto: la tarjeta cambia de alto con la pantalla y el título no se mueve en la misma proporción. Con un porcentaje, en tablet y en el teléfono el título caía sobre foto casi limpia y el «SF» dorado bajaba a 1,6 de contraste. */ --velo-en-tope:0px; --velo-en-alto:16%; --velo-en-limpio:30%; --velo-en-medio:calc(46px + var(--cuerpo-y)); position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(to bottom, rgba(8,8,8,var(--velo-tope)) 0%, rgba(8,8,8,var(--velo-tope)) var(--velo-en-tope), rgba(8,8,8,var(--velo-alto)) var(--velo-en-alto), rgba(8,8,8,0) var(--velo-en-limpio), rgba(8,8,8,var(--velo-medio)) var(--velo-en-medio), rgba(8,8,8,var(--velo-bajo)) 100%), var(--foto); background-size:cover; background-position:center; background-repeat:no-repeat; } .svc[data-svc="sf-design"] .svc__foto{--foto:url("../../Media/servicios/sf-design.webp?v=1")} .svc[data-svc="sf-immersive"] .svc__foto{--foto:url("../../Media/servicios/sf-immersive.webp?v=1")} .svc[data-svc="sf-stay"] .svc__foto{--foto:url("../../Media/servicios/sf-stay.webp?v=1")} .svc[data-svc="sf-visual"] .svc__foto{--foto:url("../../Media/servicios/sf-visual.webp?v=1")} .svc[data-svc="sf-archprint"] .svc__foto{--foto:url("../../Media/servicios/sf-archprint.webp?v=1")} /* En escritorio el pie de la foto se abre bastante más. La tarjeta es alta y angosta, y por debajo de la descripción queda una franja de foto sin letra que con .88 se veía casi negra. El tramo del título (--velo-medio) no se toca: es el que sostiene el «SF» dorado, lo más frágil de la tarjeta. Con .45 lo peor medido es la descripción en 7,5 de contraste; a .35 seguía pasando, pero la letra quedaba sobre las líneas de los planos y se leía peor. En el teléfono el texto ocupa casi toda la tarjeta y se deja como está. */ @media (min-width:1025px){ .svc__foto{--velo-bajo:.45} } /* El velo crema tiene que quedar por encima de la foto. Sin este z-index gana la foto, porque un ::before cuenta como primer hijo y la capa viene después en el marcado. El texto sigue arriba de los dos: también está en z-index 1 y aparece más tarde. */ .svc::before{z-index:1} /* Filete vertical que se enciende de abajo hacia arriba */ .svc::after{ content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px; background:var(--ocre);pointer-events:none; transform:scaleY(0);transform-origin:bottom; transition:transform var(--t-slow) var(--ease), background-color var(--t) var(--ease); } .svc:hover::after, .svc.is-active::after{transform:scaleY(1);background:var(--ocre-deep)} .svc__n{ /* 400 y no 300: el Light a 10px sobre una foto se deshace en los bordes. */ font-family:var(--f-mono);font-size:10px;font-weight:400; letter-spacing:.24em;color:var(--txt-foto); text-shadow:var(--halo-n); position:relative;z-index:1; transition:color var(--t) var(--ease), letter-spacing var(--t-slow) var(--ease), text-shadow var(--t) var(--ease); } .svc:hover .svc__n, .svc.is-active .svc__n{color:var(--ocre-ink);letter-spacing:.34em} /* Icono: se dibuja trazo a trazo al entrar en pantalla */ /* Arriba a la derecha, en el mismo renglón que el número. Sale del flujo vertical: antes iba apilado debajo del número y empujaba el texto hacia abajo. Con una foto detrás, amontonar número e ícono en la misma esquina dejaba tapada sin motivo la franja central, que es justo donde estas imágenes tienen el motivo. */ .svc__icon{ display:block; width:clamp(46px,4.2vw,58px);height:auto;flex:none; position:absolute; top:30px;right:clamp(18px,1.8vw,30px); color:var(--ocre); /* Invisible con la tarjeta cerrada: ahí el trabajo de identificar el servicio ya lo hace la foto de fondo, y el ícono lo repetía en chico. Aparece al abrirse, que es cuando el velo crema tapa la foto y la tarjeta se queda sin ninguna otra pieza gráfica. */ opacity:0; z-index:1; transition:opacity var(--t) var(--ease), transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); } /* El trazo ya no se dibuja al entrar la sección en pantalla sino al abrir la tarjeta. Antes se dibujaba con el ícono a la vista y era la firma de la entrada; ahora que arranca invisible, dibujarlo ahí sería gastarlo sin que nadie lo vea. En la apertura ocurre justo donde el usuario está mirando. */ .js .svc__icon > *{ stroke-dasharray:1.04; stroke-dashoffset:1.04; transition:stroke-dashoffset 1.1s var(--ease); } .js .svc:hover .svc__icon > *, .js .svc.is-active .svc__icon > *{stroke-dashoffset:0} /* La aparición de la banda al entrar en pantalla. El peso de la animación lo llevaba el dibujado del ícono, que corría hasta los 2,78s y era lo más lento de la sección; al mudarlo a la apertura, la entrada quedaba en un desvanecido de 1,66s que llegaba de golpe. Estos tres números lo reponen: las tarjetas se separan más entre sí, tardan más y suben desde más abajo. La última termina a 2,56s, cerca de los 2,78s de antes. Va sobre .svc y no sobre .reveal a secas porque esa clase la usa toda la página. Y de 1025px para arriba porque más abajo las tarjetas se apilan y se recorren scrolleando: un escalonado largo ahí significa pasar por tarjetas que todavía no aparecieron. */ @media (min-width:1025px){ .js .svc.reveal{transform:translateY(40px)} .js .svc.reveal.is-in{ /* El transform:none va repetido acá a propósito. El de .js .reveal.is-in pesa lo mismo que el .js .svc.reveal de arriba, y como este bloque va después en el archivo, ganaba el desplazado: las tarjetas se quedaban 40px abajo para siempre y el filete de la grilla flotaba sobre ellas. */ transform:none; transition:opacity 1.6s var(--ease), transform 1.6s var(--ease); transition-delay:calc(var(--d,0) * 240ms); } } .svc:hover .svc__icon, .svc.is-active .svc__icon{ color:var(--ocre-deep); opacity:1; transform:translateY(-6px); } /* Separación fija entre el ícono y el título, en lugar de anclar el bloque al pie de la tarjeta: así los cinco títulos arrancan a la misma altura aunque una descripción ocupe una línea más que las otras. */ /* El ícono ya no ocupa lugar en la columna, así que este margen carga con los tres tramos que antes aportaban el ícono y sus separaciones. La suma da exactamente el mismo alto de antes: los títulos arrancan donde siempre y las tarjetas no cambian de tamaño. */ /* El margen vive en una variable de la tarjeta porque el degradado de la foto también lo necesita: tiene que oscurecer justo desde el título. */ .svc{--cuerpo-y:calc(clamp(22px,2.2vw,30px) + clamp(46px,4.2vw,58px) + clamp(52px,6.5vw,96px))} .svc__body{ margin-top:var(--cuerpo-y); position:relative;z-index:1; } /* El panel desplegado también: sin esto el fondo crema del negativo le pasa por encima y el texto desaparece. */ .svc__more{position:relative;z-index:1} .svc__t{ font-family:var(--f-sans);font-weight:400; font-size:17px;letter-spacing:.14em;text-transform:uppercase; color:var(--white);line-height:1.45; text-wrap:balance; margin-bottom:14px; transition:transform var(--t-slow) var(--ease); } .svc__t b{font-weight:500;color:var(--ocre);transition:color var(--t) var(--ease)} .svc__t{ text-shadow:var(--halo-t); transition:transform var(--t-slow) var(--ease), color var(--t) var(--ease), text-shadow var(--t) var(--ease); } .svc:hover .svc__t, .svc.is-active .svc__t{transform:translateY(-4px);color:var(--black)} .svc:hover .svc__t b, .svc.is-active .svc__t b{color:var(--ocre-ink)} .svc__d{ font-size:13.5px;line-height:1.75;color:var(--txt-foto); text-shadow:var(--halo-t); transition:color var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), text-shadow var(--t) var(--ease); } .svc:hover .svc__d, .svc.is-active .svc__d{color:rgba(8,8,8,.66);transform:translateY(-4px)} .svc__rule{ position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ocre); transform:scaleX(0);transform-origin:left; transition:transform var(--t-slow) var(--ease), background-color var(--t) var(--ease); } .svc:hover .svc__rule, .svc.is-active .svc__rule{transform:scaleX(1);background:var(--ocre-deep)} /* ---------- 07 · PARA QUIÉN TRABAJAMOS ---------- */ /* overflow oculto como red de seguridad: la sangría del índice se queda dentro del relleno, pero evita que algo futuro desborde a lo ancho. */ .sec--who{background:var(--black-2);overflow:hidden} /* Índice a ancho completo: número · perfil · descripción · flecha */ /* ---------- ACORDEÓN ELÁSTICO DE PERFILES ---------- Los siete conviven en una fila. El que se mira se expande y el resto se comprime; cerrados conservan el nombre en vertical, así la sección se sigue leyendo de un vistazo en lugar de obligar a abrir uno por uno. */ .whos{ display:flex; gap:clamp(5px,.55vw,10px); height:clamp(360px,32vw,470px); } .who{ position:relative; flex:1 1 0;min-width:0;overflow:hidden; border:1px solid var(--line); background-color:rgba(242,240,234,.015); cursor:pointer; transition:flex-grow var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease); } .who:hover{background-color:rgba(242,240,234,.03)} .who.is-open, .who.is-open:hover{ flex-grow:4.4; border-color:var(--ocre-soft); background-color:rgba(200,154,61,.05); } /* El índice se alinea con el borde del texto para que no salte al abrirse. */ .who__n{ position:absolute;top:clamp(15px,1.5vw,24px); left:clamp(20px,2.2vw,34px); font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.22em;color:var(--txt-dim); pointer-events:none; transition:color var(--t) var(--ease); } .who.is-open .who__n{color:var(--ocre)} /* Ícono del perfil. Está en los dos estados: centrado mientras el panel está cerrado y corriéndose al borde del texto al abrirse, para alinearse con el título. Mismo trazo y mismo ocre que los de las tarjetas de Servicios. */ .who__icon{ position:absolute;top:clamp(48px,4.6vw,68px); left:50%;transform:translateX(-50%); width:clamp(46px,4.2vw,58px);height:auto; color:var(--ocre);opacity:.5;pointer-events:none; transition:left var(--t) var(--ease), transform var(--t) var(--ease), opacity var(--t) var(--ease), width var(--t) var(--ease), stroke-width var(--t) var(--ease); } .who:hover .who__icon{opacity:.72} .who.is-open .who__icon, .who.is-open:hover .who__icon{ left:clamp(20px,2.2vw,34px); transform:translateX(0); opacity:1; } /* De 1280px para arriba el ícono además crece. El panel abierto deja ahí 182px de hueco entre el ícono y el título —el 40% de su alto— y a 105px el hueco baja al 29% quedando 135px de aire. Por debajo de 1280 no: entre 880 y 1140 el panel es más bajo y el ícono se le monta al título, medido. Tampoco sirve escalarlo con el ancho; a 1140 choca igual. El trazo se afina en el mismo gesto porque un SVG escala la línea junto con el dibujo: a este tamaño el 1.25 original se vería de 2,7px, el trazo más grueso del sitio. En 1 queda en 2,2px y mantiene la línea fina del resto. Si se cambia el tamaño hay que recalcularlo: trazo = 2.19 * 48 / px. */ @media (min-width:1280px){ .who.is-open .who__icon, .who.is-open:hover .who__icon{width:105px;stroke-width:1} } /* Nombre en vertical mientras el panel está cerrado. Va en la misma familia y caja que el título del panel abierto: es el mismo texto, así que al abrirse tiene que leerse como que se acomoda, no como que lo reemplaza otro. */ .who__vert{ position:absolute;left:50%;bottom:clamp(22px,2.4vw,36px); transform:translateX(-50%) rotate(180deg); writing-mode:vertical-rl;white-space:nowrap; font-family:var(--f-display);font-size:clamp(13px,1.05vw,16.5px); font-weight:400;letter-spacing:.01em; color:var(--txt);pointer-events:none; transition:opacity var(--t) var(--ease), color var(--t) var(--ease); } .who:hover .who__vert{color:var(--cream)} .who.is-open .who__vert{opacity:0;transition-duration:var(--t-fast)} /* Contenido del panel abierto. Entra con retardo: para cuando empieza a verse, el panel ya alcanzó casi todo su ancho y el texto no se reacomoda a la vista. */ .who__open{ position:absolute;left:0;right:0;bottom:0; padding:clamp(20px,2.2vw,34px); opacity:0;transform:translateY(16px);pointer-events:none; transition:opacity var(--t) var(--ease), transform var(--t-slow) var(--ease); } .who.is-open .who__open{ opacity:1;transform:none;pointer-events:auto; transition-delay:.28s; } .who__t{ font-family:var(--f-display); font-weight:400;font-size:clamp(1.4rem,2.3vw,2.05rem); letter-spacing:-.03em;line-height:1.1;color:var(--white); text-wrap:balance; } .who__d{ margin-top:13px; /* 44ch y no 34ch: el texto más largo de los siete necesita 369px para entrar en un renglón y el panel abierto tiene 442px libres ya a 1280px de pantalla. Con el tope viejo, en 301px, cinco de los siete se partían en dos por falta de permiso, no de espacio. */ font-size:14.5px;line-height:1.7;color:var(--txt);max-width:44ch; } /* Los servicios que le corresponden a cada perfil. Llevan a esa tarjeta de la sección anterior y la abren. */ .who__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .who__tags a{ display:inline-block;padding:6px 12px; border:1px solid var(--line); font-family:var(--f-sans);font-weight:400; font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--txt);white-space:nowrap; transition:color var(--t-fast) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease); } .who__tags a b{font-weight:500;color:var(--ocre)} .who__tags a:hover{ color:var(--white); border-color:var(--ocre-soft); background-color:rgba(200,154,61,.08); } /* Fuera del acordeón: no es un perfil más, es el servicio que los atraviesa. Va como barra a todo el ancho, y ese ancho es el mensaje: abarca los siete paneles de arriba. Repetir la etiqueta dentro de cada perfil lo diría peor, porque ahí se leería como un servicio propio del perfil y no como el que aplica a cualquiera. */ .who--all{ display:flex;align-items:center;flex-wrap:wrap; gap:clamp(14px,1.8vw,26px); margin-top:clamp(8px,1vw,14px); padding:clamp(14px,1.5vw,20px) clamp(20px,2.2vw,34px); border:1px solid var(--line); background-color:rgba(242,240,234,.015); transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease); } .who--all:hover{ border-color:var(--ocre-soft); background-color:rgba(200,154,61,.04); } .who-all__ico{ width:clamp(26px,2.2vw,32px);height:auto;flex:none; color:var(--ocre);opacity:.6; transition:opacity var(--t) var(--ease); } .who--all:hover .who-all__ico{opacity:.9} /* En ocre como el resto de las etiquetas del sitio (QUÉ HACEMOS, TAMBIÉN, SEGUINOS…). Estaba en gris apagado y era la única de su tipo que no seguía esa convención: además de costar leerla, se despegaba del sistema. */ .who-all__k{ font-family:var(--f-mono);font-size:10.5px;font-weight:300; letter-spacing:.24em;text-transform:uppercase;color:var(--ocre); } .who--all .who__tags{margin-top:0} /* ---------- 08 · PROYECTOS ---------- */ /* Placeholder */ .pj__ph{ position:absolute;inset:0;display:grid;place-items:center; background-image: linear-gradient(rgba(242,240,234,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(242,240,234,.028) 1px, transparent 1px); background-size:44px 44px; } .ph-plan{ width:56%;max-width:340px;height:auto; color:var(--cream);opacity:.10; transition:opacity var(--t-slow) var(--ease), transform 2.2s var(--ease); } /* ---------- 09 · PROCESO ---------- */ .sec--pr{background:var(--black-2)} /* La sección se clava mientras se completan los cinco puntos y recién después sigue el scroll. Solo en escritorio y con altura suficiente: más abajo la columna vertical no entra en pantalla y clavarla la rompería. */ @media (min-width:1025px) and (min-height:620px){ .sec--pr{padding-block:0} .pr__track{position:relative;height:calc(100vh + 120vh);height:calc(100svh + 120vh)} .pr__stage{ position:sticky;top:0; height:100vh;height:100svh; display:flex;flex-direction:column;justify-content:center; padding-top:var(--hdr-h-sm); } .pr__stage .sec__head{margin-bottom:clamp(38px,5.5vh,78px)} } .steps{ position:relative; display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(20px,2.4vw,44px); padding-top:64px; } /* La línea termina en el centro del último punto, no en el borde del bloque: --line-len lo mide el JS. Si no, el relleno sobraría a la derecha, donde ya no hay ninguna etapa. */ .steps__line{ position:absolute;top:0;left:0; width:calc(var(--line-len,1) * 100%);height:1px; background:var(--line); } /* el relleno lo maneja --progress, que el scroll actualiza de 0 a 1 */ .steps__line b{ position:absolute;inset:0;background:var(--ocre); transform:scaleX(var(--progress,0));transform-origin:left; transition:transform .22s linear; } .step{position:relative;padding-right:12px} .step__dot{ position:absolute;top:-68px;left:0; width:9px;height:9px;border-radius:50%; background:var(--black-2);border:1px solid var(--ocre-soft); transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease); } .step.is-on .step__dot{ background:var(--ocre);border-color:var(--ocre); transform:scale(1.2); } .step__n{ display:block; font-family:var(--f-accent); font-style:italic;font-weight:400; font-size:clamp(2.8rem,4.6vw,4.4rem);line-height:1;letter-spacing:-.012em; color:rgba(242,240,234,.13); margin-bottom:18px; transition:color var(--t-slow) var(--ease); } .step.is-on .step__n{color:var(--ocre)} .step__t{ font-family:var(--f-sans);font-weight:400; font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:rgba(242,240,234,.38);margin-bottom:12px; transition:color var(--t-slow) var(--ease); } .step.is-on .step__t{color:var(--white)} .step__d{ font-size:13.5px;line-height:1.75;max-width:26ch; color:rgba(242,240,234,.26); transition:color var(--t-slow) var(--ease); } .step.is-on .step__d{color:var(--txt)} /* ---------- 10 · SOBRE MÍ ---------- */ .me{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(38px,6vw,110px);align-items:center; } .me__visual{position:relative;padding:0 0 0 clamp(0px,1.6vw,26px)} .me__frame{ position:absolute;left:0;top:26px;bottom:52px;width:70%; border:1px solid var(--ocre-soft); pointer-events:none; } .me__fig{ position:relative;overflow:hidden; aspect-ratio:4/5;background:var(--grey); } .me__fig img{ width:100%;height:100%;object-fit:cover;object-position:52% 40%; /* la foto ya viene en blanco y negro: acá solo se asienta sobre el fondo oscuro y se levanta al pasar el mouse */ filter:contrast(1.06) brightness(.88); transform:scale(1.08); transition:transform 2.6s var(--ease), filter 1.6s var(--ease); } .me__visual.is-in .me__fig img{transform:scale(1)} .me__fig:hover img{filter:contrast(1.02) brightness(1)} .me__cap{ margin-top:18px; font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim); } .me__text{margin:clamp(26px,3vw,40px) 0 clamp(32px,3.6vw,46px);display:grid;gap:18px} .me__text p{font-size:15px;line-height:1.9;color:var(--txt);max-width:52ch} .me__text p:first-child{color:var(--cream)} /* ---------- 11 · CONTACTO ---------- */ .sec--ct{ position:relative;overflow:hidden; border-top:1px solid var(--line-soft); /* La foto del jardín al atardecer. Si se quita esta línea, el degradado de abajo vuelve a hacer de fondo. */ --ct-image:url("../../Media/contacto-jardin.jpg"); --ct-veil:1; background: radial-gradient(120% 90% at 78% 88%, rgba(200,154,61,.14) 0%, rgba(200,154,61,0) 55%), radial-gradient(90% 70% at 12% 6%, rgba(242,240,234,.05) 0%, rgba(242,240,234,0) 60%), linear-gradient(180deg,#0a0a0a,#060606); } .ct__bg{ position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--ct-image,none); background-size:cover;background-position:50% 55%; } .ct__bg::after{ content:"";position:absolute;inset:0; /* Más oscuro del lado del texto y más abierto del lado del formulario, que ya se protege solo con su panel translúcido. */ background:linear-gradient(100deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.88) 34%, rgba(8,8,8,.7) 66%, rgba(8,8,8,.76) 100%); opacity:var(--ct-veil,0); } /* Apilado a una columna, el degradado lateral deja de tener sentido: ahí el velo se reparte de arriba hacia abajo. */ @media (max-width:1024px){ .ct__bg::after{ background:linear-gradient(180deg, rgba(8,8,8,.9) 0%, rgba(8,8,8,.8) 40%, rgba(8,8,8,.88) 100%); } } .ct__art{ position:absolute;right:-6%;bottom:-16%; width:min(760px,62%);height:auto; color:var(--cream);opacity:.055; } .ct{ position:relative;z-index:1; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(48px,6vw,110px);align-items:start; } .ct__t{ font-family:var(--f-display); font-weight:400;font-size:clamp(2rem,4.2vw,3.7rem); line-height:1.04; color:var(--white);margin-bottom:26px; text-transform:uppercase;letter-spacing:-.005em; } .ct__sub{ font-size:clamp(15px,1.15vw,17px);line-height:1.85;color:var(--txt); margin-bottom:clamp(38px,4vw,56px); } .ct__sub em{ display:block; font-family:var(--f-accent);font-style:italic; font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.15;letter-spacing:-.012em; color:var(--ocre);margin-bottom:10px; } /* Alcance del estudio. Es un dato, no un titular: lleva el monoespaciado de las etiquetas pero apagado, para responder la duda del visitante de afuera sin pelearle el ocre al «Contacto» que encabeza la columna. La raya sí va en ocre: es lo único que separa el origen del alcance. */ .ct__place{ font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.24em;text-transform:uppercase; color:var(--txt-dim); margin-bottom:clamp(30px,3.2vw,44px); } .ct__place span{color:var(--ocre);margin:0 .35em} /* El horario va pegado a la línea de Buenos Aires, como una sola pieza de datos prácticos: el margen grande queda recién debajo del horario. Vale para todos los canales, por eso va acá y no junto al botón del formulario. «Hábiles» a propósito: quien escribe un viernes a la noche y recibe respuesta el lunes no siente que no se cumplió. */ .ct__place:has(+ .ct__hours){margin-bottom:10px} /* En los teléfonos más angostos (390px o menos) no entra en un renglón y quedaba «HÁBILES» solo abajo. Cada frase va entera: si hay que cortar, corta en el punto. */ .ct__place .ct__nb{color:inherit;margin:0;white-space:nowrap} /* La bajada abre paso: sin esto los dos márgenes se suman y la línea queda flotando lejos de todo. */ .ct__sub:has(+ .ct__place){margin-bottom:24px} .ct__links{display:grid;gap:0;max-width:440px} .ct__links li{border-top:1px solid var(--line-soft)} .ct__links li:last-child{border-bottom:1px solid var(--line-soft)} .ct__links a{ display:flex;align-items:center;gap:18px; padding:14px 0; font-size:14px;color:var(--cream); transition:color var(--t-fast) var(--ease), transform var(--t) var(--ease); } .ct__links a:hover{color:var(--ocre);transform:translateX(6px)} /* Los iconos son PNG blancos sobre transparente: se atenúan al reposo y suben a blanco pleno con el hover de la fila. */ .ct__ico{ flex:none;width:20px;height:20px; opacity:.5; transition:opacity var(--t) var(--ease); } .ct__links a:hover .ct__ico{opacity:1} /* Formulario */ .form{ background:rgba(17,17,17,.62); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid var(--line-soft); padding:clamp(28px,3vw,46px); } .form__k{ font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.28em;text-transform:uppercase;color:var(--ocre); margin-bottom:clamp(24px,2.4vw,34px); } .fld{position:relative;margin-bottom:26px} .fld label{ display:block; font-family:var(--f-mono);font-size:9.5px;font-weight:300; letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim); margin-bottom:10px; transition:color var(--t-fast) var(--ease); } .fld:focus-within label{color:var(--ocre)} .fld input,.fld select,.fld textarea{ width:100%; font-family:var(--f-sans);font-weight:400;font-size:14.5px; color:var(--cream);background:transparent; border:0;border-bottom:1px solid var(--line); border-radius:0; padding:9px 0; transition:border-color var(--t) var(--ease); -webkit-appearance:none;appearance:none; } .fld textarea{resize:vertical;min-height:76px;line-height:1.7} .fld select{ color:var(--cream);cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--txt-dim) 50%),linear-gradient(135deg,var(--txt-dim) 50%,transparent 50%); background-position:calc(100% - 9px) 18px, calc(100% - 4px) 18px; background-size:5px 5px,5px 5px;background-repeat:no-repeat; } .fld select option{background:var(--black-2);color:var(--cream)} .fld input::placeholder,.fld textarea::placeholder{color:rgba(242,240,234,.24)} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--ocre)} .fld.has-error input,.fld.has-error select,.fld.has-error textarea{border-bottom-color:rgba(200,90,60,.75)} /* trampa antispam de Formspree: invisible para personas, visible para bots */ #f-pot{display:none} .form__send{width:100%;margin-top:10px} .form__note{ min-height:20px;margin-top:16px; font-family:var(--f-mono);font-size:10.5px;font-weight:300; letter-spacing:.12em;color:var(--txt-dim); } .form__note.is-ok{color:var(--ocre)} /* ---------- 12 · FOOTER ---------- */ .ft{padding:clamp(64px,7vw,110px) var(--px) 34px;border-top:1px solid var(--line-soft);background:var(--black)} .ft__top{ display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(38px,5vw,80px); padding-bottom:clamp(48px,5vw,76px); } /* Misma tipografía que la bajada del hero: mono, versalitas, mismo cuerpo. La comparten el pie y el menú de pantalla completa. */ .ft__slogan,.menu__slogan{ font-family:var(--f-mono);font-weight:400; font-size:clamp(10.5px,.82vw,12px); letter-spacing:.22em;text-transform:uppercase; color:rgba(242,240,234,.64); } .ft__slogan{margin-top:18px} /* En el pie va como ficha del estudio, más chico que el lema y por debajo. */ .ft__place{ margin-top:11px; font-family:var(--f-mono);font-size:9.5px;font-weight:300; letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim); } .ft__place span{color:var(--ocre);margin:0 .3em} .ft__k{ font-family:var(--f-mono);font-size:9.5px;font-weight:300; letter-spacing:.28em;text-transform:uppercase;color:var(--ocre); margin-bottom:22px; } .ft__nav,.ft__social{display:flex;flex-direction:column;align-items:flex-start;gap:11px} .ft__nav a,.ft__social a{ font-size:13px;color:var(--txt); transition:color var(--t-fast) var(--ease), transform var(--t) var(--ease); } .ft__nav a:hover,.ft__social a:hover{color:var(--cream);transform:translateX(6px)} .ft__bar{ display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; padding-top:28px;border-top:1px solid var(--line-soft); font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.12em;color:var(--txt-dim); } /* ---------- 13 · MENÚ MOBILE ---------- */ .menu{ position:fixed;inset:0;z-index:90; background:rgba(8,8,8,.97); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); padding:calc(var(--hdr-h-sm) + 44px) var(--px) 44px; display:flex;flex-direction:column;justify-content:space-between;gap:40px; opacity:0;visibility:hidden; transition:opacity var(--t) var(--ease), visibility var(--t); overflow-y:auto; } .menu[hidden]{display:none} .menu.is-open{opacity:1;visibility:visible} .menu__nav{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,16px)} .menu__nav a{ display:flex;align-items:baseline;gap:18px; font-family:var(--f-display); font-weight:400;font-size:clamp(1.45rem,6.6vw,2.3rem);letter-spacing:-.03em; line-height:1.25;color:var(--cream); opacity:0;transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease), color var(--t-fast) var(--ease); } .menu.is-open .menu__nav a{opacity:1;transform:none} .menu.is-open .menu__nav a:nth-child(1){transition-delay:.10s} .menu.is-open .menu__nav a:nth-child(2){transition-delay:.16s} .menu.is-open .menu__nav a:nth-child(3){transition-delay:.22s} .menu.is-open .menu__nav a:nth-child(4){transition-delay:.28s} .menu.is-open .menu__nav a:nth-child(5){transition-delay:.34s} .menu.is-open .menu__nav a:nth-child(6){transition-delay:.40s} .menu.is-open .menu__nav a:nth-child(7){transition-delay:.46s} .menu__nav a:hover{color:var(--white)} .menu__nav em{ font-family:var(--f-mono);font-style:normal;font-size:10px;font-weight:300; letter-spacing:.18em;color:var(--ocre); } .menu__foot{ opacity:0;transform:translateY(16px); transition:opacity .9s var(--ease) .54s, transform .9s var(--ease) .54s; border-top:1px solid var(--line-soft);padding-top:30px; } .menu.is-open .menu__foot{opacity:1;transform:none} .menu__slogan{margin-top:24px} /* ============================================================ 14 · RESPONSIVE ============================================================ */ @media (max-width:1500px){ :root{--rail:40px} } @media (max-width:1340px){ .nav{display:none} .burger{display:block} .hdr__in{justify-content:space-between} .hdr__end{gap:26px} } @media (max-width:1240px){ .sheet{display:none} .svcs{grid-template-columns:repeat(3,minmax(0,1fr))} .svc{border-bottom:1px solid var(--line)} .svc:nth-child(3n){border-right:1px solid var(--line)} .svc:last-child{border-right:1px solid var(--line)} } @media (max-width:1024px){ :root{--hdr-h:84px} .hero__copy{max-width:min(680px,78%)} .sec__grid{grid-template-columns:1fr;align-items:start} .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding-top:0} .steps__line{top:0;left:3px;bottom:auto;right:auto;width:1px;height:calc(var(--line-len,1) * 100%)} .steps__line b{transform:scaleY(var(--progress,0));transform-origin:top} .step{grid-column:1/-1;padding:34px 0 34px 40px} .step__dot{top:44px;left:-1px} .step__n{margin-bottom:14px} .me{grid-template-columns:1fr;gap:clamp(38px,6vw,60px)} .me__visual{max-width:520px} .ct{grid-template-columns:1fr} .ct__art{width:min(520px,86%);right:-14%;opacity:.045} .ft__top{grid-template-columns:1fr 1fr;gap:44px} .ft__brand{grid-column:1/-1} } @media (max-width:860px){ .hdr__cta{display:none} .hero{min-height:100svh} .hero__copy{max-width:100%} .hero__veil{ background: linear-gradient(180deg, rgba(8,8,8,.72) 0%, rgba(8,8,8,.24) 26%, rgba(8,8,8,.42) 58%, rgba(8,8,8,.9) 100%), linear-gradient(90deg, rgba(8,8,8,.55), rgba(8,8,8,.2)); } /* El 58% estaba para correr el encuadre del video horizontal, que en una pantalla vertical se recortaba muy a la izquierda. Acá ahora entra el video vertical, que ya viene con el encuadre hecho. */ .hero__media video{object-position:center} .hero__in{padding-bottom:170px} .scroller{bottom:52px;flex-direction:row;align-items:center;gap:14px} .scroller span{writing-mode:horizontal-tb;letter-spacing:.3em} .scroller__line{width:70px;height:1px} .scroller__line b{width:24px;height:1px;top:0;animation-name:trickle-x} @keyframes trickle-x{ 0%{transform:translateX(-28px);opacity:0} 22%{opacity:1}78%{opacity:1} 100%{transform:translateX(76px);opacity:0} } .svcs{grid-template-columns:repeat(2,minmax(0,1fr))} .svc:nth-child(3n){border-right:0} .svc:nth-child(2n){border-right:1px solid var(--line)} .svc:last-child{grid-column:1/-1;border-right:1px solid var(--line)} /* En pantalla angosta la fila elástica no entra: siete columnas de 40px no son legibles. Pasa a acordeón vertical, con el nombre en horizontal y el cuerpo desplegándose. El alto lo mide el JS. */ .whos{flex-direction:column;height:auto;gap:0} /* Los filetes llegan al borde de la pantalla, igual que el fondo del perfil abierto. Con anchos distintos el desajuste se nota fila por fila, porque línea y banda se alternan. El de arriba es un ítem de 1px de la columna; los de cada fila van como pseudoelemento, para no mover los bordes de la caja ni el texto. */ .whos::before{ content:"";display:block;height:1px; background:var(--line); margin-inline:calc(var(--px) * -1); } .who{ flex:none;overflow:visible; border:0; background-color:transparent; } .who::after{ content:"";position:absolute;z-index:1; left:calc(var(--px) * -1); right:calc(var(--px) * -1); bottom:0;height:1px; background:var(--line); pointer-events:none; } .who:hover{background-color:transparent} .who.is-open, .who.is-open:hover{background-color:transparent} /* El fondo del perfil abierto se derrama hasta los bordes de la pantalla, igual que el velo de Servicios. Pintado sobre la caja del texto arrancaba pegado a la letra, porque acá abajo la fila no tiene relleno lateral. */ .who::before{ content:"";position:absolute;z-index:0; top:0;bottom:0; left:calc(var(--px) * -1); right:calc(var(--px) * -1); background:rgba(200,154,61,.04); opacity:0;pointer-events:none; transition:opacity var(--t) var(--ease); } .who.is-open::before{opacity:1} /* El contenido por encima del velo, o quedaría tapado. */ .who__n, .who__open{position:relative;z-index:1} .who__icon{z-index:1} .who__vert{display:none} .who__n{position:static;display:block;padding:24px 0 0} /* Apilado no hay panel angosto que centrar: el ícono se corre al margen derecho del renglón, que es el espacio que queda libre. */ .who__icon{ top:26px;left:auto;right:2px;transform:none; width:30px;opacity:.62;transition:opacity var(--t) var(--ease); } .who.is-open .who__icon, .who.is-open:hover .who__icon{left:auto;transform:none;opacity:1} .who__open{ position:static;padding:2px 0 0; opacity:1;transform:none;pointer-events:auto;transition:none; } .who.is-open .who__open{transition-delay:0s} .who__t{font-size:clamp(1.3rem,5.4vw,1.7rem)} .who__body{ overflow:hidden;max-height:0; transition:max-height var(--t) var(--ease), opacity var(--t) var(--ease); opacity:0; } .who.is-open .who__body{opacity:1} .who__d{max-width:100%;margin-top:12px} .who__tags{padding-bottom:26px} /* Apilado, los perfiles son renglones sin caja: la barra se alinea a ese ritmo en vez de convertirse en un recuadro suelto. */ .who--all{ margin-top:22px;padding:18px 0 0; border:0;border-top:1px solid var(--line-soft); background-color:transparent;gap:14px; } .who--all:hover{background-color:transparent;border-color:var(--line-soft)} .who-all__ico{width:26px;opacity:.62} .form{padding:28px 22px} } @media (max-width:620px){ :root{--hdr-h:74px;--hdr-h-sm:64px} body{font-size:15px} .brand__txt{font-size:10.5px;letter-spacing:.24em} .logo-mark{width:38px;height:38px} .hdr.is-stuck .logo-mark{width:34px;height:34px} /* En celular la primera línea es la que manda: con 9.4vw no entraba y se partía en tres. Este cuerpo la deja en una sola hasta en pantallas de 320px. */ .hero__title{font-size:clamp(1.45rem,7.4vw,2.6rem)} .hero__tag{font-size:11px;letter-spacing:.14em} .hero__sub{max-width:100%} .hero__cta{gap:18px;flex-direction:column;align-items:stretch} .hero__cta .cta--solid{width:100%} /* Apilados, los dos botones ocupan el ancho completo. El texto del segundo va centrado como el del primero: alineado a la izquierda dejaba su línea sobrando de un lado y los dos parecían responder a criterios distintos. */ .hero__cta .cta--ghost{justify-content:center} .svcs{grid-template-columns:1fr;border-top:0} .svc{ min-height:0;padding:26px 0 30px; border-left:0;border-right:0 !important;border-bottom:0; border-top:1px solid var(--line); } .svc:last-child{border-bottom:1px solid var(--line)} .svc::after{display:none} /* El velo crema se derrama hasta los bordes de la pantalla, como el fondo de «Nuestro proceso». Dentro de la caja de la tarjeta arrancaría pegado a la letra: acá abajo la tarjeta no tiene relleno lateral, así que el margen de la sección pasa a ser el aire del recuadro. */ .svc::before{ left:calc(var(--px) * -1); right:calc(var(--px) * -1); } /* La foto acompaña al velo hasta los bordes: si se quedara en la caja de la tarjeta, su borde caería justo donde empieza el texto. La sombra del número cambia de forma. Acá la tarjeta es ancha y baja, entra casi toda la foto y la ventana luminosa de SF Design cae justo detrás del «01»: con la sombra de escritorio, que se desvanece enseguida, quedaba en 2,65 de contraste aunque tuviera halo. Se sostiene pareja durante los primeros 40px —el renglón del número— y recién después se abre. Como es pareja alcanza con .5 en lugar de .6: el «01» queda en 6,2. El pie baja de .88 a .5 para que se vea la foto. Lo que ahí sufría era el botón dorado «Ver detalle», que bajaba a 3,7; con su propio halo (en el bloque táctil) se sostiene en 5,5. El tramo del título no se toca: es el que sostiene el «SF» dorado. */ .svc__foto{ --velo-tope:.5; --velo-bajo:.5; --velo-en-tope:40px; --velo-en-alto:58px; --velo-en-limpio:70px; left:calc(var(--px) * -1); right:calc(var(--px) * -1); } /* Acá la tarjeta no tiene relleno lateral, así que el ícono se alinea con el margen de la sección, igual que el texto. El margen del cuerpo vuelve a absorber lo que dejó de ocupar el ícono: 16 + 42 + 18. */ .svc__icon{width:42px;top:26px;right:0} .svc{--cuerpo-y:76px} .svc__d{max-width:38ch} .ft__top{grid-template-columns:1fr;gap:38px} .ft__bar{flex-direction:column;align-items:flex-start;gap:14px} .me__frame{display:none} .me__fig{aspect-ratio:3/4} } /* ============================================================ 15 · MOVIMIENTO REDUCIDO ============================================================ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0ms !important; } .js .reveal{opacity:1;transform:none} .hero__eyebrow,.hero__title .l1,.hero__title .l2,.hero__sub,.hero__cta,.scroller{opacity:1;transform:none} .hero__veil{opacity:1} .me__fig img,.flow__fig img{transform:none} .js .svc__icon > *{stroke-dashoffset:0} } /* Aviso de que las tarjetas se despliegan. En pantallas táctiles no hay cursor que pasar, así que ahí no tiene sentido mostrarlo. */ .svc-hint{ margin-top:clamp(18px,2vw,26px); display:flex;align-items:center;gap:12px; font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.2em;text-transform:uppercase; color:var(--txt-dim); } .svc-hint::before{ content:"";flex:0 0 clamp(18px,2.4vw,34px);height:1px; background:var(--ocre-soft); } @media (hover:none){ .svc-hint{display:none} } /* ---------- 06b · PANEL DE DETALLE DE SERVICIO ---------- Se abre debajo de la banda con el servicio sobre el que está el cursor. El alto se anima con grid-template-rows de 0fr a 1fr: es la única forma de que un alto automático transicione sin fijar un valor a mano. */ .svc-detail{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t) var(--ease); } .svc-detail.is-open{grid-template-rows:1fr} .svc-detail__clip{overflow:hidden;min-height:0} .svc-detail__in{ display:grid; grid-template-columns:minmax(180px,20%) minmax(0,1fr); gap:clamp(22px,3.4vw,64px); align-items:start; padding-top:clamp(30px,3.2vw,50px); margin-top:clamp(30px,3.2vw,50px); border-top:1px solid var(--line); } .svc-detail__n{ display:block; font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.24em;color:var(--ocre);margin-bottom:14px; } .svc-detail__k{ font-family:var(--f-sans);font-weight:400; font-size:17px;letter-spacing:.14em;text-transform:uppercase; color:var(--white);line-height:1.45;text-wrap:balance; } .svc-detail__k b{font-weight:500;color:var(--ocre)} /* El cuerpo admite dos formas: solo descripción, o descripción más listas. :has() detecta cuál llegó y reparte el ancho en consecuencia. */ .svc-detail__body{ display:grid;gap:clamp(24px,3vw,56px);align-items:start; opacity:0;transform:translateY(10px); transition:opacity var(--t) var(--ease), transform var(--t) var(--ease); } .svc-detail__body.is-in{opacity:1;transform:none} .svc-detail__body:has(.svc-more__cols){grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} .svc-more__lead p{ font-size:14px;line-height:1.8;color:var(--txt); margin-bottom:1.15em; } .svc-more__lead p:last-child{margin-bottom:0} /* Sin listas al lado, la descripción sola quedaría en una medida larguísima: ahí se reparte en dos columnas. */ .svc-detail__body:not(:has(.svc-more__cols)) .svc-more__lead{ columns:2;column-gap:clamp(26px,3.2vw,60px); } .svc-detail__body:not(:has(.svc-more__cols)) .svc-more__lead p{break-inside:avoid} .svc-more__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(clamp(140px,14vw,200px),1fr)); gap:clamp(20px,2.4vw,44px); } .svc-more__k{ font-family:var(--f-mono);font-size:9.5px;font-weight:300; letter-spacing:.2em;text-transform:uppercase;color:var(--ocre); padding-bottom:11px;margin-bottom:14px; border-bottom:1px solid var(--line-soft); } .svc-more__col ul{display:grid;gap:8px} .svc-more__col li{font-size:13.5px;line-height:1.5;color:var(--txt)} @media (max-width:1024px){ .svc-detail__in{grid-template-columns:1fr;gap:22px} .svc-detail__body:has(.svc-more__cols){grid-template-columns:1fr} } @media (max-width:620px){ .svc-detail__body:not(:has(.svc-more__cols)) .svc-more__lead{columns:1} .svc-more__cols{grid-template-columns:1fr} } /* ---------- 06c · SERVICIOS EN TÁCTIL ---------- Sin cursor no hay hover, así que el panel compartido no sirve: cada tarjeta despliega su propio detalle con un botón. */ .svc__more{display:none} .svc__toggle{display:none} @media (hover:none){ .svc-detail{display:none} /* «ORIENTADO A» y «RESULTADO» quedaban ilegibles acá. El color ya tiene contraste de sobra; lo que fallaba era el trazo: un Light a 9,5px se afina tanto que la pantalla no llega a dibujarlo. Peso 500 real —por eso el HTML carga ese peso de la fuente, si no el navegador finge la negrita y a este cuerpo sale sucia— y un punto más grande. En escritorio van sobre fondo oscuro, donde el trazo fino sí se sostiene, y no se tocan. */ .svc-more__k{font-weight:500;font-size:10.5px} .svc__toggle{ /* Capa propia, o el velo crema del negativo le pasa por encima y se come la palabra: el signo sobrevive porque está posicionado, el texto no. */ position:relative;z-index:1; display:inline-flex;align-items:center;gap:11px; margin-top:22px;padding:9px 0; font-family:var(--f-mono);font-size:10.5px;font-weight:500; letter-spacing:.2em;text-transform:uppercase; color:var(--ocre); /* Cae en el pie de la tarjeta, sobre la foto: lleva el mismo halo que el número. Al abrir la tarjeta se apaga con los demás (is-open). */ text-shadow:var(--halo-n); transition:text-shadow var(--t) var(--ease); } /* El signo pasa de + a − al abrirse */ .svc__toggle i{position:relative;flex:none;width:11px;height:11px} .svc__toggle i::before,.svc__toggle i::after{ content:"";position:absolute;background:var(--ocre); transition:transform var(--t) var(--ease); } .svc__toggle i::before{left:0;right:0;top:5px;height:1px} .svc__toggle i::after{top:0;bottom:0;left:5px;width:1px} .svc.is-open .svc__toggle i::after{transform:scaleY(0)} /* El alto lo fija el JS con la medida real, así la apertura y el cierre duran lo mismo sin importar cuánto texto tenga cada servicio. */ .svc__more{ display:block; max-height:0;overflow:hidden;opacity:0; transition:max-height var(--t) var(--ease), opacity var(--t) var(--ease); } .svc.is-open .svc__more{opacity:1} .svc__more .svc-more__lead{padding-top:20px} .svc__more .svc-more__cols{margin-top:26px;grid-template-columns:1fr;gap:24px} .svc__more .svc-more__lead p{font-size:14px} } /* Al tocar, los navegadores móviles dejan el :hover pegado hasta el siguiente toque: la tarjeta quedaría invertida sin motivo. Acá se anula y el estado activo lo marca el botón, que pasa a «Cerrar». */ @media (hover:none){ /* La clase de tarjeta activa es de escritorio: en táctil el estado lo marca is-open, así que acá se neutraliza igual que el :hover pegado. */ .svc.is-active::before, .svc:hover::before{opacity:0} .svc.is-active::after, .svc:hover::after{transform:scaleY(0)} .svc.is-active .svc__rule, .svc:hover .svc__rule{transform:scaleX(0)} /* El halo vuelve con el :hover pegado, porque la tarjeta sigue sobre la foto; lo apaga solo el negativo de is-open, más abajo. */ .svc.is-active, .svc:hover{ --halo-n:var(--halo-n-foto); --halo-t:var(--halo-t-foto); } .svc.is-active .svc__n, .svc:hover .svc__n{color:var(--txt-foto);letter-spacing:.24em} .svc.is-active .svc__icon, .svc:hover .svc__icon{color:var(--ocre);opacity:0;transform:none} .svc.is-active .svc__t, .svc:hover .svc__t{transform:none;color:var(--white)} .svc:hover .svc__t b{color:var(--ocre)} .svc.is-active .svc__d, .svc:hover .svc__d{color:var(--txt-foto);transform:none} /* Al abrir, la tarjeta pasa a negativo: lo mismo que hace el cursor en escritorio. Va después de las reglas que anulan el :hover pegado porque tienen la misma especificidad y gana la última. */ .svc.is-open::before{opacity:1} .svc.is-open{--halo-n:none;--halo-t:none} .svc.is-open::after{transform:scaleY(1);background:var(--ocre-deep)} .svc.is-open .svc__n{color:var(--ocre-ink);letter-spacing:.34em} .svc.is-open .svc__icon{color:var(--ocre-deep);opacity:1;transform:translateY(-6px)} /* Sin cursor, el trazo se dibuja al desplegar la tarjeta. */ .js .svc.is-open .svc__icon > *{stroke-dashoffset:0} .svc.is-open .svc__rule{transform:scaleX(1);background:var(--ocre-deep)} .svc.is-open .svc__t{color:var(--black)} .svc.is-open .svc__t b{color:var(--ocre-ink)} .svc.is-open .svc__d{color:rgba(8,8,8,.66)} /* Y el contenido desplegado, o quedaría texto claro sobre crema. */ .svc.is-open .svc-more__lead p, .svc.is-open .svc-more__col li{color:rgba(8,8,8,.72)} .svc.is-open .svc-more__k{color:var(--ocre-ink);border-bottom-color:rgba(8,8,8,.14)} .svc.is-open .svc__toggle{color:var(--ocre-ink)} .svc.is-open .svc__toggle i::before, .svc.is-open .svc__toggle i::after{background:var(--ocre-ink)} .svc.is-open .cta--ghost{color:rgba(8,8,8,.78)} .svc.is-open .cta--ghost::after{background:rgba(8,8,8,.18)} .svc.is-open .cta--ico img{filter:invert(1)} } /* Las piezas laterales se derraman a propósito hasta el borde de la pantalla. El recorte va acá y no en el body: Safari en iOS ignora el overflow-x del body y deja la página desplazable a lo ancho. El relleno horizontal está dentro de la caja, así que esto recorta justo en el borde del viewport. */ .sec--pj{overflow:hidden} /* ---------- 08b · CARRUSEL COVERFLOW DE PROYECTOS ---------- Una pieza de frente y las vecinas girando hacia atrás en perspectiva. El avance es siempre manual: flechas, teclado, swipe o clic en una lateral. */ .flow{ --card-w:clamp(260px,42vw,560px); position:relative; height:calc(var(--card-w) / 1.5); perspective:1600px; outline:none; } .flow:focus-visible{outline:1px solid var(--ocre);outline-offset:22px} /* Fondo ambiental: la pieza activa, desenfocada y muy oscurecida. Aparece cuando las piezas tengan foto real; con los placeholders queda apagado. */ .flow__amb{ position:absolute;left:50%;top:50%; width:100vw;height:150%;z-index:0;pointer-events:none; transform:translate(-50%,-50%); background-position:center;background-size:cover; filter:brightness(.2) blur(38px); opacity:0;transition:opacity 1.2s var(--ease); } .flow__amb.is-on{opacity:1} .flow__stage{position:absolute;inset:0;z-index:1;transform-style:preserve-3d} .flow__item{ position:absolute;left:50%;top:0; width:var(--card-w);aspect-ratio:3/2; margin-left:calc(var(--card-w) / -2); transform-origin:center center; opacity:0;z-index:0;pointer-events:none; transform:scale(.45); transition:transform 1.1s var(--ease), opacity 1.1s var(--ease), filter 1.1s var(--ease); } .flow__item[data-pos="0"]{transform:none;opacity:1;z-index:30;filter:none} .flow__item[data-pos="1"], .flow__item[data-pos="-1"]{opacity:.62;z-index:20;filter:brightness(.6);pointer-events:auto;cursor:pointer} .flow__item[data-pos="2"], .flow__item[data-pos="-2"]{opacity:.3;z-index:10;filter:brightness(.42) blur(1px);pointer-events:auto;cursor:pointer} .flow__item[data-pos="1"]{transform:translateX(calc(var(--card-w) * .60)) scale(.82) rotateY(-26deg)} .flow__item[data-pos="-1"]{transform:translateX(calc(var(--card-w) * -.60)) scale(.82) rotateY(26deg)} .flow__item[data-pos="2"]{transform:translateX(calc(var(--card-w) * .99)) scale(.64) rotateY(-40deg)} .flow__item[data-pos="-2"]{transform:translateX(calc(var(--card-w) * -.99)) scale(.64) rotateY(40deg)} .flow__item[data-pos]:not([data-pos="0"]):hover{opacity:.88;filter:brightness(.82)} .flow__fig{ position:relative;width:100%;height:100%;overflow:hidden; background:linear-gradient(155deg,#16161660,#0b0b0b); border:1px solid var(--line); } .flow__fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.03)} .flow .ph-plan{width:46%;max-width:300px;opacity:.12;transition:none} /* Flechas de filete fino, sin círculo ni desenfoque */ .flow__nav{ position:absolute;top:50%;z-index:40; width:clamp(44px,4vw,58px);height:clamp(44px,4vw,58px); transform:translateY(-50%); display:flex;align-items:center;justify-content:center; border:1px solid var(--line); color:var(--cream); transition:color var(--t-fast) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease); } .flow__nav svg{width:22px;height:auto} .flow__nav--prev{left:0} .flow__nav--next{right:0} .flow__nav:hover{color:var(--ocre);border-color:var(--ocre-soft);background-color:rgba(200,154,61,.08)} /* Pie: la ficha de la pieza activa a la izquierda, el contador a la derecha */ .flow__bar{ display:flex;align-items:flex-end;justify-content:space-between; gap:clamp(24px,4vw,70px);flex-wrap:wrap; margin-top:clamp(34px,3.8vw,60px); padding-top:clamp(22px,2.4vw,34px); border-top:1px solid var(--line); } /* La ficha se reemplaza de una pieza a la otra, así que el cruce tiene tiempo propio y no la curva larga del sitio: con 0,9 s el texto entrante tardaba casi un segundo en asentarse y se leía encimado al anterior. El desplazamiento mínimo deja claro que es una ficha nueva y no la misma corrigiéndose. */ .flow__meta{ display:flex;align-items:baseline;gap:clamp(16px,2vw,30px); transition:opacity .34s var(--ease-soft), transform .34s var(--ease-soft); } .flow__meta.is-out{opacity:0;transform:translateY(7px)} .flow__n{ font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.24em;color:var(--ocre);flex:none; } .flow__t{ font-family:var(--f-display);font-weight:400; font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.028em; line-height:1.15;color:var(--white); } .flow__c{ font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim); margin-top:9px; } .flow__count{ display:flex;align-items:center;gap:14px; font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.2em;color:var(--txt-dim); } .flow__count #flowIdx{color:var(--ocre)} .flow__rail{display:block;position:relative;width:clamp(80px,12vw,180px);height:1px;background:var(--line)} .flow__rail i{ position:absolute;top:0;left:0;height:1px;width:20%; background:var(--ocre); transition:width var(--t) var(--ease), left var(--t) var(--ease); } @media (max-width:860px){ .flow{--card-w:clamp(230px,68vw,420px)} /* En pantalla angosta las piezas lejanas solo ensucian: se ocultan, y las vecinas se acercan y giran menos, para insinuar que hay más sin competir con la que se está mirando. */ .flow__item[data-pos="2"], .flow__item[data-pos="-2"]{opacity:0;pointer-events:none} .flow__item[data-pos="1"]{transform:translateX(calc(var(--card-w) * .56)) scale(.86) rotateY(-18deg);opacity:.34} .flow__item[data-pos="-1"]{transform:translateX(calc(var(--card-w) * -.56)) scale(.86) rotateY(18deg);opacity:.34} .flow__nav{width:40px;height:40px;border-color:var(--line-soft);background-color:rgba(8,8,8,.5)} .flow__nav svg{width:18px} /* Ficha y contador bajo el mismo eje que la pieza central */ .flow__bar{flex-direction:column;align-items:center;gap:20px;text-align:center} .flow__meta{flex-direction:column;align-items:center;gap:8px} .flow__count{justify-content:center} } /* ---------- 08c · VISOR AMPLIADO ---------- Se abre al hacer clic en la pieza que está al frente. */ .lb{ position:fixed;inset:0;z-index:150; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:clamp(20px,2.6vw,38px); padding:clamp(56px,7vw,96px) clamp(20px,6vw,110px); background:rgba(8,8,8,.965); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); opacity:0;visibility:hidden; transition:opacity var(--t) var(--ease), visibility var(--t); } .lb[hidden]{display:none} .lb.is-open{opacity:1;visibility:visible} .lb__fig{ position:relative; width:min(92vw,1400px); aspect-ratio:3/2;max-height:72vh; background:linear-gradient(155deg,#16161660,#0b0b0b); border:1px solid var(--line); opacity:0;transform:scale(.975); transition:opacity var(--t) var(--ease), transform var(--t) var(--ease); } .lb.is-open .lb__fig{opacity:1;transform:none} /* contain y no cover: en el visor no se recorta nada de la foto */ .lb__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} .lb__cap{ display:flex;align-items:baseline;gap:clamp(16px,2vw,30px); width:min(92vw,1400px); opacity:0;transition:opacity var(--t) var(--ease) .1s; } .lb.is-open .lb__cap{opacity:1} .lb__n{ font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.24em;color:var(--ocre);flex:none; } .lb__t{ font-family:var(--f-display);font-weight:400; font-size:clamp(1.2rem,1.9vw,1.7rem);letter-spacing:-.028em; line-height:1.15;color:var(--white); } .lb__c{ font-family:var(--f-mono);font-size:10px;font-weight:300; letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim); margin-top:8px; } .lb__close,.lb__nav{ position:absolute;z-index:2; display:flex;align-items:center;justify-content:center; border:1px solid var(--line); color:var(--cream); transition:color var(--t-fast) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease); } .lb__close:hover,.lb__nav:hover{ color:var(--ocre);border-color:var(--ocre-soft); background-color:rgba(200,154,61,.08); } .lb__close{top:clamp(20px,3vw,42px);right:clamp(20px,3vw,42px);width:46px;height:46px} .lb__close svg{width:20px;height:20px} .lb__nav{top:50%;transform:translateY(-50%);width:clamp(42px,3.6vw,54px);height:clamp(42px,3.6vw,54px)} .lb__nav svg{width:20px;height:auto} .lb__nav--prev{left:clamp(12px,2.4vw,42px)} .lb__nav--next{right:clamp(12px,2.4vw,42px)} /* La pieza del frente: los clics vienen desactivados desde la regla base de .flow__item, así que hay que reactivarlos acá para que abra el visor. */ .flow__item[data-pos="0"]{pointer-events:auto;cursor:zoom-in} @media (max-width:860px){ .lb{padding:clamp(64px,12vw,90px) 16px} .lb__fig,.lb__cap{width:100%} .lb__fig{max-height:56vh} .lb__nav{top:auto;bottom:clamp(18px,5vw,34px);transform:none} } /* ---------- 08d · EN MOVIMIENTO ---------- Videos verticales entre el carrusel y «Portfolio completo». Cada tarjeta muestra un adelanto mudo en loop —que corre solo mientras se ve, lo maneja main.js— y al tocarla abre el video completo con sonido. Los videos van alojados en el sitio, en Media/promo/: sin YouTube no hay marca ajena ni recomendaciones al terminar. Los completos no se descargan hasta que alguien toca play. */ .mov{ margin-top:clamp(46px,5vw,84px); padding-top:clamp(26px,2.8vw,42px); border-top:1px solid var(--line-soft); display:grid;grid-template-columns:minmax(0,1fr) auto; gap:clamp(30px,5vw,90px);align-items:center; } .mov__h{margin:clamp(18px,2vw,26px) 0 clamp(16px,1.6vw,22px)} .mov__d{font-size:14px;line-height:1.75;color:var(--txt);max-width:40ch} /* El aviso «Deslizá…» solo existe donde la fila se desliza (ver ≤860px). */ .mov-hint{display:none} /* align-items:start porque un