/* ========================================================================== Reset ligero y tipografía base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Compensa el header fijo al navegar por anclas, con algo de respiro */ scroll-padding-top: calc(var(--header-h) + 24 * var(--u)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; overflow-x: hidden; background: var(--white); color: var(--ink); font-family: var(--font); font-weight: 400; line-height: var(--lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, dl, dd, figure { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img { display: block; max-width: 100%; height: auto; } strong { font-weight: 700; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :where(a, button, input, [tabindex]):focus-visible { outline: calc(3 * var(--u)) solid var(--slate); outline-offset: calc(3 * var(--u)); border-radius: calc(4 * var(--u)); } .skip-link { position: absolute; left: calc(24 * var(--u)); top: calc(-100 * var(--u)); z-index: 200; padding: calc(12 * var(--u)) calc(20 * var(--u)); background: var(--slate); color: var(--cream); font-size: calc(16 * var(--u)); font-weight: 700; border-radius: var(--r-pill); transition: top var(--dur) var(--ease); } .skip-link:focus-visible { top: calc(24 * var(--u)); } /* El destino del enlace de salto no debe dibujar anillo al recibir el foco mediante programa, pero sí conservarlo para quien navega con teclado. */ #contenido:focus { outline: none; } /* --- Títulos de sección compartidos -------------------------------------- */ .section-title { font-size: calc(75 * var(--u)); font-weight: 700; line-height: var(--lh); color: var(--slate); text-align: center; } .section-title--left { text-align: left; } .section-title--ink { color: var(--ink); } .section-sub { font-size: calc(50 * var(--u)); font-weight: 500; line-height: var(--lh); color: var(--slate); text-align: center; } .section-sub--ink { color: var(--ink); } /* --- Entradas de contenido (data-reveal) --------------------------------- Calcadas del video: fundido + 45 px hacia arriba en 0,28 s con freno al final. reveal.js pone `is-visible` y el retardo de escalonado. El estado oculto sólo aplica con la clase `js` (que el retira si los módulos no llegan a ejecutarse), así el contenido nunca queda invisible. */ .js [data-reveal] { opacity: 0; transform: translateY(calc(45 * var(--u))); } .js [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }