/* ═══════════════════════════════════════════════════════════════ Capa base: tipografías autoalojadas, reset, escala tipográfica, contenedor, enlaces y foco. Tipografías · SIL Open Font License 1.1 (autoalojado permitido) Fraunces © The Fraunces Project Authors — titulares Archivo © The Archivo Project Authors — texto y navegación Las rutas de los woff2 son relativas a ESTA hoja (css/ -> ../), así que siguen siendo válidas desde cualquier profundidad: el sitio cuelga de un subdirectorio y no admite rutas absolutas. ═══════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Fraunces'; src: url(../tipografias/fraunces-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url(../tipografias/archivo-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-headers: 'Fraunces', Georgia, 'Times New Roman', serif; /* Escala tipográfica del sistema visual. */ --txt-base: 17px; --txt-entradilla: 18px; --txt-fluido: clamp(16px, 4vw, 19px); --txt-lema: clamp(20px, 2vw, 25px); --txt-h3: 20px; --txt-h2: clamp(28px, 3.2vw, 40px); --txt-h1: clamp(32px, 4vw, 52px); --txt-rotulo: 12.5px; /* * Texto secundario. La Fase 4 escribio 34 «font-size» literales con 10 * valores distintos para dos unicos papeles: el parrafo gris que * acompana a un titular y la linea de servicio (meta, migas, notas, * pies de figura). Se nombran los dos valores y se dejan de repetir. */ --txt-menor: 15.5px; /* parrafo secundario, casi siempre en gris */ --txt-servicio: 14.5px; /* linea de servicio: meta, migas, notas */ /* Altura de la cabecera fija: la usan scroll-padding y anclas. */ --alto-cabecera: 74px; } /* ── RESET ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 30px); } body { margin: 0; background: var(--hueso); color: var(--tinta); font-family: var(--font-body); font-size: var(--txt-base); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* * Con overflow-x:hidden una palabra larga que desborda su caja no * genera barra: se recorta en silencio. El vocabulario del congreso * está lleno de ellas («inmunohistoquímica», «oncohematológico») y * las tarjetas de la Fase 4 son estrechas. lang="es" ya está puesto * en , así que la partición de palabras es correcta. */ overflow-wrap: break-word; hyphens: auto; } img { display: block; max-width: 100%; height: auto; } /* ── TIPOGRAFÍA ───────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-headers); font-weight: 650; line-height: 1.08; letter-spacing: -0.015em; margin: 0; color: var(--tinta); text-wrap: balance; } h1 { font-size: var(--txt-h1); } h2 { font-size: var(--txt-h2); } h3 { font-size: var(--txt-h3); } p { margin: 0 0 1em; text-wrap: pretty; } strong, b { font-weight: 700; } ul, ol { padding-inline-start: 1.2em; } /* ── ENLACES Y FOCO ───────────────────────────────────────────── */ a { color: var(--morado); } a:hover { color: var(--morado-oscuro); } /* * El foco tiene que verse siempre: es la única pista de posición * para quien navega con teclado. Ningún componente lo suprime. */ /* * Único outline:none justificado del sitio.
lleva tabindex="-1" * para que el enlace de salto le lleve el foco de verdad (WebKit no fija * el punto de partida de la navegación secuencial por sí solo). Ese foco * es programático, nunca lo pide el usuario, y un recuadro alrededor de * toda la página al pulsar «Saltar al contenido» solo despista. Los * elementos interactivos conservan su :focus-visible intacto. */ main:focus { outline: none; } :focus-visible { outline: 3px solid var(--morado); outline-offset: 3px; } /* Sobre fondo morado el contorno morado desaparece: se invierte. .chip-inscripcion y .insc-chip nacen rellenos de morado (style-buttons.css) y ahora salen en la cabecera y en el panel móvil de todas las páginas: sin esta inversión su foco sería invisible. */ .en-morado:focus-visible, .cta-principal:focus-visible, .btn-a:focus-visible, .chip-inscripcion:focus-visible, .insc-chip:focus-visible { outline-color: var(--tinta); } /* ── CONTENEDOR Y ANCLAS ──────────────────────────────────────── */ .contenedor { max-width: var(--max); margin: 0 auto; padding: 0 22px; } [id] { scroll-margin-top: calc(var(--alto-cabecera) + 30px); } /* Texto solo para lectores de pantalla. */ .oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── ICONOS EN LÍNEA ──────────────────────────────────────────── */ /* * Los iconos son propios (partials/iconos.php), no una fuente * de iconos de terceros. Toman el color del texto y se alinean con * él, así que no necesitan reglas por icono. */ /* * Aqui NO se declara «fill». Cada icono trae su propio atributo desde * iconos.php: fill="none" los de trazo y fill="currentColor" los de * relleno (las redes sociales). Una propiedad CSS gana siempre a un * atributo de presentacion, asi que un «fill: none» general dejaba los * cuatro iconos de redes como circulos vacios, en la cabecera y en el pie. */ .icono { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex: none; } /* ── UTILIDADES DE MAQUETACIÓN ────────────────────────────────── */ /* * Solo las que usa el marcado de la Fase 1 (cabecera, menú y pie). * No se añaden utilidades «por si acaso»: cada componente trae su * propia hoja. */ .display-flex { display: flex; } .center-childs { align-items: center; justify-content: center; } .space-between { justify-content: space-between; } .width-100 { width: 100%; } .margin-0 { margin: 0; } .padding-0 { padding: 0; } /* ── MOVIMIENTO ───────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Justificación de !important: anula transiciones y animaciones declaradas en cualquier hoja de componente, incluidas las que añada la Fase 4, sin tener que enumerarlas una por una. Es la excepción que recomienda la propia especificación de la consulta de medios. */ *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }