/* TIPOGRAFÍA ANTON Y INTER*/

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/7\ Segment.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KeplerItalic';
    src: url('fonts/KeplerStd-BoldScnItDisp.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    list-style-type: none;
    scroll-behavior: smooth;
    position: relative;
}

/* Estilo personalizado para la barra de desplazamiento */
body::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de desplazamiento */
}

body::-webkit-scrollbar-track {
    background: transparent; /* Fondo del track */
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(182, 182, 182, 0.2); /* Color del pulgar (scrollbar) */
    border-radius: 10px; /* Bordes redondeados */
    border: 2px solid transparent; /* Espacio alrededor del pulgar */
}

/*
:::    ::: ::::::::::     :::     :::::::::  :::::::::: :::::::::  
:+:    :+: :+:          :+: :+:   :+:    :+: :+:        :+:    :+: 
+:+    +:+ +:+         +:+   +:+  +:+    +:+ +:+        +:+    +:+ 
+#++:++#++ +#++:++#   +#++:++#++: +#+    +:+ +#++:++#   +#++:++#:  
+#+    +#+ +#+        +#+     +#+ +#+    +#+ +#+        +#+    +#+ 
#+#    #+# #+#        #+#     #+# #+#    #+# #+#        #+#    #+# 
###    ### ########## ###     ### #########  ########## ###    ### 
*/

header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 2rem;
    background-image: linear-gradient(#1a1a1a, transparent);
    position: fixed;
    z-index: 4;
    font-size: 18px;
}

.icono{
    display: none;
    width:40px;
}

.icono, .icono-cerrar:hover{
    cursor: pointer;
}

.vaultsack{
    overflow: hidden;
    font-size: 30px;
    text-decoration: none;
    transition: all .2s ease;
    font-family:"Poppins";
    font-weight: 700;
    color: white;
    letter-spacing: -2px;
    width: 140px;
    margin-right: 43vh;
    padding-right: 20px;
    transition: 0.5s;
    cursor: pointer;
    }
    
.vaultsack:hover{
padding-right:-10px;    }

    .nav-list{
        justify-content: center;
        list-style-type: none;
        display: flex;
        gap: 2rem;
        padding-left: 43vh;
    }
    
    .nav-list li a{
        text-decoration: none;
        color: white;
        padding-bottom: 10px;
        transition: 0.2s ease-in-out;
    }
    
    .nav-list li a:hover{
        width: 100%;
        border-bottom: 2px solid white;
    }
    
    .nav-list-select{
    font-weight: 500;
    border-bottom: 2px solid white;
    padding-bottom: 10px;
}

    .icono-cerrar{
display: none;
        }    
    
    .abrir-menu, .cerrar-menu{
        display: none;
    }
    
    .boton-abrir:hover{
    cursor: pointer;
    }
    
    .boton-cerrar:hover{
        cursor: pointer;
    }


/*
::::::::::: ::::    ::: :::::::::  :::::::::: :::    ::: 
    :+:     :+:+:   :+: :+:    :+: :+:        :+:    :+: 
    +:+     :+:+:+  +:+ +:+    +:+ +:+         +:+  +:+  
    +#+     +#+ +:+ +#+ +#+    +:+ +#++:++#     +#++:+   
    +#+     +#+  +#+#+# +#+    +#+ +#+         +#+  +#+  
    #+#     #+#   #+#+# #+#    #+# #+#        #+#    #+# 
########### ###    #### #########  ########## ###    ### 
*/

.image-gallery {
    display: flex;
    width: 100%;
    height: 90vh; /* 100% de la altura de la ventana */
    background-color: #101010;
}

.image-container {
    flex: 1;
    overflow: hidden;
    transition: flex 1s ease;
    position: relative;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(50%); /* Oscurece la imagen */
    transition: transform 2s ease, filter 2s ease;
}

.image-text {
    position: absolute;
    width: 100%; /* Asegurarse de que el texto ocupe todo el ancho del contenedor */
    top:50%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 24px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    pointer-events: none; /* Para que el texto no interfiera con los eventos de hover */
    text-align: center; /* Centra el texto horizontalmente */
}

/* Texto en la parte inferior para pantallas grandes */
.image-container .image-text {
    bottom: 20px;
}

.image-button {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    bottom: 20px;
    left: 50%;
    bottom:20%;
    transform: translateX(-50%);
    padding: 16px;
    font-size: 16px;
    background-color: transparent; /* Fondo transparente */
    color: white;
    border: 2px solid white; /* Borde blanco */
    border-radius: 50px; /* Botón redondo */
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    text-decoration: none; /* Quita el subrayado */
    outline: none; /* Quita el borde azul */
}

.image-container:hover .image-button {
    opacity: 1;
}


.image-button:hover {
    background-color: white; /* Fondo blanco al pasar el ratón */
    color: black; /* Texto negro al pasar el ratón */
}

.image-container:hover {
    flex: 1.5; /* La imagen seleccionada se agranda */
}

.image-container:hover img {
    transform: scale(1); /* Se agranda un poco más */
    filter: brightness(100%); /* Devuelve el brillo original */
}

.image-container:not(:hover) {
    flex: 1; /* Las otras imágenes se encogen */
}

.image-container:not(:hover) img {
    transform: scale(1); /* Las otras imágenes se encogen un poco */
}

#afterhumanindex{
    font-family: Anton;
    font-size:80px;
    letter-spacing: -4px;
    line-height: 80px;
    text-shadow: none;
}

#logofantasma{
    height:auto;
max-width: 45vh;
filter: brightness(100%);
}

#sobremitexto{
    font-weight: 700;
    font-size:60px;
}

@media (max-width: 1250px) {
#afterhumanindex{
    font-size:90px;
}
}

@media (max-width: 1080px) {
#afterhumanindex{
font-size: 50px;
letter-spacing: -2px;
}
#sobremitexto{
font-size:40px;
}
}
/* Media query para pantallas más pequeñas */
@media (max-width: 820px) {
    .image-gallery {
    padding-top: 8vh;
    padding-bottom: 1vh;
        flex-direction: column;
        height: 130vh; /* Apilar las imágenes verticalmente */
    }

    .image-container {
        height: 33.33vh; /* Cada imagen ocupa un tercio de la altura de la ventana */
        margin: 10px;
        margin-left: 20px;
        margin-right: 20px;
        border: 2px solid white;
        border-radius: 10PX;
    }

    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center; /* Muestra la parte superior de la imagen */
        transform: scale(1); /* Reseteamos la escala para pantallas pequeñas */
        filter:brightness(70%) 
    }

    .image-text {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: auto; /* Resetea la posición inferior */
    }

    .image-container:hover {
        flex: 1; /* No agrandamos la imagen en pantallas pequeñas */
    }

    .image-container:hover img {
        transform: scale(1.05); /* Un pequeño efecto de agrandamiento */


    }

    .image-button{
        bottom:10%;
        height:50px;
        width:60%;
        font-size: 16px;
        opacity: 1;
    }

    #afterhumanindex{
        font-size: 80px;
        letter-spacing: -2px;
        bottom:0%
    }

    #logofantasma{
        width: 60%;
    }

    #sobremitexto{
        font-weight: 700;
        font-size: 40px;
        top:45%;
        bottom:50%;
    }
}

/*
    :::     :::::::::: ::::::::::: :::::::::: :::::::::                  :::::::::      :::     ::::    ::: ::::    ::: :::::::::: :::::::::  
  :+: :+:   :+:            :+:     :+:        :+:    :+:                 :+:    :+:   :+: :+:   :+:+:   :+: :+:+:   :+: :+:        :+:    :+: 
 +:+   +:+  +:+            +:+     +:+        +:+    +:+                 +:+    +:+  +:+   +:+  :+:+:+  +:+ :+:+:+  +:+ +:+        +:+    +:+ 
+#++:++#++: :#::+::#       +#+     +#++:++#   +#++:++#:   +#++:++#++:++  +#++:++#+  +#++:++#++: +#+ +:+ +#+ +#+ +:+ +#+ +#++:++#   +#++:++#:  
+#+     +#+ +#+            +#+     +#+        +#+    +#+                 +#+    +#+ +#+     +#+ +#+  +#+#+# +#+  +#+#+# +#+        +#+    +#+ 
#+#     #+# #+#            #+#     #+#        #+#    #+#                 #+#    #+# #+#     #+# #+#   #+#+# #+#   #+#+# #+#        #+#    #+# 
###     ### ###            ###     ########## ###    ###                 #########  ###     ### ###    #### ###    #### ########## ###    ### 
*/

.baner-after{
display: flex;
width: 100%;
max-height: 90vh;
background-image: url(data/Fondo\ After\ Human.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
height: calc(.700 * 80vw);
animation: fadeIn 1s forwards; /* 2 segundos de duración */
}

.baner-after0{
    display: flex;
    width: 100%;
    max-height: 90vh;
    position: absolute;
    background-image: url(data/Baner\ After\ Personajes.png);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    height: calc(.700 * 80vw);
    animation: fadeIn 2.5s forwards; /* 2 segundos de duración */
    }

/* ---------------------- TITULO Y ANIMACIÓN AFTER HUMAN -------------------------------*/


.baner-after1{
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: -8px;
    width: 100%;
    height: 1;
    color: white;
    font-family: Anton;
    font-size: 180px;
    animation: fadeIn 2.5s forwards; /* 2 segundos de duración */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ---------------------- MEDIDAS DEL BANER AFTER HUMAN -------------------------------*/


@media (MAX-WIDTH:1080PX){
.baner-after1{
    font-size:120px;
    letter-spacing: -4px;
line-height: 100px;
}

}


@media (MAX-WIDTH:820PX){
    .baner{
        display: flex;
    }

    .baner-after{
background-image: url(data/Portada\ After\ Human\ 6\ 9.jpg);
width: 100%;
height: 60vh;
background-position: center;
    }
    .baner-after1{
        display: flex;
        text-align: center;
        font-size: 90px;
        letter-spacing: -4px;
        align-items: end;
        margin-bottom: 20px;}

    .baner-after0{
        display: none;
        width: 100%;
        height: 500px;
        background-position: right;
        }

        .seccion0{
            display: flex;
        }

        .seccion0-1{
            display: none;
            width: 0%;
        }

        .seccion0-2{
            display: flex;
            width: 100%;
            margin-left: 10%;
            margin-right: 10%;
        }
}

@media (MAX-WIDTH:660PX){
    .baner-after1{
        font-size: 90px;
    }
}
    @media (MAX-WIDTH:500PX){
        .baner-after1{
            font-size: 90px;
        }
}

/*
::::::::::: ::::::::::: ::::::::::: :::    ::: :::         ::::::::                  :::::::::      :::      ::::::::  ::::::::::: ::::    :::     :::     
    :+:         :+:         :+:     :+:    :+: :+:        :+:    :+:                 :+:    :+:   :+: :+:   :+:    :+:     :+:     :+:+:   :+:   :+: :+:   
    +:+         +:+         +:+     +:+    +:+ +:+        +:+    +:+                 +:+    +:+  +:+   +:+  +:+            +:+     :+:+:+  +:+  +:+   +:+  
    +#+         +#+         +#+     +#+    +:+ +#+        +#+    +:+  +#++:++#++:++  +#++:++#+  +#++:++#++: :#:            +#+     +#+ +:+ +#+ +#++:++#++: 
    +#+         +#+         +#+     +#+    +#+ +#+        +#+    +#+                 +#+        +#+     +#+ +#+   +#+#     +#+     +#+  +#+#+# +#+     +#+ 
    #+#         #+#         #+#     #+#    #+# #+#        #+#    #+#                 #+#        #+#     #+# #+#    #+#     #+#     #+#   #+#+# #+#     #+# 
    ###     ###########     ###      ########  ##########  ########                  ###        ###     ###  ########  ########### ###    #### ###     ### 
*/

.seccion-valle{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 80%;
    height: 200px;
    background-color: #1c1c1c;
    color: white;
    font-weight: 700;
    font-size: 40px;
    justify-content: center;
    margin-left: 10%;
    margin-right: 10%;
}

/*
 ::::::::  ::::::::::: ::::    :::  ::::::::  :::::::::   ::::::::  :::::::::::  ::::::::  
:+:    :+:     :+:     :+:+:   :+: :+:    :+: :+:    :+: :+:    :+:     :+:     :+:    :+: 
+:+            +:+     :+:+:+  +:+ +:+    +:+ +:+    +:+ +:+            +:+     +:+        
+#++:++#++     +#+     +#+ +:+ +#+ +#+    +:+ +#++:++#+  +#++:++#++     +#+     +#++:++#++ 
       +#+     +#+     +#+  +#+#+# +#+    +#+ +#+               +#+     +#+            +#+ 
#+#    #+#     #+#     #+#   #+#+# #+#    #+# #+#        #+#    #+#     #+#     #+#    #+# 
 ########  ########### ###    ####  ########  ###         ########  ###########  ########  
*/


.seccion0{
    overflow: hidden; /* Para evitar que el texto visible antes de la animación */
    display: flex;
    color: white;
}

.seccion0-1{
    width: 48%;
    height: auto;
    text-align: end;
    font-size: 30px;
    margin-right: 2%;
}

.seccion0-2{
    width: 27%;
    height: auto;
    font-size: 16px;
    margin-left: 2%;
    margin-right: 24%;
    opacity: 0;
    transform: translateX(100%); /* Comienza fuera de la vista, a la derecha */
    transition: transform 1s ease, opacity 1s ease;
}

.seccion0-2.visible {
    transform: translateX(0); /* Se mueve a su posición original */
    opacity: 1;
}

@media (max-width:1200px) {
    .seccion0-2{
        width: 45%;
        margin-right: 10%;
    }
}

@media (max-width:820px) {
.seccion-valle{
    height: 120px;
    margin-top: 40px;
    font-size: 35px;
}

.seccion-fantasma{
    margin-top: 40px;
    font-size: 35px;

}

    .seccion0-1{
        display: none;
    }
        .seccion0-2{
            width: 100%;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-right: 10%;
            margin-left: 10%;
            margin-top: 40px;
            font-size: 14px;
    }
}

/*
::::    ::: :::    ::: :::::::::: :::     :::     :::                    :::::::::: :::::::::  
:+:+:   :+: :+:    :+: :+:        :+:     :+:   :+: :+:                  :+:        :+:    :+: 
:+:+:+  +:+ +:+    +:+ +:+        +:+     +:+  +:+   +:+                 +:+        +:+    +:+ 
+#+ +:+ +#+ +#+    +:+ +#++:++#   +#+     +:+ +#++:++#++:  +#++:++#++:++ +#++:++#   +#+    +:+ 
+#+  +#+#+# +#+    +#+ +#+         +#+   +#+  +#+     +#+                +#+        +#+    +#+ 
#+#   #+#+# #+#    #+# #+#          #+#+#+#   #+#     #+#                #+#        #+#    #+# 
###    ####  ########  ##########     ###     ###     ###                ########## #########  
*/

.seccion1{
    position: relative;
    height: auto;
    display: flex;
    width: 100%;
    height: 70vh;
    background-color: #1c1c1c;
}

.seccion1-1{
display: flex;
flex-direction: column;
width: 50%;
justify-content: center;
}

.seccion1-2{
    display:flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding-right: 24%;
    padding-top: 7rem;
    padding-bottom: 7rem;

}

.mockup-after{
position: absolute;
width: 100%;
padding-top: 5rem;
padding-bottom: 5rem;
justify-content: center;
padding-left: 10%;
opacity: 0;
transform: translateY(600px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

@media (max-width:820px) {
    .mockup-after{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

.mockup-after.visible {
    opacity: 1;
    transform: translateY(0);
    position: relative;
}

.titulo-edicion{
    font-weight: 600;
    color: white;
    font-size:  50px;
    opacity: 0;
    transform: translateY(600px);
    padding-bottom: 20px;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    position: relative;
}

.titulo-edicion.visible{
opacity: 1;
transform: translateY(0);
}

.paragraphs-edicion{
    font-size: 16px;
    padding-right: 0%;
    color: #f6f6f6;
    opacity: 0;
    font-weight: 400;
    transform: translateY(600px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.paragraphs-edicion.visible{
opacity: 1;
transform: translateY(0px);
position:relative;
}

.boton-after{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    width: 250px;
    padding: 16px;
    font-size: 16px;
    border: 2px white solid;
    transform: translateY(560px);
    border-radius: 50px;
    color: white;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition: all 0.5s;
}

.boton-after.visible{
    opacity: 1;
    transform: translateY(0px);
    position: relative;
}

.boton-after:hover{
    cursor: pointer;
background-color: white;
color: #1c1c1c;
border: 0px;
}

@media (max-width:1200px) {
    .seccion1-2{
        padding-right: 10%;
    }
}

/* MOCK UP 1 MÓVIL */

@media (max-width:820px){
.seccion1{
    display: block;
    height: 100%;
}

.seccion1-1{
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
min-height: 320px;
}

.mockup-after{
    padding-left: 0%;
padding-right: 0%;
align-items: center;    
padding-bottom: 1rem;
background-position: cover;
}

.seccion1-2{
    width: 100%;
    display: block;
    padding-left: 10%;
padding-right: 10%;
text-align: center;
font-size: 14px;
padding-top: 1rem;
padding-bottom: 2rem;
}

.titulo-edicion{
    font-size: 30px;
    letter-spacing: -2px;
}

.paragraphs-edicion{
    display: flex;
    text-align: justify;
    font-size: 14px;
}

.boton-after{
    display: flex;
margin-left: 20%;
    margin-right: 20%;
    width: 60%;
    flex-direction: column;
justify-items: center;
    }
}

/*
::::    ::::   ::::::::   ::::::::  :::    :::  :::    ::: :::::::::                   :::   
+:+:+: :+:+:+ :+:    :+: :+:    :+: :+:   :+:   :+:    :+: :+:    :+:                :+:+:   
+:+ +:+:+ +:+ +:+    +:+ +:+        +:+  +:+    +:+    +:+ +:+    +:+                  +:+   
+#+  +:+  +#+ +#+    +:+ +#+        +#++:++     +#+    +:+ +#++:++#+  +#++:++#++:++    +#+   
+#+       +#+ +#+    +#+ +#+        +#+  +#+    +#+    +#+ +#+                         +#+   
#+#       #+# #+#    #+# #+#    #+# #+#   #+#   #+#    #+# #+#                         #+#   
###       ###  ########   ########  ###    ###   ########  ###                       ####### 
*/


.seccion2{
    display: flex;
    width: 100%;
    height: auto;
}

.seccion2-1{
    display:flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 2rem;
    padding-right: 10%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    color: white;
    font-weight: 500;
    align-items: end;
    text-align: end;
    font-size: 30px;
    background-color: #4e626d;
}

.seccion2-2{
display: flex;
width: 50%;
height: auto;
background-image: url(data/Mockup\ Mapa\ a\ Color.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 1;
}

@media (max-width:820px) {
    .seccion2{
        display: block;
        width: 100%;
    }
    .seccion2-1{
        width: 100%;
        height:10vh;
    }
    .seccion2-2{
        width: 100%;
        height: 20vh;
        background-position: top center;

    }
}

/*
::::    ::::   ::::::::   ::::::::  :::    :::  :::    ::: :::::::::                  ::::::::  
+:+:+: :+:+:+ :+:    :+: :+:    :+: :+:   :+:   :+:    :+: :+:    :+:                :+:    :+: 
+:+ +:+:+ +:+ +:+    +:+ +:+        +:+  +:+    +:+    +:+ +:+    +:+                      +:+  
+#+  +:+  +#+ +#+    +:+ +#+        +#++:++     +#+    +:+ +#++:++#+  +#++:++#++:++      +#+    
+#+       +#+ +#+    +#+ +#+        +#+  +#+    +#+    +#+ +#+                         +#+      
#+#       #+# #+#    #+# #+#    #+# #+#   #+#   #+#    #+# #+#                        #+#       
###       ###  ########   ########  ###    ###   ########  ###                       ########## 
*/

.seccion3{
    display: flex;
    width: 100%;
    height: auto;
}

.seccion3-1{
    display:flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 2rem;
    padding-left: 10%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    color: white;
    font-weight: 500;
    align-items:start;
    text-align: start;
    font-size: 30px;
    background-color: #383838;
}

.seccion3-1movil{
    display:none;
}

.seccion3-2{
display: flex;
width: 50%;
height: auto;
background-image: url(data/After\ Mock\ Up\ Portada\ Definitiva.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height: 1;
}

@media (max-width:820px) {
    .seccion3{
        display: block;
        width: 100%;
    }
    .seccion3-2{
        width: 100%;
        height:25vh;
    }
    .seccion3-1movil{
        display:flex;
        height:300px;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 5vh;
        padding: 2rem;
        padding-left: 10%;
        padding-top: 7rem;
        padding-bottom: 7rem;
        color: white;
        font-weight: 500;
        align-items:start;
        text-align: start;
        font-size: 30px;
        background-color: #383838;
    }

    .seccion3-1{
        display: none;
    }
}

/*
::::    ::::   ::::::::   ::::::::  :::    :::  :::    ::: :::::::::                  ::::::::  
+:+:+: :+:+:+ :+:    :+: :+:    :+: :+:   :+:   :+:    :+: :+:    :+:                :+:    :+: 
+:+ +:+:+ +:+ +:+    +:+ +:+        +:+  +:+    +:+    +:+ +:+    +:+                       +:+ 
+#+  +:+  +#+ +#+    +:+ +#+        +#++:++     +#+    +:+ +#++:++#+  +#++:++#++:++      +#++:  
+#+       +#+ +#+    +#+ +#+        +#+  +#+    +#+    +#+ +#+                              +#+ 
#+#       #+# #+#    #+# #+#    #+# #+#   #+#   #+#    #+# #+#                       #+#    #+# 
###       ###  ########   ########  ###    ###   ########  ###                        ########  
*/

.seccion4{
    display: flex;
    width: 100%;
    height: auto;
}

.seccion4-1{
    display:flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 2rem;
    padding-right: 10%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    color: #1C1C1C;
    font-weight: 500;
    align-items: end;
    text-align: end;
    font-size: 30px;
    background-color: #e2e2e1;
}

.seccion4-2{
display: flex;
width: 50%;
height: auto;
background-image: url(data/AFTER\ MOCK\ UP\ INTERIOR.jpg);
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
height: 1;
}

@media (max-width:820px) {
    .seccion4{
        display: block;
        width: 100%;
        height: auto;
        background-color: #c2c2c2;
    }
    .seccion4-1{
        position: absolute;
        width: 100%;
        height:5vh;
        background-color: transparent;
        z-index: 10;
    }
    .seccion4-2{
        width: 100%;
        height: 50vh;
        background-position: top center;
        padding-top: 20vh;

    }
}

/*
    :::     :::::::::: ::::::::::: :::::::::: :::::::::                   ::::::::  :::::::::  ::::::::::: ::::    ::: 
  :+: :+:   :+:            :+:     :+:        :+:    :+:                 :+:    :+: :+:    :+:     :+:     :+:+:   :+: 
 +:+   +:+  +:+            +:+     +:+        +:+    +:+                 +:+    +:+ +:+    +:+     +:+     :+:+:+  +:+ 
+#++:++#++: :#::+::#       +#+     +#++:++#   +#++:++#:   +#++:++#++:++  +#+    +:+ +#++:++#+      +#+     +#+ +:+ +#+ 
+#+     +#+ +#+            +#+     +#+        +#+    +#+                 +#+    +#+ +#+            +#+     +#+  +#+#+# 
#+#     #+# #+#            #+#     #+#        #+#    #+#                 #+#    #+# #+#            #+#     #+#   #+#+# 
###     ### ###            ###     ########## ###    ###                  ########  ###        ########### ###    #### 
*/

.opiniones-container {
    display: flex;
    justify-content: space-around; /* Espacio entre los cuadros */
    min-height:35vh;
    margin-top: 2px;
    padding-right: 20%;
    padding-left: 20%;
}

.opinion-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:40%;
    margin: 20px;
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(100px); /* Desplazado hacia abajo */
    transition: opacity 1s ease, transform 1s ease; /* Transición suave */
}

.variant2{
    padding-top: 30px;
}

.opinion-wrapper.visible {
    opacity: 1; /* Aparece gradualmente */
    transform: translateY(0); /* Se mueve a su posición original */
}

.opinion {
    background-color: #323232;
    color: #f6f6f6;
    text-align: left;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid white;
    font-size:20px;
    text-align:justify;
}

.opinion-author {
    font-size: 14px;
    color: #f6f6f6;
    text-align: center;
    margin-top: 10px; /* Espacio entre la opinión y el autor */
}

.titulo{
margin-left: 52%;
color: white;
font-size: 50px;
font-weight: 700;
letter-spacing: -1px;
margin-top: 100px;
}

@media (max-width:1400px) {
    .opinion-container{
        padding-right: 0%;
        padding-left: 0%;
    }
    .opinion-wrapper{
        width: 100%;
    }
}

@media (max-width: 1400px) {
    .opiniones-container {
        flex-direction: column;
        align-items: center;
        margin-top: 5vh;
        padding-left: 12%;
        padding-right: 12%;
    }

    .opinion-wrapper{
        width: 100%;
        margin: 10PX;
        margin-bottom: 20PX;
    }

    .opinion {
        width: 100%;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .variant1{
        padding-left: 60px;
    }

    .variant2{
        padding-right: 60px;
        padding-top: 0px;
    }

    .titulo{
        font-size: 35px;
    margin-left: 0%;
    text-align: center;
    margin-top: 30px;
    }

    .opinion-author{
        margin-top: 5px;
        font-size: 12px;
    }
}

@keyframes slideUp {
    to {
        opacity: 1; /* Aparece gradualmente */
        transform: translateY(0); /* Se mueve a su posición original */
    }
}

/*
:::::::::  :::::::::: :::::::::   ::::::::                    :::     :::::::::: ::::::::::: :::::::::: :::::::::  
:+:    :+: :+:        :+:    :+: :+:    :+:                 :+: :+:   :+:            :+:     :+:        :+:    :+: 
+:+    +:+ +:+        +:+    +:+ +:+                       +:+   +:+  +:+            +:+     +:+        +:+    +:+ 
+#++:++#+  +#++:++#   +#++:++#:  +#++:++#++ +#++:++#++:++ +#++:++#++: :#::+::#       +#+     +#++:++#   +#++:++#:  
+#+        +#+        +#+    +#+        +#+               +#+     +#+ +#+            +#+     +#+        +#+    +#+ 
#+#        #+#        #+#    #+# #+#    #+#               #+#     #+# #+#            #+#     #+#        #+#    #+# 
###        ########## ###    ###  ########                ###     ### ###            ###     ########## ###    ### 
*/

.gallery-container {
    display: flex;
    height: 600px;
    align-items: center;
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color:#383838;
}

.arrow {
    font-size: 4em;
    cursor: pointer;
    user-select: none;
    z-index: 3;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
color:white;
}

.left-arrow {
    left: 10%;
}


.right-arrow {
    right: 10%;
}

.gallery {
    display: flex;
    transition: transform 0.5s ease;
    justify-content: center;
    align-items: center;
    position: relative;
}

.gallery-item {
    width:320px;
    flex: 0 0 auto;
    transition: transform 0.5s ease, opacity 0.5s ease;
    margin: 0 10px;
    opacity: 0.5;
    transform: scale(0.7);
}

.gallery-item.sides {
    filter: grayscale(100%);
    transition: filter 0.3s;
}
.gallery-item.center {
    filter: none;
    transition: filter 0.3s;
}

.center {
    transform: scale(0.9);
    opacity: 1;
}

@media (max-width:820px) {
    .gallery-container {
        display: flex;
        height: 320px;

    }
    .gallery-item {
        width:200px;
        flex: 0 0 auto;
        transition: transform 0.5s ease, opacity 0.5s ease;
        margin: 0 10px;
        opacity: 0.5;
        transform: scale(0.7);
    }   

    .center {
        transform: scale(0.8);
        opacity: 1;
    }
}

/*
:::::::::  :::::::::: :::::::::   ::::::::                ::::::::::: ::::    ::: ::::::::::  ::::::::  
:+:    :+: :+:        :+:    :+: :+:    :+:                   :+:     :+:+:   :+: :+:        :+:    :+: 
+:+    +:+ +:+        +:+    +:+ +:+                          +:+     :+:+:+  +:+ +:+        +:+    +:+ 
+#++:++#+  +#++:++#   +#++:++#:  +#++:++#++ +#++:++#++:++     +#+     +#+ +:+ +#+ :#::+::#   +#+    +:+ 
+#+        +#+        +#+    +#+        +#+                   +#+     +#+  +#+#+# +#+        +#+    +#+ 
#+#        #+#        #+#    #+# #+#    #+#                   #+#     #+#   #+#+# #+#        #+#    #+# 
###        ########## ###    ###  ########                ########### ###    #### ###         ########  
*/


.image-description {
    margin-top: 20px;
    font-size: 40px;
    text-align: end;
    color: white;
    padding-right: 5%;
}

.image.subtitle{
    margin-top: 20px;
    font-size: 30px;
    text-align: center;
    color: white;
    padding-left: 5%;
}

.seccion5{
    padding-top: 2rem;
    display: flex;
    color: white;
    width: 100%;
    margin-bottom: 15vh;
}

.seccion5-1{
    width: 50%;
    height: auto;
    text-align: end;
    font-size: 30px;
    margin-right: 2%;
}

.seccion5-2{
    width: 28%;
    height: auto;
    font-size: 16px;
    text-align: justify;
    color: #f6f6f6;
    margin-left: 2%;
    margin-right: 24%;
}

@media (max-width:820px) {
    .seccion5{
        display: block;
    }

    .seccion5-1{
        width: 100%;
padding-bottom: 2rem;
    }

    .image-description{
        text-align: center;
        padding-right: 0;
        font-size: 30px;
    }

    .seccion5-2{
        display: flex;
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        text-align: justify;
        font-size: 14px;
    }
}

/*
 ::::::::   ::::::::  ::::    ::::  :::::::::  :::::::::      :::     
:+:    :+: :+:    :+: +:+:+: :+:+:+ :+:    :+: :+:    :+:   :+: :+:   
+:+        +:+    +:+ +:+ +:+:+ +:+ +:+    +:+ +:+    +:+  +:+   +:+  
+#+        +#+    +:+ +#+  +:+  +#+ +#++:++#+  +#++:++#:  +#++:++#++: 
+#+        +#+    +#+ +#+       +#+ +#+        +#+    +#+ +#+     +#+ 
#+#    #+# #+#    #+# #+#       #+# #+#        #+#    #+# #+#     #+# 
 ########   ########  ###       ### ###        ###    ### ###     ### 
*/


.image-containerrr{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.image-container2 {
    display: none;
    position: relative;
    width: 100%;
    overflow: hidden;
}


.full-width-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ajusta la imagen para cubrir todo el contenedor */
    display: block;
}

.overlay-text {
    position: absolute;
    bottom: 0; /* Ajusta este valor según sea necesario */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Distribuye los cuadros de texto equitativamente */
}

.text-box {
    color: white;
    font-size: 20px;
    font-weight: 400;
    text-align: end;
    padding: 20px;
    box-sizing: border-box; /* Incluye padding en el ancho total */
    width: 50%; /* Cada cuadro ocupa la mitad del ancho */
    margin-bottom: 20px;
}

.comprar-after{
border: 2px solid #f6f6f6;
padding:16px;
padding-left:80px;
padding-right:80px;
border-radius: 50px;
transition: all 0.5s;
color: white;
text-decoration: none;
}

.comprar-after:hover{
    cursor: pointer;
border: 0px;
background-color: white;
color: #1c1c1c;
}

.aviso-after{
width: 100%;
text-align: center;
color: #c0c0c0;
padding-top: 10px;
}

@media (max-width:820px) {
    .image-containerrr{
display: none;    
}

.image-container2{
display: block;}

.text-box {
    color: white;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    padding: 20px;
    box-sizing: border-box; /* Incluye padding en el ancho total */
    width: 100%; /* Cada cuadro ocupa la mitad del ancho */
    margin-bottom: 20px;
}

.aviso-after{
width: 80%;    
font-size: 10px;
margin-left: 10%;
margin-right: 10%;
    }
}

/*
:::::::::::     :::     :::::::::  :::            :::      ::::::::  
    :+:       :+: :+:   :+:    :+: :+:          :+: :+:   :+:    :+: 
    +:+      +:+   +:+  +:+    +:+ +:+         +:+   +:+  +:+        
    +#+     +#++:++#++: +#++:++#+  +#+        +#++:++#++: +#++:++#++ 
    +#+     +#+     +#+ +#+    +#+ +#+        +#+     +#+        +#+ 
    #+#     #+#     #+# #+#    #+# #+#        #+#     #+# #+#    #+# 
    ###     ###     ### #########  ########## ###     ###  ########  
*/

.tabla-div{
display: flex;
width: 100%;
justify-content: center;
margin-top: 2rem;
}

.tabla-after{
margin-top: 50px;
margin-bottom: 50px;
width: 50%;
text-align: center;
}

tr{
    width: 100%;
}
td{
    border: 2px solid #1c1c1c;
    background-color: #2d2d2d;
    height: 60px;
    color: #f6f6f6;
}

.tabla-comprar{
    border-radius: 50px;
    border: 2px solid white;
    background-color: transparent;
    transition: 0.5s all;
    color: white;
    text-decoration: none;
}

.tabla-comprar:hover{
    background-color: white;
    border: none;
    color: #1C1C1C;
    cursor:pointer
}

.texto-tabla-comprar{
    color: #f6f6f6;
}

.texto-tabla-comprar:hover{
    color: #1C1C1C;
}

/* Asegura que el enlace ocupa todo el td */
.tabla-comprar {
    padding: 0;
}

.tabla-comprar .texto-tabla-comprar {
    display: block;
    width: 100%;
    height: 100%;
    color: #f6f6f6;
    text-align: center;
    padding: 18px 0;
    transition: background 0.2s, color 0.2s;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    background: transparent;
    box-sizing: border-box;
}

/* Cambia el color de fondo y texto al hacer hover en el td o el a */
.tabla-comprar:hover,
.tabla-comprar:hover .texto-tabla-comprar,
.tabla-comprar .texto-tabla-comprar:hover {
    background: #fff !important;
    color: #1c1c1c !important;
    transition: background 0.2s, color 0.2s;
    border: none;
}

@media (max-width:820px) {
    .tabla-after{
        width:80%;
        font-size: 14px;
    }

td{
height: 50px;
}

    .image-container-movil{
        display: none;
        }
}



/*
::::::::::     :::     ::::    ::: :::::::::::               :::::::::      :::     ::::    ::: ::::    ::: :::::::::: :::::::::  
:+:          :+: :+:   :+:+:   :+:     :+:                   :+:    :+:   :+: :+:   :+:+:   :+: :+:+:   :+: :+:        :+:    :+: 
+:+         +:+   +:+  :+:+:+  +:+     +:+                   +:+    +:+  +:+   +:+  :+:+:+  +:+ :+:+:+  +:+ +:+        +:+    +:+ 
:#::+::#   +#++:++#++: +#+ +:+ +#+     +#+     +#++:++#++:++ +#++:++#+  +#++:++#++: +#+ +:+ +#+ +#+ +:+ +#+ +#++:++#   +#++:++#:  
+#+        +#+     +#+ +#+  +#+#+#     +#+                   +#+    +#+ +#+     +#+ +#+  +#+#+# +#+  +#+#+# +#+        +#+    +#+ 
#+#        #+#     #+# #+#   #+#+#     #+#                   #+#    #+# #+#     #+# #+#   #+#+# #+#   #+#+# #+#        #+#    #+# 
###        ###     ### ###    ####     ###                   #########  ###     ### ###    #### ###    #### ########## ###    ### 
*/

.cabeza-fantasma{
    position: relative;
    width:100%;
    height: calc(.700 * 80vw); /* Añade esta línea */
    max-height: 90vh;
}

.fondo-fantasma{
    position: absolute;
    background-size: cover;
    background-image: url(data/fondo\ .jpg);
    width: 100%;
    height: calc(.700 * 80vw); /* Añade esta línea */
    filter: brightness(60%);
    animation: fadeIn 2.5s forwards; /* 2 segundos de duración */
    max-height: 90vh;
}

.coches-fantasma{
    position: absolute;
    background-image: url(data/Coches.png);
    width: 100%;
    height: calc(.700 * 80vw); /* Añade esta línea */
    background-size: cover;
    filter: brightness(60%);
    animation: fadeIn 2.5s forwards; /* 2 segundos de duración */
    max-height: 90vh;
}

.personajes-fantasma{
    position: absolute;
    background-image: url(data/PersonajesFantasma.png);
    width: 100%;
    height: calc(.700 * 80vw); /* Añade esta línea */
    background-size: cover;
    filter: brightness(60%);
    animation: fadeIn 3.5s forwards; /* 2 segundos de duración */
    max-height: 90vh;
}

.cabeza-fantasma1{
    display: flex;
    width: 100%;
        height: calc(.700 * 80vw); /* Igual que After Human */
    justify-content: center;
}

.imagen-fantasma{
display: none;
    height: calc(.700 * 80vw); /* Igual que After Human */
margin-top: 5vh;
opacity: 1;
position:absolute;
}

.cabeza-fantasma-logo{
    display: flex;
    justify-content: center;
    align-items: center;      /* Centra vertical y horizontalmente */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: contain;
    animation: fadeIn 2s forwards;
    z-index: 2;
}

.cabeza-fantasma-logo-movil{
    display: none;
}

.logo-fantasma{
    width: 50vw;              /* Ajusta el tamaño según lo que necesites */
    max-width: 500px;
    min-width: 200px;
    height: auto;
    padding-bottom: 0;        /* Elimina el padding que descentraba */
    margin: 0 auto;
    display: block;
}

@media (max-width:820px) {
.cabeza-fantasma{
    height: 60vh;
    background-image: url(data/El\ Fantasma\ Cover.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    overflow: hidden;
    filter: brightness(90%);
}

.personajes-fantasma{
    display: none;
}

.coches-fantasma{
    display: none;
}

.fondo-fantasma{
    display: none;
}

.cabeza-fantasma1{
display: none;}

.logo-fantasma{
visibility: visible;
display: flex;
width: 100%;
padding-bottom: 40px;
}

.cabeza-fantasma-logo-movil{
    display: flex;
    width: 100%;
    align-items: end;
    height: 60vh;
    padding: 40px;
    padding-bottom: 0px;
}
}
/*
::::::::::     :::     ::::    ::: :::::::::::                ::::::::  ::::::::::: ::::    :::  ::::::::  :::::::::   ::::::::  :::::::::::  ::::::::  
:+:          :+: :+:   :+:+:   :+:     :+:                   :+:    :+:     :+:     :+:+:   :+: :+:    :+: :+:    :+: :+:    :+:     :+:     :+:    :+: 
+:+         +:+   +:+  :+:+:+  +:+     +:+                   +:+            +:+     :+:+:+  +:+ +:+    +:+ +:+    +:+ +:+            +:+     +:+        
:#::+::#   +#++:++#++: +#+ +:+ +#+     +#+     +#++:++#++:++ +#++:++#++     +#+     +#+ +:+ +#+ +#+    +:+ +#++:++#+  +#++:++#++     +#+     +#++:++#++ 
+#+        +#+     +#+ +#+  +#+#+#     +#+                          +#+     +#+     +#+  +#+#+# +#+    +#+ +#+               +#+     +#+            +#+ 
#+#        #+#     #+# #+#   #+#+#     #+#                   #+#    #+#     #+#     #+#   #+#+# #+#    #+# #+#        #+#    #+#     #+#     #+#    #+# 
###        ###     ### ###    ####     ###                    ########  ########### ###    ####  ########  ###         ########  ###########  ########  
*/

.fantasma-sinopsis{
display: flex;
    width:100%;
    height:40vh;
    color: white;
}

.titular-sinopsis{
    width: 80%;
    height: 200px;
    background-color: #1c1c1c;
    color: white;
    font-weight: 700;
    font-size: 40px;
    margin-left: 10%;
    margin-right: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0; /* igual que After Human */
    padding: 0;    /* igual que After Human */
}

.titulo-sinopsis-fant{
display: flex;
width:50%;
height:40vh;
justify-content: end;
font-size: 30px;
padding-right: 5rem;
letter-spacing: -1px;
}

.desc-sinopsis-fant{
    display: flex;
    width:50%;
    height: 40vh;
    padding-right: 20%;
    text-align: justify;
}

@media (max-width:1200px) {
    .desc-sinopsis-fant{
        padding-right: 10%;
    }
}

@media (max-width:820px) {

.fantasma-sinopsis{
    display: block;
    height: auto;
}

    .titular-sinopsis{
        height: auto;
        margin: 20px;
        font-size: 35px;
        padding-left: 5px;
        padding-right: 5px;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        word-break: break-word;
    }


    .titulo-sinopsis-fant{
display: none;    }

    .desc-sinopsis-fant{
        width: 100%;
        height: auto;
        padding-right: 10%;
        padding-left: 10%;
    }
}

/* ---------------------- SECCIÓN NOVEDAD -------------------------------*/

.novedades-fantasma{
display: flex;
width: 100%;
height: auto;
}

.novedades-fantasma-mockup{
display: flex;
width: 50%;
justify-content: end;
background-image: url(data/Mock\ Up\ 6x9\ Fantasma.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}

.novedades-fantasma-texto{
width: 50%;
color: white;
text-align: justify;
align-self: center;
padding-right: 20%;
}

.titulo-nueva-historia{
    padding-right: 20%;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -3px;
}

.desc-novedades-fant{
    padding-right: 38%;
}

@media (max-width:820px){
.novedades-fantasma{
display: block;
width: 100%;
}

    .novedades-fantasma-mockup{
        display: block;
        width: 100%;
        height: 40vh;
    }

    .novedades-fantasma-texto{
        display: block;
        width: 100%;
        min-height:40vh;
        justify-content: center;
        padding-right: 10%;
        padding-left: 10%;
    
    }
}

/*
::::    ::::   ::::::::   ::::::::  :::    :::  :::    ::: :::::::::                   :::   
+:+:+: :+:+:+ :+:    :+: :+:    :+: :+:   :+:   :+:    :+: :+:    :+:                :+:+:   
+:+ +:+:+ +:+ +:+    +:+ +:+        +:+  +:+    +:+    +:+ +:+    +:+                  +:+   
+#+  +:+  +#+ +#+    +:+ +#+        +#++:++     +#+    +:+ +#++:++#+   +#++:++#++:++   +#+   
+#+       +#+ +#+    +#+ +#+        +#+  +#+    +#+    +#+ +#+                         +#+   
#+#       #+# #+#    #+# #+#    #+# #+#   #+#   #+#    #+# #+#                         #+#   
###       ###  ########   ########  ###    ###   ########  ###                       ####### 
*/


.mock-up-fant1{
    display: flex;
    width:100%;
    height: auto;   /* Igual que After Human, ajusta el .30 según el diseño */
    min-height: 220px;          /* Opcional: para que no quede demasiado pequeño en móviles */
    background-color: #3c68af;
}

.mock-up-fant1-texto{
    display:flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 2rem;
    padding-right: 10%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    color: white;
    font-weight: 500;
    align-items: end;
    text-align: end;
    font-size: 30px;
    background-color: transparent;
}

.mock-up-fant1-imagen{
display: flex;
width: 50%;
height: auto;
background-image: url(data/Free_Book_Mockup_7.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 1;
}

@media (max-width:820px) {
    .mock-up-fant1{
        display: block;
        width: 100%;
    }
    .mock-up-fant1-texto{
        width: 100%;
        height:10vh;
        background-color: transparent;
    }
    .mock-up-fant1-imagen{
        width: 100%;
        height: 20vh;
        background-position: top center;
    }
}

/*
::::    ::::   ::::::::   ::::::::  :::    :::  :::    ::: :::::::::                  ::::::::  
+:+:+: :+:+:+ :+:    :+: :+:    :+: :+:   :+:   :+:    :+: :+:    :+:                :+:    :+: 
+:+ +:+:+ +:+ +:+    +:+ +:+        +:+  +:+    +:+    +:+ +:+    +:+                      +:+  
+#+  +:+  +#+ +#+    +:+ +#+        +#++:++     +#+    +:+ +#++:++#+   +#++:++#++:++     +#+    
+#+       +#+ +#+    +#+ +#+        +#+  +#+    +#+    +#+ +#+                         +#+      
#+#       #+# #+#    #+# #+#    #+# #+#   #+#   #+#    #+# #+#                        #+#       
###       ###  ########   ########  ###    ###   ########  ###                       ########## 
*/

.mock-up-fant2{
    display: flex;
    width:100%;
    height: auto;   /* Igual que After Human, ajusta el .30 según el diseño */
    min-height: 220px;          /* Opcional: para que no quede demasiado pequeño en móviles */
    background-color:#a3a5a8;
    color: white;
}

.mock-up-fant2-texto{
    display:flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 2rem;
    padding-left: 10%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    color: white;
    font-weight: 500;
    align-items: start;
    text-align: start;
    font-size: 30px;
    background-color: transparent;
}

.mock-up-fant2-texto-movil{
    display: none;
}

.mock-up-fant2-imagen{
display: flex;
width: 50%;
height: auto;
background-image: url(data/Free_Book_Mockup_3.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 1;
}

@media (max-width:820px) {
    .mock-up-fant2{
        display: block;
        width: 100%;
    }
    .mock-up-fant2-imagen{
        width: 100%;
        height:25vh;
        background-position: top center;
    }
    .mock-up-fant2-texto-movil{
        display:flex;
        height:300px;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 10vh;
        padding: 2rem;
        padding-left: 10%;
        padding-top: 7rem;
        padding-bottom: 7rem;
        color: white;
        font-weight: 500;
        align-items:start;
        text-align: start;
        font-size: 30px;
    }

    .mock-up-fant2-texto{
        display: none;
    }
}


/*
::::    ::::   ::::::::   ::::::::  :::    :::  :::    ::: :::::::::                  ::::::::  
+:+:+: :+:+:+ :+:    :+: :+:    :+: :+:   :+:   :+:    :+: :+:    :+:                :+:    :+: 
+:+ +:+:+ +:+ +:+    +:+ +:+        +:+  +:+    +:+    +:+ +:+    +:+                       +:+ 
+#+  +:+  +#+ +#+    +:+ +#+        +#++:++     +#+    +:+ +#++:++#+   +#++:++#++:++     +#++:  
+#+       +#+ +#+    +#+ +#+        +#+  +#+    +#+    +#+ +#+                              +#+ 
#+#       #+# #+#    #+# #+#    #+# #+#   #+#   #+#    #+# #+#                       #+#    #+# 
###       ###  ########   ########  ###    ###   ########  ###                        ########  
*/


.mock-up-fant3{
    display: flex;
    width:100%;
    height:auto;
    min-height: 220px;          /* Opcional: para que no quede demasiado pequeño en móviles */
    background-color:#4f3c79;
    color: white;
}

.mock-up-fant3-texto{
    display:flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 2rem;
    padding-right: 10%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    color: white;
    font-weight: 500;
    align-items: end;
    text-align: end;
    font-size: 30px;
    background-color: transparent;
}

.mock-up-fant3-imagen{
display: flex;
width: 50%;
height: auto;
background-image: url(data/Free_Book_Mockup_1.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 1;
}


@media (max-width:820px) {
    .mock-up-fant3{
        display: block;
        width: 100%;
        height: auto;
        background-color: #4f3c79;
    }
    .mock-up-fant3-texto{
        width: 100%;
        height: 10vh;
        background-color: transparent;
    }
    .mock-up-fant3-imagen{
        width: 100%;
        height:25vh;
        background-position: top center;
    }
}

/* ---------------------- PROXÍMO ANUNCIO -------------------------------*/


.seccion1-fant{
    position: relative;
    height: auto;
    display: flex;
    width: 100%;
    height: 800px;
    background-color: #2d233d;
}

.mockup-fantasma{
    position: absolute;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: justify;
    justify-content: center;
    padding-left: 5%;
    opacity: 1;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .mockup-after.visible {
        opacity: 1;
        transform: translateY(0);
        position: relative;
    }

@media (max-width:820px){
    .seccion1-fant{
        display: block;
        height: 100%;
    }
}

/*
::::::::::     :::     ::::    ::: :::::::::::               :::::::::  :::::::::: :::::::::   ::::::::   ::::::::  ::::    :::     :::     ::::::::::: ::::::::::  ::::::::  
:+:          :+: :+:   :+:+:   :+:     :+:                   :+:    :+: :+:        :+:    :+: :+:    :+: :+:    :+: :+:+:   :+:   :+: :+:       :+:     :+:        :+:    :+: 
+:+         +:+   +:+  :+:+:+  +:+     +:+                   +:+    +:+ +:+        +:+    +:+ +:+        +:+    +:+ :+:+:+  +:+  +:+   +:+      +:+     +:+        +:+        
:#::+::#   +#++:++#++: +#+ +:+ +#+     +#+     +#++:++#++:++ +#++:++#+  +#++:++#   +#++:++#:  +#++:++#++ +#+    +:+ +#+ +:+ +#+ +#++:++#++:     +#+     +#++:++#   +#++:++#++ 
+#+        +#+     +#+ +#+  +#+#+#     +#+                   +#+        +#+        +#+    +#+        +#+ +#+    +#+ +#+  +#+#+# +#+     +#+     +#+     +#+               +#+ 
#+#        #+#     #+# #+#   #+#+#     #+#                   #+#        #+#        #+#    #+# #+#    #+# #+#    #+# #+#   #+#+# #+#     #+# #+# #+#     #+#        #+#    #+# 
###        ###     ### ###    ####     ###                   ###        ########## ###    ###  ########   ########  ###    #### ###     ###  #####      ##########  ########  
*/


.character-gallery-fant-row {
    width: 100vw;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0 auto 60px auto;
    min-height: 60vh;
    background-image: url(data/fondo\ .jpg);
    background-size: cover;
    margin-bottom:40px;
}

.character-gallery-fant-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(data/fondo\ .jpg);
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: brightness(40%);
    pointer-events: none;
}

/* Asegúrate de que el contenido esté por encima */
.character-gallery-fant-row > * {
    position: relative;
    z-index: 1;
}

.gallery-container-fant {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 60vh;
    z-index: 1;
    padding-left: 0;      /* Quita el padding si lo hay */
}

.character-slide-fant {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start; /* Alinea a la izquierda */
    display: flex;               /* Añade display flex */
    margin-left: -60px;          /* Mueve todo el slide a la izquierda */
}

.character-fant {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(.77,0,.18,1), opacity 0.5s;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    /* Por defecto, fuera de pantalla a la derecha */
    transform: translateX(100%);
}
.character-fant.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    transform: translateX(0);
}

.character-fant.prev {
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
    transform: translateX(-100%);
}

.character-fant.next {
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
    transform: translateX(100%);
}

.character-background-fant-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.character-background-fant {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 20%;
    height: 80%;
    transform: translate(-60%, -50%);
    z-index: 0; /* Detrás de la imagen */
    transition: transform 0.4s ease-in-out;
    opacity: 0.8; /* Leve transparencia */
}

.character-image-fant {
    width: auto;
    height: 100%;           /* Ajusta este valor según el diseño, por ejemplo 80% o 90% */
    max-height: 90vh;      /* Nunca más alto que la ventana */
    max-width: 100%;
    object-fit: contain;   /* Asegura que la imagen no se recorte y se vea entera */
    border-radius: 10px;
    z-index: 1;
    background: transparent;
    margin: 0 auto;
    display: block;
    right: 10%;
}
.arrow-fant {
    background-color: transparent;
    color: #fff;
    border: none;
    font-size: 40px;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s;
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.left-arrow-fant {
    left: 50px;
}

.right-arrow-fant {
    right: 50px;
}

.arrow-fant:hover {
    background-color: #333;
}

.character-info-fixed-fant {
    position: absolute;
    width: 380px;
    top: 40%;
    left: auto;
    right: 30px;
    max-width: 90vw;
    min-width: 220px;
    background: rgba(23,23,23,0.97);
    color: #fff;
    padding: 24px 32px;
    text-align: left;
    box-shadow: 0 2px 12px #0004;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none; /* No interfiere con las flechas ni la animación */
    transform: translate(-50%);
}

.character-info-fixed-fant h3 {
    font-size: 30px;
    margin-bottom: 8px;
}

.character-info-fixed-fant-mobile {
    display: none;
    width: 85vw;
    max-width: 85vw;
    margin: 10px auto 0 auto;
    background: rgba(23,23,23,0.97);
    color: #fff;
    padding: 16px 8px;
    font-size: 16px;
    box-shadow: 0 2px 12px #0004;
    min-height: 100px;
    text-align: center;
    position: static; /* Asegúrate de que NO sea absolute ni fixed */
}

@media (max-width: 1200px) {
    .character-info-fixed-fant {
        width: 300px;
        right: 20px;
    }
    .character-info-fixed-fant h3 {
        font-size: 24px;
    }
    
}

/* Responsive: en móvil, apila verticalmente */
@media (max-width: 900px) {
    .character-gallery-fant-row {
        min-height: 40vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

      .character-info-fixed-fant {
        position: absolute;
        width: 95vw;
        max-width: 95vw;
        margin: 10px auto 0 auto;
        top: unset;
        left: unset;
        right: unset;
        border-radius: 12px;
        font-size: 16px;
        padding: 16px 8px;
        order: 2; /* Asegura que el cuadro de texto vaya después de la galería */
    }

    .arrow-fant {
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.left-arrow-fant {
    left: 20px;
}

.right-arrow-fant {
    right: 20px;
}

.arrow-fant:hover {
    background-color: #333;
}

    .gallery-container-fant {
        width: 100%;
        justify-content: center;
        padding-left: 0;
    }
    .character-image-fant {
        width: 100vw;
        max-width: 100vw;
    }

    .gallery-container-fant {
        justify-content: center;
        padding-left: 0;
    }
    .character-slide-fant {
        margin-left: 0;
        justify-content: center;
        align-items: center;

    }
    .character-background-fant {
        width: 50%;
        height: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .character-image-fant {
        left: 50%;
        transform: translateX(-50%);
        position: relative;
        margin:0 auto;
        display: block;
    }

        .character-info-fixed-fant {
        display: none !important;
    }
    .character-info-fixed-fant-mobile {
        display: block;
        text-align: center;
    }
}

/*
 ::::::::   ::::::::  :::::::::  :::::::::  ::::::::::               ::::    ::::  ::::::::::: 
:+:    :+: :+:    :+: :+:    :+: :+:    :+: :+:                      +:+:+: :+:+:+     :+:     
+:+        +:+    +:+ +:+    +:+ +:+    +:+ +:+                      +:+ +:+:+ +:+     +:+     
+#++:++#++ +#+    +:+ +#++:++#+  +#++:++#:  +#++:++#   +#++:++#++:++ +#+  +:+  +#+     +#+     
       +#+ +#+    +#+ +#+    +#+ +#+    +#+ +#+                      +#+       +#+     +#+     
#+#    #+# #+#    #+# #+#    #+# #+#    #+# #+#                      #+#       #+#     #+#     
 ########   ########  #########  ###    ### ##########               ###       ### ########### 
*/

/* SOBRE MÍ Y EASTER EGG */
/* Desde línea 2300 hasta 2597 */

.sobremi {
    display: flex;
    width: 100%;
}

.sobremi-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90vh;
    width: 50%;
    background-color: #1c1c1c;
}

.polaroid-container {
    position: relative;
    width: 100%;
    height: 430px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px; /* <-- Añade este margen para bajarlo */
}

.polaroid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(6deg);
    z-index: 2;
    transition: transform 0.3s, top 0.5s;
    height: 430px;
    background-color: #fff;
    padding: 10px;
    display: flex;
    align-items: start;
    will-change: transform;
}

.polaroid:hover {
    cursor: pointer;
}

.polaroid.lifted {
    top: -500px;
    transform: translate(-50%, -50%) rotate(0deg);
}

.polaroid.clicked {
    transform: translate(-50%, -50%) rotate(-6deg);
}

.foto-polaroid {
    height: 350px;
    display: block;
    margin: 0 auto;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 320px;
    margin: 0;
    opacity: 1;
    transition: opacity 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#display {
    width: 210px; /* 3 columnas de 60px + 2 gaps de 8px = 188px */
    font-size: 3em;
    color: #000000;
    text-align: right;
    margin-bottom: 16px;
    font-family: CustomFont, 'Courier New', Courier, monospace;
    padding: 8px;
    border: 2px solid #8b4513;
    border-radius: 5px;
    background-color: #303e30;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    transition: width 0.3s;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 70px);
    grid-gap: 10px;
    justify-content: center;
    z-index: 1;
}

.keypad.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.keypad .key:hover {
    background-color: #deb887;
}

.keypad.disabled .key:hover {
    background-color: #919191;
}

.key {
    width: 60px;
    height: 50px;
    font-size: 1em;
    font-weight: 700;
    background-color: #919191;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.key:hover {
    background-color: #deb887;
}

.key:active {
    background-color: #cd853f;
    transform: translateY(2px);
}

#delete::before {
    content: '←';
    font-size: 1.5em;
}

.error-message {
    font-size: 2em;
    color: red;
    margin-top: 20px;
    height: 40px;
}

.blink {
    animation: blink-animation 0.5s steps(2, start) infinite;
}

#display.blink {
    animation: text-blink 0.5s steps(2, start) infinite;
}

@keyframes text-blink {
    50% {
        color: transparent;
    }
}

.social-links-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: end;
    padding-bottom: 5vh;
    height: 20vh;
    width: 100%;
}

.sobremi-2 {
    display: block;
    height: 90vh;
    width: 50%;
    background-color: #1c1c1c;
}

.titulo-sobremi {
    display: flex;
    height: 40vh;
    font-size: 50px;
    font-weight: 600;
    color: white;
    letter-spacing: -3px;
    align-items: end;
    padding-bottom: 5vh;
    padding-left: 4rem;
}

.bio-sobremi {
    color: white;
    text-align: justify;
    width: 100%;
    height: 40vh;
    padding-left: 4rem;
    padding-right: 38%;
    font-size: 16px;
}

@media (max-width:1200px) {
    .bio-sobremi {
        padding-right: 10%;
    }
}

@media (max-width:820px) {
    .sobremi {
        display: block;
    }
    .sobremi-1 {
        display: flex;
        width: 100%;
        height: 50vh;
    }
    .sobremi-2 {
        width: 100%;
        height: 500px;
    }
    .titulo-sobremi {
        display: flex;
        width: 100%;
        height: auto;
        padding-left: 0%;
        font-size: 30px;
        align-items: start;
        padding-top: 2rem;
        justify-content: center;
    }
    .bio-sobremi {
        width: 100%;
        font-size: 14px;
        padding-right: 10%;
        padding-left: 10%;
    }
    .polaroid-container {
        width: 100%;
    }
    .social-links-container {
        width: 100%;
        height: 60vh;
    }
    .polaroid {
        height: 250px;
    }
    .foto-polaroid {
        height: 200px;
    }

    .container {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: 90vw;
        margin-top:20px;
        margin: 50px auto 0 auto; /* Baja el teclado y lo centra */
        padding-bottom: 20px;
    }

    #display {
        width: 218px;
        min-width: 0;
        font-size: 2em;
        margin-bottom: 12px;
        padding: 8px;
    }

    .keypad {
        grid-template-columns: repeat(3, 70px);
        grid-gap: 8px;
        width: 100%;
        justify-content: center;
    }

    .key {
        width: 100%;
        min-width: 0;
        height: 40px;
        font-size: 1em;
    }
}

.background-color-success{
    background-image: linear-gradient(135deg, #7b8985, #1e1e1e);
}

.success-message{
    width: 80%;
    height: 90vh;
    display: flex;
    font-family: Anton;
    font-size: 150px;
    margin-bottom: 100px;
    line-height: 0.9;
    justify-content: center;
    text-align: center;
    top:120px;
    align-items: start;
    color: white;
    position: absolute;
}

.success-subtitle{
    width: 80%;
    max-height: 90vh;
    display: flex;
    font-family: KeplerItalic;
    font-size: 25px;
    margin-bottom: 100px;
    line-height: 0.9;
    justify-content: center;
    text-align: center;
    top:40vh;
    align-items: start;
    color: rgb(196, 196, 196);
    position: absolute;
}

.success-logo{
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: auto;
    max-height: 90vh;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.success-image{
    position: relative;
    width: 80%;
    min-height: 90vh;
    background-position: end;
    object-fit: contain;
    margin: auto;
}

@media (max-width: 820px) {
    .success-message {
        min-height: 100vh;
        font-size: 80px;
        top: 130px;
    }
    .success-subtitle {
        font-size: 20px;
        top: 270px;
        height: 90vh;
    }
    .success-logo {
        width: 90%;
        max-height: 70vh;
    }
    .success-image {
        min-height: 40vh;
        width: 100%;
        margin-top: 300px;
        height: auto;
    }
    
}

/*
::::::::::  ::::::::  ::::    ::: :::::::::   ::::::::   ::::::::  
:+:        :+:    :+: :+:+:   :+: :+:    :+: :+:    :+: :+:    :+: 
+:+        +:+    +:+ :+:+:+  +:+ +:+    +:+ +:+    +:+ +:+        
:#::+::#   +#+    +:+ +#+ +:+ +#+ +#+    +:+ +#+    +:+ +#++:++#++ 
+#+        +#+    +#+ +#+  +#+#+# +#+    +#++#+    +#+        +#+ 
#+#        #+#    #+# #+#   #+#+# #+#    #+# #+#    #+# #+#    #+# 
###         ########  ###    #### #########   ########   ########  
*/

#fondos {
  padding:20px;
    padding-top: 60px;
}

.fondos-grid {
  justify-content: center;
  width: 80%;
  margin: auto;
  padding-top: 60px;
  column-count: 3;           /* Cambia el número de columnas según prefieras */
  column-gap: 15px;
}

.fondo-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 15px;
  position: relative;
}

.fondo-item img {
  width: 100%;               /* Ocupa todo el ancho de la columna */
  height: auto;
  object-fit: contain;
  cursor: pointer;
  border: 2px solid white;
  border-radius: 10px;
  display: block;
}

.fondo-item.active img {
  filter: brightness(0.5);
  transition: filter 0.2s;
}

.opciones-descarga {
  display: none;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  gap: 10px;
  background: rgba(0,0,0,0.7);
  padding: 15px;
  border-radius: 10px;
  z-index: 2;
}

.opciones-descarga button {
  color: #fff;
  width: 200px;
  background: transparent;
  border: 2px solid #fff;
  padding: 8px 16px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: -1px;
  font-family: Inter;
  transition: background 0.3s, color 0.3s;
}

.opciones-descarga button:hover {
  background: #fff;
  color: #000;
}

.fondo-item.active .opciones-descarga {
  display: flex;
}

@media (max-width: 1200px) {
  .fondos-grid {
    column-count: 2;         /* Cambia el número de columnas para pantallas más pequeñas */
    column-gap: 15px;
}

@media (max-width: 768px) {
  .fondos-grid {
    column-count: 2;         /* Cambia el número de columnas para pantallas más pequeñas */
    column-gap: 10px;
    width: 100%;
  }

  .fondo-item img {
    width: 100%;
    max-width: 100vw;
  }

    .opciones-descarga {
        width: 250px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px;
        border-radius: 10px;
    }

  .opciones-descarga button {
    width: 100%;
    font-size: 16px;
    padding: 12px 0;
  }
    
  .fondos-grid {
    column-count: 1;
    column-gap: 0;
  }

  .fondo-item {
    margin-bottom: 20px;
  }

  .fondo-item img {
    width: 100%;
    max-width: 100vw;
  }

  .opciones-descarga button {
    width: 100%;
    font-size: 18px;
  }
}
}


/*
 ::::::::   ::::::::  ::::    ::: :::::::::::     :::      ::::::::  :::::::::::  ::::::::  
:+:    :+: :+:    :+: :+:+:   :+:     :+:       :+: :+:   :+:    :+:     :+:     :+:    :+: 
+:+        +:+    +:+ :+:+:+  +:+     +:+      +:+   +:+  +:+            +:+     +:+    +:+ 
+#+        +#+    +:+ +#+ +:+ +#+     +#+     +#++:++#++: +#+            +#+     +#+    +:+ 
+#+        +#+    +#+ +#+  +#+#+#     +#+     +#+     +#+ +#+            +#+     +#+    +#+ 
#+#    #+# #+#    #+# #+#   #+#+#     #+#     #+#     #+# #+#    #+#     #+#     #+#    #+# 
 ########   ########  ###    ####     ###     ###     ###  ########      ###      ########  
*/

.desc-contacto{
    display: flex;
    padding-right: 38%;
    padding-left: 4rem;
    PADDING-top: 20px;
    text-align: justify;
    color: #f6f6f6;
}

/* Estilo del botón */
.boton-contacto{
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 4rem;
    margin-right: 38%;
    background-color: transparent;
    width: 56%;
    color: #f6f6f6;
    padding: 10px 15px;
    border: 2px solid white;
    border-radius: 50px;
    font-size: 16px;
    padding:16px;
    transition: all 0.5s;
}

.titulo-contacto{
    display: flex;
    color: white;
    font-size: 50px;
    font-weight: 600;
    letter-spacing: -3px;
    padding-left: 53%;
}

.boton-contacto:hover {
    cursor: pointer;
    background-color: #f6f6f6;
    color: black;
}

@media (max-width:1200px) {
    .desc-contacto{
        padding-right: 10%;
    }

    .boton-contacto{
        margin-right: 10%;
        width: 77%;
    }
}

@media (max-width:820px) {

    .titulo-contacto{
        display: flex;
        padding-left: 0%;
        padding-right: 0%;
        justify-content: center;
        font-size: 30PX;
    }

    .boton-contacto{
        width: 80%;
        margin-left: 10%;
    }

    .desc-contacto{
        width: 100%;
        padding-left: 10%;
        padding-right: 10%;
        font-size: 14px;
    }
}

.contacto1{
    display: flex;
    width:100% ;
    height:auto;
    background-color: #1C1C1C;
}

.contacto1-1{
width:50%
}

.contacto1-2{
width:50%;
}

@media (max-width:820px) {
.contacto1{
    display: block;
}

    .contacto1-1{
display: none;
width:100%;
    }

    .contacto1-2{
width:100%;
    }
    
}

/*
::::::::::  ::::::::   ::::::::  ::::::::::: :::::::::: :::::::::  
:+:        :+:    :+: :+:    :+:     :+:     :+:        :+:    :+: 
+:+        +:+    +:+ +:+    +:+     +:+     +:+        +:+    +:+ 
:#::+::#   +#+    +:+ +#+    +:+     +#+     +#++:++#   +#++:++#:  
+#+        +#+    +#+ +#+    +#+     +#+     +#+        +#+    +#+ 
#+#        #+#    #+# #+#    #+#     #+#     #+#        #+#    #+# 
###         ########   ########      ###     ########## ###    ### 
*/


.footer-container{
    max-width: 1200px;
    margin: 0 auto;
}

.footer{
    background-color: #1c1c1c;
    padding: 80px 0;
}

.footer-row{
    display:flex;
    flex-wrap: wrap;
}

.footer-links{
    width: 25%;
    padding: 0 15px;
}

.footer-links h4{
font-size: 20px;
color: white;
margin-bottom: 25px;
font-weight: 500;
border-bottom: 2px solid;
padding-bottom: 10px;
display: inline-block;
}

.footer-links ul li a{
    font-size: 18px;
    text-decoration: none;
    color: #BBBBBB;
    display: block;
    margin-bottom: 15px;
    transition: all .3s ease;
}

.footer-links ul li a:hover{
color: WHITE;
padding-left: 6px;
} 

.social-links{
    width: 100%;
}

.social-links a{
    display: inline-block;
    min-height: 20px;
    width: 20px;
    margin: 0px 30px 30px 0;
    text-align: center;
    line-height:40px;
    transition: all .5s ease;
}

.social-links a:hover{
padding-left: 6px;
}

.social-img{
    min-height: 20px;
    width: 30px;
    margin:0 10px 10px 0;
    justify-content: center;
}

@media(MAX-WIDTH:991PX){
.footer{
    padding: 40px;
}


    .footer-row{
        text-align:center;
    }

    .footer-links{
        width: 100%;
        margin-bottom: 40px;
    }

    .footer-links ul li a{
        font-size: 16px;
        margin-bottom: 10px;
    }

.social-img{
    margin: 0px 0px 0px 0px;
}

    .social-links a{
        margin: 0px 15px 0px 15px;
        justify-content: space-between;
    }

     }

/*
    :::     :::::::::  :::::::::   ::::::::  :::       :::               :::::::::   ::::::::  :::       ::: ::::    ::: 
  :+: :+:   :+:    :+: :+:    :+: :+:    :+: :+:       :+:               :+:    :+: :+:    :+: :+:       :+: :+:+:   :+: 
 +:+   +:+  +:+    +:+ +:+    +:+ +:+    +:+ +:+       +:+               +:+    +:+ +:+    +:+ +:+       +:+ :+:+:+  +:+ 
+#++:++#++: +#++:++#:  +#++:++#:  +#+    +:+ +#+  +:+  +#+ +#++:++#++:++ +#+    +:+ +#+    +:+ +#+  +:+  +#+ +#+ +:+ +#+ 
+#+     +#+ +#+    +#+ +#+    +#+ +#+    +#+ +#+ +#+#+ +#+               +#+    +#+ +#+    +#+ +#+ +#+#+ +#+ +#+  +#+#+# 
#+#     #+# #+#    #+# #+#    #+# #+#    #+#  #+#+# #+#+#                #+#    #+# #+#    #+#  #+#+# #+#+#  #+#   #+#+# 
###     ### ###    ### ###    ###  ########    ###   ###                 #########   ########    ###   ###   ###    #### 
*/

.arrow-down {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: rgb(255, 255, 255);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.arrow-down.hidden {
    opacity: 0;
    pointer-events: none;
}

/*
    :::     :::::::::  :::::::::   ::::::::  :::       :::               :::    ::: :::::::::  
  :+: :+:   :+:    :+: :+:    :+: :+:    :+: :+:       :+:               :+:    :+: :+:    :+: 
 +:+   +:+  +:+    +:+ +:+    +:+ +:+    +:+ +:+       +:+               +:+    +:+ +:+    +:+ 
+#++:++#++: +#++:++#:  +#++:++#:  +#+    +:+ +#+  +:+  +#+ +#++:++#++:++ +#+    +:+ +#++:++#+  
+#+     +#+ +#+    +#+ +#+    +#+ +#+    +#+ +#+ +#+#+ +#+               +#+    +#+ +#+        
#+#     #+# #+#    #+# #+#    #+# #+#    #+#  #+#+# #+#+#                #+#    #+# #+#        
###     ### ###    ### ###    ###  ########    ###   ###                  ########  ###        
*/
.scroll-to-top {
    position: fixed;
    border-radius: 50px;
    align-items: center;
    margin-left: 45%;
    width: 10%;
    text-align: center;
    bottom:120px;
    background-color: white;
    color: black;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    transform: translateY(100px); /* Comienza desplazada hacia abajo */
    opacity: 0; /* Invisible inicialmente */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.scroll-to-top.show {
    transform: translateY(0); /* Mover a su posición original */
    opacity: 1; /* Hacer visible */
}

.scroll-to-top:hover {
    background-color: #c2c2c2;
    color: black;
}

@media (max-width:820px) {
    .scroll-to-top{
        width: 20%;
        margin-right: 10%;
}
}

/*
:::         ::::::::      :::     :::::::::  :::::::::: :::::::::  
:+:        :+:    :+:   :+: :+:   :+:    :+: :+:        :+:    :+: 
+:+        +:+    +:+  +:+   +:+  +:+    +:+ +:+        +:+    +:+ 
+#+        +#+    +:+ +#++:++#++: +#+    +:+ +#++:++#   +#++:++#:  
+#+        +#+    +#+ +#+     +#+ +#+    +#+ +#+        +#+    +#+ 
#+#        #+#    #+# #+#     #+# #+#    #+# #+#        #+#    #+# 
##########  ########  ###     ### #########  ########## ###    ### 
*/

.lds-image{
    position: relative;
    display: flex;
    justify-content: center;
    }
    
    .loader{
        background-color: #1c1c1c;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top:0;
        z-index: 10000;
        clip-path: inset(0 0 0 0);
        transition: clip-path 0.5s ease-in-out;
    }
    
    .loader2{
        clip-path: inset(50% 50% 50% 50%);
    }
    
    .cargando{
        font-family: Inter;
        font-weight: 600;
        font-size: 40px;
        color: white;
        letter-spacing:-2px;
        margin-top: 40px;
    }

    /* ---------------------- NUEVO NAV -------------------------------*/

    
/*
:::    ::: ::::::::::     :::     :::::::::  :::::::::: :::::::::  
:+:    :+: :+:          :+: :+:   :+:    :+: :+:        :+:    :+: 
+:+    +:+ +:+         +:+   +:+  +:+    +:+ +:+        +:+    +:+ 
+#++:++#++ +#++:++#   +#++:++#++: +#+    +:+ +#++:++#   +#++:++#:  
+#+    +#+ +#+        +#+     +#+ +#+    +#+ +#+        +#+    +#+ 
#+#    #+# #+#        #+#     #+# #+#    #+# #+#        #+#    #+# 
###    ### ########## ###     ### #########  ########## ###    ### 
*/

header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 10vh;
    color: white;
    background: linear-gradient(#121212, transparent);
    z-index: 1000;
    padding-right: 8%;
    padding-left: 8%;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    list-style: none;
    padding: 10px;
}

nav ul li a {
    display: flex;
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    transition: 0.5s;
}

nav ul li a:hover {
    color: #aaa;
}

.boton-menu {
    width: 120px;
    text-decoration: none;
    color: white;
    z-index: 10000;
}
@media screen and (max-width: 820px) {
/* Menú oculto */

header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.nav {
    position: absolute;
    display: flex;
    justify-content: start;
    align-items: start;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #1c1c1c;
    padding: 20px 0;
    transition: all 0.3s ease;
}

.nav ul {
    list-style: none;
    display: flex;
align-items: start;
margin-left: 10%;
margin-top: 20%;
}

.nav ul li {
    margin: 10px 0;
    text-align: start;
}

.nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 30px;}

/* Menú visible */
.nav.active {
    display: flex;
    transform: translateX(100%);
    text-align: start;
}
}

@media (max-width: 820px) {
    

    nav ul {
        display: flex;
        flex-direction: column;
    }
    
}


.hamburger {
    width: 30px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    border: none;
    background: none;
    z-index: 10000;
}

@media (min-width: 820px) {
    .hamburger {
        display: none;
    }
}

.hamburger span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Animación a "X" */
.hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}