:root {
    --colorOscuro: #07051C;
    --colorClaro: #ECECEC;

    --rojo: #DF0000;

    --blanco: #fff;

    --fuentePrincipal: 'Mukta', sans-serif;
    --fuenteSecundaria: 'Krona One', sans-serif;
}

body {
    margin: 0;
    background-color: var(--colorClaro);
    scrollbar-width: thin;
    scrollbar-color: var(--colorOscuro) var(--colorClaro);
}

.color_base {
    background-color: var(--colorClaro);
}

::selection {
    background-color: rgba(255, 0, 0, 0.733);
    color: var(--blanco);
}

body::-webkit-scrollbar {
    width: 12px;
  }
  
  body::-webkit-scrollbar-track {
    background: var(--colorClaro);
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: var(--colorOscuro);
    border-radius: 20px;
    border: 3px solid var(--colorClaro);
  }

h1, h2, h3, p, a {
    text-decoration: none;
    color: var(--colorOscuro);
    font-family: var(--fuentePrincipal);
}

.prohibido {
    cursor: no-drop;
}

.header {
    padding: 2rem 5rem;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 2rem;
    line-height: 1rem;
    font-family: var(--fuenteSecundaria);
}

.nav {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    align-items: center;
}

.rrss_nav {
    font-size: 1.3rem;
    margin: 0;
    transition: .3s all linear;
}

.rrss_nav:hover {
    color: var(--rojo);
    transition: .3s all linear;
}

.rrss_nav:last-child {
    margin-right: 0;
}

.contenedor {
    padding: 3rem 2rem;
    padding-bottom: 0;
}

.titulo {
    font-size: 3rem;
    margin: 0;
    margin-bottom: 2rem;
    line-height: 2.8rem;
}

.texto {
    font-size: 1.4rem;
    margin: 0;
}

.linea {
    height: .1rem;
    background-color: var(--colorOscuro);
}

.entrada_sec {
    display: flex;
    align-items: center;
}

.line {
    background-color: var(--colorOscuro);
    width: 5rem;
    height: .2rem;
    margin-right: 1.2rem;
}

.texto_line {
    font-weight: 900;
    font-size: 1.2rem;
}

.destacado {
    font-weight: 900;
}

.proyectos {
    margin: 5rem 0rem;
}

.tarjeta_presentacion {
    padding: 1rem;
    background-color: var(--blanco);
    margin: 4rem 0;
    display: flex;
    flex-direction: column-reverse;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: .3s all linear;
    align-items: center;
}

.tarjeta_presentacion:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    transition: .3s all linear;
}

.tarjeta_info {
    padding: 2rem;
}

.tarjeta_titulo {
    font-weight: 900;
    font-size: 2rem;
    line-height: 1rem;
    margin: 0;
    letter-spacing: .1rem;
    font-family: var(--fuenteSecundaria);
    padding-bottom: 1rem;
}

.div_info {
    border-bottom: .1rem solid var(--colorOscuro);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tarjeta_imagen {
    background-image: url(https://media.discordapp.net/attachments/982775370522693712/983066338568306720/1654451662778.jpg?width=471&height=671);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 15rem;
    width: 15rem;
    border-radius: 100%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}

.tarjeta_texto {
    font-size: 1.1rem;
    margin: 2.5rem;
}

.informacion {
    font-size: 1.2rem;
    line-height: 1rem;
    margin: 0;
    margin-right: 1rem;
    display: none;
    align-items: center;
}

.info_icono {
    margin: 0rem 1rem;
    font-size: 1.8rem;
    line-height: 0rem;
}

.div_informacion {
    display: flex;
    align-items: center;
    padding-bottom: .2rem;
}

.info {
    font-weight: 900;
    margin-left: .5rem;
}

.tarjetas_proyectos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-top: 4rem;
}

.proyecto {
    background-color: var(--blanco);
    border-radius: 2rem;
    padding: 2rem;
    display: flex;
    align-items: flex-end;
    height: 20rem;
    transition: .3s all linear;
}

.proyecto:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    transition: .3s all linear;
}

.titulo_proyectos {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 900;
}

.p1 {
    background-image: url(/src/img/map&seo_fondo.png);
    background-position: center;
    background-size: cover;
}

.p2 {
    background-image: url(/src/img/disenamostusideas.jpg);
    background-position: center;
    background-size: cover;
}

.p3 {
    background-image: url(/src/img/community_manager.png);
    background-position: center;
    background-size: cover;
}

.blanco {
    color: var(--blanco);
}

.mensaje-aviso {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: .2rem;
    margin: 0;
    background-color: black;
    z-index:2000;
}

.mensaje {
    color: var(--blanco);
    margin: 0;
    text-align: center;
}

.hobbies {
    margin: 5rem 0rem;
    align-items: center;
}

.actividad {
    background-color: var(--blanco);
    padding: 5rem 0rem;
    text-align: center;
    border-radius: 1.5rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: .3s all linear;
    margin-bottom: 2rem;
}

.actividad:hover {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;    transition: .3s all linear;
}

.icono {
    font-size: 4rem;
    line-height: 1rem;
    margin: 0;
}

.titulo_hobbies {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1rem;
    margin: 0;
    margin-top: 2rem;
}

.destacado_hover {
    transition: .3s all linear;
}

.destacado_hover:hover {
    color: var(--rojo);
    transition: .3s all linear;
}

.boton_grande {
    background-color: var(--blanco);
    grid-column: -4/-1;
    text-align: center;
    padding: 1.3rem 0rem;
    border-radius: 3rem;
    font-weight: 900;
    font-size: 1.3rem;
    line-height: 1rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: .3s all linear;
}

.boton_grande:hover {
    background-color: var(--colorOscuro);
    color: var(--blanco);
    transition: .3s all linear;
}

.nav_general {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.elemento_nav {
    font-size: 1.2rem;
}
.elemento_nav:last-child {
    margin-right: 0;
}

.activo {
    font-weight: 900;
}

.texto_gal {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
}

.filtros {
    display: flex;
    width: 35rem;
    margin: auto;
    margin-bottom: 3rem;
    align-items: center;
    justify-content: space-between;
}

.filtro {
    transition: .3s all linear;
    background-color: var(--blanco);
    padding: 0rem 2.3rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 1.2rem;
    border: .2rem solid var(--blanco);
}

.filtro:hover {
    transition: .3s all linear;
    background-color: var(--colorClaro);
    padding: 0rem 2.3rem;
    border: .2rem solid var(--blanco);
}

/* Fotos de arnau inicio */

.f1 {
    backgeriaround-image: url(/src/img/galeria/foto_canasta.jpg);
}
.f1_1 {
    background-image: url(/src/img/galeria/foto_canasta_2.jpg);
}
.f2 {
    background-image: url(/src/img/galeria/foto_playa.jpg);
}
.f3 {
    background-image: url(/src/img/galeria/foto_graffitti.jpg);
}
.f4 {
    background-image: url(/src/img/galeria/foto_cristal_1.JPG);
}
.f5 {
    background-image: url(/src/img/galeria/foto_cristal_2.JPG);
}
.f6 {
    background-image: url(/src/img/galeria/foto_cristal_3.JPG);
}
.f7 {
    background-image: url(/src/img/galeria/foto_hoja_1.JPG);
}
.f8 {
    background-image: url(/src/img/galeria/foto_rama_1.JPG);
}
.f9 {
    background-image: url(/src/img/galeria/foto_rama_2.JPG);
}
.f10 {
    background-image: url(/src/img/galeria/foto_pina.JPG);
}
.f11 {
    background-image: url(/src/img/galeria/foto_pina_2.JPG);
}
.f12 {
    background-image: url(/src/img/galeria/foto_pina_3.JPG);
}
/* Fotos de arnau final */

/* Fotos prueba inicio */
.fp1 {
    background-image: url(/src/img/galeria/foto_retrato.JPG);
}
.fp2 {
    background-image: url(/src/img/galeria/foto_retrato2.JPG);
}
.fp3 {
    background-image: url(/src/img/galeria/foto_retrato3.JPG);
}
/* Fotos prueba final */

.galeria_2 {
    margin-bottom: 5rem;
    height: 30rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
}

.galeria_3 {
    margin-bottom: 5rem;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
}

.foto {
    height: 30rem;
    border-radius: 2rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.centrar_f {
    background-position: center;
}

.ocupar_2 {
    grid-column: -3/-1;
}

@keyframes smoothscroll1 {
    from, to { scroll-behavior: smooth; }
  }
  
  @keyframes smoothscroll2 {
    from, to { scroll-behavior: smooth; }
  }
  
  html {
    animation: smoothscroll1 1s;
  }
  
  html:focus-within {
    animation-name: smoothscroll2;
    scroll-behavior: smooth;
  }

  .boton_subir {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 2rem;
    padding: .9rem 1.3rem;
    border-radius: 3rem;
    background-color: var(--colorOscuro);
    color: var(--blanco);
  }

  @keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.sobremi {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
    margin-top: 8rem;
}



.solucion {
    height: 30rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    align-items: center;
    margin: 0;
	min-width: 100%;
	scroll-snap-align: start;
	position: relative;
    grid-template-columns: 6rem auto 6rem;
}

.contenido_solucion {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    height: 100%;
    align-content: center;
}

.slider {
	font-family: sans-serif;
	scroll-snap-type: x mandatory;
	display: flex;
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
    overflow-y: hidden;
}

.flecha_div {
    display: grid;
    text-align: center;
    align-items: center;
    transition: .3s all linear;
    height: 100%;
}

.icono {
    font-size: 3rem;
}

.flecha_div:hover {
    cursor: pointer;
    transition: .3s all linear;
}

.mostrar_1 {
    display: none;
}

.no_mostrar {
    display: none;
}

@media (min-width: 1400px) {
    .galeria_3 {
        margin-bottom: 5rem;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
    }

    .ocupar_2 {
        grid-column: 2/4;
    }

    .mostrar_2 {
        display: none;
    }

    .mostrar_1 {
        display: grid;
    }
}

#header_pc {
    display: none;
}

#header_movil {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    margin: auto;
    background-color: var(--colorClaro);
    width: 100%;
    padding: 2rem 0;
    padding-bottom: 0;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

@media (min-width: 700px) {
    #header_pc {
        display: flex;
    }
    
    #header_movil {
        display: none;
    }

    .sobremi {
        margin-top: 0;
    }

    
}

.ajuste_header {
    display: grid;
    justify-content: center;
}

@media (min-width: 1500px) {
    .tarjeta_presentacion {
        padding: 3rem;
        background-color: var(--blanco);
        border-radius: 2rem;
        margin: 4rem;
        display: grid;
        grid-template-columns: 1fr auto;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        transition: .3s all linear;
    }

    .tarjeta_imagen {
        background-image: url(https://media.discordapp.net/attachments/982775370522693712/983066338568306720/1654451662778.jpg?width=471&height=671);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 20rem;
        width: 20rem;
        border-radius: 100%;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    }

    .tarjeta_info {
        padding: 2rem;
        margin-right: 4rem;
    }
}

@media (min-width: 1300px) {
    .tarjeta_presentacion {
        padding: 1rem;
        background-color: var(--blanco);
        border-radius: 2rem;
        margin: 4rem;
        display: grid;
        grid-template-columns: 1fr auto;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        transition: .3s all linear;
        align-items: center;
    }
}

@media (min-width: 640px) {
    .tarjetas_proyectos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 2rem;
        padding-top: 4rem;
    }
    
    .proyecto {
        background-color: var(--blanco);
        border-radius: 2rem;
        padding: 2rem;
        display: flex;
        align-items: flex-end;
        height: 30rem;
        transition: .3s all linear;
    }
}

@media (min-width: 1000px) {
    .tarjetas_proyectos {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        column-gap: 2rem;
        padding-top: 4rem;
    }
    
    .proyecto {
        background-color: var(--blanco);
        border-radius: 2rem;
        padding: 2rem;
        display: flex;
        align-items: flex-end;
        height: 30rem;
        transition: .3s all linear;
    }
}

.tarjetas_hobbies {
    display: flex;
    flex-direction: column;
    column-gap: 2rem;
    margin-top: 2rem;
}

@media (max-width: 640px) {
    .ajuste_tarjeta {
        width: 100%;
    }
}

@media (min-width: 675px) {
    .informacion {
        display: flex;
    }

    .boton_subir {
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 4rem;
        padding: .9rem 1.3rem;
        border-radius: 3rem;
        background-color: var(--colorOscuro);
        color: var(--blanco);
      }
}

@media (max-width: 1000px) {
    .p3 {
        grid-column: 1/3;
    }
}

@media (min-width: 1000px) {
    .galeria_3 {
        margin-bottom: 5rem;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .no_mostrar {
        display: inline;
    }

    .ocupa_2 {
        grid-column: 1/3;
    }

    .contenedor {
        padding: 3rem 7rem;
        padding-bottom: 0;
    }

    .tarjetas_hobbies {
        display: grid;
        column-gap: 2rem;
        margin-top: 2rem;
    }
}