/*fuentes*/
@font-face {
    font-family:"PlayfairDisplay-Regular";
    src: url(../font/Playfair_Display/PlayfairDisplay-Regular.ttf);
}
@font-face {
    font-family:"PlayfairDisplay-Bold";
    src: url(../font/Playfair_Display/PlayfairDisplay-Bold.ttf);
}
@font-face {
    font-family:"manrope_regular";
    src: url(../font/Manrope/Manrope-Regular.ttf);
}
@font-face {
    font-family:"manrope_light";
    src: url(../font/Manrope/Manrope-ExtraLight.ttf);
}
@font-face {
    font-family:"LeagueSpartan-Bold";
    src: url(../font/League_Spartan/LeagueSpartan-Bold.ttf);
}
@font-face {
    font-family:"LeagueSpartan-SemiBold";
    src: url(../font/League_Spartan/LeagueSpartan-SemiBold.ttf);
}
:root{
    --ColorBase:#0c3c4a;
    --ColorBaseverde:#25d4a8;
    --ColorBasewhite:#ffff;
    --ColorBaseazul:#1c9eb9;
}

/*Modal llenar datos*/

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none; /* Oculto por defecto */
    z-index: 10000; /* Asegúrate de que esté por encima de otros elementos */
}

#modal {
    position: fixed;
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 600px; /* Ancho del modal */
    height: 500px; /* Alto del modal */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;/* Oculto por defecto */
    z-index: 10100; /* Asegúrate de que esté por encima del overlay */
    text-align: center; /* Centrar el texto */
}

#modalContent {
    position: relative; /* Para posicionar el botón de cerrar */
}

#modalImage {
    margin: 20px 0; /* Espaciado alrededor de la imagen */
}

#modalMessage {
    font-size: 16px; /* Tamaño de fuente del mensaje */
    color: #333; /* Color del texto */
}
.contbtnmodal{
    display: flex;
    align-items: center;
    justify-content: end;
}
.texto{
    font-size:0.8rem;
    font-family: 'manrope_regular'
}

form *{
    font-family: 'manrope_regular';
    color: #b3b3b3;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}
form h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
    color: var(--ColorBaseazul);
}

label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ColorBase);
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
    color: var(--ColorBase);
}
::placeholder{
    color: #aaa9a9;
}
.guardar{
    margin-top: 50px;
    width: 100%;
    background-color:var(--ColorBaseverde);
    color: var(--ColorBasewhite);
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}

@media (max-width: 900px) {
    #modal {
        width: 80%; /* Ancho del modal */
    }
    
}

/*body*/
body {
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column; /* Cambia a columna para apilar los contenedores */
}

/*nav bar*/
.navbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--ColorBase);
}

.cont_nav{
    width: 100%;
    height: 12vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--ColorBase);
    position: fixed;
    z-index: 1000;
}


.logo {
    font-family: 'PlayfairDisplay-Bold', serif;
    color: var(--ColorBasewhite);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo_nav{
    width: 70px;
    height: auto;
    object-fit: cover;
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: start;
    gap: 20px; /* Espacio entre los botones */
}
.cont_nav_bar_opciones {
    list-style: none;
    display: flex;
    justify-content: start;
    gap: 20px; /* Espacio entre los botones */
    margin-right: 20px;
}

.cont_opc_nav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.cont_opc_nav img{
    width: 20px;
    height: 20px;
}

.nav-links li {
    position: relative; /* Para el efecto de subrayado */
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-links li a {
    text-decoration: none;
    color: var(--ColorBasewhite);
    font-family: 'LeagueSpartan-SemiBold', sans-serif;
    transition: color 0.3s;
    padding: 5px 0; /* Espacio vertical para el efecto de hover */
    font-size: 0.9rem;
}

.nav-links li a:hover {
    color: var(--ColorBaseverde);
}

.nav-links li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: var(--ColorBaseverde);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-links li a:hover::after {
    transform: scaleX(1);
}
.social-icons {
    display: flex;
    gap: 30px;
}
.cont_btn_cerrar{
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_cerrar_sesion{
    font-size: 0.9rem;
    cursor: pointer;
    background:none;
    text-decoration: none;
    color: var(--ColorBasewhite);
    font-family: 'LeagueSpartan-SemiBold', sans-serif;
    transition: color 0.3s;
    padding: 5px 0; /* Espacio vertical para el efecto de hover */
}
.btn_cerrar_sesion:hover {
    color: var(--ColorBaseverde);
}

.btn_cerrar_sesion::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: var(--ColorBaseverde);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}


.cont_usuario_nombre{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
}
.cont_usuario_nombre img{
    width: 40px;
    height: 40px;
}

.cont_usuario_nombre p{
    font-size: 0.7rem;
    background:none;
    text-decoration: none;
    color: var(--ColorBasewhite);
    font-family: 'LeagueSpartan-SemiBold', sans-serif;
    text-align: center;
}


.social-icons a {
    text-decoration: none;
    color: var(--ColorBasewhite);
    font-family: 'LeagueSpartan-SemiBold', sans-serif;
    transition: color 0.3s;
}

.social-icons a img{
    width: 30px;
    height: 30px;
}

.social-icons a:hover {
    color: var(--ColorBaseverde);
}

/* Estilos para el menú hamburguesa */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    height: 3px;
    width: 25px;
    background-color: var(--ColorBasewhite);
    margin: 3px 0;
    transition: all 0.3s ease;
}

.cont_categoria_y_busqueda{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.cont_select_categorias{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content:start;
    align-items: center;
}
.category-select {
    margin-left:30px;
    margin-bottom: 20px;
    width: 200px;
    padding: 9px; /* Espaciado interno */
    border-radius: 20px; /* Bordes redondeados */
    background-color: #1c9eb9; /* Fondo blanco */
    color: white; /* Color del texto */
    font-family: 'LeagueSpartan-SemiBold', sans-serif; /* Fuente */
    font-size: 1rem; /* Tamaño de fuente */
    appearance: none; /* Elimina el estilo por defecto del select */
    cursor: pointer; /* Cambia el cursor al pasar sobre el select */
    transition: border-color 0.3s; /* Transición suave para el borde */
}

.category-select:hover {
    border-color: var(--ColorBase); /* Cambia el color del borde al pasar el mouse */
}

.category-select:focus {
    outline: none; /* Elimina el contorno por defecto */
    border-color: var(--ColorBaseverde); /* Cambia el color del borde al enfocar */
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Estilos para el icono de la flecha (opcional) */
.category-select::after {
    content: '▼'; /* Flecha hacia abajo */
    position: absolute;
    right: 10px; /* Espacio desde la derecha */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajusta la posición */
    pointer-events: none; /* Evita que el clic afecte al icono */
}
@media (max-width: 900px) {
    .category-select {
        width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
        margin-top: 5px; /* Ajusta el margen si es necesario */
    }
    .cont_usuario_nombre{
        margin-top: 30px;
        margin-left: 0px;
    }
    
}

.cont_busqueda{
    width: 50%;
    display: flex; /* Usamos flexbox para alinear el input y el botón */
    align-items: center; /* Centra verticalmente */
    justify-content: center;
}

.search-container {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    margin: 20px; /* Espacio alrededor de la barra de búsqueda */
}

.search-input {
    padding: 10px 40px 10px 20px; /* Espaciado interno */
    font-size: 0.9rem; /* Tamaño de fuente */
    font-family: "manrope_regular";
    color: #333; /* Color del texto */
    transition: border-color 0.3s, background-color 0.3s; /* Transición suave para el borde y el fondo */
}

.search-input:focus {
    outline: none; /* Elimina el contorno por defecto */
    border-color: #45a049; /* Cambia el color del borde al enfocar */
    background-color: #f0f0f0; /* Cambia el color de fondo al enfocar */
}

.search-input:hover {
    background-color: #e0e0e0; /* Cambia el color de fondo al pasar el mouse */
}

.search-button {
    position: absolute; /* Posiciona el botón de manera absoluta */
    right: 10px; /* Espacio desde la derecha */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajusta el botón para que esté centrado */
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: transform 0.3s; /* Transición suave para el botón */
}

.search-button:hover {
    background-color: #0c3c4a;
    height: 100%;
    color: #25d4a8;
    width: 30px;
}

.search-icon {
    width: 24px; /* Ancho del icono */
    height: 24px; /* Alto del icono */
}



@media (max-width: 900px) {
    .cont_busqueda {
        width: 100%; /* Asegúrate de que ocupe el 100% del ancho disponible */
        display: flex; /* Usamos flexbox para alinear el input y el botón */
        justify-content: center; /* Centra horizontalmente */
    }
    
    .search-container {
        position: relative; /* Necesario para posicionar el botón dentro del contenedor */
        width: 100%; /* Asegúrate de que ocupe el 100% del ancho disponible */
        max-width: 600px; /* Establece un ancho máximo para pantallas grandes */
    }
    
    .search-input {
        width: 78%; /* Asegúrate de que el input ocupe el 100% del ancho del contenedor */
        max-width: 90vw; /* Limita el ancho máximo a un 90% del ancho de la ventana */
        padding: 10px 40px 10px 20px; /* Espaciado interno */
        
        font-size: 0.8rem; /* Tamaño de fuente */
        font-family: "manrope_regular";
        color: #333; /* Color del texto */
        transition: border-color 0.3s, background-color 0.3s; /* Transición suave para el borde y el fondo */
    }
    
    .search-input:focus {
        outline: none; /* Elimina el contorno por defecto */
        border-color: #45a049; /* Cambia el color del borde al enfocar */
        background-color: #f0f0f0; /* Cambia el color de fondo al enfocar */
    }
    
    .search-input:hover {
        background-color: #e0e0e0; /* Cambia el color de fondo al pasar el mouse */
    }
    
    .search-button {
        position: absolute; /* Posiciona el botón de manera absoluta */
        right: 10px; /* Espacio desde la derecha */
        top: 50%; /* Centra verticalmente */
        transform: translateY(-50%); /* Ajusta el botón para que esté centrado */
        background-color: transparent; /* Fondo transparente */
        border: none; /* Sin borde */
        cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
        transition: transform 0.3s; /* Transición suave para el botón */
    }
    
    .search-button:hover {
        background-color: #0c3c4a;
        color: #25d4a8;
    }
    
    .search-icon {
        width: 24px; /* Ancho del icono */
        height: 24px; /* Alto del icono */
    }
    
    
}






/* Media Queries para responsividad */
@media (max-width: 900px) {
    .cont_nav{
        display: flex;
        justify-content: space-between;
    }

    .nav-links {
        position: absolute;
        top: 40px; /* Ajusta según la altura de la navbar */
        right: 0;
        background-color: var(--ColorBase);
        flex-direction: column;
        width: 100%;
        height: 0;
        overflow: hidden;
        transition: height 0.3s ease;
        gap: 0;
        z-index: 100;
    }


    .nav-links.active {
        height: 100vh; /* Permite que el menú se expanda */
        z-index: 100;
        position: fixed;
    }

    .cont_select_categorias {
        display: none;
    }

    .menu-toggle {
        display: flex;
        margin-right: 20px;
    }
    .logo img{
        margin-left: 20px;
        width: 15vw;
        height: auto;
    } 
    .cont_opc_nav{
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cont_usuario_nombre{
        margin-top: 25px;
    }
    .cont_nav_bar_opciones.active {
        /* padding: 20px; */
        height: 100vh; /* Permite que el menú se expanda */
        z-index: 1;
        position: fixed;
    }
    .menu-toggle {
        display: flex;
        margin-right: 20px;
    }
    .cont_nav{
        height: 10vh; /* Aumentar altura en pantallas pequeñas */
    }
    
}

/* contactos */
.contactos {
    display: flex;
    justify-content: space-between; /* Space between columns */
    align-items: center; /* Center items vertically */
    background-color: var(--ColorBaseverde); /* White background */
    margin-top: 12vh;
}

.contacto {
    display: flex;
    align-items: center; /* Center icon and text vertically */
    justify-content: center; /* Align content to the left */
    flex: 1 1 calc(33.33% - 20px); /* Each contact takes one-third of the width */
    margin: 5px; /* Space between contacts */
    padding: 5px; /* Internal spacing */
    border-radius: 8px; /* Rounded corners */
}   

.icon_style {
    font-size: 1.5rem; /* Icon size */
    margin-right: 15px; /* Space between icon and text */
    color: var(--ColorBase); /* Icon color */
}

.info-contacto {
    display: flex;
    flex-direction: column; /* Stack texts vertically */
    justify-content: center; /* Center texts vertically */
}

.title_contact {
    font-size: 1rem; /* Title font size */
    color:white;
    font-family: 'LeagueSpartan-SemiBold', sans-serif;
    margin: 0; /* No margin */
    padding: 2px 0; /* Vertical spacing between texts */
}

.subtitle_contact {
    font-size: 0.8rem; /* Subtitle font size */
    color: var(--ColorBase); /* Subtitle color */
    font-family: 'LeagueSpartan-SemiBold', sans-serif;
    margin: 0; /* No margin */
    padding: 2px 0; /* Vertical spacing between texts */
    text-align: center;
}

/* Media Queries for Responsiveness */
@media (max-width: 900px) {
    .contactos {
       display: none;
    }

   
}
/* datos del cliente responsive */

.cont_bienvenida{
    display:none;
}

@media (max-width: 900px) {
    .cont_bienvenida {
       display: flex;
       align-items: center;
       justify-content: space-around;
       width: 100%;
       margin-top: 10vh;
       padding-top: 15px;
       padding-bottom: 15px;
    }  
    .cont_bienvenida img{
       width: 35px;
       height: 35px;
    }  
    .cont_bienvenida p{
        color:black;
        font-family: 'manrope_regular', sans-serif;
        font-size: 0.8rem;
        font-weight: bold;
    }  
    .cont_bienvenida a{
        color:black;
        font-family: 'manrope_regular', sans-serif;
        font-size: 0.8rem;
        font-weight: bold;
        text-decoration: none;
    }  
    .container-carousel {
        margin-top: 0vh;
    }
}

/* ------------------------------ */

/*banner*/
.container-carousel {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.carruseles {
    width: 300%;
    height: 100%;
    display: flex;
}

.slider-section {
    background-color: var(--ColorBaseazul);
    width: calc(100% / 3);
}

.slider-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-left,
.btn-right {
    display: flex;
    position: absolute;
    top: 50%;
    font-size: 1.5rem;
    background-color:#25d4a875;
    border-radius: 50%;
    padding: 5px;
    font-weight: 600;
    cursor: pointer;
    color: var(--ColorBase);
    transform: translate(0,-50%);
    transition: .5s ease;
    user-select: none;
}

.btn-left:hover,
.btn-right:hover {
    background-color: #333333d4;
    color: #fff;
}

.btn-left {
    left: 10px;
}

.btn-right {
    right: 10px;
}

/*-----------------------------------------------*/


/* Servicios */
.generalcont_servicios{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 40px;
    padding-bottom: 40px;
}
.cont_servicio{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}
.cont_servicio img{
    width: 40px;
    height: 40px;
}
.txt_entrega_en{
    font-size: 1rem;
    color:gray;
    font-family: "manrope_regular";
}
.tiempo{
    font-size: 1.2rem;
    color:black;
    font-family: "manrope_regular";
    font-weight: bold;
}
.escritorio{
    display: flex;
}
.responsive{
    display: none;
}
/* --------------------------------------------- */
@media screen and (max-width: 900px) {
    .generalcont_servicios{
        padding: 0px;
        padding-top: 30px;
        padding-bottom: 30px;
        background-color: white;
        justify-content:center;
        gap: 20px;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .cont_servicio img{
        width: 30px;
        height: 30px;
    }
    .txt_entrega_en{
        font-size: 0.6rem;
        color:gray;
        font-family: "manrope_regular";
    }
    .tiempo{
        font-size: 0.8rem;
        color:black;
        font-family: "manrope_regular";
        font-weight: bold;
    }
    .escritorio{
        display: none;
    }
    .responsive{
        display: flex;
    }
}

/*Botones*/
.button-container {
    display: none;
    justify-content:space-around; /* Espacio igual entre botones */
    width: 100%; /* Ancho del contenedor */
    padding-top: 25px;
    padding-bottom: 25px;
}

.button {
    display: flex;
    flex-direction: column; /* Colocar icono arriba y texto abajo */
    align-items: center; /* Centrar contenido */
    text-decoration: none;
    background-color: #fff; /* Fondo blanco para los botones */
    border-radius: 8px; /* Bordes redondeados */
    transition: transform 0.2s; /* Transición suave */
}

.button:hover {
    transform: scale(1.05); /* Efecto de hover */
}

.icon {
    width: 40px; /* Ancho del icono */
    height: 40px; /* Alto del icono */
    margin-bottom: 8px; /* Espacio entre icono y texto */
}

 

.button-text {
    text-align: center; /* Centrar texto */
    font-size: 0.7rem; /* Tamaño de fuente */
    color: #333; /* Color del texto */
    font-family: 'manrope_regular', serif;
    
}
/*-------------------------*/


/*categorias*/
.cont_categorias{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ColorBaseazul);
}
.cont_categorias h3{
    font-size: 2rem;
    color:white;
    font-family: LeagueSpartan-Bold;
}
.cont_categorias img{
    width: 30px;
    height: 30px;
    margin-left: 15px;
}
@media screen and (max-width: 900px) {
    .cont_categorias h3{
        font-size: 1rem;
        color:white;
        font-family: LeagueSpartan-Bold;
    }
    .cont_categorias img{
        width: 20px;
        height: 20px;
    }
    /* .container-carousel {
        margin-top: 12vh;
    } */
    .fomulario_cerrar{
        background-color: white;
        border: 0px;
        margin: 0px;
        padding: 0px;
        margin-bottom: 8px; /* Espacio entre icono y texto */
    }
    .fomulario_cerrar button{
        background-color: white;
    }
    
    .icon_cerrar{
        width: 40px; /* Ancho del icono */
        height: 40px; /* Alto del icono */
    }
}
  

/*------------------------------------------------*/


/* tarjetones */

.cont_overflow_tarjetas{
    width: 100%;
    overflow: auto;
    scrollbar-width: none;
}

article {
    --img-scale: 1.001;
    --title-color: black;
    --link-icon-translate: -20px;
    --link-icon-opacity: 0;
    position: relative;
    border-radius: 16px;
    box-shadow: none;
    background: #fff;
    transform-origin: center;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 350px;
    min-height: 500px;
    max-height:500px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}


  
  article a::after {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    cursor: pointer;
    content: "";
  }
  
  /* basic article elements styling */
  article h2 {
    margin: 0 0 18px 0;
    font-family: manrope_regular;
    font-size: 1.2rem;
    color: var(--ColorBase);
    transition: color 0.3s ease-out;
  }
  
  article P {
    font-family: 'manrope_regular', serif;
    font-size: 0.9rem;
    color: var(--ColorBase);
    transition: color 0.3s ease-out;
  }


  .categoria_pro{
    font-family: 'manrope_regular', bold;
    font-size: 0.8rem;
    color: var(--ColorBaseverde);
    transition: color 0.3s ease-out;
  }
  
  figure {
    margin: 0;
    padding: 0;
    aspect-ratio: 12 / 9;
    overflow: hidden;
  }
  
  article img {
    max-width: 100%;
    transform-origin: center;
    transform: scale(var(--img-scale));
    transition: transform 0.4s ease-in-out;
  }
  
  .article-body {
    padding-top: 10px;
    padding-left:15px;
    padding-right:15px;
    padding-bottom: 10px;
  }
  
  article a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--ColorBase);
    font-family: LeagueSpartan-Bold;
  }
  
  article a:focus {
    outline: 1px dotted #28666e;
  }
  
  article a .icon {
    min-width: 24px;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    transform: translateX(var(--link-icon-translate));
    opacity: var(--link-icon-opacity);
    transition: all 0.3s;
  }
  
  /* using the has() relational pseudo selector to update our custom properties */
  article:has(:hover, :focus) {
    --img-scale: 1.1;
    --title-color: #28666e;
    --link-icon-translate: 0;
    --link-icon-opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 16px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  }
  
  
  /************************ 
  Generic layout (demo looks)
  **************************/
  
  .articles {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 24px;
}
  
@media screen and (max-width: 900px) {
    .button-container {
        display: flex;
        width: 100%;
    }
    .articles {
        padding-bottom: 20px;
        overflow: auto;
        width: 750px;
        justify-content: flex-start;
        margin-left:20px;
        margin-right:20px;
        box-shadow:none;
    }

    article{
        width: 250px;
        min-height: 350px;
        gap: 10px;
        box-shadow:none;
        margin-bottom: 0px;
    }
    .article-body p {
        display: block; /* Mostrar texto */
        font-size: 0.6rem;
        font-weight: bold;
    }
    article h2 {
        font-size: 0.8rem;
      }
    .cont_overflow_tarjetas{
        width: 100%;
        overflow: auto;
        scrollbar-width: none;
        background-color:rgb(243, 243, 243);
    }
   
      
    

}
  
  .sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }
/*-----------------------------------------------*/


/* seccion 2 productos */

.overflow_novedades{
    width: 100%;
    overflow: auto;
    scrollbar-width: none;
}

.seccion2_productos {
    background-color: #f0f0f0; /* Color de fondo */
    display: flex; /* Permite alinear contenido si es necesario */
    flex-direction: column; /* Estructura en columnas */
    position: relative; /* Para posicionar elementos hijos de forma absoluta */
    box-sizing: border-box; /* Incluye padding en el cálculo del ancho y alto */
}

.cont_titulos_seccion2 {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.titulo_seccion2 {
    font-family: LeagueSpartan-Bold;
    color: var(--ColorBase);
    font-size: 4rem;
    margin: 0px;
}

.subtitulo_seccion2 {
    font-family: manrope_regular;
    color: var(--ColorBase);
    font-size: 1rem;
}

/* Estilos para el contenedor de productos y video */
.cont_productos_video {
    z-index: 2;
    display: flex; /* Alinea los cuadros horizontalmente */
    justify-content: center; /* Espacio entre los cuadros */
    align-items: stretch; /* Alinea los cuadros para que tengan la misma altura */
    height: 70vh; /* Altura restante de la sección */
    margin-top: 40px; /* Espacio entre el título y los cuadros */
    position: relative; /* Para que los elementos hijos se posicionen en relación a este contenedor */
}

/* Estilos para contenedores de productos y video */
.cont_productos {
    width: 300px; /* Ancho fijo de 400px */
    height: 100%; /* Ocupa toda la altura del contenedor padre */
    background-color: white; /* Color de fondo de los cuadros */
    margin: 0 20px; /* Espacio entre los cuadros */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Para que la franja se posicione detrás de estos elementos */
}

.cont_descripcion{
    width: 300px; /* Ancho fijo de 400px */
    height: 100%; /* Ocupa toda la altura del contenedor padre */
    background-color: white; /* Color de fondo de los cuadros */
    margin: 0 20px; /* Espacio entre los cuadros */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative; /* Para que la franja se posicione detrás de estos elementos */
}

.contenido_desc {
    margin-left: 20px;
    margin-right: 20px;
    font-size: 0.95rem;
    color: rgb(90, 90, 90);
    font-family: manrope_light;
}

.contenido_desc_segundo { 
    margin-left: 20px;
    margin-right: 20px;
    font-size: 0.95rem;
    color: rgb(90, 90, 90);
    font-family: manrope_light;
    text-align: end;
}

.titulo_desc {
    margin-left: 10px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    font-size: 3rem;
    color: #0c3c4a;
    font-family: PlayfairDisplay-Regular;
}

.color-titulo_desc {
    color: var(--ColorBaseverde);
}

/* Evita overflow en la sección */
.cont_productos_video {
    overflow: hidden; /* Evita que se active el overflow */
}

.cont_video {
    width: 300px; /* Ancho fijo de 400px */
    height: 100%; /* Ocupa toda la altura del contenedor padre */
    background-color: white; /* Color de fondo de los cuadros */
    margin: 0 20px; /* Espacio entre los cuadros */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video1 {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video cubra todo el contenedor */
}

.img1 {
    width: 300px;
}

/* Estilos para la franja horizontal */
.franja_horizontal {
    position: absolute; /* Posiciona la franja detrás de los cuadros */
    bottom: 0px; /* Coloca la franja en la mitad de la sección */
    width: 100%; /* Ocupa todo el ancho de la pantalla */
    height: 40vh; /* Altura de la franja (ajusta según sea necesario) */
    background-color: var(--ColorBase);
    display: flex; /* Permite alinear el contenido */
    justify-content: end; /* Centra verticalmente */
    align-items: end; /* Centra horizontalmente */
    z-index: 1; /* Asegura que esté detrás de otros elementos */
}

.img2 {
    width: auto;
    height: 100%;
}

/* Media Queries para pantallas más pequeñas */
@media (max-width: 900px) {
    .subtitulo_seccion2 {
        text-align: center;
        font-size: 0.8rem;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
    }
    
    .cont_titulos_seccion2 {
        margin-top: 20px;
    }
    .cont_productos {
        width: 250px; /* Ancho fijo de 400px */
        
    }
    
    .titulo_seccion2 {
        color: var(--ColorBase);
        font-size: 2rem;
    }
    .img1{
        width: 250px;
        height: 480px;
    }
    .cont_productos_video {
        overflow: hidden; /* Evita que se active el overflow */
        width: 900px;
        padding-bottom: 20px;
        justify-content:space-around;
    }
    
    .franja_horizontal{
        height: 225px;
    }

    .contenido_desc {
        font-size: 0.8rem;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .contenido_desc_segundo { 
        font-size: 0.8rem;
    }
    
    .titulo_desc {
        font-size: 1rem;
        margin-top: 15px;
    }

    .cont_productos_video {
       height: 480px;
    }
    
    .cont_video {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0);
        width: 200px;
        height: 480px;
    }

    .video1 {
        width: 250px;
        object-fit: cover;
        height: 480px;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 16px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    }

    .cont_descripcion {
        justify-content: center;
        gap: 15px;
        padding-left: 10px;
        padding-right: 10px;
        width: 250px;
        height: 480px;
        margin: 0 20px; /* Espacio entre los cuadros */
        font-size: 0.8rem;
    }

    .cont_video {
        width: 250px;
        height: 480px;
    }
}
/*NOVEDADES 2*/
.cont_novedades2{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
}
.cont_titulo_y_texto_novedades_2{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 50%;
}


.titulos_novedades_2{
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 40px;
}

.titulos_novedades_2 h2{
    font-family: LeagueSpartan-Bold;
    color: var(--ColorBase);
    font-size: 3rem;
    margin: 0px;
    margin-left: 20px;
}

.cont_texto_novedades_2{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
   
}

.cont_texto_novedades_2 h3{
    margin-left: 20px;
    margin-right: 20px;
    font-size: 0.95rem;
    color: rgb(90, 90, 90);
    font-family: manrope_regular;
}

.cont_imagen_novedades_2{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont_imagen_novedades_2 img{
    width: 100%;
    object-fit: cover;
}
.cont_btn_novedades_2{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;
    margin-left: 40px;
}

.button-27 {
    
    appearance: none;
    background-color:var(--ColorBase) ;
    border: 2px solid var(--ColorBase);
    border-radius: 15px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    min-height: 60px;
    min-width: 0;
    outline: none;
    padding: 16px 24px;
    text-align: center;
    text-decoration: none;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 50%;
    will-change: transform;
  }
  
  .button-27:disabled {
    pointer-events: none;
  }
  
  .button-27:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
  }
  
  .button-27:active {
    box-shadow: none;
    transform: translateY(0);
  }


/* Media Queries para pantallas más pequeñas */
@media (max-width: 900px) {
    .cont_novedades2{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
    }
    .titulos_novedades_2 h2{
        font-size: 2rem;
    }
    .cont_titulo_y_texto_novedades_2{
        width: 80%;
    }
    .cont_imagen_novedades_2{
        width: 80%;
    }
    .button-27 {
        font-size: 0.8rem;
        width: 60%;
        min-height: 50px;
    }
    .cont_texto_novedades_2 h3{
        margin-left: 20px;
        margin-right: 20px;
        font-size: 0.8rem;
        color: rgb(90, 90, 90);
        font-family: manrope_light;
    }
}

/*PODRIA INTERESARTE*/
/**/

/*ENVIOS, ENTREGAS Y DELIVERYS*/
.cont_gene_entregas{
    margin-top:50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.cont_txt_metodos_envios{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom:40px;
}
.cont_txt_metodos_envios h1{
    font-family: LeagueSpartan-Bold;
    color: var(--ColorBase);
    font-size: 3rem;
    margin: 0px;
    margin-left: 20px;
}
.cont_txt_metodos_envios h2{
    font-family: manrope_regular;
    color: var(--ColorBase);
    font-size: 1rem;
}

.sun_cont_gene{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 25px;
}
.cont_envios_entregas{
    width: 80%;
    gap: 25px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont_envios{
    width: 50%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.cont_envios img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cont_entregas{
    width: 50%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.cont_entregas img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cont_deliverys{
    width: 80%;
    height: 400px;
    background-color: #333;   
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.cont_deliverys img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Media Queries para pantallas más pequeñas */
@media (max-width: 900px) {
    .cont_envios_entregas{
        display: flex;
        flex-direction: column;
        height: auto;
        width: 90%;
    }
    .cont_envios{
        width: 100%; 
        height: auto;
    }
    .cont_entregas{
        width: 100%;
        height: auto;
    }
    .cont_deliverys {
        width: 90%;
       height: auto;
    }
    .cont_txt_metodos_envios h2{
        font-size: 0.8rem;
        text-align: center;
    }
    .cont_txt_metodos_envios h1{
        font-size: 2rem;
    }
}

/*Contactanos*/
.contactanos{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    margin-bottom: 100px;
    gap: 40px;
}
.cont_titulo_contactanos{
    width:40%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

.titulos_contactanos h2{
    font-family: LeagueSpartan-Bold;
    color: var(--ColorBase);
    font-size: 3rem;
    text-align: center;
}

.cont_texto_contactanos h3{
    font-size: 0.95rem;
    color: rgb(90, 90, 90);
    font-family: manrope_regular;
}

/*Formulario*/
.container_form {
    background-color:white;
    padding: 30px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    text-align: center;
  }
  
  .form_contac {
    font-family: LeagueSpartan-Bold;
    color: var(--ColorBaseazul);
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 0.85rem;
    color: var(--ColorBase);
    font-family: manrope_regular;
  }
  
  textarea {
    min-height: 150px;
    max-height: 150px;
    font-size: 0.85rem;
    color: var(--ColorBase);
    font-family: manrope_regular;
  }
  
  .enviar_formulario {
    background-color: var(--ColorBaseazul); /* Orange */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .enviar_formulario:hover {
    background-color: var(--ColorBase); /* Darker Orange */
  }

  .label_formulario{
    font-size: 0.85rem;
    color: var(--ColorBase);
    font-family: manrope_regular;
  }

  @media (max-width: 900px) {
    .container_form {
        margin: 20px;
        width: 70%;
    }
    .contactanos{
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    .cont_titulo_contactanos{
        width: 80%;
    }
    .titulos_contactanos h2{
        font-size: 2rem;
    }
    .cont_texto_contactanos h3{
        font-size: 0.8rem;
    }
    .form_contac {
        font-size: 1.5rem;
    }
    input[type="text"],
  input[type="email"],
  textarea {
    font-size: 0.8rem;
  }
}


/*footer*/
.footer {
    background-color: var(--ColorBase);
    color: var(--ColorBasewhite);
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}

.footer-content {
    text-align: center;
}

.footer-logo {
    max-width: 80px; /* Ajusta el tamaño del logo según sea necesario */
}

.footer-text {
    margin: 10px 0;
    font-size: 0.9rem;
    font-family: manrope_regular;
}

.social-media {
    margin-top: 10px;
    display: flex;
    justify-content: center; /* Centra los íconos */
}

.social-icon {
    margin: 0 10px; /* Espaciado entre los íconos */
}

.social-icon-img {
    width: 25px; /* Ajusta el tamaño de los íconos */
    height: auto; /* Mantiene la proporción */
}

.social-icon:hover {
    opacity: 0.7; /* Efecto de hover */
}

/* Media Queries para Responsividad */
@media (max-width: 900px) {
    .footer {
        height: auto; /* Permite que el footer se ajuste a su contenido */
        padding: 10px;
    }

    .footer-logo {
        max-width: 80px; /* Reduce el tamaño del logo en pantallas pequeñas */
    }

    .footer-text {
        font-size: 0.9rem; /* Ajusta el tamaño de la fuente */
    }

    .social-icon-img {
        width: 25px; /* Ajusta el tamaño de los íconos en pantallas pequeñas */
    }
}