:root{
    --fuenteHeading: 'Oxygen', sans-serif;
    --fuenteParrafos: 'Roboto Condensed', sans-serif;

    --primario: rgb(45, 97, 235);
    --titulo-principal: #551a8b;
    --gris: #e1e1e1;
    --blanco: #ffffff;
    --negro: #000000;
    --amarillo: #F5C002;
    --negro-botones: #191919;
    --verde:#D2F595;
}
html{
    box-sizing: border-box;
    font-size: 62.5%; /* 1rem = 10px*/
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-family: var(--fuenteParrafos);
    font-size: 1.6rem;
    line-height: 2;
}

/*Globales*/
.contenedor {
    width: min(90%, 120rem); /* es lo mismo que 
    max-width: 120rem;
    width: 90%;*/
}
a {
    text-decoration: none;
}
h1, h2, h3, h4 {
    font-family: var(--fuenteHeading);
    line-height: 1.2;
}
h1{
    font-size: 3.8rem;
}
h2{
    font-size: 2rem;
}
h3{
    font-size: 2rem;
}
h4{
    font-size: 1.8rem;
}
img{
    max-width: 100%;
}
/* Utilidades*/
.no-margin{
    margin: 0;
}
.no-padding{
    padding: 0;
}
.centrar-texto{
    text-align: center;
}
/* Header total */
header{
    position: fixed;
    width: 100%;
    z-index: 99999;
}
.social-top{
    display: flex;
    justify-content: space-around;
    text-align: center;
    background: #214c9b;
    color: var(--blanco);
}
.contactos-top{
    padding-top: 1.2rem;
}
.social-top a{
    color: var(--amarillo);
}
.social-top a:hover{
    color: #e59e09;
    text-decoration: underline;
    transition: .5s ease all;
}
.fa-facebook-square,
.fa-instagram{
    font-size: 2rem;
    margin: 0 .3rem;
}
.top{
    width: 100%;
    background: var(--blanco);
}
.top .contenedor{
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding-top: .5rem;
}
.logo-laser{
    width: 25rem;
}
/* NAV-BAR */
.nav-bar{
    display: block;
    color: var(--primario);
    cursor: pointer;
    font-size: 4rem;
    text-align: right;
}
@media only screen and (max-width: 768px) {
    .top .contenedor{
        display: flex;
    }
    .style-1{
        z-index: 999999;
        margin-top: 11rem;
        display: grid;
        position: absolute;
        width: 90%;
        margin-left: -100%;
        transition: all 0.5s;
    }
}
@media only screen and (max-width: 540px) {
    .style-1{
        margin-top: 10rem;
    }
}
@media only screen and (max-width: 360px) {
    .style-1{
        margin-top: 8.5rem;
    }
    .logo-laser{
        width: 16rem;
        padding-top: 1rem;
    }
}
@media only screen and (min-width: 1024px) {
    .nav-bar{
        display:none;
    }
    .style-1{
        margin-top: 3rem;
    }
}
.mostrar{
    margin-left: 0%;
}

/* Main conenido */
.titulo h2,h3{
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--amarillo);
    font-family: var(--fuenteHeading);
    font-size: 2.2rem;
}
.titulo p {
    font-family: var(--fuenteParrafos);
}
.maquina{
    width: 100%;
    height: 50%;
    border-radius: .5rem;
}
.slider-right-index{
    border-radius: .5rem;
    margin: 2rem 0 0 0;
}

.texto-medio{
    margin-top: 3rem;
    margin-bottom: 1rem;
    text-align: justify;
}
.grupo-laser{
    color: var(--primario);
    font-weight: 700;
}
.grupo-laser:hover{
    color: var(--amarillo);
    transition: all 1s ease;
    text-decoration: underline;
}
@media (min-width: 1080px) {  
    .logo-middle{
        margin: 0 auto;
        width: 30rem;
    }
}

/* Top image */
.top-img img{
    width: 100%;
    padding-top: 18.5rem;
}
@media (max-width: 768px) {
    .top-img img{
        width: 100%;
        padding-top: 18.5rem;
    }
    .logo-middle{
        margin: 0 auto;
        margin-top: 7.5rem;
    }
}
@media (max-width: 540px) {
    .top-img img{
        width: 100%;
        padding-top: 21rem;
    }
}
@media (max-width: 360px) {
    .top-img img{
        width: 100%;
        padding-top: 22rem;
    }
}
@media (max-width: 280px) {
    .top-img img{
        width: 100%;
        padding-top: 22rem;
    }
}
.img-galery-product{
    width: 10rem;
    height: 10rem;
    border-radius: 3rem;
}

.migas{
    font-size: 2rem;
}
.migas a{
    background: var(--negro-botones);
    padding: 2rem 1.5rem;
    color: orange;
}
.migas a:hover{
    background: orange;
    color: var(--negro-botones);
    transition: all 1s ease;
}

/* Anclas */
.galeria-corte-laser{
    transition: all 1s ease;
}

/* Links Contactos */
.contacto-1 a{
    color: #214c9b;
}
.contacto-1 a:hover{
    color: var(--primario);
    text-decoration: underline;
}

/* Form */
.formulario{
    display: grid;
    gap: 2rem;
}
.formulario input, textarea{
    padding: 1rem;
    border: none;
    background: var(--gris);
    color:var(--primario);
}
.formulario .boton{
    background-color: var(--amarillo);
    color: var(--negro);
    font-size: 2rem;
    font-weight: 700;
}
.formulario .boton:hover{
    background-color: var(--negro);
    color: var(--amarillo);
    cursor: pointer;
    transition: 1s ease all;
}


/* Mapa Style */
.mapa{
    margin: 0;
}

/* Img Footer */


/* Footer - Contactos */
footer{
    background: var(--negro-botones);
}
.footer-dir{
    margin: 2rem;
    color: var(--blanco);
}
.footer-dir h3{
    border-bottom: 1px solid var(--gris);
    margin-bottom: 2rem;
}
.footer-dir a{
    color: var(--amarillo);
}
.footer-dir a:hover{
    text-decoration: underline;
}


/* Footer */
.copyright{
    padding: 1rem 0;
    background: var(--negro);
    color: var(--blanco);
    text-align: center;
    font-size: 1.4rem;
}
.copyright a{
    color: var(--amarillo);
}