/* =================================================================== Montalvo — Landing Page =================================================================== */ :root { --color-black: #111111; --color-graphite: #2b2b2d; --color-ink: #1c1c1c; --color-muted: #6f6f6f; --color-white: #ffffff; --color-line: #e4e2df; --overlay-dark: rgba(15, 13, 12, 0.5); --overlay-strong: rgba(10, 9, 8, 0.62); --font-heading: "Montserrat", "Georgia", serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --container: 1280px; --radius-lg: 24px; --radius-pill: 999px; color-scheme: light; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* `overflow-x: hidden` on forces the vertical axis into its own scroll container, which silently kills `scroll-behavior: smooth` and scrollIntoView({behavior:"smooth"}) in Chromium. `clip` prevents the horizontal overflow the same way without creating that container, so the smooth scroll keeps working. `hidden` stays first as a fallback for browsers too old to know `clip`. */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; background: var(--color-white); color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* Bloquea el scroll del fondo mientras el menú móvil está abierto: sin esto la página sigue desplazándose por detrás del panel. La clase la pone main.js al abrir el menú. */ body.nav-open { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; font-family: var(--font-heading); font-weight: 300; } p { margin: 0; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 40px; } /* Texto disponible para Google y lectores de pantalla, pero invisible en pantalla. Se usa para el H1 del hero, donde la marca es una imagen. No se usa `display:none` porque eso lo ocultaría también a ellos. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 34px; border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 400; font-size: 17px; letter-spacing: -0.02em; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .btn-outline { border: 1px solid currentColor; color: inherit; } .btn-outline:hover { background: rgba(255, 255, 255, 0.12); } .btn-solid { background: var(--color-black); color: var(--color-white); border: 1px solid var(--color-black); } .btn-solid:hover { background: var(--color-white); color: var(--color-black); } /* ---------- Header ---------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 20; color: var(--color-white); background: transparent; transition: background-color 0.25s ease; } .site-header.scrolled { background: rgba(17, 17, 17, 0.9); backdrop-filter: blur(6px); } /* Offsets anchor targets so the fixed header doesn't cover the top of the section when the nav links (#inicio, #nosotros, etc.) jump/scroll to it. Value tracks the header's approximate height per breakpoint. */ #inicio, #nosotros, #servicios, #contacto { scroll-margin-top: 96px; } @media (max-width: 768px) { #inicio, #nosotros, #servicios, #contacto { scroll-margin-top: 72px; } } .header-inner { width: 100%; /* Sin `gap`: la separación logo↔nav se controla con el margin-right del propio logo, que también se anima. Con `gap` quedaría un hueco fijo de 24px incluso con el logo colapsado, y el nav no llegaría al borde. */ display: flex; align-items: center; justify-content: flex-start; padding: 40px 60px; } /* Con el header transparente el logo está COLAPSADO (width: 0), no solo oculto: así no deja hueco y el nav arranca pegado al borde izquierdo. Al hacer scroll, main.js añade .scrolled y el ancho se expande, lo que empuja el nav hacia la derecha mientras el logo se revela. El ancho va en píxeles porque `width: auto` no es animable: 158px = 20px de alto × (347/44), la proporción del viewBox del SVG. Si cambias `height` del logo, recalcula este valor. */ /* ---------- Botón de menú (hamburguesa) ---------- */ /* Oculto en escritorio; el media query de 768px lo activa. */ .nav-toggle { display: none; position: relative; /* Los