:root{ /*Declaración de variables: */
    --colorPrimario:#25464F;
    --colorSecundario: #FF0000;
    --colorClaro: #ECEBF3;
    --colorNegro: black;
    --fuentePrincipal:"Noto Sans", sans-serif;
    --fuenteLogo:"Faber Regular", sans-serif;
}
@font-face {
    font-family: "Faber Regular";
    src: url(FABER-Regular.otf);
}

/*GLOBALES*/

html{
    font-size: 62.5%; 
    box-sizing: border-box;
    font-family: var(--fuentePrincipal);
    font-weight: 300;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body{
    font-size: 16px; /*Con esto y el porcentaje de 62.5% arriba, hacemos que 1rem equivalga a 10px*/
    color: var(--colorPrimario);

    background-image: url(../img/mapache_transparente_oscuro.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 30rem;
    background-position: center;
}
@media (min-width:768px){
    body{
        background-size: 100rem;
    }
}
img{
    max-width: 100%;
    display: block;
}
a{
    text-decoration: none;
}
h1{
    font-size: 4rem; /*Gracias a lo anterior 4rem son equivalentes a 40px*/
}
h1, h2, h3{
    margin: 0;
}
p{
    font-size: 1.7rem;
}
main{
    margin: 0 auto;
    margin-top: 4rem;
}
main section {
    padding: 3rem;
    margin: 1.3rem;
    margin-bottom: 2.5rem;
    text-align: center;
}
/*Los valores por defecto se establecen para moviles grandes o tablets*/
/*Para pantallas se usará min-width:768px*/
/*Y para moviles pequeños max-width:480px*/
@media (min-width:768px){
    main{
        width: 90%;
        max-width: 120rem;
    }
    main section {
        padding: 3rem;
        margin: 3rem;
        text-align: center;
    }
}
@media (max-width:480px){
    body{
        font-size: 12px;
    }
    main{
        width: 96%;
    }
}
.titulo__seccion{
    text-align: center;
    padding: 2rem 0 4rem;
    font-size: 2.4em;
    font-weight: 600;
    letter-spacing: -2px;
    color: var(--colorSecundario);
    /*margin: 5rem 0;*/
}
.boton{
    background-color: var(--colorSecundario);
    padding: 1.8rem 4rem;
    margin-top: 2rem;
    font-size: 2rem;
    color: var(--colorClaro);
    font-weight: 700;
    width: 90%;
    text-align: center;
    text-transform: uppercase;
    transition: .3s;

    box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.45);
    -webkit-box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.45);
}
.boton:hover{
    background-color: var(--colorPrimario);
}
.boton__solo{
    text-align: center;
    padding: 8rem 2rem 2rem 2rem;
}
@media (min-width: 768px){
    .boton{
        width: auto;
    }
}
.caja__sombra{
    box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.3);
}
.resaltado{
    font-weight: 700;
    font-size: 2.3rem;
    padding-left: .5rem;
    padding-right: .5rem;
    background-color: var(--colorSecundario);
    color: var(--colorClaro);
}
.minilogo{
    width: 6rem;
    display: inline-block;
}
.verde{
    background-color: var(--colorPrimario);
    color: var(--colorClaro);
}
.gris{
    background-color: var(--colorClaro);
}
.version__pantalla{
    display: none;
}
@media (min-width:768px){
    .version__movil{
        display: none;
    }
    .version__pantalla{
        display: block;
    }
}


/*HEADER y MENÚ*/

header{
    background-color: var(--colorClaro); /*es solo para evitar que se vea por detrás del logo las orejas del mapache que he puesto de fondo en el body*/
}
.header__logo{
    margin: 0 auto;
    max-width: 35rem;
}
.menu{ /*Por defecto vamos a establecer esto para dispositivos móviles*/
    display: flex;
    flex-direction: column;
    background-color: var(--colorPrimario);
}
@media (min-width: 768px){/*Esto será para dispositivos más granedes. Cuando tenga un mínimo de ancho 768px (tamaño de tableta) habrá un cambio*/
    .menu{
        flex-direction: row;
        justify-content: space-around; /*reparte el contenido del menu*/
    }
    .header__logo{
        margin: 0 auto;
        max-width: 50rem;
    }
}
.menu__link{
    text-align: center;
    padding: 1.5rem 3rem;
    text-transform: uppercase;
    color: var(--colorClaro);
    font-weight: 700;
    transition: .3s; /*lo que tarda en mostrarse el menú y el hover*/
}
.menu__link:hover{
    background-color: var(--colorSecundario);
}

/*HERO (la idea del hero es tener una imagen de fondo, es como una especie de anuncio)*/

.hero{
    height: 35rem;
    background-image: url(../img/hero.jpg);
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
}
.hero__transparencia{
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.70);
}
.hero__contenido{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /*en este caso como tenemos column alineamos horizontalmente*/
    justify-content: center; /*en este caso como tenemos column alineamos verticalmente*/
    text-align: center;
}
.hero__titulo{
    color: var(--colorPrimario);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -2px;
}
.hero__texto{
    color: var(--colorPrimario);
    font-size: 2rem;
}
@media (min-width: 768px){
    .hero__titulo{
        font-size: 5rem;
    }
    .hero__texto{
        font-size: 2.3rem;
        max-width: unset;
    }
}

/*OFERTA*/

#oferta .titulo__seccion{
    background-color: var(--colorSecundario);
    color: var(--colorClaro);
    display: inline-block; /*Para que no me ocupe todo el ancho del contenedor*/
    padding: 1rem;
}
#oferta .resaltado{
    background-color: var(--colorPrimario);
    white-space: nowrap; /*Para manter la frase 'para siempre' siempre unida. Si el espacio en pantalla es insuficiente el salto de linea se hará antes del 'para' y no entre medias*/
}
.resaltado__noFondo{
    color: var(--colorPrimario);
    background-color: transparent;
    font-weight: 700;
    font-size: 2.3rem;
    padding-left: .5rem;
    padding-right: .5rem;
}
#oferta .precio__info{
    font-weight: 300;
}
.precio__info span{
    font-weight: 700;
}

/*PRECIOS*/

#precios > h2{
    background-color: var(--colorClaro);
    color: var(--colorPrimario);
    display: inline-block; /*Para que no me ocupe todo el ancho del contenedor*/
    padding: 1rem 3rem;
    margin-bottom: 4rem;
}
.meses{
    border: .35rem solid var(--colorClaro);
    margin-bottom: 4rem;
}
.meses > h3{
   background-color: var(--colorClaro); 
   color: var(--colorPrimario);
   margin: .5rem;
   padding: 1rem;
}
.info{
    padding: 2rem;
}
.precio{ /*PRECIO*/
    margin: 0;
    padding: 0;
    font-size: 4.5rem;
    font-weight: 700;
}
.info .resaltado{
    vertical-align: super; /*Pongo €/mes alineado un poco arriba del precio*/
}
.precio__info{
    font-weight: 400;
}
@media (min-width:768px){
    #precios{
        background-image: url(../img/mapache_transparente.png);
        background-repeat: no-repeat;
        background-position: 0 100%;
    }
    .precios__grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .meses{
        margin: 4rem 5rem;
    }
    .precio{ 
        font-size: 8rem;
    }
    .info{
        padding: 4rem;
    }
}

/*SERVICIOS*/

#servicios .titulo__seccion{
    color: var(--colorPrimario);
    padding: 2rem 1rem;
}
#servicios .resaltado{
    background-color: var(--colorPrimario);
    display: inline-block;
    font-size: 1.7rem;
    padding: .5rem 1rem;
    margin: .5rem;
}
.resaltado span{
    font-weight: 300;
}
#servicios span.resaltado{
    background-color: var(--colorSecundario);
}
@media (min-width:768px){
    #servicios .resaltado{
        background-color: var(--colorPrimario);
        display: inline-block;
        font-size: 1.7rem;
        padding: .5rem 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/*QUIENES SOMOS*/

#quienes__somos{
    text-align: justify;
    padding-left: 0;
    padding-right: 0;
}
.quienes__somos__grid{
    padding: 2rem;
    background-color: var(--colorClaro);
    border: .6rem solid var(--colorPrimario);
}
.quienes__somos__descripcion{
    margin: auto;
}
.quienes__somos__texto{
    line-height: 1.6;
}
@media (min-width: 768px){
    .quienes__somos__grid{
        display: grid;
        gap: 4rem;
        grid-template-columns: repeat(2, 1fr);
        align-items: center; /*Para que centre el contenido verticalmente, así se me queda la imagen en el medio*/
    }
    .quienes__somos__texto{
        margin-right: 3rem;
    }
}
.avatares{
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.avatares img{
    width: 25rem;
}

/*CONTACTO*/

#contacto{
    padding: 0;
}
.contacto__contenedor{
    margin: auto;
    margin-bottom: 4rem;
    padding: 6rem 6rem 2rem 6rem;
    background-image: url(../img/mapache_transparente.png);*/
/*No sé por qué tengo que poner las dos formas siguientes para que me haga caso en la posicion del fondo*/   
    background-position: left bottom;
    background-position: 0 100%;

    background-repeat: no-repeat;
    background-size: 25rem;
    /*background-size: contain;*/ 
    background-attachment: local;
}
.contacto__logo{
    margin-top: 2rem;
}
.contacto__lista{
    list-style: none;
    margin: 0;
    padding-left: 0;
    /*padding-top: 3rem;*/
    /*Para conseguir centrar imagen y texto*/
    display: flex;
    flex-direction: column;
    gap: 1rem; /*Espacio vertical entre cada li*/
    align-items: center;
}
.contacto__lista li{
    color: var(--colorC7);
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 2.5rem;
/*Para conseguir centrar imagen y texto*/
    display: flex;
    align-items: center;
    gap: 1rem; /*Espacio entre el icono y el texto*/
}
.contacto__lista li a{
    color: var(--colorClaro);
    font-weight: 600;
}
.contacto__icon{
    fill: var(--colorClaro);
    /*stroke: var(--colorClaro);*/
    width: 2.5rem;
    /*
    height: 30px;
    width: 30px;
    */
}
.contacto__icon2{
    fill: var(--colorPrimario);
    stroke: var(--colorClaro);
    height: 20px;
    width: 20px;
}
@media (min-width: 768px){
    .contacto__contenedor{
        width: 60%;
        height: 35rem;
        background-size: 35rem;
        /*background-position: left bottom;*/
        background-position: -20% 100%;
        background-repeat: no-repeat;
    }
    .contacto__logo{
        width: 40rem;
        margin: 4rem auto;
    }
    .contacto__lista li{
        font-size: 2.2rem;
    }
}

/*TIENDA*/

#temario{
    text-align: center;
    margin-bottom: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 4rem;
}
.temario__grid{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /*en este caso como tenemos column alineamos horizontalmente*/
    justify-content: center; /*en este caso como tenemos column alineamos verticalmente*/
}
#temario p{
    /*margin-bottom: 4rem;*/
    text-align: justify;
}
.mini__info{
    font-size: 2rem;
    font-weight: 300;
    vertical-align: middle;
}
@media (min-width: 992px){
    .temario__grid{
        display: grid;
        /*grid-template-columns: repeat(2, 1fr);*/
        gap: 1rem;
        align-items: center;
        grid-template-columns: 1fr 1fr;
        padding-right: 2rem;
    }
    .temario__grid img{
        width: 50rem;
    }
    .oferta__lanzamiento {
        padding: 5rem;
    }
    .oferta__lanzamiento .resaltado{
        display: inline;
    }
    .oferta__lanzamiento .precio{
        display: table;
        margin: auto;
        padding: 2rem 1rem 1rem 1rem;
        line-height: 8rem;
    }
    .oferta__lanzamiento .boton{
        display: inline-block;
        margin-top: 3rem;
    }
}

/*PLAN DE FORMACIÓN*/

#formacion{
    padding-left: 0;
    padding-right: 0;
}
.plan__numero{
    /*font-family: var(--fuenteLogo);*/
    color: var(--colorSecundario);
    font-size: 3rem;
    text-align: center;
    padding-top: 2rem;
}
.plan__titulo{
    background-color: var(--colorPrimario);
    color: var(--colorClaro);
    text-align: center;
    font-weight: 600;
    font-size: 2rem;
    padding: 2rem;
    margin: 0;
}
.plan__contenido{
    border: .5rem solid var(--colorPrimario);
    padding: 0.5rem 1rem 0.5rem 2rem;
    font-size: 1.5rem;
    text-align: center; /*Para conseguir centrar la flecha*/
}
.icono__flecha{
    height: 30px;
    width: 30px;
    /*fill: var(--colorSecundario);*/
    stroke: var(--colorSecundario);
    stroke-width: .2rem;
    text-align: center;
    padding: 0;
    margin-top: 0.5rem;
}
.plan__contenido ol{
    margin: 0;
    padding: 0 1.5rem 0 1.5rem;
    text-align: justify;
}
.plan__contenido li{
    padding-bottom: 1.5rem;
}
.plan__contenido li::marker{ /*Para los numerales de la lista*/
    font-weight: bold;
}

/*FOOTER*/

.footer{
    background-color: var(--colorPrimario);
    background-size: cover;
    background-position: center;
    padding-top: 4rem;
    margin-top: 4rem;
}
.footer__logo{
    margin: 0 auto;
    max-width: 35rem;
}
.footer__copy{
    margin: 4rem 0 0 0;
    padding: 1rem 0;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    text-align: center;
    color: var(--colorClaro);
    line-height: 1rem;
}
.footer__copy p{
    font-size: 1.6rem;
}
p.footer__aviso{
    font-size: 1rem;
}