* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

header {
    display: flex;
    align-items: center;
    padding: 2rem;
    justify-content: space-between;
    background-image: url(../imagenes/fondo\ heard.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}



.logo {
    max-height: 4rem;

}
.nav-list{
    list-style-type: none;
    display: flex;
    font-size: 1.5rem;
    gap: 2rem;
}

.nav-list li a{
    text-decoration: none;
    color: rgb(255, 255, 255);
}

footer {
    background-color: rgb(129, 247, 255); /* Color de fondo oscuro */
    color: #000000; /* Color del texto claro */
    padding: 20px 0; /* Espaciado interno superior/inferior */
    text-align: center; /* Centra el texto y los elementos internos */
    width: 100%; /* Ocupa todo el ancho */
    /* Para pie de página "pegajoso" (sticky footer): */
    /* position: sticky; */ /* Opcional: si quieres que se pegue al final de la ventana de visualización al hacer scroll */
    /* bottom: 0; */
}

.footer-content {
    max-width: 1200px; /* Ancho máximo para el contenido del footer */
    margin: 0 auto; /* Centra el contenido del footer */
    display: flex; /* Usa flexbox para alinear los elementos internos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: space-around; /* Distribuye el espacio entre los elementos */
    align-items: center; /* Centra verticalmente los elementos */
}

footer p {
    margin: 0 10px; /* Espaciado alrededor del texto de copyright */
    font-size: 0.9em;
}

footer nav ul {
    list-style: none; /* Quita los puntos de la lista */
    padding: 0;
    margin: 0 10px;
    display: flex; /* Alinea los enlaces horizontalmente */
    flex-wrap: wrap;
    justify-content: center;
}

footer nav ul li {
    margin: 0 10px; /* Espaciado entre los enlaces */
}

footer nav ul li a {
    color: #000000; /* Color de los enlaces */
    text-decoration: none; /* Quita el subrayado de los enlaces */
    transition: color 0.3s ease; /* Transición suave al pasar el ratón */
}

footer nav ul li a:hover {
    color: #eb1c1c; /* Cambia el color al pasar el ratón */
}

.social-links {
    margin: 0 10px;
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacio entre los iconos de redes sociales */
}

.social-links img {
    width: 24px; /* Tamaño de los iconos */
    height: 24px;
    vertical-align: middle;
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Apila los elementos en pantallas pequeñas */
        text-align: center;
    }

    footer p,
    footer nav ul,
    .social-links {
        margin-bottom: 10px; /* Espaciado entre los elementos apilados */
    }

}
.primeraparte {
    /* Fondo y espaciado */
    background-image: url(../imagenes/fondo\ 2.png);
    background-size: cover;
    background-repeat:  no-repeat;
    padding: 40px 20px; /* Espaciado interno: 40px arriba/abajo, 20px izquierda/derecha */
    text-align: center; /* Centra el texto */
    font-family: 'Arial', sans-serif; /* Fuente general */
    color: #333; /* Color de texto oscuro */
}

.primeraparte h1 {
    /* Estilos para el título principal */
    color: #ffffff; /* Un azul más oscuro para el título */
    font-size: 2.8em; /* Tamaño de fuente grande */
    margin-bottom: 15px; /* Espacio debajo del título */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Sombra suave para el texto */
}

.primeraparte p {
    /* Estilos para el párrafo */
    font-size: 1.2em; /* Tamaño de fuente para el párrafo */
    line-height: 1.6; /* Espaciado entre líneas para mejor lectura */
    max-width: 800px; /* Ancho máximo para el párrafo para que no se extienda demasiado */
    margin: 0 auto; /* Centra el párrafo dentro de su contenedor */
    color: #000000; /* Un color de texto un poco más claro para el párrafo */
}

/* Opcional: Estilos para cuando el mouse pasa por encima (efecto interactivo) */
.primeraparte:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra al pasar el mouse */
    transform: translateY(-5px); /* Pequeño levantamiento */
    transition: all 0.3s ease-in-out; /* Transición suave para los efectos */
}

/* Opcional: Estilos para pantallas más pequeñas (diseño responsivo) */
@media (max-width: 768px) {
    .primeraparte {
        padding: 30px 15px; /* Reduce el padding en pantallas pequeñas */
    }

    .primeraparte h1 {
        font-size: 2em; /* Reduce el tamaño del título */
    }

    .primeraparte p {
        font-size: 1em; /* Reduce el tamaño del párrafo */
    }
}
.container {
            max-width: 900px;
            margin: auto;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px #f7f7f7;
        }
        h1, h2 {
            color: #0011ff;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        p {
            margin-bottom: 10px;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        ul li {
            background: #e9e9e900;
            margin-bottom: 8px;
            padding: 10px;
            border-radius: 4px;
        }
        strong {
            color: #0056b3;
        }
    
/*areae producto*/
.product-segment {
    padding: 40px 20px; /* Espaciado interno superior/inferior y lateral */
    text-align: center; /* Centra el título principal */
    background-color: #201919; /* Un color de fondo suave para la sección */
    font-family: Arial, sans-serif; /* Fuente general para la sección */
}

.product-segment h2 {
    font-size: 2.5em; /* Tamaño de fuente para el título principal */
    color: #333; /* Color del texto del título */
    margin-bottom: 40px; /* Espacio debajo del título */
}

/* Contenedor de la cuadrícula de productos */
.product-grid {
    display: grid; /* Usa CSS Grid para la disposición de las tarjetas */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
    gap: 30px; /* Espacio entre las tarjetas de productos */
    max-width: 1200px; /* Ancho máximo de la cuadrícula */
    margin: 0 auto; /* Centra la cuadrícula en la página */
}

/* Estilos para cada tarjeta de producto individual */
.product-card {
    background-color: #fff; /* Fondo blanco para las tarjetas */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave para un efecto 3D */
    padding: 20px; /* Espaciado interno de la tarjeta */
    display: flex; /* Flexbox para organizar el contenido interno */
    flex-direction: column; /* Apila los elementos verticalmente */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    align-items: center; /* Centra los elementos horizontalmente */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave al pasar el ratón */
}

.product-card:hover {
    transform: translateY(-5px); /* Pequeño levantamiento al pasar el ratón */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al pasar el ratón */
}

/* Estilos para las imágenes dentro de las tarjetas */
.product-card .imagenes {
    max-width: 100%; /* La imagen nunca excederá el ancho de su tarjeta */
    height: 200px; /* Altura fija para las imágenes */
    object-fit: contain; /* Ajusta la imagen dentro del espacio, manteniendo su proporción */
    border-radius: 5px; /* Bordes ligeramente redondeados para las imágenes */
    margin-bottom: 15px; /* Espacio debajo de la imagen */
}

/* Estilos para los títulos de los productos */
.product-card h3 {
    font-size: 1.5em; /* Tamaño de fuente para el título del producto */
    color: #333;
    margin-bottom: 10px; /* Espacio debajo del título del producto */
    text-align: center; /* Centra el texto del título */
}

/* Estilos para la descripción del producto */
.product-card p {
    font-size: 0.95em; /* Tamaño de fuente para la descripción */
    color: #666;
    line-height: 1.5; /* Altura de línea para mejor legibilidad */
    margin-bottom: 15px; /* Espacio debajo de la descripción */
    text-align: center; /* Centra el texto de la descripción */
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible */
}

/* Estilos para el precio del producto */
.product-card .price {
    font-size: 1.8em; /* Tamaño de fuente para el precio */
    color: #e67e22; /* Un color distintivo para el precio */
    font-weight: bold; /* Negrita para el precio */
    margin-bottom: 20px; /* Espacio debajo del precio */
}

/* Estilos para el botón "Agregar al Carrito" */
.product-card .add-to-cart {
    background-color: #3498db; /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    border: none; /* Elimina el borde del botón */
    border-radius: 5px; /* Bordes redondeados para el botón */
    padding: 12px 25px; /* Espaciado interno del botón */
    font-size: 1em; /* Tamaño de fuente del botón */
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima */
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
    margin-top: auto; /* Empuja el botón hacia la parte inferior de la tarjeta */
}

.product-card .add-to-cart:hover {
    background-color: #2980b9; /* Color de fondo más oscuro al pasar el ratón */
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .product-segment h2 {
        font-size: 2em; /* Reduce el tamaño del título en pantallas más pequeñas */
    }

    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajusta las columnas */
        gap: 20px; /* Reduce el espacio entre tarjetas */
    }
}

@media (max-width: 480px) {
    .product-segment {
        padding: 30px 15px; /* Reduce el padding en pantallas muy pequeñas */
    }

    .product-segment h2 {
        font-size: 1.8em; /* Más reducción del título */
    }

    .product-grid {
        grid-template-columns: 1fr; /* Una sola columna en pantallas muy pequeñas */
    }

    .product-card {
        padding: 15px; /* Reduce el padding de las tarjetas */
    }

    .product-card .imagenes {
        height: 180px; /* Ajusta la altura de la imagen */
    }

    .product-card h3 {
        font-size: 1.3em;
    }

    .product-card .price {
        font-size: 1.6em;
    }

    .product-card .add-to-cart {
        padding: 10px 20px;
        font-size: 0.9em;
    }
}
/* Estilos generales para el contenedor "quienes-somos" */
.quienes-somos {
    padding: 60px 20px; /* Espaciado interno superior/inferior y lateral */
    text-align: center; /* Centra el contenido horizontalmente */
    background-color: #f8f8f8; /* Un color de fondo suave */
    color: #333; /* Color de texto principal */
    font-family: Arial, sans-serif; /* Fuente general para la sección */
    max-width: 1200px; /* Ancho máximo para que no se extienda demasiado en pantallas grandes */
    margin: 0 auto; /* Centra el div en la página */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Sombra suave */
    margin-bottom: 40px; /* Espacio debajo de la sección */
}

/* Estilos para el título h2 */
.quienes-somos h2 {
    font-size: 2.8em; /* Tamaño de fuente grande para el título */
    color: #2c3e50; /* Un color más oscuro para el título */
    margin-bottom: 25px; /* Espacio debajo del título */
    font-weight: bold; /* Título en negrita */
}

/* Estilos para el párrafo de descripción */
.quienes-somos p {
    font-size: 1.15em; /* Tamaño de fuente ligeramente más grande */
    line-height: 1.7; /* Mayor altura de línea para mejor legibilidad */
    max-width: 800px; /* Limita el ancho del párrafo para que no sea muy largo */
    margin: 0 auto 30px auto; /* Centra el párrafo y añade margen inferior */
    color: #555; /* Color de texto un poco más suave */
}

/* Estilos para la imagen (si la agregas) */
.quienes-somos img {
    max-width: 100%; /* Asegura que la imagen no se desborde del contenedor */
    height: auto; /* Mantiene la relación de aspecto */
    display: block; /* Para centrarla con margin auto */
    margin: 30px auto 40px auto; /* Margen superior/inferior y centrado */
    border-radius: 10px; /* Bordes redondeados para la imagen */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil en la imagen */
}

/* Estilos para el botón */
.quienes-somos button {
    background-color: #3498db; /* Color de fondo del botón (azul) */
    border: none; /* Sin borde */
    border-radius: 6px; /* Bordes redondeados */
    padding: 14px 30px; /* Espaciado interno del botón */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); /* Sombra para el botón */
}

/* Estilos para el botón al pasar el cursor (hover) */
.quienes-somos button:hover {
    background-color: #2980b9; /* Color más oscuro al pasar el cursor */
    transform: translateY(-2px); /* Pequeño levantamiento */
}

/* Estilos para el enlace dentro del botón */
.quienes-somos button a {
    text-decoration: none; /* Elimina el subrayado del enlace */
    color: #fff; /* Color de texto blanco */
    font-size: 1.1em; /* Tamaño de fuente del enlace */
    font-weight: bold; /* Texto en negrita */
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .quienes-somos {
        padding: 40px 15px; /* Reduce el padding en pantallas medianas */
    }

    .quienes-somos h2 {
        font-size: 2.2em; /* Ajusta el tamaño del título */
        margin-bottom: 20px;
    }

    .quienes-somos p {
        font-size: 1em; /* Reduce el tamaño del párrafo */
        margin-bottom: 25px;
    }

    .quienes-somos img {
        margin: 25px auto 30px auto;
    }

    .quienes-somos button {
        padding: 12px 25px; /* Ajusta el padding del botón */
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .quienes-somos {
        padding: 30px 10px; /* Reduce el padding en pantallas pequeñas */
    }

    .quienes-somos h2 {
        font-size: 1.8em; /* Más reducción del título */
    }

    .quienes-somos p {
        font-size: 0.95em; /* Más reducción del párrafo */
        margin-bottom: 20px;
    }

    .quienes-somos img {
        margin: 20px auto 25px auto;
    }

    .quienes-somos button {
        padding: 10px 20px; /* Más reducción del botón */
        font-size: 0.9em;
    }
}
.cuerpop{
    background-image: url(../imagenes/images.jpg); /* Reemplaza con la ruta de tu imagen */
    
}
/* Estilos generales para el contenedor principal */
.container {
    padding: 60px 20px; /* Espaciado interno generoso */
    text-align: center; /* Centra el texto y el título principal */
    background-color: #f9f9f9; /* Un fondo claro para la sección */
    font-family: 'Arial', sans-serif; /* Fuente estándar y legible */
    color: #333; /* Color de texto principal */
    max-width: 1200px; /* Ancho máximo para el contenido, centrado */
    margin: 0 auto 40px auto; /* Centra el contenedor y le da un margen inferior */
    border-radius: 10px; /* Bordes ligeramente redondeados */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Sombra suave para un efecto elevado */
}

/* Título principal de la sección */
.container h2:first-of-type { /* Selecciona el primer h2 directamente dentro de .container */
    font-size: 3em; /* Tamaño de fuente grande para el título principal */
    color: #2c3e50; /* Color oscuro para el título */
    margin-bottom: 20px; /* Espacio debajo del título */
    font-weight: 700; /* Negrita */
}

/* Párrafo descriptivo debajo del título principal */
.container p {
    font-size: 1.15em; /* Tamaño de fuente para el párrafo */
    line-height: 1.6; /* Espaciado entre líneas para mejor lectura */
    max-width: 700px; /* Limita el ancho del párrafo */
    margin: 0 auto 40px auto; /* Centra el párrafo y añade margen inferior */
    color: #555; /* Color de texto un poco más suave */
}

/* Contenedor del contenido de contacto (formulario y detalles si los añadieras) */
.contact-content {
    display: flex; /* Usa Flexbox para organizar los elementos internos (e.g., formulario y otra info) */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
    gap: 40px; /* Espacio entre los elementos (como el formulario y un posible mapa/info de contacto) */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: flex-start; /* Alinea los elementos al inicio verticalmente */
}

/* Contenedor del formulario de contacto */
.contact-form-container {
    background-color: #ffffff; /* Fondo blanco para el formulario */
    padding: 35px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada */
    flex: 1; /* Permite que ocupe espacio disponible en flexbox */
    min-width: 300px; /* Ancho mínimo para el formulario antes de envolverse */
    max-width: 550px; /* Ancho máximo para el formulario */
    text-align: left; /* Alinea el texto dentro del formulario a la izquierda */
}

/* Título dentro del contenedor del formulario */
.contact-form-container h2 {
    font-size: 2em; /* Tamaño de fuente para el título del formulario */
    color: #34495e; /* Un azul grisáceo para el título */
    margin-bottom: 25px; /* Espacio debajo del título del formulario */
    text-align: center; /* Centra el título del formulario */
    font-weight: 600;
}

/* Grupos de formulario (label + input/textarea/select) */
.form-group {
    margin-bottom: 20px; /* Espacio entre cada grupo de formulario */
}

.form-group label {
    display: block; /* Hace que el label ocupe toda la línea */
    font-size: 0.95em; /* Tamaño de fuente para las etiquetas */
    color: #555; /* Color de texto para las etiquetas */
    margin-bottom: 8px; /* Espacio entre la etiqueta y el input */
    font-weight: 600; /* Etiquetas un poco más negritas */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    width: 100%; /* Ocupa el 100% del ancho disponible */
    padding: 12px 15px; /* Espaciado interno */
    border: 1px solid #ddd; /* Borde suave */
    border-radius: 6px; /* Bordes redondeados */
    font-size: 1em; /* Tamaño de fuente del texto de entrada */
    color: #333; /* Color de texto del input */
    box-sizing: border-box; /* Asegura que padding y border no aumenten el ancho total */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave al enfocar */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #3498db; /* Borde azul al enfocar */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); /* Sombra suave al enfocar */
    outline: none; /* Elimina el contorno predeterminado del navegador */
}

/* Estilos específicos para el textarea */
.form-group textarea {
    resize: vertical; /* Permite redimensionar solo verticalmente */
    min-height: 100px; /* Altura mínima para el textarea */
}

/* Estilos para el botón de envío */
.submit-btn {
    background-color: #3498db; /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    border: none; /* Elimina el borde */
    border-radius: 6px; /* Bordes redondeados */
    padding: 14px 28px; /* Espaciado interno */
    font-size: 1.1em; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor a una mano */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
    font-weight: 600; /* Texto en negrita */
    width: 100%; /* Hace que el botón ocupe todo el ancho */
}

.submit-btn:hover {
    background-color: #2980b9; /* Color más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Pequeño levantamiento */
}

.submit-btn:active {
    transform: translateY(0); /* Vuelve a su posición original al hacer clic */
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .container {
        padding: 40px 15px; /* Reduce el padding en pantallas medianas */
        margin-bottom: 30px;
    }

    .container h2:first-of-type {
        font-size: 2.5em; /* Ajusta el tamaño del título principal */
    }

    .container p {
        font-size: 1em; /* Reduce el tamaño del párrafo */
        margin-bottom: 30px;
    }

    .contact-content {
        flex-direction: column; /* Apila los elementos verticalmente en pantallas pequeñas */
        gap: 30px; /* Reduce el espacio entre elementos apilados */
    }

    .contact-form-container {
        padding: 25px; /* Reduce el padding del formulario */
        max-width: 100%; /* Permite que ocupe todo el ancho disponible */
    }

    .contact-form-container h2 {
        font-size: 1.8em; /* Ajusta el título del formulario */
        margin-bottom: 20px;
    }

    .form-group label {
        font-size: 0.9em;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px 12px;
        font-size: 0.95em;
    }

    .submit-btn {
        padding: 12px 20px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 30px 10px; /* Más reducción de padding */
        margin-bottom: 20px;
    }

    .container h2:first-of-type {
        font-size: 2em; /* Más reducción del título principal */
    }

    .container p {
        font-size: 0.9em; /* Más reducción del párrafo */
        margin-bottom: 25px;
    }

    .contact-form-container {
        padding: 20px; /* Más reducción del padding del formulario */
    }

    .contact-form-container h2 {
        font-size: 1.5em; /* Más reducción del título del formulario */
    }

    .submit-btn {
        font-size: 0.95em;
        padding: 10px 15px;
    }
}
.container2{
    background-image: url(../imagenes/fondo\ 2.png); /* Reemplaza con la ruta de tu imagen */
    
}

/*productos*/

.container1 {
            max-width: 1200px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        .product-card {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .product-card:hover {
            transform: translateY(-5px);
        }
        .product-card img {
            max-width: 100%;
            height: 180px; /* Altura fija para las imágenes */
            object-fit: contain; /* Asegura que la imagen se ajuste sin distorsionarse */
            margin-bottom: 10px;
        }
        .product-card h3 {
            font-size: 1.2em;
            margin-bottom: 10px;
            min-height: 40px; /* Asegura un espacio mínimo para el título */
        }
        .product-card p.price {
            font-size: 1.4em;
            color: #e67e22; /* Color naranja para el precio */
            font-weight: bold;
            margin-bottom: 15px;
        }
        .product-card button {
            background-color: #28a745; /* Verde para el botón */
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.2s;
        }
        .product-card button:hover {
            background-color: #218838;
        }
        h1 {
            text-align: center;
            color: #007bff; /* Azul para el título principal */
            margin-bottom: 30px;
        }
.ti1{
    align-items: center;
    color: #3498db;
}
.p1{
    align-items: center;
    color: #ddd;
    font-size: 1.5rem;
}