@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Inter:wght@200&display=swap');

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: #ffffff;
        font-family:  'Chakra Petch', sans-serif;
        border-radius: 10px;
        position: sticky; /* Cambio a position: sticky; */
        top: 0; /* Asegura que el encabezado se quede en la parte superior */
        z-index: 100; /* Asegura que el encabezado esté por encima del contenido */
        /* Agrega una sombra en la parte inferior para destacar el encabezado */
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Estilo para el enlace activo con la barra encima */
    header a.current {
        position: relative; /* Añade posición relativa al enlace */
    }
  
    header a.current::before {
        content: "";
        display: block;
        width: 100%;
        height: 2px; /* Altura de la barra */
        background-color: #1A3EDC; /* Color de la barra */
        position: absolute;
        top: -2px; /* Ajusta la posición para que esté por encima del enlace */
        left: 0;
    }

    header a {
        text-decoration: none;
        color: #1A3EDC;
        font-size: 15px;
    }

    /* Estilo para el enlace activo */
        header a.activo {
        background-color: #1A3EDC; /* Fondo azul */
        color: #ffffff; /* Letra blanca */
        border-radius: 5px; /* Ajusta el redondeo de los bordes si lo deseas */
    }

    /* Estilo para el enlace activo */
        header a.activo,
        header a.enlace:hover {
        background-color: #1A3EDC; /* Fondo azul */
        color: #ffffff; /* Letra blanca */
        border-radius: 5px; /* Ajusta el redondeo de los bordes si lo deseas */
    }

    nav ul {
        list-style-type: none;
        display: flex;
    }
  
    nav ul li {
        margin-left: 10px; /* Ajusta el margen izquierdo según sea necesario */
    }
  
    nav ul li:first-child {
        margin-left: auto; /* Alinea el primer enlace a la derecha */
    }

    #logo {
        display: flex;
        align-items: center;
        margin-top: 10px; /* Ajusta el margen superior según tus necesidades */
        float: left; /* Añade esta línea para alinear el logo a la izquierda */
    }
  
    #logo img {
        width: 120px; /* Ajusta el ancho de la imagen según tus necesidades */
    }

    .skewed {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background: #1A3EDC;
        z-index: 10;
        transform: skewY(16deg);
        transform-origin: top right;
        box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.1);
    }

    /* Estilos para la ventana emergente */
    .ventana {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 999;
    }

    .contenido {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
    }

    /* Estilos para el botón de abrir la ventana */
    #abrirVentana {
        background-color: #1A3EDC;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }

    /* Estilos para el botón de cerrar la ventana */
    #cerrarVentana {
        background-color: #f44336;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }

    .portada-image {
        display: block; /* Cambia el valor de display a 'block' en lugar de 'background-image' */
        width: 100%;
        height: auto; /* Permite que la altura se ajuste automáticamente para mantener la proporción original */
        object-fit: cover;
        object-position: top; /* Coloca la imagen en la parte superior del contenedor */
    }

    .contenedorT{
        text-align: center;
        font-family:  'Chakra Petch', sans-serif;
        font-size: 30px;
        margin-bottom: -20px;
        overflow: hidden;
    }

    .tespecial{
        margin-top: 4vh;
    }

    h1{
        margin-bottom: 40px;
    }

/*Estilos de informacion productos*/

/*Estilos globales*/

    body{
        font-family: 'Chakra Petch', sans-serif;
        color: black;
    }

/*Main*/
    .container-items{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 20px;
    }

    .item{
        border-radius: 10px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
    }

    .item:hover{
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.30);
    }

    .info-product{
        padding: 15px 30px;
    }

    .item img{
        width: 100%;
        height: 50vh;
        object-fit: cover;
        border-radius: 10px 10px 0 0;
        transition: all .5s;
    }

/* Estilos para las imágenes de los productos */
    .product-image {
        width: 100%; /* Ajusta el ancho de acuerdo a tus necesidades */
        height: auto;
        object-fit: cover;
        border-radius: 10px 10px 0 0;
    /* Agrega más estilos según tus preferencias */
    }

    /*Movimiento de imagen*/
    .item:hover img{
        transform: scale(1.1);
    }

    .info-product{
        padding: 15px 30px;
        display: flex;
        flex-direction: column;
    }

    .price{
        margin-top: -5px;
        font-size: 18px;
        font-weight: bold;
    }

    .info-product button{
        margin-top: -5px;
        border: none;
        background: none;
        background-color: #1A3EDC;
        color: #ffffff;
        padding: 15px 10px;
        cursor: pointer;
        border-radius: 10px;
    }

    .center-button-container {
        text-align: center; /* Centra el contenido horizontalmente */
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .botonL{
        border: none;
        background: none;
        background-color: #1A3EDC;
        color: #ffffff;
        width: 60%;
        height: 50px;
        cursor: pointer;
        border-radius: 10px;
        font-size: 15px;
        margin: 0 auto; /* Esto centra horizontalmente el botón en su contenedor */
        transition: background-color 0.3s; /* Agrega una transición suave al cambio de color */
    }

    .botonL:hover {
        background-color: #0E297A; /* Cambia el color de fondo cuando se pasa el cursor sobre el botón */
    }


/*Estilos de apartado OFERTAS*/

    .center-container {
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
        height: auto; /* Ajusta automáticamente la altura del contenedor */
        max-width: 80%; /* Ancho máximo del contenedor */
        margin: 0 auto; /* Centra horizontalmente el contenedor */
        background-color: #ffffff; /* Opcional: agrega un fondo para visualizar el rectángulo */
        margin-bottom: 20px;
    }

    .container-ofertas {
        width: 70%;
        margin-bottom: 20px;
        display: flex;
        justify-content: center; /* Centra los elementos horizontalmente */
        align-items: center; /* Centra los elementos verticalmente */
        border-radius: 10px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
        padding: 20px; /* Añade espacio alrededor del contenido */
    }

    .itemf {
        display: flex; /* Cambiamos a flex para poder alinear la imagen y el texto horizontalmente */
        align-items: center; /* Centramos verticalmente el contenido dentro de .itemf */
        text-align: left; /* Alinea el texto a la izquierda */
    }

    .itemf img {
        max-width: 150px; /* Ancho máximo para la imagen (ajústalo según tus necesidades) */
        height: auto; /* Mantiene la proporción original de la imagen */
        margin-right: 20px; /* Agrega espacio entre la imagen y el texto */
    }

    .info-oferta {
        display: flex;
        justify-content: space-between; /* Espacio entre elementos */
        align-items: center; /* Alinea verticalmente el contenido dentro de .info-oferta */
        padding: 10px; /* Espacio alrededor del texto */
        width: 100%; /* Asegura que .info-oferta ocupe todo el ancho disponible */
    }

    .text-info {
        flex-grow: 1; /* Permite que los textos ocupen el espacio disponible */
    }

    .text-info h2,
    .text-info p.priceO,
    .text-info p.priceOferta {
        margin: 0; /* Quita el margen para evitar espacios innecesarios */
        width: 100%; /* Hace que los textos ocupen todo el espacio horizontal disponible */
    }

    .text-info p.priceO{
        margin-top: 10px;
        text-decoration: line-through;
    }

    .text-info p.priceOferta{
        color: red;
        font-weight: bold;
        margin-top: 10px;
    }

    .text-info button{
        margin-top: 20px;
        margin-bottom: 20px;
        border: none;
        background: none;
        background-color: #1A3EDC;
        color: #ffffff;
        padding: 15px 10px;
        cursor: pointer;
        border-radius: 10px;
    }

    .text-info button:hover {
        background-color: #0E297A; /* Cambia el color de fondo cuando se pasa el cursor sobre el botón */
    }

    .offer {
        margin: 0;
        color: white; /* Texto blanco */
        background-color: red; /* Fondo rojo */
        border-radius: 50%; /* Hace que el fondo sea circular */
        text-align: center; /* Alinea el texto al centro del círculo */
        padding: 5px 10px; /* Añade espacio dentro del círculo */
        font-size: 30px; /* Tamaño de fuente más grande */
    }

/*Estilos del pie de pagina*/

    .separator {
        margin-bottom: 100px;
        align-content: center;
        width: 90%;
        height: 1.5px;
        background-color: #000000;
        margin: 1px auto; /* Ajusta el espacio entre las líneas y los íconos */
    }

    .separator2{
        align-content: center;
        width: 90%;
        height: 1.5px;
        background-color: #1A3EDC;
        margin: -1px auto; /* Ajusta el espacio entre las líneas y los íconos */
    }

    /* Agrega estos estilos para centrar y cambiar el tamaño de los iconos */
    footer {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        padding: 10px;
    }

    footer a:not(:last-child)::after {
        content: "";
        display: inline-block;
        width: 1.5px; /* Ancho de la línea */
        height: 20px; /* Altura de la línea */
        background-color: #1A3EDC; /* Color de la línea */
        margin-left: 10px; /* Espacio entre el icono y la línea */
    }

    footer a {
        display: inline-block;
        margin: 0 5px; /* Espacio entre los iconos */
        color: #0f0f0f;
        font-size: 25px; /* Tamaño de fuente de los iconos */
        position: relative;
    }

    /* Opcional: si deseas que los iconos tengan un efecto al pasar el mouse */
    footer a:hover {
        opacity: 0.7;
    }


/* Estilos para la ventana emergente */
    .ventana {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 999;
    }

    .contenido {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
    }

    .contenido h2{
        text-transform: uppercase;
    }

    .contenido p{
        text-transform: uppercase;
    }

    .contenido button{
        margin-top: 10px; /* Espacio entre los botones */
        border: none;
        background: none;
        background-color: #1A3EDC;
        transition: background-color 0.3s; /* Agrega una transición suave al color de fondo */
        color: #ffffff;
        padding: 15px 10px;
        cursor: pointer;
        border-radius: 10px;
        width: 50%; /* Los botones ocupan todo el ancho disponible */
    }

    .contenido #llamar{
        background-color: #25D366;
        transition: background-color 0.3s; /* Agrega una transición suave al color de fondo */
    }

    /* Cambia el color de fondo del botón Mercado Libre y el color de fondo al pasar el cursor */
    .btn-mercadolibre button {
        background-color: #FFE600 !important; /* Cambia el color de fondo original del botón Mercado Libre */
        color: #000000 !important; /* Cambia el color del texto a negro */
        transition: background-color 0.3s; /* Agrega una transición suave al color de fondo */
    }

    .btn-mercadolibre button:hover {
        background-color: #9E7703 !important; /* Color de fondo más oscuro al pasar el cursor */
    }

    .contenido button:hover {
        background-color: #0E297A; /* Cambia el color de fondo cuando se pasa el cursor sobre el botón */
    }

    .contenido #llamar:hover {
        background-color: #1E974B; /* Cambia el color de fondo cuando se pasa el cursor sobre el botón */
    }

/* Estilos para el botón de abrir la ventana */
    #abrirVentana {
        background-color: #1A3EDC;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }

/* Estilos para el icono de tacha */
    #cerrarVentana {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 16px; /* Ancho y alto iguales para un fondo circular */
        height: 36px;
        background-color: rgb(255, 255, 255);
        border-radius: 50%; /* Hace que el fondo sea circular */
        display: flex;
        justify-content: center; /* Centra horizontalmente el contenido */
        align-items: center; /* Centra verticalmente el contenido */
        cursor: pointer;
        color: red; /* Color del icono */
    }

/*------------RESPONSIVE-------------------*/

/* Estilo para el botón de menú hamburguesa */
    .menu-icon {
        display: none; /* Oculta el botón en tamaños de pantalla más grandes */
        cursor: pointer;
        padding: 10px;
    }
  
    .menu-icon .bar {
        width: 30px;
        height: 3px;
        background-color: #1A3EDC;
        margin: 4px 0;
        transition: 0.4s;
    }
  
  /* Estilo para mostrar la navegación en dispositivos móviles */
    nav {
        display: flex;
    }
  
    nav ul {
        list-style-type: none;
        display: flex;
        margin: 0;
        padding: 0;
    }
  
    nav li {
        margin-left: 10px;
    }

  /* Media query para mostrar el botón de menú hamburguesa y ocultar la navegación */
@media (max-width: 768px) {
    .header{
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    }
  
    .menu-icon {
        display: block; /* Muestra el botón en tamaños de pantalla más pequeños */
    }
  
    #logo img {
      width: 115px; /* Ajusta el ancho de la imagen según tus necesidades */
    }
  
    nav {
        display: none; /* Oculta la navegación en tamaños de pantalla más pequeños */
        flex-direction: column;
        background-color: #ffffff;
        position: absolute;
        top: 60px;
        right: 0;
        z-index: 1;
        border-radius: 5px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }
  
    nav.show {
        display: flex; /* Muestra la navegación cuando se activa */
    }
  
    nav ul {
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }
  
    nav li {
        margin: 10px 0;
    }
  
    /* Estilo para el enlace activo en dispositivos móviles */
    nav a.current::before {
        top: 0;
    }

    .skewed {
        height: 15vh;
    }

  
    /* Estilos para la ventana emergente */
    .ventana {
        width: 100%;
        height: 100%;
    }   

    .contenido {
        padding: 5vh;
        width: 65%;
        height: 38vh;
        font-size: 12px;
        margin-top: 1vh;
    }

    /* Estilos para el botón de cerrar la ventana */
    #cerrarVentana {
        margin-right: 1vh;
        border: none;
        padding: -2vh 1vh;
        margin-top: 25vh;
    }

    .contenedorT{
        font-size: 20px;
    }

    .container-items{
        grid-template-columns: repeat(2, 1fr);
        height: 30vh;
        margin-bottom: 30vh;
        font-size: 8px;
    }

    .item img{
        width: 100%;
        height: 10vh;
    }

    .price{
        font-size: 13px;
    }

    /*responsive apartado ofertas*/
    .tofer{
        margin-top: 130vh;
    }

    .text-info h2 {
        font-size: 15px;
    }

    .itemf img {
        margin-right: -4vh; /* Agrega espacio entre la imagen y el texto */
    }

    .offer{
        margin-left: 1vh;
    }

    .botonL{
        font-size: 10px;
    }

}

/*responsive ipads*/

@media (min-width: 820px) and (max-width: 915px)  {
    .skewed {
        height: 18vh; /* Ajusta la altura para dispositivos móviles */
        transform: skewY(30deg); /* Ajusta el ángulo de inclinación para dispositivos móviles */   
    }

    .item img{
        width: 100%;
        height: 10vh;
    }
}