por cada
sub-frase (con
solo dentro de algunas) - comparando contra el
nodo 1:306 real solo hay 2 saltos de linea en blanco (
en el
export), es decir 3 grupos, no 8. Las
de mas creaban huecos de
1.5em donde Figma no tiene ninguno, y a la vez faltaban
DENTRO de
los grupos (ej. "ya conoces," y "pero de pronto sabe distinto." iban
corridos en una sola frase en vez de en 2 lineas; el parrafo "En Pico
de Gallo creemos..." no tenia ningun
, corria como un parrafo
largo normal en vez de 6 lineas cortas). Corregido en nosotros.html:
ahora son exactamente 3
, con
entre cada linea dentro de cada
uno, calcando el nodo 1:306 linea por linea.
margin-top pasa de 28px (medido desde .manifesto__statement, cuando el
texto no tenia titulo propio encima) a 0 (2026-07-20: ahora el hueco
real es entre .manifesto__statement y .manifesto__heading - ver
margin-top:64px en .manifesto__body - el titulo y el cuerpo ya no
tienen hueco propio entre ellos en Figma, bottom del titulo y top del
texto coinciden en y=1337). */
/* Peticion cliente 2026-07-21: aunque en Figma el bottom del titulo
"Manifiesto" coincide exactamente con el top del cuerpo (0px, ver nota
de mas arriba en .manifesto__body), el cliente pidio ~10px de aire
igualmente - queda demasiado justo en la practica. Excepcion deliberada
sobre el nodo 1:306, igual que otras ya documentadas en este archivo
(no es un error de fidelidad, es una peticion explicita posterior). */
.manifesto__text {
margin-top: 10px;
color: var(--color-text-soft);
font-size: 16px;
line-height: normal;
}
.manifesto__text p { margin: 0; }
.manifesto__text p + p { margin-top: 1.5em; }
/* Peticion cliente 2026-07-30 (portado desde el prototipo): sustituye el
carrusel de scroll-jacking de arriba (pin+persiana+barra de progreso+
cortina+spacer de despegue) por un efecto de parallax vertical, mismo
patron ya aplicado el mismo dia al carrusel de Servicios de Home (ver
"Reveal-on-scroll de Servicios en Home" en components.css/main.js).
Los 3 parrafos pasan a flujo normal (apilados uno debajo de otro,
respetando el orden ya existente en el HTML - .manifesto__text ya no
vive dentro de .manifesto__pin, ahora es su hermano) y se revelan con
un fade+deslizamiento vertical segun entran en el viewport (clase
.is-revealed que anade main.js via IntersectionObserver), en vez de
superponerse en el mismo hueco con un efecto de persiana (translateY
discreto is-active/is-past sobre parrafos position:absolute). Sin la
barra de progreso vertical (.manifesto__progress/-bar, eliminada del
HTML) - mismo motivo que en Servicios, el cliente no la queria.
"Manifiesto" (titulo+ojo, .manifesto__pin) SIGUE fijo (sticky) mientras
los parrafos pasan por detras y se ocultan - eso ya pasaba antes, pero
como un crossfade contenido DENTRO de la misma caja fija; ahora es un
scroll-past real (el texto, hermano del pin, se desplaza por detras
suyo) que necesita algo opaco detras del pin para taparlo - ver
.manifesto__curtain mas abajo (bug del rectangulo negro corregido el
mismo dia: NO es background en el propio pin, mismo error que se probo
primero en #home-servicios .service-showcase__title de components.css
pero que ahi si funciona, porque ese titulo es tan ancho como el texto
que tapa - aqui "Manifiesto" es mucho mas corto que .manifesto__text).
"Somos el ingrediente..." (.manifesto__statement) no cambia, sigue fijo
igual que antes.
Al ya no necesitar una altura artificial (antes calc(3*100vh), un
viewport completo por parrafo, para darle "pista" de scroll al pin) ni
forzar su despegue con JS (antes manifestoPinTopValue+is-releasing),
.manifesto__release-spacer (hueco extra para que el despegue nativo del
sticky terminara antes del footer) ya no hace falta y se quita del HTML
(page-nosotros.php) y de main.js - el alto real de .manifesto__showcase
lo dan ahora sus propios hijos en flujo normal (pin + texto), mismo
patron ya usado sin spacer en Servicios/Proyectos.
.manifesto__curtain SI se mantiene (bug reportado por el cliente
2026-07-30, "el texto ya no se debe ver cuando se oculta detras de
Manifiesto" - ver la regla mas abajo): a diferencia de Servicios/
Proyectos (donde el titulo sticky se pega justo en top:var(--header-
height), sin hueco por encima), "Manifiesto" se pega mas abajo
(--manifesto-pin-top, deliberadamente por debajo de "Somos el
ingrediente..." y de un hueco visual de 100px) - todo el texto que
sigue subiendo DESPUES de ocultarse detras del pin pasa fisicamente por
esa franja superior (header/franja opaca de "Nosotros"/statement/hueco
de 100px) antes de desaparecer del todo por arriba del viewport, y ahi
no habia ningun fondo opaco continuo que lo tapase (a diferencia del
viejo diseño, donde el texto nunca salia de la ventana interna del
propio pin). La cortina (fixed, opaca, cubre 0 a donde termina el pin)
soluciona exactamente eso. Unica diferencia con el viejo curtain: antes
solo se hacia visible un instante (cerca del despegue del pin, con
is-releasing); ahora se hace visible durante TODO el tiempo que
.manifesto__showcase esta en pantalla (IntersectionObserver sobre el
propio showcase, ver main.js) - el texto puede estar pasando por detras
del pin en cualquier punto de ese rango, no solo al final.
Bug encontrado 2026-07-30 (reportado por el cliente: "aparece un
rectangulo negro arriba a la derecha" justo al empezar a verse
"Manifiesto") sobre el primer intento de esta misma tarea: ese primer
intento le daba background:var(--color-bg) al propio .manifesto__pin
en vez de a la cortina, para tapar el texto que pasa exactamente por SU
franja (pinTop a pinTop+altoPin). Pero .manifesto__pin no tiene ancho
propio (ocupa toda la columna de contenido, ~600-900px) mientras que
"Manifiesto" solo ocupa sus primeros ~200px - ese fondo se veia como un
rectangulo negro solido a la derecha del titulo, tapando lo que hubiera
detras (la foto del estudio) incluso sin texto que ocultar todavia.
Corregido: el pin ya no lleva background propio (ver esa regla mas
abajo); la cortina crece para cubrir tambien esa franja (0 a
pinTop+altoPin, no solo 0 a pinTop) con el ancho correcto (el de
.manifesto__text, no el del pin, ver .manifesto__curtain mas abajo).
Peticion cliente 2026-07-30 (tarea 4, mismo dia): el titulo de
Manifiesto y la imagen tienen que desaparecer A LA VEZ que desaparece
el texto del manifiesto (los 3 parrafos), sin quedar nunca por encima
del footer. Dos intentos previos de este mismo dia (ver git history si
hace falta el detalle): 1) esconder el pin al alcanzar el borde de
.manifesto__statement (reservaba hueco con .manifesto__eye-spacer); 2)
esconderlo en cuanto el sticky nativo se despega (reservaba hueco con
.manifesto__release-spacer, formula basada en la posicion del PIN). El
2º fallaba en viewports altos (~980px+ con las medidas actuales, un
monitor externo o ventana maximizada normal): con esa altura de
ventana, .manifesto__showcase (alto fijo, en flujo normal) ya no tiene
suficiente scroll total para que el sticky nativo del pin llegue a
despegarse NUNCA antes del final real de la pagina - el pin se queda
pegado (visible) indefinidamente y el ojo, mucho mas alto que el pin,
queda montado sobre el footer sin remedio.
Version actual: el disparador de .is-releasing (ver mas abajo) ya no
depende de si el pin se ha despegado (una condicion que puede no
llegar a cumplirse) sino de si .manifesto__text ha terminado de pasar
por detras del pin (compara la posicion real de ambos en cada scroll,
ver updateManifestoCurtain en main.js) - cierto tanto si el pin sigue
tecnicamente pegado como si no. .manifesto__release-spacer sigue
haciendo falta (formula recalculada, ya no basada en el pin sino en
garantizar que ese cruce de posiciones LLEGUE a ocurrir antes del final
de la pagina, ver main.js) - sin el, en viewports altos el ultimo
parrafo ni siquiera llega a completar su propio recorrido de scroll
antes de que la pagina se quede sin mas alto. */
/* .manifesto__release-spacer: display:none base - DEBE ir antes del
@media (min-width:861px) que le pone display:block mas abajo (mismo
error de orden ya corregido antes para .manifesto__eye-spacer/este
mismo elemento, ver git history - misma especificidad, un display:none
posterior en el archivo le ganaria siempre al display:block del media
query). Solo hace falta en escritorio/tablet, donde el pin es sticky
(ver mas abajo) - en movil no hay nada que despegar/ocultar. */
.manifesto__release-spacer {
display: none;
}
@media (min-width: 861px) {
/* Bug reportado por el cliente 2026-07-30 ("mucho hueco entre
'Manifiesto' y donde empieza el texto"): hasta ahora el ojo era la
columna 1 de un grid en .manifesto__pin (ver git history) - esa
columna (105px de margen + 100px de alto = 205px) era mas alta que
la columna del titulo (~38px, una sola linea), y el alto de fila de
un grid SIEMPRE lo marca la columna mas alta, sin importar
align-items - asi que .manifesto__pin media esos ~205px aunque el
titulo solo ocupara los primeros ~38px, y .manifesto__text (su
hermano en el HTML) empezaba justo despues de esa caja entera,
dejando ~165px de hueco de mas antes de su propio margin-top:10px
(regla base, sin cambios). Solucion: el ojo pasa a position:absolute
(ya no es un item de grid, no aporta altura a .manifesto__pin) -
left:-366px reproduce el mismo offset horizontal que antes daba el
grid (columna de 366px + margin-left:-366px en el pin), calculado
ahora desde el propio .manifesto__pin (position:sticky, que ya sirve
de containing block para descendientes absolute sin necesitar
position:relative aparte). Sin el grid, el pin ya no necesita
margin-left:-366px (ver mas abajo) - vuelve a su posicion natural,
la misma que .manifesto__text y .manifesto__statement.
opacity (2026-07-30, tarea 6): antes este fundido continuo vivia en
.manifesto__pin entero (titulo+ojo se desvanecian juntos) - el
cliente aclaro que solo la imagen tiene que desaparecer "por debajo
de 'Manifiesto'", que se queda fijo y visible (igual que "Servicios"/
"Proyectos", sin fundido propio). --manifesto-eye-offset (main.js,
updateManifestoCurtain, renombrada en tarea 8 - ver historial en
main.js) es un desplazamiento en px atado 1:1 al recorrido real de
la ultima linea de .manifesto__text contra el borde inferior del
pin, consumido como translateY en .manifesto__eye (regla base, ver
mas arriba). Sin transition: un valor que ya se recalcula en cada
frame de scroll no la necesita (añadiria retraso, alejando el
efecto del progreso real). Fallback 1 (visible, translateY(0)):
mientras main.js no haya corrido todavia (primer pintado).
left/top se mueven aqui a .manifesto__eye-frame (el marco que
recorta la imagen al "desaparecer hacia arriba", ver regla base) -
la imagen en si ya no lleva su propia posicion, solo rellena el
marco (width/height:100%) y se desplaza dentro de el.
Peticion cliente 2026-07-30 (siguiente turno, tarea 13): medido en
vivo (Playwright) que aunque el ritmo ya era 1:1 (ver main.js), el
punto de pantalla en el que cada uno desaparece no coincidia - el
texto se tapa detras de la cortina a la altura del borde inferior del
pin (pinBottom), pero este marco (top:105px, heredado de un ajuste
anterior para dejar hueco bajo el antiguo texto "Manifiesto") empezaba
105px mas abajo en pantalla, asi que aunque avanzaran a la vez, sus
bordes de desaparicion quedaban desalineados 105px en vertical.
"Manifiesto" ya esta vacio (h2 sin texto, ver mas abajo) - ese hueco ya
no tiene texto del que separarse, asi que top:0 no colisiona con nada.
Con top:0 el marco pasa a ocupar pinBottom a pinBottom+276 (antes
pinBottom+105 a pinBottom+381) - su borde inferior en reposo coincide
ahora con pinBottom, el mismo borde que usa la cortina para tapar el
texto, asi que el punto exacto de desaparicion (no solo el ritmo) es
el mismo para ambos. */
.manifesto__eye-frame {
position: absolute;
left: -366px;
top: 0;
}
/* Peticion cliente 2026-07-26 (2a, sin cambios sobre este punto):
"Somos el ingrediente..." se queda fijo junto con "Manifiesto"
mientras avanzan los parrafos - su propio position:sticky, anclado
~50px antes de .about-page__divider (valor resuelto por JS, ver
--manifesto-statement-top en main.js). background solido: sin esto
el texto se veria pasar por debajo al hacer scroll.
z-index:3 (tarea 9, subido desde 2 - antes empataba con
.manifesto__pin, ver mas abajo): peticion cliente "cuando se oculta
'Manifiesto', el titulo y la imagen se tienen que ocultar por debajo
de 'Somos el ingrediente...'" - .manifesto__pin es sticky con su
PROPIO rango de scroll (mas corto que el de .manifesto__showcase
completo), asi que en algun momento se despega de su enganche nativo
y sigue subiendo con el scroll normal, pasando fisicamente por la
misma franja de pantalla donde este statement esta clavado. Con
ambos al mismo z-index (2), el orden de pintado ganaba el ultimo en
el DOM (.manifesto__pin, dentro de .manifesto__body, que va DESPUES
de este statement como hermano en .manifesto) - el titulo/ojo se
pintaban POR ENCIMA del statement en vez de tapados por su fondo
solido. Subiendo el z-index de este statement por encima del pin
(pero dejando intacta la relacion pin(2) > cortina(1), ver mas
abajo) el statement, con su propio background opaco, vuelve a tapar
correctamente lo que pase por detras - mismo mecanismo que ya usa
para el resto de .manifesto__text, aplicado ahora tambien al pin. */
.manifesto__statement {
position: sticky;
top: var(--manifesto-statement-top, var(--header-height));
z-index: 3;
background: var(--color-bg);
}
/* El pin se ancla justo debajo del statement (--manifesto-pin-top,
resuelto por JS - ver main.js). Ya no es un grid (ver .manifesto__eye
de arriba, 2026-07-30) - bloque simple, mismo ancho/posicion que
.manifesto__statement/.manifesto__text.
Bug reportado por el cliente 2026-07-30 ("aparece un rectangulo negro
arriba a la derecha" al empezar a verse "Manifiesto"): esta regla
tenia su propio background:var(--color-bg) para tapar el texto que
pasa detras (intento anterior, mismo dia) - pero .manifesto__pin, sin
ancho propio, ocupa TODO el ancho de la columna de contenido (~600-
900px) aunque "Manifiesto" solo ocupe los primeros ~200px, asi que
ese fondo opaco se veia como un rectangulo negro a la derecha del
titulo, tapando lo que hubiera detras (la foto del estudio) incluso
cuando no habia texto que ocultar todavia. Se quita el background de
aqui (el pin vuelve a ser una caja invisible, solo se ve el propio
texto "Manifiesto") - la funcion de tapar el texto que pasa detras
pasa a .manifesto__curtain (ver mas abajo), que ya usaba un ancho
correcto (el de .manifesto__text, no el del pin) y ahora ademas
cubre hasta el borde inferior del pin, no solo hasta su borde
superior. z-index:2 se mantiene: sigue haciendo falta para que el
titulo se pinte por ENCIMA de la cortina (ambas piezas del mismo
mecanismo, ver .manifesto__curtain). */
/* Peticion cliente 2026-07-30 (tarea 6): "Manifiesto" ya NO lleva
fundido propio - antes (tarea 5) heredaba un --manifesto-pin-fade
continuo que tambien arrastraba al ojo (descendiente suyo), pero el
cliente aclaro que la imagen tiene que desaparecer "por debajo de
'Manifiesto'": el titulo se queda fijo y visible, solo el ojo se
oculta (ver --manifesto-eye-fade en .manifesto__eye, mas arriba) - el
titulo pasa a comportarse exactamente igual que "Servicios"/
"Proyectos" (sticky normal, sin logica de ocultamiento propia,
simplemente se desplaza fuera de vista de forma nativa al terminar su
rango de scroll - nunca fue la causa del bug de footer tapado, eso lo
causaba solo el ojo, mucho mas alto que el). */
.manifesto__pin {
position: sticky;
top: var(--manifesto-pin-top, var(--header-height));
z-index: 2;
}
/* Peticion cliente 2026-07-30 (tarea 10): en cuanto el pin (titulo+ojo)
ha desaparecido detras de .manifesto__statement (z-index:3, ver mas
arriba - tarea 9) se oculta del todo (visibility:hidden, no solo el
z-index) - evita que el ojo (fuera de la columna del statement, ver
left:-366px mas arriba, por lo que el fondo opaco del statement no lo
tapa a el directamente) se quede asomando cuando el titulo ya deberia
estar tapado. visibility (no display:none): el pin sigue sticky/
ocupando su sitio en el flujo - solo deja de pintarse - evita
cualquier salto de layout en el instante en que se oculta.
.is-hidden-behind-statement (main.js, updateManifestoCurtain) se
recalcula en cada frame de scroll a partir de la posicion real actual
- NO es un estado permanente (ver tarea 11 en main.js: un primer
intento con un "trinquete" de una sola direccion rompia el
comportamiento reversible normal de position:sticky - al scrollear
hacia atras y hacia adelante otra vez, "Manifiesto" ya no volvia a
aparecer nunca, ni en la zona donde debia verse). Con la condicion
recalculada en vivo, esta clase se quita y pone sola segun haga falta
en cualquier direccion de scroll, igual que .manifesto__curtain
.is-visible un poco mas abajo. */
.manifesto__pin.is-hidden-behind-statement {
visibility: hidden;
}
/* .manifesto__release-spacer: garantiza que, para CUALQUIER alto de
viewport, haya suficiente scroll despues de .manifesto__showcase para
que .manifesto__text llegue a terminar de pasar por detras del pin,
CON margen de sobra para que el fundido continuo del ojo
(--manifesto-eye-fade) tenga tambien esos px de recorrido para
completarse - sin esto, en viewports altos (ver comentario grande de
mas arriba) el ultimo parrafo se queda a medio camino indefinidamente
y el fundido nunca llega a 0. Altura calculada por JS (ver
syncManifestoStickyOffsets en main.js), recalculada tambien en cada
resize porque depende de window.innerHeight. */
.manifesto__release-spacer {
display: block;
height: var(--manifesto-release-spacer-h, 0px);
}
/* Peticion cliente 2026-07-26 (8a, sin cambios sobre este punto): sube
3px el texto en escritorio/tablet, 16px (base) -> 19px. */
.manifesto__text {
font-size: 19px;
}
/* Reveal-on-scroll (2026-07-30): cada parrafo arranca invisible y
desplazado 56px hacia abajo, y pasa a su posicion natural con un
fade suave cuando main.js le anade .is-revealed (IntersectionObserver,
ver el bloque de Manifiesto en main.js) - mismos valores (56px, 0.9s,
misma curva) que #home-servicios .service-showcase__list .service-entry
en components.css, para que ambos efectos de parallax del sitio se
sientan iguales. */
.manifesto__text p {
opacity: 0;
transform: translateY(56px);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.manifesto__text p.is-revealed {
opacity: 1;
transform: translateY(0);
}
}
/* .manifesto__curtain: ver el comentario grande en el @media
(min-width:861px) de mas arriba ("SI se mantiene..."). display:none
base (movil real, cualquier ancho): sin sticky/scroll-jacking en movil
no hay nada que la cortina necesite tapar. */
.manifesto__curtain {
display: none;
}
@media (min-width: 861px) {
/* left/width (2026-07-30, corregido junto con el bug del rectangulo
negro - ver nota en .manifesto__pin de mas arriba): rect real de
.manifesto__text (JS, ver main.js), no de .manifesto__pin - la
cortina tiene que ser tan ancha como el TEXTO que oculta, no como el
titulo (mucho mas corto). height: var(--manifesto-curtain-height)
(JS, pinTop + alto real del pin) cubre desde el techo del viewport
hasta el borde INFERIOR del pin (0 a pinTop+altoPin) - ya no se
detiene en el borde superior del pin (pinTop a secas): el pin dejo de
tener su propio background (ver nota de arriba), asi que ahora es la
cortina, no el pin, quien tapa tambien la franja donde vive el propio
titulo "Manifiesto". z-index:2 en el pin lo sigue dejando por encima
de la cortina (z-index:1), asi que el titulo se ve con normalidad.
is-visible: ver IntersectionObserver sobre .manifesto__showcase en
main.js. */
.manifesto__curtain {
display: block;
position: fixed;
top: 0;
left: var(--manifesto-curtain-left, 0px);
width: var(--manifesto-curtain-width, 0px);
height: var(--manifesto-curtain-height, 0px);
background: var(--color-bg);
z-index: 1;
opacity: 0;
pointer-events: none;
}
.manifesto__curtain.is-visible {
opacity: 1;
}
}
/* Fallback (prefers-reduced-motion: reduce, cualquier ancho) - consolidado
2026-07-30 (antes repartido en 2 bloques @media distintos, uno de ellos
compartido con .manifesto__progress/__release-spacer, los 2 eliminados
junto con el resto del carrusel de scroll-jacking, ver comentario
grande en el @media (min-width:861px) de mas arriba): con reduced-motion
activado, "Manifiesto" deja de fijarse (mismo criterio que
.manifesto__statement, no una preferencia nueva) y los 3 parrafos se
muestran directamente en su posicion final, sin el fade+deslizamiento
de entrada (el guard !prefersReducedMotion en main.js tampoco añade la
clase .is-revealed en este caso - sin este reset se quedarian
invisibles, atascados en el estado inicial opacity:0). Sin pin sticky
no hay nada que .manifesto__curtain necesite tapar tampoco (mismo
guard !prefersReducedMotion evita que main.js la haga visible, pero se
oculta aqui tambien por si acaso). .manifesto__eye: mismo guard evita
que main.js le anade --manifesto-eye-offset, asi que ya cae en su
propio fallback (translateY(0), ver la regla base de mas arriba) sin
necesitar reset explicito aqui. */
@media (prefers-reduced-motion: reduce) {
.manifesto__statement {
position: static;
}
.manifesto__pin {
position: relative;
top: auto;
}
.manifesto__text p {
opacity: 1;
transform: none;
transition: none;
}
.manifesto__release-spacer {
display: none;
}
.manifesto__curtain {
display: none;
}
}
/* ---------- Contacto (re-auditada 2026-06-26, columna fija añadida) ----------
Figma (frame Contacto 1:55): titulo "Contacto" (x=98,y=229) y statement
Lorem ipsum (x=495,y=416) NO empiezan a la misma altura - a diferencia
de Nosotros (donde si estan alineados en la misma fila), aqui el
statement esta deliberadamente 187px mas abajo que el titulo, ademas
de a la derecha (confirmado visualmente en la captura de Figma: el
statement queda claramente por debajo del titulo+linea, no a su lado
a la misma altura). 397px = x=495 (inicio del statement) - x=98
(inicio del titulo) = ancho de la columna 1. El titulo de esta pagina
SI usa 96px (--text-display-xl, ya correcto - es la unica pagina de
las 4 cuyo titulo coincide con el token grande, confirmado en
typography-map.md), por eso no hace falta modificador de tamano aqui.
Peticion del cliente (2026-06-26): mismo efecto que en Servicios -
"Contacto" se queda fijo SIEMPRE (toda la pagina, no solo el hero) y
el contenido que sube por scroll desaparece a la altura de la linea,
no en el header. Por eso .contact-page envuelve TODO (statement +
imagen + cuerpo), no solo el hero como antes (.contact-hero). */
.contact-page {
position: relative;
display: grid;
grid-template-columns: 397px minmax(0, 1fr);
padding-top: calc(var(--header-height) + var(--space-2xl));
padding-bottom: var(--space-2xl);
}
/* Re-auditado 2026-07-20 (nodo 1:131, nuevo desde la ultima revision):
un email de utilidad aparece por encima del titulo "Contacto" - no
dentro del flujo normal de .contact-page__content (esta 27px MAS
ARRIBA que el titulo, y el titulo ya es el primer elemento del flujo).
position:absolute anclado a .contact-page (position:relative, arriba)
en vez de meterlo en el grid: top = mismo calc() que usa el titulo
para su propio reposo (header-height + space-2xl) menos esos 27px;
left = 397px, el mismo ancho de columna 1 que ya usa el grid, para que
arranque exactamente donde arranca la columna de contenido. Sin spec
movil en Figma (frame fijo de escritorio) - resuelto en el
@media(max-width:860px) de mas abajo con el mismo criterio de
accepted-deviation que el resto del sitio. */
.contact-page__email {
position: absolute;
top: calc(var(--header-height) + var(--space-2xl) - 27px);
left: 397px;
color: var(--color-text-soft);
font-size: 16px;
}
/* Excepcion deliberada pedida por el cliente (2026-06-26): el titulo de
Contacto pasa a 48px, igual que "Servicios" en servicios.html. Figma
define 96px para el nodo de Contacto (1:130) - se confirmo esto
explicitamente con el cliente antes de aplicarlo, es una decision de
diseño consciente que se aparta de Figma, no un error de fidelidad.
Ajuste 2026-06-26 (pedido por el usuario): mismo margin-top de pagina
y de titulo, y misma tipografia/tamaño, que "Nosotros". La posicion
(padding-top de .contact-page, top del sticky) ya coincidia exacto con
.about-page/.page-hero__title--nosotros (misma formula
header-height+space-2xl en ambas) - sin cambios ahi. font-weight y
line-height se declaran aqui explicitamente (antes dependian de
heredarlos de la clase base .page-hero__title) para que coincidan con
.page-hero__title--nosotros de forma explicita, no solo por
coincidencia de cascada. */
.page-hero__title--contacto {
align-self: start;
position: sticky;
top: calc(var(--header-height) + var(--space-2xl));
z-index: 2;
background: var(--color-bg);
font-size: 48px;
font-weight: normal;
line-height: normal;
}
/* Franja opaca (mismo mecanismo que .services-layout::before en
Servicios): el contenido de la columna derecha desaparece al llegar a
la altura de la linea de "Contacto", no al llegar al header. Alto =
space-2xl (hasta donde empieza el titulo) + ~69px (texto del titulo a
48px tras la excepcion deliberada de tamaño + margin-top de la linea,
ajustado a 13px como en Servicios/Nosotros, + la linea).
+10px (2026-06-28, peticion del usuario, mismo cambio aplicado antes
en Nosotros): el texto debe ocultarse 10px por debajo de la linea, no
exactamente al llegar a ella. */
.contact-page::before {
content: "";
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
height: calc(var(--space-2xl) + 69px + 10px);
background: var(--color-bg);
z-index: 1;
pointer-events: none;
}
/* Figma original mide 64px (var(--text-display-md), heredado de la
clase base) y 187px de distancia titulo->statement (y=416 vs y=229) -
pero el usuario pidio igualar tanto el espacio (99px) como la
tipografia/tamaño a los de Nosotros, senalando que la diferencia entre
ambas paginas era demasiado grande tras unificar titulo/linea entre
las dos (mismo criterio que las excepciones deliberadas ya aplicadas:
tamaño de titulo, ancho de linea, espacio titulo->linea). Mismos
valores exactos que .page-hero__statement--nosotros - actualizado
2026-06-28 a 32px/normal junto con esa regla (ver su nota: el Figma de
Nosotros cambio de 48px/92.055% a 32px/normal despues del 2026-06-26).
Esta regla de Contacto NO se ha re-auditado de forma independiente
contra su propio nodo Figma (1:132) - solo se mantiene igualada a
Nosotros porque asi lo pidio el usuario explicitamente.
Re-auditado 2026-07-20 (peticion "analiza los cambios de Figma"): el
texto Lorem ipsum se sustituyo por el copy real ("Conversemos sobre
nuevas ideas..."). El nodo 1:132 en Figma ahora mide 48px (ni los 64px
de la auditoria original ni los 32px actuales) y el hueco titulo-
>statement tambien cambio (y=310 vs y=229 del titulo = 81px, no ya los
187px originales). NO se tocan font-size/margin-top aqui: la decision
del usuario de igualar Contacto a Nosotros fue explicita y no
referenciaba un valor de Figma concreto que debiera seguir
actualizandose con cada revision - se preserva 32px/99px hasta que el
usuario diga lo contrario. Señalar esta discrepancia (48px/81px reales
en Figma vs 32px/99px aplicados) si se revisa esta pagina de nuevo. */
.contact-page__content .page-hero__statement {
margin-top: 99px;
font-size: 32px;
line-height: normal;
}
/* Figma (node 1:102/1:103): linea decorativa de 339px bajo "Contacto" -
coincide numericamente con la de Servicios (tambien 339px) por
coincidencia, no por compartir el mismo valor a proposito - cada
pagina tiene su propio nodo Figma. margin-top ajustado a 13px (era
25px) a peticion del usuario (2026-06-26): el espacio titulo->linea
debe coincidir con el de Servicios en las 3 paginas que usan este
patron (Servicios/Nosotros/Contacto), no solo el ancho de la linea. */
.page-hero__title--contacto::after {
content: "";
display: block;
margin-top: 13px;
width: 339px;
height: 1px;
background: var(--color-text-muted);
}
/* Imagen + cuerpo secundario de Contacto (Figma: node 1:133-1:137 imagen,
1132 x 479.97; node 1:131 cuerpo, Lorem ipsum). La imagen ocupa casi
todo el ancho del FRAME completo (1132 de 1280), no solo el ancho de
la columna de contenido de .contact-page (que es mas estrecha, al
reservar 397px para "Contacto") - por eso "escapa" de su columna con
width/margin-left negativos, igual de ancha que si no hubiera columna
de titulo. Sin esto, la imagen se veria un 35% mas pequeña de lo que
marca Figma. */
.contact-visual {
width: calc(100% + 397px);
margin-left: -397px;
padding-block: var(--space-xl) 0;
}
.contact-visual__media {
aspect-ratio: 1132 / 479.972;
border-radius: 4px;
overflow: hidden;
}
.contact-visual__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Re-auditado 2026-07-20: el cuerpo secundario Lorem ipsum (node 1:131,
antigua .contact-visual__body) ya no existe en Figma - la revision
actual lo sustituye por un formulario de contacto real (nodos
487:1052-487:1061) y un bloque de datos de contacto (node 424:572,
email/telefono/ciudad), uno junto al otro, debajo de la imagen.
.contact-form-section usa la MISMA tecnica de bleed que .contact-visual
(width:100%+397px / margin-left:-397px) porque tambien vive dentro de
.contact-page__content (columna 2) y tiene que ocupar el ancho
completo del frame igual que la imagen - no se restructura el HTML
para usar grid-column:1/-1 en su lugar por consistencia con el patron
ya establecido en este archivo (mismo criterio que
.manifesto__media-wrap en Nosotros).
padding-left:96px = posicion real medida del formulario (node
487:1052, x=96) dentro de ese ancho bled (que replica el frame
Figma completo, no la columna de contenido). margin-top:105px = hueco
real imagen->formulario (form top y=1197 - imagen bottom
581+511=1092). gap:64px entre formulario e info = hueco real medido
entre el borde derecho del formulario (96+496=592) y el inicio del
bloque de datos (656). */
.contact-form-section {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 64px;
width: calc(100% + 397px);
margin-left: -397px;
margin-top: 105px;
padding-left: 96px;
}
/* 496px = ancho real del formulario en Figma (los 5 campos comparten
ese mismo ancho). 15px de gap entre campos = hueco real constante
medido entre los 5 elementos (48px de alto cada campo, salvo el
mensaje que mide 324px) - los 5 huecos reales medidos (63, 63, 63, 63px
de diferencia entre tops menos 48px de alto) dieron el mismo valor,
15px, en los 4 casos. */
.contact-form {
display: flex;
flex-direction: column;
gap: 15px;
width: 496px;
max-width: 100%;
}
.contact-form__field { display: block; }
/* Campos sin borde visible en Figma (fondo solido #d9d9d9, sin trazo) y
sin esquinas redondeadas (el export de Figma no incluye ninguna clase
"rounded-*" pese a que get_metadata los llama "rounded-rectangle" -
nombre generico del TIPO de nodo en Figma, no indica un radio > 0
real). padding-inline:19px = x real del texto (115) menos x real de
la caja (96). El campo de texto (input) usa altura fija (48px, la
misma que la caja) y centra el texto verticalmente por defecto del
navegador; el textarea, al no centrar verticalmente su placeholder,
usa padding-top:14px, la distancia real medida entre el top de su caja
y el top de su texto en Figma. */
.contact-form input,
.contact-form textarea {
display: block;
width: 100%;
border: none;
border-radius: 0;
background: #d9d9d9;
padding-inline: 19px;
font-family: var(--font-body);
font-size: 16px;
color: var(--color-text-soft);
}
.contact-form input {
height: 48px;
}
.contact-form textarea {
height: 324px;
padding-top: 14px;
resize: vertical;
font-family: var(--font-body);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: var(--color-text-soft);
opacity: 1;
}
/* No hay CTA de envio en el frame de Figma auditado (ni boton ni texto
entre el textarea y el pie de pagina) - probable hueco del diseño, no
una decision deliberada de omitirlo. Se añade un boton minimo y una
nota de "demo, sin backend" porque un formulario sin forma de enviarlo
no es utilizable ni evaluable como prototipo - decision del asistente,
NO viene de Figma, señalar al usuario para confirmar o sustituir por
el CTA real cuando el cliente lo defina. data-form-state="static" en
el