@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');


/*Reinicia los estilos por defecto del navegador*/
    *{
        font-family: 'Poppins', sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
        list-style-type: none;
    }

    :root{
        --purple-dark: #050104;
        --purple-medium: #33032d;
        --purple-light: #531253;
        --gray-light: #fcfcfc;
        --white: #ffffff;
        
    }

    /*---------NAVBAR--------*/

    .menu {
        background-color: #ffffff;
        width: 100%;
        /*Se queda pegado en la parte de arriba*/
        position: sticky;
        top:0;
        /*Padding a todos los lados*/
        padding: 5px;
        z-index: 999;
        text-align: center;
        display: flex;
        justify-content: center;
        font-family: 'Staatliches' !important;
        margin-bottom: 1px;
        border-bottom: 1px solid rgb(73, 73, 73);

    }

    p, .lead, label, span, a, .card-header, div, .fs-6, .card-text  {
        font-size: 14px !important;
        text-wrap: pretty;
    }

    h1,h2,h3,h4,h5,h6 {
        text-wrap: balance;
    }
    h6{
        font-size: 13px !important;
    }

    p, .lead, label, span, a{
        font-size: 14px !important;
    }
    
    .navbar-nav a, .nav-link {
        font-size: 12px !important;
    }
    
    #navigation{
        font-size: 12px;
    }
    
    #google_translate_element span{
        font-size: 7px !important;
    }
    
    .menu a{
        display: inline-block;
        padding: 10px 30px;
        font-size: 15px;
        background-color: #ffffff;
        margin: 0 10px;
        transition: .5s ease all;
        color: var(--purple-dark);
        text-decoration: none;
    }

    .img-status{
        height: 170px;
        width: 100%;
        object-fit:scale-down;
    }
    .menu a:hover{
        transform: translateY(18px);
        background-color: var(--white);
    }


    /*---------------- SUBTITULOS ----------------*/
    .subtitulo {
        font-size: 20px;
        font-family: 'Noto Serif',serif;
        font-weight: 700;
        z-index: 2;
        text-transform: uppercase;
        /* margin-bottom: 20px; */
    }

    .subtitulo span{
        background-color: var(--gray-light);
        color: var(--purple-dark);
        letter-spacing:4px;
        padding: 0 15px;
        z-index: 99;
        position: relative;
    }

    .subtitulo::after{
        content: "";
        display: inline-block;
        height: 3px;
        width: 100%;
        background: var(--purple-dark);
        position: relative;
        top: -29px;
        z-index: 1;
    }

    .btn-cesta, .btn-verproducto{
        width:130px; 
        border:1px solid #57585E; 
        font-size:11px !important; 
        /* background: #FFFFFF !important;  */
        color: black !important;
        /* text-transform: uppercase; */
        padding: 4px 0px;
    }

    .btn-verproducto:hover{
        border: 1px solid rgb(255, 230, 0) !important;
        color: red !important;
        font-weight: bold;
    }

    /*------------- SHOWCASE------------------ */
    hr{
        margin: 10px 0;
    }
    .showcase {
        width: 100% !important;
        height: 91vh !important;    
        /*background: url(img/tienda.jpg) no-repeat center/cover;*/
        background: linear-gradient(rgba(0,0,0,.60) 0%, rgba(0,0,0,.50) 100%), url(../img/tienda.jpg);
        background-position: center center !important;
        background-size: cover !important;
        padding: 50px !important;
        margin-bottom: 20px !important;
        display: flex !important; /*Centrar el texto*/
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important; /* Texto centrado y al final*/
    }

    .btno {
        cursor: pointer;
        display: inline-block;
        font-weight: bold;
        padding: 15px 85px;
        background: #262626;
        color: white;
        font-size: 18px;
        border: 1px solid white;
        margin: 10px 0;
        

    }

    .btno:hover{
        opacity: .7;
        transform: scale(1.1);
        transition:  .3s ease-in-out;
        color: white;
        
    }

    .showcase h1, .showcase p {
        margin-bottom: 10px;
        text-transform: uppercase;
        color: white;
    }
    .showcase p{
        font-size: 15px;
    }
    .showcase h1{
        font-family: 'Staatliches', cursive !important;
        letter-spacing: 5px;
        font-size: 60px;
        font-weight: bolder;
        text-align: center;
        justify-content: center;

    }

    /*-----Figuras en movimiento-----*/

    .img-reveal{
        height: 48px;
        width: 48px;
    }

    .img-reveal:hover{
        transform: scale(1.2) !important;
        transition: .2s ease all !important;
    }



    /*--- Separador ---*/

    .separador {
        width: 100% !important;
        height: 350px !important;
        background-position: center center !important;
        background-size: cover !important;/*La imagen se hace mas pequeña y abarca el 100% de la ventana*/
        background-attachment: fixed !important; /*La imagen se queda fija*/
        margin-bottom: 60px !important;
    }

    .sp-1 {
        background: linear-gradient(rgba(0,0,0,.90) 0%, rgba(0,0,0,.50) 100%), url(../img/bg-separator.png);
    }

    .sp-2 {
        background: linear-gradient(rgba(0,0,0,.70) 0%, rgba(0,0,0,.50) 100%), url(../img/bg-separator.png);
    }


    .separador p {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-family: 'Noto Serif', serif;
        padding: 10px;/*Padding de 10px a todos los lados*/
    }


    /*--- Acerca de ---*/
    .btn-leermas {
        cursor: pointer;
        /*display: inline-block;*/
        font-weight: bold;
        padding: 4px 10px;
        background: #262626;
        background-color:transparent;
        color: black;
        font-size: 10px;
        border: 1px solid black;
        margin: 10px 0;
        text-decoration:none;
    }

    .btn-leermas:hover{
        opacity: .8;
        background-color:#262626;
        color: white;
    }


    .acerca-de {
        margin-bottom: 60px;
        margin-top: 60px;
    }

    .text-acerca-de p, strong, li, b, span{
        font-size:15px !important;

    }
    #span-nhistoria p, #span-nservicio p, #p-nhistoria, #p-nservicio {
        font-size: 15px !important;
        text-align: justify;
        text-justify: inter-word;
    }


    .galeria img {
        height: 100%;
        width: 100%;
        object-fit: cover; /*Si la imagen no entra, se acomode y se recorte pero sin perder la proporcion*/
    }


    
    .collapsing {
        height: 0;
        overflow: hidden;
        transition: height .5s ease;
    }

    /*--- Footer ---*/

    .contacto {
        margin-bottom: 70px;
    }



    .redes-sociales {
        padding: 25px;
        background-color: black;
    }

    .redes-sociales img{
        padding: 5px;
        border-radius: 100%;
        width: 50px;
        transition: .3s ease all;
    }

    .redes-sociales img:hover{
        transform: scale(1.2);/*Escalar la imagen 1.2 veces el original*/
    }

    .subvencion{
        padding: 25px;
        
    }

    .subvencion img{
        width: auto;
    }

    .contactus {
    font-size: 14px;
    letter-spacing: 1px;
    }
    .contactus img{
        height: 40px;
    }
    .contactus img:hover{
        transform: scale(1.2);/*Escalar la imagen 1.2 veces el original*/
    }



    .btn-enviar {
        cursor: pointer;
        display: inline-block;
        font-weight: bold;
        padding: 15px 85px;
        background: #262626;
        color: white;
        font-size: 15px;
        border: 1px solid rgb(255, 255, 255);
        margin: 10px 0;
        text-align: center;
        text-decoration: none;

    }

    .btn-enviar:hover{
        opacity: .7;
        transition:  .3s ease-in-out;
        color: rgb(0, 0, 0);
        background: #e5ff00;
        
    }

    #img-logo{
        max-width: 280px;
        max-height: 200px;
        height: 100%;
        width: 100%;
        object-fit: cover; /*Si la imagen no entra, se acomode y se recorte pero sin perder la proporcion*/
        /*border: 1px solid rgb(219, 219, 219);*/
    }
    #img-logo:hover{
        transform: scale(1.1);
        transition: .3s ease all;
        cursor: pointer;
    }


    .msg-error {
        color: #c65848;
    }
    .g-recaptcha.error {
        border: solid 2px #c64848;
        padding: .2em;
        width: 19em;
    }


    /*----- BOTON FLOTANTE WHATSAPP----*/
    .whatsapp {
        position:fixed;
        width:60px;
        height:60px;
        bottom:10px;
        right:40px;
        background-color:#25d366;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        font-size:30px;
        z-index:100;
    }
    
    .whatsapp-icon {
        margin-top:13px;
    }

    /*----BOTON PEDIR CITA-----*/
    .btn-cita {
        position:fixed;
        width:60px;
        height:60px;
        /*bottom:80px;*/
        right:40px;
        background-color:#3494d4;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        font-size:30px;
        z-index:100;
    }
    
    .cita-icon {
        margin-top:13px;
    }

    /*--BOTON PEDIDO ---*/
    .btn-pedido {
        position:fixed;
        width:60px;
        height:60px;
        /*bottom:150px;*/
        right:40px;
        background-color:#042033;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        font-size:30px;
        z-index:100;
    }
  
    .pedido-icon {
        margin-top:13px;
    }


    /*Producto*/
    .detalle:hover{
        cursor: pointer;
    }

    /* product-div CARD HOVER y FOCUS */
    .product-div:hover, .product-div:focus {
        /* Establecer un borde estilo neon girando y parpadeando */
        animation: neon-border 1s infinite;
    }
  
    /* Definir la animación para el borde estilo neon */
    @keyframes neon-border {
        0% {
        box-shadow: 0 0 4px rgba(120, 180, 255, 0.6), 0 0 12px rgba(120, 180, 255, 0.6), 0 0 20px rgba(120, 180, 255, 0.6);
        }
        50% {
        box-shadow: 0 0 8px rgba(120, 180, 255, 0.6), 0 0 16px rgba(120, 180, 255, 0.6), 0 0 24px rgba(120, 180, 255, 0.6);
        }
        100% {
        box-shadow: 0 0 4px rgba(120, 180, 255, 0.6), 0 0 12px rgba(120, 180, 255, 0.6), 0 0 20px rgba(120, 180, 255, 0.6);
        }
    }

    .fw-bold-hover:hover{
        font-weight: bolder !important;
        cursor: pointer;
    }


  
  

/*--- Trabajo de media Queries ---*/

    @media screen and (max-width: 992px) {
        p, .lead, label, span, a, .card-header{
            font-size: 14px !important;
        }

        .btno {
            cursor: pointer;
            display: inline-block;
            font-weight: bold;
            padding: 10px 65px;
            background: #262626;
            color: white;
            font-size: 18px;
            border: 1px solid white;
            margin: 10px 0;
            
        
        }
        
        .btno:hover{
            opacity: .7;
            transform: scale(1.2);
            transition:  .3s ease-in-out;
            color: white;
            
        }


        .menu a{
            font-size: 15px;
            padding: 5px 5px;
        }

        .nosotros .titulo,
        .productos .titulo {
            font-size: 30px;
        }

        .separador {
            background-attachment: fixed !important; /*La imagen se queda fija*/
        }
        

    }

    @media screen and (max-width: 500px) {

        p, .lead, label, span, a, .card-header, div, .fs-6, .card-text, select, textarea  {
            font-size: 12px !important;
        }
        h6{
            font-size: 12px;
        }

        .img-status{
            height: 130px !important;
        }

        .btn-cesta{
            width:150px; 
            border:1px solid #57585E; 
            font-size:10px !important; 
            padding: 6px 0px;

        }
        .btn-verproducto{
            width:120px;
            font-size:9px !important; 
            padding: 6px 0px;
            color: black !important;
        }

        .btno {
            cursor: pointer !important;
            padding: 18px 95px !important;
            background: #262626 !important;
            display: inline-flex !important;
            letter-spacing: 3px !important;
            color: white !important;
            font-size: 15px !important;
        }
        .showcase i{
            padding-top: 4px !important;
        }
        
        .btno:hover{
            opacity: .7;
            transform: scale(1.1) !important;
            transition:  .3s ease-in-out !important;
            color: white !important;
            
        }

        .showcase h1{
            font-size: 28px !important;
            text-align: center !important;
            justify-content: center !important;
        }
        #buscarp{
            width: 180px;
        }

        input::placeholder {
            font-weight: bold;
            opacity: 0.5;
            font-size: 11px;
        }
        .qty{
            display: none !important;
        }

        .price, .btn-precio {
            font-size: 15px !important;
        }

    }


@media screen and (max-width: 400px) {

    p, .lead, label, span, a, .card-header, div, .fs-6 {
        font-size: 11px !important;
    }
    h6{
        font-size: 13px;
    }

    .btn-cesta{
        width:100px; 
        border:1px solid #57585E; 
        font-size:9px !important; 
        padding: 6px 0px;

    }
    .btn-verproducto{
        width:70px;
        font-size:9px !important; 
        padding: 6px 0px;
        color: black !important;
    }
}