/* VARIABLES */
:root{
--color-menu: #000000;
--color-beast: #D61515;
--color-principal: #FFFFFF;
--color-button: #3EAFD3;
}

/*ESTILOS GENERALES*/
html{
    font-size: 10px;
    font-family: 'montserrat-2', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

h1, h2, h3, h4, h5, h6{
    font-family: 'montserrat';
}



/* MENU */

.layout__menu{
    margin: 0;
    width: 100%;
    position: relative;
    padding-bottom: 4rem;
}

.menu__navbar{
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 9rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #000000;
    z-index: 999;
}

.menu__navbar--servicios{
    min-height: 9rem;
}

.navbar__logo{
    flex: 3;
}

.navbar__logo--link{
    pointer-events: all;
    cursor: pointer;
}

.navbar__logo--image{
    width: 45%;
    height: 100%;
    margin-left: 5rem;
    cursor: pointer;
}

.navbar__nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: 5;
    
}

.nav__list{
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 3rem;
}

.item__title{
    cursor: pointer;
    pointer-events: auto;
}

.list__item{
    color: white;
    font-size: 1.8rem;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    transition: all 300ms ease-in-out;
    
    
}



.list__item::before{
    content: " ";
    height: 0.2rem;
    width: 0; 
    background-color: var(--color-beast);
    position: absolute;
    bottom: 0rem;
    left: 0;
    opacity: 0;
    transition: all 400ms ease-in-out;
}

.list__item:hover::before{
    width: 100%;
    opacity: 1;
}

/* SECCION 1 */

.layout__section1{
    margin: 0;
    padding: 0;
}

.section1__image{
    width: 100%;
    min-height: 68.5rem;
    overflow: hidden;
    z-index: 1;
    filter: brightness(40%);
}

.section1__text{
    
    position: absolute;
    top: 44rem;
    left: 8rem;
    color: var(--color-beast);
    font-size: 7rem;
    font-weight: 900;
    width: 25%;
    /* transform: scalex(1.5); */
    transform: scaleY(1.3);
    line-height: 0.9;
    letter-spacing: 2.5px;
    text-shadow: 2px 2px 0px var(--color-menu);
}

/* Seccion 2 */

.section2__layout{
    position: relative;
    display: flex;
    min-width: 100%;
    background-color: var(--color-menu);
    display: flex;
    padding: 8rem 0;
    z-index: 10;
}

.section2__image{
    order: 3;
    flex-basis: 50%;
    margin-top: 2.5rem;
    margin-left: 15rem;
}

.section2__img{
    width: 30rem;
    position: relative;
    z-index: 990;
}

.section2__container{
    display: flex;
    flex-direction: column;
}

.section2__title{
    position: relative;
    letter-spacing: 1px;
    order: 2;
    color: var(--color-principal);
    margin: 2rem 7rem 0rem 16rem;
    font-size: 4rem;
    text-align: center;
    text-transform: uppercase;
    text-align:justify;
    z-index: 999;
    width: 100%;
}

.title__red{
    color: var(--color-beast);
}

.section2__enlace{
    order: 4;
    padding-top: 0rem;
    font-size: 2.2rem;
    
}
.section2__button{
    position: relative;
    bottom: 0.48rem;
    margin-left: 15rem;
    width: 30rem;
    height: 7rem;
    text-transform: uppercase;
    background-color: var(--color-button);
    color: var(--color-principal);
    cursor: pointer;
    transition: all 400ms ease-in-out;
    border: none;
    z-index: 999;
}

.section2__button:hover{
    background-color: var(--color-beast);
    color: var(--color-menu);
}

.section2__imagenes{
    display: flex;
}
.imagenes__left{
    position: relative;
    left: -15rem;
    bottom: -7.9rem;
}
.imagenes__right{
    position: relative;
    left: -15rem;
    height: 40rem;
    bottom: -16.5rem;
    z-index: 3;
}

/* SECCION 3 */

.layout__section3{
    background-color: var(--color-beast);
    min-height: 59rem;
    
}

.section3__title{
    
    font-size: 5.6rem;
    font-weight: bold;
    transform: scaleX(1);
    text-transform: uppercase;
    margin: 0 auto;
    padding-top: 7rem;
    color: var(--color-principal);
    letter-spacing: 0.4rem;
    width: 50%;
    text-align: center;
    z-index: 999;
    position: relative;
}

.section3__text{
    
    color: var(--color-principal);
    font-size: 2.2rem;
    width: 45%;
    margin: 0 auto;
    padding-top: 4rem;
    z-index: 999;
    position: relative;
    text-align: center;
}

.section3__image-left{
    position: relative;
    z-index: 0;
}

.section3__image-left--img{
    position: absolute;
    top: -32.7rem;
}

.section3__image-right{
    position: relative;
    z-index: 0;
}

.section3__image-right--img{
    position: absolute;
    top: -31.3rem;
    right: 0;
    max-height: 70rem;
}

.section3__title-social{
    color: var(--color-principal);
    z-index: 999;
    position: relative;
    text-align: center;
    font-size: 2.2rem;
    padding-top: 2.5rem;
    text-transform: uppercase;
}

.section3__social-media{
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    justify-content: center;
    padding-top: 5rem;
    
}

.fa-instagram{
    background-color: var(--color-menu);
    font-size: 2.2rem;
    margin-right: 0.4rem;
    background-image: linear-gradient(to top left, #5552C5 10%, #C73B88 30%,#EA4A58 40%, #E64860 70%  );
}

.fa-tiktok{
    color: var(--color-principal);
    font-size: 2rem;
    margin-right: 0.4rem;
    background-color: var(--color-menu);
    box-shadow: 0 0 10px #E71D4F;
}

.fa-youtube{
    color: var(--color-principal);
    font-size: 2rem;
    margin-right: 0.5rem;
    color: #FF1C1C;
}

.fa-envelope{
    /* background-image: linear-gradient(to top, #ffaa00 30%, #ff0000 60%,#1aff00 60%, #1100ff 10%  ); */
    /* background-color: white; */
    color: white;
}

.social-media{
    padding: 0 10rem;
    font-size: 1.7rem;
    color: var(--color-principal);
    transform: scaleX(1.3);

}

.section3__button{
    width: 12rem;
    height: 5rem;
    background-color: var(--color-menu);
    text-transform:uppercase;
    font-family: 'anton';
    border: none;
    cursor: pointer;
    transition: all 350ms ease-in-out;
}

.section3__button:hover{
    border: 1px solid white;
    transform: scale(1.15);
}

/* Seccion 4 */

.layout__section4{
    min-width: 100%;
    position: relative;
    z-index: 15;
}

.section4__content{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 7rem;
    padding: 5rem 10rem;
}

.section4__title{
    padding: 3rem;
    
    font-size: 6rem;
    transform: scaleY(1.2);
    color: var(--color-principal);
    
}

.section4__text{
    
    color: var(--color-principal);
    padding: 7rem 4rem;
    text-transform: uppercase;
    font-size: 2.2rem;
    width: 60%;
}

.section4__btn{
        width: 25rem;
        height: 6rem;
        background-color:#FFDE59;
        text-transform:uppercase;
        font-family: 'anton';
        border: none;
        cursor: pointer;
        transition: all 400ms ease-in-out;
}
.section4__btn:hover{
    background-color: var(--color-beast);
    color: var(--color-principal);
}

.section4__enlace{
    font-family: 'anton';
    margin: 4rem;
    font-size: 2rem;
}

.section4__img{
    
    border-top: 7px solid black;
    border-bottom: 7px solid black;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1); 
    width: 100%;
    filter: brightness(45%) grayscale(30%) opacity(.9);
   
}

/* SECCION-5 */

.layout__section5{
    min-width: 100%;
    background-color: var(--color-menu);
    display: flex;
}

.section5__left{
    color: var(--color-principal);
    flex-basis: 50%;
}

.section5__title{
    padding: 6rem 0;
    
    text-align: center;
    font-size: 5rem;
}

.section5__text{
    
    padding: 0 10rem;
    font-size: 1.8rem;
    text-align: justify;
}

.section5__btn{
    text-align: center;
    margin: 5rem 25rem;
    width: 22rem;
    height: 6rem;
    background-color: var(--color-beast);
    color: var(--color-menu);
    background-color: #FFDE59;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 400ms ease-in-out;
}

.section5__btn:hover{
    color: var(--color-principal);
    background-color: var(--color-beast);
}

.section5__enlace{
    font-family: 'anton';
    text-align: center;
    font-size: 2rem;
    color: rgb(255, 234, 234);
}

/* PROBANDO */
.section5__img{
    position: relative;
    left: 5rem;
    margin: 5rem;
    transform-origin: bottom left; /* Define el origen de la transformación */
    transform: rotate(5deg) translate3d(5%, -5%, 0);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.35);
    transition: all 400ms ease-in-out;
}

.section5__img:hover{
    /* transform: rotate(0deg) translate3d(0, 0, 0); */
    box-shadow: 0 0px 0px rgba(255, 255, 255, 0.35);
}

/* SECCION-6 */

.layout__section6{
    border-top: 3px solid rgb(29, 28, 28);
    box-shadow: 0 0 10px rgba(29, 28, 28, 0.8); 
    width: 100%;
    display: flex;
    background-color: var(--color-menu);
}

.section6__img{
    position: relative;
    left: 5rem;
    margin: 5rem 8rem;
    transform-origin: bottom left; /* Define el origen de la transformación */
    /* transform: rotate(-10deg) translate3d(-5%, 5%, 0); */
    box-shadow: 0 10px 20px rgba(255,255,255,0.55);
    /* border-radius: 15%; */    
    transition: all 400ms ease-in-out;
}

.section6__img:hover{
    box-shadow: 0 0 0;
}

.section6__right{
    display: flex;
    flex-direction: column;
}

.section6__title{
    color: var(--color-principal);
    padding: 5rem 0;
    
    text-align: center;
    font-size: 5rem;
}

.section6__text{
    
    color: var(--color-principal);
    padding: 0 10rem;
    font-size: 1.8rem;
    text-align: justify;
    width: 60%;
    margin: 0 auto;
    padding-bottom: 5rem;
}

.section6__btn{
    width: 20rem;
    margin: 0 auto;
    height: 5rem;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-family: 'anton';
    background-color: #FFDE59;
    cursor: pointer;
    transition: all 400ms ease-in-out;
}

.section6__btn:hover{
    background-color: var(--color-beast);
    color: var(--color-principal);
}

/* SECCION-7 */

.layout__section7{
    background-color: var(--color-beast);
}

.section7__title{
    text-align: center;
    font-size: 5rem;
    width: 70%;
    padding-top: 6rem;
    margin: 0 auto;
    
    text-transform: uppercase;
    color: var(--color-principal);
}

.section7__text{
    
    display: flex;
    flex-direction: row;
    padding: 6rem;
    flex: 1;
}

.part__left, .part__right{
    margin: 0 9rem;
    width: 60%;
}

.text__left, .text__right{
    color: var(--color-principal);
    font-size: 1.8rem;
    text-align: justify;
}

.section7__btn--left, .section7__btn--right{
    margin: 0 auto;
    height: 5rem;
    width: 20rem;
    background-color: var(--color-menu);
    border: none;
    cursor: pointer;
    transition: all 400ms ease-in-out;
}

.section7__enlace--left, .section7__enlace--right{
    margin-top:5rem ;
    font-size: 1.8rem;
    font-family: 'anton';
    color: var(--color-principal);
    cursor: default;
}

.section7__btn--left:hover, .section7__btn--right:hover{
    background-color: #FFDE59;
    color: var(--color-menu);
}

.section7__linea{
    display: none;
}

/* SECCION-8 */

.layout__section8{
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-menu);
    display: flex;
    padding-top: 5rem;
    padding-bottom: 0;
    margin-bottom: 0;
    max-height: 150rem;
    overflow: hidden;
}

.section8__msn, .section8__msn-2{
    position: relative;
    /* width: 30%; */
    margin: 0 5rem;
    z-index: 10;
    flex: 1;
    
}

.section8__text{
    
    color: var(--color-principal);
    font-size: 2rem;
    text-align: justify;
    margin-top: 2rem;
    margin-bottom: 7rem;
    position: relative;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.05);
}

.section8__text--1{
    margin-bottom: 4.3rem;
}

.text__name{
    color: var(--color-beast);
    font-size: 1.7rem;
    
    background-color: rgba(0, 0, 0, 0.05);
    text-transform: uppercase;
}

.section8__comillas{
    color: var(--color-beast);
    width: 50px;
    margin: 0 auto;
}

.section8__name-image{
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    z-index: 9;
}

.section8__name-image--2{
    margin-top: 10.5rem;
}

.section8__guion{
    width: 2rem;
    margin-right: 0.5rem;
}

.section8__image-principal{
    position: relative;
    top: -24rem;
}

.section8__image-principal--2{
    left: 4rem;
    top: -24rem;
}

.section8__image-principal--3{
    left: 7rem;
}

.section8__image-principal--3-1{
    width: 120% !important;
    max-width: none;
    left: 1rem;
}


td{
    width: 20%;
}

.fila-2{
    position: relative;
    top: -15rem;
}

.section8__msn-2--3{
    position: relative;
    top: -6rem;
}
.table__responsive{
    display: none;
}
.table__responsive-2{
    display: none;
}
/* SERVICIOS */

.menu__navbar--servicios{
    border-bottom: 2px solid var(--color-beast);
}

/* SECCION1 -- SERVICIOS */

.layout__section1--servicios{
    margin: 0;
    background-color: var(--color-menu);
    background-size: cover;
    filter: grayscale(10%);
    height: 55rem;
}


.section1--servicios__title{
    color:var(--color-beast);
    position: relative;
    z-index: 999;
    font-size: 10rem;
    font-family: 'anton';
    text-transform: uppercase;
    transform: scaleX(1.3);
    top: 17rem;
    left: 30rem;    
}

.flecha__img{
    position: relative;
    top: -5.5rem;
    left: 66rem;
    filter: invert(100%);
    width: 120px;
}

.section1--servicios__img {
    position: absolute;
    top: 0rem;
    width: 100%;
    height: 55rem;
    z-index: 1;
    filter: grayscale(10%);
}

/* SECCION 2 -- SERVICIOS*/
.layout__section2--servicios{
    background-color: var(--color-beast);
    padding: 3rem 0;
}

.section2--servicios--title{
    font-size: 5rem;
    text-align: center;
    color: var(--color-principal);
    text-transform: uppercase;
    padding-top: 5rem;
    font-family: 'anton';
    transform: scaleX(1.3);
}

.section2--servicios__container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* margin: 3rem 0 0 3rem; */
}

.section2--servicios__container--left, .section2--servicios__container--right{
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
}

.section2--servicios__text--left{
    color: var(--color-principal);
    font-size: 1.8rem;
    text-align: justify;
    width: 65%;
    margin-left: 8rem;
    margin-bottom: 4rem;
    
}

.section2--servicios__text--right{
    color: var(--color-principal);
    font-size: 1.8rem;
    text-align: justify;
    width: 85%;
    margin-bottom: 4rem;
    
}

.section2--servicios__button{
    margin: 0 auto;
    width: 22rem;
    height: 6rem;
    font-size: 2rem;
    font-family: 'montserrat';
    text-transform: uppercase;
    background-color: var(--color-menu);
    color:var(--color-principal) ;
    border: none;
    cursor: pointer;
    transition: all 350ms ease-in-out;
}

.section2--servicios__button:hover{
    background-color: #FFDE59;
    color: var(--color-menu);
}

/* SECCION 3 -- SERVICIOS */

.layout__section3--servicios{
    background-image: url(/assets/img/servicios/fondo-section3.png);
    background-size: cover;
    min-width: 100%;
    padding: 7rem 0;
}

.section3--servicios__title{
    position: relative;
    margin-left: 25rem;
    font-size: 6rem;
    font-family: 'anton';
    transform: scaleX(1.2);
    color: var(--color-beast);
    text-transform: uppercase;
}

.section3--servicios__precio{
    font-size: 5rem;
    margin-left: 8rem;
    padding: 0.3rem;
    border-width: 2px;
    border: 3px solid; /* Grosor del borde */
    border-radius: 20px; /* Radios de las esquinas (superior izquierda, superior derecha, inferior derecha, inferior izquierda) */
    border-right-style: dashed; /* Estilo del borde derecho */
    border-bottom-style: dashed; /* Estilo del borde inferior */
    border-color: var(--color-beast);
}
.section3--servicios__mas-informacion{
    display: flex;
    flex-direction: row;
    margin-left: 22rem;
}

.section3--servicios__button{
    position: relative;
    margin-left: 8rem;
    margin-top: 5rem;
    width: 24rem;
    height: 6rem;
    font-size: 2rem;
    font-family: 'montserrat';
    text-transform: uppercase;
    background-image: linear-gradient(to right, #50CBDE 30%, #298DC6, #1973BC, #004BAD );
    color:var(--color-menu) ;
    border: none;
    cursor: pointer;
    transition: all 350ms ease-in-out;
}

.section3--servicios__button:hover{
    color: var(--color-principal);
}

.section3--servicios__flechas{
    position: relative;
    filter: invert(100%);
    width: 170px;
}

.section3--servicios__container{
    position: relative;
    display: flex;
    flex-direction: row;
    margin: 5rem;
}

.section3--servicios__container--left{
    margin-left: 7rem;
}

.section3--servicios__container--right{
    margin-right: 40rem;
    position: relative;
    left: 15rem;
}

.section3--servicios__container--subtitle{
    color: var(--color-button);
    font-size: 3rem;
    
    margin-top: 3rem;
    
}

.section3--servicios__container--text{
    color: var(--color-principal);
    font-size: 1.8rem;
    
    margin-top: 1.5rem;
    text-align: justify;
}

.section3__salto-linea{
    display: none;
}

/* Seccion 4 -- SERVICIOS*/
.layout__section4--servicios {
    padding: 3rem 3rem 0rem 3rem;
    padding-bottom: 8rem;
    display: flex;
    flex-direction: column;
    min-width: 100%;
    background-color: var(--color-menu);
    background: linear-gradient(to right, rgb(0 0 0 / .5), rgb(0 0 0 / .65)), url(/assets/img/servicios/section4-servicios2-removebg-preview%20\(1\).png);
    background-size: cover;
    background-position: center;
  }
  
  .section4--servicios__title {
    font-size: 6rem;
    color: var(--color-beast);
    font-family: 'anton';
    transform: scale(1.2);
    margin: 0 auto;
    text-transform: uppercase;
    margin-bottom: 5rem;
  }
  
  .section4--servicios__text {
    color: var(--color-principal);
    
    font-size: 2.2rem;
    
    margin: 0 10rem;
    text-align: justify;
  }
  
  .section4--servicios__button {
    width: 24rem;
    height: 6rem;
    font-size: 2rem;
    
    text-transform: uppercase;
    background-color: #FFDE59;
    color: var(--color-menu);
    border: none;
    cursor: pointer;
    transition: all 350ms ease-in-out;
    margin: 0 auto;
    display: block; 
    margin-top: 2rem;
  }
  
  .section4--servicios__button:hover {
    background-color: var(--color-beast);
  }

  /* SECCION-5-- SERVICIOS */

  .layout__section5--servicios{
    min-width: 100%;
    background: linear-gradient(to right, rgb(0 0 0 / 1), rgb(0 0 0 / .75)), url(/assets/img/servicios/fondo-seccion5\(1\).jpg);
    
    background-size: cover;
    background-position: center;
    background-color: #000000;
    padding: 5rem 0;
    border-top: 5px solid black;
  }

  .section5--servicios__title{
    font-size: 4rem;
    color: var(--color-principal);
    font-family: 'anton';
    transform: scale(1.2);
    margin-left: 20rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.section5--servicios__text{
    color: var(--color-principal);
    font-size: 1.8rem;
    
    margin: 0 6.5rem;
    width: 60%;
    margin-bottom: 2.5rem;
}

.section5--servicios__sublist{
    position: relative;
    font-size: 2rem;
    color: var(--color-principal);
    margin: 1.2rem 8.5rem;
    
}

.section5--servicios__sublist::before{
    content: " ";
    width: 10px; 
    height: 10px; 
    background-color: red; 
    border-radius: 50%; 
    position: absolute;
    top: 50%; 
    left: -20px; 
    transform: translateY(-50%); 
}

/* SECCION 6 -- SERVICIOS */

.layout__section6--servicios{
    min-width: 100%;
    background: var(--color-menu);
    padding: 5rem 0;
    padding-bottom: 5rem;
    overflow: hidden;
}


.section6--servicios__container--title{
    font-size: 4rem;
    color: var(--color-menu);
    font-family: 'anton';
    transform: scale(1);
    text-transform: uppercase;
    margin-bottom: 5rem;
    z-index: 10;
    
    
}

.section6--servicios__title {
    font-size: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 5rem; 
    color: goldenrod; 
    padding: 10px 20px; 
    margin: 0 auto;
  }
  
  .tarjeta{
    height: 50rem;
    width: 95rem;
    background-color: #101010;
    border-radius: 10%;
    box-shadow: 16px 14px 20px #1a1a1a;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .tarjeta::before{
    content: "";
    position: absolute;
    height: 3000px;
    width: 3000px;
    background-image: conic-gradient(goldenrod 20deg, transparent 120deg);
    animation: rotar 5.5s linear infinite;
  }

@keyframes rotar{
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(360deg);
    }
}
  
.tarjeta::after{
    content: "";
    position: absolute;
    height: 49rem;
    width: 94rem;
    background-color: #101010;
    border-radius: 10%;
    box-shadow: inset 16px 14px 20px #1a1a1a;
}


.section6--servicios__sublist{
    position: relative;
    font-size: 2rem;
    color: var(--color-principal);
    margin: 1.2rem 8.5rem;
    
    font-weight: bold;
    text-align: left;
    z-index: 1;
}

.section6--servicios__sublist::before{
    content: " ";
    width: 10px; 
    height: 10px; 
    background-color: goldenrod; 
    border-radius: 50%; 
    position: absolute;
    top: 50%; 
    left: -20px; 
    transform: translateY(-50%); 
}

.section6--servicios__container--text{
    display: flex;
}

.section6--servicios__text--img{
    display: none;
    position: relative;
    top: -10rem;
    right: -100rem;
    z-index: 0;
}

.section6--servicios__text--img--2{
    display: none;
    position: relative;
    top: -55rem;
    right: -70rem;
    z-index: 0;
    transform: scaleX(1.4) scaleY(0.6);
}

/* CALCULADORA RM */
.section1__calculadora-RM{
    background: linear-gradient(to top, black 0% , transparent), url(/assets/img/POWERBEAST-6.png);
    background-size: cover;
    background-position: center;
    background-color: var(--color-menu);
    width: 100%;
    height: 100vh;
    text-align: center;
}


#calculadora-RM{
    position: relative;
    top: 5rem;
}

.title__calculadora-RM{
    position: relative;
    font-size: 4rem;
    color: var(--color-beast);
    top: 10rem;
    margin-bottom: 8rem;
    text-transform: uppercase;
    font-family: 'anton';
    transform: scaleX(1.4);
    border: 4.5px solid var(--color-beast);
    display: inline-block;
    padding: 2rem 1rem;
    border-radius: 1rem;
    background-color: var(--color-menu);
    outline: 3px solid var(--color-menu);
}

.form__container{
    display: flex;
    flex-direction: column;
}

.form__left{
    margin: 0 auto;
}

.form__group{
    position: relative;
    margin-bottom: 3rem;
    z-index: 0;
}

select, .form__input{
    
    text-transform: uppercase;
    position: relative;
    width: 25rem;
    height: 4.2rem;
    display: block;
    border: 0.2rem solid var(--color-beast);
    border-radius: 0.5rem;
    font-size: 2rem;
    padding: 1rem 2rem 1rem 1.2rem;
    border-radius:0.5rem ;
    outline: none;
    box-shadow: 0 1rem 1rem -8px rgba(0, 0, 0, 0.10);
    background: 0 0;
    background-color: var(--color-menu);
    color: var(--color-principal);
    line-height: 2.1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
     appearance: none;
}

.layout__menu{
    pointer-events: auto;
}

.form__input:focus{
    border: 0.2rem solid var(--color-beast);
}

select{
    font-size: 2rem;
    color: var(--color-principal);
}

.form__label{
    
    text-transform: uppercase;
    font-size: 2rem;
    position: absolute;
    top: 0.8rem;
    left: 1.5rem;
    z-index: 1;
    color: var(--color-principal);
    transition: all 300ms ease-in-out;
    pointer-events: none;  /*Es como si le diera click a lo que hay detras y asi el placeholder no me molesta y le estaria clicando al label*/
}

.form__input:focus~label, /*~ Eso es el elemento hermano*/
.form__input:not(:placeholder-shown)~label{  /*Eso quiere decir cuando no este mostrando el placeholder, asi se queda arriba del input*/
    top: -2.5rem;
    left: 0;
    z-index: 1;
    font-size: 1.8rem;
    color: var(--color-beast);
    font-size: 2rem;
    font-weight: bold;
}

.form__input::-webkit-input-placeholder{
    color: transparent;
}

.form__input::-moz-placeholder{
    color: transparent;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
} 

.calcular{
    width: 10rem;
    margin: 0 auto;
    padding: 0rem 1rem;
    border: none;
    font-size: 2.5rem;
    text-align: center;
    background: linear-gradient(#AEAEAE, #C8C8C8, #E7E7E7, #FDFDFD);
    color: var(--color-menu);
    
    margin-top: 5rem;
    cursor: pointer;
}



/* SECTION 1 -- PODCAST */

.section1__podcast{
    background: #000000 ;
    min-height: 69rem;
}

.section1__podcast--left{
    display: flex;
    flex-direction: column;
}

.section1__podcast--title{
    position: relative;
    top: 15rem;
    margin-left: 23rem;
    font-size: 10rem;
    transform: scale(1.2);
    
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-principal);
    line-height: 1;
    z-index: 99;
}

.section1__podcast--subtitle{
    position: relative;
    color: white;
    top: 40rem;
    margin-left: 10rem;
    font-size: 3.5rem;
    
    word-spacing: 5px;
}

.section1__podcast--right{
    display: flex;
    flex-direction: column;
    float: right;
}

.section1__podcast--btn{
    position: relative;
    top: -12rem;
    background-color: var(--color-principal);
    left: -10rem;
    width: 37rem;
    height: 5.5rem;
    font-size: 3.2rem;
    font-weight: bold;
    
}

.podcast--title__red{
    color: var(--color-beast);
}

.image-principal__podcast{
    position: absolute;
    width: 70rem;
    
    right: 0rem;
    z-index: 0;
    z-index: 1;
}

/* SECTION 2 -- PODCAST */

.section2__podcast{
    padding-top: 5rem;
    background-color: var(--color-menu);
    
}

.section2--podcast__title{
    font-size: 3rem;
    margin: 0 10rem;
    
    color: var(--color-principal);
}

.section2--podcast__title-red{
    color: var(--color-beast);
}

.section2--podcast__text{
    color: var(--color-principal);
    
    font-size: 1.8rem;
    margin-top: 2.5rem;
    margin: 5rem 10rem;
}

.icon-1__podcast{
    position: relative;
    width: 150px;
    margin-left: 7rem;
    margin-top: 1.5rem;
    cursor: pointer;
    z-index: 1;
}

.icons__podcast{
    display: flex;
    flex-direction: row;
    margin-left: 3.5rem ;
}

.icon-2__podcast{
    position: relative;
    width: 200px;
    margin-left: 7rem;
    cursor: pointer;
    top: -3rem;
    z-index: 0;
}

.icon-3__podcast{
    position: relative;
    width: 180px;
    margin-left: 7rem;
    cursor: pointer;
    top: 4rem;
    z-index: 0;
}

/* Footer */
.footer{
    background-color: var(--color-menu);
    padding: 15rem 0;
}
.image__footer{
    margin: 0 auto;
    width: 30rem;
    cursor: pointer;
}


.links__social{
    margin: 7rem 0rem;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.social__option{
    margin: 0 2rem;
    height: 3rem;
    width: 3.5rem;
    font-size: 1.8rem;
    line-height: 3.2rem;
    opacity: 0.85;  
    border-radius: 3rem;  /*Para que el hover sea redondo*/
    transition: all 300ms ease-in-out;  /*La velocidad con la que se pone el hover*/
    cursor: pointer;
}

.social__link{
    cursor: pointer;
}

.fa-spotify{
    color: green;
    font-size: 2.3rem;
}



.footer__text{
    text-align: center;
}

.footer-text__options{
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    font-size: 1.3rem;
}

.footer__option{
    cursor: pointer;
    transition: all 300ms ease-in-out;
    position: relative;
}

.footer__option:hover{
    color: var(--color-beast);
}

.footer__option::before{
    content: " ";
    left: -1rem;
    height: 2.5rem;
    width: 0.1rem;
    background-color: var(--color-principal);
    position: absolute;
}

.footer__option--1::before{
    display: none;
}

.footer__option{
    color: var(--color-principal);
    margin: 0 1rem;
}


/* Responsive */
.navbar__logo--responsive{
    display: none;
}

.navbar__logo--link--reponsive{
    cursor: default;
}

.navbar__logo--image--responsive{
    width: 25%;
    
}