/*
Theme Name: Bridge Child
Theme URI: https://apiloli.com
Description: Tema hijo de Bridge
Author: Ixulabs
Template: bridge
Version: 1.0.0
*/

@import url('../bridge/style.css'); 
p {
	line-height: normal;
}

#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #00313e;
    display: none;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#preloader-logo{
    display:block;
    width: 700px;
    height: 93px;
    opacity: 0;
    animation: fadeIn 1s ease-in-out 1s forwards;
}

#preloader-logo2{
    margin-top:35px;
    width: 280px;
    height: 63px;
    opacity: 0;
    animation: expandIn 1s ease-in-out 1.2s forwards;
}
/*
footer {
    display: none !important;
}
*/

.phase {
    display: none;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}

.tituloPreloader{
    opacity: 0;
    color: #1f3562;
    animation-delay: 0.5s;
    animation: fadeIn 0.5s ease-in-out forwards;
}

.subtituloPreloader{
    color: #78cacb;
    opacity: 0;
    animation: expandIn 1s ease-in-out 1.2s forwards;
}

#phase-1 {
    display: flex;
    flex-direction: column; /* Apila las imágenes verticalmente */
    align-items: center; /* Centra horizontalmente */
    justify-content: center;
    background-color: #00313e;
}

#preloader-subtitle {
    font-size: 20px;
    color: white;
    opacity: 0;
    animation-delay: 1s;
    animation: expandIn 0.5s ease-in-out 2s forwards;
}


#phase-2 {
    background-color: white;
    display: none;
    flex-direction: column;
}

#phase-3{
    background-color: #4d8198;
    display: none;
    flex-direction: column;
}

#phase-4{
    background-color: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 110px, #f8f8f8 110px, #f8f8f8 100%);
    display: none;
    flex-direction: column;
    width: 100vw;  /* Ocupa todo el ancho de la pantalla */
    height: 100vh; /* Ocupa todo el alto de la pantalla */
    position: relative; /* Para que los elementos hijos se posicionen dentro de este */
}


/* Fase 1 - Estilo inicial */
.fase-1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00313e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: transform 1s ease-in-out, opacity 0.5s ease-in-out;
}

/* Efecto de cortina: desaparece de abajo hacia arriba */
.fase-1.hide {
    transform: translateY(-100%);
    opacity: 0;
}

/* Fase 2 - Estilo inicial */
.fase-2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Aparecer fase 2 */
.fase-2.show {
    opacity: 1;
}

/* Inicia sección de CSS de la página inicial */

.contenidoSolar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40vh;
    margin: 0;
    background-color: #f4f4f4;
    padding: 20px;
}

.texto {
    width: 20%;
}

.sistema-solar, .second-sistema-solar {
    width: 80%;
    height: 20vh;
    position: relative;
    padding-left: 185px;
    display: flex;
}
.second-sistema-solar {
    width: 100%;
}
@media screen and (max-width: 1400px) {
	.sol, .second-sol {
		width: 400px;
		height: 400px;
	}
	..orbita1, .second-orbita1 {
		width: 525px;
		height: 525px;	
	}
	.orbita1, .second-orbita2 {
		width: 525px;
		height: 525px;	
	}
	.orbita1, .second-orbita3 {
		width: 650px;
		height: 650px;
	} 
}

.textoContenidoAbajo, .imgContenidoAbajo{
    width: 50%;
}

.textoContenidoAbajo{
    margin-top: 200px;
}

.imgContenidoAbajo{
    position: relative;
    z-index: 10;
}

.contentTextoFull{
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenidoAbajoCien{
    background-image: url('https://apiloli.com/wp-content/uploads/2025/02/Union-10@2x.png'); /* Reemplaza con la URL de tu imagen */
    background-size: cover;
    background-position: center;
    padding: 40px;
    text-align: center;
    height: 900px;
}


.orbita, .second-orbita {
    position: absolute;
    border: 2px solid #919bb1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.planeta, .second-planeta {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    transition: transform 1.5s linear;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0) 60%);
}

.sol, .second-sol {
    width: 500px;
    height: 500px;
    background-color: #4d8198;
    border-radius: 50%;
    position: absolute;
    bottom: 20px;
    right: 20px; 
    background: radial-gradient(circle at 100px 100px, #5cabff, #000), #4d8198;
}


.solMovimiento{
    width: 500px;
    height: 500px;
    background-color: #4d8198;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el círculo perfectamente */
    background: radial-gradient(circle at 100px 100px, #5cabff, #000), #4d8198;
}


/* Tamaños de órbitas */
 .orbita1, .second-orbita1 { width: 800px; height: 800px; bottom: -125px; right: -125px; } 
 .orbita2, .second-orbita2 { width: 1050px; height: 1050px; bottom: -250px; right: -250px; } 
 .orbita3, .second-orbita3 { width: 1300px; height: 1300px; bottom: -380px; right: -380px; } 

/* Planetas */
.planeta1, .second-planeta1 { background-color: #ef5005; top: 7%; left: 77%; transform-origin: -75px center; }
.planeta2, .second-planeta2 { background-color: #ffa004; top: 94%; left: 57%; transform-origin: -150px center; }
.planeta3, .second-planeta3 { background-color: #2c3e62; top: 21%; left: 3%; transform-origin: -225px center; }

/* Animación de planetas */
@keyframes orbitar {
    from { transform: rotate(0deg); }
    to { transform: rotate(120deg); }
}

.orbita1, .second-orbita1 { animation: none; }
.orbita2, .second-orbita2 { animation: none; }
.orbita3, .second-orbita3 { animation: none; }


/* Termina sección de CSS de página inicial */

.contentTexto{
    padding-top: 230px;
    padding-left: 100px;
}

.contentTexto2{
    padding-top: 230px;
    padding-left: 100px;
    display: flex;
}

.imgContenidoRepetitivo{
    padding: 40px;
    text-align: center;
}

.imgRepetitivo{
    width: 280px;
    margin-left: 100px;
}


.botonScroll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.botonScroll h5 {
    z-index: 10;
    margin: 0;
}

.botonScroll img {
    transform: rotate(-90deg); /* Gira la flecha 90 grados hacia la derecha */
    z-index: 10;
    /*cursor: pointer; /* Cambia el cursor a "manita" */
}


.blanco{
    color: #FFFFFF;
}

.blancoFondo{
    background-color: #F8F8F8 !important;
}

.celeste{
    color: #78CACB;
}

.celesteFondo{
    background-color: #78CACB;
}

.amarillo{
    color: #FFBF00;
}

.amarilloFondo{
    background-color: #FFBF00;
}

.azul{
    color: #00313C;
}

.azulFondo{
    background-color: #00313C;
}

.grisFondo{
    background-color: #f0f0f1;
}


.ocultar-phase-1 {
    animation: cortinaArriba 1.5s ease forwards;
}

.mostrar-phase-2{
    animation: secondPhaseEntrance 1s ease forwards;
}

.ocultar-circulo{
    /*animation: fadeIn 0.3s ease forwards;*/
    /*animation: reducirCirculo 1s ease-in-out forwards;*/
    animation: cargaDesdeOrillas 0.1s ease-in-out forwards;
}


.mostrar-Sol{
    animation: moverSol 0.25s ease-in-out forwards; 
    
}

.circuloBlurLeft {
    width: 400px; /* Tamaño del círculo */
    height: 400px;
    border: 10px solid white; /* Borde blanco */
    border-radius: 50%; /* Forma circular */
    position: absolute;
    top: -10px; /* Ajuste para que se solape en la esquina */
    left: -10px;
    backdrop-filter: blur(10px); /* Efecto de desenfoque */
    background: rgba(255, 255, 255, 0.2); /* Fondo semitransparente */
    z-index: 15; /* Para que se vea sobre la imagen */
}

/* Tamaño más pequeño en móviles */


.circuloBlurRight {
    width: 400px; /* Tamaño del círculo */
    height: 400px;
    border: 10px solid white; /* Borde blanco */
    border-radius: 50%; /* Forma circular */
    position: absolute;
    top: -10px; /* Ajuste para que se solape en la esquina */
    left: 450px;
    backdrop-filter: blur(10px); /* Efecto de desenfoque */
    background: rgba(255, 255, 255, 0.2); /* Fondo semitransparente */
    z-index: 15; /* Para que se vea sobre la imagen */
}

.circuloBlurLeftMiramar{
    width: 400px; /* Tamaño del círculo */
    height: 400px;
    border: 10px solid white; /* Borde blanco */
    border-radius: 50%; /* Forma circular */
    position: absolute;
    top:  400px; /* Ajuste para que se solape en la esquina */
    left: -10px;
    backdrop-filter: blur(10px); /* Efecto de desenfoque */
    background: rgba(255, 255, 255, 0.2); /* Fondo semitransparente */
    z-index: 15; /* Para que se vea sobre la imagen */
}

@media screen and (max-width: 768px) {
    .circuloBlurLeft {
        width: 150px; /* Reducimos el tamaño del círculo */
        height: 150px;
        border: 5px solid white; /* Reducimos el grosor del borde */
        top: -5px; /* Ajustamos posición */
        left: -5px;
        backdrop-filter: blur(5px); /* Reducimos un poco el blur */
    }
    .circuloBlurRight {
        width: 150px; /* Reducimos el tamaño del círculo */
        height: 150px;
        border: 5px solid white; /* Reducimos el grosor del borde */
        top: -5px; /* Ajustamos posición */
        left: 200px; /* Ajustamos la posición para que no quede fuera de pantalla */
        backdrop-filter: blur(5px); /* Reducimos un poco el blur */
    }
    
    .circuloBlurLeftMiramar {
        width: 200px; /* Reducimos el tamaño del círculo */
        height: 200px;
        border: 5px solid white; /* Reducimos el grosor del borde */
        top: 200px; /* Ajustamos la posición para mantener proporción */
        left: -5px; /* Ajustamos para que siga alineado */
        backdrop-filter: blur(5px); /* Reducimos un poco el blur */
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .circuloBlurLeft {
        width: 300px; /* Tamaño intermedio del círculo */
        height: 300px;
        border: 8px solid white; /* Ajustamos el borde */
        top: -8px;
        left: -8px;
        backdrop-filter: blur(8px); /* Ajustamos el blur */
    }
    .circuloBlurRight {
        width: 300px; /* Tamaño intermedio del círculo */
        height: 300px;
        border: 8px solid white; /* Ajustamos el borde */
        top: -8px;
        left: 350px; /* Ajustamos la posición */
        backdrop-filter: blur(8px); /* Ajustamos el blur */
    }
    
    .circuloBlurLeftMiramar {
        width: 300px; /* Tamaño intermedio del círculo */
        height: 300px;
        border: 8px solid white; /* Ajustamos el borde */
        top: 300px; /* Ajustamos la posición */
        left: -8px;
        backdrop-filter: blur(8px); /* Ajustamos el blur */
    }
}

@media screen and (min-width: 1024px) and (max-width: 1400px) {
    
    .circuloBlurRight {
        width: 400px; /* Tamaño intermedio del círculo */
        height: 400px;
        border: 8px solid white; /* Ajustamos el borde */
        top: -10px;
        left: 240px; /* Ajustamos la posición */
        backdrop-filter: blur(8px); /* Ajustamos el blur */
    }
}

.animationFadeIn{
    animation: fadeIn 0.5s ease-in-out forwards;
}

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

@keyframes expandIn {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

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

@keyframes cortinaArriba {
    0% {
        transform: scaleY(1);
        transform-origin: top; /* Se repliega desde arriba */
        opacity: 1;
    }
    100% {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 0;
    }
}

@keyframes secondPhaseEntrance {
	0% {
		transform: scaleY(0.4);
		transform-origin: 0% 100%;
	}

	100% {
		transform: scaleY(1);
		transform-origin: 0% 100%;
	}
}

@keyframes cargaDesdeOrillas {
    0% {
        clip-path: inset(50% 50% 50% 50%); /* Solo se ven las orillas */
        opacity: 0;
    }
    50% {
        clip-path: inset(25% 25% 25% 25%); /* Se va revelando hacia el centro */
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0 0 0); /* Se muestra completamente */
    }
}

@keyframes moverSol {
    0% {
    width: 100vw;
    height: 100vh;
    background-color: #4d8198;
    border-radius: 0;
    opacity: 1;
  }
  /* 20%: Se transforma en círculo. Usamos 100vmin para que sea un cuadrado y, por tanto, un círculo perfecto */
  20% {
    width: 100vmin;
    height: 100vmin;
    border-radius: 50%;
    opacity: 1;
  }
  /* 60%: Reducción progresiva manteniendo la forma de círculo */
  60% {
    width: 600px;
    height: 600px;
    border-radius: 50%;
    opacity: 1;
  }
  /* 100%: Tamaño final 500px x 500px y se desvanece */
  
  95% {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    opacity: 1;
  }
  
  100% {
    width: 500px;
    height: 500px;
    border-radius: 50%;
  }
}

@keyframes reducirCirculo {
    0% {
        background-color: #4d8198; /* Todo el fondo azul */
        clip-path: circle(100%); /* Cubre toda la pantalla */
    }
    100% {
        background-color: #F8F8F8; /* Fondo blanco */
        clip-path: circle(250px at center); /* Solo un círculo en el centro */
    }
}