/* layout.css — page structure, mobile-first. Note: media queries use literal breakpoint values because CSS variables are not supported in @media feature values. Values match tokens in brand-tokens.json → breakpoints. Sizing convention: rem for typography, spacing, and layout dimensions — 1rem = 16px (browser default, never overridden on ). px stays for 1–2px borders/hairlines, micro-transforms, box-shadow blurs, the 999px pill idiom, and @media breakpoints (where em is inconsistent across browsers). Tokens like --sp-nav-height keep their downstream contract. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } :root { --sp-nav-height: 8rem; --sp-nav-height-mobile: 4.5rem; /* Widescreen layout envelope: deliberately uncapped so sections stretch edge-to-edge on large displays (Tesla.com reference). The brand token --spacing-container-max (1200px) is untouched and remains available for components that want the legacy narrow column. Centering rules using `margin: 0 auto` alongside this var stay harmless when max-width resolves to `none`. */ --sp-content-max: none; /* Fluid page-edge gutter: 16px on phones → 48px on desktop+. Caps at 3rem to match the ~48px subtle gutter visible on Tesla.com sections. */ --sp-page-gutter: clamp(1rem, 4vw, 3rem); /* Nav uses the same 48px ceiling so the wordmark and right-side controls line up with section content edges. */ --sp-nav-gutter: clamp(1rem, 4vw, 3rem); } /* In-page anchors (#proyectos, #aliados, …) must clear the sticky header. */ :target, main section[id] { scroll-margin-top: var(--sp-nav-height-mobile); } @media (min-width: 1024px) { :target, main section[id] { scroll-margin-top: var(--sp-nav-height); } } /* Landing target for the hero scroll cue — bumped a touch past the nav so the section heading sits clear of the header. */ #proyectos { scroll-margin-top: 6rem; } body { font-family: var(--font-body); font-size: var(--size-15); color: var(--color-text); background: var(--color-sand); line-height: 1.5; } /* Sticky footer — scoped to the contact page only. Applying body { display: flex } globally was breaking Splide's width calculation inside the home Aliados/Equipo/Testimonios carousels, so the pattern is opt-in per page. Contact has no carousels and short content, so it benefits cleanly. */ body[data-page="contact"] { display: flex; flex-direction: column; min-height: 100vh; } body[data-page="contact"] > main { flex: 1 0 auto; } /* Kill pure-black leaks from UA defaults and third-party widgets. */ input, textarea, select, button { color: inherit; font: inherit; } img, svg { max-width: 100%; display: block; } a { color: var(--color-deep); } /* Nav ---------------------------------------------------------------------- */ /* Fixed so it floats over the hero. Monochromatic-alpha treatment: a single hue (--color-deep) at two densities, both translucent + blurred so the page beneath shimmers through. Initial: navy at 55% — a navy haze over the dark hero overlay, carrying the white wordmark + sand controls. Scrolled (past 70% of hero, or immediate on no-hero pages): navy at 15% — a faint cool tint over the sand body, frosted-glass tile that the color logo + deep navy controls sit on. The diffused low-opacity shadow lifts the scrolled state; a quiet hairline holds the rim on browsers that skip backdrop-filter. Color/blur transition together on `md`; the shadow settles in slightly faster on `sm` so the lift feels like a consequence of the surface change, not a parallel animation. */ .sp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: color-mix(in srgb, var(--color-deep) 55%, transparent); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border-bottom: 1px solid transparent; height: var(--sp-nav-height-mobile); transition: background-color var(--motion-duration-md) var(--motion-ease-standard), border-color var(--motion-duration-md) var(--motion-ease-standard), backdrop-filter var(--motion-duration-md) var(--motion-ease-standard), -webkit-backdrop-filter var(--motion-duration-md) var(--motion-ease-standard), box-shadow var(--motion-duration-sm) var(--motion-ease-standard); } .sp-nav.is-scrolled { background: color-mix(in srgb, var(--color-deep) 15%, transparent); /* Amber rim — brand fingerprint at the moment the surface resolves. Echoes the warmest of the three logomark bars (navy/forest/amber) and restores a hint of warmth to the otherwise cool nav. 40% is the threshold where the eye registers warmth without registering the line as a UI element. */ border-bottom-color: color-mix(in srgb, var(--color-amber) 40%, transparent); box-shadow: 0 8px 28px rgba(26, 58, 82, 0.07); } .sp-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); max-width: var(--sp-content-max); margin: 0 auto; padding: 0 var(--sp-nav-gutter); height: 100%; } @media (min-width: 1024px) { .sp-nav { height: var(--sp-nav-height); } } /* Pages without a hero need top padding so their first section isn't hidden beneath the fixed nav. The nav stays in its initial (translucent navy) state on these pages — only the home hero scroll flips it (see nav.js). */ body[data-page="contact"] main, body[data-page="404"] main, body[data-page="projects"] main { padding-top: var(--sp-nav-height-mobile); } @media (min-width: 1024px) { body[data-page="contact"] main, body[data-page="404"] main, body[data-page="projects"] main { padding-top: var(--sp-nav-height); } } .sp-nav__logo { display: inline-flex; align-items: center; color: var(--color-sand); text-decoration: none; } .sp-nav__logo-img { height: var(--logo-height-nav-mobile, 2.10rem); width: auto; display: block; } @media (min-width: 1024px) { .sp-nav__logo-img { height: var(--logo-height-nav, 5.0rem); } } /* Brand mark variants. Initial nav surface is dark (--color-deep) — the white wordmark (--light variant) sits on it. On `.is-scrolled` the surface flips to sand and the color logo (--dark, designed for dark text on light bg) takes over. */ .sp-nav__logo-img--dark { display: none; } .sp-nav.is-scrolled .sp-nav__logo-img--light { display: none; } .sp-nav.is-scrolled .sp-nav__logo-img--dark { display: block; } .sp-nav__logo-text { font-family: var(--font-display); font-size: 1.5rem; } .sp-nav__drawer { position: fixed; top: 0; right: 0; width: 80%; max-width: 20rem; height: 100vh; background: var(--color-primary); padding: var(--spacing-xl) var(--spacing-lg); transform: translateX(100%); transition: transform var(--motion-duration-md) var(--motion-ease-decelerate); display: flex; flex-direction: column; gap: var(--spacing-lg); box-shadow: var(--shadow-lg); z-index: 101; } body[data-nav-open] .sp-nav__drawer { transform: translateX(0); } /* Scrim — covers the page behind the drawer. Click closes (handled in nav.js). Pointer-events disabled until open so the scrim doesn't block clicks on the page. */ .sp-nav__scrim { position: fixed; inset: 0; background: rgba(20, 20, 19, 0.48); opacity: 0; pointer-events: none; z-index: 100; transition: opacity var(--motion-duration-md) var(--motion-ease-decelerate); } body[data-nav-open] .sp-nav__scrim { opacity: 1; pointer-events: auto; } @media (min-width: 1024px) { /* Desktop layout has the drawer inline; scrim should never appear. */ .sp-nav__scrim { display: none; } } .sp-nav__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-md); } .sp-nav__links a { text-decoration: none; color: var(--color-sand); font-size: 1rem; font-weight: var(--weight-medium); } .sp-nav__links a:hover { opacity: 0.8; } /* Nav CTA — fixed 2.75rem baseline to align with links + lang toggle. */ .sp-nav__cta.sp-button { height: 2.75rem; padding: 0.75rem 1.75rem; font-size: 1rem; font-weight: var(--weight-medium); } @media (min-width: 1024px) { .sp-nav__hamburger { display: none; } .sp-nav__drawer { position: static; width: auto; max-width: none; height: auto; transform: none; background: transparent; padding: 0; flex-direction: row; align-items: center; box-shadow: none; } .sp-nav__links { flex-direction: row; gap: var(--spacing-lg); } } /* Hero --------------------------------------------------------------------- */ /* Every --sp-hero-* custom property consumed below is set (or left unset) by the inline