/* Estilos generales */
html, body {
    font-family: 'Roboto', sans-serif; /* Usa la fuente Roboto como predeterminada */
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
    height: 100%; /* El documento siempre ocupa toda la altura */
    display: flex;
    flex-direction: column; /* Organiza el contenido en una columna */
}

.content-wrapper {
    flex: 1; /* Toma todo el espacio disponible entre el header y el footer */
    display: flex;
    flex-direction: column;
}

header {
    display: flex;
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: center; /* Centra el contenido de texto horizontalmente */
    padding: 1rem 2rem;
    background-color: #1F2642;
    position: relative; /* Permite posicionar el logo de forma independiente */
    color: white;
    font-family: 'Roboto', sans-serif; /* Usa la fuente Roboto como predeterminada */
}

header img {
    max-width: 150px;
    height: auto; /* Mantiene proporción */
}

header h1 {
    font-size: 2rem;
    margin: 0;
    text-align: center; /* Asegura que el texto esté centrado */
    flex-grow: 1; /* Hace que el texto ocupe el espacio central */
    font-family: 'Roboto', sans-serif; /* Usa la fuente Roboto como predeterminada */
}

nav {
    background-color: #004080; /* Azul más claro */
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Roboto', sans-serif; /* Usa la fuente Roboto como predeterminada */
}

.hero-image {
    background-image: url('imagen-grande.jpg'); /* Ruta de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra todo el espacio */
    background-position: center; /* Centra la imagen */
    width: 100%; /* Ocupa todo el ancho */
    height: calc(100vh - 80px); /* Ocupa la altura de la pantalla menos el header (ajusta 80px según el header) */
    position: relative; /* Necesario para posicionar texto dentro */
    margin: 0; /* Evita márgenes no deseados */
    padding: 0; /* Elimina padding accidental */
}

.hero-text {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el punto de anclaje al centro */
    color: white; /* Texto blanco */
    text-align: center; /* Centra el texto */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mejor visibilidad */
    padding: 1rem; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados opcionales */
    font-family: 'Roboto', sans-serif; /* Usa la fuente Roboto como predeterminada */
}

/* Estilos para la categoría de productos */
.product-category {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se ajusten en múltiples filas si es necesario */
    gap: 1.5rem; /* Espaciado entre las tarjetas */
    justify-content: center; /* Centra las tarjetas horizontalmente */

}

.product-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 1rem;
    background-color: white;
    text-align: center;
    width: 250px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Mantiene el color de texto */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: scale(1.05); /* Agranda ligeramente al pasar el cursor */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.product-card img {
    width: 100%; /* Ocupa todo el ancho de la tarjeta */
    max-height: 200px; /* Limita la altura de la imagen */
    object-fit: cover; /* Asegura que la imagen cubra bien el espacio sin distorsionarse */
    border-radius: 5px; /* Bordes redondeados opcionales */
}

#detalle-producto {
    padding: 2rem;
    text-align: center;
}

#detalle-producto img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Estilos para el formulario de contacto */
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto; /* Centrado del formulario */
    padding: 2rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos de los campos de texto */
form input,
form textarea {
    padding: 0.8rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    width: 100%;
}

form input:focus,
form textarea:focus {
    border-color: #004080; /* Borde azul cuando el campo está enfocado */
    box-shadow: 0 0 5px rgba(0, 64, 128, 0.5); /* Sombra cuando el campo está enfocado */
}

/* Estilos del botón de envío */
form button {
    padding: 1rem;
    background-color: #004080;
    color: white;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #003366; /* Cambia de color al pasar el mouse */
}

/* Estilos del encabezado y texto */
#contact h2 {
    color: #004080; /* Azul para el título */
    text-align: center;
}

#contact p {
    text-align: center;
    font-size: 1.2rem;
    color: #555;
}

/* Sección general */
section {
    padding: 2rem;
}

section h2 {
    color: #004080;
}

/* Estilos para el footer */
footer {
    margin-top: auto; /* Empuja el footer al final del contenedor */
    background-color: #1F2642;
    color: white;
    text-align: center;
    padding: 0.5rem;
    font-family: 'Roboto', sans-serif; /* Usa la fuente Roboto como predeterminada */
}

/* Estilos para el botón de WhatsApp */
.whatsapp-button {
    margin-top: 1rem; /* Reducción del margen superior */
    text-align: center;
}

.whatsapp-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25d366; /* Color verde claro */
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    font-size: 1rem;
}

.whatsapp-button a:hover {
    background-color: #128c7e; /* Color verde más oscuro al pasar el ratón */
}