/* ============================================================ base.css — Rastro Fitness Reinicio, tipografía base y las utilidades que usa todo el sitio. Ningún valor literal: todo sale de tokens.css. ============================================================ */ /* --- Reinicio ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* La tipografía del cuerpo NO se declara acá: el lleva la clase .t-body-md, que es el mismo estilo de la escala que usa cualquier párrafo. Duplicar el tamaño en este archivo era tener dos lugares donde cambiarlo. Y sin overflow-x: hidden a propósito: esa línea tapaba en silencio cualquier desborde horizontal, que es justo lo que hay que ver. */ body { min-height: 100svh; display: flex; flex-direction: column; background-color: var(--color-bg-base); color: var(--color-text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* El pie siempre abajo aunque la página tenga poco contenido. */ main { flex: 1 0 auto; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } /* Los titulares no heredan el peso del navegador: el peso lo pone la clase de la escala tipográfica (.t-display-l y compañía). */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: inherit; } ul, ol { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; border-radius: var(--radio-none); } button { cursor: pointer; } /* Safari le pone una cruz y un fondo propio a los type="search". */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: var(--hairline) solid var(--color-border-subtle); } code, kbd, samp, pre { font-family: var(--fuente-mono); } /* --- Foco --------------------------------------------------- Canto vivo también acá: un contorno de 2 px, sin radio. */ :focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } ::selection { background-color: var(--color-accent-base); color: var(--color-accent-on); } /* --- Contenedor ---------------------------------------------- */ .contenedor { width: 100%; max-width: var(--ancho-maximo); margin-inline: auto; padding-inline: var(--margen-mobile); } @media (min-width: 900px) { .contenedor { padding-inline: var(--margen-desktop); } } /* --- Retícula de hairlines ---------------------------------- La separación entre piezas no es un recuadro por pieza: el contenedor se pinta del color de línea y los hijos se separan con 1 px de hueco. Esa línea continua es la que le da unidad al sitio (CLAUDE.md §5.6). */ .reticula { display: grid; gap: var(--hairline); background-color: var(--color-border-subtle); } .reticula > * { background-color: var(--color-bg-base); } /* Variante para cuando la retícula va sobre una superficie elevada. */ .reticula--superficie > * { background-color: var(--color-bg-surface); } /* Variante para cuando la CANTIDAD de celdas la decide el cliente. La retícula pintada da por sentado que la grilla está completa: pinta el contenedor y deja que los hijos lo tapen. Con cinco marcas oficiales en cuatro columnas, las tres celdas que faltan no las tapa nadie y queda una losa de #1F1F1F de mil píxeles de ancho a la vista. Acá la línea la dibujan las celdas: el contenedor cierra arriba y a la izquierda, y cada hijo cierra a su derecha y abajo. Donde no hay celda no hay línea, que es lo correcto —una fila incompleta se lee como lo que es— y no queda ningún fondo pintado sin tapar. Regla para elegir: cantidad fija por diseño -> .reticula. Cantidad que sale de los datos -> .reticula--celdas. */ .reticula--celdas { gap: 0; background-color: transparent; border-top: var(--hairline) solid var(--color-border-subtle); border-left: var(--hairline) solid var(--color-border-subtle); } .reticula--celdas > * { background-color: transparent; border-right: var(--hairline) solid var(--color-border-subtle); border-bottom: var(--hairline) solid var(--color-border-subtle); } /* --- Utilidades ---------------------------------------------- */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Enlace de salto: invisible hasta que llega el foco por teclado. */ .saltar { position: absolute; top: 0; left: 0; z-index: 100; padding: var(--espaciado-12) var(--espaciado-20); background-color: var(--color-accent-base); color: var(--color-accent-on); transform: translateY(-120%); } .saltar:focus-visible { transform: translateY(0); outline-offset: -4px; } /* Íconos de interfaz. El SVG viene con width y height propios; la clase evita que el `height: auto` del reinicio le cambie la proporción y que un contenedor flexible lo achique. */ .icono { flex: 0 0 auto; width: 24px; height: 24px; } /* Bloquea el scroll del cuerpo mientras hay un diálogo abierto. Lo prende y lo apaga assets/js/nav.js: sin esto, el dedo mueve la página de atrás en vez del cajón. */ .sin-scroll { overflow: hidden; } .texto-secundario { color: var(--color-text-secondary); } .texto-acento { color: var(--color-accent-text); } /* Índice de sección: [ 01 ]. */ .indice::before { content: "[ "; } .indice::after { content: " ]"; } /* --- Movimiento --------------------------------------------- Quien pidió menos movimiento no ve ninguno. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; } }