/* style.css */

/*
  Este archivo contiene estilos CSS personalizados y básicos.
  La mayor parte del diseño del sitio se realiza utilizando clases de Tailwind CSS
  directamente en el archivo index.html.
*/

/* Estilo base para todo el cuerpo del documento.
*/
body {
  /* Define la fuente principal del sitio web como "Inter", con una fuente genérica sans-serif como respaldo. */
  font-family: 'Inter', sans-serif;
  
  /* Habilita el desplazamiento (scroll) suave al hacer clic en enlaces internos (ej: #contacto). */
  scroll-behavior: smooth;
}

/* Clase de utilidad para agregar una sombra al texto.
  Esto mejora la legibilidad del texto cuando se coloca sobre imágenes de fondo complejas.
*/
.text-shadow {
  /* Aplica una sombra negra con un ligero desenfoque y desplazamiento. */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* Estilos de accesibilidad (WCAG) */
:focus {
    outline: 2px solid #005fcc; /* Color de alto contraste */
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
}

/* Respeto por las preferencias 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;
    }
}