/* ========================================================================== ALCAR STUDIO — hoja principal -------------------------------------------------------------------------- 1. Reset y base 2. Polaridad y utilidades 3. Fondo del hero: tunel WebGL + capa CRT (confinados al hero) 4. Nav y menu movil 5. Hero ← INTOCABLE: traduccion literal de los style="" originales 6. Revelados y marquee 7. Movimiento reducido ========================================================================== */ /* ========================================================================== 1. RESET Y BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* El color del documento lo pinta , no : el canvas del tunel va a z-index -1 y un fondo propio en lo dejaria invisible. Literal del original — cambiarlo apagaria el tunel del hero. */ background: var(--color-night); -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body { background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: var(--lh-body); /* overflow-x SOLO en body: en html corta el scroll del viewport. Y `clip` en lugar de `hidden` por precaucion: `hidden` convierte al en contenedor de scroll, lo que rompe position:sticky en sus descendientes. Comprobado que aqui NO era la causa del carril que se despegaba (lo era la caja de contenido del contenedor, ver motion.js), pero `clip` recorta igual sin crear contenedor y evita la trampa. */ overflow-x: clip; -webkit-font-smoothing: antialiased; } img, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Foco visible en todo control (brief §9). El anillo usa --accent, que ya esta calibrado por polaridad: 6.14 sobre noche, 6.21 sobre papel. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; top: 0; left: 0; z-index: 999; padding: 0.75rem 1.25rem; background: var(--color-brand); color: var(--color-night); font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--ls-wide); transform: translateY(-120%); transition: transform var(--dur-micro) var(--ease); } .skip-link:focus { transform: translateY(0); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== 2. POLARIDAD Y UTILIDADES ========================================================================== */ /* Toda seccion por debajo del hero pinta su propio fondo opaco: es lo que tapa el canvas fijo del tunel al salir de la portada. */ .section { position: relative; z-index: 1; background: var(--bg); color: var(--ink); padding: var(--space-xl) var(--pad); } .wrap { width: min(100%, var(--wrap)); margin-inline: auto; } .eyebrow { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--muted); } .section-title { margin-top: clamp(2rem, 4vw, 3.25rem); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); font-size: var(--step-3); font-weight: 400; /* grande y ligero, no grande y bold (Collins) */ line-height: var(--lh-snug); letter-spacing: -0.02em; max-width: 22ch; } .section-marker { display: flex; align-items: flex-start; gap: 1.5rem; overflow: hidden; } .section-marker__num { font-family: var(--font-sans); font-weight: 300; font-size: clamp(3.5rem, 9vw, 7rem); line-height: 0.78; letter-spacing: -0.055em; color: var(--accent); /* Sube desde debajo de su propia caja, recortado por el overflow del padre: el numero de seccion es el elemento de marca mas repetido de la pagina y entraba plano. */ display: inline-block; transform: translateY(100%); transition: transform 900ms var(--ease); } .section-marker.is-visible .section-marker__num { transform: none; } .section-marker__label { opacity: 0; transition: opacity 700ms var(--ease) 160ms; } .section-marker.is-visible .section-marker__label { opacity: 1; } .section-marker__label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.66rem; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; margin-top: 0.35rem; } /* ========================================================================== 3. FONDO DEL HERO — tunel WebGL + capa CRT -------------------------------------------------------------------------- DECISION (brief §4, documentada en DISENO.md §4): los dos se confinan al viewport del hero y se desvanecen al salir de el, en vez de acompanar a todas las secciones. Con el sistema de polaridad no es una concesion: la textura PERTENECE a la polaridad noche, asi que muere donde muere el negro. La capa CRT tiene que seguir estando sobre el hero o este dejaria de ser indistinguible del original — por eso se desvanece en lugar de borrarse. ========================================================================== */ #neural-tunnel { position: fixed; inset: 0; z-index: var(--z-tunnel); display: block; width: 100%; height: 100%; pointer-events: none; } #crt-layer { position: fixed; inset: 0; z-index: var(--z-crt); pointer-events: none; } /* --hero-veil lo mueve js/motion.js segun cuanto queda de hero en pantalla: 1 dentro del hero, 0 fuera. Sin JS se queda en 1 y todo sigue como estaba. El monograma 3D entra en el mismo velo, y no solo por coherencia: es una pieza CROMADA, pensada para leerse sobre negro. Al pasar el cuerpo a papel se quedaba como un borron gris de bajo contraste flotando sobre la crema. El original tampoco lo anclaba bien dentro de la barra —queda por debajo, verificado— asi que no se esta perdiendo un anclaje que funcionase. Dentro del hero el velo vale 1: §4 no se toca. */ /* [data-hero3d] SALE del velo: el cliente quiere el monograma cromado visible tambien fuera del hero (24-08-2026). El tunel y la capa CRT si siguen muriendo con la portada. */ #neural-tunnel, #crt-layer { transition: opacity var(--dur-ui) linear; } #crt-layer .scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px); mix-blend-mode: multiply; opacity: .5; } #crt-layer .sweep { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0px, transparent 2px, transparent 5px); mix-blend-mode: screen; opacity: .4; } #crt-layer .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 78% 78% at 50% 50%, transparent 58%, rgba(0,0,0,.55) 100%); } #crt-layer .glow { position: absolute; inset: 0; box-shadow: inset 0 0 140px rgba(0,0,0,.6); } #crt-layer .flicker { position: absolute; inset: 0; background: #fff; opacity: 0; animation: crtFlicker 6.5s infinite steps(1); } @keyframes crtFlicker { 0%,96%,100% { opacity: 0; } 97% { opacity: .025; } 98% { opacity: 0; } 99% { opacity: .015; } } /* ========================================================================== 3b. PRELOADER -------------------------------------------------------------------------- RESTAURADO a peticion del cliente (24-08-2026). Yo lo habia quitado por rendimiento — retrasa el LCP en la web que vende LCP — y la decision del cliente lo devuelve. Queda anotado en PROYECTO.md como enmienda. CSS literal del original, sin tocar valores. ========================================================================== */ /* Preloader — copiado literal de la demo alcar-preloadyhero.html. El logo sube a clamp(5.5rem, 20vw, 15rem), el pase baja a 2.4s y el relleno de la barra se queda solo en 3.6s para cerrar mas pausado. La "A" y la "S" dejan de ser color plano: cromado real por background-clip:text con un unico pico de luz que pasa por el trazo una vez hacia el final (al-a-glint / al-s-glint), y lo mismo para el relleno magenta (al-bar-glint). Colores del asset de marca, no los tokens del sitio. */ .preload-ui { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 50% 48%, rgba(255,51,204,.055), transparent 55%), #0b0b0c; will-change:opacity, filter; transition: opacity 460ms cubic-bezier(0.55,0,0.2,1), filter 460ms cubic-bezier(0.55,0,0.2,1); } .preload-ui.is-out { opacity:0; filter:blur(16px); pointer-events:none; } .al-logo { position:relative; font-family:'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:900; line-height:1; font-size:clamp(5.5rem, 20vw, 15rem); width:5.625em; height:2.875em; } .al-lcar { position:absolute; left:50%; top:50%; transform: translate(0,-50%) translate(-1.5222em,-0.6444em); font-size:.5625em; letter-spacing:.3em; white-space:nowrap; color:#F2F0ED; animation: al-lcar-trim 2.4s cubic-bezier(0.55,0,0.2,1) both; } .al-studio { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%) translate(4em,1.5122em); font-size:.25625em; letter-spacing:.42em; padding-left:.42em; white-space:nowrap; color:#FF3ACF; animation: al-studio-trim 2.4s linear both; } .al-a, .al-s { position:absolute; left:50%; top:50%; z-index:2; background-image: linear-gradient(100deg, #9a9a9a 0%, #c4c4c4 22%, #ffffff 50%, #c4c4c4 78%, #9a9a9a 100%); background-size: 420% 100%; background-position: 145% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .al-a { animation: al-a-trim 2.4s cubic-bezier(0.5,0,0.2,1) both, al-a-glint 2.4s linear both; } .al-s { transform: translate(-50%,-50%) translate(.413em,0); animation: al-write-trim 2.4s cubic-bezier(0.5,0,0.25,1) both, al-s-glint 2.4s linear both; } .al-bar-wrap { position:absolute; left:50%; top:50%; z-index:3; margin:-.425em 0 0 -.025em; width:.05em; height:.85em; animation: al-bar-trim 2.4s cubic-bezier(0.3,0.9,0.2,1) both; } .al-track { position:absolute; inset:0; background:#2a2a2e; } .al-fill-bar { position:absolute; left:0; right:0; bottom:0; background-image: linear-gradient(100deg, #ff33cc 0%, #ff33cc 40%, #ffb8ec 50%, #ff33cc 60%, #ff33cc 100%); background-size: 220% 100%; background-position: 100% 50%; animation: al-fill-trim 3.6s linear both, al-bar-glint 3.6s linear both; } @keyframes al-a-trim { 0% { opacity:0; transform: translate(-50%,-50%) translate(-1.225em,-0.363em) scale(0.561); } 4%, 18% { opacity:1; transform: translate(-50%,-50%) translate(-1.225em,-0.363em) scale(0.561); } 30%, 100% { opacity:1; transform: translate(-50%,-50%) translate(-0.438em,0) scale(1); } } @keyframes al-lcar-trim { 0%{opacity:0;} 6%,18%{opacity:1;} 27%,100%{opacity:0;} } @keyframes al-studio-trim { 0%,8%{opacity:0;} 13%,18%{opacity:1;} 27%,100%{opacity:0;} } @keyframes al-write-trim { 0%,30%{clip-path:inset(0 100% 0 0);opacity:1;} 40%,100%{clip-path:inset(0 0 0 0);opacity:1;} } @keyframes al-bar-trim { 0%,40%{transform:rotate(15deg) scale(1,0);opacity:1;} 46%,100%{transform:rotate(15deg) scale(1,1);opacity:1;} } @keyframes al-fill-trim { 0%,46%{height:0;} 100%{height:100%;} } @keyframes al-a-glint { 0%,55%{background-position:145% 50%;} 82%{background-position:-45% 50%;} 100%{background-position:-45% 50%;} } @keyframes al-s-glint { 0%,60%{background-position:145% 50%;} 87%{background-position:-45% 50%;} 100%{background-position:-45% 50%;} } @keyframes al-bar-glint { 0%,65%{background-position:100% 50%;} 92%{background-position:-60% 50%;} 100%{background-position:-60% 50%;} } /* ---------- Ancla del logo en el nav ---------- El monograma 3D se ancla aqui al hacer scroll. Necesita ocupar sitio de verdad: con un ancla de 1x1 px el logo quedaba centrado justo donde empieza "ALCAR STUDIO" y se le montaba encima. 44x28 reserva su hueco y el gap del wordmark hace el resto. */ /* 19-09-2026: de 44x28 a 54x36 a peticion del cliente. La caja crece con la pieza: el ancho reserva su hueco —si no, se monta sobre la A— y el alto es lo que la centra, porque con align-self:center la fila de la marca se dimensiona por el elemento mas alto y el wordmark se centra respecto a el. El 36 va tambien en js/hero-3d.js, que es quien escala el monograma al anclarlo. */ #logo-dock { width: 54px; height: 36px; align-self: center; } /* Por debajo de 900px no hay logo 3D (js/hero-3d.js se va a su respaldo estatico), asi que el hueco reservado sobra. */ /* 04-09-2026: ya no se oculta — el 3D corre tambien en movil. */ /* ---------- CTA de presupuesto del hero ---------- Los atributos style-hover del export son papel mojado: ni support.js ni enhance.js los leen. El hover va aqui, en CSS de verdad. */ /* CTA primario: magenta macizo, el mismo tratamiento que el sitio ya da al boton de presupuesto en el menu movil y en la seccion de contacto. En version outline se perdia contra el tunel — parecia deshabilitado. El "VER EL TRABAJO" se queda en outline, y asi hay jerarquia: uno primario y otro secundario en lugar de dos pildoras iguales. */ .hero-quote { cursor: inherit; box-shadow: 0 4px 18px rgba(255, 51, 204, 0.28); transition: background 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 240ms cubic-bezier(0.16, 1, 0.3, 1); } .hero-quote-arrow { transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); } .hero-quote:hover, .hero-quote:focus-visible { background: #ff5cd6; box-shadow: 0 8px 30px rgba(255, 51, 204, 0.45); transform: translateY(-2px); } .hero-quote:hover .hero-quote-arrow { transform: translateX(4px); } .hero-quote:active { transform: translateY(0); } /* Por debajo de 620px chocaria con el indicador SCROLL, y el menu movil ya lleva su propio boton de presupuesto. */ @media (max-width: 620px) { .hero-quote { display: none !important; } } @media (prefers-reduced-motion: reduce) { .hero-quote, .hero-quote-arrow { transition: none !important; } .hero-quote span[aria-hidden="true"] { animation: none !important; } } /* ---------- CRT ---------- Copiado literal de la demo alcar-preloadyhero.html. A pantalla completa sobre todo el documento, como alli: z-index 50 lo deja por encima del contenido y del logo cromado (20), y por debajo del nav (106), el menu movil, el modal de briefing, el caso de estudio (500) y el cursor propio, que siguen leyendose limpios. pointer-events:none para que no se coma ningun clic. */ /* ========================================================================== 3c. CURSOR PROPIO -------------------------------------------------------------------------- Restaurado a peticion del cliente. Punto por defecto, anillo sobre lo interactivo. Colores por token, no fijos. `cursor: none` va SOLO donde hay puntero fino. En el original estaba en el a secas y habia que deshacerlo despues con !important para tactil; asi no se pone nunca donde no toca. ========================================================================== */ @media (hover: hover) and (pointer: fine) { body { cursor: none; } a, button, [role="button"], summary, label, input, textarea, select { cursor: none; } } .cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; width: 56px; height: 56px; transform: translate(-50%, -50%); will-change: transform; opacity: 0; transition: opacity 220ms var(--ease); } .cursor.is-visible { opacity: 1; } .cursor::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-paper); border: 1px solid transparent; transform: scale(0.143); /* La curva de apertura es elastica a proposito: es el unico sitio del sitio donde el movimiento se pasa de la raya, y ahi se nota bien. */ transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), background 180ms var(--ease), border-color 180ms var(--ease); } .cursor.is-active::before { transform: scale(1); background: transparent; border-color: var(--color-paper); } @media (hover: none), (pointer: coarse) { .cursor { display: none !important; } } @media (prefers-reduced-motion: reduce) { .cursor { display: none !important; } body, a, button, [role="button"], summary, label, input, textarea, select { cursor: auto !important; } } /* ========================================================================== 4. NAV Y MENU MOVIL ========================================================================== */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-progress); pointer-events: none; background: var(--color-brand); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); display: flex; justify-content: space-between; align-items: center; padding: 1.6rem var(--pad); /* difference SOLO arriba, sobre el hero, que es donde funciona y donde §4 exige que nada cambie. En cuanto se scrollea, .is-condensed lo apaga y la barra pasa a color solido por polaridad — ver mas abajo. */ mix-blend-mode: difference; /* Mismo motivo que en .hero: reproducir el contexto heredado original. */ font-size: 1rem; line-height: normal; color: var(--color-paper); } .nav__brand { display: flex; align-items: baseline; gap: 0.9rem; font-family: var(--font-mono); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--color-paper); } .nav-section { font-size: 0.66rem; letter-spacing: 0.16em; color: var(--color-muted-on-night); white-space: nowrap; opacity: 0; transform: translateY(3px); transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); } .nav-section.is-visible { opacity: 1; transform: none; } .nav-links { display: flex; gap: 2rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: 0.72rem; color: var(--color-paper); } .nav-links a { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color var(--dur-micro) var(--ease); } .nav-links a:hover, .nav-links a[aria-current="true"] { border-bottom-color: var(--color-brand); } .lang-toggle { display: flex; align-items: center; gap: 0.45rem; } .lang-toggle a, .lang-toggle span { font: inherit; letter-spacing: inherit; text-transform: uppercase; color: var(--color-muted-on-night); } .lang-toggle a[aria-current="true"] { color: var(--color-paper); } .lang-toggle .sep { color: var(--color-muted-on-night); } .nav__status { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--color-paper); } .nav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); animation: alcarPulse 2s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes alcarPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .nav-burger { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; } .nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--color-paper); transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease); } .nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column; justify-content: space-between; padding: 6rem var(--pad) 3rem; background: var(--color-night); /* `visibility` NO se interpola: al ponerla en la lista de transiciones con una duracion (como hacia el original) tarda 340ms en pasar a `visible`, y durante ese rato .focus() sobre los enlaces del panel no hace nada — en silencio. Resultado: al abrir el menu con teclado el foco se quedaba atrapado en la hamburguesa y el menu era inalcanzable. El patron correcto es un retardo en lugar de una duracion: al abrir salta a visible en 0s, al cerrar espera a que termine el fundido. */ visibility: hidden; opacity: 0; transition: opacity 340ms var(--ease), visibility 0s linear 340ms; } .mobile-menu.is-open { visibility: visible; opacity: 1; transition: opacity 340ms var(--ease), visibility 0s linear 0s; } .mobile-menu-item { display: flex; align-items: baseline; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(246, 243, 238, 0.12); font-size: 2rem; color: var(--color-paper); opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); } .mobile-menu.is-open .mobile-menu-item { opacity: 1; transform: none; } .mobile-menu-item__num { font-family: var(--font-mono); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--color-brand); } .mobile-menu-foot { display: flex; flex-direction: column; gap: 1.5rem; color: var(--color-paper); } .mobile-menu-foot > a[href^="mailto"] { font-family: var(--font-mono); font-size: 1rem; border-bottom: 1px solid rgba(246, 243, 238, 0.12); padding-bottom: 0.6rem; width: fit-content; } .mobile-menu-legal { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.62rem; color: var(--color-muted-on-night); } /* CTA primario reutilizable: mismo tratamiento que .hero-quote, pero en flujo normal. El unico boton macizo del sistema. */ .btn-brand { width: 100%; min-height: 56px; border: none; border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-night); font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: background var(--dur-micro) var(--ease); } .btn-brand:hover { background: var(--color-brand-lift); } /* La nav se condensa al salir del hero y deja de mezclar. ----------------------------------------------------------------------- `difference` solo vale sobre el hero. El propio codigo original ya lo sabia — "se vuelve ilegible sobre el video del hero y sobre el panel magenta" — y al scrollear pasaba a barra solida con blur. Aqui se hace lo mismo. COLOR FIJO. Antes la barra adoptaba la polaridad de la seccion de debajo (js/motion.js le copiaba el data-polarity), asi que en Contacto se volvia magenta. Fuera por peticion del cliente: "no quiero que el header cambie de color". Ahora la nav lleva data-polarity="night" escrito en el HTML y no se lo toca nadie — el color no depende del scroll ni de que corra el JS. Ojo si alguien quita ese atributo: los tokens por defecto de :root son los de PAPEL, asi que la barra saldria clara y el punto magenta perderia contraste. La polaridad de la nav tiene que ser explicita. */ .nav { transition: padding 320ms var(--ease), background 320ms var(--ease), border-color 320ms var(--ease); border-bottom: 1px solid transparent; } .nav.is-condensed { mix-blend-mode: normal; padding-top: 1.05rem; padding-bottom: 1.05rem; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom-color: var(--rule); color: var(--ink); } .nav.is-condensed .nav__brand, .nav.is-condensed .nav-links, .nav.is-condensed .nav__status { color: var(--ink); } .nav.is-condensed .nav-section, .nav.is-condensed .lang-toggle a, .nav.is-condensed .lang-toggle .sep { color: var(--muted); } .nav.is-condensed .lang-toggle a[aria-current="true"] { color: var(--ink); } .nav.is-condensed .nav-burger span { background: var(--ink); } /* Hueco que el monograma 3D ocupa al anclarse. Sin reservarlo, la pieza se monta encima de "ALCAR STUDIO". Valor literal del original. */ /* 19-09-2026: de 44x28 a 54x36 a peticion del cliente. La caja tiene que crecer con la pieza: el ancho le reserva el sitio —si no, se monta sobre la A— y el alto es lo que la centra, porque con align-self:center la fila de la marca se dimensiona por el elemento mas alto y el wordmark se centra respecto a el. El 36 va tambien en js/hero-3d.js, que es quien escala el monograma al anclarlo: los dos tienen que decir lo mismo. */ #logo-dock { width: 54px; height: 36px; align-self: center; } /* Cuatro cortes distintos, todos literales del original. Sin ellos la nav se rompe en movil: la etiqueta de estado empujaba "ALCAR STUDIO" a dos lineas. */ @media (max-width: 999px) { /* El monograma no viaja a la nav en movil (se desvanece con el hero), asi que el hueco reservado para el ancla vuelve a sobrar. */ #logo-dock { display: none !important; } } /* 999 y no 900. Medido de 20 en 20 px: a 901 la nav de escritorio ya no cabe —"ALCAR STUDIO" se parte en dos lineas, la nav crece de 80 a 92px de alto y los enlaces arrancan pegados a la marca, 0px de separacion— y no vuelve a respirar hasta ~980. El menu de hamburguesa cubre ahora toda esa franja: a 1000px la separacion ya es de 21px, y de 31 a 1024. */ @media (max-width: 999px) { .nav-links { display: none; } .nav-burger { display: flex; } } /* Un solo corte para lo que la nav suelta en pantallas estrechas, en vez de los tres heredados (780 / 620 / 560) que no respondian a un sistema. */ @media (max-width: 620px) { .nav-section { display: none !important; } .nav-status-label { display: none !important; } } /* ── Pie ─────────────────────────────────────────────────────────────────── Sin LinkedIn: el estudio no tiene perfil, asi que el enlace se elimina en lugar de reapuntarse a la home generica de la red (brief §10.8). */ .site-footer { position: relative; z-index: 1; background: var(--bg); color: var(--ink); padding: var(--space-l) var(--pad); border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--ls-wide); } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); justify-content: space-between; align-items: center; } .site-footer a { border-bottom: 1px solid transparent; transition: border-color var(--dur-micro) var(--ease); } .site-footer a:hover { border-bottom-color: var(--accent); } /* ========================================================================== 5. HERO — INTOCABLE (brief §4) -------------------------------------------------------------------------- Traduccion literal de los style="" originales a clases y tokens. Ni un valor cambia: los numeros de aqui son los mismos que habia en linea. Verificado por comparacion de pixeles contra la captura previa a 1440x900 y 375x812 — ver _hero-check/. El hero NO usa la escala tipografica del sistema (--step-*) a proposito: conserva su propio clamp(3.2rem, 11vw, 9.5rem). ========================================================================== */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; /* 'safe center' y no 'center' a secas: cuando el contenido no cabe —un portatil de 640 o 700px de alto—, un centrado normal lo desborda por ARRIBA tambien, y la cejilla acababa debajo de la cabecera fija (medido: top 0 con la nav llegando a 80). Con 'safe' el desbordamiento solo va hacia abajo, que es donde hay scroll. */ justify-content: safe center; /* El aire vertical es simetrico a proposito: asi en pantallas altas el bloque sigue centrado exactamente donde estaba y no se mueve nada de lo ya aprobado. En pantallas bajas es lo que separa la cejilla de la cabecera y el boton del indicador SCROLL. */ padding: clamp(7rem, 12vh, 8.5rem) var(--pad); overflow: hidden; color: var(--color-paper); /* El original no declaraba font-size ni line-height: heredaba los 16px y el `normal` del navegador. El sistema nuevo si los fija, y eso se colaba dentro del hero inflando alturas (la barra de metadatos pasaba de 40 a 47 px) y subiendo el bloque 3 px. Aqui se restaura el contexto heredado exacto del original. Verificado por geometria. */ font-size: 1rem; line-height: normal; } .hero-video-scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(12,12,13,0.58) 0%, rgba(12,12,13,0.66) 45%, rgba(12,12,13,0.95) 100%); } .hero-noise { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero-bloom { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--color-brand) 22%, transparent), transparent 45%); } /* Solo los hijos EN FLUJO se elevan sobre las tres capas decorativas. .scroll-cue y .hero-quote van posicionados en absoluto y llevan su z-index en su propia regla: meterlos aqui les pisaba el position y el boton salia estirado a todo el ancho como item de flex. */ .hero-eyebrow, .hero-title, .hero-sub, .hero-meta, .hero-cta { position: relative; z-index: 1; } .hero-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: 0.72rem; color: var(--color-muted-on-night); margin: 0 0 1.75rem; overflow: hidden; } .hero-eyebrow > span { display: inline-block; } .hero-title { margin: 0; font-size: clamp(3.2rem, 11vw, 9.5rem); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .hero-title em { color: var(--color-brand); font-style: italic; font-weight: 300; } .hero-sub { margin: 2.25rem 0 0; max-width: 40ch; font-family: var(--font-mono); font-size: 0.95rem; line-height: var(--lh-body); color: var(--color-muted-on-night); overflow: hidden; } .hero-sub > span { display: block; } .hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 3.5rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: 0.7rem; color: var(--color-muted-on-night); } .hero-meta strong { display: block; color: var(--color-paper); font-size: 0.95rem; margin-bottom: 0.3rem; font-family: var(--font-sans); font-weight: 600; } .hero-cta { display: inline-flex; width: fit-content; will-change: transform; margin-top: 2.75rem; padding: 0.95rem 1.8rem; border: 1px solid rgba(246, 243, 238, 0.12); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-paper); transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); } .hero-cta:hover { border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 8%, transparent); } .scroll-cue { position: absolute; bottom: 2.5rem; left: var(--pad); z-index: 1; display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--color-muted-on-night); } .scroll-cue__bar { width: 1px; height: 28px; background: var(--color-muted-on-night); position: relative; overflow: hidden; } .scroll-cue__bar::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--color-paper); animation: alcarScrollBar 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes alcarScrollBar { to { top: 100%; } } /* CTA primario: magenta macizo. En version outline se perdia contra el tunel y parecia deshabilitado. El "VER EL TRABAJO" se queda en outline, y asi hay jerarquia — uno primario y otro secundario — en lugar de dos pildoras iguales. La sombra magenta NO es decorativa: es lo que despega el boton del tunel, y quitarla cambia la captura. */ .hero-quote { position: absolute; bottom: 2.5rem; right: var(--pad); z-index: 1; display: inline-flex; align-items: center; gap: 0.7rem; padding: 1rem 1.75rem; border: none; border-radius: var(--radius-pill); background: var(--color-brand); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--color-night); -webkit-appearance: none; appearance: none; cursor: pointer; box-shadow: 0 4px 18px color-mix(in srgb, var(--color-brand) 28%, transparent); transition: background 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease); } .hero-quote-arrow { transition: transform 240ms var(--ease); } .hero-quote:hover, .hero-quote:focus-visible { background: var(--color-brand-lift); box-shadow: 0 8px 30px color-mix(in srgb, var(--color-brand) 45%, transparent); transform: translateY(-2px); } .hero-quote:hover .hero-quote-arrow { transform: translateX(4px); } .hero-quote:active { transform: translateY(0); } /* Por debajo de 620px el boton chocaria con el indicador SCROLL, y el menu movil ya lleva su propio boton de presupuesto. Ademas el hero abre hueco al pie para ese indicador. Los dos valores son literales del original: sin el padding-bottom, el bloque de copy quedaba 52 px mas abajo. */ @media (max-width: 620px) { .hero-quote { display: none !important; } .hero { padding-bottom: 6.5rem; } } /* ========================================================================== 5b. SERVICIOS -------------------------------------------------------------------------- Tres filas. Numero, titulo y UNA linea. Nada mas: el detalle vive en los proyectos, que es donde se puede comprobar. ========================================================================== */ .section-lead { margin-top: var(--space-m); max-width: 52ch; font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.75; color: var(--muted); } .services { margin-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--rule); } .service { display: grid; gap: 0.4rem 2rem; padding: clamp(1.75rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--rule); } @media (min-width: 800px) { .service { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 0 clamp(2rem, 5vw, 4rem); } } .service__num { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.14em; color: var(--accent); } .service__title { font-size: var(--step-2); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; } .service__lead { font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.7; color: var(--muted); max-width: 42ch; } /* ── El gesto de Servicios (19.2) ───────────────────────────────────────── Queja del cliente: "mucho texto de pronto sin motion". Entraba con el .reveal generico — las tres filas subiendo 18px a la vez — y no decia nada. Ahora la fila se DESPLIEGA por partes: una linea magenta barre el ancho y se apaga sin dejar residuo, el numero entra desde la izquierda, el titulo asoma palabra a palabra y la entradilla llega la ultima. Cuatro tiempos en vez de uno. La fila anula el .reveal generico: se queda solo con la clase .is-visible que le pone el observador, y el movimiento lo ponen sus partes. */ .service.reveal { opacity: 1; transform: none; transition: none; } .service { position: relative; isolation: isolate; } /* El barrido. Se apaga al final: tres reglas magenta permanentes serian mas magenta del que esta pagina se puede gastar (REFERENCIAS.md §1.1). */ .service::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } .service.is-visible::after { animation: svcBarrido 1500ms var(--ease) both; animation-delay: var(--reveal-delay, 0ms); } @keyframes svcBarrido { 0% { transform: scaleX(0); opacity: 1; } 62% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } } .service__num { display: inline-block; opacity: 0; transform: translateX(-14px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); transition-delay: calc(var(--reveal-delay, 0ms) + 120ms); } .service.is-visible .service__num { opacity: 1; transform: none; } .service__lead { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--reveal-delay, 0ms) + 420ms); } .service.is-visible .service__lead { opacity: 1; transform: none; } /* Con puntero fino, un lavado magenta cruza la fila al pasar por encima. Va detras del texto (z-index -1 dentro del contexto que crea `isolation`). */ @media (hover: hover) and (pointer: fine) { .service::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 8%, transparent) 50%, transparent 100%); opacity: 0; transform: translateX(-25%); transition: opacity 260ms var(--ease), transform 780ms var(--ease); pointer-events: none; } .service:hover::before { opacity: 1; transform: translateX(25%); } } @media (prefers-reduced-motion: reduce) { .service::after { animation: none !important; opacity: 0; } .service__num, .service__lead { opacity: 1 !important; transform: none !important; transition: none !important; } .service::before { display: none; } } /* ========================================================================== 5c. TRABAJO — patron Obys -------------------------------------------------------------------------- Indice tipografico a la izquierda, pieza activa al centro entre corchetes. El foco se marca con un GLIFO, no con un borde: tipografia haciendo de interfaz, que es lo que se robaba de la referencia (REFERENCIAS §1.9). Los items del indice son