@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body{
    font-family: "Poppins", sans-serif;
    background-color: rgb(186, 240, 235);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.header{
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2)), 
        url(images/cabeza1.jpg);
    background-position: center center;
    background-repeat: no repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    min-height: 95vh;
    padding-top: 275px; /* Ajusta este valor para mover el texto más hacia abajo */
    padding-bottom: 20px; /* Espacio adicional en la parte inferior, opcional */
    text-align: justify; /* Justifica el texto contenido en el header */
}
.header p{
    max-width: 1200px;
    margin: 0 auto;
}

.menu {
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
   color: #FFFFFF ;
   font-size: 25px;
   font-weight: 800;
}

.menu .navbar ul li {
    position: relative;
    float: left;
}

.menu .navbar ul li a {
    font-size: 15px;
    padding: 28px;
    color: #FFFFFF;
    display: block;
    font-weight: 600;
}

.menu .navbar ul li a:hover{
    color: #F35200;
}

#menu {
    display: none;
}

.menu-icono {
    width: 25px;
}

.menu label {
    cursor: pointer;
    display: none;
}

.submenu{
    position: relative;
}

.submenu #carrito {
    display: none;
}

.submenu:hover #carrito {
    display: block;
    position: absolute;
    right: 0;
    backdrop-filter: blur(10px);
    top: 100%;
    z-index: 1;
    background-color: #4E4B5076;
    padding: 20px;
    min-width: 400px;
}

table{
    width: 100%;
}

th, td{
    color: #FFFFFF;
}

.borrar{
    background-color: #F35200;
    border-radius: 50%;
    padding: 5px 10px;
    color: #FFFFFF;
    font-weight: 800;
}

.header-txt {
    padding: 0 200px;
    text-align: enter;
}

.header-txt h1 {
    font-size: 70px;
    line-height: 80px;
    color:#FFFFFF;
    margin-bottom: 20px;
}

.header-txt p {
    font-size: 16px;
    color:#FFFFFF;
    margin-bottom: 20px;
}
.btn-1 {
    display: inline-block;
    background-color: #F35200;
    color: #FFFFFF;
    padding: 13px 35px;
    border-radius: 25px;
    text-transform: capitalize;
    font-size: 16px;
    
}

.btn-1:hover{
    background-color: #973301;
}

.products container, #lista-1 {
    background-color: rgb(255, 255, 255);
    max-width: 2020px; /* Establece un ancho máximo para la sección */
    margin: 0 auto; /* Centra la sección en la página */
    padding: 20px; /* Espacio alrededor de la sección (ajustable) */
}

.products container, #lista-2 {
    background-color: rgb(206, 236, 230);
    max-width: 2020px; /* Establece un ancho máximo para la sección */
    margin: 0 auto; /* Centra la sección en la página */
    padding: 20px; /* Espacio alrededor de la sección (ajustable) */
}

.products-content {
    display: flex; /* Habilita flexbox */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a una nueva línea */
    gap: 10px; /* Espacio entre los productos */
    
}

.product {
    display: flex;
    flex-direction: column; /* Organiza los elementos verticalmente */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    flex: 0 0 calc(33.3333% - 20px); /* Define el ancho de cada producto para que sean 3 por fila */
}

.products{
   
    padding: 70px 0 0 0;
    text-align: center;
}

h2{
    color: #000000;
    font-size: 60px;
    margin-top: 40px; /* Agrega espacio desde la parte superior */
    margin-bottom: 35px;
    text-align: center;
}

icons{
    
    background-color: rgb(0, 0, 0);  
}

.product img {
     width: auto;
     height: auto; /* Ajusta la altura automáticamente */
     
}

.product h3 {
    font-size: 30px;
    color: #000000;
    margin-bottom: 10px;
    text-align: center;
}

.product p {
    font-size: 20px;
    color: #303030;
    margin-bottom: 10px;
    text-align: center;
}

.precio {
    color: #ff0000 !important;
}

.product-txt {
    text-align: center; /* Centra horizontalmente el contenido del contenedor */
}

.agregar-carrito {
    display: inline-block; /* Asegura que el botón sea tratado como un elemento en línea */
    padding: 8px 17px; /* Ajusta el relleno del botón según tus preferencias */
    text-align: center; /* Asegura que el texto del botón esté centrado */
    /* Otros estilos existentes para el botón */
}

.btn-2, .btn-5 {
    display: inline-block;
    padding: 8px 17px;
    border: 1px solid #000000;
    border-radius: 20px;
    color: #000000;
    text-align: center;
}

/* Estilos de hover para los botones */
.btn-2:hover, .btn-5:hover {
    background-color: #70c7f0;
}

/* Estilo específico para el botón "Comprar Carrito" */
#comprar-carrito {
    margin-left: 10px; /* Ajusta el valor según la separación deseada */
}



.videos{
    background-color: #4bd1e0;
    max-width: 2020px; /* Establece un ancho máximo para la sección */
    margin: 0 auto; /* Centra la sección horizontalmente */
    padding: 20px; /* Agrega relleno alrededor de la sección */
    display: flex; /* Usa un contenedor flex */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a una nueva línea */
    gap: 10px; /* Espacio entre los recuadros */
    justify-content: center; /* Centra los recuadros dentro de la sección */
}

/* Estilos de la sección de videos */
.video-section {
    display: grid; /* Habilita CSS Grid Layout */
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas de igual ancho */
    grid-template-rows: repeat(2, auto); /* Crea 2 filas que se ajustan automáticamente a su contenido */
    gap: 20px; /* Espacio entre las celdas de la cuadrícula */
    padding: 20px; /* Añade relleno a la sección */
}

/* Estilos de cada recuadro de video */
.video {
    display: flex; /* Habilita flexbox */
    flex-direction: column; /* Organiza los elementos verticalmente */
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    border-radius: 10px; /* Añade un borde redondeado a los recuadros */
    overflow: hidden; /* Evita que el contenido se salga del recuadro */
}

/* Estilos de las imágenes en los recuadros de video */
.video img {
    width: 80%; /* Ajusta el ancho de la imagen al 100% del contenedor */
    height: auto; /* Permite que la altura se ajuste automáticamente */
}

/* Estilos del texto en los recuadros de video */
.video-txt {
    text-align: center; /* Centra el texto */
    padding: 10px; /* Añade relleno interno al texto */
}

.video h3 {
    font-size: 16px; /* Ajusta el tamaño de la fuente del título */
    margin-bottom: 5px; /* Añade un margen inferior a los títulos */
}

.video p a {
    color: #007BFF; /* Color del enlace */
    text-decoration: none; /* Elimina el subrayado del enlace */
}

.video p a:hover {
    text-decoration: underline; /* Añade subrayado al enlace al pasar el mouse */
}


.videos h2{
    color: #000000;
    font-size: 60px;
    margin-bottom: 35px;
    text-align: center;
}

.historia {
    background-color: rgb(206, 236, 230);
    max-width: 2020px; /* Establece un ancho máximo para la sección */
    margin: 0 auto; /* Centra la sección en la página */
    padding: 20px; /* Espacio alrededor de la sección (ajustable) */
}

img[src="images/historia.png"] {
    width: 550px; /* Establece un ancho fijo, por ejemplo, 200px */
    height: auto; /* Permite que la altura se ajuste automáticamente para mantener la proporción */
}

.historia p {
    text-align: justify; /* Justifica el texto de los párrafos */
}

.footer {
    background-color: #81d3f3;
    max-width: 2020px; /* Establece un ancho máximo para la sección */
    margin: 0 auto; /* Centra la sección horizontalmente */
    padding: 20px; /* Agrega relleno alrededor de la sección */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a una nueva línea */
    display: grid; /* Habilita el diseño de cuadrícula */
    grid-template-columns: 1fr 1fr 1fr; /* Crea tres columnas de igual ancho */
    gap: 20px; /* Espacio entre las columnas */
    padding: 20px; /* Añade un relleno interno */
    align-items: center;
    justify-content: center;
    
}

.footer-container {
    display: flex; /* Habilita flexbox */
    justify-content: space-between; /* Distribuye uniformemente las secciones */
    padding: 20px; /* Ajusta el relleno del contenedor */
}

.mision {
    flex: 1; /* Cada sección ocupa el mismo ancho */
    display: flex; /* Habilita flexbox */
    flex-direction: column; /* Organiza los elementos verticalmente */
    justify-content: justify; /* Centra el contenido verticalmente */
    align-items: justify; /* Centra el contenido horizontalmente */
    padding: 10px; /* Añade relleno interno */
    text-align: justify; /* Centra el texto horizontalmente */
}
.redes {
    flex: 1; /* Cada sección ocupa el mismo ancho */
    display: flex; /* Habilita flexbox */
    flex-direction: column; /* Organiza los elementos verticalmente */
    padding: 10px; /* Añade relleno interno */
    text-align: center; /* Centra el texto horizontalmente */

}
.enlaces {
    flex: 1; /* Cada sección ocupa el mismo ancho */
    display: flex; /* Habilita flexbox */
    flex-direction: column; /* Organiza los elementos verticalmente */
    padding: 10px; /* Añade relleno interno */
    text-align: center; /* Centra el texto horizontalmente */
}

.redes ul li a:hover {
    text-decoration: underline; /* Añade subrayado al pasar el mouse */
}

.enlaces ul li a:hover {
    text-decoration: underline; /* Añade subrayado al pasar el mouse */

}


/* Continúa con los estilos del contenedor de preguntas frecuentes */
.faq-container {
    max-width: 2020px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(7, 7, 7, 0.1);
    text-align: center; /* Mantén el texto alineado a la izquierda */
}
.btn-6 {
    font-size: 30px;
    padding: 28px;
    color: #050505;
    display: block;
    font-weight: 600

}
.btn-6:hover {
    
    color: #ff0000;
   
}

/* Estilos para el encabezado */
.faq-container h2 {
    font-size: 28px; /* Tamaño de fuente más grande */
    margin-bottom: 20px;
    color: #333;
    text-align: center; /* Centrar el texto del encabezado */
}

/* Estilos para detalles */
details {
    margin-bottom: 15px;
    text-align: justify; /* Centrar los detalles */
}

details summary {
    font-size: 24px; /* Tamaño de fuente más grande */
    font-weight: bold;
    cursor: pointer;
    color: #555;
    text-align: justify; /* Centrar el texto del resumen */
}

details p {
    font-size: 18px; /* Tamaño de fuente más grande */
    color: #666;
    padding: 10px 20px;
    border-left: 2px solid #4e4b50;
    text-align: justify; /* Centrar el texto de los detalles */
}

/* Contenedor de contacto */

.contacto-container {
    max-width: 2020px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(7, 7, 7, 0.1);
    text-align: center; /* Mantén el texto alineado a la izquierda */

}
.btn-9 {
    font-size: 30px;
    padding: 28px;
    color: #c52828;
    display: block;
    font-weight: 600;
}

.btn-9:hover {
    
    color: #ff0000;
   
}


/* Estilos para el encabezado */
.contacto-container h2 {
    font-size: 28px; /* Tamaño de fuente más grande */
    margin-bottom: 20px;
    color: #333;
    text-align: center; /* Centrar el texto del encabezado */
}

/* Estilos para la información de contacto */
.contacto-info p {
    font-size: 18px; /* Tamaño de fuente más grande */
    color: #666;
    padding: 10px 20px;
    border-left: 2px solid #4e4b50;
    text-align: justify; /* Centrar el texto de los detalles */
}

.contacto-info a {
    color: #007bff;
    text-decoration: none;
}

.contacto-info a:hover {
    text-decoration: underline;
}

/* Contenedor de aviso de privacidad */
.privacidad-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.btn-8 {
    font-size: 30px;
    padding: 28px;
    color: #050505;
    display: block;
    font-weight: 600;
}

.btn-8:hover {
    
    color: #ff0000;
   
}
/* Estilos para el encabezado */
.privacidad-container h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

/* Estilos para el texto */
.privacidad-container p {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    text-align: justify;
}

/* Consulta de medios para pantallas más pequeñas, como teléfonos móviles */
@media (max-width: 768px) {
    /* Estilos para la cabecera */
    .header {
        padding-top: 100px; /* Ajustar el espacio superior */
        text-align: center; /* Centra el texto */
    }
    .header p {
        padding: 0 20px; /* Reducir el relleno lateral */
    }

    /* Estilos para el menú */
    .menu {
        justify-content: space-between; /* Ajusta la justificación de los elementos */
    }
    .menu label {
        display: block; /* Mostrar el botón de menú */
    }
    .navbar {
        display: none; /* Ocultar la barra de navegación por defecto */
    }
    #menu:checked ~ .navbar {
        display: block; /* Mostrar la barra de navegación cuando se selecciona el botón de menú */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 1;
    }

    /* Estilos para el contenido del carrito */
    .submenu:hover #carrito {
        display: none; /* Ocultar el carrito al pasar el mouse */
    }

    /* Estilos para las secciones de productos y videos */
    .products-content, .videos .video-section {
        grid-template-columns: 1fr; /* Mostrar una sola columna */
        gap: 10px; /* Reducir el espacio entre los elementos */
    }
    .product, .video {
        flex: 1 1 100%; /* Ajustar el tamaño de los elementos */
    }

    /* Estilos para los videos */
    .video img {
        width: 100%; /* Ajustar el ancho de las imágenes */
    }
    .video h3, .video p {
        text-align: center; /* Centrar los textos */
    }

    /* Estilos para la sección de la historia */
    .historia {
        padding: 20px 10px; /* Reducir el relleno lateral */
    }
    .historia img {
        width: 100%; /* Ajustar el ancho de la imagen */
    }

    /* Estilos para el footer */
    .footer {
        display: block; /* Mostrar los elementos del footer en bloque */
        text-align: center; /* Centrar los textos */
    }
    .mision, .redes, .enlaces {
        width: 100%; /* Ocupa el ancho completo del dispositivo */
        margin-bottom: 10px; /* Añade espacio entre secciones */
    }
}