/* -- CSS General -- */
* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #695AC8;
    margin: 0px 0;
    padding: 0px;
}

@font-face {
    font-family: 'Mulish';
    src: url(../fonts/Mulish/Mulish-Regular.otf) format(opentype);
    font-weight: 200 1000;
}

/* ----------- Menú - nav ------------- */

header {
    background-color: #F7F7F7;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 32px;
    margin: 0px;
    width: 100%;
    min-width: 990px;
    height: 160px;
}

header .logo {
    max-width: 180px;
    min-height: 60px;
    margin: 0px;
    padding: 0px;
}

.menu-principal {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 32px;
    width: 100%;
    margin: 0px;
    background-color: #F7F7F7;
}

.menu-principal ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 32px;
}

.menu-principal ul li {
    display: inline-block;
    font-family: 'Atkinson Hyperlegible', Helvetica, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    text-transform: initial;
}

.menu-principal ul li a {
    color: #695AC8;
    text-decoration: none;
}

.menu-principal ul li a:hover {
    color: #32F5F5;
    text-decoration: none;
}

.menu-principal ul li a:active {
    color: #32F5F5;
    text-decoration: none;
}

.menu-principal-botones {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 24px;
}

/* Botón Iniciar sesión */
.btn-iniciar-sesion {
    background-color: #695AC8;
    color: #FFFFFF;
    text-decoration: none;
    transition: 0.3s;
}

.btn-iniciar-sesion:hover {
    background-color: #32F5F5;
}

.btn-iniciar-sesion:focus {
    background-color: #12E3E3;
    color: #695AC8;
}

.btn-iniciar-sesion:active {
    background-color: #12E3E3;
    color: #695AC8;
}

/* Botón Registrarse */
.btn-registrarse {
    background-color: #32F5F5;
    color: #695AC8;
    text-decoration: none;
    transition: 0.3s;
}

.btn-registrarse:hover {
    background-color: #12E3E3;
    color: #FFFFFF;
}

.btn-registrarse:focus {
    background-color: #12E3E3;
    color: #FFFFFF;
}

.btn-registrarse:active {
    background-color: #12E3E3;
    color: #695AC8;
}

/* Buttons / Botones de Navegación */
button {
    border: none;
    border-radius: 15px;
    font-family: 'Atkinson Hyperlegible', Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: initial;
}

/* Botón Footer Seleccionar Idioma */
.btn-idioma {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 16px;
    background-color: transparent;
    border: 3px solid #FFFFFF;
    border-radius: 15px;
    color: #FFFFFF;
    outline: none;
    padding: 5%;
    transition: all .5s ease;
}

.btn-idioma p {
    font-family: 'Mulish', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2em;
}

.btn-idioma:hover {
    color: #695AC8;
    background-color: #32F5F5;
}

/* Tamaños de botones */
.btn-s {
    border-radius: 15px;
    font-size: 20px;
    line-height: 20px;
    padding: 10px 16px;
}

.btn-m {
    border-radius: 20px;
    padding: 10px 24px;
}

.btn-l {
    border-radius: 20px;
    padding: 10px 24px;
}

/* Textos */
h1,
h2,
h3,
h4,
h5 {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-weight: 700;
}

h1 {
    color: #32F5F5;
    font-size: 80px;
}

h2 {
    color: #695AC8;
    font-size: 72px;
}

h3 {
    color: #32F5F5;
    font-size: 67px;
    line-height: normal;
    text-align: center;
}

h4 {
    color: #32F5F5;
    font-size: 64px;
    font-style: normal;
    line-height: 1.5em;
}

h5 {
    color: #32F5F5;
    font-size: 45px;
}

p {
    color: #FFFFFF;
    font-family: 'Mulish', sans-serif;
    font-size: 24px;
}

.p-morado {
    color: #695AC8;
    font-family: 'Mulish', sans-serif;
    font-size: 24px;
}

/* Textos páginas moradas */
.white-txt {
    color: #FFFFFF;
}

.p-intro {
    font-family: 'Atkinson Hyperlegible', Helvetica, sans-serif;
    font-weight: 400;
    font-size: 30px;
}

.jugadoresprecio {
    color: #FFFFFF;
    font-size: 24px;
}

.jugadoresprecio::before { 
    content: ''; 
    background: url('../img/jugadoresprecio.svg') no-repeat center center/cover; 
    position: absolute;
    top: 0px; 
    left: 0px; 
    width: 38px; 
    height: auto;
} 

/* footer */
footer {
    background-color: #695AC8;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: normal;
    justify-content: space-evenly;
    padding: 4%;
}

.footer-contenedormenus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 32px;
}

footer nav ul {
    font-family: "Mulish", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
}

footer nav ul li {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    list-style: none;
    text-decoration: none;
}

.footerleft {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: flex-start;
    gap: 64px;
    margin-right: 5%;
    padding-right: 5%;
}

.menufooter {
    flex-flow: column;
    text-align: left;
    margin: 0;
    padding: 0;
}

.menufooter-empresa {
    flex-flow: column;
    text-align: left;
    margin: 0;
    padding: 0;
}

.footerright {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    flex-direction: column;
    gap: 8px;
}

.rrss {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 16px;
}

.rrss img {
    width: 32px;
    max-width: 64px;
}

footer p {
    color: #FFFFFF;
    font-family: 'Mulish', Helvetica, sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-align: left;
}
/* Fin Footer */
/* Fin Estilos Generales */

/* Página Indicaciones */
#main-indicaciones {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    grid-template-areas:
    "indicaciones-intro indicaciones-intro indicaciones-intro indicaciones-intro"
      "indicaciones-carrusel-headsets-titulo indicaciones-carrusel-headsets-titulo indicaciones-carrusel-headsets-titulo indicaciones-carrusel-headsets-titulo"
      "indicaciones-carrusel-headsets indicaciones-carrusel-headsets indicaciones-carrusel-headsets indicaciones-carrusel-headsets"
      "indicaciones-carrusel-inmersion-titulo indicaciones-carrusel-inmersion-titulo indicaciones-carrusel-inmersion-titulo indicaciones-carrusel-inmersion-titulo"
      "indicaciones-carrusel-inmersion indicaciones-carrusel-inmersion indicaciones-carrusel-inmersion indicaciones-carrusel-inmersion"
      "indicaciones-col-izq-txt indicaciones-col-izq-txt indicaciones-col-der-img indicaciones-col-der-img";
    padding-top: 2%;
    padding-right: 2%;
    padding-bottom: 0%;
    padding-left: 2%;
    margin: 0;
}

.indicaciones-intro {
    grid-area: indicaciones-intro;
    grid-template-rows: max-content;
    justify-self: center; 
    align-self: start;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 32px;
}

.indicaciones-intro-img {
    order: 1;
    margin: 0px;
    padding: 0px;
}

.intro-img {
    min-width: 200px;
    max-width: 379px;
}

.indicaciones-intro-txt {
    grid-area: indicaciones-intro-txt;
    justify-self: start;
    align-self: start;
    display: flex;
    order: 2;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    margin: 0px;
    padding: 0px;
}

.calltoaction-catalogo {
    background: linear-gradient(90deg, rgba(50,245,245,0) 15%, rgba(50,245,245,1) 65%, rgba(50,245,245,0) 100%);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-self: start;
    justify-content: space-around;
    margin: 2% 2%;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 80%;
}

.calltoaction-catalogo h5 {
    color: #32F5F5;
    font-size: 45px;
    margin-right: 10%;
}

/* Carrusel headsets título */
.indicaciones-carrusel-headsets-titulo {
    grid-area: indicaciones-carrusel-headsets-titulo;
    justify-self: center; 
    align-self: center;
}

.indicaciones-carrusel-headsets-titulo h3, .indicaciones-carrusel-inmersion-titulo h3 {
    color: #32F5F5;
    font-size: 67px;
    font-style: normal;
    line-height: 1.5em;
    text-align: center;
}

.indicaciones-carrusel-headsets-titulo .p-seleccion, .indicaciones-carrusel-inmersion-titulo .p-seleccion {
    color: #FFFFFF;
    font-size: 24px;
    font-style: normal;
    line-height: 1.5em;
    text-align: center;
}

/* Carrusel headsets */
.indicaciones-carrusel-headsets {
    grid-area: indicaciones-carrusel-headsets;
    align-self: center;
    justify-self: center;
    justify-items: center;
    margin: 0;
}

.img-carrusel-headsets {
    align-self: center;
    justify-self: center;
    justify-items: center;
    margin: 0;
    display: flex;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 48px;
    justify-content:center;
}

.img-headset {
    max-width: 120px;
    min-width: 60px;
}

/* Carrusel inmersión título */
.indicaciones-carrusel-inmersion-titulo {
    justify-self: center; 
    align-self: center; 
    grid-area: indicaciones-carrusel-inmersion-titulo; 
}

/* Carrusel inmersión */
.indicaciones-carrusel-inmersion {
    grid-area: indicaciones-carrusel-inmersion;
    align-self: center;
    justify-self: center;
    justify-items: center;
    margin: 0;
    display: flex;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 48px;
    justify-content:center;
}

.img-carrusel-inmersion {
    display: flex;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 48px;
    justify-content:center;
 }
 
 .img-inmersion {
     max-width: 120px;
     min-width: 60px;
 }

/* Columnas abajo: textos (izq) e imagen (der)  */
.indicaciones-col-izq-txt {
    grid-area: indicaciones-col-izq-txt;
    justify-self: start; 
    align-self: start; 
}

.indicaciones-col-der-img {
    grid-area: indicaciones-col-der-img;
    align-self: start;
    justify-self: center;
    margin: 0;
    padding: 0;
}

.img-abajo {
    min-width: 200px;
    max-width: 600px;
}

/* Media Queries */

/* iPhone Pro 11 vertical */
@media (min-width: 400px) and (max-width: 834px),
screen and (orientation: portrait) {

    #main-indicaciones {
        grid-template-columns: 1fr;
        grid-template-areas:
            "indicaciones-intro"
            "indicaciones-carrusel-headsets-titulo"
            "indicaciones-carrusel-headsets"
            "indicaciones-carrusel-inmersion-titulo"
            "indicaciones-carrusel-inmersion"
            "indicaciones-col-izq-txt"
            "indicaciones-col-der-img";
    }

    .indicaciones-intro-img {
        align-self: center;
        justify-self: center;
        order: 1;
    }

    .indicaciones-col-der-img,
    .indicaciones-col-izq-txt {
        align-self: center;
        justify-self: center;
        order: 2;
    }

    .img-abajo {
        min-width: 200px;
        max-width: 400px;
    }

    .footer-contenedormenus {
        flex-direction: column;
        align-items: stretch;
    }

    .footerleft {
        margin-right: 0;
        padding-right: 0;
        justify-content: center;
        gap: 16px;
    }

    .menufooter,
    .menufooter-empresa {
        margin-bottom: 16px;
    }

    .footerright {
        align-items: center;
    }

}

/* iPhone Pro 11 horizontal*/
@media (min-width: 835px) and (max-width: 1194px),
screen and (orientation: landscape) {

    #main-indicaciones {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "indicaciones-intro indicaciones-intro"
            "indicaciones-carrusel-headsets-titulo indicaciones-carrusel-headsets-titulo"
            "indicaciones-carrusel-headsets indicaciones-carrusel-headsets"
            "indicaciones-carrusel-inmersion-titulo indicaciones-carrusel-inmersion-titulo"
            "indicaciones-carrusel-inmersion indicaciones-carrusel-inmersion"
            "indicaciones-col-izq-txt indicaciones-col-der-img";
    }

    .indicaciones-intro-img {
        align-self: center;
        justify-self: center;
        order: 1;
    }

    .indicaciones-col-der-img,
    .indicaciones-col-izq-txt {
        align-self: center;
        justify-self: center;
        order: 2;
    }

    .footer-contenedormenus {
        flex-direction: row;
    }

    .footerleft {
        gap: 32px;
        margin-right: 5%;
        padding-right: 5%;
        justify-content: flex-start;
    }

    .menufooter,
    .menufooter-empresa {
        margin-bottom: 0;
    }

    .footerright {
        align-items: stretch;
    }

}