:root {
    --green: #27ae60;
    --verde: #418F97;
    --black: #444;
    --light-color: #777;
    --bg-color: #e6e6e6;
    --rojo: #DF4163;
    --naranja: #E78E26;
    --amarillo: #edc64a;
    --cafe: #8c452a;
    --morado: #6a3560;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
    width: 100vw;
    margin: 0vw;
    padding: 0vw;
}

body {
    max-width: 100vw;
    padding: 0vw;
    margin: 0vw;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

header {
    width: 100vw;
}
.ocultar{
    display: none!important;
}
/* TODO MENU CARRITO
.header {
    display: none;
} */
.header{
    display: none;
    z-index: 1100;
}
.active{
    display: block!important;
}
#menu-btn{
    z-index: 2000;
}



/* --------- */
.section_camaleon{
    height: 30vw!important;
    width: 50%;
}
.contenedor-circulo-texto{
    margin-left: 100%!important;
}
.camaleon{
    top: 8vw!important;
}
/* ------- */

#menu-btn_cats {
    width: 60px;
    background-color: #fff;
    font-size: 2.5rem;
    color: #444;
    text-align: center;
    position: absolute;
    top: 2.5rem;
    left: 2rem;
    z-index: 1000;
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    border-radius: 50%;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: var(--box-shadow);
    text-align: center;
    color: var(--black);
    display: none;
}
.datosenvio {
    flex-direction: column!important;
}
#datosenvio {
    flex-direction: column!important;
}
.formulariocontacto, .info-contacto{
    width: 90vw;
}
.info-contacto p{
    font-size: 2.3vw;
    width: 32vw;
}
.formulariocontacto .input{
    background-color: #418F97;
    border-radius: 10px;
    border: none;
    color: white;
    height: 6vw;
    width: 50vw;
    margin-top: .5vw;
    margin-left: 0vw;
    box-shadow: 0.6vw 0.6vw 0.6vw #999;
    font-size: 1.5vw;
    padding: 1vw;
}
.input::-webkit-input-placeholder{
    color: white;
    font-size: 1.5vw;
}
.input::-moz-placeholder{
    color: white!important;
    font-size: 1.3vw;
    font-weight: 700;
}
.input:-moz-placeholder{
    color: white!important;
    font-size: 1.5vw;
    font-weight: 300;
}

/* .input:-ms-input-placeholder{
    color: black!important;
    font-size: 1.5vw;
} */

.formulariocontacto p {
    width: 25vw;
    margin-left: 5vw;
    font-size: 1.4vw;
}
.textarea{
    resize: none;
    height: 18vw!important;
}
.formulariocontacto{
    text-align: center;
    overflow: hidden;
    z-index: 1000;
    margin-top: 4vw;
}
.text_footerup{
    text-align: center;
    margin: 3vw;
    font-size: 1.6vw;
}

.ov-btn-slide-bottom {
    background: var(--rojo);
    /* color de fondo */
    color: #fff;
    /* color de fuente */
    /* tamaño y color de borde */
    padding: 1.6vw 2vw;
    border-radius: 3vw;
    border: none;
    /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
    font-size: 1.5vw;
    font-family: bold;
}

.ov-btn-slide-bottom:hover {
    color: #fff;
    /* color de fuente hover */
}

.ov-btn-slide-bottom::after {
    content: "";
    background: var(--verde);
    /* color de fondo hover */
    position: absolute;
    z-index: -1;
    padding: 1.6vw 2vw;
    display: block;
    left: 0;
    right: 0;
    top: 100%;
    bottom: -100%;
    -webkit-transition: all 0.55s;
    transition: all 0.55s;
}

.ov-btn-slide-bottom:hover::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
}


/* Termino Historia */

#botoncontacto {
    background: var(--naranja);
    border-bottom: 0.3vw solid var(--grisc);
    border-radius: 1.2vw;
    box-shadow: 0.6vw 0.6vw 0.6vw #999;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 1.4vw;
    height: 4vw;
    margin: 4vw auto;
    padding: 1vw 0vw;
    text-align: center;
    transition: all 1s ease 0s;
    width: 15vw;
}

#botoncontacto:hover {
    background: var(--rojo);
}

#botoncontacto:active {
    box-shadow: .2vw .2vw .2vw #777, 0vw 0vw 3.5vw 0vw #00b7f8;
    border-bottom: .1vw solid var(--rojo);
    text-shadow: 0vw 0vw .5vw #fff, 0vw 0vw .5vw #fff;
    transform: translateY(.4vw);
    transition: all 0.1s ease 0s;
}




#botoncontacto.boton {
    margin-top: 2vw;
    margin-bottom: 2vw;
    width: 10vw;
    height: 4vw;
    background-color: var(--verde);
    border: none;
    border-radius: 1vw;
    color: #ffffff;
    font-size: 1.3vw;
    transition: all .5s;
    cursor: pointer;
}

#botoncontacto.boton:hover {
    background-color: var(--naranja);
    transition: all .5s;
}
.col-xl-4 {
    width: 100%;
    margin: auto;
    display: block!important;
}

.header-detalle .contenedor-rojo .nav2-categoria {
    padding: 0vw 1vw;
}

.header-detalle .contenedor-rojo .nav2-categoria a {
    font-size: 2.5rem;
}

.section_camaleon .camaleon {
    height: 80%;
}

.section_camaleon .camaleon img {
    display: block;
    width: 50%;
    object-fit: contain;
}

.section_camaleon .contenedor-circulo-texto {
    background-image: url(../img/HOME_AMANTOLI/cirvulo-camaleon.png);
    width: 63%;
    height: 52vw;
    /* position: absolute; */
    margin-top: 1vw;
    margin-bottom: 3vw;
    margin-left: 30%;
    background-size: 71%;
}

.header-detalle .contenedor-rojo .nav2-categoria input {
    background: transparent;
    border-radius: none;
    color: #fff;
    padding: 5px;
    border-bottom: 2px solid #fff;
    font-size: 1.8rem;
}

.content_img_logo {
    width: -webkit-fill-available;
}

.contenedor-rojo .order-1 {
    width: 20%;
}

main .descripcionCat .caja-verde {
    width: 70%;
    height: 50vw;
    background-color: var(--naranja);
    margin-left: -5%;
    margin-top: 4%;
    line-height: 2.5vw;
    /* padding: 4vw; */
}

main .descripcionCat .caja-verde p {
    font-size: 2vw;
    line-height: 2.5vw;
}

#cantidadprodam {
    position: absolute;
    background-color: var(--rclaro);
    border: 2px solid var(--roscuro);
    padding: 0.2vw;
    border-radius: 40% 40%;
    margin-top: -8vw;
    margin-left: 2.5vw;
    font-size: 1vw;
}

#tablacarrito {
    width: 90%;
    color: #ffffff;
    font-family: "fredoka";
    /* margin-left: 6%; */
}

#tablacarrito tr th {
    font-size: 2vw;
    padding: 0.5vw;
    border: none;
    /* border: 0.5px solid black; */
    color: white;
}

#tablacarrito span {
    margin-left: -20%;
}

#tablacarrito h3 {
    margin: 0.5vw;
    font-family: "fredoka";
    font-size: 2vw;
}

.tab img {
    width: 50%;
}

.main {
    display: flex;
    width: 100vw;
}

.politicacalidad {
    width: 100%;
    margin-left: 5%;
    margin-bottom: 10vw;
}
.politicacalidad h1 {
    text-align: center;
    font-size: 4vw;
    position: relative;
    top: -2vw;
}
.politicacalidad h2 {
    font-size: 8vw;
    margin-top: -23%;
    margin-left: 60%;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--black);
    position: relative;
    margin-bottom: 10%;
}

.politicacalidad p {
    font-size: 1.5vw;
}

.menu-movile {
    display: none;
}

a {
    text-decoration: none;
}

.circulo {
    background-image: url(../img/HOME_AMANTOLI/cirvulo-camaleon.png);
    background-repeat: no-repeat;
    position: absolute;
    background-size: 100%;
    margin-left: 52%;
    width: 12%;
}

.camaleon {
    position: absolute;
    top: 17vw;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

.eliminar {
    width: 20%!important;
    filter: drop-shadow(0px 1.5px 2px black);
    cursor: pointer;
}
.cantidad{
    margin-left: -5vw
}

.eliminar:hover {
    filter: drop-shadow(0px 1.5px 2px red)!important;
}


/*** ESTILOS BOTON SLIDE BOTTOM ***/

.ov-btn-slide-bottom {
    background: var(--rojo);
    /* color de fondo */
    color: #fff;
    /* color de fuente */
    /* tamaño y color de borde */
    padding: 1.6vw 2vw;
    border-radius: 3vw;
    border: none;
    /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
    font-size: 1.5vw;
    font-family: bold;
}

.ov-btn-slide-bottom:hover {
    color: #fff;
    /* color de fuente hover */
}

.ov-btn-slide-bottom::after {
    content: "";
    background: var(--verde);
    /* color de fondo hover */
    position: absolute;
    z-index: -1;
    padding: 1.6vw 2vw;
    display: block;
    left: 0;
    right: 0;
    top: 100%;
    bottom: -100%;
    -webkit-transition: all 0.55s;
    transition: all 0.55s;
}

.ov-btn-slide-bottom:hover::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
}


/* Termino Historia */

.button {
    background: var(--naranja);
    border-bottom: 0.3vw solid var(--grisc);
    border-radius: 1.2vw;
    box-shadow: 0.6vw 0.6vw 0.6vw #999;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 1.4vw;
    height: 4vw;
    margin: 0vw auto;
    padding: 1vw 0vw;
    text-align: center;
    transition: all 1s ease 0s;
    width: 15vw;
}

.button:hover {
    background: var(--rojo);
}

.button:active {
    box-shadow: .2vw .2vw .2vw #777, 0vw 0vw 3.5vw 0vw #00b7f8;
    border-bottom: .1vw solid var(--rojo);
    text-shadow: 0vw 0vw .5vw #fff, 0vw 0vw .5vw #fff;
    transform: translateY(.4vw);
    transition: all 0.1s ease 0s;
}

.politicacalidad p {
    font-size: 2.3vw;
    padding: 3.3vw;
    margin-left: -2%;
}

th {
    text-align: center;
    width: 25vw;
    border: .2vw solid #ffffff;
    background-color: var(--verde);
    color: var(--black);
    font-size: 2.4vw;
}

.boton {
    margin-top: 2vw;
    margin-bottom: 2vw;
    width: 10vw;
    height: 4vw;
    background-color: var(--verde);
    border: none;
    border-radius: 1vw;
    color: #ffffff;
    font-size: 1.3vw;
    transition: all .5s;
    cursor: pointer;
}

.boton:hover {
    background-color: var(--naranja);
    transition: all .5s;
}

.botoncompras {
    margin-top: 5vw;
    width: 90vw;
    height: 10vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2vw;
}

.botoncompras2 {
    margin-top: 0vw;
    width: 90vw;
    height: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
}

.botoncompras h3,
.botoncompras2 h3 {
    width: 15vw;
    height: 4vw;
    text-align: center;
    /* border: 0.2vw solid var(--rojo); */
    border-radius: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4vw;
    background-color: var(--black);
    color: #ffffff;
    transition: all .5s;
    cursor: pointer;
}

.botoncompras button {
    width: 15vw;
    height: 4vw;
    text-align: center;
    border-radius: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4vw;
    background-color: var(--black);
    color: #ffffff;
    transition: all .5s;
    cursor: pointer;
}

.botoncompras h3:hover {
    background-color: var(--verde);
    border: 0.2vw solid var(--verde);
    transition: all .5s;
}

.eliminaimg {
    width: 14%;
    margin-top: 1vw;
    position: relative;
    right: 1.4vw;
}

/* #eliminaimg:hover {
    opacity: 0;
} */

.eliminaimga {
    position: relative;
    left: 0.84vw;
}

main .descripcionCat .caja-blanca {
    width: 100%;
    height: 35vw;
    padding: 6vw;
}



/*     INICIA MENU HAMBURGUESA*/

@media (min-width: 250px) and (max-width: 599px) {
    .header {
        display: flex;
    }
    .header1 {
        height: 474vw;
    }
    /* Menu hamb */
    .header.active {
        width: 100%;
    }
    .header .navbar .menu_aside a {
        font-size: 5.3vw;
    }
    .header .navbar .menu_aside .content_img_option {
        width: 18vw;
        height: 15vw;
        margin-right: 1.5rem;
    }
    .header .navbar .menu_aside .content_img_option.icono_escultura {
        width: 18vw;
    }
    .header .navbar .menu_aside .content_img_logo1 img {
        /* TODO MENU CARRITO
        height: 101%;
        width: 50%; */
        margin-left: 23%;
    }
    #menu-btn_cats {
        display: inline;
        top: .5rem;
        left: 2rem;
        height: 4rem;
        width: 4rem;
        line-height: 4rem;
        font-size: 2rem;
        position: fixed;
        border: .1px solid #7777;
    }
    .header-detalle .nav2-categoria {
        margin-top: 0;
    }
    .header-detalle .contenedor-rojo .nav2-categoria input {
        font-size: 1.3rem !important;
    }
    .header-detalle .contenedor-rojo .nav2-categoria a {
        font-size: 2rem;
    }
    .eliminaimg {
        width: 26%;
        margin-top: 6vw;
        position: relative;
        right: 1.4vw;
    }
    .eliminaimga {
        position: relative;
        left: 2.7vw;
    }
    .section_camaleon .camaleon {
        top: 30%;
    }
    .content_img_logo {
        display: none;
    }
    body {
        width: 100vw;
        padding: 0vw;
        margin: 0vw;
        overflow-x: hidden;
    }
    .ov-btn-slide-bottom {
        background: var(--rojo);
        color: #fff;
        padding: 7.6vw 20vw;
        padding-top: 5vw;
        border-radius: 1vw;
        border: none;
        position: relative;
        z-index: 1;
        overflow: hidden;
        display: inline-block;
        font-size: 6vw;
        font-family: bold;
        margin-top: 10vw;
    }
    /* Carrito  */
    .politicacalidad {
        width: 92%;
        margin-left: 4%;
        margin-top: 61vw;
        margin-bottom: 10vw;
    }
    .politicacalidad h2 {
        font-size: 9vw;
        margin-left: 35vw;
        margin-top: -84vw;
        text-align: center;
    }
    .terminosenvio p {
        font-size: 4vw;
        width: 100%;
        margin-bottom: 15%;
    }
    #tablacarrito {
        width: 100%;
        margin-left: 0%;
    }
    .negocio .tablaprod table th,
    #tablacarrito tr th {
        font-size: 4vw;
    }
    .negocio .tablaprod table .td1,
    #tablacarrito tr .td1 {
        font-size: 3vw;
    }
    .negocio .tablaprod table .td1,
    #tablacarrito tr .td2 {
        font-size: 3vw;
    }
    #tablacarrito h3 {
        font-size: 4vw;
    }
    .tab .ciculo-tabla {
        display: none;
    }
    .tab img {
        width: 100%;
        margin-bottom: -15%;
    }
    .eliminar {
        width: 30%!important;
    }
    #cantidadprodam {
        margin-top: 30vw;
        margin-left: 13.5vw;
        font-size: 5vw;
        color: black;
    }
    .botoncompras {
        height: 30vw;
        width: 80vw;
        margin: 0vw;
    }
    .botoncompras2 {
        height: 15vw;
        width: 67vw;
        display: flex;
        justify-content: center;
    }
    .botoncompras h3,
    .botoncompras2 h3 {
        width: 30vw;
        height: 11vw;
        font-size: 4vw;
        margin-top: 5vw;
        border-radius: 1.5rem;
    }
    .boton {
        width: 50vw;
        height: 20vw;
        font-size: 6.3vw;
        margin-top: 6vw;
    }
    .botoncompras button {
        width: 30vw;
        height: 13vw;
        /* padding: 6.5vw 2vw; */
        text-align: center;
        border-radius: 2vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4.4vw;
        background-color: var(--black);
        color: #ffffff;
        transition: all .5s;
        cursor: pointer;
    }
    .button {
        font-size: 5vw;
        height: 15vw;
        margin: 0vw auto;
        padding: 1vw 0vw;
        text-align: center;
        transition: all 1s ease 0s;
        width: 60vw;
        margin-bottom: 15vw;
    }
    .politicacalidad p {
        font-size: 5vw;
        /* padding: 0vw 8vw; */
    }
    hr {
        height: 4vw;
    }
    .hr {
        height: 4vw;
    }
    main .descripcionCat .caja-verde {
        width: 110%;
        height: 100vw;
        margin-top: 7%;
        margin-right: -5%;
    }
    main .descripcionCat .caja-verde p {
        font-size: 4vw;
        line-height: 4.5vw;
    }
    .ov-btn-slide-bottom {
        display: none !important;
    }
    .header-detalle .contenedor-rojo {
        height: 15vw!important;
    }
}

@media (max-width: 768px) {
    .section_camaleon .camaleon {
        top: 15vw;
    }
    .content_img_logo img {
        margin-top: 3%;
        width: 20%;
    }
    .header-detalle .nav2-categoria {
        margin-top: 0;
    }
    .header-detalle .contenedor-rojo {
        height: 10vw;
    }
    .header-detalle .contenedor-rojo .nav2-categoria input {
        font-size: 1.5rem;
    }
    .header-detalle .contenedor-rojo .nav2-categoria .div {
        width: 7vw;
    }
    main .descripcionCat .caja-verde {
        float: left;
    }
    .men{
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 1050px) {
    /* TODO MENU CARRITO
        .header {
        display: none;
    } */
    .contenedor-rojo .order-1 {
        width: 80%;
    }
    .header-detalle .contenedor-rojo .nav2-categoria a {
        font-size: 2.5rem;
    }
    .header-detalle .contenedor-rojo .nav2-categoria .div {
        width: 8vw;
    }
    .header-detalle .contenedor-rojo .nav2-categoria input {
        font-size: 1.8rem;
    }
    #menu-btn_cat {
        display: none;
    }
    .section_camaleon .camaleon {
        /* height: 88%; */
        top: 18vw;
    }
    .ov-btn-slide-bottom {
        background: var(--rojo);
        color: #fff;
        padding: 1.9vw 3vw;
        border-radius: 3vw;
        border: none;
        position: relative;
        z-index: 1;
        overflow: hidden;
        display: inline-block;
        font-size: 2.5vw;
        font-family: bold;
        margin-top: 7vw;
    }
    .men{
        display: none;
    }
    .botoncompras button {
        margin: 0vw;
        width: 20vw;
        height: 8vw;
        font-size: 2.4vw;
    }
    #tablacarrito {
        width: 95%;
        margin-left: -2.5%;
    }
    #tablacarrito tr .td2 {
        font-size: 2vw;
    }
    #tablacarrito tr .td1 {
        font-size: 2vw;
    }
    #tablacarrito tr th {
        font-size: 2.8vw;
    }
    .tab img {
        width: 50%;
    }
    .eliminar {
        width: 18%!important;
    }
    #tablacarrito h3 {
        font-size: 2vw;
    }
    .botoncompras h3,
    .botoncompras2 h3 {
        width: 20vw;
        height: 8vw;
        font-size: 2.4vw;
    }
    .politicacalidad p {
        font-size: 3.5vw;
        padding: 0vw 8vw;
    }
    main .descripcionCat .caja-verde {
        width: 70%;
        height: 75vw;
        margin-top: 10%;
        line-height: 2.5vw;
        /* padding: 4vw; */
    }
    main .descripcionCat .caja-verde p {
        font-size: 2.5vw;
        line-height: 3.5vw;
        padding: 1.5rem;
    }
}


/* 
@media (min-width: 1050px) and (max-width: 1800px) {
    .contenedor-rojo .order-1 {
        width: 50%;
    }
    .header-detalle .contenedor-rojo .nav2-categoria a {
        font-size: 2vw;
    }
} */