/* ==========================================================================
ARTEFACTO VISUAL — Base Styles
base.css · v1.0 · 2026
Estructura:
1. Carga tipográfica (@font-face + Google Fonts)
2. Reset moderno (box-sizing, márgenes, comportamiento base)
3. Elemento raíz y scroll
4. Tipografía base
5. Elementos interactivos base
6. Media y embeds
7. Accesibilidad
8. Utilidades de reset puntuales
========================================================================== */
/* --------------------------------------------------------------------------
1. CARGA TIPOGRÁFICA
Montserrat: Google Fonts, libre y gratuita. Fuente de display (títulos).
Roboto Flex: Google Fonts, libre y gratuita. Variable font con eje wdth.
Se usa a wdth=87.5 (semi-condensed) para textos de interfaz.
Roboto Mono: Google Fonts, libre y gratuita. Fuente monoespaciada.
Esta etiqueta va en el de cada HTML, antes de los CSS:
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
2. RESET MODERNO
Basado en las mejores prácticas actuales (2024-2026).
Más quirúrgico que normalize.css, menos agresivo que un reset total.
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Evita overflow horizontal inesperado sin romper position: sticky
Se aplica solo al main, no al html/body */
/* Mejora la herencia de fuentes en formularios */
input,
button,
textarea,
select {
font: inherit;
}
/* Elimina estilos de lista solo cuando tienen rol de navegación */
ul[role="list"],
ol[role="list"] {
list-style: none;
}
/* Imágenes y media responsivos por defecto */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* Evita que el texto de elementos inline-block desborde */
p,
h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* Elimina decoración de enlaces en contextos de navegación */
a {
color: inherit;
text-decoration: none;
}
/* --------------------------------------------------------------------------
3. ELEMENTO RAÍZ Y SCROLL
-------------------------------------------------------------------------- */
:root {
/* Scroll suave global */
scroll-behavior: smooth;
/* Previene salto de layout al aparecer scrollbar en algunos SO */
scrollbar-gutter: stable;
}
html {
/* Tamaño base: 16px. No cambiar a porcentaje para respetar preferencias
de accesibilidad del usuario */
font-size: 16px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
min-height: 100dvh;
background-color: var(--color-bg-page);
color: var(--color-text-primary);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* --------------------------------------------------------------------------
4. TIPOGRAFÍA BASE
Los encabezados usan Montserrat (display).
Los párrafos y textos de interfaz usan Roboto Flex a wdth=87.5 (body).
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-text-primary);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); font-weight: var(--weight-medium); }
p {
max-width: 68ch;
color: var(--color-text-secondary);
line-height: var(--leading-normal);
}
/* Párrafos dentro de secciones de contenido largo */
p + p {
margin-top: var(--space-4);
}
strong, b {
font-weight: var(--weight-bold);
color: var(--color-text-primary);
}
em, i {
font-style: italic;
}
small {
font-size: var(--text-sm);
color: var(--color-text-tertiary);
}
/* SVGs dentro de botones no deben interceptar eventos de click */
button svg,
a svg {
pointer-events: none;
}
/* Código inline */
code {
font-family: var(--font-mono);
font-size: 0.875em;
background-color: var(--color-bg-sunken);
border: 0.5px solid var(--color-border-default);
border-radius: var(--radius-sm);
padding: 0.1em 0.35em;
color: var(--color-text-primary);
}
/* Bloque de código */
pre {
font-family: var(--font-mono);
font-size: var(--text-sm);
background-color: var(--color-bg-sunken);
border: 0.5px solid var(--color-border-default);
border-radius: var(--radius-md);
padding: var(--space-4);
overflow-x: auto;
line-height: var(--leading-snug);
}
pre code {
background: none;
border: none;
padding: 0;
font-size: inherit;
}
/* Citas */
blockquote {
border-left: 3px solid var(--color-brand-primary);
padding-left: var(--space-4);
margin: var(--space-6) 0;
color: var(--color-text-secondary);
font-style: italic;
}
/* Línea horizontal */
hr {
border: none;
border-top: 0.5px solid var(--color-border-default);
margin: var(--space-8) 0;
}
/* Listas */
ul, ol {
padding-left: var(--space-6);
color: var(--color-text-secondary);
}
li {
line-height: var(--leading-normal);
}
li + li {
margin-top: var(--space-2);
}
/* Enlace base */
a {
color: var(--color-text-link);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: var(--transition-colors);
}
a:hover {
color: var(--color-text-link-hover);
text-decoration-thickness: 2px;
}
/* Enlace dentro de navegación (sin subrayado — se gestiona en components.css) */
nav a {
text-decoration: none;
}
/* --------------------------------------------------------------------------
5. ELEMENTOS INTERACTIVOS BASE
-------------------------------------------------------------------------- */
/* Botón reset — la apariencia real va en components.css */
button {
cursor: pointer;
background: none;
border: none;
border-radius: var(--radius-md);
color: inherit;
transition: var(--transition-base);
}
button:disabled {
cursor: not-allowed;
opacity: 0.48;
}
/* Inputs reset base */
input,
textarea,
select {
background-color: var(--color-bg-surface);
border: 0.5px solid var(--color-border-default);
border-radius: var(--radius-md);
color: var(--color-text-primary);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input::placeholder,
textarea::placeholder {
color: var(--color-text-tertiary);
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 3px var(--color-brand-primary-subtle);
}
/* Checkbox y radio */
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--color-brand-primary);
width: 1rem;
height: 1rem;
cursor: pointer;
}
/* Tabla base */
table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
th {
text-align: left;
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
border-bottom: 0.5px solid var(--color-border-default);
padding: var(--space-2) var(--space-3);
}
td {
padding: var(--space-2) var(--space-3);
border-bottom: 0.5px solid var(--color-border-subtle);
color: var(--color-text-primary);
vertical-align: top;
}
/* --------------------------------------------------------------------------
6. MEDIA Y EMBEDS
-------------------------------------------------------------------------- */
img {
height: auto;
object-fit: cover;
}
/* Contenedor para iframes responsivos (ratio 16:9) */
.embed-responsive {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: var(--radius-lg);
}
.embed-responsive iframe,
.embed-responsive video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Figura con caption */
figure {
margin: 0;
}
figcaption {
font-size: var(--text-sm);
color: var(--color-text-tertiary);
margin-top: var(--space-2);
text-align: center;
}
/* --------------------------------------------------------------------------
7. ACCESIBILIDAD
-------------------------------------------------------------------------- */
/* Ocultar visualmente pero mantener para lectores de pantalla */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Skip link — permite saltar al contenido principal con teclado */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
background: var(--color-brand-primary);
color: var(--color-btn-primary-text);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-weight: var(--weight-medium);
z-index: var(--z-toast);
transition: top var(--transition-fast);
}
.skip-link:focus {
top: var(--space-4);
}
/* Respetar preferencia de movimiento reducido */
@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;
}
}
/* Focus visible para navegación con teclado */
:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Eliminar outline por defecto solo cuando focus-visible está soportado */
:focus:not(:focus-visible) {
outline: none;
}
/* --------------------------------------------------------------------------
8. UTILIDADES DE RESET PUNTUALES
Solo clases de reset, no de layout ni estética.
Las utilidades de layout van en layout.css.
-------------------------------------------------------------------------- */
.list-reset {
list-style: none;
padding: 0;
margin: 0;
}
.link-reset {
color: inherit;
text-decoration: none;
}
.btn-reset {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: inherit;
font: inherit;
}