1  /* Fuente Inter importada de Google Fonts */
 2  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 3  
 4  /* Reset y estilos base */
 5  * {
 6    box-sizing: border-box;
 7  }
 8  
 9  html {
10    scroll-behavior: smooth;
11  }
12  
13  body {
14    font-family: var(--font-primary);
15    line-height: 1.5;
16    margin: 0;
17    padding: 0;
18    -webkit-font-smoothing: antialiased;
19    -moz-osx-font-smoothing: grayscale;
20  }
21  
22  a {
23    color: var(--link-color);
24    text-decoration: none;
25  }
26  
27  a:hover {
28    text-decoration: underline;
29  }
30  
31  button, input, select, textarea {
32    font-family: inherit;
33    font-size: inherit;
34    border-radius: var(--border-radius);
35    transition: all var(--transition-speed);
36  }
37  
38  input:focus, 
39  select:focus, 
40  textarea:focus, 
41  button:focus {
42    outline: none;
43    border-color: var(--primary);
44    box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.3);
45  }
46  
47  img {
48    max-width: 100%;
49    height: auto;
50  }
51  
52  /* Estilo para contenedores */
53  .container {
54    width: 100%;
55    max-width: var(--content-max-width);
56    margin: 0 auto;
57    padding: 0 1rem;
58  }
59  
60  /* Utilidades */
61  .visually-hidden {
62    position: absolute;
63    width: 1px;
64    height: 1px;
65    padding: 0;
66    margin: -1px;
67    overflow: hidden;
68    clip: rect(0, 0, 0, 0);
69    white-space: nowrap;
70    border-width: 0;
71  }
72  
73  /* Mejoras de accesibilidad */
74  *:focus-visible {
75    outline: 2px solid var(--primary);
76    outline-offset: 2px;
77  }
78  
79  /* Animaciones */
80  @keyframes fadeIn {
81    from { opacity: 0; }
82    to { opacity: 1; }
83  }
84  
85  .animate-fade-in {
86    animation: fadeIn 0.3s ease-in-out;
87  }
88  
89  /* Estilos para dispositivos móviles */
90  @media (max-width: 768px) {
91    html {
92      font-size: 14px;
93    }
94    
95    .container {
96      padding: 0 0.5rem;
97    }
98  }