/* Reset CSS */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* General Fonts */

@font-face {
    font-family: 'Helvetica Neue Bold';
    src: url('fonts/HelveticaNeueBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'STIX Two Text';
    src: url('fonts/STIXTwoText-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'STIX Two Text';
    src: url('fonts/STIXTwoText-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Fonts */

body {
    font-family: 'STIX Two Text', sans-serif;
    font-style: normal;
    overflow-x: hidden;
}

h2 {
    font-family: 'Helvetica Neue Bold', sans-serif;
    font-size: 50px;
}

em {
    font-family: 'STIX Two Text', sans-serif;
    font-style: italic;
}

.underline, iframe span {
    background-color: #fbff83 !important;
    text-decoration: none !important;
}

/* Navbar */

header {
    background-color: transparent;
    position: sticky;
    top: 0px;
    z-index: 9998;
}

.navbar {
    display: flex;
    justify-content: space-between;
    padding: 2.5vw 5vw;
    position: absolute;
    width: 100vw;
    flex-direction: row-reverse;
}

header ul {
    display: flex;
    align-items: center;
    gap: 10px;
}

header li {
    list-style: none;
}

header a {
    text-decoration: none;
    font-family: 'Helvetica Neue Bold', sans-serif;
    color: black;
    font-size: 16px;
    padding: 0px 10px;
}

header a:hover:not(.logo2) {
    background-color: #fbff83;
}


.logo {
    width: 150px;
    height: auto;
    padding: 0px !important;
}

.nav-link.active {
    background-color: transparent;
}


/* Navbar when scrolled*/

.navbar.scrolled {
    background-color: black !important;
    color: white;
    transition: all .5s ease-out;
}

.navbar.scrolled a:hover {
    background-color: transparent;
}

.scrolled-link {
    color: white;
    background-color: transparent !important;
}

.scrolled-link:hover {
    color: #fbff83;
}

.scrolled-link:active {
    color: #fbff83;
}

/* Main sections */


section, .home {
    overflow: hidden;
}

section h2 a {
    color: white;
    text-decoration: none;
}

h2:hover a {
    color: #fbff83; 
  }

.home {
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: -1;
    top: 0px;
    overflow: hidden;
    background-image: url(images/home.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.home-img img {
    width: 100%;
    height: auto;
    position: absolute;
    transform: translate(0%, -14%);
}

h2 {
    display: flex;
    background-color: black;
    color: white;
    justify-content: center;
    height: 88px;
    align-items: center;
}

.title-h2 {
    padding-top: 10px;
}


/* News */

.news {
    display: grid;
    gap: 2.5vw;
    padding: 5vw;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
}

.news h3 {
    font-family: 'Helvetica Neue Bold';
    text-align: right;
    font-size: 35px;
}

.news-img {
    width: 100%;
    height: auto;
}

.news-img img {
    width: 100%;
}

.paragraph {
    display: flex;
    gap: 5vw;
    flex-direction: column;
    justify-content: flex-end;
}

/* Volumes */

.fashion {
    display: grid;
    gap: 2.5vw;
    padding: 2.5vw 5vw;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
}

.fashion img {
    width: 100%;
}

/* Merch */

.merch {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.merch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Moving line */

.moving-container {
    overflow: hidden;
    width: 100%;
    background-color: #fbfc93;
    display: flex;
    white-space: nowrap;
}


.moving {
    display: flex;
    align-items: center;
    gap: 40px; /* Añade 40px de espacio SÓLO ENTRE los elementos */
padding: 30px 40px 30px 0px;
    flex-shrink: 0;
    animation: move-left 10s linear infinite; /* Ajusta la duración si es necesario */
}




@keyframes move-left {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}

.moving h3, .moving p {
    font-size: 36px;
    display: inline-block;
}

.moving h3 {
    font-family: 'Helvetica Neue Bold';
}

.moving p {
    font-family: 'Helvetica Neue Bold';
    font-style: normal;
    font-size: 12px !important;
}


/* Footer */

footer {
    height: 40vh;
    width: 100vw;
    background-color: black;
    color: white;
    padding: 5vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.footer-left-column {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-right-column {
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-links {
    text-align: left;
}

.footer-links a {
    text-decoration: none;
    color: white;
}

.footer-links ul {
    list-style: none;
    font-family: 'Helvetica Neue Bold', sans-serif;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-logo img {
    width: 150px;
    height: auto;
}

.footer-copyright p {
    font-size: 10px;
}

.footer-contact p {
    font-size: 14px;
}

.footer-title {
    font-family: 'Helvetica Neue Bold';
    font-size: 24px;
}

.footer-rrss {
    font-family: 'Helvetica Neue Bold';
    font-size: 18px;
    text-align: right;
}

.footer-rrss ul {
    list-style: none;
    display: flex;
        gap: 10px;
        flex-direction: column;
        font-size: 16px;
}

.footer-rrss a {
    text-decoration: none;
    color: white;
}

.footer-rrss a:hover {
    color: #fbff83;
}

.footer-subscribe {
    display: flex;
    align-items: center;
    border-bottom: 3px solid white;
}

.footer-subscribe label {
    font-size: 18px;
    color: whitesmoke;
    margin-right: 10px;
    font-family: 'Helvetica Neue Bold';
}

.footer-subscribe input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 18px;
    color: white;
    background: none;
}

.site-footer {
    display: none !important;
}

.mobile-footer {
    display: flex;
}

form {
    display: flex;
    gap: 20px;
    height: 43px;
}

form button {
background: black;
color: white;
border: 1px solid white;
border-bottom: 3px solid white;
font-family: 'Helvetica Neue Bold';
padding: 10px 20px;
text-transform: uppercase;
font-size: 18px;
transition: all .3s ease-out;
}

button:hover {
border-bottom: 1px solid white;
cursor: pointer;
}

.footer-links a:hover {
     color: #fbff83;
}


.fullscreen-iframe {
    position: fixed;
    top: 135.2px;
    left: 0;
    width: 100vw;
    height: 95vh;
    border: none;
    padding-bottom: 67px;
}

.footer-two {
    display: flex;
        justify-content: space-between;
        align-items: flex-end;
}

.mobile-footer {
    flex-direction: column;
    justify-content: space-between;
}

/* ====================================================== */
/* FORZAR VISIBILIDAD DE IMÁGENES DE ADOBE PORTFOLIO      */
/* ====================================================== */

/* Esto se aplica a las imágenes que están DENTRO del contenido 
  que hemos cargado en nuestro div.
*/
#portfolio-container .js-lazy,
#portfolio-container .e2e-site-project-module-image {
    /* La regla !important le da máxima prioridad a nuestro estilo,
      anulando cualquier regla de "opacity: 0" que venga de Adobe.
    */
    opacity: 1 !important;
    visibility: visible !important;

    /* Opcional: Aseguramos que ocupe su espacio correctamente */
    width: 100%;
    height: auto;
    padding-bottom: 0px !important;
}

/*Responsive*/


/*Mobile*/

@media (max-width: 825px) {

    .mobile-home {
        background-image: url(images/mobile-home3.jpg);
    }

    .desktop-home {
        display: none;
    }

    .moving h3 {
    font-size: 30px;
    }

    .navbar-mobile {
        display: flex;
        justify-content: space-between;
        padding: 24px 5vw;
        width: 100vw;
        position: absolute;
        flex-direction: row-reverse;
        align-items: center;
    }

    .navbar {
        display: none;
    }

    .header-mobile {
        position: sticky;
    }

    .hamburger {
        width: 30px;
        height: 30px;
    }

    .navbar-mobile.scrolled {
        background-color: black;
    }

    .mobile-links {
        text-align: left;
        padding: 5.5vw;
        background-color: black;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        position: fixed;
        padding-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
        transition: all .3s ease-out;
        opacity: 0;
        visibility: hidden;
        top: 0px;
        padding-top: 10vw;
    }

    .mobile-links li {
        padding-bottom: 16px;
    }

    .mobile-links ul {
        list-style: none;
        font-size: 20px;
    }

    .mobile-links a {
        text-decoration: none;
        color: white;
        font-family: 'Helvetica Neue Bold';
    }

    .mobile-links.active {
        opacity: 1;
        visibility: visible; 
    }

    .mobile-links a:hover {
        color: #fbff83;
    }

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

    .news-img {
        order: 1;
    }

    .news h3 {
        order: 2;
        text-align: left;
    }

    .news a:first-of-type {
        order: 2;
    }

    .paragraph {
        order: 3;
    }

    .paragraph p:first-of-type {
          text-align: right;
          padding-left: 80px;
          font-style: italic;
    }

    .fashion {
        grid-template-columns: 1fr;
        gap: 5vw;
        padding: 5vw;
    }

    .merch-h2 {
        font-size: 32px;
    }

    .merch {
        height: 56vh;
    }

    .moving-container {
        background-color: transparent;
        display: flex;
    }

    .moving {
        z-index: -10;
        background-color: #fbff83;
    }

    footer:first-of-type {
        display: none;
    }

    .mobile-footer {
        height: auto;
        padding-top: 10vh;
        gap: 15vw;
        justify-content: flex-end !important;
    }


    .mobile-footer .footer-title {
        font-size: 20px;
        text-align: center;
    }

    .footer-two .footer-links {
        text-align: right;
    }

    .mobile-footer .footer-rrss {
        text-align: left;
    }

    .footer-logo {
        width: 30%;
    }

    .footer-logo img {
        width: 100px;
    }

    .outside-subscribe {
        height: 80px;
    }

    form {
        flex-direction: column;
        align-items: flex-end;
    }

    .footer-subscribe {
        width: 100%;
    }

}

/*Big tablet and Desktop*/

@media (min-width: 826px) {
    .mobile-home {
        display: none;
    }

    .navbar-mobile {
        display: none;
    }

    .mobile-links {
        display: none;
    }

    .mobile-footer {
        display: none;
    }

}