:root {
    --color-primary: #1E429F;
    --color-secondary: rgb(28, 100, 242);
    --color-dark: #233876;
    --color-light: #3F83F8;
    --color-black: #000;
    --color-white: #ffffff;

    /* INTPD */
    --color-yellow: #FBED23;

    /* Legends */
    --color-gold: linear-gradient(45deg, 
        #ffee7f, 
        #ce9e2f, 
        #ffff8e, 
        #be8e1f, 
        #ffde6f, 
        #d6a637
    );

    /* Frozen */
    --color-blue-frozen: #025D9E;
    --color-blue-light-frozen: #61CCF5;

    /* Gradient Cold */
    --gradient-cold: linear-gradient(45deg, #1E3A8A, #2563EB, #3B82F6);
    --height-100: 100vh;
    --height-70: 70vh;
    --height-50: 50vh;
    --height-25: 25vh;
    --lato-thin: 100;
    --lato-light: 300;
    --lato-regular: 400;
    --lato-bold: 700;
    --lato-black: 900;
    --font-xxxl: 5.5rem;
    --font-xxl: 4.5rem;
    --font-xl: 3.5rem;
    --font-title: 2.5rem;
    --font-subtitle: 1.5rem;
    --font-paragraph: 1em;
}

body {
    background-color: var(--color-black);
    font-family: "Lato", sans-serif;
    font-style: normal;
}

.background-light {
    background-color: var(--color-white);
}

.background-dark {
    background-color: var(--color-black);
}

.background-martin {
    width: 100%;
    height: 100vh;
    background-image: url(/assets/img/Background-Martin.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.span-color-primary {
    color: var(--color-primary);
}

.span-color-secondary {
    color: var(--color-secondary);
}

nav {
    position: fixed;
    z-index: 999;
    width: 100%;
    transition: box-shadow 0.3s ease;
}

nav.shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
}

.nav-item-hover {
    text-decoration: none;
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}

.nav-item-hover:hover, nav .nav-item-hover:focus {
    text-decoration: none;
    color: #000;
    transform: scale(1.2);
}


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

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

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

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

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

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

.color-white:hover,
.color-white:focus {
    color: var(--color-light);
    transition: all 0.3s ease-in-out;
}

.background-gradient {
    background-color: linear-gradient(45deg, #1E3A8A, #2563EB, #3B82F6);
}

.gradient-background {
    background-color: linear-gradient(45deg, 
        #ffee7f, 
        #ce9e2f, 
        #ffff8e, 
        #be8e1f, 
        #ffde6f, 
        #d6a637
    );
}

.gradient-gold {
    color: var(--color-gold);
}

.hover-light {
    color: #ffffff;
    transform: scale(1);
}

.hover-light:hover, .hover-light:focus {
    color: var(--color-light);
    transform: scale(1.25);
    transition: all 0.3 ease-in-out;
}

.hover-dark {
    color: #000;
}

.hover-dark:hover, .hover-dark:focus {
    color: var(--color-light);
    transition: all 0.3 ease-in-out;
}

.hover-svg {
    height: 200px;
    transition: transform 0.2s ease-in-out;
}

.hover-svg:hover, .hover-svg:focus {
    transform: scale(1.1);
}

/* Background */
.dark-blue-gradient {
    background-image: url(/assets/img/dark_blue_gradient_background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Image */

.height-img-card {
    height: 500px;
    width: 100%;
    object-fit: cover;
}

/* Spinner */

#spinner-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(/assets/img/Background-Martin.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 9999; /* Asegura que esté al frente */
}

/* Font Global */
.font-xxxl {
    font-size: 5.5rem;
}

.font-xxl {
    font-size: 4.5rem;
}

.font-xl {
    font-size: 3.5rem;
}

.font-title {
    font-size: 2.5rem;
}

.font-subtitle {
    font-size: 1.5rem;
}

.font-paragraph {
    font-size: 1em;
}

.font-xs {
    font-size: 0.8em;
}

.neon-text {
    font-family: 'Lato Black', sans-serif; /* Asegúrate de cargar la fuente Lato Black */
    color: #ffffff; /* Color base del texto */
    text-shadow: 
        0 0 15px #ffffff; /* Mayor intensidad */
}

.lato-thin {
    font-weight: var(--lato-thin);
}
  
.lato-light {
    font-weight: var(--lato-light);
}
  
.lato-regular {
    font-weight: var(--lato-regular);
}
  
.lato-bold {
    font-weight: var(--lato-bold);
}

.lato-black {
    font-weight: var(--lato-black);
} 

/* Global Class */
.background-attachment {
    background-image: url('/assets/img/Background-Martin.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.video-principality {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.height-100 {
    height: var(--height-100);
}

.height-70 {
    height: var(--height-70);
}

.height-50 {
    height: var(--height-50);
}

.height-25 {
    height: var(--height-25);
}

.button-primary {
    background-color: var(--color-dark);
    padding: 0.75em 1.5em;
    border-radius: 5px;
    color: #ffffff;
}

.button-primary:hover, .button-primary:focus {
    background-color: var(--color-light);
    transition: all 0.2s ease-in-out;
}

/* Button Secondary */

.button-secondary {
    background: linear-gradient(45deg, #1E3A8A, #2563EB, #3B82F6);
    padding: 0.75em 1.5em;
    border-radius: 5px;
    color: var(--color-white);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease-in-out;
}

.button-secondary:hover, 
.button-secondary:focus {
    transform: scale(1.05);
    color: var(--color-white);
}

.button-secondary:active {
    transform: scale(0.98);
}

/* Efecto de reflejo */
.button-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 250%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    transform: skewX(-45deg);
    transition: all 0.5s ease-out;
    z-index: 1;
    pointer-events: none;
}

.button-secondary:hover::before {
    left: 150%;
    transition: all 0.5s ease-out;
}

/* About Section */
#shape-about {
    background-image: url(/assets/img/about-banner.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 55vh;
}

.shape h2 {
    font-size: 5em;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-top: 50px;
    color: #ffffff;
    z-index: 998;
}

.about-image img {
    height: 800px;
    width: 100%;
    object-fit: cover;
}

#about-section .ul-design a {
    display: inline-block;
    color: white;
    position: relative;
    transition: all 0.3s ease-in-out;
    
    span {
        background: var(--gradient-cold);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

#about-section .ul-design a:hover,
#about-section .ul-design a:focus {
    transform: translateX(10px);
    background: var(--gradient-cold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;

    span {
        background: none;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: var(--color-white);
        color: var(--color-white);
        text-shadow: 
        0 0 15px #ffffff; /* Mayor intensidad */
    }
}

.cards-about {
    padding: 100px 0;
}

.card-item {
    width: 100%;    
    height: 800px;
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--color-black);
    border: solid 1.5px var(--color-white);
}

.card-item:hover,
.card-item:focus {
    box-shadow: 0 10px 10px 10px  rgba(255, 255, 255);
    transition: all 0.3s ease-in-out;
}

.card-item-black {
    width: 100%;    
    height: 800px;
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--color-white);
    border: solid 1.5px var(--color-black);
}

.card-item-black:hover,
.card-item-black:focus  {
    box-shadow: 0 10px 10px 10px  rgba(0, 0, 0);
    transition: all 0.3s ease-in-out;
}

/* Contact Me */

#shape-contact {
    background-image: url(/assets/img/shapes/Contact-shape.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 55vh;
}

/* Carousel */

.carousel {
    overflow: hidden;
    width: 400px;
    padding: 15px 10px;
}
  
.carousel img {
    width: 400px;
    height: 420px;
    object-fit: cover;
}

/* .press-carousel iframe {
    overflow: hidden;
    height: 100vh;
} */


/* Locations  */
.locations-header {
    margin: 150px 0;
    /* background-color: var(--color-white); */
}

/* International Printing and Design */
.color-yellow {
    color: var(--color-yellow);
}

.border-yellow {
    border-bottom: 1px solid;
    border-color: var(--color-yellow);
}

.hover-yellow {
    color: var(--color-white);
}

.hover-yellow:hover,
.hover-yellow:focus {
    color: var(--color-yellow);
    transition: color .3s ease-in-out;
}



/* Legends Ice Cream & Churros */
.hover-weight {
    font-weight: var(--lato-regular);
    color: var(--color-black);
}

.hover-weight:hover,
.hover-weight:focus {
    font-weight: var(--lato-bold);
    color: var(--color-black);
    transition: all .3s ease-in-out;
}

.color-gold {
    color: transparent !important;
    background: var(--color-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent !important;
}

.border-gold {
    border-bottom: 1px solid;
    border-color: var(--color-gold);
}

/* IMN */
.border-white {
    border-bottom: 1px solid var(--color-white);
}

.border-black {
    border-bottom: 1px solid var(--color-black);
}

/* Frozen Institute */
.color-blue-frozen {
    color: var(--color-blue-frozen) !important;
}

.color-blue-light-frozen {
    color: var(--color-blue-light-frozen) !important;
}

.border-blue-frozen {
    border-bottom: 1px solid var(--color-blue-frozen);
}

/* 360 World */
.hover-weight-white {
    font-weight: var(--lato-regular);
    color: var(--color-white);
}

.hover-weight-white:hover,
.hover-weight-white:focus {
    font-weight: var(--lato-bold);
    color: var(--color-white);
    transition: all .3s ease-in-out;
}

/* Icon */
.hover-icon {
    transform: scale(1);
    color: var(--color-white);
    transition: all .3s ease-in-out;
}

.hover-icon:hover,
.hover-icon:focus {
    transform: scale(1.25);
    color: var(--color-white);
}

.border-radius-locations {
    border-radius: 3.5em;
}

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

.image-locations-printing {
    width: 100%;
    height: 800px;
    min-height: 800px;
    background-image: url(/assets/img/companies/printing.webp);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.image-locations-legends {
    width: 100%;
    height: 800px;
    min-height: 800px;
    background-image: url(/assets/img/nature-2.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.image-locations-imn {
    width: 100%;
    height: 800px;
    min-height: 800px;
    background-image: url(/assets/img/nature-3.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.image-locations-frozen {
    width: 100%;
    height: 800px;
    min-height: 800px;
    background-image: url(/assets/img/nature-4.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.image-locations-world {
    width: 100%;
    height: 800px;
    min-height: 800px;
    background-image: url(/assets/img/nature-5.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.image-locations-menuarts {
    width: 100%;
    height: 800px;
    min-height: 800px;
    background-image: url(/assets/img/nature-6.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


#locations-companies {
    width: 100%;
    height: auto;
    /* background-color: crimson; */
}

.svg-blue-dark {
    fill: var(--color-dark);
}

.svg-blue-light {
    fill: var(--color-light);
}

.svg-blue-light:hover, .svg-blue-light:focus {
    fill: var(--color-dark);
    transition: all 0.2 ease-in;
}

.svg-white {
    fill: #ffffff;
}

/* .svg-white:hover, .svg-white:focus {
    fill: var(--color-secondary);
    transition: all 0.2 ease-in;
} */


/* Shop */
#visit-shop {
    width: 100%;
    height: auto;
    padding: 1.5em;
    background-color: indigo;
}

#shape-title {
    height: auto;
    border-radius: 0 0 25px 25px;
    box-shadow: inset 0 10px 25px rgba(0, 0, 0, 0.9);
}

#shape-title .shape-letter-title {
    font-size: 3.5em;
}

.shop-coming-soon {
    height: 150vh;
}

/* .shop-coming-soon .tape-effect-one {
    background-color: var(--color-light);
    text-transform: uppercase;
    position: absolute;
    top: 18%;
    transform: rotateY(-5px);
    left: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    z-index: 1;
} */

.shop-coming-soon .tape-effect-two {
    background-color: var(--color-light);
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    rotate: 2deg;
    padding: 0.2rem 0;
}

/* .shop-coming-soon .tape-effect-three {
    background-color: var(--color-light);
    text-transform: uppercase;
    position: absolute;
    top: 80%;
    transform: rotateY(-5px);
    left: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    z-index: 1;
} */

.shop-coming-soon .title-xxl {
    font-family: "Lato", sans-serif;
    font-weight: 800;
    font-size: 19rem;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 5rem !important;
}

.shop-coming-soon .title-xl {
    font-family: "Lato", sans-serif;
    font-weight: 800;
    font-size: 12rem;
    text-transform: uppercase;
    color: #000;
    position: absolute;
    display: flex;
}


.letter {
    position: relative;
}

.above {
    z-index: 3; /* Encima de la cinta */
}

.below {
    z-index: 1; /* Debajo de la cinta */
}

.shop-coming-soon .title-l {
    font-family: "Lato", sans-serif;
    font-weight: 800;
    font-size: 18rem;
    text-transform: uppercase;
    color: #000;
}

/* Call Section */
.call-action {
    position: relative; /* Necesario para que el pseudo-elemento se posicione correctamente */
    height: auto;
    overflow: hidden;
}

.call-action::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/img/Background-Martin.jpg');
    background-position: center center;
    background-size: cover;
    filter: blur(5px);
    z-index: -1;
    transform: scale(1.1);
}

/* Follow Martin Ortega */
#follow {
    width: 100%;
    height: auto;
}

#follow img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    clear: both;
}

/* Footer */
.footer {
    background-color: black;
}

/* Media Querys */

@media screen and (max-width: 1100px) {
    /* .font-xs {
        font-size: var(--font-paragraph);
    } */
}

@media screen and (max-width: 900px) {

    /* Locations Companies */
    .locations-header {
        margin: 50px 0;
        /* background-color: var(--color-white); */
    }

    .font-xxxl {
        font-size: var(--font-title);
    }

    .font-xxl {
        font-size: var(--font-title);
    }

    .font-xl {
        font-size: var(--font-title);
    }

    .font-title {
        font-size: var(--font-title);
    }

    .font-subtitle {
        font-size: var(--font-subtitle);
    }

    /* Visit Shop */
    #visit-shop .header-shop img {
        width: 600px;
        height: 620px;
        border-radius: 5px;
        object-fit: cover;
    }

    #shape-about {
        height: 50vh;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .call-action .background-martin {
        background-repeat: no-repeat;
        background-position: center right;
        flex-direction: column-reverse;
    }

    #shape-about h2 {
        font-size: 2.5em;
    }

    .card-item {
        width: 100%;
        height: auto;
    }

    .card-item-black {
        width: 100%;
        height: auto;
    }

    .image-locations {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }

    #follow .phone-martin {
        width: 100%;
        height: 375px;
        object-fit: cover;
    }

    .why-do-columns {
        display: flex;
        flex-direction: column;
    }

    .paragraph-locations {
        width: 100%;
    }

    /* Shop Coming Soon */
    .shop-coming-soon .title-xxl {
        font-size: 5rem;
    }

    .shop-coming-soon .title-xl {
        font-size: 5rem;
    }

    .shop-coming-soon .title-l {
        font-size: 5rem;
    }

    .shop-coming-soon .tape-effect-two {
        font-size: 0.2rem;
    }

    .background-attachment {
        padding: 100px 0;
        width: 100%;
        height: auto;
        background-image: url('/assets/img/Background-Martin.jpg');
        background-position: right center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .background-martin {
        background-image: url('/assets/img/Background-Martin.jpg');
        background-position: center right;
        
        img {
            visibility: hidden;
        }
    }

    .background-martin::before {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
    }
   
}

@media screen and (max-width: 700px) {

    /* Locations Companies */
    /* header .span-header {
        display: none;
    } */

    header nav img {
        height: 5vh !important;
    }

    /* Visit Shop */
    #visit-shop .header-shop img {
        width: 600px;
        height: 620px;
        border-radius: 5px;
        object-fit: cover;
    }

    #shape-about {
        height: 50vh;
        background-repeat: no-repeat;
        background-position: center center;
    }

    #shape-contact {
        height: 50vh;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .call-action .background-martin {
        background-repeat: no-repeat;
        background-position: center right;
        flex-direction: column-reverse;
    }

    #shape-about h2 {
        font-size: 2.5em;
    }

    #follow .phone-martin {
        width: 100%;
        height: 375px;
        object-fit: cover;
    }

    .why-do-columns {
        display: flex;
        flex-direction: column;
    }

    .paragraph-locations {
        width: 100%;
    }

    /* Shop Coming Soon */
    .shop-coming-soon .title-xxl {
        font-size: 5rem;
    }

    .shop-coming-soon .title-xl {
        font-size: 5rem;
    }

    .shop-coming-soon .title-l {
        font-size: 5rem;
    }

    .shop-coming-soon .tape-effect-two {
        font-size: 0.2rem;
    }

    .background-attachment {
        padding: 100px 0;
        width: 100%;
        height: auto;
        background-image: url('/assets/img/Background-Martin.jpg');
        background-position: right center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .background-martin {
        background-image: url('/assets/img/Background-Martin.jpg');
        background-position: center right;
    }

    .background-martin::before {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
    }
   

}

/* @media screen and (min-width: 900px) {
    #follow img {
        height: 300px;
    }
} */