/* === RESET === */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* anchor jumps (#historia, #fabrica…) stop below the fixed navbar instead of hiding the section title behind it */ scroll-padding-top: 5.5rem; /* Frena el scroll horizontal a nivel raíz (en mobile el que scrollea es ). Usamos `clip` en vez de `hidden` para NO crear un contenedor de scroll: así no se rompe el position:sticky (efecto "el detalle"). */ overflow-x: clip; } body { min-height: 100vh; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-base); color: var(--c-white-chalk); background: var(--c-black-dark); -webkit-font-smoothing: antialiased; /* Sin optimizeLegibility: fuerza kerning y ligaduras, y en Safari/iOS es una causa conocida de que ciertos pares se monten uno sobre otro —acá el "rt" de "Aberturas" en el título del hero—. Los navegadores ya aplican un kerning correcto por su cuenta, así que no se pierde nada. */ text-rendering: auto; width: 100%; overflow-x: clip; } img, picture, video, svg { display: block; max-width: 100%; } img { height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background: var(--c-celeste-bright); color: var(--c-black-dark); } /* === TYPOGRAPHY === */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .t-hero { font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .t-display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } .t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); } .t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); } .t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 1.3; } .t-lead { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-relaxed); color: var(--c-gray-300); } .t-eyebrow { font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--c-celeste-bright); } .t-label { font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .t-meta { font-size: var(--fs-micro); font-weight: var(--fw-regular); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--c-gray-500); } .t-quote { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: var(--fw-light); line-height: 1.25; letter-spacing: var(--tracking-snug); } .accent { color: var(--c-celeste-bright); } .muted { color: var(--c-gray-500); } /* === LAYOUT PRIMITIVES === */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--section-y); position: relative; } .section--dark { background: var(--c-black-dark); color: var(--c-white-chalk); } .section--soft { background: var(--c-black-soft); color: var(--c-white-chalk); } .section--light { background: var(--c-white-chalk); color: var(--c-black-dark); } /* === ACCESSIBILITY === */ :focus-visible { outline: 2px solid var(--c-celeste-bright); outline-offset: 3px; } .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; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }