/* =================================================================== GLYXI — BASE: reset, tipografía global y utilidades de layout =================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-base); color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--transition); } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: 0.02em; } p { color: var(--text-muted); } button { font-family: inherit; cursor: pointer; border: none; background: none; } :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; } /* ── Layout helpers ── */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); } /* Sección alterna: mismo tema oscuro con un sutil realce dorado (NUNCA blanco) */ .section--alt { background: radial-gradient(90% 70% at 50% 0%, rgba(201, 162, 75, 0.06), transparent 60%), var(--c-black-soft); border-block: 1px solid var(--border); } /* El loader de página tiene su CSS crítico en línea en el (carga instantánea). */ /* ── Tipografía decorativa ── */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-gold); display: inline-block; margin-bottom: 1rem; } .text-gold { background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-gold); /* fallback */ } .section-head { max-width: 640px; margin-bottom: 3rem; } .section-head--center { margin-inline: auto; text-align: center; } .section-head h2 { margin-bottom: 1rem; } /* ── Accesibilidad ── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 1000; background: var(--c-gold); color: var(--c-black); padding: 0.6rem 1rem; border-radius: var(--radius-sm); transition: top var(--transition); } .skip-link:focus { top: 1rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }