/* ============================================================ OBERLICHT — BASE / RESET / TIPOGRAFÍA ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, picture, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-4); text-transform: uppercase; } h1 { font-size: clamp(2.75rem, 5vw + 1rem, var(--fs-5xl)); font-weight: 700; } h2 { font-size: clamp(2rem, 3vw + 1rem, var(--fs-3xl)); } h3 { font-size: clamp(1.375rem, 1.5vw + 1rem, var(--fs-xl)); } h4 { font-size: var(--fs-md); letter-spacing: var(--ls-wide); } p { margin: 0 0 var(--sp-4); color: var(--color-text-muted); } p:last-child { margin-bottom: 0; } strong { color: var(--color-text); font-weight: 600; } /* Focus visible — accesibilidad */ :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); } ::selection { background: var(--yellow); color: var(--ink); } /* ---- Layout utilities ---- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--sp-9); } @media (max-width: 768px) { .section { padding-block: var(--sp-7); } } .section--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); } .section--dark p { color: var(--gray-400); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); } .section--alt { background: var(--color-bg-alt); } .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: var(--sp-4); top: -60px; background: var(--ink); color: var(--white); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm); z-index: var(--z-overlay); transition: top var(--dur-fast) var(--ease-out); font-family: var(--font-display); letter-spacing: var(--ls-wide); } .skip-link:focus { top: var(--sp-4); } /* ---- Scroll reveal ---- Oculto sólo si JS confirmó su presencia (clase .has-js en , añadida por un script inline antes de pintar). Sin JS, o si falla, el contenido se muestra completo desde el inicio. */ html.has-js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } html.has-js .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.has-js .reveal { opacity: 1; transform: none; transition: none; } } /* stagger children */ .reveal-group > * { transition-delay: calc(var(--stagger, 0) * 70ms); } /* ---- Placeholder de contenido pendiente ---- */ .media-placeholder { position: relative; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--gray-100) 0 12px, var(--paper-dim) 12px 24px); border: 1px dashed var(--gray-400); border-radius: var(--radius-md); color: var(--gray-600); text-align: center; min-height: 220px; font-family: var(--font-body); font-size: var(--fs-xs); padding: var(--sp-4); } .media-placeholder__label { background: var(--white); border: 1px solid var(--gray-200); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-weight: 600; } .pending-tag { display: inline-block; font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; background: var(--yellow-tint); color: var(--yellow-deep); border: 1px solid var(--yellow); padding: 2px var(--sp-2); border-radius: var(--radius-sm); }