@import "tailwindcss"; /* Estilos personalizados con enfoque minimalista - MODO OSCURO */ /* Estilos personalizados con enfoque minimalista - MODO OSCURO */ /* Fuente base para el cuerpo */ body { font-family: 'Inter', sans-serif; /* Estilos base del modo oscuro aplicados mediante clases Tailwind en */ /* background-color: #111827; */ /* bg-gray-900 */ /* color: #d1d5db; */ /* text-gray-300 */ /* -webkit-font-smoothing: antialiased; */ /* -moz-osx-font-smoothing: grayscale; */ } /* Aplicar Poppins a los encabezados */ h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; /* Color base para encabezados en modo oscuro (sobrescrito por clases Tailwind) */ /* color: #ffffff; */ /* text-white */ } /* Fondo del Hero para modo oscuro */ .hero-bg-dark { /* Imagen oscura o adecuada para texto claro */ background-image: url('/img2.jpg'); /* Fondo gris oscuro, texto amarillo */ background-size: cover; background-position: center; } /* --- Estilos de Componentes para Modo Oscuro --- */ /* Botones */ .btn { display: inline-block; padding: 0.75rem 2rem; /* Equivalente a px-8 py-3 */ border-radius: 0.375rem; /* Equivalente a rounded-md */ font-weight: 600; /* Equivalente a font-semibold */ text-align: center; transition: all 0.3s ease-in-out; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Equivalente a shadow-sm */ /* Estilos de foco (pueden requerir JS o :focus-visible) */ outline: none; } .btn:hover { /* Sombra sutil puede no ser muy visible en modo oscuro */ /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */ filter: brightness(110%); /* Aclarar ligeramente en hover */ } /* Botón Primario (Amarillo) */ .btn-primary { background-color: #f59e0b; /* bg-yellow-500 */ color: #111827; /* text-gray-900 (o un gris muy oscuro) */ /* Ajustar offset de anillo de foco para fondo oscuro */ /* focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 focus:ring-offset-gray-900 */ } .btn-primary:hover { background-color: #fcd34d; /* hover:bg-yellow-400 */ filter: brightness(110%); } /* Botón Secundario (Estilo Outline Oscuro) */ .btn-secondary-dark { border: 2px solid #000000; /* border-2 border-gray-600 (Borde gris oscuro) */ /* Ajustar offset de anillo de foco para fondo oscuro */ /* focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-gray-900 */ } .btn-secondary-dark:hover { background-color: #374151; /* hover:bg-gray-700 (Fondo gris oscuro al pasar el ratón) */ color: #ffffff; /* hover:text-white */ border-color: #374151; /* hover:border-gray-700 */ filter: none; /* Resetear filtro */ } /* Tarjetas de servicio modo oscuro */ .service-card-dark { background-color: #1f2937; /* bg-gray-800 */ padding: 2rem; /* p-8 */ border-radius: 0.5rem; /* rounded-lg */ border: 1px solid #374151; /* border border-gray-700 */ transition: all 0.3s ease-in-out; text-align: left; } .service-card-dark:hover { border-color: #f59e0b; /* hover:border-yellow-500 */ background-color: #374151; /* hover:bg-gray-700 */ /* transform: translateY(-2px); */ /* Efecto sutil de elevación opcional */ } .service-card-dark i { color: #f59e0b; /* text-yellow-500 */ margin-bottom: 1rem; /* mb-4 */ font-size: 1.875rem; /* text-3xl */ line-height: 2.25rem; } /* Estilos para h3, p, a dentro de .service-card-dark son manejados por clases Tailwind en el HTML */ /* No es necesario definirlos aquí si se usan clases como text-white, text-gray-400, text-yellow-400 en el HTML */ /* Footer */ /* Los estilos del footer ya son oscuros, pero ajustamos hover de enlaces */ footer .social-links a { color: #6b7280; /* text-gray-500 */ transition: color 0.3s ease-in-out; margin-left: 0.5rem; /* mx-2 */ margin-right: 0.5rem; } footer .social-links a:hover { color: #fcd34d; /* hover:text-yellow-400 */ } /* --- Clases Utilitarias Adicionales (Opcional) --- */ /* Si no usas Tailwind en el body, puedes definir aquí la clase .dark-mode */ .dark-mode { /* Asegura que el fondo base sea oscuro si no se aplica directamente en body */ background-color: #111827; /* bg-gray-900 o el tono base deseado */ color: #d1d5db; /* Color de texto base */ } /* Nota: Este CSS complementa las clases de Tailwind usadas en el HTML. */ /* Las clases de Tailwind en el HTML tienen prioridad para muchos estilos. */ /* Este archivo define estilos base, clases personalizadas (.hero-bg-dark, .service-card-dark, .btn-secondary-dark) */ /* y algunos estilos hover/focus. */