/* ==========================================================
   base.css — Reinicio y estilos generales
   ========================================================== */

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
     scroll-padding-top: var(--alto-encabezado);
   }
   
   body {
     margin: 0;
     font-family: var(--fuente-base);
     font-size: var(--texto-base);
     line-height: 1.6;
     color: var(--color-texto);
     background: var(--color-fondo);
   }
   
   img {
     max-width: 100%;
     display: block;
   }
   
   a {
     color: var(--color-primario);
   }
   
   h1,
   h2,
   h3 {
     line-height: 1.2;
     margin: 0 0 var(--espacio-2);
   }
   
   /* Enlace para saltar al contenido (accesibilidad con teclado) */
   .salto-contenido {
     position: absolute;
     left: -999px;
   }
   
   .salto-contenido:focus {
     left: var(--espacio-2);
     top: var(--espacio-2);
     z-index: 100;
     padding: var(--espacio-1) var(--espacio-2);
     background: var(--color-acento);
     color: var(--color-texto);
   }
   
   /* Contorno visible al navegar con teclado */
   :focus-visible {
     outline: 3px solid var(--color-acento);
     outline-offset: 2px;
   }
   
   /* Respeta a quienes desactivan animaciones en su sistema */
   @media (prefers-reduced-motion: reduce) {
     html {
       scroll-behavior: auto;
     }
   
     * {
       transition: none !important;
       animation: none !important;
     }
   }