.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--content-padding); } /* ---------- Header ---------- */ /* 2026-06-29: se probaron dos arreglos sin poder verificarlos en dispositivo real (transform:translateZ(0)+will-change, despues position:sticky) para un reporte de que el header se desplazaba un poco al hacer scroll en movil. El segundo intento rompio el header (reportado por el usuario) - revertido a la version original, sin ningun hack. Pendiente: diagnosticar con Playwright (cuando este disponible en sesion) antes de volver a tocar esto a ciegas. */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-height); display: flex; align-items: center; background: var(--color-bg); color: var(--color-text); transition: color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard); } /* En Home, el header arranca sobre la foto clara del hero: sin fondo (se ve la foto detras) y texto en negro. En cuanto el scroll lo saca de la zona clara (o en el resto de paginas, donde no hay zona clara), pasa a fondo negro solido + texto blanco, para que el menu nunca quede ilegible sobre contenido claro que pase por debajo del header fijo (ver js/main.js). */ .site-header.is-on-light { background: transparent; color: var(--color-header-on-light); } /* En Figma (nodo Menu) el logo esta a la izquierda (x=72) y los 4 links empiezan poco despues (x=347, gap real ~62-76px segun pagina) - NO estan pegados al borde derecho junto a EN/ES. EN/ES si quedan a ras del borde derecho (x=1182-1216 = ancho total del Menu). El "gap" de aqui es la distancia logo->primer link; el resto de la distribucion (links cerca del logo, EN/ES al extremo derecho) se hace en .site-nav (mas abajo). */ /* Peticion cliente 2026-07-16: el header debe ocupar todo el ancho de la pagina (ya lo hace: el fondo vive en .site-header, position:fixed + inset:0, sin max-width - ver arriba) Y sus margenes (logo/EN-ES respecto al borde) deben quedar alineados con los margenes del resto de la web. Primer intento (retirado el mismo dia): anular aqui max-width/margin-inline de .container para que el CONTENIDO tambien llegara al borde - eso rompio la alineacion pedida despues, porque el resto de secciones SI respeta --content-max via .container (a partir de ~1380px de viewport su margen real crece por encima de los 50px fijos de padding-inline, mientras el header se quedaba fijo en 50px). Se revierte: .site-header__bar vuelve a heredar max-width/margin-inline de .container sin overrides, asi su margen coincide exactamente con el de cualquier otra seccion a cualquier ancho de viewport. */ .site-header__bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 64px; } /* Lockup real del Figma: icono + logotipo en horizontal (sin tagline en el header; el tagline solo aparece en el lockup grande del footer). Medidas exactas del nodo "Menu" (1:745/1:746, Home): grupo mark 30.879x51, grupo word 154.7x11.194, gap interno 14px. Antes el lockup completo se renderizaba ~33% mas pequeno (34px/7.5px) que el valor real de Figma. */ .site-header__logo { display: flex; align-items: center; gap: 14px; transition: filter var(--duration-base) var(--ease-standard); } /* El SVG exportado de Figma declara width/height="100%" y preserveAspectRatio="none" en su raiz (patron estandar de Figma: espera un contenedor con tamano exacto, no que el navegador infiera el ratio desde el viewBox). Por eso se fijan AMBOS ejes aqui, no solo uno con "auto": los dos valores vienen del mismo viewBox del asset (30.7078x51.0021 y 153.921x11.186) y ya estan en el ratio correcto, asi que fijarlos juntos es lo que evita la deformacion, no lo que la causa. */ .site-header__logo .logo-mark { width: 30.71px; height: 51px; } .site-header__logo .logo-word { width: 153.92px; height: 11.19px; } .site-header.is-on-light .site-header__logo { filter: invert(1); } /* Historial: con flex + justify-content:space-between (2 hijos: ul de links / lang-toggle), los links quedaban pegados al logo (flex-start) y EN/ES al extremo derecho - asi seguia el Figma original ("Menu": links cerca del logo). Peticion cliente 2026-07-16: los 4 links deben quedar CENTRADOS en el espacio asignado a las opciones del menu (ya no pegados al logo). Grid de 3 columnas (1fr / auto / 1fr) en vez de flex: la columna central (ancho = contenido de los links) queda geometricamente centrada en TODO el ancho de .site-nav porque las 2 columnas 1fr flanqueantes se reparten el espacio sobrante a partes iguales - la primera queda vacia (ningun hijo asignado ahi) y solo actua de contrapeso; EN/ES vive en la 3ª columna con justify-self:end para seguir a ras del borde derecho, igual que antes. */ .site-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex: 1; } /* En Figma los 4 links (Proyectos/Nosotros/Servicios/Contacto) son cajas de ancho fijo identico (92px cada una) colocadas sin gap entre si (347,439, 531,619 - 92px exactos entre inicios), no cajas de ancho automatico con separacion. Se reproduce con min-width fijo + gap:0 en vez del gap:1rem anterior, que daba un ritmo de espaciado distinto al de Figma. */ .site-nav__links { display: flex; grid-column: 2; gap: 0; font-family: var(--font-display); font-size: var(--text-nav); } .site-nav__links li { min-width: 92px; } .site-nav__links a { position: relative; padding-block: 0.25rem; } .site-nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; } .lang-toggle { display: flex; grid-column: 3; justify-self: end; gap: var(--space-xs); font-family: var(--font-display); font-size: var(--text-nav); } .lang-toggle a[aria-current="true"] { text-decoration: underline; } .menu-toggle { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; } .menu-toggle span { width: 22px; height: 1.5px; background: currentColor; } /* ---------- Footer ---------- El Figma no muestra ningun divisor/linea entre el contenido de la pagina y el footer, ni despues de la fila legal: no se anade border-top aqui (ver header-footer-figma-audit.md). El alto del footer en Figma termina exactamente en el borde inferior del texto legal (sin padding extra). padding-top: 83px en vez de 96px - en Figma el hueco real entre la ultima fila de Servicios y el footer es ~123px; 40px ya los aporta el padding-block de .service-link-row (fuera de alcance de Footer), asi que aqui solo hacen falta 83px para totalizar 123px. padding-bottom: 50px - desviacion aceptada respecto a Figma (donde el footer termina exactamente en el borde inferior del texto legal, sin padding extra). Anadido a peticion explicita del usuario para que el final del footer no quede pegado al borde de la pagina; no es un valor extraido de Dev Mode. */ .site-footer { background: var(--color-bg); padding-top: 83px; padding-bottom: 50px; } /* En Figma las 3 columnas (Logo/Index/Info) NO son de ancho similar: cada una se ajusta a su propio contenido (Logo~276px, Index~92px, Info~244px) y el espacio entre ellas es mucho mayor que el resto de gaps del sitio (~202-211px medidos, no 64px). Se usa column-gap (no "gap") para no afectar el espacio vertical hacia .site-footer__legal, que ya tiene su propio margin-top correcto. min() evita desbordar en viewports menores a 1280px (entre el breakpoint mobile y el ancho de Figma). 2026-07-13 (peticion del usuario): el footer se veia agrupado a la izquierda con un hueco enorme a la derecha en pantallas anchas - las 3 columnas son max-content (se ajustan a su propio contenido) dentro de un grid que, sin justify-content, alinea las pistas a la izquierda por defecto y deja el resto del ancho del contenedor sin usar. Con justify-content:space-between, el logo se ancla al margen izquierdo, la columna Info al margen derecho, y el espacio libre (por encima del column-gap minimo ya definido) se reparte entre las 3 columnas - ocupando todo el ancho de la pagina sin tocar el contenido de cada columna. */ .site-footer__grid { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(0, max-content); column-gap: min(206px, 18vw); justify-content: space-between; } /* Lockup real del Figma: icono + logotipo arriba, tagline debajo, sin separacion entre ambos bloques (alto del lockup = alto mark+word + alto tagline, sin gap), alineado a la derecha. */ .site-footer__logo { display: flex; flex-direction: column; align-items: flex-end; gap: 0; } .site-footer__logo .logo-row { display: flex; align-items: center; gap: 20px; } /* El footer reutiliza el MISMO asset que ya funciona en el header (logo-pdg-blanco-mark/word-header.svg, en vez del lockup grande propio del footer, que seguia dando problemas). Es el mismo SVG con width/height="100%" + preserveAspectRatio="none" en su raiz que el header - por eso se fijan ambos ejes (width Y height), nunca solo uno con "auto", para no deformarlo. El alto se mantiene en el tamano que ya tenia el lockup del footer en Figma (71.08px/15.59px); el ancho se recalcula con el ratio real de ESTE asset (30.71x51 / 153.92x11.19, igual que en .site-header__logo), no con el del asset anterior. */ .site-footer__logo .logo-mark { width: 42.8px; height: 71.08px; } .site-footer__logo .logo-word { width: 214.34px; height: 15.59px; } .site-footer__logo .logo-tagline { width: 86.81px; height: 12.061px; } /* Cambio de marca 2026-06-26: Figma subio el footer (Index/Info, p.ej. nodo 103:1934 y equivalentes) de 14px a 16px - distinto del nav del header (103:1631, sigue en 14px, var(--text-nav)), asi que ya no pueden compartir el mismo token. */ .site-footer__col { font-size: 16px; color: var(--color-text); } /* En el Figma las 4 lineas de cada columna van pegadas (mismo interlineado que el alto de cada linea, sin margen extra entre ellas) y NINGUNA va en negrita - los 4 items de Index y los 4 de Info comparten el mismo peso Regular. (Antes se ponia en negrita el primer item de cada columna, sin base en Figma). */ .site-footer__col li + li { margin-top: 0; } /* La fila legal en el Figma se alinea con las columnas 2 y 3 (Index/Info), no con la columna del logo: por eso vive dentro de site-footer__grid y ocupa solo esas dos columnas, en vez de todo el ancho del contenedor. Los 2 bloques (texto legal + copyright) van centrados verticalmente entre si (items-center en Figma, node 1:701/1:703). */ .site-footer__legal { grid-column: 2 / -1; margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); color: var(--color-text-muted); font-size: var(--text-body); } /* En Figma el texto legal tiene una caja de 282px de ancho (node 1:702), lo que lo obliga a partir en varias lineas en vez de fluir en una sola linea larga; el copyright (segundo parrafo) no tiene ese tope, queda en una sola linea (whitespace-nowrap en Figma, node 1:704). */ .site-footer__legal p:first-child { max-width: 282px; } /* ---------- Page heading ---------- */ .page-hero { padding-block: calc(var(--header-height) + var(--space-2xl)) var(--space-xl); } /* font-weight/line-height: Figma especifica Georgia:Regular + leading-normal para TODOS los titulos de pagina (confirmado via get_design_context), incluido "Contacto" (unico que usa esta regla base sin modificador propio ahora - Nosotros/Proyectos/Servicios ya tienen su --modificador con esto explicito). Bug encontrado 2026-06-26 al revisar Contacto: sin esto, el h1 hereda bold del navegador (base.css solo resetea margin) y un line-height generico de 1.05, ninguno de los dos coincide con Figma. */ .page-hero__title { font-family: var(--font-display); font-size: var(--text-display-xl); font-weight: normal; line-height: normal; } /* Figma (Servicios, node 1:226): "Servicios", Georgia Regular, 48px, blanco, line-height normal, sin letter-spacing. Re-auditado a fondo 2026-06-24 a peticion del usuario (foco estricto en texto/tipografia): - font-size: el token --text-display-lg (recalibrado en HT-01, llega a 72px exacto a 1280px) no sirve aqui porque el target de este titulo es 48px, no 72px - son dos escalones tipograficos distintos. - font-weight:

tiene bold por defecto del navegador (base.css solo resetea margin, no font-weight) y Figma pide Regular - mismo bug ya encontrado y corregido antes en otros titulares de este proyecto (ver pages.css linea ~40-46, HOME-TYPO-SWEEP-02 en pixel-fidelity-audit.md) pero nunca aplicado a .page-hero__title/--md hasta ahora. - line-height: la base .page-hero__title usa 1.05 (pensado para los titulos de 96px de Nosotros/Proyectos/Contacto); Figma especifica "normal" para Servicios, no un valor compacto - se sobreescribe aqui. Todo escopado a --md porque esta clase solo se usa en servicios.html (no afecta a Nosotros/Proyectos/Contacto, que usan .page-hero__title sin este modificador). */ .page-hero__title--md { font-size: 48px; font-weight: normal; line-height: normal; } /* Figma (Servicios, node 1:185): linea decorativa fina debajo de "Servicios". Ancho FIJO 339px (no el ancho del texto "Servicios", que es mas corto) - señalado directamente por el usuario: la linea tiene que llegar hasta la "a" de "Estrategia" (la primera "a", x≈439), no acabar donde termina la palabra "Servicios". x=100 (inicio de la linea) practicamente coincide con x=98 (inicio del texto "Servicios"), por eso no hace falta offset horizontal, solo el ancho fijo. display:inline-block ya no es necesario en .page-hero__title--md (la linea no depende del ancho del texto). Posicion vertical derivada de las coordenadas de Figma (texto 1:226 top=163/h=93, linea 1:185 y=233 -> offset ~13px bajo la caja de linea del texto de 48px). Color inferido del convenio ya usado en este proyecto para hairlines decorativas (var(--color-text-muted), ver HOME-PROJECTS-LINE-01); el nodo de Figma se exporto como imagen sin valor de color explicito en los datos leidos via MCP - pendiente de confirmacion visual del tono exacto. */ .page-hero__title--md::after { width: 339px; content: ""; display: block; margin-top: 13px; height: 1px; background: var(--color-text-muted); } .page-hero__statement { font-family: var(--font-display); font-size: var(--text-display-md); line-height: 1.2; max-width: 64ch; margin-top: var(--space-xl); } @media (max-width: 860px) { .site-nav__links, .lang-toggle { display: none; } .menu-toggle { display: inline-flex; } /* Figma (node-id=165-60, "Menu"): el header movil SIEMPRE es solo el icono ("Logo_PDG_Negro") + hamburguesa, sin el wordmark "PICO DE GALLO" - no hay ningun nodo de wordmark en ese componente, ni en el estado cerrado (este nodo) ni en el abierto (165-139, ya oculto antes solo con body.nav-open). Se generaliza aqui a todo movil, no solo con el menu abierto. */ .site-header__logo .logo-word { display: none; } /* Figma (Home Mobile, nodo 165:129 "Menu Mobile", node-id=165-139): al abrir el menu movil, TODO el panel (no solo la lista de links) pasa a fondo blanco con texto/logo negro - invertido respecto al tema oscuro del resto del sitio. .lang-toggle vive normalmente fuera del flujo fijo (regla generica de arriba lo oculta del todo en movil, ver "display:none"), pero en Figma "EN ES" SI aparece dentro de este panel, debajo de los links - por eso aqui el fixed/inset se mueve al propio