* {
     margin: 0;
     padding: 0;
     border: 0;
     box-sizing: border-box;
 }

 li {
     list-style: none;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-size: inherit;
     font-weight: inherit;
 }

 a {
     color: inherit;
     text-decoration: none;
     display: block;
 }

 p a {
     display: inline;
 }

 img,
 picture,
 video,
 iframe {
     display: block;
     width: 100%;
     /* height: initial; */
 }

 form,
 input,
 label,
 select,
 option,
 textarea,
 button {
     font-size: inherit;
     font-family: inherit;
     display: block;
     background-color: transparent;
 }

 :root {
     --color-blau-links: rgb(123, 168, 235);
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: "Space Grotesk", sans-serif;
     /* font-family: "Inter", sans-serif; */
     background-color: rgb(220, 220, 218);
 }

 /* accesibilidad al navegar con tabulador */
 :focus-visible {
     outline: 2px solid #1a1a1a;
     outline-offset: 2px;
 }


 /**************** FIN RESET *****************/

 /******************* HEADER ******************/

 .principal__grid a {
     display: contents;
     /* Algo para arrelgar en Index mobile el tamaño de los contenedores de las imágenes*/
 }

 .header {
     width: 100%;
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: center;
     text-transform: uppercase;
     padding: 1rem;
     position: fixed;
     top: 0;
     z-index: 2;
 }

 .header__h1 {
     font-weight: 600;
     background-color: #ffff00;
     display: inline-block;
     width: fit-content;
     white-space: nowrap;
     /* ← esto evita el salto de línea */
 }


 .header__h1:hover {
     color: var(--color-blau-links);
 }

 .header__btn {
     display: none;
     font-size: 1.4em;
     cursor: pointer;
 }

 .header__nav {
     width: 100%;
     position: relative;
 }

 .nav__ul {
     font-size: .8em;
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
     align-items: center;
     padding-left: 25vw;
 }

 .nav__li:hover {
     color: yellow;
 }

 ::selection {
     background-color: #fbfb87;
     /* el color del subrayado */
     color: black;
     /* color del texto seleccionado */
 }

 /******************* FIN HEADER ********************/


 /******************** INICIO MAIN *******************/

 .flecha {
     display: none;
 }


 .flechasi {
     opacity: .7;
     display: block;
     width: 2rem;
     display: block;
     position: fixed;
     bottom: 3rem;
     right: 1rem;
     z-index: 5;
 }

 @media (min-width: 1000px) {
     .flechasi img {
         transform: rotate(268deg);
         /* ajusta los grados */
     }
 }


 .main {
     width: 100%;
     min-height: 100vh;
     display: flex;
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
 }

 .wrapper__principal {
     width: 100%;
     min-height: 85vh;
 }

 .section__principal {
     width: 35%;
     min-height: 100vh;
     margin: 0 auto;
     display: flex;
     flex-flow: column nowrap;
     justify-content: center;
     align-items: center;
 }

 .principal__grid {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     padding: .5rem 2rem;
     justify-content: center;

 }

 .principal__p {
     text-transform: uppercase;
     font-weight: 200;
     font-size: .8em;
     text-align: justify;
     opacity: 0;
     animation: textup 1.5s ease .5s forwards;
     z-index: -1;
 }

 @keyframes textup {
     from {
         opacity: 0;
         transform: translateY(35%);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .wrap__img {
     width: 4em;
     cursor: pointer;
 }

 /* Animaciones imágenes */

 .--img__01 {
     animation: moveimg01 1.5s ease .5s forwards;

 }

 @keyframes moveimg01 {
     from {
         opacity: 0;
         transform: translate(-300%, 400%);
     }

     to {
         opacity: 1;
         transform: translate(0);
     }
 }


 .--img__02 {
     animation: moveimg02 1.5s ease .5s forwards;
 }

 @keyframes moveimg02 {
     from {
         opacity: 0;
         transform: translate(-300%, -300%);
     }

     to {
         opacity: 1;
         transform: translate(0);
     }
 }


 .--img__03 {
     animation: moveimg03 1.5s ease-in-out .5s forwards;
 }

 @keyframes moveimg03 {
     from {
         opacity: 0;
         transform: translate(-800%, -300%);
     }

     to {
         opacity: 1;
         transform: translate(0);
     }
 }

 .--img__04 {
     animation: moveimg04 1.5s ease .5s forwards;
 }

 @keyframes moveimg04 {
     from {
         opacity: 0;
         transform: translate(450%, 200%);
     }

     to {
         opacity: 1;
         transform: translate(0);
     }
 }

 .--img__05 {
     animation: moveimg05 1.5s ease .5s forwards;
 }

 @keyframes moveimg05 {
     from {
         opacity: 0;
         transform: translate(700%, -200%);
     }

     to {
         opacity: 1;
         transform: translate(0);
     }
 }

 .--img__06 {
     animation: moveimg06 1.5s ease .5s forwards;
 }

 @keyframes moveimg06 {
     from {
         opacity: 0;
         transform: translate(500%, 500%);
     }

     to {
         opacity: 1;
         transform: translate(0);
     }
 }

 /* fin animaciones imágenes */

 .contenedor {
     display: none;
 }

 /************************* MOBILE MODE *************************/

 .div__mobile {
     display: none;
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
 }

 /************************* FIN MOBILE MODE *************************/

 /******************** FIN MAIN *******************/




 /************************* INICI PÀGINA WORK *************************/

 .div__work,
 .div__project {
     width: 98%;
     margin-top: 4rem;
     padding: 0 1rem;
     /* background-color: rgb(219, 183, 254); */
 }

 .p__work,
 .p__project {
     font-weight: 400;
     font-size: 2em;
     text-transform: uppercase;
 }

 .section__projects {
     width: 100%;
     margin-top: 2rem;
     margin-bottom: 5rem;

 }

 .work__item {
     display: grid;
     grid-template-columns: 1fr 1fr;
     border-top: 1px solid black;
     /* padding: 0 1rem; */

 }

 .border__bottom {
     border-bottom: 1px solid black;
 }

 .work__item:last-child {
     /* border-bottom: 1px solid black; */
 }

 .work__img {
     width: 100%;
     aspect-ratio: 16 / 9;
     overflow: hidden;
     border-right: 1px solid black;
     padding: 1rem;

 }

 .work__img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: 50% 98%;
     border-radius: 1rem;
 }

 .img02 img {
     object-position: 50% 50%;
 }

 .img03 img {
     object-position: 50% 44%;
 }

 .img04 img {
     object-position: 50% 44%;
 }

 .img05 img {
     object-position: 50% 44%;
 }

 .img06 img {
     object-position: 50% 44%;
 }

 .work__info {
     padding: 2rem;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     font-size: 1.2rem;

 }

 .work__titulo {
     font-weight: 400;
     margin-bottom: 1rem;
     background-color: var(--color-blau-links);
 }

 .blue__color {
     background-color: var(--color-blau-links);
 }

 /* aparición página */
 .main__aparecer {
     opacity: 0;
     animation: aparecer 2.5s ease .5s forwards;

 }

 @keyframes aparecer {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }


 /************************* FIN PÀGINA WORK *************************/




 /**************************  INICI PÀGINA MÉS ************************* */

 .wrapper__mes {
     /* width: 90%; */
     margin-top: 4rem;
 }

 .div__mes {
     width: 98%;
     /* margin-top: 4rem; */
     padding: 0 1rem;
     /* background-color: rgb(219, 183, 254); */

 }

 .p__mes {
     font-weight: 400;
     font-size: 2em;
     text-transform: uppercase;
     margin-top: 1rem;
 }

 .yellowcolor {
     background-color: #ffff00;
 }


 .bluecolor {
     background-color: rgb(123, 168, 235);
 }

 /************************* FIN PÀGINA MÉS *************************/


 /************************* INICI PÀGINA PROJECTES *************************/


 .wrapper__project {
     width: 100%;
     /* min-height: 100vh; */
     margin-top: 6rem;
 }

 /* CARRUSEL */
 .carousel {
     /* background-color: rgba(253, 253, 60, 0.802); */
     width: 50%;
     position: relative;
     overflow: hidden;
     margin: 3rem auto 8rem auto;
 }

 .slides {
     display: flex;
     transition: transform 0.35s ease;
     will-change: transform;
     touch-action: pan-y;
 }

 .slide {
     flex: 0 0 100%;
     box-sizing: border-box;
     text-align: center;
 }


 /* Zonas de clic invisibles */
 .tap-zone {
     position: absolute;
     top: 0;
     height: 100%;
     width: 50%;
     z-index: 2;
 }

 .left-zone {
     left: 0;
 }

 .right-zone {
     right: 0;
 }

 /* Controles */
 .carousel-controls {
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: center;

 }

 .carousel .btn {
     color: rgb(0, 0, 0);
     padding: 6px 10px;
     cursor: pointer;
 }

 /* indicador tipo 1/3 */
 .page-indicator {
     font-size: .9375rem;
 }

 .btn {
     cursor: pointer;
     z-index: 3;
 }

 @media (max-width:1200px) {
     .carousel {
         width: 100%;
     }

 }

 /************************* FIN PÀGINA PROJECTES *************************/



 /* ************************ PÀGINA INFO *************************/

 .main__info {
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     min-height: 90vh;

     padding: 2rem;
 }

 .div__redes {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
     align-items: center;
 }

 .div__redes a {
     text-align: center;
     background-color: #fbfb87;
 }

 @media (max-width: 380px) {

     .main__info,
     .div__redes {
         justify-content: center;
         align-items: center;
         text-align: center;
     }

     .p__info {
        font-size: 1.5em;
         margin-bottom: 2rem;
     }

     .div__redes {
         gap: 1rem;
     }
 }

 /******************** FIN PÀGINA INFO *********************/





 /******************** INICIO FOOTER *********************/

 .footer {
     width: 100%;
     position: fixed;
     bottom: 0;
     text-transform: uppercase;
     font-size: .7em;
     padding: 1rem;
     font-weight: 200;
 }

 .footer__nav {
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
     align-items: center;
 }

 .footer__ul {
     display: flex;
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
 }

 .--ul__first li:hover,
 .--ul__third li:hover {
     color: #ffff00;
 }

 .--ul__first {
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: center;
     gap: .5rem;
 }

 /******************** FIN FOOTER *********************/


 /******************** MEDIA QUERIES *********************/

 @media (max-width: 1200px) {
     .main__aparecer {
         align-items: flex-start;
     }

     .flecha {
         opacity: .4;
         width: 2rem;
         display: block;
         position: fixed;
         bottom: 3rem;
         right: 1rem;
         z-index: 5;
     }

     .header {
         flex-wrap: wrap;
         justify-content: space-between;
         padding: 0;
         z-index: 3;
     }

     .header__h1,
     .header__btn {
         margin: .6rem;
     }

     .header__nav {
         width: 100%;
         display: none;
     }

     .header__nav.isActive {
         display: block;
     }

     .nav__ul {
         color: white;
         width: 100%;
         height: 100vh;
         background-color: black;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         font-size: 1.6em;
         position: absolute;
         /* margin-left: 0; */
         padding: 0;
         gap: 3rem;
     }

     .nav__li:first-child {
         margin-top: -7rem;
     }

     .header__btn {
         color: black;
         display: block;
         cursor: pointer;
     }

     .footer {
         z-index: 4;
         color: #757575;
     }

     .--ul__first,
     .--ul__second {
         flex-flow: column;
         align-items: flex-start;
         gap: .3rem;
     }

     .--ul__second {
         display: none;
     }

     .footer__nav {
         align-items: flex-end;
     }

     .section__principal {
         width: 95%;
         min-height: 80vh;
         justify-content: space-around;
     }

     .principal__grid {
         grid-template-columns: repeat(1, 1fr);
         place-items: center;
         gap: .4rem;
         padding: 0;
     }

     .div__mobile {
         display: flex;
     }

     .p__mobile {
         color: rgb(0, 0, 0);
         background-color: rgba(253, 253, 60, 0.802);
         text-transform: uppercase;
         margin-top: 1rem;
         margin-bottom: .5rem;
     }

     .--top__mobile {
         margin-top: 5rem;
     }

     .principal__p {
         width: 100%;
         margin: 2rem;
         margin-bottom: 5rem;
     }

     .div__mobile h2 {
         text-align: center;
         animation: bajar 1s ease-in-out 1.5s forwards;
         opacity: 0;
     }

     @keyframes bajar {
         from {
             opacity: 0;
             transform: translateY(0);
         }

         to {
             opacity: 1;
             transform: translateY(30%);
         }
     }

     .footer {
         bottom: 1%;
     }

     .wrap__img {
         width: 100%;
         aspect-ratio: 31 / 9;
         /* 🔥 aquí está la magia */
         overflow: hidden;
         opacity: 1;
     }

     .wrap__img img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: center;
         display: block;
     }

     .p__work {
         font-size: 1.5em;
     }

     .work__item {
         grid-template-columns: 1fr;
     }

     .work__info {
         padding: 1rem;
     }

     .work__titulo {
         font-size: 1rem;
     }

     .work__img {
         border-right: none;
     }

     .work__img img {
         border-radius: 1rem 1rem 1rem 1rem;
     }


     .work__item {
         padding: 1rem 0;
         margin-top: 2rem;
     }

     .wrapper__mes {
         margin-bottom: 5rem;
     }

     .p__mes {

         font-size: 1.5em;

     }

     .main.main__aparecer {
         align-items: flex-start !important;
     }

     .p__project {
         font-size: 1.5em;
     }
 }



 @media (min-width: 1201px) {

     .contenedor {
         display: flex;
         width: 100%;
         min-height: 100vh;
         position: absolute;
         top: 0;

         z-index: -1;
     }

     .wrapper__imgs {
         width: 100%;
         min-height: 100vh;
         /* background-color: rgb(159, 251, 133); */

         position: relative;
         overflow: hidden;
     }

     .imgs {
         width: 49vw;
         min-height: 100vh;
         /* background-color: darkslateblue; */
         background-size: 75%;
         background-repeat: no-repeat;
         background-position: center;

         position: absolute;

         opacity: 0;
         transition: opacity .5s ease-in-out, transform 1s ease;
         top: 0;

         display: flex;
         justify-content: center;
         align-items: center;

     }

     .imgs.isVisible {
         opacity: 1;
         transform: scale(1.02, 1.02);

     }

     .wrap__img {
         opacity: 0;
     }

     .imgs--a {
         background-image: url(../assets/index/index_01_active.webp);
     }

     .imgs--b {
         background-image: url(../assets/index/index_02_active.webp);
     }

     .imgs--c {
         background-image: url(../assets/index/index_03_active.webp);
     }

     .imgs--d {
         background-image: url(../assets/index/index_04_active.webp);
         right: 0;
     }

     .imgs--e {
         background-image: url(../assets/index/index_05_active.webp);
         right: 0;
     }

     .imgs--f {
         background-image: url(../assets/index/index_06_active.webp);
         right: 0;
     }

     .texto__imgs {
         width: 60%;
         position: absolute;
         bottom: 10vh;
         margin: 0 auto;
         justify-self: center;
         display: flex;
         flex-flow: column nowrap;
         justify-content: flex-start;
         align-items: flex-start;
     }

     .texto__imgs h2 {
         color: rgb(0, 0, 0);
         background-color: rgba(253, 253, 60, 0.802);
         text-transform: uppercase;
         margin-bottom: 1rem;
         border-radius: .2em;
         padding: .2em;
         font-size: 2vmin;
     }

     .texto__imgs p {
         color: rgb(0, 0, 0);
         background-color: rgba(253, 253, 60, 0.802);
         margin-bottom: 1rem;
         border-radius: .2em;
         font-size: 2vmin;
     }


     .texto__imgs {
         opacity: 0;
         transform: translateY(40%);
     }

     .texto__imgs.text-active {
         opacity: 1;
         transform: translateY(0);
         transition: transform 1s ease, opacity 0.5s ease;
     }

     .flechasi img {
         /* transform: rotate(268deg); */

     }


 }

 @media (min-width: 1600px) {

     .imgs {
         width: 43vw;
     }

 }