/* ========================================================================= Alpha Value Consulting — hoja de estilos principal Sistema de diseño derivado del archivo Figma (Alpha_consulting.fig) ========================================================================= */ /* ---------- Tokens ---------- */ :root { /* Marca */ --gold: #c79e41; --gold-dark: #af8c3c; --gold-soft: #fee9bf; --gold-tint: #fff6e2; /* Neutros */ --ink: #000000; --ink-800: #141414; --ink-700: #262626; --graphite: #414040; --surface: #ffffff; --surface-alt: #f8f7f5; --surface-dark: #0d0d0f; --surface-darker: #060607; --text: #1a1a1a; --text-muted: #6f7176; --text-soft: #828489; --text-on-dark: #d9dade; --border: #e3e1de; --border-dark: rgba(255, 255, 255, 0.12); /* Tipografía */ --font-sans: "Afacad Flux", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; /* Métricas */ --container: 1180px; --radius-sm: 10px; --radius: 16px; --radius-lg: 26px; --shadow-sm: 0 2px 10px rgba(20, 20, 20, 0.06); --shadow: 0 18px 48px rgba(20, 20, 20, 0.12); --section-y: clamp(64px, 9vw, 120px); --header-h: 84px; } /* ---------- Reset ligero ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; font-family: var(--font-sans); font-size: 18px; line-height: 1.6; color: var(--text); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Nota: overflow-x:hidden va solo en , nunca en : ponerlo aquí también convierte a body en su propio contenedor de scroll y rompe position:sticky en sus hijos directos (el header). */ h1, h2, h3, h4, p, li, a, span { overflow-wrap: break-word; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; font-weight: 600; color: var(--ink-800); letter-spacing: -0.01em; } p { margin: 0 0 1rem; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } /* ---------- Utilidades de layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); } .section { padding-block: var(--section-y); } .section--alt { background: var(--surface-alt); } .section--dark { background: var(--surface-dark); color: var(--text-on-dark); } .section--tight { padding-block: clamp(48px, 6vw, 80px); } .eyebrow { display: inline-block; margin-bottom: 14px; font-size: .82rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dark); } .section--dark .eyebrow { color: var(--gold); } .section-head { max-width: 760px; } .section-head--center { margin-inline: auto; text-align: center; } .h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); } .h2 { font-size: clamp(2rem, 4vw, 3.1rem); } .h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--text-soft); text-align: justify; } .section--dark .lead { color: var(--text-on-dark); } .muted { color: var(--text-soft); } .text-center { text-align: center; } .divider { width: 96px; height: 4px; border: 0; margin: 22px 0 0; background: var(--gold); border-radius: 4px; } .section-head--center .divider { margin-inline: auto; } /* ---------- Botones ---------- */ .btn { --btn-bg: var(--gold); --btn-fg: var(--graphite); display: inline-flex; align-items: center; gap: .55em; padding: 14px 30px; border: 2px solid var(--btn-bg); border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(199, 158, 65, .34); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-800); border-color: var(--ink-800); } .section--dark .btn--ghost, .hero .btn--ghost, .cta .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.55); } .btn--ghost:hover { box-shadow: none; background: rgba(0,0,0,.04); } .section--dark .btn--ghost:hover, .hero .btn--ghost:hover, .cta .btn--ghost:hover { background: rgba(255,255,255,.08); } .btn--on-dark { --btn-fg: var(--graphite); } /* ---------- Header / navegación ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; } /* Flota sobre el hero (vídeo) en vez de empujarlo hacia abajo: por eso .hero compensa el alto del header con su propio padding-top más abajo. Arriba del todo el header es invisible (se ve el vídeo detrás); al hacer scroll (wireHeaderScrollState + wireHeroHeaderMark en site.js) se "solidifica" con los mismos colores que ya usaba siempre — sólo cambia CUÁNDO se aplican. En páginas sin .hero justo debajo (ver .site-header--on-hero), el header nunca necesitó texto claro encima de un fondo oscuro, así que mantiene los colores de siempre. */ .site-header.is-scrolled { background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); } .brand { display: flex; align-items: center; } .brand__logo { height: 40px; width: auto; display: block; transition: filter .3s ease; } /* Sólo mientras flota transparente sobre un hero oscuro: el logo (texto negro/gris) se vuelve blanco para que se lea sobre el vídeo. Es el mismo archivo de siempre — recupera sus colores reales apenas hay scroll. */ .site-header--on-hero:not(.is-scrolled) .brand__logo { filter: brightness(0) invert(1); } .nav { display: flex; align-items: center; gap: 6px; } .nav a { padding: 6px 18px; border-radius: 8px; font-size: .98rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; transition: color .2s ease, background .2s ease; } .nav a:hover { color: var(--ink-800); background: var(--surface-alt); } .nav a[aria-current="page"] { color: var(--ink-800); background: var(--gold); } /* Mismo motivo que el logo: texto claro sólo mientras el header está transparente sobre el vídeo del hero; el estado activo (gold-soft) ya tiene su propio fondo y se lee bien en cualquier caso. Sólo aplica a la barra de escritorio: el menú móvil desplegable tiene su propio fondo blanco opaco siempre (ver @media max-width:760px más abajo), así que ahí el texto debe seguir oscuro o quedaría ilegible sobre ese blanco. */ @media (min-width: 761px) { .site-header--on-hero:not(.is-scrolled) .nav a:not([aria-current="page"]) { color: rgba(255, 255, 255, .92); } .site-header--on-hero:not(.is-scrolled) .nav a:hover:not([aria-current="page"]) { color: #fff; background: rgba(255, 255, 255, .14); } } /* Páginas sin .hero justo debajo del header (p. ej. 404): el header no deja de flotar, pero como no hay vídeo detrás, el contenido necesita el mismo espacio que antes ocupaba el header en el flujo normal. */ .site-header:not(.site-header--on-hero) + main { padding-top: var(--header-h); } .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--ink-800); transition: transform .2s ease; } .nav-toggle span::before { transform: translateY(-6px); } .nav-toggle span::after { transform: translateY(4px); } /* El botón ya recibe aria-expanded de wireMobileNav en site.js; sólo se añade la transición visual de hamburguesa → X, sin tocar el JS. */ .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(0) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(0) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--surface-dark); color: #fff; overflow: hidden; /* Compensa que el header ya no reserva espacio en el flujo (ahora flota encima, fixed): el vídeo/velo (position:absolute, inset:0) igual llenan desde el borde real de arriba, sólo el contenido (.hero__inner, en flujo normal) se corre hacia abajo para no quedar debajo del logo/nav. */ padding-top: var(--header-h); } /* Vídeo de fondo (inyectado por wireHeroVideo en site.js): cubre el hero detrás de todo lo demás; si no llega a cargar, el fondo oscuro de .hero ya deja el texto legible por sí solo. */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .hero__video { display: none; } } /* Variante para YouTube/Drive (buildHeroMedia en site.js): un